/* Theme 0001 — Homestay Mây Lam. 12 bộ màu chọn trong admin (data-t1-style),
   màu nhấn đè qua --accent inline. Font hệ thống (CSP chặn webfont ngoài). */
:root { --bg:#faf8f4; --surface:#ffffff; --text:#26221d; --muted:#8a8178; --accent:#a67c52; --accent-text:#ffffff; --line:rgba(38,34,29,.10); --radius:6px; --head:Georgia,'Times New Roman',serif; }
[data-t1-style="rustic"]     { --bg:#f4ece1; --surface:#fffaf3; --text:#3a2c20; --muted:#8a7561; --accent:#9c5a34; --accent-text:#fff; --line:rgba(58,44,32,.13);  --radius:10px; --head:Georgia,serif; }
[data-t1-style="forest"]     { --bg:#eef2ec; --surface:#ffffff; --text:#1f2a22; --muted:#6f7d70; --accent:#2f5d3f; --accent-text:#fff; --line:rgba(31,42,34,.11);  --radius:8px;  --head:Georgia,serif; }
[data-t1-style="misty"]      { --bg:#f3f0f7; --surface:#fffdfe; --text:#332b3d; --muted:#8c8397; --accent:#7d6ba3; --accent-text:#fff; --line:rgba(51,43,61,.10);  --radius:16px; --head:Georgia,serif; }
[data-t1-style="dark"]       { --bg:#161412; --surface:#211e1b; --text:#f2ece3; --muted:#a89e90; --accent:#c8a24e; --accent-text:#161412; --line:rgba(242,236,227,.13); --radius:6px; --head:Georgia,serif; }
[data-t1-style="navy"]       { --bg:#f2f4f7; --surface:#ffffff; --text:#1b2333; --muted:#6c7488; --accent:#22406b; --accent-text:#fff; --line:rgba(27,35,51,.11);  --radius:6px;  --head:Georgia,serif; }
[data-t1-style="japandi"]    { --bg:#efe9e0; --surface:#f8f4ec; --text:#2c2925; --muted:#847d72; --accent:#5b5248; --accent-text:#fff; --line:rgba(44,41,37,.13);  --radius:4px;  --head:Georgia,serif; }
[data-t1-style="terracotta"] { --bg:#f6ebe3; --surface:#fff8f2; --text:#3d2823; --muted:#997a6e; --accent:#b5503a; --accent-text:#fff; --line:rgba(61,40,35,.12);  --radius:12px; --head:Georgia,serif; }
[data-t1-style="mint"]       { --bg:#e9f5ef; --surface:#ffffff; --text:#1e332a; --muted:#6d8579; --accent:#159b71; --accent-text:#fff; --line:rgba(30,51,42,.10);  --radius:18px; --head:system-ui,sans-serif; }
[data-t1-style="coastal"]    { --bg:#eef4f5; --surface:#ffffff; --text:#16333a; --muted:#6b898f; --accent:#0e7c8b; --accent-text:#fff; --line:rgba(22,51,58,.11);  --radius:10px; --head:Georgia,serif; }
[data-t1-style="sunset"]     { --bg:#fcefe8; --surface:#fff9f5; --text:#3f2620; --muted:#a4796c; --accent:#e0663f; --accent-text:#fff; --line:rgba(63,38,32,.11);  --radius:20px; --head:system-ui,sans-serif; }
[data-t1-style="sage"]       { --bg:#eef0e7; --surface:#fbfcf7; --text:#2c3125; --muted:#7c8271; --accent:#6b7a4b; --accent-text:#fff; --line:rgba(44,49,37,.11);  --radius:12px; --head:Georgia,serif; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background:var(--bg); color:var(--text); font-family:system-ui,-apple-system,sans-serif; line-height:1.6; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
section[id] { scroll-margin-top:78px; }
.t1-wrap { max-width:1200px; margin:0 auto; padding:0 clamp(18px,5vw,48px); }
.t1-kicker { font:600 12px/1 ui-monospace,Menlo,monospace; letter-spacing:2px; text-transform:uppercase; color:var(--accent); margin:0 0 14px; }
.t1-h2 { font-family:var(--head); font-weight:700; font-size:clamp(26px,3.4vw,44px); line-height:1.1; margin:0 0 12px; text-wrap:balance; }
.t1-btn { display:inline-block; background:var(--accent); color:var(--accent-text); padding:14px 26px; border-radius:var(--radius); font-weight:600; font-size:15px; border:1.5px solid var(--accent); cursor:pointer; }
.t1-btn.ghost { background:transparent; color:var(--accent); }
.t1-btn.light { background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.4); color:#fff; }

/* NAV */
.t1-nav { position:sticky; top:0; z-index:40; background:var(--bg); border-bottom:1px solid var(--line); }
.t1-nav-in { display:flex; align-items:center; gap:20px; padding-top:13px; padding-bottom:13px; }
.t1-brand { display:flex; align-items:center; gap:10px; font-family:var(--head); font-weight:700; font-size:20px; }
.t1-brand .dot { width:34px; height:34px; border-radius:50%; background:var(--accent); color:var(--accent-text); display:inline-flex; align-items:center; justify-content:center; font-size:17px; }
.t1-nav-links { flex:1; display:flex; justify-content:center; gap:24px; flex-wrap:wrap; font-size:14px; font-weight:500; }
.t1-nav-links a { opacity:.75; } .t1-nav-links a:hover { opacity:1; color:var(--accent); }
.t1-nav .menu { list-style:none; display:flex; gap:18px; margin:0; padding:0; flex-wrap:wrap; }
.t1-nav .menu .submenu { display:none; }
.t1-nav-cta { background:var(--accent); color:var(--accent-text); padding:10px 20px; border-radius:var(--radius); font-weight:600; font-size:14px; white-space:nowrap; }

/* HERO */
.t1-hero { position:relative; isolation:isolate; min-height:min(88vh,720px); display:flex; align-items:flex-end; overflow:hidden; background:#2b2622; }
.t1-hero-bg { position:absolute; inset:0; z-index:-2; background-position:center; background-size:cover; }
.t1-hero-shade { position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(15,12,9,.15) 0%,rgba(15,12,9,.35) 55%,rgba(15,12,9,.82) 100%); }
.t1-hero-in { position:relative; width:100%; color:#fff; padding-bottom:clamp(48px,7vw,80px); padding-top:120px; }
.t1-hero h1 { font-family:var(--head); font-weight:700; font-size:clamp(38px,6.5vw,72px); line-height:1.05; margin:0; max-width:16ch; text-wrap:balance; }
.t1-hero .sub { font-size:clamp(15px,1.6vw,19px); line-height:1.6; margin:20px 0 0; max-width:52ch; color:rgba(255,255,255,.9); }
.t1-hero .cta { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.t1-hero .meta { display:flex; flex-wrap:wrap; gap:26px; margin-top:34px; padding-top:22px; border-top:1px solid rgba(255,255,255,.2); font-size:14px; color:rgba(255,255,255,.9); }

/* SECTIONS */
.t1-sec { padding:clamp(60px,9vw,110px) 0; }
.t1-sec.alt { background:var(--surface); }
.t1-center { text-align:center; max-width:640px; margin:0 auto 46px; }
.t1-about { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(32px,5vw,60px); align-items:center; }
.t1-about p { font-size:16px; line-height:1.75; color:var(--muted); }
.t1-stats { display:flex; flex-wrap:wrap; gap:28px; margin-top:8px; }
.t1-stats b { font-family:var(--head); font-weight:700; font-size:32px; color:var(--accent); display:block; }
.t1-stats small { font-size:13px; color:var(--muted); }
.t1-about-img { border-radius:var(--radius); aspect-ratio:1/1; background:var(--surface) center/cover no-repeat; border:1px solid var(--line); }

/* ROOMS */
.t1-rooms { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px; }
.t1-room { background:var(--bg); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; }
.t1-room .ph { aspect-ratio:4/3; background:var(--surface) center/cover no-repeat; border-bottom:1px solid var(--line); }
.t1-room .bd { padding:22px; display:flex; flex-direction:column; flex:1; }
.t1-room h3 { font-family:var(--head); font-weight:700; font-size:22px; margin:0 0 4px; }
.t1-room .meta { font-size:13px; color:var(--muted); margin:0 0 14px; }
.t1-room .desc { font-size:14px; color:var(--muted); line-height:1.8; margin:0 0 18px; }
.t1-room .price { margin-top:auto; display:flex; align-items:baseline; gap:6px; margin-bottom:14px; }
.t1-room .price b { font-family:var(--head); font-weight:700; font-size:28px; color:var(--accent); }
.t1-room .price small { font-size:13px; color:var(--muted); }

/* AMENITIES */
.t1-amen { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; }
.t1-amen .it { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px 18px; display:flex; flex-direction:column; gap:12px; }
.t1-amen .mk { width:40px; height:40px; border-radius:50%; background:var(--accent); color:var(--accent-text); display:inline-flex; align-items:center; justify-content:center; font-family:var(--head); font-weight:700; }
.t1-amen .nm { font-weight:600; font-size:15px; }

/* EXPERIENCES */
.t1-exp { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px; }
.t1-exp .card { border-radius:var(--radius); overflow:hidden; position:relative; aspect-ratio:3/4; color:#fff; background:#2b2622 center/cover no-repeat; }
.t1-exp .card .shade { position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.72)); }
.t1-exp .card .cap { position:absolute; bottom:0; padding:20px; }
.t1-exp .card .tm { font:600 11px/1 ui-monospace,monospace; opacity:.8; margin-bottom:6px; }
.t1-exp .card h3 { font-family:var(--head); font-weight:700; font-size:21px; margin:0; }

/* REVIEWS */
.t1-revs { display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:20px; }
.t1-rev { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px; }
.t1-rev .stars { color:var(--accent); font-size:15px; letter-spacing:2px; margin-bottom:12px; }
.t1-rev p { font-size:15px; line-height:1.7; margin:0 0 18px; font-style:italic; }
.t1-rev .who { display:flex; align-items:center; gap:12px; }
.t1-rev .av { width:42px; height:42px; border-radius:50%; background:var(--accent); color:var(--accent-text); display:inline-flex; align-items:center; justify-content:center; font-weight:700; }

/* LOCATION */
.t1-loc { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(28px,4vw,52px); align-items:center; }
.t1-loc iframe { width:100%; height:320px; border:1px solid var(--line); border-radius:var(--radius); }

/* BOOKING */
.t1-book { background:var(--accent); color:var(--accent-text); }
.t1-book .t1-kicker { color:inherit; opacity:.8; }
.t1-book form { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.28); border-radius:var(--radius); padding:clamp(22px,4vw,36px); max-width:860px; margin:0 auto; }
.t1-book .row { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:16px; margin-bottom:16px; }
.t1-book label span { display:block; font-size:13px; font-weight:600; margin-bottom:6px; opacity:.9; }
.t1-book input, .t1-book select { width:100%; padding:12px; border:none; border-radius:var(--radius); background:#fff; color:#222; font-size:15px; font-family:inherit; }
.t1-book button[type=submit] { width:100%; background:#fff; color:var(--accent); border:none; padding:16px; border-radius:var(--radius); font-weight:700; font-size:17px; cursor:pointer; }

/* FAQ */
.t1-faq { max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.t1-faq details { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px 20px; }
.t1-faq summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:12px; font-weight:600; font-size:16px; }
.t1-faq summary::-webkit-details-marker { display:none; }
.t1-faq summary::after { content:"+"; color:var(--accent); font-size:20px; }
.t1-faq details[open] summary::after { content:"–"; }
.t1-faq details p { margin:12px 0 0; color:var(--muted); line-height:1.7; font-size:15px; }

/* FOOTER */
.t1-footer { background:var(--surface); border-top:1px solid var(--line); padding:clamp(48px,6vw,80px) 0 36px; font-size:14px; }
.t1-footer .cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:32px; margin-bottom:36px; }
.t1-footer .ttl { font-weight:700; margin-bottom:12px; }
.t1-footer ul { list-style:none; padding:0; margin:0; line-height:2.1; color:var(--muted); }
.t1-footer .menu { list-style:none; padding:0; margin:0; } .t1-footer .submenu { list-style:none; padding-left:12px; }
.t1-footer .base { border-top:1px solid var(--line); padding-top:20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; color:var(--muted); font-size:13px; }

/* Float contact (kế thừa hành vi base) */
.float-contact { position:fixed; right:14px; bottom:14px; display:flex; flex-direction:column; gap:10px; z-index:50; }
.float-btn { width:46px; height:46px; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:700; font-size:18px; box-shadow:0 3px 10px rgba(0,0,0,.22); }
.float-btn.call { background:#1ca05c; } .float-btn.zalo { background:#0068ff; } .float-btn.mess { background:#0084ff; } .float-btn.top { background:#444; }

.header-widgets, .footer-widgets { max-width:1200px; margin:0 auto; padding:12px clamp(18px,5vw,48px); }
@media (max-width:760px) { .t1-nav-links { display:none; } }