/* Motor F2 — stylesheet duy nhất của trang.
   Gộp từ 31 khối <style> rời rạc trong HTML, giữ nguyên thứ tự cascade.
   Đây là nơi duy nhất để sửa style của trang. */

@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;700&family=Barlow+Condensed:wght@400;600&display=swap');

@media (max-width: 760px){
#giao-hang .delivery-hero-visual img{aspect-ratio: 4/3 !important;
    object-position: center center !important;}
}
header.rail{position:relative;z-index:100}
header.rail>div{position:relative}
.mega-nav{display:flex;
  align-items:center;
  gap:28px;
  margin-left:12px;
  font-family:var(--font-heading);
  font-size:16px;
  font-weight:650;
  letter-spacing:.005em;}
.mega-nav-link{appearance:none;
  border:0;
  background:transparent;
  padding:10px 0 12px;
  color:var(--color-text);
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  font:inherit;
  position:relative;}
.mega-nav-link:hover{color:var(--color-accent-700)}
.mega-nav-item{position:static}
.mega-nav-item.is-active>.mega-trigger{color:var(--color-text);}
.mega-nav-item.is-active>.mega-trigger:after{content:"";
  position:absolute;
  left:0;right:0;bottom:-1px;
  height:2px;
  background:var(--color-accent);}
.nav-caret{display:inline-block;
  margin-left:7px;
  font-size:13px;
  line-height:1;
  color:#6b7b76;
  transform:translateY(-1px);}
.mega-panel{position:absolute;
  top:calc(100% + 15px);
  left:0;
  right:0;
  max-width:1180px;
  margin:0 auto;
  min-height:540px;
  display:grid;
  grid-template-columns:360px minmax(0,1fr);
  gap:34px;
  padding:20px;
  background:#fff;
  border:1px solid #dfe8e3;
  border-top:3px solid var(--color-accent);
  border-radius:0 0 28px 28px;
  box-shadow:0 24px 70px rgba(18,48,43,.18);
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px);
  pointer-events:none;
  transition:opacity .18s ease,transform .18s ease,visibility .18s ease;
  z-index:999;}
.mega-panel.is-open{opacity:1;
  visibility:visible;
  transform:translateY(0);
  pointer-events:auto;}
.mega-pointer{position:absolute;
  top:-13px;
  left:50%;
  width:22px;
  height:22px;
  background:#fff;
  border-left:1px solid #dfe8e3;
  border-top:1px solid #dfe8e3;
  transform:rotate(45deg);}
.mega-promo{min-height:500px;
  position:relative;
  border-radius:20px;
  overflow:hidden;
  background:#173731;}
.mega-promo img{width:100%;
  height:100%;
  position:absolute;
  inset:0;
  object-fit:cover;
  object-position:center;}
.mega-promo-shade{position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(10,39,35,.04) 28%,rgba(10,39,35,.92) 86%);}
.mega-promo-copy{position:absolute;
  left:36px;right:28px;bottom:36px;
  color:#fff;}
.mega-kicker{display:block;
  margin-bottom:8px;
  color:#d7e8e2;
  font-size:12px;
  font-weight:700;
  letter-spacing:.11em;}
.mega-promo-copy strong{display:block;
  font-family:Georgia,serif;
  font-size:37px;
  font-weight:500;
  line-height:1.08;
  margin-bottom:12px;}
.mega-promo-copy p{margin:0 0 24px;
  color:#e4efeb;
  font-size:16px;
  line-height:1.55;}
.mega-promo-cta{min-height:54px;
  padding:0 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  max-width:260px;
  border-radius:28px;
  background:var(--color-accent);
  color:#fff!important;
  text-decoration:none;
  font-size:13px;
  font-weight:750;
  line-height:1.3;
  letter-spacing:.025em;}
.mega-promo-cta b{font-size:18px;font-weight:500}
.mega-groups{padding:8px 18px 4px 0;
  display:flex;
  flex-direction:column;}
.mega-groups-label{padding:0 0 14px;
  border-bottom:1px solid #dbe5df;
  font-size:12px;
  font-weight:750;
  letter-spacing:.12em;
  color:#6f7e79;}
.mega-group-link{min-height:78px;
  display:flex;
  align-items:center;
  gap:18px;
  text-decoration:none;
  color:inherit;
  border-bottom:1px solid #edf1ef;}
.mega-group-link>span{flex:1;
  min-width:0;}
.mega-group-link b{display:block;
  font-size:18px;
  line-height:1.25;
  margin-bottom:4px;
  color:#173731;}
.mega-group-link small{display:block;
  font-size:14px;
  font-weight:500;
  color:#75837f;}
.mega-group-link i{flex:0 0 38px;
  width:38px;height:38px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#f8f3e9;
  color:var(--color-accent);
  font-style:normal;
  font-size:17px;
  transition:background .18s ease,transform .18s ease;}
.mega-group-link:hover b{color:var(--color-accent-700)}
.mega-group-link:hover i{background:#f9e7dc;
  transform:translateX(2px);}
@media (max-width:1180px){
.mega-nav{gap:18px;font-size:14px}
.mega-panel{left:12px;right:12px}
}
@media (max-width:900px){
.mega-panel{grid-template-columns:1fr;
    max-height:78vh;
    overflow:auto;
    min-height:auto;}
.mega-promo{min-height:290px}
.mega-nav{display:none}
}
.original-parent-nav{display:flex !important;
  align-items:center;
  gap:40px;
  margin-left:36px;
  font-family:var(--font-heading);
  font-size:18px;
  font-weight:650;
  letter-spacing:0;}
.original-parent-nav .orig-nav-link{appearance:none;
  border:0;
  background:transparent;
  padding:14px 0 16px;
  color:#173731;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  font:inherit;
  position:relative;}
.original-parent-nav .orig-nav-link:hover{color:#c85b28;}
.original-parent-nav .orig-nav-link.active{color:#c85b28;}
.original-parent-nav .orig-nav-link.active::after{content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  background:#ef6b2e;}
.orig-mega-item{position:static;}
.orig-trigger{display:inline-block;}
.mega-nav-link{padding:0;color:inherit}
.mega-nav-item.is-active>.mega-trigger:after{display:none}
.nav-caret{display:none!important}
@media (max-width:1180px){
.original-parent-nav{gap:26px;font-size:16px;margin-left:24px}
}
@media (max-width:900px){
.original-parent-nav{display:none!important}
}
header.rail > div{display:flex !important;
  align-items:center !important;
  flex-wrap:nowrap !important;
  gap:34px !important;}
.original-parent-nav{display:flex !important;
  align-items:center !important;
  flex-wrap:nowrap !important;
  gap:32px !important;
  margin-left:34px !important;
  min-width:0;}
.original-parent-nav .orig-nav-link{flex:0 0 auto;}
.hd-cta{margin-left:auto !important;
  flex:0 0 auto;
  white-space:nowrap;}
@media (max-width:1180px){
header.rail > div{gap:22px !important}
.original-parent-nav{gap:22px !important;margin-left:18px !important;font-size:15px !important}
.hd-cta{font-size:14px !important;padding:10px 14px !important}
}
.footer-benefits{background:#e7f1ec;
  border-top:1px solid #d7e5de;
  border-bottom:1px solid #d5e2dc;}
.footer-benefits-inner{max-width:1240px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));}
.footer-benefit-item{min-height:92px;
  padding:20px 28px;
  display:flex;
  align-items:center;
  gap:16px;
  border-right:1px solid rgba(25,58,53,.11);}
.footer-benefit-item:last-child{border-right:0}
.footer-benefit-no{width:38px;height:38px;
  flex:0 0 38px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--color-accent);
  color:#fff;
  font-family:var(--font-heading);
  font-size:12px;
  font-weight:750;}
.footer-benefit-item strong{display:block;
  margin-bottom:3px;
  color:#173731;
  font-family:var(--font-heading);
  font-size:15px;
  line-height:1.25;}
.footer-benefit-item p{margin:0;
  color:#667a73;
  font-size:13px;
  line-height:1.45;}
.footer-v7{background:#0f332d;
  color:#c9dbd4;}
.footer-main{max-width:1240px;
  margin:0 auto;
  padding:58px 32px 48px;
  display:grid;
  grid-template-columns:1.35fr .75fr .82fr 1.02fr;
  gap:48px;
  align-items:start;}
.footer-brand{min-width:0;}
.footer-brand-mark{width:56px;height:56px;
  margin-bottom:12px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:#fffdf8;
  color:var(--color-accent);
  font-family:var(--font-heading);
  font-weight:800;
  font-size:17px;
  letter-spacing:.02em;}
.footer-brand-title{margin-bottom:20px;}
.footer-brand-title span{display:block;
  color:#94aaa2;
  font-size:12px;
  font-weight:700;
  letter-spacing:.16em;}
.footer-brand-title strong{display:block;
  margin-top:4px;
  color:#fff;
  font-family:Georgia,serif;
  font-size:28px;
  line-height:1;
  font-weight:500;
  letter-spacing:.02em;}
.footer-brand h3{margin:0 0 13px;
  max-width:31ch;
  color:#fff;
  font-size:16px;
  line-height:1.45;}
.footer-intro{margin:0 0 15px;
  max-width:38ch;
  font-size:14px;
  line-height:1.65;
  color:#b8cbc4;}
.footer-brand address{margin:0;
  font-style:normal;
  font-size:13px;
  color:#d7e4df;}
.footer-tags{display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin-top:18px;}
.footer-tags span{padding:7px 10px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:999px;
  color:#adc2ba;
  font-size:12px;}
.footer-col{display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:13px;}
.footer-col-title{position:relative;
  width:100%;
  padding-bottom:12px;
  margin-bottom:5px;
  color:#fff;
  font-family:var(--font-heading);
  font-size:13px;
  font-weight:750;
  letter-spacing:.055em;}
.footer-col-title::after{content:"";
  position:absolute;
  left:0;bottom:0;
  width:32px;height:2px;
  background:var(--color-accent);}
.footer-col a{color:#c4d6d0;
  text-decoration:none;
  font-size:13px;
  line-height:1.35;}
.footer-col a:hover{color:#fff}
.footer-contact-card{padding:24px 22px 22px;
  background:#173f38;
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  box-shadow:0 18px 40px rgba(0,0,0,.12);}
.footer-contact-kicker{color:#a4bbb3;
  font-size:12px;
  font-weight:750;
  letter-spacing:.13em;}
.footer-contact-card h3{margin:10px 0 10px;
  color:#fff;
  font-family:Georgia,serif;
  font-size:25px;
  line-height:1.08;
  font-weight:500;}
.footer-contact-card>p{margin:0 0 18px;
  color:#b8cbc4;
  font-size:13px;
  line-height:1.55;}
.footer-contact-btn{min-height:54px;
  padding:8px 12px;
  display:flex;
  align-items:center;
  gap:11px;
  border-radius:10px;
  text-decoration:none;
  margin-top:9px;}
.footer-contact-btn.call{background:#f2f8f5;
  color:#173731;}
.footer-contact-btn.zalo{background:transparent;
  color:#fff;
  border:1px solid rgba(255,255,255,.34);}
.footer-contact-icon{width:34px;height:34px;
  flex:0 0 34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#19755f;
  color:#fff;
  font-size:15px;}
.footer-contact-btn.zalo .footer-contact-icon{background:#fff;
  color:#1686df;
  font-family:var(--font-heading);
  font-weight:800;}
.footer-contact-btn small{display:block;
  font-size:12px;
  font-weight:750;
  letter-spacing:.07em;
  opacity:.78;}
.footer-contact-btn strong{display:block;
  margin-top:2px;
  font-size:13px;}
.footer-contact-meta{display:flex;
  flex-direction:column;
  gap:5px;
  padding-top:16px;
  margin-top:16px;
  border-top:1px solid rgba(255,255,255,.09);
  font-size:12px;
  color:#c6d7d1;}
.footer-contact-meta a{color:#e0ebe7;
  text-decoration:none;}
.footer-bottom{max-width:1240px;
  margin:0 auto;
  padding:18px 32px 20px;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  color:#8ea69e;
  font-size:12px;}
.footer-bottom>div{display:flex;
  gap:22px;}
.footer-bottom a{color:#8ea69e;
  text-decoration:none;}
.footer-bottom a:hover{color:#fff}
@media(max-width:1050px){
.footer-main{grid-template-columns:1.25fr .8fr .8fr;}
.footer-contact-card{grid-column:1 / -1;
    display:grid;
    grid-template-columns:1.25fr 1fr 1fr;
    gap:12px 18px;
    align-items:center;}
.footer-contact-kicker,.footer-contact-card h3,.footer-contact-card>p{grid-column:1;}
.footer-contact-btn.call{grid-column:2;grid-row:1 / span 2}
.footer-contact-btn.zalo{grid-column:3;grid-row:1 / span 2}
.footer-contact-meta{grid-column:2 / 4}
}
@media(max-width:760px){
.footer-benefits-inner{grid-template-columns:1fr}
.footer-benefit-item{min-height:auto;
    border-right:0;
    border-bottom:1px solid rgba(25,58,53,.1);
    padding:16px 20px;}
.footer-main{padding:42px 22px 34px;
    grid-template-columns:1fr 1fr;
    gap:36px 24px;}
.footer-brand{grid-column:1 / -1}
.footer-contact-card{grid-column:1 / -1;
    display:block;}
.footer-contact-card h3{font-size:23px}
.footer-bottom{padding:16px 22px 80px;
    align-items:flex-start;
    flex-direction:column;}
}
@media(max-width:520px){
.footer-main{grid-template-columns:1fr}
.footer-col{grid-column:1}
}
header.rail{background:#fffdfa !important;
  border-bottom:1px solid #e5ebe7 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;}
header.rail > div{max-width:100% !important;
  min-height:108px !important;
  padding:0 30px !important;
  display:grid !important;
  grid-template-columns:260px minmax(0,1fr) 448px !important;
  align-items:center !important;
  gap:34px !important;}
header.rail .hd-logo{min-width:0;}
header.rail .hd-logo > div:first-child{font-size:39px !important;
  line-height:.92 !important;
  letter-spacing:.01em !important;}
header.rail .hd-logo > div:last-child{margin-top:4px !important;
  font-size:18px !important;
  line-height:1 !important;
  letter-spacing:.035em !important;}
.original-parent-nav{margin:0 !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  flex-wrap:nowrap !important;
  gap:42px !important;
  font-size:20px !important;
  line-height:1 !important;
  font-weight:650 !important;}
.original-parent-nav .orig-nav-link{padding:36px 0 26px !important;
  font-size:20px !important;
  line-height:1 !important;
  color:#173731 !important;
  letter-spacing:-.015em !important;}
.original-parent-nav .orig-nav-link.active{color:#c75624 !important;}
.original-parent-nav .orig-nav-link.active::after{height:2px !important;
  bottom:12px !important;
  background:#ef6b2e !important;}
.original-parent-nav .orig-nav-link:hover{color:#c75624 !important;}
.hd-cta{justify-self:end !important;
  min-height:66px !important;
  min-width:448px !important;
  padding:0 28px !important;
  border-radius:15px !important;
  font-size:20px !important;
  line-height:1 !important;
  font-weight:750 !important;
  letter-spacing:.01em !important;
  box-shadow:0 12px 28px rgba(239,107,46,.16);}
.mega-panel{top:calc(100% + 0px) !important;}
@media(max-width:1500px){
header.rail > div{grid-template-columns:235px minmax(0,1fr) 370px !important;
    padding:0 22px !important;
    gap:24px !important;}
header.rail .hd-logo > div:first-child{font-size:34px !important}
header.rail .hd-logo > div:last-child{font-size:15px !important}
.original-parent-nav{gap:30px !important}
.original-parent-nav .orig-nav-link{font-size:18px !important}
.hd-cta{min-width:370px !important;
    font-size:18px !important;}
}
@media(max-width:1200px){
header.rail > div{grid-template-columns:210px minmax(0,1fr) 300px !important;
    gap:16px !important;}
.original-parent-nav{gap:20px !important}
.original-parent-nav .orig-nav-link{font-size:16px !important}
.hd-cta{min-width:300px !important;
    min-height:58px !important;
    font-size:16px !important;}
}
header.rail > div{max-width:1520px !important;
  width:calc(100% - 48px) !important;
  margin:0 auto !important;
  min-height:108px !important;
  padding:0 !important;
  display:grid !important;
  grid-template-columns:250px minmax(0,1fr) 448px !important;
  align-items:center !important;
  gap:28px !important;}
.original-parent-nav{justify-content:center !important;
  gap:38px !important;
  margin:0 !important;}
.hd-cta{justify-self:end !important;
  min-width:420px !important;
  width:420px !important;}
@media(max-width:1560px){
header.rail > div{max-width:1420px !important;
    width:calc(100% - 40px) !important;
    grid-template-columns:235px minmax(0,1fr) 390px !important;
    gap:22px !important;}
.original-parent-nav{gap:30px !important;}
.hd-cta{min-width:390px !important;width:390px !important;}
}
@media(max-width:1320px){
header.rail > div{width:calc(100% - 28px) !important;
    grid-template-columns:210px minmax(0,1fr) 320px !important;
    gap:16px !important;}
.original-parent-nav{gap:20px !important;}
.hd-cta{min-width:320px !important;width:320px !important;}
}
header.rail > div{max-width:1240px !important;
  margin:0 auto !important;
  padding:0 24px !important;
  grid-template-columns:240px minmax(0,1fr) 350px !important;
  gap:26px !important;}
header.rail .hd-logo > div:first-child{font-size:33px !important;}
header.rail .hd-logo > div:last-child{font-size:14px !important;}
.original-parent-nav{gap:28px !important;
  font-size:17px !important;}
.original-parent-nav .orig-nav-link{font-size:17px !important;
  padding:36px 0 26px !important;}
.hd-cta{min-width:350px !important;
  min-height:60px !important;
  padding:0 22px !important;
  font-size:17px !important;}
@media(max-width:1180px){
header.rail > div{grid-template-columns:215px minmax(0,1fr) 310px !important;
    gap:20px !important;}
.original-parent-nav{gap:21px !important}
.original-parent-nav .orig-nav-link{font-size:15px !important}
.hd-cta{min-width:310px !important;
    font-size:15px !important;}
}
header.rail > div{max-width:1240px !important;
  margin:0 auto !important;
  padding:0 20px !important;
  grid-template-columns:230px minmax(0,1fr) 300px !important;
  gap:22px !important;}
header.rail .hd-logo{justify-self:start !important;
  margin:0 !important;}
.original-parent-nav{gap:26px !important;}
.hd-cta{min-width:300px !important;
  width:300px !important;
  min-height:56px !important;
  padding:0 18px !important;
  font-size:15.5px !important;
  border-radius:14px !important;
  justify-self:end !important;}
@media(max-width:1180px){
header.rail > div{grid-template-columns:205px minmax(0,1fr) 265px !important;
    gap:16px !important;}
.original-parent-nav{gap:18px !important}
.hd-cta{min-width:265px !important;
    width:265px !important;
    font-size:14px !important;
    padding:0 14px !important;}
}
header.rail > div{grid-template-columns:230px minmax(0,1fr) 330px !important;
  gap:20px !important;}
.original-parent-nav{gap:24px !important;}
.hd-cta{min-width:330px !important;
  width:330px !important;
  min-height:56px !important;
  padding:0 16px !important;
  font-size:14.5px !important;
  line-height:1 !important;
  white-space:nowrap !important;
  overflow:visible !important;
  text-overflow:clip !important;
  letter-spacing:0 !important;}
@media(max-width:1180px){
header.rail > div{grid-template-columns:205px minmax(0,1fr) 292px !important;
    gap:14px !important;}
.original-parent-nav{gap:17px !important}
.hd-cta{min-width:292px !important;
    width:292px !important;
    padding:0 12px !important;
    font-size:13px !important;}
}
header.rail .hd-logo-image{display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  width:190px !important;
  height:78px !important;
  padding:0 !important;
  margin:0 !important;
  overflow:visible;
  text-decoration:none !important;}
header.rail .hd-logo-image img{display:block !important;
  width:auto !important;
  height:72px !important;
  max-width:190px !important;
  object-fit:contain !important;
  object-position:left center !important;
  margin:0 !important;}
.footer-logo-wrap{width:150px;
  margin:0 0 18px;}
.footer-logo-wrap img{display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  filter:brightness(1.08);}
@media(max-width:1180px){
header.rail .hd-logo-image{width:170px !important;
    height:70px !important;}
header.rail .hd-logo-image img{height:64px !important;
    max-width:170px !important;}
}
header.rail > div{max-width:1240px !important;
  margin:0 auto !important;
  padding:0 20px !important;
  grid-template-columns:170px minmax(0,1fr) 176px !important;
  gap:20px !important;
  align-items:center !important;}
header.rail .hd-logo-image{width:150px !important;
  height:76px !important;
  justify-self:start !important;
  margin:0 !important;}
header.rail .hd-logo-image img{width:136px !important;
  height:72px !important;
  max-width:136px !important;
  object-fit:contain !important;
  object-position:left center !important;}
.original-parent-nav{justify-content:flex-start !important;
  gap:22px !important;
  margin:0 !important;
  font-size:16px !important;
  font-weight:650 !important;}
.original-parent-nav .orig-nav-link{flex:0 0 auto !important;
  font-size:16px !important;
  line-height:1 !important;
  padding:36px 0 26px !important;
  letter-spacing:-.01em !important;}
.original-parent-nav .orig-nav-link.active::after{bottom:12px !important;
  height:2px !important;}
.hd-cta{min-width:176px !important;
  width:176px !important;
  min-height:52px !important;
  padding:0 16px !important;
  border-radius:13px !important;
  font-size:15px !important;
  line-height:1 !important;
  font-weight:750 !important;
  letter-spacing:0 !important;
  white-space:nowrap !important;
  justify-self:end !important;
  overflow:visible !important;}
.mega-panel{max-width:1200px !important;}
@media(max-width:1250px){
header.rail > div{grid-template-columns:155px minmax(0,1fr) 164px !important;
    gap:16px !important;}
.original-parent-nav{gap:17px !important;}
.original-parent-nav .orig-nav-link{font-size:14.5px !important;}
.hd-cta{width:164px !important;
    min-width:164px !important;
    font-size:14px !important;}
}
@media(max-width:1050px){
.original-parent-nav{display:none !important;}
}
header.rail > div{max-width:none !important;
  width:100% !important;
  margin:0 !important;
  padding:0 40px !important;
  display:grid !important;
  grid-template-columns:150px minmax(0,1fr) 170px !important;
  gap:18px !important;
  align-items:center !important;}
header.rail .hd-logo-image{width:128px !important;
  height:74px !important;
  margin:0 !important;
  padding:0 !important;
  justify-self:start !important;}
header.rail .hd-logo-image img{display:block !important;
  width:120px !important;
  height:68px !important;
  max-width:120px !important;
  object-fit:contain !important;
  object-position:left center !important;}
.original-parent-nav{display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  flex-wrap:nowrap !important;
  gap:18px !important;
  margin:0 !important;
  min-width:0 !important;
  font-size:16px !important;}
.original-parent-nav .orig-nav-link{flex:0 0 auto !important;
  font-size:16px !important;
  line-height:1 !important;
  padding:35px 0 25px !important;
  letter-spacing:-.012em !important;
  white-space:nowrap !important;}
.hd-cta{min-width:170px !important;
  width:170px !important;
  min-height:50px !important;
  padding:0 14px !important;
  margin:0 !important;
  justify-self:end !important;
  border-radius:13px !important;
  font-size:14px !important;
  line-height:1 !important;
  font-weight:750 !important;
  white-space:nowrap !important;
  overflow:visible !important;
  letter-spacing:0 !important;}
.mega-panel{left:40px !important;
  right:40px !important;
  max-width:none !important;
  width:auto;}
.breadcrumb,
.breadcrumb-wrap,
nav[aria-label="Breadcrumb"]{margin-left:0;}
@media(max-width:1450px){
header.rail > div{padding:0 28px !important;
    grid-template-columns:135px minmax(0,1fr) 155px !important;
    gap:14px !important;}
header.rail .hd-logo-image{width:118px !important}
header.rail .hd-logo-image img{width:110px !important;max-width:110px !important}
.original-parent-nav{gap:14px !important}
.original-parent-nav .orig-nav-link{font-size:14px !important}
.hd-cta{width:155px !important;
    min-width:155px !important;
    font-size:13px !important;}
.mega-panel{left:28px !important;right:28px !important}
}
@media(max-width:1120px){
.original-parent-nav{display:none !important}
}
.tp-header-clean{position:relative;
  z-index:1000;
  width:100%;
  background:#fffdfa;
  border-bottom:1px solid #e5ebe7;}
.tp-header-inner{width:min(1480px, calc(100% - 64px));
  height:104px;
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:22px;}
.tp-logo{flex:0 0 112px;
  width:112px;
  height:78px;
  display:flex;
  align-items:center;
  justify-content:flex-start;}
.tp-logo img{display:block;
  width:104px;
  height:74px;
  object-fit:contain;
  object-position:left center;}
.tp-main-menu{flex:1 1 auto;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:18px;
  white-space:nowrap;}
.tp-main-menu>a,
.tp-menu-trigger{position:relative;
  display:inline-flex;
  align-items:center;
  height:104px;
  padding:0;
  border:0;
  background:transparent;
  color:#173731;
  text-decoration:none;
  font-family:var(--font-heading);
  font-size:16px;
  line-height:1;
  font-weight:650;
  letter-spacing:-.01em;
  cursor:pointer;
  white-space:nowrap;}
.tp-main-menu>a:hover,
.tp-menu-trigger:hover{color:#c75624}
.tp-menu-trigger.active{color:#c75624}
.tp-menu-trigger.active::after{content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:23px;
  height:2px;
  background:#ef6b2e;}
.tp-hotline{flex:0 0 154px;
  width:154px;
  min-height:50px;
  padding:0 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:13px;
  background:#f06b2c;
  color:#fff;
  text-decoration:none;
  font-family:var(--font-heading);
  font-size:14px;
  line-height:1;
  font-weight:750;
  white-space:nowrap;
  box-shadow:0 12px 26px rgba(240,107,44,.17);}
.tp-breadcrumb{background:#fffdfa;
  border-bottom:1px solid #e8eeea;}
.tp-breadcrumb-inner{width:min(1480px, calc(100% - 64px));
  min-height:66px;
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  color:#5c716a;
  font-size:14px;}
.tp-breadcrumb-inner a{color:inherit;
  text-decoration:none;}
.tp-breadcrumb-inner span[aria-current="page"]{color:#173731}
.tp-mega-item{position:static}
.tp-mega-panel{position:absolute;
  top:104px;
  left:50%;
  width:min(1180px, calc(100% - 64px));
  transform:translate(-50%,-8px);
  display:grid;
  grid-template-columns:350px minmax(0,1fr);
  gap:34px;
  padding:20px;
  background:#fff;
  border:1px solid #dfe8e3;
  border-top:3px solid #ef6b2e;
  border-radius:0 0 26px 26px;
  box-shadow:0 24px 70px rgba(18,48,43,.18);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .16s ease, transform .16s ease, visibility .16s ease;}
.tp-mega-panel.open{opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(-50%,0);}
.tp-mega-pointer{position:absolute;
  top:-12px;
  left:47.5%;
  width:20px;
  height:20px;
  background:#fff;
  border-left:1px solid #dfe8e3;
  border-top:1px solid #dfe8e3;
  transform:rotate(45deg);}
.tp-mega-promo{position:relative;
  min-height:500px;
  overflow:hidden;
  border-radius:20px;
  background:#173731;}
.tp-mega-promo>img{position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;}
.tp-mega-overlay{position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(10,39,35,.03) 25%,rgba(10,39,35,.92) 87%);}
.tp-mega-promo-copy{position:absolute;
  left:32px;
  right:26px;
  bottom:32px;
  color:#fff;}
.tp-mega-promo-copy small{display:block;
  margin-bottom:8px;
  color:#d7e8e2;
  font-size:12px;
  font-weight:700;
  letter-spacing:.11em;}
.tp-mega-promo-copy strong{display:block;
  margin-bottom:11px;
  font-family:Georgia,serif;
  font-size:34px;
  line-height:1.08;
  font-weight:500;}
.tp-mega-promo-copy p{margin:0 0 20px;
  color:#e4efeb;
  font-size:15px;
  line-height:1.5;}
.tp-mega-promo-copy a{max-width:250px;
  min-height:52px;
  padding:0 17px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-radius:27px;
  background:#ef6b2e;
  color:#fff;
  text-decoration:none;
  font-family:var(--font-heading);
  font-size:12px;
  font-weight:750;}
.tp-mega-list{padding:8px 14px 4px 0;}
.tp-mega-label{padding-bottom:14px;
  border-bottom:1px solid #dbe5df;
  color:#6f7e79;
  font-size:12px;
  font-weight:750;
  letter-spacing:.12em;}
.tp-mega-list>a{min-height:76px;
  display:flex;
  align-items:center;
  gap:18px;
  border-bottom:1px solid #edf1ef;
  color:inherit;
  text-decoration:none;}
.tp-mega-list>a>span{flex:1;min-width:0}
.tp-mega-list b{display:block;
  margin-bottom:4px;
  color:#173731;
  font-size:17px;}
.tp-mega-list small{display:block;
  color:#75837f;
  font-size:14px;}
.tp-mega-list i{width:38px;height:38px;
  flex:0 0 38px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#f8f3e9;
  color:#ef6b2e;
  font-style:normal;}
@media(max-width:1350px){
.tp-header-inner,
  .tp-breadcrumb-inner{width:min(1280px, calc(100% - 40px))}
.tp-header-inner{gap:16px}
.tp-main-menu{gap:14px}
.tp-main-menu>a,.tp-menu-trigger{font-size:14px}
.tp-hotline{flex-basis:145px;width:145px;font-size:13px}
}
@media(max-width:1080px){
.tp-main-menu{display:none}
}
:root{--tp-body-max:1240px;}
.tp-header-inner{width:100% !important;
  max-width:var(--tp-body-max) !important;
  margin:0 auto !important;
  padding-left:0 !important;
  padding-right:0 !important;
  box-sizing:border-box;
  height:104px !important;
  gap:16px !important;}
.tp-breadcrumb-inner{width:100% !important;
  max-width:var(--tp-body-max) !important;
  margin:0 auto !important;
  padding-left:0 !important;
  padding-right:0 !important;
  box-sizing:border-box;}
.tp-logo{flex:0 0 96px !important;
  width:96px !important;
  height:76px !important;
  margin:0 !important;
  padding:0 !important;}
.tp-logo img{width:88px !important;
  height:70px !important;
  max-width:88px !important;
  margin:0 !important;
  padding:0 !important;
  object-fit:contain !important;
  object-position:left center !important;}
.tp-main-menu{flex:1 1 auto !important;
  min-width:0 !important;
  gap:14px !important;
  justify-content:flex-start !important;}
.tp-main-menu>a,
.tp-menu-trigger{font-size:14px !important;
  height:104px !important;
  letter-spacing:-.012em !important;}
.tp-menu-trigger.active::after{bottom:23px !important;}
.tp-hotline{flex:0 0 142px !important;
  width:142px !important;
  min-height:48px !important;
  padding:0 10px !important;
  font-size:13px !important;
  border-radius:12px !important;}
.tp-mega-panel{width:min(1120px, calc(100vw - 48px)) !important;
  max-width:1120px !important;}
@media(max-width:1280px){
.tp-header-inner,
  .tp-breadcrumb-inner{width:calc(100% - 40px) !important;
    max-width:var(--tp-body-max) !important;}
.tp-main-menu{gap:11px !important}
.tp-main-menu>a,
  .tp-menu-trigger{font-size:13px !important}
.tp-hotline{flex-basis:132px !important;
    width:132px !important;
    font-size:12px !important;}
}
@media(max-width:1080px){
.tp-main-menu{display:none !important}
}
.tp-header-inner{max-width:1240px !important;
  height:98px !important;
  gap:16px !important;}
.tp-logo{flex:0 0 98px !important;
  width:98px !important;
  height:72px !important;}
.tp-logo img{width:92px !important;
  height:68px !important;
  max-width:92px !important;}
.tp-main-menu{gap:15px !important;}
.tp-main-menu > a,
.tp-menu-trigger{height:98px !important;
  font-size:15.5px !important;
  font-weight:650 !important;
  letter-spacing:-.008em !important;
  color:#173731 !important;}
.tp-main-menu > a:hover,
.tp-menu-trigger:hover{color:#c75624 !important;}
.tp-menu-trigger.active{color:#c75624 !important;}
.tp-menu-trigger.active::after{bottom:20px !important;
  height:2px !important;
  border-radius:2px !important;}
.tp-hotline{flex:0 0 150px !important;
  width:150px !important;
  min-height:48px !important;
  padding:0 13px !important;
  gap:7px;
  border-radius:12px !important;
  font-size:14px !important;
  font-weight:750 !important;
  letter-spacing:0 !important;
  box-shadow:0 8px 20px rgba(240,107,44,.14) !important;}
.tp-header-clean{background:#fffdfa !important;
  border-bottom:1px solid #e6ebe8 !important;}
.tp-breadcrumb-inner{max-width:1240px !important;
  min-height:62px !important;
  font-size:14px !important;}
.tp-mega-panel{width:min(1120px, calc(100vw - 48px)) !important;
  max-width:1120px !important;}
@media(max-width:1280px){
.tp-header-inner,
  .tp-breadcrumb-inner{width:calc(100% - 40px) !important;}
.tp-main-menu{gap:12px !important;}
.tp-main-menu > a,
  .tp-menu-trigger{font-size:14.5px !important;}
.tp-hotline{flex-basis:140px !important;
    width:140px !important;
    font-size:13px !important;}
}
@media(max-width:1080px){
.tp-main-menu{display:none !important}
}
.footer-benefit-item{min-height:98px !important;
  padding:22px 30px !important;
  gap:18px !important;}
.footer-benefit-no{width:42px !important;
  height:42px !important;
  flex-basis:42px !important;
  font-size:13px !important;}
.footer-benefit-item strong{font-family:var(--font-heading) !important;
  font-size:16px !important;
  line-height:1.25 !important;
  font-weight:700 !important;}
.footer-benefit-item p{font-family:var(--font-body) !important;
  font-size:14px !important;
  line-height:1.5 !important;}
.footer-main{max-width:1240px !important;
  padding:64px 0 54px !important;
  gap:54px !important;}
.footer-logo-wrap{width:165px !important;
  margin-bottom:22px !important;}
.footer-brand h3{font-family:var(--font-heading) !important;
  font-size:18px !important;
  line-height:1.42 !important;
  font-weight:700 !important;
  max-width:30ch !important;
  margin-bottom:16px !important;}
.footer-intro{font-family:var(--font-body) !important;
  font-size:15px !important;
  line-height:1.68 !important;
  max-width:38ch !important;
  margin-bottom:18px !important;}
.footer-brand address{font-family:var(--font-body) !important;
  font-size:14px !important;
  line-height:1.55 !important;}
.footer-tags{margin-top:20px !important;
  gap:8px !important;}
.footer-tags span{font-family:var(--font-body) !important;
  font-size:13px !important;
  padding:8px 11px !important;}
.footer-col{gap:15px !important;}
.footer-col-title{font-family:var(--font-heading) !important;
  font-size:14px !important;
  line-height:1.25;
  font-weight:750 !important;
  letter-spacing:.045em !important;
  padding-bottom:14px !important;
  margin-bottom:7px !important;}
.footer-col a{font-family:var(--font-body) !important;
  font-size:14px !important;
  line-height:1.5 !important;}
.footer-contact-card{padding:28px 26px 24px !important;
  border-radius:19px !important;}
.footer-contact-kicker{font-family:var(--font-heading) !important;
  font-size:12px !important;
  line-height:1;
  letter-spacing:.12em !important;}
.footer-contact-card h3{font-family:var(--font-heading) !important;
  font-size:26px !important;
  line-height:1.08 !important;
  font-weight:650 !important;
  letter-spacing:-.015em !important;
  margin:12px 0 12px !important;}
.footer-contact-card>p{font-family:var(--font-body) !important;
  font-size:14px !important;
  line-height:1.6 !important;
  margin-bottom:20px !important;}
.footer-contact-btn{min-height:58px !important;
  padding:10px 14px !important;
  gap:12px !important;
  border-radius:11px !important;}
.footer-contact-icon{width:36px !important;
  height:36px !important;
  flex-basis:36px !important;
  font-size:16px !important;}
.footer-contact-btn small{font-family:var(--font-heading) !important;
  font-size:12px !important;
  line-height:1.15 !important;}
.footer-contact-btn strong{font-family:var(--font-heading) !important;
  font-size:14px !important;
  line-height:1.2 !important;}
.footer-contact-meta{font-family:var(--font-body) !important;
  font-size:12px !important;
  line-height:1.55;
  gap:6px !important;}
.footer-bottom{max-width:1240px !important;
  padding:20px 0 22px !important;
  font-family:var(--font-body) !important;
  font-size:12px !important;}
.footer-bottom>div{gap:24px !important;}
@media(max-width:1280px){
.footer-main,
  .footer-bottom{width:calc(100% - 40px);}
}
@media(max-width:760px){
.footer-main{padding:44px 22px 36px !important;}
.footer-contact-card h3{font-size:23px !important;}
.footer-col-title{font-size:14px !important;}
.footer-col a{font-size:14px !important;}
}
.tp-footer-final{background:#0f332d;
  color:#c9dbd4;}
.tp-footer-main{width:100%;
  max-width:1240px;
  margin:0 auto;
  padding:54px 0 46px;
  display:grid;
  grid-template-columns:minmax(0,1.55fr) .72fr .78fr 1.02fr;
  gap:44px;
  align-items:start;}
.tp-footer-brand-first{min-width:0;
  padding-right:8px;}
.tp-footer-brand-row{min-height:210px;
  display:grid;
  grid-template-columns:150px minmax(0,1fr);
  gap:28px;
  align-items:center;}
.tp-footer-logo-cell{height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  border-right:1px solid rgba(255,255,255,.16);
  padding-right:26px;}
.tp-footer-logo-cell img{display:block;
  width:128px;
  height:auto;
  object-fit:contain;}
.tp-footer-company h3{margin:0 0 14px;
  color:#fff;
  font-family:var(--font-heading);
  font-size:17px;
  line-height:1.4;
  font-weight:700;
  letter-spacing:-.01em;}
.tp-footer-company p{margin:0 0 18px;
  max-width:46ch;
  color:#bfd0ca;
  font-family:var(--font-body);
  font-size:14px;
  line-height:1.65;}
.tp-footer-address{display:flex;
  align-items:flex-start;
  gap:10px;
  color:#e0ebe7;
  font-size:14px;
  line-height:1.5;}
.tp-footer-address-icon{color:#ef8a32;
  font-size:12px;
  transform:translateY(3px);}
.tp-footer-chips{margin-top:18px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;}
.tp-footer-chips span{min-height:36px;
  padding:0 12px;
  display:inline-flex;
  align-items:center;
  border:1px solid rgba(255,255,255,.17);
  border-radius:999px;
  color:#c5d6d0;
  font-size:12px;
  white-space:nowrap;}
.tp-footer-links{display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;}
.tp-footer-links h4{position:relative;
  width:100%;
  margin:0 0 8px;
  padding-bottom:13px;
  color:#fff;
  font-family:var(--font-heading);
  font-size:14px;
  line-height:1.25;
  font-weight:750;
  letter-spacing:.04em;}
.tp-footer-links h4::after{content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:30px;
  height:2px;
  border-radius:2px;
  background:#ef8a32;}
.tp-footer-links a{position:relative;
  padding-left:14px;
  color:#c5d6d0;
  text-decoration:none;
  font-size:14px;
  line-height:1.45;}
.tp-footer-links a::before{content:"›";
  position:absolute;
  left:0;
  color:#ef8a32;}
.tp-footer-links a:hover,
.tp-footer-links a.is-current{color:#fff;}
.tp-footer-links a.is-current{color:#ef8a32;}
.tp-footer-contact{padding:23px 22px 20px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:17px;
  background:#174039;
  box-shadow:0 15px 34px rgba(0,0,0,.11);}
.tp-footer-contact-kicker{color:#7ec4ae;
  font-size:12px;
  font-weight:750;
  letter-spacing:.10em;}
.tp-footer-contact h3{margin:9px 0 8px;
  color:#fff;
  font-family:var(--font-heading);
  font-size:20px;
  line-height:1.2;
  font-weight:680;
  letter-spacing:-.015em;}
.tp-footer-contact>p{margin:0 0 15px;
  color:#bdd0c9;
  font-size:13px;
  line-height:1.55;}
.tp-contact-row{min-height:50px;
  margin-top:8px;
  padding:7px 11px;
  display:flex;
  align-items:center;
  gap:10px;
  border-radius:10px;
  text-decoration:none;}
.tp-contact-call{background:#f4f7f4;
  color:#173731;}
.tp-contact-zalo1,
.tp-contact-zalo2{background:transparent;
  color:#fff;
  border:1px solid rgba(255,255,255,.34);}
.tp-contact-zalo1:hover,
.tp-contact-zalo2:hover{background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.55);}
.tp-contact-circle{width:32px;
  height:32px;
  flex:0 0 32px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(255,255,255,.94);
  color:#19705f;
  font-family:var(--font-heading);
  font-size:13px;
  font-weight:800;}
.tp-contact-call .tp-contact-circle{background:#19705f;
  color:#fff;}
.tp-contact-zalo1 .tp-contact-circle{color:#1787df;}
.tp-contact-zalo2 .tp-contact-circle{color:#189b67;}
.tp-contact-copy{min-width:0;
  display:flex;
  flex-direction:column;
  gap:1px;}
.tp-contact-copy small{font-family:var(--font-heading);
  font-size:12px;
  line-height:1.15;
  font-weight:750;
  letter-spacing:.045em;
  opacity:.82;}
.tp-contact-copy strong{font-family:var(--font-heading);
  font-size:14px;
  line-height:1.15;
  font-weight:750;}
.tp-contact-zalo2[data-needs-second-zalo="true"] .tp-contact-copy strong{font-size:12px;}
.tp-footer-contact-meta{margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.12);
  display:flex;
  flex-direction:column;
  gap:6px;
  color:#c4d6d0;
  font-size:12px;
  line-height:1.45;}
.tp-footer-contact-meta a{color:#e4efeb;
  text-decoration:none;}
.tp-footer-bottom{width:100%;
  max-width:1240px;
  margin:0 auto;
  padding:18px 0 20px;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  color:#8fa69e;
  font-size:12px;}
.tp-footer-bottom nav{display:flex;
  gap:20px;}
.tp-footer-bottom a{color:#8fa69e;
  text-decoration:none;}
.tp-footer-bottom a:hover{color:#fff;}
@media(max-width:1280px){
.tp-footer-main,
  .tp-footer-bottom{width:calc(100% - 40px);}
}
@media(max-width:1050px){
.tp-footer-main{grid-template-columns:1.4fr .8fr .8fr;}
.tp-footer-contact{grid-column:1 / -1;}
}
@media(max-width:760px){
.tp-footer-main{grid-template-columns:1fr 1fr;
    gap:34px 24px;
    padding:42px 20px 36px;}
.tp-footer-brand-first{grid-column:1 / -1;}
.tp-footer-brand-row{grid-template-columns:110px minmax(0,1fr);
    min-height:170px;}
.tp-footer-logo-cell{padding-right:18px;}
.tp-footer-logo-cell img{width:96px;}
.tp-footer-contact{grid-column:1 / -1;}
.tp-footer-bottom{width:auto;
    margin:0 20px;
    padding-bottom:82px;
    flex-direction:column;
    align-items:flex-start;}
.tp-footer-bottom nav{flex-wrap:wrap;}
}
@media(max-width:520px){
.tp-footer-main{grid-template-columns:1fr;}
.tp-footer-links{grid-column:1;}
.tp-footer-brand-row{grid-template-columns:1fr;}
.tp-footer-logo-cell{justify-content:flex-start;
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.12);
    padding:0 0 18px;}
}
.tp-footer-chips{gap:10px !important;}
.tp-footer-chips span{min-height:36px !important;
  padding:0 14px !important;}
#quoteForm label,
#quoteForm .form-label,
#quoteForm [class*="label"]{color:#28463F !important;
  font-family:var(--font-heading) !important;
  font-size:14.5px !important;
  line-height:1.3 !important;
  font-weight:650 !important;
  letter-spacing:.015em !important;}
#quoteForm label + input,
#quoteForm label + textarea,
#quoteForm label + select{margin-top:8px !important;}
#quoteForm input,
#quoteForm textarea,
#quoteForm select{color:#173731 !important;
  font-family:var(--font-body) !important;
  font-size:15px !important;
  font-weight:450 !important;
  line-height:1.45 !important;}
#quoteForm input::placeholder,
#quoteForm textarea::placeholder{color:#929B97 !important;
  opacity:1 !important;
  font-weight:400 !important;}
#quoteForm small,
#quoteForm .form-help,
#quoteForm .helper-text,
#f-phone-help{color:#4f625c !important;
  font-family:var(--font-body) !important;
  font-size:13px !important;
  line-height:1.45 !important;
  font-weight:400 !important;}
#quoteForm input:focus,
#quoteForm textarea:focus,
#quoteForm select:focus{border-color:#D9682F !important;
  box-shadow:0 0 0 3px rgba(217,104,47,.10) !important;
  outline:none !important;}
#quoteForm input,
#quoteForm textarea,
#quoteForm select{background:#FFFDFC !important;
  border-color:#D8E1DC !important;}
#quoteForm [role="group"] button,
#quoteForm .segmented button{font-size:14px !important;
  font-weight:550 !important;}
.subnav-inner::-webkit-scrollbar{display:none}
@media(max-width:1280px){
.subnav-inner{max-width:none!important;
    margin:0!important;
    padding-left:32px!important;
    padding-right:32px!important;}
}
@media(max-width:760px){
.subnav-inner{gap:22px;
    padding-left:18px!important;
    padding-right:18px!important;
    font-size:14px!important;}
}
.tp-floating-contact{position:fixed;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  z-index:900;
  width:176px;
  display:flex;
  flex-direction:column;
  gap:9px;}
.tp-float-item{min-height:54px;
  padding:7px 10px;
  display:flex;
  align-items:center;
  gap:9px;
  border-radius:12px;
  text-decoration:none;
  box-shadow:0 10px 24px rgba(12,42,37,.13);
  border:1px solid rgba(255,255,255,.08);}
.tp-float-call{background:#f4f7f4;
  color:#173731;
  border-color:#dfe8e3;}
.tp-float-zalo1,
.tp-float-zalo2{background:#fff;
  color:#173731;
  border-color:#dfe8e3;}
.tp-float-zalo1:hover,
.tp-float-zalo2:hover{background:#f4f7f4;
  border-color:#c7d6cf;}
.tp-float-icon{width:32px;
  height:32px;
  flex:0 0 32px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#fff;
  font-family:var(--font-heading);
  font-size:13px;
  font-weight:800;}
.tp-float-call .tp-float-icon{background:#19705f;
  color:#fff;}
.tp-float-zalo1 .tp-float-icon{color:#1787df}
.tp-float-zalo2 .tp-float-icon{color:#189b67}
.tp-float-copy{min-width:0;
  display:flex;
  flex-direction:column;
  gap:1px;}
.tp-float-copy small{font-family:var(--font-heading);
  font-size:8.5px;
  line-height:1.15;
  font-weight:750;
  letter-spacing:.035em;
  opacity:.82;}
.tp-float-copy strong{font-family:var(--font-heading);
  font-size:13px;
  line-height:1.15;
  font-weight:750;
  white-space:nowrap;}
.tp-float-zalo2[data-needs-second-zalo="true"] .tp-float-copy strong{font-size:12px;}
@media (hover:hover){
.tp-float-item{transition:transform .16s ease, box-shadow .16s ease;}
.tp-float-item:hover{transform:translateX(-2px);
    box-shadow:0 12px 28px rgba(12,42,37,.16);}
}
@media(max-width:760px){
body{padding-bottom:74px;}
.tp-floating-contact{left:0;
    right:0;
    bottom:0;
    top:auto;
    width:auto;
    transform:none;
    padding:8px 10px calc(8px + env(safe-area-inset-bottom));
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px;
    background:rgba(15,51,45,.96);
    backdrop-filter:blur(10px);
    border-top:1px solid rgba(255,255,255,.10);
    box-shadow:0 -8px 24px rgba(12,42,37,.12);}
.tp-float-item{min-height:50px;
    padding:6px 7px;
    border-radius:10px;
    justify-content:center;
    gap:7px;
    box-shadow:none;}
.tp-float-icon{width:28px;
    height:28px;
    flex-basis:28px;
    font-size:12px;}
.tp-float-copy small{font-size:7.5px;}
.tp-float-copy strong{font-size:12px;}
.tp-float-zalo2[data-needs-second-zalo="true"] .tp-float-copy strong{font-size:8.5px;}
}
.tp-zalo-mark{width:32px;
  height:32px;
  flex:0 0 32px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#fff;
  overflow:hidden;
  box-sizing:border-box;}
.tp-zalo-word{display:block;
  font-family:Arial,Helvetica,sans-serif;
  font-size:12px;
  line-height:1;
  font-weight:700;
  letter-spacing:-.06em;
  color:#1687e5;
  transform:translateY(.2px);}
.tp-float-zalo2 .tp-zalo-word,
.tp-contact-zalo2 .tp-zalo-word{color:#169b67;}
.tp-contact-row .tp-zalo-mark{width:32px;
  height:32px;
  flex-basis:32px;}
.tp-floating-contact .tp-zalo-mark{width:32px;
  height:32px;
  flex-basis:32px;}
a.hd-cta:hover,
button.hd-cta:hover,
.tp-mega-promo-copy a:hover,
button[type="submit"]:hover,
a[href^="tel:"].tp-float-call:hover,
.tp-contact-call:hover{color:#fff !important;}
.tp-float-call:hover,
.tp-contact-call:hover{color:#173731 !important;}
.tp-float-zalo1:hover,
.tp-float-zalo2:hover,
.tp-contact-zalo1:hover,
.tp-contact-zalo2:hover{color:#fff !important;}
a[style*="background: var(--color-accent)"]:hover,
button[style*="background: var(--color-accent)"]:hover,
a[style*="background:var(--color-accent)"]:hover,
button[style*="background:var(--color-accent)"]:hover{color:#fff !important;}
a[style*="background: var(--color-neutral-100)"]:hover,
button[style*="background: var(--color-neutral-100)"]:hover,
a[style*="background:#fff"]:hover,
button[style*="background:#fff"]:hover{color:#173731 !important;}
.tp-float-item:hover,
.tp-contact-row:hover{text-decoration:none !important;}
.tp-float-item:hover .tp-float-copy small,
.tp-float-item:hover .tp-float-copy strong,
.tp-contact-row:hover .tp-contact-copy small,
.tp-contact-row:hover .tp-contact-copy strong{color:inherit !important;}
@media (hover:hover){
.tp-contact-row,
  .tp-float-item{transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;}
.tp-contact-row:hover,
  .tp-float-item:hover{transform:translateY(-1px);
    filter:brightness(1.02);}
}
@media(max-width:760px){
.tp-floating-contact .tp-zalo-mark{width:28px;
    height:28px;
    flex-basis:28px;}
.tp-floating-contact .tp-zalo-word{font-size:12px;}
}
.mobile-bar{display:none !important;}
.tp-zalo-mark{width:32px !important;
  height:32px !important;
  flex:0 0 32px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:50% !important;
  background:#fff !important;
  overflow:hidden !important;
  box-sizing:border-box !important;}
.tp-zalo-word{display:block !important;
  font-family:Arial,Helvetica,sans-serif !important;
  font-size:9.5px !important;
  line-height:1 !important;
  font-weight:700 !important;
  letter-spacing:-.06em !important;
  color:#1687e5 !important;}
.tp-contact-zalo2 .tp-zalo-word,
.tp-float-zalo2 .tp-zalo-word{color:#169b67 !important;}
.tp-contact-call,
.tp-float-call{color:#173731 !important;}
.tp-contact-call .tp-contact-copy small,
.tp-contact-call .tp-contact-copy strong,
.tp-float-call .tp-float-copy small,
.tp-float-call .tp-float-copy strong{color:#173731 !important;}
.tp-contact-zalo1,
.tp-contact-zalo2,
.tp-float-zalo1,
.tp-float-zalo2{color:#fff !important;}
.tp-contact-zalo1 .tp-contact-copy small,
.tp-contact-zalo1 .tp-contact-copy strong,
.tp-contact-zalo2 .tp-contact-copy small,
.tp-contact-zalo2 .tp-contact-copy strong,
.tp-float-zalo1 .tp-float-copy small,
.tp-float-zalo1 .tp-float-copy strong,
.tp-float-zalo2 .tp-float-copy small,
.tp-float-zalo2 .tp-float-copy strong{color:#fff !important;}
.tp-contact-call:hover,
.tp-contact-call:focus-visible,
.tp-float-call:hover,
.tp-float-call:focus-visible{color:#173731 !important;
  background:#f4f7f4 !important;}
.tp-contact-call:hover .tp-contact-copy small,
.tp-contact-call:hover .tp-contact-copy strong,
.tp-contact-call:focus-visible .tp-contact-copy small,
.tp-contact-call:focus-visible .tp-contact-copy strong,
.tp-float-call:hover .tp-float-copy small,
.tp-float-call:hover .tp-float-copy strong,
.tp-float-call:focus-visible .tp-float-copy small,
.tp-float-call:focus-visible .tp-float-copy strong{color:#173731 !important;}
.tp-contact-zalo1:hover,
.tp-contact-zalo1:focus-visible,
.tp-contact-zalo2:hover,
.tp-contact-zalo2:focus-visible,
.tp-float-zalo1:hover,
.tp-float-zalo1:focus-visible,
.tp-float-zalo2:hover,
.tp-float-zalo2:focus-visible{color:#fff !important;}
.tp-contact-zalo1:hover .tp-contact-copy *,
.tp-contact-zalo2:hover .tp-contact-copy *,
.tp-float-zalo1:hover .tp-float-copy *,
.tp-float-zalo2:hover .tp-float-copy *,
.tp-contact-zalo1:focus-visible .tp-contact-copy *,
.tp-contact-zalo2:focus-visible .tp-contact-copy *,
.tp-float-zalo1:focus-visible .tp-float-copy *,
.tp-float-zalo2:focus-visible .tp-float-copy *{color:#fff !important;}
@media (hover:hover){
.tp-contact-row:hover,
  .tp-float-item:hover{transform:translateY(-1px) !important;
    filter:brightness(1.015) !important;}
}
.tp-footer-contact .tp-contact-row{min-height:50px !important;
  padding:7px 11px !important;
  gap:10px !important;
  border-radius:10px !important;}
.tp-footer-contact .tp-contact-zalo1{background:#1787df !important;}
.tp-footer-contact .tp-contact-zalo2{background:#189b67 !important;}
.tp-footer-contact .tp-contact-copy small{font-size:12px !important;}
.tp-footer-contact .tp-contact-copy strong{font-size:14px !important;}
.tp-footer-contact .tp-contact-zalo2[data-needs-second-zalo="true"] .tp-contact-copy strong{font-size:12px !important;}
@media(max-width:760px){
.tp-floating-contact .tp-zalo-mark{width:28px !important;
    height:28px !important;
    flex-basis:28px !important;}
.tp-floating-contact .tp-zalo-word{font-size:8.5px !important;}
}
.tp-footer-policy{grid-column:1 / 4;
  align-self:start;
  margin-top:6px;
  padding:18px 0 0;
  display:flex;
  align-items:flex-start;
  gap:12px;
  border-top:1px solid rgba(255,255,255,.08);
  max-width:100%;}
.tp-footer-policy-icon{width:24px;
  height:24px;
  flex:0 0 24px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(239,138,50,.38);
  color:#ef8a32;
  font-family:var(--font-heading);
  font-size:12px;
  font-weight:800;
  transform:translateY(1px);}
.tp-footer-policy-copy h4{margin:0 0 6px;
  color:#d9e6e1;
  font-family:var(--font-heading);
  font-size:13px;
  line-height:1.3;
  font-weight:700;
  letter-spacing:.02em;}
.tp-footer-policy-copy p{margin:0;
  max-width:90ch;
  color:#90aaa1;
  font-family:var(--font-body);
  font-size:12px;
  line-height:1.6;
  font-weight:400;}
@media(max-width:1050px){
.tp-footer-policy{grid-column:1 / -1;}
}
@media(max-width:760px){
.tp-footer-policy{grid-column:1 / -1;
    margin-top:0;
    padding-top:16px;}
.tp-footer-policy-copy p{font-size:12px;}
}
.tp-footer-main{align-items:start !important;}
.tp-footer-policy{grid-column:1 / 4 !important;
  grid-row:2 !important;
  margin-top:8px !important;
  padding:18px 0 0 !important;
  min-height:150px !important;
  display:flex !important;
  align-items:flex-start !important;
  gap:12px !important;
  border-top:1px solid rgba(255,255,255,.08) !important;
  max-width:none !important;}
.tp-footer-contact{grid-column:4 !important;
  grid-row:1 / 3 !important;
  align-self:start;}
.tp-footer-policy-icon{width:24px !important;
  height:24px !important;
  flex:0 0 24px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:50% !important;
  border:1px solid rgba(239,138,50,.38) !important;
  color:#ef8a32 !important;
  font-family:var(--font-heading) !important;
  font-size:12px !important;
  font-weight:800 !important;
  margin-top:1px;}
.tp-footer-policy-copy{max-width:920px !important;}
.tp-footer-policy-copy h4{margin:0 0 7px !important;
  color:#d9e6e1 !important;
  font-family:var(--font-heading) !important;
  font-size:13px !important;
  line-height:1.3 !important;
  font-weight:700 !important;
  letter-spacing:.02em !important;}
.tp-footer-policy-copy p{margin:0 !important;
  color:#90aaa1 !important;
  font-family:var(--font-body) !important;
  font-size:12px !important;
  line-height:1.65 !important;
  font-weight:400 !important;
  max-width:88ch !important;}
@media(max-width:1050px){
.tp-footer-contact{grid-column:1 / -1 !important;
    grid-row:auto !important;}
.tp-footer-policy{grid-column:1 / -1 !important;
    grid-row:auto !important;
    min-height:auto !important;}
}
main>.band:first-child figure.blueprint img#productMainImage{object-fit:contain!important;
  background:#fff;}
html body main>.band:first-child .gallery-thumb{width:100%!important;
  height:auto!important;
  aspect-ratio:1/1!important;
  align-self:start!important;}
html body main>.band:first-child .gallery-thumb img{display:block!important;
  width:100%!important;
  height:100%!important;
  aspect-ratio:1/1!important;
  object-fit:cover!important;}
.stock-strip{display:flex;align-items:flex-start;gap:11px;padding:13px 16px;border:1px solid #cfe0d4;background:#f0f8f2;border-radius:12px}
.stock-dot{flex:0 0 9px;width:9px;height:9px;margin-top:7px;border-radius:50%;background:#258555;box-shadow:0 0 0 4px rgba(37,133,85,.16)}
.stock-copy{display:block;font-size:14px;line-height:1.5;color:#405853}
.stock-copy strong{display:block;font-family:var(--font-heading);font-size:16px;color:#173731}
.hero-alt-cta{margin:-5px 0 0;font-size:14px!important;color:#61736e!important}
.hero-alt-cta a{font-weight:700;text-decoration:underline;text-underline-offset:3px}
.technical-view{min-width:0}
.technical-tabs{display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:4px;
  margin-bottom:14px;
  padding:4px;
  border:1px solid #dbe5df;
  border-radius:12px;
  background:#f7f1e6;}
.technical-tabs button{min-height:46px;
  padding:10px 14px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:#405853;
  font-family:var(--font-heading);
  font-size:13px;
  font-weight:700;
  letter-spacing:.04em;
  cursor:pointer;}
.technical-tabs button[aria-selected="true"]{background:#173731;
  color:#fff;
  box-shadow:inset 0 -3px 0 #ec6d2f;}
.technical-tabs button:focus-visible{outline:3px solid rgba(236,109,47,.28);outline-offset:2px}
.technical-view .spec-data{margin-top:0}
[role="tabpanel"][hidden]{display:none!important}
.spec-data{margin-top:24px;padding:20px;background:#fff;border:1px solid #dbe5df;border-radius:18px;box-shadow:0 10px 30px rgba(17,51,46,.05)}
.spec-data-head{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin-bottom:18px}
.spec-data-kicker{font-family:var(--font-heading);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#a84216;margin-bottom:4px}
#specDataTitle{display:block;font-family:var(--font-heading);font-size:24px;color:#173731}
#specDataRated{margin:4px 0 0;font-size:14px;color:#4f625c}
.spec-filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.spec-filter{display:flex;align-items:center;gap:7px;padding:6px 10px;border:1px solid #dbe5df;border-radius:10px;background:#f7f1e6;font-size:14px;color:#405853}
.spec-filter label{font-family:var(--font-heading);font-weight:600;white-space:nowrap}
.spec-filter input{width:74px;min-height:34px;padding:4px 8px;border:1px solid #cfdcd6;border-radius:8px;background:#fff;font:inherit;color:#173731}
.spec-filter input:focus-visible{outline:2px solid #b94b1a;outline-offset:1px}
.spec-table-scroll{overflow-x:auto;overflow-y:visible;max-height:none;-webkit-overflow-scrolling:touch}
.spec-table{width:100%;min-width:620px;border-collapse:collapse}
.spec-table caption{caption-side:top;text-align:left;padding:0 0 12px;font-size:14px;line-height:1.5;color:#4f625c}
.spec-table th,.spec-table td{padding:10px 12px;text-align:left;font-size:15px;border-bottom:1px solid #dbe5df;white-space:nowrap}
.spec-table thead th{font-family:var(--font-heading);font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:#405853;background:#f7f1e6}
.spec-table tbody tr:hover{background:#faf7f1}
.spec-table tbody tr.is-hit{background:#fff4ec;box-shadow:inset 3px 0 0 #b94b1a}
.spec-table tbody tr.is-dim{opacity:.3}
.spec-table td:first-child{font-family:var(--font-heading);font-weight:600}
.spec-limit{margin-left:5px;color:#a84216;font-size:13px}
.spec-note{margin:12px 0 0;font-size:14px;line-height:1.55;color:#4f625c}
.drawing-viewer-head-actions{display:flex;gap:8px;flex-wrap:wrap}
.form-help{font-size:13px;color:#61736e}
.quote-handoff{padding:17px;border:1px solid #cfe0d4;border-radius:14px;background:#f0f8f2}
.quote-handoff h4{margin:0 0 6px;font-size:19px}
.quote-handoff p{margin:0 0 12px;font-size:14px}
.quote-summary{margin:0 0 12px;padding:12px;max-height:190px;overflow:auto;white-space:pre-wrap;background:#fff;border:1px solid #dbe5df;border-radius:10px;font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:#173731}
.quote-handoff-actions{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:760px){
.spec-data{padding:15px}
.spec-data-head{align-items:flex-start}
#specDataTitle{font-size:21px}
.drawing-viewer-head-actions{width:100%}
}
html body a.btn.btn-primary,
html body button.btn.btn-primary,
html body button[type="submit"].btn-primary{background:#b94b1a!important;
  border-color:#b94b1a!important;
  color:#fff!important;}
.tp-footer-policy{min-height:auto!important}
nav[aria-label="Mục trong trang"] a.is-current{color:#a84216!important;
  font-weight:700;
  box-shadow:inset 0 -2px 0 #b94b1a;}
html body #quoteForm .seg{background:#f7f1e6!important;
  border-color:#cfdcd6!important;
  padding:3px!important;
  gap:3px;}
html body #quoteForm .seg-opt{color:#405853!important;
  background:transparent!important;
  border:0!important;
  border-radius:8px!important;
  font-weight:600!important;
  transition:background .16s ease,color .16s ease,box-shadow .16s ease;}
html body #quoteForm .seg-opt:has(input:checked){color:#fff!important;
  background:#173731!important;
  box-shadow:inset 0 -3px 0 #ec6d2f!important;}
html body #quoteForm .seg-opt:not(:has(input:checked)):hover{color:#173731!important;
  background:#fff!important;}
html body #quoteForm .seg-opt:has(input:focus-visible){outline:3px solid rgba(236,109,47,.32)!important;
  outline-offset:1px!important;}
.tp-mobile-actions,
.tp-zalo-backdrop,
.tp-zalo-sheet{display:none}
@media(min-width:1025px) and (max-width:1679px){
main>.band{padding-right:96px!important}
footer.tp-footer-final{padding-right:72px}
.tp-floating-contact{width:176px;
    align-items:flex-end;
    pointer-events:none;}
.tp-float-item{width:56px;
    min-width:56px;
    padding:10px 11px;
    justify-content:center;
    overflow:hidden;
    pointer-events:auto;
    transition:width .18s ease,transform .16s ease,box-shadow .16s ease!important;}
.tp-float-item .tp-float-copy{display:none}
.tp-float-item:hover,
  .tp-float-item:focus-visible{width:176px;
    justify-content:flex-start;}
.tp-float-item:hover .tp-float-copy,
  .tp-float-item:focus-visible .tp-float-copy{display:flex}
}
@media(max-width:760px){
body{padding-bottom:calc(68px + env(safe-area-inset-bottom))!important}
.tp-floating-contact{display:none!important}
.mobile-bar{display:none!important}
main>.band:first-child .hero{grid-template-columns:minmax(0,1fr)!important;gap:30px!important;align-items:start!important}
main>.band:first-child .hero>div:nth-child(2){order:-1}
main>.band:first-child figure.blueprint{max-height:56vh}
main>.band:first-child figure.blueprint img#productMainImage{max-height:56vh;aspect-ratio:auto!important}
.tp-mobile-actions{position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:1050;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1px;
    padding-bottom:env(safe-area-inset-bottom);
    background:#31534c;
    border-top:1px solid rgba(255,255,255,.12);
    box-shadow:0 -10px 28px rgba(13,43,38,.16);}
.tp-mobile-action{min-width:0;
    min-height:60px;
    padding:7px 6px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    border:0;
    border-radius:0;
    font-family:var(--font-heading);
    text-decoration:none;
    cursor:pointer;}
.tp-mobile-action>span{font-size:17px;line-height:1;font-style:normal}
.tp-mobile-action>strong{font-size:12px;line-height:1.2;letter-spacing:.055em}
.tp-mobile-call{background:#173731;color:#fff}
.tp-mobile-zalo{background:#fff;color:#173731}
.tp-mobile-zalo .tp-zalo-word{color:#1787df!important;background:#fff;border-radius:999px;padding:4px 6px;font-size:12px!important}
.tp-mobile-quote{background:#b94b1a;color:#fff}
.tp-zalo-backdrop{position:fixed;
    inset:0;
    z-index:1080;
    background:rgba(9,29,26,.54);
    backdrop-filter:blur(2px);}
.tp-zalo-backdrop:not([hidden]){display:block}
.tp-zalo-sheet{position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:1090;
    padding:10px 18px calc(22px + env(safe-area-inset-bottom));
    background:#fffdfa;
    color:#173731;
    border-radius:22px 22px 0 0;
    box-shadow:0 -22px 70px rgba(7,35,30,.22);}
.tp-zalo-sheet:not([hidden]){display:block;animation:tpSheetIn .2s ease-out}
.tp-zalo-sheet-handle{width:42px;height:4px;margin:0 auto 14px;border-radius:999px;background:#cad7d2}
.tp-zalo-sheet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.tp-zalo-sheet-head small{display:block;color:#61736e;font-size:12px;letter-spacing:.08em;font-weight:700}
.tp-zalo-sheet-head h2{margin:3px 0 0;font-size:25px!important}
.tp-zalo-sheet-head button{width:42px;height:42px;border:1px solid #d8e3de;border-radius:50%;background:#fff;color:#173731;font-size:26px;line-height:1;cursor:pointer}
.tp-zalo-sheet>p{margin:10px 0 16px;font-size:14px;line-height:1.5;max-width:54ch}
.tp-zalo-people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tp-zalo-person{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:11px;padding:13px;border:1px solid #dce6e1;border-radius:14px;background:#fff;color:#173731;text-decoration:none}
.tp-zalo-avatar{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:#1787df;color:#fff;font-weight:800}
.tp-zalo-person-tai .tp-zalo-avatar{background:#189b67}
.tp-zalo-person span:nth-child(2){display:flex;flex-direction:column;min-width:0}
.tp-zalo-person small{font-size:12px;color:#61736e;letter-spacing:.055em}
.tp-zalo-person strong{font-size:15px}
.tp-zalo-person em{font-size:13px;color:#405853;font-style:normal}
.tp-zalo-person>b{font-size:18px}
.drawing-browser{grid-template-columns:minmax(0,1fr)!important}
.drawing-selector{order:-1;position:static!important}
.technical-view{order:2;scroll-margin-top:88px}
#drawingSelectorList{display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:10px!important;
    overflow:visible;
    padding:2px;}
#drawingSelectorList .drawing-choice{grid-template-columns:minmax(0,1fr) auto!important;min-width:0;padding:11px!important;gap:7px!important}
#drawingSelectorList .drawing-choice>img{display:none!important}
#drawingSelectorList .drawing-choice strong{font-size:15px!important;line-height:1.25}
#drawingSelectorList .drawing-choice small{display:block;font-size:12px;line-height:1.3;margin-top:2px}
#drawingMainBtn>div{height:min(620px,76vh)!important}
}
@media(max-width:640px){
.tp-zalo-people{grid-template-columns:1fr}
#drawingSelectorList{grid-template-columns:repeat(2,minmax(0,1fr))!important}
#drawingMainBtn>div{height:min(500px,68vh)!important}
nav[aria-label="Mục trong trang"]{position:static!important}
}
@keyframes tpSheetIn{from{transform:translateY(24px);opacity:.45}to{transform:translateY(0);opacity:1}}
@media(prefers-reduced-motion:reduce){
.tp-zalo-sheet:not([hidden]){animation:none}
}
:root{--color-bg: #f2f2f3;
  --color-surface: #e9e9ea;
  --color-text: #1d1f20;
  --color-accent: #5980a6;
  --color-accent-2: #728fab;
  --color-divider: color-mix(in srgb, #1d1f20 16%, transparent);

  /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
  --color-neutral-100: #f5f5f8;
  --color-neutral-200: #e7e7ea;
  --color-neutral-300: #d4d4d7;
  --color-neutral-400: #b7b7ba;
  --color-neutral-500: #98989b;
  --color-neutral-600: #7a7a7d;
  --color-neutral-700: #5d5d60;
  --color-neutral-800: #424244;
  --color-neutral-900: #2b2b2d;

  --color-accent-100: #eef6ff;
  --color-accent-200: #d6ebff;
  --color-accent-300: #b5d9fd;
  --color-accent-400: #94bce3;
  --color-accent-500: #749dc4;
  --color-accent-600: #597ea3;
  --color-accent-700: #416180;
  --color-accent-800: #2c455d;
  --color-accent-900: #1d2d3d;

  --color-accent-2-100: #eef6ff;
  --color-accent-2-200: #d6ebff;
  --color-accent-2-300: #bdd8f2;
  --color-accent-2-400: #9ebbd8;
  --color-accent-2-500: #7e9cb8;
  --color-accent-2-600: #627d98;
  --color-accent-2-700: #486077;
  --color-accent-2-800: #314457;
  --color-accent-2-900: #1f2d3a;

  --font-heading: "Barlow Condensed", system-ui, sans-serif;
  --font-heading-weight: 600;
  --font-body: "Barlow", system-ui, sans-serif;

  --space-1: 3.4px;
  --space-2: 6.8px;
  --space-3: 10.2px;
  --space-4: 13.6px;
  --space-6: 20.4px;
  --space-8: 27.2px;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 7px;

  /* Elevation — derived from the ground: soft ink-tinted shadows on a
     light theme, a hairline edge + ambient darkness on a dark one. */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2b2b2d 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2b2b2d 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2b2b2d 22%, transparent);}
body{background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);}
h1, h2, h3, h4{font-family: var(--font-heading); font-weight: var(--font-heading-weight);}
.blueprint{position: relative;
  border: 1px solid var(--color-divider);
  border-radius: 0;}
.blueprint.halftone, .blueprint.plate, .blueprint.duotone{overflow: visible;}
.blueprint > .corner{position: absolute; width: 11px; height: 11px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);}
.blueprint > .corner::before, .blueprint > .corner::after{content: ""; position: absolute; background: currentColor;}
.blueprint > .corner::before{left: 5px; top: 0; width: 1px; height: 100%;}
.blueprint > .corner::after{top: 5px; left: 0; width: 100%; height: 1px;}
.blueprint > .corner.tl{top: -6px; left: -6px;}
.blueprint > .corner.tr{top: -6px; right: -6px;}
.blueprint > .corner.bl{bottom: -6px; left: -6px;}
.blueprint > .corner.br{bottom: -6px; right: -6px;}
.duotone{position:relative;overflow:hidden}
.duotone::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--color-accent);mix-blend-mode:color}
*, *::before, *::after{box-sizing: border-box;}
body{margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400;}
h1, h2, h3, h4, h5, h6{font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);}
h1{font-size: 42px;}
h2{font-size: 32px;}
h3{font-size: 25px;}
h4{font-size: 20px;}
h5{font-size: 16px;}
h6{font-size: 13px;}
h6{letter-spacing: 0.08em; text-transform: uppercase;}
p{margin: 0 0 var(--space-3);}
a{color: var(--color-accent); text-underline-offset: 3px;}
img{display: block; max-width: 100%;}
figure{margin: 0;}
figcaption{font-size: 12px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);}
.text-muted{color: color-mix(in srgb, var(--color-text) 55%, transparent);}
:focus{outline: none;}
:focus-visible{outline: 2px solid var(--color-accent); outline-offset: 2px;}
::selection{background: color-mix(in srgb, var(--color-accent) 30%, transparent);}
.hr{height: 1px; border: 0; margin: var(--space-4) 0;
  background: var(--color-divider);}
.btn{display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text); /* matches the .input's 14px —
     the pair sits side by side in sign-up rows */
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);}
.btn svg{display: block;}
.btn:disabled{opacity: 0.45; cursor: not-allowed;}
.btn-primary{background: var(--color-accent); color: var(--color-bg);}
.btn-primary:hover{background: var(--color-accent-600);}
.btn-primary:active{background: var(--color-accent-700);}
.btn-secondary{border-color: var(--color-divider);}
.btn-secondary:hover{background: color-mix(in srgb, var(--color-text) 7%, transparent);}
.btn-secondary:active{background: color-mix(in srgb, var(--color-text) 14%, transparent);}
.btn-ghost{color: var(--color-accent); padding-inline: var(--space-1);}
.btn-ghost:hover{background: color-mix(in srgb, var(--color-accent) 10%, transparent);}
.btn-ghost:active{background: color-mix(in srgb, var(--color-accent) 18%, transparent);}
.btn-icon{width: 36px; height: 36px; padding: 0;}
.btn-block{width: 100%; margin-top: var(--space-2);}
.field > label{display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);}
.input{width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);}
.input:hover{border-color: color-mix(in srgb, var(--color-text) 45%, transparent);}
.input:focus-visible{border-color: var(--color-accent); outline-offset: 0;}
textarea.input{min-height: 90px; resize: vertical;}
.radio{display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px;}
.radio input, .seg-opt input{position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;}
.radio .dot{width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--color-divider);}
.radio:hover .dot{border-color: var(--color-accent);}
.radio input:checked + .dot{border-color: var(--color-accent); background: var(--color-accent);
  box-shadow: inset 0 0 0 4px var(--color-bg);}
.radio input:focus-visible + .dot{outline: 2px solid var(--color-accent); outline-offset: 2px;}
.seg{display: inline-flex; overflow: hidden;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);}
.seg-opt{display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; font-size: 13px; cursor: pointer;}
.seg-opt + .seg-opt{border-left: 1px solid var(--color-divider);}
.seg-opt:has(input:checked){background: var(--color-accent); color: var(--color-bg);}
.seg-opt:not(:has(input:checked)):hover{background: color-mix(in srgb, var(--color-text) 7%, transparent);}
.seg-opt:has(input:focus-visible){outline: 2px solid var(--color-accent); outline-offset: -2px;}
.card{display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface);}
.card-kicker{font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent);}
.card-title{font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; line-height: 1.2;}
.card-body{margin: 0; font-size: 13px; opacity: 0.8; flex: 1;}
.card-meta{display: flex; align-items: center; gap: 6px; font-size: 12px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);}
.elev-sm{box-shadow: var(--shadow-sm);}
.elev-md{box-shadow: var(--shadow-md);}
.elev-lg{box-shadow: var(--shadow-lg);}
.tag{display: inline-flex; align-items: center; font-size: 12px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);}
.tag-accent{background: var(--color-accent-100); color: var(--color-accent-800);}
.tag-accent-2{background: var(--color-accent-2-100); color: var(--color-accent-2-800);}
.tag-neutral{background: var(--color-neutral-100); color: var(--color-neutral-800);}
.tag-outline{border: 1px solid var(--color-accent); color: var(--color-accent);}
.nav{display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: none;}
.nav-brand{font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; margin-right: auto;}
.nav a{color: inherit; text-decoration: none; font-size: 14px;}
.nav a:hover, .nav a[aria-current='page']{color: var(--color-accent);}
.table{width: 100%; border-collapse: collapse; font-size: 14px;}
.table th{text-align: left; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 1px solid var(--color-divider);}
.table td{padding: var(--space-2);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);}
.table tbody tr:hover{background: color-mix(in srgb, var(--color-text) 4%, transparent);}
.dialog-backdrop{position: fixed; inset: 0; display: grid; place-items: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);}
.dialog{width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-lg);}
.dialog-title{font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px;}
.dialog-body{font-size: 14px; opacity: 0.85;}
.dialog-actions{display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2);}
.card, .btn, .input, .tag, .seg, .dialog{border-radius: 0;}
.card, .dialog{background: transparent; border: 1px solid var(--color-divider);}
.btn{border: 1px solid var(--color-divider);}
.btn-primary{border-color: var(--color-accent);}
.btn-ghost{border-color: transparent;}
:root{/* Hệ màu Tiến Phát V5 — remap token của design system, không override bằng !important */
  --color-bg: #fffdf8;
  --color-surface: #f7f2e8;
  --color-text: #17332f;
  --color-accent: #e96a2a;
  --color-accent-2: #d15c22;
  --color-divider: #d9e3de;

  --color-neutral-100: #fffdf8;
  --color-neutral-200: #f7f2e8;
  --color-neutral-300: #ece5d9;
  --color-neutral-400: #cdd8d2;
  --color-neutral-500: #9aa8a3;
  --color-neutral-600: #7b8a85;
  --color-neutral-700: #596d69;
  --color-neutral-800: #2f4640;
  --color-neutral-900: #17332f;

  --color-accent-100: #fbeee6;
  --color-accent-200: #f7e1d5;
  --color-accent-300: #f19a63;
  --color-accent-400: #f0a173;
  --color-accent-500: #e96a2a;
  --color-accent-600: #d15c22;
  --color-accent-700: #b04c1c;
  --color-accent-800: #24423c;
  --color-accent-900: #17332f;

  --color-accent-2-100: #fbeee6;
  --color-accent-2-200: #f7e1d5;
  --color-accent-2-300: #f19a63;
  --color-accent-2-400: #f0a173;
  --color-accent-2-500: #e96a2a;
  --color-accent-2-600: #d15c22;
  --color-accent-2-700: #b04c1c;
  --color-accent-2-800: #24423c;
  --color-accent-2-900: #17332f;

  /* dải nền phụ của trang */
  --tone-peach: #fcf0e8;
  --tone-cream: #f7f2e8;
  --tone-green-card: #253f3b;
  --tone-green-line: #48625d;

  /* Typography cho tiếng Việt: Be Vietnam Pro, đủ dấu, thân chữ rộng dễ đọc */
  --font-heading: "Be Vietnam Pro", system-ui, sans-serif;
  --font-body: "Be Vietnam Pro", system-ui, sans-serif;
  --font-heading-weight: 700;}
body{font-size: 16px; line-height: 1.65; letter-spacing: 0;}
h1, h2, h3, h4, h5, h6{line-height: 1.28; letter-spacing: -0.005em;}
h1{line-height: 1.2;}
p{line-height: 1.65;}
strong, b{font-weight: 600;}
.field > label, .table th, legend{font-size: 14px !important; letter-spacing: 0.02em; text-transform: none;}
.btn{font-size: 16px; letter-spacing: 0.02em; font-weight: 600;}
.tag{font-size: 13px;}
.input, textarea.input{font-size: 16px; line-height: 1.5;}
.table td{font-size: 16px;}
html, body{background: var(--color-bg);}
a:hover{color: var(--color-accent-700);}
.sheet-row{display: grid; grid-template-columns: 150px 1fr; gap: 0; border-top: 1px solid var(--color-divider);}
.sheet-row:last-child{border-bottom: 1px solid var(--color-divider);}
.skip{position: absolute; left: -9999px; top: 0;}
.skip:focus{left: 16px; top: 16px; z-index: 60; background: var(--color-accent); color: var(--color-bg); padding: 10px 16px; font-family: var(--font-heading);}
.mobile-bar{display: none;}
.hd-nav a{padding: 6px 0;}
@media (max-width: 1180px){
.hero{grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 32px !important;}
.hd-nav{gap: 18px; font-size: 15px !important;}
}
@media (max-width: 980px){
.hd-nav{display: none;}
.hd-cta{margin-left: auto !important;}
}
@media (max-width: 900px){
.split, .hero{grid-template-columns: minmax(0, 1fr) !important;}
.cells-4{grid-template-columns: repeat(2, minmax(0, 1fr)) !important;}
.cells-3{grid-template-columns: minmax(0, 1fr) !important;}
#ban-ve image-slot{min-width: 0;}
.drawing-main{height: 320px !important;}
}
@media (max-width: 640px){
body{padding-bottom: 60px;}
.cells-4{grid-template-columns: minmax(0, 1fr) !important;}
.topbar-note, .topbar-mail{display: none !important;}
.band{padding-left: 18px !important; padding-right: 18px !important; padding-top: 44px !important; padding-bottom: 44px !important;}
.rail{padding-left: 18px !important; padding-right: 18px !important;}
h1{font-size: 30px !important;}
h2{font-size: 24px !important;}
.drawing-main{height: 240px !important;}
.drawing-thumb{height: 190px;}
.form-grid{grid-template-columns: minmax(0, 1fr) !important;}
.seg{flex-wrap: wrap;}
.mobile-bar{display: grid !important;}
.cta-row .btn{width: 100%;}
}
@media (prefers-reduced-motion: reduce){
*{transition: none; animation: none;}
}
:root{--color-bg:#fffdfa;
  --color-surface:#f8f3e9;
  --color-text:#183a35;
  --color-divider:#dbe5df;
  --color-neutral-100:#ffffff;
  --color-neutral-200:#faf7f1;
  --color-neutral-300:#eee8dc;
  --color-neutral-700:#4f625c;
  --color-neutral-800:#405853;
  --color-neutral-900:#183a35;
  --color-accent:#ec6d2f;
  --color-accent-600:#d85f26;
  --color-accent-700:#a9491a;
  --color-accent-900:#173731;
  --tone-peach:#f9e7dc;
  --tone-cream:#f7f1e6;
  --tone-green-card:#254640;
  --tone-green-line:#48665f;
  --radius-card:18px;
  --radius-soft:14px;
  --shadow-soft:0 14px 40px rgba(24,58,53,.07);
  --shadow-hover:0 18px 48px rgba(24,58,53,.11);}
html{scroll-behavior:smooth;background:var(--color-bg)}
body{background:var(--color-bg);color:var(--color-text);font-size:16px;line-height:1.68;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{letter-spacing:-.025em}
h1{font-size:clamp(38px,4vw,52px)!important;line-height:1.08!important;max-width:16ch}
h2{font-size:clamp(30px,3vw,40px)!important;line-height:1.16!important}
h3{line-height:1.25}
p{color:var(--color-neutral-800)}
body>div>div.rail:first-of-type{background:#173731!important;padding-top:9px!important;padding-bottom:9px!important}
header.rail{background:rgba(255,253,250,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid #e7ece8!important;box-shadow:0 7px 26px rgba(24,58,53,.035)}
header.rail .hd-nav a{position:relative;transition:color .2s ease}
header.rail .hd-nav a:not([aria-current="page"]):after{content:"";position:absolute;left:0;right:100%;bottom:-7px;height:2px;background:var(--color-accent);transition:right .2s ease}
header.rail .hd-nav a:not([aria-current="page"]):hover:after{right:0}
header.rail+.rail{background:#fffdfa;border-bottom:1px solid #edf0ed!important}
main+*{}
nav[aria-label="Mục trong trang"]{top:0!important;background:rgba(255,253,250,.94)!important;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 8px 24px rgba(24,58,53,.045);border-color:#e3e9e5!important;padding-top:13px!important;padding-bottom:13px!important}
nav[aria-label="Mục trong trang"] a{padding:6px 2px;transition:color .2s ease}
.band{padding-top:76px!important;padding-bottom:76px!important}
main>.band:first-child{padding-top:56px!important;padding-bottom:62px!important;background:linear-gradient(180deg,#fffdfa 0%,#fffaf4 100%)}
.band>div{position:relative}
.blueprint{border:1px solid #dce6e1;border-radius:var(--radius-card);background:#fff;box-shadow:0 1px 0 rgba(24,58,53,.025);overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.blueprint>.corner{display:none!important}
.blueprint:hover{border-color:#cbdad4}
.btn,.input,.seg,.seg-opt,.tag{border-radius:10px!important}
.btn{transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--color-accent)!important;color:#fff!important;border-color:var(--color-accent)!important;box-shadow:0 8px 20px rgba(236,109,47,.18)}
.btn-primary:hover{box-shadow:0 10px 24px rgba(236,109,47,.25)}
.btn-secondary{background:#fff!important;border-color:#cfdbd6!important;color:var(--color-text)!important}
.tag-outline{background:#fff7f1;border-color:#f3b694!important;color:#a9491a!important;padding:7px 11px}
.input,textarea.input{background:#fff!important;border-color:#d5dfda!important;box-shadow:inset 0 1px 0 rgba(24,58,53,.02)}
.input:focus,textarea.input:focus{border-color:#ec6d2f!important;box-shadow:0 0 0 3px rgba(236,109,47,.10)!important;outline:0}
main>.band:first-child .hero{gap:64px!important;align-items:center!important}
main>.band:first-child figure.blueprint{border-radius:24px;box-shadow:var(--shadow-soft);border-color:#e1e8e4}
main>.band:first-child figure.blueprint{overflow:hidden!important}
main>.band:first-child figure.blueprint img{padding:0!important;margin:0!important;width:100%!important;height:100%!important;display:block!important;object-fit:cover!important}
main>.band:first-child .hero>div:first-child>div:last-child button{border-radius:12px!important;border-color:#dce6e1!important;overflow:hidden;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
main>.band:first-child .hero>div:first-child>div:last-child button:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(24,58,53,.07)}
main>.band:first-child .hero>div:nth-child(2){gap:18px!important}
main>.band:first-child .hero .blueprint{background:#fff}
main>.band:first-child .sheet-row{padding:13px 0!important;border-color:#e4ebe7!important}
main>.band:first-child .sheet-row strong{color:#173731}
#ban-ve{background:#f7f2e8!important;border-top:0!important}
#ban-ve .split>.blueprint,#ban-ve .split>div>.blueprint{box-shadow:var(--shadow-soft)}
#ban-ve .drawing-main,#ban-ve .drawing-thumb{background:#fff;border-radius:12px}
#ban-ve .split>div:last-child>.blueprint:first-child{background:#fff!important;padding:24px!important}
#ban-ve .split>div:last-child>.blueprint:first-child span{padding:10px 0!important;border-bottom-color:#e6ece8!important}
#ban-ve .split>div:last-child>.blueprint:last-child{background:#fae8dd!important;border-color:#f1c9b3!important}
#ban-ve .cells-3 .blueprint{box-shadow:0 8px 26px rgba(24,58,53,.045)}
#dat-hang{background:#fffdfa!important;border-top:0!important}
#dat-hang>.band{}
#dat-hang .blueprint{padding:12px 28px 26px!important;background:#fff;border-color:#dce6e1;box-shadow:var(--shadow-soft)}
#dat-hang .cells-4>div{border-bottom-color:#e2e9e5!important;padding-top:18px!important;padding-bottom:18px!important}
#dat-hang .cells-4>div>span:first-child{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:#fff2ea;color:#cb5721!important;font-weight:700}
#ung-dung{background:#173731!important;color:#fff!important;border-top:0!important}
#ung-dung p{color:#dbe8e4!important}
#ung-dung h2,#ung-dung h3,#ung-dung h4{color:#fff!important}
#ung-dung .blueprint{background:#244740!important;border-color:#46635d!important;border-radius:18px;box-shadow:none}
#ung-dung .blueprint:hover{transform:translateY(-3px);border-color:#628077!important;box-shadow:0 16px 32px rgba(0,0,0,.12)}
#ung-dung .blueprint span:first-child{color:#ff8650!important}
#giao-hang{background:#edf5f0!important;border-top:0!important}
#giao-hang .blueprint{background:#fff!important;border-color:#d8e5de!important;box-shadow:0 9px 28px rgba(24,58,53,.05)}
#giao-hang .cells-3 .blueprint:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover)}
#giao-hang>div>.blueprint{background:#f9fcfa!important;box-shadow:none}
#lien-quan{background:#fffdfa!important;border-top:0!important}
#lien-quan a.blueprint{border-radius:18px!important;background:#fff!important;box-shadow:0 8px 28px rgba(24,58,53,.045);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
#lien-quan a.blueprint:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);border-color:#cbdad4!important}
#lien-quan a.blueprint>div:first-child{background:#fbfbf8!important;border-radius:13px;overflow:hidden;line-height:0}
#lien-quan a.blueprint>div:first-child img{display:block!important;width:100%!important;height:auto!important;aspect-ratio:1/1!important;object-fit:cover!important;padding:0!important;margin:0!important;border:0!important}
#faq{background:#f8f2e8!important;border-top:0!important}
#faq .split>div:last-child{gap:12px!important}
#faq .split>div:last-child>div{background:#fff;border:1px solid #dce5e0!important;border-radius:14px;overflow:hidden;box-shadow:0 5px 18px rgba(24,58,53,.035)}
#faq .split>div:last-child>div:last-child{display:none}
#faq button{padding:18px 20px!important;font-size:18px!important}
#faq button+*{padding-left:58px!important;padding-right:20px!important}
#bao-gia{background:#f8e7dc!important;border-top:0!important}
#bao-gia form.blueprint{background:#fff!important;border-color:#ecd4c6!important;border-radius:20px;box-shadow:0 18px 44px rgba(118,69,43,.10)}
#bao-gia .seg{background:#f8f6f1;border-radius:10px!important}
footer.rail{background:#173731!important;color:#cfe0da!important;padding-top:50px!important;padding-bottom:50px!important}
.band>div>span[style*="text-transform: uppercase"],
#faq .split>div:first-child>span[style*="text-transform: uppercase"],
#bao-gia .split>div:first-child>span[style*="text-transform: uppercase"]{display:inline-flex;align-items:center;gap:8px;border-bottom:0!important;padding-bottom:0!important;color:#a9491a!important;font-weight:700!important;letter-spacing:.08em!important}
.band>div>span[style*="text-transform: uppercase"]:before,
#faq .split>div:first-child>span[style*="text-transform: uppercase"]:before,
#bao-gia .split>div:first-child>span[style*="text-transform: uppercase"]:before{content:"";width:24px;height:2px;background:var(--color-accent);border-radius:999px}
#ung-dung>div>span[style*="text-transform: uppercase"]{color:#ff9a6a!important}
#ung-dung>div>span[style*="text-transform: uppercase"]:before{background:#ff8b55}
@media(max-width:900px){
.band{padding-top:58px!important;padding-bottom:58px!important}
main>.band:first-child .hero{gap:36px!important;align-items:start!important}
main>.band:first-child figure.blueprint img{padding:22px!important}
#faq .split>div:last-child{margin-top:10px}
}
@media(max-width:640px){
.band{padding-top:46px!important;padding-bottom:46px!important}
h1{font-size:34px!important}
h2{font-size:28px!important}
.blueprint{border-radius:14px}
main>.band:first-child figure.blueprint{border-radius:18px}
#dat-hang .blueprint{padding:8px 18px 20px!important}
#faq button{font-size:17px!important;padding:16px!important}
}
.drawing-choice{transition:border-color .18s ease,background .18s ease,transform .18s ease,box-shadow .18s ease}
.drawing-choice:hover{transform:translateY(-1px);border-color:#efb08d!important;box-shadow:0 7px 18px rgba(24,58,53,.055)}
.drawing-choice.is-active{border-color:#edaa83!important;background:#fff7f1!important;box-shadow:0 0 0 2px rgba(236,109,47,.07)}
.drawing-choice.is-active>span:last-child{color:var(--color-accent-700)!important}
@media (max-width: 920px){
.drawing-browser{grid-template-columns:1fr!important}
.drawing-selector{position:static!important}
#drawingSelectorList{grid-template-columns:repeat(2,minmax(0,1fr))!important}
#drawingMainBtn>div{height:620px!important}
}
@media (max-width: 640px){
#drawingSelectorList{grid-template-columns:1fr!important}
#drawingMainBtn{padding:10px!important}
#drawingMainBtn>div{height:500px!important}
.drawing-viewer-head{padding:14px!important;align-items:flex-start!important}
#drawingZoomBtn{font-size:0!important;padding:9px 12px!important}
#drawingZoomBtn:after{content:'↗';font-size:18px}
#ban-ve>div>div:last-of-type{grid-template-columns:1fr!important}
}
.hero-specs-grid{align-items:stretch;}
.hero-spec-row{display:grid;grid-template-columns:142px minmax(0,1fr)!important;align-items:center;column-gap:16px!important;min-height:64px!important;}
.hero-spec-row > span{white-space:nowrap;}
.hero-spec-row > strong{justify-self:start;text-align:left!important;line-height:1.25!important;white-space:nowrap;}
@media (max-width: 1050px){
.hero-specs-grid{column-gap:24px;}
.hero-spec-row{grid-template-columns:124px minmax(0,1fr)!important;column-gap:12px!important;}
.hero-spec-row > strong{font-size:17px!important;}
}
@media (max-width: 760px){
.hero-specs-grid{grid-template-columns:1fr;}
.hero-spec-row{grid-template-columns:132px minmax(0,1fr)!important;min-height:58px!important;}
}
@media (max-width: 420px){
.hero-specs-card{padding-left:16px!important;padding-right:16px!important;}
.hero-spec-row{grid-template-columns:1fr!important;row-gap:5px;padding:12px 0;}
.hero-spec-row > strong{white-space:normal!important;}
}
.hero-specs-card-v2{padding:14px;
  background:rgba(255,255,255,.72);
  border:1px solid var(--color-divider);
  border-radius:18px;
  box-shadow:0 10px 30px rgba(17,51,46,.055);}
.spec-tile-grid{display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;}
.spec-tile{min-width:0;
  min-height:92px;
  padding:16px 18px 15px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:7px;
  background:color-mix(in srgb,var(--color-neutral-100) 92%,var(--color-accent-100) 8%);
  border:1px solid color-mix(in srgb,var(--color-divider) 86%,var(--color-accent-300) 14%);
  border-radius:13px;
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease;}
.spec-tile:hover{transform:translateY(-1px);
  border-color:color-mix(in srgb,var(--color-accent) 40%,var(--color-divider));
  box-shadow:0 7px 18px rgba(17,51,46,.06);}
.spec-label{display:block;
  font-size:12px;
  line-height:1.2;
  letter-spacing:.095em;
  text-transform:uppercase;
  color:var(--color-neutral-700);
  white-space:nowrap;}
.spec-value{display:block;
  min-width:0;
  font-family:var(--font-heading);
  font-size:21px;
  line-height:1.18;
  font-weight:650;
  letter-spacing:-.015em;
  color:var(--color-text);
  overflow-wrap:anywhere;}
@media (max-width:1050px){
.spec-tile{padding:15px 15px;min-height:88px}
.spec-value{font-size:19px}
}
@media (max-width:760px){
.hero-specs-card-v2{padding:10px;border-radius:15px}
.spec-tile-grid{gap:8px}
.spec-tile{min-height:82px;padding:13px 14px}
.spec-value{font-size:18px}
}
@media (max-width:480px){
.spec-tile-grid{grid-template-columns:1fr}
.spec-tile{min-height:auto}
.spec-value{font-size:19px}
}
.ship-note{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.ship-note>span{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;row-gap:2px;align-items:center;padding:15px 20px;border-left:1px solid var(--color-divider)}
.ship-note>span:first-child{border-left:0}
.ship-note>span>svg.ic{grid-row:1 / span 2;font-size:20px;color:var(--color-accent);opacity:.75}
.ship-note small{font-family:var(--font-heading);font-size:12px;letter-spacing:.11em;color:var(--color-neutral-700)}
.ship-note b{font-weight:500;font-size:14px;color:var(--color-neutral-800)}
@media (max-width:820px){
.ship-note{grid-template-columns:1fr}
.ship-note>span{border-left:0;border-top:1px solid var(--color-divider)}
.ship-note>span:first-child{border-top:0}
}
[hidden]{display:none!important}
svg.ic{width:1em;height:1em;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.13em}
.tp-hotline svg.ic{font-size:17px}
.tp-contact-circle svg.ic{font-size:19px}
.tp-footer-chips span{display:inline-flex;align-items:center;gap:8px}
.tp-footer-address{display:flex;align-items:flex-start;gap:8px}
.tp-footer-address-icon svg.ic{font-size:16px;margin-top:2px}
.tp-footer-contact-meta a,.tp-footer-contact-meta span{display:inline-flex;align-items:center;gap:8px}
.btn,.mega-promo-cta,.tp-drawer-cta{white-space:nowrap}
.btn{min-width:max-content}
.hero .btn,#bao-gia .btn{flex:0 0 auto}
.btn-block{width:100%}
nav[aria-label="Mục trong trang"],nav[aria-label="Mục trong trang"]>div{scrollbar-width:none;-ms-overflow-style:none;}
nav[aria-label="Mục trong trang"]::-webkit-scrollbar,
nav[aria-label="Mục trong trang"]>div::-webkit-scrollbar{display:none;height:0}
nav[aria-label="Mục trong trang"]{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 20px,#000 calc(100% - 28px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 20px,#000 calc(100% - 28px),transparent 100%);}
#quoteForm .seg{display:flex;flex-wrap:wrap}
#quoteForm .seg-opt{flex:1 1 auto;white-space:normal;text-align:center;justify-content:center}
#quoteForm .err{display:none;font-size:13px;color:#b4341a;font-family:var(--font-heading);letter-spacing:.02em}
#quoteForm.is-invalid .err.show{display:block}
#quoteForm .input[aria-invalid="true"]{border-color:#b4341a;outline:1px solid #b4341a}
#quoteDone{display:flex;gap:12px;align-items:flex-start;padding:18px;border:1px solid var(--color-accent);background:color-mix(in srgb,var(--color-accent) 8%,transparent)}
#quoteDone strong{display:block;font-family:var(--font-heading);font-size:19px;margin-bottom:4px}
#quoteDone p{margin:0;font-size:14.5px;color:var(--color-neutral-800)}
.tp-burger{display:none;appearance:none;border:1px solid var(--color-divider);background:transparent;color:var(--color-text);width:44px;height:44px;align-items:center;justify-content:center;font-size:22px;cursor:pointer;border-radius:0}
.tp-burger:hover{background:var(--color-neutral-100)}
.tp-drawer-backdrop{position:fixed;inset:0;background:rgba(15,32,29,.5);z-index:9998}
#quoteDone strong:focus{outline:none}
.tp-drawer{position:fixed;top:0;right:0;bottom:0;width:min(86vw,340px);background:#fff;border-left:1px solid var(--color-divider);overflow:auto;padding:0 0 28px;z-index:9999;display:flex;flex-direction:column}
.tp-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--color-divider);font-family:var(--font-heading);letter-spacing:.1em;font-size:13px}
.tp-drawer-close{appearance:none;border:0;background:transparent;font-size:20px;line-height:1;width:44px;height:44px;cursor:pointer;color:var(--color-text)}
.tp-drawer>a,.tp-drawer summary{display:flex;align-items:center;min-height:52px;padding:0 18px;font-family:var(--font-heading);font-size:17px;color:var(--color-text);text-decoration:none;border-bottom:1px solid var(--color-neutral-200);cursor:pointer}
.tp-drawer details a{min-height:46px;padding-left:34px;font-size:15.5px;font-family:var(--font-body);color:var(--color-neutral-800);border-bottom:1px solid var(--color-neutral-200);display:flex;align-items:center;text-decoration:none}
.tp-drawer details a:hover,.tp-drawer>a:hover,.tp-drawer summary:hover{background:var(--color-neutral-100)}
.tp-drawer summary::marker{color:var(--color-accent)}
.tp-drawer-cta{margin:18px 18px 0;justify-content:center;gap:10px;background:var(--color-accent);color:#fff!important;border:0;letter-spacing:.04em}
.tp-drawer :focus-visible,.tp-burger:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
@media (max-width:1080px){
.tp-burger{display:flex;margin-left:auto;order:9}
}
@media (min-width:1081px){
.tp-drawer,.tp-drawer-backdrop{display:none!important}
}
@media (max-width:760px){
.tp-footer-bottom{padding-bottom:78px!important}
}
@media (max-width:520px){
.topbar-note{display:none}
.tp-hotline span{font-size:15px}
.hero .btn,#bao-gia .btn{width:100%;justify-content:center}
}
main>.band:first-child{padding-top:38px!important;padding-bottom:48px!important}
main>.band:first-child .hero{grid-template-columns:minmax(0,.98fr) minmax(0,1.02fr)!important;
  gap:42px!important;
  align-items:start!important;}
.hero-content{gap:14px!important}
.hero-tag{order:1}
.hero-title{order:2;font-size:clamp(38px,3.2vw,48px)!important;max-width:15ch!important}
.hero-lead{order:3;line-height:1.58;max-width:58ch!important}
.hero-spec-heading{order:4;margin-top:5px!important}
.hero-specs-card-v2{order:5;padding:9px}
.hero-content>.stock-strip{order:6}
.hero-ip-note{order:7;line-height:1.5}
.hero-content .stock-strip{padding:11px 14px}
.hero-content .stock-copy{font-size:14px;line-height:1.42}
.hero-content .stock-copy strong{font-size:15px}
.hero-content .spec-tile-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.hero-content .spec-tile{min-height:84px;padding:11px 10px;gap:5px}
.hero-content .spec-label{font-size:12px;white-space:normal;line-height:1.25}
.hero-content .spec-value{font-size:16px;line-height:1.2}
.hero-content .cta-row .btn{font-size:14px!important;padding:11px 16px!important;min-height:46px!important}
.hero-gallery{gap:13px!important}
@media (max-width:1024px){
body>div>div.rail:first-of-type{display:none!important}
.tp-header-inner{height:78px!important;width:calc(100% - 32px)!important}
.tp-logo{flex-basis:78px!important;width:78px!important;height:62px!important}
.tp-logo img{width:74px!important;height:58px!important;max-width:74px!important}
.tp-hotline{flex-basis:138px!important;width:138px!important;min-height:44px!important}
.tp-breadcrumb-inner{min-height:44px!important;font-size:13px!important;flex-wrap:nowrap!important;overflow:hidden}
}
@media (min-width:700px) and (max-width:1024px){
main>.band:first-child{padding-top:30px!important;padding-bottom:42px!important}
main>.band:first-child .hero{display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    column-gap:24px!important;
    row-gap:12px!important;}
main>.band:first-child .hero-content{display:contents!important;order:initial!important}
.hero-tag,.hero-title,.hero-lead{grid-column:1 / -1}
.hero-tag{grid-row:1}
.hero-title{grid-row:2;font-size:clamp(36px,5vw,46px)!important;max-width:18ch!important}
.hero-lead{grid-row:3;max-width:72ch!important}
.hero-spec-heading{grid-column:1 / -1;grid-row:4;align-self:end;margin-top:6px!important}
.hero-specs-card-v2{grid-column:1;grid-row:5;align-self:start}
.hero-content>.stock-strip{grid-column:1;grid-row:6;align-self:start}
.hero-ip-note{grid-column:1;grid-row:7;align-self:start}
.hero-gallery{grid-column:2;grid-row:5 / span 3;align-self:start}
main>.band:first-child figure.blueprint{max-height:none!important}
main>.band:first-child figure.blueprint img#productMainImage{max-height:none!important;aspect-ratio:4/3!important;padding:0!important}
.hero-content .spec-tile-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.hero-content .spec-tile{min-height:70px;padding:9px}
.hero-content .spec-value{font-size:15px}
.gallery-meta{font-size:12px!important}
.gallery-thumbs{gap:7px!important}
}
@media (max-width:699px){
.tp-breadcrumb{display:none}
.tp-header-inner{height:70px!important;width:calc(100% - 28px)!important;gap:10px!important}
.tp-logo{flex-basis:70px!important;width:70px!important;height:56px!important}
.tp-logo img{width:66px!important;height:52px!important;max-width:66px!important}
.tp-hotline{margin-left:auto;flex-basis:128px!important;width:128px!important;min-height:42px!important;font-size:12px!important}
main>.band:first-child{padding-top:22px!important;padding-bottom:34px!important}
main>.band:first-child .hero{display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:11px!important;}
main>.band:first-child .hero-content{display:contents!important;order:initial!important}
.hero-tag{order:1;font-size:12px!important;padding:6px 9px}
.hero-title{order:2;font-size:31px!important;line-height:1.12;max-width:18ch!important}
.hero-lead{order:3;font-size:15px!important;line-height:1.5}
.hero-spec-heading{order:4;margin-top:8px!important}
.hero-specs-card-v2{order:5}
.hero-content>.stock-strip{order:6}
.hero-ip-note{order:7}
.hero-gallery{order:8;margin-top:5px;gap:9px!important}
main>.band:first-child figure.blueprint{max-height:none!important;border-radius:16px!important}
main>.band:first-child figure.blueprint img#productMainImage{max-height:none!important;aspect-ratio:4/3!important;padding:0!important}
.hero-content .stock-strip{padding:10px 12px}
.hero-content .stock-copy{font-size:13px}
.hero-content .stock-copy strong{font-size:14px}
.gallery-meta{font-size:12px!important;letter-spacing:.055em!important}
.gallery-thumbs{gap:6px!important}
.hero-content .spec-tile-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px}
.hero-content .spec-tile{min-height:70px;padding:9px 8px}
.hero-content .spec-label{font-size:9.5px}
.hero-content .spec-value{font-size:15px}
}
#ban-ve .drawing-browser{grid-template-columns:minmax(0,1fr)!important}
#ban-ve .technical-tabs{margin-bottom:10px}
#ban-ve .drawing-selector{position:static!important;
  width:100%;
  margin:0 0 14px;
  padding:14px!important;
  border-radius:16px!important;
  box-shadow:0 8px 24px rgba(24,58,53,.045)!important;
  transition:background .2s ease,border-color .2s ease;}
#ban-ve .power-selector-head{align-items:center!important;margin-bottom:10px!important}
#ban-ve .power-selector-head>div:first-child{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
#ban-ve .power-selector-head>div:first-child>div{font-size:17px!important}
#ban-ve #powerSelectorHelp{margin:0!important;font-size:13px!important}
#ban-ve #drawingSelectorList{display:grid!important;
  grid-template-columns:repeat(8,minmax(0,1fr))!important;
  gap:7px!important;
  padding:0!important;}
#ban-ve #drawingSelectorList .drawing-choice{min-width:0!important;
  min-height:68px;
  padding:9px 10px!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:6px!important;
  align-content:center;
  scroll-snap-align:center;}
#ban-ve #drawingSelectorList .drawing-choice>img{display:none!important}
#ban-ve #drawingSelectorList .drawing-choice strong{font-size:14px!important;line-height:1.2}
#ban-ve #drawingSelectorList .drawing-choice small{display:block;font-size:12px;line-height:1.25;margin-top:3px}
#ban-ve #drawingSelectorList .drawing-choice>span:last-child{font-size:15px!important}
.power-selection-feedback{display:flex;
  align-items:center;
  gap:9px;
  margin-top:10px;
  padding:9px 11px;
  border:1px solid #f0c7ad;
  border-radius:10px;
  background:#fff5ee;
  color:#405853;
  font-size:13px;
  transition:background .2s ease,border-color .2s ease,color .2s ease;}
.power-selection-feedback strong{font-family:var(--font-heading);color:#173731}
.power-mode-icon{width:25px;height:25px;display:grid;place-items:center;border-radius:7px;background:#b94b1a;color:#fff;font-size:14px}
.drawing-selector[data-mode="drawing"]{background:#f7fbf9!important;border-color:#c9dcd5!important}
.drawing-selector[data-mode="drawing"] .power-selector-badge{background:#e8f3ee!important;color:#315b52!important}
.drawing-selector[data-mode="drawing"] .power-selection-feedback{background:#edf6f1;border-color:#c6ddd4;color:#315b52}
.drawing-selector[data-mode="drawing"] .power-mode-icon{background:#315b52}
.drawing-selector[data-mode="drawing"] .drawing-choice.is-active{background:#edf6f1!important;border-color:#71978d!important;box-shadow:0 0 0 2px rgba(49,91,82,.08)}
.technical-view [role="tabpanel"]{scroll-margin-top:86px}
.technical-view [role="tabpanel"].panel-enter{animation:technicalPanelIn .2s ease-out}
@keyframes technicalPanelIn{from{opacity:.35;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@keyframes zaloModalIn{from{opacity:.35;transform:translate(-50%,calc(-50% + 8px))}to{opacity:1;transform:translate(-50%,-50%)}}
.contextual-cta{display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  margin-top:18px;
  padding:16px 18px;
  border:1px solid #efc8b1;
  border-radius:14px;
  background:#fae8dc;}
.drawing-viewer-card>.contextual-cta{margin:18px 20px 20px}
.contextual-cta-drawing{border-color:#c8ddd5;background:#edf6f1}
.contextual-cta-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:11px;background:#b94b1a;color:#fff;font-size:20px}
.contextual-cta-drawing .contextual-cta-icon{background:#315b52}
.contextual-cta-copy{min-width:0}
.contextual-cta-copy strong{display:block;font-family:var(--font-heading);font-size:17px;line-height:1.3;color:#173731}
.contextual-cta-copy p{margin:3px 0 0;font-size:13px;line-height:1.5;color:#405853}
.contextual-cta-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.contextual-cta-actions .btn{min-height:42px!important;padding:9px 13px!important;font-size:12px!important}
.contextual-cta-drawing .btn-primary{background:#315b52!important;border-color:#315b52!important;box-shadow:0 8px 18px rgba(49,91,82,.16)!important}
.power-unknown-link{color:#a84216;font-family:var(--font-heading);font-size:12px;font-weight:700;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.power-unknown-link:hover{color:#7f3312}
.technical-check-note{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px;padding:12px 15px;border:1px solid #d6e3dd;border-radius:12px;background:rgba(255,255,255,.7);font-size:13px;color:#405853}
.technical-check-note strong{font-family:var(--font-heading);color:#173731}
.technical-check-note span{flex:1 1 420px}
.technical-check-note a{color:#a84216;font-family:var(--font-heading);font-weight:700;text-decoration:none;white-space:nowrap}
.hero-spec-toggle{display:none}
@media (min-width:1025px){
.tp-zalo-backdrop:not([hidden]){display:block!important;position:fixed;inset:0;z-index:1190;background:rgba(10,34,29,.48)}
.tp-zalo-sheet:not([hidden]){display:block!important;position:fixed;left:50%;top:50%;z-index:1200;width:min(520px,calc(100vw - 48px));padding:24px;transform:translate(-50%,-50%);border:1px solid #d7e3dd;border-radius:20px;background:#fffdfa;box-shadow:0 28px 80px rgba(7,35,30,.24);animation:zaloModalIn .2s ease-out}
.tp-zalo-sheet-handle{display:none}
.tp-zalo-sheet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.tp-zalo-sheet-head small{display:block;color:#61736e;font-size:12px;letter-spacing:.08em;font-weight:700}
.tp-zalo-sheet-head h2{margin:3px 0 0;font-size:25px!important}
.tp-zalo-sheet-head button{width:42px;height:42px;border:1px solid #d8e3de;border-radius:50%;background:#fff;color:#173731;font-size:26px;line-height:1;cursor:pointer}
.tp-zalo-sheet>p{margin:10px 0 16px;font-size:14px;line-height:1.5}
.tp-zalo-people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tp-zalo-person{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:11px;padding:13px;border:1px solid #dce6e1;border-radius:14px;background:#fff;color:#173731;text-decoration:none}
.tp-zalo-avatar{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:#1787df;color:#fff;font-weight:800}
.tp-zalo-person-tai .tp-zalo-avatar{background:#189b67}
.tp-zalo-person span:nth-child(2){display:flex;flex-direction:column;min-width:0}
.tp-zalo-person small{font-size:12px;color:#61736e;letter-spacing:.055em}
.tp-zalo-person strong{font-size:15px}
.tp-zalo-person em{font-size:13px;color:#405853;font-style:normal}
.tp-zalo-person>b{font-size:18px}
}
@media (min-width:700px) and (max-width:1024px){
#ban-ve #drawingSelectorList{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.contextual-cta{grid-template-columns:auto minmax(0,1fr)}
.contextual-cta-actions{grid-column:1 / -1;justify-content:flex-start;padding-left:54px}
}
@media (max-width:699px){
#ban-ve .technical-tabs button{min-height:44px;padding:8px;font-size:12px;letter-spacing:.025em}
#ban-ve .drawing-selector{padding:12px!important;margin-bottom:12px}
#ban-ve .power-selector-head{align-items:flex-start!important}
#ban-ve .power-selector-head>div:first-child{display:block}
#ban-ve #powerSelectorHelp{margin-top:2px!important}
#ban-ve .power-unknown-link{display:inline-block;margin-top:5px;white-space:normal}
#ban-ve #drawingSelectorList{grid-template-columns:none!important;
    grid-auto-flow:column;
    grid-auto-columns:minmax(126px,42vw);
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    padding:2px 1px 5px!important;}
#ban-ve #drawingSelectorList::-webkit-scrollbar{display:none}
#ban-ve #drawingSelectorList .drawing-choice{min-height:64px}
.power-selection-feedback{align-items:flex-start;font-size:12px;line-height:1.4}
.contextual-cta{grid-template-columns:auto minmax(0,1fr);gap:10px;padding:14px}
.drawing-viewer-card>.contextual-cta{margin:14px}
.contextual-cta-copy strong{font-size:16px}
.contextual-cta-actions{grid-column:1 / -1;width:100%;justify-content:stretch}
.contextual-cta-actions .btn{flex:1 1 0;justify-content:center;min-width:0!important}
.hero-specs-card-v2:not(.is-expanded) .spec-secondary{display:none}
.hero-spec-toggle{width:100%;margin-top:8px;padding:9px 10px;display:flex;align-items:center;justify-content:center;gap:7px;border:1px solid #d6e1dc;border-radius:9px;background:#fff;color:#31534c;font-family:var(--font-heading);font-size:12px;font-weight:700;letter-spacing:.035em;cursor:pointer}
.hero-spec-toggle span{font-size:16px;line-height:1}
.technical-check-note{align-items:flex-start;padding:12px;font-size:13px}
.technical-check-note strong,.technical-check-note span,.technical-check-note a{flex-basis:100%;white-space:normal}
}
/* ===== V11 · Zalo & hotline là kênh chính =====
   Đính chính hướng: hotline và Zalo mới là kênh khách dùng, form là phụ.
   Cam = hotline (hành động của trang). Xanh Zalo = kênh Zalo (màu thương hiệu,
   khách quét trang để tìm đúng khối này). Hai nhân sự dùng CÙNG một màu,
   phân biệt bằng tên. Nút gửi form hạ xuống secondary. */
.tp-contact-zalo1,
.tp-contact-zalo2,
.tp-float-zalo1,
.tp-float-zalo2,
.footer-contact-btn.zalo{
  background:#0068ff!important;
  color:#fff!important;
  border:1px solid #0068ff!important;
}
.tp-contact-zalo1:hover,
.tp-contact-zalo2:hover,
.tp-float-zalo1:hover,
.tp-float-zalo2:hover,
.footer-contact-btn.zalo:hover{
  background:#0056d6!important;
  border-color:#0056d6!important;
}
.tp-contact-zalo1 *,
.tp-contact-zalo2 *,
.tp-float-zalo1 *,
.tp-float-zalo2 *{color:#fff!important}
.tp-float-zalo1 .tp-float-copy small,
.tp-float-zalo2 .tp-float-copy small,
.tp-contact-zalo1 .tp-contact-copy small,
.tp-contact-zalo2 .tp-contact-copy small{color:rgba(255,255,255,.86)!important;opacity:1!important}
.tp-contact-zalo1 .tp-contact-circle,
.tp-contact-zalo2 .tp-contact-circle,
.tp-float-zalo1 .tp-float-icon,
.tp-float-zalo2 .tp-float-icon,
.tp-contact-zalo1 .tp-zalo-mark,
.tp-contact-zalo2 .tp-zalo-mark,
.tp-float-zalo1 .tp-zalo-mark,
.tp-float-zalo2 .tp-zalo-mark{
  background:#fff!important;
  border:0!important;
}
.tp-contact-zalo1 .tp-zalo-word,
.tp-contact-zalo2 .tp-zalo-word,
.tp-float-zalo1 .tp-zalo-word,
.tp-float-zalo2 .tp-zalo-word{color:#0068ff!important}
.tp-mobile-action.is-zalo,
.tp-mobile-action[class*="zalo"]{background:#0068ff!important;color:#fff!important}
.tp-mobile-action[class*="zalo"] .tp-zalo-word{color:#0068ff!important;background:#fff!important}

/* hotline: vật thể đặc thứ hai, cùng trọng lượng với Zalo */
.tp-contact-call,
.tp-float-call,
.footer-contact-btn.call{
  background:#b94b1a!important;
  color:#fff!important;
  border:1px solid #b94b1a!important;
}
.tp-contact-call:hover,
.tp-float-call:hover,
.footer-contact-btn.call:hover{background:#a03f14!important;border-color:#a03f14!important}
.tp-contact-call *,
.tp-float-call *,
.footer-contact-btn.call *{color:#fff!important}
.tp-contact-call .tp-contact-copy small,
.tp-float-call .tp-float-copy small{color:rgba(255,255,255,.86)!important;opacity:1!important}
.tp-contact-call .tp-contact-circle,
.tp-float-call .tp-float-icon,
.footer-contact-btn.call .footer-contact-icon{
  background:#fff!important;
  color:#b94b1a!important;
  border:0!important;
}

/* form là kênh phụ: nút gửi hạ xuống viền, không tranh với hotline/Zalo */
/* (V18 thay thế) Nút gửi form là hành động chính TRONG thẻ này nên tô đặc.
   Quy tắc "form là kênh phụ" áp cho vị trí của section, không phải cho nút. */
#quoteForm button[type="submit"]{
  background:#b94b1a!important;
  color:#fff!important;
  border:1px solid #b94b1a!important;
}
#quoteForm button[type="submit"]:hover{background:#a03f14!important;border-color:#a03f14!important}

/* mọi liên kết Zalo dạng .btn trong nội dung cũng mang màu thương hiệu Zalo */
a.btn[href*="zalo.me"]{
  background:#0068ff!important;
  color:#fff!important;
  border:1px solid #0068ff!important;
}
a.btn[href*="zalo.me"]:hover{background:#0056d6!important;border-color:#0056d6!important}

/* chữ trên nút đặc phải là trắng, kể cả khi footer có rule riêng đậm hơn */
.tp-footer-contact .tp-contact-call .tp-contact-copy small,
.tp-footer-contact .tp-contact-call .tp-contact-copy strong,
.tp-footer-contact .tp-contact-zalo1 .tp-contact-copy strong,
.tp-footer-contact .tp-contact-zalo2 .tp-contact-copy strong{color:#fff!important}
.tp-footer-contact .tp-contact-call .tp-contact-copy small,
.tp-footer-contact .tp-contact-zalo1 .tp-contact-copy small,
.tp-footer-contact .tp-contact-zalo2 .tp-contact-copy small{color:rgba(255,255,255,.86)!important}

/* icon trong vòng trắng phải lấy màu của nút, không trắng-trên-trắng */
.tp-footer-contact .tp-contact-call .tp-contact-circle,
.tp-contact-call .tp-contact-circle,
.tp-float-call .tp-float-icon{background:#fff!important;color:#b94b1a!important}
.tp-contact-call .tp-contact-circle svg,
.tp-contact-call .tp-contact-circle .ic,
.tp-float-call .tp-float-icon svg,
.tp-float-call .tp-float-icon .ic,
.footer-contact-btn.call .footer-contact-icon svg{color:#b94b1a!important;stroke:currentColor!important}

/* thắng các rule cũ còn gán xanh lá cho Zalo của Mr. Tài */
.tp-footer-contact .tp-contact-zalo1,
.tp-footer-contact .tp-contact-zalo2,
.tp-floating-contact .tp-float-zalo1,
.tp-floating-contact .tp-float-zalo2{background:#0068ff!important}
.tp-footer-contact .tp-contact-zalo1 .tp-zalo-word,
.tp-footer-contact .tp-contact-zalo2 .tp-zalo-word,
.tp-floating-contact .tp-float-zalo1 .tp-zalo-word,
.tp-floating-contact .tp-float-zalo2 .tp-zalo-word{color:#0068ff!important}
.tp-zalo-person-tai .tp-zalo-avatar{background:#0068ff!important}

/* icon điện thoại trong vòng trắng: tô bằng màu nút, không trắng-trên-trắng */
.tp-contact-call .tp-contact-circle svg *,
.tp-float-call .tp-float-icon svg *,
.footer-contact-btn.call .footer-contact-icon svg *{stroke:#b94b1a!important;fill:none!important}
.tp-contact-zalo1 .tp-contact-circle svg *,
.tp-contact-zalo2 .tp-contact-circle svg *{stroke:#0068ff!important;fill:none!important}
.spec-data,
.spec-data *,
.spec-table-scroll{overflow-y:visible!important;max-height:none!important}
.spec-table-scroll{overflow-x:auto!important}
/* rail liên hệ nổi — hiện theo chỗ còn lại, không bao giờ đè nội dung.
   Nội dung rộng tối đa 1240px, nên chỉ khi khung nhìn còn dư hai bên
   mới cho rail mang nhãn chữ; hẹp hơn thì co về pill 56px; hẹp nữa thì
   nhường hẳn cho thanh liên hệ dưới đáy. */

/* ≥1560px · đủ chỗ hai bên: rail đầy đủ, có nhãn và số */
@media(min-width:1560px){
  .tp-floating-contact{width:auto!important;pointer-events:auto!important}
  .tp-float-item{width:auto!important;min-width:0!important}
  .tp-float-item .tp-float-copy{display:flex!important}
  main>.band{padding-right:32px!important}
}

/* 1180–1559px · co về pill 56px, mở rộng khi trỏ vào hoặc focus bàn phím */
@media(min-width:1180px) and (max-width:1559px){
  .tp-floating-contact{width:56px!important;align-items:flex-end;pointer-events:none}
  .tp-float-item{width:56px!important;min-width:56px!important;justify-content:center;padding:10px 11px;pointer-events:auto;overflow:hidden;transition:width .18s ease}
  .tp-float-item .tp-float-copy{display:none!important}
  .tp-float-item:hover,
  .tp-float-item:focus-visible{width:186px!important;justify-content:flex-start}
  .tp-float-item:hover .tp-float-copy,
  .tp-float-item:focus-visible .tp-float-copy{display:flex!important}
  main>.band{padding-right:96px!important}
  footer.tp-footer-final{padding-right:80px}
}

/* thiết bị cảm ứng không có hover → pill không mở được, nên bỏ rail */
@media(hover:none) and (max-width:1559px){
  .tp-floating-contact{display:none!important}
}

/* khung nhìn thấp (laptop nhỏ, điện thoại ngang): 3 pill + header không đủ chỗ */
@media(max-height:620px){
  .tp-floating-contact{display:none!important}
}

/* <1180px · nhường cho thanh liên hệ dưới đáy */
@media(max-width:1179px){
  .tp-floating-contact{display:none!important}
  main>.band{padding-right:32px!important}
}
.gallery-thumbs{grid-template-columns:repeat(3,1fr)!important}
#ung-dung .cells-4{align-items:stretch!important}
#ung-dung .cells-4>*{height:100%}
#ung-dung .cells-4 b,
#ung-dung .cells-4 strong,
#ung-dung .cells-4 h3{text-wrap:balance}


/* ===== V12 · sửa theo báo cáo đánh giá 4A =====
   01 — tách một mã cam thành HAI VAI:
        #b94b1a (5,14:1 với chữ trắng) = nền đặc + chữ cam cỡ thân
        #ec6d2f (3,07:1) = chỉ cho tiêu đề lớn, icon, viền, nền hover
   02 — Zalo cạnh bảng thông số ngang trọng lượng với hotline
   04 — nhãn thông số đủ tương phản và đủ lớn                        */

/* 01a · nền cam đặc mang chữ trắng cỡ thân */
.btn-primary,
.tp-drawer-cta,
.tp-mobile-quote,
.skip:focus,
.hero .cta-row .btn-primary,
#bao-gia .btn-primary,
.contextual-cta .btn-primary{
  background:#b94b1a!important;
  border-color:#b94b1a!important;
  color:#fff!important;
}
.btn-primary:hover,
.tp-drawer-cta:hover,
.contextual-cta .btn-primary:hover{
  background:#a03f14!important;
  border-color:#a03f14!important;
}
.tp-contact-call,
.tp-float-call,
.footer-contact-btn.call,
.tp-mobile-call{
  background:#b94b1a!important;
  border-color:#b94b1a!important;
  color:#fff!important;
}
.tp-mobile-call strong,
.tp-mobile-call span,
.tp-mobile-quote strong,
.tp-mobile-quote span{color:#fff!important}

/* 01b · cam dùng làm CHỮ trên nền sáng — bậc đậm, không dùng #ec6d2f */
.tp-main-menu>a:hover,
.tp-menu-trigger:hover,
.tp-menu-trigger.active{color:#b94b1a!important}
.tp-menu-trigger.active::after,
.tp-menu-trigger:hover::after{background:#b94b1a!important}

/* 01c · #ec6d2f giữ vai trang trí: viền, gạch chân, nền hover nhạt */
.drawing-choice.is-active{border-color:#ec6d2f!important}

/* 02 · tại khoảnh khắc khách vừa tìm ra tỉ số: hotline và Zalo ngang nhau */
.contextual-cta-actions .context-zalo-trigger,
.contextual-cta-actions .btn-secondary.context-zalo-trigger{
  background:#0068ff!important;
  border-color:#0068ff!important;
  color:#fff!important;
}
.contextual-cta-actions .context-zalo-trigger:hover{
  background:#0056d6!important;
  border-color:#0056d6!important;
}

/* 04 · nhãn 8 ô thông số: 4,16:1 → 7,0:1, và đủ lớn cho chữ hoa có dấu */
.spec-label,
.hero-content .spec-label{color:#4f625c!important;font-size:13px!important}

/* 01d · các chỗ cam còn lại dùng làm chữ hoặc nền, đưa về bậc đậm */
.skip{color:#b94b1a!important}
.skip:focus{background:#b94b1a!important;color:#fff!important}
.tp-hotline{background:#b94b1a!important;border-color:#b94b1a!important}
.tp-hotline,.tp-hotline *{color:#fff!important}

/* 04b · chữ phụ 13px: xám đủ tương phản */
.form-help,
#quoteForm .form-help,
.contextual-cta-copy p{color:#4f625c!important}

/* 01e · nút gọi nổi/footer đã là nền cam đặc → chữ phải trắng
   (rule cũ đặt #173731 trên nền cam: 2,51:1) */
.tp-float-call .tp-float-copy small,
.tp-float-call .tp-float-copy strong,
.tp-float-call:hover .tp-float-copy small,
.tp-float-call:hover .tp-float-copy strong,
.tp-float-call:focus-visible .tp-float-copy small,
.tp-float-call:focus-visible .tp-float-copy strong,
.tp-contact-call .tp-contact-copy small,
.tp-contact-call .tp-contact-copy strong,
.tp-contact-call:hover .tp-contact-copy small,
.tp-contact-call:hover .tp-contact-copy strong,
.tp-contact-call:focus-visible .tp-contact-copy small,
.tp-contact-call:focus-visible .tp-contact-copy strong{color:#fff!important}
.tp-float-call .tp-float-copy small,
.tp-contact-call .tp-contact-copy small{opacity:1!important}

/* 761–1179px trước đây không có kênh liên hệ nào: rail đã tắt mà thanh
   dưới đáy chỉ bật ở ≤760px. Cho thanh đáy phủ luôn khoảng này. */
@media(max-width:1179px){
  .tp-mobile-actions{display:grid!important}
  body{padding-bottom:calc(68px + env(safe-area-inset-bottom))!important}
}
@media(max-width:1179px) and (min-width:761px){
  .tp-mobile-actions{
    left:50%!important;right:auto!important;
    transform:translateX(-50%);
    width:min(560px,calc(100% - 32px))!important;
    bottom:16px!important;
    border-radius:14px!important;
    box-shadow:0 10px 30px rgba(12,42,37,.18)!important;
  }
  .tp-footer-bottom{padding-bottom:96px!important}
}

/* ===== V13 · thứ tự block màn hình đầu trên mobile =====
   Ảnh sản phẩm lên ngay sau tiêu đề: trên mobile đây là phép nhận dạng
   nhanh nhất (đúng hình trục vuông góc hay không), trước cả khi đọc số.
   Bảng thông số chính đi liền sau ảnh — hình và số là hai tín hiệu nhận
   dạng, nên đứng cạnh nhau. Đoạn mô tả xuống dưới vì nó là phần xác nhận.
   Dùng display:contents để trộn được con của .hero-content với .hero-gallery. */
@media(max-width:900px){
  main>.band:first-child .hero{
    display:flex!important;
    flex-direction:column!important;
    grid-template-columns:none!important;
    gap:18px!important;
  }
  main>.band:first-child .hero-content{display:contents!important}
  main>.band:first-child .hero-tag{order:1}
  main>.band:first-child .hero-title{order:2}
  main>.band:first-child .hero-gallery{order:3;gap:12px!important}
  main>.band:first-child .hero-spec-heading{order:4;margin-top:2px!important}
  main>.band:first-child .hero-specs-card-v2{order:5}
  main>.band:first-child .hero-lead{order:6;max-width:none!important}
  main>.band:first-child .stock-strip{order:7}
  main>.band:first-child .hero-ip-note{order:8}
}

/* V13b · sửa ba lỗi thấy trên ảnh chụp mobile */
@media(max-width:900px){
  /* 1 — .hero có inline align-items:start; ở flex-column nó thành trục ngang
     nên thẻ thông số co lại còn ~60% bề rộng. Trả về stretch. */
  main>.band:first-child .hero{align-items:stretch!important}
  main>.band:first-child .hero-tag{align-self:flex-start!important}
  main>.band:first-child .hero-specs-card-v2,
  main>.band:first-child .hero-spec-heading,
  main>.band:first-child .stock-strip{width:100%!important;max-width:none!important}

  /* 2 — ảnh chính chiếm 2/3 màn hình đầu, đẩy thông số xuống dưới nếp gấp */
  main>.band:first-child figure.blueprint{max-height:44vh!important}
  main>.band:first-child figure.blueprint img#productMainImage{
    max-height:44vh!important;
    aspect-ratio:auto!important;
    object-fit:contain!important;
  }
}
/* 3 — số hotline trong header bị sát/cắt ở màn hẹp */
@media(max-width:430px){
  .tp-hotline{
    min-width:0!important;
    flex:0 1 auto!important;
    width:auto!important;
    padding-left:11px!important;
    padding-right:11px!important;
    gap:6px!important;
  }
  .tp-hotline span{font-size:14px!important;letter-spacing:-.01em!important;white-space:nowrap}
  .tp-hotline svg.ic{font-size:15px!important}
}

/* ===== V14 · chọn công suất: 8 cột 1 hàng ở desktop, carousel ở mobile/tablet =====
   Ở 8 cột (~135px/ô) không còn chỗ cho dòng mã model — nó đã hiện đầy đủ
   ở tiêu đề khung bản vẽ bên dưới, nên ô chỉ giữ ảnh + nhãn công suất. */
@media (min-width:1025px){
  #ban-ve .drawing-browser{
    display:block!important;
    grid-template-columns:none!important;
  }
  #ban-ve .drawing-selector{
    position:static!important;
    width:100%!important;
    margin:0 0 18px!important;
  }
  #ban-ve #drawingSelectorList{
    display:grid!important;
    grid-template-columns:repeat(8,minmax(0,1fr))!important;
    grid-auto-flow:row!important;
    gap:9px!important;
    overflow:visible!important;
  }
  #ban-ve #drawingSelectorList .drawing-choice{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-auto-rows:auto!important;
    align-items:start!important;
    justify-items:stretch!important;
    text-align:center;
    gap:8px!important;
    padding:10px 9px!important;
    min-height:0!important;
  }
  #ban-ve #drawingSelectorList .drawing-choice>img{
    display:block!important;
    width:100%!important;
    height:54px!important;
    object-fit:cover;
    object-position:top;
    border-radius:7px;
  }
  #ban-ve #drawingSelectorList .drawing-choice>span{
    align-items:center!important;
    text-align:center;
    min-width:0;
  }
  #ban-ve #drawingSelectorList .drawing-choice strong{
    font-size:15px!important;
    line-height:1.15;
    text-wrap:balance;
  }
  #ban-ve #drawingSelectorList .drawing-choice small{display:none!important}
  #ban-ve #drawingSelectorList .drawing-choice>span:last-child{display:none!important}
}

/* ≤1024px · carousel một hàng: scroll-snap, mờ hai cạnh, hai mũi tên */
@media (max-width:1024px){
  #ban-ve .power-carousel{position:relative}
  #ban-ve #drawingSelectorList{
    display:grid!important;
    grid-template-columns:none!important;
    grid-auto-flow:column!important;
    grid-auto-columns:minmax(150px,44vw)!important;
    gap:9px!important;
    overflow-x:auto!important;
    overscroll-behavior-inline:contain;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:2px;
    scrollbar-width:none;
    padding:2px 1px 6px!important;
  }
  #ban-ve #drawingSelectorList::-webkit-scrollbar{display:none}
  #ban-ve #drawingSelectorList .drawing-choice{scroll-snap-align:start}
  #ban-ve .power-carousel-fade{
    position:absolute;top:0;bottom:8px;width:44px;pointer-events:none;z-index:2;
    opacity:0;transition:opacity .18s ease;
  }
  #ban-ve .power-carousel-fade.l{left:0;background:linear-gradient(90deg,#fff 22%,rgba(255,255,255,0))}
  #ban-ve .power-carousel-fade.r{right:0;background:linear-gradient(270deg,#fff 22%,rgba(255,255,255,0))}
  #ban-ve .power-carousel[data-pos="start"] .power-carousel-fade.r,
  #ban-ve .power-carousel[data-pos="mid"] .power-carousel-fade.r,
  #ban-ve .power-carousel[data-pos="mid"] .power-carousel-fade.l,
  #ban-ve .power-carousel[data-pos="end"] .power-carousel-fade.l{opacity:1}
  #ban-ve .power-carousel-nav{
    position:absolute;top:calc(50% - 4px);transform:translateY(-50%);z-index:3;
    width:38px;height:38px;display:grid;place-items:center;
    border:1px solid #d6e1dc;border-radius:50%;background:#fff;color:#173731;
    font-size:19px;line-height:1;cursor:pointer;
    box-shadow:0 4px 14px rgba(17,51,46,.14);
  }
  #ban-ve .power-carousel-nav.prev{left:-4px}
  #ban-ve .power-carousel-nav.next{right:-4px}
  #ban-ve .power-carousel-nav:hover{background:#fff7f1;border-color:#efb08d}
  #ban-ve .power-carousel-nav:focus-visible{outline:2px solid #b94b1a;outline-offset:2px}
  #ban-ve .power-carousel-nav[disabled]{opacity:0;pointer-events:none}
  #ban-ve .power-carousel-count{
    display:block;margin-top:7px;text-align:right;
    font-family:var(--font-heading);font-size:12px;letter-spacing:.06em;color:#4f625c;
  }
}
@media (min-width:1025px){
  #ban-ve .power-carousel-fade,
  #ban-ve .power-carousel-nav,
  #ban-ve .power-carousel-count{display:none!important}
}

/* V14b · bỏ ảnh scan catalogue trong ô chọn công suất.
   Ở 143px (desktop) và ~170px (carousel) bản scan không đọc được và cả 8 ô
   trông giống nhau, nên nó không phân biệt gì — nhãn công suất là tín hiệu
   duy nhất có ích. Ô trở thành chip chữ, cao vừa đủ. */
#ban-ve #drawingSelectorList .drawing-choice>img{display:none!important}

@media (min-width:1025px){
  #ban-ve #drawingSelectorList .drawing-choice{
    min-height:58px!important;
    padding:13px 10px!important;
    place-content:center!important;
    gap:3px!important;
  }
  #ban-ve #drawingSelectorList .drawing-choice strong{
    font-size:18px!important;
    line-height:1.1;
    letter-spacing:-.005em;
  }
}
@media (max-width:1024px){
  #ban-ve #drawingSelectorList{grid-auto-columns:minmax(132px,34vw)!important}
  #ban-ve #drawingSelectorList .drawing-choice{
    min-height:56px!important;
    padding:12px 10px!important;
    text-align:center;
    place-content:center!important;
  }
  #ban-ve #drawingSelectorList .drawing-choice>span{align-items:center!important}
  #ban-ve #drawingSelectorList .drawing-choice strong{font-size:17px!important;line-height:1.12}
  #ban-ve #drawingSelectorList .drawing-choice small{display:none!important}
  #ban-ve #drawingSelectorList .drawing-choice>span:last-child{display:none!important}
}

/* ===== V15 · thư viện 1 video + 5 ảnh =====
   Mục tiêu: thấy đủ 6 mục trên mọi thiết bị mà không phải đoán còn gì.
   Desktop/tablet 6 cột 1 hàng; điện thoại 3×2 — thà hai hàng còn thấy hết
   hơn một hàng cuộn ngang (đúng bài học của dải chọn công suất). */
.gallery-stage{position:relative}
.gallery-stage:focus-visible{outline:2px solid #b94b1a;outline-offset:3px}
.gallery-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  width:76px;height:76px;display:none;place-items:center;
  border:0;border-radius:50%;background:#ff3b1f;cursor:pointer;
  box-shadow:0 10px 34px rgba(0,0,0,.34),0 0 0 7px rgba(255,255,255,.9);
  transition:transform .16s ease,background .16s ease;
}
.gallery-stage.has-video .gallery-play{display:grid}
.gallery-play>span{
  width:0;height:0;margin-left:5px;
  border-top:15px solid transparent;border-bottom:15px solid transparent;
  border-left:24px solid #fff;
}
.gallery-play:hover{transform:translate(-50%,-50%) scale(1.06);background:#e62f14}
.gallery-play:focus-visible{outline:3px solid #fff;outline-offset:3px}
.gallery-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:40px;height:40px;display:grid;place-items:center;
  border:1px solid #d6e1dc;border-radius:50%;background:rgba(255,255,255,.94);
  color:#173731;font-size:22px;line-height:1;cursor:pointer;
  box-shadow:0 4px 14px rgba(17,51,46,.16);
  opacity:0;transition:opacity .16s ease;
}
.gallery-stage:hover .gallery-arrow,
.gallery-arrow:focus-visible{opacity:1}
.gallery-arrow.prev{left:10px}
.gallery-arrow.next{right:10px}
.gallery-arrow:hover{background:#fff;border-color:#efb08d}
.gallery-arrow:focus-visible{outline:2px solid #b94b1a;outline-offset:2px}

.gallery-thumbs{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:8px!important}
.gallery-thumb{
  position:relative;padding:0;cursor:pointer;overflow:hidden;border-radius:0;
  background:var(--color-neutral-100);
  border:1px solid var(--color-divider);outline:none;
  transition:border-color .14s ease;
}
.gallery-thumb>img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
.gallery-thumb:hover{border-color:#efb08d}
.gallery-thumb.is-active{border-color:#b94b1a;outline:1px solid #b94b1a}
.gallery-thumb:focus-visible{outline:2px solid #b94b1a;outline-offset:2px}
.thumb-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:26px;height:26px;border-radius:50%;background:#ff3b1f;
  box-shadow:0 2px 8px rgba(0,0,0,.3),0 0 0 3px rgba(255,255,255,.92);
}
.thumb-play:after{
  content:"";position:absolute;left:53%;top:50%;transform:translate(-50%,-50%);
  border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid #fff;
}
.thumb-cap{
  position:absolute;left:0;right:0;bottom:0;
  padding:3px 4px;
  background:linear-gradient(0deg,rgba(9,32,28,.82),rgba(9,32,28,0));
  color:#fff;font-family:var(--font-heading);font-size:10px;line-height:1.2;
  letter-spacing:.03em;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.gallery-dots{display:none}
.gallery-dot{width:7px;height:7px;border-radius:50%;background:#cfdbd6}
.gallery-dot.is-active{background:#b94b1a}

@media (max-width:699px){
  /* 3×2 — thấy đủ 6 mục, không cuộn, ô đủ lớn để nhận ra */
  .gallery-thumbs{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important}
  .thumb-cap{font-size:9.5px;padding:3px}
  .gallery-arrow{opacity:1;width:36px;height:36px}
  .gallery-play{width:64px;height:64px;box-shadow:0 8px 26px rgba(0,0,0,.32),0 0 0 6px rgba(255,255,255,.9)}
  .gallery-play>span{border-top-width:13px;border-bottom-width:13px;border-left-width:20px}
  .gallery-dots{display:flex;justify-content:center;gap:6px;margin-top:9px}
}

/* video mở toàn màn */
.video-lightbox{
  position:fixed;inset:0;z-index:1300;
  display:grid;place-items:center;padding:20px;
  background:rgba(7,26,22,.9);
}
.video-lightbox video,
.video-lightbox iframe{
  width:min(1080px,100%);aspect-ratio:16/9;height:auto;
  border:0;background:#000;box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.video-lightbox-close{
  position:absolute;top:16px;right:18px;
  width:44px;height:44px;border:1px solid rgba(255,255,255,.34);border-radius:50%;
  background:rgba(255,255,255,.1);color:#fff;font-size:26px;line-height:1;cursor:pointer;
}
.video-lightbox-close:hover{background:rgba(255,255,255,.2)}
.video-lightbox-close:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* V15b · thumbnail về cỡ bản cũ: 3 ô một hàng.
   3 ô còn lại mở bằng nút ở desktop/tablet; ở mobile dải cuộn ngang nên
   luôn có sẵn cả 6, kéo trái/phải để xem. */
.gallery-thumbs{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important}
.gallery-thumb[hidden]{display:none!important}
.gallery-thumbs.show-more-badge .gallery-thumb:nth-child(3):after{
  content:"+3";
  position:absolute;inset:0;z-index:2;
  display:grid;place-items:center;
  background:rgba(9,32,28,.52);
  color:#fff;font-family:var(--font-heading);font-size:26px;font-weight:700;
  letter-spacing:.02em;pointer-events:none;
}
.gallery-thumbs.show-more-badge .gallery-thumb:nth-child(3) .thumb-cap{display:none}
.thumb-cap{font-size:11px;padding:4px 5px}
.gallery-more{
  margin-top:10px;width:100%;min-height:42px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:9px 12px;
  border:1px solid #d6e1dc;border-radius:0;background:#fff;
  color:#31534c;font-family:var(--font-heading);font-size:13px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
}
.gallery-more:hover{background:#fff7f1;border-color:#efb08d;color:#b94b1a}
.gallery-more:focus-visible{outline:2px solid #b94b1a;outline-offset:2px}
.gallery-more[hidden]{display:none!important}

@media (max-width:699px){
  /* kéo trái/phải: một hàng cuộn ngang, luôn đủ 6 ô */
  .gallery-thumbs{
    display:grid!important;
    grid-template-columns:none!important;
    grid-auto-flow:column!important;
    grid-auto-columns:minmax(96px,29vw)!important;
    gap:8px!important;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    padding-bottom:4px;
  }
  .gallery-thumbs::-webkit-scrollbar{display:none}
  .gallery-thumb{scroll-snap-align:start}
  .gallery-thumbs.show-more-badge .gallery-thumb:nth-child(3):after{display:none}
  .thumb-cap{font-size:10px}
}

/* V16 · chọn công suất → cuộn tới bảng thông số và nháy sáng.
   Trước đây bảng đổi số ở dưới nếp gấp nên khách không biết nó vừa đổi. */
#specData{scroll-margin-top:120px}
#specData.just-updated{
  animation:specFlash 1.3s ease-out;
}
#specData.just-updated .spec-data-kicker,
#specData.just-updated #specDataTitle{animation:specTitlePop 1.3s ease-out}
@keyframes specFlash{
  0%{box-shadow:0 0 0 3px rgba(185,75,26,.55), 0 0 0 10px rgba(185,75,26,.14)}
  70%{box-shadow:0 0 0 3px rgba(185,75,26,.28), 0 0 0 14px rgba(185,75,26,0)}
  100%{box-shadow:0 0 0 0 rgba(185,75,26,0), 0 0 0 0 rgba(185,75,26,0)}
}
@keyframes specTitlePop{
  0%,22%{color:#b94b1a}
  100%{color:inherit}
}
@media (prefers-reduced-motion: reduce){
  #specData.just-updated{animation:none;box-shadow:0 0 0 2px #b94b1a}
  #specData.just-updated .spec-data-kicker,
  #specData.just-updated #specDataTitle{animation:none}
}
/* nhãn "đang xem mức nào" luôn hiện ở đầu bảng */
#specDataTitle{scroll-margin-top:120px}

/* V16b · thanh điều hướng mục: mờ hai cạnh + mũi tên khi không hiện hết tab */
.subnav-wrap{position:relative;max-width:1240px;margin:0 auto}
.subnav-inner{
  max-width:none!important;
  scroll-snap-type:x proximity;
  scroll-padding-inline:8px;
  -webkit-overflow-scrolling:touch;
}
.subnav-inner::-webkit-scrollbar{display:none}
.subnav-inner>a{scroll-snap-align:center}
.subnav-fade{
  position:absolute;top:0;bottom:0;width:52px;z-index:2;pointer-events:none;
  opacity:0;transition:opacity .18s ease;
}
.subnav-fade.l{left:0;background:linear-gradient(90deg,var(--color-bg) 30%,rgba(255,253,250,0))}
.subnav-fade.r{right:0;background:linear-gradient(270deg,var(--color-bg) 30%,rgba(255,253,250,0))}
.subnav-wrap[data-pos="start"] .subnav-fade.r,
.subnav-wrap[data-pos="mid"] .subnav-fade.r,
.subnav-wrap[data-pos="mid"] .subnav-fade.l,
.subnav-wrap[data-pos="end"] .subnav-fade.l{opacity:1}
.subnav-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:30px;height:30px;display:none;place-items:center;
  border:1px solid #d6e1dc;border-radius:50%;background:#fff;color:#173731;
  font-size:17px;line-height:1;cursor:pointer;
  box-shadow:0 2px 10px rgba(17,51,46,.14);
}
.subnav-nav.prev{left:-2px}
.subnav-nav.next{right:-2px}
.subnav-nav:hover{background:#fff7f1;border-color:#efb08d;color:#b94b1a}
.subnav-nav:focus-visible{outline:2px solid #b94b1a;outline-offset:2px}
.subnav-nav[disabled]{opacity:0;pointer-events:none}
.subnav-wrap:not([data-pos="none"]) .subnav-nav{display:grid}
.subnav-inner>a.is-current{color:#b94b1a!important;position:relative}
.subnav-inner>a.is-current:after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:#b94b1a;
}
@media (max-width:1024px){
  .subnav-wrap{padding:0 6px}
  .subnav-inner{gap:22px!important;padding-left:32px!important;padding-right:32px!important}
  .subnav-fade{width:44px}
}
@media (max-width:520px){
  .subnav-inner{gap:18px!important}
  .subnav-nav{width:28px;height:28px;font-size:16px}
}

/* V16c · bản vẽ cũng nháy sáng như bảng thông số khi đổi mức công suất */
#drawingPanel{scroll-margin-top:120px}
#drawingPanel.just-updated{animation:specFlash 1.3s ease-out}
#drawingPanel.just-updated #drawingTitle{animation:specTitlePop 1.3s ease-out}
@media (prefers-reduced-motion: reduce){
  #drawingPanel.just-updated{animation:none;box-shadow:0 0 0 2px #b94b1a}
  #drawingPanel.just-updated #drawingTitle{animation:none}
}

/* V17 · kênh social dưới khối liên hệ ở footer.
   Ô 40px, icon nét mảnh 1.5 cùng bộ với phần còn lại của trang;
   nền trong suốt + viền hairline để không thêm 4 màu thương hiệu vào
   footer (chỉ hiện màu nền của kênh khi trỏ vào). */
.tp-social{
  display:flex;flex-wrap:wrap;gap:10px;
  margin:16px 0 0;padding:0;list-style:none;
}
.tp-social-link{
  width:40px;height:40px;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.28);
  border-radius:10px;
  background:transparent;
  color:#fff;
  text-decoration:none;
  transition:background .16s ease,border-color .16s ease,transform .16s ease;
}
.tp-social-ic{
  width:20px;height:20px;
  fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
}
.tp-social-link:hover{transform:translateY(-2px)}
/* nét icon phải giữ trắng khi nền chuyển sang màu kênh — có rule cũ trong
   footer đổi màu chữ khi hover, làm nét thành đỏ trên nền đỏ/xanh */
.tp-social-link:hover,
.tp-social-link:focus-visible,
.tp-social-link:active,
.tp-social-link:hover .tp-social-ic,
.tp-social-link:focus-visible .tp-social-ic,
.tp-social-link:hover .tp-social-ic *,
.tp-social-link:focus-visible .tp-social-ic *{
  color:#fff!important;
  stroke:#fff!important;
  fill:none!important;
}
.tp-social-link.is-youtube:hover{background:#ff0033;border-color:#ff0033}
.tp-social-link.is-tiktok:hover{background:#000;border-color:rgba(255,255,255,.55)}
.tp-social-link.is-facebook:hover{background:#1877f2;border-color:#1877f2}
.tp-social-link.is-map:hover{background:#1a8f4c;border-color:#1a8f4c}
.tp-social-link:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media(max-width:760px){
  .tp-social{gap:9px;margin-top:14px}
  .tp-social-link{width:44px;height:44px}
  .tp-social-ic{width:21px;height:21px}
}

/* V16d · mũi tên carousel đang đè lên nhãn công suất (đo được 34px).
   Chừa lề hai bên để mũi tên nằm trong máng, không phủ chữ. */
@media (max-width:1024px){
  #ban-ve .power-carousel{padding:0 46px}
  #ban-ve .power-carousel-nav.prev{left:4px}
  #ban-ve .power-carousel-nav.next{right:4px}
  #ban-ve .power-carousel-fade.l{left:46px}
  #ban-ve .power-carousel-fade.r{right:46px}
}

/* ===== V18 · form yêu cầu tư vấn =====
   Nút gửi trở lại dạng đặc: trước đó tôi hạ nó xuống viền vì form là kênh
   phụ, nhưng "phụ" là chuyện vị trí của cả section — khi khách đã ở trong
   thẻ này thì đây là hành động chính duy nhất, không có gì để nhường. */
#quoteForm .quote-submit{
  background:#b94b1a!important;
  border:1px solid #b94b1a!important;
  color:#fff!important;
  box-shadow:0 8px 20px rgba(185,75,26,.24)!important;
}
#quoteForm .quote-submit:hover{
  background:#a03f14!important;
  border-color:#a03f14!important;
  box-shadow:0 10px 24px rgba(185,75,26,.3)!important;
}
#quoteForm .quote-submit:active{background:#8d3810!important}
#quoteForm .quote-submit:focus-visible{outline:2px solid #b94b1a;outline-offset:3px}
#quoteForm .quote-submit:disabled{background:#c9a394!important;border-color:#c9a394!important;box-shadow:none!important}

.quote-submit-note{
  margin:-6px 0 0;
  font-size:13px;line-height:1.5;color:#4f625c;
}
.quote-submit-note b{color:#31534c}

/* nhãn phụ "(không bắt buộc)" gộp vào nhãn chính, bớt một dòng mỗi ô */
#quoteForm .label-opt{
  font-weight:400;letter-spacing:.02em;text-transform:none;
  color:#4f625c;
}
/* legend cùng cấp bậc với các nhãn ô khác, trước đây nhạt và nhỏ hơn */
#quoteForm .field-legend{
  margin:0 0 6px;padding:0;
  font-family:var(--font-heading);font-size:13px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:#31534c;
}

/* V18b · nhóm "Tình huống" đang cắt mất lựa chọn thứ ba ("Chưa rõ") vì 3 mục
   xếp ngang bằng flex và tràn khỏi thẻ. Chuyển sang 3 cột đều nhau. */
#quoteForm .seg{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:0;
  overflow:visible!important;
}
#quoteForm .seg-opt{
  justify-content:center!important;
  text-align:center;
  padding-left:8px!important;padding-right:8px!important;
  font-size:14px!important;
  white-space:normal!important;
  min-width:0!important;
}
@media (max-width:420px){
  #quoteForm .seg{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  #quoteForm .seg-opt{font-size:13px!important;line-height:1.25}
}

/* ===== V19 · tab "Bản vẽ & kích thước" bị chìm =====
   Trước đây tab không chọn là chữ nhạt trên nền be, không viền — nó đọc như
   dòng tiêu đề bị mờ, không như thứ bấm được. Nay nó là chip trắng có viền
   hairline, chữ đậm màu, có hover và mũi tên — hai tab thành một cặp lựa
   chọn ngang hàng. Thêm dòng phụ nói rõ mỗi tab cho cái gì. */
.technical-tabs{gap:6px!important;padding:5px!important}
.technical-tabs button{
  display:flex!important;align-items:center;gap:10px;
  min-height:60px!important;
  padding:10px 14px!important;
  text-align:left;
  border:1px solid transparent!important;
  border-radius:9px;
  transition:background .15s ease,border-color .15s ease,transform .15s ease;
}
.tab-ic{
  width:22px;height:22px;flex:0 0 22px;
  fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
}
.tab-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.tab-text b{
  font-family:var(--font-heading);font-size:14px;font-weight:700;
  letter-spacing:.05em;line-height:1.15;
}
.tab-text small{
  font-family:var(--font-body);font-size:11.5px;font-weight:400;
  letter-spacing:.01em;line-height:1.25;text-transform:none;
  opacity:.82;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* tab KHÔNG chọn: chip trắng, viền rõ, chữ đậm màu → thấy là bấm được */
.technical-tabs button[aria-selected="false"]{
  background:#fff!important;
  border-color:#d3e0da!important;
  color:#31534c!important;
  box-shadow:0 1px 3px rgba(17,51,46,.05)!important;
}
.technical-tabs button[aria-selected="false"]:hover{
  background:#fff7f1!important;
  border-color:#efb08d!important;
  color:#b94b1a!important;
  transform:translateY(-1px);
}
.technical-tabs button[aria-selected="false"]:after{
  content:"→";
  margin-left:auto;
  font-family:var(--font-heading);font-size:17px;line-height:1;
  color:#b94b1a;
}
.technical-tabs button[aria-selected="true"]{
  background:#173731!important;
  color:#fff!important;
  border-color:#173731!important;
  box-shadow:inset 0 -3px 0 #ec6d2f!important;
}
.technical-tabs button[aria-selected="true"] .tab-text small{opacity:.72}

@media (max-width:699px){
  #ban-ve .technical-tabs button{min-height:56px!important;padding:9px 11px!important;gap:8px}
  .tab-ic{width:19px;height:19px;flex-basis:19px}
  .tab-text b{font-size:12.5px;letter-spacing:.03em}
  .tab-text small{font-size:10.5px}
  .technical-tabs button[aria-selected="false"]:after{font-size:15px}
}
@media (max-width:420px){
  .tab-text small{display:none}
  #ban-ve .technical-tabs button{min-height:48px!important}
}

/* ==================================================================
   V20 · rà soát trên 390 / 768 / 1024 / 1440 — sửa các lỗi tìm được
   ================================================================== */

/* 1 — Zalo còn sót màu cũ #1787df (trắng trên nó chỉ 3,04:1) và xanh lá
       cho Mr. Tài ở một số khổ. Ép về xanh Zalo chính thức ở MỌI khổ. */
.tp-footer-contact .tp-contact-zalo1,
.tp-footer-contact .tp-contact-zalo2,
.tp-contact-zalo1,
.tp-contact-zalo2,
.tp-float-zalo1,
.tp-float-zalo2{background:#0068ff!important}
.tp-contact-zalo1 .tp-contact-circle,
.tp-contact-zalo2 .tp-contact-circle,
.tp-float-zalo1 .tp-float-icon,
.tp-float-zalo2 .tp-float-icon{background:#fff!important;color:#0068ff!important}
.tp-mobile-zalo .tp-zalo-word{color:#0068ff!important}
.tp-zalo-avatar,
.tp-zalo-person-tai .tp-zalo-avatar{background:#0068ff!important}

/* 2 — MOBILE: thanh mục trong trang không dính, trong khi trang dài 14.400px
       → khách không có cách nào nhảy mục. Cho dính lại nhưng nén gọn. */
@media (max-width:760px){
  .subnav-shell{
    position:sticky!important;top:0!important;z-index:20!important;
    box-shadow:0 2px 10px rgba(17,51,46,.06);
  }
  .subnav-inner{padding-top:8px!important;padding-bottom:8px!important;font-size:14px!important}
  section[id],div[id]{scroll-margin-top:112px}
}
/* 6 — thanh dính 89px ăn 10% khung nhìn tablet → nén còn ~58px */
@media (max-width:1024px){
  .subnav-inner{padding-top:9px!important;padding-bottom:9px!important}
}

/* 3 — nhãn ô thumbnail 10–11px, quá nhỏ cho chữ có dấu; nền gradient cũng
       chưa đủ đậm để bảo đảm chữ trắng đọc được trên ảnh sáng */
.thumb-cap{
  font-size:12px!important;
  padding:5px 6px!important;
  background:linear-gradient(0deg,rgba(9,32,28,.92),rgba(9,32,28,.55) 62%,rgba(9,32,28,0))!important;
}
@media (max-width:699px){ .thumb-cap{font-size:12px!important} }

/* 4 — vùng bấm dưới 44px trên cảm ứng */
@media (hover:none), (max-width:760px){
  .gallery-arrow{width:44px!important;height:44px!important;font-size:23px}
  #ban-ve .power-carousel-nav{width:44px!important;height:44px!important;font-size:21px}
  #ban-ve .power-carousel{padding:0 52px}
  #ban-ve .power-carousel-nav.prev{left:2px}
  #ban-ve .power-carousel-nav.next{right:2px}
  #ban-ve .power-carousel-fade.l{left:52px}
  #ban-ve .power-carousel-fade.r{right:52px}
  .subnav-nav{width:40px!important;height:40px!important}
  .subnav-inner>a{padding-top:11px!important;padding-bottom:11px!important}
  .hero-spec-toggle{min-height:44px!important}
  .gallery-more{min-height:46px!important}
}

/* 5 — bảng thông số cuộn ngang 327px trên mobile mà không có dấu hiệu nào.
       Kỹ thuật bóng cuộn: nền dính vào nội dung nên tự hiện/ẩn theo vị trí. */
.spec-table-scroll{
  background:
    linear-gradient(90deg, var(--color-bg) 30%, rgba(255,253,250,0)) left center,
    linear-gradient(270deg, var(--color-bg) 30%, rgba(255,253,250,0)) right center,
    radial-gradient(farthest-side at 0 50%, rgba(17,51,46,.16), rgba(17,51,46,0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(17,51,46,.16), rgba(17,51,46,0)) right center;
  background-repeat:no-repeat;
  background-size:44px 100%, 44px 100%, 15px 100%, 15px 100%;
  background-attachment:local, local, scroll, scroll;
}
.spec-scroll-hint{
  display:none;margin:6px 0 0;
  font-family:var(--font-heading);font-size:12px;letter-spacing:.05em;
  text-transform:uppercase;color:#4f625c;
}
@media (max-width:900px){ .spec-scroll-hint{display:block} }

/* V20b · ba điểm còn lại sau khi đo lại */

/* thanh mục vẫn "static" ở 390px dù đã !important → có rule đặc hiệu hơn
   ghi đè. Dùng selector đủ đặc hiệu để chắc thắng. */
@media (max-width:760px){
  nav.rail.subnav-shell[aria-label="Mục trong trang"]{
    position:sticky!important;
    top:0!important;
    z-index:20!important;
  }
}
/* dòng phụ trong tab 10,5–11,5px, dưới sàn 12px cho chữ có dấu */
.tab-text small{font-size:12px!important}
@media (max-width:699px){ .tab-text small{font-size:12px!important} }

/* nút XÓA LỌC 34px, dưới 44px vùng bấm trên cảm ứng */
@media (hover:none), (max-width:760px){
  #fReset{min-height:44px!important;padding:10px 14px!important}
  .contextual-cta-actions .btn{min-height:46px!important}
}
/* nút Zalo dạng viền trong footer: cho nền đặc để không phụ thuộc nền cha */
.footer-contact-btn.zalo{background:#0068ff!important;border-color:#0068ff!important;color:#fff!important}
.footer-contact-btn.zalo .footer-contact-icon{background:#fff!important;color:#0068ff!important}

/* V20c · thanh mục dính ở mobile cao 91px; cộng thanh đáy 61px là mất 18%
   khung nhìn. Nén còn ~52px, vẫn đủ 44px vùng bấm cho link. */
@media (max-width:760px){
  nav.rail.subnav-shell[aria-label="Mục trong trang"]{
    padding-top:0!important;padding-bottom:0!important;
  }
  .subnav-wrap{padding:0 4px}
  .subnav-inner{
    padding-top:4px!important;padding-bottom:4px!important;
    gap:16px!important;font-size:13.5px!important;
  }
  .subnav-inner>a{padding-top:13px!important;padding-bottom:13px!important;line-height:1.1}
  section[id],div[id]{scroll-margin-top:74px}
}

/* ==================================================================
   V21 · dấu Zalo thật + thu gọn trang mobile
   ================================================================== */

/* --- dấu Zalo: bong bóng chat trắng + chữ Zalo xanh, thay chữ trơn --- */
.tp-zalo-glyph{
  width:100%;height:100%;display:block;
}
.tp-zalo-glyph .zg-bubble{fill:#0068ff;stroke:none}
.tp-zalo-glyph .zg-word{fill:#fff;font-family:Arial,Helvetica,sans-serif}
.tp-zalo-mark{
  display:grid;place-items:center;
  background:#fff!important;
  border-radius:50%;
  overflow:hidden;
  padding:5px;
}
/* trên nút Zalo đặc (nền xanh) thì đảo lại: bong bóng trắng, chữ xanh */
.tp-contact-zalo1 .tp-zalo-mark .zg-bubble,
.tp-contact-zalo2 .tp-zalo-mark .zg-bubble,
.tp-float-zalo1 .tp-zalo-mark .zg-bubble,
.tp-float-zalo2 .tp-zalo-mark .zg-bubble,
.tp-mobile-zalo .tp-zalo-mark .zg-bubble{fill:#0068ff!important}
.tp-contact-zalo1 .tp-zalo-mark .zg-word,
.tp-contact-zalo2 .tp-zalo-mark .zg-word,
.tp-float-zalo1 .tp-zalo-mark .zg-word,
.tp-float-zalo2 .tp-zalo-mark .zg-word,
.tp-mobile-zalo .tp-zalo-mark .zg-word{fill:#fff!important}
.tp-mobile-zalo .tp-zalo-mark-sm{
  width:26px;height:26px;padding:2px;
  background:#fff!important;
}
.tp-mobile-zalo .tp-zalo-mark-sm .zg-bubble{fill:#0068ff!important}
.tp-mobile-zalo .tp-zalo-mark-sm .zg-word{fill:#fff!important}

/* --- accordion "Cần biết khi đặt hàng" (chỉ mobile) --- */
.dh-toggle{
  display:none;width:100%;
  align-items:center;gap:10px;
  padding:0;margin:0;
  border:0;background:transparent;
  font:inherit;color:inherit;text-align:left;
  cursor:pointer;
}
.dh-sign{
  margin-left:auto;flex:0 0 auto;
  font-family:var(--font-heading);font-size:19px;line-height:1;
  color:#b94b1a;
}
@media (max-width:760px){
  #dat-hang .cells-4{grid-template-columns:1fr!important;row-gap:8px!important}
  #dat-hang .cells-4>.blueprint{padding:13px 14px!important;grid-template-columns:34px 1fr!important;gap:10px!important}
  #dat-hang .cells-4>.blueprint>span:first-child{font-size:15px!important}
  #dat-hang .dh-toggle{display:flex;min-height:44px}
  #dat-hang .cells-4>.blueprint h5{margin:0!important;font-size:16px!important;line-height:1.25}
  #dat-hang .dh-collapsible p{
    display:none;
    margin-top:8px!important;
    padding-top:8px;
    border-top:1px solid var(--color-divider);
  }
  #dat-hang .dh-collapsible.is-open p{display:block}
  #dat-hang .blueprint[style*="4px 26px"]{padding:10px 12px 12px!important}
  #dat-hang h2{font-size:24px!important;margin-bottom:8px!important}
  #dat-hang>div>p{margin-bottom:16px!important;font-size:15px!important}
}

/* --- thu gọn chiều dài trang mobile: đệm section và khoảng cách tiêu đề --- */
@media (max-width:760px){
  main>.band{padding-top:38px!important;padding-bottom:38px!important}
  main>.band:first-child{padding-top:20px!important;padding-bottom:28px!important}
  main>.band h2{margin-top:8px!important}
  #ung-dung .cells-4{row-gap:10px!important}
  #ung-dung .cells-4>*{padding:13px 14px!important}
  #giao-hang .cells-3{row-gap:10px!important}
  #giao-hang .delivery-hero-visual{margin-bottom:14px!important}
  #lien-quan .cells-3{row-gap:10px!important}
  #faq .faq-answer{padding-top:6px!important}
  footer.rail{padding-top:32px!important;padding-bottom:32px!important}
  .tp-footer-main{gap:26px 20px!important}
}

/* V21b · hai section dài nhất còn lại trên mobile sau accordion:
   "Sản phẩm liên quan" 2.050px và "Hình thức giao hàng" 1.358px. */
@media (max-width:760px){
  /* 3 thẻ sản phẩm xếp dọc full-width, mỗi thẻ ~600px → 2 cột, ảnh vuông */
  #lien-quan .cells-3{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    column-gap:10px!important;row-gap:12px!important;
  }
  #lien-quan .cells-3 figure,
  #lien-quan .cells-3 .duotone{margin-bottom:8px!important}
  #lien-quan .cells-3 img{aspect-ratio:1/1!important;object-fit:cover!important}
  #lien-quan .cells-3 h3,
  #lien-quan .cells-3 h4,
  #lien-quan .cells-3 b,
  #lien-quan .cells-3 strong{font-size:15px!important;line-height:1.25}
  #lien-quan .cells-3 p{font-size:13.5px!important;line-height:1.45}
  #lien-quan .cells-3 .btn{min-height:44px!important;font-size:13px!important;padding:10px!important}

  /* ảnh minh hoạ giao hàng quá cao trên mobile */
  #giao-hang .delivery-hero-visual img{max-height:34vh!important;object-fit:cover!important}
  #giao-hang .cells-3>*{padding:13px 14px!important}
  #giao-hang .ship-note{padding:12px!important;margin-top:12px!important}
}
@media (max-width:420px){
  #lien-quan .cells-3{grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:8px!important}
  #lien-quan .cells-3 h3,#lien-quan .cells-3 h4,
  #lien-quan .cells-3 b,#lien-quan .cells-3 strong{font-size:14px!important}
}