/* =========================================================
   HẠT Coffee — style.css
   Phong cách: thủ công, giấy kraft (craft). Nâu mộc + kem + xanh rêu,
   chữ serif đậm, viền nét tay, tem tròn.
   Bố cục khác các mẫu trước:
     - Header ngang có "tem" tròn xoay ở giữa logo
     - Hero: ảnh CẮT TRÒN lớn lệch phải, chữ trái, tem chữ xoay quanh nút
     - Menu dạng DANH SÁCH CHỮ LỚN, hover từng dòng thì ẢNH ĐỔI ở cột phải
     - Câu chuyện hạt: 5 BƯỚC CUỘN NGANG theo dòng thời gian
     - Túi cà phê: lưới 4 cột nền kraft, tem "rang ngày"
     - Cửa hàng: danh sách + bản đồ
     - Đăng ký nhận cà phê định kỳ: 3 ô chọn tần suất
   Ảnh: mỗi khối ảnh dùng biến --img trên thẻ HTML (đường dẫn ../images/…).
   ========================================================= */

:root{
  --kraft:#C8A97E;
  --kraft-2:#E8D9C0;
  --cream:#F7F1E6;
  --cream-2:#EFE5D3;
  --brown:#4A2C1A;
  --brown-2:#6B4326;
  --moss:#4F5D3A;
  --moss-soft:#DFE3D2;
  --text:#2E211A;
  --muted:#8A7563;
  --line:#D9C9B0;
  --radius:6px;
  --shadow:0 2px 4px rgba(74,44,26,.06), 0 14px 34px rgba(74,44,26,.12);
  --ph:linear-gradient(135deg,#E8D9C0 0%,#D6C0A0 55%,#C4A98A 100%);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Be Vietnam Pro',system-ui,-apple-system,sans-serif;color:var(--text);background:var(--cream);font-size:15px;line-height:1.7;-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(rgba(74,44,26,.035) 1px,transparent 1px);background-size:6px 6px}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
img{max-width:100%;display:block}
svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ph{background:var(--img,var(--ph)) center/cover no-repeat,var(--ph)}
.container{width:min(1180px,100% - 40px);margin-inline:auto}
h1,h2,h3,h4{font-family:'Fraunces','Playfair Display',Georgia,serif;font-weight:700;line-height:1.1;color:var(--brown);letter-spacing:-.01em}
b,strong{font-weight:600}

/* ---------- Nút ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:13px 24px;border-radius:999px;font-weight:600;font-size:14px;transition:.2s;white-space:nowrap;border:2px solid var(--brown)}
.btn svg{width:16px;height:16px}
.btn--brown{background:var(--brown);color:var(--cream)}
.btn--brown:hover{background:var(--brown-2);border-color:var(--brown-2)}
.btn--line{background:transparent;color:var(--brown)}
.btn--line:hover{background:var(--brown);color:var(--cream)}
.btn--moss{background:var(--moss);border-color:var(--moss);color:#fff}
.btn--moss:hover{background:#3F4A2E}

/* ---------- Header ---------- */
.header{position:sticky;top:0;z-index:50;background:rgba(247,241,230,.94);backdrop-filter:blur(8px);border-bottom:2px solid var(--brown)}
.header__in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:76px;gap:20px}
.nav{display:flex;gap:6px}
.nav--r{justify-content:flex-end}
.nav__link{padding:8px 12px;font-weight:600;font-size:14px;border-bottom:2px solid transparent}
.nav__link:hover,.nav__link.is-active{border-color:var(--brown)}
.logo{display:flex;align-items:center;gap:12px;padding:0 20px}
.stamp{width:52px;height:52px;border-radius:50%;border:2px solid var(--brown);display:grid;place-items:center;position:relative;flex:none}
.stamp::before{content:"";position:absolute;inset:4px;border:1px dashed var(--brown);border-radius:50%}
.stamp b{font-family:'Fraunces',serif;font-size:20px;color:var(--brown)}
.logo__text b{display:block;font-family:'Fraunces',serif;font-size:24px;color:var(--brown);line-height:1}
.logo__text small{display:block;font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted);font-weight:600;margin-top:3px}
.burger{display:none;width:40px;height:40px;border:2px solid var(--brown);border-radius:50%;place-items:center}
.nav__link--m{display:none}

/* ---------- Hero ảnh tròn ---------- */
.hero{padding:60px 0 30px;overflow:hidden}
.hero__in{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.tag{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border:1.5px solid var(--brown);border-radius:999px;font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;background:var(--cream)}
.hero h1{font-size:clamp(44px,6vw,84px);margin:22px 0 16px}
.hero h1 em{font-style:italic;font-weight:400;color:var(--moss)}
.hero p{font-size:17px;color:var(--muted);max-width:480px}
.hero__cta{display:flex;align-items:center;gap:22px;margin-top:30px;flex-wrap:wrap}
.spin{position:relative;width:110px;height:110px;flex:none}
.spin svg{width:110px;height:110px;animation:spin 14s linear infinite;fill:var(--brown);stroke:none}
.spin > span{position:absolute;inset:0;display:grid;place-items:center;font-size:26px}
@keyframes spin{to{transform:rotate(360deg)}}
.hero__art{position:relative;aspect-ratio:1;max-width:520px;justify-self:end;width:100%}
.hero__art .ph{position:absolute;inset:0;border-radius:50%;border:6px solid var(--cream);box-shadow:var(--shadow)}
.hero__art::before{content:"";position:absolute;inset:-4%;border:2px dashed var(--kraft);border-radius:50%}
.badge{position:absolute;background:var(--moss);color:#fff;border-radius:50%;width:120px;height:120px;display:grid;place-items:center;text-align:center;font-family:'Fraunces',serif;font-size:15px;line-height:1.15;padding:14px;transform:rotate(-8deg);box-shadow:var(--shadow)}
.badge small{display:block;font-family:'Be Vietnam Pro',sans-serif;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;margin-top:4px;opacity:.85}
.badge--1{left:-10px;top:8%}
.badge--2{right:-10px;bottom:6%;background:var(--kraft);color:var(--brown);transform:rotate(6deg)}

/* Dải chữ */
.strip{border-block:2px solid var(--brown);padding:12px 0;overflow:hidden;white-space:nowrap;font-family:'Fraunces',serif;font-size:20px;color:var(--brown);margin-top:30px}
.strip__track{display:inline-block;animation:strip 36s linear infinite}
.strip__track span{margin:0 28px}
.strip__track i{font-style:normal;color:var(--kraft)}
@keyframes strip{to{transform:translateX(-50%)}}

/* ---------- Section ---------- */
.section{padding:90px 0}
.section--kraft{background:var(--kraft-2)}
.section--brown{background:var(--brown);color:var(--cream)}
.section--brown h2,.section--brown h3{color:var(--cream)}
.section__head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:44px;flex-wrap:wrap}
.section__title{font-size:clamp(32px,4.2vw,54px)}
.section__title em{font-style:italic;font-weight:400;color:var(--moss)}
.section--brown .section__title em{color:var(--kraft)}
.section__head p{color:var(--muted);max-width:440px}
.section--brown .section__head p{color:rgba(247,241,230,.7)}

/* ---------- Menu chữ lớn + ảnh đổi ---------- */
.menu{display:grid;grid-template-columns:1.2fr .8fr;gap:50px;align-items:start}
.menu__list{border-top:2px solid var(--brown)}
.mi{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line);cursor:pointer;transition:.15s}
.mi:hover,.mi.is-active{padding-left:14px}
.mi b{font-family:'Fraunces',serif;font-size:28px;font-weight:600;color:var(--brown);display:block}
.mi small{color:var(--muted);font-size:13.5px}
.mi span{font-family:'Fraunces',serif;font-size:22px;color:var(--moss)}
.menu__pic{position:sticky;top:100px}
.menu__pic .ph{aspect-ratio:4/5;border-radius:var(--radius);border:2px solid var(--brown);box-shadow:8px 8px 0 var(--kraft);transition:.3s}
.menu__pic .cap{margin-top:16px;font-size:13px;color:var(--muted)}

/* ---------- Câu chuyện hạt: cuộn ngang ---------- */
.journey{margin-inline:calc(50% - 50vw);padding-inline:calc(50vw - 50%);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:20px}
.journey::-webkit-scrollbar{display:none}
.journey__track{display:flex;gap:0;width:max-content;position:relative}
.journey__track::before{content:"";position:absolute;left:0;right:0;top:52px;height:2px;background:var(--kraft)}
.jstep{width:330px;flex:none;scroll-snap-align:start;padding:0 26px 0 0;position:relative}
.jstep__dot{width:24px;height:24px;border-radius:50%;background:var(--cream);border:3px solid var(--moss);position:relative;z-index:1;margin:40px 0 20px}
.jstep .n{font-family:'Fraunces',serif;font-size:13px;letter-spacing:2px;color:var(--muted)}
.jstep .ph{aspect-ratio:4/3;border-radius:var(--radius);margin:12px 0 16px;border:2px solid var(--brown)}
.jstep h3{font-size:24px}
.jstep p{color:var(--muted);font-size:14px;margin-top:8px}
.section--brown .jstep__dot{background:var(--brown);border-color:var(--kraft)}
.section--brown .jstep .n{color:var(--kraft)}
.section--brown .jstep p{color:rgba(247,241,230,.7)}
.section--brown .jstep .ph{border-color:var(--kraft)}

/* ---------- Túi cà phê ---------- */
.bags{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.bag{background:var(--cream);border:2px solid var(--brown);border-radius:var(--radius);padding:14px;display:flex;flex-direction:column;position:relative;transition:.2s}
.bag:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--kraft)}
.bag .ph{aspect-ratio:1;border-radius:var(--radius);background-color:var(--kraft-2)}
.bag__roast{position:absolute;top:-12px;right:14px;background:var(--moss);color:#fff;border-radius:999px;padding:5px 12px;font-size:11px;font-weight:600;letter-spacing:.5px}
.bag h3{font-size:22px;margin-top:14px}
.bag small{color:var(--muted);font-size:13px;display:block}
.bag__notes{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}
.bag__notes span{background:var(--kraft-2);padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:600}
.bag__foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:12px;border-top:1px dashed var(--line)}
.bag__foot b{font-family:'Fraunces',serif;font-size:20px;color:var(--brown)}
.bag__foot .btn{padding:8px 14px;font-size:12.5px}

/* ---------- Cửa hàng ---------- */
.stores{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;align-items:start}
.store{padding:20px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:16px}
.store h3{font-size:22px}
.store p{color:var(--muted);font-size:14px}
.store .open{font-size:12px;font-weight:600;color:var(--moss)}
.stores .ph{aspect-ratio:4/3;border-radius:var(--radius);border:2px solid var(--brown);position:sticky;top:100px}

/* ---------- Định kỳ ---------- */
.subs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.sub{border:2px solid var(--brown);border-radius:var(--radius);padding:30px;background:var(--cream);position:relative;text-align:center}
.sub--hot{background:var(--brown);color:var(--cream)}
.sub--hot h3{color:var(--cream)}
.sub__tag{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--kraft);color:var(--brown);border-radius:999px;padding:5px 14px;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;white-space:nowrap}
.sub h3{font-size:26px}
.sub .price{font-family:'Fraunces',serif;font-size:40px;margin:14px 0 4px}
.sub .price small{font-family:'Be Vietnam Pro',sans-serif;font-size:13px;opacity:.7}
.sub p{font-size:14px;opacity:.8}
.sub ul{list-style:none;margin:20px 0 24px;display:grid;gap:8px;font-size:14px;text-align:left}
.sub li{display:flex;gap:10px}
.sub li svg{color:var(--moss)}
.sub--hot li svg{color:var(--kraft)}
.sub--hot .btn{background:var(--kraft);border-color:var(--kraft);color:var(--brown)}

/* ---------- Trang con ---------- */
.pagehead{padding:70px 0 40px;border-bottom:2px solid var(--brown)}
.pagehead h1{font-size:clamp(44px,6.5vw,88px)}
.pagehead p{color:var(--muted);max-width:560px;margin-top:16px;font-size:16px}
.crumbs{display:flex;gap:10px;font-size:12px;color:var(--muted);margin-top:18px;font-weight:600}
.story{max-width:760px;margin-inline:auto;font-size:17px}
.story p{margin-bottom:20px;color:var(--text)}
.story .lead{font-family:'Fraunces',serif;font-size:26px;line-height:1.4;color:var(--brown)}
.story .ph{aspect-ratio:16/9;border-radius:var(--radius);border:2px solid var(--brown);margin:30px 0}
.form{background:var(--cream);border:2px solid var(--brown);border-radius:var(--radius);padding:34px;box-shadow:8px 8px 0 var(--kraft)}
.form__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:6px}
.field--full{grid-column:1/-1}
.field label{font-size:12px;font-weight:600;letter-spacing:.5px}
.field input,.field select,.field textarea{border:1.5px solid var(--line);border-radius:var(--radius);padding:11px 12px;font:inherit;background:#fff;outline:none}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brown)}
.field textarea{min-height:100px;resize:vertical}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{padding:9px 14px;border:1.5px solid var(--line);border-radius:999px;font-size:13px;cursor:pointer;background:#fff;display:flex;gap:8px;align-items:center}
.chips input{accent-color:var(--moss)}
.contact{display:grid;grid-template-columns:1fr 1.2fr;gap:50px}
.contact__list{display:grid;gap:20px;margin-top:26px}
.contact__list b{display:block;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}

/* ---------- Footer ---------- */
.footer{background:var(--brown);color:var(--cream);padding:60px 0 0;margin-top:40px}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:36px}
.footer .logo{padding:0}.footer .stamp{border-color:var(--kraft)}.footer .stamp::before{border-color:var(--kraft)}.footer .stamp b,.footer .logo__text b{color:var(--cream)}.footer .logo__text small{color:var(--kraft)}
.footer__col p{opacity:.7;font-size:13.5px;margin-top:14px;max-width:300px}
.footer__col h4{font-family:'Be Vietnam Pro',sans-serif;font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--kraft);margin-bottom:16px}
.footer__col a{display:block;padding:4px 0;font-size:14px;opacity:.85}
.footer__col a:hover{color:var(--kraft);opacity:1}
.footer__bar{margin-top:50px;border-top:1px solid rgba(247,241,230,.15);padding:18px 0;font-size:12.5px;opacity:.6;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* ---------- Responsive ---------- */
@media (max-width:1100px){.bags{grid-template-columns:repeat(2,1fr)}.footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:980px){
  .header__in{grid-template-columns:auto 1fr auto;min-height:66px}
  .nav{display:none}
  .nav.is-open{display:flex;position:fixed;inset:66px 0 auto 0;flex-direction:column;background:var(--cream);border-bottom:2px solid var(--brown);padding:12px 20px 20px;z-index:60}
  .nav.is-open .nav__link{padding:12px 0;border-bottom:1px solid var(--line)}
  .nav.is-open .nav__link--m{display:block}
  .logo{order:1;justify-self:start;padding:0}
  .burger{display:grid;order:3}
  .hero__in{grid-template-columns:1fr}
  .hero__art{justify-self:center;max-width:420px}
  .menu{grid-template-columns:1fr}
  .menu__pic{position:static;max-width:420px}
  .stores{grid-template-columns:1fr}
  .stores .ph{position:static}
  .subs{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr}
}
@media (max-width:640px){
  .container{width:min(1180px,100% - 32px)}
  .section{padding:60px 0}
  .bags{grid-template-columns:1fr}
  .form__grid{grid-template-columns:1fr}
  .form{padding:24px}
  .footer__grid{grid-template-columns:1fr}
  .mi b{font-size:22px}
  .jstep{width:270px}
  .badge{width:96px;height:96px;font-size:13px}
}