:root{--navy:#16365f;--blue:#24496f;--sky:#1799dc;--ink:#1b2f44;--muted:#5e6e7e;--pale:#f3f7fa;--line:#dce5ec}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);font-size:16px;line-height:1.7}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}img{max-width:100%;display:block}h1,h2,h3,p{margin-top:0}h1,h2,h3{line-height:1.3}h2{font-size:36px;color:var(--navy);margin-bottom:24px}h3{font-size:19px}p{color:var(--muted)}.wrap{width:min(1160px,calc(100% - 64px));margin:auto}.topbar{background:var(--navy);color:#fff;font-size:13px}.topbar .wrap{display:flex;align-items:center;gap:30px;min-height:34px}.topbar span:first-child{margin-right:auto}.header{height:98px;display:flex;gap:32px;align-items:center}header{position:sticky;top:0;background:#fff;z-index:30;box-shadow:0 2px 12px #1233}.brand{display:flex;align-items:center;gap:10px;min-width:190px}.brand img{width:59px;height:64px;object-fit:contain}.brand b{font-size:25px;letter-spacing:1.5px;line-height:1.2;display:block;color:var(--navy)}.brand small{display:block;font-size:10px;letter-spacing:3px;color:var(--blue)}nav{display:flex;align-items:center;gap:28px;margin-left:auto}nav a{font-size:14px;font-weight:700;text-transform:uppercase;padding:35px 0;white-space:nowrap}nav a:hover,nav a[aria-current]{color:var(--sky)}.header-phone{border-left:1px solid var(--line);padding-left:25px;line-height:1.5;white-space:nowrap}.header-phone span{display:block;font-size:11px;letter-spacing:1px;color:var(--muted)}.header-phone b{color:var(--navy);font-size:20px}.menu-toggle{display:none}.hero{height:560px;position:relative;color:white;background:var(--navy);isolation:isolate}.hero-images,.hero-image{position:absolute;inset:0;width:100%;height:100%;z-index:-2}.hero-image{object-fit:cover;opacity:0;transition:opacity .45s}.hero-image.active{opacity:1}.hero:after{display:none!important;background:none!important;content:none!important}.hero-content{padding-top:94px}.eyebrow{font-size:14px;font-weight:700;letter-spacing:1.4px;color:var(--blue);margin-bottom:18px}.hero .eyebrow{color:#b6e3f5}.hero h1{font-size:52px;line-height:1.22;max-width:650px;margin-bottom:22px;font-weight:700;letter-spacing:-1.2px}.hero p:not(.eyebrow){color:#e7edf4;font-size:18px;line-height:1.7;margin-bottom:28px}.button{display:inline-flex;gap:24px;align-items:center;justify-content:center;padding:13px 24px;background:var(--navy);color:#fff;font-size:14px;font-weight:700;border:1px solid transparent;transition:.2s}.button:hover{background:var(--sky);color:#fff}.button.white{background:white;color:var(--navy)}.button.white:hover{background:#dff2fc}.hero-bottom{position:absolute;bottom:24px;left:0;right:0;display:flex;align-items:center;justify-content:space-between;font-size:11px;letter-spacing:1.7px;color:#e8f1f6}.slider-controls{display:flex;gap:17px;align-items:center;font-size:12px;letter-spacing:1px}.slider-controls button{border:1px solid #fff7;width:37px;height:37px;border-radius:50%;background:transparent;color:white;font-size:19px}.slider-controls button:hover{background:#ffffff30}.section{padding-top:82px;padding-bottom:82px}.intro{display:grid;grid-template-columns:1fr 1fr;gap:76px;align-items:center}.intro p{font-size:16px}.line{display:flex;gap:13px;align-items:center}.line:before{content:'';width:38px;height:2px;background:var(--sky)}.intro-photos{height:425px;position:relative;margin-bottom:20px}.photo-main{width:86%;height:360px;object-fit:cover}.photo-small{position:absolute;bottom:0;right:0;width:54%;height:200px;object-fit:cover;border:8px solid white}.photo-label{position:absolute;bottom:0;left:0;background:var(--navy);padding:20px;color:#c5dfef;font-size:11px;letter-spacing:1px;width:53%}.photo-label b{display:block;font-size:16px;color:white;letter-spacing:0;margin-top:4px}.text-link{display:inline-flex;gap:30px;font-weight:700;font-size:14px;color:var(--navy);border-bottom:1px solid var(--navy);padding-bottom:6px;margin-top:12px}.pale{background:var(--pale)}.section-heading{text-align:center;margin-bottom:40px}.section-heading .eyebrow{letter-spacing:0;font-size:16px;margin-bottom:9px;color:var(--sky)}.section-heading h2{font-size:29px;margin-bottom:0;letter-spacing:.2px}.section-heading:after{content:'';display:block;width:44px;height:3px;background:var(--sky);margin:20px auto 0}.category-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:25px}.category{grid-column:span 2;background:#fff;border:1px solid var(--line);transition:transform .2s,box-shadow .2s}.category:nth-child(-n+2){grid-column:span 3}.category:hover{transform:translateY(-4px);box-shadow:0 12px 26px #16365f10}.category img{width:100%;height:225px;object-fit:contain;padding:18px;background:white}.category:nth-child(-n+2) img{height:275px}.category>div{padding:20px 25px;border-top:1px solid var(--line)}.category h3{text-transform:uppercase;font-size:17px;margin-bottom:8px;color:var(--navy)}.category p{font-size:14px;margin-bottom:13px}.category span{font-size:13px;color:var(--blue);font-weight:700}.partner-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:30px;align-items:center}.partner-grid img{width:100%;height:68px;object-fit:contain}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.service-grid article{padding:30px;background:white;border:1px solid var(--line)}.service-grid h3{color:var(--navy);font-size:19px;margin-bottom:13px}.service-grid p{font-size:15px;margin:0}.service-number{font-size:30px;color:var(--sky);display:block;line-height:1.3;margin-bottom:23px}.service-grid .service-contact{background:var(--navy);display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.service-contact p{color:#c9dfef}.service-contact h3{font-size:26px;color:white;margin-top:10px}.contact-banner{padding:56px 0;background:var(--navy)}.contact-banner>.wrap{display:flex;justify-content:space-between;gap:40px;align-items:center}.contact-banner h2{color:white;font-size:30px;margin-bottom:13px}.contact-banner p{color:#d3e2ef;margin-bottom:0}.contact-banner .eyebrow{color:#9cd5f0;margin-bottom:12px;font-size:12px}footer{background:#f4f7fa;padding-top:62px}.footer-grid{display:grid;grid-template-columns:1.2fr .6fr 1.5fr;gap:55px;padding-bottom:40px}.footer-grid p,.footer-grid a{font-size:14px}.footer-grid h3{font-size:15px;color:var(--navy);margin:0 0 21px}.footer-grid>div>a:not(.brand){display:block;margin-bottom:7px}.footer-grid .brand{margin-bottom:18px}.copyright{border-top:1px solid var(--line);padding:21px 0;display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}.quick-contact{position:fixed;right:18px;bottom:25px;z-index:40;display:grid;gap:12px}.quick-contact a{display:grid;place-items:center;width:49px;height:49px;border-radius:50%;background:#087bd3;color:white;border:3px solid white;box-shadow:0 2px 15px #15365f22;font-size:14px;font-weight:bold}.quick-contact a:last-child{background:var(--navy);font-size:24px}.skip{position:fixed;top:-80px;z-index:100;background:white;padding:15px}.skip:focus{top:0}:focus-visible{outline:3px solid var(--sky);outline-offset:5px}.page-title{padding:55px 0;background:var(--pale);border-bottom:1px solid var(--line)}.page-title h1{font-size:40px;color:var(--navy);margin:12px 0}.breadcrumb{font-size:13px;color:var(--muted)}.page-title p{max-width:760px;margin-bottom:0}.prose{max-width:880px;margin:auto}.prose p{white-space:pre-line}.prose img{height:auto;max-width:100%}.prose h2{font-size:27px;margin-top:35px}.prose h3{margin-top:25px}.prose table{display:block;overflow:auto;border-collapse:collapse;max-width:100%}.prose td,.prose th{padding:10px;border:1px solid var(--line)}.product-list,.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:27px}.product-item,.news-item{border:1px solid var(--line);background:white;overflow:hidden}.product-item img{height:235px;object-fit:contain;width:100%;padding:16px}.product-item .card-body,.news-item .card-body{padding:24px}.product-item h2,.news-item h2{font-size:19px;line-height:1.5;margin:0 0 12px}.product-item p,.news-item p{font-size:14px;margin-bottom:12px}.news-item img{width:100%;height:220px;object-fit:cover}.news-item time{font-size:12px;color:var(--muted)}.category-links{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:35px}.category-links a{border:1px solid var(--line);padding:8px 16px;font-size:14px}.category-links a:hover{background:var(--navy);color:white}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px}.contact-card{border-bottom:1px solid var(--line);padding:0 0 24px;margin-bottom:24px}.contact-card h2{font-size:22px;margin-bottom:12px}.contact-card p{margin-bottom:12px}.contact-panel{background:var(--pale);padding:40px;align-self:start}.contact-panel .button{margin:10px 10px 0 0}.detail-main{display:grid;grid-template-columns:1fr 1fr;gap:50px;margin-bottom:50px}.detail-main>img{width:100%;max-height:420px;object-fit:contain}.detail-main h1{font-size:32px;color:var(--navy)}
@media(min-width:1500px){.hero{height:630px}.hero-content{padding-top:125px}}@media(max-width:1050px){.header-phone{display:none}nav{gap:24px}.intro{gap:35px}.partner-grid{grid-template-columns:repeat(4,1fr)}.footer-grid{gap:25px}.header{height:85px}}@media(max-width:720px){.wrap{width:calc(100% - 36px)}.topbar{font-size:11px}.topbar a,.topbar .hours{display:none}.topbar .wrap{justify-content:center;min-height:30px}.topbar span:first-child{margin:0}.header{height:76px;justify-content:space-between}.brand img{width:46px;height:53px}.brand b{font-size:21px}.brand small{font-size:9px}.menu-toggle{display:block;background:none;border:1px solid var(--line);color:var(--navy);font-size:24px;line-height:1;padding:8px 10px}header nav{display:none;position:absolute;top:76px;left:0;right:0;background:#fff;padding:10px 24px;box-shadow:0 10px 15px #1232}header nav.open{display:flex;flex-direction:column;gap:0;align-items:stretch}header nav a{padding:13px 0}.hero{height:535px}.hero-content{padding-top:72px}.hero h1{font-size:38px;letter-spacing:-.8px}.hero p:not(.eyebrow){font-size:16px}.hero-bottom>span{font-size:9px;max-width:180px;line-height:1.7}.hero-bottom{bottom:20px}.slider-controls{gap:10px}.hero:after{display:none!important;background:none!important}.section{padding-top:55px;padding-bottom:55px}.intro{grid-template-columns:1fr;gap:35px}.intro-photos{height:335px;margin:0}.photo-main{height:285px}.photo-small{height:160px}.photo-label{font-size:9px;padding:15px}.photo-label b{font-size:13px}h2{font-size:29px}.section-heading h2{font-size:24px}.category-grid{grid-template-columns:1fr 1fr;gap:14px}.category,.category:nth-child(-n+2){grid-column:auto}.category:first-child{grid-column:span 2}.category img,.category:nth-child(-n+2) img{height:165px;padding:10px}.category:first-child img{height:225px}.category>div{padding:15px}.category h3{font-size:15px}.category p{font-size:13px}.category span{font-size:12px}.partner-grid{gap:20px}.partner-grid img{height:48px}.service-grid{grid-template-columns:1fr}.service-grid article{padding:25px}.service-number{margin-bottom:12px}.contact-banner>.wrap{display:block}.contact-banner .button{margin-top:25px}.contact-banner h2{font-size:26px}.footer-grid{grid-template-columns:1fr;gap:30px}.copyright{display:block;padding-right:40px}.copyright a{display:block;margin-top:8px}.quick-contact{right:10px;bottom:15px}.quick-contact a{width:44px;height:44px}.product-list,.news-grid,.contact-grid,.detail-main{grid-template-columns:1fr}.page-title{padding:35px 0}.page-title h1{font-size:31px}.contact-panel{padding:25px}.prose{overflow-wrap:anywhere}.product-item img{height:250px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
/* Refined industrial brand system */
:root{--navy:#173956;--blue:#315878;--sky:#178fc5;--pale:#f5f8fa;--ink:#20364a;--muted:#627383}body{font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}h1,h2{letter-spacing:-1px}header{box-shadow:0 1px 0 #17395614}.topbar{background:#102e48}.header{height:94px;gap:26px}.header-quote{padding:13px 17px;white-space:nowrap;font-size:13px;border-radius:4px}nav{gap:23px}nav a{font-size:13px;position:relative}nav a[aria-current]:after{content:'';position:absolute;bottom:20px;height:2px;background:var(--sky);left:0;right:0}.brand small{letter-spacing:2.6px}.hero{height:610px}.hero-content{padding-top:118px}.hero h1{font-size:58px;line-height:1.18;letter-spacing:-1.8px;margin-bottom:26px}.hero h1 em{font-style:normal;color:#b5dced}.hero:after{display:none!important;background:none!important}.hero .eyebrow{font-size:12px;letter-spacing:2.8px}.hero p:not(.eyebrow){font-size:17px}.hero-actions{display:flex;gap:25px;align-items:center}.hero-secondary{font-size:14px;border-bottom:1px solid #ffffff70;padding:8px 0}.button{border-radius:4px;padding:14px 23px}.value-strip{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line);padding:30px 0}.value-strip>div{padding:0 28px;border-right:1px solid var(--line)}.value-strip>div:first-child{padding-left:0}.value-strip>div:last-child{border:0}.value-strip b{font-size:16px;display:block}.value-strip span{font-size:13px;color:var(--muted)}.section{padding-top:96px;padding-bottom:96px}.intro h2{font-size:39px}.intro-photos{height:460px}.photo-main{height:405px;width:87%;border-radius:4px}.photo-small{height:210px;border-radius:4px}.photo-label{background:#173956;border-radius:0 0 0 4px}.intro p{line-height:1.9}.eyebrow{text-transform:uppercase;font-size:12px;letter-spacing:2px}.section-heading .eyebrow{text-transform:uppercase;font-size:12px;letter-spacing:2px}.section-heading h2{font-size:32px;letter-spacing:-.7px}.section-heading:after{height:2px;width:36px;margin-top:22px}.category{border-radius:6px;overflow:hidden;border-color:#e4ebf0;box-shadow:0 5px 20px #16365f03}.category>div{padding:23px 27px}.category img{transition:transform .35s}.category:hover img{transform:scale(1.025)}.category h3{font-size:18px;text-transform:none}.category>div span{display:inline-block;margin-top:5px}.partner-grid{padding-top:10px}.service-grid{gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}.service-grid article{border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:35px;background:transparent}.service-number{font-size:15px;border-bottom:1px solid #b5d1e0;padding-bottom:20px;color:var(--sky);font-weight:700;letter-spacing:2px}.service-grid h3{font-size:21px}.service-grid p{line-height:1.85}.news-item,.product-item{border-radius:6px;border-color:#e3eaf0;transition:box-shadow .2s}.news-item:hover,.product-item:hover{box-shadow:0 10px 35px #17395612}.news-item .text-link{border:0}.contact-banner{background:#173956;padding:70px 0}.contact-banner h2{font-size:36px}.footer-grid{padding-bottom:60px}.quick-contact{justify-items:end}.quick-contact .floating-quote{border:1px solid #ffffff60;border-radius:4px;background:var(--navy);color:white;font-size:13px;font-weight:700;padding:12px 17px;box-shadow:0 5px 20px #0c233c22}.floating-quote span{margin-left:12px}dialog{border:0;padding:0;width:min(940px,calc(100% - 36px));max-height:calc(100dvh - 48px);border-radius:10px;box-shadow:0 25px 100px #06182e55;overflow:auto;color:var(--ink)}dialog[open]{display:grid;grid-template-columns: .8fr 1.3fr}dialog::backdrop{background:#071c32a6;backdrop-filter:blur(5px)}body:has(dialog[open]){overflow:hidden}.dialog-close{position:absolute;right:14px;top:12px;border:0;background:#eaf0f5;border-radius:50%;font-size:25px;width:34px;height:34px;line-height:1;color:var(--navy);z-index:1}.quote-aside{background:var(--navy);padding:45px 32px;color:#fff;display:flex;flex-direction:column}.quote-aside h2{font-size:34px;color:white;margin-top:18px}.quote-aside .eyebrow{color:#aad8ec;font-size:10px;letter-spacing:1.5px}.quote-aside p{font-size:14px;color:#c6d8e5;line-height:1.85}.quote-steps{margin:22px 0 30px}.quote-steps p{display:flex;gap:13px;align-items:center;margin:0;padding:14px 0;border-bottom:1px solid #ffffff20;font-size:13px}.quote-steps span{color:#9ed8f0;font-size:12px}.quote-aside>a{margin-top:auto}.quote-aside small{display:block;color:#aac4d6;font-size:12px}.quote-aside b{display:block;font-size:25px}.quote-main{padding:39px 35px 25px}.quote-main .eyebrow{font-size:10px;margin:0 0 7px}.quote-main h2{font-size:29px;margin:0 0 9px}.quote-main>p:not(.eyebrow){font-size:14px;line-height:1.6;margin-bottom:23px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.form-grid label{font-size:13px;font-weight:700;line-height:1.5;display:block}.form-grid label>span{color:#bc4141}.form-grid .full{grid-column:1/-1}.form-grid input,.form-grid select,.form-grid textarea{display:block;margin-top:6px;width:100%;font:400 14px/1.5 Arial,sans-serif;color:var(--ink);padding:11px 12px;background:#fff;border:1px solid #cfdbe4;border-radius:4px;min-height:44px}.form-grid input::placeholder,.form-grid textarea::placeholder{color:#81909d}.form-grid textarea{resize:vertical}.form-note{font-size:11px;line-height:1.6;margin:15px 0}.quote-submit{width:100%;justify-content:space-between}.delivery-note{font-size:11px;line-height:1.6;margin:10px 0 0}.quote-main #quote-status{font-size:13px;margin:12px 0 0;color:var(--blue)}
@media(max-width:1100px){.header{gap:18px}nav{gap:16px}.header-quote{font-size:12px;padding:12px}.header-quote span{display:none}.brand{min-width:175px}.hero h1{font-size:51px}}@media(max-width:850px){.header-quote{display:none}.quote-aside{padding:40px 23px}.quote-main{padding:40px 25px 24px}}@media(max-width:720px){.header{height:76px}.hero{height:560px}.hero-content{padding-top:75px}.hero h1{font-size:39px;letter-spacing:-1.1px;line-height:1.24}.hero-actions{align-items:flex-start;gap:19px;flex-direction:column}.hero-secondary{font-size:13px}.hero .eyebrow{font-size:10px;letter-spacing:2px}.hero p:not(.eyebrow){font-size:16px}.value-strip{grid-template-columns:1fr;padding:14px 0}.value-strip>div,.value-strip>div:first-child{padding:13px 0;border-right:0;display:flex;justify-content:space-between;align-items:center;gap:15px}.value-strip b{font-size:13px}.value-strip span{font-size:11px;text-align:right}.section{padding-top:62px;padding-bottom:62px}.intro h2{font-size:30px}.intro-photos{height:345px}.photo-main{height:300px}.photo-small{height:165px}.section-heading h2{font-size:25px}.category>div{padding:17px}.category h3{font-size:16px}.service-grid article{padding:27px}.service-number{padding-bottom:12px}.contact-banner{padding:50px 0}.contact-banner h2{font-size:29px}.quick-contact .floating-quote{padding:10px 12px;font-size:12px}.quick-contact{gap:8px}.quick-contact a{width:40px;height:40px}.floating-quote span{margin-left:7px}dialog[open]{display:block}dialog{width:calc(100% - 24px);max-height:calc(100dvh - 24px);border-radius:8px}.quote-aside{display:none}.quote-main{padding:32px 22px 22px}.quote-main h2{font-size:26px}.quote-main>p:not(.eyebrow){font-size:13px}.form-grid{gap:13px}.form-grid input,.form-grid textarea,.form-grid select{font-size:16px}.form-grid label{font-size:12px}.delivery-note{font-size:12px}.form-note{font-size:12px}.dialog-close{top:10px;right:10px}}@media(max-width:380px){.form-grid{grid-template-columns:1fr}.hero h1{font-size:35px}}
#quote-review{margin-top:20px;padding:20px;background:var(--pale);border:1px solid var(--line);border-radius:4px}#quote-review[hidden]{display:none}#quote-review h3{font-size:17px;margin-bottom:13px}#quote-review dl{display:grid;grid-template-columns:105px 1fr;gap:8px;font-size:13px;margin:0}#quote-review dt{color:var(--muted)}#quote-review dd{margin:0;overflow-wrap:anywhere;white-space:pre-wrap}#quote-review p{font-size:12px;margin:15px 0 0}#edit-quote{background:none;border:0;border-bottom:1px solid var(--navy);padding:0 0 4px}
/* Animated quick-contact cluster */
.quick-contact{gap:16px;right:23px;bottom:28px}
.quick-contact .floating-quote{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(115deg,#173956 5%,#126b9b 65%,#159bd0);border:1px solid #83d8f8;border-radius:10px;padding:16px 20px;font-size:14px;box-shadow:0 8px 25px #123c6150;animation:quote-breathe 4.5s ease-in-out infinite;transition:transform .2s,box-shadow .2s}
.quick-contact .floating-quote:before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:#a8e8ff;margin-right:10px;box-shadow:0 0 0 4px #a8e8ff20;vertical-align:1px}
.quick-contact .floating-quote:after{content:'';position:absolute;inset:-70% auto -70% -60%;width:35%;transform:rotate(24deg);background:linear-gradient(90deg,transparent,#ffffff28,transparent);animation:quote-shine 7s ease-in-out infinite;pointer-events:none}
.quick-contact .floating-quote span{display:inline-block;margin-left:12px;font-size:18px;transition:transform .2s}
.quick-contact .floating-quote:hover,.quick-contact .floating-quote:focus-visible{transform:translateY(-4px);box-shadow:0 12px 30px #123c6160;animation:none}
.quick-contact .floating-quote:hover span{transform:translate(2px,-2px)}
.quick-contact a{position:relative;width:54px;height:54px;border:4px solid white;box-shadow:0 5px 18px #15365f26;transition:transform .2s,box-shadow .2s}
.quick-contact a:before{content:'';position:absolute;inset:-7px;border:2px solid #159bd05c;border-radius:50%;animation:contact-ring 3.5s ease-out infinite;pointer-events:none}
.quick-contact a:last-child:before{border-color:#24496f55;animation-delay:1.7s}
.quick-contact a:hover,.quick-contact a:focus-visible{transform:translateY(-3px) scale(1.07);box-shadow:0 8px 24px #15365f45}
.quick-contact a:after{content:attr(aria-label);position:absolute;right:calc(100% + 15px);top:50%;transform:translate(5px,-50%);white-space:nowrap;background:#173956;color:#fff;padding:7px 12px;border-radius:6px;font:500 12px/1.5 Arial,sans-serif;opacity:0;visibility:hidden;transition:.2s;pointer-events:none}
.quick-contact a:hover:after,.quick-contact a:focus-visible:after{opacity:1;visibility:visible;transform:translate(0,-50%)}
@keyframes quote-breathe{0%,100%{box-shadow:0 8px 25px #123c6140,0 0 0 0 #1799dc18}50%{box-shadow:0 10px 30px #126b9b60,0 0 0 6px #1799dc08}}
@keyframes quote-shine{0%,65%{left:-60%}85%,100%{left:140%}}
@keyframes contact-ring{0%{transform:scale(.9);opacity:.65}65%,100%{transform:scale(1.27);opacity:0}}
body:has(dialog[open]) .quick-contact{visibility:hidden}
@media(max-width:720px){.quick-contact{right:15px;bottom:20px;gap:13px}.quick-contact .floating-quote{font-size:12px;padding:12px 14px;border-radius:8px}.quick-contact .floating-quote:before{width:6px;height:6px;margin-right:8px}.quick-contact .floating-quote span{font-size:15px;margin-left:8px}.quick-contact a{width:46px;height:46px}.quick-contact a:after{display:none}}
@media(prefers-reduced-motion:reduce){.quick-contact .floating-quote,.quick-contact .floating-quote:after,.quick-contact a:before{animation:none}.quick-contact a:before{opacity:.4}.quick-contact .floating-quote:after{display:none}}
/* Art direction: precise industrial editorial */
:root{--navy:#173956;--ink:#18364d;--muted:#62717e;--line:#dbe4eb;--pale:#f3f6f8;--sky:#148ec3}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;line-height:1.75;background:#fff}
.wrap{width:min(1200px,calc(100% - 80px))}.topbar{background:#11334e}.topbar .wrap{min-height:32px;font-size:11px;letter-spacing:.2px}.header{height:94px;gap:30px}.brand{min-width:198px}.brand b{font-size:24px;letter-spacing:1px}.brand small{font-size:9px;letter-spacing:2.5px}nav{gap:29px}nav a{font-size:14px;text-transform:uppercase;letter-spacing:0.3px;font-weight:700;padding:33px 0}.header-quote{font-size:12px;padding:12px 17px;border-radius:3px;letter-spacing:0}.button{border-radius:3px;font-size:14px;padding:15px 22px;letter-spacing:0;min-height:50px}.button:hover{transform:translateY(-2px)}.text-link{font-size:14px;border-bottom-color:#abc1ce;padding-bottom:7px}.section{padding-top:104px;padding-bottom:104px}
.editorial-hero{height:640px;background:#f2f6f8;color:var(--navy);overflow:hidden;isolation:isolate}.editorial-hero .hero-images{left:49%;width:51%;height:calc(100% - 58px);top:0;z-index:-1;background:#dbe6eb}.editorial-hero .hero-image{object-position:55% center}.editorial-hero:after{display:none}.editorial-hero .hero-content{padding-top:112px}.editorial-hero .hero-content>.eyebrow{font-size:11px;letter-spacing:2px;color:#48728a;margin-bottom:26px;max-width:46%}.editorial-hero h1{font-size:clamp(40px,4vw,58px);letter-spacing:-2px;line-height:1.16;max-width:49%;margin-bottom:27px}.editorial-hero h1 em{color:#1788b8;font-weight:500}.editorial-hero p:not(.eyebrow){color:var(--muted);font-size:17px;line-height:1.8;max-width:44%;margin-bottom:29px}.editorial-hero .hero-actions{gap:20px;max-width:48%;align-items:flex-start;flex-direction:column}.editorial-hero .button.white{background:var(--navy);color:white}.editorial-hero .button.white:hover{background:#126c98}.editorial-hero .hero-secondary{color:var(--navy);font-size:13px;border-bottom-color:#b4c8d3;padding:0 0 5px}.hero-caption{position:absolute;left:calc(49% + 28px);bottom:86px;padding:19px 23px;background:#ffffffed;border-left:3px solid var(--sky);color:var(--navy);box-shadow:0 5px 25px #17395612}.hero-caption span{display:block;font-size:9px;letter-spacing:1.6px;margin-bottom:6px;color:var(--muted)}.hero-caption strong{font-size:13px;font-weight:650;line-height:1.6;display:block}.editorial-hero .hero-bottom{height:58px;bottom:0;color:var(--muted);font-size:9px;letter-spacing:1.3px}.editorial-hero .slider-controls{color:var(--navy)}.editorial-hero .slider-controls button{border-color:#b8cbd7;color:var(--navy);height:31px;width:31px;font-size:16px}.editorial-hero .slider-controls button:hover{background:#dfeaf0}.value-strip{padding:30px 0}.value-strip>div{padding:0 40px}.value-strip b{font-size:15px;font-weight:600}.value-strip span{font-size:13px}.value-strip>div:before{content:'';float:left;width:3px;height:34px;background:#188cbb;margin:7px 17px 0 0}.intro{grid-template-columns:1fr 1fr;gap:86px}.intro h2{font-size:43px;font-weight:600;letter-spacing:-1.6px;margin-bottom:23px}.intro .intro-lead{font-size:19px;line-height:1.65;color:var(--navy);margin-bottom:18px;font-weight:500}.intro p{font-size:15px;line-height:1.9}.intro-photos{height:460px}.photo-main{height:400px;width:90%;border-radius:2px}.photo-small{right:0;height:205px;width:52%;border:7px solid white;border-radius:0}.photo-label{padding:21px;width:56%;border-radius:0;font-size:9px}.photo-label b{font-size:14px}.section-heading{text-align:left;margin-bottom:44px;display:block;position:relative}.section-heading .eyebrow{font-size:11px;letter-spacing:2px;color:#47809e;margin-bottom:13px}.section-heading h2{font-size:38px;font-weight:600;letter-spacing:-1.2px;margin:0;line-height:1.25}.section-heading:after{width:65px;height:2px;background:#168bbb;margin:22px 0 0}.catalog-section{background:#f2f5f7}.category-grid{gap:24px}.category{border:0;border-radius:3px;background:white;box-shadow:none}.category img{height:210px;padding:23px;object-fit:contain}.category:nth-child(-n+2) img{height:285px;padding:28px}.category>div{border-top:1px solid #edf1f4;padding:23px 27px;position:relative}.category h3{font-size:20px;font-weight:600;margin-bottom:7px}.category p{font-size:14px;margin-bottom:0;padding-right:27px}.category>div>span{font-size:12px;color:#40809e;margin-top:18px}.category:hover{box-shadow:0 14px 30px #17395612;transform:translateY(-3px)}.partner-grid{gap:35px;padding:25px 0 0}.partner-grid img{height:55px;filter:saturate(.8)}.services-section{background:#173956;color:white}.services-section .eyebrow{color:#8fc7e0}.services-section .section-heading h2{color:white}.service-grid{border-color:#ffffff24}.service-grid article{border-color:#ffffff24;padding:33px}.service-number{color:#8fc7e0;border-color:#ffffff26;font-size:12px;padding-bottom:22px;margin-bottom:23px}.service-grid h3{color:white;font-size:21px;font-weight:500}.service-grid p{color:#bed0dd;font-size:14px;line-height:1.8}.service-grid .service-contact{background:#204763}.service-contact h3{font-size:29px}.news-grid{gap:28px}.news-item{border:0;border-radius:2px;box-shadow:none}.news-item img{height:230px;border-radius:2px}.news-item .card-body{padding:22px 0}.news-item time{font-size:11px;color:#5b8299;letter-spacing:.5px}.news-item h2{font-size:21px;font-weight:600;letter-spacing:-.35px;margin:9px 0 12px;line-height:1.45}.news-item p{font-size:14px;line-height:1.75}.news-item:hover{box-shadow:none}.news-item:hover h2{color:#1788b8}.contact-banner{background:#eaf2f6;border-top:1px solid #dce8ef;padding:60px 0}.contact-banner h2{color:var(--navy);font-size:35px;font-weight:600}.contact-banner p{color:var(--muted);font-size:15px}.contact-banner .eyebrow{color:#47768e;font-size:10px}.contact-banner .button.white{color:#fff;background:var(--navy)}footer{background:#fff;padding-top:65px}.footer-grid h3{font-weight:600;font-size:13px}.footer-grid p,.footer-grid a{font-size:13px;line-height:1.85}.copyright{font-size:11px}.page-title{background:#eef4f7;padding:50px 0}.page-title h1{font-weight:600;letter-spacing:-1.3px}.page-title p{font-size:16px}.product-item{box-shadow:none;border-color:#e2e9ee;border-radius:3px}.product-item h2{font-weight:600;letter-spacing:-.2px}.product-item .card-body{padding:24px}.category-links a{border-radius:3px}.prose{max-width:840px}.prose p{line-height:1.95}.quote-main h2{font-weight:600}.quote-aside h2{font-weight:500}.quick-contact{right:19px;gap:14px}.quick-contact .floating-quote{font-size:12px;padding:13px 17px;border-radius:5px;box-shadow:0 6px 20px #123c6130;background:linear-gradient(115deg,#173956,#166b94);animation:quote-breathe 6s ease-in-out infinite}.quick-contact a{width:48px;height:48px}.quick-contact a:before{animation-duration:5s}.quick-contact .floating-quote:after{animation-duration:10s}
@media(min-width:1500px){.editorial-hero{height:675px}.editorial-hero .hero-content{padding-top:128px}}@media(max-width:1100px){.wrap{width:calc(100% - 56px)}.header{gap:20px}.brand{min-width:180px}nav{gap:20px}.header-quote{font-size:11px;padding:10px 12px}.editorial-hero h1{font-size:44px}.intro{gap:40px}.intro h2{font-size:36px}.section-heading h2{font-size:34px}}@media(max-width:850px){.header-quote{display:none}.editorial-hero h1{font-size:37px;letter-spacing:-1.4px}.editorial-hero .hero-content{padding-top:105px}.editorial-hero .hero-content>.eyebrow{font-size:9px}.editorial-hero p:not(.eyebrow){font-size:15px}.editorial-hero .button{font-size:12px;padding:13px 15px}.intro{gap:30px}.intro h2{font-size:32px}.intro-photos{height:390px}.photo-main{height:340px}.photo-small{height:170px}.value-strip>div{padding:0 20px}.value-strip b{font-size:13px}.value-strip span{font-size:11px}}
@media(max-width:720px){.wrap{width:calc(100% - 40px)}.topbar .wrap{font-size:10px}.header{height:76px}.brand b{font-size:22px}.editorial-hero{height:auto;padding-bottom:330px;overflow:hidden}.editorial-hero .hero-content{padding-top:46px;padding-bottom:38px}.editorial-hero .hero-content>.eyebrow{max-width:none;font-size:9px;letter-spacing:1.6px;margin-bottom:20px}.editorial-hero h1{max-width:100%;font-size:40px;letter-spacing:-1.6px;margin-bottom:21px}.editorial-hero p:not(.eyebrow){max-width:100%;font-size:15px;margin-bottom:24px}.editorial-hero .hero-actions{max-width:none;gap:17px}.editorial-hero .button{font-size:13px;padding:13px 19px}.editorial-hero .hero-images{left:0;top:auto;bottom:50px;width:100%;height:280px}.editorial-hero .hero-image{object-position:center 50%}.hero-caption{left:20px;bottom:69px;padding:12px 15px}.hero-caption span{font-size:8px}.hero-caption strong{font-size:11px}.editorial-hero .hero-bottom{height:50px}.hero-bottom>span{max-width:205px;font-size:8px;letter-spacing:.5px}.slider-controls{font-size:10px}.value-strip{padding:13px 0}.value-strip>div,.value-strip>div:first-child{padding:13px 0;display:block;border-bottom:1px solid #e7edf1}.value-strip>div:last-child{border-bottom:0}.value-strip>div:before{height:30px;margin-top:5px}.value-strip b{font-size:14px}.value-strip span{font-size:12px;text-align:left}.section{padding-top:64px;padding-bottom:64px}.intro{display:flex;flex-direction:column-reverse;gap:32px}.intro h2{font-size:35px;letter-spacing:-1.1px}.intro .intro-lead{font-size:18px}.intro p{font-size:15px}.intro-photos{width:100%;height:345px}.photo-main{height:300px}.photo-small{height:160px}.photo-label{font-size:8px;padding:18px 15px}.photo-label b{font-size:12px}.section-heading{margin-bottom:29px}.section-heading .eyebrow{font-size:10px;letter-spacing:1.6px}.section-heading h2{font-size:29px;letter-spacing:-1px}.section-heading:after{margin-top:18px;width:45px}.category-grid{gap:15px;grid-template-columns:1fr 1fr}.category img,.category:nth-child(-n+2) img{height:155px;padding:15px}.category:first-child img{height:220px}.category>div{padding:17px 15px}.category h3{font-size:17px;line-height:1.4}.category p{padding-right:0;font-size:12px}.category>div>span{margin-top:14px;font-size:11px}.partner-grid{gap:22px;padding-top:5px}.partner-grid img{height:40px}.service-grid article{padding:27px}.service-grid h3{font-size:21px}.news-grid{gap:30px}.news-item img{height:220px}.news-item .card-body{padding:18px 0 0}.news-item h2{font-size:22px}.contact-banner{padding:47px 0}.contact-banner h2{font-size:29px}.contact-banner .button{font-size:13px}.quick-contact{right:13px;bottom:18px;gap:12px}.quick-contact .floating-quote{font-size:11px;padding:11px 12px;min-height:0}.quick-contact a{width:43px;height:43px}.quick-contact .floating-quote:before{width:5px;height:5px}.footer-grid{gap:30px}.copyright{padding-right:45px}}
@media(prefers-reduced-motion:reduce){.quick-contact .floating-quote,.quick-contact a:before,.quick-contact .floating-quote:after{animation:none}}
@media(max-width:720px){.copyright{padding-bottom:105px}}
/* Scale the content grid to wide desktop screens instead of retaining a narrow fixed column. */
@media(min-width:1200px){.wrap{width:calc(100% - clamp(80px,10vw,240px));max-width:1680px}.editorial-hero h1{max-width:46%;font-size:clamp(46px,3.3vw,62px)}.editorial-hero .hero-content{padding-top:110px}.editorial-hero .hero-images{left:50%;width:50%}.hero-caption{left:calc(50% + 28px)}.editorial-hero .hero-actions{max-width:46%}.intro{gap:clamp(48px,6vw,110px)}.intro>div:last-child{max-width:620px}}
@media(min-width:1800px){.editorial-hero{height:640px}.editorial-hero .hero-content{padding-top:105px}}
.quote-channel{margin:0 0 21px;padding:0;border:0}.quote-channel legend{font-size:13px;font-weight:600;margin-bottom:10px}.quote-channel>div{display:grid;grid-template-columns:1fr 1fr;gap:12px}.quote-channel label{display:flex;align-items:center;gap:9px;border:1px solid #cfdae3;border-radius:4px;padding:11px 13px;font-size:14px;cursor:pointer;color:var(--muted)}.quote-channel label:has(input:checked){background:#eef6fa;border-color:#238bb9;color:var(--navy);font-weight:600}.quote-channel input{margin:0;accent-color:var(--navy);width:16px;height:16px}.quote-channel label:focus-within{outline:2px solid var(--sky);outline-offset:2px}.form-grid span[hidden]{display:none}
/* Full-width photographic opening requested by the client. */
.editorial-hero{height:clamp(660px,calc(100svh - 126px),980px);min-height:660px;padding:0;background:#102e48;color:white;display:flex;align-items:center}
.editorial-hero .hero-images{inset:0;width:100%;height:100%;z-index:-2}
.editorial-hero .hero-image{object-fit:cover;object-position:center center}
.editorial-hero:after{display:none!important;background:none!important;content:none!important}
.editorial-hero .hero-content{padding-top:30px;padding-bottom:105px}
.editorial-hero .hero-content>.eyebrow{color:#8bd7f5;max-width:none;font-size:12px;margin-bottom:26px}
.editorial-hero h1{color:white;max-width:1100px;font-size:clamp(50px,5.3vw,94px);line-height:1.13;letter-spacing:-2.6px;margin-bottom:28px;font-weight:600}
.editorial-hero h1 em{color:white;font-weight:600}
.editorial-hero p:not(.eyebrow){color:#e0e9ef;max-width:660px;font-size:19px;line-height:1.8;margin-bottom:30px}
.editorial-hero .hero-actions{max-width:none;display:flex;flex-direction:row;align-items:center;gap:27px}
.editorial-hero .button.white{background:#fff;color:#173956}
.editorial-hero .button.white:hover{background:#dff3fc;color:#173956}
.editorial-hero .hero-secondary{color:white;border-color:#ffffff70;font-size:14px}
.editorial-hero .hero-caption{display:none}
.editorial-hero .hero-bottom{height:64px;bottom:15px;color:#d6e5ef}
.editorial-hero .slider-controls{color:white}
.editorial-hero .slider-controls button{color:white;border-color:#ffffff65;width:38px;height:38px}
.editorial-hero .slider-controls button:hover{background:#ffffff25}
@media(max-width:720px){.editorial-hero{height:auto;min-height:calc(100svh - 108px);padding:0;align-items:center}.editorial-hero .hero-images{inset:0;width:100%;height:100%}.editorial-hero .hero-image{object-position:60% center}.editorial-hero:after{display:none!important;background:none!important;content:none!important}.editorial-hero .hero-content{padding-top:65px;padding-bottom:160px}.editorial-hero .hero-content>.eyebrow{font-size:10px;letter-spacing:1.5px;margin-bottom:22px}.editorial-hero h1{font-size:clamp(37px,9.5vw,54px);max-width:100%;letter-spacing:-1.2px;line-height:1.18;margin-bottom:22px}.editorial-hero p:not(.eyebrow){font-size:16px;max-width:100%;margin-bottom:27px}.editorial-hero .hero-actions{flex-direction:column;align-items:flex-start;gap:20px}.editorial-hero .hero-bottom{height:48px;bottom:83px}.editorial-hero .hero-bottom>span{max-width:185px;font-size:8px}.editorial-hero .slider-controls button{width:30px;height:30px}}
/* Softer surfaces and comfortable contrast. */
:root{--navy:#284c64;--ink:#2d4758;--muted:#6a7c86;--pale:#edf2f3;--line:#dce5e8;--sky:#428ca7}body{background:#f2f5f5}header{background:#f7f9f8;box-shadow:0 2px 16px #25465807}.topbar{background:#294d63}.category,.product-item,.news-item{background:#f8faf9;border-radius:14px;overflow:hidden;border:1px solid #e0e8e9}.category:hover,.product-item:hover{box-shadow:0 12px 30px #284c6410}.catalog-section{background:#eaf0f1}.intro,.section.wrap{background:transparent}.button,.header-quote{border-radius:9px}.editorial-hero .button.white{background:#eaf2f3;color:#284c64}.photo-main,.photo-small{border-radius:14px}.photo-small{border-color:#f2f5f5}.photo-label{border-radius:0 0 0 14px;background:#365b70}.services-section{background:#34586d}.service-grid article{border-color:#ffffff1c}.service-grid .service-contact{background:#406579}.service-grid{border-color:#ffffff1c;border-radius:14px;overflow:hidden}.news-item .card-body{padding:22px}.contact-panel{background:#e8f0f1;border-radius:14px}.page-title{background:#e9f0f1}.editorial-hero:after{display:none!important;background:none!important;content:none!important}.quote-main{background:#f5f8f7}.quote-aside{background:#34586d}.form-grid input,.form-grid select,.form-grid textarea{background:#fbfcfb;border-radius:8px}.quote-channel label{border-radius:8px}.quick-contact .floating-quote{background:linear-gradient(115deg,#34586d,#387b96);border-color:#a5c9d7}.prose img{border-radius:10px}.category-links a{background:#f8faf9;border-radius:8px}@media(max-width:720px){.quick-contact{background:#edf3f2ed}.news-item .card-body{padding:20px}.form-grid input,.form-grid textarea,.form-grid select{background:#fbfcfb}}
.partner-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:42px 54px;padding:30px 0 10px;align-items:center;justify-items:center}
.partner-grid img{width:100%;max-width:230px;height:82px;object-fit:contain;filter:none;transition:transform .25s ease}
.partner-grid img:hover{transform:scale(1.06)}
@media(max-width:900px){.partner-grid{grid-template-columns:repeat(3,1fr);gap:30px}.partner-grid img{height:68px;max-width:190px}}
@media(max-width:600px){.partner-grid{grid-template-columns:repeat(2,1fr);gap:24px}.partner-grid img{height:58px;max-width:160px}}
/* Floating contact wrapper */
.quick-contact{pointer-events:none!important;right:18px!important;bottom:18px!important;gap:9px!important;z-index:9999;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:transparent!important;border:none!important;box-shadow:none!important}
.quick-contact>*{pointer-events:auto!important}
.editorial-hero .hero-bottom{z-index:30!important;pointer-events:none}
.editorial-hero .hero-bottom>*{pointer-events:auto}
.editorial-hero .slider-controls{position:relative;z-index:35;pointer-events:auto!important;margin-right:175px}
.editorial-hero .slider-controls button{cursor:pointer!important;pointer-events:auto!important;position:relative;z-index:36;width:38px!important;height:38px!important;background:rgba(15,38,58,.32)!important;backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.55)!important;transition:background .2s,transform .2s}
.editorial-hero .slider-controls button:hover{background:rgba(255,255,255,.28)!important;transform:scale(1.08)}
@media(max-width:720px){
  .editorial-hero .slider-controls{margin-right:0}
}
/* Header Distributor Badge (tanvietref.com.vn style) */
.distributor-badge{display:inline-flex;align-items:center;gap:11px;padding:9px 16px;background:#eef4fa;border:1px solid #d5e2f0;border-radius:14px;flex-shrink:0;box-shadow:0 1px 3px rgba(31,78,121,.04)}
.distributor-badge .dist-check{color:#4b6d8e;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.distributor-badge strong{display:block;color:#21517a;font-size:13px;font-weight:800;letter-spacing:.25px;line-height:1.25}
.distributor-badge span{display:block;color:#4b6d8e;font-size:11px;font-weight:500;letter-spacing:.2px;margin-top:2px;white-space:nowrap}
@media(max-width:1180px){.distributor-badge{padding:7px 12px;gap:8px}.distributor-badge strong{font-size:11.5px}.distributor-badge span{font-size:10px}}
@media(max-width:960px){.distributor-badge{display:none}}
/* Enlarged, Transparent & Crisp Brand Logo in Header */
.header{height:104px!important}
.brand{display:inline-flex!important;align-items:center!important;gap:14px!important;min-width:228px!important}
.brand img{width:70px!important;height:74px!important;object-fit:contain!important;background:transparent!important;border:0!important;padding:0!important;box-shadow:none!important;image-rendering:-webkit-optimize-contrast}
.brand b{font-size:27px!important;font-weight:800!important;letter-spacing:.6px!important;line-height:1.15!important;color:#1c3d5a!important}
.brand small{font-size:10.5px!important;font-weight:600!important;letter-spacing:.3px!important;margin-top:3px!important;color:#386b94!important;white-space:nowrap}
@media(max-width:720px){
  .header{height:82px!important}
  .brand{min-width:0!important;gap:10px!important}
  .brand img{width:54px!important;height:58px!important}
  .brand b{font-size:22px!important}
  .brand small{font-size:9px!important}
}


/* ============================================================
   MEGA DROPDOWN & MOBILE ACCORDION FOR SẢN PHẨM NAVIGATION
   ============================================================ */

/* Default visibility: desktop */
.mobile-only {
  display: none !important;
}
.desktop-only {
  display: flex !important;
}
.mobile-prod-panel {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
}

@media (max-width: 720px) {
  .desktop-only {
    display: none !important;
  }
  .mobile-only {
    display: block !important;
  }
}

/* Desktop Navigation Link & Hover */
.nav-item.has-dropdown.desktop-only {
  position: static;
  display: flex;
  align-items: center;
  height: 100%;
}

.nav-item-head {
  display: inline-flex;
  align-items: center;
  position: relative;
  height: 100%;
}

.nav-item-head .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 35px 0;
  white-space: nowrap;
  color: inherit;
  transition: color 0.2s ease;
}

.nav-item-head .nav-link:hover,
.nav-item.is-active .nav-link,
.nav-item.has-dropdown:hover .nav-link {
  color: var(--sky);
}

.dropdown-caret {
  display: inline-block;
  margin-left: 2px;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), stroke 0.2s;
  vertical-align: middle;
}

.nav-item.has-dropdown:hover .dropdown-caret {
  transform: rotate(180deg);
  stroke: var(--sky);
}

/* Desktop Mega Dropdown Panel */
.mega-dropdown {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  background: #ffffff !important;
  border-top: 1px solid var(--line) !important;
  box-shadow: 0 20px 45px rgba(18, 51, 84, 0.13), 0 4px 14px rgba(0, 0, 0, 0.04) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-8px) !important;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s !important;
  pointer-events: none !important;
  z-index: 1000 !important;
  cursor: default !important;
}

/* Invisible hover bridge to eliminate flicker */
.mega-dropdown::before {
  content: '';
  position: absolute;
  top: -15px;
  left: 0;
  right: 0;
  height: 15px;
  background: transparent;
}

.nav-item.has-dropdown:hover .mega-dropdown,
.nav-item.has-dropdown:focus-within .mega-dropdown {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

/* Clean overrides for mega-dropdown links */
.mega-dropdown a {
  padding: 0 !important;
  text-transform: none !important;
  font-weight: normal !important;
  white-space: normal !important;
  letter-spacing: normal !important;
  color: var(--ink);
  display: flex;
}

.mega-dropdown-inner {
  padding: 24px 0 20px;
}

.mega-dropdown-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  align-items: stretch;
}

.mega-cat-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #ffffff;
  border: 1px solid #e1ebf2;
  border-radius: 12px;
  padding: 18px 16px 16px;
  transition: all 0.22s ease;
  box-shadow: 0 2px 8px rgba(22, 54, 95, 0.03);
}

.mega-cat-col:hover {
  border-color: #92c4e6;
  box-shadow: 0 10px 24px rgba(22, 54, 95, 0.08);
  transform: translateY(-3px);
}

.mega-cat-head {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-bottom: 12px;
  border-bottom: 2px solid #eef4f8;
  margin-bottom: 12px;
}

.mega-cat-badge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.mega-cat-idx {
  font-size: 11px;
  font-weight: 800;
  color: #ffffff;
  background: var(--navy);
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

.mega-cat-count {
  font-size: 11px;
  font-weight: 600;
  color: #386b94;
  background: #edf4f8;
  padding: 2px 8px;
  border-radius: 10px;
}

.mega-cat-title {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: var(--navy) !important;
  line-height: 1.35 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  text-decoration: none !important;
  transition: color 0.15s ease;
}

.mega-cat-title:hover {
  color: var(--sky) !important;
}

.mega-prod-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.mega-prod-link {
  display: flex !important;
  align-items: flex-start !important;
  gap: 7px;
  padding: 7px 8px !important;
  border-radius: 6px;
  color: #2b465b !important;
  font-size: 12.5px !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  transition: all 0.15s ease;
}

.mega-prod-link:hover {
  background: #edf5fa;
  color: var(--sky) !important;
  padding-left: 11px !important;
}

.mega-prod-bullet {
  color: var(--sky);
  font-weight: 800;
  line-height: 1.2;
  flex-shrink: 0;
  font-size: 14px;
}

.mega-prod-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.mega-cat-empty-box {
  background: #f8fafc;
  border: 1px dashed #d5e2eb;
  border-radius: 8px;
  padding: 14px 10px;
  text-align: center;
  margin: 4px 0 10px;
}

.mega-cat-empty-box p {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
  margin: 0 0 8px;
}

.mega-cat-empty-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--sky) !important;
  text-decoration: none !important;
}

.mega-cat-empty-link:hover {
  text-decoration: underline !important;
}

.mega-cat-all {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  margin-top: 12px;
  padding-top: 9px !important;
  border-top: 1px dashed #e1ebf2;
  transition: color 0.15s;
  text-decoration: none !important;
}

.mega-cat-all:hover {
  color: var(--sky) !important;
}

.mega-dropdown-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #e7edf2;
  font-size: 12.5px;
}

.mega-bar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
}

.mega-bar-badge {
  background: var(--navy);
  color: #ffffff;
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
}

.mega-bar-desc {
  font-size: 12px;
}

.mega-bar-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.mega-bar-catalog-link {
  font-weight: 700 !important;
  color: var(--navy) !important;
  font-size: 12.5px !important;
  transition: color 0.15s;
  text-decoration: none !important;
}

.mega-bar-catalog-link:hover {
  color: var(--sky) !important;
}

.mega-bar-btn {
  padding: 8px 16px !important;
  font-size: 12.5px !important;
  border-radius: 6px !important;
  margin: 0 !important;
}

@media (max-width: 1120px) {
  .mega-dropdown-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================================================
   MOBILE ACCORDION FOR PRODUCTS (MƯỢT, GỌN, DỄ THAO TÁC)
   ============================================================ */
@media (max-width: 720px) {
  .mobile-nav-group {
    border-bottom: 1px solid var(--line);
    width: 100%;
  }

  .mobile-nav-header-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    background: transparent;
    border: none;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--navy);
    cursor: pointer;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-nav-group.is-active .mobile-nav-header-btn {
    color: var(--sky);
  }

  .m-nav-right {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .m-total-badge {
    font-size: 11px;
    font-weight: 700;
    color: var(--navy);
    background: #e2edf4;
    padding: 2px 7px;
    border-radius: 10px;
  }

  .m-nav-chevron {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    color: var(--navy);
  }

  .mobile-nav-group.is-open .m-nav-chevron {
    transform: rotate(180deg);
    color: var(--sky);
  }

  .mobile-prod-panel {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, margin 0.2s ease;
    background: #f4f8fb;
    border-radius: 10px;
    margin: 0;
  }

  .mobile-nav-group.is-open .mobile-prod-panel {
    max-height: 3000px;
    opacity: 1;
    margin: 4px 0 14px;
    padding: 10px 10px 12px;
  }

  .m-all-prods-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 11px 14px !important;
    background: #ffffff !important;
    border: 1px solid #cce0ed !important;
    border-radius: 8px !important;
    color: var(--navy) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    margin-bottom: 9px !important;
    box-shadow: 0 2px 6px rgba(22, 54, 95, 0.04);
    text-decoration: none !important;
  }

  .m-all-prods-btn:active {
    background: #e6f1f8 !important;
  }

  .m-all-icon {
    font-size: 15px;
    margin-right: 6px;
  }

  .m-all-arrow {
    color: var(--sky);
    font-weight: 800;
  }

  .m-cats-container {
    display: flex;
    flex-direction: column;
    gap: 7px;
  }

  .m-cat-card {
    background: #ffffff;
    border: 1px solid #e1ebf2;
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.2s;
  }

  .m-cat-card.is-open {
    border-color: #9bc5e2;
  }

  .m-cat-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    -webkit-tap-highlight-color: transparent;
  }

  .m-cat-label {
    display: flex !important;
    align-items: center !important;
    gap: 8px;
    flex: 1;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--navy) !important;
  }

  .m-cat-idx {
    font-size: 10px;
    font-weight: 800;
    color: #fff;
    background: var(--navy);
    padding: 1px 5px;
    border-radius: 3px;
  }

  .m-cat-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .m-cat-badge {
    font-size: 10.5px;
    font-weight: 600;
    color: #386b94;
    background: #edf4f8;
    padding: 1px 6px;
    border-radius: 8px;
  }

  .m-cat-arrow-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #f0f5f9;
    border: none;
    border-radius: 6px;
    color: var(--navy);
    cursor: pointer;
    margin-left: 6px;
    padding: 0;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s;
    -webkit-tap-highlight-color: transparent;
  }

  .m-cat-card.is-open .m-cat-arrow-btn {
    transform: rotate(180deg);
    background: var(--sky);
    color: #fff;
  }

  .m-cat-prods {
    max-height: 0;
    overflow: hidden;
    list-style: none;
    margin: 0;
    padding: 0;
    background: #fafcfe;
    border-top: 1px solid #edf2f6;
    transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .m-cat-card.is-open .m-cat-prods {
    max-height: 800px;
    padding: 5px 0 7px;
  }

  .m-prod-link {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px;
    padding: 9px 14px !important;
    color: #2c4456 !important;
    font-size: 12.5px !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
  }

  .m-prod-link:active {
    background: #eaf3f8 !important;
    color: var(--sky) !important;
  }

  .m-prod-bullet {
    color: var(--sky);
    font-weight: 800;
    font-size: 13px;
    flex-shrink: 0;
  }

  .m-prod-name {
    word-break: break-word;
  }

  .m-cat-viewmore a {
    display: inline-flex !important;
    align-items: center !important;
    padding: 8px 14px 6px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: var(--sky) !important;
    text-decoration: none !important;
  }
}

/* ============================================================
   CONTACT BANNER & FOOTER - MATCHING WEB GỐC (tanvietref.com.vn)
   ============================================================ */

/* 1. Khối Kêu Gọi Báo Giá (Contact Banner) chuẩn web gốc */
.contact-banner {
  position: relative;
  padding: 80px 0 !important;
  background: linear-gradient(90deg, rgba(14, 16, 20, 0.86), rgba(14, 16, 20, 0.86)), url('/assets/work-3.jpg') center/cover no-repeat !important;
  color: #ffffff !important;
  border-top: none !important;
  overflow: hidden;
}

.contact-banner > .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  position: relative;
  z-index: 2;
}

.contact-banner .eyebrow {
  color: #7bc3eb !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  margin-bottom: 12px !important;
}

.contact-banner h2 {
  color: #ffffff !important;
  font-size: 38px !important;
  font-weight: 700 !important;
  letter-spacing: -0.5px !important;
  line-height: 1.25 !important;
  margin-bottom: 12px !important;
}

.contact-banner p {
  color: #e2e2e2 !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
  margin-bottom: 0 !important;
}

.contact-banner .button {
  background: rgba(23, 153, 220, 0.22) !important;
  border: 3px solid rgba(255, 255, 255, 0.82) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  padding: 15px 32px !important;
  border-radius: 6px !important;
  transition: all 0.25s ease !important;
  backdrop-filter: blur(4px);
  white-space: nowrap;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
  min-width: 200px;
  height: 54px;
}

.contact-banner .button:hover {
  background: rgba(47, 95, 147, 0.5) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(23, 153, 220, 0.35);
}

/* 2. Khối Chân Trang (Site Footer) chuẩn web gốc (gradient navy đậm) */
footer {
  position: relative;
  background: linear-gradient(180deg, #11355d, #0b2642) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding-top: 70px !important;
  color: #cbd5e1 !important;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr 1.5fr;
  gap: 55px;
  padding-bottom: 50px;
}

footer h3 {
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  margin: 0 0 22px !important;
}

footer p {
  color: #cbd5e1 !important;
  font-size: 14px !important;
  line-height: 1.8 !important;
  margin-bottom: 10px !important;
}

footer b, footer strong {
  color: #ffffff !important;
  font-weight: 700 !important;
}

footer a:not(.brand):not(.social-btn) {
  color: #cbd5e1 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

footer a:not(.brand):not(.social-btn):hover {
  color: #38bdf8 !important;
}

footer p a {
  display: inline !important;
  margin-bottom: 0 !important;
}

footer .brand {
  margin-bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

footer .brand img {
  background: rgba(255, 255, 255, 0.95) !important;
  border-radius: 10px !important;
  padding: 4px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

footer .brand b {
  color: #ffffff !important;
}

footer .brand small {
  color: #8ec5fc !important;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.footer-social-links {
  display: flex !important;
  gap: 14px !important;
  margin-top: 20px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

.footer-social-links .social-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255, 255, 255, 0.22) !important;
  text-decoration: none !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease, border-color 0.22s ease !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
  position: relative !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

.footer-social-links .social-btn:hover,
.footer-social-links .social-btn:focus-visible {
  transform: translateY(-3px) scale(1.08) !important;
  border-color: #ffffff !important;
}

.footer-social-links .social-btn svg {
  display: block !important;
  pointer-events: none !important;
}

.footer-social-links .social-btn.fb {
  background: #1877f2 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(24, 119, 242, 0.45) !important;
}
.footer-social-links .social-btn.fb:hover {
  box-shadow: 0 8px 22px rgba(24, 119, 242, 0.65) !important;
}

.footer-social-links .social-btn.zalo {
  background: #ffffff !important;
  box-shadow: 0 4px 14px rgba(0, 104, 255, 0.4) !important;
  overflow: hidden !important;
  padding: 4px !important;
}
.footer-social-links .social-btn.zalo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
  border-radius: 50% !important;
}
.footer-social-links .social-btn.zalo:hover {
  box-shadow: 0 8px 22px rgba(0, 104, 255, 0.65) !important;
}

.footer-social-links .social-btn.li {
  background: #0a66c2 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(10, 102, 194, 0.45) !important;
}
.footer-social-links .social-btn.li:hover {
  box-shadow: 0 8px 22px rgba(10, 102, 194, 0.65) !important;
}

.footer-social-links .social-btn.yt {
  background: #ff0000 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(255, 0, 0, 0.45) !important;
}
.footer-social-links .social-btn.yt:hover {
  box-shadow: 0 8px 22px rgba(255, 0, 0, 0.65) !important;
}

.footer-social-links .social-btn.tt {
  background: #000000 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45) !important;
}
.footer-social-links .social-btn.tt:hover {
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.65) !important;
}

@media (min-width: 769px) {
  .footer-social-links .social-btn:after {
    content: attr(aria-label);
    position: absolute;
    bottom: calc(100% + 9px);
    left: 50%;
    transform: translate(-50%, 4px);
    white-space: nowrap;
    background: #0d2235;
    color: #ffffff;
    padding: 5px 10px;
    border-radius: 6px;
    font: 600 11px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    opacity: 0;
    visibility: hidden;
    transition: 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }
  .footer-social-links .social-btn:hover:after,
  .footer-social-links .social-btn:focus-visible:after {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
  }
}

.copyright {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 24px 0 !important;
  color: rgba(255, 255, 255, 0.65) !important;
  font-size: 12.5px !important;
}

.copyright a {
  color: #8ec5fc !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.copyright a:hover {
  color: #ffffff !important;
}

@media (max-width: 720px) {
  .contact-banner {
    padding: 48px 0 !important;
  }
  .contact-banner > .wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  .contact-banner h2 {
    font-size: 28px !important;
  }
  .contact-banner .button {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-bottom: 35px;
  }
}

/* ============================================================
   CATALOG SECTION HEADING (.catalog-section)
   Hierarchy: Dòng danh mục to rõ (chính), dòng phụ đề nhỏ lại
   ============================================================ */
.catalog-section .section-heading {
  margin-bottom: 30px !important;
}

.catalog-section .section-heading .eyebrow {
  font-size: clamp(24px, 2.5vw, 32px) !important;
  font-weight: 800 !important;
  color: var(--navy) !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  line-height: 1.25 !important;
  margin-bottom: 8px !important;
}

.catalog-section .section-heading h2 {
  font-size: 16px !important;
  font-weight: 500 !important;
  color: #556e82 !important;
  letter-spacing: 0 !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

.catalog-section .section-heading:after {
  content: '' !important;
  display: block !important;
  width: 44px !important;
  height: 2px !important;
  background: #168bbb !important;
  margin: 14px 0 0 !important;
}

/* ============================================================
   PARTNERS SECTION HEADING (.partners-section)
   Hierarchy: Dòng tiêu đề to rõ, dòng phụ đề nhỏ
   ============================================================ */
.partners-section .section-heading {
  margin-bottom: 26px !important;
}

.partners-section .section-heading .eyebrow {
  font-size: clamp(24px, 2.5vw, 32px) !important;
  font-weight: 800 !important;
  color: var(--navy) !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  line-height: 1.25 !important;
  margin-bottom: 8px !important;
}

.partners-section .section-heading h2 {
  font-size: 16px !important;
  font-weight: 500 !important;
  color: #556e82 !important;
  letter-spacing: 0 !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

.partners-section .section-heading:after {
  content: '' !important;
  display: block !important;
  width: 44px !important;
  height: 2px !important;
  background: #168bbb !important;
  margin: 14px 0 0 !important;
}

/* ============================================================
   COMPACT & STREAMLINED "GIÁ TRỊ ĐỒNG HÀNH" SECTION (.services-section)
   ============================================================ */
.services-section {
  padding: 42px 0 !important;
  background: linear-gradient(145deg, #173752, #11283d) !important;
}

.services-section .section-heading {
  margin-bottom: 26px !important;
}

.services-section .section-heading .eyebrow {
  font-size: clamp(24px, 2.5vw, 32px) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  line-height: 1.25 !important;
  margin-bottom: 8px !important;
}

.services-section .section-heading h2 {
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #9cc1d9 !important;
  letter-spacing: 0 !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

.services-section .section-heading:after {
  content: '' !important;
  display: block !important;
  width: 44px !important;
  height: 2px !important;
  background: #1799dc !important;
  margin: 14px 0 0 !important;
}

.services-section .service-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: rgba(14, 34, 53, 0.5) !important;
}

.services-section .service-grid article {
  padding: 18px 22px !important;
  background: transparent !important;
  border: 0 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  transition: background 0.2s ease !important;
}

.services-section .service-grid article:nth-child(3n) {
  border-right: 0 !important;
}

.services-section .service-grid article:nth-child(n+4) {
  border-bottom: 0 !important;
}

.services-section .service-grid article:hover {
  background: rgba(255, 255, 255, 0.04) !important;
}

.services-section .service-number {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #70c4ec !important;
  letter-spacing: 1px !important;
  display: inline-block !important;
  margin-bottom: 8px !important;
  padding-bottom: 6px !important;
  border-bottom: 1px solid rgba(112, 196, 236, 0.3) !important;
  width: fit-content !important;
  line-height: 1 !important;
}

.services-section .service-grid h3 {
  font-size: 16.5px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  letter-spacing: -0.2px !important;
  margin: 0 0 7px !important;
  line-height: 1.35 !important;
}

.services-section .service-grid p {
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: #c4d7e6 !important;
  margin: 0 !important;
}

.services-section .service-grid .service-contact {
  background: linear-gradient(135deg, #1d4a73, #153856) !important;
  border: 0 !important;
  padding: 18px 22px !important;
  justify-content: center !important;
}

.services-section .service-contact p {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #9ad4f1 !important;
  letter-spacing: 0.5px !important;
  margin: 0 0 4px !important;
  text-transform: uppercase !important;
}

.services-section .service-contact h3 {
  font-size: 19px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.25 !important;
  margin: 0 0 12px !important;
}

.services-section .service-contact .button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 16px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  min-height: 0 !important;
  background: #ffffff !important;
  color: #12334e !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  transition: all 0.2s ease !important;
}

.services-section .service-contact .button:hover {
  background: #e5f4fb !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

@media (max-width: 900px) {
  .services-section .service-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .services-section .service-grid article:nth-child(3n) {
    border-right: 1px solid rgba(255, 255, 255, 0.09) !important;
  }
  .services-section .service-grid article:nth-child(2n) {
    border-right: 0 !important;
  }
  .services-section .service-grid article:nth-child(n+5) {
    border-bottom: 0 !important;
  }
  .services-section .service-grid article:nth-child(4) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important;
  }
}

@media (max-width: 720px) {
  .services-section {
    padding: 30px 0 !important;
  }
  .services-section .section-heading {
    margin-bottom: 16px !important;
  }
  .services-section .section-heading .eyebrow {
    font-size: clamp(19px, 5.2vw, 22px) !important;
    font-weight: 800 !important;
  }
  .services-section .section-heading h2 {
    font-size: 14px !important;
    font-weight: 400 !important;
  }
  .services-section .service-grid {
    grid-template-columns: 1fr !important;
  }
  .services-section .service-grid article {
    border-right: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important;
    padding: 15px 16px !important;
  }
  .services-section .service-grid article:last-child {
    border-bottom: 0 !important;
  }
  .services-section .service-grid h3 {
    font-size: 15.5px !important;
  }
  .services-section .service-grid p {
    font-size: 12.5px !important;
  }
  .services-section .service-contact h3 {
    font-size: 18px !important;
  }
}

/* ============================================================
   COMPACT & STREAMLINED NEWS SECTION (.news-section & .news-grid)
   ============================================================ */
.news-section {
  padding: 42px 0 !important;
}

.news-section .section-heading {
  margin-bottom: 26px !important;
}

.news-section .section-heading .eyebrow {
  font-size: clamp(24px, 2.5vw, 32px) !important;
  font-weight: 800 !important;
  color: var(--navy) !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  line-height: 1.25 !important;
  margin-bottom: 8px !important;
}

.news-section .section-heading h2 {
  font-size: 16px !important;
  font-weight: 500 !important;
  color: #556e82 !important;
  letter-spacing: 0 !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

.news-section .section-heading:after {
  content: '' !important;
  display: block !important;
  width: 44px !important;
  height: 2px !important;
  background: #178fc5 !important;
  margin: 14px 0 0 !important;
}

.news-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
}

.news-item {
  background: #ffffff !important;
  border: 1px solid #dce6ed !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 8px rgba(22, 54, 95, 0.04) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
  display: flex !important;
  flex-direction: column !important;
}

.news-item > a {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  text-decoration: none !important;
  color: inherit !important;
}

.news-item:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 24px rgba(22, 54, 95, 0.08) !important;
  border-color: #bad3e3 !important;
}

.news-item img {
  width: 100% !important;
  aspect-ratio: var(--news-img-ratio, 16 / 9) !important;
  height: var(--news-img-h, 215px) !important;
  object-fit: var(--news-img-fit, cover) !important;
  object-position: var(--news-img-pos, top center) !important;
  background-color: #f1f5f9;
  border-radius: 0 !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.news-item:hover img {
  transform: scale(1.03) !important;
}

.news-item .card-body {
  padding: 14px 16px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
}

.news-item time {
  font-size: 11px !important;
  color: #6a8294 !important;
  margin-bottom: 6px !important;
  letter-spacing: 0.3px !important;
  display: block !important;
}

.news-item h2 {
  font-size: 15.5px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  margin: 0 0 6px !important;
  color: var(--navy) !important;
  letter-spacing: -0.2px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  transition: color 0.15s ease !important;
}

.news-item:hover h2 {
  color: var(--sky) !important;
}

.news-item p {
  font-size: 12.5px !important;
  line-height: 1.5 !important;
  color: #556b7c !important;
  margin: 0 0 10px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.news-item .text-link {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: var(--sky) !important;
  padding: 0 !important;
  border: 0 !important;
  margin-top: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.news-section > .text-link {
  margin-top: 18px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  border-bottom: 1px solid var(--navy) !important;
  padding-bottom: 3px !important;
  display: inline-flex !important;
}

.news-section > .text-link:hover {
  color: var(--sky) !important;
  border-bottom-color: var(--sky) !important;
}

@media (max-width: 900px) {
  .news-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 600px) {
  .news-section {
    padding: 30px 0 !important;
  }
  .news-section .section-heading {
    margin-bottom: 16px !important;
  }
  .news-section .section-heading .eyebrow {
    font-size: clamp(19px, 5.2vw, 22px) !important;
    font-weight: 800 !important;
  }
  .news-section .section-heading h2 {
    font-size: 14px !important;
    font-weight: 500 !important;
  }
  .news-grid {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
  }
  .news-item img {
    aspect-ratio: var(--news-img-ratio, 16 / 9) !important;
    height: auto !important;
    min-height: 165px !important;
  }
  .news-item .card-body {
    padding: 12px 14px 14px !important;
  }
}

/* ============================================================
   PREMIUM PRODUCT CATALOG & LISTING ENHANCEMENTS
   ============================================================ */

/* Polished Page Title Banner */
.page-title {
  padding: 44px 0 38px !important;
  background: linear-gradient(180deg, #f5f9fc 0%, #e9f1f7 100%) !important;
  border-bottom: 1px solid #dbe6ef !important;
  position: relative !important;
}

.page-title .breadcrumb {
  font-size: 13px !important;
  color: #647d91 !important;
  margin-bottom: 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-weight: 500 !important;
}

.page-title .breadcrumb a,
.breadcrumb a,
nav.breadcrumb a {
  padding: 0 !important;
  margin: 0 !important;
  color: #4a6a82 !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
  text-transform: none !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  line-height: normal !important;
  display: inline !important;
}
.page-title .breadcrumb a::before,
.page-title .breadcrumb a::after,
.breadcrumb a::before,
.breadcrumb a::after {
  display: none !important;
  content: none !important;
}

.page-title .breadcrumb a:hover {
  color: #1799dc !important;
}

.page-title .bc-sep {
  color: #9ab4c7 !important;
  font-size: 11px !important;
}

.page-title .bc-cur {
  color: #16365f !important;
  font-weight: 700 !important;
}

.page-title h1 {
  font-size: 32px !important;
  font-weight: 700 !important;
  color: #16365f !important;
  letter-spacing: -0.6px !important;
  line-height: 1.25 !important;
  margin: 0 0 8px !important;
}

.page-title .page-desc,
.page-title p:not(.breadcrumb) {
  font-size: 14.5px !important;
  color: #597184 !important;
  line-height: 1.6 !important;
  max-width: 760px !important;
  margin: 0 !important;
}

/* Category Filter Pills */
.product-catalog-section {
  padding: 40px 0 60px !important;
}

.category-links {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 30px !important;
  padding: 4px 0 !important;
  border: 0 !important;
}

.cat-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 16px !important;
  background: #ffffff !important;
  border: 1px solid #d4e2ed !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1f4260 !important;
  text-decoration: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 1px 3px rgba(22, 54, 95, 0.04) !important;
  white-space: nowrap !important;
}

.cat-pill:hover {
  border-color: #1799dc !important;
  color: #1799dc !important;
  background: #f3f9fd !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 8px rgba(23, 153, 220, 0.12) !important;
}

.cat-pill.is-active {
  background: #16365f !important;
  color: #ffffff !important;
  border-color: #16365f !important;
  box-shadow: 0 4px 14px rgba(22, 54, 95, 0.22) !important;
}

.cat-count {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 6px !important;
  border-radius: 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  background: #eaf1f7 !important;
  color: #3b5f7b !important;
  transition: all 0.2s ease !important;
}

.cat-pill:hover .cat-count {
  background: #e1edf6 !important;
  color: #1799dc !important;
}

.cat-pill.is-active .cat-count {
  background: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
}

/* Product Cards Grid */
.product-list {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  margin-top: 5px !important;
}

.product-item {
  background: #ffffff !important;
  border: 1px solid #dce6ed !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 10px rgba(18, 51, 84, 0.04) !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

.product-item:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 36px rgba(18, 51, 84, 0.09) !important;
  border-color: #bad3e3 !important;
}

.product-card-link {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  text-decoration: none !important;
  color: inherit !important;
}

.product-thumb {
  position: relative !important;
  height: 225px !important;
  background: #f7fafc !important;
  border-bottom: 1px solid #eef3f7 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 18px !important;
  overflow: hidden !important;
}

.product-thumb-img {
  max-height: 185px !important;
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.product-item:hover .product-thumb-img {
  transform: scale(1.04) !important;
}

.prod-badge {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(4px) !important;
  border: 1px solid #d5e3ed !important;
  color: #1a4267 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
  z-index: 2 !important;
  letter-spacing: 0.2px !important;
}

.product-item .card-body {
  padding: 18px 20px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  flex-grow: 1 !important;
  gap: 14px !important;
}

.card-body-top {
  display: flex !important;
  flex-direction: column !important;
}

.product-item h2 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #16365f !important;
  line-height: 1.35 !important;
  margin: 0 0 8px !important;
  letter-spacing: -0.2px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  transition: color 0.15s ease !important;
}

.product-item:hover h2 {
  color: #1799dc !important;
}

.product-item p {
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: #556c7d !important;
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.card-body-footer {
  margin-top: auto !important;
}

.prod-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding: 9px 14px !important;
  background: #f1f6fa !important;
  border: 1px solid #d9e5ee !important;
  border-radius: 8px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: #16365f !important;
  transition: all 0.2s ease !important;
}

.prod-btn b {
  font-size: 14px !important;
  transition: transform 0.2s ease !important;
}

.product-item:hover .prod-btn {
  background: #16365f !important;
  color: #ffffff !important;
  border-color: #16365f !important;
  box-shadow: 0 3px 10px rgba(22, 54, 95, 0.18) !important;
}

.product-item:hover .prod-btn b {
  transform: translateX(3px) !important;
}

/* Product Detail Page & Catalog Polish (Tan Viet) */
.prod-card-brand {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #1799dc !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  margin-bottom: 4px !important;
  display: inline-block !important;
}

.card-body-price-row {
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  margin: 10px 0 12px !important;
  padding: 6px 12px !important;
  background: #f0f6fa !important;
  border-radius: 6px !important;
  border: 1px solid #d9e6f0 !important;
}

.card-body-price-row .price-label {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #556c7d !important;
}

.card-body-price-row .price-val {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #16365f !important;
}

.product-detail-section {
  padding: 36px 0 60px !important;
}

/* Top Block: Hero Card */
.product-hero-card {
  display: grid !important;
  grid-template-columns: minmax(320px, 460px) 1fr !important;
  gap: 40px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 32px !important;
  box-shadow: 0 4px 20px rgba(15, 34, 58, 0.04) !important;
  align-items: start !important;
}

/* Gallery (Left) */
.product-gallery {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

.gallery-main-frame {
  background: #f8fafc !important;
  border: 1px solid #edf2f7 !important;
  border-radius: 12px !important;
  padding: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 380px !important;
  position: relative !important;
  overflow: hidden !important;
}

.gallery-badge {
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  background: #16365f !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  z-index: 2 !important;
}

.product-hero-img {
  max-height: 340px !important;
  max-width: 100% !important;
  object-fit: contain !important;
  transition: transform 0.3s ease !important;
}

.gallery-main-frame:hover .product-hero-img {
  transform: scale(1.04) !important;
}

.gallery-footer-tag {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 12.5px !important;
  color: #4a6572 !important;
  background: #f1f6f9 !important;
  padding: 9px 14px !important;
  border-radius: 8px !important;
  border: 1px solid #e2eaf0 !important;
}

.gallery-footer-tag svg {
  color: #1799dc !important;
  flex-shrink: 0 !important;
}

/* Info Column (Right) */
.product-info-column {
  display: flex !important;
  flex-direction: column !important;
}

.product-meta-badge-row {
  margin-bottom: 8px !important;
}

.product-category-link {
  color: #1799dc !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}

.product-category-link:hover {
  text-decoration: underline !important;
}

.product-main-title {
  font-size: 26px !important;
  font-weight: 700 !important;
  color: #16365f !important;
  letter-spacing: -0.4px !important;
  line-height: 1.3 !important;
  margin: 0 0 16px 0 !important;
}

.product-meta-specs-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px 20px !important;
  padding: 14px 18px !important;
  background: #f8fafc !important;
  border: 1px solid #e8eef3 !important;
  border-radius: 10px !important;
  margin-bottom: 18px !important;
}

.meta-spec-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13.5px !important;
}

.meta-spec-item .spec-label {
  color: #627d98 !important;
}

.meta-spec-item .spec-value {
  color: #102a43 !important;
  font-weight: 600 !important;
}

.meta-spec-item .spec-status.in-stock {
  color: #16a34a !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.meta-spec-item .status-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #16a34a !important;
  display: inline-block !important;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.2) !important;
}

/* Price Strip - Tan Viet Ice & Navy Palette */
.product-price-strip {
  display: flex !important;
  align-items: baseline !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  padding: 16px 22px !important;
  background: #f0f6fa !important;
  border: 1px solid #d9e6f0 !important;
  border-radius: 10px !important;
  margin-bottom: 22px !important;
}

.product-price-strip .price-title {
  font-size: 13.5px !important;
  color: #16365f !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.product-price-strip .price-highlight {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: #16365f !important;
  letter-spacing: -0.5px !important;
  line-height: 1 !important;
}

.product-price-strip .price-note {
  font-size: 12.5px !important;
  color: #556c7d !important;
  font-style: italic !important;
}

/* CTA Action Buttons - Tan Viet Navy & Cyan Palette */
.product-actions-bar {
  display: flex !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-bottom: 22px !important;
}

.btn-quote-brand,
.btn-quote-red {
  background: linear-gradient(135deg, #16365f, #1e4a78) !important;
  color: #ffffff !important;
  border: none !important;
  padding: 13px 26px !important;
  border-radius: 8px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 4px 14px rgba(22, 54, 95, 0.24) !important;
}

.btn-quote-brand:hover,
.btn-quote-red:hover {
  background: linear-gradient(135deg, #126c98, #1799dc) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(23, 153, 220, 0.35) !important;
}

.btn-hotline-pill {
  background: #ffffff !important;
  color: #16365f !important;
  border: 2px solid #16365f !important;
  padding: 11px 22px !important;
  border-radius: 8px !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: all 0.25s ease !important;
}

.btn-hotline-pill:hover {
  background: #f0f6fa !important;
  color: #1799dc !important;
  border-color: #1799dc !important;
  transform: translateY(-2px) !important;
}

/* Summary Box */
.product-summary-box {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-left: 4px solid #1799dc !important;
  border-radius: 8px !important;
  padding: 16px 20px !important;
  margin-bottom: 0 !important;
}

.summary-box-title {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13.5px !important;
  color: #16365f !important;
  margin-bottom: 6px !important;
}

.summary-box-title svg {
  color: #1799dc !important;
}

.summary-box-content {
  font-size: 13.5px !important;
  line-height: 1.65 !important;
  color: #475569 !important;
  margin: 0 !important;
}

/* ==========================================================================
   SEPARATED PRODUCT DETAIL INFO PANEL (Tan Viet Corporate Palette)
   ========================================================================== */
.product-detail-separated-panel {
  margin-top: 48px !important;
}

.product-tab-head {
  display: flex !important;
  align-items: flex-end !important;
}

.tab-badge-title {
  background: linear-gradient(135deg, #16365f, #1b4975) !important;
  color: #ffffff !important;
  padding: 13px 30px !important;
  border-radius: 8px 8px 0 0 !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  box-shadow: 0 -2px 12px rgba(22, 54, 95, 0.14) !important;
}

.product-tab-body-card {
  border: 1px solid #e2e8f0 !important;
  border-radius: 0 14px 14px 14px !important;
  background: #ffffff !important;
  padding: 36px 40px !important;
  box-shadow: 0 4px 20px rgba(15, 34, 58, 0.04) !important;
}

.product-body-rte table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 20px 0 !important;
  font-size: 14px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

.product-body-rte th {
  background: #f1f5f9 !important;
  padding: 12px 16px !important;
  font-weight: 700 !important;
  text-align: left !important;
  border: 1px solid #e2e8f0 !important;
  color: #1e293b !important;
}

.product-body-rte td {
  padding: 11px 16px !important;
  border: 1px solid #e2e8f0 !important;
  color: #334155 !important;
}

.product-body-rte tr:nth-child(even) {
  background: #f8fafc !important;
}

.product-body-footer-cta {
  margin-top: 36px !important;
  padding-top: 24px !important;
  border-top: 1px dashed #cbd5e1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  flex-wrap: wrap !important;
}

.footer-cta-text b {
  display: block !important;
  font-size: 15.5px !important;
  color: #16365f !important;
  margin-bottom: 4px !important;
}

.footer-cta-text p {
  font-size: 13.5px !important;
  color: #64748b !important;
  margin: 0 !important;
}

/* Related Products */
.related-products-section {
  padding: 20px 0 60px !important;
}

/* Responsive adjustments */
@media (max-width: 960px) {
  .product-list {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px !important;
  }
}

@media (max-width: 860px) {
  .product-hero-card {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 20px !important;
    border-radius: 12px !important;
  }
  .gallery-main-frame {
    min-height: 280px !important;
    padding: 16px !important;
  }
  .product-hero-img {
    max-height: 260px !important;
  }
  .product-main-title {
    font-size: 22px !important;
  }
  .product-detail-separated-panel {
    margin-top: 32px !important;
  }
  .tab-badge-title {
    width: 100% !important;
    justify-content: center !important;
    font-size: 14px !important;
    padding: 11px 16px !important;
  }
  .product-tab-body-card {
    border-radius: 0 0 12px 12px !important;
    padding: 22px 16px !important;
  }
}

@media (max-width: 600px) {
  .product-meta-specs-grid {
    grid-template-columns: 1fr !important;
    padding: 12px 14px !important;
  }
  .product-actions-bar {
    flex-direction: column !important;
  }
  .product-actions-bar .btn-quote-brand,
  .product-actions-bar .btn-quote-red,
  .product-actions-bar .btn-hotline-pill {
    width: 100% !important;
    justify-content: center !important;
  }
  .product-body-footer-cta {
    flex-direction: column !important;
    text-align: center !important;
  }
  .product-body-footer-cta .btn-quote-brand,
  .product-body-footer-cta .btn-quote-red {
    width: 100% !important;
    justify-content: center !important;
  }
}

@media (max-width: 720px) {
  .page-title {
    padding: 32px 0 26px !important;
  }
  .page-title h1 {
    font-size: 25px !important;
  }
  .category-links {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 10px !important;
    margin-bottom: 20px !important;
    scrollbar-width: none !important;
  }
  .category-links::-webkit-scrollbar {
    display: none !important;
  }
  .cat-pill {
    flex-shrink: 0 !important;
    padding: 7px 13px !important;
    font-size: 12px !important;
  }
  .product-list {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .product-thumb {
    height: 195px !important;
  }
}

/* ==========================================================================
   MOTION & ANIMATION SYSTEM (PREMIUM 60FPS INDUSTRIAL MOTION)
   ========================================================================== */

/* 1. Scroll Reading Progress Bar */
.scroll-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, #1799dc 0%, #00b4d8 50%, #16365f 100%);
  z-index: 99999;
  pointer-events: none;
  transition: width 0.1s cubic-bezier(0.2, 0, 0, 1);
  box-shadow: 0 0 10px rgba(23, 153, 220, 0.5);
}

/* 2. Frosted-Glass Sticky Header Interaction */
header {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  transition: background 0.35s ease, box-shadow 0.35s ease, backdrop-filter 0.35s ease, height 0.35s ease;
  will-change: background, box-shadow;
}
header.header-scrolled {
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: 0 4px 24px -2px rgba(18, 60, 97, 0.10) !important;
}

/* 3. Hero Entrance Animations on Load */
@keyframes heroFadeUp {
  0% {
    opacity: 0;
    transform: translateY(32px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes navSlideDown {
  0% {
    opacity: 0;
    transform: translateY(-24px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hero image stands completely still - no zoom in/out effect */
.hero-image,
.hero-image.active {
  animation: none !important;
  transform: none !important;
}

header {
  animation: navSlideDown 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero-content > .eyebrow {
  animation: heroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

.hero-content h1 {
  animation: heroFadeUp 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.22s both;
}

.hero-content p:not(.eyebrow) {
  animation: heroFadeUp 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.36s both;
}

.hero-content .hero-actions {
  animation: heroFadeUp 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
}

.hero-bottom {
  animation: heroFadeIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.65s both;
}

.hero-image.active {
  animation: none !important;
  transform: none !important;
}

/* 4. Hero Animated Scroll Mouse Indicator */
.scroll-indicator {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 40px;
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: 20px;
  z-index: 4;
  display: flex;
  justify-content: center;
  padding-top: 6px;
  pointer-events: none;
  opacity: 0.85;
  transition: opacity 0.4s ease, transform 0.4s ease;
  animation: heroFadeIn 1s cubic-bezier(0.16, 1, 0.3, 1) 0.8s both;
}

.scroll-indicator span {
  width: 4px;
  height: 8px;
  background: #fff;
  border-radius: 2px;
  animation: scrollPulse 1.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.scroll-indicator.is-hidden {
  opacity: 0 !important;
  transform: translateX(-50%) translateY(12px) !important;
}

@keyframes scrollPulse {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  60% {
    transform: translateY(12px);
    opacity: 0;
  }
  100% {
    transform: translateY(12px);
    opacity: 0;
  }
}

@media (max-width: 720px) {
  .scroll-indicator {
    display: none;
  }
}

/* 5. Scroll-Triggered Reveal Animations (IntersectionObserver) */
.js-ready .reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.js-ready .reveal.reveal-up {
  transform: translateY(32px);
}

.js-ready .reveal.reveal-left {
  opacity: 0;
  transform: translateX(-36px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.js-ready .reveal.reveal-right {
  opacity: 0;
  transform: translateX(36px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.js-ready .reveal.reveal-scale {
  opacity: 0;
  transform: scale(0.93);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

/* Triggered State */
.js-ready .reveal.is-revealed,
.js-ready .reveal.reveal-up.is-revealed,
.js-ready .reveal.reveal-left.is-revealed,
.js-ready .reveal.reveal-right.is-revealed {
  opacity: 1;
  transform: translate(0, 0);
}

.js-ready .reveal.reveal-scale.is-revealed {
  opacity: 1;
  transform: scale(1);
}

/* Staggered cascades for grid children */
.js-ready .reveal-stagger > * {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.js-ready .reveal-stagger.is-revealed > * {
  opacity: 1;
  transform: translateY(0);
}

.js-ready .reveal-stagger.is-revealed > *:nth-child(1) { transition-delay: 0.05s; }
.js-ready .reveal-stagger.is-revealed > *:nth-child(2) { transition-delay: 0.13s; }
.js-ready .reveal-stagger.is-revealed > *:nth-child(3) { transition-delay: 0.21s; }
.js-ready .reveal-stagger.is-revealed > *:nth-child(4) { transition-delay: 0.29s; }
.js-ready .reveal-stagger.is-revealed > *:nth-child(5) { transition-delay: 0.37s; }
.js-ready .reveal-stagger.is-revealed > *:nth-child(6) { transition-delay: 0.45s; }
.js-ready .reveal-stagger.is-revealed > *:nth-child(7) { transition-delay: 0.52s; }
.js-ready .reveal-stagger.is-revealed > *:nth-child(8) { transition-delay: 0.58s; }
.js-ready .reveal-stagger.is-revealed > *:nth-child(n+9) { transition-delay: 0.62s; }

/* Dynamic Underline Accent Animation on Section Headings */
.section-heading:after {
  transition: width 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.2s !important;
  will-change: width;
}
.js-ready .section-heading.reveal:after {
  width: 0 !important;
}
.js-ready .section-heading.reveal.is-revealed:after {
  width: 55px !important;
}

/* 6. Card & Micro-Interaction Polish */
.category,
.product-item,
.news-item,
.service-grid article,
.contact-card {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease !important;
  will-change: transform, box-shadow;
}

.category:hover,
.product-item:hover,
.news-item:hover,
.service-grid article:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 36px -8px rgba(18, 60, 97, 0.15) !important;
}

.category img,
.product-thumb-img,
.news-item img {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: transform;
}

.category:hover img,
.product-item:hover .product-thumb-img,
.news-item:hover img {
  transform: scale(1.045) !important;
}

/* Dynamic Interactive Buttons & Arrows */
.button,
.hero-secondary {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, background 0.2s ease, color 0.2s ease !important;
  will-change: transform;
}

.button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(23, 153, 220, 0.28) !important;
}

.button:active {
  transform: scale(0.98) translateY(0) !important;
}

/* Arrow symbols smooth glide */
.button span,
.prod-btn b,
.text-link span {
  display: inline-block !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.button:hover span,
.hero-secondary:hover span {
  transform: translate(3px, -2px) !important;
}

.product-item:hover .prod-btn b,
.text-link:hover span {
  transform: translateX(4px) !important;
}

/* Value strip hover polish */
.value-strip > div {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease;
}
.value-strip > div:hover {
  transform: translateY(-3px);
}

/* Partner Logo Polish */
.partner-grid img {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), filter 0.35s ease !important;
  will-change: transform, filter;
}

.partner-grid img:hover {
  transform: scale(1.08) translateY(-2px) !important;
  filter: saturate(1.1) brightness(1.02) !important;
}

/* Accessibility Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js-ready .reveal,
  .js-ready .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
  }
  .scroll-progress-bar {
    display: none !important;
  }
}

/* ==========================================================================
   LUXURY & ERGONOMIC MOBILE EXPERIENCE (<= 768px)
   Custom engineered for smooth UX, clear visual hierarchy & high conversion
   ========================================================================== */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    -webkit-text-size-adjust: 100% !important;
    padding-bottom: 70px !important;
  }

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

  .section {
    padding-top: 42px !important;
    padding-bottom: 42px !important;
  }

  /* 1. Header & Mobile Menu */
  .topbar {
    min-height: 28px !important;
    font-size: 11px !important;
    letter-spacing: 0.2px !important;
    padding: 4px 0 !important;
  }
  .topbar .wrap {
    justify-content: center !important;
    text-align: center !important;
    gap: 10px !important;
  }

  .header {
    height: 72px !important;
    padding: 0 16px !important;
    position: relative !important;
  }
  .brand {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
  }
  .brand img {
    width: 46px !important;
    height: 48px !important;
    flex-shrink: 0 !important;
  }
  .brand b {
    font-size: 20px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    line-height: 1.15 !important;
    color: #16365f !important;
  }
  .brand small {
    font-size: 8.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px !important;
    color: #24496f !important;
    margin-top: 2px !important;
    white-space: nowrap !important;
  }
  .menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    background: #ffffff !important;
    border: 1.5px solid #dce5ec !important;
    border-radius: 10px !important;
    color: #16365f !important;
    font-size: 22px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    margin-left: auto !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
    transition: background 0.15s, border-color 0.15s, transform 0.15s !important;
  }
  .menu-toggle:active {
    background: #eef4fa !important;
    transform: scale(0.96) !important;
  }

  /* Fixed Navigation Drawer */
  .header nav {
    display: none !important;
  }
  .header nav.open {
    display: flex !important;
    flex-direction: column !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background: #ffffff !important;
    padding: 12px 16px 20px !important;
    border-bottom: 2px solid #dce5ec !important;
    box-shadow: 0 16px 36px rgba(15, 38, 58, 0.15) !important;
    gap: 4px !important;
    z-index: 999 !important;
    margin: 0 !important;
  }
  .header nav a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 13px 14px !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: #1b2f44 !important;
    border-radius: 8px !important;
    border: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
    text-transform: uppercase !important;
    white-space: normal !important;
    letter-spacing: 0.3px !important;
    line-height: 1.4 !important;
    transition: background 0.15s, color 0.15s !important;
  }
  .header nav a:hover,
  .header nav a[aria-current] {
    background: #f0f7fb !important;
    color: #1799dc !important;
  }
  .header nav a::before,
  .header nav a::after {
    display: none !important;
    content: none !important;
  }
  .header nav .nav-dropdown {
    width: 100% !important;
  }
  .header nav .dropdown-menu {
    position: static !important;
    box-shadow: none !important;
    border: 1px solid #e7edf1 !important;
    border-radius: 8px !important;
    padding: 4px 6px !important;
    background: #f8fafc !important;
    margin: 4px 0 8px !important;
    display: none !important;
  }
  .header nav .nav-dropdown.open .dropdown-menu {
    display: block !important;
  }
  .header nav .dropdown-menu a {
    padding: 10px 12px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #334155 !important;
    border-bottom: 1px solid #edf2f7 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
  }
  .header nav .dropdown-menu a:last-child {
    border-bottom: none !important;
  }

  /* 2. Hero Section */
  .hero,
  .editorial-hero {
    height: clamp(165px, 45vw, 420px) !important;
    min-height: 0 !important;
    aspect-ratio: 20 / 9 !important;
    padding: 0 !important;
    display: block !important;
  }
  .hero-content {
    padding-top: 10px !important;
    position: relative !important;
    z-index: 2 !important;
  }
  .hero .eyebrow,
  .editorial-hero .eyebrow {
    font-size: 11px !important;
    letter-spacing: 1.6px !important;
    color: #7dd3fc !important;
    margin-bottom: 12px !important;
    font-weight: 800 !important;
  }
  .hero h1,
  .editorial-hero h1 {
    font-size: 31px !important;
    line-height: 1.25 !important;
    letter-spacing: -0.6px !important;
    margin-bottom: 14px !important;
    font-weight: 800 !important;
    max-width: 100% !important;
  }
  .hero p:not(.eyebrow),
  .editorial-hero p:not(.eyebrow) {
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: #e2e8f0 !important;
    margin-bottom: 24px !important;
    max-width: 100% !important;
  }
  .hero-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .hero-actions .button,
  .hero-actions .hero-secondary {
    width: 100% !important;
    min-height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    text-align: center !important;
    padding: 12px 20px !important;
    box-sizing: border-box !important;
  }
  .hero-actions .button.white {
    background: #ffffff !important;
    color: #16365f !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16) !important;
  }
  .hero-actions .hero-secondary {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(6px) !important;
  }
  .hero-bottom,
  .editorial-hero .hero-bottom {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    margin-top: 28px !important;
    padding-top: 16px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.18) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 10.5px !important;
    letter-spacing: 0.6px !important;
  }
  .hero-bottom > span {
    max-width: 60% !important;
    font-size: 9.5px !important;
    line-height: 1.35 !important;
  }
  .slider-controls {
    gap: 10px !important;
    margin-right: 0 !important;
  }
  .slider-controls button {
    width: 36px !important;
    height: 36px !important;
    font-size: 16px !important;
  }

  /* 3. Value Strip (Hộp xanh chữ trắng nhỏ gọn) */
  .value-strip {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 10px 0 !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: transparent !important;
    border-bottom: 0 !important;
    overflow-x: visible !important;
  }
  .value-strip::-webkit-scrollbar {
    display: none !important;
  }
  .value-strip > div {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: linear-gradient(135deg, #173956 0%, #1e4f78 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    box-shadow: 0 2px 8px rgba(18, 47, 72, 0.12) !important;
    margin: 0 !important;
    min-height: auto !important;
  }
  .value-strip > div::before {
    display: none !important;
  }
  .value-strip .value-box-head {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 0 !important;
    flex-shrink: 0 !important;
  }
  .value-strip .value-badge-icon {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    border-radius: 6px !important;
    background: rgba(23, 153, 220, 0.25) !important;
    color: #68c8f5 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
  }
  .value-strip .value-badge-icon svg {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    flex-shrink: 0 !important;
  }
  .value-strip > div b,
  .value-strip b {
    display: block !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin: 0 !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
  }
  .value-strip > div > span,
  .value-strip span {
    display: block !important;
    font-size: 11px !important;
    color: #9fd2f6 !important;
    line-height: 1.25 !important;
    padding-left: 0 !important;
    margin: 0 !important;
    text-align: right !important;
    white-space: nowrap !important;
  }

  /* 4. Intro Section - Natural Storytelling Layout */
  .intro {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }
  .intro h2 {
    font-size: 26px !important;
    line-height: 1.3 !important;
    letter-spacing: -0.5px !important;
    margin-bottom: 12px !important;
  }
  .intro .intro-lead {
    font-size: 15.5px !important;
    line-height: 1.55 !important;
    color: #16365f !important;
    font-weight: 600 !important;
    margin-bottom: 12px !important;
  }
  .intro p {
    font-size: 14px !important;
    line-height: 1.65 !important;
    color: #475569 !important;
  }
  .intro-photos {
    width: 100% !important;
    height: 250px !important;
    position: relative !important;
    margin: 12px 0 16px !important;
  }
  .photo-main {
    width: 100% !important;
    height: 210px !important;
    object-fit: cover !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
  }
  .photo-small {
    position: absolute !important;
    right: 10px !important;
    bottom: 0 !important;
    width: 44% !important;
    height: 115px !important;
    object-fit: cover !important;
    border-radius: 10px !important;
    border: 3px solid #ffffff !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15) !important;
    z-index: 2 !important;
  }
  .photo-label {
    position: absolute !important;
    left: 10px !important;
    bottom: 46px !important;
    width: auto !important;
    max-width: 52% !important;
    padding: 8px 12px !important;
    background: rgba(22, 54, 95, 0.94) !important;
    backdrop-filter: blur(8px) !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16) !important;
    font-size: 9px !important;
    letter-spacing: 0.5px !important;
    color: #bae6fd !important;
    z-index: 3 !important;
  }
  .photo-label b {
    font-size: 11.5px !important;
    color: #ffffff !important;
    margin-top: 2px !important;
    display: block !important;
  }
  .intro .text-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1799dc !important;
    border-bottom: 1.5px solid #1799dc !important;
    padding-bottom: 4px !important;
    margin-top: 14px !important;
  }

  /* 5. Ergonomic Product Categories: Clean Horizontal Touch Cards */
  .section-heading {
    margin-bottom: 24px !important;
  }
  .section-heading .eyebrow {
    font-size: 11px !important;
    letter-spacing: 1.5px !important;
    margin-bottom: 6px !important;
  }
  .section-heading h2 {
    font-size: 24px !important;
    letter-spacing: -0.4px !important;
    line-height: 1.3 !important;
  }
  .section-heading:after {
    margin: 14px auto 0 !important;
    width: 38px !important;
  }
  /* Synchronized Section Heading Hierarchy for Mobile */
  .catalog-section .section-heading,
  .services-section .section-heading,
  .news-section .section-heading,
  .partners-section .section-heading {
    margin-bottom: 20px !important;
    text-align: center !important;
  }
  .catalog-section .section-heading .eyebrow,
  .news-section .section-heading .eyebrow,
  .partners-section .section-heading .eyebrow {
    font-size: clamp(19px, 5.2vw, 22px) !important;
    font-weight: 800 !important;
    letter-spacing: 0.3px !important;
    margin-bottom: 6px !important;
    color: var(--navy) !important;
    text-transform: uppercase !important;
  }
  .services-section .section-heading .eyebrow {
    font-size: clamp(19px, 5.2vw, 22px) !important;
    font-weight: 800 !important;
    letter-spacing: 0.3px !important;
    margin-bottom: 6px !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
  }
  .catalog-section .section-heading h2,
  .news-section .section-heading h2,
  .partners-section .section-heading h2 {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #556e82 !important;
    line-height: 1.45 !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
  }
  .services-section .section-heading h2 {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #9cc1d9 !important;
    line-height: 1.45 !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
  }
  .catalog-section .section-heading:after,
  .services-section .section-heading:after,
  .news-section .section-heading:after,
  .partners-section .section-heading:after {
    margin: 12px auto 0 !important;
    width: 36px !important;
  }
  /* 5. Ergonomic Product Categories: Modern 2-Column Grid on Mobile */
  .category-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .category,
  .category:nth-child(-n+2) {
    grid-column: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    background: #ffffff !important;
    border: 1px solid #dce5ec !important;
    border-radius: 12px !important;
    padding: 10px !important;
    gap: 8px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
    text-decoration: none !important;
    transform: none !important;
    transition: transform 0.15s ease !important;
  }
  .category:active {
    background: #f8fafc !important;
    transform: scale(0.98) !important;
  }
  .category img,
  .category:first-child img,
  .category:nth-child(-n+2) img {
    width: 100% !important;
    height: 105px !important;
    min-width: 0 !important;
    object-fit: contain !important;
    background: #f3f7fa !important;
    border-radius: 8px !important;
    padding: 6px !important;
    box-sizing: border-box !important;
  }
  .category > div {
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-width: 0 !important;
  }
  .category h3 {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #16365f !important;
    margin: 0 0 3px 0 !important;
    line-height: 1.3 !important;
  }
  .category p {
    font-size: 11px !important;
    color: #5e6e7e !important;
    line-height: 1.35 !important;
    margin: 0 0 6px 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  .category > div > span {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #1799dc !important;
    margin-top: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
  }
  /* The 5th category spans across 2 columns horizontally */
  .category:last-child {
    grid-column: span 2 !important;
    flex-direction: row !important;
    align-items: center !important;
    padding: 10px 12px !important;
    gap: 12px !important;
  }
  .category:last-child img {
    width: 76px !important;
    height: 76px !important;
    min-width: 76px !important;
  }

  /* 6. Partners Grid: Balanced 4-Column Layout (2 Rows of 4) */
  .partner-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
    align-items: center !important;
    padding-top: 6px !important;
  }
  .partner-grid img {
    width: 100% !important;
    height: 44px !important;
    object-fit: contain !important;
    background: #ffffff !important;
    border: 1px solid #dce5ec !important;
    border-radius: 8px !important;
    padding: 5px 6px !important;
    box-sizing: border-box !important;
  }

  /* 7. Services Section */
  .services-section {
    padding: 36px 0 !important;
  }
  .service-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
  }
  .service-grid article {
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 10px !important;
    padding: 14px 16px !important;
    background: rgba(255, 255, 255, 0.06) !important;
  }
  .service-grid article .service-number {
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #63c6f7 !important;
    letter-spacing: 1px !important;
  }
  .service-grid article h3 {
    font-size: 15px !important;
    margin: 4px 0 4px 0 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
  }
  .service-grid article p {
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    margin: 0 !important;
    color: #d2e4f0 !important;
  }
  .service-grid .service-contact {
    background: linear-gradient(135deg, #173956 0%, #1e4f78 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    text-align: center !important;
    padding: 20px 16px !important;
    border-radius: 10px !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18) !important;
  }
  .service-grid .service-contact p {
    font-size: 11.5px !important;
    color: #8bd7f5 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-weight: 700 !important;
    margin-bottom: 4px !important;
  }
  .service-grid .service-contact h3 {
    font-size: 18px !important;
    margin: 4px 0 12px 0 !important;
  }
  .service-grid .service-contact .button {
    width: 100% !important;
    margin-top: 6px !important;
    background: #ffffff !important;
    color: #173956 !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
  }

  /* 8. News Grid */
  .news-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }
  .news-item {
    border-radius: 12px !important;
  }
  .news-item img {
    aspect-ratio: var(--news-img-ratio, 16 / 9) !important;
    height: auto !important;
    min-height: 175px !important;
    object-fit: var(--news-img-fit, cover) !important;
    object-position: var(--news-img-pos, top center) !important;
  }
  .news-item .card-body {
    padding: 14px 16px !important;
  }
  .news-item h2 {
    font-size: 16.5px !important;
    line-height: 1.35 !important;
    margin-bottom: 6px !important;
  }
  .news-item p {
    font-size: 12.5px !important;
    line-height: 1.5 !important;
  }

  /* 9. Contact Banner & Footer */
  .contact-banner {
    padding: 36px 18px !important;
    text-align: center !important;
    border-radius: 14px !important;
    margin: 16px auto !important;
  }
  .contact-banner h2 {
    font-size: 23px !important;
    margin-bottom: 10px !important;
  }
  .contact-banner p {
    font-size: 13.5px !important;
    margin-bottom: 18px !important;
  }
  .contact-banner .button {
    width: 100% !important;
  }
  .footer-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
  }
  .footer-col h3 {
    font-size: 15px !important;
    margin-bottom: 10px !important;
  }
  .footer-col p,
  .footer-col a {
    font-size: 13px !important;
    line-height: 1.6 !important;
  }
  .copyright {
    padding: 20px 0 34px !important;
    text-align: center !important;
    font-size: 11.5px !important;
    padding-right: 0 !important;
    padding-bottom: 34px !important;
  }

  /* 10. Non-intrusive Ergonomic Floating FAB Cluster */
  .quick-contact {
    position: fixed !important;
    right: 14px !important;
    bottom: 18px !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    display: flex !important;
    flex-direction: column-reverse !important;
    align-items: flex-end !important;
    gap: 9px !important;
    z-index: 9999 !important;
    pointer-events: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .quick-contact > * {
    pointer-events: auto !important;
  }
  .quick-fab {
    width: 42px !important;
    height: 42px !important;
  }
  .fab-zalo img {
    width: 24px !important;
    height: 24px !important;
  }
  .fab-quote {
    height: 38px !important;
    padding: 0 14px 0 11px !important;
    font-size: 12.5px !important;
  }

  /* 11. Page Title & Breadcrumbs */
  .page-title {
    padding: 24px 0 20px !important;
  }
  .page-title h1 {
    font-size: 25px !important;
    letter-spacing: -0.5px !important;
    margin: 8px 0 6px !important;
  }
  .page-title .breadcrumb,
  nav.breadcrumb {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    margin-bottom: 6px !important;
    font-size: 12px !important;
  }
  .page-title .breadcrumb a,
  nav.breadcrumb a {
    padding: 0 !important;
    margin: 0 !important;
    font-size: 12px !important;
    text-transform: none !important;
    border: none !important;
    display: inline !important;
  }
  .page-title .page-desc {
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin: 4px 0 0 !important;
  }

  /* 12. Category Filter Pills (Horizontal Scroll Snap Rail) */
  .category-links {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 8px !important;
    padding: 6px 16px 14px !important;
    margin: 0 -16px 16px !important;
    scrollbar-width: none !important;
  }
  .category-links::-webkit-scrollbar {
    display: none !important;
  }
  .category-links a,
  .category-links .cat-pill {
    flex: 0 0 auto !important;
    scroll-snap-align: start !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  /* 13. Product List on Mobile */
  .product-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }
  .product-item {
    border-radius: 14px !important;
  }
  .product-item img {
    height: 190px !important;
    object-fit: contain !important;
    padding: 14px !important;
  }
  .product-item .card-body {
    padding: 16px !important;
  }
  .product-item h2 {
    font-size: 17px !important;
    margin-bottom: 8px !important;
  }
  .product-item p {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  /* 14. Contact Page Grid & Detail */
  .contact-grid,
  .detail-main {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }
  .contact-panel {
    padding: 24px 18px !important;
    border-radius: 14px !important;
  }
  .detail-main > img {
    max-height: 260px !important;
  }
  .detail-main h1 {
    font-size: 24px !important;
  }
}

/* Desktop & Tablet Category Grid - Balanced Horizontal Layout */
@media (min-width: 992px) {
  .category-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 16px !important;
    align-items: stretch !important;
  }
  .category,
  .category:nth-child(-n+2) {
    grid-column: auto !important;
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    border: 1px solid #dbe5ec !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 3px 12px rgba(22, 54, 95, 0.04) !important;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease, border-color 0.2s ease !important;
    height: 100% !important;
  }
  .category:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 14px 28px rgba(22, 54, 95, 0.12) !important;
    border-color: #55b6e6 !important;
  }
  .category img,
  .category:nth-child(-n+2) img,
  .category:first-child img {
    width: 100% !important;
    height: 155px !important;
    object-fit: contain !important;
    padding: 14px !important;
    background: #f8fafc !important;
    border-bottom: 1px solid #eef3f6 !important;
    box-sizing: border-box !important;
  }
  .category > div {
    padding: 15px 14px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    border-top: none !important;
  }
  .category h3 {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--navy, #16365f) !important;
    margin: 0 0 6px !important;
    line-height: 1.35 !important;
  }
  .category p {
    font-size: 12px !important;
    color: #607587 !important;
    line-height: 1.45 !important;
    margin: 0 0 10px !important;
    padding-right: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    flex: 1 !important;
  }
  .category > div > span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--sky, #1799dc) !important;
    margin-top: auto !important;
  }
}

@media (min-width: 769px) and (max-width: 991px) {
  .category-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 14px !important;
  }
  .category,
  .category:nth-child(-n+2) {
    grid-column: auto !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: 12px !important;
  }
  .category img,
  .category:nth-child(-n+2) img,
  .category:first-child img {
    height: 145px !important;
  }
}

/* ============================================================
 * Floating Contact Action Cluster (Zalo, LinkedIn, Facebook, Báo giá)
 * Crystal-clear background, zero backdrop blur, ergonomic touch
 * ============================================================ */
.quick-contact {
  position: fixed !important;
  right: 18px !important;
  bottom: 22px !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  display: flex !important;
  flex-direction: column-reverse !important;
  align-items: flex-end !important;
  gap: 10px !important;
  z-index: 9999 !important;
  pointer-events: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.quick-contact > * {
  pointer-events: auto !important;
}

.quick-fab {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 4px 14px rgba(15, 38, 58, 0.22) !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease !important;
  text-decoration: none !important;
  cursor: pointer !important;
  padding: 0 !important;
  position: relative !important;
  box-sizing: border-box !important;
}

.quick-fab:hover,
.quick-fab:focus-visible {
  transform: translateY(-2px) scale(1.06) !important;
  box-shadow: 0 8px 22px rgba(15, 38, 58, 0.32) !important;
}

.quick-fab:active {
  transform: scale(0.95) !important;
}

.quick-fab svg {
  display: block !important;
  pointer-events: none !important;
}

.fab-facebook {
  background: #1877f2 !important;
  color: #ffffff !important;
}

.fab-linkedin {
  background: #0a66c2 !important;
  color: #ffffff !important;
}

.fab-hotline {
  background: linear-gradient(135deg, #e11d48 0%, #be123c 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(225, 29, 72, 0.35) !important;
}

.fab-hotline:hover,
.fab-hotline:focus-visible {
  box-shadow: 0 8px 22px rgba(225, 29, 72, 0.48) !important;
}

.fab-quote {
  width: auto !important;
  height: 40px !important;
  padding: 0 15px 0 12px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #173956 0%, #1e4d79 100%) !important;
  color: #ffffff !important;
  gap: 6px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 6px 18px rgba(15, 38, 58, 0.35) !important;
  letter-spacing: 0.2px !important;
}

.fab-quote svg {
  color: #38bdf8 !important;
  flex-shrink: 0 !important;
}

.fab-quote:hover {
  background: linear-gradient(135deg, #148ec3 0%, #173956 100%) !important;
}

/* Tooltips for quick-fabs on Desktop */
@media (min-width: 769px) {
  .quick-fab:after {
    content: attr(aria-label);
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translate(6px, -50%);
    white-space: nowrap;
    background: #173956;
    color: #ffffff;
    padding: 6px 11px;
    border-radius: 6px;
    font: 600 12px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    opacity: 0;
    visibility: hidden;
    transition: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
  }
  .quick-fab:hover:after,
  .quick-fab:focus-visible:after {
    opacity: 1;
    visibility: visible;
    transform: translate(0, -50%);
  }
}

/* ============================================================
   NỘI DUNG BÀI VIẾT & SẢN PHẨM NÂNG CAO (FIGURE, TABS, CALLOUT)
   ============================================================ */
figure.content-figure {
  display: block;
  max-width: 100%;
  margin: 24px 0;
  clear: both;
}

figure.content-figure img {
  display: block;
  max-width: 100%;
  height: auto;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

figure.content-figure[data-zoom] img,
figure.content-figure a[data-zoom] img,
img[data-zoom] {
  cursor: zoom-in !important;
}

figure.align-center {
  margin: 26px auto !important;
  text-align: center !important;
  display: table !important;
}

figure.align-left {
  float: left !important;
  margin: 8px 26px 18px 0 !important;
  max-width: 50% !important;
}

figure.align-right {
  float: right !important;
  margin: 8px 0 18px 26px !important;
  max-width: 50% !important;
}

figure.align-full {
  width: 100% !important;
  max-width: 100% !important;
  margin: 28px 0 !important;
}

figure.align-full img {
  width: 100% !important;
}

figcaption.content-caption {
  display: block;
  font-size: 13px;
  font-style: italic;
  color: #62717e;
  text-align: center;
  margin-top: 9px;
  line-height: 1.55;
  padding: 0 10px;
}

@media (max-width: 720px) {
  figure.align-left,
  figure.align-right {
    float: none !important;
    max-width: 100% !important;
    margin: 20px auto !important;
    display: table !important;
  }
}

/* Tabs & Accordion in Content */
.content-tabs {
  margin: 28px 0;
  border: 1px solid #dbe4eb;
  border-radius: 9px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(23, 57, 86, 0.04);
}

.content-tabs .tab-buttons {
  display: flex;
  background: #f3f6f8;
  border-bottom: 1px solid #dbe4eb;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.content-tabs .tab-btn {
  padding: 13px 22px;
  border: none;
  background: transparent;
  font-size: 13.5px;
  font-weight: 600;
  color: #62717e;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: all 0.2s ease;
}

.content-tabs .tab-btn.active,
.content-tabs .tab-btn:hover {
  color: #173956;
  background: #ffffff;
  border-bottom-color: #148ec3;
}

.content-tabs .tab-contents {
  padding: 22px 24px;
}

.content-tabs .tab-pane {
  display: none;
}

.content-tabs .tab-pane.active {
  display: block;
}

/* Callout Box */
.callout-box {
  margin: 24px 0;
  padding: 18px 22px;
  border-left: 4px solid #148ec3;
  background: #f0f7fb;
  border-radius: 0 8px 8px 0;
  color: #173956;
  font-size: 14.5px;
  line-height: 1.7;
}

.callout-box .callout-title {
  font-size: 15px;
  font-weight: 700;
  color: #106288;
  margin-bottom: 6px;
}

/* Content CTA Button */
.content-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 24px;
  background: linear-gradient(135deg, #173956 0%, #1e4d79 100%);
  color: #ffffff !important;
  border-radius: 6px;
  font-weight: 650;
  font-size: 13.5px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(23, 57, 86, 0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  margin: 12px 0;
}

.content-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 20px rgba(23, 57, 86, 0.38);
  color: #ffffff !important;
}

/* Lightbox Modal */
.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(10, 25, 40, 0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  cursor: zoom-out;
  animation: fadeIn 0.2s ease-out;
}

.image-lightbox img {
  max-width: min(92vw, 1200px);
  max-height: 85vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  cursor: default;
}

.image-lightbox figcaption {
  margin-top: 14px;
  color: #e2e8f0;
  font-size: 14px;
  font-style: italic;
  text-align: center;
  max-width: 800px;
}

.image-lightbox-close {
  position: absolute;
  top: 20px;
  right: 25px;
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.image-lightbox-close:hover {
  background: #e11d48;
}

/* ==========================================================================
   HERO BANNER: 100% BRIGHT CRISP IMAGE SHOWCASE (NO OVERLAY, NO TEXT)
   ========================================================================== */
.hero:after,
.editorial-hero:after,
.hero::after,
.editorial-hero::after {
  display: none !important;
  opacity: 0 !important;
  background: none !important;
  content: none !important;
}

.hero-content,
.editorial-hero .hero-content,
.hero-bottom > span,
.editorial-hero .hero-bottom > span,
.scroll-indicator {
  display: none !important;
}

.hero,
.editorial-hero {
  position: relative !important;
  height: clamp(540px, calc(100svh - 100px), 840px) !important;
  min-height: 520px !important;
  padding: 0 !important;
  background: #0f2233 !important;
  overflow: hidden !important;
  isolation: isolate !important;
  display: block !important;
}

.editorial-hero .hero-images,
.hero .hero-images {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
  background: transparent !important;
}

.editorial-hero .hero-image,
.hero .hero-image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  filter: none !important;
  -webkit-filter: none !important;
  opacity: 0 !important;
  animation: none !important;
  transform: none !important;
  transition: opacity 0.3s ease !important;
}

.editorial-hero .hero-image.active,
.hero .hero-image.active {
  opacity: 1 !important;
  animation: none !important;
  transform: none !important;
}

.hero-bottom,
.editorial-hero .hero-bottom {
  position: absolute !important;
  bottom: 24px !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  z-index: 25 !important;
  pointer-events: none !important;
  width: min(1200px, calc(100% - 64px)) !important;
}

.editorial-hero .slider-controls,
.hero .slider-controls {
  pointer-events: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  background: rgba(15, 38, 58, 0.78) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  padding: 6px 16px !important;
  border-radius: 40px !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 1px !important;
  margin-right: 165px !important;
}

.editorial-hero .slider-controls button,
.hero .slider-controls button {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.16) !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  color: #ffffff !important;
  font-size: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.editorial-hero .slider-controls button:hover,
.hero .slider-controls button:hover {
  background: rgba(255, 255, 255, 0.35) !important;
  transform: scale(1.08) !important;
}

@media (max-width: 900px) {
  .hero,
  .editorial-hero {
    height: clamp(165px, 45vw, 420px) !important;
    min-height: 0 !important;
    aspect-ratio: 20 / 9 !important;
    background: #082136 !important;
    overflow: hidden !important;
  }
  .editorial-hero .hero-images,
  .hero .hero-images {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
  .editorial-hero .hero-image,
  .hero .hero-image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: #082136 !important;
  }
  .hero-bottom,
  .editorial-hero .hero-bottom {
    bottom: 8px !important;
    justify-content: center !important;
    width: 100% !important;
  }
  .editorial-hero .slider-controls,
  .hero .slider-controls {
    margin-right: 0 !important;
    padding: 3px 10px !important;
    font-size: 11px !important;
    gap: 6px !important;
    border-radius: 20px !important;
    background: rgba(10, 25, 42, 0.72) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
  }
  .editorial-hero .slider-controls button,
  .hero .slider-controls button {
    width: 24px !important;
    height: 24px !important;
    font-size: 12px !important;
  }
}

@media (max-width: 480px) {
  .hero,
  .editorial-hero {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 20 / 9 !important;
  }
  .hero-bottom,
  .editorial-hero .hero-bottom {
    bottom: 5px !important;
  }
  .editorial-hero .slider-controls,
  .hero .slider-controls {
    padding: 2px 7px !important;
    font-size: 9.5px !important;
    gap: 4px !important;
  }
  .editorial-hero .slider-controls button,
  .hero .slider-controls button {
    width: 20px !important;
    height: 20px !important;
    font-size: 10px !important;
  }
}

/* ==========================================================================
   ELEGANT SINGLE ZALO CONTACT IN QUOTE MODAL (DESKTOP & MOBILE)
   ========================================================================== */
.quote-aside {
  padding: 36px 30px 30px !important;
  display: flex !important;
  flex-direction: column !important;
}
@media (max-width: 720px) {
  .quote-aside {
    display: none !important;
  }
}
.quote-aside h2 {
  font-size: 30px !important;
  margin-top: 10px !important;
  margin-bottom: 10px !important;
  line-height: 1.25 !important;
}
.quote-aside p {
  font-size: 13.5px !important;
  line-height: 1.7 !important;
}
.quote-steps {
  margin: 16px 0 18px !important;
}
.quote-steps p {
  padding: 10px 0 !important;
  font-size: 12.5px !important;
}
.quote-aside-contact {
  margin-top: auto !important;
  padding-top: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
.quote-contact-badge {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #8acbf5 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
}
.quote-aside-contact .quote-phone-link {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  text-decoration: none !important;
  transition: background 0.2s, border-color 0.2s !important;
}
.quote-aside-contact .quote-phone-link:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}
.quote-phone-icon-wrap {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: #1799dc !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.quote-aside-contact .quote-phone-link small {
  display: block !important;
  color: #c0daf0 !important;
  font-size: 11.5px !important;
  margin-bottom: 2px !important;
}
.quote-aside-contact .quote-phone-link b {
  display: block !important;
  font-size: 20px !important;
  color: #ffffff !important;
  line-height: 1.2 !important;
  letter-spacing: 0.5px !important;
}
.quote-zalo-aside-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  background: linear-gradient(135deg, #0080ff 0%, #0060e6 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 13px 18px !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 16px rgba(0, 104, 255, 0.35) !important;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s !important;
  text-decoration: none !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  cursor: pointer !important;
}
.quote-zalo-aside-btn:hover {
  background: linear-gradient(135deg, #008cff 0%, #006ef0 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 104, 255, 0.5) !important;
}
.quote-zalo-aside-btn img {
  width: 22px !important;
  height: 22px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
}

.delivery-note {
  margin-top: 14px !important;
  font-size: 12px !important;
  color: #627383 !important;
  line-height: 1.6 !important;
}
.delivery-note a {
  color: #1799dc !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.delivery-note a:hover {
  text-decoration: underline !important;
}

.quote-mobile-contact {
  display: none !important;
}
@media (max-width: 720px) {
  .quote-mobile-contact {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-top: 15px !important;
  }
  .quote-mobile-call, .quote-mobile-zalo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 11px 12px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
  }
  .quote-mobile-call {
    background: #173956 !important;
    color: #ffffff !important;
    border: 1px solid #234d70 !important;
  }
  .quote-mobile-zalo {
    background: #0068ff !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 12px rgba(0, 104, 255, 0.3) !important;
  }
  .quote-mobile-zalo img {
    width: 18px !important;
    height: 18px !important;
  }
}

.quote-channel > div {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
}
@media (max-width: 500px) {
  .quote-channel > div {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   VALUE STRIP - BLUE BOXES WITH WHITE TEXT (HỘP XANH CHỮ TRẮNG)
   ========================================================================== */
.value-strip {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  padding: 30px 0 !important;
  border-bottom: 0 !important;
}
.value-strip > div {
  background: linear-gradient(135deg, #173956 0%, #1e4f78 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 12px !important;
  padding: 24px 26px !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 8px 24px rgba(23, 57, 86, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
.value-strip > div::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, #1799dc 0%, #63c6f7 100%) !important;
  margin: 0 !important;
}
.value-strip > div:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 14px 32px rgba(23, 57, 86, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  background: linear-gradient(135deg, #1a4264 0%, #245c8c 100%) !important;
}
.value-strip .value-box-head {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 8px !important;
}
.value-strip .value-badge-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  background: rgba(23, 153, 220, 0.25) !important;
  color: #68c8f5 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.value-strip b {
  display: block !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  letter-spacing: -0.2px !important;
  margin: 0 !important;
  line-height: 1.35 !important;
}
.value-strip span {
  display: block !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  color: #d5e7f5 !important;
  line-height: 1.5 !important;
  text-align: left !important;
}
@media (max-width: 900px) {
  .value-strip {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 14px !important;
    padding: 24px 0 !important;
  }
  .value-strip > div {
    padding: 18px 18px !important;
  }
  .value-strip b {
    font-size: 15px !important;
  }
  .value-strip span {
    font-size: 12.5px !important;
  }
}
@media (max-width: 720px) {
  .value-strip {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 10px 0 !important;
    overflow-x: visible !important;
  }
  .value-strip > div {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    min-height: auto !important;
    box-shadow: 0 2px 8px rgba(18, 47, 72, 0.12) !important;
  }
  .value-strip > div::before {
    display: none !important;
  }
  .value-strip .value-box-head {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 0 !important;
    flex-shrink: 0 !important;
  }
  .value-strip .value-badge-icon {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    border-radius: 6px !important;
    background: rgba(23, 153, 220, 0.25) !important;
    color: #68c8f5 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
  }
  .value-strip .value-badge-icon svg {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    flex-shrink: 0 !important;
  }
  .value-strip b {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin: 0 !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
  }
  .value-strip > div > span {
    font-size: 11px !important;
    color: #9fd2f6 !important;
    line-height: 1.25 !important;
    padding-left: 0 !important;
    margin: 0 !important;
    text-align: right !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 360px) {
  .value-strip > div {
    padding: 7px 10px !important;
  }
  .value-strip b {
    font-size: 11.5px !important;
  }
  .value-strip > div > span {
    font-size: 10px !important;
  }
}

/* ============================================================
   ABOUT PAGE RESPONSIVE PROFILE CARD & JUSTIFY ALIGNMENT
   ============================================================ */
.about-page-section {
  padding-top: 48px !important;
  padding-bottom: 72px !important;
}

.about-page-wrapper {
  width: 100%;
  margin: 0 auto;
}

.about-page-wrapper.width-standard {
  max-width: 1060px;
}

.about-page-wrapper.width-wide {
  max-width: 1220px;
}

.about-page-wrapper.width-full {
  max-width: 100%;
}

.about-profile-card {
  background: #ffffff;
  border: 1px solid #dce8ef;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(22, 54, 95, 0.05);
  padding: 48px 56px;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.25s ease;
}

.about-profile-card:hover {
  box-shadow: 0 8px 32px rgba(22, 54, 95, 0.08);
}

.about-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 22px;
  margin-bottom: 30px;
  border-bottom: 1px solid #e5edf3;
}

.about-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #ffffff;
  background: linear-gradient(135deg, #16365f 0%, #1e4a78 100%);
  padding: 6px 14px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(22, 54, 95, 0.15);
}

.about-tagline {
  font-size: 13.5px;
  font-weight: 600;
  color: #1799dc;
  letter-spacing: 0.3px;
}

.about-prose {
  max-width: 100% !important;
  margin: 0 !important;
  color: #334155;
  font-size: 16.5px;
  line-height: 1.9;
}

.about-prose h2 {
  color: #16365f;
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.3px;
  margin-top: 36px;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid #e8f0f6;
  position: relative;
  line-height: 1.4;
}

.about-prose h2:first-of-type {
  margin-top: 0;
  font-size: 25px;
}

.about-prose h2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 48px;
  height: 2px;
  background: #1799dc;
  border-radius: 2px;
}

.about-prose h3 {
  color: #16365f;
  font-size: 19px;
  font-weight: 650;
  margin-top: 26px;
  margin-bottom: 12px;
}

.about-prose p {
  margin-bottom: 20px;
  line-height: 1.9;
  color: #334155;
}

/* Căn đều hai bên chuẩn mực */
.about-prose.align-justify p,
.about-prose p[style*="justify"],
.about-prose [style*="text-align: justify"],
.about-prose [style*="text-align:justify"] {
  text-align: justify !important;
  text-justify: inter-word !important;
  hyphens: auto;
}

.about-prose.align-left p {
  text-align: left !important;
}

.about-prose.align-center p {
  text-align: center !important;
}

.about-prose strong,
.about-prose b {
  color: #16365f;
  font-weight: 650;
}

.about-prose ul {
  list-style: none;
  padding-left: 0;
  margin: 16px 0 24px 0;
}

.about-prose ul li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 10px;
  line-height: 1.8;
  color: #334155;
}

.about-prose ul li::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 10px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #1799dc;
}

/* iPad & Máy tính bảng (768px - 1024px) */
@media (max-width: 1024px) {
  .about-page-section {
    padding-top: 36px !important;
    padding-bottom: 56px !important;
  }
  .about-profile-card {
    padding: 36px 36px;
    border-radius: 14px;
  }
  .about-prose {
    font-size: 16px;
    line-height: 1.85;
  }
  .about-prose h2 {
    font-size: 22px;
    margin-top: 30px;
  }
}

/* iPhone & Thiết bị di động (<= 640px) */
@media (max-width: 640px) {
  .about-page-section {
    padding-top: 22px !important;
    padding-bottom: 54px !important;
  }
  .about-profile-card {
    padding: 22px 16px !important;
    border-radius: 12px !important;
    border-color: #e2edf5;
    box-shadow: 0 2px 14px rgba(22, 54, 95, 0.04);
  }
  .about-card-header {
    margin-bottom: 20px;
    padding-bottom: 14px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .about-badge {
    font-size: 10px;
    padding: 5px 11px;
  }
  .about-tagline {
    font-size: 12px;
  }
  .about-prose {
    font-size: 15px !important;
    line-height: 1.8 !important;
  }
  .about-prose h2 {
    font-size: 19px !important;
    margin-top: 24px;
    margin-bottom: 12px;
    padding-bottom: 8px;
  }
  .about-prose h2:first-of-type {
    font-size: 20.5px !important;
  }
  .about-prose p {
    margin-bottom: 16px !important;
  }
  .about-prose ul {
    margin: 12px 0 18px 0;
  }
  .about-prose ul li {
    padding-left: 20px;
    font-size: 14.5px;
    margin-bottom: 8px;
  }
  .about-prose ul li::before {
    left: 4px;
    top: 9px;
    width: 6px;
    height: 6px;
  }
  .about-prose.align-justify p {
    text-align: justify !important;
    text-justify: inter-word !important;
    word-break: break-word;
  }
}








/* ============================================================
   NEWS DETAIL PAGE & PRODUCT BODY RESPONSIVE CARD & JUSTIFY
   ============================================================ */
.breadcrumb a {
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s ease;
}
.breadcrumb a:hover {
  color: var(--sky);
}

.news-detail-section {
  padding-top: 48px !important;
  padding-bottom: 76px !important;
}

.news-detail-wrapper {
  width: 100%;
  margin: 0 auto;
}

.news-detail-wrapper.width-standard {
  max-width: 1040px;
}

.news-detail-wrapper.width-wide {
  max-width: 1180px;
}

.news-detail-wrapper.width-full {
  max-width: 100%;
}

.news-article-card {
  background: #ffffff;
  border: 1px solid #dce8ef;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(22, 54, 95, 0.05);
  padding: 48px 56px;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.25s ease;
}

.news-article-card:hover {
  box-shadow: 0 8px 32px rgba(22, 54, 95, 0.08);
}

.news-meta-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding-bottom: 22px;
  margin-bottom: 28px;
  border-bottom: 1px solid #e5edf3;
  font-size: 13.5px;
}

.news-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #ffffff;
  background: linear-gradient(135deg, #16365f 0%, #1e4a78 100%);
  padding: 6px 14px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(22, 54, 95, 0.15);
}

.news-publish-date {
  color: #55697d;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}

.news-author-tag {
  color: #16365f;
  font-weight: 650;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.news-hero-cover {
  margin-bottom: 34px;
  border-radius: 12px;
  overflow: hidden;
  background: #f8fafc;
  border: 1px solid #e2edf5;
  text-align: center;
  box-shadow: 0 4px 18px rgba(22, 54, 95, 0.04);
}

.news-cover-img {
  width: 100%;
  max-height: 520px;
  object-fit: contain;
  margin: 0 auto;
  display: block;
}

.news-prose {
  max-width: 100% !important;
  margin: 0 !important;
  color: #334155;
  font-size: 16.5px;
  line-height: 1.9;
  overflow-wrap: break-word;
}

.news-prose h1,
.news-prose h2,
.news-prose h3,
.news-prose h4 {
  color: #16365f;
  font-weight: 700;
  text-align: left !important;
  line-height: 1.38;
}

.news-prose h1 {
  font-size: 26px;
  letter-spacing: -0.4px;
  margin-top: 32px;
  margin-bottom: 16px;
}

.news-prose h2 {
  font-size: 22.5px;
  letter-spacing: -0.3px;
  margin-top: 36px;
  margin-bottom: 16px;
  padding-left: 14px;
  border-left: 4px solid #1799dc;
}

.news-prose h2:first-of-type {
  margin-top: 0;
}

.news-prose h3 {
  font-size: 19px;
  margin-top: 26px;
  margin-bottom: 12px;
}

.news-prose p {
  margin-bottom: 20px;
  line-height: 1.9;
  color: #334155;
}

/* Căn đều hai bên chuẩn mực cho Tin tức & Sản phẩm */
.news-prose.align-justify p,
.news-prose.align-justify li,
.news-prose.align-justify div,
.news-prose [style*="text-align: justify"],
.news-prose [style*="text-align:justify"],
.product-body-rte.align-justify p,
.product-body-rte.align-justify li,
.product-body-rte.align-justify div {
  text-align: justify !important;
  text-justify: inter-word !important;
  hyphens: auto;
}

.news-prose.align-left p,
.news-prose.align-left li,
.product-body-rte.align-left p {
  text-align: left !important;
}

.news-prose.align-center p,
.news-prose.align-center li {
  text-align: center !important;
}

.news-prose strong,
.news-prose b,
.product-body-rte strong,
.product-body-rte b {
  color: #16365f;
  font-weight: 650;
}

.news-prose ul,
.product-body-rte ul {
  list-style: none;
  padding-left: 0;
  margin: 16px 0 24px 0;
}

.news-prose ul li,
.product-body-rte ul li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 10px;
  line-height: 1.8;
  color: #334155;
}

.news-prose ul li::before,
.product-body-rte ul li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 10px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #1799dc;
}

.news-prose ol,
.product-body-rte ol {
  padding-left: 24px;
  margin: 16px 0 24px 0;
}

.news-prose ol li,
.product-body-rte ol li {
  margin-bottom: 10px;
  line-height: 1.8;
}

.news-prose img,
.product-body-rte img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  margin: 26px auto;
  display: block;
  box-shadow: 0 4px 18px rgba(22, 54, 95, 0.08);
}

.news-prose a,
.product-body-rte a {
  color: #1799dc;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 500;
  transition: color 0.15s ease;
}

.news-prose a:hover,
.product-body-rte a:hover {
  color: #0e6ea0;
}

.news-prose table,
.product-body-rte table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  border: 1px solid #dce8ef;
  border-radius: 8px;
  overflow: hidden;
}

.news-prose th,
.news-prose td,
.product-body-rte th,
.product-body-rte td {
  padding: 12px 16px;
  border: 1px solid #dce8ef;
  font-size: 14.5px;
}

.news-prose th,
.product-body-rte th {
  background: #f1f6fa;
  color: #16365f;
  font-weight: 700;
  text-align: left;
}

.news-article-footer {
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid #e5edf3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.news-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  background: #f1f6fa;
  color: #16365f;
  border-radius: 8px;
  font-weight: 650;
  font-size: 14px;
  border: 1px solid #dce8ef;
  transition: all 0.2s ease;
  text-decoration: none;
}

.news-back-btn:hover {
  background: #e2edf5;
  color: #1799dc;
  border-color: #bcd4e6;
  transform: translateX(-3px);
}

.news-footer-cta {
  display: flex;
  align-items: center;
  gap: 18px;
  background: #f8fafc;
  border: 1px solid #e2edf5;
  padding: 12px 20px;
  border-radius: 10px;
}

.news-cta-text {
  font-size: 13px;
  color: #475569;
  line-height: 1.45;
}

.news-cta-text b {
  display: block;
  color: #16365f;
  font-size: 13.5px;
}

.news-cta-text a {
  color: #1799dc;
  text-decoration: none;
}

.news-cta-text a:hover {
  text-decoration: underline;
}

/* iPad & Máy tính bảng (768px - 1024px) */
@media (max-width: 1024px) {
  .news-detail-section {
    padding-top: 36px !important;
    padding-bottom: 56px !important;
  }
  .news-article-card {
    padding: 36px 36px;
    border-radius: 14px;
  }
  .news-cover-img {
    max-height: 420px;
  }
  .news-prose {
    font-size: 16px;
    line-height: 1.85;
  }
  .news-prose h2 {
    font-size: 21px;
    margin-top: 30px;
  }
  .news-article-footer {
    flex-direction: column;
    align-items: stretch;
  }
  .news-footer-cta {
    justify-content: space-between;
  }
}

/* iPhone & Thiết bị di động (<= 640px) */
@media (max-width: 640px) {
  .news-detail-section {
    padding-top: 20px !important;
    padding-bottom: 48px !important;
  }
  .news-article-card {
    padding: 22px 16px !important;
    border-radius: 12px !important;
    border-color: #e2edf5;
    box-shadow: 0 2px 14px rgba(22, 54, 95, 0.04);
  }
  .news-meta-strip {
    margin-bottom: 20px;
    padding-bottom: 14px;
    gap: 10px;
    font-size: 12px;
  }
  .news-badge {
    font-size: 10px;
    padding: 5px 11px;
  }
  .news-author-tag {
    margin-left: 0;
    width: 100%;
  }
  .news-hero-cover {
    margin-bottom: 22px;
    border-radius: 8px;
  }
  .news-cover-img {
    max-height: 280px;
  }
  .news-prose {
    font-size: 15px !important;
    line-height: 1.8 !important;
  }
  .news-prose h1 {
    font-size: 20.5px !important;
    margin-top: 20px;
    margin-bottom: 12px;
  }
  .news-prose h2 {
    font-size: 19px !important;
    margin-top: 24px;
    margin-bottom: 12px;
    padding-left: 10px;
  }
  .news-prose h3 {
    font-size: 17px !important;
    margin-top: 20px;
    margin-bottom: 10px;
  }
  .news-prose p {
    margin-bottom: 16px !important;
  }
  .news-prose ul,
  .product-body-rte ul {
    margin: 12px 0 18px 0;
  }
  .news-prose ul li,
  .product-body-rte ul li {
    padding-left: 20px;
    font-size: 14.5px;
    margin-bottom: 8px;
  }
  .news-prose ul li::before,
  .product-body-rte ul li::before {
    left: 4px;
    top: 9px;
    width: 6px;
    height: 6px;
  }
  .news-prose.align-justify p,
  .product-body-rte.align-justify p {
    text-align: justify !important;
    text-justify: inter-word !important;
    word-break: break-word;
  }
  .news-back-btn {
    width: 100%;
    justify-content: center;
  }
  .news-footer-cta {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 14px;
  }
  .news-footer-cta .btn-quote-brand {
    width: 100%;
    justify-content: center;
  }
}