/* TourKit Site — website bán tour của từng công ty (phiếu 009).
   Màu / phông / bo góc đến từ /giao-dien.css (token của mẫu + công ty): --w-chinh, --w-phu, --w-nen, --w-chu, --w-bo,
   --w-phong-tieu-de, --w-phong-than. Hai mẫu khác nhau qua lớp trên <body>: .m-hanh-trinh / .m-rong-ruoi.
   Không Bootstrap, không jQuery. Không style nội tuyến (CSP style-src 'self'). */

@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/be-vietnam-pro-vietnamese-400-normal.woff2) format('woff2'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/be-vietnam-pro-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
/* Phiếu 012 B11: bỏ Be Vietnam Pro 500 (hai tệp ~35 KB) — chữ 500 dùng bản 400 gần nhất; tiết kiệm băng thông điện thoại. */
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/be-vietnam-pro-vietnamese-600-normal.woff2) format('woff2'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/be-vietnam-pro-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/be-vietnam-pro-vietnamese-700-normal.woff2) format('woff2'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/be-vietnam-pro-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/playfair-display-vietnamese-500-normal.woff2) format('woff2'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/playfair-display-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/playfair-display-vietnamese-600-normal.woff2) format('woff2'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/playfair-display-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 500; font-display: swap; src: url(/fonts/playfair-display-vietnamese-500-italic.woff2) format('woff2'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 500; font-display: swap; src: url(/fonts/playfair-display-latin-500-italic.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
/* Phiếu 012: phông tiêu đề hai mẫu làm lại (OFL, tự host, có bộ ký tự tiếng Việt). */
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/bricolage-grotesque-vietnamese-600-normal.woff2) format('woff2'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/bricolage-grotesque-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/bricolage-grotesque-vietnamese-700-normal.woff2) format('woff2'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/bricolage-grotesque-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/plus-jakarta-sans-vietnamese-700-normal.woff2) format('woff2'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/plus-jakarta-sans-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url(/fonts/plus-jakarta-sans-vietnamese-800-normal.woff2) format('woff2'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url(/fonts/plus-jakarta-sans-latin-800-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* Phiếu 023 (mẫu Thổ Địa): Lexend (một tệp biến thiên 400–900), Mali, Pacifico — OFL, tự host, có tiếng Việt. */
@font-face { font-family: 'Lexend'; font-style: normal; font-weight: 400 900; font-display: swap; src: url(/fonts/lexend-vietnamese-variable.woff2) format('woff2'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: 'Lexend'; font-style: normal; font-weight: 400 900; font-display: swap; src: url(/fonts/lexend-latin-variable.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Mali'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/mali-vietnamese-500-normal.woff2) format('woff2'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: 'Mali'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/mali-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Mali'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/mali-vietnamese-600-normal.woff2) format('woff2'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: 'Mali'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/mali-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Mali'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/mali-vietnamese-700-normal.woff2) format('woff2'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: 'Mali'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/mali-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Pacifico'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/pacifico-vietnamese-400-normal.woff2) format('woff2'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: 'Pacifico'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/pacifico-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* ---------- Nền ---------- */
:root {
  /* Dự phòng = token mặc định mẫu Hành Trình · Mực & Coban (phiếu 012), đúng giá trị SacDo.HieuLuc phát ra (/giao-dien.css phát đè cho từng
     công ty; trang lỗi không có /giao-dien.css). Test GiaoDienCssTests giữ khớp — đổi SacDo thì đổi ở đây. */
  --w-chinh: #1f3fbf; --w-chinh-dam: #19349d; --w-chinh-50: #e8ebf5; --w-chinh-100: #d7dcf0;
  --w-phu: #e8eeff; --w-phu-dam: #c5cad9; --w-nen: #f5f6f8; --w-nen-xen: #e2e6f3; --w-chu: #11151c;
  --w-mo: #63666b; --w-vien: #dadbde; --w-o-vien: #c3c4c8; --w-dau: #f5f6f8; --w-chu-dau: #11151c;
  --w-chan: #11151c; --w-chu-chan: #ffffff; --w-chu-tren-chinh: #ffffff; --w-chu-tren-phu: #16181c; --w-dam: #14297c;
  --w-cho: #64666d; --w-gia-nhan: #61646b; --w-focus: #757ea0; --w-phu-net: #7d818a;
  --w-bo: 6px; --w-ti-le: 4 / 5;
  --w-phong-tieu-de: 'Bricolage Grotesque', 'Be Vietnam Pro', system-ui, sans-serif;
  --w-phong-than: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* Dẫn xuất trong CSS (theo biến trên, không phát từ máy chủ). */
  --w-bo-o: min(var(--w-bo), 10px);
  --w-dau-cao: 68px;
  --w-chu-noi-dung: color-mix(in srgb, var(--w-chu) 85%, var(--w-nen));
  --w-lich-mo: color-mix(in srgb, var(--w-chu) 35%, var(--w-nen));
  --w-vong-o: 0 0 0 3px color-mix(in srgb, var(--w-chinh) 18%, transparent);
  --w-bong-tim: 0 20px 50px color-mix(in srgb, var(--w-chinh) 22%, transparent);
  --w-bong-dat: 0 24px 60px -30px color-mix(in srgb, var(--w-chinh) 50%, transparent);
  /* Hằng không theo công ty: chữ trên ảnh, trạng thái, Zalo, màu chọn khối của trình dựng. */
  --w-trang: #ffffff; --w-den: #000000;
  --w-chu-tren-anh: var(--w-trang);
  --w-nen-tren-anh: color-mix(in srgb, var(--w-trang) 92%, transparent);
  --w-thanh-cong: #1e8e3e; --w-thanh-cong-dam: #14532d; --w-loi: #b3261e; --w-bat-buoc: #c0392b; --w-zalo: #0068ff;
  --w-chon-dung: #7367f0;
  --w-bong-menu: 0 16px 40px color-mix(in srgb, var(--w-den) 12%, transparent);
  --w-bong-noi: 0 10px 24px color-mix(in srgb, var(--w-den) 22%, transparent);
  /* Tên cũ — giữ tương thích (khối/tuỳ biến cũ còn dùng). */
  --w-nhat: var(--w-chinh-50);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--w-dau-cao) + 16px); }
body {
  margin: 0; font-family: var(--w-phong-than); font-size: 1rem; line-height: 1.6; color: var(--w-chu);
  background: var(--w-nen); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--w-chinh); text-underline-offset: .18em; }
h1, h2, h3 { font-family: var(--w-phong-tieu-de); font-weight: 600; line-height: 1.18; margin: 0 0 .5em; letter-spacing: -.01em; text-wrap: balance; }
h1 { font-size: clamp(2rem, 1.3rem + 3.2vw, 3.6rem); }
h2 { font-size: clamp(1.55rem, 1.2rem + 1.5vw, 2.3rem); }
h3 { font-size: 1.125rem; }
p { margin: 0 0 1em; }
.m-hanh-trinh h1, .m-hanh-trinh h2 { font-weight: 500; }
.m-rong-ruoi h1, .m-rong-ruoi h2, .m-tho-dia h1, .m-tho-dia h2 { font-weight: 700; letter-spacing: -.02em; }
:focus-visible { outline: 3px solid var(--w-focus); outline-offset: 2px; }
.khung { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }
.khoang { padding-block: clamp(48px, 7vw, 96px); }
.bt { width: 1.1em; height: 1.1em; flex: 0 0 auto; }
.bo-qua { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--w-chinh); color: var(--w-chu-tren-chinh); padding: .5rem 1rem; }
.bo-qua:focus { left: 8px; }
.rong { color: var(--w-mo); max-width: 60ch; }

/* ---------- Nút ---------- */
.nut {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 46px; padding: .7em 1.4em;
  border: 1px solid var(--w-chinh); border-radius: var(--w-bo); background: var(--w-chinh); color: var(--w-chu-tren-chinh);
  font: 600 .95rem/1.2 var(--w-phong-than); text-decoration: none; cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.nut:hover { background: var(--w-chinh-dam); border-color: var(--w-chinh-dam); }
.nut-phu { background: transparent; color: var(--w-chinh); }
.nut-phu:hover { background: var(--w-chinh-50); color: var(--w-chinh); }
.nut-lon { min-height: 52px; padding-inline: 1.8em; font-size: 1rem; }
.nut-nho { min-height: 38px; padding: .45em 1em; font-size: .875rem; }
.nut-rong { width: 100%; }
.nut:disabled { opacity: .6; cursor: progress; }
/* Viên thuốc: nút đặc màu chính bo tròn hẳn (Hành Trình). */
.nut-vien-tron .nut { border-radius: 999px; padding-inline: 1.6em; }
/* Rong Ruổi: nút đặc màu nhấn, bo tròn hẳn. */
.nut-dac .nut { border-radius: 999px; background: var(--w-phu); border-color: var(--w-phu); color: var(--w-chu-tren-phu); }
.nut-dac .nut:hover { background: var(--w-phu-dam); border-color: var(--w-phu-dam); color: var(--w-chu-tren-phu); }
.nut-dac .nut-phu { background: transparent; color: var(--w-chinh); border-color: var(--w-chinh); }

/* ---------- Đầu trang ---------- */
.dau { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--w-dau) 95%, transparent); border-bottom: 1px solid var(--w-vien); backdrop-filter: saturate(1.4) blur(8px); }
.dau-trong { display: flex; align-items: center; gap: 24px; min-height: var(--w-dau-cao); }
.thuong-hieu { display: flex; align-items: center; margin-right: auto; color: var(--w-chinh); text-decoration: none; font: 600 1.25rem/1.1 var(--w-phong-tieu-de); max-width: 60%; }
.thuong-hieu img { height: 40px; width: auto; max-width: 180px; object-fit: contain; }
.thuong-hieu span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu { display: flex; gap: 4px; }
.menu a { padding: .5rem .75rem; color: var(--w-chu-dau); text-decoration: none; font-size: .95rem; border-radius: var(--w-bo-o); }
.menu a:hover, .menu a[aria-current] { color: var(--w-chinh); background: var(--w-chinh-50); }
.dau-goi { display: inline-flex; align-items: center; gap: .4em; padding: .5rem .9rem; border-radius: 999px; background: var(--w-chinh-50); color: var(--w-chinh); font-weight: 600; font-size: .95rem; text-decoration: none; white-space: nowrap; }
.menu-dt { display: none; position: relative; }
.menu-dt summary { list-style: none; cursor: pointer; display: grid; place-items: center; width: 46px; height: 46px; border-radius: var(--w-bo-o); color: var(--w-chinh); }
.menu-dt summary::-webkit-details-marker { display: none; }
.menu-dt summary .bt { width: 26px; height: 26px; }
.menu-dt nav { position: absolute; right: 0; top: calc(100% + 8px); min-width: 240px; padding: 8px; background: var(--w-nen); border: 1px solid var(--w-vien); border-radius: 12px; box-shadow: var(--w-bong-menu); display: grid; }
.menu-dt nav a { padding: .8rem 1rem; color: var(--w-chu); text-decoration: none; border-radius: 8px; }
.menu-dt nav a:hover { background: var(--w-chinh-50); }
.menu-dt .menu-dt-goi { color: var(--w-chinh); font-weight: 600; }
@media (max-width: 900px) {
  .menu, .dau-goi span { display: none; }
  .dau-goi { width: 46px; height: 46px; padding: 0; justify-content: center; }
  .dau-goi .bt { width: 22px; height: 22px; }
  .menu-dt { display: block; }
  .dau-trong { gap: 8px; }
}

/* ---------- Ảnh bìa lớn ---------- */
.k-hero { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: clamp(440px, 72vh, 700px); color: var(--w-chu-tren-anh); overflow: hidden; background: var(--w-dam); }
.k-hero-anh { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.k-hero-nen { position: absolute; inset: 0; z-index: -2; }
.k-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, color-mix(in srgb, var(--w-den) 5%, transparent) 30%, color-mix(in srgb, var(--w-den) 55%, transparent)); }
.k-hero.khong-anh::after { background: linear-gradient(180deg, transparent 50%, color-mix(in srgb, var(--w-den) 25%, transparent)); }
.k-hero.phu-0.co-anh::after { background: none; } .k-hero.phu-1.co-anh::after { opacity: .3; } .k-hero.phu-2.co-anh::after { opacity: .5; }
.k-hero.phu-3.co-anh::after { opacity: .7; } .k-hero.phu-5.co-anh::after { background: color-mix(in srgb, var(--w-den) 50%, transparent); } .k-hero.phu-6.co-anh::after { background: color-mix(in srgb, var(--w-den) 60%, transparent); }
.k-hero.phu-7.co-anh::after { background: color-mix(in srgb, var(--w-den) 70%, transparent); } .k-hero.phu-8.co-anh::after { background: color-mix(in srgb, var(--w-den) 80%, transparent); }
/* Chữ giữa ảnh (Rong Ruổi): tối vùng giữa nơi đặt chữ, ảnh hai bên vẫn sáng (phiếu 012). */
.k-hero.canh-giua::after { background: radial-gradient(ellipse 60% 55% at 50% 45%, color-mix(in srgb, var(--w-den) 50%, transparent), color-mix(in srgb, var(--w-den) 15%, transparent) 100%), linear-gradient(180deg, transparent 50%, color-mix(in srgb, var(--w-den) 40%, transparent)); }
.k-hero-chu { padding-block: clamp(56px, 10vw, 112px); }
.k-hero h1, .k-hero h2 { max-width: 18ch; margin-bottom: .35em; text-shadow: 0 2px 24px color-mix(in srgb, var(--w-den) 25%, transparent); }
.k-hero-phu { max-width: 52ch; font-size: clamp(1rem, .95rem + .35vw, 1.2rem); opacity: .92; margin-bottom: 1.6em; }
.k-hero.canh-giua { align-items: center; text-align: center; }
.k-hero.canh-giua h1, .k-hero.canh-giua h2, .k-hero.canh-giua .k-hero-phu { margin-inline: auto; }
.m-hanh-trinh .k-hero h1 { font-size: clamp(2.3rem, 1.4rem + 4vw, 4.4rem); }

/* ---------- Ô tìm tour (nổi lên mép dưới ảnh bìa) ---------- */
.k-tim { position: relative; z-index: 2; }
.k-hero + .k-tim { margin-top: clamp(-72px, -6vw, -40px); }
.tim-form { background: var(--w-nen); border-radius: calc(var(--w-bo) + 6px); padding: clamp(16px, 3vw, 28px); box-shadow: var(--w-bong-tim); border: 1px solid var(--w-vien); }
.tim-tieu { font: 600 1.2rem/1.3 var(--w-phong-tieu-de); color: var(--w-chinh); margin-bottom: .8rem; }
.tim-o { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; align-items: end; }
.o { display: grid; gap: 6px; font-size: .85rem; color: var(--w-mo); }
.o span { font-weight: 500; }
.o select, .o input, .o-don input, .o-don select, .o-don textarea {
  width: 100%; min-height: 48px; padding: .65em .85em; font: inherit; font-size: 1rem; color: var(--w-chu); background: var(--w-nen);
  border: 1px solid var(--w-o-vien); border-radius: var(--w-bo-o); appearance: none;
}
.o select, .o-don select { background: linear-gradient(45deg, transparent 50%, var(--w-mo) 50%) calc(100% - 18px) 50% / 5px 5px no-repeat, linear-gradient(135deg, var(--w-mo) 50%, transparent 50%) calc(100% - 13px) 50% / 5px 5px no-repeat, var(--w-nen); padding-right: 2.2em; }
.o select:focus, .o input:focus, .o-don :is(input, select, textarea):focus { outline: none; border-color: var(--w-chinh); box-shadow: var(--w-vong-o); }

/* ---------- Tiêu đề mục ---------- */
.dau-muc { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 24px; margin-bottom: clamp(24px, 3vw, 40px); }
.dau-muc h1, .dau-muc h2 { margin: 0; flex: 1 1 auto; }
.dau-muc p { flex: 1 0 100%; order: 2; margin: 0; color: var(--w-mo); max-width: 64ch; }
.xem-het { font-weight: 600; white-space: nowrap; }

/* ---------- Thẻ tour ---------- */
.luoi { display: grid; gap: clamp(20px, 2.5vw, 32px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }
.luoi.cot-4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.the-tour { position: relative; display: flex; flex-direction: column; }
.the-anh { position: relative; aspect-ratio: 4 / 3; border-radius: var(--w-bo); overflow: hidden; background: var(--w-chinh-50); }
.the-anh img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.the-tour:hover .the-anh img { transform: scale(1.04); }
.the-nhan { position: absolute; left: 12px; top: 12px; padding: .25em .7em; font-size: .78rem; font-weight: 600; color: var(--w-chinh); background: var(--w-nen-tren-anh); border-radius: 999px; }
.the-than { display: flex; flex-direction: column; flex: 1; padding-top: 14px; }
.the-ten { font-size: 1.15rem; margin-bottom: .45em; }
.the-ten a { color: var(--w-chu); text-decoration: none; }
.the-gia { margin: auto 0 0; padding-top: 12px; border-top: 1px solid var(--w-vien); display: flex; align-items: baseline; gap: .4em; }
.the-gia small { color: var(--w-mo); font-size: .85rem; }
.the-gia b { font-size: 1.2rem; color: var(--w-chinh); }
.m-rong-ruoi .the-gia b, .m-tho-dia .the-gia b { color: var(--w-gia-nhan); }

/* ---------- Lịch khởi hành: mỗi chuyến MỘT dòng liên kết có ảnh nhỏ (phiếu 012 §4f — bỏ vé răng cưa, bỏ mã chuyến) ---------- */
.ds-dc { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--w-vien); }
.dc { border-bottom: 1px solid var(--w-vien); }
.dc-lk { display: grid; grid-template-columns: 64px 96px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 12px 4px; color: var(--w-chu); text-decoration: none; }
.dc-lk:hover .dc-ten { color: var(--w-chinh); }
.dc-anh { display: grid; place-items: center; width: 64px; height: 64px; border-radius: var(--w-bo-o); overflow: hidden; background: var(--w-chinh-50); color: var(--w-chinh); }
.dc-anh img { width: 100%; height: 100%; object-fit: cover; }
.dc-anh .bt { width: 26px; height: 26px; }
.dc-ngay { display: grid; line-height: 1.2; }
.dc-ngay b { font: 600 1.25rem/1.1 var(--w-phong-tieu-de); letter-spacing: -.01em; }
.dc-ngay small, .dc-phu { font-size: .85rem; color: var(--w-mo); }
.dc-than { display: grid; gap: 2px; min-width: 0; }
.dc-ten { font-weight: 600; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.dc-mua { display: grid; justify-items: end; gap: 2px; text-align: right; }
.dc-gia { font-weight: 700; color: var(--w-chinh); white-space: nowrap; }
.dc-cho { font-size: .85rem; color: var(--w-mo); }
.dc-cho.it { color: var(--w-cho); font-weight: 600; }
.dc.het-cho .dc-gia { color: var(--w-mo); }
@media (max-width: 640px) {
  .dc-lk { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 4px 12px; }
  .dc-anh { width: 56px; height: 56px; grid-row: 1 / span 2; }
  .dc-ngay { grid-column: 2; grid-row: 1; display: flex; gap: 6px; align-items: baseline; }
  .dc-ngay b { font-size: 1rem; }
  .dc-than { grid-column: 2 / -1; grid-row: 2; }
  .dc-mua { grid-column: 3; grid-row: 1; }
}
.lich-thang { margin: 0 0 20px; }

/* ---------- Vì sao chọn ---------- */
.lydo-ds { list-style: none; margin: clamp(24px, 3vw, 40px) 0 0; padding: 0; display: grid; gap: clamp(20px, 3vw, 40px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.lydo-ds h3 { margin: .8em 0 .35em; }
.lydo-ds p { margin: 0; color: var(--w-mo); font-size: .95rem; }
.lydo-bt { width: 40px; height: 40px; color: var(--w-phu-net); }
.m-hanh-trinh .lydo-ds li { padding-top: 20px; border-top: 1px solid var(--w-vien); }
.m-rong-ruoi .lydo-bt, .m-tho-dia .lydo-bt { width: 56px; height: 56px; padding: 12px; border-radius: 16px; color: var(--w-chinh); background: var(--w-chinh-100); }

/* ---------- Đánh giá ---------- */
.dg-ds { list-style: none; margin: clamp(24px, 3vw, 40px) 0 0; padding: 0; display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.dg-ds figure { margin: 0; height: 100%; padding: 24px; border-radius: var(--w-bo); background: var(--w-nen); border: 1px solid var(--w-vien); }
.dg-sao { color: var(--w-phu-net); letter-spacing: .12em; margin-bottom: .6em; }
.dg-sao span { opacity: .3; }
.dg-ds blockquote { margin: 0 0 1em; font-size: 1.02rem; line-height: 1.65; }
.dg-ds figcaption { display: grid; font-size: .88rem; }
.dg-ds figcaption span { color: var(--w-mo); }
.dg-ds figcaption .dg-mau { justify-self: start; margin-top: 6px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--w-vien); font-size: .75rem; }
/* Website minh hoạ (dữ liệu mẫu) — dải nhỏ trên chân trang. */
.dai-demo { margin: 0; padding: 10px 16px; text-align: center; font-size: .85rem; background: var(--w-nen-xen); color: var(--w-chu); border-top: 1px solid var(--w-vien); }

/* ---------- Cẩm nang ---------- */
.bv-ds { list-style: none; margin: clamp(24px, 3vw, 40px) 0 0; padding: 0; display: grid; gap: 28px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.bv-ds li { padding-top: 16px; border-top: 2px solid var(--w-chinh); }
.bv-ds time { font-size: .85rem; color: var(--w-mo); }
.bv-ds h3 { margin-top: .3em; }
.bv-ds p { color: var(--w-mo); font-size: .95rem; }

/* ---------- Form tư vấn / đặt tour ---------- */
.form-bo { display: grid; gap: clamp(24px, 5vw, 72px); grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; }
.form-gioi-thieu p { color: var(--w-mo); max-width: 44ch; }
.form-gui { display: grid; gap: 14px; background: var(--w-nen); padding: clamp(20px, 3vw, 32px); border-radius: calc(var(--w-bo) + 4px); border: 1px solid var(--w-vien); }
.o-don { display: grid; gap: 6px; }
.o-don label { font-size: .88rem; font-weight: 500; }
.o-don textarea { min-height: 96px; resize: vertical; }
.o-doi { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bat-buoc { color: var(--w-bat-buoc); }
.o-bay { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.o-don .sai { border-color: var(--w-bat-buoc); }
.loi-o { color: var(--w-loi); font-size: .85rem; margin: 0; }
.form-bao { margin: 0; font-size: .95rem; }
.form-bao.thanh-cong { padding: 12px 14px; border-radius: var(--w-bo-o); background: color-mix(in srgb, var(--w-thanh-cong) 12%, var(--w-nen)); color: var(--w-thanh-cong-dam); }
.form-bao.that-bai { color: var(--w-loi); }
.lien-he-ds { list-style: none; padding: 0; margin: 1.5em 0 0; display: grid; gap: 12px; }
.lien-he-ds li { display: flex; gap: .6em; align-items: flex-start; }
.lien-he-ds .bt { margin-top: .3em; color: var(--w-chinh); }
@media (max-width: 820px) { .form-bo { grid-template-columns: 1fr; } }

/* ---------- Phân trang ---------- */
.phan-trang { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 40px; }
.phan-trang a, .phan-trang span { display: grid; place-items: center; min-width: 44px; height: 44px; border-radius: var(--w-bo-o); border: 1px solid var(--w-vien); text-decoration: none; color: var(--w-chu); }
.phan-trang span { background: var(--w-chinh); color: var(--w-chu-tren-chinh); border-color: var(--w-chinh); }

/* ---------- Chi tiết tour ---------- */
.ct-anh { display: grid; gap: 6px; height: clamp(260px, 46vw, 520px); }
.ct-anh img { width: 100%; height: 100%; object-fit: cover; }
.ct-anh.nhieu-anh { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; }
.ct-anh.nhieu-anh img:first-child { grid-row: 1 / 3; }
.ct-anh.nhieu-anh img:nth-child(n+6) { display: none; }
.ct-anh.so-2 { grid-template-columns: 3fr 2fr; grid-template-rows: 1fr; }
.ct-anh.so-2 img:first-child { grid-row: auto; }
.ct-anh.so-3 { grid-template-columns: 2fr 1fr; }
.ct-anh.so-4 img:nth-child(4) { grid-column: 2 / 4; }
[hidden] { display: none !important; }
.ct-anh.khong-anh { height: clamp(180px, 26vw, 300px); }
.bia-lon span { font-size: clamp(2rem, 1.2rem + 3vw, 3.6rem); max-width: 16ch; }
.bia-lon { padding: clamp(20px, 4vw, 48px); }
@media (max-width: 720px) {
  .ct-anh.nhieu-anh { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; height: 64vw; }
  .ct-anh.nhieu-anh img { flex: 0 0 88%; scroll-snap-align: start; }
}
.ct-bo { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(24px, 4vw, 56px); padding-block: clamp(28px, 4vw, 48px) clamp(48px, 6vw, 80px); align-items: start; }
.ct-dau h1 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); }
.ct-loai { margin: 0 0 .4em; color: var(--w-chinh); font-weight: 600; font-size: .95rem; }
.ct-muc { margin-top: clamp(32px, 4vw, 48px); }
.ct-muc h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); }
.lich-trinh { list-style: none; margin: 0; padding: 0 0 0 22px; border-left: 2px solid var(--w-vien); display: grid; gap: 4px; }
.lich-trinh > li { position: relative; }
.lich-trinh > li::before { content: ""; position: absolute; left: -29px; top: 18px; width: 12px; height: 12px; border-radius: 50%; background: var(--w-nen); border: 3px solid var(--w-chinh); }
.lich-trinh summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 10px 0; }
.lich-trinh summary::-webkit-details-marker { display: none; }
.lt-ngay { font-weight: 700; color: var(--w-chinh); font-size: .9rem; white-space: nowrap; }
.lt-ten { font-weight: 600; font-size: 1.05rem; }
.noi-dung { color: var(--w-chu-noi-dung); max-width: 72ch; }
.noi-dung > :first-child { margin-top: 0; }
.lich-trinh .noi-dung { padding-bottom: 12px; }
.ct-bao-gom { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 40px; }
.ds-co, .ds-khong { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.ds-co li, .ds-khong li { position: relative; padding-left: 26px; }
.ds-co li::before { content: "✓"; position: absolute; left: 0; color: var(--w-thanh-cong); font-weight: 700; }
.ds-khong li::before { content: "–"; position: absolute; left: 4px; color: var(--w-mo); font-weight: 700; }
.dieu-khoan summary { cursor: pointer; }
.dieu-khoan summary h2 { display: inline; }
.ct-dat { position: sticky; top: calc(var(--w-dau-cao) + 16px); }
.dat-hop { padding: 24px; border-radius: calc(var(--w-bo) + 6px); background: var(--w-nen); border: 1px solid var(--w-vien); box-shadow: var(--w-bong-dat); }
.dat-hop h2 { font-size: 1.3rem; margin-bottom: .8em; }
.dat-hop .form-gui { padding: 0; border: 0; }
.dat-gia { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35em; margin-bottom: .6em; }
.dat-gia b { font-size: 1.6rem; color: var(--w-chinh); }
.dat-gia small { color: var(--w-mo); }
.dat-chu { margin: 0; font-size: .82rem; color: var(--w-mo); }
@media (max-width: 960px) {
  .ct-bo { grid-template-columns: minmax(0, 1fr); }
  .ct-dat { position: static; }
  .ct-bao-gom { grid-template-columns: 1fr; }
}

/* =====================================================================================================================
   Tìm tour · kết quả · thẻ · chi tiết (phiếu 009 — bố cục học từ nghiên cứu UX, nhận diện riêng theo token mẫu)
   ===================================================================================================================== */
.an { display: none !important; }
.an-nhan { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lien-ket { background: none; border: 0; padding: 0; color: var(--w-chinh); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: .18em; }
.vet { display: flex; flex-wrap: wrap; gap: 6px; font-size: .88rem; color: var(--w-mo); margin-bottom: 12px; }
.vet a { color: var(--w-mo); text-decoration: none; }
.vet a:hover { color: var(--w-chinh); text-decoration: underline; }
.vet [aria-current] { color: var(--w-chu); }

/* ---------- Ô tìm: tab nhóm + 4 ô + nút ---------- */
.tim-tab { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.tim-tab button { min-height: 38px; padding: .4em 1em; border: 1px solid var(--w-vien); border-radius: 999px; background: var(--w-nen); color: var(--w-chu); font: 500 .9rem/1 var(--w-phong-than); cursor: pointer; }
.tim-tab button[aria-selected="true"] { background: var(--w-chinh); border-color: var(--w-chinh); color: var(--w-chu-tren-chinh); }
.tim-o { grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)) auto; } /* owner 2026-10-05: bỏ ô "Số ngày" */
.tim-o .o label { display: flex; align-items: center; gap: .4em; font-weight: 600; color: var(--w-chu); font-size: .85rem; }
.tim-o .o label .bt { color: var(--w-chinh); }
.tim-nut { min-height: 48px; padding-inline: 1.6em; }
.tim-nhanh { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; font-size: .88rem; }
.tim-nhanh span { color: var(--w-mo); margin-right: 2px; }
.tim-nhanh a { padding: .35em .85em; border-radius: 999px; background: var(--w-chinh-50); color: var(--w-chinh); text-decoration: none; font-weight: 500; }
.tim-nhanh a:hover { background: var(--w-chinh-100); }
@media (max-width: 960px) {
  .tim-o { grid-template-columns: 1fr 1fr; }
  .tim-o .o-dd, .tim-o .tim-nut { grid-column: 1 / -1; }
  .tim-nhanh { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .tim-nhanh a { white-space: nowrap; }
}
@media (max-width: 520px) { .tim-o { grid-template-columns: 1fr; } }
.tim-them { display: contents; }
.tim-mo-them { display: none; }
@media (max-width: 640px) {
  .tim-form.gon .tim-mo-them { display: flex; align-items: center; justify-content: space-between; grid-column: 1 / -1; width: 100%; min-height: 44px; padding: 0 14px; border: 1px dashed var(--w-vien); border-radius: var(--w-bo); background: none; color: var(--w-chinh); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; }
  .tim-form.gon .tim-mo-them::after { content: "+"; font-size: 1.2rem; font-weight: 400; }
  .tim-form.gon.mo-them .tim-mo-them::after { content: "\2212"; }
  .tim-form.gon:not(.mo-them) .tim-them { display: none; }
}

/* Ô tìm kiểu "viên" (owner 2026-10-05: "không kiểu select cổ" — mẫu travel.com.vn): mỗi ô là một viên bo tròn, biểu tượng
   trong vòng tròn bên trái, nhãn nhỏ phía trên, giá trị đậm màu chính phía dưới; danh sách nổi neo theo cả viên. */
.tim-o { align-items: stretch; }
.tim-o .o { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 0; min-height: 66px; padding: 8px 14px 8px 60px; background: var(--w-nen); border: 1px solid var(--w-o-vien); border-radius: 16px; transition: border-color .15s, box-shadow .15s, background-color .15s; }
.tim-o .o:hover { border-color: color-mix(in srgb, var(--w-chinh) 55%, var(--w-o-vien)); box-shadow: 0 8px 22px -12px color-mix(in srgb, var(--w-chinh) 45%, transparent); }
.tim-o .o:focus-within { border-color: var(--w-chinh); box-shadow: var(--w-vong-o); }
.tim-o .o label { display: block; margin: 0; font-size: .78rem; font-weight: 500; line-height: 1.25; color: var(--w-mo); cursor: pointer; }
.tim-o .o label .bt { position: absolute; left: 12px; top: 50%; width: 38px; height: 38px; padding: 9px; margin-top: -19px; border-radius: 50%; background: var(--w-chinh-50); color: var(--w-chinh); transition: background-color .15s, color .15s; }
.tim-o .o:focus-within label .bt, .tim-o .o:hover label .bt { background: var(--w-chinh); color: var(--w-chu-tren-chinh); }
.tim-o .o :is(select, .picker-btn) { width: 100%; min-height: 28px; padding: 2px 0 0; border: 0; border-radius: 0; box-shadow: none; background-color: transparent; font: inherit; font-size: 1rem; font-weight: 600; color: var(--w-chinh); }
.tim-o .o select { background-position: calc(100% - 6px) 55%, calc(100% - 1px) 55%; padding-right: 1.6em; cursor: pointer; }
.tim-o .o select:focus { box-shadow: none; }
.tim-o .o .picker { position: static; }
.tim-o .o .picker-list { left: 0; right: auto; min-width: 100%; width: max-content; max-width: min(420px, 92vw); top: calc(100% + 8px); }
.tim-o .tim-nut { min-height: 66px; border-radius: 16px; padding-inline: 1.8em; font-size: 1rem; }

/* Picker thay <select> (site.js nâng select[data-picker]) — owner 2026-10-05 "không kiểu select cổ" */
.picker { position: relative; }
.picker-btn { display: flex; align-items: center; justify-content: space-between; gap: .6em; width: 100%; min-height: 42px; padding: .4em .9em; font: inherit; color: var(--w-chu); text-align: left; background: var(--w-nen); border: 1px solid var(--w-vien); border-radius: 999px; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.picker-btn::after { content: ""; flex: none; width: 7px; height: 7px; margin-top: -4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); opacity: .7; transition: transform .2s, margin .2s; }
.picker.is-open .picker-btn::after { transform: rotate(-135deg); margin-top: 4px; }
.picker-btn:hover { border-color: var(--w-chinh); box-shadow: 0 6px 16px -10px color-mix(in srgb, var(--w-chinh) 50%, transparent); }
.picker-btn:focus-visible { outline: none; border-color: var(--w-chinh); box-shadow: var(--w-vong-o); }
.picker-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-value.is-empty { color: var(--w-mo); font-weight: 500; }
.tim-o .o .picker-btn:focus-visible { box-shadow: none; }
.picker-list { display: none; position: absolute; z-index: 20; left: 0; top: calc(100% + 6px); min-width: 100%; max-height: 320px; overflow: auto; margin: 0; padding: 6px; list-style: none; background: var(--w-nen); border: 1px solid var(--w-vien); border-radius: 14px; box-shadow: var(--w-bong-menu); animation: picker-in .16s ease-out; }
.picker.is-open .picker-list { display: block; }
.picker-list li { display: flex; align-items: center; justify-content: space-between; gap: 1.2em; padding: .6rem .8rem; border-radius: 10px; cursor: pointer; font-size: .95rem; font-weight: 500; color: var(--w-chu); white-space: nowrap; }
.picker-list li:hover, .picker-list li.hl { background: var(--w-chinh-50); color: var(--w-chinh); }
.picker-list li[aria-selected="true"] { color: var(--w-chinh); font-weight: 600; }
.picker-list li[aria-selected="true"]::after { content: "✓"; font-weight: 700; }
.kq-sap .picker { min-width: 230px; }
.kq-sap .picker-list { left: auto; right: 0; }
@keyframes picker-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .picker-list { animation: none; } }
@media (max-width: 640px) {
  /* Điện thoại: cả hai danh sách thành "sheet" từ đáy, ô chạm cao ≥44px. */
  .picker.is-open .picker-list { position: fixed; top: auto; bottom: 0; left: 0; right: 0; width: auto; max-width: none; min-width: 0; max-height: 60vh; border-radius: 16px 16px 0 0; padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); }
  .picker-list li { min-height: 44px; }
  .tim-o .o { min-height: 60px; }
}

/* ---------- Thẻ tour: chip ngày đi, dạng hàng ---------- */
.the-ten a { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.the-nhan.la-sap { background: var(--w-phu); color: var(--w-chu-tren-phu); }
.the-ngay { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.chip-ngay { display: inline-flex; align-items: baseline; gap: 4px; padding: .3em .6em; border: 1px solid color-mix(in srgb, var(--w-chinh) 35%, var(--w-nen)); border-radius: 6px; color: var(--w-chinh); font-size: .82rem; font-weight: 600; text-decoration: none; background: var(--w-nen); }
.chip-ngay:hover { background: var(--w-chinh); color: var(--w-chu-tren-chinh); }
.chip-ngay small { font-weight: 500; color: var(--w-cho); }
.chip-ngay:hover small { color: var(--w-chu-tren-chinh); }
/* Hết chỗ: chữ phụ + gạch (không mờ cả chip — mờ làm chữ dưới 4.5:1). */
.chip-ngay.het, .chip-ngay.het small { color: var(--w-mo); border-color: var(--w-vien); text-decoration: line-through; }
.chip-them { align-self: center; font-size: .82rem; color: var(--w-mo); }
.the-ngay-rong { margin: 0 0 12px; font-size: .88rem; color: var(--w-mo); }
.the-cuoi { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--w-vien); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.the-cuoi .the-gia { margin: 0; padding: 0; border: 0; }
.the-hang { display: grid; grid-template-columns: minmax(220px, 34%) minmax(0, 1fr); gap: 0; background: var(--w-nen); border: 1px solid var(--w-vien); border-radius: calc(var(--w-bo) + 4px); overflow: hidden; }
.the-hang .the-anh { aspect-ratio: auto; height: 100%; min-height: 200px; border-radius: 0; }
.the-hang .the-than { padding: 18px 20px; }
.m-rong-ruoi .the-hang, .m-tho-dia .the-hang { padding: 0; }
.the-hang .the-nut { pointer-events: none; }
@media (max-width: 720px) {
  .the-hang { grid-template-columns: 1fr; }
  .the-hang .the-anh { aspect-ratio: 16 / 9; min-height: 0; }
}

/* ---------- Trang kết quả ---------- */
.k-kq { padding-block: clamp(20px, 3vw, 32px) clamp(48px, 6vw, 80px); }
.kq-dau { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; }
.kq-dau h1 { margin: 0; font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem); }
.kq-mota { flex: 1 0 100%; margin: 0; color: var(--w-mo); }
.kq-dem { margin: 0; color: var(--w-mo); }
.kq-dem b { color: var(--w-chu); }
.kq-dem span::before { content: "·"; margin: 0 .5em; }
.loc-dang { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; }
.loc-dang a { display: inline-flex; align-items: center; gap: .5em; padding: .35em .75em; border-radius: 999px; background: var(--w-chinh-50); color: var(--w-chu); font-size: .88rem; text-decoration: none; border: 1px solid var(--w-vien); }
.loc-dang a span { color: var(--w-mo); }
.loc-dang a:hover { border-color: var(--w-chinh); }
.loc-dang .xoa-het { background: none; border-color: transparent; color: var(--w-chinh); font-weight: 600; text-decoration: underline; }
.kq-bo { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 28px; margin-top: 24px; align-items: start; }
.kq-ds { min-width: 0; }
.kq-sap { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-bottom: 16px; font-size: .9rem; color: var(--w-mo); }
.kq-sap select { min-height: 42px; padding: .4em 2.2em .4em .8em; font: inherit; color: var(--w-chu); border: 1px solid var(--w-vien); border-radius: var(--w-bo-o); appearance: none; background: linear-gradient(45deg, transparent 50%, var(--w-mo) 50%) calc(100% - 18px) 50% / 5px 5px no-repeat, linear-gradient(135deg, var(--w-mo) 50%, transparent 50%) calc(100% - 13px) 50% / 5px 5px no-repeat, var(--w-nen); }
.kq-luoi { display: grid; gap: 16px; }
.kq-rong { padding: 28px; border: 1px dashed var(--w-vien); border-radius: calc(var(--w-bo) + 4px); }
.kq-rong p:last-child { margin-bottom: 0; }

/* Bộ lọc */
.kq-loc { position: sticky; top: calc(var(--w-dau-cao) + 12px); max-height: calc(100vh - var(--w-dau-cao) - 24px); overflow: auto; background: var(--w-nen); border: 1px solid var(--w-vien); border-radius: calc(var(--w-bo) + 4px); }
.loc-form { display: grid; gap: 4px; padding: 16px; }
.loc-dau { display: flex; align-items: center; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--w-vien); }
.loc-tieu { margin: 0 auto 0 0; font-weight: 700; font-size: 1.05rem; }
.loc-dat-lai { font-size: .88rem; }
.loc-dong { display: none; }
.loc-nhom { border: 0; margin: 0; padding: 14px 0; border-bottom: 1px solid var(--w-vien); display: grid; gap: 8px; min-width: 0; }
.loc-nhan { font-weight: 600; font-size: .92rem; padding: 0; margin: 0; }
.loc-nhom input:not([type]), .loc-nhom input[type="number"] { width: 100%; min-height: 42px; padding: .5em .7em; font: inherit; border: 1px solid var(--w-vien); border-radius: var(--w-bo-o); color: var(--w-chu); background: var(--w-nen); }
.loc-chon { display: flex; align-items: center; gap: .6em; font-size: .92rem; cursor: pointer; padding: 3px 0; }
.loc-chon input { width: 18px; height: 18px; accent-color: var(--w-chinh); flex: 0 0 auto; margin: 0; }
.loc-chon span { flex: 1; }
.loc-chon small { color: var(--w-mo); font-variant-numeric: tabular-nums; }
.loc-con { padding-left: 24px; }
.loc-chip { display: flex; flex-wrap: wrap; gap: 6px; }
.loc-chip label { cursor: pointer; }
.loc-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.loc-chip span { display: inline-block; padding: .4em .8em; border: 1px solid var(--w-vien); border-radius: 999px; font-size: .85rem; }
.loc-chip input:checked + span { background: var(--w-chinh); border-color: var(--w-chinh); color: var(--w-chu-tren-chinh); }
.loc-chip input:focus-visible + span { outline: 3px solid var(--w-focus); outline-offset: 2px; }
.loc-gia { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; }
.loc-cong-tac { padding: 14px 0; }
.loc-cuoi { padding-top: 12px; }

/* ---------- Lịch chọn ngày dùng chung (phiếu 012 §4f): dải tháng + dải ngày có chuyến + lưới tháng tuỳ chọn ---------- */
.lcn { display: grid; gap: 10px; margin: 0 0 20px; min-width: 0; }
.lcn-nhan { margin: 0; font-size: .85rem; font-weight: 600; color: var(--w-mo); }
.lcn-thang, .lcn-ngay { list-style: none; margin: 0; padding: 2px; display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; }
.lcn-thang li, .lcn-ngay li { flex: none; scroll-snap-align: start; }
.lcn-thang a { display: grid; justify-items: center; min-width: 72px; min-height: 44px; padding: 6px 12px; border: 1px solid var(--w-vien); border-radius: var(--w-bo-o); color: var(--w-chu); text-decoration: none; line-height: 1.2; background: var(--w-nen); }
.lcn-thang a b { font-size: .95rem; }
.lcn-thang a small { font-size: .75rem; color: var(--w-mo); }
.lcn-thang a:hover { border-color: var(--w-chinh); }
.lcn-thang a[aria-current] { background: var(--w-chinh); border-color: var(--w-chinh); color: var(--w-chu-tren-chinh); }
.lcn-thang a[aria-current] small { color: var(--w-chu-tren-chinh); }
.lcn-o { position: relative; display: grid; justify-items: center; align-content: center; gap: 1px; width: 76px; min-height: 88px; padding: 8px 4px; border: 1px solid transparent; border-radius: var(--w-bo-o); background: var(--w-chinh-50); color: var(--w-chu); text-decoration: none; line-height: 1.15; cursor: pointer; }
.lcn-thu { font-size: .75rem; color: var(--w-mo); }
.lcn-so { font: 600 1.25rem/1.1 var(--w-phong-tieu-de); letter-spacing: -.01em; }
.lcn-so small { font: 500 .75rem var(--w-phong-than); color: var(--w-mo); }
.lcn-gia { font-size: .8rem; font-weight: 600; color: var(--w-chinh); }
.lcn-phu { font-size: .75rem; font-weight: 600; color: var(--w-chinh); }
.lcn-phu.lcn-it { color: var(--w-cho); }
.lcn-o:hover { border-color: var(--w-chinh); }
.lcn-o.re { border: 2px solid var(--w-chinh); }
.lcn-o.het { cursor: default; background: var(--w-nen); border: 1px dashed var(--w-vien); }
.lcn-o.het :is(.lcn-so, .lcn-gia) { color: var(--w-mo); }
.lcn-o.het .lcn-so { text-decoration: line-through; }
.lcn-o:focus-visible, .lcn-thang a:focus-visible, .lcn-luoi-o:focus-visible { outline: 3px solid var(--w-focus); outline-offset: 2px; }
.lcn.dang-tai .lcn-ngay { opacity: .5; }
.lcn-rong { margin: 0; font-size: .9rem; color: var(--w-mo); }
.lcn-luoi-bo summary { display: inline-flex; min-height: 28px; align-items: center; font-size: .88rem; font-weight: 600; color: var(--w-chinh); cursor: pointer; }
.lcn-luoi { display: grid; grid-template-columns: repeat(7, 44px); gap: 4px; margin-top: 8px; text-align: center; }
.lcn-luoi-thu { font-size: .75rem; color: var(--w-mo); }
.lcn-luoi-o { display: grid; place-content: center; width: 44px; height: 44px; border-radius: var(--w-bo-o); font-size: .88rem; line-height: 1.1; color: var(--w-mo); text-decoration: none; }
.lcn-luoi-o small { font-size: .75rem; color: var(--w-chinh); }
.lcn-luoi-o.co { background: var(--w-chinh-50); color: var(--w-chu); font-weight: 600; }
.lcn-luoi-o.co:hover { outline: 1px solid var(--w-chinh); }
.lcn-luoi-o.re { box-shadow: inset 0 0 0 2px var(--w-chinh); }
.lcn-luoi-o.chon { background: var(--w-chinh); color: var(--w-chu-tren-chinh); }
.lcn-luoi-o.picker small { color: var(--w-chu-tren-chinh); }
.lcn-luoi-o.het b { text-decoration: line-through; }
.lcn-luoi-o.qua { color: var(--w-lich-mo); }
.lcn-luoi-o.hom-nay b { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--w-chu); border-radius: 50%; }
.lcn-tom { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .9rem; color: var(--w-mo); }
.lcn-tom:empty { display: none; }
.lcn-tom b { color: var(--w-chu); }
/* Hộp đặt: ô nhỏ hơn cho vừa cột 360 px. */
.o-lich .lcn { margin: 4px 0 0; }
.o-lich .lcn-o { width: 68px; min-height: 80px; }
.o-nhan { margin: 0 0 6px; font-weight: 600; font-size: .9rem; }

/* Thanh "Lọc | Sắp xếp" nổi + sheet bộ lọc trên điện thoại (CSS :target — chạy cả khi chưa có JS) */
.thanh-loc { display: none; }
@media (max-width: 960px) {
  .kq-bo { grid-template-columns: 1fr; }
  .kq-loc { display: none; position: fixed; inset: 0; z-index: 60; max-height: none; border-radius: 0; border: 0; }
  .kq-loc:target { display: block; }
  .loc-dong { display: grid; place-items: center; width: 40px; height: 40px; text-decoration: none; color: var(--w-chu); font-size: 1.2rem; }
  .loc-cuoi { position: sticky; bottom: 0; background: var(--w-nen); padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); }
  .thanh-loc { display: flex; position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 45; background: var(--w-chinh); border-radius: 999px; box-shadow: var(--w-bong-noi); overflow: hidden; }
  .thanh-loc a { display: flex; align-items: center; gap: .45em; padding: .8em 1.2em; color: var(--w-chu-tren-chinh); text-decoration: none; font-weight: 600; font-size: .92rem; white-space: nowrap; }
  .thanh-loc a + a { border-left: 1px solid color-mix(in srgb, var(--w-chu-tren-chinh) 25%, transparent); }
  .kq-sap { justify-content: space-between; scroll-margin-top: calc(var(--w-dau-cao) + 12px); }
  body:has(.thanh-loc) .nut-noi { bottom: 84px; }
}

/* ---------- Chi tiết tour ---------- */
.ct-dau { padding-top: clamp(20px, 3vw, 32px); }
.ct-dau h1 { margin-bottom: .35em; }
.ct-dau .ct-su { display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none; margin: 0 0 18px; padding: 0; border: 0; color: var(--w-mo); font-size: .95rem; }
.ct-dau .ct-su li { display: flex; align-items: center; gap: .4em; }
.ct-dau .ct-su b { color: var(--w-chu); }
.ct-anh { border-radius: calc(var(--w-bo) + 4px); overflow: hidden; }
.ct-muc-luc { position: sticky; top: var(--w-dau-cao); z-index: 20; margin-top: 20px; background: color-mix(in srgb, var(--w-nen) 96%, transparent); border-bottom: 1px solid var(--w-vien); backdrop-filter: blur(6px); }
.ct-muc-luc .khung { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.ct-muc-luc a { padding: .9rem .9rem; white-space: nowrap; color: var(--w-chu); text-decoration: none; font-weight: 500; font-size: .92rem; border-bottom: 2px solid transparent; }
.ct-muc-luc a:hover { color: var(--w-chinh); border-bottom-color: var(--w-chinh); }
.ct-bo { padding-top: clamp(20px, 3vw, 32px); }
.ct-muc { scroll-margin-top: calc(var(--w-dau-cao) + 64px); }
.ct-muc-dau { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ct-thang { font: 600 .95rem/1.3 var(--w-phong-than); color: var(--w-mo); margin: 18px 0 8px; }
.bang-chuyen { list-style: none; margin: 0; padding: 0; border: 1px solid var(--w-vien); border-radius: calc(var(--w-bo) + 4px); overflow: hidden; }
.bang-chuyen li { position: relative; display: grid; grid-template-columns: minmax(130px, 1.2fr) minmax(140px, 1.2fr) minmax(90px, .8fr) auto; gap: 12px; align-items: center; padding: 10px 16px; }
.bang-chuyen li + li { border-top: 1px solid var(--w-vien); }
.bang-chuyen li.dang-chon { background: var(--w-chinh-50); box-shadow: inset 3px 0 0 var(--w-chinh); }
.bang-chuyen li.het-cho .bc-gia b { color: var(--w-mo); }
.bc-ngay, .bc-gia { display: grid; }
.bc-ngay small, .bc-gia small { color: var(--w-mo); font-size: .8rem; }
.bc-gia b { color: var(--w-chinh); }
.bc-cho { font-size: .88rem; font-weight: 600; color: var(--w-cho); }
/* Điện thoại: mỗi chuyến MỘT hàng ~64 px — ngày trái, giá phải; chạm cả hàng để chọn (nút giãn phủ hàng). */
@media (max-width: 720px) {
  .bang-chuyen li { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 14px; min-height: 64px; }
  .bc-gia { grid-column: 2; grid-row: 1; justify-items: end; text-align: right; }
  .bc-cho { grid-column: 1; font-size: .8rem; }
  .bang-chuyen .nut { position: absolute; inset: 0; opacity: 0; }
}
.dat-bang { display: grid; gap: 6px; margin: 4px 0 6px; padding: 12px 14px; border-radius: var(--w-bo-o); background: var(--w-chinh-50); font-size: .92rem; }
.dat-bang div { display: flex; justify-content: space-between; gap: 12px; }
.dat-bang dt { color: var(--w-mo); }
.dat-bang dd { margin: 0; font-weight: 600; }
.dat-bang .dat-cho { color: var(--w-cho); }
.dat-lien-he { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--w-vien); }
/* Nhãn "Gọi 0901 234 567" giữ một dòng: không đủ chỗ cho hai nút thì nút sau xuống hàng, mỗi nút rộng hết hàng. */
.dat-lien-he .nut { flex: 1 1 auto; white-space: nowrap; padding-inline: .9em; }
.thanh-dat { display: none; }
@media (max-width: 960px) {
  .thanh-dat { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--w-nen); border-top: 1px solid var(--w-vien); box-shadow: 0 -8px 24px color-mix(in srgb, var(--w-den) 8%, transparent); }
  .thanh-dat div { display: grid; line-height: 1.25; }
  .thanh-dat small { color: var(--w-mo); font-size: .8rem; }
  .thanh-dat b { color: var(--w-chinh); font-size: 1.1rem; }
  body:has(.thanh-dat) .nut-noi { display: none; }
  body:has(.thanh-dat) .chan-cuoi { padding-bottom: 110px; }
}

/* ---------- Chân trang ---------- */
.chan { background: var(--w-chan); color: var(--w-chu-chan); font-size: .95rem; }
.chan a { color: var(--w-chu-chan); }
.chan-trong { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; padding-block: 56px 32px; }
.chan-ten { font: 600 1.35rem/1.2 var(--w-phong-tieu-de); color: var(--w-chu-chan); }
.chan-mota { max-width: 40ch; }
.chan-lh { font-style: normal; }
.chan-lh p { margin: 0 0 .5em; }
.chan-lk { display: grid; gap: 8px; align-content: start; }
.chan-lk a { text-decoration: none; }
.chan-lk a:hover { text-decoration: underline; }
.chan-cuoi { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding-block: 18px 96px; border-top: 1px solid color-mix(in srgb, var(--w-chu-chan) 14%, transparent); font-size: .85rem; }
.chan-cuoi p { margin: 0; }
.chan-tk { opacity: .6; }
@media (max-width: 820px) { .chan-trong { grid-template-columns: 1fr; } }

/* ---------- Nút liên hệ nổi: MỘT nút (gọi / Zalo gộp — có cả hai thì bấm mở ra hai lựa chọn, chạy cả khi chưa có JS) ---------- */
.nut-noi { position: fixed; bottom: 18px; z-index: 40; }
.nut-noi.ben-phai { right: 18px; }
.nut-noi.ben-trai { left: 18px; }
.noi-nut { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; list-style: none; cursor: pointer; text-decoration: none; background: var(--w-phu); color: var(--w-chu-tren-phu); box-shadow: var(--w-bong-noi); }
.noi-nut::-webkit-details-marker { display: none; }
.nut-vien-tron .noi-nut { background: var(--w-chinh); color: var(--w-chu-tren-chinh); }
.noi-nut.la-zalo { background: var(--w-zalo); color: var(--w-trang); }
.nut-noi svg { width: 26px; height: 26px; }
.noi-dong { font-size: 1.4rem; line-height: 1; }
.nut-noi:not([open]) .noi-dong, .nut-noi[open] .noi-nut svg { display: none; }
.noi-ds { position: absolute; bottom: calc(100% + 12px); display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ben-phai .noi-ds { right: 0; justify-items: end; }
.ben-trai .noi-ds { left: 0; justify-items: start; }
.noi-ds a { display: inline-flex; align-items: center; gap: .5em; min-height: 46px; padding: .6em 1.1em; border-radius: 999px; white-space: nowrap; font-weight: 600; font-size: .95rem; text-decoration: none; box-shadow: var(--w-bong-noi); }
.noi-ds svg { width: 20px; height: 20px; }
.noi-goi { background: var(--w-chinh); color: var(--w-chu-tren-chinh); }
.noi-zalo { background: var(--w-zalo); color: var(--w-trang); }
@media (prefers-reduced-motion: no-preference) {
  .nut-noi:not([open]) .noi-nut { animation: rung 4s ease-in-out 3s infinite; }
  @keyframes rung { 0%, 88%, 100% { transform: none; } 90% { transform: rotate(-12deg); } 94% { transform: rotate(12deg); } }
}

/* ---------- Lỗi ---------- */
.loi { max-width: 640px; margin: 0 auto; padding: 96px 16px; text-align: center; }
.loi-ma { font: 600 5rem/1 var(--w-phong-tieu-de); color: var(--w-chinh); opacity: .25; margin: 0; }
.loi-nut { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.trang-loi-don { font-family: system-ui, sans-serif; }

/* ---------- Xem trước trong trình dựng ---------- */
.k-trong { color: var(--w-mo); border: 2px dashed var(--w-vien); }
.k-trong-hop { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 40px 16px; }
.k-trong-td { margin: 0; font: 600 1.15rem/1.35 var(--w-phong-than); color: var(--w-chu); }
.k-trong-nhac { margin: 0; max-width: 520px; color: var(--w-mo); }
.k-trong-nut { margin-top: 8px; }
.xem-truoc [data-khoi].dang-chon { outline: 3px solid var(--w-chon-dung); outline-offset: -3px; }
.xem-truoc:not(.xem-thuan) main [data-khoi] { cursor: pointer; }
.xem-truoc:not(.xem-thuan) main [data-khoi]:not(.dang-chon):hover { outline: 1px dashed var(--w-chon-dung); outline-offset: -1px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* =====================================================================================================================
   v2 (owner 2026-09-28): token màu đầy đủ, tiêu đề hai sắc, nền xen kẽ, thẻ tour thông tin đè ảnh, băng chuyền + ảnh dọc,
   khối mới (bộ sưu tập, video, logo), chi tiết tour: dòng thời gian + form đặt nhiều bước.
   ===================================================================================================================== */
.xen { background: var(--w-nen-xen); }
.td-nhan { white-space: nowrap; }
.td-hai-sac .td-nhan { color: var(--w-chinh); }
/* Hành Trình: H2 dùng phông THÂN (sans) đậm để tiêu đề hai sắc gọn; H1 / hero giữ phông tiêu đề. */

/* ---- Thẻ tour v2: ảnh tỉ lệ theo token, lớp mờ ghi nơi đi · ngày · thời lượng ---- */
.the-anh { aspect-ratio: var(--w-ti-le); border-radius: var(--w-bo); }
.the-pt { position: absolute; right: 10px; top: 10px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--w-nen-tren-anh); color: var(--w-chinh); }
.the-pt svg { width: 18px; height: 18px; }
.the-phu { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; padding: 36px 12px 10px; list-style: none; color: var(--w-chu-tren-anh); font-size: .82rem; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--w-den) 62%, transparent)); }
.the-phu li { display: flex; align-items: center; gap: .35em; }
.the-phu b { font-weight: 700; }
.the-nut { pointer-events: none; }
.the-tour .the-cuoi { border-top: 0; padding-top: 4px; }
.the-cuoi { flex-wrap: wrap; row-gap: 8px; }
.the-nut { white-space: nowrap; }
.the-hang .the-phu { font-size: .8rem; }

/* ---- Băng chuyền tour + ảnh dọc đổi bên ---- */
.co-banner .luoi-bo { display: grid; grid-template-columns: minmax(0, 1fr) clamp(240px, 24vw, 300px); gap: 28px; align-items: stretch; }
.co-banner .luoi-banner { order: 2; }
.co-banner.ben-trai .luoi-bo { grid-template-columns: clamp(240px, 24vw, 300px) minmax(0, 1fr); }
.co-banner.ben-trai .luoi-banner { order: 0; }
.luoi-than { min-width: 0; }
.luoi-banner { position: relative; display: block; min-height: 420px; border-radius: var(--w-bo); overflow: hidden; color: var(--w-chu-tren-anh); text-decoration: none; background: var(--w-dam); }
.luoi-banner img, .luoi-banner .lv { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.luoi-banner-chu { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 12px; justify-items: start; padding: 60px 20px 20px; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--w-den) 60%, transparent)); }
.luoi-banner-chu b { font: 600 1.45rem/1.2 var(--w-phong-tieu-de); }
@media (max-width: 960px) {
  .co-banner .luoi-bo, .co-banner.ben-trai .luoi-bo { grid-template-columns: 1fr; }
  .luoi-banner { display: none; }
}

/* ---- Chip điểm đến ảnh tròn (dưới ô tìm) ---- */
.tim-diem-den { display: flex; gap: 18px; margin: 18px 0 0; padding: 0 0 4px; list-style: none; overflow-x: auto; scrollbar-width: none; }
.tim-diem-den a { display: grid; justify-items: center; gap: 6px; width: 84px; text-align: center; color: var(--w-chu); text-decoration: none; font-size: .85rem; font-weight: 500; }
.tim-diem-den img, .tim-diem-den .lv { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; padding: 0; justify-content: center; align-items: center; box-shadow: 0 0 0 2px var(--w-nen), 0 0 0 4px var(--w-chinh-100); }
.tim-diem-den a:hover img, .tim-diem-den a:hover .lv { box-shadow: 0 0 0 2px var(--w-nen), 0 0 0 4px var(--w-chinh); }

/* ---- Vì sao chọn: biến thể hàng biểu tượng có liên kết ---- */
.kieu-lien-ket .lydo-ds { grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); text-align: center; }
.kieu-lien-ket .lydo-ds li { border: 0; padding: 0; }
.kieu-lien-ket .lydo-ds a { display: grid; justify-items: center; gap: 10px; padding: 18px 8px; border-radius: var(--w-bo); color: var(--w-chu); text-decoration: none; font-weight: 600; }
.kieu-lien-ket .lydo-ds a:hover { background: var(--w-chinh-50); color: var(--w-chinh); }
.kieu-lien-ket .lydo-bt { width: 44px; height: 44px; padding: 0; background: none; color: var(--w-chinh); }

/* ---- Các đoàn đã khởi hành ---- */
.kieu-doan .bv-ds li { padding: 20px 22px; border: 1px solid var(--w-vien); border-radius: var(--w-bo); background: var(--w-nen); }
.bv-bang { display: inline-block; margin: 0 0 10px; position: relative; padding: .3em .8em; border-radius: 999px; background: var(--w-phu); color: var(--w-chu-tren-phu); font-size: .8rem; font-weight: 600; }
.bv-trich { font-style: italic; }

/* ---- Bộ sưu tập ---- */
.bst-ds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: clamp(24px, 3vw, 36px) 0 0; padding: 0; list-style: none; }
.bst-ds a { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--w-bo); overflow: hidden; color: var(--w-chu-tren-anh); text-decoration: none; background: var(--w-dam); }
.bst-ds img, .bst-ds .lv { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.bst-ds a:hover img { transform: scale(1.04); }
.bst-chu { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 8px; justify-items: start; padding: 48px 16px 16px; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--w-den) 60%, transparent)); }
.bst-chu b { font-size: 1.15rem; }
.bst-nhan { padding: .25em .75em; border-radius: 999px; background: var(--w-nen-tren-anh); color: var(--w-chinh); font-size: .78rem; font-weight: 600; }
@media (max-width: 960px) { .bst-ds { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 62%; overflow-x: auto; scroll-snap-type: x mandatory; } .bst-ds li { scroll-snap-align: start; } }

/* ---- Video (chỉ YouTube, bấm mới tải) ---- */
.video-khung { position: relative; aspect-ratio: 16 / 9; border-radius: calc(var(--w-bo) + 4px); overflow: hidden; background: var(--w-dam); }
.video-khung img, .video-khung .lv, .video-khung iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.video-phat { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 76px; height: 76px; border: 0; border-radius: 50%; background: var(--w-nen-tren-anh); color: var(--w-chinh); cursor: pointer; box-shadow: 0 12px 30px color-mix(in srgb, var(--w-den) 30%, transparent); }
.video-phat svg { width: 34px; height: 34px; margin-left: 4px; }
.video-phat:hover { background: var(--w-trang); transform: translate(-50%, -50%) scale(1.05); }
.video-ngoai { position: absolute; right: 12px; bottom: 10px; color: var(--w-chu-tren-anh); font-size: .8rem; }

/* ---- Logo tin cậy ---- */
.logo-ds { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px 40px; margin: 24px 0 0; padding: 0; list-style: none; }
.logo-ds img { height: 44px; width: auto; filter: grayscale(1); opacity: .7; transition: filter .2s, opacity .2s; }
.logo-ds a:hover img, .logo-ds img:hover { filter: none; opacity: 1; }
.logo-ds span { color: var(--w-mo); font-weight: 600; }

/* ---- Chi tiết tour v2 ---- */
.ct-dau { padding-bottom: 4px; }
.ct-chinh .ct-anh { margin-bottom: 8px; }
.dat-tt { display: grid; gap: 8px; margin: 0 0 16px; padding: 14px 0; border-block: 1px solid var(--w-vien); font-size: .92rem; }
.dat-tt div { display: flex; justify-content: space-between; gap: 12px; }
.dat-tt dt { color: var(--w-mo); }
.dat-tt dd { margin: 0; font-weight: 600; text-align: right; }
.dat-tieu { font-size: 1.2rem; margin-bottom: .6em; }
.co-buoc fieldset.buoc { border: 0; margin: 0; padding: 0; display: none; }
.co-buoc fieldset.buoc.dang { display: grid; gap: 12px; }
.co-buoc fieldset.buoc.xong { display: block; }
.co-buoc fieldset.buoc.xong > :not(legend) { display: none; }
fieldset.buoc { border: 0; margin: 0 0 14px; padding: 0; display: grid; gap: 12px; min-width: 0; }
.buoc legend { display: flex; align-items: center; gap: .6em; padding: 0; font-weight: 700; font-size: .98rem; }
.buoc-so { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--w-chinh); color: var(--w-chu-tren-chinh); font-size: .82rem; }
.co-buoc .buoc.xong legend { cursor: pointer; color: var(--w-mo); padding: 8px 0; border-bottom: 1px dashed var(--w-vien); }
.co-buoc .buoc.xong legend::after { content: "✓  Sửa"; margin-left: auto; font-size: .82rem; color: var(--w-chinh); }
.co-buoc .buoc.xong .buoc-so { background: var(--w-chinh-100); color: var(--w-chinh); }
.o-khach { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dat-tam { margin: 0; font-size: .92rem; }
.dat-tam b { color: var(--w-chinh); }
.dat-tam small { color: var(--w-mo); }
.dat-lai { display: grid; gap: 6px; margin: 0; padding: 12px 14px; border-radius: var(--w-bo-o); background: var(--w-chinh-50); font-size: .92rem; }
.dat-lai div { display: flex; justify-content: space-between; gap: 12px; }
.dat-lai dt { color: var(--w-mo); flex: none; white-space: nowrap; }
.dat-lai dd { margin: 0; font-weight: 600; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.dat-xac-nhan { display: grid; gap: 12px; padding: 18px; border-radius: var(--w-bo); background: color-mix(in srgb, var(--w-thanh-cong) 8%, var(--w-nen)); border: 1px solid color-mix(in srgb, var(--w-thanh-cong) 30%, var(--w-nen)); }
.dat-xac-nhan[hidden] { display: none; }
.xn-tieu { margin: 0; font-weight: 700; font-size: 1.05rem; }
.xn-tieu b { color: var(--w-chinh); }
/* Lịch trình dòng thời gian */
.lt-bo { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 24px; align-items: start; }
.lt-muc { position: sticky; top: calc(var(--w-dau-cao) + 64px); display: grid; gap: 4px; }
.lt-muc a { padding: .45rem .7rem; border-radius: 8px; color: var(--w-mo); text-decoration: none; font-weight: 600; font-size: .9rem; }
.lt-muc a:hover { color: var(--w-chinh); background: var(--w-chinh-50); }
.lich-trinh > li { scroll-margin-top: calc(var(--w-dau-cao) + 64px); }
.lt-ngay { font-size: 1rem; letter-spacing: .02em; }
.noi-dung .gio { color: var(--w-chinh); }
@media (max-width: 1023px) {
  .lt-bo { grid-template-columns: 1fr; gap: 8px; }
  .lt-muc { top: calc(var(--w-dau-cao) + 46px); z-index: 5; display: flex; overflow-x: auto; gap: 6px; padding: 8px 0; background: var(--w-nen); scrollbar-width: none; }
  .lt-muc a { white-space: nowrap; border: 1px solid var(--w-vien); border-radius: 999px; }
}
.thanh-dat { transition: transform .2s ease; }
.thanh-dat.an-di { transform: translateY(110%); }

/* =====================================================================================================================
   Slider dùng chung (phiếu 009 mục 15) — slider.js. Không JS: dải vuốt ngang scroll-snap; có JS (.sl-san): nút ‹ › · chấm ·
   tự chạy. Số thẻ mỗi khung theo lớp sl-pc-* / sl-bang-* / sl-dt-* (CSP cấm style nội tuyến). Mọi màu qua --w-*.
   ===================================================================================================================== */
.sl { --sl-gap: 20px; --sl-n: var(--sl-pc, 1); position: relative; }
.sl-pc-1 { --sl-pc: 1; } .sl-pc-2 { --sl-pc: 2; } .sl-pc-3 { --sl-pc: 3; } .sl-pc-4 { --sl-pc: 4; }
.sl-bang-1 { --sl-bang: 1; } .sl-bang-2 { --sl-bang: 2; } .sl-bang-3 { --sl-bang: 3; }
.sl-dt-1 { --sl-dt: 1; } .sl-dt-1-2 { --sl-dt: 1.2; } .sl-dt-2 { --sl-dt: 2; }
@media (max-width: 960px) { .sl { --sl-n: var(--sl-bang, 1); } }
@media (max-width: 640px) { .sl { --sl-n: var(--sl-dt, 1); --sl-gap: 14px; } }
.sl-ray { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--sl-n) - 1) * var(--sl-gap)) / var(--sl-n)); gap: var(--sl-gap); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0; padding: 0; list-style: none; }
.sl-ray::-webkit-scrollbar { display: none; }
.sl-ray > * { scroll-snap-align: start; min-width: 0; }
.sl-ray:focus-visible { outline-offset: 4px; }
/* Mờ dần: các slide chồng một ô lưới, chỉ slide .sl-dang hiện. */
.sl-mo .sl-ray { grid-auto-flow: row; grid-template-columns: 100%; grid-auto-columns: auto; overflow: hidden; touch-action: pan-y; }
.sl-mo .sl-ray > * { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility 0s linear .8s; }
.sl-mo .sl-ray > .sl-dang { opacity: 1; visibility: visible; transition: opacity .8s ease; z-index: 1; }
/* Phóng mờ (điện ảnh): slide mới mờ vào và thu từ 1.12 về 1, slide cũ phóng tiếp ra rồi tan. */
@media (prefers-reduced-motion: no-preference) {
  .sl-phong .sl-ray > * { transform: scale(1.12); transition: opacity 1s ease, transform 1.6s cubic-bezier(.2, .7, .2, 1), visibility 0s linear 1s; }
  .sl-phong .sl-ray > .sl-dang { transform: scale(1); transition: opacity 1s ease, transform 1.6s cubic-bezier(.2, .7, .2, 1); }
}
/* Nút điều khiển: chỉ hiện khi JS đã gắn. */
.sl:not(.sl-san) :is([data-sl-lui], [data-sl-tien], [data-sl-dung], [data-sl-cham]) { display: none; }
.sl-nut { display: inline-grid; place-items: center; width: 42px; height: 42px; padding: 0; border-radius: 50%; border: 1px solid var(--w-vien); background: var(--w-nen); color: var(--w-chinh); font-size: 1.35rem; line-height: 1; cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .2s; }
.sl-nut:hover { background: var(--w-chinh); border-color: var(--w-chinh); color: var(--w-chu-tren-chinh); }
.sl-nut:active { transform: scale(.94); }
.sl-nut[hidden] { display: none; }
.sl-bo-nut { display: inline-flex; gap: 8px; align-items: center; }
.sl-cham { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; margin-top: 12px; }
/* Vùng bấm 24 × 24 px (WCAG 2.5.8) — chấm vẽ bằng ::before, nút trong suốt. */
.sl-cham button { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 4px; border: 0; background: none; cursor: pointer; }
.sl-cham button::before { content: ""; width: 9px; height: 9px; border-radius: 999px; background: color-mix(in srgb, var(--w-chinh) 28%, transparent); transition: width .3s ease, background .3s; }
.sl-cham button[aria-current]::before { width: 28px; background: var(--w-chinh); }
/* Mở rộng vùng bấm chấm lên ≥ 24px mà không đổi hình. */
.sl-cham button:focus-visible { outline: 2px solid var(--w-focus); outline-offset: 0; border-radius: 6px; }
.sl-dung-nut::before { content: "❚❚"; font-size: .7rem; letter-spacing: -1px; }
.sl-dung-nut[aria-pressed="true"]::before { content: "▶"; font-size: .8rem; letter-spacing: 0; }

/* ---- Ảnh bìa nhiều ảnh: mờ dần / trượt, chữ + nút từng slide, Ken Burns tuỳ chọn ---- */
.k-hero.sl { display: block; }
.k-hero.sl .sl-ray { height: 100%; min-height: inherit; }
.k-hero.sl:not(.sl-mo) .sl-ray { grid-auto-columns: 100%; gap: 0; }
.hero-sl { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: clamp(440px, 72vh, 700px); overflow: hidden; }
.k-hero.canh-giua .hero-sl { align-items: center; }
.hero-sl .k-hero-anh, .hero-sl .k-hero-nen { z-index: -2; }
.hero-sl::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, color-mix(in srgb, var(--w-den) 5%, transparent) 30%, color-mix(in srgb, var(--w-den) 55%, transparent)); }
.k-hero.sl::after { display: none; }
.k-hero-td { font: 600 clamp(2rem, 1.3rem + 3.2vw, 3.6rem)/1.18 var(--w-phong-tieu-de); max-width: 18ch; margin: 0 0 .35em; text-wrap: balance; text-shadow: 0 2px 24px color-mix(in srgb, var(--w-den) 25%, transparent); }
.hero-dk { position: absolute; z-index: 2; left: 0; right: 0; bottom: clamp(16px, 3vw, 28px); pointer-events: none; }
.hero-dk .khung { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.hero-dk .khung > * { pointer-events: auto; }
.hero-dk .sl-cham { margin: 0 auto 0 0; }
.hero-dk .sl-cham button::before { background: color-mix(in srgb, var(--w-chu-tren-anh) 45%, transparent); }
.hero-dk .sl-cham button[aria-current]::before { background: var(--w-chu-tren-anh); }
.hero-dk .sl-nut { background: color-mix(in srgb, var(--w-den) 25%, transparent); border-color: color-mix(in srgb, var(--w-chu-tren-anh) 55%, transparent); color: var(--w-chu-tren-anh); backdrop-filter: blur(6px); }
.hero-dk .sl-nut:hover { background: var(--w-nen-tren-anh); color: var(--w-chinh); }
.k-hero.sl .k-hero-chu { padding-bottom: clamp(88px, 12vw, 128px); }
/* Ô tìm ngay sau ảnh bìa kéo lên đè mép dưới (margin âm) → cụm điều khiển + chữ lùi lên trên phần bị đè. */
.k-hero.sl:has(+ .k-tim) .hero-dk { bottom: calc(clamp(40px, 6vw, 72px) + 14px); }
.k-hero.sl:has(+ .k-tim) .k-hero-chu { padding-bottom: clamp(140px, 16vw, 190px); }
/* Chỉ một khung (số thẻ ≤ số thẻ mỗi khung) → không có gì để trượt, ẩn nút. */
.sl-mot-khung :is([data-sl-lui], [data-sl-tien], [data-sl-dung]) { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .sl-kb .sl-dang .k-hero-anh, .sl-kb:not(.sl-mo) .k-hero-anh { animation: kb var(--sl-ms, 6s) ease-out both; }
  @keyframes kb { from { transform: scale(1); } to { transform: scale(1.08); } }
  .sl-mo .sl-dang .k-hero-chu > * { animation: len-chu .7s ease both; }
  .sl-mo .sl-dang .k-hero-chu > :nth-child(2) { animation-delay: .12s; }
  .sl-mo .sl-dang .k-hero-chu > :nth-child(3) { animation-delay: .24s; }
  @keyframes len-chu { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
}

/* ---- Băng chuyền tour (hợp nhất carousel cũ) ---- */
.k-luoi .sl-ray { padding: 6px 2px 14px; margin: -6px -2px 0; }
.k-luoi .dau-muc .sl-bo-nut { margin-left: auto; }

/* ---- Đánh giá dạng trích dẫn trượt ---- */
.k-danhgia .sl { margin-top: clamp(24px, 3vw, 40px); }
.k-danhgia .sl .dg-ds { margin: 0; }
.sl:not(.sl-mo) > .dg-ds.sl-ray { grid-template-columns: none; }
.k-danhgia .sl-pc-1 figure { max-width: 780px; margin-inline: auto; padding: clamp(28px, 4vw, 48px); text-align: center; }
.k-danhgia .sl-pc-1 blockquote { font-size: clamp(1.08rem, 1rem + .5vw, 1.35rem); }
.k-danhgia .sl-pc-1 figcaption { justify-items: center; }
.dg-dk { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 18px; }
.dg-dk .sl-cham { margin: 0; }

/* ---- Điểm đến / bộ sưu tập: thẻ ảnh lớn trượt ngang ---- */
.k-bst .sl { margin-top: clamp(24px, 3vw, 36px); }
.k-bst .sl .bst-ds { margin: 0; }
.sl:not(.sl-mo) > .bst-ds.sl-ray { grid-template-columns: none; }
.bst-dk { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.bst-dk .sl-cham { margin: 0; justify-content: flex-start; }

/* ---- Logo đối tác chạy chậm liên tục (CSS thuần, dừng khi rê chuột / focus) ---- */
.logo-chay { overflow: hidden; margin-top: 24px; mask-image: linear-gradient(90deg, transparent, var(--w-den) 8%, var(--w-den) 92%, transparent); }
.logo-chay .logo-ds { flex-wrap: nowrap; justify-content: flex-start; width: max-content; margin: 0; gap: 0; }
.logo-chay .logo-ds li { padding-inline: 28px; }
@media (prefers-reduced-motion: no-preference) {
  .logo-chay .logo-ds { animation: chay-ngang 40s linear infinite; }
  .logo-chay:hover .logo-ds, .logo-chay:focus-within .logo-ds { animation-play-state: paused; }
  @keyframes chay-ngang { to { transform: translateX(-50%); } }
}
@media (prefers-reduced-motion: reduce) {
  .logo-chay { mask-image: none; }
  .logo-chay .logo-ds { flex-wrap: wrap; justify-content: center; width: auto; }
  .logo-chay .logo-ds [aria-hidden="true"] { display: none; }
}

/* ---- Thư viện ảnh chi tiết tour: slide chính + dải ảnh nhỏ + phóng to ---- */
.ct-tv { margin-bottom: 8px; }
.ct-tv .sl-ray { grid-auto-columns: 100%; gap: 0; border-radius: calc(var(--w-bo) + 4px); aspect-ratio: 3 / 2; max-height: 540px; background: var(--w-dam); }
.ct-tv .sl-ray > * { position: relative; }
.ct-tv .sl-ray img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.ct-tv-dk { position: absolute; left: 0; right: 0; top: 50%; display: flex; justify-content: space-between; padding-inline: 12px; transform: translateY(-50%); pointer-events: none; }
.ct-tv-dk .sl-nut { pointer-events: auto; background: color-mix(in srgb, var(--w-nen) 85%, transparent); }
.ct-tv-khung { position: relative; }
.ct-tv-phong { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: .4em .9em; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--w-den) 55%, transparent); color: var(--w-chu-tren-anh); font: 600 .82rem/1.2 var(--w-phong-than); cursor: pointer; }
.sl:not(.sl-san) .ct-tv-phong { display: none; }
.ct-tv-thumb { display: flex; gap: 8px; margin: 8px 0 0; padding: 2px; list-style: none; overflow-x: auto; scrollbar-width: none; }
.ct-tv-thumb button { flex: 0 0 auto; width: 92px; aspect-ratio: 3 / 2; padding: 0; border: 2px solid transparent; border-radius: calc(var(--w-bo) / 2 + 2px); overflow: hidden; background: var(--w-dam); opacity: .6; cursor: pointer; transition: opacity .2s, border-color .2s; }
.ct-tv-thumb button:hover { opacity: .9; }
.ct-tv-thumb button[aria-current] { opacity: 1; border-color: var(--w-chinh); }
.ct-tv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sl-hop { width: min(96vw, 1400px); max-width: none; max-height: 94vh; padding: 0; border: 0; border-radius: var(--w-bo); background: var(--w-den); color: var(--w-chu-tren-anh); overflow: hidden; }
.sl-hop::backdrop { background: color-mix(in srgb, var(--w-den) 85%, transparent); }
.sl-hop img { display: block; width: 100%; max-height: 94vh; object-fit: contain; }
.sl-hop-dem { position: absolute; left: 16px; top: 12px; margin: 0; font-size: .85rem; }
.sl-hop-dong { position: absolute; right: 10px; top: 8px; width: 42px; height: 42px; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--w-den) 50%, transparent); color: var(--w-chu-tren-anh); font-size: 1.6rem; cursor: pointer; }
.sl-hop-lui, .sl-hop-tien { position: absolute; top: 50%; transform: translateY(-50%); }
.sl-hop-lui { left: 12px; } .sl-hop-tien { right: 12px; }

}

/* ---- Thẻ tour đổi ảnh khi rê chuột (điện thoại: khi thẻ ở giữa màn) — ảnh mới mờ vào và "lắng" từ 1.08 về 1, vạch tiến trình
   kiểu story trên đầu ảnh; một vệt sáng lướt chéo qua ảnh. site.js chỉ tải ảnh phụ khi bắt đầu đổi. ---- */
.the-anh-them { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity .6s ease, transform 2s cubic-bezier(.2, .7, .2, 1); pointer-events: none; }
.the-anh-them.hien { opacity: 1; transform: scale(1); }
.the-vach { position: absolute; z-index: 2; left: 10px; right: 10px; top: 5px; display: flex; gap: 4px; opacity: 0; transition: opacity .3s; pointer-events: none; }
.dang-doi .the-vach { opacity: 1; }
.the-vach span { flex: 1; height: 3px; border-radius: 3px; overflow: hidden; background: color-mix(in srgb, var(--w-chu-tren-anh) 35%, transparent); }
.the-vach span::after { content: ""; display: block; height: 100%; width: 0; background: var(--w-chu-tren-anh); }
.the-vach .xong::after { width: 100%; }
.the-vach .dang::after { animation: vach var(--doi-ms, 1.6s) linear forwards; }
@keyframes vach { to { width: 100%; } }

/* =====================================================================================================================
   Ảnh giữ chỗ (phiếu 012 §4d-bis): phông SVG nội tuyến tô theo --w-* (khớp mọi bộ màu, không mã màu cứng) + linh vật TourKit đã
   tách nền (tắt được trong Cài đặt). Là trang trí — nghĩa nằm ở chữ HTML của khối.
   ===================================================================================================================== */
.lv { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; background: var(--w-chinh-50); }
.lv-phong { position: absolute; inset: 0; width: 100%; height: 100%; }
.lv-troi { fill: var(--w-chinh-50); }
.lv-phang .lv-troi { fill: var(--w-nen-xen); }
.lv-mat-troi { fill: var(--w-phu); opacity: .8; }
.lv-mo { opacity: .22; }
.lv-nui-xa { fill: color-mix(in srgb, var(--w-chinh) 22%, var(--w-chinh-50)); }
.lv-nui-gan, .lv-song-1 { fill: color-mix(in srgb, var(--w-chinh) 48%, var(--w-chinh-50)); }
.lv-dat, .lv-song-2 { fill: color-mix(in srgb, var(--w-chinh) 78%, var(--w-dam)); }
.lv-duong { fill: none; stroke: var(--w-chinh); stroke-width: 3; stroke-dasharray: 1 10; stroke-linecap: round; opacity: .6; }
/* Linh vật LUÔN ĐỦ HÌNH (owner 2026-10): bộ chọn `.lv > img.lv-anh` thắng mọi luật `<khung> img { width/height 100%; object-fit: cover;
   inset: 0 }` của khung chứa (thẻ đánh giá, ô điểm đến, bộ sưu tập…) — trước đây linh vật bị phóng to và cắt nửa. Căn giữa bằng margin
   (không transform) để hiệu ứng rê chuột `scale()` của khung không kéo lệch hình. Cỡ vừa phải, chừa đệm quanh hình trên phông màu website. */
.lv > img.lv-anh {
  position: absolute; inset: auto 0 8% 0; margin: 0 auto; z-index: 1;
  width: auto; height: 64%; max-width: 80%; max-height: 220px; object-fit: contain; object-position: 50% 100%;
  border-radius: 0; box-shadow: none; padding: 0; transform: none;
  filter: drop-shadow(0 10px 10px color-mix(in srgb, var(--w-dam) 30%, transparent));
}
.lv-the > img.lv-anh { height: 62%; }
.lv-doc > img.lv-anh { height: 42%; bottom: 30%; }
.lv-bia > img.lv-anh { right: 8%; left: auto; margin: 0; height: 58%; max-height: 300px; bottom: 10%; }
.lv-lon > img.lv-anh { height: 70%; max-height: 260px; }
.lv-trong { width: 200px; height: 150px; border-radius: var(--w-bo); flex: none; }
.lv-trong > img.lv-anh { height: 82%; bottom: 6%; }
.lv-video > img.lv-anh, .lv-tron > img.lv-anh { display: none; }
.lv-rong { height: 180px; max-width: 360px; margin: 0 auto 16px; border-radius: var(--w-bo); }
.lv-cam-on { height: 150px; max-width: 280px; border-radius: var(--w-bo); }
.form-cam-on-lv { margin-top: 12px; }
.form-cam-on-lv[hidden] { display: none; }
.lv-loi { height: 220px; max-width: 420px; margin: 0 auto 8px; border-radius: calc(var(--w-bo) + 4px); }
.k-hero.khong-anh .k-hero-nen .lv { background: var(--w-chinh-50); }
@media (max-width: 640px) { .lv-bia > img.lv-anh { inset: auto 0 4% 0; margin: 0 auto; height: 42%; opacity: .95; } }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .lv > img.lv-anh { transition: transform .35s ease; }
  .the-tour:hover .lv-the > img.lv-anh { transform: translateY(-5px); }
}

/* =====================================================================================================================
   v3 (phiếu 012 — làm lại 2 mẫu). Design read:
   · Hành Trình: bán tour nước ngoài cho khách 30-55 mua bằng mắt, ngôn ngữ tạp chí du lịch hiện đại; ảnh tràn lớn + chữ không chân
     hiển thị (Bricolage Grotesque) + lưới bất đối xứng. VARIANCE 7 · MOTION 4 · DENSITY 3. Bo 6 px, nút bo góc, không bóng, tách khối
     bằng khoảng trắng.
   · Rong Ruổi: tour trong nước cho gia đình tìm-rồi-mua trên điện thoại; tươi, thân thiện, tìm kiếm ở giữa, thẻ 4:3, ô vùng miền có ảnh.
     VARIANCE 5 · MOTION 5 · DENSITY 5. Bo 16 px, nút viên thuốc, bóng nhẹ nhuốm màu chữ.
   Chung: một màu nhấn (màu chính), một phông tiêu đề, một thang bo góc (--w-bo), phần nhấn tiêu đề không in hoa, không hiện-khi-cuộn.
   Mọi màu qua --w-* (không mã màu cứng — test GiaoDienCssTests giữ).
   ===================================================================================================================== */

/* ---------- Chữ ---------- */
h1, h2, h3 { font-family: var(--w-phong-tieu-de); letter-spacing: -.02em; }
h1 { line-height: 1.06; }
h2 { line-height: 1.12; }
.m-hanh-trinh h1, .m-hanh-trinh h2 { font-weight: 600; }
.m-hanh-trinh h1 { font-size: clamp(2.4rem, 1.5rem + 3.6vw, 3.5rem); }
.m-hanh-trinh h2 { font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem); }
.m-hanh-trinh h3 { font-size: 1.2rem; }
.m-rong-ruoi h1, .m-rong-ruoi h2, .m-tho-dia h1, .m-tho-dia h2 { font-weight: 800; letter-spacing: -.025em; }
.m-rong-ruoi h1, .m-tho-dia h1 { font-size: clamp(2.1rem, 1.5rem + 2.4vw, 2.5rem); }
.m-rong-ruoi h2, .m-tho-dia h2 { font-size: clamp(1.55rem, 1.25rem + 1.2vw, 2rem); }
.m-rong-ruoi h3, .m-tho-dia h3 { font-size: 1.125rem; font-weight: 700; }
.td-nhan { white-space: normal; }
.m-hanh-trinh .khoang { padding-block: clamp(48px, 6vw, 88px); }
.m-rong-ruoi .khoang, .m-tho-dia .khoang { padding-block: clamp(44px, 5.5vw, 76px); }

/* ---------- Nút: bo theo hình khối (Hành Trình) · viên thuốc (Rong Ruổi) ---------- */
.nut-goc .nut { border-radius: var(--w-bo); }
.nut:active { transform: translateY(1px); }
.m-rong-ruoi .nut, .m-tho-dia .nut { box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--w-chu) 35%, transparent); }

/* ---------- Đầu mục khối: tiêu đề trái, "Xem tất cả" phải cùng hàng ---------- */
.dau-muc { align-items: baseline; }
.dau-muc .xem-het { margin-left: auto; }

/* ---------- Ảnh bìa ---------- */
.k-hero { background: var(--w-dam); }
.k-hero h1, .k-hero h2, .k-hero-td { max-width: 20ch; }
.k-hero-phu { max-width: 44ch; }
.k-hero.kieu-hanh-trinh { min-height: clamp(520px, calc(100dvh - var(--w-dau-cao)), 820px); align-items: stretch; flex-direction: column; justify-content: flex-end; }
.k-hero.kieu-hanh-trinh h1, .k-hero.kieu-hanh-trinh h2 { font-size: clamp(2.5rem, 1.4rem + 4.4vw, 4.25rem); }
.kieu-hanh-trinh .k-hero-chu { padding-block: 48px clamp(40px, 6vw, 72px); }
.k-hero:not(.kieu-hanh-trinh) { min-height: clamp(460px, 68vh, 640px); }
/* Chữ trắng trên ảnh sáng: màn tối phía trái (nơi đặt chữ) + đáy, ảnh bên phải vẫn sáng. */
.k-hero.kieu-hanh-trinh::after { background: linear-gradient(90deg, color-mix(in srgb, var(--w-den) 72%, transparent), color-mix(in srgb, var(--w-den) 30%, transparent) 55%, transparent 80%), linear-gradient(180deg, transparent 35%, color-mix(in srgb, var(--w-den) 60%, transparent)); }
/* Dải hành trình: các chuyến sắp khởi hành (dữ liệu thật) chạy ngang dưới đáy ảnh bìa. */
.dai-ht { position: relative; z-index: 1; padding-block: 18px 22px; background: color-mix(in srgb, var(--w-dam) 72%, transparent); backdrop-filter: blur(10px); border-top: 1px solid color-mix(in srgb, var(--w-chu-tren-anh) 18%, transparent); }
.dai-ht-td { margin: 0 0 10px; font-size: .82rem; font-weight: 600; opacity: .85; }
.dai-ht-ds { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.dai-ht-ds::-webkit-scrollbar { display: none; }
.dai-ht-ds li { scroll-snap-align: start; }
.dai-ht-ds a { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 10px 12px; border-radius: var(--w-bo); color: var(--w-chu-tren-anh); text-decoration: none; background: color-mix(in srgb, var(--w-chu-tren-anh) 8%, transparent); transition: background .2s; }
.dai-ht-ds a:hover { background: color-mix(in srgb, var(--w-chu-tren-anh) 16%, transparent); }
.dai-ht-ngay { grid-row: 1 / 3; font: 600 2rem/1 var(--w-phong-tieu-de); letter-spacing: -.03em; }
.dai-ht-ngay small { font-size: .9rem; opacity: .75; }
.dai-ht-ten { font-weight: 600; font-size: .9rem; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; }
.dai-ht-gia { font-size: .82rem; opacity: .85; }
/* Ô tìm ngay sau ảnh bìa có dải hành trình: không kéo đè lên dải. */
.k-hero.kieu-hanh-trinh + .k-tim { margin-top: 0; padding-top: 28px; }

/* ---------- Ô tìm: thanh gọn một hàng (Hành Trình) ---------- */
.k-tim.kieu-thanh .tim-form { box-shadow: none; border-radius: var(--w-bo); background: var(--w-nen); }
.k-tim.kieu-thanh .tim-tieu { font-size: 1rem; color: var(--w-chu); }
.k-tim.kieu-thanh .tim-tab, .k-tim.kieu-thanh .tim-nhanh { display: none; }
.m-rong-ruoi .k-tim .tim-form, .m-tho-dia .k-tim .tim-form { box-shadow: 0 24px 48px -28px color-mix(in srgb, var(--w-chu) 45%, transparent); }

/* ---------- Điểm đến: bento · vùng miền · băng chuyền ---------- */
.dd-ds { display: grid; gap: clamp(12px, 1.6vw, 18px); margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }   /* auto-fill: ít điểm đến không phình một ô hết bề ngang (phiếu 023) */
.dd-ds a { position: relative; display: block; height: 100%; min-height: 240px; aspect-ratio: 4 / 5; border-radius: var(--w-bo); overflow: hidden; color: var(--w-chu-tren-anh); text-decoration: none; background: var(--w-dam); isolation: isolate; }
.dd-ds img, .dd-ds .lv { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.dd-ds a::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 45%, color-mix(in srgb, var(--w-den) 62%, transparent)); }
.dd-chu { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 2px; padding: 16px 18px; }
.dd-chu b { font: 600 1.35rem/1.15 var(--w-phong-tieu-de); letter-spacing: -.01em; }
.dd-chu span { font-size: .88rem; opacity: .9; }
@media (prefers-reduced-motion: no-preference) {
  .dd-ds img { transition: transform .6s ease; }
  .dd-ds a:hover img { transform: scale(1.04); }
}
/* Bento 1 lớn + 4 nhỏ (đúng 5 ô); số ô khác thì lưới đều. */
.kieu-bento.so-5 .dd-ds { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(2, minmax(220px, 1fr)); }
.kieu-bento.so-5 .dd-ds a { aspect-ratio: auto; }
.kieu-bento.so-5 .dd-ds li:first-child { grid-row: span 2; }
.kieu-bento.so-5 .dd-ds li:first-child .dd-chu b { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); }
/* Vùng miền: 4 ô, số tour lớn. */
.kieu-vung-mien .dd-ds { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kieu-vung-mien .dd-chu span { font: 800 1.1rem/1.1 var(--w-phong-tieu-de); opacity: 1; }
/* Băng chuyền ảnh dọc. */
.kieu-bang-chuyen .dd-ds { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(220px, 23%); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.kieu-bang-chuyen .dd-ds li { scroll-snap-align: start; }
@media (max-width: 767px) {
  .kieu-bento.so-5 .dd-ds { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .kieu-bento.so-5 .dd-ds a { aspect-ratio: 4 / 5; min-height: 0; }
  .kieu-bento.so-5 .dd-ds li:first-child { grid-row: auto; grid-column: 1 / -1; }
  .kieu-bento.so-5 .dd-ds li:first-child a { aspect-ratio: 16 / 10; }
  .kieu-vung-mien .dd-ds { grid-template-columns: 1fr 1fr; }
  .dd-ds a { min-height: 0; }
  .kieu-bang-chuyen .dd-ds { grid-auto-columns: 62%; }
}

/* ---------- Thẻ tour: cả thẻ là một liên kết, một dòng thông tin, giá cùng hàng ---------- */
.the-tour { display: block; }
.the-lk { display: flex; flex-direction: column; height: 100%; color: var(--w-chu); text-decoration: none; border-radius: var(--w-bo); }
.the-lk:focus-visible { outline: 3px solid var(--w-focus); outline-offset: 4px; }
.the-anh { position: relative; aspect-ratio: var(--w-ti-le); border-radius: var(--w-bo); overflow: hidden; background: var(--w-chinh-50); }
.the-anh img { width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: no-preference) {
  .the-anh img { transition: transform .5s ease; }
  .the-lk:hover .the-anh > img { transform: scale(1.03); }
}
.the-than { display: flex; flex-direction: column; flex: 1; gap: 4px; padding: 14px 2px 0; border: 0; }
.the-vung { font-size: .8rem; font-weight: 600; color: var(--w-mo); }
.the-ten { margin: 0; font-size: 1.1rem; line-height: 1.3; min-height: 2.6em; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.the-lk:hover .the-ten { color: var(--w-chinh); }
.the-meta { font-size: .875rem; color: var(--w-mo); }
.the-gia { margin-top: auto; padding-top: 10px; display: flex; align-items: baseline; gap: .35em; border: 0; }
.the-gia small { color: var(--w-mo); font-size: .85rem; }
.the-gia b { font-size: 1.15rem; color: var(--w-chinh); }
.m-rong-ruoi .the-gia b, .m-tho-dia .the-gia b { color: var(--w-gia-nhan); }
.m-rong-ruoi .the-lk, .m-tho-dia .the-lk { background: var(--w-nen); box-shadow: 0 10px 30px -22px color-mix(in srgb, var(--w-chu) 50%, transparent); }
.m-rong-ruoi .the-than, .m-tho-dia .the-than { padding: 14px 16px 16px; }
.m-rong-ruoi .the-anh, .m-tho-dia .the-anh { border-radius: var(--w-bo) var(--w-bo) 0 0; }
/* Dạng hàng (trang kết quả /tour). */
.the-hang .the-lk { flex-direction: row; gap: 18px; align-items: stretch; }
.the-hang .the-anh { flex: 0 0 min(38%, 280px); aspect-ratio: 4 / 3; }
.the-hang .the-than { padding: 4px 0; }
.m-rong-ruoi .the-hang .the-anh, .m-tho-dia .the-hang .the-anh { border-radius: var(--w-bo) 0 0 var(--w-bo); }
@media (max-width: 640px) {
  .the-hang .the-lk { flex-direction: column; gap: 0; }
  .the-hang .the-anh { flex: none; width: 100%; }
  .m-rong-ruoi .the-hang .the-anh, .m-tho-dia .the-hang .the-anh { border-radius: var(--w-bo) var(--w-bo) 0 0; }
}
/* Băng chuyền ảnh ngang lớn: 2 thẻ mỗi khung, ảnh 16:9. */
.kieu-bang-chuyen-rong .the-anh { aspect-ratio: 16 / 9; }
.kieu-bang-chuyen-rong .the-ten { font-size: 1.3rem; }

/* ---------- Vì sao chọn: ảnh lớn + danh sách ---------- */
.lydo-bo { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.lydo-anh { aspect-ratio: 3 / 2; border-radius: var(--w-bo); overflow: hidden; background: var(--w-chinh-50); }
.lydo-anh img { width: 100%; height: 100%; object-fit: cover; }
.kieu-anh-lon .lydo-ds { grid-template-columns: 1fr; gap: 22px; margin-top: 28px; }
.kieu-anh-lon .lydo-ds li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; align-items: start; padding: 0; border: 0; }
.kieu-anh-lon .lydo-ds h3 { margin: 4px 0 4px; font-size: 1.1rem; }
.kieu-anh-lon .lydo-bt { width: 40px; height: 40px; color: var(--w-chinh); }
@media (max-width: 900px) { .lydo-bo { grid-template-columns: 1fr; } .lydo-anh { aspect-ratio: 16 / 10; } }

/* ---------- Đánh giá: trích dẫn tối đa 3 dòng, kèm ảnh chuyến đi ---------- */
.k-danhgia blockquote { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; }
.dg-lon { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 72px); align-items: center; margin: clamp(24px, 3vw, 40px) 0 0; }
.dg-lon-anh { aspect-ratio: 3 / 2; border-radius: var(--w-bo); overflow: hidden; background: var(--w-chinh-50); }
.dg-lon-anh img { width: 100%; height: 100%; object-fit: cover; }
.dg-lon blockquote { margin: 0 0 18px; font: 600 clamp(1.35rem, 1.1rem + 1vw, 1.9rem)/1.3 var(--w-phong-tieu-de); letter-spacing: -.015em; }
.dg-lon figcaption, .dg-nho figcaption { display: grid; font-size: .9rem; }
.dg-lon figcaption span, .dg-nho figcaption span { color: var(--w-mo); }
.dg-nho { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); margin: clamp(28px, 4vw, 48px) 0 0; padding: 0; list-style: none; }
.dg-nho figure { margin: 0; }
.dg-nho blockquote { margin: 0 0 10px; color: var(--w-chu-noi-dung); }
.dg-anh { aspect-ratio: 3 / 2; margin: -24px -24px 16px; overflow: hidden; background: var(--w-chinh-50); }
.dg-anh img { width: 100%; height: 100%; object-fit: cover; }
.kieu-luoi .dg-ds figure { overflow: hidden; }
/* Đánh giá không ảnh (owner 2026-10): thẻ chữ + avatar chữ cái — không vùng ảnh, không linh vật. */
.dg-chu figcaption { grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; }
.dg-chu figcaption > :not(.dg-avatar) { grid-column: 2; }
.dg-avatar {
  grid-row: 1 / span 3; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--w-chinh-50); color: var(--w-chinh-dam); font: 700 1.1rem/1 var(--w-phong-tieu-de);
  box-shadow: inset 0 0 0 1px var(--w-chinh-100);
}
.dg-lon.dg-chu { grid-template-columns: minmax(0, 1fr); max-width: 820px; }
@media (max-width: 820px) { .dg-lon, .dg-nho { grid-template-columns: 1fr; } }

/* ---------- Form tư vấn chia đôi: ảnh + 3 cam kết ---------- */
.kieu-chia-doi .form-bo { align-items: stretch; }
.form-anh { aspect-ratio: 16 / 9; border-radius: var(--w-bo); overflow: hidden; margin-bottom: 24px; background: var(--w-chinh-50); }
.form-anh img { width: 100%; height: 100%; object-fit: cover; }
.cam-ket { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.cam-ket li { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.cam-ket .bt { color: var(--w-chinh); }

/* ---------- Nút liên hệ nổi: không che ô đang nhập (điện thoại) ---------- */
body:has(:is(input, select, textarea):focus) .nut-noi { visibility: hidden; }
/* Danh sách chọn đang mở → ẩn nút nổi + bong bóng linh vật chào khách để không đè lên danh sách. */
body:has(.picker.is-open) :is(.nut-noi, .tl-chao) { visibility: hidden; }
/* Nút nổi chỉ hiện khi đã cuộn qua màn đầu (đầu trang có sẵn nút gọi; không đè dải chuyến / ô tìm). */
body:not(.qua-man-dau) .nut-noi { visibility: hidden; }
@media (max-width: 640px) { .nut-noi { bottom: calc(16px + env(safe-area-inset-bottom)); } }

/* Hộp đặt (phiếu 012 §4f): tiêu đề gọn, nhãn "Tháng khởi hành" chỉ cho trình đọc màn hình (đã có nhãn "Ngày khởi hành"). */
.k-ct h2.dat-tieu { font-size: 1.25rem; }
.o-lich .lcn-nhan { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Ghi công ảnh (owner 2026-10: ảnh CC BY có ghi công). */
.ct-nguon-anh { margin: 8px 0 0; font-size: .78rem; color: var(--w-mo); }
.ct-nguon-anh a { color: inherit; }
.nguon-anh h1 { margin: 0 0 8px; }
.na-ds { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.na-ds li { display: flex; gap: 12px; align-items: center; }
.na-ds img { width: 96px; height: 64px; object-fit: cover; border-radius: var(--w-bo-o); flex: none; }
.na-ds span { display: grid; min-width: 0; }
.na-ds small { color: var(--w-mo); overflow-wrap: anywhere; }
.na-ds a { color: inherit; }
/* Dải Sắp khởi hành = slide (owner 2026-10-04): tiêu đề + nút ‹ ›, vệt mờ mép phải khi còn mục, kéo chuột. */
.dai-ht-dau { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.dai-ht-dau .dai-ht-td { margin: 0; }
.dai-ht-nut { display: flex; gap: 8px; }
.dai-ht-nut button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--w-chu-tren-anh) 35%, transparent); background: color-mix(in srgb, var(--w-chu-tren-anh) 10%, transparent); color: var(--w-chu-tren-anh); font-size: 1.3rem; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: background .2s, opacity .2s; }
.dai-ht-nut button:hover:not(:disabled) { background: color-mix(in srgb, var(--w-chu-tren-anh) 22%, transparent); }
.dai-ht-nut button:disabled { opacity: .35; cursor: default; }
.dai-ht-ds { cursor: grab; -webkit-mask-image: none; mask-image: none; }
.dai-ht-ds.has-more { -webkit-mask-image: linear-gradient(90deg, var(--w-den) 85%, transparent); mask-image: linear-gradient(90deg, var(--w-den) 85%, transparent); }
.dai-ht-ds.is-dragging { cursor: grabbing; user-select: none; }
.dai-ht-ds.is-dragging a { pointer-events: none; }

/* Lịch chọn ngày flatpickr (site.js nạp khi có input[data-ngay]) — màu theo token công ty, bo góc theo mẫu. */
.flatpickr-calendar { font-family: var(--w-phong-than); background: var(--w-nen); border: 1px solid var(--w-vien); border-radius: 14px; box-shadow: var(--w-bong-menu); }
.flatpickr-calendar.arrowTop::before, .flatpickr-calendar.arrowTop::after { border-bottom-color: var(--w-nen); }
.flatpickr-months .flatpickr-month, .flatpickr-current-month .flatpickr-monthDropdown-months, span.flatpickr-weekday { color: var(--w-chu); fill: var(--w-chu); background: transparent; }
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--w-chinh); }
.flatpickr-day { color: var(--w-chu); border-radius: 10px; }
.flatpickr-day:hover, .flatpickr-day:focus { background: var(--w-chinh-50); border-color: var(--w-chinh-50); }
.flatpickr-day.today { border-color: var(--w-chinh); }
.flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.selected:focus { background: var(--w-chinh); border-color: var(--w-chinh); color: var(--w-chu-tren-chinh); }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: var(--w-lich-mo); background: transparent; border-color: transparent; }
.o-don input.flatpickr-input[readonly] { cursor: pointer; background-color: var(--w-nen); }
/* Tên tháng tiếng Việt dài ("Tháng mười hai") đẩy ô năm ra ngoài khung → nới khung đầu lịch, chữ nhỏ lại. */
.flatpickr-current-month { left: 9%; width: 82%; display: flex; align-items: center; justify-content: center; gap: 2px; font-size: 1rem; padding-top: 6px; }
.flatpickr-current-month .flatpickr-monthDropdown-months { font-weight: 600; padding: 0 2px; }
.flatpickr-current-month .numInputWrapper { width: 4.2ch; }
.flatpickr-current-month input.cur-year { font-weight: 600; padding: 0; }

/* ======================================================================================================================
   Mẫu "Thổ Địa" (phiếu 023 — phong cách thodiaphuyen.vn): nền kem, chữ Lexend đậm, dòng nhấn viết tay (Pacifico), ảnh bìa SÁNG
   (chữ tối trên màn kem phía trái), sóng ngăn khối, thẻ bo tròn có bóng, nút viên thuốc xanh rêu (token KieuNut "dac").
   Thẻ / nút / lý do dùng chung kiểu Rong Ruổi (các rule .m-rong-ruoi đã kèm .m-tho-dia).
   ====================================================================================================================== */
.m-tho-dia { font-family: var(--w-phong-than); }
.m-tho-dia h1, .m-tho-dia h2 { font-weight: 900; letter-spacing: -.02em; }
.m-tho-dia h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.05rem); }
.m-tho-dia h3 { font-weight: 700; }
.m-tho-dia .td { text-align: center; }
.m-tho-dia .dau-muc .td { text-align: left; }
.m-tho-dia .khoang { padding-block: clamp(44px, 5.5vw, 72px); }

/* Ảnh bìa sáng: màn kem bên trái giữ chữ tối đọc được trên ảnh biển / phố. */
.m-tho-dia .k-hero { color: var(--w-chu); background: var(--w-nen); min-height: clamp(520px, 78vh, 700px); align-items: center; }
.m-tho-dia .k-hero.co-anh::after,
.m-tho-dia .k-hero.canh-giua::after { opacity: 1; background: linear-gradient(90deg, var(--w-nen) 0%, color-mix(in srgb, var(--w-nen) 88%, transparent) 30%, color-mix(in srgb, var(--w-nen) 35%, transparent) 58%, transparent 78%); }
.m-tho-dia .k-hero h1, .m-tho-dia .k-hero h2, .m-tho-dia .k-hero-td {
  font-family: 'Pacifico', 'Mali', cursive, sans-serif; font-weight: 400; letter-spacing: 0; line-height: 1.25; max-width: 16ch;
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.4rem); color: var(--w-chinh); text-shadow: 0 2px 0 color-mix(in srgb, var(--w-nen) 70%, transparent);
}
.m-tho-dia .k-hero-phu { color: var(--w-chu); opacity: 1; font-weight: 500; }
.m-tho-dia .k-hero::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(36px, 6vw, 88px); z-index: 0; pointer-events: none;
  background: var(--w-nen); -webkit-mask: url(/img/mau/tho-dia/song.svg) center bottom / 100% 100% no-repeat; mask: url(/img/mau/tho-dia/song.svg) center bottom / 100% 100% no-repeat;
}
.m-tho-dia .k-hero-chu { position: relative; z-index: 1; }
@media (max-width: 767px) {
  .m-tho-dia .k-hero.co-anh::after { background: linear-gradient(180deg, color-mix(in srgb, var(--w-nen) 92%, transparent) 0%, color-mix(in srgb, var(--w-nen) 70%, transparent) 55%, color-mix(in srgb, var(--w-nen) 20%, transparent)); }
  .m-tho-dia .k-hero h1, .m-tho-dia .k-hero h2 { max-width: none; }
}

/* Nút: viên thuốc xanh rêu chữ đậm, có bóng màu. */
.m-tho-dia .nut { font-weight: 700; box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--w-phu) 70%, transparent); }

/* Thẻ: bo 16 px, bóng mềm, nổi nhẹ khi rê chuột (giống thẻ địa điểm của bản gốc). */
.m-tho-dia .the-lk { border: 1px solid color-mix(in srgb, var(--w-chu) 6%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .m-tho-dia .the-lk { transition: transform .25s ease, box-shadow .25s ease; }
  .m-tho-dia .the-lk:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -22px color-mix(in srgb, var(--w-chu) 55%, transparent); }
}
.m-tho-dia .dd-ds a { border-radius: 20px; box-shadow: 0 12px 30px -20px color-mix(in srgb, var(--w-chu) 60%, transparent); }
.m-tho-dia .dd-chu b { font-weight: 800; }


/* ---------- Khối dùng chung phiếu 023: Danh mục khám phá · Số liệu ấn tượng · Ảnh bìa thẻ nghiêng · Lưới xếp hạng ---------- */
/* Danh mục: biểu tượng tròn cuộn ngang (kéo / vuốt — site.js data-scroller), canh giữa khi đủ chỗ. */
.k-danhmuc .td { text-align: center; }
.dm-ds { display: flex; gap: clamp(14px, 2.4vw, 32px); margin: 24px 0 0; padding: 4px 4px 12px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; justify-content: safe center; }
.dm-ds::-webkit-scrollbar { display: none; }
.dm-ds li { flex: 0 0 auto; scroll-snap-align: start; }
.dm-ds a { display: grid; justify-items: center; gap: 6px; width: 112px; color: var(--w-chu); text-decoration: none; text-align: center; }
.dm-anh { display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; background: var(--w-chinh-50); overflow: hidden; box-shadow: 0 8px 20px -14px color-mix(in srgb, var(--w-chu) 60%, transparent); }
.dm-anh img { width: 78%; height: 78%; object-fit: contain; }
.dm-chu { font: 800 2rem/1 var(--w-phong-tieu-de); color: var(--w-chinh); }
.dm-ds b { font-size: .95rem; line-height: 1.25; }
.dm-ds small { font-size: .8rem; color: var(--w-mo); line-height: 1.3; }
.dm-ds a:hover b { color: var(--w-chinh); }
@media (prefers-reduced-motion: no-preference) {
  .dm-anh { transition: transform .25s ease; }
  .dm-ds a:hover .dm-anh { transform: translateY(-4px) rotate(-3deg); }
}
.k-danhmuc.kieu-the .dm-ds { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); overflow: visible; }
.k-danhmuc.kieu-the .dm-ds a { width: auto; padding: 18px 12px; border-radius: var(--w-bo); background: var(--w-nen); border: 1px solid var(--w-vien); }
.k-danhmuc.kieu-the .dm-anh { border-radius: var(--w-bo); }

/* Số liệu: ảnh nền phủ màu đậm, số lớn. */
.k-solieu { position: relative; isolation: isolate; overflow: hidden; color: var(--w-chu-tren-anh); background: var(--w-dam); }
.k-solieu .sl-nen { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.k-solieu::after { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--w-dam) 78%, transparent); }
.k-solieu .td, .k-solieu .so-mo { text-align: center; color: inherit; }
.k-solieu .td-nhan { color: var(--w-chu-tren-anh); text-decoration: underline; text-decoration-color: var(--w-phu); text-underline-offset: .18em; }
.so-mo { max-width: 56ch; margin: 8px auto 0; opacity: .9; }
.so-ds { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; margin: 32px 0 0; padding: 0; list-style: none; }
.so-ds li { display: grid; gap: 4px; justify-items: center; text-align: center; padding: 22px 12px; border-radius: var(--w-bo); background: color-mix(in srgb, var(--w-chu-tren-anh) 9%, transparent); border: 1px solid color-mix(in srgb, var(--w-chu-tren-anh) 18%, transparent); }
.so-ds b { font: 900 clamp(2.2rem, 1.6rem + 2vw, 3.2rem)/1 var(--w-phong-tieu-de); letter-spacing: -.03em; }
.so-ds span { font-size: .92rem; opacity: .9; }

/* Ảnh bìa kiểu thẻ nghiêng: 3 ảnh bo khung trắng nghiêng chồng nhau bên phải (màn ≥ 900 px), dưới chữ ở màn hẹp. */
.k-hero.kieu-the-nghieng { display: grid; grid-template-columns: minmax(0, 1fr); }
.hero-the { position: relative; display: none; }
@media (min-width: 900px) {
  .k-hero.kieu-the-nghieng .k-hero-chu { grid-area: 1 / 1; }
  .hero-the { display: block; grid-area: 1 / 1; justify-self: end; align-self: center; width: min(42vw, 520px); height: min(34vw, 430px); margin-right: max(16px, calc((100vw - var(--w-khung, 1200px)) / 2)); }
}
.hero-the figure { position: absolute; margin: 0; padding: 10px 10px 34px; background: var(--w-chu-tren-anh); border-radius: 14px; box-shadow: 0 22px 44px -22px color-mix(in srgb, var(--w-den) 55%, transparent); }
.hero-the img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.hero-the figcaption { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font: 400 1rem/1 'Pacifico', 'Mali', cursive; color: var(--w-chinh); }
.hero-the-1 { width: 44%; left: 0; top: 18%; transform: rotate(-7deg); z-index: 1; }
.hero-the-2 { width: 46%; left: 34%; top: 0; transform: rotate(5deg); z-index: 2; }
.hero-the-3 { width: 44%; left: 46%; top: 46%; transform: rotate(-3deg); z-index: 3; }
@media (prefers-reduced-motion: no-preference) {
  .hero-the figure { transition: transform .35s ease; }
  .hero-the figure:hover { transform: rotate(0) scale(1.04); z-index: 4; }
}

/* Lưới xếp hạng TOP: huy hiệu số thứ tự góc trên trái ảnh thẻ. */
.kieu-xep-hang .luoi { counter-reset: hang; }
.kieu-xep-hang .luoi > * { counter-increment: hang; position: relative; }
.kieu-xep-hang .luoi > *::before {
  content: counter(hang); position: absolute; top: 10px; left: 10px; z-index: 2; display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 50%; font: 900 1.05rem/1 var(--w-phong-tieu-de); color: var(--w-chu-tren-chinh); background: var(--w-chinh);
  box-shadow: 0 0 0 3px var(--w-nen), 0 8px 16px -8px color-mix(in srgb, var(--w-den) 50%, transparent);
}
.kieu-xep-hang .luoi > :nth-child(-n+3)::before { background: var(--w-phu); color: var(--w-chu-tren-phu); }

/* ---------- Bài viết trên website (phiếu 023): thẻ bài có ảnh, trang Cẩm nang, trang chi tiết ---------- */
.bv-ds h3 a { color: inherit; text-decoration: none; }
.bv-ds h3 a:hover { color: var(--w-chinh); }
.bv-luoi { list-style: none; margin: clamp(20px, 3vw, 36px) 0 0; padding: 0; display: grid; gap: clamp(16px, 2vw, 24px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.bv-the { display: flex; flex-direction: column; height: 100%; color: var(--w-chu); text-decoration: none; border-radius: var(--w-bo); overflow: hidden; background: var(--w-nen); border: 1px solid var(--w-vien); box-shadow: 0 10px 28px -22px color-mix(in srgb, var(--w-chu) 55%, transparent); }
.bv-the:focus-visible { outline: 3px solid var(--w-focus); outline-offset: 3px; }
.bv-the-anh { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--w-chinh-50); }
.bv-the-anh img { width: 100%; height: 100%; object-fit: cover; }
.bv-the-than { display: grid; gap: 6px; padding: 14px 16px 18px; }
.bv-the time { font-size: .8rem; color: var(--w-mo); }
.bv-the b { font: 700 1.08rem/1.35 var(--w-phong-tieu-de); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.bv-the-trich { font-size: .9rem; color: var(--w-mo); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; }
.bv-the:hover b { color: var(--w-chinh); }
@media (prefers-reduced-motion: no-preference) {
  .bv-the { transition: transform .25s ease, box-shadow .25s ease; }
  .bv-the-anh img { transition: transform .5s ease; }
  .bv-the:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -24px color-mix(in srgb, var(--w-chu) 60%, transparent); }
  .bv-the:hover .bv-the-anh img { transform: scale(1.04); }
}

.duong-dan { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 14px; font-size: .88rem; color: var(--w-mo); }
.duong-dan a { color: inherit; }
.duong-dan a:hover { color: var(--w-chinh); }
.bv-trang .bv-gioi-thieu { color: var(--w-mo); max-width: 60ch; }
.bv-loc { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.bv-loc a { display: inline-flex; gap: 6px; align-items: baseline; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--w-vien); color: var(--w-chu); text-decoration: none; font-size: .92rem; background: var(--w-nen); }
.bv-loc a small { color: var(--w-mo); }
.bv-loc a[aria-current="page"] { background: var(--w-chinh); border-color: var(--w-chinh); color: var(--w-chu-tren-chinh); }
.bv-loc a[aria-current="page"] small { color: inherit; opacity: .85; }
.bv-trong { margin-top: 28px; color: var(--w-mo); }
.phan-trang a[aria-current="page"] { background: var(--w-chinh); color: var(--w-chu-tren-chinh); border-color: var(--w-chinh); }

.bv-sapo { font-size: 1.15rem; color: var(--w-mo); margin-bottom: .6em; }
.bv-meta { font-size: .9rem; color: var(--w-mo); display: flex; gap: 6px; flex-wrap: wrap; }
.bv-bia { margin-top: 24px; scroll-margin-top: 100px; }
.bv-bia img { width: 100%; max-height: 620px; object-fit: cover; border-radius: var(--w-bo); }
.bv-noi-dung { padding-block: clamp(28px, 4vw, 48px) clamp(40px, 6vw, 72px); font-size: 1.08rem; line-height: 1.75; }
.bv-noi-dung h2 { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.75rem); margin: 1.6em 0 .5em; }
.bv-noi-dung h3 { font-size: 1.25rem; margin: 1.3em 0 .4em; }
.bv-noi-dung img { max-width: 100%; height: auto; border-radius: var(--w-bo); margin: 1em 0; }
.bv-noi-dung figure { margin: 1.4em 0; }
.bv-noi-dung figcaption { font-size: .88rem; color: var(--w-mo); text-align: center; margin-top: -.4em; }
.bv-noi-dung ul, .bv-noi-dung ol { padding-left: 1.3em; }
.bv-noi-dung li { margin-bottom: .35em; }
.bv-noi-dung blockquote { margin: 1.4em 0; padding: 14px 18px; border-left: 4px solid var(--w-chinh); background: var(--w-chinh-50); border-radius: 0 var(--w-bo) var(--w-bo) 0; }
.bv-noi-dung a { color: var(--w-chinh); }
.m-tho-dia .bv-chinh h1 { font-weight: 900; }

/* Chi tiết bài — bố cục tạp chí 2 cột (owner 2026-10-06: "chưa cân đối"): cột bài và cột phụ dính khi cuộn, cùng mép với khung. */
.bv-bo { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(32px, 4vw, 56px); align-items: start; }
.bv-chinh { min-width: 0; }
.bv-chinh h1 { max-width: none; font-size: clamp(1.9rem, 1.35rem + 2vw, 2.7rem); line-height: 1.15; margin: 0 0 .4em; text-wrap: balance; }
.bv-chuyen-muc { display: inline-block; margin: 0 0 10px; padding: 4px 12px; border-radius: 999px; font-size: .8rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--w-chinh); background: var(--w-chinh-50); }
.bv-chinh .bv-meta { gap: 8px; }
.bv-chinh .bv-noi-dung { padding-block: clamp(24px, 3vw, 36px) 0; }
.bv-noi-dung h2 { scroll-margin-top: calc(var(--w-dau-cao, 72px) + 16px); }
.bv-ben { position: sticky; top: calc(var(--w-dau-cao, 72px) + 20px); display: grid; gap: 18px; }
.bv-hop { padding: 18px 18px 20px; border-radius: var(--w-bo); background: var(--w-nen); border: 1px solid var(--w-vien); box-shadow: 0 10px 28px -24px color-mix(in srgb, var(--w-chu) 55%, transparent); }
.bv-hop-td { margin: 0 0 10px; font: 800 .95rem/1.3 var(--w-phong-tieu-de); }
.bv-muc-luc ol { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; font-size: .92rem; }
.bv-muc-luc a { color: var(--w-chu); text-decoration: none; }
.bv-muc-luc a:hover { color: var(--w-chinh); text-decoration: underline; }
.bv-tour-gon { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.bv-tour-gon a { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 10px; align-items: center; color: var(--w-chu); text-decoration: none; }
.bv-tour-anh { display: block; width: 88px; aspect-ratio: 4 / 3; border-radius: calc(var(--w-bo) * .6); overflow: hidden; background: var(--w-chinh-50); }
.bv-tour-anh img { width: 100%; height: 100%; object-fit: cover; }
.bv-tour-chu { display: grid; gap: 2px; }
.bv-tour-chu b { font-size: .9rem; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.bv-tour-chu small { font-size: .82rem; color: var(--w-chinh); font-weight: 700; }
.bv-tour-gon a:hover b { color: var(--w-chinh); }
.bv-tu-van p:not(.bv-hop-td) { font-size: .9rem; color: var(--w-mo); margin-bottom: 12px; }
.bv-tu-van .nut { width: 100%; justify-content: center; }
@media (max-width: 1023px) {
  .bv-bo { grid-template-columns: minmax(0, 1fr); }
  .bv-ben { position: static; }
}

/* ---------- Trang chi tiết tour cân lại (owner 2026-10-06: "#dat-tour chưa hợp lý cả 3 giao diện", "dùng taste cân đối lại") ----------
   Dải thông số dưới tiêu đề · hộp đặt gọn (giá → ngày → số khách theo hàng → tạm tính → nút) · bộ chọn tháng là tab nhẹ, ngày là thẻ
   trắng viền mảnh (bỏ khối màu dày) · điều khoản luôn hiện trong ô nền nhạt. Màu chỉ từ token --w-* nên đúng cả 3 mẫu. */
.ct-facts { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 14px 0 0; padding: 0; list-style: none; }
.ct-facts li { display: grid; gap: 2px; padding-left: 14px; border-left: 2px solid var(--w-chinh-100); }
.ct-facts span { font-size: .78rem; color: var(--w-mo); }
.ct-facts b { font-size: .98rem; font-weight: 700; color: var(--w-chu); }

.dat-hop { padding: 22px 22px 20px; }
.dat-hop .dat-gia { margin-bottom: 4px; }
.dat-hop .dat-gia b { font-size: 1.75rem; letter-spacing: -.02em; }
.dat-tt-gon { margin: 0 0 14px; padding: 10px 0; }
.dat-hop .dat-tieu { font-size: 1.05rem; margin: 0 0 10px; }
.dat-hop .buoc legend { font-size: .95rem; margin-bottom: 10px; }
.dat-hop .dat-bang { margin: 6px 0 12px; }

/* Số khách: mỗi loại một hàng, nhãn trái, ô số hẹp phải (thay lưới 2×2 chật). */
.dat-hop .o-khach { grid-template-columns: 1fr; gap: 0; margin: 4px 0 12px; border-block: 1px solid var(--w-vien); }
.dat-hop .o-khach .o-don { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 8px 0; }
.dat-hop .o-khach .o-don + .o-don { border-top: 1px dashed var(--w-vien); }
.dat-hop .o-khach label { margin: 0; font-size: .92rem; font-weight: 600; }
.dat-hop .o-khach input { width: 86px; min-height: 40px; padding: 6px 8px; text-align: center; font-weight: 700; }
.dat-hop .dat-tam { margin-bottom: 12px; }

/* Bộ chọn tháng / ngày (hộp đặt + trang /tour): tab tháng nhẹ, thẻ ngày trắng viền mảnh, chọn = viền màu chính + nền nhạt. */
.lcn-thang { gap: 6px; padding-bottom: 4px; }
.lcn-thang a { min-width: 0; min-height: 0; padding: 7px 12px; border-color: transparent; background: var(--w-nen-xen); border-radius: 999px; display: inline-flex; gap: 6px; align-items: baseline; }
.lcn-thang a b { font-size: .88rem; }
.lcn-thang a small { font-size: .74rem; }
.lcn-thang a[aria-current] { background: var(--w-chinh-50); border-color: var(--w-chinh); color: var(--w-chinh); }
.lcn-thang a[aria-current] small { color: var(--w-chinh); }
/* Owner 2026-10-06 ("ẩn cả tag bên trong", "nội dung text nhiều quá"): ô ngày GỌN — thứ · ngày · giá. Bỏ "/10" khi đã có tab tháng,
   "còn N chỗ" thành chấm nhỏ góc thẻ (số chỗ vẫn ở aria-label + bảng giá bên dưới), chừa lề trên cho nhãn "Rẻ nhất" khỏi bị khung cuộn cắt. */
.lcn-ngay { gap: 6px; padding: 12px 2px 4px; }
.lcn-o { width: 52px; min-height: 0; padding: 8px 2px; background: var(--w-nen); border: 1px solid var(--w-vien); gap: 1px; }
.lcn-thu { font-size: .72rem; }
.lcn-so { font-size: 1.2rem; line-height: 1.1; }
.lcn:has(.lcn-thang) .lcn-so small { display: none; }
.lcn-gia { font-size: .78rem; }
.lcn-phu.lcn-it { position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; padding: 0; border-radius: 50%; font-size: 0; background: var(--w-cho); }
.lcn-o.re { border: 1px solid var(--w-vien); }
.lcn-o.re .lcn-phu { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); padding: 1px 7px; border-radius: 999px; font-size: .66rem; white-space: nowrap; color: var(--w-chu-tren-phu); background: var(--w-phu); }
.lcn-o.chon, .lcn-o[aria-current="true"] { border: 2px solid var(--w-chinh); background: var(--w-chinh-50); }
.lcn-o:hover { border-color: var(--w-chinh); }

/* Điều khoản: luôn hiện, ô nền nhạt, tiêu đề mục nhỏ trong ô. */
.dieu-khoan.noi-dung { max-width: none; padding: 18px 22px; border-radius: var(--w-bo); background: var(--w-nen-xen); border: 1px solid var(--w-vien); }
.dieu-khoan :is(h3, h4, strong:only-child) { font-size: 1rem; }
.dieu-khoan ul { padding-left: 1.2em; margin: .4em 0 1em; }
.dieu-khoan > :last-child { margin-bottom: 0; }

/* Owner 2026-10-06 ("màu nâu đi với text đen"): Thổ Địa có ảnh bìa SÁNG, chữ ảnh bìa màu tối → dải "Sắp khởi hành" cũng phải sáng
   (nền kem mờ, thẻ trắng, ngày màu chính), không dùng nền màu chính đậm của các mẫu ảnh bìa tối. */
.m-tho-dia .dai-ht { color: var(--w-chu); background: color-mix(in srgb, var(--w-nen) 86%, transparent); border: 1px solid var(--w-vien); }
/* Owner 2026-10-06 ("nên bo góc 1 tý thì hài hoà hơn"): dải là hộp nổi trên ảnh bìa → bo như các thẻ của mẫu. */
.m-tho-dia .dai-ht { border-radius: 20px; overflow: hidden; box-shadow: 0 18px 40px -28px color-mix(in srgb, var(--w-chu) 60%, transparent); }
.m-tho-dia .dai-ht-td { opacity: 1; color: var(--w-mo); }
.m-tho-dia .dai-ht-ds a { color: var(--w-chu); background: var(--w-nen); border: 1px solid var(--w-vien); }
.m-tho-dia .dai-ht-ds a:hover { background: var(--w-chinh-50); }
.m-tho-dia .dai-ht-ngay { color: var(--w-chinh); }
.m-tho-dia .dai-ht-gia { opacity: 1; color: var(--w-gia-nhan); font-weight: 600; }
.m-tho-dia .dai-ht-nut button { color: var(--w-chu); border-color: var(--w-vien); background: var(--w-nen); }
.m-tho-dia .dai-ht-nut button:hover:not(:disabled) { background: var(--w-chinh-50); }

/* ======================================================================================================================
   Kiểu thẻ phối từ thodiaphuyen.vn (owner 2026-10-06: "một số kiểu card này tôi thấy khá đẹp, phối lại giúp tôi")
   ====================================================================================================================== */
/* (1) Thẻ tour mẫu Thổ Địa ← thẻ "Đối tác VIP": khung viền màu chính nhạt, vùng thành viên thuốc nổi trên ảnh, tên màu chính,
   chân thẻ gạch đứt với "XEM CHI TIẾT →" chữ in thay khối nút. */
.m-tho-dia .the-tour .the-lk { position: relative; border: 1px solid color-mix(in srgb, var(--w-chinh) 30%, transparent); border-radius: 18px; overflow: hidden; }
.m-tho-dia .the-tour .the-anh { border-radius: 0; }
.m-tho-dia .the-tour .the-vung {
  position: absolute; top: 12px; left: 12px; z-index: 1; padding: 5px 12px; border-radius: 999px;
  font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--w-chu-tren-chinh); background: var(--w-chinh); box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--w-chinh) 80%, transparent);
}
.m-tho-dia .the-tour .the-ten { color: var(--w-chinh); font-weight: 800; }
.m-tho-dia .the-tour .the-lk:hover .the-ten { color: var(--w-chinh-dam); }
.m-tho-dia .the-tour .the-gia { margin: auto 0 0; padding: 12px 0 0; border-top: 1px dashed var(--w-vien); }
.m-tho-dia .the-tour .the-xem {
  align-self: center; padding: 0; border-radius: 0; background: none; color: var(--w-chinh);
  font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.m-tho-dia .the-tour:hover .the-xem { background: none; color: var(--w-chinh-dam); }
.m-tho-dia .the-tour .the-than { padding: 14px 18px 16px; }
.m-tho-dia .the-tour .the-gia { gap: .35em 12px; }
/* Lưới xếp hạng: số thứ hạng nằm góc trái ảnh → nhãn vùng lùi sang phải số. */
.m-tho-dia .kieu-xep-hang .the-tour .the-vung { left: 60px; }
/* Thẻ hẹp: chỉ còn mũi tên (chữ "Xem chi tiết" dính vào giá). */
@container (max-width: 300px) {
  .m-tho-dia .the-tour .the-xem { min-width: 0; padding: 0; font-size: 0; }
  .m-tho-dia .the-tour .the-xem::after { font-size: 18px; }
}

/* (2) Khối Bài viết kiểu "phu-anh" ← thẻ "Lịch trình gợi ý": ảnh phủ kín, nhãn trên, chữ trên nền tối chuyển dần từ đáy. */
.bv-phu { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: clamp(16px, 2vw, 24px); margin: 0; padding: 0; list-style: none; }
.bv-phu-the {
  position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; height: 420px; overflow: hidden;
  border-radius: 18px; color: var(--w-chu-tren-anh); text-decoration: none; background: var(--w-dam);
  box-shadow: 0 10px 26px -18px color-mix(in srgb, var(--w-den) 70%, transparent);
}
.bv-phu-the img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.bv-phu-nhan {
  align-self: flex-start; margin: 14px; padding: 5px 12px; border-radius: 999px; font-size: .74rem; font-weight: 700;
  color: var(--w-chu-tren-anh); background: color-mix(in srgb, var(--w-chu) 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--w-chu-tren-anh) 25%, transparent); backdrop-filter: blur(4px);
}
.bv-phu-duoi { display: grid; gap: 6px; padding: 56px 18px 16px; background: linear-gradient(to top, var(--w-chu) 0%, color-mix(in srgb, var(--w-chu) 85%, transparent) 60%, transparent 100%); }
.bv-phu-duoi b { font-size: 1.08rem; font-weight: 800; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; transition: color .2s; }
.bv-phu-trich { font-size: .85rem; line-height: 1.45; opacity: .82; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.bv-phu-duoi .bv-hanh-dong { margin-top: 6px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--w-chu-tren-anh) 18%, transparent); color: var(--w-chinh-100); }
.bv-phu-the:hover b { color: var(--w-chinh-100); }
@media (prefers-reduced-motion: no-preference) { .bv-phu-the:hover img { transform: scale(1.05); } }

/* Hàng hành động dùng chung của hai kiểu thẻ bài: chữ in đậm + mũi tên trong vòng tròn. */
.bv-hanh-dong { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .76rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.bv-mui { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: .9rem; letter-spacing: 0; background: color-mix(in srgb, currentColor 18%, transparent); transition: transform .2s ease, background .2s ease; }
.bv-phu-the:hover .bv-mui { background: var(--w-chinh-100); color: var(--w-chu); }

/* (3) Thẻ bài ngang ← thẻ "Dành cho bạn": ảnh vuông, nhãn chuyên mục, tiêu đề một dòng, trích hai dòng, "Khám phá ngay". */
.bv-ngang-ds { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.bv-ngang {
  display: flex; gap: 14px; height: 100%; padding: 14px; border-radius: 16px; color: var(--w-chu); text-decoration: none;
  background: var(--w-nen); border: 1px solid var(--w-vien); box-shadow: 0 2px 8px -4px color-mix(in srgb, var(--w-chu) 20%, transparent);
}
.bv-ngang-anh { flex: none; width: 90px; height: 90px; border-radius: 12px; overflow: hidden; background: var(--w-chinh-50); }
.bv-ngang-anh img { width: 100%; height: 100%; object-fit: cover; }
.bv-ngang-than { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.bv-ngang-nhan { align-self: flex-start; padding: 2px 7px; border-radius: 4px; font-size: .66rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--w-chinh); background: var(--w-chinh-50); }
.bv-ngang b { font-size: 1rem; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bv-ngang-trich { font-size: .84rem; line-height: 1.45; color: var(--w-mo); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.bv-ngang .bv-hanh-dong { margin-top: auto; padding-top: 4px; }
.bv-ngang .bv-mui { width: 24px; height: 24px; font-size: .8rem; color: var(--w-mo); background: var(--w-chinh-50); }
.bv-ngang:hover .bv-hanh-dong { color: var(--w-chinh); }
.bv-ngang:hover .bv-mui { color: var(--w-chu-tren-chinh); background: var(--w-chinh); transform: translateX(3px); }
@media (prefers-reduced-motion: no-preference) {
  .bv-ngang { transition: transform .2s ease, box-shadow .2s ease; }
  .bv-ngang:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--w-chu) 30%, transparent); }
}

/* (4) Khối Lý do kiểu "tich" ← "Vì sao chọn": chữ trái 5 phần, ảnh minh hoạ phải 7 phần (không cắt), dấu tích tròn, nút viên thuốc. */
.lydo-tich-bo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.lydo-tich-td, .m-tho-dia .lydo-tich-td { display: grid; gap: 2px; text-align: left; }
.lydo-tich-td .td-nhan { display: block; color: var(--w-chinh); }
.m-tho-dia .lydo-tich-td { font-family: 'Pacifico', 'Mali', cursive, sans-serif; font-weight: 400; letter-spacing: 0; line-height: 1.3; }
.m-tho-dia .lydo-tich-phu { font-size: clamp(1.7rem, 1.4rem + 1vw, 2.2rem); color: var(--w-chu); transform: rotate(-1deg); }
.m-tho-dia .lydo-tich-td .td-nhan { font-size: clamp(2rem, 1.5rem + 1.6vw, 2.6rem); text-transform: none; }
.lydo-tich { display: grid; gap: 14px; margin: 22px 0 28px; padding: 0; list-style: none; }
.lydo-tich li { position: relative; padding-left: 36px; font-weight: 600; line-height: 1.45; color: var(--w-chu); }
.lydo-tich li::before {
  content: ""; position: absolute; left: 0; top: .05em; width: 22px; height: 22px; box-sizing: border-box; border-radius: 50%;
  border: 1.5px solid var(--w-phu-net); background: color-mix(in srgb, var(--w-phu-net) 10%, var(--w-nen));
}
.lydo-tich li::after {
  content: ""; position: absolute; left: 8px; top: calc(.05em + 5px); width: 5px; height: 9px;
  border: solid var(--w-phu-net); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.lydo-tich-bo .nut { text-transform: uppercase; letter-spacing: .04em; font-weight: 800; }
.lydo-minh-hoa img { width: 100%; height: auto; object-fit: contain; }
@media (max-width: 900px) { .lydo-tich-bo { grid-template-columns: 1fr; } }

/* Lịch tháng (owner 2026-10-06: "chỗ xem dạng lịch như này đang chưa ổn"): một kiểu xem mỗi lúc — mở lịch thì ẩn dải ngày; ô vuông đều
   không ghi giá; ngày có chuyến nền màu chính nhạt; đang chọn tô đặc; rẻ nhất là chấm nhỏ dưới số (không dùng viền — lẫn với "đang chọn"). */
.lcn:has(.lcn-luoi-bo[open]) .lcn-ngay { display: none; }
.lcn-luoi-bo summary { list-style: none; margin-top: 4px; }
.lcn-luoi-bo summary::-webkit-details-marker { display: none; }
.lcn-luoi-bo summary::before { content: "▦"; margin-right: 6px; font-size: .95em; }
.lcn-luoi-bo[open] summary::before { content: "☰"; }
.lcn-luoi-bo .lcn-xem-dai, .lcn-luoi-bo[open] .lcn-xem-lich { display: none; }
.lcn-luoi-bo[open] .lcn-xem-dai { display: inline; }
.lcn-luoi { grid-template-columns: repeat(7, 42px); gap: 6px; margin-top: 10px; }
.lcn-luoi-thu { padding-bottom: 2px; font-size: .72rem; font-weight: 600; }
.lcn-luoi-o { position: relative; width: 42px; height: 42px; border-radius: 10px; font-size: .9rem; }
.lcn-luoi-o.co { background: var(--w-chinh-50); color: var(--w-chinh); font-weight: 700; }
.lcn-luoi-o.co:hover { outline: 0; background: var(--w-chinh-100); }
.lcn-luoi-o.re { box-shadow: none; }
.lcn-luoi-o.re::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--w-phu-net); }
.lcn-luoi-o.chon { background: var(--w-chinh); color: var(--w-chu-tren-chinh); }
.lcn-luoi-o.chon::after { background: var(--w-chu-tren-chinh); }
.lcn-luoi-o.hom-nay b { width: 26px; height: 26px; border-color: var(--w-vien); }
.lcn-chu-giai { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: .78rem; color: var(--w-mo); }
.lcn-chu-giai span { display: inline-block; flex: none; }
.lcn-chu-giai .cg-co { width: 12px; height: 12px; border-radius: 4px; background: var(--w-chinh-100); }
.lcn-chu-giai .cg-re { width: 6px; height: 6px; margin-left: 12px; border-radius: 50%; background: var(--w-phu-net); }

/* ---------- Ô "Đi đâu?" gợi ý điểm đến / tour / thị trường (phiếu 029) ----------
   Bảng in sẵn trong HTML: không JS thì hiện khi ô có tiêu điểm; có JS (site.js thêm .sg-js) thì hiện khi .mo. Điện thoại: tấm phủ toàn màn (.sg-full). */
.sg-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sg { position: static; }
.sg-field { position: relative; }
.tim-o .o .sg-input { width: 100%; min-height: 28px; padding: 2px 28px 0 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; font: inherit; font-size: 1rem; font-weight: 600; color: var(--w-chinh); text-overflow: ellipsis; }
.tim-o .o .sg-input:focus { outline: none; box-shadow: none; }
.tim-o .o .sg-input::placeholder { color: var(--w-cho); font-weight: 400; }
.sg-clear { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--w-mo); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.sg-clear:hover { background: var(--w-chinh-50); color: var(--w-chinh); }
.sg-clear[hidden] { display: none; }
.sg-panel { display: none; position: absolute; z-index: 30; left: 0; top: calc(100% + 8px); width: max(100%, 440px); max-width: min(500px, 92vw); max-height: min(440px, 70vh); overflow: auto; padding: 6px; background: var(--w-nen); border: 1px solid var(--w-vien); border-radius: 14px; box-shadow: var(--w-bong-menu); text-align: left; }
.sg:not(.sg-js):focus-within .sg-panel, .sg.sg-js.mo .sg-panel { display: block; }
.sg-panel.sg-typed { min-height: 232px; }
.sg-group { padding: 10px 10px 4px; font: 600 .72rem/1.2 var(--w-phong-than); letter-spacing: .06em; text-transform: uppercase; color: var(--w-mo); }
.sg-list { margin: 0; padding: 0; list-style: none; }
.sg-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 52px; padding: 4px 10px; border-radius: 10px; color: var(--w-chu); text-decoration: none; cursor: pointer; }
.sg-row:hover, .sg-row.hl { background: var(--w-chinh-50); }
.sg-row.hl { box-shadow: inset 0 0 0 1.5px var(--w-chinh); }
.sg-thumb { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: var(--w-chinh-50); color: var(--w-chinh); }
.sg-thumb .bt { width: 20px; height: 20px; }
.sg-text { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.sg-text b { font: 600 .98rem/1.3 var(--w-phong-than); letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-text small { font-size: .8rem; font-weight: 400; color: var(--w-mo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-count { font-size: .8rem; font-weight: 500; color: var(--w-mo); white-space: nowrap; }
.sg-panel mark { padding: 0 1px; border-radius: 3px; background: color-mix(in srgb, var(--w-chinh) 16%, transparent); color: var(--w-chinh); font-weight: 700; }
.sg-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 10px 10px; }
.sg-chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--w-vien); border-radius: 999px; background: var(--w-nen); color: var(--w-chu); font-size: .88rem; font-weight: 500; text-decoration: none; }
.sg-chip:hover, .sg-chip.hl { border-color: var(--w-chinh); color: var(--w-chinh); background: var(--w-chinh-50); }
.sg-skel { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 52px; padding: 4px 10px; }
.sg-skel i { display: block; border-radius: 6px; background: linear-gradient(90deg, var(--w-chinh-50) 25%, var(--w-chinh-100) 50%, var(--w-chinh-50) 75%); background-size: 200% 100%; animation: sg-skeleton 1.2s linear infinite; }
.sg-skel .sg-thumb { border-radius: 10px; }
.sg-skel span { display: flex; flex-direction: column; gap: 7px; }
.sg-skel .sk-1 { height: 11px; width: 62%; }
.sg-skel .sk-2 { height: 9px; width: 38%; }
@keyframes sg-skeleton { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .sg-skel i { animation: none; } }
.sg-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px 14px; text-align: center; color: var(--w-mo); font-size: .95rem; }
.sg-cta { min-height: 44px; padding-inline: 1.3em; font-size: .92rem; }
.sg-cta-ghost { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.2em; border: 1.5px solid var(--w-chinh); border-radius: var(--w-bo-o); color: var(--w-chinh); font-weight: 600; font-size: .92rem; text-decoration: none; }
.sg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0 10px; }
.sg-head[hidden] { display: none; }
.sg-close { min-height: 44px; padding: 0 6px; border: 0; background: transparent; color: var(--w-chinh); font: inherit; font-weight: 600; cursor: pointer; }
html.sg-lock { overflow: hidden; }
.sg.sg-full { position: fixed; inset: 0; z-index: 2000; display: flex; flex-direction: column; height: var(--dd-vh, 100dvh); padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--w-nen); overflow: hidden; }
.sg.sg-full .sg-field { flex: none; padding: 0 12px; border: 1.5px solid var(--w-chinh); border-radius: 12px; background: var(--w-nen); box-shadow: var(--w-vong-o); }
.tim-o .o .sg.sg-full .sg-input { min-height: 48px; padding: 0 36px 0 0; font-size: 16px; }
.sg.sg-full .sg-clear { right: 6px; width: 44px; height: 44px; }
.sg.sg-full .sg-panel { position: static; display: block; flex: 1; width: auto; max-width: none; max-height: none; margin-top: 8px; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.sg.sg-full .sg-panel.sg-typed { min-height: 0; }
.sg.sg-full .sg-row { min-height: 56px; }
@media (max-width: 640px) { .sg-clear { width: 44px; height: 44px; } .tim-o .o .sg-input { font-size: 16px; } .sg-row { min-height: 56px; } .sg-chip { min-height: 44px; } }
body:has(.sg.mo) :is(.nut-noi, .tl-chao) { visibility: hidden; }
/* Tấm phủ toàn màn nằm trong khối .k-tim (có z-index riêng) → nâng cả khối lên trên thanh đầu trang khi đang mở. */
.k-tim:has(.sg-full) { z-index: 2000; }