/* ============================================================
   PHAYA FOOT — phaya-foot.css
   Dùng chung cho index.html (VI) và en/index.html (EN)
   Muốn đổi giao diện: sửa khối :root bên dưới là đủ.
   ============================================================ */

:root{
  /* FONT — 1 font duy nhất */
  --font:'Oswald', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

  /* MÀU — lấy từ logo */
  --ink:#241408;
  --brown:#4A2E1C;
  --gold:#D9942F;
  --gold-lite:#F0BE72;
  --cream:#F7F1E8;
  --cream-2:#EDE2D2;
  --muted:#6E5945;
  --line:rgba(43,24,13,.13);
  --line-gold:rgba(217,148,47,.35);
  --white:#fff;

  /* KHOẢNG CÁCH */
  --s1:6px; --s2:10px; --s3:16px; --s4:24px; --s5:32px; --s6:48px; --s7:52px;

  /* CỠ CHỮ */
  --t-xs:13px; --t-sm:15px; --t-md:17px; --t-lg:21px;
  --t-xl:27px; --t-2xl:35px; --t-3xl:46px;

  /* BO GÓC */
  --r-card:18px; --r-sm:12px; --r-pill:999px;
}

*{box-sizing:border-box;margin:0;padding:0}
section[id]{scroll-margin-top:72px}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

body{
  font-family:var(--font);
  background:var(--cream);color:var(--ink);
  font-size:var(--t-md);font-weight:300;line-height:1.7;letter-spacing:.01em;
  padding-bottom:86px;
}
.wrap{max-width:720px;margin:0 auto;padding:0 20px}

/* NHỊP DỌC ĐỀU NHAU */
.sec{padding:var(--s7) 0;border-top:1px solid var(--line)}
.sec > .wrap > * + *{margin-top:var(--s4)}
.sec .eyebrow + h2{margin-top:var(--s1)}

h1,h2,h3{font-weight:600;line-height:1.25;letter-spacing:.01em}
h1{font-size:var(--t-2xl)}
h2{font-size:var(--t-xl)}
h3{font-size:var(--t-lg);font-weight:500}
p{font-size:var(--t-md)}
p + p{margin-top:var(--s3)}
strong,b{font-weight:600}
.eyebrow{font-size:var(--t-xs);font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}

/* ================= HEADER ================= */
.topbar{
  position:sticky;top:0;z-index:50;background:var(--ink);
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--s2) 20px;border-bottom:1px solid rgba(217,148,47,.22);
}
.topbar .logo{display:flex;align-items:center;gap:var(--s3)}
.topbar .logo img{height:40px;width:auto}
.topbar .logo span{
  font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-lite);
  border-left:1px solid rgba(240,190,114,.3);padding-left:var(--s3);
}
.langs{display:flex;gap:var(--s3);font-size:var(--t-xs);letter-spacing:.12em}
.langs a{color:rgba(247,241,232,.5);padding-bottom:2px}
.langs a.on{color:var(--gold-lite);font-weight:600;border-bottom:1px solid var(--gold)}

/* ================= HERO ================= */
.hero{
  position:relative;overflow:hidden;
  border-top:0;text-align:center;color:var(--cream);
  padding:var(--s6) 0;
  background:var(--ink);
}
/* video nền hero */
.hero .hero-bg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;
}
.hero .hero-veil{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(28,14,6,.72) 0%,rgba(36,20,8,.84) 55%,var(--ink) 100%);
}
.hero .wrap{position:relative;z-index:2}
.hero .mark{height:76px;width:auto;margin:0 auto var(--s4)}
.hero .kicker{
  display:inline-block;font-size:var(--t-xs);letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-lite);border:1px solid var(--line-gold);padding:6px 14px;border-radius:var(--r-pill);
}
.hero h1{color:var(--white)}
.hero h1 .big{
  display:block;margin-top:var(--s1);
  font-size:var(--t-3xl);font-weight:600;letter-spacing:.06em;
  background:linear-gradient(180deg,#FBE0AE,#D9942F);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero .lead{font-size:var(--t-sm);color:rgba(247,241,232,.8);max-width:34ch;margin-left:auto;margin-right:auto}

/* ================= NÚT ================= */
.cta-col{display:flex;flex-direction:column;gap:var(--s2);max-width:320px;margin-left:auto;margin-right:auto}
.btn{
  display:flex;align-items:center;justify-content:center;
  padding:15px 20px;border-radius:var(--r-pill);
  font-size:var(--t-sm);font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  transition:transform .18s ease;
}
.btn:active{transform:scale(.97)}
.btn-gold{background:linear-gradient(180deg,#EBAE55,#D9942F);color:#2B180D}
.btn-line{border:1px solid var(--line-gold);color:var(--gold-lite)}
.btn-dark{background:var(--ink);color:var(--gold-lite)}

/* ================= TRUST ================= */
.trust{display:flex;border-top:1px solid rgba(247,241,232,.14);padding-top:var(--s4)}
.trust div{flex:1;font-size:var(--t-xs);color:rgba(247,241,232,.55);line-height:1.5}
.trust div + div{border-left:1px solid rgba(247,241,232,.12)}
.trust strong{display:block;font-size:var(--t-lg);font-weight:600;color:var(--gold-lite)}

/* ================= ĐỊNH NGHĨA ================= */
.define{background:var(--cream-2)}
.define .pull{
  font-size:var(--t-lg);line-height:1.55;color:var(--brown);
  border-left:3px solid var(--gold);padding-left:var(--s3);
}
.figure{border-radius:var(--r-card);overflow:hidden;border:1px solid var(--line)}
.figure img{width:100%;aspect-ratio:16/10;object-fit:cover}

/* ================= QUY TRÌNH ================= */
.ritual{background:var(--ink);color:var(--cream)}
.ritual h2{color:var(--white)}
.steps{position:relative;padding-left:34px}
.steps::before{
  content:"";position:absolute;left:11px;top:8px;bottom:8px;width:1px;
  background:linear-gradient(180deg,transparent,var(--line-gold) 12%,var(--line-gold) 88%,transparent);
}
.step{position:relative}
.step + .step{margin-top:var(--s4)}
.step::before{
  content:"";position:absolute;left:-28px;top:11px;width:9px;height:9px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 0 4px rgba(217,148,47,.16);
}
.step .n{font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;color:rgba(247,241,232,.42)}
.step h3{color:var(--gold-lite);margin-top:2px}
.step p{margin-top:var(--s1);font-size:var(--t-sm);color:rgba(247,241,232,.72)}

/* ================= MENU ================= */
.card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);
  overflow:hidden;box-shadow:0 8px 24px rgba(43,24,13,.06);
}
.card + .card{margin-top:var(--s4)}
.card .thumb{position:relative;line-height:0}
.card .thumb img{width:100%;aspect-ratio:16/9;object-fit:cover}
.card .thumb .dur{
  position:absolute;left:var(--s3);bottom:var(--s3);
  font-size:var(--t-xs);font-weight:500;letter-spacing:.1em;line-height:1.4;
  background:rgba(36,20,8,.85);color:var(--gold-lite);
  padding:5px 12px;border-radius:var(--r-pill);
}
.card .body{padding:var(--s4)}
.card-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3)}
.card h3{color:var(--brown)}
.card .price{font-size:var(--t-lg);font-weight:600;color:var(--gold);white-space:nowrap}
.card .incl{margin-top:var(--s2);font-size:var(--t-sm);color:var(--muted)}
.card.signature{border-color:var(--gold)}
.card.signature .body{background:linear-gradient(180deg,#FFFDF8,#FDF4E5)}
.tag{
  font-size:var(--t-xs);font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:#6B3F0C;background:var(--gold-lite);padding:2px 8px;border-radius:5px;margin-left:var(--s1);
}

.grid2{display:grid;grid-template-columns:1fr;gap:var(--s3)}
.mini{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s4)}
.mini h3{
  font-size:var(--t-sm);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
  border-bottom:1px solid var(--line);padding-bottom:var(--s2);
}
.mini dl{margin-top:var(--s2);display:grid;grid-template-columns:1fr auto;gap:var(--s2) var(--s3);font-size:var(--t-sm)}
.mini dt{color:var(--muted)}
.mini dd{font-weight:500;text-align:right}
.vat{font-size:var(--t-xs);color:var(--muted);text-align:center;letter-spacing:.06em}

/* ================= DÀNH CHO AI ================= */
.forwho{background:var(--cream-2)}
.who{display:grid;gap:var(--s4)}
.who article{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.who img{width:100%;aspect-ratio:16/9;object-fit:cover}
.who .body{padding:var(--s4)}
.who h3{color:var(--brown)}
.who p{margin-top:var(--s1);font-size:var(--t-sm);color:var(--muted)}

/* ================= GALLERY ================= */
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.gallery img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r-sm)}
.gallery .wide{grid-column:1 / -1}
.gallery .wide img{aspect-ratio:16/9}

/* ================= ĐỊA CHỈ + MAP ================= */
.info{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s4)}
.info dl{display:grid;grid-template-columns:auto 1fr;gap:var(--s2) var(--s3);font-size:var(--t-sm)}
.info dt{font-weight:500;color:var(--gold);white-space:nowrap}
.map{border-radius:var(--r-card);overflow:hidden;border:1px solid var(--line);line-height:0}
.map iframe{width:100%;height:240px;border:0;display:block}

/* ================= FAQ ================= */
details{background:var(--white);border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--s3)}
details + details{margin-top:var(--s2)}
details[open]{border-color:var(--gold)}
summary{font-size:var(--t-sm);font-weight:500;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:var(--s3)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--gold);font-size:var(--t-lg);line-height:1}
details[open] summary::after{content:"–"}
details p{margin-top:var(--s2);font-size:var(--t-sm);color:var(--muted)}

/* ================= FOOTER ================= */
footer{background:var(--ink);color:rgba(247,241,232,.7);padding:var(--s7) 0 var(--s6);text-align:center}
footer > .wrap > * + *{margin-top:var(--s4)}
footer .mark{height:66px;width:auto;margin:0 auto}
footer h2{font-size:var(--t-xl);color:var(--gold-lite);letter-spacing:.1em}
footer h2 + p{margin-top:var(--s1)}
footer p{font-size:var(--t-sm)}
footer .links{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s2) var(--s4);font-size:var(--t-sm)}
footer .links a{color:var(--gold-lite)}
footer .fine{font-size:var(--t-xs);color:rgba(247,241,232,.42);max-width:48ch;margin-left:auto;margin-right:auto;line-height:1.6}

/* ============ THANH CTA + BẢNG CHỌN LIÊN HỆ ============ */
.bar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);
  padding:var(--s2) 14px max(var(--s2), env(safe-area-inset-bottom));
  background:rgba(247,241,232,.97);border-top:1px solid var(--line);
}
.bar > *{
  display:flex;align-items:center;justify-content:center;
  padding:14px 4px;border-radius:var(--r-sm);
  font-size:var(--t-sm);font-weight:500;letter-spacing:.06em;text-transform:uppercase;
}
.bar .b1{background:linear-gradient(180deg,#EBAE55,#D9942F);color:#2B180D}
.bar .b2{background:var(--ink);color:var(--gold-lite)}

.sheet{position:fixed;inset:0;z-index:70;display:none;background:rgba(36,20,8,.55)}
.sheet.open{display:block}
.sheet .panel{
  position:absolute;left:0;right:0;bottom:0;
  background:var(--cream);border-radius:20px 20px 0 0;
  padding:var(--s4) var(--s4) max(var(--s4), env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:var(--s2);
  box-shadow:0 -12px 40px rgba(36,20,8,.3);
}
.sheet .grip{width:44px;height:4px;border-radius:4px;background:var(--line);margin:0 auto var(--s2)}
.sheet h3{text-align:center;color:var(--brown);font-size:var(--t-md);font-weight:500;margin-bottom:var(--s1)}
.sheet .opt{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:14px var(--s3);font-size:var(--t-sm);text-align:left;
}
.sheet .opt b{display:block;font-weight:600;color:var(--brown)}
.sheet .opt small{font-size:var(--t-xs);color:var(--muted);font-weight:300}
.sheet .opt .go{color:var(--gold);font-size:var(--t-lg)}
.sheet .opt.call{border-color:var(--gold)}
.sheet .close{margin-top:var(--s1);padding:12px;text-align:center;width:100%;
  font-size:var(--t-sm);color:var(--muted);letter-spacing:.06em;text-transform:uppercase}

/* ================= DESKTOP ================= */
@media (min-width:640px){
  :root{--t-xl:33px; --t-2xl:42px; --t-3xl:58px; --s7:72px}
  .cta-col{flex-direction:row;max-width:none}
  .grid2{grid-template-columns:1fr 1fr}
  .who{grid-template-columns:repeat(3,1fr)}
  .who img{aspect-ratio:4/3}
  .map iframe{height:320px}
  .hero .mark{height:92px}
  .sheet .panel{max-width:420px;left:50%;transform:translateX(-50%);bottom:24px;border-radius:20px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}