/* =====================================================================
   AVATAR KARAOKE — toàn bộ CSS của web nằm trong 1 file này.
   Không dùng SCSS, không cần build. Sửa xong nhớ tăng AV_ASSET_VER
   trong private/helpers.php để trình duyệt tải lại bản mới.

   TONE MÀU: neon night life — nền tím than gần đen, chữ trắng,
   điểm nhấn là 3 màu neon (xanh cyan, hồng magenta, tím violet)
   kèm hiệu ứng phát sáng. Muốn đổi màu thì sửa các biến ở :root.
   ===================================================================== */

:root {
  /* Nền */
  --bg:        #04030a;   /* nền chính, tím than gần đen */
  --bg-2:      #080614;   /* nền section xen kẽ */
  --bg-3:      #0d0a1e;   /* nền thẻ, ô nhập liệu */
  --line:      #241d42;   /* đường viền */

  /* Chữ */
  --fg:        #ffffff;
  --fg-dim:    #a79ec9;   /* chữ phụ, ánh tím nhạt */

  /* 3 màu neon */
  --neon-1:    #00e5ff;   /* cyan  — màu chính */
  --neon-2:    #ff2fd0;   /* magenta — màu nhấn */
  --neon-3:    #a259ff;   /* violet — màu chuyển tiếp */

  /* Tên cũ giữ lại để không phải sửa rải rác trong các file .php */
  --accent:    var(--neon-2);
  --accent-2:  var(--neon-1);

  --grad:      linear-gradient(100deg, var(--neon-1), var(--neon-3) 55%, var(--neon-2));
  --glow-1:    0 0 12px rgba(0, 229, 255, .55);
  --glow-2:    0 0 14px rgba(255, 47, 208, .55);

  --head-h:    86px;
  --wrap:      1240px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Font dùng chung cho CẢ WEB — khai báo 1 chỗ, mọi thẻ đều thừa hưởng.
   "Roboto" ở đây là bản tự host trong assets/fonts (xem fonts.css), có đủ dấu
   tiếng Việt. Các font phía sau chỉ là dự phòng cho tình huống file font lỗi. */
:root { --font: "Roboto", "Segoe UI", system-ui, -apple-system, Arial, sans-serif; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* Hai quầng sáng neon mờ ở nền, tạo cảm giác đèn club hắt lên */
  background-image:
    radial-gradient(60vw 60vw at 12% -10%, rgba(162, 89, 255, .16), transparent 60%),
    radial-gradient(55vw 55vw at 95% 8%,  rgba(0, 229, 255, .12), transparent 60%);
  background-attachment: fixed;
}

/* ---------------------------------------------------------------------
   VỆT SÁNG QUÉT NGANG — chạy trên MỌI TRANG, không riêng hero.
   Là một lớp phủ cố định theo màn hình (position: fixed) nên vệt sáng quét
   đều đặn dù khách đang cuộn tới đâu. pointer-events: none để không chắn
   chuột; mix-blend-mode: screen để nó chỉ làm sáng chứ không che nội dung.
   z-index 55: nằm DƯỚI thanh menu (60).
   Trước đây để 65 (trên thanh menu). Nghe thì đẹp hơn, nhưng mix-blend-mode
   buộc trình duyệt vẽ lại toàn bộ vùng nằm dưới lớp này mỗi khung hình khi
   khách cuộn — kể cả thanh menu. Máy tính khoẻ nên không thấy gì, còn điện
   thoại thì thanh menu dễ bị vẽ trễ, hở ra một dải nền ở mép trên.
   --------------------------------------------------------------------- */
body::after {
  content: "";
  position: fixed; inset: -25% -35%;
  z-index: 55;
  pointer-events: none;
  mix-blend-mode: screen;
  background: linear-gradient(115deg,
    transparent 40%,
    rgba(0, 229, 255, .10) 48%,
    rgba(162, 89, 255, .13) 52%,
    transparent 60%);
  animation: sweep 9s linear infinite;
}
@keyframes sweep {
  0%   { transform: translateX(-32%); }
  100% { transform: translateX(32%); }
}


/* ---------------------------------------------------------------------
   THANH CUỘN — nhuộm theo tông neon của web thay vì thanh xám mặc định.
   Firefox chỉ nhận scrollbar-color (2 màu: con trượt / rãnh); Chrome, Edge,
   Safari dùng bộ ::-webkit-scrollbar nên vẽ được gradient và bo tròn.
   --------------------------------------------------------------------- */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--neon-3) var(--bg-3);
}
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track {
  background: var(--bg-3);
  border-left: 1px solid var(--line);
}
::-webkit-scrollbar-thumb {
  border-radius: 999px;
  border: 2px solid var(--bg-3);   /* viền cùng màu rãnh, tạo khe hở hai bên */
  background: linear-gradient(var(--neon-1), var(--neon-3), var(--neon-2));
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(var(--neon-2), var(--neon-3), var(--neon-1));
}
::-webkit-scrollbar-corner { background: var(--bg-3); }

img { max-width: 100%; display: block; }
a   { color: inherit; text-decoration: none; }

/* Nút và ô nhập liệu KHÔNG tự thừa hưởng font của trang — trình duyệt luôn ép
   font riêng của hệ điều hành. Phải khai báo lại, nếu không nút "GỬI GÓP Ý",
   nút "XEM MENU"... sẽ ra một font khác hẳn phần còn lại của web. */
button, input, select, textarea { font-family: var(--font); }

h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.15; font-weight: 700; letter-spacing: .02em; }
p  { margin: 0 0 1em; }
ul { margin: 0 0 1em; padding-left: 1.2em; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

/* Chữ tô gradient neon — dùng cho tiêu đề lớn */
.neon-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ------------------------------- Nút ------------------------------- */
.btn {
  position: relative;
  display: inline-block;
  padding: 14px 34px;
  border: 1px solid transparent;
  background: var(--grad);
  color: #080614;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-radius: 3px;
  box-shadow: var(--glow-2);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn:hover { transform: translateY(-3px); filter: brightness(1.12); box-shadow: 0 0 26px rgba(255, 47, 208, .75); }

.btn-lg { padding: 18px 46px; font-size: 15px; }

/* Nút viền neon — kiểu nút chính dùng cho các cụm liên hệ / đặt phòng.
   Có nền tối riêng (không để trong suốt) nên nhìn giống hệt nhau dù đặt trên
   nền trơn hay đè lên video. */
.btn-ghost {
  background: rgba(4, 3, 10, .62);
  backdrop-filter: blur(6px);
  color: var(--neon-1);
  border-color: var(--neon-1);
  box-shadow: inset 0 0 14px rgba(0, 229, 255, .22), var(--glow-1), 0 8px 26px rgba(0, 0, 0, .55);
}
.btn-ghost:hover { background: rgba(0, 229, 255, .30); color: #fff; }
.tct-nut .btn-ghost:hover {
  background:
    linear-gradient(rgba(4, 3, 10, .78), rgba(4, 3, 10, .78)) padding-box,
    var(--grad) border-box;
}

/* ------------------------------ Header ----------------------------- */
.site-head {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  height: var(--head-h);
  display: flex; align-items: center; gap: 28px;
  padding: 0 32px;
  background: rgba(4, 3, 10, .82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(0, 229, 255, .22);
}
.brand img { height: 46px; width: auto; }

.nav { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.nav-list { display: flex; align-items: center; gap: 26px; list-style: none; margin: 0; padding: 0; }
.nav-list > li { position: relative; }
.nav-list > li > a {
  display: block; padding: 10px 0;
  font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg-dim);
  border-bottom: 2px solid transparent;
  transition: color .18s ease, border-color .18s ease, text-shadow .18s ease;
}
.nav-list > li > a:hover,
.nav-list > li > a.is-active {
  color: #fff; border-color: var(--neon-1); text-shadow: var(--glow-1);
}

.has-sub > a::after { content: " ▾"; font-size: 10px; color: var(--neon-3); }
/* Mục chỉ-là-nhãn ("Phòng hát"): không có href nên trình duyệt để con trỏ mũi
   tên, trông như chữ chết. Đổi thành bàn tay để khách biết bấm vào có chuyện. */
.nav-list > li > a.nav-nhan { cursor: pointer; }
.sub {
  position: absolute; top: 100%; left: -18px; min-width: 250px;
  list-style: none; margin: 0; padding: 10px 0;
  background: #0a0818; border: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .6), 0 0 0 1px rgba(162, 89, 255, .2);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.has-sub:hover .sub, .has-sub:focus-within .sub { opacity: 1; visibility: visible; transform: none; }
.sub a {
  display: block; padding: 9px 20px; font-size: 13px; color: var(--fg-dim);
  transition: background .15s ease, color .15s ease;
}
.sub a:hover { background: rgba(162, 89, 255, .18); color: #fff; }

/* ------------- Nút viên thuốc, viền gradient phát sáng --------------
   Mẹo dựng viền gradient: xếp 2 lớp nền — lớp trong (padding-box) là màu tối
   đặc, lớp ngoài (border-box) là dải gradient. Phần viền để trong suốt nên
   nhìn xuyên xuống lớp gradient, thành ra đường viền chuyển màu.
   -------------------------------------------------------------------- */
/* Hàng nút của các chuyên trang dùng chung kiểu với nút chính: ba nút đứng
   cạnh nhau mà khác nhau cả hình dáng lẫn màu viền (pill viền gradient bên cạnh
   ghost viền lam vuông góc) trông như ba thứ rời rạc dán vào. Thứ tự quan trọng
   vẫn đọc được qua thứ tự đặt nút, không cần đổi kiểu dáng để nói điều đó. */
.btn-pill,
.tct-nut .btn-ghost {
  border-radius: 999px;
  border: 2px solid transparent;
  background:
    linear-gradient(rgba(4, 3, 10, .78), rgba(4, 3, 10, .78)) padding-box,
    var(--grad) border-box;
  color: var(--neon-1);
  text-shadow: 0 0 10px rgba(0, 229, 255, .85);
  box-shadow: 0 0 20px rgba(255, 47, 208, .45), 0 0 34px rgba(0, 229, 255, .22);
  backdrop-filter: blur(6px);
}
.btn-pill:hover,
.tct-nut .btn-ghost:hover {
  color: #fff;
  filter: none;
  box-shadow: 0 0 30px rgba(255, 47, 208, .7), 0 0 46px rgba(0, 229, 255, .35);
}

/* Nút ĐẶT PHÒNG ở thanh menu + khay các cách liên hệ xổ ra bên dưới */
.head-cta { position: relative; }
.head-book { padding: 11px 26px; font-size: 12px; cursor: pointer; }
.head-book::after { content: " ▾"; font-size: 9px; }

.head-cta-menu {
  position: absolute; top: calc(100% + 12px); right: 0; min-width: 230px;
  background: #0a0818; border: 1px solid var(--line); border-radius: 10px;
  padding: 8px; display: grid; gap: 2px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .7), 0 0 0 1px rgba(0, 229, 255, .22);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.head-cta.open .head-cta-menu { opacity: 1; visibility: visible; transform: none; }

.head-cta-menu a {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: 7px;
  font-size: 14px; color: var(--fg-dim);
  transition: background .15s ease, color .15s ease;
}
.head-cta-menu a:hover { background: rgba(0, 229, 255, .14); color: #fff; }
.head-cta-menu svg { width: 19px; height: 19px; flex: none; color: var(--neon-1); }

/* Nút đổi ngôn ngữ VI / EN */
.lang-switch { display: flex; align-items: center; gap: 2px; border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
/* Có HAI cụm VI/EN trong trang: một nằm ngoài thanh menu (cho máy tính), một
   nằm trong khay menu (cho điện thoại). Mỗi khổ màn hình chỉ hiện một cụm. */
.lang-switch.lang-khay { display: none; }
.lang-switch a {
  padding: 4px 11px; font-size: 12px; font-weight: 700; letter-spacing: .08em;
  color: var(--fg-dim); border-radius: 999px; transition: all .18s ease;
}
.lang-switch a:hover { color: #fff; }
.lang-switch a.on { background: var(--grad); color: #080614; box-shadow: var(--glow-1); }

.nav-toggle {
  display: none; width: 42px; height: 42px; margin-left: auto;
  background: none; border: 1px solid var(--neon-1); border-radius: 3px;
  flex-direction: column; justify-content: center; align-items: center; gap: 5px; cursor: pointer;
  box-shadow: var(--glow-1);
}
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--neon-1); }

/* ------------------------ Hero trang chủ --------------------------- */
.hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: calc(var(--head-h) + 40px) 24px 80px;
  background: #04030a center/cover no-repeat;
  overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(255, 47, 208, .30), transparent 55%),
    radial-gradient(ellipse at 72% 62%, rgba(0, 229, 255, .26), transparent 55%),
    rgba(4, 3, 10, .62);
}
/* Video nền hero — phủ kín khung, luôn nằm dưới lớp phủ tối và chữ */
.hero-video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  pointer-events: none;
}
.hero::before { z-index: 1; }   /* lớp phủ tối phải nằm trên video */

/* =====================================================================
   HERO CÓ VIDEO NỀN
   Nguyên tắc: KHÔNG làm tối cả khung hình để chữ dễ đọc — làm vậy là video
   mất nét. Thay vào đó lớp phủ để rất nhạt (thấy rõ video), rồi bù độ tương
   phản riêng cho từng phần chữ và nút bằng bóng đổ. Chữ vẫn rõ mà hình vẫn nét.
   ===================================================================== */
body.has-hero-video .hero::before {
  /* BỎ HẲN lớp phủ — video hiện đúng độ nét và màu gốc.
     Chữ và nút vẫn đọc được nhờ bóng đổ riêng khai báo ngay bên dưới,
     chứ không nhờ làm tối cả khung hình. */
  background: none;
}


/* Nút trên nền video: thêm bóng đổ tối để tách hẳn khỏi hình phía sau.
   Riêng .btn-ghost đã tự có nền tối và bóng đổ trong khai báo gốc nên
   không cần xử lý thêm ở đây nữa. */
body.has-hero-video .hero .btn {
  box-shadow: var(--glow-2), 0 8px 26px rgba(0, 0, 0, .6);
}

.hero-in { position: relative; z-index: 2; max-width: 900px; }

/* ---------------------------------------------------------------------
   CHỮ Ở HERO — chỉ chữ trắng, KHÔNG viền, KHÔNG quầng sáng.
   Mọi hiệu ứng phát sáng đều hắt ra xung quanh nét chữ, đè lên video phía
   sau và làm hình trông mờ đi. Để trắng trơn là video giữ nguyên độ nét.
   --------------------------------------------------------------------- */
.hero h1 {
  display: inline-block;
  font-size: clamp(34px, 6.4vw, 78px);
  letter-spacing: .16em;
  margin-bottom: .25em;
  color: #fff;
}
.hero-sub {
  font-size: clamp(12px, 1.5vw, 17px);
  letter-spacing: .34em; text-transform: uppercase;
  margin-bottom: 2.2em;
  color: #fff;
}

/* ------------------- Banner tiêu đề trang trong -------------------- */
.page-hero {
  position: relative;
  padding: calc(var(--head-h) + 80px) 24px 70px;
  text-align: center;
  background: #080614 center/cover no-repeat;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(255, 47, 208, .3);
}
.page-hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 120%, rgba(162, 89, 255, .35), transparent 62%),
    rgba(4, 3, 10, .66);
}
.page-hero-in { position: relative; z-index: 2; }
.page-hero h1 {
  font-size: clamp(26px, 4.4vw, 50px); letter-spacing: .14em;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.page-hero p  { color: var(--fg-dim); margin: 0; letter-spacing: .06em; }

/* Chữ tô gradient bị CẮT MẤT DẤU — vì sao, và vì sao chữa bằng line-height.
   `background-clip: text` chỉ tô màu trong phạm vi HỘP NỀN của thẻ, mà hộp đó
   cao đúng bằng line-height. Chữ Việt in hoa có dấu chồng (Ấ, Ệ, Ổ, Ữ) vươn lên
   cao hơn hộp khi line-height chật — 1.15 như luật chung cho h1..h4. Phần vươn ra
   ngoài hộp không được tô nên biến mất, nhìn như chữ cụt dấu. Nới line-height là
   hộp cao lên, dấu nằm gọn bên trong.
   Chỉ chữ gradient mới dính lỗi này; chữ tô màu thường vẫn hiện đủ dấu, nên đừng
   thấy tiêu đề khác không sao mà tưởng line-height 1.15 là an toàn. */
.page-hero h1,
.sec-head h2,
.menu-cta h2,
.mm-cat-head h3,
.booking-done h2,
.bc-mot b,
.neon-text {
  line-height: 1.4;
  /* Đo thật trên máy: với line-height 1.4, đỉnh dấu chỉ còn cách mép hộp 1.2px.
     Đủ để hiện, nhưng máy khách dùng font dự phòng khác một chút là cắt lại.
     Chừa thêm .1em cho chắc — dùng em nên tiêu đề to nhỏ gì cũng chừa đúng tỉ lệ. */
  padding-top: .1em;
}

/* ------------------------------ Section ---------------------------- */
.section { padding: 90px 0; position: relative; }
.section--alt { background: var(--bg-2); border-block: 1px solid var(--line); }

.sec-head { text-align: center; margin-bottom: 52px; }
.sec-eyebrow {
  font-size: 12px; letter-spacing: .32em; color: var(--neon-1);
  text-transform: uppercase; margin-bottom: .8em; text-shadow: var(--glow-1);
}
.sec-head h2 {
  font-size: clamp(24px, 3.4vw, 40px); letter-spacing: .1em;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* max-width 860px chứ không phải 680px: câu giới thiệu hệ thống phòng cần
   690px mới đủ một hàng — thiếu 10px là rớt xuống dòng thứ hai, nhìn lệch hẳn.
   Chừa dư tới 860px để quán sửa câu dài thêm chút vẫn không bị xuống dòng, mà
   vẫn hẹp hơn khung 1240px nên chữ không trải quá rộng, đọc vẫn dễ. */
.sec-head p  { color: var(--fg-dim); max-width: 860px; margin: 0 auto; }

/* ------------------ Băng chữ ưu đãi chạy ngang --------------------- */
.bang-chay {
  overflow: hidden;
  background: linear-gradient(90deg, rgba(0,229,255,.10), rgba(162,89,255,.14), rgba(255,47,208,.10));
  border-top: 1px solid var(--neon-1);
  border-bottom: 1px solid var(--neon-2);
  box-shadow: inset 0 1px 18px rgba(0,229,255,.18), inset 0 -1px 18px rgba(255,47,208,.18);
}
/* width: max-content để dải chữ dài bao nhiêu cũng nằm trên MỘT hàng, không
   bị bó theo bề ngang màn hình rồi rớt dòng. */
.bc-track { display: flex; align-items: center; width: max-content; }
.bc-track > * { flex: none; }

/* Chỉ chạy sau khi main.js đã nhân bản đủ (gắn lớp "chay") và tự tính thời
   gian một vòng theo độ dài thật — nhờ vậy tốc độ trên điện thoại và máy tính
   như nhau dù cỡ chữ khác nhau. */
.bc-track.chay { animation: bcChay var(--bc-giay, 26s) linear infinite; }
@keyframes bcChay { to { transform: translateX(-50%); } }

/* Micro nằm cuối cụm, làm dấu ngăn giữa hai lượt chữ.
   Đệm trái 26px + khoảng cách 26px, không đệm phải: nhờ vậy khoảng trống hai
   bên micro bằng nhau (26px mỗi bên), micro nằm chính giữa hai lượt chữ chứ
   không dính vào lượt nào. */
.bc-mot {
  display: inline-flex; align-items: center;
  gap: 26px; padding: 13px 0 13px 26px;
}
.bc-mot b {
  font-size: clamp(15px, 2vw, 26px); font-weight: 900;
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.bc-mic { width: clamp(20px, 2.4vw, 30px); height: auto; color: var(--neon-1); flex: none; }

/* Ba tia lấp lánh nhấp nháy lệch nhịp nhau cho ra vẻ ánh đèn sân khấu */
.bc-mic .tia { animation: bcLapLanh 1.9s ease-in-out infinite; transform-origin: center; }
.bc-mic .tia-2 { animation-delay: .55s; }
.bc-mic .tia-3 { animation-delay: 1.1s; }
@keyframes bcLapLanh {
  0%, 100% { opacity: .25; }
  50%      { opacity: 1; }
}

/* Máy nào khách đã chọn "giảm chuyển động" thì đứng yên, chỉ hiện chữ. */
@media (prefers-reduced-motion: reduce) {
  .bc-track.chay { animation: none; }
  .bc-mic .tia { animation: none; opacity: .8; }
}

/* ------------------- Tìm kiếm trên thanh menu ---------------------- */
/* Máy tính: thanh tìm hiện hẳn ra. Điện thoại: giấu thanh, chỉ còn kính lúp. */
.nav-thanh-tim {
  position: relative; display: none; align-items: center; gap: 8px; flex: none;
  width: 210px; padding: 0 12px; height: 38px;
  border: 1px solid var(--line); border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  transition: border-color .18s ease, box-shadow .18s ease, width .18s ease;
}
.nav-thanh-tim > svg { width: 15px; height: 15px; flex: none; color: var(--neon-1); }
.nav-thanh-tim input {
  flex: 1; min-width: 0; border: 0; background: none; color: var(--fg);
  font: inherit; font-size: 13px; padding: 0;
}
.nav-thanh-tim input:focus { outline: 0; }
.nav-thanh-tim input::placeholder { color: var(--fg-dim); }
.nav-thanh-tim input::-webkit-search-cancel-button { filter: invert(.7); cursor: pointer; }
.nav-thanh-tim:focus-within { border-color: var(--neon-1); box-shadow: 0 0 16px rgba(0, 229, 255, .28); }

/* Khay kết quả xổ xuống ngay dưới thanh */
.nav-tim-xo {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 130;
  width: 380px; max-height: 60vh; overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid var(--neon-1); border-radius: 6px;
  background: rgba(8, 5, 18, .98);
  box-shadow: 0 0 28px rgba(0, 229, 255, .26), 0 16px 40px rgba(0, 0, 0, .6);
  padding: 4px 0 8px;
}
.nav-tim-xo[hidden] { display: none; }

/* Chỉ một nút kính lúp; bấm vào mở khay gõ ngay tại chỗ. */
.nav-tim {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .05);
  color: var(--neon-1);
  transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.nav-tim svg { width: 17px; height: 17px; }
.nav-tim:hover {
  background: var(--neon-1); color: #06040f; border-color: var(--neon-1);
  box-shadow: 0 0 18px rgba(0, 229, 255, .5);
}
/* Thanh tìm CHỈ hiện từ 1100px trở lên. Dưới mức đó thanh menu đã gần chật:
   logo 177 + menu 339 + ĐẶT PHÒNG 106 + VI/EN 69 + khoảng cách + lề ≈ 867px,
   nhét thêm thanh tìm 210px vào là logo bị bóp còn 0px. Khoảng 861–1099px
   dùng nút kính lúp như trên điện thoại. */
@media (min-width: 1100px) {
  .nav-thanh-tim { display: flex; }
  .nav-tim { display: none; }
}
/* Khoảng 861–1099px: dùng kính lúp, và xếp nó ra TRƯỚC nút ĐẶT PHÒNG cho
   giống thứ tự của thanh tìm ở khổ rộng. Trong mã HTML kính lúp nằm cuối
   (để điện thoại nó đứng cạnh nút ba gạch) nên phải xếp lại bằng order. */
@media (min-width: 861px) and (max-width: 1099px) {
  .nav-tim { order: 1; }
  .head-cta { order: 2; }
  .lang-switch { order: 3; }
}
/* Logo không bao giờ được co lại — nó là thứ đầu tiên khách nhìn. */
.brand { flex: none; }
/* Nút đang mở khay tìm thì sáng lên như khi rê chuột */
.nav-tim[aria-expanded="true"] {
  background: var(--neon-1); color: #06040f; border-color: var(--neon-1);
  box-shadow: 0 0 18px rgba(0, 229, 255, .5);
}

/* ------------------ Khay tìm kiếm nổi (bấm kính lúp) ---------------- */
/* align-items: flex-start để khay chỉ cao bằng nội dung, không bị kéo dài
   hết màn hình như mặc định của flex. */
.khay-tim { position: fixed; inset: 0; z-index: 120; display: flex; justify-content: center; align-items: flex-start; }
.khay-tim[hidden] { display: none; }
.khay-tim-nen {
  position: absolute; inset: 0;
  background: rgba(3, 2, 8, .74); backdrop-filter: blur(4px);
  animation: ktHien .18s ease;
}
.khay-tim-hop {
  position: relative; z-index: 1;
  width: min(680px, calc(100% - 32px));
  margin-top: calc(var(--head-h) + 12px);
  max-height: calc(100svh - var(--head-h) - 40px);
  display: flex; flex-direction: column;
  border: 1px solid var(--neon-1); border-radius: 6px;
  background: rgba(8, 5, 18, .97);
  box-shadow: 0 0 34px rgba(0, 229, 255, .3), 0 18px 50px rgba(0, 0, 0, .6);
  animation: ktLen .2s ease;
}
@keyframes ktHien { from { opacity: 0; } }
@keyframes ktLen { from { opacity: 0; transform: translateY(-10px); } }

.kt-thanh {
  display: flex; align-items: center; gap: 10px; flex: none;
  padding: 12px 14px; border-bottom: 1px solid rgba(0, 229, 255, .28);
}
.kt-thanh > svg { width: 18px; height: 18px; flex: none; color: var(--neon-1); }
.kt-thanh input {
  flex: 1; min-width: 0; border: 0; background: none;
  color: var(--fg); font: inherit; font-size: 1rem; padding: 6px 0;
}
.kt-thanh input:focus { outline: 0; }
.kt-thanh input::placeholder { color: var(--fg-dim); }
.kt-dong {
  flex: none; width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line); background: none; color: var(--fg-dim);
  font-size: 1.3rem; line-height: 1;
  transition: color .16s ease, border-color .16s ease;
}
.kt-dong:hover { color: var(--neon-2); border-color: var(--neon-2); }

.kt-kq { overflow-y: auto; overscroll-behavior: contain; padding: 6px 0 10px; }
.kt-nhom { padding: 8px 0; }
.kt-nhom + .kt-nhom { border-top: 1px solid rgba(255, 255, 255, .07); }
.kt-nhom > h4 {
  margin: 0; padding: 6px 16px;
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--neon-2);
}
.kt-nhom a {
  display: block; padding: 9px 16px;
  border-left: 2px solid transparent;
  transition: background .14s ease, border-color .14s ease;
}
.kt-nhom a b { display: block; font-weight: 600; font-size: .95rem; }
.kt-nhom a span { display: block; margin-top: 2px; font-size: .82rem; color: var(--fg-dim); }
.kt-nhom a:hover,
.kt-nhom a:focus-visible,
.kt-nhom a.dang-chon {
  background: rgba(0, 229, 255, .1); border-left-color: var(--neon-1); outline: 0;
}
.kt-tin { margin: 0; padding: 18px 16px; color: var(--fg-dim); font-size: .9rem; text-align: center; }
.kt-het {
  display: block; margin: 6px 16px 4px; padding: 10px;
  text-align: center; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--neon-2); border-radius: 3px; color: var(--neon-2);
}
.kt-het:hover { background: var(--neon-2); color: #06040f; }
.kt-goiy { margin: 0; padding: 16px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font-size: .85rem; color: var(--fg-dim); }
.kt-goiy button {
  cursor: pointer; font: inherit; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--line); background: none; color: var(--fg);
  transition: border-color .16s ease, color .16s ease;
}
.kt-goiy button:hover { border-color: var(--neon-1); color: var(--neon-1); }

/* Khi khay mở thì khoá cuộn trang phía sau */
body.dang-tim { overflow: hidden; }

/* Đang mở lịch hoặc bánh xe giờ thì trang đứng yên, chỉ cuộn được bên trong khay.
   Dùng position: fixed chứ không phải overflow: hidden — trên iPhone chỉ đặt
   overflow: hidden lên body thì trang vẫn trượt được như thường.
   Vị trí cuộn cũ được JavaScript nhớ lại rồi trả về đúng chỗ lúc đóng khay. */
body.khoa-cuon {
  position: fixed; left: 0; right: 0; width: 100%; overflow: hidden;
}

/* ---------------------- Trang kết quả tìm kiếm --------------------- */
.tk-form { display: flex; gap: 12px; max-width: 640px; margin: 0 auto 28px; }
.tk-form input {
  flex: 1; padding: 13px 18px; border-radius: 999px;
  background: var(--bg-3); border: 1px solid var(--line);
  color: #fff; font-family: inherit; font-size: 15px;
}
.tk-form input:focus { outline: 0; border-color: var(--neon-1); box-shadow: var(--glow-1); }
.tk-goiy { text-align: center; color: var(--fg-dim); font-size: 14px; }
.tk-goiy a {
  display: inline-block; margin: 4px 5px; padding: 5px 14px;
  border: 1px solid var(--line); border-radius: 999px; font-size: 13px;
}
.tk-goiy a:hover { border-color: var(--neon-2); color: var(--neon-2); }
.tk-tong { text-align: center; color: var(--fg-dim); margin-bottom: 26px; }

.tk-nhom { margin-bottom: 30px; }
.tk-nhom h3 {
  font-size: 13px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--neon-1); margin-bottom: 12px;
  display: flex; align-items: center; gap: 10px;
}
.tk-nhom h3 span {
  font-size: 11px; letter-spacing: 0; color: var(--fg-dim);
  border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px;
}
.tk-ds { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tk-ds a {
  display: block; padding: 14px 18px;
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 4px;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.tk-ds a:hover {
  border-color: var(--neon-2); transform: translateX(4px);
  box-shadow: 0 0 0 1px rgba(255, 47, 208, .3);
}
.tk-ds b { display: block; color: #fff; font-size: 15px; margin-bottom: 3px; }
.tk-ds span { color: var(--fg-dim); font-size: 13.5px; }

/* --------------------------- Lưới phòng ---------------------------- */
.room-grid {
  display: grid; gap: 26px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
/* Trang "Hệ thống phòng hát": 3 hạng phòng một hàng. */
.room-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
/* Trang chủ: các nhóm sức chứa, 3 thẻ một hàng. */
.room-grid--nhom { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
/* Màn vừa (861–1050px): 3 cột thì mỗi thẻ chưa tới 300px, tên nhóm và giá
   bắt đầu xuống dòng — rút còn 2 cột, giống trang Hệ thống phòng hát. */
@media (min-width: 861px) and (max-width: 1050px) {
  .room-grid--nhom { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Tên nhóm ngắn hơn tên hạng giá ("Phòng 250,000 VND/h") nên nhỉnh hơn một
   nhịp cho dễ đọc, nhưng vẫn vừa bề ngang thẻ khi xếp 3 cột. */
.room-grid--nhom .room-body h3 { font-size: 20px; }
.rp-gia { display: inline-flex; align-items: baseline; gap: 7px; }

/* Màn vừa (861–1050px): 3 cột thì mỗi thẻ chỉ còn hơn 300px, ảnh và giá bắt
   đầu chật — rút xuống 2 cột cho dễ nhìn. */
@media (min-width: 861px) and (max-width: 1050px) {
  .room-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.room-card {
  background: var(--bg-3); border: 1px solid var(--line);
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 4px;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.room-card:hover {
  transform: translateY(-6px); border-color: var(--neon-2);
  box-shadow: 0 0 0 1px rgba(255, 47, 208, .35), 0 18px 44px rgba(255, 47, 208, .18);
}
.room-thumb {
  aspect-ratio: 4 / 3; background: #120e26 center/cover no-repeat;
  display: flex; align-items: center; justify-content: center;
  color: #33285c; font-size: 13px; letter-spacing: .2em;
}
.room-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.room-body h3 { font-size: 19px; letter-spacing: .06em; margin-bottom: .35em; }
.room-meta {
  display: flex; gap: 18px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--fg-dim); letter-spacing: .1em;
  margin-bottom: 14px; text-transform: uppercase;
}
/* Riêng CON SỐ đổi màu neon xanh cho bật hẳn lên khỏi dòng chữ xám —
   khách lướt nhanh vẫn bắt được sức chứa và diện tích. */
.room-meta b, .unit-body b.so {
  color: var(--neon-1); font-size: 14px; font-weight: 700;
  text-shadow: 0 0 10px rgba(0, 229, 255, .45);
}
.room-price {
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line);
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.room-price b { font-size: 20px; color: var(--neon-1); text-shadow: var(--glow-1); }
.room-price span { font-size: 11px; color: var(--fg-dim); letter-spacing: .12em; }

/* Dòng cho biết đang lọc theo nhóm sức chứa, kèm lối quay lại xem tất cả. */
.loc-nhom {
  text-align: center; margin: -10px 0 30px; font-size: 14px;
  color: var(--fg-dim); letter-spacing: .04em;
}
.loc-nhom b { color: var(--fg); letter-spacing: .08em; }
.loc-nhom a { color: var(--neon-1); border-bottom: 1px solid transparent; }
.loc-nhom a:hover { border-bottom-color: currentColor; }

/* Dòng khu vực trên thẻ phòng. Chữ nhỏ, màu mờ — có mặt để Google đọc và
   để khách liếc qua biết địa bàn, không tranh chỗ với tên phòng và giá. */
.room-khu {
  font-size: 12px; color: var(--fg-dim); letter-spacing: .06em;
  margin: -6px 0 14px; text-transform: uppercase;
}
.room-khu span { color: var(--fg); }
.unit-khu { font-size: 12px; color: var(--fg-dim); letter-spacing: .04em; }

/* ------------------------ Chi tiết 1 phòng ------------------------- */
.room-detail { display: grid; gap: 46px; grid-template-columns: 1.35fr .85fr; align-items: start; }
/* min-width: 0 — BẮT BUỘC. Ô của lưới mặc định rộng tối thiểu bằng nội dung
   bên trong, nên dải ảnh nhỏ của album (dài hơn màn hình, vốn để tự cuộn) lại
   kéo phình cả cột ra, làm cả trang tràn ngang trên điện thoại. */
.room-detail > * { min-width: 0; }
.room-facts {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line); background: var(--bg-3);
  margin-bottom: 30px; border-radius: 4px; overflow: hidden;
}
.room-facts div { padding: 18px 14px; text-align: center; border-right: 1px solid var(--line); }
.room-facts div:last-child { border-right: 0; }
/* Tên trường ở trên, nhỏ và mờ */
.room-facts span { display: block; font-size: 10.5px; letter-spacing: .18em; color: var(--fg-dim); text-transform: uppercase; }
/* Giá trị nằm gọn MỘT hàng: con số neon + đơn vị chữ nhỏ đi kèm */
.room-facts p { margin: 6px 0 0; font-size: 13px; color: var(--fg-dim); white-space: nowrap; }
.room-facts b { font-size: 24px; color: var(--neon-1); text-shadow: var(--glow-1); }
.room-body-text ul { list-style: none; padding: 0; }
.room-body-text li { position: relative; padding-left: 22px; margin-bottom: .55em; color: #cfc7e6; }
.room-body-text li::before { content: "▹"; position: absolute; left: 0; color: var(--neon-2); }

.book-box {
  background: var(--bg-3); border: 1px solid var(--line); padding: 28px;
  position: sticky; top: calc(var(--head-h) + 20px); border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(0, 229, 255, .12), 0 20px 50px rgba(0, 0, 0, .5);
}
/* Tiêu đề ĐẶT PHÒNG và giá nằm cùng một hàng, giá đẩy sát lề phải.
   baseline để chân chữ hai bên thẳng nhau dù cỡ chữ chênh nhau nhiều. */
.book-dau {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 6px;
}
.book-dau h3 { margin: 0; }
.book-dau .price { margin: 0; }
/* Chữ ĐẶT PHÒNG để trắng, MÃ PHÒNG mới là thứ tô neon xanh và phóng to —
   khách liếc vào biết ngay đang đặt phòng nào. Cỡ chữ mã phòng đặt bằng đúng
   cỡ số tiền ở dòng "Giá phòng" ngay dưới (17px) cho hai cụm cân nhau. */
.book-box h3 { font-size: 16px; letter-spacing: .16em; color: #fff; text-shadow: none; }
.book-box h3 .ma-phong {
  font-size: 17px; font-weight: 800; letter-spacing: .1em;
  color: var(--neon-1); text-shadow: var(--glow-1);
}
.book-box .price { font-size: 26px; color: #fff; font-weight: 700; white-space: nowrap; }
.book-box .price small { font-size: 12px; color: var(--fg-dim); font-weight: 400; letter-spacing: .1em; }
.book-box .btn { width: 100%; text-align: center; margin-top: 16px; }
.book-line { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: 14px; }
/* Dòng giá phòng (chỉ hiện ở trang một phòng cụ thể) — cho nổi hơn các dòng
   thông số bên dưới vì đây là con số khách nhìn đầu tiên. */
.book-line--gia b { font-size: 17px; color: var(--neon-1); text-shadow: var(--glow-1); }
.book-line span { color: var(--fg-dim); }
.book-fineprint { font-size: 12.5px; color: var(--fg-dim); margin: 16px 0 0; }

.gallery { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin-top: 30px; }
.gallery img { aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--line); cursor: zoom-in; border-radius: 3px; }
.gallery img:hover { border-color: var(--neon-1); }

/* ------------------ Album ảnh phòng ------------------
   Một ảnh lớn + dải ảnh nhỏ bên dưới. Bài trí giống nhau ở cả máy tính và
   điện thoại, chỉ khác cỡ. Việc trượt do trình duyệt lo (scroll-snap) nên
   trên điện thoại quẹt tay là mượt sẵn, mỗi lần quẹt dừng gọn ở một ảnh. */
.album { margin-top: 30px; }

/* ---- Khung ảnh lớn ---- */
.album-to {
  position: relative;
  border: 1px solid var(--line); border-radius: 6px; overflow: hidden;
  background: #06040f;
  box-shadow: 0 0 0 1px rgba(162, 89, 255, .16), 0 16px 40px rgba(0, 0, 0, .5);
}
.album-bang {
  display: flex;
  /* overflow-y: hidden BẮT BUỘC ghi rõ. Chỉ đặt overflow-x thì trình duyệt tự
     cho overflow-y thành auto, sinh ra thanh cuộn dọc thừa bên trong băng ảnh. */
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Chặn kiểu bấm hai lần để phóng to của điện thoại — quẹt nhanh rất dễ bị
     hiểu nhầm thành hai cú chạm, ảnh phóng to lên rồi trang mọc thanh cuộn.
     PHẢI ghi cả pan-y: chỉ để pan-x thì ngón tay đặt trúng album mà vuốt dọc
     là trang đứng im, không cuộn xuống được. Album nay nằm ngay đầu trang nên
     đó là cả một mảng lớn khách hay chạm phải. */
  touch-action: pan-x pan-y pinch-zoom;
}
.album-bang::-webkit-scrollbar { display: none; }
.album-bang > img {
  flex: 0 0 100%; width: 100%;
  /* contain chứ không cover: LUÔN hiện trọn tấm ảnh, không xén cạnh nào.
     Ảnh nào tỉ lệ khác 16:9 thì chừa dải nền hai bên, chấp nhận vậy còn hơn
     cắt mất một phần ảnh. */
  aspect-ratio: 16 / 9; object-fit: contain; background: #06040f;
  scroll-snap-align: center;
  display: block; cursor: zoom-in;
  touch-action: manipulation;
}

/* ---- Mũi tên trái / phải, nằm giữa hai mép ảnh ---- */
.album-nut {
  position: absolute; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; z-index: 2;
  font: inherit; font-size: 28px; line-height: 1; padding-bottom: 3px;
  color: var(--neon-2); cursor: pointer;
  background: rgba(4, 3, 10, .66);
  border: 1px solid var(--neon-2);
  box-shadow: 0 0 14px rgba(255, 46, 166, .45);
  transition: background .18s ease, color .18s ease, opacity .18s ease;
  touch-action: manipulation; -webkit-user-select: none; user-select: none;
}
.album-truoc { left: 12px; }
.album-sau { right: 12px; }
.album-nut:hover { background: var(--neon-2); color: #0a0818; }
/* Tới đầu / cuối thì nút mờ đi, cho biết hết ảnh rồi. */
.album-nut[disabled] { opacity: .28; cursor: default; box-shadow: none; }
.album-nut[disabled]:hover { background: rgba(4, 3, 10, .66); color: var(--neon-2); }

/* ---- Số thứ tự ở góc phải trên của ảnh ---- */
.album-dem {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  padding: 5px 14px; border-radius: 999px;
  font-size: 13px; letter-spacing: .06em; color: #fff;
  background: rgba(4, 3, 10, .8);
  border: 1px solid var(--neon-2);
  box-shadow: 0 0 12px rgba(255, 46, 166, .35);
  white-space: nowrap;
}
.album-dem b { color: var(--neon-2); font-weight: 700; }

/* ---- Dải ảnh nhỏ bên dưới ---- */
/* Chia đúng số ảnh thành bấy nhiêu cột bằng nhau, cả dải vừa khít bề ngang
   album — khách không phải kéo sang phải mới thấy hết.
   minmax(0, 1fr) để album nhiều ảnh thì ảnh nhỏ lại chứ không tràn ra ngoài. */
.album-nho {
  display: grid;
  grid-template-columns: repeat(var(--so-anh, 6), minmax(0, 1fr));
  gap: 7px; margin-top: 10px;
}
.album-nho-i {
  padding: 0; border: 1px solid var(--line); border-radius: 4px;
  background: none; cursor: pointer; overflow: hidden; line-height: 0;
  touch-action: manipulation;
  transition: border-color .18s ease, box-shadow .18s ease, opacity .18s ease;
  opacity: .55;
}
.album-nho-i img { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #06040f; display: block; }
.album-nho-i:hover { opacity: .85; border-color: var(--neon-1); }
/* Ảnh đang xem: sáng hẳn và viền neon hồng */
.album-nho-i.on {
  opacity: 1; border-color: var(--neon-2);
  box-shadow: 0 0 0 1px var(--neon-2), 0 0 14px rgba(255, 46, 166, .45);
}


/* ---- MÁY TÍNH: bỏ băng trượt, quay lại lưới hiện đủ mọi ảnh cùng lúc ----
   Màn rộng thì xem một phát thấy hết phòng, tiện hơn bấm từng ảnh. Băng trượt
   chỉ dành cho điện thoại, nơi màn hẹp không xếp lưới được. */
@media (min-width: 861px) {
  .album-to {
    border: 0; border-radius: 0; overflow: visible;
    background: none; box-shadow: none;
  }
  .album-bang {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    overflow: visible;
  }
  .album-bang > img {
    border: 1px solid var(--line); border-radius: 3px;
    /* contain: hiện trọn tấm ảnh, không xén cạnh nào — giống bản điện thoại.
       Ảnh nào tỉ lệ khác 16:9 thì chừa dải nền hai bên. */
    object-fit: contain; background: #06040f;
  }
  .album-bang > img:hover { border-color: var(--neon-1); }
  /* Lưới hiện sẵn hết ảnh nên không cần mũi tên, số thứ tự hay dải ảnh nhỏ */
  .album-nut, .album-dem, .album-nho { display: none; }
}

@media (max-width: 860px) {
  .album-nut { width: 36px; height: 36px; font-size: 23px; }
  .album-truoc { left: 7px; }
  .album-sau { right: 7px; }
  .album-dem { top: 8px; right: 8px; font-size: 12px; padding: 4px 11px; }

  /* Màn hẹp: khe hở nhỏ lại cho ảnh nhỏ được to hơn chút.
     Số cột do --so-anh quyết định (khai ở thẻ), không đặt bề ngang cố định
     nữa — đặt cố định là dải dài quá màn, lại phải kéo sang phải. */
  .album-nho { gap: 5px; }
}
/* ------------------- Phòng con trong một hạng giá ------------------- */
/* Đường dẫn quay lại: Hệ thống phòng › Hạng giá › Phòng đang xem */
.crumb {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 22px 24px 0; font-size: 13.5px; color: var(--fg-dim);
}
.crumb a:hover { color: var(--neon-1); }
.crumb span { color: #4a4270; }
.crumb b { color: #fff; font-weight: 600; }

/* Ba phòng một hàng. Trước đây để cột tự co giãn theo bề rộng tối thiểu 190px,
   nên màn rộng nhét được 5-6 phòng một hàng, thẻ nào cũng bé. Chốt 3 cột thì
   mỗi thẻ to rõ, ảnh phòng nhìn ra được. */
.unit-grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.unit-card {
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 4px;
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.unit-card:hover {
  transform: translateY(-5px); border-color: var(--neon-1);
  box-shadow: 0 0 0 1px rgba(0, 229, 255, .3), 0 14px 34px rgba(0, 229, 255, .16);
}
.unit-thumb {
  aspect-ratio: 4 / 3; background: #120e26 center/cover no-repeat;
  display: flex; align-items: center; justify-content: center; position: relative;
}
/* Phòng chưa có ảnh thì hiện mã phòng cỡ lớn cho dễ nhận ra */
.unit-code {
  font-size: 30px; font-weight: 800; letter-spacing: .06em;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: .55;
}
.unit-thumb[style] .unit-code { display: none; }
.unit-body { padding: 14px 16px 18px; display: grid; gap: 3px; }
.unit-body b { font-size: 15.5px; }
.unit-body span { font-size: 12.5px; color: var(--fg-dim); }
.unit-body span b { color: var(--neon-1); font-weight: 700; font-size: 13.5px; }
.unit-media { color: var(--neon-1) !important; letter-spacing: .04em; }

/* Giá phòng trên thẻ phòng cụ thể — cho nổi hơn dòng thông số bên dưới */
.unit-gia { color: var(--neon-2) !important; font-size: 15px !important; font-weight: 700; }
.unit-gia i { font-style: normal; font-size: 11.5px; opacity: .8; font-weight: 400; }
/* "Xem chi tiết" tách sang phải cho ra dáng một lời mời bấm vào */
.unit-media { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.unit-media em { font-style: normal; color: var(--neon-2); letter-spacing: .06em; }
.unit-card:hover .unit-media em { text-shadow: 0 0 12px rgba(255, 47, 208, .6); }

/* Số phòng con hiện trên thẻ hạng giá ở trang danh sách */
.room-units-note {
  font-size: 12px; color: var(--neon-1); letter-spacing: .1em;
  text-transform: uppercase; margin-bottom: 10px;
}

/* ------------------- Khung trống chờ tải ảnh / video ---------------- */
/* Hiện ở những chỗ chưa có ảnh, giữ đúng khoảng trống và tỷ lệ để bố cục
   không bị sập, đồng thời nhắc rõ là còn thiếu ảnh. */
.img-slot {
  display: flex; align-items: center; justify-content: center;
  background:
    repeating-linear-gradient(45deg,
      rgba(162, 89, 255, .05) 0 10px,
      transparent 10px 20px),
    var(--bg-3);
  border: 1px dashed var(--line);
  border-radius: 4px;
}
.img-slot span {
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  color: #4a4270;
}
.img-slot--tall { aspect-ratio: 3 / 4; }
.img-slot--wide { aspect-ratio: 16 / 10; }
.img-slot--card { aspect-ratio: 16 / 10; }

/* ---------------------------- VIDEO PHÒNG -------------------------- */
/* Khung video giữ đúng tỷ lệ bằng aspect-ratio, nội dung bên trong phủ kín. */
.video-frame {
  margin: 0; position: relative; overflow: hidden;
  background: #0a0818; border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(162, 89, 255, .18), 0 16px 40px rgba(0, 0, 0, .55);
}
.video-frame > video,
.video-frame > iframe {
  display: block; width: 100%; height: 100%; border: 0; object-fit: cover; background: #000;
}
.video-frame figcaption {
  padding: 10px 14px; font-size: 13px; color: var(--fg-dim);
  border-top: 1px solid var(--line); background: var(--bg-3);
}

/* 16:9 — video ngang, chiếm trọn bề ngang cột nội dung */
.video-frame.is-wide { aspect-ratio: 16 / 9; }
.video-frame.is-wide:has(figcaption) { aspect-ratio: auto; }
.video-frame.is-wide:has(figcaption) > video,
.video-frame.is-wide:has(figcaption) > iframe { aspect-ratio: 16 / 9; height: auto; }

.video-wide-stack { display: grid; gap: 18px; margin-bottom: 30px; }

/* 9:16 — video dọc, xếp thành hàng ngang cuộn được như feed TikTok */
.video-frame.is-tall { aspect-ratio: 9 / 16; }
.video-frame.is-tall:has(figcaption) { aspect-ratio: auto; }
.video-frame.is-tall:has(figcaption) > video,
.video-frame.is-tall:has(figcaption) > iframe { aspect-ratio: 9 / 16; height: auto; }

/* TikTok — khung nhúng của TikTok gồm video 9:16 CỘNG thanh tên tài khoản,
   chú thích và tên nhạc nền phía dưới. Đo thực tế hai video thì nội dung cao
   732px và 749px, tức là xê dịch theo độ dài chú thích.
   Chốt 780px: dư cho video chú thích dài, mà phần trống thừa cũng không đáng kể.
   Thiếu dù chỉ 1px là khung nhúng mọc thanh cuộn ngay giữa trang.
   Không dùng tỉ lệ (aspect-ratio) mà chốt hẳn số đo: video bên trong co theo
   bề ngang, nhưng thanh tên tài khoản và chú thích thì CAO CỐ ĐỊNH. Hai phần
   một co một không, nên không có tỉ lệ nào đúng ở mọi khổ màn hình — khung hẹp
   lại là thiếu chiều cao ngay. */
.video-frame.is-tiktok {
  /* 325px là bề ngang nhỏ nhất khung nhúng TikTok chạy được, giữ nguyên ở mọi
     khổ màn hình; hàng video vốn đã cuộn ngang được nên không sợ tràn trang. */
  width: 325px;
  aspect-ratio: auto;
}
/* Lớp cắt: khung nhúng vẫn cao đủ 780px để TikTok dựng đúng bố cục bên trong,
   nhưng chỉ phần video ở trên cùng được nhìn thấy. Mảng nền trắng bên dưới
   (tên tài khoản, chú thích, nhạc nền) bị lớp này che đi.
   Cắt theo TỈ LỆ 9:16 của chính video chứ không theo con số đếm bằng mắt —
   video luôn nằm sát mép trên và luôn là 9:16, nên cắt vậy là khít, mà bề ngang
   khung có đổi thì vẫn đúng. */
.tt-cat { aspect-ratio: 9 / 16; overflow: hidden; }
.tt-cat > iframe { display: block; width: 100%; height: 780px; border: 0; }

.video-tall-row-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; margin: 34px 0 14px;
}
.video-tall-row-head h3 { margin: 0; font-size: 16px; letter-spacing: .16em; color: var(--neon-1); text-shadow: var(--glow-1); }
.hint-inline { font-size: 12.5px; color: var(--fg-dim); }

.video-tall-row {
  display: grid; grid-auto-flow: column;
  /* Chặn trên 325px: để 1fr thì phòng nào chỉ có ĐÚNG MỘT video dọc, video đó
     sẽ giãn hết bề ngang hàng rồi cao vống lên cả mét màn hình.
     325px cũng là bề ngang nhỏ nhất khung nhúng TikTok chạy được. */
  grid-auto-columns: minmax(230px, 325px);
  align-items: start;
  gap: 16px; overflow-x: auto; padding-bottom: 10px;
  scroll-snap-type: x mandatory;
  /* Trên máy tính hiện 3 video dọc cạnh nhau, dư thì cuộn ngang */
  grid-template-columns: none;
}
.video-tall-row > .video-frame { scroll-snap-align: start; }
.video-tall-row::-webkit-scrollbar { height: 6px; }
.video-tall-row::-webkit-scrollbar-thumb { background: var(--neon-3); border-radius: 99px; }
.video-tall-row::-webkit-scrollbar-track { background: var(--bg-3); }

/* ------------------------ Combo / set tiệc ------------------------- */
.combo-grid { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.combo-card {
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 4px;
  padding: 32px 28px; display: flex; flex-direction: column;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.combo-card:hover {
  border-color: var(--neon-1); transform: translateY(-5px);
  box-shadow: 0 0 0 1px rgba(0, 229, 255, .3), 0 18px 44px rgba(0, 229, 255, .14);
}
.combo-card h3 { font-size: 22px; letter-spacing: .18em; text-align: center; }
.combo-price { text-align: center; color: var(--neon-2); font-size: 22px; font-weight: 700; text-shadow: var(--glow-2); }
.combo-note {
  text-align: center; font-size: 11.5px; letter-spacing: .22em;
  color: var(--fg-dim); text-transform: uppercase;
  padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--line);
}
.combo-card ul { list-style: none; padding: 0; margin: 0; }
.combo-card li { padding: 7px 0; border-bottom: 1px dashed #1c1636; font-size: 14.5px; color: #cfc7e6; }
.combo-card li:last-child { border-bottom: 0; }

/* --------------------- Khối mời xem menu --------------------------- */
.menu-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 34px; flex-wrap: wrap;
  padding: 44px 46px; border-radius: 6px;
  background: linear-gradient(120deg, rgba(0, 229, 255, .10), rgba(255, 47, 208, .10));
  border: 1px solid var(--line);
  box-shadow: 0 0 0 1px rgba(162, 89, 255, .22), 0 22px 60px rgba(0, 0, 0, .5);
}
.menu-cta h2 {
  font-size: clamp(24px, 3.2vw, 38px); letter-spacing: .06em;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.menu-cta p { color: var(--fg-dim); margin-bottom: .6em; max-width: 560px; }
.menu-cta-stats { display: flex; gap: 14px; margin: 0; }
.menu-cta-stats span {
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  padding: 5px 14px; border: 1px solid var(--neon-1); border-radius: 999px;
  color: var(--neon-1); box-shadow: inset 0 0 12px rgba(0, 229, 255, .14);
}

/* ------------------- Cửa sổ xem menu (preview) --------------------- */
.menu-modal {
  position: fixed; inset: 0; z-index: 95;
  display: none; flex-direction: column;
  background: rgba(4, 3, 10, .97);
  backdrop-filter: blur(6px);
}
.menu-modal.open { display: flex; }

.menu-modal-head {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 24px; border-bottom: 1px solid var(--line);
  background: #080614;
  box-shadow: 0 1px 0 rgba(0, 229, 255, .3);
}
.mm-logo { height: 34px; width: auto; }
.menu-modal-head strong { letter-spacing: .3em; font-size: 14px; color: var(--neon-1); text-shadow: var(--glow-1); }
.mm-close {
  margin-left: auto; width: 42px; height: 42px;
  background: none; border: 1px solid var(--line); border-radius: 3px;
  color: #fff; font-size: 26px; line-height: 1; cursor: pointer;
}
.mm-close:hover { border-color: var(--neon-2); color: var(--neon-2); box-shadow: var(--glow-2); }

/* Khung dưới của cửa sổ menu: cột nhóm món bên trái, nội dung bên phải.
   Mỗi cột cuộn riêng, nên cuộn danh sách món không làm mất cột nhóm. */
.mm-main {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: 232px 1fr;
}

.mm-tabs {
  display: flex; flex-direction: column; gap: 8px;
  padding: 18px 14px 26px;
  border-right: 1px solid var(--line);
  background: #070512;
  overflow-y: auto;
}
.mm-tabs a, .mm-tabs .mm-tab-pdf { flex: none; }
.mm-tabs a {
  padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 12.5px; letter-spacing: .08em; color: var(--fg-dim);
  transition: all .18s ease;
}
.mm-tabs a:hover { color: #fff; border-color: var(--neon-1); box-shadow: var(--glow-1); }

/* Nhóm món đang xem: viền neon xanh. Máy tính thì rê chuột cũng ra hiệu ứng
   này, còn khi cuộn thì main.js tự gắn class .on cho đúng nhóm — nhờ vậy trên
   điện thoại (không có chuột) kéo tới đâu nút sáng tới đó. */
.mm-tabs a.on {
  color: #fff; border-color: var(--neon-1);
  box-shadow: var(--glow-1), inset 0 0 12px rgba(0, 229, 255, .14);
}
.mm-tabs::-webkit-scrollbar { width: 6px; }
.mm-tabs::-webkit-scrollbar-thumb { background: var(--neon-3); border-radius: 99px; }

/* Nút "File menu PDF" đứng cuối hàng tab, làm nổi hơn các tab thường */
.mm-tab-pdf {
  flex: none; padding: 7px 18px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 700; letter-spacing: .08em;
  border: 2px solid transparent;
  background:
    linear-gradient(rgba(4, 3, 10, .78), rgba(4, 3, 10, .78)) padding-box,
    var(--grad) border-box;
  color: var(--neon-1);
  text-shadow: 0 0 10px rgba(0, 229, 255, .85);
  box-shadow: 0 0 16px rgba(255, 47, 208, .4);
  transition: color .18s ease, box-shadow .18s ease;
}
.mm-tab-pdf:hover { color: #fff; box-shadow: 0 0 26px rgba(255, 47, 208, .7); }

/* ------------------- Cửa sổ xem file menu PDF ---------------------- */
.pdf-modal {
  position: fixed; inset: 0; z-index: 97;
  display: none; flex-direction: column;
  background: rgba(4, 3, 10, .97);
  backdrop-filter: blur(6px);
}
.pdf-modal.open { display: flex; }
.pdf-modal-head {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px 24px; border-bottom: 1px solid var(--line); background: #080614;
  box-shadow: 0 1px 0 rgba(0, 229, 255, .3);
}
.pdf-modal-head strong {
  letter-spacing: .3em; font-size: 14px; color: var(--neon-1); text-shadow: var(--glow-1);
}
.pdf-modal-head .mm-close { margin-left: auto; }
.btn-sm { padding: 9px 20px; font-size: 12px; }

.pdf-modal-body { flex: 1; padding: 16px 24px 24px; }
.pdf-modal-body iframe {
  width: 100%; height: 100%; border: 1px solid var(--line); border-radius: 6px;
  background: #12101f;
}

/* position: relative để chính khung này làm gốc toạ độ cho các nhóm món bên
   trong. Không có nó, offsetTop của nhóm món lại đo từ cửa sổ menu (đang là
   position: fixed) — lệch mất phần đầu trang, khiến bấm nút nhảy sai chỗ và
   việc dò "đang xem nhóm nào" cũng lệch theo. */
.menu-modal-body { position: relative; overflow-y: auto; padding: 36px 24px 70px; min-height: 0; }
.menu-modal-body > * { max-width: 860px; margin-inline: auto; }

.mm-cat { margin-bottom: 46px; scroll-margin-top: 20px; }
.mm-cat-head { text-align: center; margin-bottom: 20px; }
.mm-cat-head h3 {
  font-size: clamp(19px, 2.6vw, 27px); letter-spacing: .16em; margin-bottom: .15em;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mm-sub { margin: 0; font-size: 13px; color: var(--fg-dim); letter-spacing: .18em; text-transform: uppercase; }

.mm-items { list-style: none; padding: 0; margin: 0; }
.mm-items li {
  display: flex; gap: 20px; align-items: baseline; justify-content: space-between;
  padding: 13px 0; border-bottom: 1px dashed #1c1636;
}
.mm-name b { font-size: 16px; font-weight: 600; }
.mm-name span { display: block; }
.mm-en { font-size: 12.5px; color: #7e74a6; font-style: italic; }
.mm-detail { font-size: 13px; color: var(--fg-dim); margin-top: 3px; }
.mm-flag {
  display: inline-block !important; margin-top: 5px;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  padding: 2px 9px; border-radius: 999px;
  border: 1px solid #7a5a1e; color: #f0b429; background: rgba(240, 180, 41, .1);
}
.mm-price { flex: none; font-size: 16px; font-weight: 700; color: var(--neon-1); text-shadow: var(--glow-1); }
.mm-note { margin-top: 16px; font-size: 12.5px; color: var(--fg-dim); text-align: center; }
.mm-pages { display: grid; gap: 14px; }
.mm-pages img { width: 100%; border: 1px solid var(--line); border-radius: 4px; }
.mm-foot {
  text-align: center; font-size: 12.5px; color: var(--fg-dim);
  padding-top: 24px; border-top: 1px solid var(--line);
}

/* ---------------------------- Hoạt náo ----------------------------- */
/* align-items: start — mỗi thẻ cao theo đúng nội dung của nó.
   Mặc định lưới kéo mọi thẻ cao bằng thẻ cao nhất; trộn thẻ video dọc 9:16 với
   thẻ ảnh 3:4 thì thẻ ảnh bị kéo dài ra, hở một mảng trống dưới ảnh. */
.show-grid {
  display: grid; gap: 22px; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.show-card { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 4px; }
.show-card img { aspect-ratio: 3 / 4; object-fit: cover; transition: transform .5s ease; }
.show-card:hover img { transform: scale(1.06); }
/* Khung dùng video: đổi sang tỉ lệ dọc 9:16 cho khớp video quay bằng điện thoại.
   contain để hiện trọn khung hình, không xén cạnh nào. */
.show-card.co-video { aspect-ratio: 9 / 16; background: #06040f; }
.show-card > video {
  width: 100%; height: 100%;
  object-fit: contain; display: block;
  touch-action: manipulation;
}
.show-card:hover { border-color: var(--neon-2); box-shadow: 0 0 26px rgba(255, 47, 208, .28); }
.show-cap {
  position: absolute; inset: auto 0 0 0; padding: 26px 22px;
  background: linear-gradient(transparent, rgba(4, 3, 10, .94));
}
.show-cap h3 { font-size: 18px; letter-spacing: .1em; margin-bottom: .2em; }
.show-cap p  { margin: 0; color: var(--fg-dim); font-size: 13.5px; }

/* ------------------------- Về chúng tôi ---------------------------- */
.about-split { display: grid; gap: 50px; grid-template-columns: 1fr 1fr; align-items: center; }
.stat-big {
  font-size: clamp(52px, 9vw, 110px); font-weight: 700; line-height: 1;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 20px rgba(255, 47, 208, .4));
}
.stat-label { letter-spacing: .24em; font-size: 12px; color: var(--fg-dim); text-transform: uppercase; }

/* Thanh tiến độ kiểu "đang nạp": vạch màu chạy từ 0 lên đúng con số, đồng thời
   dải gradient trôi dọc suốt chiều dài thanh nên nhìn lúc nào cũng có chuyển động.
   Chỉ chạy khi khách cuộn tới (main.js gắn class .is-on), không chạy lén lúc
   còn ở ngoài màn hình rồi khách cuộn tới thì đã xong mất. */
.bar { margin-bottom: 18px; }
.bar-top { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px; letter-spacing: .08em; }
.bar-num { color: var(--neon-1); font-weight: 700; text-shadow: var(--glow-1); font-variant-numeric: tabular-nums; }

.bar-track { height: 5px; background: #1c1636; border-radius: 99px; overflow: hidden; }
.bar-fill {
  height: 5px; width: 0;
  border-radius: 99px;
  box-shadow: var(--glow-1);
  background: linear-gradient(90deg,
    var(--neon-1), var(--neon-3), var(--neon-2), var(--neon-3), var(--neon-1));
  background-size: 200% 100%;
  animation: barFlow 3s linear infinite;
}
.bar.is-on .bar-fill {
  animation: barFlow 3s linear infinite, barLoad 1.6s cubic-bezier(.2, .7, .3, 1) forwards;
}

/* Dải màu trôi dọc thanh, chạy vô hạn */
@keyframes barFlow {
  0%   { background-position:   0% 50%; }
  100% { background-position: 200% 50%; }
}
/* Nạp từ 0 lên đúng phần trăm khai trong biến --pct */
@keyframes barLoad {
  from { width: 0; }
  to   { width: var(--pct, 100%); }
}

/* Khách bật chế độ giảm chuyển động: hiện thẳng thanh đầy, bỏ hoạt ảnh */
@media (prefers-reduced-motion: reduce) {
  .bar-fill { width: var(--pct, 100%); }
}

.amen-grid { display: grid; gap: 1px; grid-template-columns: repeat(4, 1fr); background: var(--line); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.amen-grid div { background: var(--bg-3); padding: 30px 14px; text-align: center; transition: background .2s ease; }
.amen-grid div:hover { background: #150f2c; }
.amen-grid b { display: block; letter-spacing: .16em; font-size: 15px; color: var(--neon-1); }
.amen-grid span { font-size: 12.5px; color: var(--fg-dim); }

/* Bốn dịch vụ nằm gọn trên một hàng. Không để cột tự co giãn: cách đó tính
   theo bề rộng tối thiểu nên hay rớt thẻ cuối xuống hàng dưới. */
.partner-grid { display: grid; gap: 20px; grid-template-columns: repeat(4, 1fr); }
/* Màn hình vừa (máy tính bảng, cửa sổ thu nhỏ): 4 cột thì mỗi thẻ chỉ còn hơn
   200px, địa chỉ vỡ vụn — hạ xuống 2 cột.
   Viết kèm min-width để luật này không đụng tới khổ điện thoại, bất kể nó nằm
   trước hay sau khối @media của điện thoại trong tệp. */
@media (min-width: 861px) and (max-width: 1100px) {
  .partner-grid { grid-template-columns: repeat(2, 1fr); }
}
.partner-card { background: var(--bg-3); border: 1px solid var(--line); overflow: hidden; border-radius: 4px; }
.partner-card:hover { border-color: var(--neon-3); }
.partner-card img { aspect-ratio: 16 / 10; object-fit: cover; }
.partner-card .pc-body { padding: 22px 24px 26px; }
.partner-card h3 { font-size: 16px; letter-spacing: .12em; color: var(--neon-2); text-shadow: var(--glow-2); }
.partner-card p { font-size: 14px; color: var(--fg-dim); margin-bottom: .4em; }

/* ------------------------------ FAQ -------------------------------- */
.faq-list { max-width: 860px; margin: 0 auto; }
.faq-item { border: 1px solid var(--line); background: var(--bg-3); margin-bottom: 14px; border-radius: 4px; }
.faq-item.open { border-color: var(--neon-1); box-shadow: 0 0 22px rgba(0, 229, 255, .14); }
.faq-q {
  width: 100%; text-align: left; background: none; border: 0; color: #fff;
  padding: 22px 26px; font-size: 16px; font-weight: 600; letter-spacing: .04em;
  cursor: pointer; display: flex; justify-content: space-between; gap: 16px;
  font-family: inherit;
}
.faq-q::after { content: "+"; color: var(--neon-1); font-size: 22px; line-height: 1; }
.faq-item.open .faq-q::after { content: "–"; }
.faq-a { display: none; padding: 0 26px 24px; color: var(--fg-dim); }
.faq-item.open .faq-a { display: block; }

/* Câu trả lời dạng danh sách (vd các cách đặt phòng): mỗi cách một dòng riêng */
.faq-a ul { list-style: none; padding: 0; margin: 0; }
.faq-a li { padding: 9px 0 9px 22px; position: relative; border-bottom: 1px dashed #1c1636; }
.faq-a li:last-child { border-bottom: 0; }
.faq-a li::before { content: "▹"; position: absolute; left: 0; color: var(--neon-2); }
.faq-a a { color: var(--neon-1); border-bottom: 1px solid rgba(0, 229, 255, .35); }
.faq-a a:hover { color: #fff; border-color: #fff; }

/* ---------------------------- Đặt phòng ---------------------------- */
.booking-grid { display: grid; gap: 46px; grid-template-columns: 1.4fr .8fr; align-items: start; }
.form-2col { display: grid; gap: 0 16px; grid-template-columns: 1fr 1fr; }
.form-hint { font-size: 12px; color: var(--fg-dim); margin: 6px 0 0; }

/* Ô ngày / giờ và các ô chọn.
   Bảng chọn ngày/giờ bung ra là do TRÌNH DUYỆT vẽ, CSS thường không với tới
   được — nên mặc định nó ra nền trắng chữ đen, chọi hẳn với nền tối của trang.
   color-scheme: dark là cách duy nhất bảo trình duyệt vẽ bảng đó theo tông tối;
   accent-color đổi luôn màu ô đang chọn sang xanh neon cho khớp giao diện.
   Cách này giữ nguyên bộ chọn sẵn có của máy — trên điện thoại vẫn là bánh xe
   quen thuộc, không phải học cách dùng thứ mới. */
.form-row input[type="date"],
.form-row input[type="time"],
.form-row select {
  color-scheme: dark;
  accent-color: var(--neon-1);
}

/* Icon lịch / đồng hồ: color-scheme đã tự đổi sang màu sáng, chỉ cần nhuộm
   thêm cho ngả xanh neon. */
.form-row input[type="date"]::-webkit-calendar-picker-indicator,
.form-row input[type="time"]::-webkit-calendar-picker-indicator {
  filter: sepia(1) saturate(5) hue-rotate(150deg) brightness(1.3);
  cursor: pointer;
}

/* ---------- Ô chọn ngày / giờ (trang đặt phòng) --------------------
   Bình thường chỉ là một thanh gọn như các ô khác trong form; bấm vào mới
   xổ lịch hoặc bánh xe ra. Ô gốc của trình duyệt vẫn nằm đó làm chỗ chứa
   giá trị gửi lên — lớp .da-dung do JavaScript gắn vào mới giấu nó đi, nên
   máy chặn JavaScript vẫn dùng được ô gốc. */
.o-chon { position: relative; --bx-cao: 40px; }
.o-chon.da-dung > input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }

.oc-thanh {
  touch-action: manipulation;
  width: 100%; display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 13px 15px; border-radius: 3px;
  background: var(--bg-3); border: 1px solid rgba(0, 229, 255, .3); color: #fff;
  font-family: inherit; font-size: 15px; text-align: left;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.oc-thanh > svg { width: 17px; height: 17px; flex: none; color: var(--neon-1); }
.oc-gt { flex: 1; min-width: 0; font-variant-numeric: tabular-nums; }
.oc-mui { color: var(--fg-dim); font-size: 11px; transition: transform .16s ease; }
.oc-thanh:hover { border-color: var(--neon-1); }
.o-chon.dang-mo .oc-thanh { border-color: var(--neon-1); box-shadow: var(--glow-1); }
.o-chon.dang-mo .oc-mui { transform: rotate(180deg); }

.oc-xo {
  /* manipulation: bỏ độ trễ 300ms và cú chạm hai lần phóng to màn hình */
  touch-action: manipulation;
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 40;
  min-width: 100%; max-width: calc(100vw - 32px); padding: 10px;
  border: 1px solid var(--neon-1); border-radius: 8px;
  background: #0a0818;
  box-shadow: 0 0 26px rgba(0, 229, 255, .24), 0 14px 34px rgba(0, 0, 0, .6);
}
.oc-xo[hidden] { display: none; }

/* ---------- Lịch chọn ngày ---------- */
.lich-dau { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.lich-dau b { font-size: 14px; letter-spacing: .04em; }
.lich-nut {
  width: 30px; height: 30px; flex: none; cursor: pointer; font-size: 17px; line-height: 1;
  border-radius: 6px; border: 1px solid var(--line); background: none; color: var(--neon-1);
  transition: background .16s ease, color .16s ease;
}
.lich-nut:hover { background: var(--neon-1); color: #06040f; }
/* repeat(7, 1fr) chứ không phải 36px cố định: khay rộng 327px trên điện thoại
   mà lưới chỉ 7×36+gap = 264px nên nó nằm dồn về bên trái, chừa một mảng trống
   bên phải. Chia đều thì lưới luôn ôm trọn chiều ngang khay. */
.lich-thu, .lich-o { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.lich-thu span {
  height: 24px; display: flex; align-items: center; justify-content: center;
  font-size: 11px; letter-spacing: .06em; color: var(--fg-dim);
}
.lich-ngay {
  height: 34px; cursor: pointer; border: 0; border-radius: 6px;
  background: none; color: var(--fg); font-family: inherit; font-size: 14px;
  font-variant-numeric: tabular-nums;
  transition: background .14s ease, color .14s ease;
}
.lich-ngay:hover:not(:disabled) { background: rgba(0, 229, 255, .14); color: var(--neon-1); }
.lich-ngay:disabled { color: #3a3357; cursor: default; }
.lich-ngay.la-hom-nay:not(.dang-chon) { box-shadow: inset 0 0 0 1px rgba(0, 229, 255, .45); }
.lich-ngay.dang-chon {
  background: var(--neon-1); color: #06040f; font-weight: 700;
  box-shadow: 0 0 14px rgba(0, 229, 255, .5);
}

/* ---------- Bánh xe chọn giờ kiểu iOS ---------- */
.bx {
  position: relative; display: flex; align-items: stretch; justify-content: center; gap: 4px;
  padding: 0 10px; border-radius: 10px;
  background: var(--bg-3); border: 1px solid rgba(0, 229, 255, .3);
  overflow: hidden;
}
/* Chiều cao đặt thẳng lên CỘT chứ không lên khung ngoài: khung có viền 1px,
   nếu đặt lên khung thì phần thấy được chỉ còn 118px, ba dòng 40px không vừa
   và dòng giữa lệch đi 1px. */
.bx-cot {
  position: relative; z-index: 1;
  flex: 0 0 92px; height: calc(var(--bx-cao) * 3);
  /* overflow-x PHẢI ghi rõ là hidden. Chỉ đặt overflow-y: auto thôi thì trình
     duyệt tự tính overflow-x thành auto — cột kéo ngang được, ngón tay quẹt
     lệch một chút là màn hình trôi ngang và hiện thanh cuộn thừa. */
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  /* pan-y: chỉ cho vuốt dọc. Chặn luôn cả cú chạm hai lần để không bị phóng to. */
  touch-action: pan-y;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  /* Mờ dần hai đầu cho ra đúng chất bánh xe của iOS */
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 28%, #000 72%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 28%, #000 72%, transparent);
}
.bx-cot::-webkit-scrollbar { display: none; }
.bx-cot:focus-visible { outline: 0; }
.bx-dem { height: var(--bx-cao); }
.bx-o {
  height: var(--bx-cao);
  display: flex; align-items: center; justify-content: center; gap: 5px;
  scroll-snap-align: center; cursor: pointer; user-select: none;
  font-size: 19px; font-variant-numeric: tabular-nums;
  color: var(--fg-dim); opacity: .5;
  transition: color .15s ease, opacity .15s ease, text-shadow .15s ease;
}
/* Nhãn "hôm sau" cho các giờ sau nửa đêm */
.bx-o i { font-style: normal; font-size: 10px; letter-spacing: .04em; opacity: .8; }
.bx-o.dang-chon {
  color: var(--neon-1); opacity: 1; font-size: 22px; font-weight: 600;
  text-shadow: 0 0 14px rgba(0, 229, 255, .55);
}
.bx-cham { align-self: center; color: var(--neon-1); font-size: 20px; font-weight: 600; padding-bottom: 2px; }
/* Vạch sáng đánh dấu dòng đang chọn — nằm dưới cùng, không chặn thao tác cuộn */
.bx-vach {
  position: absolute; left: 8px; right: 8px; top: 50%; height: var(--bx-cao);
  transform: translateY(-50%); pointer-events: none; z-index: 0;
  border-top: 1px solid rgba(0, 229, 255, .35);
  border-bottom: 1px solid rgba(0, 229, 255, .35);
  background: rgba(0, 229, 255, .07);
}



/* Nút XONG đóng khay chọn giờ. Chọn giờ phải qua hai cột nên không tự đóng
   sau một cú bấm như lịch được. */
.oc-xong {
  display: block; width: 100%; margin-top: 10px; padding: 11px; cursor: pointer;
  border-radius: 3px; border: 1px solid var(--neon-1);
  background: rgba(0, 229, 255, .1); color: var(--neon-1);
  font-family: inherit; font-size: 12px; font-weight: 600; letter-spacing: .16em;
  touch-action: manipulation;
  transition: background .16s ease, color .16s ease;
}
.oc-xong:hover { background: var(--neon-1); color: #06040f; }

/* ---------- Số giờ hát: nút − , ô số , nút + ----------
   Cả ba cao đúng 46px — bằng ô "Số lượng khách" bên cạnh và bằng thanh chọn
   ngày/giờ ở trên. Ô số co giãn để cụm này rộng đúng bằng ô bên trái. */
/* align-items: stretch để hai nút cao ĐÚNG BẰNG ô số, khỏi phải đoán con
   số. Ô số cao theo padding y như mọi ô khác trong form nên cả hàng khớp
   luôn với ô Số lượng khách bên cạnh. */
/* touch-action: manipulation — bấm + hoặc − thật nhanh trên điện thoại thì
   trình duyệt hiểu là chạm hai lần và PHÓNG TO trang. Dòng này bỏ hẳn cử chỉ đó,
   nút bấm liên tục bao nhiêu lần cũng được. */
.so-gio { display: flex; align-items: stretch; gap: 10px; touch-action: manipulation; }
.so-gio input[type="number"], .sg-nut { touch-action: manipulation; }
.so-gio input[type="number"] {
  flex: 1; min-width: 0; width: auto; height: auto;
  padding: 13px 12px; text-align: center;
  /* line-height ghim đúng 18px: các ô khác trong form chữ 15px cho ra dòng cao
     18px, tổng ô 46px. Ô này chữ to hơn (17px) cho dễ đọc số, nếu để dòng tự
     tính thì ô cao 48px, lệch 2px so với ô bên cạnh. */
  font-size: 17px; line-height: 18px; font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
/* Bỏ hai mũi tên nhỏ mặc định của trình duyệt — đã có nút − và + to hơn */
.so-gio input[type="number"]::-webkit-outer-spin-button,
.so-gio input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.sg-donvi { flex: none; align-self: center; font-size: 13px; color: var(--fg-dim); }
.sg-nut {
  width: 46px; flex: none; align-self: stretch; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; line-height: 1;
  border-radius: 3px; border: 1px solid var(--neon-1);
  background: rgba(0, 229, 255, .08); color: var(--neon-1);
  transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}
.sg-nut:hover:not(:disabled) {
  background: var(--neon-1); color: #06040f; box-shadow: 0 0 18px rgba(0, 229, 255, .45);
}
.sg-nut:active:not(:disabled) { transform: translateY(1px); }
.sg-nut:disabled { opacity: .3; cursor: default; border-color: var(--line); }

/* ---------- Giá ước tính ---------- */
.uoc-tinh { display: block; margin-top: 8px; font-size: 13px; color: var(--fg-dim); }
.uoc-tinh b {
  display: inline; font-size: 17px; color: var(--neon-2);
  text-shadow: 0 0 12px rgba(255, 47, 208, .45);
}
.uoc-tinh i { display: block; font-style: normal; font-size: 12px; opacity: .75; margin-top: 2px; }
/* Câu giải thích ưu đãi đang được áp dụng */
.ut-km {
  display: block; margin-top: 8px; padding: 9px 11px; border-radius: 4px;
  font-style: normal; font-size: 12px; line-height: 1.55;
  border: 1px solid rgba(0, 229, 255, .35); background: rgba(0, 229, 255, .07);
  color: var(--neon-1);
}
/* Số tiền tiết kiệm — hồng neon, to hơn hẳn phần chữ xung quanh vì đây là con
   số khách quan tâm nhất trong cả câu. */
/* Viết .uoc-tinh .ut-tien chứ không phải .ut-tien: luật ".uoc-tinh b" phía
   trên mạnh hơn một bậc, để tên lớp trơn là bị nó đè, cỡ chữ không ăn. */
.uoc-tinh .ut-tien {
  /* 14.5px = 1,2 lần cỡ chữ 12px của câu xung quanh — đủ bật lên mà không phá
     nhịp đọc của cả câu. */
  font-size: 14.5px; font-weight: 800; color: var(--neon-2);
  text-shadow: 0 0 14px rgba(255, 47, 208, .65);
  letter-spacing: .01em; white-space: nowrap;
}

/* Giá gốc gạch ngang, đứng cạnh giá đã giảm */
.uoc-tinh s { color: var(--fg-dim); font-size: 13px; opacity: .7; margin-left: 6px; }
.uoc-tinh--roi {
  margin-top: 10px; padding: 11px 15px; border-radius: 6px;
  border: 1px solid rgba(255, 47, 208, .35); background: rgba(255, 47, 208, .07);
}
.uoc-tinh[hidden] { display: none; }
/* Bên trong khối phòng đã chọn có sẵn luật ".booking-room-picked b { display:block }"
   nằm SAU đoạn này, cùng độ mạnh nên sẽ thắng. Viết rõ hơn một bậc để số tiền
   không bị xuống dòng riêng. */
.booking-room-picked .uoc-tinh b { display: inline; font-size: 17px; }

/* Khối hiện phòng khách đã chọn sẵn từ trang phòng (thay cho ô chọn phòng) */
.booking-room-picked {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 15px 18px; border-radius: 6px;
  border: 1px solid var(--neon-1);
  background: rgba(0, 229, 255, .08);
  box-shadow: inset 0 0 18px rgba(0, 229, 255, .1);
}
.booking-room-picked b { display: block; font-size: 16px; }
.booking-room-picked span { font-size: 13px; color: var(--fg-dim); }
.booking-room-picked a {
  font-size: 13px; color: var(--neon-1);
  border-bottom: 1px solid rgba(0, 229, 255, .4); white-space: nowrap;
}
.booking-room-picked a:hover { color: #fff; border-color: #fff; }

.booking-confirm-note {
  margin: 24px 0; padding: 16px 20px; border-radius: 6px;
  border: 1px solid var(--neon-3);
  background: rgba(162, 89, 255, .1);
  font-size: 14px; color: #d9d2f0;
}
.booking-confirm-note strong { color: var(--neon-3); }

/* Màn hình cảm ơn sau khi gửi đơn */
.booking-done {
  text-align: center; padding: 40px 30px;
  border: 1px solid var(--neon-1); border-radius: 8px;
  background: rgba(0, 229, 255, .07);
  box-shadow: 0 0 34px rgba(0, 229, 255, .18);
}
.booking-done-icon {
  width: 66px; height: 66px; margin: 0 auto 20px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 32px; color: #080614;
  background: var(--grad); box-shadow: var(--glow-1);
}
.booking-done h2 {
  font-size: clamp(20px, 2.6vw, 30px); letter-spacing: .08em;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.booking-done p { color: var(--fg-dim); max-width: 460px; margin: 0 auto 8px; }
.booking-done a { color: var(--neon-1); }

/* Cột phải: các cách đặt nhanh */
.booking-side {
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 6px;
  padding: 26px 24px 30px; position: sticky; top: calc(var(--head-h) + 20px);
}
.booking-side h3 { font-size: 13px; letter-spacing: .22em; color: var(--neon-1); text-shadow: var(--glow-1); }
.booking-quick {
  /* justify-content: center — icon và chữ đi thành một cụm nằm giữa nút, thay
     vì dính về mép trái để trống một khoảng dài bên phải. */
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 12px 14px; margin-bottom: 9px; border-radius: 999px;
  border: 1px solid var(--neon-1); color: var(--neon-1);
  background: rgba(4, 3, 10, .5);
  font-weight: 700; font-size: 14px;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.booking-quick svg { width: 19px; height: 19px; flex: none; }
.booking-quick:hover,
.booking-quick:focus-visible,
.booking-quick:active {
  background: var(--neon-1);
  border-color: var(--bg);
  color: var(--bg);
  transform: translateY(-2px);
  box-shadow: 0 0 22px rgba(0, 229, 255, .7);
}

/* ----------------------------- Liên hệ ----------------------------- */
.contact-grid { display: grid; gap: 46px; grid-template-columns: 1fr 1fr; align-items: start; }
.info-list { list-style: none; padding: 0; margin: 0; }
.info-list li { padding: 16px 0; border-bottom: 1px solid var(--line); }
.info-list b { display: block; font-size: 11.5px; letter-spacing: .24em; color: var(--neon-1); text-transform: uppercase; margin-bottom: 3px; }

.form-row { margin-bottom: 16px; }
.form-row label { display: block; font-size: 12px; letter-spacing: .16em; color: var(--fg-dim); text-transform: uppercase; margin-bottom: 6px; }
/* Viền ô nhập ngả xanh neon nhạt thay cho màu tím than gần như chìm vào nền —
   khách nhìn ra ngay đâu là chỗ điền được. Lúc bấm vào thì viền sáng hẳn. */
.form-row input, .form-row textarea, .form-row select {
  width: 100%; padding: 13px 15px;
  background: var(--bg-3); border: 1px solid rgba(0, 229, 255, .3); color: #fff;
  font-family: inherit; font-size: 15px; border-radius: 3px;
}
.form-row input:focus, .form-row textarea:focus, .form-row select:focus {
  outline: 0; border-color: var(--neon-1); box-shadow: var(--glow-1);
}
.form-row textarea { min-height: 130px; resize: vertical; }

.notice { padding: 14px 18px; border: 1px solid var(--neon-2); background: rgba(255, 47, 208, .12); margin-bottom: 22px; border-radius: 3px; }
.notice.ok { border-color: var(--neon-1); background: rgba(0, 229, 255, .12); }

.map-frame { width: 100%; height: 340px; border: 1px solid var(--line); border-radius: 4px; filter: grayscale(1) invert(.92) hue-rotate(180deg) contrast(.9); }

/* ---- Hai số điện thoại, mỗi số một dòng, kèm icon ---- */
.info-tel {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 0; color: var(--fg);
  transition: color .16s ease;
}
.info-tel + .info-tel { margin-top: 2px; }
.info-tel svg {
  width: 30px; height: 30px; flex: none; padding: 6px;
  border-radius: 50%; border: 1px solid var(--neon-1); color: var(--neon-1);
  background: rgba(0, 229, 255, .08);
  transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}
.info-tel span { font-size: 16px; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.info-tel:hover { color: var(--neon-1); }
.info-tel:hover svg {
  background: var(--neon-1); color: #06040f; box-shadow: 0 0 16px rgba(0, 229, 255, .5);
}

/* ---- Bản đồ trong khung viền neon ---- */
.map-khung {
  margin-top: 22px; padding: 6px; border-radius: 8px;
  border: 1px solid var(--neon-1);
  background: rgba(0, 229, 255, .05);
  box-shadow: 0 0 22px rgba(0, 229, 255, .25), inset 0 0 18px rgba(0, 229, 255, .08);
}
.map-khung .map-frame { display: block; border: 0; border-radius: 4px; margin: 0; }

/* ---- Bản web: hai cột cao bằng nhau, khối feedback nghiêng theo chuột ----
   Chỉ áp dụng từ 861px trở lên. Trên điện thoại không có con chuột, và hai cột
   xếp chồng nên cũng không có gì để cân chiều cao. */
@media (min-width: 861px) {
  /* stretch: hai cột cùng cao bằng cột dài hơn */
  .contact-grid { align-items: stretch; }

  .lh-feedback {
    display: flex; flex-direction: column;
    padding: 30px 32px; border-radius: 12px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .025);
    box-shadow: 0 0 26px rgba(0, 0, 0, .35);
    /* Chuyển động theo chuột do JavaScript đặt vào hai biến này */
    --ngx: 0deg; --ngy: 0deg; --dy: 0px;
    transform: perspective(900px) rotateX(var(--ngx)) rotateY(var(--ngy)) translateY(var(--dy));
    transition: transform .25s ease-out, border-color .25s ease, box-shadow .25s ease;
    will-change: transform;
  }
  /* Chuột đang trong khối thì viền sáng lên cho biết nó đang "sống" */
  .lh-feedback.dang-ro {
    border-color: rgba(0, 229, 255, .45);
    box-shadow: 0 0 34px rgba(0, 229, 255, .18), 0 18px 40px rgba(0, 0, 0, .45);
    transition: transform .08s ease-out, border-color .25s ease, box-shadow .25s ease;
  }
  /* Form chiếm hết phần còn lại, ô nội dung dài ra cho kín đáy khối */
  .lh-feedback form { display: flex; flex-direction: column; flex: 1; }
  .lh-feedback .form-row:has(textarea) { flex: 1; display: flex; flex-direction: column; }
  .lh-feedback textarea { flex: 1; min-height: 120px; resize: vertical; }

  /* Cột thông tin: bản đồ nở ra cho đáy hai cột bằng nhau */
  .lh-thongtin { display: flex; flex-direction: column; }
  .lh-thongtin .map-khung { flex: 1; display: flex; }
  .lh-thongtin .map-frame { height: auto; min-height: 300px; flex: 1; }
}

/* Máy nào bật chế độ hạn chế chuyển động thì đứng yên hoàn toàn */
@media (prefers-reduced-motion: reduce) {
  .lh-feedback { transform: none !important; transition: none; }
}



/* ------- Khung đặt phòng điền tại chỗ (cột phải trang phòng) -------- */
.book-form { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.book-form .form-row { margin-bottom: 12px; }
.book-form .form-row label { font-size: 11px; margin-bottom: 4px; }
.book-form input, .book-form textarea { font-size: 14px; padding: 11px 12px; }
.book-form textarea { min-height: 56px; resize: vertical; }
.book-form .so-gio input[type="number"] { padding: 11px 8px; font-size: 16px; }
.book-form .sg-nut { width: 40px; font-size: 21px; }
.book-form .uoc-tinh--roi { margin: 4px 0 14px; }
.book-form .btn-pill { width: 100%; }

/* Ô còn thiếu: viền hồng + rung nhẹ một cái cho khách nhìn ra ngay */
.o-thieu, .o-chon.o-thieu .oc-thanh {
  border-color: var(--neon-2) !important;
  box-shadow: 0 0 16px rgba(255, 47, 208, .5) !important;
  animation: oThieuRung .4s ease;
}
@keyframes oThieuRung {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-5px); }
  75%      { transform: translateX(5px); }
}
/* Câu nhắc hiện ngay dưới nút bấm */
.bf-nhac {
  margin: 10px 0 0; padding: 9px 12px; border-radius: 4px;
  border: 1px solid var(--neon-2); background: rgba(255, 47, 208, .1);
  color: var(--neon-2); font-size: 12.5px; line-height: 1.45;
}
.bf-nhac[hidden] { display: none; }

/* ---------------- Popup xác nhận trước khi gửi --------------------- */
.xn { position: fixed; inset: 0; z-index: 140; display: flex; align-items: center; justify-content: center; padding: 20px; }
.xn[hidden] { display: none; }
.xn-nen { position: absolute; inset: 0; background: rgba(3, 2, 8, .8); backdrop-filter: blur(4px); }
.xn-hop {
  position: relative; z-index: 1;
  width: min(460px, 100%); max-height: calc(100svh - 40px); overflow-y: auto;
  padding: 26px 26px 22px; border-radius: 12px;
  border: 1px solid var(--neon-1); background: #0a0818;
  box-shadow: 0 0 40px rgba(0, 229, 255, .28), 0 20px 60px rgba(0, 0, 0, .65);
  animation: xnLen .2s ease;
}
@keyframes xnLen { from { opacity: 0; transform: translateY(12px); } }
.xn-hop h3 { font-size: 17px; letter-spacing: .14em; color: var(--neon-1); margin: 0 0 8px; }
.xn-loi { margin: 0 0 16px; font-size: 13px; color: var(--fg-dim); }
/* Thiếu thông tin thì câu nhắc đổi sang hồng cho khách để ý */
.xn-loi.co-loi { color: var(--neon-2); text-shadow: 0 0 12px rgba(255, 47, 208, .5); }

.xn-bang { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0 0 16px; }
.xn-bang dt { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-dim); }
.xn-bang dd { margin: 0; font-size: 14px; color: #fff; word-break: break-word; }
.xn-tien { color: var(--neon-2) !important; font-size: 17px !important; font-weight: 700; }
.xn-tien i { display: block; font-style: normal; font-size: 11.5px; color: var(--fg-dim); font-weight: 400; }

.xn-nho {
  margin: 0 0 18px; padding: 11px 14px; border-radius: 6px;
  border: 1px solid var(--neon-3); background: rgba(162, 89, 255, .1);
  font-size: 12.5px; color: #d9d2f0;
}
.xn-nut { display: flex; gap: 10px; flex-wrap: wrap; }
.xn-nut .btn { flex: 1; min-width: 140px; justify-content: center; text-align: center; }
.xn-nut .sec {
  padding: 13px 18px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: none; color: var(--fg-dim);
  font-family: inherit; font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
}
.xn-nut .sec:hover { border-color: var(--fg-dim); color: #fff; }

/* Màn hình cảm ơn sau khi gửi xong */
.xn-xong { text-align: center; padding: 10px 0; }
.xn-tick {
  width: 58px; height: 58px; margin: 0 auto 14px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; color: #06040f; background: var(--neon-1);
  box-shadow: 0 0 26px rgba(0, 229, 255, .6);
}
.xn-xong p { color: var(--fg-dim); font-size: 13.5px; margin: 0 0 18px; }


/* ---------- Nút "Xem thêm tại" dưới ba video hoạt náo ---------- */
.xem-them { display: flex; justify-content: center; margin-top: 34px; }
.xem-them-nut {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 13px 26px 13px 30px; border-radius: 999px;
  border: 1px solid var(--neon-1); color: var(--neon-1);
  background: rgba(4, 3, 10, .55);
  font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  box-shadow: 0 0 18px rgba(0, 229, 255, .3), inset 0 0 16px rgba(0, 229, 255, .1);
  transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.xem-them-nut:hover,
.xem-them-nut:focus-visible {
  background: var(--neon-1); color: #06040f; transform: translateY(-2px);
  box-shadow: 0 0 30px rgba(0, 229, 255, .75);
}
/* Icon TikTok: cùng khuôn tròn viền neon như cụm icon mạng xã hội ở chân trang,
   khác ở chỗ nó nhấp nháy nhẹ để mắt bắt được. */
.xt-icon {
  width: 34px; height: 34px; flex: none; padding: 7px;
  border-radius: 50%; border: 1px solid currentColor;
  background: rgba(0, 229, 255, .1);
  animation: xtNhapNhay 1.6s ease-in-out infinite;
}
@keyframes xtNhapNhay {
  0%, 100% { opacity: 1;   box-shadow: 0 0 10px rgba(0, 229, 255, .45); }
  50%      { opacity: .55; box-shadow: 0 0 22px rgba(255, 47, 208, .75); }
}
.xem-them-nut:hover .xt-icon { background: rgba(6, 4, 15, .18); }

/* Máy nào bật chế độ hạn chế chuyển động thì icon đứng yên */
@media (prefers-reduced-motion: reduce) {
  .xt-icon { animation: none; }
}

@media (max-width: 860px) {
  .xem-them { margin-top: 26px; }
  .xem-them-nut { padding: 11px 20px 11px 24px; gap: 11px; font-size: 12px; }
  .xt-icon { width: 30px; height: 30px; padding: 6px; }
}


/* ---- Viền neon chạy quanh thẻ phòng ----
   Dùng cho thẻ hạng phòng (trang chủ + Hệ thống phòng hát) và thẻ từng phòng
   trong trang hạng giá.
   Một vòng gradient xanh → tím → hồng trượt vòng quanh mép thẻ, trông như dải
   đèn led đang chạy.

   Cách vẽ: một lớp phủ đè lên MÉP thẻ, rồi dùng mask khoét rỗng phần giữa nên
   chỉ còn lại cái vành 2px. Nhờ khoét rỗng mà nó không che nội dung và không
   cần bỏ overflow: hidden của thẻ.

   Bọc trong @supports: máy nào không hiểu mask-composite thì bỏ qua cả khối,
   thẻ vẫn hiện bình thường với viền cũ chứ không bị lớp phủ che mất.

   Hiệu ứng rê chuột / trượt tới (viền hồng + nẩy lên) giữ nguyên như cũ; ở đây
   chỉ cho vành sáng rõ hơn khi đó. */
@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  .room-card, .unit-card, .bao-the, .bao-chu { position: relative; }
  .room-card::before,
  .unit-card::before,
  .bao-the::before,
  .bao-chu::before {
    content: ""; position: absolute; inset: 0; z-index: 2;
    border-radius: inherit; padding: 2px; pointer-events: none;
    background: linear-gradient(115deg,
      rgba(0, 229, 255, .95) 0%,
      rgba(162, 89, 255, .95) 25%,
      rgba(255, 47, 208, .95) 50%,
      rgba(162, 89, 255, .95) 75%,
      rgba(0, 229, 255, .95) 100%);
    background-size: 300% 100%;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    animation: vienChay 7s linear infinite;
    opacity: .55;
    transition: opacity .25s ease;
  }
  /* Rê chuột hoặc trượt tới thì vành sáng hẳn lên */
  .room-card:hover::before,
  .unit-card:hover::before,
  .bao-the:hover::before,
  .bao-chu:hover::before { opacity: 1; }
}
@keyframes vienChay { to { background-position: -300% 0; } }

@media (max-width: 860px) {
  .room-card.in-view::before,
  .unit-card.in-view::before,
  .bao-the.in-view::before,
  .bao-chu.in-view::before { opacity: 1; }
}

/* Máy nào bật chế độ hạn chế chuyển động thì vành đứng yên */
@media (prefers-reduced-motion: reduce) {
  .room-card::before, .unit-card::before { animation: none; }
}

/* ------------------------------ Footer ----------------------------- */
.site-foot { background: #06040f; border-top: 1px solid var(--line); padding: 66px 24px 0; box-shadow: 0 -1px 0 rgba(162, 89, 255, .3); }
.foot-grid {
  max-width: var(--wrap); margin: 0 auto;
  display: grid; gap: 34px; grid-template-columns: 1.3fr 1fr 1fr 1.1fr;
}
.foot-logo { width: 150px; margin-bottom: 16px; filter: drop-shadow(0 0 14px rgba(0, 229, 255, .35)); }
.foot-col h4 { font-size: 12px; letter-spacing: .26em; color: var(--neon-1); text-transform: uppercase; text-shadow: var(--glow-1); }
.foot-col h4.mt { margin-top: 24px; }
.foot-col p { color: var(--fg-dim); font-size: 14px; margin-bottom: .3em; }
.foot-col a:hover { color: var(--neon-1); }
.foot-hours { font-size: 20px !important; color: #fff !important; font-weight: 700; }

/* Icon mạng xã hội ngay dưới logo ở footer.
   Bình thường: viền neon xanh cyan + quầng sáng hắt ra ngoài.
   Khi rê chuột / bấm: đổ nền gradient neon giống nút bấm, icon chuyển màu nền tối. */
.foot-social { display: flex; gap: 12px; margin: 0 0 16px; }
.foot-social a {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--neon-1);
  color: var(--neon-1);
  background: rgba(4, 3, 10, .62);
  /* Quầng sáng bên ngoài + ánh hắt nhẹ bên trong viền */
  box-shadow: 0 0 14px rgba(0, 229, 255, .55), inset 0 0 12px rgba(0, 229, 255, .16);
  transition: color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.foot-social svg { width: 19px; height: 19px; display: block; }

.foot-social a:hover,
.foot-social a:focus-visible,
.foot-social a:active {
  background: var(--neon-1);
  border-color: var(--bg);
  color: var(--bg);
  transform: translateY(-3px);
  box-shadow: 0 0 26px rgba(0, 229, 255, .8);
}
.foot-bar {
  max-width: var(--wrap); margin: 46px auto 0; padding: 22px 0;
  border-top: 1px solid var(--line); text-align: center;
  font-size: 12.5px; color: #6a5f92;
}

/* ---------------------- Nút liên hệ nhanh -------------------------- */
/* Dùng chung đúng kiểu với icon mạng xã hội ở footer: viền neon xanh, quầng
   sáng hắt ra ngoài; rê chuột hoặc bấm thì đổ nền gradient neon. */
.quick-contact { position: fixed; right: 16px; bottom: 16px; z-index: 70; display: grid; gap: 10px; }
.qc {
  width: 50px; height: 50px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--neon-1);
  color: var(--neon-1);
  background: rgba(4, 3, 10, .62);
  backdrop-filter: blur(6px);
  box-shadow: 0 0 14px rgba(0, 229, 255, .55), inset 0 0 12px rgba(0, 229, 255, .16);
  transition: color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.qc svg { width: 22px; height: 22px; display: block; }

.qc:hover, .qc:focus-visible, .qc:active {
  background: var(--neon-1);
  border-color: var(--bg);
  color: var(--bg);
  transform: translateY(-3px);
  box-shadow: 0 0 26px rgba(0, 229, 255, .8);
}

/* Riêng nút gọi rung nhẹ theo nhịp để khách để ý */
.qc-tel { animation: ring 2.6s ease-in-out infinite; }
@keyframes ring { 0%, 82%, 100% { transform: scale(1); } 86% { transform: scale(1.12); } 92% { transform: scale(1.05); } }
.qc-tel:hover, .qc-tel:focus-visible { animation: none; }

/* ------------------------------ Lightbox --------------------------- */
.lb {
  position: fixed; inset: 0; z-index: 90; background: rgba(4, 3, 10, .95);
  display: none; align-items: center; justify-content: center;
  /* Chừa nhiều chỗ phía trên: nút đóng nằm ở góc phải trên màn hình, còn số
     thứ tự nằm ở góc phải trên ẢNH. Không chừa thì hai thứ đè lên nhau. */
  padding: 70px 30px 30px;
  /* Chặn kiểu bấm hai lần để phóng to: khách bấm nhanh liên tiếp để chuyển
     ảnh, điện thoại rất dễ hiểu nhầm thành cú bấm đúp rồi phóng to cả trang. */
  touch-action: manipulation;
}
.lb.open { display: flex; }
/* Khung co đúng bằng ảnh, để số thứ tự neo được vào mép ảnh */
.lb-khung { position: relative; display: flex; max-width: 92vw; }
.lb img { max-width: 100%; max-height: 80vh; object-fit: contain; box-shadow: 0 0 60px rgba(0, 229, 255, .25); touch-action: manipulation; }
.lb-close { position: absolute; top: 18px; right: 24px; font-size: 34px; color: var(--neon-1); background: none; border: 0; cursor: pointer; }

/* Nút chuyển ảnh — viền neon hồng, cùng tông với viền album lúc rê chuột. */
.lb-nav {
  touch-action: manipulation; -webkit-user-select: none; user-select: none;
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font: inherit; font-size: 34px; line-height: 1; padding-bottom: 4px;
  color: var(--neon-2); cursor: pointer;
  background: rgba(4, 3, 10, .72);
  border: 2px solid var(--neon-2);
  box-shadow: 0 0 14px rgba(255, 46, 166, .55);
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.lb-prev { left: 22px; }
.lb-next { right: 22px; }
/* Bấm vào thì đảo màu, giống cụm nút mạng xã hội ở chân trang. */
.lb-nav:hover { background: var(--neon-2); color: #0a0818; box-shadow: 0 0 24px rgba(255, 46, 166, .8); }
.lb-nav[hidden] { display: none; }

/* Số thứ tự ảnh đang xem, ví dụ 3 / 8 */
/* Số thứ tự nằm trong góc phải TRÊN của ảnh (không phải của màn hình) */
.lb-dem {
  position: absolute; top: 12px; right: 12px;
  padding: 6px 16px; border-radius: 999px;
  font-size: 13px; letter-spacing: .12em; color: var(--neon-2);
  background: rgba(4, 3, 10, .72);
  border: 1px solid var(--neon-2);
  box-shadow: 0 0 12px rgba(255, 46, 166, .4);
}
.lb-dem[hidden] { display: none; }

/* Điện thoại: nút nhỏ lại và nằm sát mép, chừa chỗ cho ảnh. Khách cũng có thể
   quẹt ngang để chuyển ảnh nên không cần nút to. */
@media (max-width: 860px) {
  /* Chừa 60px phía trên cho nút đóng, khỏi đè lên số thứ tự ở góc ảnh */
  .lb { padding: 60px 16px 16px; }
  .lb-nav { width: 42px; height: 42px; font-size: 26px; }
  .lb-prev { left: 8px; }
  .lb-next { right: 8px; }
  /* Điện thoại: ảnh nhỏ nên số thứ tự đặt XUỐNG DƯỚI ảnh, không đè lên ảnh.
     Đè lên thì cái nhãn che mất hẳn một góc ảnh — màn hẹp trông rất rõ. */
  .lb-khung { max-width: 100%; flex-direction: column; align-items: center; }
  .lb img { max-width: 100%; max-height: 72vh; }
  .lb-dem {
    position: static; margin-top: 12px;
    font-size: 12px; padding: 5px 14px;
  }
}

/* ------------------------------ Mobile ----------------------------- */
@media (max-width: 1080px) {
  .room-detail, .about-split, .contact-grid { grid-template-columns: 1fr; }
  .book-box { position: static; }
  .amen-grid { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .menu-cta { padding: 34px 28px; }
}

@media (max-width: 860px) {
  :root { --head-h: 70px; }

  /* BỎ backdrop-filter trên điện thoại — bắt buộc, không phải để cho đẹp.
     Thẻ nào có backdrop-filter sẽ trở thành khung tham chiếu cho mọi
     position: fixed nằm bên trong nó. Header cao 70px, nên khay menu
     (position: fixed) bị nhốt trong 70px đó và chỉ hiện ra một mẩu.
     Thay bằng nền đục hẳn: nhìn y hệt mà menu bung đúng toàn màn hình. */
  /* Chặn kiểu "kéo quá đà" của trình duyệt điện thoại: kéo xuống ở đầu trang
     là Chrome/Safari đẩy cả trang tụt xuống (để lộ vòng tròn tải lại), thanh
     menu tụt theo và hở ra một dải nền phía trên. Chặn cái đó thì thanh menu
     luôn dính mép trên. */
  html, body { overscroll-behavior-y: none; }

  .site-head {
    padding: 0 18px; gap: 14px;
    backdrop-filter: none;
    /* Nền đậm 80%, vẫn hé thấy nội dung trang chạy phía dưới.
       Vẫn KHÔNG dùng backdrop-filter (làm mờ hậu cảnh) dù nhìn sẽ đẹp hơn:
       thuộc tính đó biến thanh menu thành khung chứa của khay menu bên trong,
       khay bị nhốt trong 70px chiều cao thanh menu và chỉ bung ra một mẩu. */
    background: rgba(6, 4, 15, .8);
  }
  /* Nền đã trong suốt 80% nên logo và nút ba gạch có lúc nằm đè lên ảnh sáng.
     Thêm bóng đen mờ sát viền để luôn đọc được, mà không phải làm nền đậm lại.
     Chỉ nhắm đúng hai thứ này, KHÔNG đặt lên cả thanh menu — khay menu là con
     của thanh menu, dính hiệu ứng vào là hỏng cách nó bung ra. */
  .site-head .brand img,
  .site-head .nav-toggle {
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .95)) drop-shadow(0 0 8px rgba(0, 0, 0, .7));
  }
  .head-book { display: none; }
  .nav-toggle { display: flex; }
  /* Khay menu chỉ chiếm NỬA bên phải màn hình, nửa còn lại vẫn nhìn thấy trang.
     Đặt min-width để trên máy hẹp khay không bị bóp quá nhỏ, đọc không nổi. */
  .nav {
    position: fixed; top: var(--head-h); right: 0; bottom: 0; left: auto;
    /* 60% bề ngang. Sàn không được xuống dưới 204px: mục con dài nhất
       "Phòng 250,000 VND/h" cần 55px thụt lề + 129px chữ + 20px lề phải, hẹp
       hơn là xuống dòng (đúng lỗi hồi khay còn 50%). 60% ra 225px ở khổ 375px,
       dôi 21px — vừa an toàn vừa để lộ thêm phần trang phía sau. */
    width: 60%; min-width: 218px; margin: 0;
    background: #06040f;
    border-left: 1px solid var(--neon-1);
    box-shadow: -14px 0 40px rgba(0, 0, 0, .65), -1px 0 22px rgba(0, 229, 255, .28);
    padding: 22px 20px; overflow-y: auto;
    flex-direction: column; align-items: stretch; gap: 20px;
    transform: translateX(100%); transition: transform .28s ease;
  }
  .nav.open { transform: none; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list > li > a { padding: 15px 0; border-bottom: 1px solid var(--line); }
  .has-sub > a::after { content: ""; }

  /* Mục cha đang mở ("PHÒNG HÁT") KHÔNG kẻ gạch chân neon.
     Trên máy tính gạch chân neon là dấu hiệu "bạn đang ở trang này" — hợp lý vì
     mục nào cũng dẫn thẳng tới một trang. Trong khay điện thoại thì khác: ngay
     dưới mục cha là ba mục con, nên vạch sáng nằm lửng giữa hai khối, đọc ra
     thành một cái vạch xanh vô nghĩa chứ không ra dấu hiệu gì.
     Vẫn giữ vạch xám như các mục khác để có ranh giới, còn việc báo "đang ở
     đây" giao cho chữ trắng phát sáng — đủ rõ mà không sinh vạch lạ.

     Viết đủ .nav-list > li.has-sub là có chủ ý: luật gốc ở trên là
     `.nav-list > li > a.is-active` (2 lớp + 2 thẻ). Viết ngắn `.has-sub > a.is-active`
     chỉ được 2 lớp + 1 thẻ nên THUA, luật không ăn — nằm trong @media cũng không
     giúp gì, vì @media không cộng thêm điểm ưu tiên nào. */
  .nav-list > li.has-sub > a.is-active { border-bottom-color: var(--line); }
  .sub {
    position: static; opacity: 1; visibility: visible; transform: none;
    border: 0; background: none; padding: 4px 0 12px 14px; min-width: 0; box-shadow: none;
  }
  .sub a { padding: 8px 0; }
  /* Điện thoại: giấu cụm VI/EN ngoài thanh, dùng cụm nằm trong khay menu */
  .lang-switch:not(.lang-khay) { display: none; }
  .lang-switch.lang-khay { display: flex; flex: none; padding: 2px; }
  .lang-switch.lang-khay a { padding: 5px 9px; font-size: 11px; }

  /* Hàng đầu khay (HOME) thành một hàng ngang: chữ bên trái, VI/EN sát lề phải.
     Gạch chân chuyển từ thẻ <a> lên <li> — để trên <a> thì đường kẻ đứt ngang
     chỗ cụm VI/EN, trông như kẻ hụt. */
  .nav-list > li:first-child {
    display: flex; align-items: center; gap: 10px;
    border-bottom: 1px solid var(--line);
  }
  .nav-list > li:first-child > a { flex: 1; border-bottom: 0; }
  .section { padding: 60px 0; }
  .foot-grid { grid-template-columns: 1fr; }
  /* Ba ô thông số nằm CÙNG MỘT HÀNG trên điện thoại. Xếp ba hàng chồng lên
     nhau thì chiếm gần nửa màn hình đầu tiên, mà khung Đặt phòng phía dưới đã
     ghi lại đủ sức chứa, diện tích và giá rồi. */
  .room-facts { grid-template-columns: repeat(3, 1fr); }
  .room-facts div { padding: 14px 6px; border-right: 1px solid var(--line); border-bottom: 0; }
  .room-facts div:last-child { border-right: 0; }
  .room-facts b { font-size: 16px; }
  .room-facts span { font-size: 8.5px; letter-spacing: .06em; }
  .room-facts p { font-size: 10.5px; margin-top: 4px; }
  /* Điện thoại VẪN chạy video nền, nhưng main.js nạp bản 720p nhẹ hơn
     (xem data-src-m trong index.php) nên không tốn 4G của khách. */
  .booking-grid { grid-template-columns: 1fr; }
  .form-2col { grid-template-columns: 1fr; }
  /* Khung đặt phòng trên điện thoại rộng 269px, mà tiêu đề 103px + giá 159px
     = 274px — thừa 5px nên giá rớt xuống hàng dưới. Thu giá còn 22px là vừa. */
  .book-box .price { font-size: 22px; }
  .book-dau { gap: 10px; }

  /* Riêng cặp "số giờ / số khách" vẫn giữ hai cột trên điện thoại. Cột số giờ
     rộng gấp rưỡi vì phải chứa nút −, ô số và nút +; khung hẹp thì nút thu nhỏ
     lại và bỏ chữ "giờ" — nhãn phía trên đã nói rõ rồi, ghi lại là thừa. */
  /* align-items: end — nhãn "Số lượng khách" bản tiếng Anh xuống 2 dòng còn
     nhãn kia 1 dòng, canh theo đáy thì hai ô nhập vẫn thẳng hàng nhau. */
  .form-2col--gio-khach { grid-template-columns: 1.6fr 1fr; gap: 0 10px; align-items: end; }
  .form-2col--gio-khach .so-gio { gap: 6px; }
  .form-2col--gio-khach .sg-nut { width: 38px; font-size: 20px; }
  .form-2col--gio-khach .sg-donvi { display: none; }
  .form-2col--gio-khach .so-gio input[type="number"] { padding-left: 4px; padding-right: 4px; }
  .booking-side { position: static; }
  /* Địa chỉ phải nằm gọn đúng 2 dòng. Cỡ chữ tiêu đề mặc định (24px ở khổ này)
     làm mỗi nửa địa chỉ lại tự xuống dòng, hoá ra 4 dòng.
     Đo trên màn 375px: 17px là mức lớn nhất còn giữ đúng 2 dòng, nên lấy cỡ co
     giãn theo bề ngang màn hình để máy hẹp hơn cũng không vỡ dòng. */
  /* Phải viết đủ ".sec-head h2.addr-hoa": luật cỡ chữ tiêu đề là ".sec-head h2",
     chỉ ghi ".addr-hoa" không thì không đủ mạnh để đè lên. */
  .sec-head h2.addr-hoa { font-size: clamp(14px, 4.3vw, 34px); }

  /* Điện thoại: các dịch vụ cùng hệ thống xếp một cột. Hai cột trên màn hẹp
     thì ảnh bé xíu mà địa chỉ vỡ vụn thành cả chục dòng. */
  .partner-grid { grid-template-columns: 1fr; }

  .video-tall-row { grid-auto-columns: minmax(200px, 78%); }
  /* Hàng có video TikTok thì cột đúng bằng 325px, không co theo màn hình —
     khung nhúng TikTok hẹp hơn mức đó là vỡ bố cục bên trong nó. */
  .video-tall-row:has(.is-tiktok) { grid-auto-columns: 325px; }
  .menu-cta { flex-direction: column; align-items: flex-start; }
  .mm-items li { flex-direction: column; gap: 4px; }
  .mm-price { align-self: flex-start; }
}

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

/* Nút trông như một link — dùng cho "Chọn phòng khác" trong form đặt phòng.
   Phải là <button> để bấm vào thì form gửi kèm dữ liệu khách đã điền, nhưng
   nhìn vẫn nhẹ như link chứ không nặng như một nút bấm thật. */
.link-btn {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--neon-1);
  border-bottom: 1px solid rgba(0, 229, 255, .4); white-space: nowrap;
}
.link-btn:hover { color: #fff; border-color: #fff; }

/* Địa chỉ dưới chữ "ĐẶT PHÒNG NGAY" ở trang chủ — in hoa toàn bộ.
   Làm bằng CSS chứ không sửa dữ liệu, để địa chỉ ở footer và trang liên hệ
   vẫn giữ nguyên cách viết hoa thường bình thường. */
/* Địa chỉ ở khối "Đặt phòng ngay" — in hoa, ngắt sẵn 2 dòng bằng thẻ <br>.
   Cỡ chữ trên điện thoại chỉnh riêng ở cuối tệp. */
.addr-hoa { text-transform: uppercase; }

/* =====================================================================
   ĐIỆN THOẠI — VIỀN NEON HỒNG KHI LƯỚT TỚI
   Trên máy tính, thẻ phòng và ảnh album sáng viền hồng khi rê chuột.
   Điện thoại không có chuột, nên main.js gắn class .in-view cho thẻ nào
   đang nằm giữa màn hình, và class đó dựng lại đúng hiệu ứng viền hồng.
   Chỉ bật dưới 860px — trên máy tính vẫn dùng rê chuột như cũ.
   ===================================================================== */
@media (max-width: 860px) {
  .room-card.in-view,
  .unit-card.in-view,
  .partner-card.in-view,
  .show-card.in-view,
  .bao-the.in-view,
  .bao-chu.in-view {
    border-color: var(--neon-2);
    box-shadow: 0 0 0 1px rgba(255, 47, 208, .45), 0 0 30px rgba(255, 47, 208, .3);
  }

  .gallery img.in-view,
  .video-frame.in-view {
    border-color: var(--neon-2);
    box-shadow: 0 0 0 1px rgba(255, 47, 208, .45), 0 0 28px rgba(255, 47, 208, .32);
  }

  /* Chuyển mượt vào/ra thay vì nhảy phịch */
  .room-card, .unit-card, .partner-card, .show-card,
  .gallery img, .video-frame {
    transition: border-color .3s ease, box-shadow .3s ease;
  }

  /* Từng loại phòng trong menu xổ có dấu ▹ phía trước,
     dùng chung ký hiệu với danh sách ở mục Hình thức thanh toán.

     Xếp bằng flex và canh theo ĐƯỜNG CHÂN CHỮ (align-items: baseline) thay vì
     đặt toạ độ tuyệt đối. Cách cũ phải đoán một con số top cố định, mà con số
     đó chỉ đúng với đúng một cỡ chữ — đổi cỡ chữ hay khoảng đệm là dấu lệch
     ngay. Canh theo chân chữ thì dấu luôn nằm đúng hàng với chữ. */
  .sub li {
    display: flex;
    align-items: baseline;
    gap: 9px;
    font-size: 13px;   /* để dấu ▹ cùng cỡ với chữ bên cạnh */
  }
  .sub li::before {
    content: "▹";
    color: var(--neon-2);
    flex: none;
  }
  .sub li a { flex: 1; }
}

/* Nút gọi ở cuối trang Menu — tách khỏi dòng chữ phía trên cho thoáng */
.sec-head p + p { margin-top: 22px; }

/* ---------------------------------------------------------------------
   MÁY TÍNH — dấu ▹ hồng chỉ vào mục đang rê chuột trong menu xổ.
   Dấu luôn có mặt nhưng để trong suốt, chỉ hiện màu khi rê chuột, nhờ vậy
   chữ không bị xê dịch lúc dấu xuất hiện.
   --------------------------------------------------------------------- */
@media (min-width: 861px) {
  .sub li {
    display: flex; align-items: baseline; gap: 8px; padding-left: 20px;
    transition: background .15s ease;
  }
  .sub li::before {
    content: "▹";
    color: transparent;
    flex: none;
    font-size: 13px;
    transition: color .18s ease;
  }
  .sub li:hover::before { color: var(--neon-2); }
  .sub li a { flex: 1; padding-left: 0; }

  /* Nền sáng đặt ở cả dòng chứ không riêng phần chữ, để mảng màu phủ trọn
     nút — kể cả chỗ đứng của dấu ▹. Đặt ở thẻ chữ thì dấu nằm ngoài vùng
     phủ, nhìn như bị bỏ sót một góc. */
  .sub li:hover { background: rgba(162, 89, 255, .18); }
  .sub li:hover > a { background: none; color: #fff; }
}

/* ---------------------------------------------------------------------
   ĐIỆN THOẠI — cột nhóm món trong cửa sổ menu quay lại nằm ngang trên đầu.
   Màn hình hẹp mà chia cột dọc thì phần menu chỉ còn hơn nửa bề ngang,
   tên món dài xuống 3-4 dòng, đọc rất mệt.
   --------------------------------------------------------------------- */
@media (max-width: 860px) {
  /* Điện thoại: một phòng một hàng như cũ. Màn hẹp mà chia cột thì mã phòng
     và giá chen chúc, ảnh phòng cũng bé không nhìn ra gì.
     Đặt ở khối @media CUỐI tệp: luật gốc 3 cột nằm phía trên, mà hai luật
     cùng độ mạnh thì luật đứng sau thắng — để trên là bị đè ngược lại. */
  .unit-grid { grid-template-columns: 1fr; gap: 14px; }

  /* Điện thoại: nút tìm đứng SÁT nút ba gạch (cách 8px), to bằng nút ba gạch
     (42px), và mượn đúng kiểu của cụm icon mạng xã hội ở chân trang:
     viền neon xanh, quầng sáng ngoài, ánh hắt trong; bấm vào thì đảo màu. */
  .nav-tim {
    /* margin-left: auto — trước đây cụm VI/EN đẩy nhóm icon sang phải, nay
       VI/EN đã dọn vào khay menu nên kính lúp nhận việc đó. */
    margin-left: auto; margin-right: 8px;
    width: 42px; height: 42px;
    border: 1px solid var(--neon-1);
    background: rgba(4, 3, 10, .62);
    box-shadow: 0 0 14px rgba(0, 229, 255, .55), inset 0 0 12px rgba(0, 229, 255, .16);
  }
  .nav-tim svg { width: 19px; height: 19px; display: block; }
  .nav-tim:hover,
  .nav-tim:focus-visible,
  .nav-tim:active {
    background: var(--neon-1);
    border-color: var(--bg);
    color: var(--bg);
    box-shadow: 0 0 26px rgba(0, 229, 255, .8);
  }
  /* Nút ba gạch tự đẩy sang phải; có kính lúp thì nhường việc ấy cho kính lúp.
     Viết theo cặp như thế này vì trang tiếng Trung KHÔNG có kính lúp (ô tìm kiếm
     tìm trong kho tiếng Việt). Hồi chỉ có mỗi luật `.nav-toggle { margin-left: 0 }`,
     bỏ kính lúp đi là không còn thứ nào đẩy, nút ba gạch rơi vào giữa thanh. */
  .nav-toggle { margin-left: auto; }
  .nav-tim ~ .nav-toggle { margin-left: 0; }

  /* Nút gửi yêu cầu là thẻ inline-block nên chỉ rộng bằng chữ bên trong —
     nằm lệch về trái, chừa một khoảng trống bên phải. Giữ nguyên kích thước
     như mọi nút khác, chỉ đẩy ra giữa: width fit-content để nút vẫn ôm sát chữ
     (nếu để width tự động thì display:block sẽ kéo nó rộng hết khung). */
  .booking-grid form .btn-lg {
    display: block; width: fit-content; margin-left: auto; margin-right: auto;
  }

  /* iPhone TỰ PHÓNG TO trang khi khách bấm vào ô nhập có cỡ chữ dưới 16px.
     Không có cách nào tắt riêng hành vi đó (chặn bằng maximum-scale thì khách
     hết phóng to đọc được cả trang — hại hơn lợi). Cách đúng là để cỡ chữ đủ
     16px, máy sẽ không phóng nữa. */
  .form-row input, .form-row textarea, .form-row select,
  .book-form input, .book-form textarea,
  .so-gio input[type="number"], .oc-thanh, .kt-thanh input {
    font-size: 16px;
  }

  .tk-form { flex-direction: column; }

  /* Điện thoại: hạng phòng cũng một thẻ một hàng như trước.
     Phải đặt ở khối cuối tệp vì luật 3 cột nằm phía trên, cùng độ mạnh thì
     luật nào viết sau thắng. */
  .room-grid--3 { grid-template-columns: 1fr; gap: 18px; }
  /* Nhóm sức chứa: điện thoại xếp một thẻ một hàng. Ép 2 cột ở đây thì
     mỗi thẻ chỉ còn ~165px, ảnh phòng bé xíu mà chữ giá thì xuống dòng. */
  .room-grid--nhom { grid-template-columns: 1fr; gap: 18px; }
  .room-grid--nhom .room-body h3 { font-size: 20px; }

  .mm-main { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .mm-tabs {
    flex-direction: row; overflow-x: auto; overflow-y: hidden;
    white-space: nowrap; padding: 12px 16px;
    border-right: 0; border-bottom: 1px solid var(--line);
  }
  .mm-tabs::-webkit-scrollbar { height: 5px; width: auto; }
}

/* ==================================================================== *
 *  BLOG — "tờ báo đến từ tương lai"
 *
 *  Ý đồ: giữ đúng cách bố trí của một tờ báo giấy (măng-sét, bài chủ, cột,
 *  chữ có chân, gạch phân cách) nhưng thay giấy bằng nền tối và mực bằng
 *  neon. Chính sự lệch pha đó tạo cảm giác "báo từ tương lai" — nếu bỏ luôn
 *  cấu trúc báo thì chỉ còn một trang blog tối màu bình thường.
 *
 *  Viền tờ báo dùng CHUNG kỹ thuật gradient với nút .btn-pill: hai lớp nền,
 *  lớp trong đặc phủ padding-box, lớp ngoài là dải gradient phủ border-box,
 *  viền để trong suốt nên nhìn xuyên xuống thấy dải màu.
 * ==================================================================== */

/* BỎ CHỮ CÓ CHÂN — dùng chung font với cả web.

   Trước đây đặt Georgia cho ra chất báo giấy. Sai: Georgia (và cả Times New
   Roman) KHÔNG có sẵn chữ Việt dựng sẵn cho các âm dấu chồng hai tầng — ấ, ầ,
   ế, ề, ố, ồ, ộ… Gặp mấy chữ đó trình duyệt phải ghép: lấy "â" của Georgia
   rồi chồng dấu sắc lấy từ một font khác. Ghép ra chữ lệch hẳn, đọc thành
   "cô ́" thay vì "cố", "nhâ ́t" thay vì "nhất". Cả bài viết tiếng Việt
   thành lỗ chỗ.

   Roboto tự host trong assets/fonts có ĐỦ bộ chữ Việt dựng sẵn — đó chính là
   lý do trang này tự host thay vì lấy font hệ thống. Thân bài dùng lại nó.
   Khai qua biến để mọi chỗ đang gọi --font-bao đổi theo một lượt. */
:root { --font-bao: var(--font); }

/* Trang blog KHÔNG có khối ảnh đầu trang như các trang khác, mà thanh menu thì
   nằm đè cố định trên cùng. Không tự chừa chỗ ra thì dòng "SỐ RA …" của măng-sét
   chui tọt xuống dưới thanh menu. Các trang khác không dính lỗi này vì khối
   .page-hero của chúng đã cộng sẵn var(--head-h) vào phần đệm trên. */
.bao { padding: calc(var(--head-h) + 40px) 0 90px; }

.bao-khung {
  position: relative;
  border: 2px solid transparent;
  border-radius: 6px;
  background:
    linear-gradient(rgba(8, 6, 20, .96), rgba(8, 6, 20, .96)) padding-box,
    var(--grad) border-box;
  box-shadow:
    0 0 24px rgba(255, 47, 208, .28),
    0 0 48px rgba(0, 229, 255, .16),
    0 24px 70px rgba(0, 0, 0, .6);
  padding: 40px 44px 52px;
}

/* ------------------------- Măng-sét (tên báo) ----------------------- */
.bao-mang { text-align: center; }
.bao-mang-tren, .bao-mang-duoi {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--fg-dim);
}
.bao-mang-tren { padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.bao-mang-duoi { padding-top: 10px; border-top: 1px solid var(--line); }

.bao-ten {
  margin: 18px 0 6px;
  font-size: clamp(34px, 7vw, 76px);
  font-weight: 700; letter-spacing: .16em;
  line-height: 1.4; padding-top: .1em;   /* chừa chỗ cho dấu — xem ghi chú ở .neon-text */
  text-transform: uppercase;   /* măng-sét báo luôn in hoa; tên lưu trong code
                                  viết thường để còn dùng lại ở menu và thẻ title */
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 18px rgba(255, 47, 208, .45));
}
/* Măng-sét của trang chuyên đề: tên chuyên đề dài gấp đôi tên tờ báo ("Sinh
   nhật, gia đình & hội nhóm" là 30 ký tự so với 15), để nguyên cỡ 76px là vỡ
   xuống hai dòng và chữ cuối trơ lại một mình. Cỡ nhỏ hơn và giãn chữ hẹp lại
   cho gọn đúng một dòng trên máy tính. */
.bao-ten--cd {
  font-size: clamp(21px, 3.3vw, 40px); letter-spacing: .1em;
}
.bao-phu {
  margin: 0 0 18px; font-family: var(--font-bao); font-style: italic;
  font-size: 15px; color: var(--fg-dim);
}

/* Hàng chuyên đề dưới măng-sét: bốn cửa vào bốn mảng nội dung. Kẻ ô như mấy
   chuyên mục in trên đầu trang nhất của báo giấy. */
/* Hàng chuyển chuyên đề. Số ô thay đổi theo số chuyên đề đang có bài, cộng
   thêm ô "Tất cả" — nên chia cột tự co thay vì đóng cứng 4 cột, không thì thêm
   một chuyên đề là hàng vỡ. */
.bao-hang-cd {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 12px;
  margin-top: 26px;
}
.bao-hang-cd a {
  display: block; text-align: center; padding: 13px 10px;
  border: 1px solid var(--line); border-radius: 4px;
  background: rgba(162, 89, 255, .05);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.bao-hang-cd a:hover {
  transform: translateY(-3px); border-color: var(--neon-2);
  box-shadow: 0 0 18px rgba(255, 47, 208, .3);
}
.bao-hang-cd b {
  display: block; font-size: 13.5px; line-height: 1.35; color: #fff;
  margin-bottom: .35em;
}
.bao-hang-cd a:hover b { text-shadow: var(--glow-2); }
/* Ô của chuyên đề đang xem: sáng sẵn, không đợi rê chuột.
   Lớp trong PHẢI ĐỤC. Lần đầu tôi để nó là rgba mờ, thế là dải gradient của lớp
   border-box hiện xuyên qua và tô kín cả ô — nút thành một mảng màu đặc, chữ số
   bài chìm hẳn. Đây đúng là lỗi từng gặp ở ô CTA, ghi lại để khỏi vấp lần ba. */
.bao-hang-cd a.dang {
  border-color: transparent;
  background:
    linear-gradient(#1a1139, #140d2b) padding-box,
    var(--grad) border-box;
  box-shadow: 0 0 20px rgba(162, 89, 255, .26);
}
.bao-hang-cd a.dang b { text-shadow: var(--glow-1); }
.bao-hang-cd a.dang span { color: var(--neon-2); }
.bao-hang-cd a.dang:hover { transform: none; }
.bao-hang-cd span {
  display: block; font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--neon-3);
}

/* --------------------------- Bài chủ -------------------------------- */
.bao-chu {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 30px;
  align-items: center; margin-top: 34px; padding: 20px;
}
.bao-chu:hover { transform: translateY(-4px); }
.bao-chu-anh {
  overflow: hidden; border: 1px solid var(--line); border-radius: 4px;
  aspect-ratio: 4 / 3; background: #120e26;
}
.bao-chu-anh img,
.bao-the-anh img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bao-chu:hover .bao-chu-anh { border-color: var(--neon-2); }

.bao-nhan {
  display: inline-block; font-size: 10.5px; letter-spacing: .26em;
  text-transform: uppercase; color: var(--neon-1);
  border: 1px solid rgba(0, 229, 255, .45); border-radius: 999px;
  padding: 4px 12px; margin-bottom: 14px; text-shadow: var(--glow-1);
}
.bao-chu-chu h2 {
  font-size: clamp(22px, 2.8vw, 34px); line-height: 1.28; margin-bottom: .4em;
  color: #fff;
}
.bao-chu:hover .bao-chu-chu h2 { text-shadow: var(--glow-2); }
.bao-tom {
  font-family: var(--font-bao); font-size: 16px; line-height: 1.7;
  color: var(--fg-dim); margin: 0 0 14px;
}
.bao-dong-ngay {
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--neon-3);
}

/* Gạch phân cách giữa bài chủ và các bài còn lại — kiểu gạch đôi của báo */
.bao-vach {
  height: 4px; margin: 40px 0 34px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}

/* ------------------------ Lưới các bài khác ------------------------- */
.bao-luoi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 26px; }
/* Mỗi bài là một THẺ ALBUM riêng, viền gradient chạy y như thẻ phòng.
   Trước đây chỉ ngăn nhau bằng một nét kẻ dọc mảnh kiểu cột báo — đúng chất
   báo giấy nhưng trên nền tối thì nét kẻ gần như tàng hình, các bài dính vào
   nhau thành một mảng chữ. Đóng khung hẳn thì mắt tách được từng bài ngay.
   Vành gradient và hiệu ứng sáng dùng CHUNG khai báo với .room-card (xem khối
   @supports mask-composite) — cùng một hiệu ứng thì khai một chỗ. */
.bao-the, .bao-chu {
  border: 1px solid var(--line); border-radius: 5px;
  background: rgba(162, 89, 255, .045);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.bao-the { display: flex; flex-direction: column; padding: 16px 16px 20px; }
.bao-the:hover, .bao-chu:hover {
  border-color: var(--neon-2);
  box-shadow: 0 0 0 1px rgba(255, 47, 208, .35), 0 18px 44px rgba(255, 47, 208, .18);
}
.bao-the:hover { transform: translateY(-4px); }
.bao-the-anh {
  overflow: hidden; border: 1px solid var(--line); border-radius: 3px;
  aspect-ratio: 16 / 10; background: #120e26; margin-bottom: 14px;
}
.bao-the:hover .bao-the-anh { border-color: var(--neon-2); }
/* Nhãn chuyên đề trên thẻ bài — nhỏ, chữ mono, để nó là dấu hiệu phân loại chứ
   không tranh chỗ với tiêu đề bài. */
.bao-cd {
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--neon-3); margin-bottom: .55em;
}

/* Nhãn chuyên đề trên đầu bài, bản BẤM ĐƯỢC (dẫn về chuyên trang của mảng) */
a.bao-nhan--bam { transition: color .2s ease, border-color .2s ease, box-shadow .2s ease; }
a.bao-nhan--bam:hover {
  color: #fff; border-color: var(--neon-2);
  box-shadow: 0 0 16px rgba(255, 47, 208, .4);
}

.bao-the h3 { font-size: 17px; line-height: 1.35; margin-bottom: .4em; color: #fff; }
.bao-the:hover h3 { text-shadow: var(--glow-2); }
.bao-the p {
  font-family: var(--font-bao); font-size: 14.5px; line-height: 1.65;
  color: var(--fg-dim); margin: 0 0 12px; flex: 1;
}

/* ============================ TRANG BÀI ============================= */
.bao-khung--bai { padding: 34px 44px 48px; }

.bao-lui { margin-bottom: 26px; }
.bao-lui a {
  font-size: 11.5px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--neon-1);
}
.bao-lui a:hover { text-shadow: var(--glow-1); }

/* Khổ chữ hẹp: dòng dài quá thì mắt khó bắt lại đầu dòng sau. */
.bao-bai { max-width: 760px; margin: 0 auto; }

.bao-dau { text-align: center; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.bao-dau h1 {
  font-size: clamp(25px, 3.6vw, 42px); line-height: 1.3; padding-top: .06em;
  color: #fff; margin-bottom: .45em;
}
.bao-sapo {
  font-family: var(--font-bao); font-size: 17px; line-height: 1.7;
  color: var(--fg-dim); margin: 0 0 16px;
}

/* ---------------------------- Ảnh trong bài -------------------------- */
.bao-hinh { margin: 30px 0; }
.bao-hinh img {
  width: 100%; height: auto; display: block; border-radius: 4px;
  border: 1px solid var(--line);
}
.bao-hinh figcaption {
  margin-top: 10px; font-size: 12.5px; line-height: 1.6;
  color: var(--fg-dim); font-family: var(--font-bao); font-style: italic;
  padding-left: 12px; border-left: 2px solid var(--neon-3);
}
.bao-hinh--chu { margin: 30px 0 0; }

/* ---------------------------- Thân bài ------------------------------- */
/* Căn đều hai bên cho cả tiêu đề lẫn thân bài — đúng lối dàn chữ của báo giấy,
   hai mép chữ thẳng thớm thành một khối.
   KHÔNG bật hyphens: tiếng Việt không có bộ luật ngắt âm tiết trong trình
   duyệt, bật lên là nó cắt bừa giữa chữ. Thay vào đó dùng text-wrap: pretty để
   trình duyệt chia dòng khéo hơn, đỡ chuyện dòng cuối trơ một chữ. */
.bao-than,
.bao-than p,
.bao-than li,
.bao-than blockquote,
.bao-sapo { text-align: justify; text-wrap: pretty; }

/* Tiêu đề bài căn GIỮA — đúng lối báo giấy, và tiêu đề chỉ vài chữ mà căn đều
   hai bên thì các chữ bị kéo giãn rời rạc. */
.bao-dau h1 { text-align: center; text-wrap: balance; }

/* Riêng tiêu đề mục giữ căn trái: căn đều một dòng ngắn thì chữ bị kéo giãn
   nham nhở, mà tiêu đề vốn hiếm khi dài quá một dòng. */
.bao-than h3, .bao-than h4 { text-align: left; }

.bao-than { font-family: var(--font-bao); font-size: 17px; line-height: 1.85; color: #ded7f5; }
.bao-than p { margin: 0 0 1.15em; }

/* Chữ cái đầu bài to như báo. Chỉ áp cho đoạn ĐẦU TIÊN của thân bài. */
.bao-than > p:first-child::first-letter {
  float: left; font-size: 3.4em; line-height: .82; padding: .06em .12em 0 0;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  color: transparent; font-weight: 700;
}

.bao-than h3 {
  font-family: var(--font); font-size: clamp(18px, 2.2vw, 23px);
  line-height: 1.35; margin: 1.9em 0 .6em; color: #fff;
  padding-left: 14px; border-left: 3px solid transparent;
  border-image: var(--grad) 1;
}
.bao-than h4 { font-family: var(--font); font-size: 17px; margin: 1.5em 0 .5em; color: #fff; }
.bao-than strong { color: #fff; }
.bao-than em { color: var(--fg-dim); }
.bao-than a { color: var(--neon-1); border-bottom: 1px solid rgba(0, 229, 255, .35); }
.bao-than a:hover { color: #fff; text-shadow: var(--glow-1); border-bottom-color: var(--neon-1); }

.bao-than ul, .bao-than ol { margin: 0 0 1.15em; padding-left: 1.4em; }
.bao-than li { margin-bottom: .5em; }
.bao-than li::marker { color: var(--neon-2); }

/* Trích dẫn cuối bài (khối giới thiệu quán) — đóng khung như hộp tin trên báo */
/* Hộp giới thiệu quán ở cuối bài.
   LỖI ĐÃ MẮC: lớp nền trong để `rgba(162,89,255,.09)` — gần như trong suốt, nên
   dải gradient của lớp viền hắt lên KHẮP MẶT HỘP chứ không chỉ ở đường viền.
   Ra một mảng hồng–lam rực, chữ xám nằm trên đọc không nổi.
   Nền lớp trong bắt buộc phải ĐẶC thì mới che được dải gradient bên dưới, chỉ
   chừa đúng 1px viền lộ ra. Đây là điều kiện của cả kỹ thuật viền gradient này,
   không riêng gì chỗ này. */
/* Blockquote có HAI vai khác hẳn nhau trong bài:
     .bao-quan  — hộp giới thiệu quán ở cuối bài, đóng khung gradient
     còn lại    — câu trích dẫn nổi bật giữa bài, chỉ cần một nét dọc bên trái
   Trước đây dùng chung một kiểu nên câu trích dẫn cũng bị đóng khung gradient,
   trông như có hai lời mời liên hệ trong một bài. */
.bao-than blockquote:not(.bao-quan) {
  margin: 1.6em 0; padding: 2px 0 2px 18px;
  border-left: 3px solid transparent; border-image: var(--grad) 1;
  color: #ded7f5; font-style: italic;
}
.bao-than blockquote:not(.bao-quan) p { margin: 0; }

.bao-than blockquote.bao-quan {
  margin: 2.2em 0 0; padding: 22px 24px;
  font-family: var(--font); font-size: 14.5px; line-height: 1.9;
  color: var(--fg-dim);
  border: 1px solid transparent; border-radius: 5px;
  background:
    linear-gradient(#100b23, #0c0819) padding-box,
    var(--grad) border-box;
  box-shadow: 0 0 18px rgba(162, 89, 255, .18);
}
.bao-than blockquote p { margin: 0; }

/* Bố cục trong hộp, ba tầng rõ rệt:
     1. Dòng tên quán  — vai trò tiêu đề, chữ trắng, giãn chữ nhẹ
     2. Danh sách điểm nhấn
     3. Dòng link      — ngăn bằng một nét kẻ mảnh, chữ nhỏ hơn
   Trước đây ba tầng này cùng một cỡ chữ, cùng một màu, dính liền nhau nên đọc
   ra một khối chữ chứ không ra một khối thông tin có thứ bậc. */
.bao-than blockquote.bao-quan > p:first-child {
  color: #fff; font-size: 15.5px; line-height: 1.5;
  letter-spacing: .01em; margin-bottom: .2em;
}
/* Dòng liên kết cuối hộp. Hai tuyến bài dựng hộp khác nhau — tuyến cũ có danh
   sách điểm nhấn nên dòng link đứng ngay sau <ul>, tuyến Q4 là văn xuôi nên
   dòng link mang class riêng. Bắt cả hai để chỉ có một kiểu hiển thị. */
.bao-than blockquote.bao-quan > p.bao-link,
.bao-than blockquote.bao-quan > ul + p {
  margin-top: 1.1em; padding-top: .9em;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
}
.bao-than blockquote p + p { margin-top: .7em; }

/* Số điện thoại: cho nổi hẳn lên và bấm gọi được ngay trên điện thoại —
   đây là dòng duy nhất trong cả bài mà khách cần THAO TÁC. */
.bao-than a.bao-goi {
  color: var(--neon-1); font-weight: 700; letter-spacing: .04em;
  border-bottom: 0; text-shadow: var(--glow-1); white-space: nowrap;
}
.bao-than a.bao-goi:hover { color: #fff; }

/* Danh sách điểm nhấn trong hộp giới thiệu quán: mỗi ý một dòng.
   Dấu đầu dòng là tam giác ▹ hồng neon — CÙNG dấu đang dùng cho menu con trên
   điện thoại, nên trang chỉ có một kiểu dấu đầu dòng duy nhất. Bản thảo dùng
   emoji (🏛 🍷 🚗…), đã bỏ: mỗi máy vẽ emoji một kiểu, xanh đỏ lộn xộn giữa nền
   tối neon nhìn rất chắp vá, mà emoji cũng chẳng nói thêm được gì so với chữ
   ngay cạnh nó.

   Chữ BẮT BUỘC bọc trong một thẻ <span>. Mục này dàn bằng flex, mà flex coi mỗi
   thẻ con là một cột — để trần "<strong>A</strong> B" thì chữ đậm thành cột
   trái, phần còn lại thành cột phải, ra hai cột chữ so le. Đã gặp đúng lỗi đó. */
.bao-diem { list-style: none; margin: 1em 0; padding: 0; }
.bao-diem li {
  display: flex; gap: 10px; align-items: baseline;
  margin-bottom: .5em; line-height: 1.65;
}
.bao-diem li::before {
  content: "▹"; flex: none;
  color: var(--neon-2); text-shadow: var(--glow-2);
}
.bao-diem li > span { flex: 1; min-width: 0; }
.bao-diem li:last-child { margin-bottom: 0; }

/* Hộp này KHÔNG căn đều hai bên. Các dòng ở đây ngắn, căn đều là chữ bị kéo
   giãn ra thành từng khối rời rạc — đúng lỗi thấy trên điện thoại. */
.bao-than blockquote,
.bao-than blockquote p,
.bao-diem li { text-align: left; }
/* Dòng đầu (tên quán) và các dòng nhấn mạnh cho sáng hẳn, phần còn lại để xám
   — hộp này dài, đánh dấu hết thành đậm thì lại thành không nhấn gì cả. */
.bao-than blockquote strong { color: #fff; }
.bao-than blockquote a { color: var(--neon-1); }

/* Bảng: bản gốc bọc sẵn trong <div class="tw">. Cho cuộn ngang TRONG khung đó,
   để bảng 7 cột không kéo giãn cả trang trên điện thoại. */
.bao-than .tw { overflow-x: auto; margin: 0 0 1.4em; -webkit-overflow-scrolling: touch; }
/* Khung cuộn của bảng trong bài. Bảng giữ bề ngang tối thiểu 460px để các ô
   chữ không vỡ thành từng chữ; phần thừa cuộn NGANG TRONG KHUNG NÀY chứ không
   đẩy cả trang trôi ngang. */
.bao-than .tablewrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin: 20px 0; max-width: 100%;
}
.bao-than .tablewrap table { margin: 0; }
.bao-than table {
  width: 100%; border-collapse: collapse; font-family: var(--font);
  font-size: 13.5px; min-width: 460px;
}
.bao-than th, .bao-than td {
  border: 1px solid var(--line); padding: 9px 12px; text-align: left;
  vertical-align: top; line-height: 1.55;
}
.bao-than th {
  background: rgba(162, 89, 255, .14); color: #fff;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
}
.bao-than tbody tr:hover td { background: rgba(162, 89, 255, .07); }
.bao-than code {
  font-size: .9em; padding: 1px 6px; border-radius: 3px;
  background: rgba(0, 229, 255, .1); color: var(--neon-1);
}

/* ---------------------- Dải ảnh phòng thật --------------------------- */
.bao-anh-phong { margin-top: 46px; padding-top: 30px; border-top: 1px solid var(--line); }
.bao-anh-phong h2, .bao-them h2 {
  font-size: 15px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--neon-1); text-shadow: var(--glow-1); margin-bottom: 20px;
}
.bao-anh-luoi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.bao-anh-o { display: block; }
.bao-anh-o img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  border: 1px solid var(--line); border-radius: 3px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.bao-anh-o:hover img {
  border-color: var(--neon-2); box-shadow: 0 0 18px rgba(255, 47, 208, .35);
}
.bao-anh-o span {
  display: block; margin-top: 9px; font-size: 12px; line-height: 1.55;
  color: var(--fg-dim);
}
.bao-anh-o b { display: block; color: #fff; font-size: 13px; margin-bottom: 2px; }
.bao-anh-o:hover b { text-shadow: var(--glow-2); }

/* ------------------ Xem thêm các bài viết khác ----------------------- */
.bao-them { margin-top: 46px; padding-top: 30px; border-top: 1px solid var(--line); }

/* Đánh số 1–5 bằng counter chứ không viết số vào HTML: xoá hay đổi thứ tự bài
   thì số tự chạy lại đúng, không phải sửa tay. */
.bao-them-ds { list-style: none; margin: 0; padding: 0; counter-reset: bao; }
.bao-them-ds li { counter-increment: bao; }
.bao-them-ds a {
  display: flex; align-items: center; gap: 18px;
  padding: 15px 18px; border: 1px solid var(--line); border-radius: 4px;
  margin-bottom: 10px; background: rgba(162, 89, 255, .05);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease, transform .2s ease;
}
.bao-them-ds a::before {
  content: counter(bao);
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font); font-size: 15px; font-weight: 700;
  border: 1px solid var(--neon-3); color: var(--neon-3);
  transition: color .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.bao-them-chu {
  flex: 1; font-size: 15.5px; line-height: 1.45; color: var(--fg);
  transition: color .2s ease, text-shadow .2s ease;
}
.bao-them-ngay {
  flex: none; font-size: 11px; letter-spacing: .14em; color: var(--fg-dim);
}

/* Di chuột vào: cả dòng sáng lên — viền neon, số đổi thành nền gradient,
   chữ trắng có quầng sáng. */
.bao-them-ds a:hover {
  transform: translateX(4px);
  border-color: var(--neon-2); background: rgba(255, 47, 208, .08);
  box-shadow: 0 0 20px rgba(255, 47, 208, .35), 0 0 40px rgba(0, 229, 255, .14);
}
/* Ô số khi rê chuột / bấm vào: dựng đúng kiểu nút ĐẶT PHÒNG trên thanh menu
   (.btn-pill) — lòng tối trong suốt, viền là dải gradient, chữ lam neon phát
   sáng. Trước đây tô đặc cả ô bằng gradient, chữ đen: nhìn nặng và chẳng giống
   thứ gì khác trên trang. Dùng lại đúng một ngôn ngữ nút bấm cho cả web. */
.bao-them-ds a:hover::before,
.bao-them-ds a:focus-visible::before,
.bao-them-ds a:active::before {
  border: 2px solid transparent;
  background:
    linear-gradient(rgba(4, 3, 10, .78), rgba(4, 3, 10, .78)) padding-box,
    var(--grad) border-box;
  color: var(--neon-1);
  text-shadow: 0 0 10px rgba(0, 229, 255, .85);
  box-shadow: 0 0 20px rgba(255, 47, 208, .45), 0 0 34px rgba(0, 229, 255, .22);
}
.bao-them-ds a:hover .bao-them-chu { color: #fff; text-shadow: var(--glow-2); }

/* --------------------------- Điện thoại ------------------------------ */
@media (max-width: 900px) {
  .bao { padding: calc(var(--head-h) + 20px) 0 60px; }
  .bao-khung, .bao-khung--bai { padding: 26px 18px 34px; }
  .bao-hang-cd { grid-template-columns: 1fr 1fr; gap: 9px; }
  .bao-hang-cd a { padding: 11px 8px; }
  .bao-hang-cd b { font-size: 12.5px; }
  .bao-chu { grid-template-columns: 1fr; gap: 18px; }
  .bao-luoi { grid-template-columns: 1fr; gap: 26px; }
  /* Mỗi bài đã có khung riêng nên không cần kẻ phân cách nữa. */
  .bao-the { padding: 14px 14px 18px; }
  .bao-chu { padding: 14px; }
  .bao-anh-luoi { grid-template-columns: 1fr 1fr; gap: 12px; }
  .bao-than { font-size: 16.5px; line-height: 1.8; }
  .bao-mang-tren, .bao-mang-duoi { font-size: 10px; letter-spacing: .14em; }
  .bao-them-ds a { gap: 13px; padding: 13px 14px; }
  .bao-them-ds a::before { width: 32px; height: 32px; font-size: 14px; }
  .bao-them-chu { font-size: 14.5px; }
  /* Ngày đăng chiếm chỗ mà không giúp gì khi màn hình hẹp — bỏ đi cho tiêu đề
     bài được trọn hai dòng thay vì ba. */
  .bao-them-ngay { display: none; }
}

/* Ô TICK — vẽ bằng CSS, không dùng ký tự.
   Bản thảo viết ô tick bằng hai ký tự "[ ]". Dòng chữ được căn đều hai bên, mà
   khoảng trắng giữa "[" và "]" cũng bị kéo giãn theo — nên mỗi dòng cái ô rộng
   một kiểu: dòng "[ ]", dòng "[     ]". Ra một cột lởm chởm chứ không ra một cột
   ô tick. Trong bảng thì lại dùng ký tự "☐", tức là hai chỗ hai kiểu.
   Vẽ bằng CSS thì dòng nào cũng đúng một cỡ, hai chỗ giống hệt nhau, và muốn đổi
   dáng sau này chỉ sửa một chỗ. */
.bao-than li.tick {
  list-style: none;
  display: flex; align-items: baseline; gap: 11px;
  /* Kéo ngược lại phần thụt lề mặc định của <ul>: mục có ô tick tự canh lấy,
     để nguyên thì ô tick lùi vào trong so với các mục thường. */
  margin-left: -1.4em;
  text-align: left;   /* dòng việc cần làm thường ngắn — căn đều là giãn chữ */
}

.bao-than li.tick::before,
.o-tick {
  content: ""; flex: none;
  display: inline-block; width: .95em; height: .95em;
  border: 1.5px solid var(--neon-1); border-radius: 3px;
  background: rgba(0, 229, 255, .07);
  box-shadow: inset 0 0 7px rgba(0, 229, 255, .3), 0 0 8px rgba(0, 229, 255, .22);
  /* Đẩy xuống một chút cho tâm ô thẳng hàng với thân chữ, không lửng trên đầu */
  transform: translateY(.08em);
}

/* Trong bảng, ô tick nằm giữa dòng chữ nên cần khoảng thở bên phải */
.bao-than td .o-tick { margin-right: 3px; vertical-align: baseline; }

/* ==================================================================== *
 *  TRANG TỔ CHỨC TIỆC CÔNG TY
 *  Trang tiền của mảng doanh nghiệp: người đọc là chuyên viên nhân sự đang
 *  phải trình sếp, nên trang ưu tiên CON SỐ và THỦ TỤC — bảng ngân sách, quy
 *  trình bốn bước, hỏi đáp — chứ không phải ảnh đẹp.
 * ==================================================================== */
.tct-tieu {
  font-size: clamp(20px, 2.6vw, 28px); letter-spacing: .04em;
  margin: 64px 0 12px; text-align: center;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  color: transparent; line-height: 1.4; padding-top: .1em;
}
.tct-tieu:first-child { margin-top: 0; }
/* Đoạn dẫn dưới tiêu đề.
   Khổ 62ch quá hẹp so với bề ngang trang: câu ba dòng thì dòng cuối trơ đúng
   một chữ ở giữa, nhìn như chữ bị dồn cục rồi rớt lại. Nới khổ ra và bật
   text-wrap: balance — trình duyệt tự chia đều số chữ cho các dòng, không còn
   dòng cuối lẻ loi. */
.tct-dan {
  max-width: 86ch; margin: 0 auto 26px; text-align: center;
  text-wrap: balance;
  color: var(--fg-dim); font-size: 15px; line-height: 1.75;
}

/* Bốn điều khách doanh nghiệp hỏi trước tiên */
.tct-diem { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.tct-o {
  border: 1px solid transparent; border-radius: 6px; padding: 20px 20px 22px;
  background:
    linear-gradient(#100b23, #0c0819) padding-box,
    var(--grad) border-box;
  box-shadow: 0 0 18px rgba(162, 89, 255, .16);
}
.tct-o b { display: block; color: #fff; font-size: 15px; margin-bottom: .5em; letter-spacing: .02em; }
.tct-o span { display: block; color: var(--fg-dim); font-size: 13.5px; line-height: 1.7; }

/* Bảng ngân sách */
.tct-bang { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tct-bang table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 620px; }
.tct-bang th, .tct-bang td {
  border: 1px solid var(--line); padding: 12px 14px; text-align: left; vertical-align: top;
}
.tct-bang th {
  background: rgba(162, 89, 255, .14); color: #fff;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}
.tct-bang tbody tr:hover td { background: rgba(162, 89, 255, .07); }
.tct-bang a { color: var(--neon-1); }
.tct-bang a:hover { text-shadow: var(--glow-1); }
.tct-nho { color: var(--fg-dim); font-size: 12.5px; }
/* Con số tổng là thứ khách tìm trên trang này — cho nổi hẳn khỏi các cột khác */
.tct-tong { color: var(--neon-1); font-size: 15.5px; text-shadow: var(--glow-1); white-space: nowrap; }

/* Quy trình bốn bước — đánh số bằng counter, xoá bước nào số tự chạy lại */
.tct-buoc { list-style: none; counter-reset: tct; margin: 0 auto; padding: 0; max-width: 760px; }
/* LƯỚI ba cột, không phải flex.
   Flex thì bề ngang mỗi cột chạy theo độ dài chữ trong chính hàng đó, nên cột
   mô tả của bốn bước bắt đầu ở bốn chỗ khác nhau — nhìn thành so le. Lưới ghim
   cột giữa ở một bề ngang cố định nên bốn hàng thẳng nhau, dù tiêu đề bước dài
   ngắn khác nhau. */
.tct-buoc li {
  counter-increment: tct;
  display: grid; grid-template-columns: 36px 232px 1fr; gap: 4px 18px;
  align-items: start;
  padding: 18px 0; border-bottom: 1px solid var(--line);
}
.tct-buoc li:last-child { border-bottom: 0; }
.tct-buoc li::before {
  content: counter(tct);
  /* Đẩy xuống cho tâm vòng tròn thẳng hàng với dòng chữ đầu tiên bên cạnh */
  margin-top: -2px;
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700;
  border: 1px solid var(--neon-3); color: var(--neon-3);
}
.tct-buoc b { color: #fff; font-size: 15.5px; line-height: 1.45; }
.tct-buoc span { color: var(--fg-dim); font-size: 14px; line-height: 1.7; }

/* Hàng nút gọi hành động.
   Nút chính (.btn-pill) viền 2px, nút phụ (.btn-ghost) viền 1px — để nguyên
   thì hai loại lệch nhau 2px chiều cao, đứng cạnh nhau nhìn ra ngay. Ghim
   chiều cao tối thiểu và canh chữ vào giữa để cả hàng bằng nhau. */
.tct-nut {
  margin: 44px 0 0; display: flex; gap: 14px;
  justify-content: center; align-items: stretch; flex-wrap: wrap;
}
.tct-nut .btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; padding-top: 0; padding-bottom: 0; text-align: center;
}

/* Hỏi đáp — dùng <details> của trình duyệt, không cần JavaScript */
.tct-hoi { max-width: 820px; margin: 0 auto; }
.tct-hoi details {
  border: 1px solid var(--line); border-radius: 5px; margin-bottom: 10px;
  background: rgba(162, 89, 255, .05);
}
.tct-hoi summary {
  cursor: pointer; padding: 15px 18px; color: #fff; font-size: 15px;
  list-style: none; display: flex; justify-content: space-between; gap: 14px;
}
.tct-hoi summary::-webkit-details-marker { display: none; }
.tct-hoi summary::after { content: "+"; color: var(--neon-1); font-size: 20px; line-height: 1; flex: none; }
.tct-hoi details[open] summary::after { content: "−"; }
.tct-hoi summary:hover { text-shadow: var(--glow-2); }
.tct-hoi details[open] { border-color: var(--neon-2); box-shadow: 0 0 16px rgba(255, 47, 208, .2); }
.tct-hoi p { margin: 0; padding: 0 18px 18px; color: var(--fg-dim); font-size: 14px; line-height: 1.8; }

/* Danh sách bài cùng chuyên đề */
.tct-bai { max-width: 820px; margin: 0 auto; }
.tct-bai a {
  display: flex; gap: 18px; align-items: baseline;
  padding: 13px 16px; border: 1px solid var(--line); border-radius: 4px;
  margin-bottom: 9px; background: rgba(162, 89, 255, .05);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.tct-bai a:hover {
  transform: translateX(4px); border-color: var(--neon-2);
  box-shadow: 0 0 18px rgba(255, 47, 208, .3);
}
.tct-bai-ngay {
  flex: none; font-size: 11.5px; letter-spacing: .1em; color: var(--neon-3);
  font-variant-numeric: tabular-nums;
}
.tct-bai-chu { flex: 1; color: var(--fg); font-size: 15px; line-height: 1.45; }
.tct-bai a:hover .tct-bai-chu { color: #fff; text-shadow: var(--glow-2); }

@media (max-width: 900px) {
  .tct-diem { grid-template-columns: 1fr 1fr; gap: 12px; }
  .tct-o { padding: 16px; }
  .tct-tieu { margin-top: 48px; }
  /* Màn hẹp: bỏ cột giữa cố định, mô tả xuống dòng dưới tiêu đề nhưng vẫn
     thẳng cột với nó — 232px cho tiêu đề thì chỉ còn 90px cho mô tả. */
  /* Màn hẹp: nút xếp dọc, mỗi nút một hàng và rộng bằng nhau — ba nút chen
     ngang ở khổ 375px thì nút nào cũng xuống hai dòng chữ. */
  .tct-nut { flex-direction: column; align-items: stretch; gap: 11px; }
  .tct-nut .btn { width: 100%; min-height: 50px; }
  .tct-buoc li { grid-template-columns: 31px 1fr; gap: 6px 13px; }
  .tct-buoc span { grid-column: 2; }
  .tct-buoc li::before { width: 31px; height: 31px; font-size: 14px; margin-top: -1px; }
  /* Ngày đăng chiếm chỗ mà không giúp gì khi màn hình hẹp */
  .tct-bai-ngay { display: none; }
}
@media (max-width: 560px) {
  .tct-diem { grid-template-columns: 1fr; }
}

/* --- Ba chuyên trang dùng chung khung với /tiec-cong-ty, thêm mấy khối riêng --- */
/* Đoạn dẫn đầu trang — kiểu "sa-pô" của báo.
   Trước đây nó dùng chung kiểu với các đoạn dẫn nhỏ: căn giữa, chữ mờ, khổ hẹp,
   nên ba dòng chữ dồn thành một cục ở giữa trang và không có gì cho biết đây là
   câu mở đầu quan trọng nhất. Nay tách hẳn: chữ to hơn, sáng hơn, căn trái để
   các dòng dài đều nhau, và một vạch neon dựng bên trái làm dấu mở bài.
   Không đóng khung — trang đã sẵn nhiều ô viền gradient, thêm một ô nữa thì
   sa-pô lại chìm vào đám đó. */
.tct-dan--to {
  position: relative;
  max-width: 76ch; margin: 4px 0 44px; padding: 4px 0 4px 28px;
  text-align: left; text-wrap: pretty;
  font-size: 18px; line-height: 1.95; color: var(--fg);
}
.tct-dan--to::before {
  content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
  border-radius: 3px; background: var(--grad); box-shadow: var(--glow-1);
}
/* Dòng đầu sáng hẳn lên — mắt biết ngay chỗ bắt đầu đọc. */
.tct-dan--to::first-line { color: #fff; letter-spacing: .005em; }

/* Cột tình trạng trong bảng dịp lễ: còn kịp hay phải gọi ngay */
.tct-kip { color: var(--neon-1); white-space: nowrap; }
/* Dịp đã qua: vẫn để lại một ngày cho khách biết mình vừa lỡ, nhưng phải
   nhìn ra ngay là dòng chết — chữ mờ và gạch ngang. */
.tct-qua { color: var(--fg-dim); text-decoration: line-through; white-space: nowrap; }
.tct-gap {
  color: var(--neon-2); white-space: nowrap; font-weight: 700;
  text-shadow: var(--glow-2);
}

/* Bốn ví dụ mức giảm theo tuổi */
.tct-vidu { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 760px; margin: 0 auto; }
.tct-vd {
  text-align: center; padding: 22px 12px;
  border: 1px solid transparent; border-radius: 6px;
  background:
    linear-gradient(#100b23, #0c0819) padding-box,
    var(--grad) border-box;
}
.tct-vd b {
  display: block; font-size: 34px; line-height: 1.15; font-weight: 700;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tct-vd span { display: block; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-dim); }
.tct-vd i {
  display: block; margin-top: 10px; font-style: normal; font-size: 14px;
  color: var(--neon-1); text-shadow: var(--glow-1);
}

@media (max-width: 900px) {
  .tct-vidu { grid-template-columns: 1fr 1fr; gap: 12px; }
  .tct-vd b { font-size: 28px; }
  .tct-dan--to { font-size: 16px; line-height: 1.9; padding-left: 18px; margin-bottom: 32px; }
}

/* ==================================================================== *
 *  Ô CHỌN PHÒNG — khay tự vẽ
 *
 *  Dropdown của <select> do hệ điều hành vẽ nên không nhận CSS của trang:
 *  nền trắng đen, dòng đang chọn tô xanh dương mặc định. Giữa trang nền tối
 *  viền neon thì nó lạc hẳn ra. Khay này dựng bằng thẻ thường nên nhận đủ
 *  viền gradient, quầng sáng và hiệu ứng chọn như mọi chỗ khác của trang.
 * ==================================================================== */
.chp { position: relative; }

/* Thẻ <select> thật vẫn nằm trong DOM để form gửi được, chỉ giấu khỏi mắt.
   Không dùng display:none — Safari bỏ qua trường display:none trong vài
   trường hợp gửi form; đẩy ra ngoài khung nhìn thì chắc chắn hơn. */
.chp-that {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden;
}

/* --- Nút hiện lựa chọn hiện tại --- */
.chp-nut {
  width: 100%; padding: 13px 42px 13px 15px;
  font: inherit; font-size: 15px; text-align: left; cursor: pointer;
  color: #fff; border-radius: 3px;
  background: var(--bg-3); border: 1px solid rgba(0, 229, 255, .3);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.chp-nut:hover { border-color: var(--neon-1); }
.chp-nut:focus-visible,
.chp.mo .chp-nut { outline: 0; border-color: var(--neon-1); box-shadow: var(--glow-1); }

/* Mũi tên tự vẽ, xoay lên khi khay đang mở */
.chp-nut::after {
  content: ""; position: absolute; right: 16px; top: 50%;
  width: 8px; height: 8px; pointer-events: none;
  border-right: 2px solid var(--neon-1); border-bottom: 2px solid var(--neon-1);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .2s ease;
}
.chp.mo .chp-nut::after { transform: translateY(-20%) rotate(225deg); }

/* --- Khay xổ xuống --- */
.chp-khay {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px);
  max-height: 320px; overflow-y: auto; padding: 6px;
  border: 1px solid transparent; border-radius: 5px;
  background:
    linear-gradient(#0d0920, #0a0718) padding-box,
    var(--grad) border-box;
  box-shadow: 0 0 22px rgba(255, 47, 208, .3), 0 18px 44px rgba(0, 0, 0, .7);
}
/* Thanh cuộn hợp tông, thay cho thanh xám mặc định */
.chp-khay::-webkit-scrollbar { width: 8px; }
.chp-khay::-webkit-scrollbar-track { background: transparent; }
.chp-khay::-webkit-scrollbar-thumb {
  background: rgba(162, 89, 255, .5); border-radius: 99px;
}
.chp-khay { scrollbar-width: thin; scrollbar-color: rgba(162, 89, 255, .5) transparent; }

/* Tên hạng giá — chữ dẫn, không bấm được */
.chp-nhom {
  padding: 12px 12px 6px; font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--neon-3);
}
.chp-nhom:first-child { padding-top: 6px; }

/* --- Từng dòng chọn --- */
.chp-muc {
  padding: 10px 12px; border-radius: 4px; cursor: pointer;
  font-size: 14.5px; line-height: 1.45; color: var(--fg);
  border-left: 2px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
/* Dòng đang rê chuột hoặc bàn phím đang trỏ tới */
.chp-muc:hover,
.chp-muc.roi {
  background: rgba(162, 89, 255, .18); color: #fff;
  border-left-color: var(--neon-3);
}
/* Dòng ĐANG được chọn: phát sáng hẳn, để phân biệt với dòng chỉ đang rê qua */
.chp-muc.dang-chon {
  color: #fff; background: rgba(255, 47, 208, .12);
  border-left-color: var(--neon-2);
  text-shadow: var(--glow-2);
  box-shadow: inset 0 0 18px rgba(255, 47, 208, .18);
}
.chp-muc.dang-chon.roi,
.chp-muc.dang-chon:hover {
  background: rgba(255, 47, 208, .2);
  box-shadow: inset 0 0 22px rgba(255, 47, 208, .28), 0 0 14px rgba(255, 47, 208, .3);
}

@media (max-width: 900px) {
  .chp-khay { max-height: 60vh; }
  .chp-muc { padding: 12px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .chp-nut, .chp-nut::after, .chp-muc { transition: none; }
}

/* Băng chữ đứng ngay dưới thanh menu: thanh menu nằm đè cố định trên cùng nên
   phải tự chừa chỗ, không thì băng chui tọt xuống dưới nó và khách không thấy.
   Trang chủ không cần lớp này vì ở đó băng nằm dưới khối video. */
.bc-cho-head { height: var(--head-h); }

/* --- Trang Ưu đãi sinh nhật: khối chọn phòng theo nhóm tuổi --- */
.sn-tuoi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.sn-o {
  padding: 20px 18px 18px;
  border: 1px solid transparent; border-radius: 6px;
  background:
    linear-gradient(#100b23, #0c0819) padding-box,
    var(--grad) border-box;
}
.sn-o > b {
  display: block; font-size: 17px; color: #fff; margin-bottom: .35em;
  letter-spacing: .02em;
}
.sn-o > span { display: block; font-size: 13px; line-height: 1.65; color: var(--fg-dim); margin-bottom: 14px; }
.sn-phong { display: flex; flex-direction: column; gap: 7px; }
.sn-phong a {
  display: block; padding: 9px 11px; border-radius: 4px;
  border: 1px solid var(--line); background: rgba(162, 89, 255, .06);
  font-size: 13.5px; color: var(--fg);
  transition: border-color .18s ease, box-shadow .18s ease, color .18s ease;
}
.sn-phong a:hover {
  border-color: var(--neon-2); color: #fff;
  box-shadow: 0 0 14px rgba(255, 47, 208, .3);
}
.sn-phong i {
  display: block; font-style: normal; margin-top: 2px;
  font-size: 11.5px; color: var(--neon-3);
}

@media (max-width: 900px) {
  .sn-tuoi { grid-template-columns: 1fr 1fr; gap: 12px; }
}
@media (max-width: 560px) {
  .sn-tuoi { grid-template-columns: 1fr; }
}

/* ==================================================================== *
 *  BẢN TIẾNG TRUNG — mấy khối riêng của cụm trang /zh/
 *
 *  Chỉ ba khối: ô trích công thức tính tiền, thẻ địa chỉ đưa tài xế xem, và
 *  khối liên hệ cuối trang. Mọi thứ còn lại dùng lại đúng lớp CSS của các
 *  chuyên trang tiếng Việt, để bản tiếng Trung không trôi thành một trang web
 *  khác dán vào.
 * ==================================================================== */

/* Ô trích: công thức tính tổng tiền. Vạch neon bên trái như sa-pô, nhưng nền
   đục hơn một chút để nó tách hẳn khỏi dòng chữ thường. */
.tct-trich {
  margin: 22px 0; padding: 18px 22px;
  border-left: 3px solid transparent;
  border-image: var(--grad) 1;
  background: linear-gradient(rgba(162, 89, 255, .07), rgba(162, 89, 255, .02));
}
.tct-trich p { margin: 0; color: var(--fg); line-height: 1.8; }
.tct-trich p + p { margin-top: .6em; color: var(--fg-dim); font-size: 14.5px; }

/* Thẻ địa chỉ cho khách chụp màn hình đưa tài xế xem. Dòng tiếng Việt là dòng
   TO NHẤT trong thẻ — đó là dòng duy nhất tài xế đọc được. */
.zh-diachi {
  margin: 20px 0; padding: 22px 24px; border-radius: 8px;
  border: 1px solid transparent;
  background:
    linear-gradient(#150e2e, #0f0a22) padding-box,
    var(--grad) border-box;
  box-shadow: 0 0 22px rgba(162, 89, 255, .18);
}
.zh-diachi p { margin: 0; }
.zh-diachi-vi {
  font-size: 19px; line-height: 1.5; color: #fff; font-weight: 700;
  letter-spacing: .01em;
}
.zh-diachi-zh { margin-top: .5em !important; color: var(--fg-dim); font-size: 15px; }
.zh-diachi-dt { margin-top: .7em !important; color: var(--neon-1); font-size: 16px; }
.zh-diachi-dt a { color: inherit; text-shadow: var(--glow-1); }

/* Khối liên hệ khép lại mọi trang tiếng Trung */
.zh-chan {
  display: grid; gap: 10px; max-width: 720px;
  margin: 18px 0 0; padding: 20px 22px;
  border: 1px solid var(--line); border-radius: 6px;
  background: rgba(162, 89, 255, .05);
}
.zh-chan p { margin: 0; color: var(--fg-dim); line-height: 1.7; }
.zh-chan b {
  display: inline-block; min-width: 8.5em; color: #fff; font-weight: 700;
}
.zh-chan a { color: var(--neon-1); }

@media (max-width: 560px) {
  .zh-diachi-vi { font-size: 17px; }
  .zh-chan b { display: block; min-width: 0; margin-bottom: .2em; }
}

/* --------- Hàng ô điều hướng của cụm trang tiếng Trung -------------- */
/* Dùng lại đúng hàng ô của Thời báo, chỉ khác hai chỗ: mỗi ô ở đây chỉ có tên
   trang chứ không có dòng đếm bài, nên bỏ khoảng trống dành cho dòng ấy; và có
   tám ô chứ không phải năm, nên ô hẹp lại cho vừa một hàng trên máy tính. */
.bao-hang-cd.zh-hang {
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 10px; margin-top: 0; margin-bottom: 28px;
}
.bao-hang-cd.zh-hang b { margin-bottom: 0; font-size: 14px; }

/* Hàng ô /zh/ chỉ còn dùng cho ĐIỆN THOẠI.
   Trên máy tính thanh menu đã là menu tiếng Trung đầy đủ, in thêm đúng tám ô ấy
   ngay dưới tiêu đề là nói lại một việc hai lần. Trên điện thoại thanh menu nằm
   trong khay sau nút ba gạch, nên hàng ô này là đường đi duy nhất nhìn thấy được. */
.bao-hang-cd.zh-hang { display: none; }
@media (max-width: 860px) {
  .bao-hang-cd.zh-hang { display: grid; }
}