/* #117 — lớp đè của dự án, nạp SAU nc-components.css (bản chép nguyên văn design/export).
   KHÔNG sửa tệp mẫu: mọi khác biệt của sản phẩm nằm ở đây, để test trùng byte giữ được.

   Bản xuất đợt 2 của Claude Design đã BỎ nền ô vuông li (#117) và đã có sẵn khung nền ảnh
   [data-ui="bg"], nên tệp này hiện chỉ còn phần dự phòng: nếu một bản xuất sau lại mang lưới
   về thì hai dòng dưới vẫn tắt nó, mà không phải sửa tệp mẫu. */
html { --color-bg-grid: transparent; }
body { background-image: none; }

/* #122 (M 25/09, chủ dự án nêu "card đè nhau") — khoảng hở tối thiểu giữa hai thẻ kề nhau.

   [data-ui="card"] và [data-ui="card-static"] có `outline: 1px; outline-offset: 8px`, tức viền phụ
   vẽ RA NGOÀI hộp 8px về mọi phía. Hai thẻ cách nhau dưới 16px thì hai outline chồng lên nhau —
   nhìn ra đúng hiện tượng "đè nhau", rõ nhất khi hover/focus vì lúc đó outline đổi màu.

   Đo được trên CHÍNH tệp mẫu (Edge, 1400 px) — mẫu tự mâu thuẫn với chính nó:
     · dashboard/overview.html  → 28px (đủ rộng)
     · homepage.html, pricing.html, guide →  8px (khối hỏi–đáp: stack --g:8px với <details card-static>)
     · download.html, about.html → 14px (danh sách bước `ol gap:14px`, thẻ liên hệ `stack --g:14px`)

   Không sửa tệp mẫu (test trùng byte), nên nới ở đây. Chỉ nhắm **danh sách dọc một cột**
   ([data-ui="stack"] và <ol> đều là grid một cột) — không đụng lưới nhiều cột, vì ở đó margin-top
   sẽ làm các thẻ trong cùng hàng lệch nhau. +8px đủ cho cả hai nhóm: 8→16px, 14→22px.
   Bản xuất sau sửa gốc (đề nghị: --g ≥ 24px cho danh sách thẻ, hoặc bỏ outline khi thẻ xếp chồng)
   thì xoá khối này. */
[data-ui="stack"] > [data-ui="card"] + [data-ui="card"],
[data-ui="stack"] > [data-ui="card-static"] + [data-ui="card-static"],
ol > [data-ui="card"] + [data-ui="card"],
ul > [data-ui="card"] + [data-ui="card"] { margin-top: 8px; }

/* Lưới nhiều cột thì không dùng margin được (sẽ làm các thẻ cùng hàng lệch nhau), nên đặt **sàn**
   cho chính `gap`. Mẫu đặt `--gap` inline (ví dụ 4 ô số ở trang Bảng giá: `--min:150px;--gap:14px`),
   còn đây đặt thẳng `gap` nên thắng mà không cần !important. Lưới nào đã ≥ 16px giữ nguyên. */
[data-ui="grid"] { gap: max(var(--gap, 20px), 16px); }

/* #123 — khung chờ (skeleton). Bản xuất chỉ khai hiệu ứng vệt sáng chạy, không có nhánh nào cho
   người đã tắt chuyển động trong hệ điều hành. Với người nhạy cảm chuyển động thì cả một trang đầy
   vệt sáng chạy 1,6 giây một lượt là thứ gây khó chịu thật sự, nên tắt hẳn hiệu ứng và giữ mảng xám
   đứng yên — vẫn đủ nói "đang tải". Đề nghị bản xuất sau đưa hẳn vào design/export. */
@media (prefers-reduced-motion: reduce) {
  [data-skel]::after { animation: none; }
}

/* A (v5, #130 mục 6) — dropdown/menu nền trắng ở chế độ Tối. Mẫu chỉ tô gradient cho chính ô <select> (nền lúc đóng), còn DANH SÁCH thả xuống
   (<option>) là của trình duyệt: không có rule nào nên Chromium/Firefox vẽ nền trắng chữ đen trên nền tối. Đặt theo token để đổi theo Tối/Sáng/Tuỳ chỉnh;
   menu tài khoản / menu ngữ cảnh ([role="menu"], [data-ui="menu"]) cũng ép về surface + text (mẫu đã có, nhắc lại để không bị UA/extension đè).
   Không đụng btn/card/table/input (K-U11d). */
[data-ui="select"] option,
[data-ui="select"] optgroup { background-color: var(--color-surface); color: var(--color-text); }
[data-ui="select"]:-internal-autofill-selected { background-color: var(--color-surface); }
[data-ui="menu"], [role="menu"], [role="listbox"] { background-color: var(--color-surface); color: var(--color-text); }
[role="menu"] [role="menuitem"], [data-ui="menu"] [role="menuitem"] { color: var(--color-text); }
select, [data-ui="select"] { color-scheme: inherit; }

/* W3 v6 (#140) — carousel Hướng dẫn ([data-ui="carousel"], component NcCarousel + nc-carousel.js). Bản xuất Claude Design
   chưa có khối này nên khai ở lớp đè; chỉ dùng token của thiết kế (màu, bo góc, khoảng cách), không đụng btn/card/table/input.
   Slide xếp chồng cùng một ô lưới, slide đang chọn hiện, slide khác ẩn (visibility) để chiều cao khối = slide cao nhất → không
   nhảy bố cục khi chuyển. Thanh đếm 6 s: JS đặt width theo tỉ lệ đã trôi; tạm dừng thì thanh đứng yên. */
[data-ui="carousel"] { display: grid; gap: 16px; outline: none; position: relative; }
[data-ui="carousel"]:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--radius); }
[data-ui="carousel"] [data-slides] { display: grid; }
[data-ui="carousel"] [data-slide] { grid-area: 1 / 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(18px, 3vw, 36px); align-items: center;
  opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s; pointer-events: none; }
[data-ui="carousel"] [data-slide][data-active] { opacity: 1; visibility: visible; transition-delay: 0s; pointer-events: auto; }
[data-ui="carousel"] [data-slide-media] { display: grid; place-items: center; min-height: 160px; }
/* ảnh chụp 1280×800 trên màn 1920 cao ~560 px kéo cả khối (slide xếp chồng lấy chiều cao lớn nhất) → slide chỉ có biểu tượng
   trống nửa trên nửa dưới; trần 420 px + object-fit: contain giữ đúng tỉ lệ (đo ảnh w3-guide-*-1920, 27/09) */
[data-ui="carousel"] [data-slide-media] img { width: 100%; height: auto; max-height: 420px; object-fit: contain; display: block; border: 1px solid var(--color-border); border-radius: var(--radius); }
[data-ui="carousel"] [data-slide-media] [data-ui="tile"] { width: 96px; height: 96px; font-size: 40px; }
[data-ui="carousel"] [data-slide-body] { display: grid; gap: 10px; align-content: center; }
[data-ui="carousel"] [data-slide-body] ol, [data-ui="carousel"] [data-slide-body] ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
[data-ui="carousel"] [data-controls] { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
[data-ui="carousel"] [data-dots] { display: flex; gap: 8px; align-items: center; }
[data-ui="carousel"] [data-dot] { width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-surface-2); padding: 0; cursor: pointer; transition: background .3s, transform .3s; }
[data-ui="carousel"] [data-dot]:hover { transform: scale(1.2); }
[data-ui="carousel"] [data-dot][aria-current="true"] { background: var(--color-accent); border-color: var(--color-accent); }
[data-ui="carousel"] [data-dot]:focus-visible { box-shadow: var(--focus-ring); outline: none; }
[data-ui="carousel"] [data-bar-track] { height: 3px; border-radius: 999px; background: var(--color-surface-2); overflow: hidden; }
[data-ui="carousel"] [data-bar] { display: block; height: 100%; width: 0; background: var(--color-accent); transition: width .12s linear; }
[data-ui="carousel"][data-paused] [data-bar] { opacity: .5; }
[data-ui="carousel"] [data-live] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (prefers-reduced-motion: reduce) {
  [data-ui="carousel"] [data-slide] { transition: none; }
  [data-ui="carousel"] [data-bar] { transition: none; }
}

/* A5 v8 — hộp chọn NHIỀU (NcMultiSelect, dựng trên NcMenu Trigger + KeepOpen). Bản xuất Claude Design chưa có khối này nên khai ở lớp đè;
   chỉ token (màu, bo góc), không đụng btn/card/table/input. Nút mở dùng lại data-ui="select" của mẫu (mũi tên + nền ô chọn) nhưng là <button>
   nên canh chữ trái, cắt "…". Lớp phủ trong suốt .nc-menu-scrim nằm dưới khung menu (z-index 60 của mẫu) để bấm ra ngoài là đóng. */
.nc-menu-trigger { display: flex; align-items: center; text-align: left; min-width: 180px; max-width: 100%; cursor: pointer; }
.nc-menu-trigger .nc-ms-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nc-menu-scrim { position: fixed; inset: 0; z-index: 59; }
[data-ui-multi] [data-ui="menu"] { left: 0; right: auto; min-width: 280px; transform-origin: top left; }
/* 0.2.173 (chủ dự án 29/09: chọn sản phẩm trong hộp Voucher bị cắt): thân hộp thoại overflow:auto cắt menu định vị tuyệt đối → TRONG hộp thoại,
   menu chọn nhiều nằm trong dòng ngay dưới ô chọn (đẩy nội dung xuống, thân hộp tự cuộn) — không còn bị cắt ở mép dưới. */
[data-ui="dialog"] [data-ui-multi] [data-ui="menu"][data-open] { position: relative; top: auto; left: auto; right: auto; margin-top: 8px; width: 100%; }
[data-ui="dialog"] [data-ui-multi] { display: block; }
[data-ui="dialog"] [data-ui-multi] .nc-ms-list { max-height: 240px; }
.nc-ms { display: grid; gap: 6px; }
.nc-ms-actions { display: flex; gap: 4px; }
.nc-ms-actions > button { flex: 1 1 0; justify-content: center; min-height: 32px; }
.nc-ms-list { display: grid; gap: 2px; max-height: 320px; overflow-y: auto; overscroll-behavior: contain; }
.nc-ms-item { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 10px; border-radius: var(--radius); cursor: pointer; font-size: 14px; }
.nc-ms-item:hover, .nc-ms-item:focus-within { background: var(--color-surface-2); }
.nc-ms-item > input { accent-color: var(--color-accent); width: 16px; height: 16px; flex: none; }
.nc-ms-group { padding: 8px 10px 2px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-muted); }
.nc-ms-empty { padding: 10px; font-size: 13px; color: var(--color-text-muted); }

/* A6 v8 — hộp thoại cỡ "full" (NcDialog Size=NcSize.Full): gần toàn màn hình, chừa lề an toàn 16px mỗi bên (8px ở màn hẹp);
   mẫu chỉ có 520/680/980 nên khai ở lớp đè. Chiều cao giữ max-height của mẫu (100dvh - 32px), thân hộp tự cuộn dọc. */
[data-ui="dialog"][data-size="full"] { width: calc(100% - 32px); max-width: none; }
@media (max-width: 560px) { [data-ui="dialog"][data-size="full"] { width: calc(100% - 16px); } }
/* A12 — hộp thoại cỡ "auto" (NcDialog Size=NcSize.Auto): rộng theo nội dung, không nhỏ hơn 640px và không giãn quá 1100px (luôn chừa lề như các cỡ của mẫu).
   Bảng rộng bên trong phải bọc [data-ui=table-wrap] để tự cuộn ngang thay vì kéo giãn hộp. Màn hẹp: gần hết bề ngang như "full". */
[data-ui="dialog"][data-size="auto"] { width: fit-content; min-width: min(640px, calc(100% - 24px)); max-width: min(1100px, calc(100% - 32px)); }
@media (max-width: 560px) { [data-ui="dialog"][data-size="auto"] { width: calc(100% - 16px); min-width: 0; max-width: none; } }

/* 07/10/2026 (chủ dự án): web khách ở chế độ SÁNG — "nền quá mờ". Mẫu phủ màu nền 58 % → 78 % → 94 % lên ảnh game nên ảnh gần như
   trắng xoá, thẻ trắng lẫn vào nền. Giảm lớp phủ còn 22 % → 34 % → 55 % (chủ dự án 07/10: "mỏng hơn nữa để ảnh rõ hơn"; lần 1: 38/50/72) cho nền ĐẦY ĐỦ (Strong, không data-dim — web khách); bản nhạt
   (data-dim, admin) giữ nguyên. Chữ vẫn đọc tốt: chữ nằm trên thẻ kính mờ (portal.css), chữ đặt thẳng trên nền có quầng sáng
   (text-shadow theo --color-bg trong portal.css). Theme tối không đổi. */
html[data-theme="light"] [data-ui="bg"]:not([data-dim])::after,
html[style*="f3f5f9"] [data-ui="bg"]:not([data-dim])::after {
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-bg) 22%, transparent) 0%, color-mix(in srgb, var(--color-bg) 34%, transparent) 45%, color-mix(in srgb, var(--color-bg) 55%, transparent) 100%);
}

/* ===== PHA 3 (22/10/2026): BỘ LOGO GOVA CHÍNH THỨC (design/brand/gova — master SVG, tệp ở wwwroot/brand do build_product.py sinh) =====
   [data-ui="brand"] của bản thiết kế vẽ ô vuông tạm (<b> viền + chấm). Nay: <b> = biểu tượng GOVA (gradient), chữ "GOVA" trong [data-label]
   vẽ bằng WORDMARK chính thức (mặt nạ, tô màu chữ của theme → đúng ở Sáng/Tối/Tuỳ chỉnh); chữ vẫn nằm trong DOM cho trình đọc màn hình.
   Không đổi display của [data-label] (bản thiết kế ẩn nó khi thanh bên thu gọn). Tỉ lệ wordmark = viewBox 424,14 × 100. */
[data-ui="brand"] > b { width: 24px; height: 27px; border: 0; border-radius: 0; background: url("brand/gova-icon.svg") center / contain no-repeat; }
[data-ui="brand"] > b::after { content: none; }
[data-ui="brand"] [data-label] { font-size: 0; line-height: 1; }
[data-ui="brand"] [data-label]::before,
.gv-word { content: ""; display: inline-block; vertical-align: middle; height: 15px; aspect-ratio: 424.14 / 100; background: var(--color-text);
  -webkit-mask: url("brand/gova-wordmark.svg") center / contain no-repeat; mask: url("brand/gova-wordmark.svg") center / contain no-repeat; }
[data-ui="brand"] [data-label] > * { font-size: 13px; margin-left: 7px; vertical-align: middle; }
.gv-word { font-size: 0 !important; color: transparent !important; margin-right: 6px; }