:root{--heading:'Kacirin Heading',Arial,sans-serif}
.landing,.contact-bar__inner{width:100%;max-width:none}
.landing .container{width:79.2%;margin-inline:auto;padding-inline:0}
.sizes h2,.sizes .section-description{padding-left:0}
.colors .container{position:relative;isolation:isolate}
.product h3,.application-card h3{white-space:normal}
.contact-label,.hotline{font-family:'Barlow Condensed','Kacirin Heading',Arial,sans-serif}
.quick-fields>p{display:contents}
.quick-fields label{flex:1;min-width:0}
.hero__signature{max-width:87%;margin-top:27px}
.field-symbol .icon{width:19px;height:19px}
.product--1 .dimension--width{bottom:79%}
.product--2 .dimension--width{bottom:87%}
.product--3 .dimension--width{bottom:90%}
.product--3 .product__drawing .atlas{width:165%}
.product h3{font-size:clamp(10px,1.2vw,17px)}
.application-card h3{font-size:clamp(10px,1.15vw,16px)}
.style-lineup__item{mix-blend-mode:multiply}
.floating-call{position:fixed;top:50%;right:0;z-index:90;display:flex;align-items:center;transform:translateY(-50%);color:#b40000;text-decoration:none;isolation:isolate}
.floating-call__icon{position:relative;z-index:1;display:grid;place-items:center;width:72px;height:72px;flex:none;border:2px solid currentColor;border-radius:50%;background:#fff}
.floating-call__icon svg{width:54px;height:54px}
.floating-call__label{display:flex;align-items:center;justify-content:center;height:48px;margin-left:-9px;padding:0 12px 0 16px;background:#b40000;color:#fff;font-family:'Barlow Condensed','Kacirin Heading',Arial,sans-serif;font-size:24px;font-weight:600;line-height:1;white-space:nowrap}
.floating-call:hover{color:#930000}.floating-call:hover .floating-call__label{background:#930000}
.floating-call:focus-visible{outline:3px solid #b40000;outline-offset:4px;border-radius:36px 0 0 36px}
@media(min-width:701px){.product__drawing{height:clamp(170px,22vw,440px)}.style-lineup,.styles__custom{height:clamp(170px,22vw,380px)}}
@media(max-width:700px){.floating-call__icon{width:60px;height:60px}.floating-call__icon svg{width:45px;height:45px}.floating-call__label{height:42px;padding-right:10px;font-size:21px}}
@media(min-width:701px) and (max-width:850px){
  h2{font-size:21px}.sizes h2{font-size:23px}.choice-panel h2{font-size:21px}.depth-panel h2{font-size:20px}
  .hero__signature{margin-top:16px;font-size:28px}.hero__content{width:43%}.hero-benefits{width:95%}
  .product h3{font-size:10px}.application-card h3{font-size:9px}
  .field-symbol .icon{width:11px;height:11px}
  .applications h2{font-size:20px}
  .style-lineup{height:23vw}.styles__custom{height:23vw}
}
@media(max-width:1100px) and (min-width:851px){.field-symbol .icon{width:15px;height:15px}}
@media(max-width:700px){
  .landing .container{width:84%}
  .hero:after{background:linear-gradient(90deg,#fffaeceb 0,#fff8eac4 44%,#fff8ea25 82%)}
  .hero__signature{margin-top:24px;max-width:300px;font-size:34px}
  .product h3{font-size:14px}.application-card h3{font-size:13px}.field-symbol .icon{width:18px;height:18px}
  .product--1 .dimension--width{bottom:82%}.product--2 .dimension--width{bottom:89%}.product--3 .dimension--width{bottom:90%}
  .quick-fields input[type=tel]{font-size:16px}
}
@media(max-width:380px){.landing .container{width:86%}}

/* Thanh liên hệ cố định ở đáy màn hình; chừa chỗ cho nội dung cuối trang. */
.hero{aspect-ratio:auto;min-height:46.7vw}
.hero__layout{display:grid;grid-template-columns:1.12fr 1fr;gap:4%;align-items:center;padding-block:clamp(36px,4vw,76px)}
.hero .hero__content{width:100%;margin:0;padding:0;min-width:0}
.hero__quote{min-width:0;position:relative;z-index:1}
.hero__quote .quote-field input{font-size:16px}
.hero__quote .quote-field textarea{font-size:14px}
.hero__quote .quote-card__description{font-size:13px}
.hero__quote .quote-card__commitment{font-size:12px}
@media(max-width:1000px){
  .hero__layout{grid-template-columns:minmax(0,1fr);gap:32px;padding-block:32px}
  .hero .hero__content{max-width:560px}
  .hero__quote{width:100%;max-width:560px;justify-self:center;padding:24px}
  .hero__quote h2{font-size:24px}
  .hero__quote .quote-card__description{margin-bottom:18px}
  .hero__quote .quote-field{min-height:52px;margin-bottom:12px}
  .hero__quote .quote-field input,.hero__quote .quote-field textarea{padding:14px 8px}
  .hero__quote .quote-field textarea{height:86px;min-height:86px}
  .hero__quote .field-symbol{padding:16px 8px 0 10px}
  .hero__quote .field-symbol .icon{width:18px;height:18px}
  .hero__quote .quote-submit input{font-size:20px;padding:12px 5px}
  .hero__quote .quote-card__commitment{margin-top:15px}
}
@media(max-width:700px){
  .hero__quote{padding:22px 16px}
  .hero__quote h2{font-size:21px}
  .hero__quote .quote-card__description{font-size:11px}
  .hero__quote .quote-card__commitment{font-size:10px}
  .hero__background{object-position:63% top}
}
:root{--contact-bar-height:80px}
html{scroll-padding-top:20px;scroll-padding-bottom:calc(var(--contact-bar-height) + 20px)}
.kacirin-site{padding-bottom:var(--contact-bar-height)}
.contact-bar.contact-bar--bottom{position:fixed;inset:auto 0 0;z-index:100;max-height:50vh;max-height:50dvh;overflow-y:auto;padding-bottom:env(safe-area-inset-bottom,0px);border-top:1px solid #e6dfd4;box-shadow:0 -3px 16px #00000014;background:#fffefa}
.contact-bar--bottom .contact-bar__inner{max-width:1440px;padding-block:10px}
.contact-bar--bottom .quick-fields input[type=tel]{font-size:16px}
@media(max-width:700px){
  :root{--contact-bar-height:110px}
  .contact-bar--bottom .contact-bar__inner{grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:6px 12px;padding:10px 12px;align-items:center}
  .contact-bar--bottom .contact-label{grid-column:1;grid-row:1}
  .contact-bar--bottom .hotline{grid-column:1;grid-row:2}
  .contact-bar--bottom .contact-label,.contact-bar--bottom .hotline{justify-self:stretch;font-size:clamp(18px,5.5vw,24px);padding:10px 5px}
  .contact-bar--bottom .quick-contact{grid-column:2;grid-row:1 / span 2;min-width:0}
  .contact-bar--bottom .quick-fields{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
  .contact-bar--bottom .quick-fields input[type=tel]{height:44px;padding-inline:10px}
  .contact-bar--bottom .quick-fields input[type=submit]{width:100%;min-width:0;height:40px;font-size:16px;padding-inline:8px}
  .contact-bar--bottom .quick-contact .wpcf7-spinner{top:auto;bottom:8px}
}

/* Thanh tư vấn nổi bật theo mẫu quảng cáo. */
.contact-bar.contact-bar--bottom{background:linear-gradient(105deg,#087d3d,#079447 48%,#079447);border-top:3px solid #fadd50;box-shadow:0 -5px 22px #153a302b}
.contact-bar--bottom .contact-bar__inner{padding-block:12px}
.contact-promo{display:flex;flex-direction:column;align-items:center;gap:5px;flex:none}
.contact-promo__caption{color:#fff139;font-family:var(--heading);font-size:17px;font-weight:700;line-height:1.1;letter-spacing:.015em;text-shadow:1px 1px 0 #123d24,-1px -1px 0 #123d24;white-space:nowrap}
.contact-bar--bottom .contact-label{gap:9px;min-height:43px;padding:6px 21px;border:2px solid #fff8a1;border-radius:999px;background:linear-gradient(#ffff69,#ffe500);box-shadow:0 3px 0 #d5a411,0 4px 8px #00351c33;color:#e20a0a;font-family:var(--body);font-size:23px;font-weight:800;font-style:italic;line-height:1.1}
.contact-label svg{width:24px;height:24px;flex:none}
.contact-bar--bottom .hotline{gap:10px;border:0;background:none;box-shadow:none;color:white;font-size:36px;padding:4px 6px;text-shadow:0 2px 1px #065f30}
.hotline__phone{width:34px;height:49px;flex:none;color:#ff170f;transform:rotate(-7deg)}
.contact-bar--bottom .quick-fields input[type=tel]{height:54px;border:1px solid #163728;border-radius:12px;background:#fff;box-shadow:inset 0 1px 3px #0000000c;font-size:18px;color:#17241d}
.contact-bar--bottom .quick-fields input[type=tel]::placeholder{font-style:normal;color:#4c5650}
.contact-bar--bottom .quick-fields input[type=submit]{height:52px;min-width:220px;border:0;border-radius:999px;background:linear-gradient(#ff7809,#ff5700);box-shadow:0 3px 0 #d84400;color:#fff;font-size:21px;font-weight:800;text-transform:uppercase}
.contact-bar--bottom .quick-contact .wpcf7-not-valid-tip{color:#fff8a8;font-weight:600}
.contact-bar--bottom .quick-contact .wpcf7-response-output{color:#24342b;border-radius:5px}
.contact-bar--bottom :is(a,input):focus-visible{outline-color:#fff18a}
@media(min-width:701px) and (max-width:1100px){
  .contact-promo__caption{font-size:13px}
  .contact-bar--bottom .contact-label{font-size:17px;padding:5px 12px;min-height:36px}
  .contact-label svg{width:18px;height:18px}
  .contact-bar--bottom .hotline{font-size:26px;gap:5px}
  .hotline__phone{width:26px;height:38px}
  .contact-bar--bottom .quick-contact{margin-left:0;flex:1;min-width:0}
  .contact-bar--bottom .quick-fields{gap:16px}
  .contact-bar--bottom .quick-fields input[type=tel]{height:44px;font-size:16px}
  .contact-bar--bottom .quick-fields input[type=submit]{height:42px;min-width:135px;padding-inline:10px;font-size:15px}
}
@media(max-width:700px){
  .contact-bar--bottom .contact-bar__inner{padding:10px 12px 12px;align-items:center}
  .contact-promo{grid-column:1;grid-row:1;min-width:0;gap:5px}
  .contact-promo__caption{font-size:clamp(10px,3.05vw,15px)}
  .contact-bar--bottom .contact-label{font-size:clamp(14px,4.1vw,20px);padding:5px 7px;min-height:32px;gap:5px;width:100%;border-width:1px}
  .contact-label svg{width:17px;height:17px}
  .contact-bar--bottom .hotline{font-size:clamp(19px,5.5vw,28px);gap:4px;padding:2px 0}
  .hotline__phone{width:24px;height:34px}
  .contact-bar--bottom .quick-fields input[type=tel]{font-size:16px;height:48px;padding-inline:9px;border-radius:10px}
  .contact-bar--bottom .quick-fields input[type=submit]{font-size:clamp(12px,3.9vw,18px);min-width:0;height:40px;padding-inline:5px}
}