/* =========================================================================
   cqtt81.vn – giao diện công khai (bản rà soát UX/UI 29/10/2026)
   Ý tưởng: "hồ sơ chính thức". Trang trắng, nhiều khoảng thở; màu xanh tím
   than của ấn tín làm màu chủ đạo; vàng viền ấn tín chỉ dùng cho nét nhấn
   (gạch dưới mục đang chọn, nhãn mới). Tin bài dẫn bằng ảnh; chữ nội dung
   bài dùng chữ có chân cho dễ đọc bài dài; giao diện dùng Be Vietnam Pro.
   Liên kết trong danh sách, thẻ tin không gạch chân; chỉ gạch chân trong
   đoạn văn.
   ========================================================================= */

@font-face { font-family: "Be Vietnam Pro"; src: url("../fonts/be-vietnam-pro-Regular.woff2") format("woff2"), url("../fonts/be-vietnam-pro-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Be Vietnam Pro"; src: url("../fonts/be-vietnam-pro-Medium.woff2") format("woff2"), url("../fonts/be-vietnam-pro-Medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Be Vietnam Pro"; src: url("../fonts/be-vietnam-pro-SemiBold.woff2") format("woff2"), url("../fonts/be-vietnam-pro-SemiBold.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Be Vietnam Pro"; src: url("../fonts/be-vietnam-pro-Bold.woff2") format("woff2"), url("../fonts/be-vietnam-pro-Bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("../fonts/source-serif-4-Regular.woff2") format("woff2"), url("../fonts/source-serif-4-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("../fonts/source-serif-4-SemiBold.woff2") format("woff2"), url("../fonts/source-serif-4-SemiBold.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("../fonts/source-serif-4-Italic.woff2") format("woff2"), url("../fonts/source-serif-4-Italic.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --navy: #201D55;          /* vòng ngoài ấn tín */
  --navy-deep: #15133C;
  --navy-soft: #ECEBF6; --head-ink: #201D55; --head-hover: #DCDAEE;
  --topbar-bg: #ECEDF2; --topbar-line: #DCDDE6; --topbar-line-strong: #C6C8D6; --topbar-ink: #3D4058; --topbar-strong: #1B1A2E; --topbar-hover: #201D55;
  --gold: #C99A2E;          /* viền ấn tín: chỉ dùng cho nét */
  --gold-wash: #FBF4E2;
  --gold-ink: #7A5810;      /* chữ vàng đủ tương phản trên nền sáng */
  --paper: #FFFFFF;
  --mist: #F4F5F9;
  --line: #E3E4EE;
  --line-strong: #CDCFE0;
  --ink: #191A2C;
  --slate: #595D74;
  --link: #2B2794;
  --alert: #B42318;
  --alert-wash: #FDEDEB;
  --band-ink: #F3F2FF;
  --band-quiet: #C3C1E6;
  --focus: #C99A2E;

  --font-ui: "Be Vietnam Pro", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-text: "Source Serif 4", "Noto Serif", Georgia, "Times New Roman", serif;
  /* Thang cỡ chữ hạ một nấc cho gần cảm giác trang cũ (31/10/2026). Trang cũ nhỏ hơn nữa –
     tiêu đề khối chỉ 14,6px, nhỏ hơn cả chữ thường – nên không hạ xuống tới mức đó. */
  --fs-xs: 0.75rem;     /* 12, trước 13 */
  --fs-sm: 0.875rem;    /* 14, trước 15 */
  --fs-md: 1rem;        /* 16, trước 17 */
  --fs-lg: 1.15rem;     /* 18,4 – trước 20 */
  --fs-xl: 1.4375rem;   /* 23, trước 26 */
  --fs-2xl: 1.875rem;   /* 30, trước 34 */
  --fs-3xl: clamp(1.75rem, 1.2rem + 1.9vw, 2.5rem); /* 28–40, trước 32–44 */

  --wrap: 78rem;
  --radius: 8px;
  --radius-sm: 6px;
  --gutter: max(20px, env(safe-area-inset-left, 0px));
  --gutter-r: max(20px, env(safe-area-inset-right, 0px));
  --gap: 26px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --navy: #2C2970; --navy-deep: #1A1846; --navy-soft: #24224A; --head-ink: #ECEBF7; --head-hover: #302D5E; --topbar-bg: #1C1B2C; --topbar-line: #2A2940; --topbar-line-strong: #3E3C5E; --topbar-ink: #C9CADB; --topbar-strong: #F1F1F8; --topbar-hover: #FFFFFF;
    --gold: #DDB04C; --gold-wash: #2B2414; --gold-ink: #E8C46E;
    --paper: #121120; --mist: #1A192C; --line: #2F2D49; --line-strong: #3E3C5E;
    --ink: #ECEBF7; --slate: #A9AAC4; --link: #B8B4FF;
    --alert: #F7867C; --alert-wash: #3A1B18;
    --band-ink: #F3F2FF; --band-quiet: #B9B7DF; --focus: #DDB04C;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --navy: #2C2970; --navy-deep: #1A1846; --navy-soft: #24224A; --head-ink: #ECEBF7; --head-hover: #302D5E; --topbar-bg: #1C1B2C; --topbar-line: #2A2940; --topbar-line-strong: #3E3C5E; --topbar-ink: #C9CADB; --topbar-strong: #F1F1F8; --topbar-hover: #FFFFFF;
  --gold: #DDB04C; --gold-wash: #2B2414; --gold-ink: #E8C46E;
  --paper: #121120; --mist: #1A192C; --line: #2F2D49; --line-strong: #3E3C5E;
  --ink: #ECEBF7; --slate: #A9AAC4; --link: #B8B4FF;
  --alert: #F7867C; --alert-wash: #3A1B18;
  --band-ink: #F3F2FF; --band-quiet: #B9B7DF; --focus: #DDB04C;
  color-scheme: dark;
}

/* ---- Nền tảng ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
h1, h2, h3 { text-wrap: balance; margin: 0; line-height: 1.25; color: var(--ink); }
p { margin: 0; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-left: var(--gutter); padding-right: var(--gutter-r); }
.tnum { font-variant-numeric: tabular-nums; }
.skip-link { position: absolute; left: -999px; top: 8px; background: var(--paper); padding: 8px 12px; z-index: 50; }
.skip-link:focus { left: 16px; }
.muted { color: var(--slate); }
.mt { margin-top: 20px; }

/* Ảnh chưa có (ảnh đại diện trống): nền dịu, không để khối màu đậm */
.thumb-empty { background: var(--mist); border-radius: var(--radius-sm); }

/* ---- Dải trên cùng ---------------------------------------------------- */
/* Dải trên cùng nền xám nhạt (29/10/2026): không tách đầu trang thành dải tối; chữ xám đậm, rê chuột thành xanh đậm */
.topbar { background: var(--topbar-bg); color: var(--topbar-ink); font-size: var(--fs-xs); border-bottom: 1px solid var(--topbar-line); }
.topbar .wrap { display: flex; gap: 16px; align-items: center; justify-content: space-between; min-height: 34px; }
.topbar__links { display: flex; gap: 18px; align-items: center; margin-left: auto; }
.topbar a { color: var(--topbar-ink); text-decoration: none; font-weight: 500; }
.topbar a:hover { color: var(--topbar-hover); text-decoration: underline; }
.topbar__user { color: var(--topbar-strong); font-weight: 700; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar__logout { display: inline; margin: 0; }
.topbar__logout button { font: inherit; font-weight: 500; color: var(--topbar-ink); background: none; border: 0; padding: 0; cursor: pointer; }
.topbar__logout button:hover, .topbar__logout button:focus-visible { color: var(--topbar-hover); text-decoration: underline; }
.lang { display: inline-flex; border: 1px solid var(--topbar-line-strong); border-radius: 999px; overflow: hidden; background: var(--paper); }
.lang a { padding: 1px 10px; font-weight: 700; }
.lang a:hover { text-decoration: none; }
.lang a[aria-current="true"] { background: var(--navy); color: #fff; }

/* ---- Đầu trang -------------------------------------------------------- */
/* Phương án B (29/10/2026): logo + tên căn giữa, nền hoa văn trống đồng (lấy từ trang cũ, đổi sang tông vàng) */
.masthead { background: var(--paper) url(/assets/img/hoa-van-trong-dong.png) center / auto 100% no-repeat; border-bottom: 1px solid var(--line); }
.masthead .wrap { display: flex; align-items: center; justify-content: center; gap: 20px; padding-block: 20px; }
.brand { display: flex; align-items: center; gap: 22px; text-decoration: none; color: inherit; min-width: 0; }
.brand img { width: 104px; height: 104px; flex: none; }
.brand__spacer { width: 104px; flex: none; }
.brand__text { display: grid; justify-items: center; text-align: center; gap: 8px; min-width: 0; }
.brand__agency { font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--head-ink); line-height: 1.4; }
.brand__rule { width: 120px; height: 2px; background: var(--gold); }
.brand__name { font-size: 2rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--head-ink); line-height: 1.1; }
:root[data-theme="dark"] .brand__name { color: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand__name { color: var(--ink); } }
.masthead__menu { display: none; }

/* ---- Menu chính ------------------------------------------------------- */
.mainnav { background: var(--navy); color: #fff; position: sticky; top: 0; z-index: 20; }
.mainnav .wrap { display: flex; align-items: stretch; }
.mainnav__list { list-style: none; margin: 0 0 0 -14px; padding: 0; display: flex; flex-wrap: wrap; }
.mainnav__item { position: relative; }
.mainnav__link {
  display: flex; align-items: center; gap: 6px; padding: 14px 14px 12px; color: #fff; text-decoration: none; font-weight: 500; font-size: 0.9375rem;
  border-bottom: 3px solid transparent; letter-spacing: 0.005em;
}
.mainnav__link:hover, .mainnav__item:focus-within > .mainnav__link { background: rgba(255,255,255,0.07); }
.mainnav__link[aria-current="page"] { border-bottom-color: var(--gold); font-weight: 600; }
.mainnav__badge {
  display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--gold); color: var(--navy-deep); font-size: 0.75rem; font-weight: 700; text-align: center; line-height: 20px;
}
.submenu {
  list-style: none; margin: 0; padding: 8px 0; position: absolute; left: 0; top: 100%; min-width: 16rem;
  background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--gold); border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 16px 32px rgba(21, 19, 60, 0.16); display: none; z-index: 30;
}
.mainnav__item:hover > .submenu, .mainnav__item:focus-within > .submenu { display: block; }
.submenu a { display: block; padding: 9px 18px; color: var(--ink); text-decoration: none; font-size: var(--fs-sm); }
.submenu a:hover { background: var(--mist); color: var(--link); }
.mainnav__toggle { display: none; }
.mainnav__link--home svg { width: 16px; height: 16px; margin-top: -2px; }

/* ---- Thanh thông báo -------------------------------------------------- */
.noticebar { background: var(--gold-wash); border-bottom: 1px solid #EEDDB0; }
.noticebar__row + .noticebar__row { border-top: 1px solid #EEDDB0; }
.noticebar__row[hidden] { display: none; }
.noticebar__row--pinned .noticebar__label { display: inline-flex; align-items: center; gap: 5px; }
.noticebar__row--pinned .noticebar__text a { font-weight: 600; }
.noticebar .wrap { display: flex; align-items: center; gap: 14px; padding-block: 9px; }
.noticebar__label {
  flex: none; font-weight: 700; font-size: var(--fs-xs); color: var(--gold-ink);
  background: var(--paper); border: 1px solid var(--gold); border-radius: 999px; padding: 1px 10px;
}
.noticebar__text { flex: 1; min-width: 0; font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.noticebar__text a { color: var(--ink); font-weight: 500; text-decoration: none; }
.noticebar__text a:hover { text-decoration: underline; }
.noticebar__date { color: var(--slate); margin-right: 10px; }
.noticebar__close {
  flex: none; border: 0; background: transparent; color: var(--slate); cursor: pointer;
  width: 30px; height: 30px; border-radius: 50%; font-size: 1.25rem; line-height: 1;
}
.noticebar__close:hover { background: rgba(0,0,0,0.06); color: var(--ink); }

/* ---- Khối nội dung chung --------------------------------------------- */
main { display: block; }
/* Khoảng cách giữa các khối nội dung: 48 → 28px (29/10/2026), rồi → 22px cho gần nhịp 20px
   của trang cũ (31/10/2026) */
.section { padding-block: 22px; }
.section + .section { border-top: 1px solid var(--line); }
/* Tiêu đề mục (phương án B, 29/10/2026): thẻ nền xanh chữ trắng in hoa, nối đường kẻ xanh hết chiều ngang */
.section__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; border-bottom: 3px solid var(--navy); }
.section__title { font-size: var(--fs-lg); font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; line-height: 1.25;
  background: var(--navy); color: #fff; padding: 10px 22px 9px; border-radius: 6px 6px 0 0; }
/* Cụm liên kết bên phải tiêu đề khối: từng liên kết không ngắt giữa chừng, nhưng cả cụm được
   xuống dòng – nhãn tiếng Anh dài ("Legal documents · Drafts for comment") từng làm tràn ngang
   trang chủ bản tiếng Anh trên điện thoại (rà giao diện 31/10/2026). */
.section__more { font-size: var(--fs-sm); font-weight: 600; text-decoration: none; padding-bottom: 8px; min-width: 0; }
.section__more a { white-space: nowrap; }
.section__more:hover { text-decoration: underline; }
.kicker { font-size: var(--fs-xs); font-weight: 600; color: var(--gold-ink); text-decoration: none; }
a.kicker:hover { text-decoration: underline; }
.date { font-size: var(--fs-xs); color: var(--slate); font-variant-numeric: tabular-nums; }
.meta { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }

/* ---- Hàng đầu trang chủ: tin nổi bật + thông báo -------------------- */
.lead-row { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: 32px; padding-block: 24px 28px; }
.feature { display: grid; gap: 11px; align-content: start; }
.feature__img { aspect-ratio: 2 / 1; object-fit: cover; width: 100%; border-radius: var(--radius); background: var(--mist); }
.feature__title { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -0.02em; line-height: 1.18; }
.feature__title a { color: var(--ink); text-decoration: none; }
.feature__title a:hover { color: var(--link); }
.feature__lead { font-family: var(--font-text); font-size: 1.1875rem; line-height: 1.65; color: var(--slate); max-width: 46rem; }
.feature-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 12px; padding-top: 24px; border-top: 1px solid var(--line); }
.mini { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 16px; align-items: start; }
.mini img { aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-sm); width: 132px; }
.mini--text { grid-template-columns: 1fr; }
.mini__title { font-size: var(--fs-md); font-weight: 600; line-height: 1.38; margin-top: 4px; }
.mini__title a { color: var(--ink); text-decoration: none; }
.mini__title a:hover { color: var(--link); }

.notices { align-self: start; background: var(--paper); }
.notices__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; border-bottom: 3px solid var(--navy); }
.notices__title { font-size: var(--fs-md); font-weight: 700; display: flex; align-items: center; gap: 10px; letter-spacing: 0.03em; text-transform: uppercase;
  background: var(--navy); color: #fff; padding: 9px 18px 8px; border-radius: 6px 6px 0 0; }
.notices__title .count-chip { text-transform: none; letter-spacing: 0; }
.count-chip { font-size: 0.75rem; font-weight: 700; background: var(--gold); color: var(--navy-deep); border-radius: 999px; padding: 1px 9px; }
.notices__list { list-style: none; margin: 0; padding: 0; }
.notice { padding-block: 12px; border-bottom: 1px solid var(--line); display: grid; gap: 6px; }
.notice__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: var(--fs-xs); color: var(--slate); }
.notice__type { font-weight: 600; color: var(--head-ink); }
.badge-new {
  font-size: 0.6875rem; font-weight: 700; color: var(--gold-ink); background: var(--gold-wash);
  border: 1px solid var(--gold); border-radius: 999px; padding: 0 7px; line-height: 18px;
}
.notice__title { font-size: 0.96875rem; font-weight: 600; line-height: 1.42; }
.notice__title a { color: var(--ink); text-decoration: none; }
.notice__title a:hover { color: var(--link); }
.notice--pinned .notice__type::before {
  content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 6px; vertical-align: 0;
  background: var(--gold); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.notices__foot { display: flex; justify-content: space-between; gap: 12px; padding-top: 11px; font-size: var(--fs-sm); }
.notices__foot a { font-weight: 600; text-decoration: none; }
.notices__foot a:hover { text-decoration: underline; }

/* ---- Dải tra cứu (điểm nhấn duy nhất của trang chủ) ------------------ */
/* Tra cứu gọn ở cột phải trang chủ, dưới Thông báo, cùng chiều ngang */
.lead-side { display: grid; gap: 28px; align-content: start; min-width: 0; }
.lookup-card { background: var(--navy); color: var(--band-ink); border-radius: var(--radius); padding: 16px 18px 14px; display: grid; gap: 10px; border-top: 4px solid var(--gold); }
.lookup-card__title { color: #fff; font-size: var(--fs-md); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.lookup-card__intro { color: var(--band-quiet); font-size: var(--fs-sm); line-height: 1.5; }
.lookup-card__form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.lookup-card__form input, .lookup-card__form select { font: inherit; font-size: var(--fs-sm); min-width: 0; border: 0; border-radius: var(--radius-sm); background: #fff; color: #191A2C; padding: 10px 12px; }
.lookup-card__form input { grid-column: 1 / -1; }
.lookup-card__form input:focus-visible, .lookup-card__form select:focus-visible { outline: 3px solid var(--gold); outline-offset: 1px; }
.lookup-card__form button { font: inherit; font-size: var(--fs-sm); font-weight: 700; border: 0; border-radius: var(--radius-sm); padding: 10px 18px; cursor: pointer; background: var(--gold); color: #15133C; }
.lookup-card__form button:hover { background: #DDB04C; }
.lookup-card__sources { list-style: none; margin: 4px 0 0; padding: 0; border-top: 1px solid rgba(255,255,255,0.16); }
.lookup-card__sources li { padding-block: 10px; border-bottom: 1px solid rgba(255,255,255,0.12); display: grid; gap: 2px; }
.lookup-card__sources li:last-child { border-bottom: 0; padding-bottom: 0; }
.lookup-card__sources a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; text-decoration: none; color: var(--band-ink); }
.lookup-card__sources a:hover .lookup-card__name { text-decoration: underline; color: #fff; }
.lookup-card__name { font-size: var(--fs-sm); font-weight: 600; }
.lookup-card__figure { font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.lookup-card__note { font-size: var(--fs-xs); color: var(--band-quiet); line-height: 1.45; }

.lookup { background: var(--navy); color: var(--band-ink); position: relative; overflow: hidden; }
.lookup__seal { position: absolute; right: -120px; top: 50%; width: 560px; height: 560px; transform: translateY(-50%); pointer-events: none; color: var(--gold); }
.lookup .wrap { position: relative; padding-block: 56px; display: grid; gap: 22px; }
.lookup__title { color: #fff; font-size: var(--fs-3xl); font-weight: 700; letter-spacing: -0.025em; }
.lookup__intro { color: var(--band-quiet); max-width: 40rem; font-size: 1.125rem; line-height: 1.55; }
.lookup__form { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; max-width: 54rem; background: #fff; border-radius: 999px; padding: 6px; box-shadow: 0 0 0 4px rgba(201, 154, 46, 0.45); }
.lookup__form input, .lookup__form select { font: inherit; border: 0; background: transparent; color: #191A2C; padding: 12px 18px; min-width: 0; }
.lookup__form input { font-size: 1.0625rem; }
.lookup__form input:focus, .lookup__form select:focus { outline: none; }
.lookup__form select { border-left: 1px solid #E3E4EE; font-size: var(--fs-sm); color: #595D74; }
.lookup__form button { font: inherit; font-weight: 700; border: 0; border-radius: 999px; padding: 12px 26px; cursor: pointer; background: var(--gold); color: #15133C; }
.lookup__form button:hover { background: #DDB04C; }
.lookup__form:focus-within { box-shadow: 0 0 0 4px var(--gold); }
.lookup__sources { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(255,255,255,0.16); padding-top: 26px; margin-top: 10px; max-width: 64rem; }
.source { padding-right: 28px; display: grid; gap: 4px; align-content: start; }
.source + .source { padding-left: 28px; border-left: 1px solid rgba(255,255,255,0.16); }
.source__name { color: var(--band-quiet); font-weight: 500; text-decoration: none; font-size: var(--fs-sm); }
.source__name:hover { color: #fff; text-decoration: underline; }
.source__figure { font-size: var(--fs-2xl); font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; line-height: 1.1; letter-spacing: -0.02em; }
.source__note { font-size: var(--fs-xs); color: var(--band-quiet); line-height: 1.45; }

/* ---- Cảnh báo --------------------------------------------------------- */
.alert-strip { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; border: 1px solid var(--alert); background: var(--alert-wash); border-radius: var(--radius); padding: 14px 18px; }
.alert-strip__label { font-weight: 700; color: var(--alert); font-size: var(--fs-sm); }
.alert-strip__title { font-weight: 600; }
.alert-strip__title a { color: var(--ink); }

/* ---- Tin theo chuyên mục --------------------------------------------- */
.columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 28px; }
/* Tiêu đề cột: dải nền xanh nhạt, vạch vàng bên trái */
.col__title { font-size: var(--fs-md); font-weight: 700; margin-bottom: 9px; }
.col__title a { display: block; background: var(--navy-soft); color: var(--head-ink); padding: 9px 14px; border-left: 4px solid var(--gold); border-radius: 0 4px 4px 0; text-decoration: none; }
.col__title a:hover { background: var(--head-hover); text-decoration: underline; }
.stack { list-style: none; margin: 0; padding: 0; }
.stack li { padding-block: 11px; border-bottom: 1px solid var(--line); display: grid; gap: 5px; }
.stack li:last-child { border-bottom: 0; }
.stack .stack__img { aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-sm); margin-bottom: 6px; width: 100%; }
.stack a.t { color: var(--ink); text-decoration: none; font-weight: 600; line-height: 1.42; }
.stack li:first-child a.t { font-size: var(--fs-md); }
.stack a.t:hover { color: var(--link); }

/* ---- Khối tin nhiều cột: các mục của mọi cột nằm thẳng hàng ngang -------
   Tiêu đề tin dài ngắn khác nhau nên mỗi cột tự cao một kiểu. Lưới con (subgrid) cho ba cột
   dùng chung các hàng của .columns, hàng cao bằng tiêu đề dài nhất của hàng đó, không cắt chữ.
   Trình duyệt chưa có subgrid (trước 2023) thì đệm mỗi tiêu đề đủ ba dòng và cắt phần thừa. */
/* Số cột cố định (không auto-fit) để các cột luôn nằm trên cùng một hàng lưới:
   nếu cột bị dồn xuống hàng thứ hai thì ràng buộc thẳng hàng ngang không còn nghĩa. */
.columns--tin { grid-template-columns: repeat(var(--so-cot, 3), minmax(0, 1fr)); }
@supports (grid-template-rows: subgrid) {
  .columns--tin { grid-template-rows: auto repeat(var(--so-muc, 3), auto); align-items: start; }
  .columns--tin > div { display: grid; grid-template-rows: subgrid; grid-row: span var(--so-hang, 4); }
  .columns--tin > div > .stack { display: grid; grid-template-rows: subgrid; grid-row: span var(--so-muc, 3); }
}
@supports not (grid-template-rows: subgrid) {
  .columns--tin .stack a.t { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; min-height: calc(1.42em * 3); }
}
/* Tin thứ hai trở đi trong mỗi cột chỉ là liên kết dẫn sang bài, nên để nhẹ hơn tin đầu: bỏ
   ngày, chữ nhỏ, tối đa ba dòng rồi cắt bằng dấu ba chấm. Trước đây mỗi tin sau cao 139px,
   gần bằng tin đầu vốn có cả ảnh (314px) – vì các cột căn thẳng hàng ngang nên mỗi hàng cao
   bằng tiêu đề dài nhất trong các cột, càng nhiều cột thì càng thừa chỗ (31/10/2026).
   Hàng của lưới con cao bằng ô cao nhất, nên ô nào ngắn hơn vẫn thừa chỗ: dồn nội dung lên trên
   (align-content: start) để mọi tiêu đề trong cùng một hàng bắt đầu ở cùng một độ cao, thay vì
   mỗi ô một kiểu. Mọi tiêu đề, kể cả tin đầu, tối đa ba dòng. */
.columns--tin .stack li { align-content: start; padding-block: 2px; }
.columns--tin .stack li a.t { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.columns--tin .stack li:not(:first-child) { gap: 2px; }
.columns--tin .stack li:not(:first-child) .date { display: none; }
.columns--tin .stack li:not(:first-child) a.t { font-size: var(--fs-sm); line-height: 1.4; font-weight: 400; }
/* Màn hẹp: mỗi cột một dòng, không cần ràng buộc hàng ngang nữa */
@media (max-width: 60rem) {
  .columns--tin { grid-template-columns: 1fr; grid-template-rows: none; }
  .columns--tin > div, .columns--tin > div > .stack { display: block; }
  .columns--tin .stack a.t { -webkit-line-clamp: none; min-height: 0; }
  /* Cột rộng cả màn hình nên tiêu đề hiếm khi quá ba dòng: để nguyên, không cắt.
     Phải nêu đủ hai mức như trên để thắng được hai quy tắc cắt dòng ở ngoài khối này. */
  .columns--tin .stack li a.t,
  .columns--tin .stack li:not(:first-child) a.t { -webkit-line-clamp: none; }
}

/* ---- Bảng văn bản ----------------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table.docs { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 42rem; }
table.docs th { text-align: left; font-weight: 600; font-size: var(--fs-xs); color: var(--slate); background: var(--mist); padding: 9px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.docs td { padding: 11px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.docs tr:last-child td { border-bottom: 0; }
table.docs tbody tr:hover td { background: #FAFAFD; }
/* Nội dung bảng văn bản để chữ thường: mỗi dòng một tiêu đề đậm làm cả bảng nặng nề (31/10/2026) */
table.docs td a { color: var(--ink); font-weight: 400; text-decoration: none; }
table.docs td a:hover { color: var(--link); text-decoration: underline; }
table.docs td.num { white-space: nowrap; font-weight: 400; color: var(--head-ink); font-variant-numeric: tabular-nums; }
.status { display: inline-block; font-size: 0.75rem; font-weight: 600; border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.status--future { background: var(--gold-wash); color: var(--gold-ink); border: 1px solid var(--gold); }
.status--active { background: #E7F4EC; color: #1C6B3C; border: 1px solid #BFE0CB; }
.status--draft { background: var(--mist); color: var(--slate); border: 1px dashed var(--slate); }
.status--expired { background: var(--mist); color: var(--slate); border: 1px solid var(--line); }
/* Dự thảo còn ít ngày góp ý */
.status--urgent { background: #FDECEA; color: var(--alert); border: 1px solid #F3C3BE; }

/* ---- Ảnh – Video ------------------------------------------------------ */
.media-row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 16px; }
/* Trang chủ, màn hình rộng: giới hạn chiều cao hàng để khối Ảnh – Video không quá cao khi video chưa có ảnh đại diện */
@media (min-width: 1024px) { .section--media .media-row { grid-auto-rows: minmax(0, 17rem); } }
.media { position: relative; display: block; border-radius: var(--radius); overflow: hidden; color: #fff; text-decoration: none; background: var(--navy-deep); min-height: 12rem; }
.media img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .4s ease; }
.media:first-child img { aspect-ratio: 16 / 9; }
.media:hover img { transform: scale(1.03); }
.media__cap { position: absolute; inset: auto 0 0 0; padding: 56px 18px 16px; background: linear-gradient(transparent, rgba(16, 14, 46, 0.92)); display: grid; gap: 4px; }
.media__kind { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 600; color: #F3D58C; }
.media__title { font-weight: 600; line-height: 1.38; }
.media:first-child .media__title { font-size: var(--fs-lg); }
.media__play { position: absolute; left: 16px; top: 16px; width: 44px; height: 44px; border-radius: 50%; background: rgba(21, 19, 60, 0.75); display: grid; place-items: center; color: #fff; }
.media__play svg { width: 18px; height: 18px; margin-left: 2px; }
/* Khung thay ảnh khi video chưa có ảnh đại diện: cao bằng thẻ, không tự kéo cao theo tỉ lệ 4/3 */
.video-tile { display: grid; place-items: center; width: 100%; height: 100%; min-height: 9rem; background: radial-gradient(circle at 30% 20%, #2E2A78, var(--navy-deep)); color: var(--gold); }
.video-tile svg { width: 48px; height: 48px; }
.media-grid .media-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.media-grid .media-row .media:first-child { grid-column: auto; }
.media-grid .media-row .media img, .media-grid .media-row .media:first-child img { aspect-ratio: 3 / 2; height: auto; }
.media-grid .media:first-child .media__title { font-size: 1rem; }
.video-embed { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius); overflow: hidden; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-file { background: #000; border-radius: var(--radius); overflow: hidden; }
.video-file video { display: block; width: 100%; height: auto; max-height: 75vh; aspect-ratio: 16 / 9; background: #000; }
.audio-file { width: 100%; }

/* Khối Tài liệu kỹ thuật trên trang chủ: lưới thẻ, biểu tượng loại tệp */
.techdocs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.techdoc { display: flex; gap: 12px; align-items: flex-start; padding: 13px 14px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.techdoc:hover { border-color: var(--line-strong); box-shadow: 0 2px 10px rgba(27, 26, 46, 0.06); }
.techdoc__icon { flex: none; width: 46px; height: 56px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px; border-radius: 4px 14px 4px 4px;
  background: var(--navy-soft); color: var(--head-ink); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.02em; border-top: 4px solid var(--gold); }
.techdoc__body { display: grid; gap: 4px; min-width: 0; }
.techdoc__group { font-size: var(--fs-xs); font-weight: 600; color: var(--gold-ink); }
.techdoc__title { font-weight: 600; line-height: 1.4; color: var(--ink); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.techdoc__title:hover { color: var(--link); text-decoration: underline; }
.techdoc__meta { font-size: var(--fs-xs); color: var(--slate); }
@media (max-width: 1040px) { .techdocs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .techdocs { grid-template-columns: minmax(0, 1fr); } }

/* ---- Chân trang ------------------------------------------------------- */
.footer { background: var(--navy-deep); color: var(--band-quiet); margin-top: 40px; font-size: var(--fs-sm); border-top: 4px solid var(--gold); }
.footer .wrap { padding-block: 22px 12px; display: grid; gap: 14px; }
.footer__grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1.3fr) minmax(0, 0.85fr); gap: 20px 36px; }
/* Có thêm cột Thống kê thì chia lại bốn cột và bỏ kiểu xếp hai hàng của Truy cập nhanh:
   cột hẹp hơn nên hai hàng sẽ tràn sang cột bên cạnh (31/10/2026) */
.footer__grid--4 { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.9fr); }
/* Cột Thống kê truy cập: mỗi dòng một ô, nhãn trái – số phải, số dùng chữ số đều bề ngang.
   Thường chỉ bật 3–4 trong 6 ô nên một cột là vừa; bật đủ 6 vẫn không cao hơn cột địa chỉ. */
.footer__stats dl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; margin: 0; max-width: 15rem; }
.footer__stats dl > div { display: flex; justify-content: space-between; gap: 12px; white-space: nowrap; }
.footer__stats dt { color: inherit; opacity: 0.82; }
.footer__stats dd { margin: 0; font-weight: 600; }
/* Ba cột cùng nhịp dòng: tiêu đề cột ngang tên cơ quan, mỗi dòng liên kết ngang một dòng địa chỉ/điện thoại/email */
.footer .footer__grid h2, .footer .footer__grid p.footer__name { font-size: var(--fs-md); line-height: 1.4; margin: 0 0 4px; }
.footer .footer__grid p, .footer .footer__grid li { font-size: var(--fs-sm); line-height: 1.45; }
.footer .footer__grid ul { gap: 0 28px; grid-template-columns: repeat(2, max-content); grid-auto-flow: column; grid-template-rows: repeat(3, auto); }
/* Phải đặt SAU quy tắc trên: cùng mức ưu tiên, quy tắc đứng sau mới thắng */
.footer .footer__grid--4 ul { gap: 0; grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; grid-template-rows: none; }
/* Liên kết website khác: ô chọn + nút Mở (mở thẻ mới) */
.footer__select { display: flex; gap: 8px; }
.footer__select select { flex: 1; min-width: 0; font: inherit; font-size: var(--fs-sm); padding: 7px 10px; border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.06); color: #fff; }
.footer__select select option { color: #191A2C; background: #fff; }
.footer__select button { font: inherit; font-size: var(--fs-sm); font-weight: 600; border: 0; border-radius: var(--radius-sm); padding: 0 16px; background: var(--gold); color: var(--navy-deep); cursor: pointer; }
.footer__select button:hover { background: #DDB04C; }
.footer h2 { color: #fff; font-size: var(--fs-sm); font-weight: 700; margin-bottom: 8px; }
.footer p { line-height: 1.5; }
.footer a { color: #fff; text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.footer ul a { color: var(--band-quiet); }
.footer ul a:hover { color: #fff; }
.footer__brand { display: flex; gap: 14px; align-items: flex-start; }
.footer__brand img { width: 52px; height: 52px; flex: none; }
.footer__name { color: #fff; font-weight: 700; font-size: var(--fs-md); margin-bottom: 6px; }
.footer__legal { border-top: 1px solid rgba(255,255,255,0.12); padding-top: 10px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: var(--fs-xs); }

/* ---- Trang danh sách -------------------------------------------------- */
.page-head { padding-block: 32px 8px; display: grid; gap: 12px; }
.crumbs { font-size: var(--fs-xs); color: var(--slate); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.crumbs a { color: var(--slate); text-decoration: none; }
.crumbs a:hover { color: var(--link); text-decoration: underline; }
.crumbs span[aria-hidden] { color: var(--line-strong); }
/* 20–28px (31/10/2026): tiêu đề trang danh sách không nên lớn hơn tiêu đề bài viết (22–30px),
   vì bài viết mới là nội dung chính. Không đổi --fs-3xl vì biến đó còn dùng cho khối Tra cứu. */
.page-title { font-size: clamp(1.25rem, 1rem + 0.9vw, 1.75rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--head-ink); }
.page-title::after { content: ""; display: block; width: 64px; height: 4px; background: var(--gold); margin-top: 14px; border-radius: 2px; }
.page-intro { color: var(--slate); max-width: 44rem; font-size: var(--fs-md); line-height: 1.6; }
/* Lối sang trang cùng cặp (Văn bản Việt Nam ⇄ Dự thảo lấy ý kiến) */
.page-switch { margin: 10px 0 0; }
.layout-2 { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 56px; padding-block: 24px 48px; }
.layout-2 > * { min-width: 0; }
/* Bài không có mục lục thì không có cột phụ: thân bài chiếm trọn bề ngang khung trang,
   mép trái mép phải thẳng hàng với thanh menu (31/10/2026) */
.layout-2--don { grid-template-columns: minmax(0, 1fr); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.chip { font: inherit; font-size: var(--fs-sm); border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 999px; padding: 5px 14px; cursor: pointer; text-decoration: none; }
.chip[aria-pressed="true"], .chip[aria-current="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.chip:hover { border-color: var(--navy); }
.list { list-style: none; margin: 0; padding: 0; }
.list__item { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 24px; padding-block: 24px; border-bottom: 1px solid var(--line); }
.list__item:first-child { padding-top: 8px; }
.list__item--text { grid-template-columns: minmax(0, 1fr); }
.list__item img { aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-sm); width: 100%; }
.list__body { display: grid; gap: 8px; align-content: start; }
.list__title { font-size: var(--fs-lg); font-weight: 700; line-height: 1.32; letter-spacing: -0.01em; }
.list__title a { color: var(--ink); text-decoration: none; }
.list__title a:hover { color: var(--link); }
.list__excerpt { font-family: var(--font-text); color: var(--slate); line-height: 1.6; font-size: 1rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pager { display: flex; gap: 6px; padding-top: 28px; flex-wrap: wrap; }
.pager a, .pager span { min-width: 40px; height: 40px; display: inline-grid; place-items: center; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; color: var(--ink); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.pager a:hover { border-color: var(--navy); color: var(--link); }
.pager [aria-current="page"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.aside { display: grid; gap: 32px; align-content: start; }
.aside h2 { font-size: var(--fs-sm); font-weight: 700; margin-bottom: 4px; border-bottom: 3px solid var(--navy); }
.aside h2 > *, .aside h2 { text-transform: uppercase; letter-spacing: 0.03em; }
.aside h2::before { content: none; }
.aside ul { list-style: none; margin: 0; padding: 0; }
.aside li a { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); font-size: var(--fs-sm); line-height: 1.45; }
.aside li a[aria-current="page"] { color: var(--link); font-weight: 600; }
.aside li a:hover { color: var(--link); }
/* Danh sách thông tin thuần ở cột phụ (địa chỉ, điện thoại...) */
.aside .plain-list li { padding: 3px 0; font-size: var(--fs-sm); line-height: 1.5; }
.aside .plain-list li a { display: inline; padding: 0; border: 0; color: var(--link); font-size: inherit; text-decoration: underline; }
/* Biểu mẫu tra cứu ở cột phụ: luôn xếp dọc */
.aside .screen-form { grid-template-columns: 1fr; padding: 16px; }
.aside .screen-form .btn { justify-self: stretch; justify-content: center; }

/* ---- Căn lề và bôi màu trong bài (01/11/2026) ---------------------------
   Bộ soạn thảo đặt bằng LỚP chứ không bằng style=, vì bộ lọc máy chủ xóa mọi thuộc tính style.
   Đặt sau quy tắc căn đều mặc định của .prose p, nếu không sẽ bị quy tắc đó đè. */
.prose .align-left { text-align: left; }
.prose .align-center { text-align: center; }
.prose .align-right { text-align: right; }
.prose .align-justify { text-align: justify; text-justify: inter-word; }
/* Bôi nền (marker) và đổi màu chữ (pen). Màu chọn đủ tương phản trên nền trắng lẫn nền tối. */
.prose mark { background: #FBEB8F; color: inherit; padding: 0 .15em; border-radius: 2px; }
.prose .marker-yellow { background: #FBEB8F; }
.prose .marker-green { background: #B7E7C0; }
.prose .marker-blue { background: #BBDCFA; }
.prose .marker-pink { background: #F9C2D6; }
.prose .pen-red { background: none; color: #B42318; }
.prose .pen-green { background: none; color: #1E6B3A; }
:root[data-theme="dark"] .prose mark,
:root[data-theme="dark"] .prose .marker-yellow, :root[data-theme="dark"] .prose .marker-green,
:root[data-theme="dark"] .prose .marker-blue, :root[data-theme="dark"] .prose .marker-pink { color: #191A2C; }
:root[data-theme="dark"] .prose .pen-red { color: #F7867C; }
:root[data-theme="dark"] .prose .pen-green { color: #7FD39B; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .prose mark,
  :root:not([data-theme="light"]) .prose .marker-yellow, :root:not([data-theme="light"]) .prose .marker-green,
  :root:not([data-theme="light"]) .prose .marker-blue, :root:not([data-theme="light"]) .prose .marker-pink { color: #191A2C; }
  :root:not([data-theme="light"]) .prose .pen-red { color: #F7867C; }
  :root:not([data-theme="light"]) .prose .pen-green { color: #7FD39B; }
}
/* Hộp ghi chú và đoạn mở đầu – hai lớp bộ lọc cho phép từ lâu mà chưa có kiểu nào */
.prose .note { background: var(--mist); border-left: 3px solid var(--gold); padding: .7em 1em; border-radius: var(--radius-sm); }
.prose .lead { font-size: 1.0625em; color: var(--slate); }

/* ---- Tuỳ chọn đọc (31/10/2026) -----------------------------------------
   Người đọc tự chọn cỡ chữ, nền sáng/tối và phông thân bài. Lựa chọn lưu trong trình duyệt
   của từng người (localStorage), không gửi lên máy chủ, không dùng cookie.
   Đoạn script ở đầu trang đặt sẵn các thuộc tính data-* trước khi vẽ nên không bị nháy chữ. */
:root[data-doc="1"] { --doc: 0.875; }   /* 14px */
:root[data-doc="2"] { --doc: 1; }       /* 16px – mặc định */
:root[data-doc="3"] { --doc: 1.125; }   /* 18px */
:root[data-doc="4"] { --doc: 1.25; }    /* 20px */
:root[data-doc="5"] { --doc: 1.5; }     /* 24px */
/* Phông thân bài: mặc định có chân (Source Serif) cho dễ đọc đoạn dài; ai thấy khó nhìn
   trên màn hình thì chuyển sang không chân */
:root[data-font="sans"] .prose { font-family: var(--font-ui); line-height: 1.7; }
/* Khi in: luôn cỡ chuẩn, phông có chân, nền trắng */
@media print { :root { --doc: 1; } :root[data-font="sans"] .prose { font-family: var(--font-text); } }

.reader { position: relative; display: flex; }
.reader__btn { font: inherit; font-size: var(--fs-sm); font-weight: 600; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 4px 10px;
  border: 1px solid var(--topbar-line-strong); border-radius: 999px; background: transparent; color: var(--topbar-ink); }
.reader__btn:hover { color: var(--topbar-hover); border-color: var(--topbar-hover); }
.reader__btn[aria-expanded="true"] { background: var(--topbar-line); color: var(--topbar-strong); }
.reader__panel { position: absolute; z-index: 40; top: calc(100% + 8px); right: 0; width: 17rem;
  display: grid; gap: 14px; padding: 16px; background: var(--paper); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(25, 26, 44, 0.18); }
.reader__panel[hidden] { display: none; }
.reader__row { display: grid; gap: 6px; }
.reader__row > span { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--slate); }
.reader__set { display: flex; gap: 6px; flex-wrap: wrap; }
.reader__set button { font: inherit; font-size: var(--fs-sm); cursor: pointer; flex: 1 1 auto;
  min-height: 32px; padding: 5px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--paper); color: var(--ink); }
.reader__set button:hover { border-color: var(--navy); }
.reader__set button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.reader__size { display: flex; align-items: center; gap: 8px; }
.reader__size output { flex: 1; text-align: center; font-size: var(--fs-sm); color: var(--slate); font-variant-numeric: tabular-nums; }
.reader__size button { min-width: 40px; min-height: 32px; font-size: var(--fs-md); }
/* Không có JavaScript thì bảng này không chạy được, nên ẩn hẳn nút đi */
html:not(.js) .reader { display: none; }

/* ---- Trang bài viết --------------------------------------------------- */
/* Thân bài rộng bằng khung trang, thẳng hàng với thanh menu, trên nền xám nhạt (31/10/2026).
   Trước đây thân bài chặn ở 46rem và đoạn văn chặn thêm ở 42rem, nên trên màn hình lớn bài
   thụt vào hai lần và trông lọt thỏm giữa khoảng trắng. Nay bỏ cả hai mức chặn. */
.article { display: grid; gap: 20px; align-content: start; background: var(--mist); border-radius: var(--radius); padding: 28px 32px; }
.article > * { min-width: 0; }
/* Tiêu đề bài 22–30px, thân bài 16px, đoạn mở đầu 17px (31/10/2026). Ba chỗ này đặt số riêng,
   không theo thang --fs-*, nên khi hạ thang phải sửa riêng – lần hạ thang trước đã bỏ sót. */
.article__title { font-size: calc(clamp(1.375rem, 1.05rem + 1.2vw, 1.875rem) * var(--doc, 1)); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.article__tools { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; padding-block: 12px; border-block: 1px solid var(--line); font-size: var(--fs-sm); color: var(--slate); }
.article__tools a, .article__tools .linklike { font-weight: 600; text-decoration: none; }
.article__tools a:hover, .article__tools .linklike:hover { text-decoration: underline; }
/* Link "Sửa bài/Sửa mục" cho người có quyền: màu riêng để phân biệt với link đọc */
.article__edit { color: var(--gold-ink); }
.article__tools--entry { border-top: 0; padding-top: 0; margin-bottom: 4px; }
.article__cover { margin: 0; }
/* Ảnh bìa không kéo quá khổ gốc: ảnh trong kho rộng nhất 1024px, kéo rộng hơn sẽ nhòe */
.article__cover img { width: 100%; max-width: 64rem; margin-inline: auto; height: auto; border-radius: var(--radius); }
.article__lead { font-family: var(--font-ui); font-size: calc(1.0625rem * var(--doc, 1)); font-weight: 500; line-height: 1.55; color: var(--ink); }
.prose { font-family: var(--font-text); font-size: calc(1rem * var(--doc, 1)); line-height: 1.78; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.05em; color: #22233A; }
:root[data-theme="dark"] .prose { color: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .prose { color: var(--ink); } }
.prose > * { min-width: 0; max-width: 100%; }
.prose p { overflow-wrap: anywhere; }
/* Căn đều hai bên cho đoạn văn bài viết (quyết định 29/10/2026); tiêu đề, bảng, chú thích ảnh vẫn căn trái */
/* Căn đều hai bên cho mọi đoạn văn dài: nội dung bài, tóm tắt trong danh sách, đoạn dẫn, đoạn giới thiệu trang (29/10/2026).
   Giữ căn trái: tiêu đề, danh sách ngắn, bảng, ô biểu mẫu, ghi chú một dòng. */
.prose p, .prose blockquote, .article__lead,
.list__excerpt, .feature__lead, .page-intro, .lookup-card__intro, .lookup__intro, .obligation { text-align: justify; text-justify: inter-word; }
/* Hai ngoại lệ tìm ra khi rà giao diện 31/10/2026:
   – Màn hẹp: dòng chỉ chứa được 6–8 từ, căn đều tạo khoảng trắng rất rộng giữa các từ
     ("sông trắng"), đọc mệt. Dưới 48rem (768px) chuyển về căn trái.
   – Mục danh sách (li): thường ngắn và hay chứa địa chỉ email, đường dẫn không ngắt được,
     căn đều kéo giãn thành khoảng trống lớn giữa nhãn và giá trị (thấy rõ ở trang Liên hệ). */
.prose li { text-align: left; }
@media (max-width: 48rem) {
  .prose p, .prose blockquote, .article__lead,
  .list__excerpt, .feature__lead, .page-intro, .lookup-card__intro, .lookup__intro, .obligation { text-align: left; }
}
.prose td p, .prose th p, .prose td li, .prose figcaption, .prose figcaption p { text-align: left; }
:lang(en) .prose p, :lang(en) .prose li { hyphens: auto; }
.prose h2 { font-family: var(--font-ui); font-size: 1.4375em; letter-spacing: -0.015em; margin-top: 0.6em; }
.prose h3 { font-family: var(--font-ui); font-size: 1.15em; margin-top: 0.4em; }
.prose ul, .prose ol { margin: 0; padding-left: 1.4em; display: grid; gap: 0.4em; }
.prose blockquote { margin: 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--gold); color: var(--slate); font-style: italic; }
.prose img { border-radius: var(--radius-sm); height: auto !important; }
.prose figure { margin: 0.4em 0; display: grid; gap: 10px; }
.prose figure img { width: 100%; }
.prose figcaption, .prose p > em:only-child { font-family: var(--font-ui); font-size: 0.875em; color: var(--slate); line-height: 1.5; font-style: normal; }
.prose .byline { text-align: right; font-style: italic; }
.prose table { width: 100%; border-collapse: collapse; font-family: var(--font-ui); font-size: 0.875em; line-height: 1.5; display: block; overflow-x: auto; }
.prose th, .prose td { border: 1px solid var(--line); padding: 8px 12px; text-align: left; vertical-align: top; }
.prose thead th { background: var(--mist); }
.prose iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--radius); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { font-size: var(--fs-xs); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; color: var(--ink); text-decoration: none; background: var(--mist); }
.tag:hover { border-color: var(--navy); color: var(--link); }
.related { border-top: 2px solid var(--navy); padding-top: 16px; margin-top: 12px; }
.related h2 { font-size: var(--fs-md); margin-bottom: 4px; }
.related .stack a.t { font-size: 1rem; font-weight: 400; }
.doc-facts, .note-mt { margin: 0 0 18px; }
.article > .doc-facts, .article > .note-mt { margin: 0; }
.note-mt { font-size: var(--fs-sm); color: var(--gold-ink); background: var(--gold-wash); border-left: 3px solid var(--gold); padding: 9px 14px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.doc-facts { padding: 16px 20px; background: var(--mist); border: 1px solid var(--line); border-radius: var(--radius); }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.gallery figure { margin: 0; }
.gallery img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-sm); display: block; }
.gallery figcaption { font-size: var(--fs-xs); color: var(--slate); margin-top: 6px; }
.attachments { border-top: 2px solid var(--navy); padding-top: 14px; }
.attachments h2 { font-size: var(--fs-md); margin: 0 0 8px; }
.attachments ul { list-style: none; margin: 0; padding: 0; }
.attachments li { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); display: flex; gap: 10px; align-items: baseline; }
.attachments a { font-weight: 600; text-decoration: none; }
.attachments a:hover { text-decoration: underline; }
.fileext { display: inline-block; min-width: 3.2em; padding: 1px 6px; border-radius: 4px; background: var(--navy-soft); color: var(--head-ink); font-size: var(--fs-xs); text-align: center; font-weight: 700; }
.faq { display: grid; gap: 10px; }
.faq__item { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; }
.faq__item[open] { border-color: var(--line-strong); }
.faq__item summary { cursor: pointer; font-weight: 600; }
.faq__item .prose { margin-top: 10px; }

/* ---- Biểu mẫu, nút ------------------------------------------------------ */
.field { display: grid; gap: 6px; min-width: 0; }
.field label { font-size: var(--fs-xs); font-weight: 600; color: var(--slate); }
.field input, .field select, .form-card textarea { font: inherit; font-size: var(--fs-sm); padding: 11px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); min-width: 0; }
.field input:focus, .field select:focus, .form-card textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px var(--navy-soft); }
.btn { font: inherit; font-size: var(--fs-sm); font-weight: 600; border: 1px solid var(--navy); background: var(--navy); color: #fff; border-radius: 999px; padding: 11px 22px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn:hover { background: var(--navy-deep); }
.btn--ghost { background: transparent; color: var(--link); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--navy); background: var(--mist); }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--link); cursor: pointer; text-decoration: underline; }
.filterbar { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: flex-end; padding: 16px 18px; margin-bottom: 22px; background: var(--mist); border-radius: var(--radius); }
.filterbar .field { flex: 0 1 11rem; }
.filterbar .field--grow { flex: 1 1 9rem; }
.filterbox > summary { display: none; }
.result-count { font-size: var(--fs-sm); color: var(--slate); margin: 0 0 12px; }
.empty-note { border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: 16px 20px; color: var(--slate); font-size: var(--fs-sm); }
.form-card { display: grid; gap: 16px; max-width: 40rem; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); margin-top: 20px; }
.form-card textarea { resize: vertical; }
.form-card .btn { justify-self: start; }
.form-note { font-size: var(--fs-xs); color: var(--slate); margin: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.notice-ok, .notice-err { padding: 12px 16px; border-radius: var(--radius-sm); border-left: 4px solid; margin: 16px 0; }
.notice-ok { background: var(--navy-soft); border-color: var(--navy); }
.notice-err { background: var(--alert-wash); border-color: var(--alert); }
.notice-err p { margin: 0; }
.preview-bar { background: var(--gold-wash); border-bottom: 2px solid var(--gold); font-size: var(--fs-sm); padding: 8px 0; }
.narrow-wrap { max-width: 46rem; padding-block: 8px 48px; }
.sitemap { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 28px; padding-block: 8px 48px; }
.sitemap h2 { font-size: var(--fs-lg); margin: 0 0 8px; }
.sitemap ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.error-page { max-width: 40rem; margin: 4rem auto; padding: 0 16px; font-family: var(--font-ui); }
.h-small { font-size: var(--fs-lg); margin: 18px 0 8px; }
.section-pad { padding-block: 8px 24px; }

/* ---- Sàng lọc, danh sách chỉ định ------------------------------------ */
.screen-form { display: grid; grid-template-columns: minmax(0, 1fr) 14rem auto; gap: 12px; padding: 20px; background: var(--mist); border-radius: var(--radius); }
.screen-form .btn { align-self: end; }
.screen-form--3 { grid-template-columns: minmax(0, 1fr) 14rem 9rem auto; }
.screen-wrap { display: grid; gap: 14px; }
.screen-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; align-items: center; padding-block: 18px; font-size: var(--fs-sm); color: var(--slate); }
.hit { border: 1px solid var(--line); border-radius: var(--radius); display: grid; grid-template-columns: 7rem minmax(0, 1fr); overflow: hidden; }
.hit__score { background: var(--alert-wash); color: var(--alert); display: grid; place-content: center; text-align: center; padding: 16px 8px; border-right: 1px solid var(--line); }
.hit__score strong { font-size: var(--fs-2xl); line-height: 1; font-variant-numeric: tabular-nums; }
.hit--partial .hit__score { background: var(--gold-wash); color: var(--gold-ink); }
.screen-partial { margin-top: 28px; }
.hit__score span { font-size: var(--fs-xs); font-weight: 600; }
.hit__body { padding: 18px 22px; display: grid; gap: 10px; min-width: 0; }
.hit__name { font-size: var(--fs-xl); font-weight: 700; letter-spacing: 0; }
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 20px; font-size: var(--fs-sm); margin: 0; }
.facts dt { color: var(--slate); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
mark { background: var(--gold-wash); color: var(--ink); border-bottom: 2px solid var(--gold); padding: 0 2px; }
.obligation { border-left: 4px solid var(--alert); background: var(--alert-wash); padding: 14px 18px; border-radius: 0 var(--radius) var(--radius) 0; font-size: var(--fs-sm); }
.sl-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 18px; margin-bottom: 24px; }
.sl-card { border: 1px solid var(--line); border-top: 4px solid var(--navy); border-radius: var(--radius); padding: 20px 22px; display: grid; gap: 8px; align-content: start; }
/* Các thẻ đứng cạnh nhau: tên danh sách dài ngắn khác nhau nên nút trước đây nằm so le.
   Không dùng subgrid ở đây vì các thẻ có số dòng khác nhau (thẻ có mô tả, thẻ không), span
   cố định sẽ làm nội dung đè lên nhau. Xếp dọc bằng flex và đẩy nút xuống đáy là đủ:
   các thẻ trong lưới vốn cao bằng nhau nên nút tự thẳng hàng (rà giao diện 31/10/2026). */
@media (min-width: 34rem) {
  .sl-card { display: flex; flex-direction: column; gap: 8px; }
  /* Không giới hạn ở thẻ p: thẻ cơ chế chưa có bài giới thiệu thì phần cuối là danh sách
     danh mục con, cũng cần đẩy xuống đáy mới thẳng hàng với thẻ bên cạnh. */
  .sl-card > :last-child { margin-top: auto; margin-bottom: 0; }
  /* Tên danh sách để hai dòng cho con số bên dưới các thẻ thẳng hàng nhau */
  .sl-cards:not(.sl-cards--regime) .sl-card h2 { min-height: calc(2 * 1.3em); }
}
.sl-card h2 { font-size: var(--fs-lg); margin: 0; }
.sl-card h2 a { color: var(--ink); text-decoration: none; }
.sl-card h2 a:hover { color: var(--link); text-decoration: underline; }
.sl-card p { margin: 0; font-size: var(--fs-sm); }
.sl-card__figure strong { font-size: var(--fs-2xl); font-variant-numeric: tabular-nums; color: var(--head-ink); letter-spacing: -0.02em; }
.sl-card .btn { justify-self: start; margin-top: 6px; }
/* Thẻ theo cơ chế (Nhóm Úc, Wassenaar, NSG, MTCR): mỗi cơ chế một thẻ, trong thẻ là các danh mục của cơ chế đó */
/* Không dùng align-items: start ở đây: thẻ chỉ cao bằng nội dung của nó nên hai thẻ cạnh nhau
   so le, viền dưới lệch hẳn (rà giao diện 31/10/2026). Để thẻ kéo bằng nhau theo hàng, phần
   cuối thẻ – thường là liên kết "Mở danh mục" – được đẩy xuống đáy. */
.sl-cards--regime { grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr)); }
.sl-card__regime { font-size: var(--fs-lg); margin: 0; display: grid; gap: 2px; }
.sl-card__regime small { font-size: var(--fs-xs); font-weight: 500; color: var(--slate); letter-spacing: 0.02em; }
.sl-card__regime a { color: var(--ink); text-decoration: none; }
.sl-card__regime a:hover { color: var(--link); text-decoration: underline; }
.sl-card__list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.sl-card__list li { display: grid; gap: 1px; padding-top: 10px; border-top: 1px solid var(--line); }
.sl-card__list a { font-weight: 600; text-decoration: none; color: var(--ink); }
.sl-card__list a:hover { color: var(--link); text-decoration: underline; }
.sl-card__list span { font-size: var(--fs-sm); color: var(--slate); }
.sl-card__list strong { font-variant-numeric: tabular-nums; color: var(--head-ink); }
.sl-card__intro { margin-top: 2px; font-size: var(--fs-sm); }
/* Các nhóm ở mức đầu, liệt kê ngay trên thẻ danh mục (EU 10 nhóm, mỗi danh mục của Việt Nam 4 nhóm).
   Từ 6 nhóm trở lên chia hai cột, đọc dọc từng cột: --so-hang do trang đặt theo số nhóm, và các
   hàng dùng chung cho cả hai cột nên tên dài ngắn khác nhau vẫn thẳng hàng. Dưới 42rem về một cột
   vì tên nhóm dài không đủ chỗ (rà giao diện 31/10/2026). */
.sl-card__nhom { list-style: none; margin: 6px 0 0; padding: 0; display: grid; }
@media (min-width: 42rem) {
  .sl-card__nhom--2 { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(var(--so-hang, 5), auto); grid-auto-flow: column; column-gap: 28px; }
}
.sl-card__nhom li { display: grid; grid-template-columns: 1.6em minmax(0, 1fr) auto; gap: 0 10px; align-items: baseline;
  padding: 7px 0; border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.sl-card__nhom b { font-weight: 600; color: var(--slate); font-variant-numeric: tabular-nums; }
.sl-card__nhom a { font-weight: 600; text-decoration: none; color: var(--ink); }
.sl-card__nhom a:hover { color: var(--link); text-decoration: underline; }
.sl-card__nhom span { color: var(--slate); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Mô tả của hai thẻ cạnh nhau dài ngắn khác nhau, nên đẩy danh sách nhóm xuống đáy thẻ
   để các dòng nhóm của hai thẻ thẳng hàng; liên kết cuối thẻ giữ khoảng cách cũ.
   Đặt sau các quy tắc trên vì cùng mức ưu tiên, quy tắc sau thắng. */
@media (min-width: 34rem) {
  .sl-card__nhom { margin-top: auto; }
  .sl-card > .sl-card__nhom + p:last-child { margin-top: 2px; }
}

/* ---- Danh mục kiểm soát ---------------------------------------------- */
.cl-list { list-style: none; margin: 0; padding: 0; }
.cl-list__item { border-bottom: 1px solid var(--line); }
.cl-list__item a { display: block; padding: 10px 0; text-decoration: none; color: var(--ink); line-height: 1.45; }
.cl-list__item a:hover { color: var(--link); background: linear-gradient(90deg, var(--mist), transparent); }
.cl-depth-0 > a { font-weight: 700; font-size: var(--fs-md); padding-top: 18px; }
.cl-depth-1 > a { padding-left: 22px; font-weight: 600; }
.cl-depth-2 > a { padding-left: 44px; }
.cl-depth-3 > a { padding-left: 66px; font-size: var(--fs-sm); }
.cl-code { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--head-ink); margin-right: 8px; }
/* Tiêu đề mục danh mục kiểm soát: thường là cả câu dài, dùng cỡ vừa; mã mục thành dòng nhỏ phía trên */
.page-title--entry { font-size: 22px; line-height: 1.35; letter-spacing: -0.01em; max-width: 52rem; }
.page-title--entry .cl-code { display: block; font-size: var(--fs-md); letter-spacing: 0.02em; margin: 0 0 6px; }
.page-title .cl-code { color: var(--gold-ink); margin-right: 12px; }
.cl-text { font-size: 1.0625rem; }
.portal-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; font-size: var(--fs-sm); color: var(--slate); padding: 8px 0; border-top: 1px solid var(--line); margin-top: 12px; }
.portal-bar form { margin: 0; }

/* ---- Thích ứng màn hình hẹp ------------------------------------------ */
@media (max-width: 1360px) and (min-width: 761px) {
  /* Màn hình vừa: 2 cột (cơ quan | truy cập nhanh), ô liên kết xuống hàng dưới */
  .footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 36px; }
  .footer__select { max-width: 26rem; }
}
@media (max-width: 1040px) {
  .lead-row { grid-template-columns: 1fr; }
  .lead-side { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
  .layout-2 { grid-template-columns: 1fr; gap: 40px; }
  .footer__grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .footer__stats dl { gap: 3px; max-width: 20rem; }
  .footer .footer__grid ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; }
  .footer__brand > div { min-width: 0; overflow-wrap: anywhere; }
  .media-row { grid-template-columns: 1fr 1fr; }
  .media-row .media:first-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  :root { --gutter: max(16px, env(safe-area-inset-left, 0px)); --gutter-r: max(16px, env(safe-area-inset-right, 0px)); }
  .topbar__user, .topbar__wd { display: none; }
  .topbar a, .topbar__date, .topbar__logout button { white-space: nowrap; }
  .topbar .wrap { gap: 8px; }
  .topbar__links { gap: 10px; }
  .masthead .wrap { padding-block: 10px; gap: 12px; justify-content: space-between; }
  .brand { gap: 10px; }
  .brand img { width: 52px; height: 52px; }
  .brand__agency, .brand__rule, .brand__spacer { display: none; }
  .brand__text { justify-items: start; text-align: left; }
  .brand__name { font-size: 1.1875rem; }
  .noticebar .wrap { gap: 10px; padding-block: 8px; }
  .noticebar__date { display: none; }
  .noticebar__text { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.4; }
  .section { padding-block: 28px; }
  .section__head { margin-bottom: 14px; }
  .section__title { font-size: var(--fs-md); padding: 8px 14px 7px; }
  .section__more { font-size: var(--fs-xs); }
  .lead-row { padding-block: 20px 36px; gap: 32px; }
  .feature__title { font-size: var(--fs-xl); }
  .page-title--entry { font-size: 18px; }
  .feature__lead { font-size: 1.0625rem; }
  .feature-pair { grid-template-columns: 1fr; gap: 18px; }
  .mini { grid-template-columns: 104px minmax(0, 1fr); }
  .mini img { width: 104px; }
  .lookup .wrap { padding-block: 40px; }
  .lookup__form { grid-template-columns: 1fr; border-radius: var(--radius); }
  .lookup__form select { border-left: 0; border-top: 1px solid #E3E4EE; }
  .lookup__form button { border-radius: var(--radius-sm); }
  .lookup__sources { grid-template-columns: 1fr; gap: 18px; }
  .source + .source { padding-left: 0; border-left: 0; border-top: 1px solid rgba(255,255,255,0.16); padding-top: 18px; }
  .lookup__seal { opacity: 0.5; right: -300px; }
  .page-head { padding-block: 20px 4px; }
  .list__item { grid-template-columns: 7.5rem minmax(0, 1fr); gap: 14px; padding-block: 18px; }
  .list__title { font-size: 1.0625rem; }
  .list__excerpt { display: none; }
  .prose { font-size: calc(1rem * var(--doc, 1)); line-height: 1.72; }
  /* Màn hẹp: thu đệm của nền xám để chữ không mất thêm bề ngang */
  .article { padding: 18px 16px; }
  .screen-form, .screen-form--3 { grid-template-columns: 1fr; }
  .hit { grid-template-columns: 1fr; }
  .hit__score { border-right: 0; border-bottom: 1px solid var(--line); grid-auto-flow: column; gap: 8px; place-content: start; text-align: left; align-items: baseline; }
  .alert-strip { grid-template-columns: 1fr; gap: 6px; }
  .filterbar .field, .filterbar .field--grow { flex: 1 1 100%; }
  .filterbox { margin-bottom: 18px; }
  .filterbox > summary {
    display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none;
    font-weight: 600; font-size: var(--fs-sm); padding: 11px 16px; border: 1px solid var(--line-strong); border-radius: 999px;
  }
  .filterbox > summary::-webkit-details-marker { display: none; }
  .filterbox > summary::after { content: "+"; font-size: 1.2rem; line-height: 1; color: var(--slate); }
  .filterbox[open] > summary { margin-bottom: 10px; }
  .filterbox[open] > summary::after { content: "–"; }
  .media-grid .media-row { grid-template-columns: 1fr 1fr; }
  .facts { grid-template-columns: 1fr; gap: 2px 0; }
  .facts dd { margin-bottom: 8px; }
}
@media (max-width: 480px) {
  .media-row, .media-grid .media-row { grid-template-columns: 1fr; }
  .cl-depth-2 > a { padding-left: 28px; }
  .cl-depth-3 > a { padding-left: 40px; }
}
@media (max-width: 1179px) {
  /* Màn hình nhỏ hơn 1180px: menu thu vào nút "Menu" ở đầu trang */
  .brand__spacer { display: none; }
  .masthead__menu {
    display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font: inherit; font-size: var(--fs-sm); font-weight: 600;
    color: var(--head-ink); background: var(--mist); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; cursor: pointer;
  }
  .masthead__menu svg { width: 18px; height: 18px; }
  .mainnav { position: static; }
  .js .mainnav { display: none; }
  .js .mainnav.is-open { display: block; }
  html:not(.js) .masthead__menu { display: none; }
  .mainnav .wrap { flex-direction: column; }
  .mainnav__list { flex-direction: column; margin: 0; padding-block: 6px 12px; }
  .mainnav__link { padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
  .mainnav__link[aria-current="page"] { border-bottom-color: rgba(255,255,255,0.1); box-shadow: inset 3px 0 0 var(--gold); padding-left: 12px; }
  .mainnav__search { display: flex; padding: 14px 0 4px; }
  .mainnav__search input { flex: 1; min-width: 0; font: inherit; padding: 11px 14px; border-radius: 999px 0 0 999px; border: 0; }
  .mainnav__search button { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-weight: 600; border: 0; padding: 0 18px; border-radius: 0 999px 999px 0; background: var(--gold); color: var(--navy-deep); }
  .submenu { position: static; display: block; box-shadow: none; border: 0; background: transparent; padding: 0 0 8px 14px; min-width: 0; }
  .submenu a { color: #DCDAF3; padding: 7px 0; }
  .submenu a:hover { background: transparent; color: #fff; }
}
@media (min-width: 1180px) {
  /* Tìm kiếm ở cuối thanh menu: ô nhập nền trắng luôn hiện, bấm kính lúp để tìm; cỡ cố định nên menu không xê dịch */
  .mainnav__search { margin-left: auto; display: flex; align-items: center; position: relative; padding-left: 12px; }
  .mainnav__search input { width: 13.5rem; height: 36px; font: inherit; font-size: var(--fs-sm); border: 0; border-radius: 999px; padding: 0 40px 0 14px; background: #fff; color: #555A72; }
  .mainnav__search input::placeholder { color: #8A8DA3; }
  .mainnav__search input:focus { outline: 3px solid var(--gold); outline-offset: 1px; }
  .mainnav__search button { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%; background: transparent; color: var(--navy); cursor: pointer; }
  .mainnav__search button:hover { background: var(--navy-soft); }
  .mainnav__search button svg { width: 17px; height: 17px; }
  .mainnav__search button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (min-width: 1180px) and (max-width: 1300px) {
  .mainnav__link { padding-inline: 11px; }
  .mainnav__list { margin-left: -11px; }
  .mainnav__search input { width: 11.5rem; }
}
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media print {
  .topbar, .mainnav, .noticebar, .masthead__search, .masthead__menu, .footer, .aside, .article__tools, .filterbar, .pager, .related, .preview-bar, .screen-form, .screen-meta .btn { display: none !important; }
  body { color: #000; background: #fff; }
  .layout-2 { display: block; }
}

/* ---- Ô chọn nhiều tệp (multifile.js) ---- */
.multifile { display: grid; gap: 8px; padding: 12px; border: 2px dashed var(--line-strong, #CDCFE0); border-radius: 8px; }
.multifile.is-drag { border-color: var(--navy, #201D55); background: var(--navy-soft, #ECEBF6); }
.multifile.is-error { border-color: var(--alert, #B42318); }
.multifile__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.multifile__hint { font-size: .8125rem; color: var(--slate, #595D74); }
.multifile__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.multifile__list { list-style: none; margin: 0; padding: 0; }
.multifile__list:empty { display: none; }
.multifile__list li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line, #E3E4EE); font-size: .875rem; }
.multifile__name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.multifile__list small { color: var(--slate, #595D74); white-space: nowrap; }
.multifile__sum { color: var(--slate, #595D74); font-weight: 600; }
.multifile__msg { margin: 0; color: var(--alert, #B42318); font-size: .875rem; }
.multifile__msg:empty { display: none; }
.btn--small { padding: 4px 12px; font-size: .8125rem; }

/* Mục lục văn bản dài (Luật, Nghị định): cột phụ, dính khi cuộn, mục đang đọc nổi bật (30/10/2026) */
.toc { position: sticky; top: 12px; }
.toc > summary { font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  border-bottom: 3px solid var(--navy); margin-bottom: 4px; padding-bottom: 2px; cursor: pointer; }
.toc[open] > summary { list-style: none; cursor: default; }
.toc[open] > summary::-webkit-details-marker { display: none; }
/* Chiều cao giới hạn đặt thẳng trên danh sách thì con lăn chuột mới cuộn được trong mục lục */
.toc__list { list-style: none; margin: 0; padding: 0 6px 0 0; counter-reset: none;
  max-height: calc(100vh - 5rem); overflow-y: auto; overscroll-behavior: contain; }
.toc__list li a { display: block; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 0.86rem; line-height: 1.4; }
.toc__l1 > a { font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; font-size: 0.8rem; }
.toc__l2 > a { padding-left: 10px; border-left: 2px solid transparent; }
.toc__list li a.is-doc { color: var(--link); font-weight: 600; border-left-color: var(--gold); background: var(--band); }
/* Văn bản liên quan dưới nội dung */
.doc-links .kicker { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.doc-links .stack li { padding-block: 9px; }
@media (max-width: 900px) {
  .toc { position: static; max-height: none; }
  .toc__list { max-height: 15rem; }
  /* Màn hình hẹp: mục lục lên trước nội dung (thu gọn), không thì nằm tận cuối văn bản dài */
  .layout-2 { display: flex; flex-direction: column; }
  .layout-2 > .aside--toc { order: -1; }
  .toc > summary { cursor: pointer; }
  .toc:not([open]) { border-bottom: 0; }
}

/* ---- Vùng chạm trên điện thoại (rà giao diện 31/10/2026) ----------------
   WCAG 2.5.8 khuyến nghị vùng bấm tối thiểu 24×24px. Các liên kết điều hướng dưới đây cao
   16–23px nên ngón tay dễ bấm trượt sang liên kết bên cạnh. Chỉ nới phần đệm dọc, không đổi
   cỡ chữ và không đổi bố cục; liên kết nằm giữa câu văn giữ nguyên (ngoại lệ của chuẩn). */
@media (max-width: 760px) {
  .topbar__links > a,
  .topbar__logout button,
  .section__more a,
  .notices__foot a,
  .crumbs a,
  a.kicker,
  .sl-card__nhom a,
  .sl-card h2 a,
  .columns--tin .stack a.t,
  .footer__grid a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
  }
  /* Hai nút ngôn ngữ nhỏ nhất: nới cả hai chiều */
  .lang a { min-width: 34px; min-height: 26px; justify-content: center; }
  /* Công cụ cuối bài, liên kết trong thẻ, liên kết phụ và tên trong bảng tra cứu */
  .article__tools a, .article__tools button,
  .footer__legal a,
  .sl-card__intro a,
  .screen-meta a,
  .aside a,
  .table-wrap td a,
  .sitemap a,
  .prose li > a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
  }
}