/* NNA — CSS dùng chung cho các trang MỚI (hạng phòng, vị trí & đi lại). v2026.10.08.2
   Trích từ index.html (cùng biến màu, font, header, footer, dockbar, lightbox, dark mode) —
   trang cũ vẫn dùng CSS nội tuyến riêng, KHÔNG phụ thuộc file này. */
:root{
  /* --terracotta & --xam đã làm đậm 20/07/2026 để đạt tương phản WCAG AA (nút CTA 4.04 -> 5.03) */
  --kem:#E7CEB5; --espresso:#551705; --terracotta:#9F5F3D; --vang:#FDCF76;
  --be:#F5EFE4; --nau-nhat:#D8C6A8; --white:#fff; --xam:#6E655B; --xam-dam:#4A433A;
  --xam-nen-toi:#B3AA9D; /* xám dùng TRÊN NỀN TỐI (footer) — --xam quá đậm ở đó */
  --hill-1:#E3C9A6; --hill-2:#C88B5F; --hill-3:#8A4526; --hill-4:#5A2A15;
  --shadow-sm:0 1px 2px rgba(85,23,5,.06);
  --shadow-md:0 6px 18px rgba(85,23,5,.10);
  --shadow-lg:0 16px 40px rgba(85,23,5,.16);
  --shadow-xl:0 30px 70px rgba(85,23,5,.24);
  --maxw:1120px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth; scroll-padding-top:82px}
body{font-family:'Inter',system-ui,sans-serif; color:var(--xam-dam); background:var(--white); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden}
h1,h2,h3{font-family:'Noto Serif Display',Georgia,serif; color:var(--espresso); line-height:1.2; font-weight:600}
h1,h2{text-wrap:balance}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
::selection{background:var(--vang); color:var(--espresso)}
:focus-visible{outline:2px solid var(--terracotta); outline-offset:3px; border-radius:4px}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
/* Bỏ qua menu, nhảy thẳng vào nội dung (bàn phím / trình đọc màn hình) */
.skip{position:absolute; left:-9999px; top:0; z-index:300; background:var(--espresso); color:#fff; padding:12px 20px; border-radius:0 0 10px 0; font-weight:600}
.skip:focus{left:0}
.eyebrow{display:inline-flex; align-items:center; gap:.6em; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--terracotta); font-weight:600}
.eyebrow::before{content:""; width:26px; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--vang),var(--terracotta))}
.section-head .eyebrow::before{display:inline-block}
.btn{display:inline-flex; align-items:center; gap:.5em; padding:.82em 1.4em; border-radius:999px; font-weight:600; font-size:.95rem; transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease); cursor:pointer; border:none; white-space:nowrap}
.btn:active{transform:translateY(0) scale(.98)}
.btn-primary{background:var(--terracotta); color:#fff; box-shadow:var(--shadow-md)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg); background:#8A4F31}
.btn-ghost{background:transparent; color:var(--espresso); border:1.5px solid var(--nau-nhat)}
.btn-ghost:hover{border-color:var(--terracotta); color:var(--terracotta); transform:translateY(-2px)}
.btn svg{width:1.15em; height:1.15em; flex:none}

/* ===== Header ===== */
header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.82); backdrop-filter:blur(14px) saturate(1.4); -webkit-backdrop-filter:blur(14px) saturate(1.4); border-bottom:1px solid transparent; transition:box-shadow .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease)}
header.scrolled{box-shadow:0 6px 24px rgba(85,23,5,.08); border-bottom-color:#F1EFEA}
.nav{display:flex; align-items:center; justify-content:space-between; height:68px; gap:14px}
.brand{display:flex; align-items:center; gap:12px}
.brand svg{width:38px; height:38px; color:var(--espresso); transition:transform .5s var(--ease)}
.brand:hover svg{transform:rotate(-10deg) scale(1.05)}
.brand .name{font-family:'Noto Serif Display',serif; font-weight:600; font-size:1.14rem; color:var(--espresso); line-height:1.05}
.brand .loc{font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--xam)}
.nav-links{display:flex; gap:26px; align-items:center}
.nav-links a{font-size:.92rem; font-weight:500; color:var(--xam-dam); position:relative; padding:4px 0; transition:color .25s var(--ease)}
.nav-links a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--terracotta); border-radius:2px; transition:right .3s var(--ease)}
.nav-links a:hover{color:var(--terracotta)}
.nav-links a:hover::after{right:0}
.nav-cta{display:flex; align-items:center; gap:8px}
.menu-btn{display:none; background:none; border:0; width:42px; height:42px; align-items:center; justify-content:center; cursor:pointer; color:var(--espresso); border-radius:10px}
.menu-btn svg{width:24px; height:24px}
.menu-btn .x{display:none}
@media(max-width:820px){
  .menu-btn{display:inline-flex}
  header.menu-open .menu-btn .bars{display:none}
  header.menu-open .menu-btn .x{display:block}
  .nav{gap:8px}
  .brand{gap:9px}
  .brand svg{width:32px; height:32px}
  .brand .name{font-size:.98rem; white-space:nowrap}
  .brand .loc{font-size:.6rem}
  .nav-links{display:none; position:absolute; top:100%; left:0; right:0; background:rgba(255,255,255,.97); backdrop-filter:blur(12px); flex-direction:column; align-items:stretch; gap:0; padding:6px 24px 14px; border-bottom:1px solid #F1EFEA; box-shadow:var(--shadow-md)}
  header.menu-open .nav-links{display:flex; animation:menuIn .28s var(--ease)}
  .nav-links a{padding:13px 4px; border-bottom:1px solid #F1EFEA; font-size:1rem}
  .nav-links a:last-child{border-bottom:0}
  .nav-links a::after{display:none}
  .nav-cta .btn{display:none}
  .menu-btn{width:44px; height:44px}
}
@keyframes menuIn{from{opacity:0; transform:translateY(-8px)}to{opacity:1; transform:none}}

/* ===== Section chung ===== */
section{padding:78px 0}
.section-head{max-width:640px; margin-bottom:42px}
.section-head h2{font-size:clamp(1.75rem,3.6vw,2.4rem); margin:.28em 0}
.section-head p{color:var(--xam); font-size:1.02rem}
.divider{height:0; text-align:center; position:relative; margin:0 auto}
.divider svg{width:52px; height:26px; color:var(--nau-nhat)}

[hidden]{display:none !important}
/* ===== Vị trí ===== */
.location{background:var(--be)}
.loc-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:stretch}
.loc-info h2{margin-bottom:6px}
.loc-info .promise-sm{font-family:'Noto Serif Display',serif; font-style:italic; color:var(--terracotta); margin-bottom:18px}
.loc-info .row{display:flex; gap:13px; padding:13px 0; border-bottom:1px solid var(--nau-nhat)}
.loc-info .row .ic{flex:none; color:var(--terracotta)}
.loc-info .row .ic svg{width:22px; height:22px}
.loc-info .row b{color:var(--espresso); display:block; font-size:.96rem}
.loc-info .row a,.loc-info .row span{color:var(--xam-dam); font-size:.94rem; transition:color .2s var(--ease)}
.loc-info .row a:hover{color:var(--terracotta)}
.map-wrap{border-radius:18px; overflow:hidden; box-shadow:var(--shadow-md); min-height:360px; border:1px solid var(--nau-nhat)}
.map-wrap iframe{width:100%; height:100%; min-height:360px; border:0}
@media(max-width:820px){.loc-grid{grid-template-columns:1fr}.explore-grid{grid-template-columns:1fr}}

/* ===== Thư viện ảnh (lightbox) =====
   (Bộ quy tắc .shots cũ đã gỡ 25/07: nó đặt top/left trong khi bộ mới đặt right/bottom
    -> ghim đủ 4 cạnh, badge bị kéo giãn bằng cả thẻ và backdrop-filter làm nhoè ảnh.) */
.lbox{position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; background:rgba(30,18,10,.92); padding:24px; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.lbox.open{display:flex; animation:lbfade .25s var(--ease)}
@keyframes lbfade{from{opacity:0}to{opacity:1}}
.lbox-fig{max-width:min(1100px,94vw); max-height:88vh; display:flex; flex-direction:column; align-items:center; gap:12px}
.lbox-fig img{max-width:100%; max-height:80vh; border-radius:12px; box-shadow:0 24px 70px rgba(0,0,0,.5); object-fit:contain}
.lbox-cap{color:#f3ede3; font-family:'Noto Serif Display',serif; font-size:1.05rem; text-align:center}
.lbox-count{position:absolute; top:22px; left:50%; transform:translateX(-50%); color:#e7ceb5; font-size:.85rem; letter-spacing:.1em}
.lbox-btn{position:absolute; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); color:#fff; width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .25s var(--ease), transform .25s var(--ease)}
.lbox-btn:hover{background:var(--terracotta); transform:scale(1.06)}
.lbox-btn svg{width:24px; height:24px}
.lbox-close{top:20px; right:20px}
.lbox-nav{top:50%; margin-top:-24px}
.lbox-nav.prev{left:20px}
.lbox-nav.next{right:20px}
@media(max-width:560px){
  .lbox{padding:12px}
  .lbox-btn{width:46px; height:46px}   /* 42px cũ dưới ngưỡng chạm 44px */
  .lbox-nav.prev{left:8px}.lbox-nav.next{right:8px}
  .lbox-fig img{max-height:74vh}
}

/* ===== Footer ===== */
footer{background:#2c2720; color:#c9c1b4; padding:44px 0 26px; font-size:.9rem}
.foot-grid{display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap; margin-bottom:26px; align-items:flex-start}
.foot-brand svg{width:34px; color:var(--vang); margin-bottom:8px}
.foot-brand .name{font-family:'Noto Serif Display',serif; color:#fff; font-size:1.08rem}
.foot-brand .op{letter-spacing:.1em; font-size:.7rem; color:var(--xam-nen-toi); margin-top:5px; text-transform:uppercase; max-width:260px}
.foot-col b{color:#fff; display:block; margin-bottom:9px; font-size:.82rem; letter-spacing:.05em; text-transform:uppercase}
.foot-col a{display:block; color:#c9c1b4; padding:3px 0; transition:color .2s var(--ease), transform .2s var(--ease)}
.foot-col a:hover{color:var(--vang); transform:translateX(3px)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1); padding-top:18px; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; color:var(--xam-nen-toi); font-size:.8rem}

/* ===== Thanh Zalo/Gọi dính đáy (mobile) ===== */
.dockbar{display:none}
@media(max-width:820px){
  .dockbar{display:grid; grid-template-columns:1fr 1fr; gap:0; position:fixed; left:0; right:0; bottom:0; z-index:60;
    background:rgba(255,255,255,.94); backdrop-filter:blur(12px); border-top:1px solid #eee3d4; box-shadow:0 -6px 20px rgba(85,23,5,.10);
    padding-bottom:env(safe-area-inset-bottom)}
  .dockbar a{display:flex; align-items:center; justify-content:center; gap:8px; padding:15px; font-weight:600; font-size:.92rem; min-height:52px}
  .dockbar a svg{width:18px; height:18px}
  .dockbar .z{color:#fff; background:var(--terracotta)}
  .dockbar .c{color:var(--espresso)}
  body{padding-bottom:60px}
}

/* ===== Thanh đặt phòng dính đáy (DESKTOP) — hiện khi khách đã cuộn qua hero ===== */
.deskbar{display:none}
@media(min-width:821px){
  .deskbar{display:flex; position:fixed; left:50%; bottom:22px; z-index:60; transform:translate(-50%,140%);
    align-items:center; gap:20px; padding:11px 13px 11px 22px; border-radius:999px;
    background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4);
    border:1px solid #eee3d4; box-shadow:var(--shadow-lg); transition:transform .45s var(--ease), opacity .45s var(--ease); opacity:0}
  .deskbar.show{transform:translate(-50%,0); opacity:1}
  .deskbar .txt b{font-family:'Noto Serif Display',serif; color:var(--espresso); font-size:1.02rem; display:block; line-height:1.25}
  .deskbar .txt span{font-size:.8rem; color:var(--xam)}
  .deskbar .acts{display:flex; gap:8px}
  .deskbar .btn{padding:.7em 1.2em; font-size:.9rem}
}

/* ===== DARK MODE (Tự động theo giờ hoặc khách tự chọn) ===== */
html.dark {
  --vang: #E0A27E; /* dark: đất nung sáng thay vàng */
  --white: #141210;
  --be: #1A1815;
  --nau-nhat: #3A342E;
  --kem: #24201C;
  --xam-dam: #E4DED6;
  --xam: #A89F95;
  --espresso: #F2EDE6;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.45);
  --shadow-md: 0 6px 22px rgba(0,0,0,.5);
  --shadow-lg: 0 16px 45px rgba(0,0,0,.6);
  --shadow-xl: 0 30px 70px rgba(0,0,0,.7);
}

html.dark body { background: var(--white); color: var(--xam-dam); }
html.dark header { background: rgba(20, 18, 16, 0.88); border-bottom-color: rgba(255,255,255,.06); }
html.dark header.scrolled { box-shadow: 0 6px 24px rgba(0,0,0,.5); border-bottom-color: #2A2622; }
html.dark .brand svg { color: var(--vang); }
html.dark .brand .name { color: #fff; }
html.dark .brand .loc { color: #B3ABA1; }
html.dark .nav-links a { color: #D3CCC3; }
html.dark .nav-links a:hover { color: var(--vang); }
html.dark .menu-btn { color: #fff; }

@media(max-width:820px){
  html.dark .nav-links { background: rgba(30, 27, 24, 0.98); border-bottom-color: #36312C; }
  html.dark .nav-links a { border-bottom-color: #2C2824; color: #E4DED6; }
}

/* Nút chuyển chế độ Sáng / Tối */
.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%;
  background:rgba(85,23,5,.06); border:1px solid rgba(85,23,5,.14);
  color:var(--espresso); cursor:pointer;
  transition:transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
  padding:0; flex-shrink:0;
}
.theme-toggle:hover{
  background:rgba(85,23,5,.12); transform:scale(1.08); color:var(--terracotta);
}
.theme-toggle svg{width:19px; height:19px; transition:transform .35s var(--ease)}
.theme-toggle .icon-sun{display:none}
.theme-toggle .icon-moon{display:block}

html.dark .theme-toggle{
  background:rgba(224,162,126,.12); border-color:rgba(224,162,126,.25);
  color:var(--vang);
}
html.dark .theme-toggle:hover{
  background:rgba(224,162,126,.22); transform:scale(1.08); color:#fff;
}
html.dark .theme-toggle .icon-sun{display:block}
html.dark .theme-toggle .icon-moon{display:none}

html.dark .dockbar{background:rgba(20, 18, 16,.96); border-top-color:#36312C}
html.dark .dockbar .c{color:#f5efe4}
html.dark .dockbar .z{color:#fff}
html.dark .deskbar{background:rgba(20, 18, 16,.96); border-color:#36312C}
html.dark .deskbar .meta{color:#E4DED6}
html.dark .deskbar .meta span{color:var(--xam)}
.nav-links a{white-space:nowrap}
@media(min-width:821px) and (max-width:1020px){.nav-links{gap:14px}.nav-links a{font-size:.84rem}.nav-cta{gap:8px}}
/* ======================================================================
   THÀNH PHẦN RIÊNG CỦA TRANG HẠNG PHÒNG / VỊ TRÍ (mới 08/10/2026)
   ====================================================================== */
:root{--line:#eee3d4}
html.dark{--line:#36312C}
main{display:block}
main section{padding:56px 0}
main section.tight{padding:36px 0}
main section.alt{background:var(--be)}
.sec-title{font-size:clamp(1.5rem,3vw,2rem); margin:.2em 0 .5em}
.note{font-size:.86rem; color:var(--xam); margin-top:12px; line-height:1.55}
.note b{color:var(--espresso)}
.shot-btn{position:absolute; inset:0; z-index:5; width:100%; height:100%; padding:0; border:0; background:transparent; cursor:pointer; font:inherit}
.shot-btn:focus-visible{outline:3px solid var(--terracotta); outline-offset:-4px; border-radius:4px}

/* Breadcrumb */
.crumbs{padding:18px 0 0; font-size:.86rem; color:var(--xam)}
.crumbs ol{list-style:none; display:flex; flex-wrap:wrap; gap:4px 8px}
.crumbs li+li::before{content:"›"; margin-right:8px; color:var(--xam)}
.crumbs a{color:var(--xam-dam); transition:color .2s var(--ease)}
.crumbs a:hover{color:var(--terracotta)}
.crumbs [aria-current]{color:var(--espresso); font-weight:600}

/* Đầu trang hạng phòng: ảnh + tóm tắt */
.rh{padding:20px 0 46px}
.rh-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:42px; align-items:start}
.rh-shot{position:relative; border-radius:20px; overflow:hidden; aspect-ratio:3/2; background:var(--kem); box-shadow:var(--shadow-lg)}
.rh-shot img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease)}
.rh-shot:hover img{transform:scale(1.03)}
.rh-shot .more{position:absolute; right:14px; bottom:14px; z-index:3; display:inline-flex; align-items:center; gap:6px; background:rgba(85,23,5,.62); color:#fff; font-size:.78rem; font-weight:600; padding:7px 13px; border-radius:999px; pointer-events:none}
.rh-shot .more svg{width:15px; height:15px}
.rh-info h1{font-size:clamp(2rem,4.4vw,2.9rem); letter-spacing:-.01em; margin:.3em 0 .25em}
.rh-info .tagline{font-family:'Noto Serif Display',serif; color:var(--terracotta); font-size:1.08rem; margin-bottom:.9em}
.rh-price{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin:6px 0 4px}
.rh-price b{font-family:'Noto Serif Display',serif; font-size:2rem; color:var(--espresso); line-height:1.1}
.rh-price span{color:var(--xam); font-size:.92rem}
.facts{list-style:none; margin:16px 0 20px; display:grid; gap:9px}
.facts li{display:flex; gap:11px; align-items:flex-start; font-size:.96rem; color:var(--xam-dam)}
.facts svg{flex:none; width:20px; height:20px; margin-top:2px; color:var(--terracotta)}
.facts b{color:var(--espresso)}
.cta-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:6px}
.draft-flag{margin-top:16px; padding:10px 14px; border:1.5px dashed var(--terracotta); border-radius:12px; font-size:.84rem; color:var(--xam-dam)}

/* Bảng thông số / bảng giá */
.tbl{width:100%; border-collapse:collapse; background:var(--white); border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:var(--shadow-sm)}
.tbl th,.tbl td{padding:14px 18px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); font-size:.96rem}
.tbl tr:last-child th,.tbl tr:last-child td{border-bottom:0}
.tbl th{width:34%; color:var(--espresso); font-weight:600; background:var(--be)}
.tbl td b{font-family:'Noto Serif Display',serif; color:var(--espresso); font-size:1.08rem}
.tbl td small{display:block; color:var(--xam); font-size:.8rem; margin-top:2px}
@media(max-width:560px){.tbl th,.tbl td{padding:12px 13px; font-size:.9rem}.tbl th{width:38%}}

/* Gallery ảnh thật */
.gal{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.gal-i{position:relative; display:block; padding:0; border:1px solid var(--line); border-radius:14px; overflow:hidden; aspect-ratio:3/2; background:var(--kem); cursor:pointer; box-shadow:var(--shadow-sm); transition:transform .3s var(--ease), box-shadow .3s var(--ease)}
.gal-i:hover{transform:translateY(-3px); box-shadow:var(--shadow-md)}
.gal-i:focus-visible{outline:3px solid var(--terracotta); outline-offset:3px}
.gal-i img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease)}
.gal-i:hover img{transform:scale(1.05)}
@media(max-width:700px){.gal{grid-template-columns:repeat(2,1fr); gap:10px}}

/* Danh sách tick (tiện ích, ưu điểm) */
.ticks{list-style:none; display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:10px 22px}
.ticks li{position:relative; padding:11px 14px 11px 40px; background:var(--white); border:1px solid var(--line); border-radius:12px; font-size:.93rem; color:var(--xam-dam)}
.ticks li::before{content:""; position:absolute; left:14px; top:50%; width:16px; height:16px; margin-top:-8px; background:var(--terracotta); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}
.ticks li b{color:var(--espresso)}
.ticks li span{display:block; font-size:.8rem; color:var(--xam)}
.prose{max-width:760px; color:var(--xam-dam); font-size:1.02rem}
.prose p+p{margin-top:.8em}
.prose b{color:var(--espresso)}

/* Chính sách */
.policy{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px}
.pcard{background:var(--white); border:1px solid var(--line); border-radius:16px; padding:22px; box-shadow:var(--shadow-sm)}
.pcard h3{font-size:1.05rem; margin-bottom:8px}
.pcard p{font-size:.92rem; color:var(--xam-dam)}
.pcard p+p{margin-top:.5em}
.pcard b{color:var(--espresso)}

/* FAQ */
.faq{max-width:820px; display:grid; gap:12px}
.faq details{background:var(--white); border:1px solid var(--line); border-radius:14px; padding:0 20px; box-shadow:var(--shadow-sm)}
.faq summary{cursor:pointer; list-style:none; padding:16px 26px 16px 0; font-weight:600; color:var(--espresso); position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:2px; top:50%; transform:translateY(-50%); font-size:1.4rem; color:var(--terracotta); line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 18px; color:var(--xam-dam); font-size:.97rem}

/* Hạng kề giá */
.xcards{display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:22px; max-width:760px}
.xcard{display:flex; flex-direction:column; background:var(--white); border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .35s var(--ease), box-shadow .35s var(--ease)}
.xcard:hover{transform:translateY(-5px); box-shadow:var(--shadow-lg)}
.xcard img{width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; background:var(--kem)}
.xcard .b{padding:14px 18px 18px}
.xcard h3{font-size:1.15rem; margin-bottom:3px}
.xcard .m{font-size:.85rem; color:var(--xam)}
.xcard .p{margin-top:8px; font-family:'Noto Serif Display',serif; color:var(--espresso); font-size:1.15rem}
.xcard .p small{font-family:'Inter',sans-serif; font-size:.78rem; color:var(--xam)}
.link-row{display:flex; gap:10px 22px; flex-wrap:wrap; margin-top:22px; font-weight:600; font-size:.95rem}
.link-row a{color:var(--terracotta); border-bottom:1.5px solid var(--nau-nhat); padding-bottom:1px; transition:border-color .2s var(--ease)}
.link-row a:hover{border-color:var(--terracotta)}

/* Dải kêu gọi cuối trang */
.cta-band{position:relative; overflow:hidden; background:radial-gradient(90% 140% at 85% -20%, rgba(253,207,118,.22), transparent 55%), linear-gradient(135deg,#A05F3B,#8A4A2B); border-radius:20px; padding:36px; color:#fff}
.cta-band h2{color:#fff; font-size:clamp(1.4rem,3vw,1.85rem); margin-bottom:.4em}
.cta-band p{color:rgba(255,255,255,.92); max-width:620px; margin-bottom:1.1em}
.cta-band .btn-primary{background:#fff; color:#551705}
.cta-band .btn-primary:hover{background:var(--vang); color:#551705}
.cta-band .btn-ghost{color:#fff; border-color:rgba(255,255,255,.55)}
.cta-band .btn-ghost:hover{color:var(--vang); border-color:var(--vang)}
html.dark .cta-band .btn-primary,html.dark .cta-band .btn-primary:hover{color:#551705}

/* Trang Vị trí & đi lại */
.route-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px}
.route{background:var(--white); border:1px solid var(--line); border-radius:16px; padding:22px; box-shadow:var(--shadow-sm)}
.route h3{font-size:1.1rem; margin-bottom:8px}
.route p,.route li{font-size:.94rem; color:var(--xam-dam)}
.route ul{list-style:none; display:grid; gap:7px; margin-top:6px}
.route li b{color:var(--espresso)}
.loc-hero{padding:24px 0 8px}
.loc-hero h1{font-size:clamp(2rem,4.4vw,2.9rem); margin:.3em 0 .3em; letter-spacing:-.01em}
.loc-hero p.lead{max-width:680px; font-size:1.05rem; color:var(--xam-dam)}
.map-big{border-radius:18px; overflow:hidden; box-shadow:var(--shadow-md); border:1px solid var(--nau-nhat); height:clamp(320px,46vw,480px)}
.map-big iframe{width:100%; height:100%; border:0; display:block}

/* Toast báo đã sao chép câu hỏi phòng */
.toast{position:fixed; left:50%; bottom:92px; z-index:120; transform:translate(-50%,20px); max-width:min(92vw,440px); background:var(--espresso); color:#fff; padding:12px 18px; border-radius:14px; font-size:.88rem; line-height:1.45; box-shadow:var(--shadow-lg); opacity:0; pointer-events:none; transition:opacity .3s var(--ease), transform .3s var(--ease)}
.toast.show{opacity:1; transform:translate(-50%,0)}
html.dark .toast{background:#F2EDE6; color:#2b1608}

/* Chuyển động hiện dần */
.rv{opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); transition-delay:var(--d,0s)}
.rv.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1; transform:none; transition:none}html{scroll-behavior:auto}}

/* Footer: cột hạng phòng */
.foot-col a.sm{font-size:.86rem}

@media(max-width:900px){
  .rh-grid{grid-template-columns:1fr; gap:26px}
  main section{padding:44px 0}
  .cta-band{padding:26px 22px}
}

/* ===== DARK v2 (08/10/2026): bỏ chữ vàng — chữ chính trắng ngà, nhấn màu đất nung sáng #E0A27E.
   Trong dark, --vang được gán lại = đất nung sáng (mọi chỗ cũ dùng var(--vang) tự đổi theo). ===== */
html.dark .brand svg{color:var(--espresso)}
html.dark .eyebrow, html.dark .hero .promise, html.dark .tag, html.dark .card .tag, html.dark .loc-info .promise-sm,
html.dark .loc-info .row .ic, html.dark .rh-info .tagline, html.dark .facts svg, html.dark .faq summary::after,
html.dark .mon .m-peak, html.dark .chip svg, html.dark .wx .d b, html.dark .amen-real svg,
html.dark .btn-ghost:hover, html.dark .explore-card:hover .btn-ghost{color:var(--vang)}
html.dark .btn-ghost:hover{border-color:var(--vang)}
html.dark .card p a[style]{color:var(--vang)!important}
html.dark .room-card .price b, html.dark .card .price, html.dark .mon .m-num, html.dark .hero-badge b,
html.dark .scores-note b, html.dark .review-qr b, html.dark .eat-list b{color:var(--espresso)}
html.dark .theme-toggle{color:var(--espresso)}
html.dark ::selection{background:#E0A27E; color:#141210}