/* NBK Design — Responsive toàn trang.
   Chiến lược: (1) lớp an toàn chống tràn ngang + media co giãn (áp mọi nơi, KHÔNG đổi layout);
   (2) tiện ích ẩn/hiện theo thiết bị -> import section riêng cho mobile, ẩn section desktop
   không phù hợp. Dùng bằng cách thêm class vào ô "CSS Classes" của Section/Container. */

/* ================= 1. LỚP AN TOÀN (mọi thiết bị) ================= */
/* overflow-x:clip (không tạo scroll-container) để KHÔNG phá position:sticky của header */
html { overflow-x: clip; }
img, svg, video, canvas { max-width: 100%; height: auto; }
iframe, embed, object { max-width: 100%; }
.elementor, .e-con, .elementor-widget, .elementor-widget-container { max-width: 100%; min-width: 0; }
:where(p, h1, h2, h3, h4, h5, h6, li, a, span, blockquote, figcaption) { overflow-wrap: break-word; }
:where(.entry-content, .e-con) table { display: block; max-width: 100%; overflow-x: auto; }

/* ================= 2. TIỆN ÍCH ẨN/HIỆN THEO THIẾT BỊ =================
   Thêm 1 trong các class sau vào Section/Container (Advanced -> CSS Classes):
     nbk-hide-mobile   : ẩn ở điện thoại (≤767px)
     nbk-hide-tablet   : ẩn ở tablet (768–1024px)
     nbk-hide-desktop  : ẩn ở desktop (≥1025px)
     nbk-only-mobile   : CHỈ hiện ở điện thoại (ẩn tablet + desktop)
     nbk-only-tablet   : CHỈ hiện ở tablet
     nbk-only-desktop  : CHỈ hiện ở desktop (ẩn tablet + mobile)
   Ví dụ: section desktop gắn "nbk-hide-mobile", section mobile import gắn "nbk-only-mobile". */
@media (max-width: 767px)  { .nbk-hide-mobile  { display: none !important; } }
@media (min-width: 768px) and (max-width: 1024px) { .nbk-hide-tablet { display: none !important; } }
@media (min-width: 1025px) { .nbk-hide-desktop { display: none !important; } }

@media (min-width: 768px)  { .nbk-only-mobile  { display: none !important; } }
@media (max-width: 767px), (min-width: 1025px) { .nbk-only-tablet { display: none !important; } }
@media (max-width: 1024px) { .nbk-only-desktop { display: none !important; } }

/* ================= 3. (TÙY CHỌN) ÉP XẾP DỌC TRÊN MOBILE =================
   Thêm class "nbk-stack-mobile" vào 1 Container flex để cột con xếp dọc ở điện thoại. */
@media (max-width: 767px) {
	.nbk-stack-mobile.e-con.e-flex, .nbk-stack-mobile .e-con.e-flex { flex-direction: column; }
	.nbk-stack-mobile .elementor-column { width: 100% !important; }
}