/* ==========================================================================
   ECO.MI V3 (PUFU CRAFT) MASTER STYLESHEET
   ShopXanh Standard: public/css/style.css
   ========================================================================== */

/* --- Source: style.css --- */
:root{--green:#2f6b3a;--forest:#1f4a2b;--cream:#f7f2e8;--paper:#fffcf5;--ink:#233d2a;--muted:#657064;--sand:#c6af88;--line:#dcded0;--primary:var(--green);--surface:var(--cream);--text:var(--ink);--button-bg:var(--primary);--radius:10px;--section:104px;--serif:'Literata',Georgia,serif;--sans:'Be Vietnam Pro',Arial,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--surface);color:var(--text);font:16px/1.75 var(--sans)}button,input,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{cursor:pointer}img{max-width:100%;display:block}button:focus-visible,a:focus-visible{outline:3px solid var(--sand);outline-offset:5px}p{margin:0 0 22px}h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;line-height:1.22}h2{font-size:44px;letter-spacing:-1.5px}h3{font-size:24px}em{font-weight:400;color:var(--green)}.container{width:min(1200px,calc(100% - 80px));margin-inline:auto}.section{padding:var(--section) 0}.eyebrow{font:600 12px/1.7 var(--sans);letter-spacing:2px;margin-bottom:22px}.button{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:13px 25px;border:1px solid transparent;border-radius:5px;background:var(--button-bg);color:var(--cream);font:500 14px/1.5 var(--sans);transition:background .2s,transform .2s;white-space:nowrap}.button:hover{background:var(--forest);transform:translateY(-2px)}.button.small{min-height:44px;padding:10px 18px}.button.outline{border-color:#60745d;background:transparent;color:var(--forest)}.button.outline:hover{background:#ffffff80}.button.cream{background:var(--cream);color:var(--forest)}.button.cream:hover{background:white}.button.light-outline{background:transparent;border-color:#b3c2a570}.button.light-outline:hover{background:#ffffff10}.button-row{display:flex;gap:14px;flex-wrap:wrap}.dark{background:var(--forest);color:var(--cream)}.dark em{color:#c6d6aa}.dark .eyebrow{color:#c6d6aa}.dark p{color:#d3ddce}.dark h2{color:var(--cream)}.skip{position:fixed;left:20px;top:-80px;z-index:1000;background:var(--cream);padding:16px}.skip:focus{top:20px}header{position:fixed;top:0;left:0;width:100%;z-index:50;transition:background .4s,box-shadow .4s}header.scrolled{background:#f7f2e8f0;backdrop-filter:blur(18px);box-shadow:0 1px 0 #254c2720}.nav-wrap{width:min(1320px,calc(100% - 80px));height:94px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:24px}.logo{font:700 40px/1 var(--sans);letter-spacing:-3px;color:var(--green);display:inline-block}.logo span{display:block;font:500 8px/2.4 var(--sans);letter-spacing:1.5px;color:var(--ink)}nav{display:flex;align-items:center;gap:25px}nav a{font-size:13px;white-space:nowrap}nav a:hover,nav .active{color:var(--green)}nav .active{position:relative}nav .active:after{content:'';display:block;width:15px;border-bottom:2px solid var(--green);position:absolute;bottom:-8px}.nav-actions{display:flex;align-items:center;gap:22px}.language{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600}.language button{padding:5px 0;border:0;background:none;font-size:12px;color:var(--muted)}.divider{color:#9aa18e}.menu-button{display:none;background:none;border:0;font-size:24px}.hero{height:870px;position:relative;overflow:hidden;background:#efe7d6}.hero-backdrop{position:absolute;inset:0;background:url('../images/story.png') 100% 40%/auto 115% no-repeat;opacity:.53;animation:zoom 22s ease-in-out infinite alternate}.hero-wash{position:absolute;inset:0;background:linear-gradient(90deg,#f7f2e8 0%,#f7f2e8f5 37%,#f7f2e877 66%,#f7f2e81a 100%)}.hero-product{position:absolute;width:660px;max-width:55%;right:1.5%;bottom:106px;filter:drop-shadow(0 24px 24px #4b42221b);animation:hero-in 1.6s ease both}.hero-content{position:relative;padding-top:180px;z-index:2}.hero h1{font-size:49px;line-height:1.23;letter-spacing:-1.9px;max-width:650px}.hero .eyebrow{font-size:11px;letter-spacing:1.8px;margin-bottom:25px}.hero-description{max-width:470px;font-size:15px;line-height:1.85;margin:27px 0 28px;color:#5f6859}.hero-content>*{animation:hero-in .9s ease both}.hero-content h1{animation-delay:.1s}.hero-description{animation-delay:.2s}.hero-content .button-row{animation-delay:.3s}.hero-bottom{position:absolute;left:50%;transform:translateX(-50%);bottom:32px;display:flex;justify-content:space-between;align-items:center}.scroll-link{display:flex;gap:12px;align-items:center;font-size:10px;letter-spacing:2px}.scroll-line{display:block;width:1px;height:33px;background:var(--green)}.image-note{font-size:10px;letter-spacing:.2px;color:#556044;background:#f7f2e8bf;border-radius:3px;padding:3px 8px}.section-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:46px;gap:30px}.section-head p:last-child{font-size:14px;color:var(--muted);margin:0}.section-head .eyebrow{margin-bottom:12px}.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}.product-card{min-width:0;transition:transform .35s,box-shadow .35s;border-radius:var(--radius)}.product-card:hover{transform:translateY(-7px);box-shadow:0 18px 30px #1f4a2b0c}.product-visual{width:100%;height:340px;border:0;border-radius:8px;position:relative;overflow:hidden;background:#eeeadf;color:var(--forest);display:block}.card-index{position:absolute;top:18px;left:19px;font:500 10px var(--sans);letter-spacing:1.3px;z-index:2}.visual-caption{position:absolute;bottom:14px;left:0;width:100%;font:500 9px var(--sans);letter-spacing:.6px}.crop{display:block;position:absolute;overflow:hidden;transition:transform .55s}.laundry-crop{width:280px;height:213px;left:50%;top:72px;transform:translateX(-50%);border-radius:4px;background:white}.laundry-crop img{width:691px;max-width:none;position:absolute;left:-49px;top:-100px}.hanging-crop{width:250px;height:207px;left:50%;top:68px;transform:translateX(-50%);border-radius:4px}.hanging-crop img{width:310px;max-width:none;position:absolute;left:-42px;top:-129px}.round-window{position:absolute;inset:50px 45px 45px;overflow:hidden;border-radius:5px}.round-window img{width:100%;height:100%;object-fit:cover;object-position:50% 85%;transition:transform .55s}.product-card:hover .crop{transform:translateX(-50%) scale(1.035)}.product-card:hover .round-window img{transform:scale(1.04)}.product-info{padding:25px 2px 20px}.product-info h3{font-size:24px;margin-bottom:12px}.product-info p{font-size:13px;color:var(--muted);min-height:46px}.card-actions{display:flex;justify-content:space-between;align-items:center;gap:8px}.text-link{border:0;border-bottom:1px solid #34543550;background:none;padding:0 0 5px;color:var(--green);font:500 13px/1.6 var(--sans)}.text-link span{display:inline-block;margin-left:12px;transition:transform .3s}.product-card:hover .text-link span,.text-link:hover span{transform:translateX(4px)}.quote-link{font-size:11px;border:1px solid #abb4a2;border-radius:4px;padding:8px 10px}.quote-link:hover{background:#e8eadb}.custom-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:90px;align-items:center}.custom-art{position:relative;padding-bottom:25px}.custom-art>img{height:484px;width:100%;object-fit:cover;border-radius:6px}.photo-tag{position:absolute;bottom:14px;left:14px;max-width:calc(100% - 28px);background:#f7f2e8e8;color:#42553d;font:400 10px/1.5 var(--sans);padding:5px 9px;border-radius:3px}.custom-art .photo-tag{bottom:80px}.custom-caption{border-top:1px solid #8da17e80;display:flex;justify-content:space-between;font-size:9px;letter-spacing:1px;margin-top:20px;padding-top:16px;gap:20px}.custom-copy h2{font-size:48px;margin-bottom:27px}.custom-copy>p:not(.eyebrow){font-size:14px;line-height:1.9;max-width:430px}.custom-options{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 18px;margin:30px 0 34px}.custom-options span{font-size:12px;padding-bottom:10px;border-bottom:1px solid #d1dcb940}.material-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:100px;align-items:center}.material-copy>p:not(.eyebrow){font-size:14px;color:var(--muted);max-width:380px;margin:26px 0}.material-details{margin-top:30px}.material-details>div{display:flex;gap:22px;border-top:1px solid var(--line);padding-top:17px;margin-top:18px}.material-details>div>span{font:italic 23px var(--serif);color:#809371}.material-details p{font-size:12px;color:var(--muted);margin:0}.material-details strong{display:block;color:var(--forest);font-size:13px;margin-bottom:5px;font-weight:500}.material-visual{height:500px;position:relative}.weave-detail{position:absolute;right:0;top:0;width:88%;height:410px;overflow:hidden;border-radius:6px;background:#e3d2af}.weave-detail>img{position:absolute;width:1150px;max-width:none;left:-325px;top:-208px}.craft-placeholder{position:absolute;bottom:0;left:0;width:230px;height:225px;background:#e8e0cd;border:9px solid var(--cream);padding:25px 18px}.placeholder-mark{font-size:9px;letter-spacing:1px;color:#6f725d}.craft-placeholder p{font:24px/1.4 var(--serif);margin:24px 0 16px}.craft-placeholder small{font-size:10px;color:#6f725d}.process .section-head>p{color:#cbd6c2}.timeline{list-style:none;margin:60px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:0}.timeline li{position:relative;padding-right:25px;transition:opacity .4s}.timeline li:before{content:'';height:1px;background:#92a38270;position:absolute;top:24px;left:0;right:0}.step-number{display:flex;position:relative;align-items:center;justify-content:center;width:49px;height:49px;border:1px solid #9daf89;border-radius:50%;background:var(--forest);color:#cedcbe;font:italic 20px var(--serif);transition:background .5s,color .5s}.timeline li.highlight .step-number{background:#d4dfbe;color:var(--forest)}.timeline h3{font:500 17px/1.6 var(--sans);margin-top:26px;min-height:54px}.timeline p{font-size:12px;line-height:1.85;margin-top:12px;color:#bccbb6}.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center}.story-photo{position:relative;height:580px}.story-photo img{width:100%;height:100%;object-fit:cover;border-radius:7px}.story-copy h2{margin-bottom:28px}.story-copy>p:not(.eyebrow){color:var(--muted);font-size:14px;line-height:1.9}.story-copy .text-link{margin-top:9px}.story-extra{margin-top:24px}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:95px;align-items:start}.contact-copy h2{font-size:43px;margin:0 0 25px}.contact-copy>p:not(.eyebrow){font-size:14px;max-width:370px}.contact-copy .button{margin-top:10px}.contact-copy p.small-note{font-size:12px;line-height:2.1;margin-top:35px;color:#aebe9f}.contact-form{padding-top:7px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}.field{margin-bottom:20px}.field label{display:flex;gap:4px;align-items:baseline;font-size:13px;font-weight:700;margin-bottom:8px;color:#43270f !important;}.field label span{color:#d3dfb9}.field label .optional{font-size:9px;opacity:.65;margin-left:auto}input,textarea{display:block;width:100%;background:#ffffff06;border:1px solid #8ea07e75;border-radius:4px;padding:13px 15px;color:var(--cream);font-size:13px;outline:0;resize:vertical;transition:border-color .2s,background .2s}input::placeholder,textarea::placeholder{color:#a7b49f}input:focus,textarea:focus{border-color:#dae5c3;background:#ffffff0b;box-shadow:0 0 0 2px #e0e9c920}input[aria-invalid=true],textarea[aria-invalid=true]{border-color:#f2b5a2}.error{display:block;color:#ffd0be;font-size:11px;line-height:1.5;margin-top:5px}.error:empty{display:none}.submit{width:100%;margin-top:4px}.form-note{font-size:10px!important;text-align:center;margin:12px 0 0;color:#b0c2a6!important}.form-feedback{font-size:13px;margin-top:15px;border-top:1px solid #91a77c;padding-top:14px}.partners{padding:37px 0 40px;overflow:hidden}.partner-heading{display:flex;justify-content:space-between;align-items:center;gap:25px}.partner-heading h2{font:500 13px var(--sans);letter-spacing:0}.partner-heading small{font-size:10px;color:var(--muted)}.marquee{overflow:hidden;margin-top:24px;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}.marquee-track{display:flex;width:max-content;animation:marquee 65s linear infinite}.marquee:hover .marquee-track{animation-play-state:paused}.logo-set{display:flex;gap:16px;padding-right:16px}.partner-placeholder{width:150px;height:49px;border-radius:5px;background:#ebe9df;border:1px solid transparent;color:#92968b;display:grid;place-items:center;font-size:12px;transition:.2s}.partner-placeholder:hover{border-color:#aab69d;background:#e0e4d6}footer{padding:55px 0 24px;background:#193d25;color:#c3cfba}footer .logo{color:var(--cream)}footer .logo span{color:#c3cfba}.footer-main{display:grid;grid-template-columns:2fr 1fr 1fr;gap:65px;padding-bottom:42px}.footer-main p{font-size:12px;line-height:2;margin:20px 0 0}.footer-links{display:flex;flex-direction:column;gap:10px;font-size:12px}.footer-links>span{font-size:10px;letter-spacing:1.8px;margin-bottom:8px;color:#91ab84}.footer-links p{margin:0}.footer-bottom{border-top:1px solid #93a38233;padding-top:20px;display:flex;justify-content:space-between;font-size:10px;color:#94aa87}dialog{width:min(570px,calc(100% - 40px));background:var(--cream);color:var(--forest);border:0;border-radius:12px;padding:45px;box-shadow:0 30px 100px #0003}dialog::backdrop{background:#13271899;backdrop-filter:blur(5px)}dialog h2{font-size:33px;margin-bottom:20px}dialog p{font-size:14px}dialog dl{font-size:13px;margin:25px 0}dialog dl div{display:grid;grid-template-columns:120px 1fr;border-top:1px solid var(--line);padding:12px 0}dialog dd{margin:0;color:var(--muted)}.dialog-close{position:absolute;right:15px;top:10px;font-size:28px;border:0;background:none;color:var(--forest)}.toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);max-width:calc(100% - 40px);width:480px;background:var(--cream);color:var(--forest);padding:18px 25px;border:1px solid #899b7b;box-shadow:0 8px 40px #0002;border-radius:8px;z-index:100;font-size:13px}.reveal{transition:opacity .8s,transform .8s}.reveal.pending{opacity:0;transform:translateY(25px)}@keyframes hero-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@keyframes zoom{to{transform:scale(1.045)}}@keyframes marquee{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media(min-width:1500px){.hero-product{right:calc((100vw - 1440px)/2)}.hero-backdrop{background-size:cover}}
@media(max-width:1200px){nav{gap:15px}nav a{font-size:11px}.nav-wrap{width:calc(100% - 48px);gap:15px}.nav-actions{gap:12px}.hero-product{right:-6%;max-width:57%}.hero h1{font-size:44px}.custom-grid,.story-grid,.material-grid,.contact-grid{gap:50px}.hero .eyebrow{font-size:10px}.laundry-crop{transform:translateX(-50%) scale(.85)}.hanging-crop{transform:translateX(-50%) scale(.9)}.product-card:hover .laundry-crop{transform:translateX(-50%) scale(.9)}.product-card:hover .hanging-crop{transform:translateX(-50%) scale(.95)}.card-actions{align-items:flex-start;flex-direction:column}.custom-copy h2{font-size:42px}}
@media(max-width:960px){:root{--section:75px}.nav-wrap{height:80px}nav{display:none;position:absolute;top:80px;left:0;width:100%;background:var(--cream);padding:25px 40px;box-shadow:0 15px 25px #203c2220}nav.open{display:flex;flex-direction:column;align-items:flex-start;gap:18px}nav a{font-size:14px}.menu-button{display:block}.hero h1{font-size:40px}.hero-content{padding-top:155px}.hero-description{max-width:390px}.hero-product{max-width:52%;right:-6%;bottom:150px}.hero{height:820px}.custom-grid,.material-grid,.story-grid,.contact-grid{gap:40px}.custom-copy h2,h2,.contact-copy h2{font-size:36px}.product-grid{gap:18px}.product-visual{height:290px}.laundry-crop{top:50px;transform:translateX(-50%) scale(.65)}.hanging-crop{top:45px;transform:translateX(-50%) scale(.7)}.product-card:hover .laundry-crop{transform:translateX(-50%) scale(.7)}.product-card:hover .hanging-crop{transform:translateX(-50%) scale(.75)}.product-info h3{font-size:21px}.visual-caption{font-size:8px}.round-window{inset:50px 20px 40px}.timeline{grid-template-columns:repeat(3,1fr);row-gap:30px}.material-visual{height:430px}.weave-detail{height:330px}.story-photo{height:520px}.custom-options{grid-template-columns:repeat(2,1fr)}.form-row{grid-template-columns:1fr;gap:0}}
@media(max-width:640px){:root{--section:60px}.container{width:calc(100% - 40px)}.nav-wrap{width:calc(100% - 36px);height:72px}.logo{font-size:32px}.logo span{font-size:6px}.nav-actions>.button{display:none}.nav-actions{gap:20px}nav{top:72px}.hero{height:940px}.hero-content{padding-top:125px}.hero h1{font-size:34px;letter-spacing:-1.2px;line-height:1.28}.hero .eyebrow{font-size:8px;letter-spacing:1.1px;max-width:310px}.hero-description{font-size:13px;max-width:350px;margin:22px 0}.hero .button{font-size:11px;padding:12px 15px;min-height:46px}.hero-product{width:390px;max-width:95%;right:-3%;bottom:74px}.hero-wash{background:linear-gradient(180deg,#f7f2e8 0%,#f7f2e8f5 46%,#f7f2e866 100%)}.hero-backdrop{background-size:auto 70%;background-position:center bottom}.hero-bottom{bottom:24px;gap:10px}.image-note{font-size:8px;max-width:175px}.scroll-link{font-size:8px}.section-head{display:block;margin-bottom:30px}.section-head>p{margin-top:20px!important}.eyebrow{font-size:10px;letter-spacing:1.5px;margin-bottom:15px}h2{font-size:33px}.product-grid{grid-template-columns:1fr;gap:25px}.product-visual{height:340px}.laundry-crop{transform:translateX(-50%);top:72px}.hanging-crop{transform:translateX(-50%);top:68px}.product-card:hover .laundry-crop,.product-card:hover .hanging-crop{transform:translateX(-50%) scale(1.025)}.round-window{inset:45px 50px 40px}.visual-caption{font-size:9px}.product-info{padding-top:20px}.product-info h3{font-size:25px}.product-info p{min-height:0;margin-bottom:20px}.card-actions{flex-direction:row;align-items:center}.custom-grid,.material-grid,.story-grid,.contact-grid{grid-template-columns:1fr;gap:40px}.custom-copy{grid-row:1}.custom-copy h2{font-size:40px}.custom-art>img{height:350px}.custom-options{grid-template-columns:repeat(3,1fr)}.custom-caption{font-size:8px}.material-visual{height:390px}.weave-detail{height:320px}.craft-placeholder{height:190px;width:205px;padding:20px 15px}.craft-placeholder p{font-size:22px;margin:16px 0}.timeline{grid-template-columns:repeat(2,1fr);margin-top:35px}.timeline h3{font-size:15px;margin-top:18px}.timeline p{font-size:11px}.timeline li{padding-right:20px}.story-photo{height:430px}.story-copy h2{font-size:35px}.contact-copy h2{font-size:36px}.contact-copy .small-note{display:none}.partner-heading{display:block}.partner-heading small{display:block;font-size:9px;margin-top:10px}.partner-placeholder{width:120px;height:44px}.footer-main{grid-template-columns:1fr 1fr;gap:35px}.footer-main>div:first-child{grid-column:1/-1}.footer-bottom{gap:20px;font-size:9px}.form-row{grid-template-columns:1fr}.field input,.field textarea{font-size:16px}.footer-links{font-size:11px}dialog{padding:35px 25px}dialog h2{font-size:29px}}
/* Keep supplied promotional typography outside the product viewports. */
.laundry-crop{width:222px;height:220px;top:68px}.laundry-crop img{width:740px;left:-130px;top:-110px}.hanging-crop{width:246px;height:214px;top:63px}.hanging-crop img{width:444.6px;left:-155px;top:-196px}.round-window img{object-position:50% 85%}.material-visual{transform:translateY(var(--parallax,0px));will-change:transform}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.reveal.pending{opacity:1;transform:none}.marquee-track{transform:none}.marquee-track .logo-set[aria-hidden]{display:none}.material-visual{transform:none}}
.laundry-crop{width:215px;height:194px;top:82px}.laundry-crop img{left:-142px;top:-115px}.hanging-crop{width:270px;height:230px;top:58px}.hanging-crop img{left:-147px;top:-182px}

/* --- Source: hero-b2b.css --- */
/* ==========================================================================
   ECO.MI — B2B EXPORT STYLING (MODERN ROUNDED CURVES & B2B STORYTELLING)
   Inspired by International Corporate & Export Showcases
   Soft Rounded Borders (border-radius: 16px - 28px, Pills: 999px)
   ========================================================================== */

/* --- ROOT VARIABLES --- */
:root {
  --radius-pill: 999px;
  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --shadow-soft: 0 12px 36px rgba(28, 48, 30, 0.07);
  --shadow-card: 0 8px 24px rgba(28, 48, 30, 0.05);
}

/* --- HEADER B2B (MODERN LIGHT FROSTED THEO MẪU NỘI THẤT CAO CẤP) --- */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(220, 214, 201, 0.75);
  box-shadow: 0 4px 20px rgba(28, 48, 30, 0.05);
  transition: all 0.3s ease;
}

header.scrolled {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 8px 26px rgba(28, 48, 30, 0.09);
}

.nav-wrap {
  width: min(1280px, calc(100% - 60px));
  height: 84px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.logo:hover {
  transform: translateY(-1px);
}

.logo-img {
  height: 62px;
  width: auto;
  object-fit: contain;
  display: block;
}

.logo-footer {
  background: #ffffff;
  padding: 10px 18px;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  border: 1.5px solid #bfe2c8;
  display: inline-flex;
}

.logo-footer-img {
  height: 60px;
  width: auto;
  object-fit: contain;
  display: block;
}

@media (max-width: 640px) {
  .logo-img {
    height: 48px;
  }
  .logo-footer-img {
    height: 50px;
  }
}

nav {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

nav a {
  font-size: 13.5px;
  font-weight: 600;
  color: #2c3e2e;
  text-decoration: none;
  transition: color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
  position: relative;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
}

nav a::after,
nav .active::after {
  display: none !important;
  content: none !important;
}

nav a:hover {
  color: #124322;
  background: rgba(46, 125, 68, 0.08);
}

nav a.active {
  color: #124322;
  background: #dff2e4;
  border-color: #a8dbb4;
  font-weight: 700;
  box-shadow: 0 3px 10px rgba(46, 125, 68, 0.12);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.lang-switch {
  display: inline-flex;
  align-items: center;
  background: #f4efe6;
  padding: 3px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  border: 1px solid #e2dacd;
}

.lang-switch span {
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  color: #ffffff;
  background: #143d22;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.lang-switch button {
  background: none;
  border: none;
  padding: 4px 10px;
  color: #5c6f5e;
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--radius-pill);
  transition: all 0.2s;
}

.lang-switch button:hover {
  color: #143d22;
  background: rgba(20, 61, 34, 0.08);
}

.btn-rfq-nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 22px;
  background: linear-gradient(135deg, #2e7d44 0%, #164e29 100%);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  border-radius: var(--radius-pill);
  border: 1px solid #43a05b;
  transition: all 0.25s ease;
  text-decoration: none;
  box-shadow: 0 4px 15px rgba(46, 125, 68, 0.3);
}

.btn-rfq-nav:hover {
  background: linear-gradient(135deg, #388e52 0%, #1c5b30 100%);
  border-color: #52b788;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(46, 125, 68, 0.4);
}

/* ==========================================================================
   HERO INTERIOR DECOR — MÀU XANH LÁ CÂY TRE CHỦ ĐẠO & KHÔNG GIAN NỘI THẤT SANG TRỌNG
   Tông xanh lá cây tre (Bamboo Green: #2e7d44, #164e29, #43a05b) tươi tắn, thanh thoát
   ========================================================================== */
.hero-interior-decor {
  position: relative;
  min-height: calc(100vh - 80px);
  margin-top: 80px;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 60px 0 140px;
  background: linear-gradient(135deg, #dcf0e2 0%, #f0f7f2 45%, #e2f2e6 100%);
  border-bottom: 2px solid #bfe2c8;
}

/* KHUNG ẢNH NỘI THẤT BỐI CẢNH */
.hero-decor-backdrop {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  transition: opacity 0.5s ease, transform 0.6s ease;
}

/* LỚP GRADIENT ÁNH XANH LÁ TRE PHỦ TRONG VẮT BÊN TRÁI */
.hero-backdrop-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(224, 242, 228, 0.98) 0%,
    rgba(231, 245, 234, 0.95) 38%,
    rgba(238, 249, 241, 0.82) 56%,
    rgba(244, 252, 246, 0.35) 75%,
    transparent 100%
  );
  pointer-events: none;
}

/* CONTAINER NỘI DUNG */
.hero-interior-container {
  position: relative;
  z-index: 3;
}

.hero-interior-card {
  max-width: 620px;
  position: relative;
}

.hero-interior-card::before {
  content: '';
  position: absolute;
  top: -40px;
  left: -40px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(46, 125, 68, 0.14) 0%, rgba(82, 183, 136, 0.06) 50%, transparent 70%);
  filter: blur(40px);
  z-index: -1;
  pointer-events: none;
}

/* TAG LÁ CÂY TRE TƯƠI MÁT */
.hero-leaf-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border-radius: var(--radius-pill);
  border: 2px solid #2e7d44;
  background: #d4eed8;
  color: #124322;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  margin-bottom: 24px;
  box-shadow: 0 4px 14px rgba(46, 125, 68, 0.22);
}

.hero-leaf-badge .leaf-icon {
  font-size: 15px;
}

/* TIÊU ĐỀ LỚN MÀU XANH TRE THẪM & XANH LÁ TRE */
.hero-interior-title {
  font-family: var(--sans);
  font-size: 48px;
  font-weight: 850;
  line-height: 1.16;
  color: #124322;
  letter-spacing: -1.2px;
  margin: 0 0 20px 0;
  text-transform: uppercase;
}

.hero-interior-title .title-accent {
  color: inherit;
  position: relative;
  display: inline;
}

.hero-interior-title .title-accent::after {
  display: none !important;
  content: none !important;
}

/* ĐOẠN PHỤ ĐỀ */
.hero-interior-desc {
  font-size: 16px;
  line-height: 1.75;
  color: #38533e;
  margin: 0 0 32px 0;
  max-width: 530px;
  font-weight: 450;
}

/* HÀNG NÚT BẤM (CTA PILL) */
.hero-interior-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.btn-interior-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 32px;
  background: linear-gradient(135deg, #2e7d44 0%, #164e29 100%);
  color: #ffffff;
  font-size: 14.5px;
  font-weight: 700;
  border-radius: var(--radius-pill);
  text-decoration: none;
  border: 1.5px solid #43a05b;
  box-shadow: 0 8px 25px rgba(46, 125, 68, 0.35);
  transition: all 0.25s ease;
}

.btn-interior-primary:hover {
  background: linear-gradient(135deg, #388e52 0%, #1c5b30 100%);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(46, 125, 68, 0.45);
}

.btn-interior-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  padding: 0 28px;
  background: rgba(255, 255, 255, 0.96);
  color: #164e29;
  font-size: 14px;
  font-weight: 700;
  border-radius: var(--radius-pill);
  border: 2px solid #2e7d44;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.25s ease;
  box-shadow: 0 4px 15px rgba(46, 125, 68, 0.08);
}

.btn-interior-secondary:hover {
  background: #2e7d44;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(46, 125, 68, 0.3);
}

/* THANH CAM KẾT NỔI Ở ĐÁY HERO */
.hero-floating-trust-bar {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1240px, calc(100% - 40px));
  background: rgba(246, 253, 248, 0.98);
  backdrop-filter: blur(16px);
  border-radius: 20px;
  border: 2px solid #a8dbb4;
  box-shadow: 0 14px 40px rgba(18, 67, 34, 0.12);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 18px 24px;
  z-index: 4;
}

.trust-bar-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 4px 18px;
  border-right: 1px solid #c2e5cb;
}

.trust-bar-item:last-child {
  border-right: none;
}

.trust-icon {
  color: #2e7d44;
  background: #dff2e4;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #b8e3c3;
  flex-shrink: 0;
}

.trust-text strong {
  font-size: 13px;
  font-weight: 800;
  color: #124322;
  display: block;
  letter-spacing: 0.4px;
  line-height: 1.3;
}

.trust-text p {
  font-size: 11.5px;
  color: #385e42;
  margin: 3px 0 0 0;
  line-height: 1.35;
}

/* DIALOG XOAY 360° CHIẾC GIỎ */
#spin-360-dialog {
  border: 1px solid #dcd4c6;
  border-radius: 24px;
  padding: 30px;
  background: radial-gradient(ellipse at 50% 30%, #173b22 0%, #0d2415 100%);
  color: #ffffff;
  max-width: 580px;
  width: 90%;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
}

#spin-360-dialog::backdrop {
  background: rgba(10, 24, 14, 0.75);
  backdrop-filter: blur(8px);
}

.spin-dialog-content {
  text-align: center;
}

.dialog-badge {
  display: inline-block;
  background: rgba(242, 173, 56, 0.15);
  border: 1px solid rgba(242, 173, 56, 0.4);
  color: #f2ad38;
  padding: 5px 16px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.spin-dialog-content h2 {
  font-size: 26px;
  color: #f2ad38;
  margin: 0 0 8px;
}

.spin-dialog-content p {
  font-size: 13.5px;
  color: #cfdcce;
  margin: 0 auto 20px;
  max-width: 440px;
}

.spin-dialog-footer {
  margin-top: 25px;
}

/* SÂN KHẤU CHIẾC GIỎ XOAY 360 ĐỘ */
.basket-360-stage {
  perspective: 1200px;
  width: 380px;
  height: 330px;
  margin: 0 auto 15px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  user-select: none;
}

.turntable-disc {
  position: absolute;
  bottom: 25px;
  width: 310px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(46, 125, 68, 0.4) 0%, rgba(242, 173, 56, 0.25) 50%, transparent 75%);
  border: 1.5px solid rgba(242, 173, 56, 0.45);
  box-shadow: 0 0 35px rgba(46, 125, 68, 0.6), inset 0 0 20px rgba(242, 173, 56, 0.35);
  transform: rotateX(75deg);
  pointer-events: none;
  transition: transform 0.1s linear;
}

.basket-spinner {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  transition: transform 0.08s ease-out;
}

.basket-spinner img {
  max-width: 330px;
  max-height: 280px;
  object-fit: contain;
  filter: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.65));
  animation: basket-bob 4s ease-in-out infinite alternate;
  user-select: none;
  -webkit-user-drag: none;
}

@keyframes basket-bob {
  0% { transform: translateY(0px); }
  100% { transform: translateY(-10px); }
}

.spin-status-badge {
  position: absolute;
  bottom: 0px;
  background: rgba(14, 38, 20, 0.9);
  backdrop-filter: blur(8px);
  color: #f2ad38;
  border: 1px solid rgba(242, 173, 56, 0.4);
  padding: 5px 16px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  pointer-events: none;
}

@media (max-width: 960px) {
  .hero-interior-title {
    font-size: 36px;
  }
  .hero-floating-trust-bar {
    grid-template-columns: repeat(2, 1fr);
    position: static;
    transform: none;
    margin: 40px auto 0;
  }
  .trust-bar-item {
    border-right: none;
  }
}

/* --- THANH ĐỊNH LƯỢNG 4 CHỈ SỐ B2B (METRIC STATS BAR — GIỐNG ALEXA WH) --- */
.hero-metric-bar {
  background: #ffffff;
  border-radius: var(--radius-md);
  border: 1px solid #e4ddd0;
  box-shadow: 0 10px 30px rgba(31, 74, 43, 0.05);
  margin: 0 auto 35px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
  z-index: 4;
}

.metric-col {
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #eee8dc;
}

.metric-col:last-child {
  border-right: none;
}

.metric-number {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 600;
  color: var(--forest);
  line-height: 1.1;
  margin-bottom: 4px;
}

.metric-col strong {
  font-size: 13.5px;
  font-weight: 600;
  color: #2b3d2c;
  margin-bottom: 3px;
}

.metric-col p {
  font-size: 11.5px;
  color: #727f6e;
  line-height: 1.45;
  margin: 0;
}

/* --- DẢI CAM KẾT XUẤT KHẨU (EXPORT CAPABILITIES STRIP) --- */
.hero-export-strip {
  background: #f0ebe0;
  border-top: 1px solid #e3dcce;
  position: relative;
  z-index: 3;
}

.strip-container {
  width: min(1280px, calc(100% - 60px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.strip-col {
  padding: 22px 24px;
  border-right: 1px solid #e3dcce;
  display: flex;
  flex-direction: column;
}

.strip-col:last-child {
  border-right: none;
}

.strip-col-num {
  font-family: var(--serif);
  font-size: 13px;
  font-style: italic;
  color: var(--green);
  margin-bottom: 4px;
}

.strip-col h3 {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--forest);
  margin: 0 0 3px 0;
  letter-spacing: -0.2px;
}

.strip-col p {
  font-size: 11.5px;
  line-height: 1.5;
  color: #63705f;
  margin: 0;
}

/* ==========================================================================
   SECTION CÂU CHUYỆN KHÁCH HÀNG & DỰ ÁN THỰC TẾ (CUSTOMER STORIES & CASE STUDIES)
   GIỚI THIỆU SẢN PHẨM QUA LĂNG KÍNH CỦA KHÁCH HÀNG & ỨNG DỤNG THẬT
   ========================================================================== */

.customer-stories-section {
  padding: 95px 0 90px;
  background: #fdfbf7;
  border-bottom: 1px solid #e5dfd3;
}

.stories-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 55px;
}

.stories-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: #ede6d8;
  color: var(--forest);
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 16px;
  border: 1px solid #ded5c2;
}

.stories-header h2 {
  font-size: 40px;
  line-height: 1.25;
  color: var(--forest);
  margin-bottom: 16px;
  letter-spacing: -1px;
}

.stories-header h2 em {
  font-style: italic;
  color: var(--green);
}

.stories-header p {
  font-size: 15.5px;
  color: #5d6d5a;
  line-height: 1.75;
  margin: 0;
}

/* LƯỚI CÂU CHUYỆN KHÁCH HÀNG (CASE STUDY GRID) */
.stories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 50px;
}

.story-card {
  background: #ffffff;
  border-radius: var(--radius-md);
  border: 1px solid #e5ded2;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  transition: all 0.35s ease;
}

.story-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(31, 74, 43, 0.1);
  border-color: #cbd4c3;
}

.story-media {
  position: relative;
  height: 220px;
  overflow: hidden;
  background: #eee8da;
}

.story-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.story-card:hover .story-media img {
  transform: scale(1.05);
}

.story-category-pill {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(247, 244, 238, 0.95);
  backdrop-filter: blur(8px);
  color: var(--forest);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.story-body {
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.story-title {
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.35;
  color: var(--forest);
  margin: 0 0 12px 0;
  font-weight: 600;
}

.story-quote {
  font-size: 13.5px;
  font-style: italic;
  color: #3b4d3c;
  line-height: 1.7;
  margin-bottom: 16px;
  padding-left: 12px;
  border-left: 3px solid var(--green);
}

.story-desc {
  font-size: 13px;
  line-height: 1.65;
  color: #63705f;
  margin: 0 0 20px 0;
  flex-grow: 1;
}

/* THẺ SẢN PHẨM GẮN LIỀN VỚI CÂU CHUYỆN */
.story-product-tag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f7f3ea;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid #e7dfd0;
  margin-top: auto;
}

.story-product-tag div {
  display: flex;
  flex-direction: column;
}

.story-product-tag span {
  font-size: 10px;
  color: #7b8876;
  text-transform: uppercase;
  font-weight: 600;
}

.story-product-tag strong {
  font-size: 12.5px;
  color: var(--forest);
  font-weight: 600;
}

.story-product-tag button,
.story-product-tag a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  background: #ffffff;
  color: var(--forest);
  border: 1px solid #dcd4c3;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}

.story-product-tag button:hover,
.story-product-tag a:hover {
  background: var(--forest);
  color: #ffffff;
  border-color: var(--forest);
}

/* CÂU CHUYỆN THỢ THỦ CÔNG & CỘNG ĐỒNG (ARTISAN BANNER) */
.artisan-story-banner {
  background: linear-gradient(135deg, #1f4a2b 0%, #153820 100%);
  border-radius: var(--radius-lg);
  padding: 42px 48px;
  color: var(--cream);
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 40px;
  align-items: center;
  box-shadow: 0 16px 40px rgba(18, 48, 25, 0.15);
}

.artisan-banner-content h3 {
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1.3;
  color: #ffffff;
  margin-bottom: 14px;
  font-weight: 500;
}

.artisan-banner-content p {
  font-size: 14.5px;
  line-height: 1.8;
  color: #d1dcce;
  margin-bottom: 22px;
}

.artisan-pills {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.artisan-pill-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.1);
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  color: #e5ede2;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.artisan-banner-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}

.btn-story-talk {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--cream);
  color: var(--forest);
  height: 50px;
  padding: 0 28px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

.btn-story-talk:hover {
  background: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.2);
}

/* --- BO TRÒN TOÀN BỘ CÁC NÚT VÀ CARD KHÁC TRÊN TRANG --- */
.product-card {
  border-radius: var(--radius-md) !important;
}

.product-visual {
  border-radius: var(--radius-md) !important;
}

.button {
  border-radius: var(--radius-pill) !important;
}

.custom-options span {
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.1);
  padding: 6px 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  text-align: center;
}

.timeline li .step-number {
  border-radius: 50% !important;
}

.partner-placeholder {
  border-radius: var(--radius-pill) !important;
}

/* --- RESPONSIVE OPTIMIZATION --- */
@media (max-width: 1080px) {
  .hero-b2b h1 {
    font-size: 38px;
  }
  .hero-b2b-grid {
    grid-template-columns: 1.1fr 0.9fr;
    gap: 36px;
  }
  .stage-podium {
    height: 480px;
  }
  .floating-spec-card {
    left: 10px;
    bottom: 15px;
  }
  .hero-metric-bar {
    grid-template-columns: repeat(2, 1fr);
  }
  .metric-col:nth-child(2) {
    border-right: none;
  }
  .metric-col:nth-child(-n+2) {
    border-bottom: 1px solid #eee8dc;
  }
  .stories-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .artisan-story-banner {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .artisan-banner-cta {
    align-items: flex-start;
  }
}

@media (max-width: 860px) {
  .hero-b2b {
    padding-top: 110px;
  }
  .hero-b2b-grid {
    grid-template-columns: 1fr;
    gap: 40px;
    min-height: auto;
  }
  .hero-b2b-desc {
    max-width: 100%;
  }
  .hero-b2b-stage {
    order: -1;
  }
  .stage-podium {
    height: 380px;
  }
  .stage-product-img {
    max-height: 310px;
  }
  .floating-interior-badge {
    top: -10px;
    right: 10px;
    width: 120px;
  }
  .floating-interior-badge img {
    height: 75px;
  }
  .floating-spec-card {
    left: 10px;
    bottom: 10px;
    padding: 12px 16px;
  }
  .strip-container {
    grid-template-columns: repeat(2, 1fr);
  }
  .strip-col:nth-child(2) {
    border-right: none;
  }
  .strip-col:nth-child(-n+2) {
    border-bottom: 1px solid #e3dcce;
  }
  .stories-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .nav-wrap {
    width: calc(100% - 32px);
    height: 68px;
  }
  .logo {
    font-size: 26px;
  }
  .btn-rfq-nav {
    display: none;
  }
  .hero-b2b h1 {
    font-size: 31px;
    letter-spacing: -0.8px;
  }
  .hero-b2b-desc {
    font-size: 14px;
  }
  .hero-b2b-pillars {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .hero-b2b-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .btn-primary-rfq,
  .btn-secondary-catalog {
    width: 100%;
    height: 48px;
  }
  .stage-podium {
    height: 290px;
    border-radius: var(--radius-md);
  }
  .stage-product-img {
    max-height: 230px;
  }
  .floating-interior-badge {
    display: none;
  }
  .floating-spec-card {
    position: static;
    margin-top: 15px;
    max-width: 100%;
    box-shadow: none;
  }
  .hero-metric-bar {
    grid-template-columns: 1fr;
  }
  .metric-col {
    border-right: none;
    border-bottom: 1px solid #eee8dc;
    padding: 18px 20px;
  }
  .metric-col:last-child {
    border-bottom: none;
  }
  .strip-container {
    grid-template-columns: 1fr;
  }
  .strip-col {
    border-right: none;
    border-bottom: 1px solid #e3dcce;
    padding: 16px 20px;
  }
  .strip-col:last-child {
    border-bottom: none;
  }
  .artisan-story-banner {
    padding: 28px 22px;
  }
}


/* ==========================================================================
   SECTION CÂU CHUYỆN THƯƠNG HIỆU ECO.MI (PHONG CÁCH SÁNG XANH TRE TỰ NHIÊN)
   Bố cục 2 cột: Trái là ảnh dây đan giỏ nghệ thuật, Phải là câu chuyện & giá trị
   Màu chủ đạo: Xanh lá cây tre (Bamboo Green) đặc trưng thương hiệu
   ========================================================================== */
.brand-story-section {
  background: linear-gradient(155deg, #eaf6ed 0%, #f4faf6 48%, #e3f3e7 100%);
  color: #1a3d24;
  padding: 105px 0 100px;
  border-top: 2px solid #bfe2c8;
  border-bottom: 2px solid #bfe2c8;
  position: relative;
  overflow: hidden;
}

.brand-story-section::before {
  content: '';
  position: absolute;
  top: -100px;
  left: -80px;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(67, 160, 91, 0.14) 0%, transparent 70%);
  filter: blur(50px);
  pointer-events: none;
}

.brand-story-section::after {
  content: '';
  position: absolute;
  bottom: -80px;
  right: -50px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(46, 125, 68, 0.12) 0%, transparent 70%);
  filter: blur(50px);
  pointer-events: none;
}

.brand-story-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 70px;
  align-items: center;
  position: relative;
  z-index: 2;
}

/* CỘT TRÁI: KHUNG NGHỆ THUẬT HÌNH CÁNH LÁ / HỮU CƠ & ẢNH SỢI DÂY GIẤY ĐAN */
.story-artistic-visual {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}

.story-leaf-frame {
  width: 100%;
  height: 490px;
  border-radius: 40% 60% 55% 45% / 45% 45% 55% 55%;
  overflow: hidden;
  box-shadow: 0 22px 50px rgba(22, 78, 41, 0.2);
  border: 6px solid #ffffff;
  outline: 3.5px solid #2e7d44;
  background: #dff0e3;
  position: relative;
  transition: all 0.4s ease;
}

.story-artistic-visual:hover .story-leaf-frame {
  border-radius: 46% 54% 52% 48% / 48% 46% 54% 52%;
  box-shadow: 0 28px 60px rgba(22, 78, 41, 0.26);
  outline-color: #388e52;
}

.story-leaf-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  transition: transform 0.6s ease;
}

.story-artistic-visual:hover .story-leaf-frame img {
  transform: scale(1.05);
}

/* KHUNG PHỤ TRÒN LỒNG GHÉP ẢNH SẢN PHẨM HOÀN THIỆN */
.story-circle-inset {
  position: absolute;
  bottom: -22px;
  right: -22px;
  width: 195px;
  height: 195px;
  border-radius: 50%;
  overflow: hidden;
  border: 5px solid #ffffff;
  outline: 3px solid #2e7d44;
  box-shadow: 0 16px 38px rgba(22, 78, 41, 0.22);
  background: #ffffff;
  z-index: 2;
  transition: transform 0.4s ease, outline-color 0.3s ease;
}

.story-artistic-visual:hover .story-circle-inset {
  transform: scale(1.06) translateY(-4px);
  outline-color: #388e52;
}

.story-circle-inset img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.story-craft-tag {
  position: absolute;
  top: 18px;
  left: 10px;
  background: linear-gradient(135deg, #2e7d44 0%, #164e29 100%);
  border: 1.5px solid #52b788;
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 800;
  padding: 7px 18px;
  border-radius: var(--radius-pill);
  box-shadow: 0 6px 18px rgba(22, 78, 41, 0.35);
  z-index: 3;
  letter-spacing: 0.6px;
}

/* CỘT PHẢI: NỘI DUNG CÂU CHUYỆN (CHUẨN FORM MẪU EURO FARM) */
.brand-story-content {
  display: flex;
  flex-direction: column;
}

.story-category-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #d4edd8;
  border: 2px solid #2e7d44;
  color: #124322;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px 18px;
  border-radius: var(--radius-pill);
  width: fit-content;
  margin-bottom: 16px;
  box-shadow: 0 4px 12px rgba(46, 125, 68, 0.15);
}

.story-leaf-icon {
  font-size: 15px;
}

.brand-story-heading {
  font-family: var(--sans);
  font-size: 38px;
  font-weight: 850;
  line-height: 1.25;
  color: #124322;
  letter-spacing: -0.8px;
  margin: 0 0 20px 0;
}

.story-heading-accent {
  color: inherit;
  position: relative;
  display: inline;
}

.story-heading-accent::after {
  display: none !important;
  content: none !important;
}

.brand-story-paragraph {
  font-size: 15.5px;
  line-height: 1.8;
  color: #2b5435;
  margin: 0 0 16px 0;
}

.brand-story-paragraph strong {
  color: #124322;
  font-weight: 750;
}

/* 2 KHỐI NỔI BẬT THEO FORM MẪU */
.story-features-row {
  display: flex;
  gap: 18px;
  margin: 24px 0 32px;
}

.story-feature-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 20px;
  background: #ffffff;
  border: 1.5px solid #a8dbb4;
  border-radius: 16px;
  flex: 1;
  box-shadow: 0 6px 18px rgba(22, 78, 41, 0.08);
  transition: all 0.25s ease;
}

.story-feature-item:hover {
  border-color: #2e7d44;
  background: #f0faf3;
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(22, 78, 41, 0.14);
}

.feature-item-icon {
  color: #2e7d44;
  background: #dff2e4;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #b8e3c3;
  flex-shrink: 0;
}

.feature-item-text strong {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: #124322;
  margin-bottom: 3px;
}

.feature-item-text small {
  display: block;
  font-size: 12px;
  color: #416b4b;
}

/* HÀNG NÚT BẤM VÀ LIÊN HỆ THEO MẪU */
.story-action-group {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.btn-story-explore {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 32px;
  background: linear-gradient(135deg, #2e7d44 0%, #164e29 100%);
  color: #ffffff;
  font-size: 14.5px;
  font-weight: 700;
  border-radius: var(--radius-pill);
  text-decoration: none;
  border: 1.5px solid #43a05b;
  box-shadow: 0 8px 24px rgba(46, 125, 68, 0.35);
  transition: all 0.25s ease;
}

.btn-story-explore:hover {
  background: linear-gradient(135deg, #388e52 0%, #1c5b30 100%);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(46, 125, 68, 0.45);
}

.btn-story-explore .btn-arrow {
  font-size: 16px;
  transition: transform 0.2s ease;
}

.btn-story-explore:hover .btn-arrow {
  transform: translateX(4px);
}

.story-hotline-box {
  display: flex;
  align-items: center;
  gap: 14px;
}

.hotline-icon {
  font-size: 22px;
  color: #2e7d44;
  background: #d4edd8;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #a8dbb4;
  flex-shrink: 0;
}

.hotline-text span {
  display: block;
  font-size: 12px;
  color: #416b4b;
  font-weight: 600;
}

.hotline-text strong {
  display: block;
  font-size: 17px;
  font-weight: 800;
  color: #ea9624;
  letter-spacing: 0.3px;
}

@media (max-width: 960px) {
  .brand-story-grid {
    grid-template-columns: 1fr;
    gap: 45px;
  }
  .brand-story-heading {
    font-size: 30px;
  }
  .story-features-row {
    flex-direction: column;
    gap: 12px;
  }
  .story-leaf-frame {
    height: 380px;
  }
  .story-circle-inset {
    width: 140px;
    height: 140px;
    right: 0;
    bottom: -15px;
  }
}



/* ==========================================================================
   SECTION SẢN PHẨM NỔI BẬT (ĐỒNG BỘ PHONG CÁCH B2B XANH LÁ CÂY TRE)
   Card bo tròn sang trọng, hình ảnh sạch nét, thông số rõ ràng & nút bấm đồng bộ
   ========================================================================== */
.products-b2b-section {
  background: linear-gradient(180deg, #f5faf6 0%, #ffffff 50%, #edf7f0 100%);
  padding: 100px 0 105px;
  border-bottom: 2px solid #bfe2c8;
  position: relative;
}

.products-b2b-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-bottom: 52px;
}

.products-header-left {
  flex-shrink: 0;
}

.products-b2b-heading {
  font-family: var(--sans);
  font-size: 40px;
  font-weight: 850;
  line-height: 1.2;
  color: #124322;
  letter-spacing: -0.9px;
  margin: 0;
}

.products-header-desc {
  max-width: 520px;
  font-size: 15px;
  line-height: 1.75;
  color: #355c3e;
  margin: 0;
}

.product-grid-b2b {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

/* THIẾT KẾ CARD THEO ẢNH 1 & ẢNH 2 */
.product-card-b2b {
  background: #f7f5f0;
  border-radius: 16px;
  border: 1px solid #e5e0d6;
  box-shadow: 0 6px 20px rgba(28, 48, 30, 0.04);
  padding: 12px 12px 22px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  height: 420px;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease;
}

.product-card-b2b:hover {
  transform: translateY(-6px);
  border-color: #d5ccbe;
  box-shadow: 0 16px 38px rgba(28, 48, 30, 0.1);
}

/* KHUNG ẢNH TRẮNG VUÔNG VỨC THEO ẢNH 1 — KHÔNG BO TRÒN ẢNH */
.product-visual-b2b {
  position: relative;
  height: 315px;
  background: #ffffff;
  border-radius: 8px;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  flex-shrink: 0;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.product-visual-b2b.is-lifestyle {
  padding: 0;
}

.product-visual-b2b img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 0 !important;
  display: block;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.product-visual-b2b.is-lifestyle img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  border-radius: 0 !important;
}

.product-card-b2b:hover .product-visual-b2b img {
  transform: translateY(-8px) scale(1.02);
}

/* NỘI DUNG THÔNG TIN & HIỆU ỨNG TRƯỢT TỪ DƯỚI LÊN THEO ẢNH 2 */
.product-info-b2b {
  padding: 24px 10px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex-grow: 1;
  background: #f7f5f0;
  position: relative;
  z-index: 2;
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

.product-card-b2b:hover .product-info-b2b {
  transform: translateY(-56px);
}

.product-info-b2b h3 {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 500;
  color: #242424;
  margin: 0 0 10px 0;
  line-height: 1.35;
  cursor: pointer;
  transition: color 0.2s ease;
}

.product-info-b2b h3:hover {
  color: #124322;
}

/* GIÁ TIỀN CHỮ ĐỎ ĐẬM THEO ẢNH 1 & ẢNH 2 */
.product-price-b2b {
  font-family: var(--sans);
  font-size: 23px;
  font-weight: 750;
  color: #d61c0f;
  line-height: 1.15;
  margin: 0;
}

.product-price-b2b u {
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 700;
}

/* HÀNG NÚT BẤM (THÊM VÀO GIỎ + YÊU THÍCH) TRƯỢT TỪ DƯỚI LÊN KHI HOVER THEO ẢNH 2 */
.product-hover-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 18px;
  opacity: 0;
  transform: translateY(28px);
  pointer-events: none;
  transition: opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1), transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

.product-card-b2b:hover .product-hover-actions {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* NÚT THÊM VÀO GIỎ MÀU NÂU CARAMEL THEO ẢNH 2 */
.btn-add-cart, .btn-contact-now {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 24px;
  border-radius: var(--radius-pill);
  border: none;
  background: #c58b4e;
  color: #ffffff;
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(197, 139, 78, 0.35);
  transition: all 0.22s ease;
  white-space: nowrap;
}

.btn-add-cart:hover, .btn-contact-now:hover {
  background: #b3793c;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(197, 139, 78, 0.45);
}

.btn-add-cart:active, .btn-contact-now:active {
  transform: translateY(1px);
}

.btn-add-cart svg, .btn-contact-now svg {
  flex-shrink: 0;
}

/* NÚT YÊU THÍCH TRÒN MÀU VÀNG CAM THEO ẢNH 2 */
.btn-wishlist {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: #ffaa1d;
  color: #222222;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(255, 170, 29, 0.35);
  transition: all 0.22s ease;
  flex-shrink: 0;
}

.btn-wishlist:hover {
  background: #f09a0a;
  transform: translateY(-1px) scale(1.06);
  box-shadow: 0 6px 18px rgba(255, 170, 29, 0.45);
}

.btn-wishlist:active {
  transform: translateY(1px) scale(0.96);
}

.btn-wishlist.active {
  background: #e63946;
  color: #ffffff;
}

.btn-wishlist.active svg {
  fill: currentColor;
}

.btn-product-quote .btn-arrow {
  transition: transform 0.2s ease;
}

.btn-product-quote:hover .btn-arrow {
  transform: translateX(3px);
}

/* DIALOG CHI TIẾT SẢN PHẨM ĐỒNG BỘ B2B */
#product-dialog {
  width: min(760px, calc(100% - 32px));
  background: #ffffff;
  color: #124322;
  border: 2px solid #a8dbb4;
  border-radius: 24px;
  padding: 32px;
  box-shadow: 0 28px 80px rgba(14, 45, 23, 0.35);
}

.dialog-b2b-layout {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 28px;
  align-items: center;
}

.dialog-img-box {
  background: radial-gradient(circle, #ffffff 0%, #eaf6ed 100%);
  border: 1.5px solid #bfe2c8;
  border-radius: 18px;
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow: hidden;
}

.dialog-img-box img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 12px;
}

.dialog-info-box h2 {
  font-family: var(--sans);
  font-size: 28px;
  font-weight: 850;
  color: #124322;
  margin: 6px 0 10px;
}

.dialog-info-box p {
  font-size: 14px;
  line-height: 1.65;
  color: #355c3e;
  margin: 0 0 16px;
}

.dialog-info-box dl {
  margin: 0 0 20px;
}

.dialog-info-box dl div {
  display: grid;
  grid-template-columns: 125px 1fr;
  padding: 10px 0;
  border-top: 1px solid #dff0e3;
  font-size: 13px;
}

.dialog-info-box dt {
  font-weight: 800;
  color: #124322;
}

.dialog-info-box dd {
  margin: 0;
  color: #355c3e;
}

.dialog-cta-full {
  width: 100%;
  height: 48px;
}

@media (max-width: 960px) {
  .products-b2b-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .product-grid-b2b {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .dialog-b2b-layout {
    grid-template-columns: 1fr;
  }
  .dialog-img-box {
    height: 240px;
  }
}


/* ==========================================================================
   SECTION ĐỐI TÁC & SỰ KIỆN GIAO THƯƠNG QUỐC TẾ (MALAYSIA & SINGAPORE)
   Tích hợp 2 nút mũi tên chuyển ảnh trái/phải & hiệu ứng chuyển tiếp mượt mà
   ========================================================================== */
.partner-event-section {
  padding: 95px 0 90px;
  background: linear-gradient(160deg, #edf7f0 0%, #f7fbf8 50%, #e6f4ea 100%);
  border-bottom: 2px solid #bfe2c8;
}

.partner-event-header {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 50px;
}

.partner-event-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 20px;
  background: #d4edd8;
  color: #124322;
  border-radius: var(--radius-pill);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  margin-bottom: 16px;
  border: 2px solid #2e7d44;
  box-shadow: 0 4px 12px rgba(46, 125, 68, 0.15);
}

.partner-event-header h2 {
  font-family: var(--sans);
  font-size: 38px;
  font-weight: 850;
  line-height: 1.26;
  color: #124322;
  margin-bottom: 16px;
  letter-spacing: -0.8px;
}

.partner-event-header h2 em {
  font-style: normal;
  color: inherit;
  text-decoration: none;
}

.partner-event-header p {
  font-size: 15.5px;
  color: #2f5738;
  line-height: 1.75;
  margin: 0;
}

.partner-event-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 45px;
  align-items: start;
}

/* KHUNG ẢNH CHÍNH (MAIN SPOTLIGHT FRAME) + HIỆU ỨNG CHUYỂN TIẾP */
.partner-gallery {
  display: flex;
  flex-direction: column;
}

.gallery-main-frame {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(18, 67, 34, 0.2);
  border: 5px solid #ffffff;
  outline: 2.5px solid #2e7d44;
  background: #0d2214;
  height: 480px;
  user-select: none;
}

.gallery-main-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
  transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1), transform 0.52s cubic-bezier(0.22, 1, 0.36, 1), filter 0.42s ease;
  will-change: opacity, transform;
}

/* HIỆU ỨNG CHUYỂN TIẾP THEO HƯỚNG TRÁI / PHẢI */
.gallery-main-frame img.slide-out-left {
  opacity: 0;
  transform: translateX(-36px) scale(0.97);
  filter: blur(3px);
}

.gallery-main-frame img.slide-out-right {
  opacity: 0;
  transform: translateX(36px) scale(0.97);
  filter: blur(3px);
}

.gallery-main-frame img.slide-in-from-right {
  animation: gallerySlideInRight 0.48s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.gallery-main-frame img.slide-in-from-left {
  animation: gallerySlideInLeft 0.48s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes gallerySlideInRight {
  0% {
    opacity: 0;
    transform: translateX(36px) scale(1.03);
    filter: blur(3px);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
  }
}

@keyframes gallerySlideInLeft {
  0% {
    opacity: 0;
    transform: translateX(-36px) scale(1.03);
    filter: blur(3px);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
  }
}

/* 2 NÚT MŨI TÊN CHUYỂN ẢNH TRÁI & PHẢI */
.gallery-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(14, 42, 22, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid rgba(168, 219, 180, 0.85);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.gallery-nav-btn.prev {
  left: 16px;
}

.gallery-nav-btn.next {
  right: 16px;
}

.gallery-nav-btn:hover {
  background: #2e7d44;
  border-color: #ffffff;
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 8px 25px rgba(46, 125, 68, 0.55);
}

.gallery-nav-btn:active {
  transform: translateY(-50%) scale(0.95);
}

/* BỘ ĐẾM SỐ THỨ TỰ ẢNH (01 / 04) */
.gallery-slide-counter {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(14, 38, 20, 0.88);
  backdrop-filter: blur(10px);
  color: #d4edd8;
  border: 1px solid rgba(168, 219, 180, 0.5);
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 1px;
  z-index: 4;
}

.event-media-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  max-width: calc(100% - 110px);
  background: rgba(14, 38, 20, 0.92);
  backdrop-filter: blur(10px);
  color: #f2ad38;
  border: 1px solid rgba(242, 173, 56, 0.45);
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35);
  z-index: 4;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.event-media-badge.text-transition,
.gallery-caption.text-transition {
  opacity: 0;
  transform: translateY(6px);
}

.gallery-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(7, 24, 12, 0.96) 0%, rgba(7, 24, 12, 0.78) 65%, transparent 100%);
  color: #f7f3ec;
  font-size: 13.5px;
  line-height: 1.55;
  padding: 36px 22px 20px;
  font-family: var(--sans);
  z-index: 3;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* THANH TIẾN TRÌNH CHUYỂN ẢNH Ở ĐÁY KHUNG */
.gallery-progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: rgba(255, 255, 255, 0.18);
  z-index: 5;
}

.gallery-progress-fill {
  height: 100%;
  width: 25%;
  background: linear-gradient(90deg, #52b788, #f2ad38);
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* CÁC THUMBNAIL CHỌN XEM NHANH (MINI SELECTORS) */
.gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 16px;
}

.thumb-btn {
  background: #ffffff;
  border: 2px solid #c5e3cc;
  border-radius: 14px;
  padding: 6px;
  cursor: pointer;
  text-align: left;
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.thumb-btn:hover {
  border-color: #2e7d44;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(46, 125, 68, 0.14);
}

.thumb-btn.active {
  border-color: #2e7d44;
  background: #eaf6ed;
  box-shadow: 0 0 0 3px rgba(46, 125, 68, 0.22);
}

.thumb-btn img {
  width: 100%;
  height: 64px;
  object-fit: cover;
  border-radius: 9px;
  display: block;
}

.thumb-tag {
  font-size: 11px;
  font-weight: 750;
  color: #164e29;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 3px 2px;
  line-height: 1.2;
}

.thumb-btn.active .thumb-tag {
  color: #124322;
  font-weight: 850;
}

/* CỘT PHẢI CHI TIẾT */
.partner-event-content {
  display: flex;
  flex-direction: column;
}

.event-feature-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 26px;
}

.event-feature-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: #ffffff;
  padding: 18px 20px;
  border-radius: 16px;
  border: 1.5px solid #bfe2c8;
  box-shadow: 0 6px 18px rgba(18, 67, 34, 0.05);
  transition: all 0.25s ease;
}

.event-feature-item:hover {
  transform: translateX(4px);
  border-color: #2e7d44;
  box-shadow: 0 10px 24px rgba(46, 125, 68, 0.12);
}

.event-feature-icon {
  color: #2e7d44;
  flex-shrink: 0;
  background: #eaf6ed;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #bfe2c8;
}

.event-feature-text h3 {
  font-family: var(--sans);
  font-size: 15.5px;
  font-weight: 800;
  color: #124322;
  margin: 0 0 4px 0;
}

.event-feature-text p {
  font-size: 13.5px;
  line-height: 1.65;
  color: #355c3e;
  margin: 0;
}

.partner-cta-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.btn-event-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  padding: 0 32px;
  background: linear-gradient(135deg, #2e7d44 0%, #164e29 100%);
  border: 1.5px solid #43a05b;
  color: #ffffff;
  font-size: 14.5px;
  font-weight: 750;
  border-radius: var(--radius-pill);
  text-decoration: none;
  align-self: flex-start;
  transition: all 0.25s ease;
  box-shadow: 0 8px 24px rgba(46, 125, 68, 0.3);
}

.btn-event-cta:hover {
  background: linear-gradient(135deg, #388e52 0%, #1c5b30 100%);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(46, 125, 68, 0.42);
}

.partner-guarantee {
  font-size: 13px;
  color: #164e29;
  font-weight: 700;
}

@media (max-width: 960px) {
  .partner-event-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  .gallery-main-frame {
    height: 380px;
  }

  .gallery-nav-btn {
    width: 42px;
    height: 42px;
  }

  .gallery-thumbs {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* KHUNG ẢNH QUY TRÌNH THỰC TẾ TRONG MỤC CHẤT LIỆU & TAY NGHỀ */
.craft-placeholder.craft-process-photo {
  padding: 0;
  border-radius: 12px;
  border: 7px solid var(--cream);
  overflow: hidden;
  box-shadow: 0 16px 36px rgba(31, 74, 43, 0.16);
}
.craft-placeholder.craft-process-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.craft-placeholder.craft-process-photo:hover img {
  transform: scale(1.06);
}
.craft-placeholder.craft-process-photo .process-tag {
  bottom: 10px;
  left: 10px;
  font-size: 10px;
  font-weight: 600;
  background: rgba(247, 242, 232, 0.95);
  color: #1f4a2b;
  border-radius: 4px;
  padding: 4px 8px;
}

/* ==========================================================================
   MOBILE & TABLET RESPONSIVE PERFECTION (MAX-WIDTH: 960PX, 768PX, 480PX)
   Tránh giật lag, chống tràn ngang (overflow-x), tối ưu cảm ứng và hiển thị
   ========================================================================== */

/* Chống hoàn toàn lỗi tràn màn hình ngang khi vuốt trên điện thoại */
html, body {
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100vw !important;
  -webkit-text-size-adjust: 100%;
}

* {
  box-sizing: border-box;
}

@media (max-width: 640px) {
  .container {
    width: calc(100% - 30px) !important;
  }
}

/* --- TỐI ƯU HEADER TRÊN TABLET & DI ĐỘNG (<= 960PX) --- */
@media (max-width: 960px) {
  header {
    background: rgba(255, 255, 255, 0.98) !important;
  }

  .nav-wrap {
    height: 72px !important;
    width: calc(100% - 30px) !important;
    gap: 12px !important;
  }

  .logo-img {
    height: 46px !important;
  }

  .menu-button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #eaf6ed;
    color: #124322;
    border: 1.5px solid #bfe2c8;
    font-size: 22px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    line-height: 1;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  .menu-button:active {
    background: #d4edd8;
    transform: scale(0.95);
  }

  nav {
    display: none !important;
    position: fixed !important;
    top: 72px !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-height: calc(100vh - 72px) !important;
    overflow-y: auto !important;
    background: #ffffff !important;
    padding: 18px 20px 28px !important;
    border-bottom: 2px solid #bfe2c8 !important;
    box-shadow: 0 18px 40px rgba(18, 67, 34, 0.18) !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    z-index: 99 !important;
  }

  nav.open {
    display: flex !important;
    animation: mobileNavSlide 0.28s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }

  @keyframes mobileNavSlide {
    from {
      opacity: 0;
      transform: translateY(-12px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  nav a {
    display: block !important;
    width: 100% !important;
    padding: 12px 18px !important;
    font-size: 15px !important;
    font-weight: 650 !important;
    color: #1a3821 !important;
    border-radius: 12px !important;
    background: #f7faf8 !important;
    border: 1px solid #e1efe4 !important;
    text-align: left !important;
  }

  nav a:hover,
  nav a.active {
    background: #dff2e4 !important;
    color: #124322 !important;
    border-color: #a8dbb4 !important;
    box-shadow: none !important;
  }

  .btn-rfq-mobile {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    background: linear-gradient(135deg, #2e7d44 0%, #164e29 100%) !important;
    color: #ffffff !important;
    font-weight: 750 !important;
    font-size: 14.5px !important;
    border-radius: 12px !important;
    margin-top: 6px !important;
    border: 1px solid #43a05b !important;
    box-shadow: 0 4px 14px rgba(46, 125, 68, 0.3) !important;
    text-align: center !important;
  }
}

/* TỐI ƯU HEADER CHO ĐIỆN THOẠI (<= 640PX) */
@media (max-width: 640px) {
  .nav-wrap {
    height: 66px !important;
    width: calc(100% - 24px) !important;
  }

  nav {
    top: 66px !important;
    max-height: calc(100vh - 66px) !important;
  }

  .logo-img {
    height: 40px !important;
  }

  .btn-rfq-nav {
    display: none !important; /* Đã có nút to đẹp trong menu kéo xuống */
  }

  .lang-switch {
    padding: 2px !important;
    font-size: 10.5px !important;
  }

  .lang-switch span,
  .lang-switch button {
    padding: 3px 7px !important;
  }
}

/* --- TỐI ƯU HERO SECTION (<= 960PX & <= 640PX) --- */
@media (max-width: 960px) {
  .hero-interior-decor {
    margin-top: 72px !important;
    padding: 36px 0 45px !important;
    min-height: auto !important;
  }

  .hero-interior-title {
    font-size: 32px !important;
    line-height: 1.22 !important;
    letter-spacing: -0.6px !important;
  }

  .hero-floating-trust-bar {
    grid-template-columns: repeat(2, 1fr) !important;
    position: static !important;
    transform: none !important;
    margin: 32px 0 0 !important;
    width: 100% !important;
    padding: 16px !important;
  }
}

@media (max-width: 640px) {
  .hero-interior-decor {
    margin-top: 66px !important;
    padding: 26px 0 35px !important;
  }

  .hero-interior-card {
    max-width: 100% !important;
  }

  .hero-interior-card::before {
    display: none !important;
  }

  .hero-leaf-badge {
    padding: 6px 14px !important;
    font-size: 10px !important;
    margin-bottom: 14px !important;
  }

  .hero-interior-title {
    font-size: 24px !important;
    line-height: 1.25 !important;
    margin-bottom: 12px !important;
    letter-spacing: -0.4px !important;
  }

  .hero-interior-desc {
    font-size: 13.5px !important;
    line-height: 1.65 !important;
    margin-bottom: 20px !important;
  }

  .hero-interior-actions {
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
    margin-bottom: 0 !important;
  }

  .btn-interior-primary,
  .btn-interior-secondary {
    width: 100% !important;
    justify-content: center !important;
    height: 48px !important;
    padding: 0 18px !important;
    font-size: 13.5px !important;
  }

  .hero-floating-trust-bar {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 12px !important;
    border-radius: 16px !important;
    margin-top: 28px !important;
  }

  .trust-bar-item {
    border-right: none !important;
    border-bottom: 1px solid #c2e5cb !important;
    padding: 8px 4px 10px !important;
  }

  .trust-bar-item:last-child {
    border-bottom: none !important;
  }

  .trust-icon {
    width: 38px !important;
    height: 38px !important;
  }

  .trust-text strong {
    font-size: 12px !important;
  }

  .trust-text p {
    font-size: 11px !important;
  }
}

/* --- TỐI ƯU CÂU CHUYỆN THƯƠNG HIỆU (<= 960PX & <= 640PX) --- */
@media (max-width: 960px) {
  .brand-story-grid {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  .story-artistic-visual {
    max-width: 420px !important;
  }

  .story-leaf-frame {
    height: 330px !important;
  }

  .story-circle-inset {
    width: 130px !important;
    height: 130px !important;
    bottom: -15px !important;
    right: -10px !important;
  }
}

@media (max-width: 640px) {
  .brand-story-heading {
    font-size: 24px !important;
    line-height: 1.3 !important;
  }

  .brand-story-paragraph {
    font-size: 13.5px !important;
    line-height: 1.68 !important;
  }

  .story-artistic-visual {
    max-width: 100% !important;
  }

  .story-leaf-frame {
    height: 260px !important;
    border-radius: 24px !important;
  }

  .story-circle-inset {
    width: 100px !important;
    height: 100px !important;
    bottom: -8px !important;
    right: 0px !important;
    border-width: 3px !important;
  }

  .story-features-row {
    flex-direction: column !important;
    gap: 10px !important;
    margin: 16px 0 22px !important;
  }

  .story-feature-item {
    padding: 12px 14px !important;
  }

  .story-action-group {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
  }

  .btn-story-explore {
    width: 100% !important;
    justify-content: center !important;
    height: 48px !important;
  }

  .story-hotline-box {
    justify-content: center !important;
  }
}

/* --- TỐI ƯU SẢN PHẨM NỔI BẬT TRÊN TABLET & CẢM ỨNG DI ĐỘNG --- */
@media (max-width: 960px) and (min-width: 641px) {
  .product-grid-b2b {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
}

@media (max-width: 640px) {
  .products-b2b-section {
    padding: 45px 0 50px !important;
  }

  .products-b2b-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-bottom: 24px !important;
  }

  .products-b2b-heading {
    font-size: 26px !important;
  }

  .products-header-desc {
    font-size: 13.5px !important;
    line-height: 1.65 !important;
  }

  .product-grid-b2b {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    max-width: 360px !important;
    margin: 0 auto !important;
  }

  /* Trên điện thoại cảm ứng: các nút Thêm vào giỏ & Yêu thích luôn hiển thị sẵn sàng */
  .product-card-b2b {
    height: auto !important;
    min-height: auto !important;
    padding: 10px 10px 16px !important;
  }

  .product-visual-b2b {
    height: 250px !important;
    padding: 14px !important;
  }

  .product-info-b2b {
    transform: none !important;
    padding: 14px 4px 0 !important;
  }

  .product-info-b2b h3 {
    font-size: 16px !important;
    margin-bottom: 5px !important;
  }

  .product-price-b2b {
    font-size: 20px !important;
  }

  .product-hover-actions {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    margin-top: 12px !important;
    width: 100% !important;
  }

  .btn-add-cart, .btn-contact-now {
    flex: 1 !important;
    height: 42px !important;
    font-size: 13px !important;
    padding: 0 14px !important;
  }

  .btn-wishlist {
    width: 42px !important;
    height: 42px !important;
  }
}

/* --- TỐI ƯU SỰ KIỆN ĐỐI TÁC QUỐC TẾ (MALAYSIA & SINGAPORE) --- */
@media (max-width: 960px) {
  .partner-event-section {
    padding: 55px 0 !important;
  }

  .partner-event-header h2 {
    font-size: 26px !important;
  }

  .partner-event-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .gallery-main-frame {
    height: 340px !important;
  }
}

@media (max-width: 640px) {
  .partner-event-header {
    margin-bottom: 24px !important;
  }

  .partner-event-header h2 {
    font-size: 22px !important;
    line-height: 1.35 !important;
  }

  .partner-event-header p {
    font-size: 13.5px !important;
    line-height: 1.6 !important;
  }

  .gallery-main-frame {
    height: 260px !important;
    border-radius: 14px !important;
    border-width: 3px !important;
  }

  .gallery-nav-btn {
    width: 36px !important;
    height: 36px !important;
  }

  .gallery-nav-btn.prev { left: 8px !important; }
  .gallery-nav-btn.next { right: 8px !important; }

  .gallery-slide-counter {
    top: 8px !important;
    right: 8px !important;
    padding: 3px 9px !important;
    font-size: 10px !important;
  }

  .event-media-badge {
    top: 8px !important;
    left: 8px !important;
    font-size: 9px !important;
    padding: 4px 10px !important;
    max-width: calc(100% - 85px) !important;
  }

  .gallery-caption {
    font-size: 11.5px !important;
    line-height: 1.4 !important;
    padding: 20px 10px 10px !important;
  }

  .gallery-thumbs {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
    margin-top: 10px !important;
  }

  .thumb-btn {
    padding: 3px !important;
    border-radius: 8px !important;
  }

  .thumb-btn img {
    height: 44px !important;
    border-radius: 6px !important;
  }

  .thumb-tag {
    display: none !important;
  }

  .event-feature-list {
    gap: 10px !important;
  }

  .event-feature-item {
    padding: 12px !important;
    gap: 10px !important;
    border-radius: 12px !important;
  }

  .event-feature-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
  }

  .event-feature-text h3 {
    font-size: 13.5px !important;
  }

  .event-feature-text p {
    font-size: 12px !important;
    line-height: 1.55 !important;
  }

  .btn-event-cta {
    width: 100% !important;
    height: 46px !important;
    font-size: 13px !important;
    padding: 0 14px !important;
    text-align: center !important;
  }

  .partner-guarantee {
    text-align: center !important;
    font-size: 11.5px !important;
  }
}

/* --- TỐI ƯU MỤC QUY TRÌNH (TIMELINE DỌC TRÊN DI ĐỘNG) --- */
@media (max-width: 640px) {
  .process {
    padding: 45px 0 !important;
  }

  .timeline {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-top: 24px !important;
  }

  .timeline li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding-right: 0 !important;
  }

  .timeline li:before {
    display: none !important;
  }

  .step-number {
    width: 38px !important;
    height: 38px !important;
    font-size: 15px !important;
    flex-shrink: 0 !important;
    margin-top: 2px !important;
  }

  .timeline h3 {
    font-size: 15px !important;
    min-height: auto !important;
    margin-top: 0 !important;
    line-height: 1.35 !important;
  }

  .timeline p {
    font-size: 12px !important;
    margin-top: 3px !important;
    line-height: 1.55 !important;
  }
}

/* --- TỐI ƯU MỤC CHẤT LIỆU & TAY NGHỀ TRÊN DI ĐỘNG --- */
@media (max-width: 640px) {
  .material-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .material-visual {
    height: 300px !important;
    overflow: hidden !important;
    border-radius: 14px !important;
    position: relative !important;
  }

  .weave-detail {
    width: 100% !important;
    height: 250px !important;
  }

  .craft-placeholder.craft-process-photo {
    width: 160px !important;
    height: 145px !important;
    border-width: 5px !important;
    border-radius: 10px !important;
  }
}

/* --- TỐI ƯU DIALOG CHI TIẾT SẢN PHẨM TRÊN DI ĐỘNG --- */
@media (max-width: 640px) {
  #product-dialog {
    width: calc(100% - 24px) !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    padding: 22px 16px !important;
    border-radius: 18px !important;
  }

  .dialog-b2b-layout {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .dialog-img-box {
    height: 190px !important;
    padding: 10px !important;
  }

  .dialog-info-box h2 {
    font-size: 20px !important;
  }

  .dialog-info-box dl div {
    grid-template-columns: 95px 1fr !important;
    font-size: 12px !important;
  }
}

/* NÚT LIÊN HỆ NGAY GIỮ NGUYÊN KHUNG MÀU NÂU CARAMEL (#c58b4e) THEO ẢNH MẪU */
.btn-contact-now {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 46px !important;
  padding: 0 24px !important;
  border-radius: 999px !important;
  border: none !important;
  background: #c58b4e !important;
  color: #ffffff !important;
  font-family: var(--sans) !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(197, 139, 78, 0.35) !important;
  transition: all 0.22s ease !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}

.btn-contact-now:hover {
  background: #b3793c !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(197, 139, 78, 0.45) !important;
  color: #ffffff !important;
}

.btn-contact-now:active {
  transform: translateY(1px) !important;
}

.btn-contact-now svg {
  flex-shrink: 0;
  transition: transform 0.2s ease;
  stroke: #ffffff;
}

.btn-contact-now:hover svg {
  transform: translateX(3px);
}

@media (max-width: 640px) {
  .btn-contact-now {
    flex: 1;
    height: 42px;
    font-size: 13.5px;
    padding: 0 16px;
  }
}

/* ==========================================================================
   FIX TRIỆT ĐỂ LỖI HERO BỊ BÓ HẸP 2 CỘT NGANG TRÊN MOBILE & TABLET
   ========================================================================== */
@media (max-width: 960px) {
  .hero-interior-decor {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    min-height: auto !important;
    height: auto !important;
    padding: 32px 0 40px !important;
    margin-top: 72px !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .hero-interior-container {
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    z-index: 3 !important;
  }

  .hero-interior-card {
    max-width: 100% !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .hero-floating-trust-bar {
    position: static !important;
    transform: none !important;
    width: calc(100% - 32px) !important;
    max-width: 100% !important;
    margin: 30px auto 0 !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    z-index: 3 !important;
  }
}

@media (max-width: 640px) {
  .hero-interior-decor {
    margin-top: 66px !important;
    padding: 24px 0 32px !important;
  }

  .hero-floating-trust-bar {
    width: calc(100% - 24px) !important;
    margin: 24px auto 0 !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 12px !important;
  }

  .hero-interior-title {
    font-size: 25px !important;
    line-height: 1.25 !important;
    margin-bottom: 12px !important;
    letter-spacing: -0.4px !important;
  }

  .hero-interior-desc {
    font-size: 14px !important;
    line-height: 1.65 !important;
    margin-bottom: 20px !important;
  }

  .hero-interior-actions {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
  }

  .btn-interior-primary,
  .btn-interior-secondary {
    width: 100% !important;
    justify-content: center !important;
    height: 48px !important;
  }
}

/* ==========================================================================
   BẢO ĐẢM 100% TOÀN BỘ CÁC SECTION KHÔNG BỊ TRÀN HOẶC ÉP CỘT TRÊN MOBILE & TABLET
   ========================================================================== */
@media (max-width: 960px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    position: relative !important;
  }

  .container {
    width: calc(100% - 32px) !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  /* Đảm bảo tất cả các khối lớn xếp theo chiều dọc tự nhiên, không bị ép ngang */
  .brand-story-grid,
  .custom-grid,
  .material-grid,
  .contact-grid,
  .footer-main,
  .partner-event-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
    width: 100% !important;
  }

  .marquee {
    max-width: 100vw !important;
    overflow: hidden !important;
  }

  img {
    max-width: 100% !important;
    height: auto !important;
  }

  .product-visual-b2b img,
  .dialog-img-box img {
    height: 100% !important;
  }
}

@media (max-width: 640px) {
  .container {
    width: calc(100% - 24px) !important;
  }
}

/* ==========================================================================
   YÊU CẦU ĐỒNG BỘ THEO KHÁCH HÀNG:
   1. KHÔNG GIAN SỐNG TINH TẾ chung hàng (không bị rớt chữ TẾ)
   2. Khoảng cách dòng giãn ra chuẩn 1.5 - 2 (line-height: 1.6 - 1.8)
   3. Mục lục menu + chữ trong các khung / thẻ / badge in hoa toàn bộ
   4. Dùng duy nhất 1 font: Montserrat trên toàn bộ website
   ========================================================================== */

:root {
  --sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  --serif: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

html, body, button, input, textarea, select,
h1, h2, h3, h4, h5, h6, p, span, a, li, dt, dd, strong, small {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Khoảng cách hàng (line-height) giãn thoáng 1.6 - 1.8 */
body {
  line-height: 1.75 !important;
}

p, .hero-interior-desc, .brand-story-paragraph, .products-header-desc,
.event-feature-text p, .trust-text p, .metric-col p, .timeline p,
.gallery-caption, .dialog-info-box p, .dialog-info-box dd {
  line-height: 1.75 !important;
}

h1, h2, h3, h4, h5, h6,
.hero-interior-title, .brand-story-heading, .products-b2b-heading,
.partner-event-header h2, .event-feature-text h3, .dialog-info-box h2 {
  line-height: 1.45 !important;
}

/* 1. KHUNG TIÊU ĐỀ HERO KHÔNG BỊ RỚT CHỮ TẾ */
.hero-interior-card {
  max-width: 760px !important;
}

.hero-interior-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 40px !important;
  line-height: 1.35 !important;
  letter-spacing: -0.5px !important;
  margin: 0 0 22px 0 !important;
  text-transform: uppercase !important;
}

.hero-interior-title .hero-line {
  display: block;
}

.hero-interior-title .hero-line-top {
  white-space: nowrap !important;
}

@media (max-width: 960px) {
  .hero-interior-card {
    max-width: 100% !important;
  }
  .hero-interior-title {
    font-size: 28px !important;
    line-height: 1.35 !important;
  }
}

@media (max-width: 640px) {
  .hero-interior-title {
    font-size: 21px !important;
    line-height: 1.35 !important;
    letter-spacing: -0.3px !important;
  }
}

@media (max-width: 400px) {
  .hero-interior-title {
    font-size: 19px !important;
  }
}

/* 3. MỤC LỤC + CHỮ TRONG CÁC KHUNG IN HOA TOÀN BỘ (UPPERCASE) */
/* Thanh điều hướng / Menu mục lục */
nav a,


.footer-links a,
.footer-links span {
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
}

/* Chữ trong các khung, thẻ badge, tag, hộp thông tin */
.hero-leaf-badge,
.hero-leaf-badge span,
.story-craft-tag,
.story-craft-tag span,
.story-category-tag,
.story-category-tag span,
.partner-event-badge,
.event-media-badge,
.photo-tag,
.process-tag,
.spec-chip,
.thumb-tag,
.dialog-badge,
.trust-text strong,
.feature-item-text strong,
.feature-item-text small,
.metric-col strong,
.eyebrow,
.partner-heading h2,
.product-info-b2b h3,
.btn-interior-primary,
.btn-interior-secondary,
.btn-story-explore,
.btn-event-cta,
.btn-add-cart,
.btn-contact-now,
.btn-product-detail,
.btn-product-quote,
.dialog-info-box dt,
.timeline h3 {
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}


/* FIX NÚT YÊU CẦU BÁO GIÁ (RFQ): GIỮ NGUYÊN CHỮ, 1 HÀNG DUY NHẤT, KHÔNG RỚT DÒNG */
.btn-rfq-nav {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  height: 44px !important;
  line-height: 1 !important;
  padding: 0 22px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  background: linear-gradient(135deg, #2e7d44 0%, #164e29 100%) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  border: 1px solid #43a05b !important;
  transition: all 0.25s ease !important;
  text-decoration: none !important;
  box-shadow: 0 4px 15px rgba(46, 125, 68, 0.3) !important;
  flex-shrink: 0 !important;
}

.btn-rfq-nav:hover {
  background: linear-gradient(135deg, #388e52 0%, #1c5b30 100%) !important;
  border-color: #52b788 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(46, 125, 68, 0.4) !important;
}

.btn-rfq-mobile {
  text-transform: none !important;
  letter-spacing: normal !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

/* Tối ưu khoảng cách menu trên màn hình 961px - 1180px để không bị ép co nút */
@media (min-width: 961px) and (max-width: 1180px) {
  nav {
    gap: 4px !important;
  }
  nav a {
    padding: 7px 10px !important;
    font-size: 12.5px !important;
  }
  .nav-wrap {
    gap: 12px !important;
  }
}

/* ==========================================================================
   ĐỒNG BỘ TOÀN DIỆN TYPOGRAPHY & XÓA BỎ HOÀN TOÀN GẠCH DƯỚI (UNDERLINE)
   ========================================================================== */

/* 1. XÓA BỎ HOÀN TOÀN GẠCH NGANG / GẠCH DƯỚI DƯỚI CHỮ Ở TẤT CẢ TIÊU ĐỀ */
.partner-event-header h2 em,
h1 em, h2 em, h3 em, em,
.title-accent,
.story-heading-accent {
  text-decoration: none !important;
  text-decoration-line: none !important;
  border-bottom: none !important;
  font-style: normal !important;
  position: relative !important;
  display: inline !important;
}

.partner-event-header h2 em::after,
.title-accent::after,
.story-heading-accent::after,
h2 em::after {
  display: none !important;
  content: none !important;
}

/* 2. ĐỒNG BỘ 100% CÁC TIÊU ĐỀ LỚN (H2) TRÊN TOÀN BỘ WEBSITE */
h2,
.brand-story-heading,
.products-b2b-heading,
.custom-copy h2,
.material-copy h2,
.process .section-head h2,
.partner-event-header h2,
.contact-copy h2,
.dialog-info-box h2 {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 36px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.5px !important;
  color: #124322 !important;
  margin: 0 0 16px 0 !important;
  text-transform: none !important;
}

/* Màu chữ tiêu đề trên các section nền tối (Dark) */
.dark h2,
.custom.dark h2,
.process.dark h2,
.contact.dark h2 {
  color: #ffffff !important;
}

/* Từ nhấn mạnh (Accent) trong tất cả tiêu đề: dùng màu xanh tre tự nhiên, KHÔNG gạch chân, KHÔNG in nghiêng */
/* ĐỒNG BỘ 100% MÀU CHỮ TIÊU ĐỀ: DÙNG CHUNG 1 MÀU DUY NHẤT, TUYỆT ĐỐI KHÔNG CHIA 2 MÀU KHÁC NHAU */
h1 em, h1 span, h1 strong,
h2 em, h2 span, h2 strong,
h3 em, h3 span, h3 strong,
.title-accent,
.story-heading-accent,
.hero-interior-title .title-accent,
.brand-story-heading .story-heading-accent,
.products-b2b-heading .story-heading-accent,
.partner-event-header h2 em,
.custom-copy h2 em,
.material-copy h2 em,
.process .section-head h2 em {
  color: inherit !important;
  font-weight: inherit !important;
  font-style: normal !important;
  text-decoration: none !important;
  text-decoration-line: none !important;
  border-bottom: none !important;
}

.dark h1 em, .dark h1 span,
.dark h2 em, .dark h2 span,
.dark h3 em, .dark h3 span,
.custom.dark h2 em,
.process.dark h2 em,
.contact.dark h2 em {
  color: #ffffff !important;
}

/* Tiêu đề cấp 3 (H3) đồng bộ */
h3,
.product-info-b2b h3,
.timeline h3 {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 17.5px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: #124322 !important;
}

.dark h3,
.timeline li h3{color:#43270f !important;}

/* 3. ĐỒNG BỘ ĐOẠN VĂN MÔ TẢ (P) TRÊN TOÀN BỘ WEBSITE */
p,
.hero-interior-desc,
.brand-story-paragraph,
.products-header-desc,
.material-copy p,
.custom-copy p,
.trust-text p,
.timeline p,
.contact-copy p,
.partner-event-header p {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 15px !important;
  font-weight: 450 !important;
  line-height: 1.75 !important;
  color: #2f4c34 !important;
}

/* ĐẶC TRỊ CÂN XỨNG & ĐỀU NHAU HOÀN HẢO 100% GIỮA 2 BÊN MỤC HOẠT ĐỘNG HỢP TÁC */
.partner-event-grid {
  display: grid !important;
  grid-template-columns: 1.15fr 0.85fr !important;
  gap: 36px !important;
  align-items: stretch !important;
}

.partner-gallery {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.gallery-main-frame {
  height: 440px !important;
}

.gallery-thumbs {
  margin-top: 14px !important;
}

.partner-event-content {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  height: 100% !important;
}

.event-feature-list {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  flex: 1 !important;
  gap: 14px !important;
  margin-bottom: 18px !important;
}

.event-feature-item {
  display: flex !important;
  gap: 15px !important;
  align-items: center !important;
  background: #ffffff !important;
  padding: 14px 18px !important;
  border-radius: 14px !important;
  border: 1.5px solid #bfe2c8 !important;
  box-shadow: 0 4px 14px rgba(18, 67, 34, 0.05) !important;
  transition: all 0.25s ease !important;
  flex: 1 !important;
}

.event-feature-item:hover {
  transform: translateX(3px) !important;
  border-color: #2e7d44 !important;
  box-shadow: 0 8px 20px rgba(46, 125, 68, 0.12) !important;
}

.event-feature-icon {
  color: #2e7d44 !important;
  flex-shrink: 0 !important;
  background: #eaf6ed !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid #bfe2c8 !important;
}

.event-feature-icon svg {
  width: 22px !important;
  height: 22px !important;
}

.event-feature-text h3 {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #124322 !important;
  line-height: 1.35 !important;
  margin: 0 0 4px 0 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.event-feature-text p {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: #355c3e !important;
  margin: 0 !important;
  letter-spacing: normal !important;
}

.partner-cta-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-top: auto !important;
}

.btn-event-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 48px !important;
  padding: 0 28px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  width: 100% !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

.partner-guarantee {
  font-size: 12px !important;
  color: #164e29 !important;
  text-align: center !important;
}

.dark p,
.custom.dark p,
.process.dark p,
.contact.dark p,
.dark .contact-copy p {
  color: #d6e2d8 !important;
}

/* 4. ĐỒNG BỘ CÁC THẺ BADGE / EYEBROW TRÊN MỖI SECTION */
.eyebrow,
.hero-leaf-badge,
.story-category-tag,
.partner-event-badge {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.9px !important;
  text-transform: uppercase !important;
}

/* Responsive tiêu đề h2 trên Tablet & Mobile */
@media (max-width: 960px) {
  h2,
  .brand-story-heading,
  .products-b2b-heading,
  .custom-copy h2,
  .material-copy h2,
  .process .section-head h2,
  .partner-event-header h2,
  .contact-copy h2 {
    font-size: 28px !important;
    line-height: 1.35 !important;
  }
}

@media (max-width: 640px) {
  h2,
  .brand-story-heading,
  .products-b2b-heading,
  .custom-copy h2,
  .material-copy h2,
  .process .section-head h2,
  .partner-event-header h2,
  .contact-copy h2 {
    font-size: 23px !important;
    line-height: 1.35 !important;
  }
  
  p,
  .hero-interior-desc,
  .brand-story-paragraph,
  .products-header-desc,
  .material-copy p,
  .custom-copy p,
  .trust-text p,
  .timeline p,
  .contact-copy p,
  .partner-event-header p {
    font-size: 13.5px !important;
    line-height: 1.7 !important;
  }
}
/* --- Source: v3-enhancements.css --- */
/* ==========================================================================
   ECO.MI — V3 ENHANCEMENTS STYLING (B2B EXPORT UPGRADE)
   Includes:
   1. Water-Resistance Performance Showcase (USP Thực nghiệm kháng ẩm)
   2. Factory & Production Capacity Metrics (Năng lực quy mô xuất khẩu)
   3. B2B RFQ & Interactive Customization Configurator
   4. Floating B2B Action Dock (Zalo, WhatsApp, Hotline, Quote)
   5. Language Switcher (VI / EN)
   6. B2B Catalog / Lookbook Download Banner
   7. Retail Partners Trust Bar (Aeon Mall, Lotte Mart)
   ========================================================================== */

/* --- ROOT VARIABLES & V3 EXTENSIONS --- */
:root {
  --v3-green-dark: #193822;
  --v3-gold: #c29d59;
  --v3-gold-light: #f4ecdc;
  --v3-badge-bg: rgba(47, 107, 58, 0.08);
  --v3-border-light: #e6dfd1;
}

/* --- LANGUAGE SWITCHER IN HEADER --- */
.lang-switcher-v3 {
  display: inline-flex;
  align-items: center;
  background: rgba(47, 107, 58, 0.07);
  border: 1px solid rgba(47, 107, 58, 0.18);
  border-radius: 999px;
  padding: 3px 6px;
  gap: 4px;
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.5px;
}

.lang-btn-v3 {
  border: none;
  background: transparent;
  color: var(--muted);
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.25s ease;
  font-weight: 600;
  font-size: 12px;
}

.lang-btn-v3:hover {
  color: var(--forest);
}

.lang-btn-v3.active {
  background: var(--forest);
  color: #fff;
  box-shadow: 0 2px 8px rgba(31, 74, 43, 0.25);
}

/* --- HERO B2B TRUST PILLS --- */
.hero-trust-badges-v3 {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.hero-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(198, 175, 136, 0.45);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.hero-trust-badge svg {
  width: 16px;
  height: 16px;
  fill: var(--green);
  flex-shrink: 0;
}

/* --- WATER RESISTANCE SHOWCASE SECTION (USP CỰC MẠNH) --- */
.water-test-section {
  background: #fbf8f2;
  border-top: 1px solid var(--v3-border-light);
  border-bottom: 1px solid var(--v3-border-light);
  position: relative;
  overflow: hidden;
}

.water-test-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 50px;
  align-items: center;
}

.water-test-copy .eyebrow {
  color: var(--green);
}

.water-test-copy h2 {
  font-size: 40px;
  line-height: 1.25;
  margin-bottom: 20px;
}

.water-highlight-box {
  background: #fff;
  border: 1px solid rgba(47, 107, 58, 0.2);
  border-left: 5px solid var(--green);
  border-radius: 16px;
  padding: 24px;
  margin: 24px 0;
  box-shadow: 0 8px 24px rgba(47, 107, 58, 0.05);
}

.water-highlight-box h4 {
  margin: 0 0 10px;
  font-size: 18px;
  color: var(--forest);
  display: flex;
  align-items: center;
  gap: 10px;
}

.water-highlight-box p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: #3f4c3d;
}

.water-steps-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.water-step-card {
  background: #fff;
  border-radius: 14px;
  padding: 18px 16px;
  border: 1px solid var(--v3-border-light);
  text-align: center;
  transition: transform 0.25s, box-shadow 0.25s;
}

.water-step-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.water-step-num {
  display: inline-block;
  width: 32px;
  height: 32px;
  line-height: 32px;
  background: var(--v3-gold-light);
  color: #7d5e24;
  font-weight: 700;
  border-radius: 50%;
  margin-bottom: 10px;
  font-size: 14px;
}

.water-step-card h5 {
  margin: 0 0 6px;
  font-size: 14px;
  color: var(--ink);
}

.water-step-card p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

/* Material Comparison Table */
.comparison-card {
  background: #fff;
  border-radius: 20px;
  padding: 30px;
  border: 1px solid var(--v3-border-light);
  box-shadow: 0 14px 40px rgba(35, 61, 42, 0.06);
}

.comparison-card h3 {
  font-size: 22px;
  margin-bottom: 20px;
  color: var(--forest);
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.comparison-table th,
.comparison-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid #ede8de;
}

.comparison-table th {
  background: #f7f4ed;
  color: var(--ink);
  font-weight: 600;
  border-radius: 6px;
}

.comparison-table .highlight-col {
  background: rgba(47, 107, 58, 0.05);
  font-weight: 600;
  color: var(--forest);
}

.badge-check {
  color: #2f6b3a;
  font-weight: 700;
}

.badge-x {
  color: #b05252;
}

/* --- PRODUCTION CAPACITY & EXPORT METRICS --- */
.capacity-section {
  background: var(--forest);
  color: var(--cream);
  position: relative;
}

.capacity-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.capacity-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  padding: 28px 24px;
  text-align: center;
  transition: all 0.3s ease;
}

.capacity-card:hover {
  background: rgba(255, 255, 255, 0.09);
  transform: translateY(-4px);
  border-color: rgba(198, 175, 136, 0.4);
}

.capacity-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(198, 175, 136, 0.2);
  border-radius: 12px;
  color: #dfcca8;
}

.capacity-num {
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 600;
  color: #f7f2e8;
  margin-bottom: 6px;
}

.capacity-card h4 {
  font-size: 16px;
  margin: 0 0 10px;
  color: #e5eedc;
}

.capacity-card p {
  font-size: 13px;
  line-height: 1.6;
  color: #b9c7b3;
  margin: 0;
}

/* --- RETAIL & ENTERPRISE TRUST BAR --- */
.retail-trust-bar {
  background: #fff;
  border-bottom: 1px solid var(--v3-border-light);
  padding: 24px 0;
}

.retail-trust-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}

.retail-trust-title {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 700;
  color: var(--muted);
}

.retail-badges-list {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.retail-badge-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f7f3ec;
  border: 1px solid #e5ded3;
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.retail-badge-item .dot {
  width: 8px;
  height: 8px;
  background: var(--green);
  border-radius: 50%;
}

/* --- B2B CATALOG DOWNLOAD BANNER --- */
.catalog-banner {
  background: linear-gradient(135deg, #244f2e 0%, #17371e 100%);
  border-radius: 24px;
  padding: 44px 50px;
  margin: 60px 0 20px;
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  box-shadow: 0 20px 50px rgba(25, 56, 34, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.catalog-banner h3 {
  font-size: 28px;
  margin-bottom: 10px;
  color: #fff;
}

.catalog-banner p {
  font-size: 14.5px;
  color: #cfdccb;
  margin: 0;
  max-width: 620px;
  line-height: 1.6;
}

.catalog-banner .button {
  flex-shrink: 0;
}

/* --- FLOATING B2B CONTACT DOCK --- */
.floating-dock-v3 {
  position: fixed;
  right: 22px;
  bottom: 26px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
}

.dock-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  color: var(--ink);
  border: 1px solid rgba(47, 107, 58, 0.2);
  border-radius: 999px;
  padding: 10px 18px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.25s ease;
}

.dock-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
}

.dock-btn-zalo {
  background: #0068ff;
  color: #fff;
  border-color: #0056d6;
}

.dock-btn-zalo:hover {
  background: #0056d6;
  color: #fff;
}

.dock-btn-whatsapp {
  background: #25d366;
  color: #fff;
  border-color: #1eb956;
}

.dock-btn-whatsapp:hover {
  background: #1eb956;
  color: #fff;
}

.dock-btn-quote {
  background: var(--forest);
  color: var(--cream);
  border-color: var(--forest);
}

.dock-btn-quote:hover {
  background: #15351e;
}

.dock-btn-top {
  width: 44px;
  height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  color: var(--forest);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
}

.dock-btn-top.show {
  opacity: 1;
  pointer-events: auto;
}

/* --- B2B RFQ MODAL --- */
.v3-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(18, 35, 23, 0.65);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.v3-modal.open {
  opacity: 1;
  pointer-events: auto;
}

.v3-modal-card {
  background: #fff;
  border-radius: 24px;
  max-width: 680px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 40px;
  position: relative;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.2);
  border: 1px solid var(--v3-border-light);
}

.v3-modal-close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #ddd;
  background: #f7f3ec;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink);
  transition: all 0.2s ease;
}

.v3-modal-close:hover {
  background: #e9e2d5;
}

.v3-modal-title {
  font-size: 26px;
  color: var(--forest);
  margin-bottom: 8px;
}

.v3-modal-desc {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 24px;
}

.rfq-step-group {
  margin-bottom: 20px;
}

.rfq-step-group label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink);
  margin-bottom: 10px;
}

.rfq-options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
}

.rfq-option-label {
  border: 1px solid #dcded0;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  background: #fcfbfa;
}

.rfq-option-label:hover {
  border-color: var(--green);
  background: #f4f8f4;
}

.rfq-option-label input {
  display: none;
}

.rfq-option-label.checked {
  background: var(--forest);
  color: #fff;
  border-color: var(--forest);
  font-weight: 600;
}

/* --- RESPONSIVE ADJUSTMENTS --- */
@media (max-width: 992px) {
  .water-test-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .capacity-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .catalog-banner {
    flex-direction: column;
    text-align: center;
    padding: 32px 24px;
  }
}

@media (max-width: 640px) {
  .capacity-grid {
    grid-template-columns: 1fr;
  }
  .water-steps-row {
    grid-template-columns: 1fr;
  }
  .floating-dock-v3 {
    right: 14px;
    bottom: 16px;
  }
  .dock-btn span {
    display: none;
  }
  .dock-btn {
    padding: 12px;
    border-radius: 50%;
    width: 46px;
    height: 46px;
    justify-content: center;
  }
}

/* --- Source: hero-spatial.css --- */
/* Spatial product showcase: layered supplied imagery, never a fabricated 3D model. */
header{top:20px;padding:0 30px}header .nav-wrap{width:min(1260px,100%);height:76px;padding:0 24px;border:1px solid #ffffffd9;border-radius:14px;background:#faf8f0db;backdrop-filter:blur(22px);box-shadow:0 8px 35px #16351d0b;transition:height .3s,box-shadow .3s}header.scrolled{background:transparent;box-shadow:none;backdrop-filter:none}header.scrolled .nav-wrap{height:68px;background:#f7f2e8f2;box-shadow:0 9px 35px #16351d1c}.nav-wrap .logo{font-size:32px}.nav-wrap .logo span{font-size:6px;letter-spacing:1.4px}nav{gap:22px}nav a{font-size:12px}.nav-actions{gap:18px}.hero{height:900px;background:#f5f1e8;isolation:isolate}.hero-ambient{position:absolute;inset:0;background:radial-gradient(ellipse at 48% 78%,#dad4b961,transparent 58%),linear-gradient(125deg,#fbf8f1,#eee8db);z-index:-2}.hero-content{padding-top:208px;pointer-events:none}.hero-content .button-row{pointer-events:auto}.hero h1{font-size:48px;max-width:670px;line-height:1.29;letter-spacing:-2px}.hero .eyebrow{font-size:9px;letter-spacing:1.65px;max-width:530px;margin-bottom:29px}.hero-description{font-size:14px;max-width:435px;line-height:1.9;margin:25px 0 26px}.hero .button{border-radius:7px;min-height:50px;font-size:13px;padding:14px 22px;box-shadow:0 7px 19px #1f4a2b0a}.hero-signature{display:flex;align-items:center;gap:15px;margin-top:36px;font-size:9px;letter-spacing:1.5px;color:#7e826e}.hero-signature i{width:28px;height:1px;background:#a7af96}.hero-scene{position:absolute;top:125px;right:38px;width:calc(50% - 35px);height:680px;border-radius:28px;background:radial-gradient(ellipse at 55% 32%,#4f7450,transparent 62%),linear-gradient(135deg,#24492d,#173d24 75%);perspective:1400px;isolation:isolate;box-shadow:0 28px 55px #1232191c;transform:translateY(calc(var(--scroll-progress,0) * 25px));animation:scene-enter 1.3s cubic-bezier(.2,.7,.2,1) both}.scene-perspective{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .4s ease-out}.scene-orbit{position:absolute;left:9%;top:8%;width:83%;height:76%;border:1px solid #cee0b325;border-radius:50%;transform:translateZ(-30px) rotate(-25deg);pointer-events:none}.scene-orbit:after{content:'';position:absolute;inset:38px;border:1px solid #cee0b319;border-radius:50%}.scene-word{position:absolute;top:60px;left:25px;color:#e4ecd51b;font:600 clamp(50px,7.2vw,110px)/1 var(--sans);letter-spacing:-7px;white-space:nowrap;transform:translateZ(-65px);pointer-events:none}.product-layer{position:absolute;left:-68px;right:-15px;top:138px;height:490px;transform:translate3d(var(--mx,0px),var(--my,0px),90px);transition:transform .45s ease-out;z-index:4;pointer-events:none}.hero .hero-product{position:relative;right:auto;bottom:auto;width:100%;height:100%;max-width:none;object-fit:contain;filter:drop-shadow(0 30px 18px #091d214a);animation:float-product 7s ease-in-out infinite;transform-origin:50% 75%}.scene-shadow{position:absolute;bottom:8px;left:18%;width:66%;height:28px;border-radius:50%;background:#08190eb0;filter:blur(22px);transform:translateZ(-5px);z-index:-1}.scene-card{position:absolute;margin:0;border-radius:9px;overflow:hidden;background:#eee8da;box-shadow:0 18px 35px #071b1850;border:5px solid #f6f1e8;transform-style:preserve-3d}.scene-interior{width:210px;height:178px;right:18px;top:36px;transform:translateZ(45px) rotate(9deg);animation:float-card 9s ease-in-out infinite;z-index:2}.scene-interior img{width:100%;height:142px;object-fit:cover}.scene-card figcaption{font:500 7px/2 var(--sans);letter-spacing:1px;color:#43563d;padding:5px 4px;white-space:nowrap}.scene-detail{width:155px;height:164px;left:10px;bottom:39px;transform:translateZ(115px) rotate(-10deg);animation:float-card-alt 8s ease-in-out infinite;z-index:6}.detail-window{height:132px;position:relative;overflow:hidden;background:#cfb688}.detail-window img{position:absolute;width:650px;max-width:none;left:-235px;top:-260px}.scene-detail figcaption{font-size:6px;letter-spacing:.3px}.scene-label{position:absolute;right:23px;bottom:69px;z-index:7;display:flex;align-items:center;gap:12px;color:#c8d7b7;font-size:8px;letter-spacing:1.5px;transform:translateZ(75px);pointer-events:none}.scene-label strong{display:block;font:400 14px/1.7 var(--serif);color:#f1eddc;letter-spacing:0}.label-line{width:32px;border-top:1px solid #b1c795}.scene-caption{position:absolute;bottom:18px;left:23px;right:23px;display:flex;justify-content:space-between;gap:15px;color:#a2b795;font:400 7px/1.5 var(--sans);letter-spacing:.5px;z-index:10}.hero-bottom{bottom:28px}.motion-control{border:0;background:none;padding:10px 0;font-size:10px;color:#5c7055;display:flex;gap:14px;align-items:center}.motion-control span{border:1px solid #adb59d;border-radius:50%;width:25px;height:25px;display:grid;place-items:center;font-size:10px}.scroll-link{font-size:9px;letter-spacing:1.5px}.hero.motion-paused .hero-product,.hero.motion-paused .scene-card{animation-play-state:paused}.hero.motion-paused .scene-perspective{transform:none}.hero.motion-paused .product-layer{transform:translateZ(90px)}
@keyframes scene-enter{from{opacity:0;transform:perspective(1400px) translateY(35px) rotateY(-8deg)}to{opacity:1;transform:perspective(1400px) translateY(0) rotateY(0)}}@keyframes float-product{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-14px) rotate(1deg)}}@keyframes float-card{0%,100%{transform:translateZ(45px) translateY(0) rotate(9deg)}50%{transform:translateZ(45px) translateY(-9px) rotate(7deg)}}@keyframes float-card-alt{0%,100%{transform:translateZ(115px) translateY(0) rotate(-10deg)}50%{transform:translateZ(115px) translateY(9px) rotate(-7deg)}}
@media(min-width:1550px){.hero-scene{right:calc((100vw - 1440px)/2 + 25px);width:670px}.hero-content{padding-top:205px}}
@media(max-width:1200px){header{padding:0 20px}.nav-wrap{gap:12px}nav{gap:14px}nav a{font-size:10px}.nav-actions{gap:12px}.hero h1{font-size:41px}.hero .eyebrow{font-size:8px}.hero-scene{right:22px;top:135px;width:48%;height:630px}.hero-content{padding-top:200px}.hero-description{max-width:380px;font-size:13px}.hero .button{padding:12px 16px;font-size:12px}.product-layer{left:-30px;right:-20px;top:140px;height:410px}.scene-interior{width:170px;height:149px;right:17px}.scene-interior img{height:113px}.scene-detail{width:132px;height:142px;bottom:40px}.detail-window{height:110px}.scene-caption{font-size:6px}.scene-label{font-size:7px;right:15px;bottom:65px}.scene-label strong{font-size:11px}.scene-word{letter-spacing:-5px}}
@media(max-width:960px){header{top:14px}.nav-wrap{height:68px!important}.nav-wrap nav{top:75px;left:20px;width:calc(100% - 40px);border-radius:12px}.nav-wrap nav a{font-size:14px}.hero-content{padding-top:165px}.hero h1{font-size:35px;letter-spacing:-1.4px}.hero-description{max-width:325px}.hero-scene{top:145px;height:615px;right:15px;width:46%}.product-layer{top:170px;height:340px;left:-40px;right:-25px}.scene-interior{width:145px;height:130px;top:40px;right:10px}.scene-interior img{height:95px}.scene-detail{width:120px;height:130px;left:3px;bottom:48px}.detail-window{height:100px}.scene-label{right:15px;bottom:195px}.scene-caption{flex-direction:column;gap:3px;left:16px}.hero .button-row{gap:9px}.hero .button{font-size:11px;padding:12px 14px}.hero-signature{font-size:8px;gap:10px}.hero{height:860px}}
@media(max-width:640px){header{padding:0 14px;top:12px}.nav-wrap{width:100%;padding:0 16px;height:63px!important;border-radius:11px}.nav-wrap .logo{font-size:30px}.nav-wrap .logo span{font-size:5px}.nav-wrap nav{left:14px;width:calc(100% - 28px);top:70px}.hero{height:1110px}.hero-content{padding-top:125px}.hero .eyebrow{font-size:8px;max-width:340px;letter-spacing:1px;margin-bottom:21px}.hero h1{font-size:33px;line-height:1.26;letter-spacing:-1.3px}.hero-description{font-size:12px;line-height:1.85;max-width:340px;margin-top:21px;margin-bottom:21px}.hero .button{font-size:11px;min-height:46px;padding:12px 15px}.hero-signature{margin-top:25px;font-size:7px}.hero-scene{top:590px;right:20px;left:20px;width:auto;height:442px;border-radius:20px}.scene-word{font-size:57px;top:40px;left:18px;letter-spacing:-3px}.product-layer{height:300px;top:105px;left:-17px;right:-12px;transform:translateZ(60px)}.scene-interior{width:130px;height:112px;right:18px;top:22px}.scene-interior img{height:81px}.scene-card figcaption{font-size:5px}.scene-detail{width:97px;height:110px;bottom:36px;left:8px}.detail-window{height:83px}.scene-detail figcaption{font-size:4px;letter-spacing:0}.scene-label{bottom:64px;right:12px;font-size:6px;gap:7px}.scene-label strong{font-size:10px}.label-line{width:15px}.scene-caption{bottom:10px;font-size:5px;flex-direction:row;gap:8px}.hero-bottom{bottom:20px;align-items:center}.scroll-link{font-size:7px;letter-spacing:.7px}.scroll-line{height:24px}.motion-control{font-size:8px;gap:6px}.motion-control span{width:21px;height:21px}.hero .hero-product{width:100%;max-width:none;right:auto;bottom:auto}.hero .hero-content .button-row{flex-wrap:nowrap}}
@media(prefers-reduced-motion:reduce){.hero-scene,.scene-perspective,.product-layer{transform:none!important}.hero-product,.scene-card{animation:none!important}.motion-control{display:none}}
.hero-content{pointer-events:auto}.hero-description{font-size:16px}.scene-card figcaption{font-size:11px;letter-spacing:.2px;padding:4px 5px;line-height:1.5}.scene-detail figcaption{font-size:10px}.scene-caption{justify-content:flex-end;font-size:10px;letter-spacing:0;left:auto;right:20px;max-width:60%;text-align:right}.scene-label{bottom:77px}.motion-control{font-size:12px}.scene-interior{height:180px}.scene-detail{height:165px}.hero.motion-suspended .hero-product,.hero.motion-suspended .scene-card{animation-play-state:paused}
@media(max-width:1200px){.hero-description{font-size:14px}.scene-interior{height:148px}.scene-detail{height:145px}.scene-caption{font-size:9px}}
@media(max-width:960px){.scene-interior{height:132px}.scene-detail{height:133px}.scene-card figcaption{font-size:10px}.scene-detail figcaption{font-size:9px}.scene-label{bottom:190px}}
@media(max-width:640px){.hero{height:auto;min-height:0;display:flex;flex-direction:column;padding-bottom:24px}.hero-content{order:1;padding-bottom:0}.hero-description{font-size:14px;max-width:100%}.hero-scene{order:2;position:relative;top:auto;right:auto;left:auto;margin:38px 20px 26px;width:calc(100% - 40px);height:442px;flex-shrink:0}.hero-bottom{order:3;position:relative;left:auto;transform:none;bottom:auto;width:calc(100% - 40px);margin:0 auto}.scene-interior{height:112px}.scene-detail{height:112px}.scene-card figcaption{font-size:9px;padding:3px 2px}.scene-detail figcaption{font-size:8px}.scene-caption{font-size:8px;max-width:63%;right:12px;bottom:11px}.scene-label{bottom:62px}.motion-control{font-size:10px;min-height:44px}.scroll-link{font-size:8px}.hero .hero-content .button-row{flex-wrap:wrap}.hero-signature{font-size:8px}}

/* --- Source: ecomi-bundle.css --- */

/* === BASE STYLE.CSS === */
:root{--green:#43270f;--forest:#43270f;--cream:#f6ede4;--paper:#ffffff;--ink:#43270f;--muted:rgba(67,39,15,0.7);--sand:#b87b38;--line:#decbc0;--primary:#43270f;--surface:#f6ede4;--text:rgba(67,39,15,0.7);--button-bg:#43270f;--radius:10px;--section:104px;--serif:'Literata',Georgia,serif;--sans:'Be Vietnam Pro',Arial,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--surface);color:var(--text);font:16px/1.75 var(--sans)}button,input,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{cursor:pointer}img{max-width:100%;display:block}button:focus-visible,a:focus-visible{outline:3px solid var(--sand);outline-offset:5px}p{margin:0 0 22px}h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;line-height:1.22}h2{font-size:44px;letter-spacing:-1.5px}h3{font-size:24px}em{font-weight:400;color:var(--green)}.container{width:min(1200px,calc(100% - 80px));margin-inline:auto}.section{padding:var(--section) 0}.eyebrow{font:600 12px/1.7 var(--sans);letter-spacing:2px;margin-bottom:22px}.button{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:13px 25px;border:1px solid transparent;border-radius:5px;background:var(--button-bg);color:var(--cream);font:500 14px/1.5 var(--sans);transition:background .2s,transform .2s;white-space:nowrap}.button:hover{background:var(--forest);transform:translateY(-2px)}.button.small{min-height:44px;padding:10px 18px}.button.outline{border-color:#60745d;background:transparent;color:var(--forest)}.button.outline:hover{background:#ffffff80}.button.cream{background:var(--cream);color:var(--forest)}.button.cream:hover{background:white}.button.light-outline{background:transparent;border-color:#b3c2a570}.button.light-outline:hover{background:#ffffff10}.button-row{display:flex;gap:14px;flex-wrap:wrap}.dark{background:var(--forest);color:var(--cream)}.dark em{color:#c6d6aa}.dark .eyebrow{color:#c6d6aa}.dark p{color:#d3ddce}.dark h2{color:var(--cream)}.skip{position:fixed;left:20px;top:-80px;z-index:1000;background:var(--cream);padding:16px}.skip:focus{top:20px}header{position:fixed;top:0;left:0;width:100%;z-index:50;transition:background .4s,box-shadow .4s}header.scrolled{background:#f7f2e8f0;backdrop-filter:blur(18px);box-shadow:0 1px 0 #254c2720}.nav-wrap{width:min(1320px,calc(100% - 80px));height:94px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:24px}.logo{font:700 40px/1 var(--sans);letter-spacing:-3px;color:var(--green);display:inline-block}.logo span{display:block;font:500 8px/2.4 var(--sans);letter-spacing:1.5px;color:var(--ink)}nav{display:flex;align-items:center;gap:25px}nav a{font-size:13px;white-space:nowrap}nav a:hover,nav .active{color:var(--green)}nav .active{position:relative}nav .active:after{content:'';display:block;width:15px;border-bottom:2px solid var(--green);position:absolute;bottom:-8px}.nav-actions{display:flex;align-items:center;gap:22px}.language{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600}.language button{padding:5px 0;border:0;background:none;font-size:12px;color:var(--muted)}.divider{color:#9aa18e}.menu-button{display:none;background:none;border:0;font-size:24px}.hero{height:870px;position:relative;overflow:hidden;background:#efe7d6}.hero-backdrop{position:absolute;inset:0;background:url('../images/hero-decor-livingroom.jpg') 100% 40%/auto 115% no-repeat;opacity:.53;animation:zoom 22s ease-in-out infinite alternate}.hero-wash{position:absolute;inset:0;background:linear-gradient(90deg,#f7f2e8 0%,#f7f2e8f5 37%,#f7f2e877 66%,#f7f2e81a 100%)}.hero-product{position:absolute;width:660px;max-width:55%;right:1.5%;bottom:106px;filter:drop-shadow(0 24px 24px #4b42221b);animation:hero-in 1.6s ease both}.hero-content{position:relative;padding-top:180px;z-index:2}.hero h1{font-size:49px;line-height:1.23;letter-spacing:-1.9px;max-width:650px}.hero .eyebrow{font-size:11px;letter-spacing:1.8px;margin-bottom:25px}.hero-description{max-width:470px;font-size:15px;line-height:1.85;margin:27px 0 28px;color:#5f6859}.hero-content>*{animation:hero-in .9s ease both}.hero-content h1{animation-delay:.1s}.hero-description{animation-delay:.2s}.hero-content .button-row{animation-delay:.3s}.hero-bottom{position:absolute;left:50%;transform:translateX(-50%);bottom:32px;display:flex;justify-content:space-between;align-items:center}.scroll-link{display:flex;gap:12px;align-items:center;font-size:10px;letter-spacing:2px}.scroll-line{display:block;width:1px;height:33px;background:var(--green)}.image-note{font-size:10px;letter-spacing:.2px;color:#556044;background:#f7f2e8bf;border-radius:3px;padding:3px 8px}.section-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:46px;gap:30px}.section-head p:last-child{font-size:14px;color:var(--muted);margin:0}.section-head .eyebrow{margin-bottom:12px}.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}.product-card{min-width:0;transition:transform .35s,box-shadow .35s;border-radius:var(--radius)}.product-card:hover{transform:translateY(-7px);box-shadow:0 18px 30px #1f4a2b0c}.product-visual{width:100%;height:340px;border:0;border-radius:8px;position:relative;overflow:hidden;background:#eeeadf;color:var(--forest);display:block}.card-index{position:absolute;top:18px;left:19px;font:500 10px var(--sans);letter-spacing:1.3px;z-index:2}.visual-caption{position:absolute;bottom:14px;left:0;width:100%;font:500 9px var(--sans);letter-spacing:.6px}.crop{display:block;position:absolute;overflow:hidden;transition:transform .55s}.laundry-crop{width:280px;height:213px;left:50%;top:72px;transform:translateX(-50%);border-radius:4px;background:white}.laundry-crop img{width:691px;max-width:none;position:absolute;left:-49px;top:-100px}.hanging-crop{width:250px;height:207px;left:50%;top:68px;transform:translateX(-50%);border-radius:4px}.hanging-crop img{width:310px;max-width:none;position:absolute;left:-42px;top:-129px}.round-window{position:absolute;inset:50px 45px 45px;overflow:hidden;border-radius:5px}.round-window img{width:100%;height:100%;object-fit:cover;object-position:50% 85%;transition:transform .55s}.product-card:hover .crop{transform:translateX(-50%) scale(1.035)}.product-card:hover .round-window img{transform:scale(1.04)}.product-info{padding:25px 2px 20px}.product-info h3{font-size:24px;margin-bottom:12px}.product-info p{font-size:13px;color:var(--muted);min-height:46px}.card-actions{display:flex;justify-content:space-between;align-items:center;gap:8px}.text-link{border:0;border-bottom:1px solid #34543550;background:none;padding:0 0 5px;color:var(--green);font:500 13px/1.6 var(--sans)}.text-link span{display:inline-block;margin-left:12px;transition:transform .3s}.product-card:hover .text-link span,.text-link:hover span{transform:translateX(4px)}.quote-link{font-size:11px;border:1px solid #abb4a2;border-radius:4px;padding:8px 10px}.quote-link:hover{background:#e8eadb}.custom-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:90px;align-items:center}.custom-art{position:relative;padding-bottom:25px}.custom-art>img{height:484px;width:100%;object-fit:cover;border-radius:6px}.photo-tag{position:absolute;bottom:14px;left:14px;max-width:calc(100% - 28px);background:#f7f2e8e8;color:#42553d;font:400 10px/1.5 var(--sans);padding:5px 9px;border-radius:3px}.custom-art .photo-tag{bottom:80px}.custom-caption{border-top:1px solid #8da17e80;display:flex;justify-content:space-between;font-size:9px;letter-spacing:1px;margin-top:20px;padding-top:16px;gap:20px}.custom-copy h2{font-size:48px;margin-bottom:27px}.custom-copy>p:not(.eyebrow){font-size:14px;line-height:1.9;max-width:430px}.custom-options{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 18px;margin:30px 0 34px}.custom-options span{font-size:12px;padding-bottom:10px;border-bottom:1px solid #d1dcb940}.material-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:100px;align-items:center}.material-copy>p:not(.eyebrow){font-size:14px;color:var(--muted);max-width:380px;margin:26px 0}.material-details{margin-top:30px}.material-details>div{display:flex;gap:22px;border-top:1px solid var(--line);padding-top:17px;margin-top:18px}.material-details>div>span{font:italic 23px var(--serif);color:#809371}.material-details p{font-size:12px;color:var(--muted);margin:0}.material-details strong{display:block;color:var(--forest);font-size:13px;margin-bottom:5px;font-weight:500}.material-visual{height:500px;position:relative}.weave-detail{position:absolute;right:0;top:0;width:88%;height:410px;overflow:hidden;border-radius:6px;background:#e3d2af}.weave-detail>img{position:absolute;width:1150px;max-width:none;left:-325px;top:-208px}.craft-placeholder{position:absolute;bottom:0;left:0;width:230px;height:225px;background:#e8e0cd;border:9px solid var(--cream);padding:25px 18px}.placeholder-mark{font-size:9px;letter-spacing:1px;color:#6f725d}.craft-placeholder p{font:24px/1.4 var(--serif);margin:24px 0 16px}.craft-placeholder small{font-size:10px;color:#6f725d}.process .section-head>p{color:#cbd6c2}.timeline{list-style:none;margin:60px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:0}.timeline li{position:relative;padding-right:22px;opacity:0.35;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease}.timeline li.highlight{opacity:1;transform:translateY(0)}.timeline li:before{content:'';height:2px;background:#dfd1be;position:absolute;top:24px;left:0;right:0}.timeline li:last-child:before{right:calc(100% - 25px)}.step-number{display:flex;position:relative;align-items:center;justify-content:center;width:49px;height:49px;border:2px solid #dfd1be;border-radius:50%;background:#ffffff;color:#4f240d;font:italic 20px var(--serif);box-shadow:0 4px 14px rgba(79,36,13,0.08);transition:background .5s ease,color .5s ease,transform .3s ease,box-shadow .3s ease}.timeline li.highlight .step-number{background:#bb863b;color:#ffffff;border-color:#bb863b;box-shadow:0 0 16px rgba(187,134,59,.45)}.timeline li:hover .step-number{transform:scale(1.08);box-shadow:0 0 20px rgba(187,134,59,.6)}.timeline h3{font:700 16px/1.4 var(--sans);margin-top:26px;min-height:48px;color:#4f240d !important}.timeline p{font-size:12.5px;line-height:1.75;margin-top:10px;color:#554437 !important}.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center}.story-photo{position:relative;height:580px}.story-photo img{width:100%;height:100%;object-fit:cover;border-radius:7px}.story-copy h2{margin-bottom:28px}.story-copy>p:not(.eyebrow){color:var(--muted);font-size:14px;line-height:1.9}.story-copy .text-link{margin-top:9px}.story-extra{margin-top:24px}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:95px;align-items:start}.contact-copy h2{font-size:43px;margin:0 0 25px}.contact-copy>p:not(.eyebrow){font-size:14px;max-width:370px}.contact-copy .button{margin-top:10px}.contact-copy p.small-note{font-size:12px;line-height:2.1;margin-top:35px;color:#aebe9f}.contact-form{padding-top:7px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}.field{margin-bottom:20px}.field label{display:flex;gap:4px;align-items:baseline;font-size:13px;font-weight:700;margin-bottom:8px;color:#43270f !important;}.field label span{color:#d3dfb9}.field label .optional{font-size:9px;opacity:.65;margin-left:auto}input,textarea{display:block;width:100%;background:#ffffff06;border:1px solid #8ea07e75;border-radius:4px;padding:13px 15px;color:var(--cream);font-size:13px;outline:0;resize:vertical;transition:border-color .2s,background .2s}input::placeholder,textarea::placeholder{color:#a7b49f}input:focus,textarea:focus{border-color:#dae5c3;background:#ffffff0b;box-shadow:0 0 0 2px #e0e9c920}input[aria-invalid=true],textarea[aria-invalid=true]{border-color:#f2b5a2}.error{display:block;color:#ffd0be;font-size:11px;line-height:1.5;margin-top:5px}.error:empty{display:none}.submit{width:100%;margin-top:4px}.form-note{font-size:10px!important;text-align:center;margin:12px 0 0;color:#b0c2a6!important}.form-feedback{font-size:13px;margin-top:15px;border-top:1px solid #91a77c;padding-top:14px}.partners{padding:37px 0 40px;overflow:hidden}.partner-heading{display:flex;justify-content:space-between;align-items:center;gap:25px}.partner-heading h2{font:500 13px var(--sans);letter-spacing:0}.partner-heading small{font-size:10px;color:var(--muted)}.marquee{overflow:hidden;margin-top:24px;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}.marquee-track{display:flex;width:max-content;animation:marquee 65s linear infinite}.marquee:hover .marquee-track{animation-play-state:paused}.logo-set{display:flex;gap:16px;padding-right:16px}.logo-set{display:flex;gap:18px;padding-right:18px;align-items:center}.partner-logo-item{width:175px;height:70px;border-radius:8px;background:#ffffff;border:1px solid #decbc0;display:flex;align-items:center;justify-content:center;padding:8px 16px;box-shadow:0 2px 6px rgba(0,0,0,0.03);transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;flex-shrink:0}.partner-logo-item:hover{transform:translateY(-3px);border-color:#43270f;box-shadow:0 6px 18px rgba(67,39,15,0.16)}.partner-logo-item img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:4px;filter:grayscale(100%) opacity(0.8);transition:filter .35s ease,transform .35s ease}.partner-logo-item:hover img{filter:grayscale(0%) opacity(1);transform:scale(1.05)}.nav-item-dropdown{position:relative;display:inline-flex;align-items:center}.nav-dropdown-trigger{display:inline-flex !important;align-items:center !important;gap:6px !important;cursor:pointer}.dropdown-arrow{transition:transform .25s ease;flex-shrink:0}.nav-item-dropdown:hover .dropdown-arrow,.nav-item-dropdown:focus-within .dropdown-arrow{transform:rotate(180deg)}.nav-dropdown-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:215px;background:#ffffff;border:1px solid #decbc0;border-radius:12px;box-shadow:0 12px 32px rgba(67,39,15,.12);padding:8px;z-index:1000;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .25s cubic-bezier(.22,1,.36,1),transform .25s cubic-bezier(.22,1,.36,1),visibility .25s;display:flex;flex-direction:column;gap:4px}.nav-dropdown-menu::before{content:'';position:absolute;top:-10px;left:0;right:0;height:10px}.nav-item-dropdown:hover .nav-dropdown-menu,.nav-item-dropdown:focus-within .nav-dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}.nav-dropdown-menu a{display:block !important;padding:9px 14px !important;font-size:13px !important;font-weight:600 !important;color:#43270f !important;text-decoration:none !important;border-radius:8px !important;border:1px solid transparent !important;transition:all .2s ease !important;white-space:nowrap !important;text-transform:uppercase !important;letter-spacing:.5px !important;background:transparent !important;box-shadow:none !important}.nav-dropdown-menu a:hover{color:#b87b38 !important;background:rgba(184,123,56,0.08) !important}.nav-dropdown-menu a.active{color:#43270f !important;background:#decbc0 !important;border-color:#decbc0 !important;font-weight:700 !important}@media(max-width:860px){.nav-item-dropdown{width:100%;flex-direction:column;align-items:flex-start}.nav-dropdown-trigger{width:100% !important;justify-content:space-between !important}.nav-dropdown-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;background:rgba(222,203,192,0.4);border-radius:8px;padding:6px 6px 6px 14px;margin-top:6px;width:100%;min-width:0}.nav-dropdown-menu::before{display:none}.nav-dropdown-menu a{font-size:13px !important;padding:8px 12px !important}}.nav-header-icons{display:inline-flex;align-items:center;gap:10px}.nav-icon-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:transparent;border:none;color:#43270f;cursor:pointer;text-decoration:none;transition:all .2s ease;padding:0;line-height:1;user-select:none;-webkit-tap-highlight-color:transparent}.nav-icon-btn:hover{background:rgba(184,123,56,0.1);color:#b87b38;transform:translateY(-1px)}.nav-icon-btn:active{transform:translateY(0)}.nav-icon-btn svg{display:block;stroke:currentColor}.cart-badge{position:absolute;top:-2px;right:-4px;min-width:19px;height:19px;padding:0 4px;background:#e5322d;color:#ffffff;font-size:11px;font-weight:700;line-height:15px;text-align:center;border-radius:999px;border:2px solid #ffffff;box-shadow:0 2px 5px rgba(229,50,45,0.4);pointer-events:none;display:inline-flex;align-items:center;justify-content:center;transition:transform .25s cubic-bezier(.175,.885,.32,1.275)}.cart-badge.bump{transform:scale(1.35)}.header-search-bar{position:absolute;top:100%;left:0;width:100%;background:rgba(246,237,228,0.98);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid #decbc0;box-shadow:0 10px 25px rgba(67,39,15,0.08);padding:12px 24px;animation:searchSlideDown .2s ease forwards;z-index:999}@keyframes searchSlideDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.header-search-inner{max-width:680px;margin:0 auto;display:flex;align-items:center;gap:12px;background:#ffffff;border:1px solid #decbc0;border-radius:999px;padding:8px 18px}.header-search-inner svg{color:#b87b38;flex-shrink:0}.header-search-inner input{flex:1;border:none;background:transparent;font-size:14px;color:#43270f;outline:none;font-family:inherit}.header-search-inner input::placeholder{color:rgba(67,39,15,0.5)}.header-search-close{background:transparent;border:none;font-size:15px;color:rgba(67,39,15,0.6);cursor:pointer;padding:4px 6px;line-height:1;border-radius:50%;transition:color .2s}.header-search-close:hover{color:#43270f}@media(max-width:640px){.nav-header-icons{gap:4px}.nav-icon-btn{width:36px;height:36px}}footer{padding:55px 0 24px;background:#193d25;color:#c3cfba}footer .logo{color:var(--cream)}footer .logo span{color:#c3cfba}.footer-main{display:grid;grid-template-columns:2fr 1fr 1fr;gap:65px;padding-bottom:42px}.footer-main p{font-size:12px;line-height:2;margin:20px 0 0}.footer-links{display:flex;flex-direction:column;gap:10px;font-size:12px}.footer-links>span{font-size:10px;letter-spacing:1.8px;margin-bottom:8px;color:#91ab84}.footer-links p{margin:0}.footer-bottom{border-top:1px solid #93a38233;padding-top:20px;display:flex;justify-content:space-between;font-size:10px;color:#94aa87}dialog{width:min(570px,calc(100% - 40px));background:var(--cream);color:var(--forest);border:0;border-radius:12px;padding:45px;box-shadow:0 30px 100px #0003}dialog::backdrop{background:#13271899;backdrop-filter:blur(5px)}dialog h2{font-size:33px;margin-bottom:20px}dialog p{font-size:14px}dialog dl{font-size:13px;margin:25px 0}dialog dl div{display:grid;grid-template-columns:120px 1fr;border-top:1px solid var(--line);padding:12px 0}dialog dd{margin:0;color:var(--muted)}.dialog-close{position:absolute;right:15px;top:10px;font-size:28px;border:0;background:none;color:var(--forest)}.toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);max-width:calc(100% - 40px);width:480px;background:var(--cream);color:var(--forest);padding:18px 25px;border:1px solid #899b7b;box-shadow:0 8px 40px #0002;border-radius:8px;z-index:100;font-size:13px}.reveal{transition:opacity .8s,transform .8s}.reveal.pending{opacity:0;transform:translateY(25px)}@keyframes hero-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@keyframes zoom{to{transform:scale(1.045)}}@keyframes marquee{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media(min-width:1500px){.hero-product{right:calc((100vw - 1440px)/2)}.hero-backdrop{background-size:cover}}
@media(max-width:1200px){nav{gap:15px}nav a{font-size:11px}.nav-wrap{width:calc(100% - 48px);gap:15px}.nav-actions{gap:12px}.hero-product{right:-6%;max-width:57%}.hero h1{font-size:44px}.custom-grid,.story-grid,.material-grid,.contact-grid{gap:50px}.hero .eyebrow{font-size:10px}.laundry-crop{transform:translateX(-50%) scale(.85)}.hanging-crop{transform:translateX(-50%) scale(.9)}.product-card:hover .laundry-crop{transform:translateX(-50%) scale(.9)}.product-card:hover .hanging-crop{transform:translateX(-50%) scale(.95)}.card-actions{align-items:flex-start;flex-direction:column}.custom-copy h2{font-size:42px}}
@media(max-width:960px){:root{--section:75px}.nav-wrap{height:80px}nav{display:none;position:absolute;top:80px;left:0;width:100%;background:var(--cream);padding:25px 40px;box-shadow:0 15px 25px #203c2220}nav.open{display:flex;flex-direction:column;align-items:flex-start;gap:18px}nav a{font-size:14px}.menu-button{display:block}.hero h1{font-size:40px}.hero-content{padding-top:155px}.hero-description{max-width:390px}.hero-product{max-width:52%;right:-6%;bottom:150px}.hero{height:820px}.custom-grid,.material-grid,.story-grid,.contact-grid{gap:40px}.custom-copy h2,h2,.contact-copy h2{font-size:36px}.product-grid{gap:18px}.product-visual{height:290px}.laundry-crop{top:50px;transform:translateX(-50%) scale(.65)}.hanging-crop{top:45px;transform:translateX(-50%) scale(.7)}.product-card:hover .laundry-crop{transform:translateX(-50%) scale(.7)}.product-card:hover .hanging-crop{transform:translateX(-50%) scale(.75)}.product-info h3{font-size:21px}.visual-caption{font-size:8px}.round-window{inset:50px 20px 40px}.timeline{grid-template-columns:repeat(3,1fr);row-gap:30px}.material-visual{height:430px}.weave-detail{height:330px}.story-photo{height:520px}.custom-options{grid-template-columns:repeat(2,1fr)}.form-row{grid-template-columns:1fr;gap:0}}
@media(max-width:640px){:root{--section:60px}.container{width:calc(100% - 40px)}.nav-wrap{width:calc(100% - 36px);height:72px}.logo{font-size:32px}.logo span{font-size:6px}.nav-actions>.button{display:none}.nav-actions{gap:20px}nav{top:72px}.hero{height:940px}.hero-content{padding-top:125px}.hero h1{font-size:34px;letter-spacing:-1.2px;line-height:1.28}.hero .eyebrow{font-size:8px;letter-spacing:1.1px;max-width:310px}.hero-description{font-size:13px;max-width:350px;margin:22px 0}.hero .button{font-size:11px;padding:12px 15px;min-height:46px}.hero-product{width:390px;max-width:95%;right:-3%;bottom:74px}.hero-wash{background:linear-gradient(180deg,#f7f2e8 0%,#f7f2e8f5 46%,#f7f2e866 100%)}.hero-backdrop{background-size:auto 70%;background-position:center bottom}.hero-bottom{bottom:24px;gap:10px}.image-note{font-size:8px;max-width:175px}.scroll-link{font-size:8px}.section-head{display:block;margin-bottom:30px}.section-head>p{margin-top:20px!important}.eyebrow{font-size:10px;letter-spacing:1.5px;margin-bottom:15px}h2{font-size:33px}.product-grid{grid-template-columns:1fr;gap:25px}.product-visual{height:340px}.laundry-crop{transform:translateX(-50%);top:72px}.hanging-crop{transform:translateX(-50%);top:68px}.product-card:hover .laundry-crop,.product-card:hover .hanging-crop{transform:translateX(-50%) scale(1.025)}.round-window{inset:45px 50px 40px}.visual-caption{font-size:9px}.product-info{padding-top:20px}.product-info h3{font-size:25px}.product-info p{min-height:0;margin-bottom:20px}.card-actions{flex-direction:row;align-items:center}.custom-grid,.material-grid,.story-grid,.contact-grid{grid-template-columns:1fr;gap:40px}.custom-copy{grid-row:1}.custom-copy h2{font-size:40px}.custom-art>img{height:350px}.custom-options{grid-template-columns:repeat(3,1fr)}.custom-caption{font-size:8px}.material-visual{height:390px}.weave-detail{height:320px}.craft-placeholder{height:190px;width:205px;padding:20px 15px}.craft-placeholder p{font-size:22px;margin:16px 0}.timeline{grid-template-columns:repeat(2,1fr);margin-top:35px}.timeline h3{font-size:15px;margin-top:18px}.timeline p{font-size:11px}.timeline li{padding-right:20px}.story-photo{height:430px}.story-copy h2{font-size:35px}.contact-copy h2{font-size:36px}.contact-copy .small-note{display:none}.partner-heading{display:block}.partner-heading small{display:block;font-size:9px;margin-top:10px}.partner-placeholder{width:120px;height:44px}.footer-main{grid-template-columns:1fr 1fr;gap:35px}.footer-main>div:first-child{grid-column:1/-1}.footer-bottom{gap:20px;font-size:9px}.form-row{grid-template-columns:1fr}.field input,.field textarea{font-size:16px}.footer-links{font-size:11px}dialog{padding:35px 25px}dialog h2{font-size:29px}}
/* Keep supplied promotional typography outside the product viewports. */
.laundry-crop{width:222px;height:220px;top:68px}.laundry-crop img{width:740px;left:-130px;top:-110px}.hanging-crop{width:246px;height:214px;top:63px}.hanging-crop img{width:444.6px;left:-155px;top:-196px}.round-window img{object-position:50% 85%}.material-visual{transform:translateY(var(--parallax,0px));will-change:transform}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.reveal.pending{opacity:1;transform:none}.marquee-track{transform:none}.marquee-track .logo-set[aria-hidden]{display:none}.material-visual{transform:none}}
.laundry-crop{width:215px;height:194px;top:82px}.laundry-crop img{left:-142px;top:-115px}.hanging-crop{width:270px;height:230px;top:58px}.hanging-crop img{left:-147px;top:-182px}


/* === HERO-B2B.CSS === */
/* ==========================================================================
   PUFU CRAFT — B2B EXPORT STYLING (MODERN ROUNDED CURVES & B2B STORYTELLING)
   Inspired by International Corporate & Export Showcases
   Soft Rounded Borders (border-radius: 16px - 28px, Pills: 999px)
   ========================================================================== */

/* --- ROOT VARIABLES --- */
:root {
  --radius-pill: 999px;
  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --shadow-soft: 0 12px 36px rgba(28, 48, 30, 0.07);
  --shadow-card: 0 8px 24px rgba(28, 48, 30, 0.05);
}

/* --- HEADER B2B (MODERN LIGHT FROSTED THEO MẪU NỘI THẤT CAO CẤP) --- */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(220, 214, 201, 0.75);
  box-shadow: 0 4px 20px rgba(28, 48, 30, 0.05);
  transition: all 0.3s ease;
}

header.scrolled {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 8px 26px rgba(28, 48, 30, 0.09);
}

.nav-wrap {
  width: min(1280px, calc(100% - 60px));
  height: 84px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.logo:hover {
  transform: translateY(-1px);
}

.logo-img {
  height: 62px;
  width: auto;
  object-fit: contain;
  display: block;
}

.logo-footer {
  background: #ffffff;
  padding: 10px 18px;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  border: 1.5px solid #bfe2c8;
  display: inline-flex;
}

.logo-footer-img {
  height: 60px;
  width: auto;
  object-fit: contain;
  display: block;
}

@media (max-width: 640px) {
  .logo-img {
    height: 48px;
  }
  .logo-footer-img {
    height: 50px;
  }
}

nav {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

nav a {
  font-size: 13.5px;
  font-weight: 600;
  color: #2c3e2e;
  text-decoration: none;
  transition: color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
  position: relative;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
}

nav a::after,
nav .active::after {
  display: none !important;
  content: none !important;
}

nav a:hover {
  color: #124322;
  background: rgba(46, 125, 68, 0.08);
}

nav a.active {
  color: #124322;
  background: #dff2e4;
  border-color: #a8dbb4;
  font-weight: 700;
  box-shadow: 0 3px 10px rgba(46, 125, 68, 0.12);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.lang-switch {
  display: inline-flex;
  align-items: center;
  background: #f4efe6;
  padding: 3px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  border: 1px solid #e2dacd;
}

.lang-switch span {
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  color: #ffffff;
  background: #143d22;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.lang-switch button {
  background: none;
  border: none;
  padding: 4px 10px;
  color: #5c6f5e;
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--radius-pill);
  transition: all 0.2s;
}

.lang-switch button:hover {
  color: #143d22;
  background: rgba(20, 61, 34, 0.08);
}

.btn-rfq-nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 22px;
  background: linear-gradient(135deg, #2e7d44 0%, #164e29 100%);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  border-radius: var(--radius-pill);
  border: 1px solid #43a05b;
  transition: all 0.25s ease;
  text-decoration: none;
  box-shadow: 0 4px 15px rgba(46, 125, 68, 0.3);
}

.btn-rfq-nav:hover {
  background: linear-gradient(135deg, #388e52 0%, #1c5b30 100%);
  border-color: #52b788;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(46, 125, 68, 0.4);
}

/* ==========================================================================
   HERO INTERIOR DECOR — MÀU XANH LÁ CÂY TRE CHỦ ĐẠO & KHÔNG GIAN NỘI THẤT SANG TRỌNG
   Tông xanh lá cây tre (Bamboo Green: #2e7d44, #164e29, #43a05b) tươi tắn, thanh thoát
   ========================================================================== */
.hero-interior-decor {
  position: relative;
  min-height: calc(100vh - 80px);
  margin-top: 80px;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 60px 0 140px;
  background: linear-gradient(135deg, #dcf0e2 0%, #f0f7f2 45%, #e2f2e6 100%);
  border-bottom: 2px solid #bfe2c8;
}

/* KHUNG ẢNH NỘI THẤT BỐI CẢNH */
.hero-decor-backdrop {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  transition: opacity 0.5s ease, transform 0.6s ease;
}

/* LỚP GRADIENT ÁNH XANH LÁ TRE PHỦ TRONG VẮT BÊN TRÁI */
.hero-backdrop-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(224, 242, 228, 0.98) 0%,
    rgba(231, 245, 234, 0.95) 38%,
    rgba(238, 249, 241, 0.82) 56%,
    rgba(244, 252, 246, 0.35) 75%,
    transparent 100%
  );
  pointer-events: none;
}

/* CONTAINER NỘI DUNG */
.hero-interior-container {
  position: relative;
  z-index: 3;
}

.hero-interior-card {
  max-width: 620px;
  position: relative;
}

.hero-interior-card::before {
  content: '';
  position: absolute;
  top: -40px;
  left: -40px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(46, 125, 68, 0.14) 0%, rgba(82, 183, 136, 0.06) 50%, transparent 70%);
  filter: blur(40px);
  z-index: -1;
  pointer-events: none;
}

/* TAG LÁ CÂY TRE TƯƠI MÁT */
.hero-leaf-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border-radius: var(--radius-pill);
  border: 2px solid #2e7d44;
  background: #d4eed8;
  color: #124322;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  margin-bottom: 24px;
  box-shadow: 0 4px 14px rgba(46, 125, 68, 0.22);
}

.hero-leaf-badge .leaf-icon {
  font-size: 15px;
}

/* TIÊU ĐỀ LỚN MÀU XANH TRE THẪM & XANH LÁ TRE */
.hero-interior-title {
  font-family: var(--sans);
  font-size: 48px;
  font-weight: 850;
  line-height: 1.16;
  color: #124322;
  letter-spacing: -1.2px;
  margin: 0 0 20px 0;
  text-transform: uppercase;
}

.hero-interior-title .title-accent {
  color: inherit;
  position: relative;
  display: inline;
}

.hero-interior-title .title-accent::after {
  display: none !important;
  content: none !important;
}

/* ĐOẠN PHỤ ĐỀ */
.hero-interior-desc {
  font-size: 16px;
  line-height: 1.75;
  color: #38533e;
  margin: 0 0 32px 0;
  max-width: 530px;
  font-weight: 450;
}

/* HÀNG NÚT BẤM (CTA PILL) */
.hero-interior-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.btn-interior-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 32px;
  background: linear-gradient(135deg, #2e7d44 0%, #164e29 100%);
  color: #ffffff;
  font-size: 14.5px;
  font-weight: 700;
  border-radius: var(--radius-pill);
  text-decoration: none;
  border: 1.5px solid #43a05b;
  box-shadow: 0 8px 25px rgba(46, 125, 68, 0.35);
  transition: all 0.25s ease;
}

.btn-interior-primary:hover {
  background: linear-gradient(135deg, #388e52 0%, #1c5b30 100%);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(46, 125, 68, 0.45);
}

.btn-interior-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  padding: 0 28px;
  background: rgba(255, 255, 255, 0.96);
  color: #164e29;
  font-size: 14px;
  font-weight: 700;
  border-radius: var(--radius-pill);
  border: 2px solid #2e7d44;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.25s ease;
  box-shadow: 0 4px 15px rgba(46, 125, 68, 0.08);
}

.btn-interior-secondary:hover {
  background: #2e7d44;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(46, 125, 68, 0.3);
}

/* THANH CAM KẾT NỔI Ở ĐÁY HERO */
.hero-floating-trust-bar {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1240px, calc(100% - 40px));
  background: rgba(246, 253, 248, 0.98);
  backdrop-filter: blur(16px);
  border-radius: 20px;
  border: 2px solid #a8dbb4;
  box-shadow: 0 14px 40px rgba(18, 67, 34, 0.12);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 18px 24px;
  z-index: 4;
}

.trust-bar-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 4px 18px;
  border-right: 1px solid #c2e5cb;
}

.trust-bar-item:last-child {
  border-right: none;
}

.trust-icon {
  color: #2e7d44;
  background: #dff2e4;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #b8e3c3;
  flex-shrink: 0;
}

.trust-text strong {
  font-size: 13px;
  font-weight: 800;
  color: #124322;
  display: block;
  letter-spacing: 0.4px;
  line-height: 1.3;
}

.trust-text p {
  font-size: 11.5px;
  color: #385e42;
  margin: 3px 0 0 0;
  line-height: 1.35;
}

/* DIALOG XOAY 360° CHIẾC GIỎ */
#spin-360-dialog {
  border: 1px solid #dcd4c6;
  border-radius: 24px;
  padding: 30px;
  background: radial-gradient(ellipse at 50% 30%, #173b22 0%, #0d2415 100%);
  color: #ffffff;
  max-width: 580px;
  width: 90%;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
}

#spin-360-dialog::backdrop {
  background: rgba(10, 24, 14, 0.75);
  backdrop-filter: blur(8px);
}

.spin-dialog-content {
  text-align: center;
}

.dialog-badge {
  display: inline-block;
  background: rgba(242, 173, 56, 0.15);
  border: 1px solid rgba(242, 173, 56, 0.4);
  color: #f2ad38;
  padding: 5px 16px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.spin-dialog-content h2 {
  font-size: 26px;
  color: #f2ad38;
  margin: 0 0 8px;
}

.spin-dialog-content p {
  font-size: 13.5px;
  color: #cfdcce;
  margin: 0 auto 20px;
  max-width: 440px;
}

.spin-dialog-footer {
  margin-top: 25px;
}

/* SÂN KHẤU CHIẾC GIỎ XOAY 360 ĐỘ */
.basket-360-stage {
  perspective: 1200px;
  width: 380px;
  height: 330px;
  margin: 0 auto 15px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  user-select: none;
}

.turntable-disc {
  position: absolute;
  bottom: 25px;
  width: 310px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(46, 125, 68, 0.4) 0%, rgba(242, 173, 56, 0.25) 50%, transparent 75%);
  border: 1.5px solid rgba(242, 173, 56, 0.45);
  box-shadow: 0 0 35px rgba(46, 125, 68, 0.6), inset 0 0 20px rgba(242, 173, 56, 0.35);
  transform: rotateX(75deg);
  pointer-events: none;
  transition: transform 0.1s linear;
}

.basket-spinner {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  transition: transform 0.08s ease-out;
}

.basket-spinner img {
  max-width: 330px;
  max-height: 280px;
  object-fit: contain;
  filter: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.65));
  animation: basket-bob 4s ease-in-out infinite alternate;
  user-select: none;
  -webkit-user-drag: none;
}

@keyframes basket-bob {
  0% { transform: translateY(0px); }
  100% { transform: translateY(-10px); }
}

.spin-status-badge {
  position: absolute;
  bottom: 0px;
  background: rgba(14, 38, 20, 0.9);
  backdrop-filter: blur(8px);
  color: #f2ad38;
  border: 1px solid rgba(242, 173, 56, 0.4);
  padding: 5px 16px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  pointer-events: none;
}

@media (max-width: 960px) {
  .hero-interior-title {
    font-size: 36px;
  }
  .hero-floating-trust-bar {
    grid-template-columns: repeat(2, 1fr);
    position: static;
    transform: none;
    margin: 40px auto 0;
  }
  .trust-bar-item {
    border-right: none;
  }
}

/* --- THANH ĐỊNH LƯỢNG 4 CHỈ SỐ B2B (METRIC STATS BAR — GIỐNG ALEXA WH) --- */
.hero-metric-bar {
  background: #ffffff;
  border-radius: var(--radius-md);
  border: 1px solid #e4ddd0;
  box-shadow: 0 10px 30px rgba(31, 74, 43, 0.05);
  margin: 0 auto 35px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
  z-index: 4;
}

.metric-col {
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #eee8dc;
}

.metric-col:last-child {
  border-right: none;
}

.metric-number {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 600;
  color: var(--forest);
  line-height: 1.1;
  margin-bottom: 4px;
}

.metric-col strong {
  font-size: 13.5px;
  font-weight: 600;
  color: #2b3d2c;
  margin-bottom: 3px;
}

.metric-col p {
  font-size: 11.5px;
  color: #727f6e;
  line-height: 1.45;
  margin: 0;
}

/* --- DẢI CAM KẾT XUẤT KHẨU (EXPORT CAPABILITIES STRIP) --- */
.hero-export-strip {
  background: #f0ebe0;
  border-top: 1px solid #e3dcce;
  position: relative;
  z-index: 3;
}

.strip-container {
  width: min(1280px, calc(100% - 60px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.strip-col {
  padding: 22px 24px;
  border-right: 1px solid #e3dcce;
  display: flex;
  flex-direction: column;
}

.strip-col:last-child {
  border-right: none;
}

.strip-col-num {
  font-family: var(--serif);
  font-size: 13px;
  font-style: italic;
  color: var(--green);
  margin-bottom: 4px;
}

.strip-col h3 {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--forest);
  margin: 0 0 3px 0;
  letter-spacing: -0.2px;
}

.strip-col p {
  font-size: 11.5px;
  line-height: 1.5;
  color: #63705f;
  margin: 0;
}

/* ==========================================================================
   SECTION CÂU CHUYỆN KHÁCH HÀNG & DỰ ÁN THỰC TẾ (CUSTOMER STORIES & CASE STUDIES)
   GIỚI THIỆU SẢN PHẨM QUA LĂNG KÍNH CỦA KHÁCH HÀNG & ỨNG DỤNG THẬT
   ========================================================================== */

.customer-stories-section {
  padding: 95px 0 90px;
  background: #fdfbf7;
  border-bottom: 1px solid #e5dfd3;
}

.stories-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 55px;
}

.stories-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: #ede6d8;
  color: var(--forest);
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 16px;
  border: 1px solid #ded5c2;
}

.stories-header h2 {
  font-size: 40px;
  line-height: 1.25;
  color: var(--forest);
  margin-bottom: 16px;
  letter-spacing: -1px;
}

.stories-header h2 em {
  font-style: italic;
  color: var(--green);
}

.stories-header p {
  font-size: 15.5px;
  color: #5d6d5a;
  line-height: 1.75;
  margin: 0;
}

/* LƯỚI CÂU CHUYỆN KHÁCH HÀNG (CASE STUDY GRID) */
.stories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 50px;
}

.story-card {
  background: #ffffff;
  border-radius: var(--radius-md);
  border: 1px solid #e5ded2;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  transition: all 0.35s ease;
}

.story-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(31, 74, 43, 0.1);
  border-color: #cbd4c3;
}

.story-media {
  position: relative;
  height: 220px;
  overflow: hidden;
  background: #eee8da;
}

.story-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.story-card:hover .story-media img {
  transform: scale(1.05);
}

.story-category-pill {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(247, 244, 238, 0.95);
  backdrop-filter: blur(8px);
  color: var(--forest);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.story-body {
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.story-title {
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.35;
  color: var(--forest);
  margin: 0 0 12px 0;
  font-weight: 600;
}

.story-quote {
  font-size: 13.5px;
  font-style: italic;
  color: #3b4d3c;
  line-height: 1.7;
  margin-bottom: 16px;
  padding-left: 12px;
  border-left: 3px solid var(--green);
}

.story-desc {
  font-size: 13px;
  line-height: 1.65;
  color: #63705f;
  margin: 0 0 20px 0;
  flex-grow: 1;
}

/* THẺ SẢN PHẨM GẮN LIỀN VỚI CÂU CHUYỆN */
.story-product-tag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f7f3ea;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid #e7dfd0;
  margin-top: auto;
}

.story-product-tag div {
  display: flex;
  flex-direction: column;
}

.story-product-tag span {
  font-size: 10px;
  color: #7b8876;
  text-transform: uppercase;
  font-weight: 600;
}

.story-product-tag strong {
  font-size: 12.5px;
  color: var(--forest);
  font-weight: 600;
}

.story-product-tag button,
.story-product-tag a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  background: #ffffff;
  color: var(--forest);
  border: 1px solid #dcd4c3;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}

.story-product-tag button:hover,
.story-product-tag a:hover {
  background: var(--forest);
  color: #ffffff;
  border-color: var(--forest);
}

/* CÂU CHUYỆN THỢ THỦ CÔNG & CỘNG ĐỒNG (ARTISAN BANNER) */
.artisan-story-banner {
  background: linear-gradient(135deg, #1f4a2b 0%, #153820 100%);
  border-radius: var(--radius-lg);
  padding: 42px 48px;
  color: var(--cream);
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 40px;
  align-items: center;
  box-shadow: 0 16px 40px rgba(18, 48, 25, 0.15);
}

.artisan-banner-content h3 {
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1.3;
  color: #ffffff;
  margin-bottom: 14px;
  font-weight: 500;
}

.artisan-banner-content p {
  font-size: 14.5px;
  line-height: 1.8;
  color: #d1dcce;
  margin-bottom: 22px;
}

.artisan-pills {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.artisan-pill-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.1);
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  color: #e5ede2;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.artisan-banner-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}

.btn-story-talk {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--cream);
  color: var(--forest);
  height: 50px;
  padding: 0 28px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

.btn-story-talk:hover {
  background: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.2);
}

/* --- BO TRÒN TOÀN BỘ CÁC NÚT VÀ CARD KHÁC TRÊN TRANG --- */
.product-card {
  border-radius: var(--radius-md) !important;
}

.product-visual {
  border-radius: var(--radius-md) !important;
}

.button {
  border-radius: var(--radius-pill) !important;
}

.custom-options span {
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.1);
  padding: 6px 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  text-align: center;
}

.timeline li .step-number {
  border-radius: 50% !important;
}

.partner-placeholder {
  border-radius: var(--radius-pill) !important;
}

/* --- RESPONSIVE OPTIMIZATION --- */
@media (max-width: 1080px) {
  .hero-b2b h1 {
    font-size: 38px;
  }
  .hero-b2b-grid {
    grid-template-columns: 1.1fr 0.9fr;
    gap: 36px;
  }
  .stage-podium {
    height: 480px;
  }
  .floating-spec-card {
    left: 10px;
    bottom: 15px;
  }
  .hero-metric-bar {
    grid-template-columns: repeat(2, 1fr);
  }
  .metric-col:nth-child(2) {
    border-right: none;
  }
  .metric-col:nth-child(-n+2) {
    border-bottom: 1px solid #eee8dc;
  }
  .stories-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .artisan-story-banner {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .artisan-banner-cta {
    align-items: flex-start;
  }
}

@media (max-width: 860px) {
  .hero-b2b {
    padding-top: 110px;
  }
  .hero-b2b-grid {
    grid-template-columns: 1fr;
    gap: 40px;
    min-height: auto;
  }
  .hero-b2b-desc {
    max-width: 100%;
  }
  .hero-b2b-stage {
    order: -1;
  }
  .stage-podium {
    height: 380px;
  }
  .stage-product-img {
    max-height: 310px;
  }
  .floating-interior-badge {
    top: -10px;
    right: 10px;
    width: 120px;
  }
  .floating-interior-badge img {
    height: 75px;
  }
  .floating-spec-card {
    left: 10px;
    bottom: 10px;
    padding: 12px 16px;
  }
  .strip-container {
    grid-template-columns: repeat(2, 1fr);
  }
  .strip-col:nth-child(2) {
    border-right: none;
  }
  .strip-col:nth-child(-n+2) {
    border-bottom: 1px solid #e3dcce;
  }
  .stories-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .nav-wrap {
    width: calc(100% - 32px);
    height: 68px;
  }
  .logo {
    font-size: 26px;
  }
  .btn-rfq-nav {
    display: none;
  }
  .hero-b2b h1 {
    font-size: 31px;
    letter-spacing: -0.8px;
  }
  .hero-b2b-desc {
    font-size: 14px;
  }
  .hero-b2b-pillars {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .hero-b2b-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .btn-primary-rfq,
  .btn-secondary-catalog {
    width: 100%;
    height: 48px;
  }
  .stage-podium {
    height: 290px;
    border-radius: var(--radius-md);
  }
  .stage-product-img {
    max-height: 230px;
  }
  .floating-interior-badge {
    display: none;
  }
  .floating-spec-card {
    position: static;
    margin-top: 15px;
    max-width: 100%;
    box-shadow: none;
  }
  .hero-metric-bar {
    grid-template-columns: 1fr;
  }
  .metric-col {
    border-right: none;
    border-bottom: 1px solid #eee8dc;
    padding: 18px 20px;
  }
  .metric-col:last-child {
    border-bottom: none;
  }
  .strip-container {
    grid-template-columns: 1fr;
  }
  .strip-col {
    border-right: none;
    border-bottom: 1px solid #e3dcce;
    padding: 16px 20px;
  }
  .strip-col:last-child {
    border-bottom: none;
  }
  .artisan-story-banner {
    padding: 28px 22px;
  }
}


/* ==========================================================================
   SECTION ABOUT PUFU CRAFT (NATURAL SUSTAINABLE GREEN & GOLDEN OAK)
   Bố cục 2 cột: Trái là ảnh dây đan giỏ nghệ thuật, Phải là câu chuyện & giá trị
   Màu chủ đạo: Xanh lá cây tre (Bamboo Green) đặc trưng thương hiệu
   ========================================================================== */
.brand-story-section {
  background: linear-gradient(155deg, #eaf6ed 0%, #f4faf6 48%, #e3f3e7 100%);
  color: #1a3d24;
  padding: 105px 0 100px;
  border-top: 2px solid #bfe2c8;
  border-bottom: 2px solid #bfe2c8;
  position: relative;
  overflow: hidden;
}

.brand-story-section::before {
  content: '';
  position: absolute;
  top: -100px;
  left: -80px;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(67, 160, 91, 0.14) 0%, transparent 70%);
  filter: blur(50px);
  pointer-events: none;
}

.brand-story-section::after {
  content: '';
  position: absolute;
  bottom: -80px;
  right: -50px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(46, 125, 68, 0.12) 0%, transparent 70%);
  filter: blur(50px);
  pointer-events: none;
}

.brand-story-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 70px;
  align-items: center;
  position: relative;
  z-index: 2;
}

/* CỘT TRÁI: KHUNG NGHỆ THUẬT HÌNH CÁNH LÁ / HỮU CƠ & ẢNH SỢI DÂY GIẤY ĐAN */
.story-artistic-visual {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}

.story-leaf-frame {
  width: 100%;
  height: 490px;
  border-radius: 40% 60% 55% 45% / 45% 45% 55% 55%;
  overflow: hidden;
  box-shadow: 0 22px 50px rgba(22, 78, 41, 0.2);
  border: 6px solid #ffffff;
  outline: 3.5px solid #2e7d44;
  background: #dff0e3;
  position: relative;
  transition: all 0.4s ease;
}

.story-artistic-visual:hover .story-leaf-frame {
  border-radius: 46% 54% 52% 48% / 48% 46% 54% 52%;
  box-shadow: 0 28px 60px rgba(22, 78, 41, 0.26);
  outline-color: #388e52;
}

.story-leaf-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  transition: transform 0.6s ease;
}

.story-artistic-visual:hover .story-leaf-frame img {
  transform: scale(1.05);
}

/* KHUNG PHỤ TRÒN LỒNG GHÉP ẢNH SẢN PHẨM HOÀN THIỆN */
.story-circle-inset {
  position: absolute;
  bottom: -22px;
  right: -22px;
  width: 195px;
  height: 195px;
  border-radius: 50%;
  overflow: hidden;
  border: 5px solid #ffffff;
  outline: 3px solid #2e7d44;
  box-shadow: 0 16px 38px rgba(22, 78, 41, 0.22);
  background: #ffffff;
  z-index: 2;
  transition: transform 0.4s ease, outline-color 0.3s ease;
}

.story-artistic-visual:hover .story-circle-inset {
  transform: scale(1.06) translateY(-4px);
  outline-color: #388e52;
}

.story-circle-inset img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.story-craft-tag {
  position: absolute;
  top: 18px;
  left: 10px;
  background: linear-gradient(135deg, #2e7d44 0%, #164e29 100%);
  border: 1.5px solid #52b788;
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 800;
  padding: 7px 18px;
  border-radius: var(--radius-pill);
  box-shadow: 0 6px 18px rgba(22, 78, 41, 0.35);
  z-index: 3;
  letter-spacing: 0.6px;
}

/* CỘT PHẢI: NỘI DUNG CÂU CHUYỆN (CHUẨN FORM MẪU EURO FARM) */
.brand-story-content {
  display: flex;
  flex-direction: column;
}

.story-category-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #d4edd8;
  border: 2px solid #2e7d44;
  color: #124322;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px 18px;
  border-radius: var(--radius-pill);
  width: fit-content;
  margin-bottom: 16px;
  box-shadow: 0 4px 12px rgba(46, 125, 68, 0.15);
}

.story-leaf-icon {
  font-size: 15px;
}

.brand-story-heading {
  font-family: var(--sans);
  font-size: 38px;
  font-weight: 850;
  line-height: 1.25;
  color: #124322;
  letter-spacing: -0.8px;
  margin: 0 0 20px 0;
}

.story-heading-accent {
  color: inherit;
  position: relative;
  display: inline;
}

.story-heading-accent::after {
  display: none !important;
  content: none !important;
}

.brand-story-paragraph {
  font-size: 15.5px;
  line-height: 1.8;
  color: #2b5435;
  margin: 0 0 16px 0;
}

.brand-story-paragraph strong {
  color: #124322;
  font-weight: 750;
}

/* 2 KHỐI NỔI BẬT THEO FORM MẪU */
.story-features-row {
  display: flex;
  gap: 18px;
  margin: 24px 0 32px;
}

.story-feature-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 20px;
  background: #ffffff;
  border: 1.5px solid #a8dbb4;
  border-radius: 16px;
  flex: 1;
  box-shadow: 0 6px 18px rgba(22, 78, 41, 0.08);
  transition: all 0.25s ease;
}

.story-feature-item:hover {
  border-color: #2e7d44;
  background: #f0faf3;
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(22, 78, 41, 0.14);
}

.feature-item-icon {
  color: #2e7d44;
  background: #dff2e4;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #b8e3c3;
  flex-shrink: 0;
}

.feature-item-text strong {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: #124322;
  margin-bottom: 3px;
}

.feature-item-text small {
  display: block;
  font-size: 12px;
  color: #416b4b;
}

/* HÀNG NÚT BẤM VÀ LIÊN HỆ THEO MẪU */
.story-action-group {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.btn-story-explore {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 32px;
  background: linear-gradient(135deg, #2e7d44 0%, #164e29 100%);
  color: #ffffff;
  font-size: 14.5px;
  font-weight: 700;
  border-radius: var(--radius-pill);
  text-decoration: none;
  border: 1.5px solid #43a05b;
  box-shadow: 0 8px 24px rgba(46, 125, 68, 0.35);
  transition: all 0.25s ease;
}

.btn-story-explore:hover {
  background: linear-gradient(135deg, #388e52 0%, #1c5b30 100%);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(46, 125, 68, 0.45);
}

.btn-story-explore .btn-arrow {
  font-size: 16px;
  transition: transform 0.2s ease;
}

.btn-story-explore:hover .btn-arrow {
  transform: translateX(4px);
}

.story-hotline-box {
  display: flex;
  align-items: center;
  gap: 14px;
}

.hotline-icon {
  font-size: 22px;
  color: #2e7d44;
  background: #d4edd8;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #a8dbb4;
  flex-shrink: 0;
}

.hotline-text span {
  display: block;
  font-size: 12px;
  color: #416b4b;
  font-weight: 600;
}

.hotline-text strong {
  display: block;
  font-size: 17px;
  font-weight: 800;
  color: #ea9624;
  letter-spacing: 0.3px;
}

@media (max-width: 960px) {
  .brand-story-grid {
    grid-template-columns: 1fr;
    gap: 45px;
  }
  .brand-story-heading {
    font-size: 30px;
  }
  .story-features-row {
    flex-direction: column;
    gap: 12px;
  }
  .story-leaf-frame {
    height: 380px;
  }
  .story-circle-inset {
    width: 140px;
    height: 140px;
    right: 0;
    bottom: -15px;
  }
}



/* ==========================================================================
   SECTION SẢN PHẨM NỔI BẬT (ĐỒNG BỘ PHONG CÁCH B2B XANH LÁ CÂY TRE)
   Card bo tròn sang trọng, hình ảnh sạch nét, thông số rõ ràng & nút bấm đồng bộ
   ========================================================================== */
.products-b2b-section {
  background: linear-gradient(180deg, #f5faf6 0%, #ffffff 50%, #edf7f0 100%);
  padding: 100px 0 105px;
  border-bottom: 2px solid #bfe2c8;
  position: relative;
}

.products-b2b-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-bottom: 52px;
}

.products-header-left {
  flex-shrink: 0;
}

.products-b2b-heading {
  font-family: var(--sans);
  font-size: 40px;
  font-weight: 850;
  line-height: 1.2;
  color: #124322;
  letter-spacing: -0.9px;
  margin: 0;
}

.products-header-desc {
  max-width: 520px;
  font-size: 15px;
  line-height: 1.75;
  color: #355c3e;
  margin: 0;
}

.product-grid-b2b {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

/* THIẾT KẾ CARD THEO ẢNH 1 & ẢNH 2 */
.product-card-b2b {
  background: #f7f5f0;
  border-radius: 16px;
  border: 1px solid #e5e0d6;
  box-shadow: 0 6px 20px rgba(28, 48, 30, 0.04);
  padding: 12px 12px 22px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  height: 420px;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease;
}

.product-card-b2b:hover {
  transform: translateY(-6px);
  border-color: #d5ccbe;
  box-shadow: 0 16px 38px rgba(28, 48, 30, 0.1);
}

/* KHUNG ẢNH TRẮNG VUÔNG VỨC THEO ẢNH 1 — KHÔNG BO TRÒN ẢNH */
.product-visual-b2b {
  position: relative;
  height: 315px;
  background: #ffffff;
  border-radius: 8px;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  flex-shrink: 0;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.product-visual-b2b.is-lifestyle {
  padding: 0;
}

.product-visual-b2b img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 0 !important;
  display: block;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.product-visual-b2b.is-lifestyle img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  border-radius: 0 !important;
}

.product-card-b2b:hover .product-visual-b2b img {
  transform: translateY(-8px) scale(1.02);
}

/* NỘI DUNG THÔNG TIN & HIỆU ỨNG TRƯỢT TỪ DƯỚI LÊN THEO ẢNH 2 */
.product-info-b2b {
  padding: 24px 10px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex-grow: 1;
  background: #f7f5f0;
  position: relative;
  z-index: 2;
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

.product-card-b2b:hover .product-info-b2b {
  transform: translateY(-56px);
}

.product-info-b2b h3 {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 500;
  color: #242424;
  margin: 0 0 10px 0;
  line-height: 1.35;
  cursor: pointer;
  transition: color 0.2s ease;
}

.product-info-b2b h3:hover {
  color: #124322;
}

/* GIÁ TIỀN CHỮ ĐỎ ĐẬM THEO ẢNH 1 & ẢNH 2 */
.product-price-b2b {
  font-family: var(--sans);
  font-size: 23px;
  font-weight: 750;
  color: #d61c0f;
  line-height: 1.15;
  margin: 0;
}

.product-price-b2b u {
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 700;
}

/* HÀNG NÚT BẤM (THÊM VÀO GIỎ + YÊU THÍCH) TRƯỢT TỪ DƯỚI LÊN KHI HOVER THEO ẢNH 2 */
.product-hover-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 18px;
  opacity: 0;
  transform: translateY(28px);
  pointer-events: none;
  transition: opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1), transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

.product-card-b2b:hover .product-hover-actions {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* NÚT THÊM VÀO GIỎ MÀU NÂU CARAMEL THEO ẢNH 2 */
.btn-add-cart, .btn-contact-now {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 24px;
  border-radius: var(--radius-pill);
  border: none;
  background: #c58b4e;
  color: #ffffff;
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(197, 139, 78, 0.35);
  transition: all 0.22s ease;
  white-space: nowrap;
}

.btn-add-cart:hover, .btn-contact-now:hover {
  background: #b3793c;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(197, 139, 78, 0.45);
}

.btn-add-cart:active, .btn-contact-now:active {
  transform: translateY(1px);
}

.btn-add-cart svg, .btn-contact-now svg {
  flex-shrink: 0;
}

/* NÚT YÊU THÍCH TRÒN MÀU VÀNG CAM THEO ẢNH 2 */
.btn-wishlist {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: #ffaa1d;
  color: #222222;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(255, 170, 29, 0.35);
  transition: all 0.22s ease;
  flex-shrink: 0;
}

.btn-wishlist:hover {
  background: #f09a0a;
  transform: translateY(-1px) scale(1.06);
  box-shadow: 0 6px 18px rgba(255, 170, 29, 0.45);
}

.btn-wishlist:active {
  transform: translateY(1px) scale(0.96);
}

.btn-wishlist.active {
  background: #e63946;
  color: #ffffff;
}

.btn-wishlist.active svg {
  fill: currentColor;
}

.btn-product-quote .btn-arrow {
  transition: transform 0.2s ease;
}

.btn-product-quote:hover .btn-arrow {
  transform: translateX(3px);
}

/* DIALOG CHI TIẾT SẢN PHẨM ĐỒNG BỘ B2B */
#product-dialog {
  width: min(760px, calc(100% - 32px));
  background: #ffffff;
  color: #124322;
  border: 2px solid #a8dbb4;
  border-radius: 24px;
  padding: 32px;
  box-shadow: 0 28px 80px rgba(14, 45, 23, 0.35);
}

.dialog-b2b-layout {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 28px;
  align-items: center;
}

.dialog-img-box {
  background: radial-gradient(circle, #ffffff 0%, #eaf6ed 100%);
  border: 1.5px solid #bfe2c8;
  border-radius: 18px;
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow: hidden;
}

.dialog-img-box img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 12px;
}

.dialog-info-box h2 {
  font-family: var(--sans);
  font-size: 28px;
  font-weight: 850;
  color: #124322;
  margin: 6px 0 10px;
}

.dialog-info-box p {
  font-size: 14px;
  line-height: 1.65;
  color: #355c3e;
  margin: 0 0 16px;
}

.dialog-info-box dl {
  margin: 0 0 20px;
}

.dialog-info-box dl div {
  display: grid;
  grid-template-columns: 125px 1fr;
  padding: 10px 0;
  border-top: 1px solid #dff0e3;
  font-size: 13px;
}

.dialog-info-box dt {
  font-weight: 800;
  color: #124322;
}

.dialog-info-box dd {
  margin: 0;
  color: #355c3e;
}

.dialog-cta-full {
  width: 100%;
  height: 48px;
}

@media (max-width: 960px) {
  .products-b2b-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .product-grid-b2b {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .dialog-b2b-layout {
    grid-template-columns: 1fr;
  }
  .dialog-img-box {
    height: 240px;
  }
}


/* ==========================================================================
   SECTION ĐỐI TÁC & SỰ KIỆN GIAO THƯƠNG QUỐC TẾ (MALAYSIA & SINGAPORE)
   Tích hợp 2 nút mũi tên chuyển ảnh trái/phải & hiệu ứng chuyển tiếp mượt mà
   ========================================================================== */
.partner-event-section {
  padding: 95px 0 90px;
  background: linear-gradient(160deg, #edf7f0 0%, #f7fbf8 50%, #e6f4ea 100%);
  border-bottom: 2px solid #bfe2c8;
}

.partner-event-header {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 50px;
}

.partner-event-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 20px;
  background: #d4edd8;
  color: #124322;
  border-radius: var(--radius-pill);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  margin-bottom: 16px;
  border: 2px solid #2e7d44;
  box-shadow: 0 4px 12px rgba(46, 125, 68, 0.15);
}

.partner-event-header h2 {
  font-family: var(--sans);
  font-size: 38px;
  font-weight: 850;
  line-height: 1.26;
  color: #124322;
  margin-bottom: 16px;
  letter-spacing: -0.8px;
}

.partner-event-header h2 em {
  font-style: normal;
  color: inherit;
  text-decoration: none;
}

.partner-event-header p {
  font-size: 15.5px;
  color: #2f5738;
  line-height: 1.75;
  margin: 0;
}

.partner-event-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 45px;
  align-items: start;
}

/* KHUNG ẢNH CHÍNH (MAIN SPOTLIGHT FRAME) + HIỆU ỨNG CHUYỂN TIẾP */
.partner-gallery {
  display: flex;
  flex-direction: column;
}

.gallery-main-frame {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(18, 67, 34, 0.2);
  border: 5px solid #ffffff;
  outline: 2.5px solid #2e7d44;
  background: #0d2214;
  height: 480px;
  user-select: none;
}

.gallery-main-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
  transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1), transform 0.52s cubic-bezier(0.22, 1, 0.36, 1), filter 0.42s ease;
  will-change: opacity, transform;
}

/* HIỆU ỨNG CHUYỂN TIẾP THEO HƯỚNG TRÁI / PHẢI */
.gallery-main-frame img.slide-out-left {
  opacity: 0;
  transform: translateX(-36px) scale(0.97);
  filter: blur(3px);
}

.gallery-main-frame img.slide-out-right {
  opacity: 0;
  transform: translateX(36px) scale(0.97);
  filter: blur(3px);
}

.gallery-main-frame img.slide-in-from-right {
  animation: gallerySlideInRight 0.48s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.gallery-main-frame img.slide-in-from-left {
  animation: gallerySlideInLeft 0.48s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes gallerySlideInRight {
  0% {
    opacity: 0;
    transform: translateX(36px) scale(1.03);
    filter: blur(3px);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
  }
}

@keyframes gallerySlideInLeft {
  0% {
    opacity: 0;
    transform: translateX(-36px) scale(1.03);
    filter: blur(3px);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
  }
}

/* 2 NÚT MŨI TÊN CHUYỂN ẢNH TRÁI & PHẢI */
.gallery-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(14, 42, 22, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid rgba(168, 219, 180, 0.85);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.gallery-nav-btn.prev {
  left: 16px;
}

.gallery-nav-btn.next {
  right: 16px;
}

.gallery-nav-btn:hover {
  background: #2e7d44;
  border-color: #ffffff;
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 8px 25px rgba(46, 125, 68, 0.55);
}

.gallery-nav-btn:active {
  transform: translateY(-50%) scale(0.95);
}

/* BỘ ĐẾM SỐ THỨ TỰ ẢNH (01 / 04) */
.gallery-slide-counter {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(14, 38, 20, 0.88);
  backdrop-filter: blur(10px);
  color: #d4edd8;
  border: 1px solid rgba(168, 219, 180, 0.5);
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 1px;
  z-index: 4;
}

.event-media-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  max-width: calc(100% - 110px);
  background: rgba(14, 38, 20, 0.92);
  backdrop-filter: blur(10px);
  color: #f2ad38;
  border: 1px solid rgba(242, 173, 56, 0.45);
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35);
  z-index: 4;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.event-media-badge.text-transition,
.gallery-caption.text-transition {
  opacity: 0;
  transform: translateY(6px);
}

.gallery-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(7, 24, 12, 0.96) 0%, rgba(7, 24, 12, 0.78) 65%, transparent 100%);
  color: #f7f3ec;
  font-size: 13.5px;
  line-height: 1.55;
  padding: 36px 22px 20px;
  font-family: var(--sans);
  z-index: 3;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* THANH TIẾN TRÌNH CHUYỂN ẢNH Ở ĐÁY KHUNG */
.gallery-progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: rgba(255, 255, 255, 0.18);
  z-index: 5;
}

.gallery-progress-fill {
  height: 100%;
  width: 25%;
  background: linear-gradient(90deg, #52b788, #f2ad38);
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* CÁC THUMBNAIL CHỌN XEM NHANH (MINI SELECTORS) */
.gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 16px;
}

.thumb-btn {
  background: #ffffff;
  border: 2px solid #c5e3cc;
  border-radius: 14px;
  padding: 6px;
  cursor: pointer;
  text-align: left;
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.thumb-btn:hover {
  border-color: #2e7d44;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(46, 125, 68, 0.14);
}

.thumb-btn.active {
  border-color: #2e7d44;
  background: #eaf6ed;
  box-shadow: 0 0 0 3px rgba(46, 125, 68, 0.22);
}

.thumb-btn img {
  width: 100%;
  height: 64px;
  object-fit: cover;
  border-radius: 9px;
  display: block;
}

.thumb-tag {
  font-size: 11px;
  font-weight: 750;
  color: #164e29;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 3px 2px;
  line-height: 1.2;
}

.thumb-btn.active .thumb-tag {
  color: #124322;
  font-weight: 850;
}

/* CỘT PHẢI CHI TIẾT */
.partner-event-content {
  display: flex;
  flex-direction: column;
}

.event-feature-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 26px;
}

.event-feature-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: #ffffff;
  padding: 18px 20px;
  border-radius: 16px;
  border: 1.5px solid #bfe2c8;
  box-shadow: 0 6px 18px rgba(18, 67, 34, 0.05);
  transition: all 0.25s ease;
}

.event-feature-item:hover {
  transform: translateX(4px);
  border-color: #2e7d44;
  box-shadow: 0 10px 24px rgba(46, 125, 68, 0.12);
}

.event-feature-icon {
  color: #2e7d44;
  flex-shrink: 0;
  background: #eaf6ed;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #bfe2c8;
}

.event-feature-text h3 {
  font-family: var(--sans);
  font-size: 15.5px;
  font-weight: 800;
  color: #124322;
  margin: 0 0 4px 0;
}

.event-feature-text p {
  font-size: 13.5px;
  line-height: 1.65;
  color: #355c3e;
  margin: 0;
}

.partner-cta-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.btn-event-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  padding: 0 32px;
  background: linear-gradient(135deg, #2e7d44 0%, #164e29 100%);
  border: 1.5px solid #43a05b;
  color: #ffffff;
  font-size: 14.5px;
  font-weight: 750;
  border-radius: var(--radius-pill);
  text-decoration: none;
  align-self: flex-start;
  transition: all 0.25s ease;
  box-shadow: 0 8px 24px rgba(46, 125, 68, 0.3);
}

.btn-event-cta:hover {
  background: linear-gradient(135deg, #388e52 0%, #1c5b30 100%);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(46, 125, 68, 0.42);
}

.partner-guarantee {
  font-size: 13px;
  color: #164e29;
  font-weight: 700;
}

@media (max-width: 960px) {
  .partner-event-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  .gallery-main-frame {
    height: 380px;
  }

  .gallery-nav-btn {
    width: 42px;
    height: 42px;
  }

  .gallery-thumbs {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* KHUNG ẢNH QUY TRÌNH THỰC TẾ TRONG MỤC CHẤT LIỆU & TAY NGHỀ */
.craft-placeholder.craft-process-photo {
  padding: 0;
  border-radius: 12px;
  border: 7px solid var(--cream);
  overflow: hidden;
  box-shadow: 0 16px 36px rgba(31, 74, 43, 0.16);
}
.craft-placeholder.craft-process-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.craft-placeholder.craft-process-photo:hover img {
  transform: scale(1.06);
}
.craft-placeholder.craft-process-photo .process-tag {
  bottom: 10px;
  left: 10px;
  font-size: 10px;
  font-weight: 600;
  background: rgba(247, 242, 232, 0.95);
  color: #1f4a2b;
  border-radius: 4px;
  padding: 4px 8px;
}

/* ==========================================================================
   MOBILE & TABLET RESPONSIVE PERFECTION (MAX-WIDTH: 960PX, 768PX, 480PX)
   Tránh giật lag, chống tràn ngang (overflow-x), tối ưu cảm ứng và hiển thị
   ========================================================================== */

/* Chống hoàn toàn lỗi tràn màn hình ngang khi vuốt trên điện thoại */
html, body {
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100vw !important;
  -webkit-text-size-adjust: 100%;
}

* {
  box-sizing: border-box;
}

@media (max-width: 640px) {
  .container {
    width: calc(100% - 30px) !important;
  }
}

/* --- TỐI ƯU HEADER TRÊN TABLET & DI ĐỘNG (<= 960PX) --- */
@media (max-width: 960px) {
  header {
    background: rgba(255, 255, 255, 0.98) !important;
  }

  .nav-wrap {
    height: 72px !important;
    width: calc(100% - 30px) !important;
    gap: 12px !important;
  }

  .logo-img {
    height: 46px !important;
  }

  .menu-button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #eaf6ed;
    color: #124322;
    border: 1.5px solid #bfe2c8;
    font-size: 22px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    line-height: 1;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  .menu-button:active {
    background: #d4edd8;
    transform: scale(0.95);
  }

  nav {
    display: none !important;
    position: fixed !important;
    top: 72px !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-height: calc(100vh - 72px) !important;
    overflow-y: auto !important;
    background: #ffffff !important;
    padding: 18px 20px 28px !important;
    border-bottom: 2px solid #bfe2c8 !important;
    box-shadow: 0 18px 40px rgba(18, 67, 34, 0.18) !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    z-index: 99 !important;
  }

  nav.open {
    display: flex !important;
    animation: mobileNavSlide 0.28s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }

  @keyframes mobileNavSlide {
    from {
      opacity: 0;
      transform: translateY(-12px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  nav a {
    display: block !important;
    width: 100% !important;
    padding: 12px 18px !important;
    font-size: 15px !important;
    font-weight: 650 !important;
    color: #1a3821 !important;
    border-radius: 12px !important;
    background: #f7faf8 !important;
    border: 1px solid #e1efe4 !important;
    text-align: left !important;
  }

  nav a:hover,
  nav a.active {
    background: #dff2e4 !important;
    color: #124322 !important;
    border-color: #a8dbb4 !important;
    box-shadow: none !important;
  }

  .btn-rfq-mobile {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    background: linear-gradient(135deg, #2e7d44 0%, #164e29 100%) !important;
    color: #ffffff !important;
    font-weight: 750 !important;
    font-size: 14.5px !important;
    border-radius: 12px !important;
    margin-top: 6px !important;
    border: 1px solid #43a05b !important;
    box-shadow: 0 4px 14px rgba(46, 125, 68, 0.3) !important;
    text-align: center !important;
  }
}

/* TỐI ƯU HEADER CHO ĐIỆN THOẠI (<= 640PX) */
@media (max-width: 640px) {
  .nav-wrap {
    height: 66px !important;
    width: calc(100% - 24px) !important;
  }

  nav {
    top: 66px !important;
    max-height: calc(100vh - 66px) !important;
  }

  .logo-img {
    height: 40px !important;
  }

  .btn-rfq-nav {
    display: none !important; /* Đã có nút to đẹp trong menu kéo xuống */
  }

  .lang-switch {
    padding: 2px !important;
    font-size: 10.5px !important;
  }

  .lang-switch span,
  .lang-switch button {
    padding: 3px 7px !important;
  }
}

/* --- TỐI ƯU HERO SECTION (<= 960PX & <= 640PX) --- */
@media (max-width: 960px) {
  .hero-interior-decor {
    margin-top: 72px !important;
    padding: 36px 0 45px !important;
    min-height: auto !important;
  }

  .hero-interior-title {
    font-size: 32px !important;
    line-height: 1.22 !important;
    letter-spacing: -0.6px !important;
  }

  .hero-floating-trust-bar {
    grid-template-columns: repeat(2, 1fr) !important;
    position: static !important;
    transform: none !important;
    margin: 32px 0 0 !important;
    width: 100% !important;
    padding: 16px !important;
  }
}

@media (max-width: 640px) {
  .hero-interior-decor {
    margin-top: 66px !important;
    padding: 26px 0 35px !important;
  }

  .hero-interior-card {
    max-width: 100% !important;
  }

  .hero-interior-card::before {
    display: none !important;
  }

  .hero-leaf-badge {
    padding: 6px 14px !important;
    font-size: 10px !important;
    margin-bottom: 14px !important;
  }

  .hero-interior-title {
    font-size: 24px !important;
    line-height: 1.25 !important;
    margin-bottom: 12px !important;
    letter-spacing: -0.4px !important;
  }

  .hero-interior-desc {
    font-size: 13.5px !important;
    line-height: 1.65 !important;
    margin-bottom: 20px !important;
  }

  .hero-interior-actions {
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
    margin-bottom: 0 !important;
  }

  .btn-interior-primary,
  .btn-interior-secondary {
    width: 100% !important;
    justify-content: center !important;
    height: 48px !important;
    padding: 0 18px !important;
    font-size: 13.5px !important;
  }

  .hero-floating-trust-bar {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 12px !important;
    border-radius: 16px !important;
    margin-top: 28px !important;
  }

  .trust-bar-item {
    border-right: none !important;
    border-bottom: 1px solid #c2e5cb !important;
    padding: 8px 4px 10px !important;
  }

  .trust-bar-item:last-child {
    border-bottom: none !important;
  }

  .trust-icon {
    width: 38px !important;
    height: 38px !important;
  }

  .trust-text strong {
    font-size: 12px !important;
  }

  .trust-text p {
    font-size: 11px !important;
  }
}

/* --- TỐI ƯU CÂU CHUYỆN THƯƠNG HIỆU (<= 960PX & <= 640PX) --- */
@media (max-width: 960px) {
  .brand-story-grid {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  .story-artistic-visual {
    max-width: 420px !important;
  }

  .story-leaf-frame {
    height: 330px !important;
  }

  .story-circle-inset {
    width: 130px !important;
    height: 130px !important;
    bottom: -15px !important;
    right: -10px !important;
  }
}

@media (max-width: 640px) {
  .brand-story-heading {
    font-size: 24px !important;
    line-height: 1.3 !important;
  }

  .brand-story-paragraph {
    font-size: 13.5px !important;
    line-height: 1.68 !important;
  }

  .story-artistic-visual {
    max-width: 100% !important;
  }

  .story-leaf-frame {
    height: 260px !important;
    border-radius: 24px !important;
  }

  .story-circle-inset {
    width: 100px !important;
    height: 100px !important;
    bottom: -8px !important;
    right: 0px !important;
    border-width: 3px !important;
  }

  .story-features-row {
    flex-direction: column !important;
    gap: 10px !important;
    margin: 16px 0 22px !important;
  }

  .story-feature-item {
    padding: 12px 14px !important;
  }

  .story-action-group {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
  }

  .btn-story-explore {
    width: 100% !important;
    justify-content: center !important;
    height: 48px !important;
  }

  .story-hotline-box {
    justify-content: center !important;
  }
}

/* --- TỐI ƯU SẢN PHẨM NỔI BẬT TRÊN TABLET & CẢM ỨNG DI ĐỘNG --- */
@media (max-width: 960px) and (min-width: 641px) {
  .product-grid-b2b {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
}

@media (max-width: 640px) {
  .products-b2b-section {
    padding: 45px 0 50px !important;
  }

  .products-b2b-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-bottom: 24px !important;
  }

  .products-b2b-heading {
    font-size: 26px !important;
  }

  .products-header-desc {
    font-size: 13.5px !important;
    line-height: 1.65 !important;
  }

  .product-grid-b2b {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    max-width: 360px !important;
    margin: 0 auto !important;
  }

  /* Trên điện thoại cảm ứng: các nút Thêm vào giỏ & Yêu thích luôn hiển thị sẵn sàng */
  .product-card-b2b {
    height: auto !important;
    min-height: auto !important;
    padding: 10px 10px 16px !important;
  }

  .product-visual-b2b {
    height: 250px !important;
    padding: 14px !important;
  }

  .product-info-b2b {
    transform: none !important;
    padding: 14px 4px 0 !important;
  }

  .product-info-b2b h3 {
    font-size: 16px !important;
    margin-bottom: 5px !important;
  }

  .product-price-b2b {
    font-size: 20px !important;
  }

  .product-hover-actions {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    margin-top: 12px !important;
    width: 100% !important;
  }

  .btn-add-cart, .btn-contact-now {
    flex: 1 !important;
    height: 42px !important;
    font-size: 13px !important;
    padding: 0 14px !important;
  }

  .btn-wishlist {
    width: 42px !important;
    height: 42px !important;
  }
}

/* --- TỐI ƯU SỰ KIỆN ĐỐI TÁC QUỐC TẾ (MALAYSIA & SINGAPORE) --- */
@media (max-width: 960px) {
  .partner-event-section {
    padding: 55px 0 !important;
  }

  .partner-event-header h2 {
    font-size: 26px !important;
  }

  .partner-event-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .gallery-main-frame {
    height: 340px !important;
  }
}

@media (max-width: 640px) {
  .partner-event-header {
    margin-bottom: 24px !important;
  }

  .partner-event-header h2 {
    font-size: 22px !important;
    line-height: 1.35 !important;
  }

  .partner-event-header p {
    font-size: 13.5px !important;
    line-height: 1.6 !important;
  }

  .gallery-main-frame {
    height: 260px !important;
    border-radius: 14px !important;
    border-width: 3px !important;
  }

  .gallery-nav-btn {
    width: 36px !important;
    height: 36px !important;
  }

  .gallery-nav-btn.prev { left: 8px !important; }
  .gallery-nav-btn.next { right: 8px !important; }

  .gallery-slide-counter {
    top: 8px !important;
    right: 8px !important;
    padding: 3px 9px !important;
    font-size: 10px !important;
  }

  .event-media-badge {
    top: 8px !important;
    left: 8px !important;
    font-size: 9px !important;
    padding: 4px 10px !important;
    max-width: calc(100% - 85px) !important;
  }

  .gallery-caption {
    font-size: 11.5px !important;
    line-height: 1.4 !important;
    padding: 20px 10px 10px !important;
  }

  .gallery-thumbs {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
    margin-top: 10px !important;
  }

  .thumb-btn {
    padding: 3px !important;
    border-radius: 8px !important;
  }

  .thumb-btn img {
    height: 44px !important;
    border-radius: 6px !important;
  }

  .thumb-tag {
    display: none !important;
  }

  .event-feature-list {
    gap: 10px !important;
  }

  .event-feature-item {
    padding: 12px !important;
    gap: 10px !important;
    border-radius: 12px !important;
  }

  .event-feature-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
  }

  .event-feature-text h3 {
    font-size: 13.5px !important;
  }

  .event-feature-text p {
    font-size: 12px !important;
    line-height: 1.55 !important;
  }

  .btn-event-cta {
    width: 100% !important;
    height: 46px !important;
    font-size: 13px !important;
    padding: 0 14px !important;
    text-align: center !important;
  }

  .partner-guarantee {
    text-align: center !important;
    font-size: 11.5px !important;
  }
}

/* --- TỐI ƯU MỤC QUY TRÌNH (TIMELINE DỌC TRÊN DI ĐỘNG) --- */
@media (max-width: 640px) {
  .process {
    padding: 45px 0 !important;
  }

  .timeline {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-top: 24px !important;
  }

  .timeline li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding-right: 0 !important;
  }

  .timeline li:before {
    display: none !important;
  }

  .step-number {
    width: 38px !important;
    height: 38px !important;
    font-size: 15px !important;
    flex-shrink: 0 !important;
    margin-top: 2px !important;
  }

  .timeline h3 {
    font-size: 15px !important;
    min-height: auto !important;
    margin-top: 0 !important;
    line-height: 1.35 !important;
  }

  .timeline p {
    font-size: 12px !important;
    margin-top: 3px !important;
    line-height: 1.55 !important;
  }
}

/* --- TỐI ƯU MỤC CHẤT LIỆU & TAY NGHỀ TRÊN DI ĐỘNG --- */
@media (max-width: 640px) {
  .material-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .material-visual {
    height: 300px !important;
    overflow: hidden !important;
    border-radius: 14px !important;
    position: relative !important;
  }

  .weave-detail {
    width: 100% !important;
    height: 250px !important;
  }

  .craft-placeholder.craft-process-photo {
    width: 160px !important;
    height: 145px !important;
    border-width: 5px !important;
    border-radius: 10px !important;
  }
}

/* --- TỐI ƯU DIALOG CHI TIẾT SẢN PHẨM TRÊN DI ĐỘNG --- */
@media (max-width: 640px) {
  #product-dialog {
    width: calc(100% - 24px) !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    padding: 22px 16px !important;
    border-radius: 18px !important;
  }

  .dialog-b2b-layout {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .dialog-img-box {
    height: 190px !important;
    padding: 10px !important;
  }

  .dialog-info-box h2 {
    font-size: 20px !important;
  }

  .dialog-info-box dl div {
    grid-template-columns: 95px 1fr !important;
    font-size: 12px !important;
  }
}

/* ==========================================================================
   FIX TRIỆT ĐỂ LỖI HERO BỊ BÓ HẸP 2 CỘT NGANG TRÊN MOBILE & TABLET
   ========================================================================== */
@media (max-width: 960px) {
  .hero-interior-decor {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    min-height: auto !important;
    height: auto !important;
    padding: 32px 0 40px !important;
    margin-top: 72px !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .hero-interior-container {
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    z-index: 3 !important;
  }

  .hero-interior-card {
    max-width: 100% !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .hero-floating-trust-bar {
    position: static !important;
    transform: none !important;
    width: calc(100% - 32px) !important;
    max-width: 100% !important;
    margin: 30px auto 0 !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    z-index: 3 !important;
  }
}

@media (max-width: 640px) {
  .hero-interior-decor {
    margin-top: 66px !important;
    padding: 24px 0 32px !important;
  }

  .hero-floating-trust-bar {
    width: calc(100% - 24px) !important;
    margin: 24px auto 0 !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 12px !important;
  }

  .hero-interior-title {
    font-size: 25px !important;
    line-height: 1.25 !important;
    margin-bottom: 12px !important;
    letter-spacing: -0.4px !important;
  }

  .hero-interior-desc {
    font-size: 14px !important;
    line-height: 1.65 !important;
    margin-bottom: 20px !important;
  }

  .hero-interior-actions {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
  }

  .btn-interior-primary,
  .btn-interior-secondary {
    width: 100% !important;
    justify-content: center !important;
    height: 48px !important;
  }
}

/* ==========================================================================
   BẢO ĐẢM 100% TOÀN BỘ CÁC SECTION KHÔNG BỊ TRÀN HOẶC ÉP CỘT TRÊN MOBILE & TABLET
   ========================================================================== */
@media (max-width: 960px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    position: relative !important;
  }

  .container {
    width: calc(100% - 32px) !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  /* Đảm bảo tất cả các khối lớn xếp theo chiều dọc tự nhiên, không bị ép ngang */
  .brand-story-grid,
  .custom-grid,
  .material-grid,
  .contact-grid,
  .footer-main,
  .partner-event-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
    width: 100% !important;
  }

  .marquee {
    max-width: 100vw !important;
    overflow: hidden !important;
  }

  img {
    max-width: 100% !important;
    height: auto !important;
  }

  .product-visual-b2b img,
  .dialog-img-box img {
    height: 100% !important;
  }
}

@media (max-width: 640px) {
  .container {
    width: calc(100% - 24px) !important;
  }
}

/* ==========================================================================
   YÊU CẦU ĐỒNG BỘ THEO KHÁCH HÀNG:
   1. KHÔNG GIAN SỐNG TINH TẾ chung hàng (không bị rớt chữ TẾ)
   2. Khoảng cách dòng giãn ra chuẩn 1.5 - 2 (line-height: 1.6 - 1.8)
   3. Mục lục menu + chữ trong các khung / thẻ / badge in hoa toàn bộ
   4. Dùng duy nhất 1 font: Montserrat trên toàn bộ website
   ========================================================================== */

:root {
  --sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  --serif: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

html, body, button, input, textarea, select,
h1, h2, h3, h4, h5, h6, p, span, a, li, dt, dd, strong, small {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Khoảng cách hàng (line-height) giãn thoáng 1.6 - 1.8 */
body {
  line-height: 1.75 !important;
}

p, .hero-interior-desc, .brand-story-paragraph, .products-header-desc,
.event-feature-text p, .trust-text p, .metric-col p, .timeline p,
.gallery-caption, .dialog-info-box p, .dialog-info-box dd {
  line-height: 1.75 !important;
}

h1, h2, h3, h4, h5, h6,
.hero-interior-title, .brand-story-heading, .products-b2b-heading,
.partner-event-header h2, .event-feature-text h3, .dialog-info-box h2 {
  line-height: 1.45 !important;
}

/* 1. KHUNG TIÊU ĐỀ HERO KHÔNG BỊ RỚT CHỮ TẾ */
.hero-interior-card {
  max-width: 760px !important;
}

.hero-interior-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 40px !important;
  line-height: 1.35 !important;
  letter-spacing: -0.5px !important;
  margin: 0 0 22px 0 !important;
  text-transform: uppercase !important;
}

.hero-interior-title .hero-line {
  display: block;
}

.hero-interior-title .hero-line-top {
  white-space: nowrap !important;
}

@media (max-width: 960px) {
  .hero-interior-card {
    max-width: 100% !important;
  }
  .hero-interior-title {
    font-size: 28px !important;
    line-height: 1.35 !important;
  }
}

@media (max-width: 640px) {
  .hero-interior-title {
    font-size: 21px !important;
    line-height: 1.35 !important;
    letter-spacing: -0.3px !important;
  }
}

@media (max-width: 400px) {
  .hero-interior-title {
    font-size: 19px !important;
  }
}

/* 3. MỤC LỤC + CHỮ TRONG CÁC KHUNG IN HOA TOÀN BỘ (UPPERCASE) */
/* Thanh điều hướng / Menu mục lục */
nav a,


.footer-links a,
.footer-links span {
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
}

/* Chữ trong các khung, thẻ badge, tag, hộp thông tin */
.hero-leaf-badge,
.hero-leaf-badge span,
.story-craft-tag,
.story-craft-tag span,
.story-category-tag,
.story-category-tag span,
.partner-event-badge,
.event-media-badge,
.photo-tag,
.process-tag,
.spec-chip,
.thumb-tag,
.dialog-badge,
.trust-text strong,
.feature-item-text strong,
.feature-item-text small,
.metric-col strong,
.eyebrow,
.partner-heading h2,
.product-info-b2b h3,
.btn-interior-primary,
.btn-interior-secondary,
.btn-story-explore,
.btn-event-cta,
.btn-add-cart,
.btn-contact-now,
.btn-product-detail,
.btn-product-quote,
.dialog-info-box dt,
.timeline h3 {
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}


/* FIX NÚT YÊU CẦU BÁO GIÁ (RFQ): GIỮ NGUYÊN CHỮ, 1 HÀNG DUY NHẤT, KHÔNG RỚT DÒNG */
.btn-rfq-nav {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  height: 44px !important;
  line-height: 1 !important;
  padding: 0 22px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  background: linear-gradient(135deg, #2e7d44 0%, #164e29 100%) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  border: 1px solid #43a05b !important;
  transition: all 0.25s ease !important;
  text-decoration: none !important;
  box-shadow: 0 4px 15px rgba(46, 125, 68, 0.3) !important;
  flex-shrink: 0 !important;
}

.btn-rfq-nav:hover {
  background: linear-gradient(135deg, #388e52 0%, #1c5b30 100%) !important;
  border-color: #52b788 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(46, 125, 68, 0.4) !important;
}

.btn-rfq-mobile {
  text-transform: none !important;
  letter-spacing: normal !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

/* Tối ưu khoảng cách menu trên màn hình 961px - 1180px để không bị ép co nút */
@media (min-width: 961px) and (max-width: 1180px) {
  nav {
    gap: 4px !important;
  }
  nav a {
    padding: 7px 10px !important;
    font-size: 12.5px !important;
  }
  .nav-wrap {
    gap: 12px !important;
  }
}

/* ==========================================================================
   ĐỒNG BỘ TOÀN DIỆN TYPOGRAPHY & XÓA BỎ HOÀN TOÀN GẠCH DƯỚI (UNDERLINE)
   ========================================================================== */

/* 1. XÓA BỎ HOÀN TOÀN GẠCH NGANG / GẠCH DƯỚI DƯỚI CHỮ Ở TẤT CẢ TIÊU ĐỀ */
.partner-event-header h2 em,
h1 em, h2 em, h3 em, em,
.title-accent,
.story-heading-accent {
  text-decoration: none !important;
  text-decoration-line: none !important;
  border-bottom: none !important;
  font-style: normal !important;
  position: relative !important;
  display: inline !important;
}

.partner-event-header h2 em::after,
.title-accent::after,
.story-heading-accent::after,
h2 em::after {
  display: none !important;
  content: none !important;
}

/* 2. ĐỒNG BỘ 100% CÁC TIÊU ĐỀ LỚN (H2) TRÊN TOÀN BỘ WEBSITE */
h2,
.brand-story-heading,
.products-b2b-heading,
.custom-copy h2,
.material-copy h2,
.process .section-head h2,
.partner-event-header h2,
.contact-copy h2,
.dialog-info-box h2 {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 36px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.5px !important;
  color: #124322 !important;
  margin: 0 0 16px 0 !important;
  text-transform: none !important;
}

/* Màu chữ tiêu đề trên các section nền tối (Dark) */
.dark h2,
.custom.dark h2,
.process.dark h2,
.contact.dark h2 {
  color: #ffffff !important;
}

/* ĐỒNG BỘ 100% MÀU CHỮ TIÊU ĐỀ: DÙNG CHUNG 1 MÀU DUY NHẤT, TUYỆT ĐỐI KHÔNG CHIA 2 MÀU KHÁC NHAU */
h1 em, h1 span, h1 strong,
h2 em, h2 span, h2 strong,
h3 em, h3 span, h3 strong,
.title-accent,
.story-heading-accent,
.hero-interior-title .title-accent,
.brand-story-heading .story-heading-accent,
.products-b2b-heading .story-heading-accent,
.partner-event-header h2 em,
.custom-copy h2 em,
.material-copy h2 em,
.process .section-head h2 em {
  color: inherit !important;
  font-weight: inherit !important;
  font-style: normal !important;
  text-decoration: none !important;
  text-decoration-line: none !important;
  border-bottom: none !important;
}

.dark h1 em, .dark h1 span,
.dark h2 em, .dark h2 span,
.dark h3 em, .dark h3 span,
.custom.dark h2 em,
.process.dark h2 em,
.contact.dark h2 em {
  color: #ffffff !important;
}

/* Tiêu đề cấp 3 (H3) đồng bộ */
h3,
.product-info-b2b h3,
.timeline h3 {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 17.5px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: #124322 !important;
}

.dark h3,
.timeline li h3{color:#43270f !important;}

/* 3. ĐỒNG BỘ ĐOẠN VĂN MÔ TẢ (P) TRÊN TOÀN BỘ WEBSITE */
p,
.hero-interior-desc,
.brand-story-paragraph,
.products-header-desc,
.material-copy p,
.custom-copy p,
.trust-text p,
.timeline p,
.contact-copy p,
.partner-event-header p {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 15px !important;
  font-weight: 450 !important;
  line-height: 1.75 !important;
  color: #2f4c34 !important;
}

/* ĐẶC TRỊ CÂN XỨNG & ĐỀU NHAU HOÀN HẢO 100% GIỮA 2 BÊN MỤC HOẠT ĐỘNG HỢP TÁC */
.partner-event-grid {
  display: grid !important;
  grid-template-columns: 1.15fr 0.85fr !important;
  gap: 36px !important;
  align-items: stretch !important;
}

.partner-gallery {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.gallery-main-frame {
  height: 440px !important;
}

.gallery-thumbs {
  margin-top: 14px !important;
}

.partner-event-content {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  height: 100% !important;
}

.event-feature-list {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  flex: 1 !important;
  gap: 14px !important;
  margin-bottom: 18px !important;
}

.event-feature-item {
  display: flex !important;
  gap: 15px !important;
  align-items: center !important;
  background: #ffffff !important;
  padding: 14px 18px !important;
  border-radius: 14px !important;
  border: 1.5px solid #bfe2c8 !important;
  box-shadow: 0 4px 14px rgba(18, 67, 34, 0.05) !important;
  transition: all 0.25s ease !important;
  flex: 1 !important;
}

.event-feature-item:hover {
  transform: translateX(3px) !important;
  border-color: #2e7d44 !important;
  box-shadow: 0 8px 20px rgba(46, 125, 68, 0.12) !important;
}

.event-feature-icon {
  color: #2e7d44 !important;
  flex-shrink: 0 !important;
  background: #eaf6ed !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid #bfe2c8 !important;
}

.event-feature-icon svg {
  width: 22px !important;
  height: 22px !important;
}

.event-feature-text h3 {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #124322 !important;
  line-height: 1.35 !important;
  margin: 0 0 4px 0 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.event-feature-text p {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: #355c3e !important;
  margin: 0 !important;
  letter-spacing: normal !important;
}

.partner-cta-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-top: auto !important;
}

.btn-event-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 48px !important;
  padding: 0 28px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  width: 100% !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

.partner-guarantee {
  font-size: 12px !important;
  color: #164e29 !important;
  text-align: center !important;
}

.dark p,
.custom.dark p,
.process.dark p,
.contact.dark p,
.dark .contact-copy p {
  color: #d6e2d8 !important;
}

/* 4. ĐỒNG BỘ CÁC THẺ BADGE / EYEBROW TRÊN MỖI SECTION */
.eyebrow,
.hero-leaf-badge,
.story-category-tag,
.partner-event-badge {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.9px !important;
  text-transform: uppercase !important;
}

/* Responsive tiêu đề h2 trên Tablet & Mobile */
@media (max-width: 960px) {
  h2,
  .brand-story-heading,
  .products-b2b-heading,
  .custom-copy h2,
  .material-copy h2,
  .process .section-head h2,
  .partner-event-header h2,
  .contact-copy h2 {
    font-size: 28px !important;
    line-height: 1.35 !important;
  }
}

@media (max-width: 640px) {
  h2,
  .brand-story-heading,
  .products-b2b-heading,
  .custom-copy h2,
  .material-copy h2,
  .process .section-head h2,
  .partner-event-header h2,
  .contact-copy h2 {
    font-size: 23px !important;
    line-height: 1.35 !important;
  }
  
  p,
  .hero-interior-desc,
  .brand-story-paragraph,
  .products-header-desc,
  .material-copy p,
  .custom-copy p,
  .trust-text p,
  .timeline p,
  .contact-copy p,
  .partner-event-header p {
    font-size: 13.5px !important;
    line-height: 1.7 !important;
  }
}

/* ==========================================================================
   PUFU CRAFT — BRAND DESIGN SYSTEM (OFFICIAL RGB SPEC)
   1. BG: #f6ede4 (Warm Ivory Craft Canvas)
   2. TYPO CHÍNH: #43270f (Opacity: 100% / Size: 30pt ~ 40px)
   3. TEXT: #43270f (Opacity: 70% -> rgba(67, 39, 15, 0.70) / Size: 10pt ~ 13.5px)
   4. ACCENT: #b87b38 (Natural Amber Camel Craft Highlight)
   5. BORDER: #decbc0 (Harmonious Muted Craft Border)
   6. CARD SURFACES: #ffffff (Crisp White Stage with Soft Craft Shadows)
   ========================================================================== */

:root {
  --color-pufu-bg: #f6ede4;
  --color-pufu-typo: #43270f;
  --color-pufu-text: rgba(67, 39, 15, 0.70);
  --color-pufu-accent: #b87b38;
  --color-pufu-border: #decbc0;
  --color-pufu-white: #ffffff;
}

/* --- GLOBAL MOBILE & TABLET SAFEGUARDS --- */
html, body {
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100vw !important;
  background: #f6ede4 !important;
  background-color: #f6ede4 !important;
  color: rgba(67, 39, 15, 0.70) !important;
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*, *::before, *::after {
  box-sizing: border-box !important;
}

.container {
  width: 100% !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

@media (max-width: 768px) {
  .container {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

@media (max-width: 480px) {
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* --- 1. TOÀN BỘ NỀN CHUNG LÀ #f6ede4 (BG CHUẨN PUFU) --- */
.hero-interior-decor,
.brand-story-section,
.products-b2b-section,
.sudes-craft-section,
.custom,
.custom.dark,
.material,
.process,
.process.dark,
.partner-event-section,
.contact,
.contact.dark,
.partners,
footer,
.story-room-context,
.category-breadcrumb-bar,
.categories-hero-banner-full {
  background: #f6ede4 !important;
  background-color: #f6ede4 !important;
  color: rgba(67, 39, 15, 0.70) !important;
}

/* Hero Section Background & Clean Gradient Wash */
.hero-interior-decor {
  border-bottom: 1px solid #decbc0 !important;
  position: relative;
}

.hero-backdrop-gradient {
  background: linear-gradient(
    90deg,
    rgba(246, 237, 228, 0.98) 0%,
    rgba(246, 237, 228, 0.94) 40%,
    rgba(246, 237, 228, 0.75) 65%,
    rgba(246, 237, 228, 0.35) 85%,
    transparent 100%
  ) !important;
}

.hero-wash {
  background: linear-gradient(90deg, #f6ede4 0%, rgba(246, 237, 228, 0.96) 37%, rgba(246, 237, 228, 0.6) 66%, rgba(246, 237, 228, 0.1) 100%) !important;
}

@media (max-width: 860px) {
  .hero-wash,
  .hero-backdrop-gradient {
    background: linear-gradient(180deg, #f6ede4 0%, rgba(246, 237, 228, 0.96) 55%, rgba(246, 237, 228, 0.8) 80%, transparent 100%) !important;
  }
}

/* Remove distracting halos and pseudo elements */
.hero-interior-card::before,
.brand-story-section::before,
.brand-story-section::after {
  display: none !important;
}

/* Section Divider Borders in #decbc0 */
.hero-interior-decor,
.brand-story-section,
.products-b2b-section,
.sudes-craft-section,
.custom,
.material,
.process,
.partner-event-section,
.contact,
.partners {
  border-top: 1px solid #decbc0 !important;
  border-bottom: 1px solid #decbc0 !important;
}

/* --- 2. TYPO CHÍNH: #43270f / Opacity: 100% / Size: 30pt (~40px) --- */
h1, h2,
.hero-interior-title,
.brand-story-heading,
.products-b2b-heading,
.sudes-cat-heading,
.custom-copy h2,
.material-copy h2,
.partner-event-header h2,
.contact-copy h2,
.dialog-info-box h2,
.partner-heading h2 {
  color: #43270f !important;
  opacity: 1 !important;
  font-family: var(--serif);
  font-weight: 700 !important;
  letter-spacing: -0.02em;
}

/* Main H1 / Hero Title: 30pt (~40px on desktop, fluid down to 26px on mobile) */
h1,
.hero-interior-title {
  font-size: clamp(26px, 3.6vw + 12px, 40px) !important; /* 30pt = 40px */
  line-height: 1.25 !important;
  color: #43270f !important;
}

.hero-interior-title .hero-line-mid,
.hero-interior-title .title-accent,
.title-accent,
.story-heading-accent {
  color: #43270f !important;
}

/* Section Headings H2: Fluid scaling */
h2,
.brand-story-heading,
.products-b2b-heading,
.sudes-cat-heading,
.custom-copy h2,
.material-copy h2,
.partner-event-header h2,
.contact-copy h2 {
  font-size: clamp(22px, 2.8vw + 10px, 34px) !important;
  line-height: 1.3 !important;
  color: #43270f !important;
}

/* Sub-headings H3 */
h3,
.catalog-card-title,
.product-info-b2b h3,
.product-info h3,
.trust-text strong,
.event-feature-text h3,
.timeline h3 {
  color: #43270f !important;
  opacity: 1 !important;
}

.dialog-info-box dt {
  color: #43270f !important;
}

/* --- 3. TEXT: #43270f / Opacity: 70% (rgba(67, 39, 15, 0.70)) / Size: 10pt (~13.5px) --- */
p,
.hero-interior-desc,
.brand-story-paragraph,
.catalog-card-desc,
.products-header-desc,
.material-copy p,
.custom-copy p,
.trust-text p,
.partner-event-header p,
.timeline p,
.footer-main p,
.contact-copy p,
.sudes-intro,
.small-note {
  color: rgba(67, 39, 15, 0.70) !important;
  font-size: 10pt !important; /* 10pt = ~13.5px */
  line-height: 1.68 !important;
}

p strong,
.hero-interior-desc strong,
.brand-story-paragraph strong,
.catalog-card-desc strong,
.timeline strong,
.footer-main strong {
  color: #43270f !important;
  font-weight: 700 !important;
}

/* --- 4. ACCENTS & TAGS: AMBER CAMEL (#b87b38) --- */
.eyebrow,
.hero-interior-title .hero-line-accent,
.sudes-tag-line,
.catalog-category-label {
  color: #b87b38 !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
}

.hero-leaf-badge {
  background: rgba(184, 123, 56, 0.12) !important;
  border-color: #b87b38 !important;
  color: #b87b38 !important;
  box-shadow: 0 4px 14px rgba(184, 123, 56, 0.2) !important;
}

.stories-badge,
.story-category-tag,
.products-category-tag,
.partner-event-badge,
.process-tag,
.dialog-badge,
.spec-chip,
.thumb-tag,
.photo-tag,
.rfq-badge {
  color: #b87b38 !important;
  border-color: rgba(184, 123, 56, 0.45) !important;
  background: rgba(184, 123, 56, 0.1) !important;
}

/* --- 5. TẤT CẢ NÚT BẤM (BUTTONS & CTAS: NÂU GỖ ĐẬM #43270f -> HOVER #b87b38) --- */
.button,
.button.cream,
.submit,
.btn-interior-primary,
.btn-add-cart,
.btn-contact-now,
.btn-event-cta,
.btn-product-quote,
.dialog-cta-full,
.btn-explore,
.hero .button,
.catalog-inquire-btn,
.rfq-submit-btn,
.btn-story-explore {
  background: #43270f !important;
  border: 1.5px solid #43270f !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(67, 39, 15, 0.18) !important;
  border-radius: 8px !important;
  transition: all .25s ease !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

.button:hover,
.button.cream:hover,
.submit:hover,
.btn-interior-primary:hover,
.btn-add-cart:hover,
.btn-contact-now:hover,
.btn-event-cta:hover,
.btn-product-quote:hover,
.dialog-cta-full:hover,
.btn-explore:hover,
.hero .button:hover,
.catalog-inquire-btn:hover,
.rfq-submit-btn:hover,
.btn-story-explore:hover {
  background: #b87b38 !important;
  border-color: #b87b38 !important;
  color: #ffffff !important;
  box-shadow: 0 8px 22px rgba(184, 123, 56, 0.3) !important;
  transform: translateY(-2px) !important;
}

.button.light-outline,
.button.outline,
.btn-interior-secondary {
  background: #ffffff !important;
  border: 1.5px solid #decbc0 !important;
  color: #43270f !important;
  box-shadow: 0 4px 12px rgba(67, 39, 15, 0.06) !important;
  border-radius: 8px !important;
  transition: all .25s ease !important;
}

.button.light-outline:hover,
.button.outline:hover,
.btn-interior-secondary:hover {
  background: #43270f !important;
  border-color: #43270f !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(67, 39, 15, 0.2) !important;
  transform: translateY(-2px) !important;
}


/* ==========================================================================
   PUFU CRAFT — 2-TIER HEADER REDESIGN (BASED ON CLIENT REFERENCE IMAGE 2)
   1. Centered container max-width: 1280px (No sticking to screen edges!)
   2. Row 1: Logo | Pill Search Bar ("Bạn cần tìm sản phẩm gì?") | Hotline + Account + Cart + Language
   3. Row 2: Horizontal Navigation Menu Bar (TRANG CHỦ, GIỚI THIỆU, DANH MỤC SẢN PHẨM, ...)
   4. Mobile / Tablet Responsive Drawer
   ========================================================================== */

#header,
header.site-header-v3 {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
  background: #ffffff !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid #decbc0 !important;
  box-shadow: 0 4px 20px rgba(67, 39, 15, 0.08) !important;
  transition: all 0.3s ease !important;
  padding: 0 !important;
  margin: 0 !important;
}

header.scrolled {
  background: #ffffff !important;
  box-shadow: 0 8px 24px rgba(67, 39, 15, 0.12) !important;
}

.header-container {
  width: 100% !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  box-sizing: border-box !important;
}

/* --- TẦNG 1 (TOP ROW): LOGO, SEARCH PILL & ACTIONS --- */
.header-top-row {
  width: 100% !important;
  height: 72px !important;
  display: flex !important;
  align-items: center !important;
}

.header-top-inner {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
}

.header-logo,
a.logo-brand {
  display: flex !important;
  align-items: center !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
}

.logo-img {
  height: 44px !important;
  width: auto !important;
  max-width: 180px !important;
  object-fit: contain !important;
  display: block !important;
}

/* --- SEARCH BAR PILL (Chuẩn Hình 2) --- */
.header-search-wrap {
  flex: 1 !important;
  max-width: 520px !important;
  margin: 0 24px !important;
}

.header-search-form {
  display: flex !important;
  align-items: center !important;
  background: #ffffff !important;
  border: 1.5px solid #decbc0 !important;
  border-radius: 999px !important;
  padding: 4px 6px 4px 20px !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 2px 8px rgba(67, 39, 15, 0.04) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.header-search-form:focus-within {
  border-color: #43270f !important;
  box-shadow: 0 4px 16px rgba(67, 39, 15, 0.12) !important;
}

.header-search-input {
  flex: 1 !important;
  border: none !important;
  background: transparent !important;
  font-size: 13.5px !important;
  color: #43270f !important;
  outline: none !important;
  padding: 7px 10px 7px 0 !important;
  font-family: inherit !important;
}

.header-search-input::placeholder {
  color: rgba(67, 39, 15, 0.45) !important;
  font-size: 13.5px !important;
}

.header-search-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: #43270f !important;
  color: #ffffff !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
}

.header-search-btn:hover {
  background: #b87b38 !important;
  transform: scale(1.06) !important;
}

/* --- HEADER ACTIONS (HOTLINE, TÀI KHOẢN, GIỎ HÀNG, NGÔN NGỮ) --- */
.header-actions-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 22px !important;
  flex-shrink: 0 !important;
}

.header-action-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  color: #43270f !important;
  cursor: pointer !important;
  transition: opacity 0.2s ease !important;
  user-select: none !important;
}

.header-action-item:hover {
  opacity: 0.8 !important;
}

.action-icon-circle {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #43270f !important;
  flex-shrink: 0 !important;
}

.action-text-block {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  text-align: left !important;
}

.action-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #43270f !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
}

.action-sub {
  font-size: 11px !important;
  color: rgba(67, 39, 15, 0.70) !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
}

.hotline-number {
  font-size: 14.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px !important;
}

/* CART BADGE */
.cart-icon-wrap {
  position: relative !important;
}

.cart-badge {
  position: absolute !important;
  top: -6px !important;
  right: -8px !important;
  background: #b87b38 !important;
  color: #ffffff !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 4px !important;
  border-radius: 999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 2px 6px rgba(184, 123, 56, 0.35) !important;
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.cart-badge.bump {
  transform: scale(1.35) !important;
}

/* LANGUAGE PILL */
.lang-switch-pill {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px 10px !important;
  background: #ffffff !important;
  border: 1px solid #decbc0 !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #43270f !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.lang-switch-pill:hover {
  border-color: #43270f !important;
}

.lang-opt {
  color: rgba(67, 39, 15, 0.6) !important;
  transition: color 0.2s !important;
}

.lang-opt.active {
  color: #43270f !important;
  font-weight: 800 !important;
}

.lang-sep {
  color: #decbc0 !important;
}

/* MOBILE TOGGLE (Hidden on Desktop) */
.header-mobile-toggle {
  display: none !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  width: 42px !important;
  height: 42px !important;
  background: #ffffff !important;
  border: 1px solid #decbc0 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  padding: 0 !important;
  gap: 5px !important;
}

.menu-bar {
  width: 20px !important;
  height: 2px !important;
  background: #43270f !important;
  border-radius: 2px !important;
  transition: all 0.25s ease !important;
}

/* --- TẦNG 2 (ROW 2): NAVIGATION MENU BAR NGANG --- */
.header-nav-row {
  width: 100% !important;
  border-top: 1px solid rgba(222, 203, 192, 0.7) !important;
  background: rgba(246, 237, 228, 0.98) !important;
}

.header-main-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 48px !important;
  height: 46px !important;
}

.header-main-nav > a,
.nav-dropdown-trigger {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.6px !important;
  color: #43270f !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  padding: 12px 0 !important;
  transition: color 0.2s ease !important;
  position: relative !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.header-main-nav > a:hover,
.nav-dropdown-trigger:hover {
  color: #b87b38 !important;
}

.header-main-nav > a.active,
.header-main-nav > .nav-item-dropdown > a.active {
  color: #b87b38 !important;
  font-weight: 800 !important;
}

.header-main-nav > a.active::after,
.header-main-nav > .nav-item-dropdown > a.active::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 2.5px !important;
  background: #b87b38 !important;
  border-radius: 2px !important;
}

/* DROPDOWN MENU */
.nav-item-dropdown {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
}

.dropdown-arrow {
  transition: transform 0.25s ease !important;
  flex-shrink: 0 !important;
}

.nav-item-dropdown:hover .dropdown-arrow {
  transform: rotate(180deg) !important;
}

.nav-dropdown-menu {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  min-width: 250px !important;
  background: #ffffff !important;
  border: 1px solid #decbc0 !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 30px rgba(67, 39, 15, 0.12) !important;
  padding: 8px !important;
  z-index: 1000 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(8px) !important;
  transition: all 0.22s ease !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

.nav-dropdown-menu::before {
  content: '' !important;
  position: absolute !important;
  top: -10px !important;
  left: 0 !important;
  right: 0 !important;
  height: 10px !important;
}

.nav-item-dropdown:hover .nav-dropdown-menu {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

.nav-dropdown-menu a {
  display: block !important;
  padding: 9px 14px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #43270f !important;
  text-decoration: none !important;
  border-radius: 6px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  transition: all 0.18s ease !important;
  white-space: nowrap !important;
  background: transparent !important;
  box-shadow: none !important;
}

.nav-dropdown-menu a:hover {
  background: rgba(184, 123, 56, 0.08) !important;
  color: #b87b38 !important;
}

.nav-dropdown-all {
  border-top: 1px solid #decbc0 !important;
  margin-top: 4px !important;
  padding-top: 10px !important;
  color: #b87b38 !important;
  font-weight: 700 !important;
}

/* --- MOBILE & TABLET RESPONSIVE --- */
@media (max-width: 1080px) {
  .header-search-wrap {
    margin: 0 16px !important;
    max-width: 380px !important;
  }
  .header-actions-wrap {
    gap: 16px !important;
  }
  .header-main-nav {
    gap: 18px !important;
  }
}

@media (max-width: 960px) {
  .header-nav-row {
    display: none !important;
  }
  .header-top-row {
    height: 66px !important;
  }
  .header-search-wrap {
    display: none !important;
  }
  .header-hotline-item .action-text-block,
  .header-account-item .action-text-block,
  .header-cart-item .action-text-block {
    display: none !important;
  }
  .header-mobile-toggle {
    display: flex !important;
  }
  .header-actions-wrap {
    gap: 10px !important;
  }
  .action-icon-circle {
    width: 38px !important;
    height: 38px !important;
    background: #ffffff !important;
    border: 1px solid #decbc0 !important;
    border-radius: 50% !important;
  }
}

/* MOBILE DRAWER STYLES */
.header-mobile-drawer {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 99999 !important;
}

.header-mobile-drawer[hidden] {
  display: none !important;
}

.mobile-drawer-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(67, 39, 15, 0.45) !important;
  backdrop-filter: blur(4px) !important;
}

.mobile-drawer-content {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: min(340px, 86vw) !important;
  height: 100% !important;
  background: #f6ede4 !important;
  box-shadow: -8px 0 30px rgba(67, 39, 15, 0.2) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-y: auto !important;
  padding: 20px 20px 32px !important;
  box-sizing: border-box !important;
}

.mobile-drawer-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid #decbc0 !important;
  margin-bottom: 16px !important;
}

.mobile-drawer-close {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 1px solid #decbc0 !important;
  color: #43270f !important;
  font-size: 18px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.mobile-drawer-search {
  margin-bottom: 18px !important;
}

.mobile-drawer-search form {
  display: flex !important;
  align-items: center !important;
  background: #ffffff !important;
  border: 1px solid #decbc0 !important;
  border-radius: 999px !important;
  padding: 4px 6px 4px 16px !important;
}

.mobile-search-input {
  flex: 1 !important;
  border: none !important;
  background: transparent !important;
  font-size: 13.5px !important;
  color: #43270f !important;
  outline: none !important;
  padding: 6px 0 !important;
}

.mobile-search-btn {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: #43270f !important;
  color: #ffffff !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}

.mobile-drawer-nav {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  flex: 1 !important;
}

.mobile-nav-link,
.mobile-accordion-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding: 12px 16px !important;
  background: #ffffff !important;
  border: 1px solid #decbc0 !important;
  border-radius: 8px !important;
  color: #43270f !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

.mobile-nav-link.active {
  background: #43270f !important;
  color: #ffffff !important;
  border-color: #43270f !important;
}

.mobile-accordion-body {
  display: none !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 6px 0 6px 12px !important;
}

.mobile-accordion-body.open {
  display: flex !important;
}

.mobile-accordion-body a {
  display: block !important;
  padding: 9px 14px !important;
  background: rgba(255, 255, 255, 0.7) !important;
  border: 1px solid #decbc0 !important;
  border-radius: 6px !important;
  color: #43270f !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
}

.mobile-drawer-footer {
  margin-top: 20px !important;
  padding-top: 16px !important;
  border-top: 1px solid #decbc0 !important;
}

.mobile-hotline-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 12px !important;
  background: #43270f !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  text-decoration: none !important;
}


/* --- 7. HERO SECTION RESPONSIVE OPTIMIZATION --- */
.hero-interior-decor {
  margin-top: 74px !important;
  padding: 60px 0 50px !important;
}

@media (max-width: 960px) {
  .hero-interior-decor {
    margin-top: 68px !important;
    padding: 40px 0 35px !important;
  }
}

.hero-floating-trust-bar {
  background: #ffffff !important;
  border: 1px solid #decbc0 !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 30px rgba(67, 39, 15, 0.06) !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  padding: 18px 24px !important;
  margin-top: 40px !important;
}

.trust-bar-item {
  border-right: 1px solid #decbc0 !important;
  padding-right: 14px !important;
}

.trust-bar-item:last-child {
  border-right: none !important;
}

@media (max-width: 960px) {
  .hero-floating-trust-bar {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
    padding: 16px 18px !important;
  }
  .trust-bar-item:nth-child(2) {
    border-right: none !important;
  }
}

@media (max-width: 540px) {
  .hero-floating-trust-bar {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    padding: 14px 12px !important;
  }
  .trust-icon {
    width: 34px !important;
    height: 34px !important;
  }
  .trust-text strong {
    font-size: 12.5px !important;
  }
  .trust-text p {
    font-size: 9.5pt !important;
  }
}

/* --- 8. STORY SECTION RESPONSIVE OPTIMIZATION --- */
.brand-story-grid {
  display: grid !important;
  grid-template-columns: 1fr 1.1fr !important;
  gap: 48px !important;
  align-items: center !important;
}

.story-leaf-frame {
  border-radius: 24px !important;
  outline: none !important;
  border: 5px solid #ffffff !important;
  box-shadow: 0 14px 36px rgba(67, 39, 15, 0.08) !important;
  background: #ffffff !important;
  overflow: hidden !important;
  position: relative !important;
}

.story-circle-inset {
  border: 4px solid #ffffff !important;
  box-shadow: 0 10px 24px rgba(67, 39, 15, 0.15) !important;
}

.story-craft-tag {
  position: absolute !important;
  top: 16px !important;
  left: 16px !important;
  z-index: 10 !important;
  background: #ffffff !important;
  color: #43270f !important;
  border: 1px solid #decbc0 !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 14px rgba(67, 39, 15, 0.1) !important;
  padding: 6px 16px !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.8px !important;
}

.story-feature-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  margin: 24px 0 !important;
}

.story-feature-item {
  background: #ffffff !important;
  border: 1px solid #decbc0 !important;
  border-radius: 12px !important;
  padding: 14px !important;
  box-shadow: 0 4px 14px rgba(67, 39, 15, 0.04) !important;
}

.story-hotline-box {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.story-hotline-box .hotline-icon {
  background: #43270f !important;
  color: #ffffff !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.story-hotline-box a,
.story-hotline-box strong {
  color: #43270f !important;
  font-size: 15.5px !important;
  font-weight: 800 !important;
}

@media (max-width: 960px) {
  .brand-story-grid {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
  .story-artistic-visual {
    max-width: 480px !important;
    margin: 0 auto !important;
  }
}

@media (max-width: 480px) {
  .story-feature-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

/* --- 9. PROCESS SECTION (6 STEPS) RESPONSIVE OPTIMIZATION --- */
.timeline {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 18px !important;
  margin-top: 45px !important;
}

.timeline .step-number {
  border: 1px solid #decbc0 !important;
  color: #43270f !important;
  background: #ffffff !important;
  box-shadow: 0 4px 12px rgba(67, 39, 15, 0.06) !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 800 !important;
  font-size: 14px !important;
}

.timeline li.highlight .step-number {
  background: #43270f !important;
  color: #ffffff !important;
  border-color: #43270f !important;
}

.timeline li:before {
  background: #decbc0 !important;
}

@media (max-width: 1024px) {
  .timeline {
    grid-template-columns: repeat(3, 1fr) !important;
    row-gap: 32px !important;
  }
}

@media (max-width: 640px) {
  .timeline {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
    row-gap: 24px !important;
  }
  .timeline h3 {
    font-size: 13.5px !important;
    margin-top: 12px !important;
  }
  .timeline p {
    font-size: 9.5pt !important;
  }
}

/* --- 10. MATERIAL & CUSTOM OEM RESPONSIVE OPTIMIZATION --- */
.custom-grid,
.material-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 48px !important;
  align-items: center !important;
}

.custom-options {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
  margin: 20px 0 !important;
}

.custom-options span {
  background: #ffffff !important;
  border: 1px solid #decbc0 !important;
  color: #43270f !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  text-align: center !important;
}

@media (max-width: 960px) {
  .custom-grid,
  .material-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
}

@media (max-width: 540px) {
  .custom-options {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* --- 11. GLOBAL EVENTS & PARTNERS RESPONSIVE OPTIMIZATION --- */
.partner-event-grid {
  display: grid !important;
  grid-template-columns: 1.1fr 1fr !important;
  gap: 40px !important;
  align-items: center !important;
}

@media (max-width: 960px) {
  .partner-event-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
}

/* --- 12. CONTACT SECTION RESPONSIVE OPTIMIZATION --- */
.contact-grid {
  display: grid !important;
  grid-template-columns: 1fr 1.1fr !important;
  gap: 48px !important;
}

.contact-form {
  background: #ffffff !important;
  padding: 32px 28px !important;
  border-radius: 14px !important;
  box-shadow: 0 14px 36px rgba(67, 39, 15, 0.06) !important;
  border: 1px solid #decbc0 !important;
}

.contact-form .field input,
.contact-form .field textarea {
  background: #f6ede4 !important;
  border: 1px solid #decbc0 !important;
  color: #43270f !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
  font-size: 15px !important;
}

.contact-form .field input:focus,
.contact-form .field textarea:focus {
  background: #ffffff !important;
  border-color: #b87b38 !important;
  box-shadow: 0 0 0 3px rgba(184, 123, 56, 0.2) !important;
  outline: none !important;
}

@media (max-width: 960px) {
  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
}

@media (max-width: 640px) {
  .contact-form {
    padding: 24px 18px !important;
  }
  .contact-form .field input,
  .contact-form .field textarea {
    font-size: 16px !important; /* Prevents iOS auto-zoom on input focus */
  }
}

/* --- 13. DEDICATED CATEGORIES PAGE (SUDES CRAFT AESTHETIC & RESPONSIVE) --- */
.category-breadcrumb-bar {
  padding: 132px 0 14px !important;
  background: #f6ede4 !important;
  border-bottom: 1px solid #decbc0 !important;
}

@media (max-width: 768px) {
  .category-breadcrumb-bar {
    padding: 80px 0 12px !important;
  }
}

.category-breadcrumb-inner {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  color: rgba(67, 39, 15, 0.70) !important;
}

.category-breadcrumb-inner a {
  color: #43270f !important;
  text-decoration: none !important;
  font-weight: 700 !important;
}

/* Full Width Hero Banner (Full Màn Hình) */
.categories-hero-banner-full {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #f6ede4 !important;
  overflow: hidden !important;
  border-bottom: 1px solid #decbc0 !important;
  line-height: 0 !important;
}

.categories-hero-banner-full img {
  width: 100% !important;
  height: auto !important;
  max-height: 480px !important;
  object-fit: cover !important;
  display: block !important;
}

@media (max-width: 1024px) {
  .categories-hero-banner-full img {
    max-height: 360px !important;
  }
}

@media (max-width: 640px) {
  .categories-hero-banner-full img {
    max-height: 240px !important;
    min-height: 180px !important;
  }
}

/* Sudes Craft Catalog Section */
.sudes-craft-section {
  padding: 35px 0 70px !important;
  background: #f6ede4 !important;
}

.sudes-filter-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 18px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid #decbc0 !important;
}

.sudes-cat-heading {
  font-family: var(--serif) !important;
  font-size: clamp(22px, 2.5vw + 12px, 32px) !important;
  font-weight: 700 !important;
  color: #43270f !important;
  margin: 0 !important;
  line-height: 1.25 !important;
}

.sudes-cat-count-badge {
  background: #ffffff !important;
  border: 1px solid #decbc0 !important;
  color: #43270f !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 6px rgba(67, 39, 15, 0.05) !important;
}

/* Touch-Swipeable Filter Pills Bar for Mobile & Tablet */
.categories-filter-bar {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 30px !important;
}

@media (max-width: 960px) {
  .categories-filter-bar {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    margin: 0 -18px 24px !important;
    padding: 4px 18px 12px !important;
  }
  .categories-filter-bar::-webkit-scrollbar {
    display: none !important;
  }
}

.cat-filter-btn {
  background: #ffffff !important;
  color: #43270f !important;
  font-family: var(--sans) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  padding: 9px 18px !important;
  border-radius: 999px !important;
  border: 1px solid #decbc0 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: all 0.25s ease !important;
}

.cat-filter-btn:hover {
  background: #eae0d5 !important;
  border-color: #b87b38 !important;
  color: #43270f !important;
  transform: translateY(-2px) !important;
}

.cat-filter-btn.active {
  background: #43270f !important;
  color: #ffffff !important;
  border-color: #43270f !important;
  box-shadow: 0 4px 14px rgba(67, 39, 15, 0.24) !important;
  font-weight: 700 !important;
}

/* Sudes Craft Catalogs Grid: 3 Cols Desktop, 2 Cols Tablet, 1 Col Mobile */
.catalogs-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 28px !important;
}

@media (max-width: 1024px) {
  .catalogs-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 22px !important;
  }
}

@media (max-width: 640px) {
  .catalogs-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}

/* Catalog Card */
.catalog-card {
  background: #ffffff !important;
  border-radius: 14px !important;
  border: 1px solid #decbc0 !important;
  box-shadow: 0 6px 20px rgba(67, 39, 15, 0.04) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.3s ease !important;
  position: relative !important;
}

.catalog-card:hover {
  transform: translateY(-6px) !important;
  border-color: #b87b38 !important;
  box-shadow: 0 16px 36px rgba(67, 39, 15, 0.12) !important;
}

.catalog-card-visual {
  position: relative !important;
  height: 290px !important;
  background: #fbf8f3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 22px !important;
  overflow: hidden !important;
  border-bottom: 1px solid #decbc0 !important;
}

.catalog-card-visual img {
  max-width: 90% !important;
  max-height: 90% !important;
  object-fit: contain !important;
  transition: transform 0.5s ease !important;
  filter: drop-shadow(0 6px 12px rgba(67, 39, 15, 0.08)) !important;
}

.catalog-card:hover .catalog-card-visual img {
  transform: scale(1.08) !important;
}

.catalog-badge-pill {
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  background: #43270f !important;
  color: #ffffff !important;
  font-family: var(--sans) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  box-shadow: 0 3px 8px rgba(67, 39, 15, 0.2) !important;
  z-index: 2 !important;
}

.catalog-card-visual .btn-wishlist {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 1px solid #decbc0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: #8c7667 !important;
  box-shadow: 0 2px 8px rgba(67, 39, 15, 0.08) !important;
  transition: all 0.2s ease !important;
  z-index: 2 !important;
}

.catalog-card-visual .btn-wishlist:hover {
  background: #43270f !important;
  color: #ffffff !important;
  border-color: #43270f !important;
  transform: scale(1.1) !important;
}

.catalog-card-body {
  padding: 22px !important;
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
  background: #ffffff !important;
}

.catalog-card-title {
  font-family: var(--serif) !important;
  font-size: 17.5px !important;
  font-weight: 700 !important;
  color: #43270f !important;
  margin: 0 0 10px !important;
  line-height: 1.35 !important;
  text-transform: uppercase !important;
}

.catalog-tags-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-bottom: 14px !important;
}

.catalog-spec-tag {
  background: #f6ede4 !important;
  color: #43270f !important;
  border: 1px solid #decbc0 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 3px 9px !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
}

.catalog-b2b-status {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: rgba(67, 39, 15, 0.70) !important;
  margin-bottom: 16px !important;
  padding: 6px 10px !important;
  background: #fbf8f3 !important;
  border-radius: 6px !important;
  border-left: 3px solid #b87b38 !important;
}

/* Inquire Catalog Button */
.catalog-inquire-btn {
  width: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 46px !important;
  background: #43270f !important;
  color: #ffffff !important;
  font-family: var(--sans) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  border-radius: 8px !important;
  border: 1.5px solid #43270f !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 4px 10px rgba(67, 39, 15, 0.15) !important;
}

.catalog-inquire-btn:hover {
  background: #b87b38 !important;
  border-color: #b87b38 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
}

/* --- 14. RFQ MODAL RESPONSIVE OPTIMIZATION --- */
.rfq-modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(30, 16, 8, 0.65) !important;
  backdrop-filter: blur(4px) !important;
  z-index: 99999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

.rfq-modal-overlay.open {
  opacity: 1 !important;
  visibility: visible !important;
}

.rfq-modal-dialog {
  background: #f6ede4 !important;
  border: 1px solid #decbc0 !important;
  border-radius: 18px !important;
  width: 100% !important;
  max-width: 520px !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  padding: 28px 24px !important;
  position: relative !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25) !important;
  transform: translateY(20px) scale(0.97) !important;
  transition: transform 0.3s ease !important;
}

.rfq-modal-overlay.open .rfq-modal-dialog {
  transform: translateY(0) scale(1) !important;
}

.rfq-modal-close {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 1px solid #decbc0 !important;
  background: #ffffff !important;
  color: #43270f !important;
  font-size: 22px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.rfq-modal-close:hover {
  background: #43270f !important;
  color: #ffffff !important;
}

.rfq-modal-header h3 {
  font-family: var(--serif) !important;
  font-size: 22px !important;
  color: #43270f !important;
  margin: 0 0 6px !important;
}

.rfq-subtitle {
  font-size: 10pt !important;
  color: rgba(67, 39, 15, 0.70) !important;
  margin: 0 0 18px !important;
}

.rfq-grid-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}

.rfq-field {
  margin-bottom: 12px !important;
}

.rfq-field label {
  display: block !important;
  font-family: var(--sans) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #43270f !important;
  margin-bottom: 5px !important;
}

.rfq-field input,
.rfq-field textarea {
  width: 100% !important;
  padding: 10px 14px !important;
  background: #ffffff !important;
  border: 1px solid #decbc0 !important;
  border-radius: 8px !important;
  font-size: 15px !important;
  color: #43270f !important;
  outline: none !important;
}

.rfq-field input:focus,
.rfq-field textarea:focus {
  border-color: #b87b38 !important;
  box-shadow: 0 0 0 3px rgba(184, 123, 56, 0.15) !important;
}

.rfq-action-row {
  display: flex !important;
  gap: 12px !important;
  margin-top: 16px !important;
}

.rfq-submit-btn {
  flex: 1 !important;
  min-height: 46px !important;
  background: #43270f !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  border-radius: 8px !important;
  border: none !important;
  cursor: pointer !important;
}

.rfq-submit-btn:hover {
  background: #b87b38 !important;
}

.rfq-whatsapp-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 0 16px !important;
  min-height: 46px !important;
  background: #25d366 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
}

@media (max-width: 520px) {
  .rfq-grid-row {
    grid-template-columns: 1fr !important;
  }
  .rfq-field input,
  .rfq-field textarea {
    font-size: 16px !important; /* Prevents iOS auto-zoom */
  }
  .rfq-action-row {
    flex-direction: column !important;
  }
}

/* --- 15. FOOTER RESPONSIVE OPTIMIZATION --- */
footer {
  background: #f6ede4 !important;
  color: rgba(67, 39, 15, 0.70) !important;
  border-top: 1px solid #decbc0 !important;
  padding: 55px 0 30px !important;
}

.footer-main {
  display: grid !important;
  grid-template-columns: 1.5fr 1fr 1fr !important;
  gap: 40px !important;
}

.footer-links > span {
  color: #43270f !important;
  font-weight: 800 !important;
  letter-spacing: 1.2px !important;
  font-size: 12px !important;
}

.footer-links a {
  color: rgba(67, 39, 15, 0.70) !important;
  text-decoration: none !important;
}

.footer-links a:hover {
  color: #b87b38 !important;
}

.footer-bottom {
  border-top: 1px solid #decbc0 !important;
  color: rgba(67, 39, 15, 0.60) !important;
  margin-top: 35px !important;
  padding-top: 20px !important;
  display: flex !important;
  justify-content: space-between !important;
  font-size: 11px !important;
}

@media (max-width: 860px) {
  .footer-main {
    grid-template-columns: 1fr 1fr !important;
    gap: 30px !important;
  }
  .footer-main > div:first-child {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 480px) {
  .footer-main {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .footer-bottom {
    flex-direction: column !important;
    gap: 10px !important;
    text-align: center !important;
  }
}

/* --- SCROLL MARGIN FOR SECTION ANCHORS --- */
section[id], [id] {
  scroll-margin-top: 85px;
}
html {
  scroll-behavior: smooth;
}