/* ===== Cỏ Organic – lớp giao diện "Botanical" (thảo mộc) =====
   Chỉ ghi đè style.css: nền giấy, họa tiết thảo dược nét vẽ, chữ Lora + Dancing Script, màu quế/nghệ.
   Bỏ file này khỏi <head> là web quay về giao diện cũ. */
:root{
  --paper:#F7F4EC;      /* nền kem giấy */
  --sand:#EFE8D8;       /* be đất – section xen kẽ */
  --cinnamon:#8A5A3B;   /* nâu quế */
  --turmeric:#D9A441;   /* vàng nghệ */
  --line:#e4dccb;
  --serif:Lora,Georgia,"Times New Roman",serif;
  --script:"Dancing Script",cursive;
}
body{background:var(--paper) url("botanical/paper.svg") repeat;background-size:240px}

/* header như tờ giấy, mờ nhẹ khi cuộn */
.header{background:rgba(247,244,236,.94);backdrop-filter:blur(6px);box-shadow:0 1px 0 var(--line)}
.hero{background:transparent}

/* ---- tiêu đề section ---- */
.sec-kicker{font-family:var(--script);font-weight:700;font-size:1.45rem;color:var(--cinnamon);margin:0 0 2px;line-height:1.2}
.sec-title{font-family:var(--serif);font-weight:600;text-transform:none;letter-spacing:0;font-size:clamp(1.6rem,3vw,2.15rem);color:var(--green)}
.sec-title em{font-family:var(--script);font-style:normal;font-weight:700;color:var(--lime);font-size:1.12em}
.leaf{width:180px;height:34px;margin-top:10px;background:url("botanical/sprig.svg") center/contain no-repeat}
.sec-lead{color:#5d5a50}

/* ---- section: nền xen kẽ + mép lượn sóng + họa tiết góc ---- */
.section{position:relative}
main{overflow-x:clip}
.section>.wrap{position:relative;z-index:1}
#san-pham::before,#san-pham::after,.about::after,#chinh-sach::after,.faq:not(#chinh-sach)::after{content:"";position:absolute;pointer-events:none;background-repeat:no-repeat;background-size:contain;z-index:0}
#san-pham::before{left:-30px;top:40px;width:230px;height:360px;background-image:url("botanical/perilla.svg");opacity:.32;transform:rotate(-14deg)}
#san-pham::after{right:-20px;bottom:30px;width:240px;height:210px;background-image:url("botanical/ginger.svg");opacity:.35}

.about{background:var(--sand);border-top:0}
.about::before,.faq:not(#chinh-sach)::before{content:"";position:absolute;left:0;right:0;top:-38px;height:40px;pointer-events:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V22C180 2 330 2 520 18s390 22 560 6S1330 4 1440 18v22z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V22C180 2 330 2 520 18s390 22 560 6S1330 4 1440 18v22z'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.about::before{background:var(--sand)}
.about::after{right:-10px;top:30px;width:200px;height:280px;background-image:url("botanical/basil.svg");opacity:.4}
.pillar{background:rgba(255,255,255,.55);border:1px solid #e2d8c2;border-radius:18px;padding:26px 18px 22px}
.pillar h3{font-family:var(--serif);font-weight:600;letter-spacing:0;font-size:1.02rem;color:var(--green)}
.pillar h3::after{background:var(--turmeric)}

#chinh-sach{background:transparent}
#chinh-sach::after{left:-10px;bottom:20px;width:230px;height:200px;background-image:url("botanical/cinnamon.svg");opacity:.33}
.faq:not(#chinh-sach){background:var(--sand)}
.faq:not(#chinh-sach)::before{background:var(--sand)}
.faq:not(#chinh-sach)::after{right:-20px;bottom:10px;width:200px;height:310px;background-image:url("botanical/perilla.svg");opacity:.28;transform:rotate(12deg)}
.faq details{background:#fffdf8;border:1px solid #e2d8c2;box-shadow:none}
.faq details[open]{border-color:var(--lime)}
.faq summary{font-family:var(--serif);font-weight:600;color:#3c3a33}
.faq summary::after{color:var(--cinnamon)}

/* ---- dải cam kết dịch vụ ---- */
.usp{background:var(--green) url("botanical/leaf-white.svg") right -40px center/240px no-repeat}
.usp-ic{border-color:rgba(217,164,65,.6);background:rgba(255,255,255,.06)}
.usp-ic svg{color:#e9c77a}

/* ---- danh mục + sản phẩm ---- */
.chip{background:#fffdf8;border-color:#ddd2ba}
.chip.active{background:var(--green);border-color:var(--green)}
.card{background:#fffdf8;border:1px solid #e6dcc7;border-radius:20px}
.card:hover{box-shadow:0 14px 34px -18px rgba(90,70,30,.45)}
.card-img{background:radial-gradient(circle at 50% 58%,#fff 0 52%,#f3eddf 100%);margin:10px 10px 0;border-radius:14px}
.card-body h3{font-family:var(--serif);text-transform:none;letter-spacing:0;font-size:1.08rem;color:var(--green)}
.price{border-top:1.5px dashed #d8cbb0;color:var(--cinnamon)}
.variant{background:#fffdf8;border-color:#e2d8c2}
.ship-note b{color:var(--cinnamon)}

/* ---- footer: đồng cỏ thảo dược ---- */
.faq:not(#chinh-sach){padding-bottom:160px}
@media (max-width:860px){.faq:not(#chinh-sach){padding-bottom:110px}}
.footer{position:relative;margin-top:0;padding:24px 0 26px;color:#efe7d2;
  background:url("botanical/perilla-cream.svg") left -60px bottom 20px no-repeat,
             url("botanical/basil-cream.svg") right -10px bottom 40px no-repeat,
             url("botanical/paper.svg") repeat,
             linear-gradient(180deg,#355024 0%,#2c451d 55%,#22381a 100%);
  background-size:200px auto,170px auto,240px,auto}
.footer::before{display:none}
.f-meadow{position:absolute;left:0;right:0;top:-118px;height:120px;background:url("botanical/meadow.svg") center bottom/auto 120px repeat-x;pointer-events:none}
.footer a{color:#f3ead2}
.footer a:hover{color:#e9c77a}
.f-brand{display:flex;align-items:center;gap:36px;padding:8px 16px 34px;border-bottom:1px solid rgba(243,234,210,.16);margin-bottom:38px}
.f-brand img{width:150px;height:auto;flex:none}
.f-slogan{font-family:var(--script);font-weight:700;font-size:1.9rem;color:#e9c77a;margin:0 0 6px;line-height:1.2}
.f-story{margin:0;max-width:640px;font-size:.92rem;line-height:1.75;color:rgba(243,234,210,.82)}
.f-title{display:flex;align-items:center;gap:8px;font-family:var(--serif);font-weight:600;font-size:1.08rem;color:#fff;margin:0 0 18px;padding:0}
.f-title::after{display:none}
.f-leaf{width:18px;height:18px;flex:none;color:#a9c97f}
.f-links{gap:9px}
.f-links a{opacity:.88;transition:opacity .15s,padding .15s}
.f-links a:hover{opacity:1;padding-left:4px}
.soc{display:inline-flex;align-items:center;gap:10px}
.soc svg{width:30px;height:30px;padding:6px;border-radius:50%;background:rgba(243,234,210,.12);border:1px solid rgba(243,234,210,.3);flex:none}
.contact-links{margin-top:18px}
.contact-links .btn{background:transparent;color:#f3ead2;border:1px solid rgba(243,234,210,.55);border-radius:999px}
.contact-links .btn:hover{background:#f3ead2;color:var(--green)}
.f-company .small{color:rgba(243,234,210,.85)}
.f-company svg{color:#a9c97f}
.f-bottom{text-align:center;margin-top:40px}
.f-divider{height:30px;background:url("botanical/divider-cream.svg") center/min(600px,100%) auto no-repeat;margin-bottom:10px}
.footer .disclaimer{border-top:0;margin:0 auto;max-width:760px;padding-top:0;opacity:.7}
.footer .copyright{opacity:.55;margin-top:8px}
@media (max-width:860px){
  .footer{margin-top:0;background:url("botanical/paper.svg") repeat,linear-gradient(180deg,#355024 0%,#2c451d 55%,#22381a 100%);background-size:240px,auto}
  .footer-in{grid-template-columns:1fr 1fr!important;gap:28px 18px!important}
  .footer-in .f-company,.footer-in .f-col:nth-child(2){grid-column:1/-1}
  .f-meadow{top:-78px;height:80px;background-size:auto 80px}
  .f-brand{flex-direction:column;text-align:center;gap:14px}
  .f-brand img{width:120px}
  .f-slogan{font-size:1.5rem}
}

/* ---- giỏ hàng / form ---- */
.drawer,.modal-box{background:var(--paper)}
.drawer-head h2,.modal-box h2{font-family:var(--serif);text-transform:none;letter-spacing:0}
input,textarea,.line img{background:#fffdf8}

/* menu sổ xuống */
.nav-dd-menu::before{background:#fffdf8}

/* nhãn bản xem thử */
.preview-badge{position:fixed;left:16px;bottom:16px;z-index:70;background:var(--cinnamon);color:#fff;font-size:.75rem;font-weight:600;padding:8px 14px;border-radius:999px;box-shadow:0 6px 16px -6px rgba(0,0,0,.4)}

@media (max-width:860px){
  #san-pham::before,#san-pham::after,.about::after,#chinh-sach::after,.faq:not(#chinh-sach)::after{opacity:.16;transform:scale(.6);transform-origin:right bottom}
  #san-pham::before{transform-origin:left top}
  .header{background:var(--paper)}
  .nav{background:var(--paper)}
  .usp{background-size:160px}
}
@media (prefers-reduced-motion:no-preference){
  #san-pham::before,.faq:not(#chinh-sach)::after{animation:sway 9s ease-in-out infinite alternate}
}
@keyframes sway{from{rotate:-1.5deg}to{rotate:1.5deg}}

/* chi tiết sản phẩm – theo giao diện thảo mộc */
.pm-box{background:#fffdf8 url("botanical/paper.svg");background-size:240px}
.pm-info h2,.pm-panel h3,.pm-panel h4{font-family:var(--serif);font-weight:600}
.pm-price{color:var(--cinnamon)}
.pm-cat{color:var(--cinnamon);font-family:var(--script);text-transform:none;letter-spacing:0;font-size:1.25rem;font-weight:700}
.pm-main{border-color:#e6dcc7}
.pm-tab.on{border-color:var(--turmeric)}
.pm-chips span{background:#f1ead8;color:#5b4a2f}

/* câu chuyện thương hiệu – căn bếp của bà */
.story{max-width:780px;margin:-8px auto 40px;text-align:center;color:#4f4b40;line-height:1.85;font-size:1rem}
.story p{margin:0 0 1em}
.story-lead{font-family:var(--serif);font-size:1.18rem;color:#3c3a33;line-height:1.75}
.story-sign{font-family:var(--script);font-size:1.7rem;color:var(--cinnamon);margin-top:.4em!important}
@media (max-width:860px){.story{text-align:left;font-size:.95rem}.story-lead{font-size:1.08rem}.story-sign{text-align:center}}