/* ══════════════════════════════════════════════════════════════════════════
   OGON CAFE — bảng kiểu
   Màu và dấu hiệu lấy từ bộ nhận diện mới: đồng, nâu espresso, kem.
   Nhịp và thang chữ giữ theo mẫu Amaya home-4.
   ══════════════════════════════════════════════════════════════════════════ */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

:root{
  --espresso:#201701;   /* nâu đậm — nền tối, tiêu đề */
  --copper:#926531;     /* đồng — màu nhấn duy nhất */
  --cream:#F0EAE2;      /* kem — nền giấy */
  --paper:#FBF8F4;      /* trắng ngà — nền chính */
  --ink:#3B3122;        /* chữ nền */
  --ink-2:#6B6153;      /* chữ phụ */
  --line:#E6DFD4;       /* nét kẻ */
  --line-2:#D3C8B8;
  --serif:"Playfair Display",Georgia,serif;
  --sans:"Raleway","Be Vietnam Pro",Helvetica,Arial,sans-serif;
  --wrap:1248px;
  --gut:clamp(22px,5vw,76px);
}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:17px;font-weight:400;line-height:1.78;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--copper);color:var(--paper)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.full{width:100%}
.ctr{text-align:center}
.narrow{max-width:640px;margin-left:auto;margin-right:auto}

/* ── chữ ─────────────────────────────────────────────────────────────────── */
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;color:var(--espresso);
  letter-spacing:-.005em}
h1{font-size:clamp(38px,4.7vw,56px);line-height:1.12}
h2{font-size:clamp(29px,3.9vw,50px);line-height:1.14}
h3{font-size:clamp(21px,2.1vw,26px);line-height:1.42}
h4{font-size:19px;line-height:1.5}
.sub{display:block;font-family:var(--sans);font-size:11.5px;font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;color:var(--copper)}
.lede{font-size:19px;line-height:1.74;color:var(--ink)}
.num{font-family:var(--sans);font-weight:400;font-variant-numeric:tabular-nums}
em.acc{font-style:italic;color:var(--copper)}

/* nét dọc dưới tiêu đề — mảnh, chỉ một sợi */
.rule{width:1px;height:38px;background:var(--copper);margin:24px auto;opacity:.75}
.rule.l{margin-left:0;margin-right:0}

/* ── nút và liên kết ─────────────────────────────────────────────────────── */
.btn{display:inline-block;font-size:11.5px;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;padding:17px 40px;border:1px solid var(--copper);
  color:var(--copper);background:none;cursor:pointer;
  transition:background .45s cubic-bezier(.2,.7,.3,1),color .45s cubic-bezier(.2,.7,.3,1)}
.btn:hover{background:var(--copper);color:var(--paper)}
.btn.solid{background:var(--espresso);border-color:var(--espresso);color:var(--cream)}
.btn.solid:hover{background:var(--copper);border-color:var(--copper);color:var(--paper)}
.btn.pale{border-color:rgba(240,234,226,.5);color:var(--cream)}
.btn.pale:hover{background:var(--cream);border-color:var(--cream);color:var(--espresso)}
.lk{display:inline-block;font-size:11.5px;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--copper);padding-bottom:6px;position:relative}
.lk::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:currentColor;opacity:.45;transform-origin:left;
  transition:opacity .35s,transform .45s cubic-bezier(.2,.7,.3,1)}
.lk:hover::after{opacity:1;transform:scaleX(.4)}
.lk.pale{color:var(--cream)}

/* ── dấu hiệu nhận diện ──────────────────────────────────────────────────── */
.brand img,.foot-brand img{display:block;width:auto}

/* ── thanh thông báo ─────────────────────────────────────────────────────── */
.topbar{background:var(--espresso);color:rgba(240,234,226,.78);height:38px;
  display:flex;align-items:center;justify-content:center;position:relative;
  font-size:10.5px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;
  padding:0 clamp(18px,4vw,44px)}
.topbar b{color:var(--cream);font-weight:500}
.topbar .soc{position:absolute;right:clamp(18px,4vw,44px);display:flex;gap:20px;
  font-size:10px;letter-spacing:.2em;color:rgba(240,234,226,.5)}
.topbar .soc a:hover{color:var(--cream)}
@media(max-width:880px){.topbar .soc{display:none}}

/* ── đầu trang ───────────────────────────────────────────────────────────── */
.hdr{height:100px;background:var(--paper);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:60}
.hdr.over{position:absolute;top:38px;left:0;right:0;background:none;border-bottom:0}
.hdr.stuck{position:fixed;top:0;height:76px;background:rgba(251,248,244,.97);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.hdr-in{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);height:100%;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:30px}
.nav{display:flex;gap:clamp(16px,2.2vw,34px);font-size:10.5px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase}
.nav.r{justify-content:flex-end}
.nav a{position:relative;padding:5px 0;color:var(--ink-2);transition:color .3s}
.nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;
  background:var(--copper);transition:width .4s cubic-bezier(.2,.7,.3,1)}
.nav a:hover,.nav a[aria-current]{color:var(--espresso)}
.nav a:hover::after,.nav a[aria-current]::after{width:100%}
.brand{display:flex;align-items:center;justify-self:center}
.brand img{height:70px;transition:height .35s cubic-bezier(.2,.7,.3,1)}
.hdr.stuck .brand img{height:52px}
@media(max-width:1100px){
  .nav{display:none}
  .hdr-in{grid-template-columns:1fr auto}
  .brand{justify-self:start}
  .brand img{height:54px}
}
.burger{display:none;width:28px;height:15px;flex-direction:column;
  justify-content:space-between;background:none;border:0;cursor:pointer;justify-self:end}
.burger span{display:block;height:1px;background:var(--espresso)}
@media(max-width:1100px){.burger{display:flex}}
.drawer{position:fixed;inset:0;z-index:90;background:var(--espresso);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  opacity:0;pointer-events:none;transition:opacity .45s}
.drawer.on{opacity:1;pointer-events:auto}
.drawer a{font-family:var(--serif);font-size:27px;color:var(--cream);padding:10px 0;
  transition:color .3s}
.drawer a:hover{color:var(--copper)}
.drawer .x{position:absolute;top:28px;right:30px;width:32px;height:32px;
  background:none;border:0;cursor:pointer}
.drawer .x::before,.drawer .x::after{content:"";position:absolute;left:3px;top:15px;
  width:26px;height:1px;background:var(--cream)}
.drawer .x::before{transform:rotate(45deg)}.drawer .x::after{transform:rotate(-45deg)}

/* ── hero ────────────────────────────────────────────────────────────────── */
.hero{position:relative;height:860px;min-height:540px;overflow:hidden;background:#F0EAE2}
.hero.short{height:500px;min-height:390px}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(251,248,244,.95) 0%,rgba(251,248,244,.82) 36%,
    rgba(251,248,244,.26) 58%,rgba(251,248,244,0) 76%)}
.hero.dark::after{background:linear-gradient(100deg,rgba(32,23,1,.93) 0%,
  rgba(32,23,1,.80) 34%,rgba(32,23,1,.44) 58%,rgba(32,23,1,.10) 84%)}
.hero.mid::after{background:linear-gradient(180deg,rgba(32,23,1,.26),rgba(32,23,1,.58))}
.hero-in{position:relative;z-index:2;height:100%;max-width:var(--wrap);margin:0 auto;
  padding:0 var(--gut);display:flex;align-items:center}
.hero.mid .hero-in{justify-content:center;text-align:center}
.hero-txt{max-width:540px}
.hero.mid .hero-txt{max-width:740px}
.hero-txt .sub{margin-bottom:24px}
.hero-txt h1{margin-bottom:24px;max-width:16ch}
.hero-txt p{font-size:17px;max-width:440px;margin-bottom:38px;color:var(--ink-2)}
.hero.mid .hero-txt p{margin-left:auto;margin-right:auto}
.hero.dark .hero-txt h1,.hero.mid .hero-txt h1{color:var(--cream)}
.hero.dark .hero-txt p,.hero.mid .hero-txt p{color:rgba(240,234,226,.82)}
.hero.dark .sub,.hero.mid .sub{color:#C99A5F}
.hero-side{position:absolute;left:calc(var(--gut) - 28px);top:50%;z-index:3;
  transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;
  font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--ink-2);opacity:.48}
.hero.dark .hero-side,.hero.mid .hero-side{color:var(--cream);opacity:.55}
@media(max-width:1240px){.hero-side{display:none}}
@media(max-width:860px){
  .hero,.hero.short{height:auto;padding:136px 0 82px}
  .hero::after{background:linear-gradient(180deg,rgba(251,248,244,.95),rgba(251,248,244,.9))}
  .hero.dark::after,.hero.mid::after{background:linear-gradient(180deg,rgba(32,23,1,.8),rgba(32,23,1,.74))}
  .hero-txt{max-width:none}
}

/* ── nhịp dọc ────────────────────────────────────────────────────────────── */
.sec{padding:clamp(74px,9.5vw,132px) 0}
.sec.tight{padding:clamp(54px,7vw,94px) 0}
.sec.dark{background:var(--espresso);color:rgba(240,234,226,.82)}
.sec.dark h2,.sec.dark h3{color:var(--cream)}
.sec.paper{background:var(--cream)}
.sec-hd{margin-bottom:clamp(42px,5vw,70px)}
.sec-hd p{max-width:620px;color:var(--ink-2)}
.sec-hd.ctr p{margin-left:auto;margin-right:auto}

/* ── lưới sản phẩm ───────────────────────────────────────────────────────── */
.prods{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,44px)}
.prod{text-align:center;display:block}
.prod .ph{position:relative;overflow:hidden;background:var(--cream);aspect-ratio:600/839}
.prod .ph img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.3s cubic-bezier(.2,.7,.3,1)}
.prod:hover .ph img{transform:scale(1.045)}
.prod h3{font-size:21px;line-height:1.4;margin:26px 0 6px;letter-spacing:.04em}
.prod .or{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--copper);margin-bottom:14px}
.prod .ds{font-size:14.5px;line-height:1.7;color:var(--ink-2);margin-bottom:14px;
  min-height:calc(14.5px*1.7*2)}
.prod .pr{font-size:13px;color:var(--ink);letter-spacing:.02em}
@media(max-width:1020px){.prods{grid-template-columns:repeat(2,1fr);gap:22px}}
@media(max-width:560px){.prods{grid-template-columns:1fr}}

/* ── ba ô tràn viền ──────────────────────────────────────────────────────── */
.sq{display:grid;grid-template-columns:repeat(3,1fr)}
.sq.c2{grid-template-columns:repeat(2,1fr)}
.sq .cell{position:relative;aspect-ratio:1;overflow:hidden;display:flex;
  align-items:flex-end;isolation:isolate}
.sq.c2 .cell{aspect-ratio:3/2}
.sq .cell>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform 1.5s cubic-bezier(.2,.7,.3,1)}
.sq .cell:hover>img{transform:scale(1.055)}
.sq .cell::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(32,23,1,0) 8%,rgba(32,23,1,.30) 38%,rgba(32,23,1,.70) 66%,rgba(32,23,1,.90) 100%)}
.sq .txt{padding:clamp(30px,3.6vw,54px);color:var(--cream)}
.sq .sub{color:var(--cream);opacity:.85;margin-bottom:16px}
.sq h3{color:var(--cream);margin-bottom:12px}
.sq p{font-size:15px;line-height:1.72;color:rgba(240,234,226,.8);max-width:33ch;
  margin-bottom:22px;min-height:calc(15px*1.72*3)}
@media(max-width:920px){.sq,.sq.c2{grid-template-columns:1fr}
  .sq .cell,.sq.c2 .cell{aspect-ratio:16/10}.sq p{min-height:0}}

/* ── khối hai cột ────────────────────────────────────────────────────────── */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5.5vw,88px);
  align-items:stretch}
.duo>*{align-self:center}
.duo .pic{align-self:stretch;display:flex;flex-direction:column;
  min-height:clamp(330px,35vw,540px)}
.duo .pic>img{width:100%;flex:1;min-height:0;object-fit:cover}
.duo.rev .pic{order:2}
.duo .sub{margin-bottom:20px}
.duo p{margin-bottom:20px;color:var(--ink)}
.duo .rule{margin:24px 0 28px}
@media(max-width:920px){.duo,.duo.rev{grid-template-columns:1fr}
  .duo.rev .pic{order:0}
  .duo .pic{min-height:0}.duo .pic>img{aspect-ratio:16/10;flex:none}}

/* ── dải ảnh ─────────────────────────────────────────────────────────────── */
.gal{display:grid;grid-template-columns:repeat(6,1fr)}
.gal.c4{grid-template-columns:repeat(4,1fr)}
.gal a,.gal div{position:relative;aspect-ratio:1;overflow:hidden;display:block}
.gal img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s cubic-bezier(.2,.7,.3,1)}
.gal a::after{content:"";position:absolute;inset:0;background:var(--espresso);
  opacity:0;transition:opacity .45s}
.gal a:hover::after{opacity:.26}
.gal a:hover img{transform:scale(1.06)}
@media(max-width:920px){.gal,.gal.c4{grid-template-columns:repeat(3,1fr)}}

/* ── bảng thông số ───────────────────────────────────────────────────────── */
.spec{width:100%;border-collapse:collapse;font-size:15px}
.spec th,.spec td{text-align:left;padding:17px 0;border-bottom:1px solid var(--line);
  vertical-align:top}
.spec tr:first-child th,.spec tr:first-child td{border-top:1px solid var(--line)}
.spec th{width:37%;font-weight:500;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--copper);padding-right:22px;padding-top:20px}
.spec td{color:var(--ink)}
.sec.dark .spec th,.sec.dark .spec td{border-color:rgba(240,234,226,.15)}
.sec.dark .spec td{color:rgba(240,234,226,.86)}

/* ── thẻ ─────────────────────────────────────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,44px)}
.cards.c2{grid-template-columns:repeat(2,1fr)}
.cards.c4{grid-template-columns:repeat(4,1fr)}
.card{border-top:1px solid var(--line);padding:30px 0 0}
.card .n{font-family:var(--serif);font-size:15px;color:var(--copper);line-height:1;
  margin-bottom:20px;display:block;letter-spacing:.1em}
.card h3{font-size:20px;margin-bottom:12px}
.card p{font-size:15px;line-height:1.72;color:var(--ink-2)}
.sec.dark .card{border-color:rgba(240,234,226,.18)}
.sec.dark .card p{color:rgba(240,234,226,.76)}
@media(max-width:920px){.cards,.cards.c2,.cards.c4{grid-template-columns:1fr;gap:0}
  .card{padding:28px 0}}

/* ── các bước ────────────────────────────────────────────────────────────── */
.steps{counter-reset:s}
.step{counter-increment:s;display:grid;grid-template-columns:72px 1fr;
  gap:clamp(18px,2.6vw,44px);padding:34px 0;border-top:1px solid var(--line)}
.step:last-child{border-bottom:1px solid var(--line)}
.sec.dark .step{border-color:rgba(240,234,226,.15)}
.step::before{content:counter(s,decimal-leading-zero);font-family:var(--serif);
  font-size:15px;color:var(--copper);line-height:2.2;letter-spacing:.1em}
.step h3{font-size:21px;margin-bottom:10px}
.step p{font-size:15.5px;line-height:1.76;color:var(--ink-2);max-width:62ch}
.sec.dark .step p{color:rgba(240,234,226,.78)}
@media(max-width:620px){.step{grid-template-columns:1fr;gap:6px}
  .step::before{line-height:1.4}}

/* ── hỏi đáp ─────────────────────────────────────────────────────────────── */
.qa{border-top:1px solid var(--line)}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;padding:28px 48px 28px 0;position:relative;
  font-family:var(--serif);font-size:20px;color:var(--espresso);line-height:1.5}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";position:absolute;right:10px;top:38px;width:11px;height:1px;
  background:var(--copper)}
.qa summary::before{content:"";position:absolute;right:15px;top:33px;width:1px;height:11px;
  background:var(--copper);transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.qa details[open] summary::before{transform:scaleY(0)}
.qa .a{padding:0 48px 30px 0;font-size:15.5px;line-height:1.8;color:var(--ink-2);max-width:74ch}

/* ── biểu mẫu ────────────────────────────────────────────────────────────── */
.news{background:var(--cream);padding:clamp(50px,6.5vw,92px) clamp(24px,5vw,84px);
  text-align:center}
.sec.dark .news{background:rgba(240,234,226,.06)}
.form{display:flex;max-width:500px;margin:0 auto}
.form input{flex:1;border:0;border-bottom:1px solid var(--line-2);background:none;
  padding:15px 4px;font-family:var(--sans);font-size:15px;color:var(--ink);outline:0}
.form input::placeholder{color:var(--ink-2);opacity:.7}
.form input:focus{border-color:var(--copper)}
.form button{border:0;border-bottom:1px solid var(--copper);background:none;
  color:var(--copper);font-family:var(--sans);font-size:11px;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;padding:0 4px 0 26px;cursor:pointer;
  transition:color .3s}
.form button:hover{color:var(--espresso);border-color:var(--espresso)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:26px 24px;max-width:720px;
  margin:0 auto;text-align:left}
.fgrid label{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--copper);margin-bottom:10px}
.fgrid input,.fgrid textarea,.fgrid select{width:100%;border:0;
  border-bottom:1px solid var(--line-2);background:none;padding:10px 2px;
  font-family:var(--sans);font-size:15px;color:var(--ink);outline:0}
.fgrid input:focus,.fgrid textarea:focus,.fgrid select:focus{border-color:var(--copper)}
.fgrid .w2{grid-column:1/-1}
.fgrid textarea{min-height:110px;resize:vertical}
@media(max-width:620px){.form{flex-direction:column;gap:22px}
  .form button{padding:0;text-align:left;align-self:flex-start}
  .fgrid{grid-template-columns:1fr}}

/* ── ba ô chân trang ─────────────────────────────────────────────────────── */
.trio{display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);max-width:var(--wrap);margin:0 auto;
  padding:0 var(--gut)}
.trio .c{padding:clamp(44px,5vw,72px) clamp(22px,2.6vw,44px);text-align:center;
  border-right:1px solid var(--line)}
.trio .c:first-child{padding-left:0}
.trio .c:last-child{border-right:0;padding-right:0}
.trio .sub{margin-bottom:16px}
.trio h3{font-size:23px;margin-bottom:14px}
.trio p{font-size:14.5px;line-height:1.72;color:var(--ink-2);min-height:calc(14.5px*1.72*2)}
@media(max-width:920px){.trio{grid-template-columns:1fr}
  .trio .c{border-right:0;border-bottom:1px solid var(--line);padding-left:0;padding-right:0}
  .trio .c:last-child{border-bottom:0}.trio p{min-height:0}}

/* ── chân trang ──────────────────────────────────────────────────────────── */
.foot{background:var(--espresso);color:var(--cream);margin-top:clamp(70px,9vw,120px)}
.foot-top{padding:clamp(60px,7vw,92px) 0 clamp(38px,4.5vw,58px);text-align:center}
.foot-brand{display:flex;justify-content:center;margin-bottom:44px}
.foot-brand img{height:118px}
.cols{display:grid;grid-template-columns:repeat(4,1fr);gap:36px;text-align:left;
  max-width:960px;margin:0 auto;padding-top:44px;border-top:1px solid rgba(240,234,226,.15)}
.cols h4{font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.26em;
  text-transform:uppercase;color:#C99A5F;margin-bottom:20px}
.cols a,.cols p{display:block;font-size:14px;line-height:2.05;color:rgba(240,234,226,.78)}
.cols a{transition:color .3s}
.cols a:hover{color:var(--cream)}
@media(max-width:860px){.cols{grid-template-columns:1fr 1fr;gap:30px}}
@media(max-width:520px){.cols{grid-template-columns:1fr;text-align:center}}
.foot-bar{border-top:1px solid rgba(240,234,226,.15);padding:26px 0;display:flex;
  align-items:center;justify-content:space-between;gap:18px;font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(240,234,226,.5)}
@media(max-width:760px){.foot-bar{flex-direction:column;text-align:center}}

/* ── vụn đường dẫn ───────────────────────────────────────────────────────── */
.crumb{font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--copper);padding:30px 0 0}
.crumb a{opacity:.68;transition:opacity .3s}.crumb a:hover{opacity:1}
.crumb span{opacity:.4;margin:0 10px}

/* ── hiện dần ────────────────────────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(22px);
  transition:opacity 1s ease,transform 1s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  *{scroll-behavior:auto!important;transition-duration:.01ms!important}}