/* =========================================================
   Paperbowl — Sustainable Food Packaging
   Theme colors from brand Design System
   ========================================================= */

:root{
  /* Brand green (primary) — mapped onto legacy --orange* names */
  --orange:#145028;          /* Brand Dark Green — primary */
  --orange-dark:#003C28;     /* Forest Green — hover/dark */
  --orange-darker:#003C28;
  --orange-soft:#e6efe6;     /* soft green tint (icon bg, hover fills) */
  --primary-deep:#005000;
  --primary-light:#3C6414;   /* leaf green */

  /* Kraft brown (secondary) */
  --kraft:#B48C64;
  --kraft-light:#DCB48C;
  --kraft-dark:#8C6428;

  /* Amber (accent / price) */
  --amber:#C87828;
  --amber-light:#F0A020;

  /* Neutrals */
  --cream:#F0DCC8;           /* warm section / footer bg */
  --cream-2:#F0F0DC;         /* off-white */
  --blue:#2ea3d8;            /* Choice ribbon (external svg) */
  --green:#38b04a;           /* Bio ribbon */
  --red:#D32F2F;             /* sale badge / cart total */
  --ink:#1A2A1A;
  --muted:#6b756b;
  --price-old:#8C9A8C;
  --line:#e2e2da;
  --bg:#ffffff;
  --radius:10px;
  --shadow:0 3px 14px rgba(0,0,0,.08);
  --shadow-hover:0 12px 28px rgba(0,0,0,.14);
  --container:1240px;
  --font:'Nunito','Open Sans','Roboto','Segoe UI',Arial,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--font);font-size:14px;line-height:1.55;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;transition:color .2s ease;}
a:hover{color:var(--orange);}
img{max-width:100%;display:block;}
ul{list-style:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
.container{max-width:var(--container);margin:0 auto;padding:0 16px;}
.center{text-align:center;}

/* ---------- Header (white bar, green accents) ---------- */
.header{background:#c8e2cd;position:sticky;top:0;z-index:300;border-bottom:1px solid #e6e6e0;box-shadow:0 2px 10px rgba(0,0,0,.06);}
.header__inner{display:flex;align-items:center;gap:16px;padding:8px 16px;}
.logo{flex-shrink:0;}
.logo img{height:56px;width:auto;}

.search-wrap{position:relative;width:270px;min-width:180px;flex-shrink:1;}
.search{display:flex;align-items:center;width:100%;background:#fff;border:2px solid var(--orange);border-radius:30px;overflow:hidden;height:42px;}
.search-suggest{
  position:absolute;top:calc(100% + 10px);left:0;width:100%;min-width:280px;background:#fff;
  border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.18);padding:16px;z-index:500;
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:all .22s ease;
}
.search-wrap:focus-within .search-suggest{opacity:1;visibility:visible;transform:translateY(0);}
.search-suggest::before{content:"";position:absolute;top:-7px;left:26px;width:14px;height:14px;background:#fff;transform:rotate(45deg);box-shadow:-2px -2px 4px rgba(0,0,0,.05);}
.search-suggest h5{font-size:13px;font-weight:600;color:#333;margin-bottom:12px;}
.search-tags{display:flex;flex-wrap:wrap;gap:8px;}
.search-tags a{padding:6px 14px;background:var(--cream);border:1px solid #f0e2cf;border-radius:20px;font-size:13px;color:#555;transition:all .2s;}
.search-tags a:hover{background:var(--orange);color:#fff;border-color:var(--orange);}
.search input{flex:1;min-width:0;border:none;outline:none;padding:0 16px;font-size:14px;background:transparent;}
.search button{width:44px;height:42px;color:var(--orange);display:flex;align-items:center;justify-content:center;flex-shrink:0;}

.nav{flex:1;min-width:0;}
.menu{display:flex;flex-wrap:nowrap;justify-content:center;gap:0;}
.menu>li{position:relative;}
.menu>li>a{display:block;color:var(--ink);font-weight:700;font-size:14.5px;padding:9px 11px;border-radius:6px;white-space:nowrap;}
.menu>li>a:hover{background:var(--orange-soft);color:var(--orange);}
.submenu{
  position:absolute;top:100%;left:0;min-width:220px;background:#fff;
  box-shadow:var(--shadow);border-radius:0 0 10px 10px;padding:6px 0;
  opacity:0;visibility:hidden;transform:scaleY(0);transform-origin:top center;
  transition:transform .28s ease,opacity .22s ease,visibility .28s;z-index:400;
}
.has-sub:hover .submenu{opacity:1;visibility:visible;transform:scaleY(1);}
.submenu li{opacity:0;transition:opacity .2s ease;}
.has-sub:hover .submenu li{opacity:1;transition-delay:.12s;}
.submenu li a{display:block;padding:9px 18px;color:var(--ink);font-size:13.5px;border-left:3px solid transparent;}
.submenu li a:hover{background:var(--cream);color:var(--orange-dark);border-left-color:var(--orange);padding-left:22px;}

.header__actions{display:flex;gap:20px;flex-shrink:0;}
.header__action{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:12.5px;color:var(--ink);position:relative;font-weight:600;}
.header__action svg{color:var(--orange);transition:transform .2s;}
.header__action:hover{color:var(--orange);}
.header__action:hover svg{transform:translateY(-2px);}
.header__cart{background:none;}
.header__cart .cart-count{position:absolute;top:-6px;right:2px;background:var(--red);color:#fff;font-size:11px;font-weight:700;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;}

/* ---------- Cart dropdown ---------- */
.cart-wrap{position:relative;}
.cart-dropdown{
  position:absolute;top:calc(100% + 16px);right:-10px;width:420px;background:#fff;
  border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,.22);z-index:600;padding:8px 20px 20px;
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:all .22s ease;
}
.cart-wrap.open .cart-dropdown{opacity:1;visibility:visible;transform:translateY(0);}
.cart-dropdown::before{content:"";position:absolute;top:-7px;right:30px;width:14px;height:14px;background:#fff;transform:rotate(45deg);box-shadow:-2px -2px 4px rgba(0,0,0,.06);}
.cart-dropdown__title{text-align:center;font-size:16px;font-weight:700;color:#333;letter-spacing:.5px;padding:12px 0;border-bottom:1px solid var(--line);}
.cart-list{max-height:340px;overflow-y:auto;}
.cart-item{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);position:relative;}
.cart-item__thumb{flex:0 0 66px;width:66px;height:66px;border:1px solid var(--line);border-radius:8px;background:linear-gradient(135deg,#f3f5f4,#e7efe9);}
.cart-item__body{flex:1;min-width:0;padding-right:18px;}
.cart-item__name{display:block;font-size:12.5px;font-weight:700;color:#333;line-height:1.35;margin-bottom:4px;}
.cart-item__name:hover{color:var(--orange);}
.cart-item__pack{font-size:12px;color:var(--muted);margin-bottom:8px;}
.cart-item__row{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:6px;overflow:hidden;}
.qty__btn{width:24px;height:24px;background:var(--cream);color:var(--orange-dark);font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:background .2s;}
.qty__btn:hover{background:var(--orange);color:#fff;}
.qty__val{width:30px;height:24px;border:none;border-left:1px solid var(--line);border-right:1px solid var(--line);text-align:center;font-size:13px;font-weight:600;outline:none;-moz-appearance:textfield;}
.cart-item__price{text-align:right;font-size:14px;font-weight:700;color:#333;line-height:1.3;}
.cart-item__price span{display:block;font-size:11px;font-weight:400;color:var(--muted);}
.cart-item__remove{position:absolute;top:14px;right:0;width:22px;height:22px;border:1px solid var(--line);border-radius:50%;color:var(--muted);font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center;transition:all .2s;}
.cart-item__remove:hover{background:var(--red);color:#fff;border-color:var(--red);}
.cart-dropdown__total{display:flex;align-items:center;justify-content:space-between;padding:16px 0;font-size:15px;}
.cart-dropdown__total span{font-weight:700;color:#333;}
.cart-dropdown__total b{color:var(--red);font-size:19px;font-weight:800;}
.cart-dropdown__btn{display:block;text-align:center;background:var(--orange);color:#fff;font-weight:700;font-size:15px;letter-spacing:.5px;padding:13px 0;border-radius:6px;transition:background .2s;}
.cart-dropdown__btn:hover{background:var(--orange-dark);color:#fff;}

/* ---------- Hero slider (2 columns) ---------- */
.hero{position:relative;margin:0;padding:22px 0;background:#e8f1e8;}
.hero .container{position:relative;}
.hero__grid{display:grid;grid-template-columns:1.88fr 1fr;gap:48px;align-items:stretch;}
.hero__cell{display:block;border-radius:18px;overflow:hidden;box-shadow:var(--shadow);transition:transform .3s ease,box-shadow .3s ease;}
.hero__cell:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover);}
.hero__cell--main{aspect-ratio:1.95/1;}
.hero__cell img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;}
.hero__cell--solid{background:linear-gradient(135deg,var(--orange) 0%,var(--orange-dark) 100%);}
.hero__cell--side.hero__cell--solid{background:linear-gradient(135deg,var(--primary-light) 0%,var(--orange) 100%);}
.hero__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.7);color:#555;font-size:24px;line-height:1;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);transition:all .2s;}
.hero__nav:hover{background:#fff;transform:translateY(-50%) scale(1.1);color:var(--orange);}
.hero__prev{left:26px;}
.hero__next{right:26px;}
.hero__dots{display:flex;justify-content:center;gap:9px;margin-top:16px;}
.hero__dots button{width:10px;height:10px;border-radius:50%;background:#dcdcdc;transition:all .25s;}
.hero__dots button:hover{background:#c4c4c4;}
.hero__dots button.is-active{background:var(--orange);width:26px;border-radius:6px;}

/* ---------- Section title ---------- */
.section-title{text-align:center;text-transform:uppercase;color:#2b2b2b;font-size:26px;font-weight:900;letter-spacing:.5px;margin:6px 0 26px;display:flex;align-items:center;justify-content:center;gap:10px;}
.section-title .i{font-size:26px;}

/* ---------- Section spacing ---------- */
.flash,.shop,.congno,.certs,.feature,.news,.partners{padding:44px 0;}
.flash{background:#fff;}
.shop{background:#fff;}
.certs{background:#f7f8fa;}

/* ---------- Flash / Shock price ---------- */
.flash__bar{background:linear-gradient(to right,#0f3d1f 0%,var(--orange) 80%,#2c7d43 100%);border-radius:16px 16px 0 0;padding:16px 30px;display:flex;align-items:center;gap:18px;}
.flash__title{display:flex;align-items:center;gap:16px;}
.flash__title img{height:34px;animation:pulse 1.6s infinite;}
.countdown{display:flex;align-items:center;gap:4px;}
.countdown b{background:#fff;color:var(--orange-dark);font-size:16px;font-weight:700;padding:4px 8px;border-radius:5px;min-width:32px;text-align:center;}
.countdown i{color:#fff;font-weight:700;font-style:normal;}
.flash__more{margin-left:auto;color:#fff;font-weight:600;}
.flash__more:hover{color:#fff;text-decoration:underline;}
.flash .product-row{gap:26px;grid-auto-columns:calc((100% - 104px) / 5);}

/* row carousel with hover arrows */
.row-carousel{position:relative;}
.flash .row-carousel{background:linear-gradient(to right,#0f3d1f 0%,var(--orange) 80%,#2c7d43 100%);padding:22px 30px 30px;border-radius:0 0 16px 16px;}
.row-nav{position:absolute;top:50%;transform:translateY(-50%) scale(.85);z-index:6;width:48px;height:48px;border-radius:50%;background:var(--orange);color:#fff;font-size:26px;line-height:1;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-hover);opacity:0;visibility:hidden;transition:opacity .25s ease,transform .25s ease,background .2s;}
.row-carousel:hover .row-nav{opacity:1;visibility:visible;transform:translateY(-50%) scale(1);}
.row-nav:hover{background:var(--orange-dark);}
.row-prev{left:8px;}
.row-next{right:8px;}

/* ---------- Product row (horizontal) ---------- */
.product-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(200px,1fr);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;}
.product-row::-webkit-scrollbar{display:none;}
.product-row .pcard{scroll-snap-align:start;background:#fff;}

/* ---------- Category carousel (round icons) ---------- */
.cat-carousel{display:flex;align-items:center;gap:8px;margin-bottom:30px;}
.cat-track{display:flex;gap:8px;overflow-x:auto;flex:1;scroll-behavior:smooth;padding:6px 0;}
.cat-track::-webkit-scrollbar{display:none;}
.cat-item{flex:0 0 auto;width:112px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;}
.cat-icon{width:82px;height:82px;border-radius:50%;background:var(--orange-soft);display:flex;align-items:center;justify-content:center;font-size:34px;transition:all .25s;box-shadow:0 2px 8px rgba(0,0,0,.06);}
.cat-item:hover .cat-icon{transform:translateY(-4px);box-shadow:var(--shadow-hover);}
.cat-item.active .cat-icon{background:var(--orange);}
.cat-label{font-size:13.5px;font-weight:600;color:var(--ink);}
.cat-item:hover .cat-label{color:var(--orange-dark);}
.cat-nav{flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:#fff;box-shadow:var(--shadow);color:#666;font-size:22px;display:flex;align-items:center;justify-content:center;transition:all .2s;}
.cat-nav:hover{background:var(--orange);color:#fff;}
.cat-next{background:var(--orange);color:#fff;}

/* ---------- Product grid ---------- */
.product-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;}

/* ---------- Product card ---------- */
.pcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:12px;position:relative;display:flex;flex-direction:column;box-shadow:0 3px 12px rgba(0,0,0,.07);transition:transform .25s ease,box-shadow .25s ease,border-color .25s;}
.pcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover);border-color:var(--orange);}
.pcard__img{display:flex;align-items:center;justify-content:center;text-align:center;aspect-ratio:1/1;background:#fff;border-radius:8px;overflow:hidden;margin-bottom:10px;padding:10px;}
.pcard__img .ph{color:#9aa;font-weight:600;font-size:13px;opacity:.85;}
.pcard h3{font-size:13.5px;font-weight:500;line-height:1.4;min-height:38px;margin-bottom:8px;}
.pcard h3 a{color:var(--ink);}
.pcard h3 a:hover{color:var(--orange);}
.pcard__price{margin-bottom:10px;}
.pcard__price .now{color:var(--amber);font-weight:700;font-size:17px;}
.pcard__price .old{color:var(--price-old);text-decoration:line-through;font-size:13px;margin-left:6px;}

/* badges & ribbons */
.pcard__badge{position:absolute;z-index:3;font-weight:700;}
.badge--sale{top:10px;left:10px;background:var(--red);color:#fff;font-size:12px;padding:3px 8px;border-radius:5px;}
.badge--best{top:8px;right:8px;color:#c9922b;font-size:11px;background:radial-gradient(circle,#fff6df,#ffe9b0);border:1px solid #e8c96b;border-radius:50%;width:52px;height:52px;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.1;padding:4px;transform:rotate(-8deg);}
.badge--new{top:8px;right:8px;background:var(--red);color:#fff;font-size:12px;padding:4px 9px;border-radius:4px;transform:rotate(6deg);box-shadow:0 2px 6px rgba(0,0,0,.2);}
.pcard__tag{position:absolute;top:-11px;left:16px;z-index:4;height:34px;width:auto;filter:drop-shadow(0 3px 4px rgba(0,0,0,.18));}

/* card buttons */
.pcard__btns{display:flex;gap:8px;margin-bottom:10px;}
.btn-ghost{flex:1;text-align:center;padding:7px 0;border:1px solid var(--orange);border-radius:6px;color:var(--orange-dark);font-size:13px;font-weight:500;transition:all .2s;}
.btn-ghost:hover{background:var(--orange);color:#fff;}
.btn-ghost--fill{background:var(--orange);color:#fff;}
.btn-ghost--fill:hover{background:var(--orange-dark);}
.pcard__rating{font-size:12.5px;color:var(--muted);margin-top:auto;display:flex;align-items:center;gap:6px;}
.pcard__rating::first-letter{color:#ffb400;}
.pcard__rating b{color:var(--ink);font-weight:600;}
.pcard__rating i{color:var(--line);font-style:normal;}

/* generic buy button */
.btn-buy{background:var(--orange);color:#fff;font-weight:600;font-size:14px;padding:9px 0;border-radius:30px;width:100%;transition:background .2s,transform .1s;margin-top:auto;}
.btn-buy,.btn-buy:hover,.btn-buy:focus{color:#fff;}
.btn-buy:hover{background:var(--orange-dark);}
.btn-buy:active{transform:scale(.97);}

/* ---------- Công nợ ---------- */
.congno{background:linear-gradient(to top,#c8e2cd 0%,#edf6ee 100%);}
.congno__inner{display:flex;align-items:center;gap:44px;flex-wrap:wrap;}
.congno__img{flex:1;min-width:300px;text-align:center;}
.congno__img img{max-width:440px;margin:0 auto;}
.congno__text{flex:1;min-width:320px;}
.congno__text h2{font-size:30px;font-weight:900;margin-bottom:12px;text-transform:uppercase;color:#2b2b2b;}
.congno__text p{margin-bottom:6px;font-size:15px;color:#555;}
.congno__form{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px;}
.congno__form input{padding:13px 18px;border-radius:8px;border:1px solid #e6ddce;outline:none;font-size:14px;background:#fff;transition:border-color .2s;}
.congno__form input:focus{border-color:var(--orange);}
.congno__submit{grid-column:1/-1;text-align:center;}
.congno__submit .btn-buy{width:auto;padding:12px 46px;font-weight:700;}

/* ---------- Certificates ---------- */
.certs__carousel{overflow:hidden;}
.certs__track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;padding:4px 2px;}
.certs__track::-webkit-scrollbar{display:none;}
.cert-card{flex:0 0 calc((100% - 72px) / 4);scroll-snap-align:start;background:#fff;border-radius:14px;box-shadow:0 4px 16px rgba(0,0,0,.08);height:210px;display:flex;align-items:center;justify-content:center;padding:36px;transition:transform .25s,box-shadow .25s;}
.cert-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);}
.cert-card img{max-height:130px;max-width:100%;width:auto;object-fit:contain;}
.certs__dots{display:flex;justify-content:center;gap:10px;margin-top:22px;}
.certs__dots button{width:12px;height:12px;border-radius:50%;background:#c9c9c9;transition:all .25s;}
.certs__dots button:hover{background:#a9a9a9;}
.certs__dots button.is-active{background:#9a9a9a;}

/* ---------- Feature (Fest Choice) ---------- */
.feature{background:var(--cream-2);}
.feature__inner{display:flex;gap:40px;align-items:center;flex-wrap:wrap;}
.feature__media{flex:1;min-width:300px;}
.feature__media img{border-radius:14px;box-shadow:var(--shadow);}
.feature__content{flex:1;min-width:300px;}
.feature__brand{height:46px;width:auto;margin-bottom:16px;}
.feature__content h3{font-size:22px;color:var(--orange-dark);font-weight:900;margin-bottom:18px;}
.feature__list li{display:flex;align-items:center;gap:14px;padding:10px 0;font-size:15px;border-bottom:1px dashed rgba(0,0,0,.1);}
.feature__list li img{width:38px;height:38px;}

/* ---------- News ---------- */
.news{background:#fff;}
.news__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:24px;}
.ncard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .25s,box-shadow .25s;display:flex;flex-direction:column;box-shadow:var(--shadow);}
.ncard:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover);}
.ncard__img{display:flex;align-items:center;justify-content:center;height:170px;text-align:center;background:linear-gradient(135deg,#efe3d3,#e3d2bb);color:#7a6a4f;font-weight:700;padding:12px;}
.ncard h3{font-size:14px;font-weight:400;line-height:1.45;padding:14px 14px 6px;flex:1;color:#555;}
.ncard__more{align-self:flex-start;margin:6px 14px 16px;background:var(--orange);color:#fff;font-size:12.5px;font-weight:600;padding:8px 18px;border-radius:20px;}
.ncard__more:hover{background:var(--orange-dark);color:#fff;}
.link-more{color:var(--orange-dark);font-weight:600;font-size:15px;}
.link-more:hover{text-decoration:underline;}

/* ---------- Partners ---------- */
.partners{background:#fff;}
.partners__carousel{display:flex;align-items:center;gap:8px;}
.partners__track{display:flex;gap:26px;overflow-x:auto;flex:1;align-items:center;scroll-behavior:smooth;padding:10px 0;}
.partners__track::-webkit-scrollbar{display:none;}
.partners__track img{flex:0 0 auto;height:96px;width:auto;object-fit:contain;filter:grayscale(0);opacity:.95;transition:all .3s;}
.partners__track img:hover{transform:scale(1.06);opacity:1;}

/* ---------- Google reviews ---------- */
.greviews{background:linear-gradient(180deg,#e8f1e8,#fff);border-radius:16px;box-shadow:var(--shadow);padding:26px;margin-top:34px;}
.greviews__head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-bottom:22px;}
.greviews__from{font-size:20px;font-weight:700;color:#3a3a3a;}
.greviews__from b{font-size:22px;}
.greviews__from .g{color:#4285F4;}.greviews__from .o{color:#EA4335;}.greviews__from .y{color:#FBBC05;}
.greviews__from .gr{color:#34A853;}.greviews__from .r{color:#EA4335;}
.greviews__stars{margin-top:6px;font-size:18px;color:#ffb400;display:flex;align-items:center;gap:8px;}
.greviews__stars b{font-size:26px;color:#2b2b2b;}
.greviews__stars span{color:var(--muted);font-size:14px;}
.greviews__write{width:auto;padding:12px 26px;}
.greviews__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:20px;}
.rcard{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px;box-shadow:0 2px 8px rgba(0,0,0,.05);}
.rcard__top{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.rcard__ava{width:34px;height:34px;border-radius:50%;background:#6d4c41;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;}
.rcard__top b{flex:1;font-size:14px;}
.rcard__v{color:#4285F4;font-size:13px;}
.rcard__stars{color:#ffb400;font-size:14px;margin-bottom:6px;}
.rcard p{font-size:13px;color:#555;}
.greviews__foot{display:flex;align-items:center;justify-content:center;gap:16px;}
.greviews__foot .btn-buy{width:auto;padding:12px 30px;}

/* ---------- Footer ---------- */
.footer{background:linear-gradient(to top,#c8e2cd 0%,#edf6ee 100%);color:#4a4a4a;padding-top:44px;font-size:13.5px;}
.footer__grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.1fr;gap:30px;padding-bottom:34px;}
.footer h4{color:#2b2b2b;font-size:16px;margin-bottom:16px;font-weight:700;}
.footer p{margin-bottom:10px;line-height:1.7;}
.footer__col ul li{margin-bottom:11px;position:relative;padding-left:16px;}
.footer__col ul li::before{content:"•";position:absolute;left:0;color:var(--orange);}
.footer__col ul li a:hover{color:var(--orange-dark);}
.footer__col--hotline p{margin-bottom:6px;}
.footer__hot{font-size:21px;font-weight:800;color:var(--orange-dark);display:flex;align-items:center;gap:8px;margin-bottom:4px;}
.footer__social{display:flex;gap:8px;margin:10px 0;}
.footer__social a{width:32px;height:32px;border-radius:7px;border:1px solid #e0d3bf;color:#8a7a60;display:flex;align-items:center;justify-content:center;font-weight:700;transition:all .2s;}
.footer__social a:hover{background:var(--orange);color:#fff;border-color:var(--orange);}
.footer__gov{display:inline-flex;flex-direction:column;background:#1f6fb2;color:#fff;font-size:11px;font-weight:700;padding:7px 12px;border-radius:8px;text-align:center;line-height:1.3;}
.footer__gov small{font-weight:400;font-size:10px;}
.footer__bottom{border-top:1px solid #ecdfca;padding:18px 0;font-size:12.5px;color:#8a7c66;text-align:center;line-height:1.6;}

/* ---------- Floating buttons ---------- */
.float-btns{position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:400;display:flex;flex-direction:column;gap:12px;align-items:flex-end;}
.contact-btn{width:62px;height:62px;border-radius:50%;background:var(--orange);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:11px;font-weight:600;box-shadow:var(--shadow-hover);animation:ring 1.8s infinite;align-self:center;transition:transform .2s;}
.contact-btn:hover{color:#fff;transform:scale(1.06);}
.contact-btn__default{display:flex;flex-direction:column;align-items:center;gap:2px;}
.contact-btn__close{display:none;font-size:30px;line-height:1;font-weight:400;}
.float-btns.open .contact-btn{animation:none;}
.float-btns.open .contact-btn__default{display:none;}
.float-btns.open .contact-btn__close{display:block;}

/* contact expand menu */
.contact-menu{
  position:absolute;top:calc(100% + 12px);right:0;
  background:#fff;border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.2);
  padding:6px;min-width:210px;display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transform:translateY(-10px) scale(.96);transform-origin:top right;
  transition:all .22s ease;
}
.float-btns.open .contact-menu{opacity:1;visibility:visible;transform:translateY(0) scale(1);}
.contact-menu__item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;font-size:13.5px;font-weight:500;color:#444;transition:background .2s;}
.contact-menu__item:hover{background:var(--cream);color:var(--orange-dark);}
.cm-ico{flex:0 0 34px;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;}
.cm-ico--phone{background:#e53935;}
.cm-ico--zalo{background:#0068ff;}
.cm-ico--map{background:var(--orange);}
.to-top{position:fixed;right:22px;bottom:26px;width:46px;height:46px;border-radius:50%;background:var(--primary-light);color:#fff;font-size:22px;box-shadow:var(--shadow);z-index:400;opacity:0;visibility:hidden;transform:translateY(16px);transition:opacity .3s ease,transform .3s ease,background .2s;}
.to-top.show{opacity:1;visibility:visible;transform:translateY(0);}
.to-top.show:hover{background:var(--orange);transform:translateY(-3px);}

/* ===================== ACCOUNT SUB-PAGES ===================== */
.acc-search{position:relative;margin-bottom:16px;}
.acc-search input{width:100%;border:1px solid var(--line);border-radius:8px;padding:12px 14px 12px 42px;font-size:14px;outline:none;background:#fff;}
.acc-search input:focus{border-color:var(--orange);}
.acc-search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);}
.acc-tabs{display:flex;gap:26px;border-bottom:1px solid var(--line);margin-bottom:18px;overflow-x:auto;}
.acc-tabs::-webkit-scrollbar{display:none;}
.acc-tab{padding:11px 2px;font-weight:600;font-size:14px;color:var(--muted);white-space:nowrap;border-bottom:2px solid transparent;cursor:pointer;display:flex;align-items:center;gap:6px;}
.acc-tab.active{color:var(--ink);border-bottom-color:var(--ink);}
.acc-empty{background:#fff;border-radius:12px;box-shadow:0 1px 4px rgba(0,0,0,.05);padding:50px 20px;text-align:center;}
.acc-empty .ico{width:100px;height:100px;border-radius:50%;background:#f0f0f0;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;font-size:40px;color:#c4c4c4;}
.acc-empty p{color:#555;font-size:14px;}
.acc-addr-card{background:#fff;border-radius:12px;box-shadow:0 1px 4px rgba(0,0,0,.05);padding:16px 18px;position:relative;margin-bottom:16px;}
.acc-addr-card__name{font-weight:700;color:var(--ink);display:flex;align-items:center;gap:10px;}
.badge-default{background:#e6f4ea;color:#2e7d32;border-radius:4px;padding:2px 8px;font-size:12px;font-weight:600;}
.acc-addr-card__more{position:absolute;top:16px;right:16px;color:#999;font-size:18px;letter-spacing:1px;}
.acc-addr-card p{color:#777;font-size:13.5px;margin-top:4px;}
.btn-add{display:inline-flex;align-items:center;gap:8px;background:#111;color:#fff;font-weight:700;padding:12px 22px;border-radius:8px;transition:background .2s;}
.btn-add:hover{background:#000;color:#fff;}
.acc-benefits{margin-top:16px;list-style:none;}
.acc-benefits li{display:flex;align-items:flex-start;gap:10px;padding:9px 0;font-size:14.5px;color:#444;}
.acc-benefits li::before{content:"✓";color:var(--green);font-weight:800;flex-shrink:0;}
.acc-benefits li b{color:var(--ink);}
.acc-subtitle{font-size:16px;font-weight:700;color:var(--ink);margin:24px 0 6px;}

/* account edit / address modal */
.am-modal{position:fixed;inset:0;z-index:1200;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;transition:opacity .25s;}
.am-modal.open{opacity:1;visibility:visible;}
.am-dialog{background:#fff;border-radius:12px;width:min(560px,96vw);max-height:92vh;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.35);transform:translateY(12px);transition:transform .25s;}
.am-modal.open .am-dialog{transform:none;}
.am-head{display:flex;align-items:center;justify-content:center;padding:16px 18px;border-bottom:1px solid var(--line);position:relative;}
.am-head h3{font-size:17px;font-weight:800;color:var(--ink);}
.am-close{position:absolute;left:16px;width:40px;height:40px;border-radius:8px;background:#eee;color:#333;font-size:18px;display:flex;align-items:center;justify-content:center;}
.am-close:hover{background:#e0e0e0;}
.am-body{padding:20px;}
.am-field{margin-bottom:14px;position:relative;}
.am-field input{width:100%;border:1px solid var(--line);border-radius:8px;padding:14px;font-size:14px;outline:none;transition:border-color .2s;}
.am-field input:focus{border-color:var(--orange);}
.am-field label{position:absolute;top:-8px;left:12px;background:#fff;font-size:11px;color:var(--muted);padding:0 4px;}
.am-field .ic-right{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--muted);}
.am-radio{display:flex;align-items:center;gap:12px;padding:14px 0;font-size:15px;color:var(--ink);cursor:pointer;border-bottom:1px solid var(--line);}
.am-radio:last-child{border-bottom:none;}
.am-radio input{accent-color:var(--orange);width:18px;height:18px;}
.am-useaddr{width:100%;background:#f2f2f2;border:1px solid var(--line);border-radius:8px;padding:12px;font-size:13.5px;font-weight:600;color:#444;margin-bottom:14px;}
.am-useaddr:hover{background:#e8e8e8;}
.am-foot{display:flex;gap:12px;padding:16px 20px;border-top:1px solid var(--line);}
.am-cancel{flex:1;background:#f0f0f0;color:#333;font-weight:700;padding:14px;border-radius:8px;}
.am-cancel:hover{background:#e2e2e2;}
.am-save{flex:1;background:#111;color:#fff;font-weight:700;padding:14px;border-radius:8px;}
.am-save:hover{background:#000;color:#fff;}

/* ===================== ACCOUNT PAGE ===================== */
.account-page{background:#f4f5f7;padding:24px 0 54px;}
.account-layout{display:grid;grid-template-columns:300px 1fr;gap:24px;align-items:start;}
.acc-user{background:#fff;border-radius:12px;padding:18px;box-shadow:0 1px 4px rgba(0,0,0,.05);margin-bottom:16px;position:relative;}
.acc-user__avatar{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;background:#111;color:#fff;display:flex;align-items:center;justify-content:center;}
.acc-user__email{font-size:13px;color:#555;margin:2px 0 10px;}
.acc-user__points{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:8px;}
.acc-progress{height:6px;background:#eee;border-radius:3px;overflow:hidden;margin-bottom:12px;position:relative;}
.acc-progress i{position:absolute;right:-2px;top:-3px;width:12px;height:12px;border-radius:50%;background:#a06bff;}
.acc-note{background:#f7f7f7;border-radius:8px;padding:10px 12px;font-size:12px;color:#888;line-height:1.5;margin-bottom:10px;}
.acc-note b{color:#555;}
.acc-badge{display:inline-flex;align-items:center;gap:5px;background:#fff4d6;color:#c9922b;border-radius:14px;padding:3px 12px;font-size:12px;font-weight:600;}
.acc-menu{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.05);}
.acc-menu a{display:flex;align-items:center;gap:12px;padding:14px 16px;font-size:14px;color:#333;border-bottom:1px solid var(--line);transition:background .2s;}
.acc-menu a:last-child{border-bottom:none;}
.acc-menu a:hover{background:var(--cream);}
.acc-menu a.active{color:var(--orange-dark);font-weight:700;}
.acc-menu a .ic{width:20px;text-align:center;}
.acc-menu a .arrow{margin-left:auto;color:#bbb;}
.acc-menu a .rval{margin-left:auto;color:#888;font-size:13px;}
.acc-main h2{font-size:18px;font-weight:800;color:var(--ink);margin-bottom:16px;}
.acc-info{background:#fff;border-radius:12px;box-shadow:0 1px 4px rgba(0,0,0,.05);overflow:hidden;}
.acc-info-row{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line);}
.acc-info-row:last-child{border-bottom:none;}
.acc-info-row .label{font-weight:600;color:var(--ink);font-size:14px;}
.acc-info-row .val{color:var(--muted);font-size:13.5px;display:flex;align-items:center;gap:6px;}
.acc-info-row a.val{color:var(--muted);}
.acc-info-row a.val:hover{color:var(--orange-dark);}
.acc-info-row .val.email-val{color:#2563eb;}
.btn-logout{display:inline-block;background:#ececec;color:#333;font-weight:600;padding:10px 24px;border-radius:8px;margin-top:16px;transition:background .2s;}
.btn-logout:hover{background:#ddd;color:#000;}
@media(max-width:800px){.account-layout{grid-template-columns:1fr;}}

/* ===================== AUTH (LOGIN) PAGE ===================== */
.auth-page{min-height:100vh;background:#f4f5f7;display:flex;align-items:center;justify-content:center;padding:24px;}
.auth-card{background:#fff;border-radius:14px;box-shadow:0 8px 34px rgba(0,0,0,.09);width:min(420px,96vw);overflow:hidden;}
.auth-body{padding:34px 32px 26px;}
.auth-logo{text-align:center;margin-bottom:26px;}
.auth-logo img{height:46px;}
.auth-oauth{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:12px;border-radius:8px;font-weight:600;font-size:14px;margin-bottom:12px;border:1px solid var(--line);transition:opacity .2s;}
.auth-oauth:hover{opacity:.9;}
.auth-oauth--google{background:#f2f2f2;color:#333;}
.auth-oauth--apple{background:#111;color:#fff;border-color:#111;}
.auth-divider{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13px;margin:18px 0;}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--line);}
.auth-input{width:100%;border:1px solid var(--line);border-radius:8px;padding:13px 14px;font-size:14px;margin-bottom:14px;outline:none;transition:border-color .2s;}
.auth-input:focus{border-color:var(--orange);}
.auth-submit{width:100%;padding:13px;border-radius:8px;background:#9a9a9a;color:#fff;font-weight:700;font-size:14px;transition:background .2s;cursor:pointer;}
.auth-submit.active{background:var(--orange);}
.auth-submit.active:hover{background:var(--orange-dark);}
.auth-back{display:block;text-align:center;color:var(--orange-dark);font-size:13.5px;margin-top:16px;text-decoration:underline;}
.auth-foot{background:#fafafa;border-top:1px solid var(--line);text-align:center;padding:14px;font-size:12px;color:var(--muted);}
.auth-verify{display:none;text-align:center;}
.auth-verify h2{font-size:22px;font-weight:800;color:var(--ink);margin-bottom:10px;}
.auth-verify p{font-size:13.5px;color:#555;margin-bottom:4px;}
.auth-verify p b{color:var(--ink);}
.auth-verify .auth-input{text-align:center;margin-top:16px;}
.auth-resend{font-size:13px;color:#555;margin:14px 0;}
.auth-resend a{color:var(--orange-dark);cursor:pointer;}

/* ===================== VAT INVOICE MODAL ===================== */
.vat-modal{position:fixed;inset:0;z-index:1200;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;transition:opacity .25s;}
.vat-modal.open{opacity:1;visibility:visible;}
.vat-dialog{background:#fff;border-radius:10px;width:min(560px,96vw);max-height:92vh;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.35);transform:translateY(12px);transition:transform .25s;}
.vat-modal.open .vat-dialog{transform:none;}
.vat-head{display:flex;align-items:center;justify-content:center;padding:14px 18px;border-bottom:1px solid var(--line);position:relative;}
.vat-head h3{font-size:16px;font-weight:700;color:var(--ink);}
.vat-close{position:absolute;left:16px;width:30px;height:30px;border:1px solid var(--line);border-radius:6px;color:#666;font-size:16px;display:flex;align-items:center;justify-content:center;}
.vat-close:hover{background:var(--line);}
.vat-body{padding:18px;}
.vat-type{display:flex;gap:26px;margin-bottom:16px;}
.vat-type label{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer;color:var(--ink);}
.vat-type input{accent-color:var(--orange);}
.vat-field{margin-bottom:12px;}
.vat-field input{width:100%;border:1px solid var(--line);border-radius:8px;padding:12px 14px;font-size:13.5px;outline:none;transition:border-color .2s;}
.vat-field input:focus{border-color:var(--orange);}
.vat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px;}
.vat-grid input{width:100%;border:1px solid var(--line);border-radius:8px;padding:12px 14px;font-size:13.5px;outline:none;}
.vat-grid input:focus{border-color:var(--orange);}
.vat-useaddr{width:100%;background:#f2f2f2;border:1px solid var(--line);border-radius:8px;padding:11px;font-size:13.5px;font-weight:600;color:#444;margin-bottom:12px;transition:background .2s;}
.vat-useaddr:hover{background:#e8e8e8;}
.vat-check{display:flex;align-items:center;gap:8px;font-size:13px;color:#555;margin-bottom:14px;cursor:pointer;}
.vat-note{background:#eef5ff;border:1px solid #d6e4ff;border-radius:8px;padding:12px 14px;font-size:12.5px;color:#4a5a6a;}
.vat-note b{display:flex;align-items:center;gap:6px;color:#2563eb;margin-bottom:6px;}
.vat-note ul{margin:0 0 0 18px;list-style:disc;}
.vat-note li{margin-bottom:4px;line-height:1.5;}
.vat-submit{display:block;width:100%;text-align:center;background:#111;color:#fff;font-weight:700;padding:14px;border-radius:8px;margin-top:16px;transition:background .2s;}
.vat-submit:hover{background:#000;color:#fff;}
.vat-form--company{display:none;}

/* ===================== CHECKOUT PAGE ===================== */
.co-header{background:#fff;border-bottom:1px solid var(--line);padding:12px 0;}
.co-header .container{display:flex;justify-content:center;}
.co-header img{height:42px;}
.co-page{background:#f4f5f7;padding:24px 0 60px;}
.co-layout{display:grid;grid-template-columns:1fr 400px;gap:24px;align-items:start;}
.co-box{background:#fff;border:1px solid var(--line);border-radius:10px;padding:18px;margin-bottom:18px;box-shadow:0 1px 4px rgba(0,0,0,.04);}
.co-box>h3{font-size:16px;font-weight:700;color:var(--ink);margin-bottom:14px;}
.co-login{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13.5px;color:#555;}
.co-login a{background:#2b2b2b;color:#fff;padding:8px 18px;border-radius:6px;font-weight:600;white-space:nowrap;}
.co-login a:hover{background:#000;color:#fff;}
.co-tabs{display:flex;border-bottom:1px solid var(--line);margin-bottom:16px;}
.co-tab{flex:1;text-align:center;padding:11px;font-weight:600;font-size:14px;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;display:flex;align-items:center;justify-content:center;gap:6px;}
.co-tab.active{color:var(--ink);border-bottom-color:var(--ink);}
.co-field{position:relative;margin-bottom:12px;}
.co-field input,.co-field textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:12px 14px;font-size:14px;outline:none;font-family:inherit;transition:border-color .2s;}
.co-field input:focus,.co-field textarea:focus{border-color:var(--orange);}
.co-field .flag{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:16px;}
.co-field label{position:absolute;top:-8px;left:12px;background:#fff;font-size:11px;color:var(--muted);padding:0 4px;}
.co-hint{background:#f7f7f7;border:1px dashed var(--line);border-radius:8px;padding:14px;font-size:13.5px;color:var(--muted);}
.co-pay-opt{border:1px solid var(--line);border-radius:8px;padding:13px 14px;margin-bottom:10px;cursor:pointer;transition:border-color .2s;}
.co-pay-opt.active{border-color:var(--ink);border-width:2px;padding:12px 13px;}
.co-pay-opt__head{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;color:var(--ink);}
.co-pay-opt__sub{font-size:12.5px;color:var(--muted);padding-left:26px;margin-top:6px;border-top:1px solid var(--line);padding-top:8px;}
.co-invoice{display:flex;align-items:center;justify-content:space-between;}
.co-invoice a{color:var(--orange-dark);font-size:13.5px;}

/* right column */
.co-cart-item{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);position:relative;}
.co-cart-item:last-child{border-bottom:none;}
.co-cart-item__thumb{flex:0 0 64px;width:64px;height:64px;border:1px solid var(--line);border-radius:8px;background:linear-gradient(135deg,#f3f7f4,#e6f3ea);}
.co-cart-item__body{flex:1;min-width:0;}
.co-cart-item__name{font-size:13px;color:var(--ink);line-height:1.4;}
.co-cart-item__name b{color:var(--orange-dark);font-weight:600;}
.co-pack-pill{display:inline-flex;align-items:center;gap:6px;background:#f2f2f2;border-radius:6px;padding:3px 10px;font-size:12px;color:#555;margin:6px 0;}
.co-cart-item__price{font-size:13.5px;font-weight:700;color:var(--ink);}
.co-cart-item__price .old{color:var(--price-old);text-decoration:line-through;font-weight:400;font-size:12px;margin-right:6px;}
.co-cart-item__del{position:absolute;top:14px;right:0;color:#bbb;cursor:pointer;}
.co-cart-item__del:hover{color:var(--red);}
.co-cart-item__qty{display:flex;align-items:center;gap:8px;margin-top:6px;}
.co-cart-item__qty .qbox{display:flex;align-items:center;border:1px solid var(--line);border-radius:6px;overflow:hidden;}
.co-cart-item__qty .qbox button{width:26px;height:28px;background:#fff;color:var(--orange-dark);font-weight:700;}
.co-cart-item__qty .qbox input{width:30px;height:28px;border:none;border-left:1px solid var(--line);border-right:1px solid var(--line);text-align:center;font-size:13px;}
.co-cart-item__qty .unit{font-size:12px;color:var(--muted);}
.co-discount-note{font-size:12.5px;color:var(--muted);padding:8px 0 2px;}
.co-discount-note b{color:var(--red);}
.co-promo-select{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:8px;padding:11px 14px;font-size:13.5px;color:#555;margin-bottom:10px;cursor:pointer;}
.co-promo-select .tag{background:#e6f0ff;color:#2563eb;font-size:12px;padding:2px 8px;border-radius:4px;font-weight:600;}
.co-promo-input{display:flex;gap:8px;}
.co-promo-input input{flex:1;border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:13.5px;outline:none;}
.co-promo-input button{background:#2b2b2b;color:#fff;padding:0 18px;border-radius:8px;font-weight:600;}
.co-sum-row{display:flex;justify-content:space-between;font-size:13.5px;color:#555;margin-bottom:10px;}
.co-sum-row.total{font-size:15px;color:var(--ink);font-weight:700;margin-top:4px;}
.co-sum-row.total b{color:var(--ink);font-size:17px;}
.co-vat{font-size:12px;color:var(--muted);text-align:right;margin-bottom:14px;}
.btn-order{display:block;width:100%;text-align:center;background:#2b2b2b;color:#fff;font-weight:700;padding:14px;border-radius:8px;transition:background .2s;}
.btn-order:hover{background:#000;color:#fff;}
@media(max-width:900px){.co-layout{grid-template-columns:1fr;}}

/* ===================== CART PAGE ===================== */
.cart-page{padding:10px 0 44px;}
.cart-layout{display:grid;grid-template-columns:1fr 340px;gap:40px;align-items:start;}
.cart-main h1{font-size:22px;font-weight:800;color:var(--ink);padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:14px;}
.cart-count-line{font-size:14px;color:#555;margin-bottom:14px;}
.cart-count-line b{color:var(--ink);}
.cart-box{border:1px solid var(--line);border-radius:10px;overflow:hidden;}
.cart-row{display:flex;gap:16px;align-items:center;padding:16px;border-bottom:1px solid var(--line);}
.cart-row:last-child{border-bottom:none;}
.cart-row__thumb{position:relative;flex:0 0 80px;width:80px;height:80px;border:1px solid var(--line);border-radius:8px;background:linear-gradient(135deg,#f3f7f4,#e6f3ea);display:flex;align-items:center;justify-content:center;font-size:10px;color:#9aa;text-align:center;padding:6px;}
.cart-row__del{position:absolute;top:-8px;left:-8px;background:#888;color:#fff;font-size:10px;border-radius:10px;padding:2px 7px;cursor:pointer;}
.cart-row__del:hover{background:var(--red);}
.cart-row__info{flex:1;min-width:0;}
.cart-row__name{font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.4;}
.cart-row__pack{font-size:12.5px;color:var(--muted);margin:3px 0;}
.cart-row__unit{font-size:13px;color:var(--muted);}
.cart-row__right{display:flex;flex-direction:column;align-items:flex-end;gap:10px;}
.cart-row__price{font-size:15px;font-weight:800;color:var(--ink);}
.cart-qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:6px;overflow:hidden;}
.cart-qty button{width:28px;height:30px;background:#fff;color:var(--orange-dark);font-size:16px;font-weight:700;}
.cart-qty button:hover{background:var(--orange-soft);}
.cart-qty input{width:34px;height:30px;border:none;border-left:1px solid var(--line);border-right:1px solid var(--line);text-align:center;font-size:14px;font-weight:600;outline:none;}
.order-summary{border-left:1px solid var(--line);padding-left:32px;}
.order-summary h2{font-size:18px;font-weight:800;color:var(--ink);padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:16px;}
.order-total{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;}
.order-total span{font-weight:600;color:var(--ink);}
.order-total b{color:var(--red);font-size:22px;font-weight:900;}
.order-info li{list-style:none;position:relative;padding-left:16px;margin-bottom:14px;font-size:13.5px;}
.order-info li::before{content:"•";position:absolute;left:0;color:var(--orange);}
.order-info li b{display:block;color:var(--ink);margin-bottom:2px;}
.order-info li span{color:var(--muted);}
.order-actions{display:flex;gap:12px;margin-top:20px;}
.btn-back{flex:1;text-align:center;background:#2b2b2b;color:#fff;font-weight:700;padding:13px;border-radius:6px;transition:background .2s;}
.btn-back:hover{background:#000;color:#fff;}
.btn-checkout{flex:1;text-align:center;background:var(--orange);color:#fff;font-weight:700;padding:13px;border-radius:6px;transition:background .2s;}
.btn-checkout:hover{background:var(--orange-dark);color:#fff;}
.cart-related h2{font-size:20px;font-weight:800;margin:40px 0 18px;display:flex;align-items:center;gap:8px;}
@media(max-width:900px){.cart-layout{grid-template-columns:1fr;}.order-summary{border-left:none;}}

/* ===================== ARTICLE DETAIL ===================== */
.art-title{font-size:26px;font-weight:800;color:var(--ink);line-height:1.3;margin-bottom:8px;}
.art-meta{font-size:12.5px;color:var(--muted);margin-bottom:18px;}
.toc{background:#f2f8f2;border:1px solid #dcecdc;border-radius:8px;padding:16px 18px;margin:6px 0 24px;}
.toc__head{display:flex;justify-content:space-between;align-items:center;font-weight:700;color:var(--ink);margin-bottom:10px;}
.toc__toggle{font-size:12px;color:var(--orange-dark);font-weight:500;cursor:pointer;}
.toc ul{list-style:none;}
.toc>ul>li{padding:5px 0;}
.toc a{color:var(--orange-dark);}
.toc>ul>li>a::before{content:"★ ";color:var(--amber);}
.toc ul ul{margin:4px 0 4px 20px;}
.toc ul ul a::before{content:"• ";color:#bbb;}
.toc.collapsed>ul{display:none;}
.art-body h2{font-size:20px;color:var(--ink);font-weight:800;margin:24px 0 10px;}
.art-body h3{font-size:16px;color:var(--ink);font-weight:700;margin:16px 0 8px;}
.art-body p{margin-bottom:12px;line-height:1.78;color:#444;}
.art-body ul{margin:0 0 14px 20px;list-style:disc;}
.art-body li{margin-bottom:8px;line-height:1.6;color:#444;}
.art-body b{color:var(--ink);}
.art-figure{margin:18px 0;text-align:center;}
.art-figure .ph{display:flex;align-items:center;justify-content:center;height:300px;border-radius:8px;background:linear-gradient(135deg,#efe3d3,#e3d2bb);color:#7a6a4f;font-weight:700;text-align:center;padding:16px;}
.art-figure figcaption{font-size:12.5px;color:var(--muted);font-style:italic;margin-top:8px;}
.art-more{color:var(--orange-dark);font-style:italic;}
.art-nav{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:#666;margin:26px 0;padding-top:14px;border-top:1px solid var(--line);flex-wrap:wrap;gap:8px;}
.art-nav a{color:var(--orange-dark);}
.art-helpful{background:#fafafa;border:1px solid var(--line);border-radius:8px;text-align:center;padding:18px;margin:20px 0;}
.art-helpful p{font-size:13.5px;color:#555;margin-bottom:6px;}
.art-helpful .stars{color:#ffb400;font-size:20px;}
.art-helpful .btns{margin-top:10px;display:flex;gap:10px;justify-content:center;}
.art-helpful .btns button{border:1px solid var(--line);border-radius:6px;padding:6px 24px;background:#fff;transition:all .2s;font-weight:600;}
.art-helpful .btns button:hover{border-color:var(--orange);color:var(--orange-dark);}
.related-title{background:var(--orange-soft);color:var(--orange-dark);font-size:13px;font-weight:700;padding:8px 18px;border-radius:4px;display:inline-block;letter-spacing:1px;margin:26px 0 16px;}
.related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.rel-card__img{height:120px;border-radius:8px;background:linear-gradient(135deg,#efe3d3,#e3d2bb);margin-bottom:8px;}
.rel-card a{font-size:13px;font-weight:600;color:var(--ink);line-height:1.4;display:block;}
.rel-card a:hover{color:var(--orange);}
@media(max-width:900px){.related-grid{grid-template-columns:repeat(2,1fr);}}

/* ===================== SEARCH RESULTS PAGE ===================== */
.search-page{padding:20px 0 44px;}
.search-head{text-align:center;padding:8px 0 4px;}
.search-head h1{font-size:26px;font-weight:800;color:var(--ink);}
.search-head p{font-size:14px;color:#555;margin-top:6px;}
.search-head p b{color:var(--ink);}
.search-head .divider{width:60px;height:3px;background:#333;margin:14px auto 0;border-radius:2px;}
.search-query{font-size:13.5px;color:#555;margin:22px 0 16px;}
.search-query b{color:var(--orange-dark);}

/* ===================== BLOG PAGE ===================== */
.blog{padding:8px 0 44px;}
.blog__layout{display:grid;grid-template-columns:1fr 330px;gap:44px;align-items:start;}
.blog__main h1{font-size:27px;font-weight:800;color:var(--ink);padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:8px;}
.bpost{display:flex;gap:24px;padding:26px 0;border-bottom:1px solid var(--line);}
.bpost__img{flex:0 0 250px;height:158px;border-radius:8px;overflow:hidden;background:linear-gradient(135deg,#efe3d3,#e3d2bb);display:flex;align-items:center;justify-content:center;text-align:center;color:#7a6a4f;font-weight:700;padding:10px;font-size:13px;}
.bpost__body{flex:1;min-width:0;}
.bpost__body h3{font-size:19px;font-weight:800;line-height:1.35;margin-bottom:10px;}
.bpost__body h3 a{color:var(--ink);}
.bpost__body h3 a:hover{color:var(--orange);}
.bpost__excerpt{color:#555;line-height:1.6;margin-bottom:12px;}
.bpost__meta{font-size:12.5px;color:var(--muted);}
.bpost__meta b{color:#666;font-weight:600;}
.bpost__meta .sep{margin:0 6px;color:#ccc;}
.pagination{display:flex;gap:8px;align-items:center;justify-content:center;margin-top:28px;}
.pagination a,.pagination span{min-width:34px;height:34px;padding:0 8px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:14px;color:#666;border:1px solid transparent;}
.pagination a:hover{border-color:var(--orange);color:var(--orange-dark);}
.pagination .cur{background:transparent;color:var(--ink);font-weight:800;}
.pagination .dots{border:none;}
.pagination .pg-next{border:1px solid var(--line);}

.blog__aside{position:sticky;top:90px;display:flex;flex-direction:column;gap:26px;}
.aside-box h4{font-size:18px;font-weight:800;color:var(--ink);padding-bottom:12px;border-bottom:2px solid var(--orange);margin-bottom:14px;}
.recent{display:flex;gap:12px;padding:10px 0;border-bottom:1px dashed var(--line);}
.recent:last-child{border-bottom:none;}
.recent__img{flex:0 0 76px;width:76px;height:60px;border-radius:6px;background:linear-gradient(135deg,#efe3d3,#e3d2bb);}
.recent__body a{font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.4;display:block;}
.recent__body a:hover{color:var(--orange);}
.recent__cat{font-size:12px;color:var(--muted);margin-top:4px;}
.blog-cats a{display:flex;justify-content:space-between;align-items:center;padding:11px 2px;font-size:14px;color:#444;border-bottom:1px dashed var(--line);transition:color .2s;}
.blog-cats a:hover{color:var(--orange-dark);}
.blog-cats a .plus{color:#bbb;font-size:16px;}
@media(max-width:900px){.blog__layout{grid-template-columns:1fr;}.blog__aside{position:static;}.bpost__img{flex:0 0 180px;height:120px;}}

/* ===================== COLLECTION PAGE ===================== */
.collection{padding:6px 0 40px;}
.col-title{font-size:22px;font-weight:800;color:var(--ink);margin:6px 0 18px;}
.col-seo{margin-top:34px;font-size:14px;color:#444;line-height:1.7;position:relative;}
.col-seo.collapsed{max-height:130px;overflow:hidden;}
.col-seo.collapsed::after{content:"";position:absolute;left:0;right:0;bottom:0;height:70px;background:linear-gradient(transparent,#fff);}
.col-seo h2{font-size:18px;color:var(--orange-dark);margin:16px 0 10px;font-weight:800;text-transform:none;}
.col-seo a{color:var(--orange-dark);}
.col-seo ul{margin:8px 0 8px 20px;list-style:disc;}
.col-seo li{margin-bottom:6px;}
.col-seo-toggle{display:block;margin:14px auto 0;border:1px solid var(--orange);color:var(--orange-dark);border-radius:20px;padding:7px 26px;font-size:13px;font-weight:600;background:#fff;transition:all .2s;}
.col-seo-toggle:hover{background:var(--orange);color:#fff;}

/* ===================== REVIEW MODAL ===================== */
.rv-modal{position:fixed;inset:0;z-index:1100;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;transition:opacity .25s;}
.rv-modal.open{opacity:1;visibility:visible;}
.rv-dialog{background:#fff;border-radius:10px;width:min(440px,96vw);max-height:92vh;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.35);transform:translateY(12px);transition:transform .25s;}
.rv-modal.open .rv-dialog{transform:none;}
.rv-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line);}
.rv-head h3{font-size:16px;font-weight:700;color:var(--ink);}
.rv-close{color:#888;font-size:14px;display:flex;align-items:center;gap:4px;}
.rv-close:hover{color:var(--orange);}
.rv-body{padding:20px;text-align:center;}
.rv-face{width:56px;height:56px;border-radius:50%;background:#eee;display:flex;align-items:center;justify-content:center;font-size:30px;margin:0 auto 8px;}
.rv-body h4{font-size:14px;color:#555;font-weight:500;margin-bottom:6px;}
.rv-stars{display:flex;justify-content:center;gap:4px;font-size:26px;color:#ddd;margin-bottom:16px;}
.rv-stars span{cursor:pointer;transition:color .15s;}
.rv-stars span.on{color:#ffb400;}
.rv-form{display:flex;flex-direction:column;gap:12px;text-align:left;}
.rv-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.rv-form input,.rv-form select,.rv-form textarea{width:100%;border:1px solid var(--line);border-radius:6px;padding:10px 12px;font-size:13.5px;outline:none;font-family:inherit;transition:border-color .2s;background:#fff;}
.rv-form input:focus,.rv-form select:focus,.rv-form textarea:focus{border-color:var(--orange);}
.rv-form textarea{min-height:96px;resize:vertical;}
.rv-submit{background:var(--orange);color:#fff;font-weight:700;padding:12px;border-radius:6px;transition:background .2s;}
.rv-submit:hover{background:var(--orange-dark);}
.rv-success{display:none;padding:24px 20px;text-align:center;}
.rv-success.show{display:block;}
.rv-success .ico{font-size:44px;color:var(--green);margin-bottom:10px;}

/* ===================== PRODUCT DETAIL ===================== */
.pd{padding:10px 0 40px;}
.pd-top{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start;}
.pd-gallery{}
.pd-main{position:relative;border:1px solid var(--line);border-radius:10px;overflow:hidden;}
.pd-main-img{aspect-ratio:1/1;background:linear-gradient(135deg,#f3f7f4,#e6f3ea);display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;color:var(--orange-dark);font-weight:700;font-size:16px;}
.pd-main .qv-gnav{}
.pd-dots{display:flex;gap:7px;justify-content:center;margin:12px 0;}
.pd-dots span{width:9px;height:9px;border-radius:50%;background:#d9d9d9;}
.pd-dots span.is-active{background:var(--orange);}
.pd-ship{margin-top:6px;border-radius:10px;overflow:hidden;background:linear-gradient(120deg,var(--orange),#2f8f4a);color:#fff;padding:20px 24px;display:flex;align-items:center;gap:16px;}
.pd-ship b{font-size:20px;font-weight:900;text-transform:uppercase;line-height:1.2;}
.pd-ship svg{flex-shrink:0;}

.pd-info h1{font-size:24px;font-weight:800;color:var(--ink);line-height:1.3;margin-bottom:10px;}
.pd-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:13px;color:var(--muted);margin-bottom:18px;}
.pd-meta .sku b{color:var(--orange-dark);}
.pd-meta .sep{color:#ccc;}
.pd-meta .rate{color:#ffb400;}
.pd-buy{display:flex;gap:16px;align-items:stretch;margin-bottom:18px;}
.pd-bulk{flex:0 0 118px;border-radius:12px;border:2px dashed var(--amber);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:10px;color:var(--amber);}
.pd-bulk span{font-size:11.5px;line-height:1.3;}
.pd-bulk b{font-size:20px;font-weight:900;margin-top:4px;}
.pd-variants-wrap{flex:1;border:1px solid var(--line);border-radius:12px;overflow:hidden;}
.pd-variants-wrap h4{background:var(--orange-soft);color:var(--orange-dark);font-size:13px;font-weight:700;padding:8px 14px;text-align:center;}
.pd-variants{display:grid;grid-template-columns:1fr 1fr;gap:0;}
.pd-variant{padding:14px 14px 14px 36px;position:relative;cursor:pointer;transition:background .2s;border-right:1px solid var(--line);}
.pd-variant:last-child{border-right:none;}
.pd-variant input{position:absolute;left:14px;top:16px;accent-color:var(--orange);}
.pd-variant.is-active{background:var(--orange-soft);}
.pd-variant__name{font-size:13px;color:#444;}
.pd-variant__price{display:block;font-size:18px;font-weight:800;color:var(--red);margin:3px 0;}
.pd-variant__unit{font-size:12px;color:var(--muted);}
.pd-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:26px;}
.pd-qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:8px;overflow:hidden;}
.pd-qty button{width:40px;height:44px;background:#fff;color:var(--orange-dark);font-size:20px;font-weight:700;}
.pd-qty button:hover{background:var(--orange-soft);}
.pd-qty input{width:52px;height:44px;border:none;border-left:1px solid var(--line);border-right:1px solid var(--line);text-align:center;font-size:16px;font-weight:700;outline:none;}
.pd-add{flex:1;min-width:230px;background:var(--orange);color:#fff;font-weight:700;font-size:15px;padding:13px 20px;border-radius:8px;transition:background .2s;}
.pd-add:hover{background:var(--orange-dark);}

.pd-specs h3{font-size:17px;font-weight:800;color:var(--ink);margin-bottom:12px;}
.pd-specs table{width:100%;border-collapse:collapse;}
.pd-specs td{border:1px solid var(--line);padding:10px 14px;font-size:13.5px;}
.pd-specs td:first-child{background:var(--orange-soft);color:var(--orange-dark);font-weight:600;width:34%;}

/* Tabs */
.pd-tabs{margin-top:44px;}
.pd-tabs__head{display:flex;gap:26px;border-bottom:1px solid var(--line);margin-bottom:22px;}
.tab-btn{padding:12px 4px;font-size:15px;font-weight:700;color:var(--muted);text-transform:uppercase;position:relative;transition:color .2s;}
.tab-btn:hover{color:var(--orange-dark);}
.tab-btn.active{color:var(--orange-dark);}
.tab-btn.active::after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:3px;background:var(--orange);border-radius:3px;}
.tab-panel{display:none;}
.tab-panel.active{display:block;animation:fadeInUp .4s ease;}
.tab-panel h4{font-size:16px;font-weight:700;color:var(--orange-dark);margin:16px 0 10px;}
.tab-panel p{margin-bottom:12px;line-height:1.7;color:#444;}
.tab-panel a{color:var(--orange-dark);}
.spec-list{list-style:none;}
.spec-list li{padding:8px 0 8px 26px;position:relative;color:#444;line-height:1.6;border-bottom:1px dashed #eee;}
.spec-list li::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:700;}

/* Accordion */
.acc{border:1px solid var(--line);border-radius:10px;overflow:hidden;}
.acc__item{border-bottom:1px solid var(--line);}
.acc__item:last-child{border-bottom:none;}
.acc__head{width:100%;text-align:left;padding:14px 18px;font-weight:600;font-size:14px;color:var(--ink);display:flex;justify-content:space-between;align-items:center;background:#fff;}
.acc__head:hover{background:var(--orange-soft);}
.acc__head .chev{transition:transform .25s;color:var(--muted);}
.acc__item.open .acc__head .chev{transform:rotate(180deg);color:var(--orange);}
.acc__body{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.acc__body div{padding:4px 18px 16px;font-size:13.5px;color:#555;line-height:1.7;}
.acc__item.open .acc__body{max-height:400px;}

/* Reviews */
.pd-reviews{border:1px solid var(--line);border-radius:10px;padding:18px;margin-top:26px;}
.pd-reviews__title{font-size:14px;color:var(--ink);margin-bottom:16px;}
.pd-reviews__title b{font-weight:700;}
.pd-rev-summary{display:grid;grid-template-columns:1fr 1.4fr auto;gap:20px;align-items:center;border:1px solid var(--line);border-radius:8px;padding:18px;margin-bottom:20px;}
.pd-rev-score{text-align:center;}
.pd-rev-score b{font-size:40px;color:var(--red);font-weight:900;display:block;}
.pd-rev-score .stars{color:#ffb400;}
.pd-rev-bars{display:flex;flex-direction:column;gap:3px;font-size:12px;color:#ffb400;}
.pd-rev-write,.pd-rev-write:link,.pd-rev-write:visited,.pd-rev-write:hover,.pd-rev-write:focus{color:#fff !important;}
.pd-rev-write{background:var(--orange);font-weight:600;padding:11px 22px;border-radius:6px;justify-self:end;}
.pd-rev-write:hover{background:var(--orange-dark);}
.rev-item{padding:14px 0;border-bottom:1px dashed var(--line);}
.rev-item__top{display:flex;align-items:center;gap:8px;font-size:13px;margin-bottom:4px;}
.rev-item__ava{width:24px;height:24px;border-radius:50%;background:#ddd;}
.rev-item__name{font-style:italic;font-weight:600;color:#555;}
.rev-item__stars{color:#ffb400;font-size:13px;}
.rev-item__badge{color:var(--green);font-size:12px;}
.rev-item__text{font-size:13.5px;color:#333;margin:2px 0;}
.rev-item__date{font-size:12px;color:#aaa;font-style:italic;margin-bottom:8px;}
.rev-reply{background:#f5f5f5;border-radius:6px;padding:12px 14px;margin-left:20px;}
.rev-reply__tag{display:inline-block;background:var(--orange);color:#fff;font-size:11px;font-weight:700;padding:2px 10px;border-radius:4px;margin-bottom:6px;}
.rev-reply p{font-size:13px;color:#555;margin:0;}
.pd-related h2{font-size:22px;font-weight:800;margin:44px 0 20px;}
.pd-related .product-row{padding-top:20px;}
@media (max-width:900px){.pd-top{grid-template-columns:1fr;}.pd-rev-summary{grid-template-columns:1fr;}.pd-rev-write{justify-self:start;}}

/* ===================== QUICK VIEW MODAL ===================== */
.qv-modal{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;visibility:hidden;transition:opacity .25s ease;}
.qv-modal.open{opacity:1;visibility:visible;}
.qv-dialog{position:relative;background:#fff;border-radius:12px;width:min(860px,96vw);max-height:92vh;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.4);transform:translateY(12px);transition:transform .25s ease;}
.qv-modal.open .qv-dialog{transform:translateY(0);}
.qv-head{display:flex;flex-direction:column;align-items:center;padding:14px 50px;border-bottom:1px solid var(--line);position:relative;text-align:center;}
.qv-head__name{font-size:14px;font-weight:700;color:var(--ink);}
.qv-head__brand{font-size:12px;color:var(--muted);}
.qv-close{position:absolute;top:14px;right:16px;width:30px;height:30px;border-radius:50%;color:#666;font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;transition:background .2s;}
.qv-close:hover{background:var(--line);}
.qv-body{display:grid;grid-template-columns:1fr 1fr;gap:26px;padding:24px;}
.qv-gallery{position:relative;display:flex;flex-direction:column;align-items:center;}
.qv-share{position:absolute;left:14px;top:14px;display:flex;flex-direction:column;align-items:center;gap:8px;z-index:5;}
.qv-share__toggle{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;background:var(--orange);border:none;transition:all .2s;box-shadow:var(--shadow);}
.qv-share__toggle:hover{background:var(--orange-dark);}
.qv-share.open .qv-share__toggle{background:var(--orange-dark);}
.qv-share__list{display:flex;flex-direction:column;gap:8px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:all .22s ease;}
.qv-share.open .qv-share__list{opacity:1;visibility:visible;transform:translateY(0);}
.qv-share__list a{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;color:#666;border:1px solid var(--line);transition:all .2s;background:#fff;}
.qv-share__list a:hover{background:var(--orange);color:#fff;border-color:var(--orange);}
.qv-img{width:100%;aspect-ratio:1/1;background:linear-gradient(135deg,#f3f7f4,#e6f3ea);border-radius:10px;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;color:var(--orange-dark);font-weight:600;}
.qv-gnav{position:absolute;top:46%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.9);box-shadow:var(--shadow);color:#555;font-size:22px;display:flex;align-items:center;justify-content:center;z-index:2;transition:all .2s;}
.qv-gnav:hover{color:var(--orange);}
.qv-gprev{left:-6px;}.qv-gnext{right:-6px;}
.qv-dots{display:flex;gap:6px;margin-top:12px;}
.qv-dots span{width:8px;height:8px;border-radius:50%;background:#d9d9d9;}
.qv-dots span.is-active{background:var(--orange);}
.qv-info h3{font-size:20px;font-weight:800;color:var(--ink);line-height:1.3;margin-bottom:8px;}
.qv-sku{font-size:13px;color:var(--muted);margin-bottom:16px;}
.qv-sku b{color:var(--orange-dark);}
.qv-variants{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px;}
.qv-variant{border:1px solid var(--line);border-radius:8px;padding:12px 14px 12px 34px;position:relative;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;gap:2px;}
.qv-variant input{position:absolute;left:12px;top:14px;accent-color:var(--orange);}
.qv-variant.is-active{border-color:var(--orange);background:var(--orange-soft);}
.qv-variant__name{font-size:13px;color:#444;font-weight:500;}
.qv-variant__price{font-size:16px;font-weight:800;color:var(--amber);}
.qv-variant__unit{font-size:12px;color:var(--muted);}
.qv-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;}
.qv-qty{display:flex;align-items:center;border:1px solid var(--orange);border-radius:30px;overflow:hidden;}
.qv-qty button{width:34px;height:38px;background:#fff;color:var(--orange-dark);font-size:18px;font-weight:700;transition:background .2s;}
.qv-qty button:hover{background:var(--orange-soft);}
.qv-val{width:40px;height:38px;border:none;text-align:center;font-size:15px;font-weight:700;outline:none;}
.qv-add{flex:1;min-width:200px;background:var(--orange);color:#fff;font-weight:700;font-size:14px;letter-spacing:.3px;padding:12px 18px;border-radius:30px;transition:background .2s;}
.qv-add:hover{background:var(--orange-dark);}
@media (max-width:700px){.qv-body{grid-template-columns:1fr;}.qv-share{flex-direction:row;}}

/* ===================== POLICY PAGES ===================== */
.breadcrumb{padding:14px 0;font-size:13px;color:#888;}
.breadcrumb a:hover{color:var(--orange);}
.breadcrumb .sep{margin:0 7px;color:#ccc;}
.breadcrumb .current{color:var(--ink);font-weight:600;}
.policy{padding:8px 0 54px;}
.policy__layout{display:grid;grid-template-columns:1fr 300px;gap:44px;align-items:start;}
.policy__main h1{font-size:26px;font-weight:800;color:var(--ink);margin-bottom:22px;}
.policy__main h2{font-size:16px;font-weight:700;color:var(--orange-dark);margin:24px 0 10px;}
.policy__main h3{font-size:14.5px;font-weight:700;color:var(--ink);margin:16px 0 8px;}
.policy__main p{margin-bottom:12px;line-height:1.75;color:#444;}
.policy__main ul{margin:0 0 14px 20px;list-style:disc;}
.policy__main li{margin-bottom:8px;line-height:1.65;color:#444;}
.policy__main a{color:var(--orange-dark);text-decoration:underline;}
.policy__main strong{color:var(--ink);}
.policy__main table{width:100%;border-collapse:collapse;margin:14px 0;}
.policy__main th,.policy__main td{border:1px solid var(--line);padding:10px 12px;font-size:13.5px;text-align:left;}
.policy__main th{background:var(--orange-soft);color:var(--orange-dark);}
.policy__aside{position:sticky;top:90px;}
.policy-menu{border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:var(--shadow);background:#fff;}
.policy-menu h4{padding:14px 18px;font-size:16px;font-weight:700;color:var(--ink);border-bottom:1px solid var(--line);}
.policy-menu a{display:block;padding:12px 18px;font-size:13.5px;color:#555;border-bottom:1px solid var(--line);transition:all .2s;}
.policy-menu a:last-child{border-bottom:none;}
.policy-menu a:hover{background:var(--orange-soft);color:var(--orange-dark);padding-left:22px;}
.policy-menu a.active{background:var(--orange);color:#fff;font-weight:600;}
.policy__aside-img{width:100%;border-radius:10px;margin-top:16px;box-shadow:var(--shadow);}
@media(max-width:900px){.policy__layout{grid-template-columns:1fr;}.policy__aside{position:static;}}

/* ===================== ABOUT PAGE ===================== */
.page-banner{background:#e8f1e8;border-top:3px solid var(--orange);text-align:center;padding:26px 16px;}
.page-banner h1{font-size:22px;font-weight:800;color:var(--ink);text-transform:uppercase;letter-spacing:.4px;margin-bottom:8px;}
.page-banner p{max-width:820px;margin:0 auto;color:#4a5a4a;font-size:14.5px;line-height:1.6;}

.about-hero{padding:44px 0;}
.about-hero__inner{display:flex;align-items:center;gap:50px;flex-wrap:wrap;justify-content:center;}
.about-hero__img{flex:0 0 300px;text-align:center;}
.about-hero__img img{max-width:280px;margin:0 auto;}
.about-stats{flex:0 1 auto;min-width:300px;display:flex;flex-direction:column;gap:22px;}
.stat__num{font-size:34px;font-weight:900;color:var(--orange);line-height:1;}
.stat__label{color:#4a5a4a;font-size:14px;margin-top:4px;}

.about-provide{padding:20px 0 44px;}
.about-diff{padding:20px 0 50px;background:#fff;}
.diff-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px 20px;margin-top:6px;}
.diff-item{text-align:center;padding:8px;}
.diff-item__ic{width:76px;height:76px;margin:0 auto 14px;border-radius:50%;background:var(--orange-soft);display:flex;align-items:center;justify-content:center;font-size:34px;color:var(--orange);transition:transform .25s,box-shadow .25s;}
.diff-item:hover .diff-item__ic{transform:translateY(-5px);box-shadow:var(--shadow-hover);}
.diff-item p{font-size:13.5px;color:#4a5a4a;line-height:1.5;max-width:190px;margin:0 auto;}

.quote-banner{background:linear-gradient(120deg,var(--orange-dark),var(--orange));color:#fff;padding:48px 16px;}
.quote-banner__inner{max-width:1000px;margin:0 auto;display:flex;gap:26px;align-items:center;}
.quote-banner__mark{font-size:90px;line-height:.7;font-family:Georgia,serif;opacity:.5;flex-shrink:0;}
.quote-banner p{font-size:18px;line-height:1.7;font-style:italic;font-weight:500;}

.about-certs{padding:44px 0;background:#f7f8fa;}
.about-certs .cert-card{cursor:zoom-in;}

/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;padding:40px;opacity:0;visibility:hidden;transition:opacity .25s ease;}
.lightbox.open{opacity:1;visibility:visible;}
.lightbox__img{max-width:min(880px,92vw);max-height:88vh;width:auto;height:auto;background:#fff;border-radius:4px;box-shadow:0 10px 40px rgba(0,0,0,.5);object-fit:contain;}
.lightbox__close{position:absolute;top:22px;right:26px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;font-size:26px;line-height:1;display:flex;align-items:center;justify-content:center;transition:background .2s;}
.lightbox__close:hover{background:rgba(255,255,255,.3);}
.lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;font-size:30px;line-height:1;display:flex;align-items:center;justify-content:center;transition:background .2s;}
.lightbox__nav:hover{background:rgba(255,255,255,.32);}
.lightbox__prev{left:26px;}
.lightbox__next{right:26px;}
.lightbox__counter{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);color:#fff;font-size:14px;background:rgba(0,0,0,.4);padding:4px 14px;border-radius:20px;}
@media (max-width:768px){.lightbox__prev{left:8px;}.lightbox__next{right:8px;}.lightbox__nav{width:44px;height:44px;}}

@media (max-width:1024px){ .diff-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:768px){
  .diff-grid{grid-template-columns:repeat(2,1fr);}
  .about-hero__inner{flex-direction:column;}
  .quote-banner__inner{flex-direction:column;text-align:center;gap:6px;}
  .quote-banner__mark{font-size:60px;}
  .stat__num{font-size:28px;}
}

/* ===================== ANIMATIONS ===================== */
@keyframes pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.08);}}
@keyframes ring{0%,100%{box-shadow:0 0 0 0 rgba(20,80,40,.45);}50%{box-shadow:0 0 0 12px rgba(20,80,40,0);}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(40px);}to{opacity:1;transform:translateY(0);}}
.reveal{opacity:0;}
.reveal.in-view{animation:fadeInUp .7s ease forwards;}

/* ===================== RESPONSIVE ===================== */
@media (max-width:1200px){
  .menu>li>a{padding:10px 10px;font-size:14px;}
  .search{width:220px;}
}
@media (max-width:1024px){
  .header__inner{flex-wrap:wrap;}
  .nav{order:5;flex-basis:100%;}
  .menu{overflow-x:auto;flex-wrap:nowrap;justify-content:flex-start;}
  .product-grid,.greviews__grid{grid-template-columns:repeat(3,1fr);}
  .certs__grid{grid-template-columns:repeat(3,1fr);}
  .news__grid{grid-template-columns:repeat(2,1fr);}
  .footer__grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:768px){
  .header__inner{gap:12px;}
  .search{order:5;width:100%;}
  .submenu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;display:none;}
  .hero__grid{grid-template-columns:1fr;gap:14px;}
  .hero__nav{display:none;}
  .product-grid,.greviews__grid{grid-template-columns:repeat(2,1fr);}
  .certs__grid{grid-template-columns:repeat(2,1fr);}
  .news__grid{grid-template-columns:repeat(2,1fr);}
  .congno__form{grid-template-columns:1fr;}
  .feature__inner,.congno__inner{flex-direction:column;}
  .section-title{font-size:21px;}
  .float-btns{top:auto;bottom:80px;transform:none;}
}
@media (max-width:480px){
  .product-grid,.greviews__grid{grid-template-columns:1fr 1fr;}
  .footer__grid{grid-template-columns:1fr;}
}

/* ===================== RESPONSIVE HARDENING ===================== */
@media (max-width:1100px){
  .header__inner{gap:12px;}
  .search-wrap{width:240px;}
  .menu>li>a{padding:9px 8px;font-size:13.5px;}
  .product-grid{grid-template-columns:repeat(4,1fr);}
  .greviews__grid{grid-template-columns:repeat(4,1fr);}
  .cert-card{flex-basis:calc((100% - 48px) / 3);}
}

@media (max-width:900px){
  .co-layout,
  .cart-layout,
  .blog__layout,
  .policy__layout,
  .account-layout,
  .pd-top{grid-template-columns:1fr;}

  .order-summary{border-left:none;padding-left:0;border-top:1px solid var(--line);padding-top:22px;}
  .blog__aside,
  .policy__aside{position:static;}
  .related-grid{grid-template-columns:repeat(2,1fr);}
  .pd-rev-summary{grid-template-columns:1fr;}
  .pd-rev-write{justify-self:start;}
  .policy__main table,
  .pd-specs table{display:block;overflow-x:auto;white-space:nowrap;}
}

@media (max-width:768px){
  body{font-size:13.5px;}
  .container{padding:0 12px;}
  .header__inner{align-items:center;justify-content:space-between;padding:8px 12px;}
  .logo img{height:46px;}
  .search-wrap{order:4;flex:0 0 100%;width:100%;min-width:0;}
  .search-suggest{min-width:0;width:100%;left:0;right:0;}
  .header__actions{gap:12px;margin-left:auto;}
  .header__action{font-size:11.5px;}
  .nav{order:5;flex-basis:100%;max-width:100%;}
  .menu{gap:4px;overflow-x:auto;padding:2px 0 6px;scroll-snap-type:x proximity;}
  .menu>li{scroll-snap-align:start;}
  .menu>li>a{font-size:13px;padding:8px 10px;background:#fff;border:1px solid transparent;}
  .has-sub:hover .submenu,
  .has-sub:focus-within .submenu{display:block;}
  .submenu{min-width:210px;border:1px solid var(--line);border-radius:8px;margin-top:4px;background:#fff;}

  .cart-dropdown{
    position:fixed;
    top:78px;
    left:12px;
    right:12px;
    width:auto;
    max-width:none;
    padding:8px 14px 16px;
  }
  .cart-dropdown::before{display:none;}
  .cart-list{max-height:48vh;}

  .hero{padding:14px 0;}
  .hero__cell{border-radius:12px;}
  .flash,.shop,.congno,.certs,.feature,.news,.partners{padding:32px 0;}
  .flash__bar{align-items:flex-start;flex-direction:column;padding:14px 16px;gap:10px;}
  .flash__more{margin-left:0;}
  .flash .row-carousel{padding:18px 16px 22px;}
  .flash .product-row{grid-auto-columns:minmax(170px,72vw);gap:14px;}
  .row-nav{display:none;}

  .cat-carousel{gap:4px;}
  .cat-nav{display:none;}
  .cat-item{width:92px;}
  .cat-icon{width:68px;height:68px;font-size:28px;}

  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
  .pcard{padding:10px;}
  .pcard h3{font-size:12.8px;min-height:54px;}
  .pcard__btns{gap:6px;flex-direction:column;}
  .btn-ghost{padding:8px 6px;}

  .cert-card{flex-basis:calc((100% - 16px) / 2);height:170px;padding:24px;}
  .news__grid{grid-template-columns:1fr 1fr;gap:12px;}
  .ncard__img{height:140px;}
  .partners__track img{height:72px;}
  .greviews__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .greviews__foot{flex-direction:column;align-items:stretch;}
  .greviews__foot .btn-buy{width:100%;}

  .footer{padding-top:32px;}
  .footer__grid{grid-template-columns:1fr 1fr;gap:22px;}
  .footer__hot{font-size:18px;}
  .float-btns{right:12px;bottom:76px;top:auto;transform:none;}
  .contact-btn{width:54px;height:54px;}
  .to-top{right:14px;bottom:16px;width:42px;height:42px;}

  .account-page,.co-page{padding:18px 0 42px;}
  .acc-info-row{align-items:flex-start;flex-direction:column;gap:6px;}
  .acc-menu a{padding:12px 14px;}
  .am-foot{flex-direction:column;}
  .auth-page{align-items:flex-start;padding:16px 12px;}
  .auth-body{padding:26px 22px 22px;}

  .co-login{align-items:flex-start;flex-direction:column;}
  .co-login a{width:100%;text-align:center;}
  .co-tabs{overflow-x:auto;}
  .co-tab{min-width:150px;}
  .co-invoice{align-items:flex-start;flex-direction:column;gap:8px;}
  .co-promo-input{flex-direction:column;}
  .co-promo-input button{padding:11px 18px;}
  .vat-grid,.rv-grid{grid-template-columns:1fr;}
  .vat-type{flex-direction:column;gap:10px;}

  .cart-row{align-items:flex-start;gap:12px;}
  .cart-row__right{align-items:flex-start;width:100%;margin-left:96px;}
  .order-actions{flex-direction:column;}

  .bpost{gap:16px;}
  .bpost__img{flex-basis:150px;height:108px;}
  .art-title,.blog__main h1,.search-head h1,.policy__main h1{font-size:22px;}
  .art-figure .ph{height:220px;}
  .related-grid{grid-template-columns:repeat(2,minmax(0,1fr));}

  .pd-buy{flex-direction:column;}
  .pd-bulk{flex:0 0 auto;min-height:92px;}
  .pd-variants{grid-template-columns:1fr;}
  .pd-variant{border-right:none;border-bottom:1px solid var(--line);}
  .pd-variant:last-child{border-bottom:none;}
  .pd-actions{align-items:stretch;}
  .pd-add{width:100%;min-width:0;}
  .pd-tabs__head{gap:12px;overflow-x:auto;}
  .tab-btn{white-space:nowrap;}
  .rev-reply{margin-left:0;}

  .qv-modal,.rv-modal,.am-modal,.vat-modal,.lightbox{padding:12px;}
  .qv-dialog,.rv-dialog,.am-dialog,.vat-dialog{width:100%;max-height:94vh;}
  .qv-body{grid-template-columns:1fr;padding:18px;}
  .qv-variants{grid-template-columns:1fr;}
  .qv-add{min-width:0;width:100%;}
  .qv-actions{align-items:stretch;}

  .about-hero__img,
  .about-stats,
  .congno__img,
  .congno__text,
  .feature__media,
  .feature__content{min-width:0;width:100%;flex-basis:auto;}
  .diff-grid{grid-template-columns:repeat(2,1fr);}
  .quote-banner{padding:34px 12px;}
}

@media (max-width:560px){
  .header__actions{gap:8px;}
  .header__action span:not(.cart-count){display:none;}
  .header__action svg{width:24px;height:24px;}
  .menu>li>a{font-size:12.5px;padding:7px 9px;}

  .section-title{font-size:19px;line-height:1.3;margin-bottom:18px;}
  .product-grid{gap:10px;}
  .pcard{border-radius:8px;padding:8px;}
  .pcard__img{padding:8px;margin-bottom:8px;}
  .pcard h3{font-size:12.3px;line-height:1.35;}
  .pcard__price .now{font-size:15px;}
  .pcard__price .old{display:block;margin-left:0;margin-top:2px;}
  .pcard__rating{font-size:11.5px;gap:4px;flex-wrap:wrap;}
  .badge--best{width:44px;height:44px;font-size:9px;}
  .pcard__tag{height:28px;left:10px;}

  .news__grid,
  .greviews__grid,
  .footer__grid,
  .diff-grid{grid-template-columns:1fr;}
  .cert-card{flex-basis:82%;height:150px;}

  .cart-item{gap:10px;}
  .cart-item__thumb{flex-basis:56px;width:56px;height:56px;}
  .cart-item__row{align-items:flex-start;flex-direction:column;}
  .cart-item__price{text-align:left;}

  .cart-row{display:grid;grid-template-columns:74px 1fr;align-items:start;}
  .cart-row__thumb{width:74px;height:74px;flex-basis:74px;}
  .cart-row__right{grid-column:2;margin-left:0;}
  .cart-row__price{font-size:14px;}

  .bpost{display:block;padding:20px 0;}
  .bpost__img{width:100%;height:150px;margin-bottom:12px;}
  .bpost__body h3{font-size:17px;}
  .pagination{flex-wrap:wrap;}
  .art-helpful .btns{flex-direction:column;}
  .art-helpful .btns button{width:100%;}
  .related-grid{grid-template-columns:1fr;}

  .pd-ship{align-items:flex-start;padding:16px;flex-direction:column;}
  .pd-actions{flex-direction:column;}
  .pd-qty{align-self:flex-start;}
  .pd-tabs__head{gap:8px;}
  .pd-specs td{display:block;width:100%;}
  .pd-specs td:first-child{width:100%;}

  .footer__col ul li{padding-left:14px;}
  .footer__bottom{text-align:left;}
}

@media (max-width:420px){
  .container{padding:0 10px;}
  .logo img{height:40px;}
  .search{height:40px;}
  .search input{padding:0 12px;font-size:13px;}
  .search button{height:40px;width:40px;}
  .cart-dropdown{top:70px;left:8px;right:8px;}

  .product-grid{grid-template-columns:1fr;}
  .product-row{grid-auto-columns:minmax(160px,86vw);}
  .flash .product-row{grid-auto-columns:minmax(160px,86vw);}
  .cat-item{width:84px;}
  .cat-label{font-size:12.5px;}

  .co-box,
  .acc-user,
  .acc-menu,
  .acc-info,
  .acc-empty,
  .acc-addr-card{border-radius:8px;}
  .co-box{padding:14px;}
  .co-cart-item{gap:10px;}
  .co-cart-item__thumb{flex-basis:54px;width:54px;height:54px;}
  .co-cart-item__qty{align-items:flex-start;flex-direction:column;}

  .qv-head{padding:12px 42px;}
  .qv-body{padding:14px;}
  .qv-info h3{font-size:17px;}
  .qv-actions{flex-direction:column;}
  .rv-body,.am-body,.vat-body{padding:16px;}
  .am-head h3,.vat-head h3{font-size:15px;}

  .page-banner{padding:22px 10px;}
  .page-banner h1{font-size:19px;}
  .about-hero{padding:32px 0;}
  .stat__num{font-size:26px;}
}

/* ===================== MOBILE DRAWER NAV ===================== */
/* Hamburger button — hidden on desktop, revealed on tablet/mobile */
.nav-toggle{
  display:none;
  width:44px;height:44px;flex:0 0 auto;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;
  background:none;border:none;cursor:pointer;padding:0;order:-1;
}
.nav-toggle span{
  display:block;width:24px;height:2.5px;border-radius:2px;
  background:var(--ink);transition:transform .28s ease,opacity .2s ease;
}
.nav-toggle.is-active span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
.nav-toggle.is-active span:nth-child(2){opacity:0;}
.nav-toggle.is-active span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}

/* Overlay */
.drawer-overlay{
  position:fixed;inset:0;z-index:1400;background:rgba(0,0,0,.45);
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;
}
.drawer-overlay.show{opacity:1;visibility:visible;}

/* Slide-in panel */
.mobile-drawer{
  position:fixed;top:0;left:0;z-index:1500;
  width:86%;max-width:340px;height:100%;
  background:#fff;box-shadow:2px 0 24px rgba(0,0,0,.18);
  transform:translateX(-100%);transition:transform .32s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;overscroll-behavior:contain;
}
.mobile-drawer.open{transform:translateX(0);}
.mobile-drawer__head{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;border-bottom:1px solid var(--line);flex:0 0 auto;
}
.mobile-drawer__logo img{height:44px;width:auto;display:block;}
.mobile-drawer__close{
  width:40px;height:40px;border:none;background:none;cursor:pointer;
  font-size:30px;line-height:1;color:var(--ink);border-radius:8px;
}
.mobile-drawer__close:hover{background:var(--cream);color:var(--orange);}
.mobile-drawer__nav{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:6px 0 24px;}
.mobile-drawer__nav ul{list-style:none;margin:0;padding:0;}
.mobile-drawer__nav .md-link,
.mobile-drawer__nav .md-row>a{
  display:block;padding:14px 20px;color:var(--ink);font-weight:700;font-size:15px;
  border-bottom:1px solid var(--line);text-decoration:none;
}
.mobile-drawer__nav .md-link:hover,
.mobile-drawer__nav .md-row>a:hover{background:var(--orange-soft);color:var(--orange);}
.md-row{display:flex;align-items:stretch;border-bottom:1px solid var(--line);}
.md-row>a{flex:1;border-bottom:none;}
.md-caret{
  flex:0 0 52px;border:none;background:none;cursor:pointer;color:#888;
  display:flex;align-items:center;justify-content:center;border-left:1px solid var(--line);
  transition:transform .25s ease,color .2s ease;
}
.md-has-sub.open .md-caret{transform:rotate(180deg);color:var(--orange);}
.md-submenu{max-height:0;overflow:hidden;background:var(--cream);transition:max-height .3s ease;}
.md-has-sub.open .md-submenu{max-height:640px;}
.md-submenu li a{
  display:block;padding:11px 20px 11px 34px;color:#555;font-size:14px;
  border-bottom:1px solid rgba(0,0,0,.05);text-decoration:none;
}
.md-submenu li a:hover{color:var(--orange-dark);background:#fff;}
body.drawer-lock{overflow:hidden;}

/* Show hamburger + hide inline nav on tablet & mobile */
@media (max-width:1024px){
  .nav-toggle{display:flex;}
  .header .nav{display:none !important;}
  .header__inner{flex-wrap:nowrap;align-items:center;}
  .logo{margin-right:auto;}
}
/* On small phones the search moves to its own row; keep hamburger + logo + actions on row 1 */
@media (max-width:768px){
  .header .nav{display:none !important;}
  .header__inner{flex-wrap:wrap;}
  .logo{margin-right:0;}
  .header__actions{margin-left:auto;}
  .nav-toggle{order:-1;margin-right:2px;width:40px;height:40px;}
}

/* ===================== TABLET REFINEMENTS (769–1024px) ===================== */
@media (min-width:769px) and (max-width:1024px){
  .certs__grid{grid-template-columns:repeat(3,1fr);}
  .news__grid{grid-template-columns:repeat(2,1fr);}
  .footer__grid{grid-template-columns:repeat(3,1fr);}
  .related-grid{grid-template-columns:repeat(3,1fr);}
  .diff-grid{grid-template-columns:repeat(3,1fr);}
  /* Tablet: keep search compact but visible next to logo */
  .search-wrap{width:230px;min-width:160px;}
  .header__actions{gap:16px;}
  /* Two-column comfortable reading for split product layout on larger tablets */
  .pd-top{grid-template-columns:minmax(0,1fr) minmax(280px,360px);}
}

/* Portrait tablet / small tablet: 3-up product grid */
@media (min-width:769px) and (max-width:900px){
  .product-grid,
  .greviews__grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}

/* Landscape tablet / small laptop: 4-up product grid */
@media (min-width:901px) and (max-width:1200px){
  .product-grid,
  .greviews__grid{grid-template-columns:repeat(4,minmax(0,1fr));}
}

/* ===================== MOBILE CART BOTTOM-SHEET ===================== */
.cart-sheet-top{display:none;}
.cart-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1550;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;}
.cart-backdrop.show{opacity:1;visibility:visible;}
body.cart-lock{overflow:hidden;}

@media (max-width:768px){
  .cart-backdrop{display:block;}
  .cart-dropdown{
    position:fixed;left:0;right:0;bottom:0;top:auto;width:100%;max-width:none;
    padding:0;border-radius:18px 18px 0 0;z-index:1600;
    max-height:85vh;display:flex;flex-direction:column;
    box-shadow:0 -8px 30px rgba(0,0,0,.24);
    transform:translateY(100%);opacity:1;visibility:hidden;
    transition:transform .34s cubic-bezier(.4,0,.2,1),visibility .34s ease;
  }
  .cart-wrap.open .cart-dropdown{transform:translateY(0);visibility:visible;}
  .cart-dropdown::before{display:none;}
  .cart-dropdown__title{display:none;}
  .cart-sheet-top{display:block;position:sticky;top:0;background:#fff;border-radius:18px 18px 0 0;z-index:2;}
  .cart-sheet-handle{display:block;width:44px;height:5px;border-radius:3px;background:#d5d5cf;margin:8px auto 6px;}
  .cart-sheet-summary{display:flex;align-items:center;gap:10px;background:var(--orange);color:#fff;padding:11px 16px;font-weight:700;}
  .cart-sheet-count{font-size:14px;white-space:nowrap;}
  .cart-sheet-total{flex:1;text-align:center;font-size:16px;}
  .cart-sheet-close{margin-left:auto;background:none;border:none;color:#fff;font-weight:700;font-size:14px;cursor:pointer;padding:4px 2px;white-space:nowrap;}
  .cart-list{max-height:none;flex:1;overflow-y:auto;padding:0 16px;-webkit-overflow-scrolling:touch;}
  .cart-dropdown__total{padding:14px 16px;margin:0;border-top:1px solid var(--line);}
  .cart-dropdown__btn{margin:0 16px 16px;}
}

/* ===================== MOBILE HERO: single horizontal banner ===================== */
@media (max-width:768px){
  .hero__cell--side{display:none;}
  .hero__grid{grid-template-columns:1fr;gap:0;}
  .hero__cell--main{aspect-ratio:1.95/1;width:100%;}
  .hero__cell--main img{width:100%;height:100%;object-fit:cover;}
}

/* ===================== MOBILE FIXES: overlap + cart badge ===================== */
/* Hide floating contact / to-top buttons while the cart sheet or nav drawer is open
   so they don't cover the sheet footer (total + button) */
body.cart-lock .float-btns,
body.cart-lock .to-top,
body.drawer-lock .float-btns,
body.drawer-lock .to-top{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

/* Cart quantity badge: anchor snugly to the top-right corner of the icon on phones */
@media (max-width:560px){
  .header__cart{position:relative;}
  .header__cart .cart-count{
    top:-4px;
    right:-4px;
    width:16px;
    height:16px;
    font-size:10px;
    line-height:1;
  }
}

/* ===================== MOBILE FIX: công nợ section overflow ===================== */
@media (max-width:768px){
  .congno__img img{max-width:100%;height:auto;}
  .congno__text h2{font-size:22px;line-height:1.25;overflow-wrap:break-word;}
}
/* Safety: images never force horizontal overflow on small screens */
@media (max-width:768px){
  .congno img,
  .feature__media img,
  .about-hero__img img,
  .quote-banner img{max-width:100%;height:auto;}
}

/* ===================== GLOBAL RESPONSIVE SAFETY NET ===================== */
@media (max-width:768px){
  /* No image may exceed its container width (prevents horizontal overflow) */
  img{max-width:100%;height:auto;}
  /* Long unbreakable strings (codes, emails, URLs) wrap instead of overflowing */
  .pcard h3,.cart-item__name,.co-cart-item__name,
  .art-title,.blog__main h1,.policy__main h1,.section-title,
  .footer p,.footer a{overflow-wrap:break-word;}
}

/* ===================== MOBILE: centered footer + contact button position ===================== */
@media (max-width:768px){
  /* 1) Center all footer components */
  .footer__grid{text-align:center;}
  .footer__col{text-align:center;}
  .footer h4{text-align:center;}
  .footer__social{justify-content:center;}
  .footer__hot{justify-content:center;}
  .footer__col--hotline p{text-align:center;}
  .footer__gov{align-self:center;}
  .footer__col ul li{padding-left:0;}
  .footer__col ul li::before{position:static;margin-right:6px;}
  .footer__bottom{text-align:center;}

  /* 2) Contact button back to vertical middle of the screen (like desktop),
        so its popup menu opens with room and never gets clipped at the bottom */
  .float-btns{top:50%;bottom:auto;transform:translateY(-50%);right:12px;}
  /* Keep the contact popup within the viewport */
  .contact-menu{max-width:calc(100vw - 24px);}
}

/* ===================== REAL PRODUCT IMAGES IN CARDS ===================== */
.pcard__img img{width:100%;height:100%;object-fit:contain;display:block;}
.pcard__cat{font-size:11.5px;color:var(--muted);margin-top:6px;text-transform:uppercase;letter-spacing:.3px;}
.ncard__img img{width:100%;height:100%;object-fit:cover;display:block;}

/* ===================== PRODUCT DETAIL GALLERY (real images) ===================== */
.pd-main-img img{width:100%;height:100%;object-fit:contain;display:block;}
.pd-thumbs{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;}
.pd-thumbs img{width:60px;height:60px;object-fit:contain;border:1px solid var(--line);border-radius:8px;padding:4px;cursor:pointer;background:#fff;transition:border-color .2s;}
.pd-thumbs img:hover{border-color:var(--orange);}

/* ===================== MOBILE: center about stats ===================== */
@media (max-width:768px){
  .about-stats{align-items:center;text-align:center;}
  .stat{text-align:center;width:100%;}
}

/* ===================== MOBILE: extra vertical gap so ribbon tags don't overlap ===================== */
@media (max-width:768px){
  .product-grid,
  .related-grid,
  .greviews__grid{row-gap:26px;}
}

/* ===================== MOBILE: product detail overflow fixes ===================== */
@media (max-width:768px){
  .rev-item__top{flex-wrap:wrap;}
  .pd-meta{flex-wrap:wrap;}
  .breadcrumb{overflow-wrap:break-word;}
  /* Safety net: never allow horizontal page scroll on small screens */
  html,body{overflow-x:clip;}
}

/* ===================== MOBILE: product gallery must shrink to viewport ===================== */
@media (max-width:900px){
  .pd-top{grid-template-columns:minmax(0,1fr);}
  .pd-gallery,
  .pd-info{min-width:0;max-width:100%;}
  .pd-main,.pd-main-img{max-width:100%;}
  .pd-main-img img{max-width:100%;}
  .pd-thumbs{flex-wrap:wrap;}
}

/* ===================== MOBILE: 2-col variants + centered qty ===================== */
@media (max-width:768px){
  .pd-variants{grid-template-columns:1fr 1fr;}
  .pd-variant{border-right:1px solid var(--line);border-bottom:none;}
  .pd-variant:last-child{border-right:none;}
  .pd-actions{flex-direction:column;align-items:center;}
  .pd-qty{align-self:center;}
  .pd-add{width:100%;}
}

/* ===================== MOBILE: specs table as 2 columns ===================== */
@media (max-width:768px){
  .pd-specs table{display:table;table-layout:fixed;width:100%;white-space:normal;}
  .pd-specs td:first-child{width:38%;}
}