/* Bộ V3 — VỎ TRANG. Viết sạch từ đầu, thay main.css, components.css, mobile-perf.css, desktop-perf.css, hub-grid.css.
   Nguồn giá trị: v3-thang.css (tải trước file này). Kế hoạch: KE-HOACH.md mục 4.2, GĐ1 bước 1.3.
   Mục lục: 1 Biến vỏ · 2 Reset và nền · 3 Tiện ích · 4 Header · 5 Menu điện thoại · 6 Tìm kiếm
            7 Breadcrumb · 8 Dải lịch · 9 Footer · 10 Hộp Góp ý · 11 Thông báo · 12 Mục lục
            13 Khoá cuộn và ẩn nút nổi · 14 Giảm chuyển động · 15 In. */

/* ============ 1. BIẾN CỦA VỎ ============
   --header-bar, --cbar-height, --header-height do ui-layer-coordinator.js đặt lúc chạy (đo thật).
   Số dưới đây chỉ là giá trị dự phòng trước khi JS chạy, ước theo bản cũ. */
:root {
  --header-bar: 6rem;
  --cbar-height: 6.375rem;
  --header-height: calc(var(--header-bar) + var(--cbar-height));
  --v3-dinh-tren: var(--header-bar); /* mép trên của mọi khối dính trong tool: dải lịch cuộn đi, chỉ thanh header ở lại */
  /* Bề rộng khung vỏ: giữ 1200 px như bản đang chạy để header, dải lịch, footer không đổi hình */
  --vo-rong: 75rem;
  /* Tầng chồng của lớp phủ: khớp số cứng của nút nổi (900) và Hỏi AI, hai file đó giữ nguyên */
  --vo-z-nut: 900;
  --vo-z-nen-lop: 1200;
  --vo-z-lop: 1201;
  --vo-z-bao: 1210;
}
@media (max-width: 768px) {
  :root { --header-bar: 5rem; --cbar-height: 6.4375rem; }
}

/* ============ 2. RESET TOÀN CỤC, NỀN, THANH CUỘN, BÔI ĐEN, CON TRỎ ============ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable;
  /* Hai bên khung 1200 px: nền gần đen có hoạ tiết triện rất mờ */
  background-color: color-mix(in srgb, var(--v3-n-0) 25%, #000);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M0%2C60 L0%2C0 L60%2C0 L60%2C60 L20%2C60 L20%2C20 L44%2C20 L44%2C44 L16%2C44 L16%2C16 L48%2C16 L48%2C48 L12%2C48 L12%2C12 L52%2C12 L52%2C52 L8%2C52 L8%2C8 L56%2C8 L56%2C56 L4%2C56 L4%2C4 L60%2C4' fill='none' stroke='rgba(201%2C169%2C110%2C0.07)' stroke-width='0.5'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-attachment: fixed;
}
/* Viền tối mờ hai mép màn hình lớn */
html::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--v3-z-dinh);
  background:
    linear-gradient(to right, color-mix(in srgb, var(--v3-n-0) 25%, #000) 0%, transparent 3%),
    linear-gradient(to left, color-mix(in srgb, var(--v3-n-0) 25%, #000) 0%, transparent 3%);
}
body {
  position: relative;
  max-width: var(--vo-rong);
  margin-inline: auto;
  overflow-x: hidden;
  font-family: var(--v3-f-ui);
  font-size: var(--v3-cs-16);
  line-height: var(--v3-cd-giao-dien);
  color: var(--v3-c-nga);
  background: var(--v3-n-0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Link, ảnh và con trỏ nền: link vàng không gạch chân, ảnh co theo khung, mọi thứ bấm được có tay chỉ */
/* :where giữ độ ưu tiên bằng 0 để mọi lớp của khung, của tool đè được */
:where(a) { color: var(--v3-c-vang); text-decoration: none; transition: color var(--v3-t-120) var(--v3-e-deu); }
:where(a:hover) { color: var(--v3-c-nga); }
img { display: block; max-width: 100%; height: auto; }
:where(a, button, [role="button"], summary, input[type="submit"], input[type="checkbox"], input[type="radio"], label[for]) { cursor: pointer; }
.sm-container { width: 100%; max-width: var(--vo-rong); margin: 0 auto; padding: 0 var(--v3-k-16); }
/* Cormorant mặc định số kiểu cổ cao thấp so le: mọi số trên trang V3 thẳng hàng (KE-HOACH 5.10) */
body.sm-v3 { font-variant-numeric: lining-nums; }
.sm-main { position: relative; }
/* Vệt tối dần dưới header để nền công cụ không dính vào dải lịch */
.sm-main::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 17.5rem;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(to bottom, rgba(12, 12, 10, .94) 0%, rgba(12, 12, 10, .5) 35%, rgba(12, 12, 10, .1) 65%, var(--tool-bg-blend, transparent) 100%);
}
/* Mọi khối con nằm trên vệt tối. Không dùng isolation: hộp thoại trong tool phải nổi trên header */
:where(.sm-main) > * { position: relative; }
body.sm-v3 :where(p, li, dd, td, th, summary, figcaption) { text-wrap: pretty; } /* tránh dòng cuối một từ */
:root { --tool-bg-blend: var(--v3-n-0); --tool-accent-main: var(--v3-c-vang); }

/* Thanh cuộn trang và khung cuộn (Chrome, Safari) */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--v3-n-1); }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--v3-c-vang) 35%, transparent); border-radius: var(--v3-bo-tron); }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--v3-c-vang) 60%, transparent); }
/* Firefox */
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--v3-c-vang) 35%, transparent) var(--v3-n-1); }
}
/* Màu bôi đen và con trỏ nhập */
::selection { background: color-mix(in srgb, var(--v3-c-vang) 30%, transparent); color: var(--v3-c-nga); }
input, textarea, select, [contenteditable] { caret-color: var(--v3-c-vang); }

/* Viền focus chung cho link, nút của vỏ */
:where(a, button, summary, [tabindex]):focus-visible {
  outline: var(--v3-vien-2) solid var(--v3-c-vang);
  outline-offset: var(--v3-vien-2);
}

/* ============ 3. TIỆN ÍCH ============ */
/* Chỉ dành cho trình đọc màn hình */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* Thuộc tính hidden luôn thắng display của một lớp đơn */
body [hidden] { display: none; }
/* Link nhảy tới nội dung: ẩn cho tới khi nhận focus bàn phím */
.sm-skip-to-content {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.sm-skip-to-content:focus {
  position: fixed; left: var(--v3-k-16); top: var(--v3-k-16); z-index: var(--vo-z-bao);
  width: auto; height: auto; padding: var(--v3-k-12) var(--v3-k-24); margin: 0;
  overflow: visible; clip: auto; clip-path: none; white-space: normal;
  background: var(--v3-n-0); color: var(--v3-c-vang);
  font-size: var(--v3-cs-16); text-decoration: none;
  border: var(--v3-vien-2) solid var(--v3-c-vang);
}

/* ============ 4. HEADER ============ */
.sm-header {
  position: fixed; top: 0; left: 0; right: 0;
  width: 100%; max-width: var(--vo-rong); margin-inline: auto;
  height: 6rem;
  background: var(--v3-n-0);
  border-bottom: var(--v3-vien-1) solid var(--v3-v-2);
  box-shadow: var(--v3-bong-2);
  z-index: var(--v3-z-dinh);
  overflow: visible;
}
.sm-header .sm-container { position: relative; z-index: 3; height: 100%; }
.sm-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 100%; gap: var(--v3-k-24);
  padding: 0 var(--v3-k-24);
}
/* Họa tiết khắc hai góc, chỉ trang trí */
.sm-header__engraving {
  position: absolute; top: 0;
  width: 9.375rem; height: 6rem;
  color: var(--v3-c-nhan); opacity: var(--v3-mo-4);
  pointer-events: none;
  mask-image: linear-gradient(90deg, #000, transparent);
}
.sm-header__engraving--left { left: 0; }
.sm-header__engraving--right { right: 0; transform: scaleX(-1); }
.sm-header__nebula, .sm-header__corner, .sm-header__meander, .sm-header__seal { display: none; }

/* Logo. Kích thước thương hiệu (chữ 30/26/23 px, biểu tượng 46/38/34 px) giữ nguyên, ngoài thang chữ. */
.sm-header__logo {
  display: inline-flex; align-items: center; flex-shrink: 0;
  gap: .625rem; text-decoration: none;
  transition: opacity var(--v3-t-200) var(--v3-e-deu);
}
.sm-header__logo:hover { opacity: var(--v3-mo-5); }
.sm-header__logo-icon { display: block; flex-shrink: 0; width: 2.875rem; height: 2.875rem; color: var(--v3-c-vang); }
.sm-header__logo-words { display: inline-grid; grid-template-columns: 1fr; gap: 0; flex-shrink: 0; }
.sm-header__logo-name {
  display: block; white-space: nowrap;
  padding-bottom: var(--v3-k-4);
  font-family: var(--v3-f-ui); font-size: 1.875rem; font-weight: var(--v3-dam-4);
  letter-spacing: .01em; line-height: 1.15;
  color: var(--v3-c-nga);
}
.sm-header__logo-name strong { font-weight: var(--v3-dam-7); color: var(--v3-c-vang); }
.sm-header__logo-line {
  display: block; width: 100%; height: var(--v3-vien-1); margin-bottom: .3125rem;
  background: var(--v3-c-vang); opacity: var(--v3-mo-4);
}
.sm-header__logo-sub {
  display: block; width: 100%; white-space: nowrap;
  font-family: var(--v3-f-ui); font-size: var(--v3-cs-12); font-weight: var(--v3-dam-5);
  line-height: 1; letter-spacing: .32em; text-transform: uppercase; text-align: left;
  color: var(--v3-c-vang);
}

/* Menu chính trên máy tính */
.sm-header__nav { display: flex; align-items: center; justify-content: flex-end; flex: 1; height: 100%; margin-left: auto; position: relative; z-index: 1; }
.sm-header__menu {
  display: flex; align-items: center; height: 100%;
  gap: clamp(1.125rem, 2.6vw, 2.5rem);
  list-style: none;
}
.sm-header__menu > li { position: relative; display: flex; align-items: center; height: 100%; }
/* Hình thoi nhỏ ngăn giữa hai mục */
.sm-header__menu > li + li::before {
  content: ''; flex-shrink: 0; width: var(--v3-k-8); height: var(--v3-k-8); margin: 0 var(--v3-k-4);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M4 .5 L7.5 4 L4 7.5 L.5 4Z' fill='none' stroke='%23c9a96e' stroke-width='.8' opacity='.3'/%3E%3Ccircle cx='4' cy='4' r='.8' fill='%23c9a96e' opacity='.2'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
  transition: opacity var(--v3-t-360) var(--v3-e-deu);
}
.sm-header__menu > li:hover + li::before { opacity: var(--v3-mo-6); }
.sm-header__menu > li > a {
  position: relative; display: inline-flex; align-items: center;
  height: 100%; min-height: 2.75rem; padding: 0 .875rem;
  font-family: var(--v3-f-ui); font-size: var(--v3-cs-13); font-weight: var(--v3-dam-5);
  letter-spacing: .14em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  color: var(--v3-c-nhan);
  transition: color var(--v3-t-200) var(--v3-e-deu);
}
.sm-header__menu > li:first-child > a { font-weight: var(--v3-dam-6); color: var(--v3-c-vang); }
.sm-header__menu > li > a:hover { color: var(--v3-c-nga); }
.sm-header__menu > li.current-menu-item > a, .sm-header__menu > li.current-menu-ancestor > a { color: var(--v3-c-vang); }
/* Gạch chân vàng chạy ra từ giữa khi rê chuột */
.sm-header__menu > li > a::after {
  content: ''; position: absolute; bottom: .625rem; left: 50%; width: 0; height: var(--v3-vien-1);
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--v3-c-vang) 50%, transparent);
  pointer-events: none;
  transition: width var(--v3-t-360) var(--v3-e-deu);
}
.sm-header__menu > li > a:hover::after { width: 70%; }
.sm-header__menu > li.current-menu-item > a::after, .sm-header__menu > li.current-menu-ancestor > a::after { width: 50%; }

/* Danh sách thả của Công Cụ */
.sm-header__menu .sub-menu {
  position: absolute; top: 100%; left: 50%; z-index: var(--v3-z-noi);
  min-width: 11.25rem; padding: var(--v3-k-12) 0; list-style: none;
  background: color-mix(in srgb, var(--v3-n-0) 97%, transparent);
  border-top: var(--v3-vien-1) solid var(--v3-v-2);
  box-shadow: var(--v3-bong-3);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(-50%) translateY(-8px);
  transition: opacity var(--v3-t-200) var(--v3-e-deu), transform var(--v3-t-200) var(--v3-e-deu), visibility 0s linear var(--v3-t-200);
}
.sm-header__menu > li:hover > .sub-menu, .sm-header__menu > li:focus-within > .sub-menu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
}
.sm-header__menu .sub-menu li { position: relative; display: block; height: auto; }
.sm-header__menu .sub-menu li + li::after {
  content: ''; position: absolute; top: 0; left: var(--v3-k-16); right: var(--v3-k-16); height: var(--v3-vien-1);
  background: linear-gradient(90deg, transparent, var(--v3-v-1) 30%, var(--v3-v-1) 70%, transparent);
  pointer-events: none;
}
.sm-header__menu .sub-menu li a {
  display: flex; align-items: center; gap: var(--v3-k-8);
  height: auto; min-height: 2.5rem; padding: var(--v3-k-8) 1.25rem var(--v3-k-8) var(--v3-k-16);
  font-family: var(--v3-f-ui); font-size: var(--v3-cs-12); font-weight: var(--v3-dam-4);
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  color: var(--v3-c-nhan);
  transition: color var(--v3-t-200) var(--v3-e-deu), padding-left var(--v3-t-200) var(--v3-e-deu);
}
.sm-header__menu .sub-menu li a::before {
  content: ''; flex-shrink: 0; width: 6px; height: 6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M4 .5 L7.5 4 L4 7.5 L.5 4Z' fill='none' stroke='%23c9a96e' stroke-width='.8' opacity='.4'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: opacity var(--v3-t-200) var(--v3-e-deu);
}
.sm-header__menu .sub-menu li a::after { display: none; }
.sm-header__menu .sub-menu li a:hover { color: var(--v3-c-nga); padding-left: 1.375rem; }
.sm-header__menu .sub-menu li a:hover::before { opacity: var(--v3-mo-5); }

/* Hai nút tròn trên điện thoại: tìm kiếm và menu */
.sm-header__search-toggle, .sm-header__toggle { display: none; }
.sm-header__search-toggle {
  align-items: center; justify-content: center; flex: 0 0 auto;
  width: 2.75rem; height: 2.75rem; min-width: 2.75rem; min-height: 2.75rem; padding: .625rem;
  appearance: none; background: color-mix(in srgb, var(--v3-c-vang) 3%, transparent);
  border: var(--v3-vien-1) solid color-mix(in srgb, var(--v3-c-vang) 35%, transparent); border-radius: var(--v3-bo-tron);
  color: var(--v3-c-nhan); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: color var(--v3-t-120) var(--v3-e-deu);
}
.sm-header__search-toggle svg { width: 1.375rem; height: 1.375rem; }
.sm-header__search-toggle:hover, .sm-header__search-toggle[aria-expanded="true"] { color: var(--v3-c-vang); }
.sm-header__toggle {
  flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; gap: 7px;
  width: 2.75rem; min-width: 2.75rem; min-height: 2.75rem; padding: var(--v3-k-12) .625rem;
  appearance: none; cursor: pointer; border-radius: var(--v3-bo-tron);
  background: color-mix(in srgb, var(--v3-c-vang) 3%, transparent);
  border: var(--v3-vien-1) solid color-mix(in srgb, var(--v3-c-vang) 35%, transparent);
  -webkit-tap-highlight-color: transparent;
}
.sm-header__toggle span {
  display: block; height: 1.5px; border-radius: 1px; transform-origin: center;
  background: color-mix(in srgb, var(--v3-c-vang) 65%, transparent);
  transition: transform var(--v3-t-200) var(--v3-e-deu), opacity var(--v3-t-120) var(--v3-e-deu), background var(--v3-t-120) var(--v3-e-deu);
}
.sm-header__toggle span:nth-child(1) { width: 18px; }
.sm-header__toggle span:nth-child(2) { width: 24px; }
.sm-header__toggle span:nth-child(3) { width: 14px; }
.sm-header__toggle:hover span, .sm-header__toggle.is-open span { background: var(--v3-c-vang); }
.sm-header__toggle.is-open span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
.sm-header__toggle.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.sm-header__toggle.is-open span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }

/* Dải ngăn giữa header và nội dung: trên máy tính dải lịch che nó, chỉ giữ cho trang không có dải lịch */
.sm-header-transition {
  position: fixed; top: var(--header-height); left: 0; right: 0;
  max-width: var(--vo-rong); margin: 0 auto; height: .875rem;
  pointer-events: none; overflow: hidden; z-index: calc(var(--v3-z-dinh) - 2);
  background: var(--v3-n-0);
}
#sm-celestial-bar + .sm-header-transition { display: none; }
.sm-ht__meander {
  width: 100%; height: var(--v3-k-8); opacity: var(--v3-mo-2);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M0.5,7 L0.5,0.5 L7,0.5 L7,7 L2.5,7 L2.5,3 L5.5,3 L5.5,5.5 L3.5,5.5 L3.5,4 L4.5,4' fill='none' stroke='%23c9a96e' stroke-width='0.7' stroke-linejoin='miter' stroke-linecap='square'/%3E%3C/svg%3E") center repeat-x;
}
.sm-ht__dots { width: 100%; height: 6px; }
.sm-ht__glow { width: 100%; height: 1.875rem; background: linear-gradient(to bottom, color-mix(in srgb, var(--v3-c-vang) 6%, transparent), transparent); }

/* Điện thoại và máy tính bảng nhỏ (tối đa 768 px) */
@media (max-width: 768px) {
  .sm-header { height: 5rem; background: var(--v3-n-0); box-shadow: var(--v3-bong-1); }
  .sm-header__inner { gap: 2px; padding: 0 var(--v3-k-12); width: 100%; }
  .sm-header__engraving { width: 6.25rem; height: 5rem; opacity: var(--v3-mo-3); }
  .sm-header__nav { display: none; }
  .sm-header__logo { gap: var(--v3-k-8); margin-right: auto; min-width: 0; flex: 1; }
  .sm-header__logo-icon { width: 2.375rem; height: 2.375rem; }
  .sm-header__logo-name { font-size: 1.625rem; padding-bottom: 3px; }
  .sm-header__logo-line { margin-bottom: var(--v3-k-4); }
  .sm-header__logo-sub { letter-spacing: .3em; }
  .sm-header__search-toggle { display: inline-flex; }
  .sm-header__toggle { display: flex; margin-left: 0; }
  .sm-header-transition { position: absolute; overflow: visible; }
}
@media (max-width: 375px) {
  .sm-header__logo-sub { letter-spacing: .31em; }
}
@media (max-width: 360px) {
  .sm-header__logo { gap: 7px; }
  .sm-header__logo-icon { width: 2.125rem; height: 2.125rem; }
  .sm-header__logo-name { font-size: min(1.4375rem, 7.2vw); }
  /* Chữ to A+: logo không phình theo cỡ gốc để khỏi tràn ngang (7,2vw = 1,4375rem ở màn 320) */
  .sm-header__logo-icon { width: min(2.125rem, 10.6vw); height: min(2.125rem, 10.6vw); }
  .sm-header__logo-sub { font-size: min(var(--v3-cs-12), 3.75vw); }
}
/* Máy tính bảng ngang nhỏ: menu gọn lại cho vừa hàng */
@media (min-width: 769px) and (max-width: 1100px) {
  .sm-header__inner { gap: var(--v3-k-16); }
  .sm-header__menu { gap: 1.125rem; }
  .sm-header__menu > li > a { padding-inline: .5rem; font-size: var(--v3-cs-12); letter-spacing: .08em; }
}
/* Màn cực hẹp (dưới 260 px): bỏ dòng phụ của logo */
@media (max-width: 260px) {
  .sm-header__logo-sub, .sm-header__logo-line { display: none; }
  .sm-header__logo-name { font-size: .9375rem; letter-spacing: 0; }
  .sm-header__logo-words { max-width: 6rem; white-space: normal; }
}

/* ============ 5. MENU ĐIỆN THOẠI ============
   Nằm ngoài header để lớp mờ của header không giữ nó lại. Mở bằng class .active do main.js đặt. */
.sm-mobile-menu {
  position: fixed; top: var(--header-bar); left: 0; right: 0;
  display: block; width: 100%; max-width: var(--vo-rong); margin-inline: auto;
  padding: 0; overflow: hidden;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Ccircle cx='20' cy='30' r='1' fill='%23c9a96e' opacity='0.08'/%3E%3Ccircle cx='80' cy='15' r='0.8' fill='%23c9a96e' opacity='0.06'/%3E%3Ccircle cx='140' cy='45' r='1.2' fill='%23c9a96e' opacity='0.07'/%3E%3Ccircle cx='170' cy='20' r='0.7' fill='%23c9a96e' opacity='0.05'/%3E%3Ccircle cx='55' cy='65' r='0.9' fill='%23c9a96e' opacity='0.06'/%3E%3Ccircle cx='120' cy='80' r='1' fill='%23c9a96e' opacity='0.08'/%3E%3Ccircle cx='185' cy='70' r='0.8' fill='%23c9a96e' opacity='0.05'/%3E%3Ccircle cx='35' cy='90' r='1.1' fill='%23c9a96e' opacity='0.06'/%3E%3C/svg%3E") repeat,
    color-mix(in srgb, var(--v3-n-0) 99%, transparent);
  border-top: var(--v3-vien-1) solid var(--v3-v-1);
  box-shadow: var(--v3-bong-3);
  z-index: var(--vo-z-lop);
  opacity: 0; pointer-events: none;
  transform: translateY(-12px);
  transition: transform var(--v3-t-200) var(--v3-e-deu), opacity var(--v3-t-200) var(--v3-e-deu);
}
.sm-mobile-menu.active { opacity: 1; pointer-events: auto; transform: translateY(0); }
.sm-mobile-menu[aria-hidden="true"] a, .sm-mobile-menu[aria-hidden="true"] button { visibility: hidden; }
@media (max-width: 768px) {
  .sm-mobile-menu { max-height: calc(100dvh - var(--header-bar)); overflow-y: auto; overscroll-behavior: contain; box-shadow: var(--v3-bong-2); }
}
.sm-mobile-menu__meander {
  height: var(--v3-k-8); opacity: var(--v3-mo-3); pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M0.5,7 L0.5,0.5 L7,0.5 L7,7 L2.5,7 L2.5,3 L5.5,3 L5.5,5.5 L3.5,5.5 L3.5,4 L4.5,4' fill='none' stroke='%23c9a96e' stroke-width='0.7' stroke-linejoin='miter' stroke-linecap='square'/%3E%3C/svg%3E") center repeat-x;
}
.sm-mobile-menu__watermark {
  position: absolute; right: 0; bottom: 0; width: 7.5rem; height: 7.5rem; pointer-events: none;
  background: radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--v3-c-vang) 6%, transparent) 0%, transparent 70%);
}
.sm-mobile-menu__list { list-style: none; padding: 6px 0; }
.sm-mobile-menu__list li {
  position: relative; opacity: 0; transform: translateX(-8px);
  transition: opacity var(--v3-t-200) var(--v3-e-deu), transform var(--v3-t-200) var(--v3-e-deu);
}
.sm-mobile-menu.active .sm-mobile-menu__list li { opacity: 1; transform: translateX(0); }
.sm-mobile-menu.active .sm-mobile-menu__list li:nth-child(2) { transition-delay: 60ms; }
.sm-mobile-menu.active .sm-mobile-menu__list li:nth-child(3) { transition-delay: 90ms; }
.sm-mobile-menu.active .sm-mobile-menu__list li:nth-child(n+4) { transition-delay: 120ms; }
.sm-mobile-menu__list li + li::after {
  content: ''; position: absolute; top: 0; left: 1.25rem; right: 1.25rem; height: var(--v3-vien-1); pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--v3-v-1) 30%, var(--v3-v-1) 70%, transparent);
}
.sm-mobile-menu__list > li::before {
  content: ''; position: absolute; left: 1.25rem; top: 50%; width: 10px; height: 10px; transform: translateY(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M4 .5 L7.5 4 L4 7.5 L.5 4Z' fill='none' stroke='%23c9a96e' stroke-width='.8' opacity='.35'/%3E%3Ccircle cx='4' cy='4' r='.8' fill='%23c9a96e' opacity='.2'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
  transition: opacity var(--v3-t-200) var(--v3-e-deu);
}
.sm-mobile-menu__list > li:first-child::before, .sm-mobile-menu__list > li:hover::before { opacity: var(--v3-mo-6); }
.sm-mobile-menu__list > li.menu-item-has-children::before { display: none; }
.sm-mobile-menu__list li a {
  display: flex; align-items: center; min-height: 3.5rem; padding: 1.125rem 1.375rem 1.125rem 2.625rem;
  font-family: var(--v3-f-ui); font-size: var(--v3-cs-14); font-weight: var(--v3-dam-5);
  letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  color: var(--v3-c-nhan);
  transition: color var(--v3-t-200) var(--v3-e-deu), padding-left var(--v3-t-200) var(--v3-e-deu);
}
.sm-mobile-menu__list li:first-child a { font-weight: var(--v3-dam-6); color: var(--v3-c-vang); }
.sm-mobile-menu__list li a:hover, .sm-mobile-menu__list li.current-menu-item a { color: var(--v3-c-nga); padding-left: 3rem; }
.sm-mobile-menu__list > .menu-item-has-children { position: relative; }
.sm-mobile-menu__list > .menu-item-has-children > a { padding-right: 3.5rem; }
/* Danh sách con gấp mở bằng class .sub-open */
.sm-mobile-menu__list .sub-menu { list-style: none; padding: 0; margin: 0; max-height: 0; overflow: hidden; contain: layout style; transition: max-height var(--v3-t-200) var(--v3-e-deu); }
.sm-mobile-menu__list .menu-item-has-children.sub-open > .sub-menu { max-height: 31.25rem; }
.sm-mobile-menu__list .sub-menu li { opacity: 0; transform: translateX(-6px); transition: opacity var(--v3-t-120) var(--v3-e-deu), transform var(--v3-t-120) var(--v3-e-deu); }
.sm-mobile-menu__list .menu-item-has-children.sub-open > .sub-menu li { opacity: 1; transform: translateX(0); }
.sm-mobile-menu__list .sub-menu li a { min-height: 2.75rem; padding: .875rem 1.375rem .875rem 3.875rem; font-size: var(--v3-cs-12); font-weight: var(--v3-dam-4); letter-spacing: .08em; color: var(--v3-c-nhan); }
.sm-mobile-menu__list .sub-menu li a:hover, .sm-mobile-menu__list .sub-menu li.current-menu-item a { color: var(--v3-c-nga); padding-left: 4.25rem; }
.sm-mobile-menu__list .sub-menu li::before {
  content: ''; position: absolute; left: 2.75rem; top: 50%; width: 7px; height: 7px; transform: translateY(-50%); pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M4 .5 L7.5 4 L4 7.5 L.5 4Z' fill='none' stroke='%23c9a96e' stroke-width='.8' opacity='.35'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sm-mobile-menu__list .sub-menu li + li::after { left: 2.625rem; right: 1.375rem; }
/* Hình thoi và nút mũi tên do main.js chèn vào mục có menu con */
.sm-mob-diamond {
  position: absolute; left: 1.25rem; top: 0; width: 10px; height: 10px; margin-top: 1.4375rem; pointer-events: none; opacity: var(--v3-mo-6);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M4 .5 L7.5 4 L4 7.5 L.5 4Z' fill='none' stroke='%23c9a96e' stroke-width='.8' opacity='.35'/%3E%3Ccircle cx='4' cy='4' r='.8' fill='%23c9a96e' opacity='.2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sm-mob-chevron {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: center;
  width: 3.25rem; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.sm-mob-chevron::after {
  content: ''; width: 10px; height: 10px; transform: rotate(45deg);
  border-right: 1.5px solid color-mix(in srgb, var(--v3-c-vang) 50%, transparent); border-bottom: 1.5px solid color-mix(in srgb, var(--v3-c-vang) 50%, transparent);
  transition: transform var(--v3-t-200) var(--v3-e-deu);
}
.menu-item-has-children.sub-open > .sm-mob-chevron::after { transform: rotate(-135deg); }
/* Màn mờ phía sau menu */
.sm-mobile-menu-backdrop {
  display: none; position: fixed; top: var(--header-bar); left: 0; right: 0; bottom: 0;
  z-index: var(--vo-z-nen-lop); background: color-mix(in srgb, #000 65%, transparent);
  opacity: 0; pointer-events: none;
  transition: opacity var(--v3-t-200) var(--v3-e-deu);
}
.sm-mobile-menu-backdrop.is-active { display: block; opacity: 1; pointer-events: auto; }
/* Máy tính không dùng menu này, chỉ giữ cho khi cửa sổ thu nhỏ giữa chừng */
@media (min-width: 769px) {
  .sm-mobile-menu { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
}

/* ============ 6. TÌM KIẾM ============ */
.sm-header__search { position: relative; display: none; flex: 1; max-width: 32.5rem; margin: 0 clamp(1rem, 3vw, 2.5rem); z-index: var(--vo-z-lop); }
@media (min-width: 769px) {
  .sm-header__search { display: block; flex: 0 1 18.75rem; max-width: 18.75rem; margin: 0; }
}
@media (min-width: 769px) and (max-width: 1100px) {
  .sm-header__search { flex-basis: 10rem; min-inline-size: 0; }
}
/* Điện thoại: ô tìm kiếm thành hộp nổi dưới header khi bấm kính lúp */
@media (max-width: 768px) {
  body.sm-hsearch-open .sm-header__search {
    display: block; position: fixed; top: calc(var(--header-bar) + .625rem); left: var(--v3-k-12); right: var(--v3-k-12);
    width: auto; max-width: none; margin: 0;
  }
}

/* Chữ to (A+ trên 120%, class v3-chu-to do v3-chung.js đặt): ô tìm kiếm không đủ chỗ, dùng bố cục điện thoại cho tìm kiếm: thu gọn thành nút kính lúp, bấm mới mở hộp nổi */
@media (min-width: 769px) and (max-width: 1400px) {
  .v3-chu-to .sm-header__search { display: none; }
  .v3-chu-to .sm-header__search-toggle { display: inline-flex; }
  .v3-chu-to body.sm-hsearch-open .sm-header__search {
    display: block; position: fixed; top: calc(var(--header-bar) + .625rem); left: auto; right: var(--v3-k-12);
    width: min(24rem, calc(100vw - 2rem)); max-width: none; margin: 0;
  }
}
/* Chữ to ở máy tính bảng hẹp (769-1000): menu ngang không đủ chỗ, dùng nút menu của điện thoại */
@media (min-width: 769px) and (max-width: 1000px) {
  .v3-chu-to .sm-header__nav { display: none; }
  .v3-chu-to .sm-header__toggle { display: flex; margin-left: 0; }
}
.sm-hsearch-form {
  position: relative; display: flex; align-items: center; gap: .625rem;
  height: 2.75rem; padding: 0 1.125rem;
  background: var(--v3-n-2);
  border: var(--v3-vien-1) solid var(--v3-v-2); border-radius: var(--v3-bo-tron);
  transition: border-color var(--v3-t-200) var(--v3-e-deu), background var(--v3-t-200) var(--v3-e-deu), box-shadow var(--v3-t-200) var(--v3-e-deu);
}
.sm-hsearch-form:hover { border-color: color-mix(in srgb, var(--v3-c-vang) 45%, transparent); }
.sm-hsearch-form:focus-within { border-color: color-mix(in srgb, var(--v3-c-vang) 60%, transparent); background: var(--v3-n-3); box-shadow: 0 0 0 3px var(--v3-v-1); }
.sm-hsearch-icon { flex-shrink: 0; color: var(--v3-c-vang); transition: color var(--v3-t-200) var(--v3-e-deu); }
.sm-hsearch-input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font-family: var(--v3-f-ui); font-size: var(--v3-cs-14); line-height: 2.5rem;
  color: var(--v3-c-nga);
}
.sm-hsearch-input::placeholder { color: color-mix(in srgb, var(--v3-c-vang) 35%, transparent); font-style: normal; letter-spacing: var(--v3-gc-1); }
.sm-hsearch-form--typewriter-visible .sm-hsearch-input::placeholder { color: transparent; }
.sm-hsearch-input::-webkit-search-cancel-button { display: none; }
/* Chữ gợi ý tự gõ chạy phía sau ô nhập */
.sm-hsearch-typewriter {
  position: absolute; left: 2.5rem; top: 0; height: 100%;
  display: flex; align-items: center; overflow: hidden; white-space: nowrap; pointer-events: none;
  font-family: var(--v3-f-ui); font-size: var(--v3-cs-12); letter-spacing: var(--v3-gc-1);
  color: var(--v3-c-nhan);
}
.sm-hsearch-typewriter::after { content: '|'; margin-left: 1px; font-weight: 300; color: var(--v3-c-vang); animation: v3-vo-con-tro .7s step-end infinite; }
.sm-hsearch-typewriter.is-hidden { display: none; }
@keyframes v3-vo-con-tro { 50% { opacity: 0; } }
.sm-hsearch-clear {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: var(--v3-k-4);
  border: 0; border-radius: var(--v3-bo-tron); background: none; cursor: pointer;
  color: color-mix(in srgb, var(--v3-c-vang) 40%, transparent);
  transition: background var(--v3-t-120) var(--v3-e-deu), color var(--v3-t-120) var(--v3-e-deu);
}
.sm-hsearch-clear:hover { background: var(--v3-v-1); color: var(--v3-c-vang); }
/* Khung kết quả thả xuống */
.sm-hsearch-results {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: var(--vo-z-bao);
  display: none; flex-direction: column;
  max-height: 32.5rem; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  background: color-mix(in srgb, var(--v3-n-0) 97%, transparent);
  border: var(--v3-vien-1) solid var(--v3-v-2); border-radius: var(--v3-bo-8);
  box-shadow: var(--v3-bong-2);
  -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4);
}
.sm-hsearch-results::-webkit-scrollbar { display: none; }
.sm-hsearch-results.is-active { display: flex; animation: v3-vo-hien-ket-qua var(--v3-t-200) var(--v3-e-ra) forwards; }
@keyframes v3-vo-hien-ket-qua { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* Đường vàng chạy ở mép trên khi mở (dùng chung cho hộp Góp ý, mục lục) */
.smfb-modal::before, .sm-hsearch-results::before, .sm-toc-sheet::before {
  content: ''; position: absolute; top: 0; left: 18%; right: 18%; height: var(--v3-vien-1); z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--v3-c-vang), transparent);
  transform: scaleX(0); transform-origin: center; opacity: 0;
  transition: transform var(--v3-t-200) var(--v3-e-deu), opacity var(--v3-t-200) var(--v3-e-deu);
}
.smfb-modal.is-open::before, .sm-hsearch-results.is-active::before, .sm-toc-sheet.is-open::before { transform: scaleX(1); opacity: 1; }
.sm-hsearch-backdrop {
  display: none; position: fixed; inset: 0; z-index: var(--vo-z-nen-lop);
  background: color-mix(in srgb, #000 50%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; pointer-events: none;
  transition: opacity var(--v3-t-200) var(--v3-e-deu);
}
.sm-hsearch-backdrop.is-active { display: block; opacity: 1; pointer-events: auto; }
/* Máy tính: màn mờ chỉ phủ đúng dải header (như bản đang chạy), không phủ cả trang */
@media (min-width: 769px) {
  .sm-hsearch-backdrop { position: absolute; }
}
@media (max-width: 768px) {
  .sm-hsearch-form { height: 3rem; padding: 0 var(--v3-k-12); background: var(--v3-n-0); }
  .sm-hsearch-input { font-size: var(--v3-cs-16); }
  .sm-hsearch-clear { width: 2.5rem; height: 2.5rem; padding: var(--v3-k-12); }
  .sm-hsearch-results { top: calc(100% + 8px); max-height: min(66vh, 33.75rem); -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--v3-n-0); }
  .sm-hsearch-backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; background: color-mix(in srgb, #000 92%, transparent); }
}
/* Nội dung kết quả tìm kiếm (JS của main.js dựng ra) */
.sbh-live-result-item { position: relative; display: flex; align-items: center; gap: var(--v3-k-12); min-height: 2.75rem; padding: .625rem var(--v3-k-16); text-decoration: none; cursor: pointer; color: var(--v3-c-nga); transition: background var(--v3-t-120) var(--v3-e-deu); }
.sbh-live-result-item:hover, .sbh-live-result-item.is-selected { background: var(--v3-v-1); }
.sbh-live-result-item::before {
  content: ''; position: absolute; left: 0; top: 20%; bottom: 20%; width: 3px;
  background: var(--v3-c-vang); border-radius: 0 2px 2px 0; opacity: 0; transform: scaleY(.5);
  transition: opacity var(--v3-t-120) var(--v3-e-deu), transform var(--v3-t-120) var(--v3-e-deu);
}
.sbh-live-result-item:hover::before, .sbh-live-result-item.is-selected::before { opacity: 1; transform: scaleY(1); }
.sbh-live-result-thumb, .sbh-live-result-thumb-placeholder { flex-shrink: 0; width: 3.25rem; height: 3.25rem; border-radius: var(--v3-bo-4); background: var(--v3-n-3); }
.sbh-live-result-thumb { object-fit: cover; }
.sbh-live-result-thumb-placeholder { display: flex; align-items: center; justify-content: center; color: var(--v3-c-nhan); }
.sbh-live-result-icon { flex-shrink: 0; width: 1.25rem; height: 1.25rem; color: var(--v3-c-nhan); }
.sbh-live-result-text { flex: 1; min-width: 0; }
.sbh-live-result-title {
  display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  font-size: var(--v3-cs-14); font-weight: var(--v3-dam-5); line-height: 1.4; color: var(--v3-c-nga);
}
.sbh-live-result-item:hover .sbh-live-result-title, .sbh-tool-item:hover .sbh-live-result-title { color: var(--v3-c-vang); }
.sbh-live-result-title mark { padding: 0 2px; border-radius: 2px; background: var(--v3-v-2); color: var(--v3-c-vang); }
.sbh-live-result-cat { margin-top: 3px; font-size: var(--v3-cs-12); color: var(--v3-c-nhan); }
.sbh-sr-section-label { padding: .625rem var(--v3-k-16) 5px; border-top: var(--v3-vien-1) solid var(--v3-v-1); font-size: var(--v3-cs-12); font-weight: var(--v3-dam-7); letter-spacing: var(--v3-gc-2); text-transform: uppercase; color: var(--v3-c-nhan); }
.sbh-sr-section-label:first-child { border-top: 0; padding-top: .625rem; }
.sbh-sr-section-tools { color: var(--v3-c-vang); font-weight: var(--v3-dam-6); }
.sbh-sr-section-articles { margin-top: var(--v3-k-4); padding-top: 6px; border-top: var(--v3-vien-1) solid var(--v3-v-2); }
.sbh-sr-label-icon { margin-right: 2px; vertical-align: -1px; }
.sbh-sr-history { display: flex; align-items: center; gap: .625rem; min-height: 2.75rem; padding: 9px var(--v3-k-16); cursor: pointer; transition: background var(--v3-t-120) var(--v3-e-deu); }
.sbh-sr-history:hover { background: var(--v3-v-1); }
.sbh-sr-icon { flex-shrink: 0; width: 15px; height: 15px; color: var(--v3-c-nhan); }
.sbh-sr-hist-text { flex: 1; font-size: var(--v3-cs-14); color: var(--v3-c-nga); }
.sbh-sr-hist-del { flex-shrink: 0; padding: 2px var(--v3-k-4); border: 0; border-radius: var(--v3-bo-tron); background: none; cursor: pointer; font-size: var(--v3-cs-16); line-height: 1; color: var(--v3-c-nhan); opacity: 0; transition: opacity var(--v3-t-120) var(--v3-e-deu), background var(--v3-t-120) var(--v3-e-deu); }
.sbh-sr-history:hover .sbh-sr-hist-del { opacity: 1; }
.sbh-sr-hist-del:hover { background: color-mix(in srgb, var(--v3-c-loi) 15%, transparent); color: var(--v3-c-loi); }
.sbh-sr-trending-wrap { display: flex; flex-wrap: wrap; gap: var(--v3-k-8); padding: 6px var(--v3-k-16) var(--v3-k-12); }
.sbh-sr-trending-tag {
  display: inline-flex; align-items: center; gap: var(--v3-k-4); white-space: nowrap; cursor: pointer;
  padding: 5px var(--v3-k-12); border: var(--v3-vien-1) solid var(--v3-v-1); border-radius: var(--v3-bo-tron);
  background: var(--v3-v-1); font-size: var(--v3-cs-12); color: var(--v3-c-nga-phu);
  transition: background var(--v3-t-120) var(--v3-e-deu), border-color var(--v3-t-120) var(--v3-e-deu), color var(--v3-t-120) var(--v3-e-deu);
}
.sbh-sr-trending-tag:hover { background: var(--v3-v-2); border-color: var(--v3-v-2); color: var(--v3-c-vang); }
.sbh-sr-trending-tag svg { width: var(--v3-k-12); height: var(--v3-k-12); color: var(--v3-c-nhan); }
.sbh-sr-featured {
  display: flex; align-items: center; gap: var(--v3-k-12); margin: 6px .625rem .625rem; padding: var(--v3-k-12) var(--v3-k-16);
  border: var(--v3-vien-1) solid var(--v3-v-1); border-radius: var(--v3-bo-8); background: var(--v3-v-1);
  text-decoration: none; cursor: pointer;
  transition: background var(--v3-t-120) var(--v3-e-deu), border-color var(--v3-t-120) var(--v3-e-deu);
}
.sbh-sr-featured:hover { background: var(--v3-v-2); border-color: var(--v3-v-2); }
.sbh-sr-featured-badge {
  display: inline-flex; align-items: center; flex-shrink: 0; gap: var(--v3-k-4); white-space: nowrap;
  padding: var(--v3-k-4) .625rem; border: var(--v3-vien-1) solid var(--v3-v-2); border-radius: var(--v3-bo-tron);
  background: var(--v3-v-1); font-size: var(--v3-cs-12); font-weight: var(--v3-dam-7); letter-spacing: var(--v3-gc-2); text-transform: uppercase; color: var(--v3-c-vang);
}
.sbh-sr-featured-badge svg { fill: var(--v3-c-vang); }
.sbh-sr-featured-text { font-size: var(--v3-cs-13); line-height: 1.35; color: var(--v3-c-nga-phu); }
.sbh-sr-featured:hover .sbh-sr-featured-text { color: var(--v3-c-nga); }
.sbh-live-result-footer { padding: .625rem var(--v3-k-16); border-top: var(--v3-vien-1) solid var(--v3-v-1); text-align: center; }
.sbh-live-result-all { font-size: var(--v3-cs-13); font-weight: var(--v3-dam-6); text-decoration: none; color: var(--v3-c-vang); }
.sbh-live-result-all:hover { text-decoration: underline; }
.sbh-live-result-empty { padding: 1.25rem var(--v3-k-16); text-align: center; font-size: var(--v3-cs-14); font-style: italic; color: var(--v3-c-nhan); }
.sbh-live-result-empty a { color: var(--v3-c-vang); }
.sbh-live-result-count { padding: var(--v3-k-8) var(--v3-k-16); border-bottom: var(--v3-vien-1) solid var(--v3-v-1); font-size: var(--v3-cs-12); color: var(--v3-c-nhan); }

/* ============ 7. BREADCRUMB ============
   Chừa chỗ cho header cố định và dải lịch. Máy tính: dải lịch nằm trong dòng chảy nên chỉ chừa phần header. */
.sm-breadcrumb {
  position: relative; z-index: 1; overflow: hidden;
  padding: calc(var(--header-height) - var(--cbar-height) + 1.375rem) 0 var(--v3-k-8);
  background: linear-gradient(to bottom, rgba(14, 13, 11, .97) 0%, var(--tool-bg-blend) 100%);
}
@supports (background: color-mix(in oklch, red, blue)) {
  .sm-breadcrumb {
    background:
      radial-gradient(ellipse 60% 50% at 50% 100%, color-mix(in oklch, var(--tool-accent-main) 8%, transparent) 0%, transparent 70%),
      linear-gradient(to bottom, rgba(14, 13, 11, .97) 0%, var(--tool-bg-blend) 100%);
  }
}
.sm-bc__line { height: var(--v3-vien-1); max-width: var(--vo-rong); margin: 0 auto; padding: 0 var(--v3-k-16); }
.sm-bc__line--top { display: none; }
.sm-bc__line--bottom { margin-top: .625rem; background: linear-gradient(90deg, transparent 5%, var(--v3-v-1) 30%, var(--v3-v-1) 70%, transparent 95%); }
.sm-bc__list {
  display: flex; align-items: center; flex-wrap: wrap; row-gap: .4rem;
  max-width: var(--vo-rong); margin: 0 auto; padding: 0 var(--v3-k-16); list-style: none;
}
.sm-bc__item { display: flex; align-items: center; font-size: var(--v3-cs-13); letter-spacing: var(--v3-gc-1); color: var(--v3-c-nhan); }
.sm-bc__item--current { flex: 0 1 auto; min-width: 0; }
.sm-bc__link { display: flex; align-items: center; gap: 5px; padding: 2px 0; text-decoration: none; color: var(--v3-c-nhan); transition: color var(--v3-t-200) var(--v3-e-deu); }
.sm-bc__link:hover { color: var(--tool-accent-main); }
.sm-bc__home { flex-shrink: 0; width: 13px; height: 13px; opacity: var(--v3-mo-4); transition: opacity var(--v3-t-200) var(--v3-e-deu); }
.sm-bc__link:hover .sm-bc__home { opacity: var(--v3-mo-5); }
.sm-bc__sep { display: flex; align-items: center; padding: 0 var(--v3-k-8); }
.sm-bc__sep svg { width: 6px; height: 10px; color: color-mix(in srgb, var(--v3-c-vang) 35%, transparent); }
.sm-bc__current { position: relative; font-weight: var(--v3-dam-5); color: var(--v3-c-nga-phu); overflow: visible; overflow-wrap: break-word; }
@supports (color: color-mix(in oklch, red, blue)) {
  .sm-bc__current { color: color-mix(in oklch, var(--tool-accent-main) 70%, var(--v3-c-nga-phu) 30%); }
}
/* Hình thoi nhỏ trước trang hiện tại */
.sm-bc__current::before { content: '\25C8'; margin-right: 5px; font-size: .55em; vertical-align: 1px; opacity: var(--v3-mo-4); color: var(--tool-accent-main); }
@media (pointer: coarse) {
  .sm-bc__link { padding-top: var(--v3-k-12); padding-bottom: var(--v3-k-12); }
}
@media (max-width: 767px) {
  /* Điện thoại: một hàng, nhà chỉ còn biểu tượng */
  .sm-bc__list { flex-wrap: nowrap; overflow: hidden; }
  .sm-bc__item { flex-shrink: 0; }
  .sm-bc__item--current { flex: 1 1 0; min-width: 0; overflow: hidden; }
  .sm-bc__item--current .sm-bc__current { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sm-bc__item:first-child .sm-bc__link { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; min-height: 2rem; }
  .sm-bc__item:first-child .sm-bc__link > span[itemprop="name"] {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}
@media (max-width: 768px) {
  .sm-breadcrumb { padding-top: calc(var(--header-height) + 1.375rem); padding-bottom: 6px; }
  .sm-bc__list { padding: 0 var(--v3-k-12); }
  .sm-bc__item { font-size: var(--v3-cs-12); }
  .sm-bc__sep { padding: 0 5px; }
  .sm-bc__home { width: 11px; height: 11px; }
  .sm-bc__line { display: none; }
}
@media (max-width: 480px) {
  .sm-bc__sep { padding: 0 var(--v3-k-4); }
  .sm-bc__current::before { display: none; }
}
@media (max-width: 260px) {
  .sm-bc, .sm-bc * { flex-wrap: wrap; white-space: normal; overflow-wrap: anywhere; }
}

/* ============ 8. DẢI LỊCH #sm-celestial-bar ============
   Gom từ nhiều lớp của main.css. Bản này giữ kiểu "chia ba": ngày | can chi | giờ hoàng đạo.
   Máy tính: nằm trong dòng chảy, đẩy xuống dưới header bằng top. Điện thoại: tuyệt đối, đè lên vùng đã chừa. */
#sm-celestial-bar {
  position: relative; top: var(--header-bar);
  left: 0; right: 0; max-width: var(--vo-rong); margin: 0 auto;
  min-height: 0; overflow: visible;
  z-index: calc(var(--v3-z-dinh) - 1);
  background: linear-gradient(180deg, var(--v3-n-1) 0%, var(--v3-n-0) 100%);
  color: var(--v3-c-nga);
  font-size: var(--v3-cs-14); line-height: var(--v3-cd-giao-dien);
  font-variant-numeric: lining-nums;
}
/* Đường kẻ vàng mờ ở đáy dải */
#sm-celestial-bar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: var(--v3-vien-1); pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--v3-v-2) 18%, var(--v3-v-2) 82%, transparent);
}
@media (max-width: 768px) {
  #sm-celestial-bar { position: absolute; }
}
/* Giữ chỗ khi đang chờ lịch, tránh dải nhảy chiều cao */
#sm-celestial-bar:is([data-calendar-state="waiting"], [data-calendar-state="loading"]) { min-height: 5.5rem; }
@media (min-width: 769px) and (max-width: 1120px) {
  #sm-celestial-bar:is([data-calendar-state="waiting"], [data-calendar-state="loading"]) { min-height: 9rem; }
}
@media (max-width: 768px) {
  #sm-celestial-bar:is([data-calendar-state="waiting"], [data-calendar-state="loading"]) { height: 6.4375rem; min-height: 0; overflow: hidden; }
}
@media (max-width: 374px) {
  #sm-celestial-bar:is([data-calendar-state="waiting"], [data-calendar-state="loading"]) { height: 6.3125rem; }
}

/* Khung lưới chính */
.sm-quick {
  display: grid; align-items: center; gap: 0;
  grid-template-columns: auto auto minmax(0, 1fr); grid-template-rows: auto auto;
  grid-template-areas: "date day hours" "date facts hours";
  padding: .625rem 0; min-height: 0; white-space: normal;
}
@media (min-width: 769px) and (max-width: 1120px) {
  .sm-quick { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "date day" "date facts" "hours hours"; }
}
@media (max-width: 768px) {
  .sm-quick { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: none; grid-template-areas: "date date" "day toggle" "exp exp"; padding: .5rem 0 var(--v3-k-4); }
}
/* Nhãn nhỏ viết hoa của cả dải */
.sm-quick__label, .sm-quick__hours-title, .sm-quick__lunar, .sm-quick__badge, .sm-quick__today, .sm-quick__day-row > span:first-child {
  font-family: var(--v3-f-ui); font-style: normal; font-size: var(--v3-cs-12); font-weight: var(--v3-dam-5);
  letter-spacing: var(--v3-gc-3); text-transform: uppercase; line-height: 1.4;
}
/* Cột ngày */
.sm-quick__date-row { grid-area: date; display: flex; align-items: center; min-height: 0; margin: 0; padding: 0 var(--v3-k-32) 0 0; }
.sm-quick__dates { display: flex; align-items: center; flex-wrap: wrap; gap: .875rem; width: auto; min-width: 0; }
.sm-quick__number { flex: none; font-family: var(--v3-f-serif); font-size: 2.75rem; font-weight: var(--v3-dam-4); line-height: .9; letter-spacing: 0; color: var(--v3-c-vang); }
.sm-quick__date-copy { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: baseline; gap: .125rem .375rem; min-width: 0; padding: 0; border: 0; white-space: nowrap; }
.sm-quick__weekday, .sm-quick__solar { font-family: var(--v3-f-serif); font-size: var(--v3-cs-18); line-height: 1.2; letter-spacing: .01em; }
.sm-quick__weekday { font-weight: var(--v3-dam-6); color: var(--v3-c-nga); }
.sm-quick__solar { font-weight: var(--v3-dam-4); color: var(--v3-c-nga-phu); }
.sm-quick__solar::before { content: "\00B7"; margin-right: .375rem; color: var(--v3-c-nhan); }
.sm-quick__lunar { grid-column: 1 / -1; margin-top: .125rem; color: var(--v3-c-nhan); }
/* Cột can chi, trực, sao: hai cột này có vạch dọc ngăn bên trái */
.sm-quick__day-row, .sm-quick__facts {
  padding: 0 var(--v3-k-32);
  background: linear-gradient(180deg, transparent, var(--v3-v-2), transparent) left center / 1px 100% no-repeat;
}
.sm-quick__day-row { grid-area: day; align-self: end; display: flex; flex-wrap: wrap; min-inline-size: 0; align-items: baseline; justify-content: flex-start; gap: var(--v3-k-8); width: auto; min-height: 0; border: 0; }
.sm-quick__day-row > span:first-child { white-space: nowrap; color: var(--v3-c-nhan); }
.sm-quick__day-row strong { margin-left: var(--v3-k-4); font-family: var(--v3-f-serif); font-size: var(--v3-cs-24); font-weight: var(--v3-dam-6); line-height: 1.1; letter-spacing: .01em; text-transform: none; color: var(--v3-c-vang); }
.sm-quick__badge { display: inline-flex; align-items: center; gap: .375rem; padding: 0; border: 0; border-radius: 0; background: none; white-space: nowrap; color: var(--v3-c-vang); }
.sm-quick__badge::before { content: ""; width: .375rem; height: .375rem; border-radius: var(--v3-bo-tron); background: currentColor; box-shadow: 0 0 6px currentColor; }
.sm-quick__badge--hac { color: var(--v3-c-dat); }
.sm-quick__info {
  align-self: center; flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; margin: -.75rem -.75rem -.75rem -.5rem; padding: 0;
  appearance: none; border: 0; background: transparent; cursor: pointer; font: inherit;
  color: var(--v3-c-nhan); transition: color var(--v3-t-200) var(--v3-e-deu);
}
.sm-quick__info:hover { color: var(--v3-c-vang); }
.sm-quick__info svg { width: 1rem; height: 1rem; stroke: currentColor; stroke-width: 1.4; }
.sm-quick__toggle { display: none; }
.sm-quick__expanded { display: contents; padding: 0; border: 0; }
.sm-quick__facts { grid-area: facts; align-self: start; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: .25rem var(--v3-k-16); margin: 0; padding-top: .375rem; font-size: var(--v3-cs-16); color: var(--v3-c-nga); }
.sm-quick__facts > span { display: inline-flex; align-items: baseline; gap: .375rem; white-space: nowrap; }
.sm-quick__label { color: var(--v3-c-nhan); }
.sm-quick__facts strong { margin: 0; font-family: var(--v3-f-serif); font-size: var(--v3-cs-16); font-weight: var(--v3-dam-6); color: var(--v3-c-nga); }
/* Cột giờ hoàng đạo */
.sm-quick__hours, .sm-quick__waiting-detail {
  grid-area: hours; display: grid; align-items: center; gap: .375rem var(--v3-k-16);
  grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "title hac link" "grid grid grid";
  width: auto; height: auto; margin: 0; padding: 0 0 0 var(--v3-k-32); border: 0;
  background: linear-gradient(180deg, transparent, var(--v3-v-2), transparent) left center / 1px 100% no-repeat;
}
.sm-quick__hours-head { display: contents; }
.sm-quick__hours-title { grid-area: title; margin: 0; color: var(--v3-c-nhan); }
.sm-quick__today { grid-area: link; justify-self: end; display: inline-flex; align-items: center; gap: .375rem; min-height: 2.75rem; min-inline-size: 0; margin: -.75rem 0; padding: 0; white-space: normal; text-decoration: none; color: var(--v3-c-vang); transition: color var(--v3-t-200) var(--v3-e-deu), gap var(--v3-t-200) var(--v3-e-deu); }
.sm-quick__today:hover { color: var(--v3-c-nga); gap: .625rem; }
/* Máy tính: tự xuống hàng khi chữ to A+ làm cột giờ hẹp lại */
.sm-quick__hour-grid { grid-area: grid; display: grid; grid-template-columns: repeat(auto-fit, minmax(4rem, 1fr)); gap: 0 .25rem; margin: 0; padding: 0; }
.sm-quick__hour {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: .125rem; min-height: 0; padding: .375rem 0 0;
  background: none; border: 0; border-radius: 0; box-shadow: none; color: var(--v3-c-nga);
}
.sm-quick__hour > span:not(.sm-quick__now) { font-family: var(--v3-f-serif); font-size: var(--v3-cs-18); font-weight: var(--v3-dam-6); line-height: 1.1; }
.sm-quick__hour small { font-family: var(--v3-f-ui); font-size: var(--v3-cs-12); font-weight: var(--v3-dam-5); opacity: var(--v3-mo-5); letter-spacing: .04em; line-height: 1.3; white-space: nowrap; color: var(--v3-c-nhan); }
/* Giờ hiện tại: chấm sáng phía trên, chữ vàng toả sáng */
.sm-quick__hour.is-now { color: var(--v3-c-vang); }
.sm-quick__hour.is-now > span:not(.sm-quick__now) { text-shadow: 0 0 14px color-mix(in srgb, var(--v3-c-vang) 55%, transparent); }
.sm-quick__hour.is-now small { color: var(--v3-c-vang); }
.sm-quick__hour.is-now::before {
  content: ""; position: absolute; top: 0; left: 50%; width: .3125rem; height: .3125rem; margin-left: -.15625rem;
  border-radius: var(--v3-bo-tron); background: var(--v3-c-vang); box-shadow: 0 0 8px var(--v3-c-vang);
}
.sm-quick__now, .sm-quick__sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sm-quick__current-hac { grid-area: hac; justify-self: start; margin: 0; font-family: var(--v3-f-ui); font-size: var(--v3-cs-12); font-weight: var(--v3-dam-5); letter-spacing: var(--v3-gc-3); text-transform: uppercase; line-height: 1.4; white-space: nowrap; color: var(--v3-c-dat); }
.sm-quick__current-hac::before { content: "\00B7"; margin-right: var(--v3-k-8); color: var(--v3-c-nhan); }
.sm-quick__hours { column-gap: .75rem; }
@media (min-width: 1121px) {
  .sm-quick__current-hac:not([hidden]) { display: block; justify-self: stretch; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; letter-spacing: .12em; }
  .sm-quick__current-hac::before { content: ""; display: inline-block; width: .3125rem; height: .3125rem; margin: 0 .5rem .15em 0; vertical-align: middle; border-radius: var(--v3-bo-tron); background: currentColor; box-shadow: 0 0 6px currentColor; }
  .sm-quick__hac-prefix { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (min-width: 1121px) and (max-width: 1240px) {
  .sm-quick__current-hac:not([hidden]) { letter-spacing: .05em; }
  .sm-quick__hours:has(.sm-quick__current-hac:not([hidden])) .sm-quick__today-extra { display: none; }
}
/* Máy tính bảng ngang: dải giờ xuống hàng riêng, ngăn bằng vạch ngang */
@media (min-width: 769px) and (max-width: 1120px) {
  .sm-quick__hours, .sm-quick__waiting-detail {
    margin-top: .75rem; padding: .625rem 0 0; column-gap: var(--v3-k-32);
    grid-template-areas: "title grid link" "hac grid link";
    background: linear-gradient(90deg, transparent, var(--v3-v-2), transparent) top center / 100% 1px no-repeat;
  }
  .sm-quick__hours-title { align-self: end; }
  .sm-quick__hours:not(:has(.sm-quick__current-hac:not([hidden]))) .sm-quick__hours-title { grid-row: 1 / 3; align-self: center; }
  .sm-quick__current-hac { align-self: start; }
  .sm-quick__current-hac::before { content: none; }
  .sm-quick__hour-grid { width: 100%; max-width: 34rem; justify-self: center; }
  .sm-quick__today { margin: 0; }
}
/* Điện thoại: ngày to trên cùng, hàng can chi + nút "Chi tiết", phần mở rộng gấp mở */
@media (max-width: 768px) {
  .sm-quick__date-row { padding: 0 0 .375rem; }
  .sm-quick__dates { flex: 1; flex-wrap: wrap; width: 100%; row-gap: var(--v3-k-4); }
  .sm-quick__number { font-size: 2.5rem; }
  .sm-quick__date-copy { display: flex; flex-wrap: wrap; white-space: normal; }
  .sm-quick__date-copy > * { white-space: nowrap; }
  .sm-quick__lunar { flex-basis: 100%; white-space: normal; }
  .sm-quick__day-row { align-self: center; flex-wrap: nowrap; min-inline-size: 0; row-gap: 0; padding: 0; background: none; }
  .v3-chu-to .sm-quick__day-row { flex-wrap: wrap; } /* A+ trên 120%: hàng không đủ chỗ, cho xuống dòng thay vì tràn */
  .sm-quick__day-row strong { font-size: var(--v3-cs-20); }
  .sm-quick__toggle {
    grid-area: toggle; display: inline-flex; align-items: center; gap: .375rem; min-height: 2.75rem; padding: 0 0 0 var(--v3-k-8);
    border: 0; background: none; cursor: pointer; color: var(--v3-c-vang);
    font-family: var(--v3-f-ui); font-size: var(--v3-cs-12); font-weight: var(--v3-dam-5); letter-spacing: var(--v3-gc-3); text-transform: uppercase;
  }
  .sm-quick__toggle svg { width: .75rem; height: .75rem; stroke: currentColor; stroke-width: 1.6; transition: transform var(--v3-t-200) var(--v3-e-deu); }
  .sm-quick__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  .sm-quick__expanded { grid-area: exp; display: block; margin-top: .375rem; padding: .75rem 0 var(--v3-k-8); background: linear-gradient(90deg, transparent, var(--v3-v-2), transparent) top center / 100% 1px no-repeat; }
  .sm-quick__facts { justify-content: flex-start; gap: .25rem 1.25rem; padding: 0 0 .875rem; background: none; }
  .sm-quick__hours { padding: 0; background: none; grid-template-areas: "title link link" "grid grid grid" "hac hac hac"; }
  .sm-quick__hour-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: var(--v3-k-12); }
  .sm-quick__current-hac { margin-top: var(--v3-k-8); }
  .sm-quick__current-hac::before { content: none; }
}
@media (max-width: 374px) {
  /* Chữ "Ngày" ẩn đi cho vừa hàng, phần can chi nằm trong cùng thẻ span nên chỉ thu chữ về 0, không dùng display:none */
  .sm-quick__day-row > span:first-child { font-size: 0; letter-spacing: 0; }
  .sm-quick__day-row strong { margin-left: 0; font-size: var(--v3-cs-20); }
  .sm-quick__day-row { gap: .375rem; }
  .sm-quick__weekday, .sm-quick__solar { font-size: var(--v3-cs-16); }
  .sm-quick__date-copy { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); flex-wrap: nowrap; }
  .sm-quick__lunar { letter-spacing: .06em; white-space: normal; }
}
@media (max-width: 359px) {
  .sm-quick__hour-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm-quick__facts { gap: .25rem .875rem; }
}
/* Cửa sổ giải thích các nhãn lịch */
.sm-quick__explanation {
  position: fixed; inset: 0; margin: auto; width: calc(100% - 2rem); max-width: 30rem; max-height: calc(100dvh - 2rem); overflow: auto;
  padding: var(--v3-k-16); border: var(--v3-vien-1) solid var(--v3-v-2); border-radius: var(--v3-bo-8);
  background: var(--v3-n-1); color: var(--v3-c-nga); font-size: var(--v3-cs-16); line-height: 1.6;
}
.sm-quick__explanation::backdrop { background: color-mix(in srgb, #000 70%, transparent); }
.sm-quick__explanation p { margin: var(--v3-k-12) 0; }
.sm-quick__dialog-head { display: flex; align-items: center; justify-content: space-between; gap: var(--v3-k-16); }
.sm-quick__close { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; padding: .625rem; appearance: none; border: 0; background: transparent; cursor: pointer; font: inherit; font-size: var(--v3-cs-24); color: var(--v3-c-vang); }
.sm-quick__explanation .sm-quick__today { grid-area: auto; justify-self: auto; margin: 0; text-transform: none; letter-spacing: 0; }
/* Trạng thái chờ: khung xương thay cho chữ */
.sm-quick__ghost { display: block; width: 10rem; max-width: 100%; height: .65rem; border-radius: var(--v3-bo-4); background: var(--v3-v-1); }
.sm-quick__ghost--short { width: 6rem; }
.sm-quick__ghost--number { flex: none; width: 2.5rem; height: 2.5rem; }
.sm-cbar__waiting { flex: 1; display: flex; flex-wrap: nowrap; align-items: center; gap: .875rem; min-width: 0; width: auto; }
.sm-cbar__inner--waiting .sm-quick__date-copy { display: flex; flex-direction: column; flex: 1; gap: var(--v3-k-8); min-width: 0; }
.sm-cbar__inner--waiting .sm-quick__day-row { min-height: 2.75rem; align-self: center; background: none; }
.sm-cbar__inner--waiting .sm-quick__waiting-detail { grid-template-columns: minmax(0, 1fr); grid-template-areas: "link"; align-self: stretch; min-height: 3rem; background: none; }
.sm-cbar__inner--waiting .sm-quick__waiting-detail .sm-quick__today { justify-self: start; }
.sm-cbar__inner--waiting .sm-quick__waiting-detail .sm-quick__ghost { display: none; }
@media (min-width: 769px) and (max-width: 1120px) {
  .sm-cbar__inner--waiting { grid-template-areas: "date day" "date day" "hours hours"; }
}
@media (max-width: 768px) {
  .sm-cbar__inner--waiting { grid-template-areas: "date date" "day toggle"; }
  .sm-cbar__inner--waiting .sm-quick__date-row { min-height: 0; }
  .sm-cbar__inner--waiting .sm-quick__waiting-detail { grid-area: toggle; margin: 0; padding: 0; }
}
/* Lỗi tải lịch: một dòng báo và một link */
#sm-celestial-bar[data-calendar-state="error"] .sm-quick { display: flex; flex-wrap: wrap; align-items: center; gap: var(--v3-k-8) var(--v3-k-24); min-height: 3.5rem; }
.sm-cbar__error-note { font-size: var(--v3-cs-12); text-align: center; color: var(--v3-c-nga-phu); }
.sm-cbar__block { display: flex; align-items: center; gap: 5px; }
.sm-cbar__link { cursor: pointer; text-decoration: none; color: var(--v3-c-vang); transition: color var(--v3-t-200) var(--v3-e-deu); }
.sm-cbar__link:hover { color: var(--v3-c-nga); }
.sm-cbar__date { justify-content: center; min-height: 2.75rem; font-size: var(--v3-cs-14); }
.sm-cbar__content-enter { animation: v3-vo-lich-vao var(--v3-t-200) var(--v3-e-ra); }
@keyframes v3-vo-lich-vao { from { opacity: 0; } to { opacity: 1; } }
/* Giờ chip dùng chung class cũ sm-cbar__gio-chip: chỉ cần màu khi là giờ hắc đạo */
.sm-cbar__gio-chip.is-hac { color: var(--v3-c-dat); }
#sm-celestial-bar a:focus-visible, #sm-celestial-bar button:focus-visible, .sm-quick__explanation :is(a, button):focus-visible { outline: var(--v3-vien-2) solid var(--v3-c-vang); outline-offset: var(--v3-vien-2); }

/* ============ 9. FOOTER ============ */
.sm-footer {
  --sf-line: var(--v3-v-2);
  --sf-edge: color-mix(in srgb, var(--v3-c-vang) 40%, transparent);
  position: relative; max-width: var(--vo-rong); margin-inline: auto; overflow: hidden;
  padding: 0 0 1.3rem;
  background: radial-gradient(ellipse at 50% 0, color-mix(in srgb, var(--v3-c-vang) 4%, transparent), transparent 65%), var(--v3-n-0);
  border: var(--v3-vien-1) solid var(--sf-edge); border-top: 0;
  container-name: smFooter; container-type: inline-size;
}
.sm-footer > .sm-container { position: relative; z-index: 1; padding-inline: clamp(1rem, 2.4vw, 2rem); }
.sm-footer__art { position: absolute; bottom: 0; width: 14.5rem; height: 12rem; color: var(--v3-c-nhan); opacity: var(--v3-mo-3); pointer-events: none; z-index: 0; mask-image: radial-gradient(ellipse at 0 100%, #000 12%, transparent 80%); }
.sm-footer__art--left { left: 0; }
.sm-footer__art--right { right: 0; transform: scaleX(-1); }
.sm-footer__meander {
  width: 100%; height: .625rem; margin-bottom: var(--v3-k-32); opacity: var(--v3-mo-3);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M0.5,7 L0.5,0.5 L7,0.5 L7,7 L2.5,7 L2.5,3 L5.5,3 L5.5,5.5 L3.5,5.5 L3.5,4 L4.5,4' fill='none' stroke='%23c9a96e' stroke-width='0.7' stroke-linejoin='miter' stroke-linecap='square'/%3E%3C/svg%3E") center repeat-x;
}
.sm-footer__grid {
  display: grid; align-items: start;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.8fr) minmax(0, .85fr) minmax(0, 1.05fr);
  gap: clamp(1rem, 2.5vw, 2rem);
}
.sm-footer__col { position: relative; min-width: 0; }
.sm-footer__col--brand { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
/* Vạch dọc ngăn các cột trên máy tính */
@media (min-width: 1025px) {
  .sm-footer__col + .sm-footer__col::before { content: ''; position: absolute; top: 0; bottom: 0; left: -1rem; width: var(--v3-vien-1); background: var(--sf-line); pointer-events: none; }
}
/* Logo chân trang */
.sm-footer__logo { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .6rem; max-width: 100%; margin: 0 0 var(--v3-k-16); text-decoration: none; color: var(--v3-c-nga); transition: opacity var(--v3-t-200) var(--v3-e-deu); }
.sm-footer__logo:hover { opacity: var(--v3-mo-5); }
.sm-footer__logo-icon { display: block; flex-shrink: 0; width: 2.75rem; height: 2.75rem; color: var(--v3-c-vang); }
.sm-footer__logo-words { display: inline-grid; grid-template-columns: 1fr; gap: 0; flex-shrink: 0; }
.sm-footer__logo-name { display: block; white-space: nowrap; padding-bottom: var(--v3-k-4); font-family: var(--v3-f-ui); font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: var(--v3-dam-4); letter-spacing: .01em; line-height: 1.15; color: var(--v3-c-nga); }
.sm-footer__logo-name strong { font-weight: var(--v3-dam-7); color: var(--v3-c-vang); }
.sm-footer__logo-line { display: block; width: 100%; height: var(--v3-vien-1); margin-bottom: .3125rem; background: var(--v3-c-vang); opacity: var(--v3-mo-4); }
.sm-footer__logo-sub { display: block; width: 100%; white-space: nowrap; font-size: var(--v3-cs-12); font-weight: var(--v3-dam-5); line-height: 1; letter-spacing: .28em; text-transform: uppercase; text-align: left; color: var(--v3-c-vang); }
.sm-footer__desc { max-width: 20rem; margin: 0 0 .85rem; font-size: var(--v3-cs-14); line-height: 1.6; color: var(--v3-c-nga); text-align: inherit; }
.sm-footer__contact { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem var(--v3-k-16); max-width: 100%; }
.sm-footer__social { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; max-width: 100%; margin: 0; }
.sm-footer__social-link {
  display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; min-width: 2.75rem; min-height: 2.75rem;
  border: var(--v3-vien-1) solid var(--sf-edge); border-radius: var(--v3-bo-tron); background: transparent; color: var(--v3-c-nhan);
  transition: color var(--v3-t-120) var(--v3-e-deu), border-color var(--v3-t-120) var(--v3-e-deu), background var(--v3-t-120) var(--v3-e-deu);
}
.sm-footer__social-link svg { width: 1.15rem; height: 1.15rem; }
.sm-footer__social-link:hover { color: var(--v3-c-vang); border-color: color-mix(in srgb, var(--v3-c-vang) 40%, transparent); background: var(--v3-v-1); }
.sm-footer__email { display: inline-flex; align-items: center; gap: var(--v3-k-8); max-width: 100%; min-width: 2.75rem; min-height: 2.75rem; overflow-wrap: anywhere; font-size: var(--v3-cs-13); line-height: 1.5; text-decoration: none; color: var(--v3-c-nga); transition: color var(--v3-t-120) var(--v3-e-deu); }
.sm-footer__email svg { flex-shrink: 0; width: 15px; height: 15px; }
.sm-footer__email span { min-width: 0; overflow-wrap: anywhere; }
.sm-footer__email:hover { color: var(--v3-c-vang); }
.sm-footer__heading { min-height: 1.5em; margin: 0 0 .35rem; font-size: var(--v3-cs-13); font-weight: var(--v3-dam-6); line-height: 1.5; letter-spacing: .12em; text-transform: uppercase; color: var(--v3-c-vang); }
.sm-footer__tools-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.3rem; }
.sm-footer__tools-grid > .sm-footer__links + .sm-footer__links { position: relative; }
.sm-footer__tools-grid > .sm-footer__links + .sm-footer__links::before { content: ''; position: absolute; left: -.65rem; top: .2rem; bottom: .2rem; width: var(--v3-vien-1); background: var(--sf-line); pointer-events: none; }
.sm-footer__links { margin: 0; padding: 0; min-width: 0; list-style: none; }
.sm-footer__links li { margin: 0; }
.sm-footer__links a { display: flex; align-items: center; min-width: 2.75rem; min-height: 2.75rem; padding: var(--v3-k-4) 0; overflow-wrap: anywhere; font-size: var(--v3-cs-14); line-height: 1.45; text-decoration: none; color: var(--v3-c-nga); transition: color var(--v3-t-120) var(--v3-e-deu); }
.sm-footer__links-more a { margin: 0; letter-spacing: 0; color: var(--v3-c-vang); }
.sm-footer a:hover { color: var(--v3-c-vang); }
.sm-footer a:active { color: var(--v3-c-nga); }
.sm-footer a:focus-visible { outline: var(--v3-vien-2) solid var(--v3-c-vang); outline-offset: 3px; border-radius: var(--v3-bo-4); }
/* Vạch ngăn có hoa sen */
.sm-footer__divider--lotus { display: flex; align-items: center; gap: .9rem; height: auto; margin: 1.25rem 0 .8rem; color: var(--v3-c-vang); }
.sm-footer__divider--lotus::before, .sm-footer__divider--lotus::after { content: ''; flex: 1; height: var(--v3-vien-1); background: linear-gradient(90deg, transparent, var(--sf-edge)); }
.sm-footer__divider--lotus::after { transform: rotate(180deg); }
.sm-footer__divider--lotus svg { flex-shrink: 0; width: 2.1rem; height: 1.5rem; }
.sm-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem var(--v3-k-16); margin: 0; padding: 0; border: 0; }
.sm-footer__attribution { display: flex; flex-direction: column; align-items: flex-start; align-self: flex-start; gap: 0; min-width: 0; text-align: left; }
.sm-footer__copy, .sm-footer__easter-egg { margin: 0; font-size: var(--v3-cs-12); line-height: 1.6; color: var(--v3-c-nhan); }
.sm-footer__easter-egg { font-style: italic; color: var(--v3-c-nhan); }
.sm-footer__attribution .sm-footer__ecosystem a { display: inline-flex; align-items: center; min-width: 2.75rem; min-height: 2.75rem; max-width: 100%; padding: 0; overflow-wrap: anywhere; text-decoration: none; color: var(--v3-c-nhan); background: none; border: 0; box-shadow: none; }
.sm-footer__attribution .sm-footer__ecosystem a:hover, .sm-footer__attribution .sm-footer__ecosystem a:focus-visible { color: var(--v3-c-vang); }
/* Máy tính bảng và nhỏ hơn: lưới 2 cột, thương hiệu và công cụ chiếm cả hàng */
@media (max-width: 1024px) {
  .sm-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; }
  .sm-footer__col--brand, .sm-footer__col--tools { grid-column: 1 / -1; }
  .sm-footer__col--brand { align-items: center; text-align: center; }
  .sm-footer__col--info::before { content: ''; position: absolute; top: 0; bottom: 0; left: -.7rem; width: var(--v3-vien-1); background: var(--sf-line); pointer-events: none; }
  .sm-footer__contact { justify-content: center; }
  .sm-footer__logo { justify-content: center; }
  .sm-footer__logo-sub { letter-spacing: .21em; }
  .sm-footer__desc { max-width: 100%; }
  .sm-footer__tools-grid { gap: 1.4rem; }
  .sm-footer__bottom { flex-direction: column; justify-content: center; gap: .3rem; text-align: center; }
  .sm-footer__attribution { width: 100%; }
}
@media (max-width: 480px) {
  .sm-footer__meander { margin-bottom: 1.5rem; }
  .sm-footer__grid { gap: 1.25rem var(--v3-k-16); }
  .sm-footer__tools-grid { gap: var(--v3-k-16); }
  .sm-footer__logo-name { font-size: clamp(1.4rem, 8vw, 1.75rem); }
  .sm-footer__logo-words { max-width: 100%; }
  .sm-footer__art { width: 10rem; height: 9rem; opacity: var(--v3-mo-2); }
}
@media (max-width: 768px) {
  .sm-footer__bottom { align-items: center; }
}
/* Khung hẹp dưới 272 px: một cột */
@container smFooter (max-width: 17rem) {
  .sm-footer__grid, .sm-footer__tools-grid { grid-template-columns: minmax(0, 1fr); }
  .sm-footer__col--info::before, .sm-footer__tools-grid > .sm-footer__links + .sm-footer__links::before { content: none; }
}

/* ============ 10. HỘP GÓP Ý smfb-* ============
   Nút Góp Ý bình thường nằm gọn trong cụm nút nổi (soimenh-nut-noi tự xếp lại). Phần dưới đây là kiểu gốc của nút và hộp. */
.smfb-fab {
  position: fixed; z-index: var(--vo-z-nut);
  display: flex; align-items: center; gap: 0; appearance: none; font: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.smfb-fab__glow, .smfb-tooltip { display: none; }
/* Máy tính: dải dọc bên trái khung */
@media (min-width: 769px) {
  .smfb-fab {
    left: max(.75rem, calc(50% - 650px)); right: auto; top: 42%; transform: translateY(-50%);
    writing-mode: vertical-rl; text-orientation: mixed;
    padding: var(--v3-k-16) 9px;
    background: linear-gradient(135deg, var(--v3-n-2) 0%, var(--v3-n-0) 100%);
    border: var(--v3-vien-1) solid var(--v3-v-2); border-radius: var(--v3-bo-8);
    box-shadow: var(--v3-bong-vang);
    transition: border-color var(--v3-t-200) var(--v3-e-deu), box-shadow var(--v3-t-200) var(--v3-e-deu);
  }
  .smfb-fab:hover { border-color: color-mix(in srgb, var(--v3-c-vang) 70%, transparent); }
  .smfb-fab__icon { width: 1.25rem; height: 1.25rem; margin-bottom: var(--v3-k-8); color: var(--v3-c-vang); }
  .smfb-fab__label { font-size: var(--v3-cs-13); font-weight: var(--v3-dam-5); letter-spacing: .1em; text-transform: uppercase; color: var(--v3-c-vang); }
}
.smfb-fab__icon svg { width: 100%; height: 100%; }
/* Điện thoại: nút tròn 44 px góc trái dưới, nhãn chỉ cho trình đọc màn hình */
@media (max-width: 768px) {
  .smfb-fab {
    left: var(--v3-k-16); right: auto; bottom: var(--v3-k-16);
    justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0;
    background: linear-gradient(135deg, var(--v3-n-2) 0%, var(--v3-n-0) 100%);
    border: var(--v3-vien-1) solid color-mix(in srgb, var(--v3-c-vang) 55%, transparent); border-radius: var(--v3-bo-tron);
    box-shadow: var(--v3-bong-2);
    transition: transform var(--v3-t-200) var(--v3-e-ra), border-color var(--v3-t-200) var(--v3-e-deu);
  }
  .smfb-fab:active { transform: scale(.95); }
  .smfb-fab__icon { flex-shrink: 0; width: 1.125rem; height: 1.125rem; color: var(--v3-c-vang); }
  .smfb-fab__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}
body.smfb-shift-up .smfb-fab { bottom: 8.375rem; }
.smfb-overlay { display: none; position: fixed; inset: 0; z-index: var(--vo-z-nen-lop); background: color-mix(in srgb, #000 65%, transparent); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity var(--v3-t-200) var(--v3-e-deu); }
.smfb-overlay.is-open { display: block; opacity: 1; }
@media (max-width: 768px) {
  .smfb-overlay { -webkit-backdrop-filter: none; backdrop-filter: none; background: color-mix(in srgb, #000 85%, transparent); }
}
.smfb-modal {
  position: fixed; z-index: var(--vo-z-lop);
  display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(170deg, var(--v3-n-2) 0%, var(--v3-n-0) 100%);
  border: var(--v3-vien-1) solid var(--v3-v-2); border-radius: var(--v3-bo-8);
  box-shadow: var(--v3-bong-3);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform var(--v3-t-360) var(--v3-e-ra), opacity var(--v3-t-200) var(--v3-e-deu), visibility 0s linear var(--v3-t-360);
}
.smfb-modal.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
@media (min-width: 769px) {
  .smfb-modal { right: max(.75rem, calc(50% - 650px)); top: 42%; width: 26.25rem; max-height: 85vh; transform: scale(.3) translateY(-50%); transform-origin: right center; }
  .smfb-modal.is-open { transform: scale(1) translateY(-50%); }
}
@media (max-width: 768px) {
  .smfb-modal { left: 0; right: 0; bottom: 0; max-height: 88vh; border-bottom: 0; border-radius: var(--v3-bo-8) var(--v3-bo-8) 0 0; box-shadow: var(--v3-bong-2); transform: translateY(100%); }
  .smfb-modal.is-open { transform: translateY(0); }
}
/* Biểu tượng nhỏ dùng trong tiêu đề hộp Góp ý */
.sm-ti { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; color: inherit; }
.sm-ti--seal { width: 1.125rem; height: 1.125rem; }
.smfb-modal__header { display: flex; align-items: center; justify-content: space-between; padding: var(--v3-k-16) 1.25rem; border-bottom: var(--v3-vien-1) solid var(--v3-v-1); background: linear-gradient(90deg, var(--v3-v-1), transparent); }
.smfb-modal__title { display: inline-flex; align-items: center; gap: 9px; font-size: var(--v3-cs-16); font-weight: var(--v3-dam-6); letter-spacing: var(--v3-gc-2); color: var(--v3-c-vang); }
.smfb-modal__close { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: 11px; border: 0; border-radius: var(--v3-bo-tron); background: none; cursor: pointer; line-height: 1; color: var(--v3-c-nhan); transition: color var(--v3-t-120) var(--v3-e-deu); }
.smfb-modal__close:hover { color: var(--v3-c-vang); }
.smfb-modal__close svg { width: 1.375rem; height: 1.375rem; }
.smfb-modal__body { display: flex; flex-direction: column; flex: 1; gap: .875rem; padding: var(--v3-k-16) 1.25rem; overflow-y: auto; }
.smfb-ctx-banner { display: flex; align-items: center; gap: var(--v3-k-8); padding: .625rem var(--v3-k-12); border: var(--v3-vien-1) solid var(--v3-v-1); border-radius: var(--v3-bo-4); background: var(--v3-v-1); }
.smfb-ctx-banner__icon { flex-shrink: 0; width: 1.25rem; height: 1.25rem; color: var(--v3-c-vang); }
.smfb-ctx-banner__icon svg { display: block; width: 100%; height: 100%; }
.smfb-ctx-banner__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--v3-cs-12); font-weight: var(--v3-dam-5); color: var(--v3-c-vang); }
.smfb-subcat__select {
  width: 100%; padding: var(--v3-k-8) var(--v3-k-12); appearance: none; cursor: pointer;
  border: var(--v3-vien-1) solid var(--v3-v-2); border-radius: var(--v3-bo-4); background-color: var(--v3-n-0); color: var(--v3-c-nga);
  font-family: var(--v3-f-ui); font-size: var(--v3-cs-13);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23c9a96e' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.smfb-subcat__select:focus { outline: 0; border-color: color-mix(in srgb, var(--v3-c-vang) 50%, transparent); }
.smfb-stars { text-align: center; }
.smfb-stars__label { display: block; margin-bottom: 6px; font-size: var(--v3-cs-12); color: var(--v3-c-nhan); }
.smfb-stars__row { display: flex; justify-content: center; gap: 6px; }
.smfb-star { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: var(--v3-k-8); appearance: none; border: 0; border-radius: var(--v3-bo-tron); background: transparent; cursor: pointer; user-select: none; color: var(--v3-c-vang); transition: transform var(--v3-t-120) var(--v3-e-deu); }
.smfb-star svg { width: 1.625rem; height: 1.625rem; }
.smfb-star:hover { transform: scale(1.2); }
.smfb-star--active { transform: scale(1.1); }
.smfb-cats { display: flex; gap: var(--v3-k-8); }
.smfb-cat {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 2.75rem; padding: var(--v3-k-8) 6px;
  appearance: none; cursor: pointer; text-align: center;
  border: var(--v3-vien-1) solid var(--v3-v-1); border-radius: var(--v3-bo-4); background: var(--v3-v-1);
  font-family: var(--v3-f-ui); font-size: var(--v3-cs-13); color: var(--v3-c-nhan);
  transition: border-color var(--v3-t-200) var(--v3-e-deu), color var(--v3-t-200) var(--v3-e-deu), background var(--v3-t-200) var(--v3-e-deu);
}
.smfb-cat svg { flex: 0 0 auto; width: 1.125rem; height: 1.125rem; }
.smfb-cat:hover { border-color: color-mix(in srgb, var(--v3-c-vang) 40%, transparent); color: var(--v3-c-nga); }
.smfb-cat--active { border-color: var(--v3-c-vang); background: var(--v3-v-1); color: var(--v3-c-vang); font-weight: var(--v3-dam-5); }
.smfb-textarea {
  width: 100%; padding: var(--v3-k-12); resize: vertical;
  border: var(--v3-vien-1) solid var(--v3-v-2); border-radius: var(--v3-bo-4); background: var(--v3-v-1); color: var(--v3-c-nga);
  font-family: var(--v3-f-ui); font-size: var(--v3-cs-14);
  transition: border-color var(--v3-t-200) var(--v3-e-deu);
}
.smfb-textarea::placeholder { color: var(--v3-c-nhan); }
.smfb-textarea:focus { outline: 0; border-color: color-mix(in srgb, var(--v3-c-vang) 50%, transparent); box-shadow: 0 0 0 2px var(--v3-v-1); }
.smfb-context { font-size: var(--v3-cs-12); color: var(--v3-c-nhan); }
.smfb-modal__footer { padding: var(--v3-k-12) 1.25rem var(--v3-k-16); border-top: var(--v3-vien-1) solid var(--v3-v-1); }
.smfb-submit {
  width: 100%; min-height: 3rem; padding: var(--v3-k-12) var(--v3-k-24); cursor: pointer;
  border: var(--v3-vien-1) solid var(--v3-c-vang); border-radius: var(--v3-bo-4);
  background: linear-gradient(135deg, var(--v3-v-2), var(--v3-v-1));
  font-family: var(--v3-f-ui); font-size: var(--v3-cs-16); font-weight: var(--v3-dam-6); letter-spacing: .03em; color: var(--v3-c-vang);
  transition: background var(--v3-t-200) var(--v3-e-deu), box-shadow var(--v3-t-200) var(--v3-e-deu);
}
.smfb-submit:hover { background: linear-gradient(135deg, var(--v3-v-2), var(--v3-v-2)); box-shadow: var(--v3-bong-vang); }
.smfb-submit:disabled { opacity: var(--v3-mo-4); cursor: not-allowed; }
.smfb-success { flex-direction: column; align-items: center; justify-content: center; gap: var(--v3-k-16); padding: var(--v3-k-48) 1.25rem; text-align: center; }
.smfb-success__icon { width: 3rem; height: 3rem; color: var(--v3-c-vang); animation: v3-vo-gop-y-xong var(--v3-t-360) var(--v3-e-ra); }
.smfb-success__icon svg { width: 100%; height: 100%; }
.smfb-success__text { font-size: var(--v3-cs-16); line-height: 1.6; color: var(--v3-c-nga); }
@keyframes v3-vo-gop-y-xong { from { transform: scale(0) rotate(-90deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes smfb-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
/* Ô nhập trong hộp Góp ý đủ 16 px trên điện thoại để iOS không phóng to */
@media (max-width: 900px) {
  .smfb-subcat__select, .smfb-textarea, .smfb-modal__body input[type="text"], .smfb-modal__body input[type="email"], .smfb-modal__body textarea, .smfb-modal__body select { font-size: var(--v3-cs-16); }
}
@media (max-width: 768px) {
  .smfb-cats { gap: 6px; }
  .smfb-cat { padding: var(--v3-k-8) 5px; }
  .smfb-stars__row { gap: 2px; }
}

/* ============ 11. THÔNG BÁO sm-toast ============
   main.js tạo .sm-toast-container rồi thêm .sm-toast--success|error|warning|info */
.sm-toast-container { position: fixed; top: var(--v3-k-16); right: var(--v3-k-16); z-index: var(--vo-z-bao); display: flex; flex-direction: column; gap: var(--v3-k-12); }
.sm-toast {
  max-width: 25rem; padding: var(--v3-k-16) var(--v3-k-24);
  border-radius: var(--v3-bo-8); box-shadow: var(--v3-bong-3);
  font-size: var(--v3-cs-14); font-weight: var(--v3-dam-5); line-height: var(--v3-cd-giao-dien);
  color: var(--v3-c-nga); background: var(--v3-n-3);
  border: var(--v3-vien-1) solid var(--v3-v-2); border-inline-start: var(--v3-vien-2) solid var(--v3-c-nhan);
  animation: v3-vo-thong-bao-vao var(--v3-t-360) var(--v3-e-ra);
}
/* Thông báo nổi: nền tối như khối thông báo trong khung, chỉ vạch bên trái đổi màu theo trạng thái */
.sm-toast--success { border-inline-start-color: var(--v3-c-dat-ok); }
.sm-toast--error { border-inline-start-color: var(--v3-c-loi); }
.sm-toast--warning { border-inline-start-color: var(--v3-c-vang); }
.sm-toast--info { border-inline-start-color: var(--v3-c-nhan); }
@keyframes v3-vo-thong-bao-vao { from { opacity: 0; transform: translateX(1.5rem); } to { opacity: 1; transform: none; } }

/* ============ 12. MỤC LỤC sm-toc-bar (bài viết, dưới 1200 px) ============ */
.sm-toc-bar {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--vo-z-nut);
  align-items: center; justify-content: center; width: 100%; height: 3.375rem; padding: 0;
  appearance: none; cursor: pointer;
  border: 0; border-top: var(--v3-vien-1) solid var(--v3-v-2);
  background: color-mix(in srgb, var(--v3-n-1) 97%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: background var(--v3-t-200) var(--v3-e-deu);
}
@media (max-width: 1199px) { .sm-toc-bar { display: flex; } }
@media (max-width: 768px) { .sm-toc-bar { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--v3-n-0); } }
.sm-toc-bar:hover { background: var(--v3-n-2); }
.sm-toc-bar__inner { display: flex; align-items: center; gap: .625rem; font-size: var(--v3-cs-12); font-weight: var(--v3-dam-6); letter-spacing: var(--v3-gc-2); text-transform: uppercase; color: var(--v3-c-vang); }
.sm-toc-bar__inner::before {
  content: ''; flex-shrink: 0; width: 18px; height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 14'%3E%3Cpath d='M0 1h18M0 7h12M0 13h15' stroke='rgba(201%2C169%2C110%2C0.8)' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sm-toc-bar__chevron { width: var(--v3-k-8); height: var(--v3-k-8); border-top: var(--v3-vien-1) solid currentColor; border-left: var(--v3-vien-1) solid currentColor; transform: rotate(45deg); font-size: 0; color: var(--v3-c-nhan); transition: transform var(--v3-t-200) var(--v3-e-deu); }
.sm-toc-bar.is-open .sm-toc-bar__chevron { transform: rotate(225deg); }
body.toc-bar-active { padding-bottom: 3.375rem; }
@media (max-width: 768px) { body { padding-bottom: 7.5rem; } }

/* ============ 13. KHOÁ CUỘN VÀ ẨN NÚT NỔI KHI MỞ LỚP PHỦ ============
   ui-layer-coordinator.js đặt body.sm-ui-layer-open và body.sm-ui-layer-<tên>.
   Hai khối dưới cần !important vì nút nổi và Hỏi AI đặt opacity, visibility bằng !important. */
body.sm-ui-layer-open { overflow: hidden; }
body.sm-ui-layer-menu .smfb-fab, body.sm-ui-layer-menu #smc-aiv-launcher, body.sm-ui-layer-menu .sm-chuto, body.sm-ui-layer-menu .sm-toc-bar,
body.sm-ui-layer-search .smfb-fab, body.sm-ui-layer-search #smc-aiv-launcher, body.sm-ui-layer-search .sm-chuto, body.sm-ui-layer-search .sm-toc-bar,
body.sm-ui-layer-feedback #smc-aiv-launcher, body.sm-ui-layer-feedback .sm-chuto, body.sm-ui-layer-feedback .sm-toc-bar,
body.sm-ui-layer-advisor .smfb-fab, body.sm-ui-layer-advisor .sm-chuto, body.sm-ui-layer-advisor .sm-toc-bar,
body.sm-ui-layer-toc .smfb-fab, body.sm-ui-layer-toc #smc-aiv-launcher, body.sm-ui-layer-toc .sm-chuto {
  opacity: 0 !important; visibility: hidden !important; pointer-events: none !important;
}
/* Dưới 1280 form chạm tới mép phải: form nhập vào vùng nút nổi thì cụm nút nhường chỗ, cuộn qua form là hiện lại. v3-chung.js đặt class */
@media (max-width: 1279px) {
  html.v3-dang-nhap .sm-fab { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
}
body.sm-hsearch-open .smfb-fab, body.sbh-search-open .smfb-fab { display: none; }
body.sm-hsearch-open #smc-aiv-launcher, body.sm-hsearch-open #smc-aiv-panel, body.sbh-search-open #smc-aiv-launcher, body.sbh-search-open #smc-aiv-panel {
  opacity: 0 !important; pointer-events: none !important;
}
/* Chế độ đọc gọn: header, dải lịch, nút nổi trượt ra ngoài khi cuộn xuống */
body .sm-header, body .sm-header-transition, body #sm-celestial-bar, body #smfb-fab, body #smc-aiv-launcher, body .sm-chuto {
  transition: opacity var(--v3-t-200) var(--v3-e-ra), transform var(--v3-t-200) var(--v3-e-ra), visibility 0s linear 0s;
}
body.sm-reading-compact .sm-header, body.sm-reading-compact .sm-header-transition, body.sm-reading-compact #sm-celestial-bar {
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(calc(-100% - 1.125rem));
  transition: opacity var(--v3-t-200) var(--v3-e-ra), transform var(--v3-t-200) var(--v3-e-ra), visibility 0s linear var(--v3-t-200);
}
body.sm-reading-compact #smfb-fab, body.sm-reading-compact #smc-aiv-launcher, body.sm-reading-compact .sm-chuto {
  opacity: 0 !important; visibility: hidden !important; pointer-events: none !important;
}
body.sm-reading-compact { --v3-dinh-tren: 0px; } /* header đã trượt đi, khối dính lên sát mép trên */
body.sm-reading-compact #smfb-fab { transform: translate(-110px, -50%) scale(.94); }
body.sm-reading-compact #smc-aiv-launcher, body.sm-reading-compact .sm-chuto { transform: translateX(78px) scale(.88); }
@media (max-width: 768px) {
  body.sm-reading-compact #smfb-fab { transform: translateX(-70px) scale(.88); }
}
/* Màn chờ toàn màn hình (main.js đặt sm-cine-active): ẩn vỏ để không chồng lên */
body.sm-cine-active .sm-header, body.sm-cine-active .sm-header-transition, body.sm-cine-active #sm-celestial-bar, body.sm-cine-active .sm-mobile-menu { display: none; }

/* ============ 14. GIẢM CHUYỂN ĐỘNG ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ============ 15. IN ============ */
@media print {
  .sm-header, .sm-header-transition, #sm-celestial-bar, .sm-mobile-menu, .sm-mobile-menu-backdrop, .sm-hsearch-backdrop,
  .smfb-fab, .smfb-overlay, .smfb-modal, .sm-toc-bar, .sm-toast-container, .sm-footer__art { display: none !important; }
  html { background: #fff !important; }
  html::before { display: none !important; }
  body { max-width: none; padding-bottom: 0 !important; background: #fff !important; color: #000 !important; }
  .sm-breadcrumb { display: none !important; }
}

/* Điện thoại xoay ngang: header và dải lịch chiếm hết màn, nhường chỗ cho công cụ */
@media (orientation: landscape) and (max-height: 31.25rem) {
  :root { --v3-dinh-tren: 0px; }
  #sm-celestial-bar { display: none; }
  .sm-header { position: absolute; }
}