/* ===== AN PHÁT LIGHTING — SHARED STYLES ===== */
@font-face{
  font-family:'Metropolis';
  src:url('fonts/Metropolis-Bold.otf') format('opentype');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Metropolis';
  src:url('fonts/Metropolis-Regular.otf') format('truetype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  --navy:#0A1628;        /* header / footer / dark sections (Schréder-style) */
  --blue-deep:#00095B;   /* text đậm */
  --blue:#0057B8;        /* màu chính / CTA */
  --blue-bright:#174AE3; /* accent / gradient */
  --gray:#B1B1B1;        /* border / phụ */
  --gray-light:#F4F5F8;  /* nền section xen kẽ */
  --border:#E4E7ED;      /* viền mảnh, phẳng */
  --white:#FFFFFF;
  --ink:#20242C;         /* văn bản thường */
  --radius:3px;           /* buttons, inputs, chips, small tiles — per Stitch component scale */
  --radius-card:8px;      /* standard cards/containers — sharper corner scale */
  --radius-card-lg:12px;  /* feature cards (product-material clusters, hero visuals) */
  --radius-pill:999px;
  --font-display:'Metropolis', sans-serif;
  --font-body:'Metropolis', sans-serif;
  --font-mono:'Metropolis', sans-serif;
  /* ===== Layout rhythm (Stitch spacing scale) ===== */
  --section-gap:88px;
  --section-gap-mobile:48px;
  --container-padding:48px;
  --container-padding-mobile:18px;
  --grid-gutter:20px;
  --card-padding:24px;
  --heading-gap:18px;
  --wrap-max:1360px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--font-body);color:var(--ink);background-color:var(--white);background-image:radial-gradient(at 100% 0%, rgba(234,242,255,0.7) 0px, transparent 50%), radial-gradient(at 0% 100%, rgba(234,242,255,0.5) 0px, transparent 50%);background-attachment:fixed;line-height:1.65;font-size:16px;}
img{max-width:100%;display:block;}
picture{display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
.wrap{max-width:var(--wrap-max);margin:0 auto;padding:0 var(--container-padding);}
@media(max-width:760px){.wrap{padding:0 var(--container-padding-mobile);}}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;letter-spacing:0.01em;line-height:1.12;color:var(--blue-deep);}
.eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--blue-bright);font-weight:500;}

/* ===== NAV ===== */
header.site{position:sticky;top:0;z-index:100;background:rgba(255,255,255,0.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);}
.nav{display:flex;align-items:center;justify-content:space-between;padding:0;height:80px;max-width:var(--wrap-max);margin:0 auto;gap:20px;padding-left:var(--container-padding);padding-right:var(--container-padding);}
@media(max-width:760px){.nav{padding-left:var(--container-padding-mobile);padding-right:var(--container-padding-mobile);height:68px;}}
.brand{display:flex;align-items:center;gap:12px;}
.brand img{width:38px;height:38px;border-radius:var(--radius);}
.brand span{font-family:var(--font-display);font-weight:700;color:var(--blue-deep);font-size:16px;letter-spacing:0.03em;}
.navlinks{display:none;gap:30px;align-items:center;}
@media(min-width:900px){.navlinks{display:flex;}}
.navlinks a{color:#3C4657;font-size:12.5px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;transition:color .2s;}
.navlinks a:hover{color:var(--blue);}
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 28px;font-weight:700;font-size:12.5px;letter-spacing:0.07em;text-transform:uppercase;border-radius:var(--radius);transition:all .2s;border:1px solid transparent;cursor:pointer;font-family:var(--font-body);white-space:nowrap;}
.btn svg{width:15px;height:15px;flex-shrink:0;}
.btn-primary{background:var(--blue-bright);color:var(--white);}
.btn-primary:hover{background:var(--blue);}
.btn-outline{border-color:var(--blue);color:var(--blue);background:transparent;}
.btn-outline:hover{background:var(--blue);color:var(--white);}
.btn-light{border-color:rgba(255,255,255,0.55);color:var(--white);}
.btn-light:hover{border-color:var(--white);background:rgba(255,255,255,0.12);}
.navcta{display:none;}
@media(min-width:900px){.navcta{display:inline-block;}}

/* ===== BREADCRUMB ===== */
.breadcrumb{padding:16px 0;font-size:13px;color:#6B7480;border-bottom:1px solid #E7E9EE;background:var(--gray-light);}
.breadcrumb a{color:var(--blue);}
.breadcrumb .sep{margin:0 8px;color:var(--gray);}

/* ===== SECTION GENERIC ===== */
section{padding:var(--section-gap) 0;}
section.tight{padding:64px 0;}
@media(max-width:760px){
  section{padding:var(--section-gap-mobile) 0;}
  section.tight{padding:40px 0;}
}
.alt{background:var(--gray-light);}
.sec-head{max-width:1250px;margin-bottom:32px;display:flex;flex-direction:column;}
.sec-head h2{font-size:clamp(24px,3vw,34px);margin-top:8px;}
.sec-head p{color:#59616F;font-size:15.5px;margin-top:var(--heading-gap);}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:left;}
/* Row variant: heading block + trailing link, side by side on desktop (Stitch pattern) */
.sec-head-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:64px;max-width:none;}
.sec-head-row .sec-head{margin-bottom:0;}
.sec-head-row>.sec-link{font-weight:700;font-size:13.5px;color:var(--blue);border-bottom:2px solid var(--border);padding-bottom:4px;white-space:nowrap;transition:border-color .2s;}
.sec-head-row>.sec-link:hover{border-color:var(--blue);}
.review-grid{display:grid;grid-template-columns:1fr;gap:var(--grid-gutter);}
@media(min-width:760px){.review-grid{grid-template-columns:repeat(3,1fr);align-items:stretch;}}
.review-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--card-padding);display:flex;flex-direction:column;height:100%;}
.review-stars{color:#F5A623;font-size:14px;letter-spacing:2px;margin-bottom:12px;}
.review-quote{font-size:14.5px;color:#3C4657;line-height:1.6;flex:1;}
.review-foot{display:flex;align-items:center;gap:10px;margin-top:20px;padding-top:16px;border-top:1px solid var(--border);}
.review-avatar{width:36px;height:36px;border-radius:50%;background:var(--gray-light);color:var(--blue-deep);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex-shrink:0;}
.review-who{min-width:0;}
.review-name{font-weight:700;font-size:13.5px;color:var(--blue-deep);}
.review-meta{font-size:12px;color:#8A93A3;margin-top:1px;}
.review-source{margin-left:auto;flex-shrink:0;font-size:11px;font-weight:700;color:#EE4D2D;background:#FFF1EE;border-radius:var(--radius-pill);padding:4px 10px;white-space:nowrap;}
@media(max-width:760px){.sec-head,.sec-head-row{margin-bottom:40px;}}

/* ===== HERO ===== */
.hero{position:relative;color:var(--white);overflow:hidden;padding:112px 0 96px;background:var(--navy);}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(115deg, rgba(10,22,40,0.92) 0%, rgba(10,22,40,0.78) 45%, rgba(0,9,91,0.55) 100%);}
.hero-inner{position:relative;z-index:2;width:100%;max-width:800px;}
.hero .eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.3);padding:7px 16px;border-radius:var(--radius);margin-bottom:20px;font-size:11.5px;}
.hero h1{font-size:clamp(40px,4.6vw,60px);line-height:1.1;color:var(--white);margin:0 0 20px;letter-spacing:-0.01em;}
.hero h1 em{font-style:normal;color:#9FC1FF;}
.hero-title span{display:block;}
.hero-title em{font-style:normal;color:#9FC1FF;}
.hero p.sub{font-size:17px;color:#E4EAF5;max-width:640px;margin-bottom:32px;}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap;}

/* ===== TRUST BAR ===== */
.trustbar{background:var(--white);border-top:1px solid #E7E9EE;border-bottom:1px solid #E7E9EE;}
.trustgrid{display:grid;grid-template-columns:repeat(2,1fr);}
@media(min-width:760px){.trustgrid{grid-template-columns:repeat(4,1fr);}}
.trustitem{padding:36px 24px;border-right:1px solid #E7E9EE;text-align:left;}
.trustitem:nth-child(2n){border-right:none;}
@media(min-width:760px){.trustitem{border-bottom:none;}.trustitem:nth-child(2n){border-right:1px solid #E7E9EE;}.trustitem:last-child{border-right:none;}}
.trustitem .num{font-family:var(--font-display);font-size:32px;color:var(--blue);letter-spacing:-0.01em;}
.trustitem .label{font-size:12.5px;color:#6B7480;margin-top:6px;text-transform:uppercase;letter-spacing:0.04em;}

/* ===== GIOI THIEU ===== */
.intro-grid{display:grid;gap:var(--grid-gutter);}
@media(min-width:860px){.intro-grid{grid-template-columns:1.1fr 0.9fr;align-items:start;column-gap:56px;}}
.intro-copy p{margin-bottom:16px;color:#3C4657;font-size:15.5px;}
.values{display:grid;grid-template-columns:1fr;gap:var(--grid-gutter);}
.value-card{border:1px solid var(--border);padding:var(--card-padding);border-radius:var(--radius-card);background:var(--gray-light);transition:border-color .2s;}
.value-card:hover{border-color:var(--blue);}
.value-card h3{font-size:15px;font-family:var(--font-body);font-weight:700;color:var(--blue-deep);margin-bottom:6px;}
.value-card p{font-size:14px;color:#6B7480;}

/* ===== NANG LUC ===== */
.cap-grid{display:grid;gap:var(--grid-gutter);}
@media(min-width:900px){.cap-grid{grid-template-columns:1fr 1fr;align-items:start;column-gap:56px;}}
.video-slot{aspect-ratio:16/9;background:linear-gradient(135deg,#EDF2FB,#DCE6F7);border:1px solid #DCE6F7;border-radius:var(--radius-card);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;}
.video-slot .playbtn{width:56px;height:56px;border-radius:50%;background:var(--blue);display:flex;align-items:center;justify-content:center;}
.video-slot .playbtn::after{content:"";border-left:14px solid var(--white);border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px;}
.video-slot span{font-size:12.5px;color:#6B7480;font-family:var(--font-mono);}
.capstats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#E7E9EE;margin-top:22px;border:1px solid #E7E9EE;}
.capstat{background:var(--white);padding:18px 20px;}
.capstat .num{font-family:var(--font-display);font-size:19px;color:var(--blue);}
.capstat .label{font-size:12.5px;color:#6B7480;margin-top:4px;}
.qc-steps{display:flex;flex-direction:column;}
.qc-step{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid #E7E9EE;}
.qc-step .dot{width:10px;height:10px;border-radius:50%;background:var(--blue);margin-top:6px;flex-shrink:0;}
.qc-step h4{font-size:15px;font-weight:700;color:var(--blue-deep);margin-bottom:3px;font-family:var(--font-body);}
.qc-step p{font-size:13.5px;color:#6B7480;}
.oem-note{margin-top:22px;padding:20px 24px;border:1px solid #CBDCF7;background:#EEF4FD;border-radius:var(--radius-card);font-size:14.5px;color:#0A2E63;}

/* ===== SAN PHAM GRID ===== */
.prod-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--grid-gutter);}
@media(min-width:700px){.prod-grid{grid-template-columns:repeat(4,1fr);}}
.prod-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-card);overflow:hidden;transition:border-color .2s;position:relative;}
.prod-card:hover{border-color:var(--blue);}
.prod-thumb{aspect-ratio:1/1;background:var(--gray-light);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.prod-thumb picture{width:100%;height:100%;display:flex;align-items:center;justify-content:center;}
.prod-thumb img{width:100%;height:100%;object-fit:cover;}
.prod-thumb .noimg{font-size:11px;color:var(--gray);text-align:center;padding:8px;font-family:var(--font-mono);}
.prod-info{padding:20px 20px 22px;}
.prod-info h3{font-size:14.5px;font-weight:700;margin-bottom:3px;color:var(--blue-deep);font-family:var(--font-body);}
.prod-info p{font-size:12.5px;color:#6B7480;margin-bottom:10px;}
.prod-info a{font-size:12.5px;font-weight:600;color:var(--blue);}
.badge-soon{position:absolute;top:10px;right:10px;background:var(--gray);color:var(--white);font-size:10px;padding:3px 8px;border-radius:20px;font-family:var(--font-mono);}

/* ===== TAI LIEU ===== */
.doc-grid{display:grid;grid-template-columns:1fr;gap:var(--grid-gutter);}
@media(min-width:760px){.doc-grid{grid-template-columns:repeat(3,1fr);align-items:start;}}
.doc-card{border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--card-padding);display:flex;flex-direction:column;gap:10px;background:var(--white);transition:border-color .2s, opacity .25s;cursor:pointer;}
.doc-card:hover{border-color:var(--blue);}
.doc-card .filetag{font-family:var(--font-mono);font-size:11px;color:var(--white);background:var(--blue);display:inline-block;padding:3px 8px;border-radius:2px;width:fit-content;transition:font-size .25s;}
.doc-card h3{font-size:15px;font-weight:700;font-family:var(--font-body);color:var(--blue-deep);transition:font-size .25s;}
.doc-card p{font-size:13px;color:#6B7480;flex-grow:1;}
.doc-card .btn{align-self:flex-start;font-size:13.5px;padding:8px 16px;}
.doc-card.pending .filetag{background:var(--gray);}
.doc-grid.has-selection .doc-card:not(.doc-selected){opacity:.55;}
.doc-card.doc-selected{border-color:var(--blue);border-width:2px;z-index:2;opacity:1;}
.doc-card.doc-selected h3{font-size:18px;}
.doc-card.doc-selected .filetag{font-size:12px;}

/* ===== FLIPBOOK VIEWER (xem-tai-lieu.html) ===== */
.fb-section{padding-top:26px;}
.fb-headrow{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:flex-end;margin-bottom:22px;}
.fb-headactions{display:flex;gap:10px;flex-wrap:wrap;}
.fb-stage{display:flex;align-items:center;justify-content:center;gap:10px;background:linear-gradient(180deg,#EEF2F7,#E3E8F0);border:1px solid #E1E6EF;border-radius:var(--radius-card);padding:28px 10px;min-height:460px;overflow:auto;}
.fb-book-wrap{position:relative;width:100%;max-width:900px;margin:0 auto;perspective:2400px;}
.fb-book{width:100%;margin:0 auto;transition:transform .2s ease;transform-origin:center top;}
.fb-book canvas{border-radius:2px;}
.fb-page{width:100%;height:100%;background:#fff;overflow:hidden;}
.fb-page img{display:block;width:100%;height:100%;object-fit:cover;}
.fb-nav{flex-shrink:0;width:42px;height:42px;border-radius:50%;background:var(--white);border:1px solid #E1E4EA;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s, transform .15s;box-shadow:0 6px 16px rgba(10,22,40,0.1);}
.fb-nav:hover{background:var(--blue);transform:translateY(-1px);}
.fb-nav:hover svg{stroke:#fff;}
.fb-nav svg{width:20px;height:20px;stroke:var(--blue-deep);}
@media(max-width:640px){.fb-nav{display:none;}.fb-stage{padding:16px 4px;}}
.fb-toolbar{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:18px;}
.fb-tool-btn{width:36px;height:36px;border-radius:5px;border:1px solid var(--border);background:var(--white);color:var(--blue-deep);font-size:16px;cursor:pointer;transition:border-color .15s, color .15s;}
.fb-tool-btn:hover{border-color:var(--blue-bright);color:var(--blue);}
.fb-tool-btn:disabled{opacity:0.4;cursor:not-allowed;}
.fb-toolbar-sep{width:1px;height:24px;background:var(--border);}
.fb-pageindicator{font-family:var(--font-mono);font-size:13px;color:#59616F;min-width:64px;text-align:center;}
#fb-zoom-level{min-width:44px;}
.stf__item:first-child{display:none;}
.stf__page.-left:first-child{opacity:0;}
/* ===== KIEN THUC ===== */
.k-grid{display:grid;grid-template-columns:1fr;gap:var(--grid-gutter);}
@media(min-width:760px){.k-grid{grid-template-columns:repeat(3,1fr);align-items:stretch;}}
.k-card-item{height:100%;}
.k-card-item>a{display:flex;height:100%;}
.k-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-card);overflow:hidden;display:flex;flex-direction:column;transition:border-color .2s;width:100%;height:100%;}
.k-card:hover{border-color:var(--blue);}
.k-thumb{aspect-ratio:16/10;background:linear-gradient(135deg,#EDF2FB,#DCE6F7);flex-shrink:0;overflow:hidden;}
.k-thumb picture,.k-thumb img{display:block;width:100%;height:100%;}
.k-thumb img{object-fit:cover;object-position:center;}
.k-body{padding:28px var(--card-padding) var(--card-padding);display:flex;flex-direction:column;flex:1;}
.k-body .eyebrow{font-size:11px;}
.k-body h3{font-size:16px;margin:8px 0 8px;font-family:var(--font-body);font-weight:700;color:var(--blue-deep);}
.k-body p{font-size:13.5px;color:#6B7480;flex:1;}
.k-more{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-size:13.5px;font-weight:700;color:var(--blue);}
.k-more span{transition:transform .18s;}
.k-card:hover .k-more span{transform:translateX(3px);}
@media(min-width:760px){
  .k-featured{background:var(--navy);border:none;justify-content:flex-end;min-height:100%;}
  .k-featured .eyebrow{color:#9FC1FF;}
  .k-featured h3{color:var(--white);}
  .k-featured p{color:#CBDCF7;}
  .k-featured .k-more{color:var(--white);}
}

/* ===== LIEN HE ===== */
.contact{background:linear-gradient(120deg,var(--blue-deep),var(--blue));color:var(--white);}
.contact h2{color:var(--white);}
.contact-grid{display:grid;gap:40px;}
@media(min-width:900px){.contact-grid{grid-template-columns:1fr 1fr;}}
.form input,.form select,.form textarea{width:100%;padding:12px 14px;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.28);color:var(--white);border-radius:var(--radius);font-family:var(--font-body);font-size:14.5px;margin-bottom:14px;}
.form input::placeholder,.form textarea::placeholder{color:rgba(255,255,255,0.6);}
.form select option{color:var(--blue-deep);background:#fff;}
.form label{font-size:12px;color:#CBDCF7;display:block;margin-bottom:6px;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:0.06em;}
.form textarea{min-height:90px;resize:vertical;}
.contact-info{display:flex;flex-direction:column;gap:20px;}
.info-row{display:flex;gap:14px;align-items:flex-start;}
.info-row .k{font-family:var(--font-mono);font-size:11.5px;color:#9FC1FF;text-transform:uppercase;letter-spacing:0.08em;width:90px;flex-shrink:0;padding-top:2px;}
.info-row .v{font-size:15px;color:#EAF0FB;}
.info-row .v a{color:#fff;font-weight:600;}

/* ===== PRODUCT DETAIL PAGE ===== */
.pd-grid{display:grid;gap:44px;}
@media(min-width:900px){.pd-grid{grid-template-columns:1fr 1fr;align-items:start;}}
.pd-gallery-main{aspect-ratio:4/3;border-radius:var(--radius-card);overflow:hidden;border:1px solid #E7E9EE;background:var(--gray-light);padding:24px;}
.pd-gallery-main picture{width:100%;height:100%;display:flex;align-items:center;justify-content:center;}
.pd-gallery-main img{width:100%;height:100%;object-fit:contain;object-position:center;}
.pd-gallery-thumbs{display:flex;gap:10px;margin-top:10px;}
.pd-gallery-thumbs div{width:64px;height:64px;border-radius:var(--radius);overflow:hidden;border:1px solid #E7E9EE;background:var(--gray-light);cursor:pointer;transition:border-color .15s;padding:6px;}
.pd-gallery-thumbs div:hover{border-color:var(--blue-bright);}
.pd-gallery-thumbs div.active{border-color:var(--blue);border-width:2px;}
.pd-gallery-thumbs picture{width:100%;height:100%;display:flex;align-items:center;justify-content:center;}
.pd-gallery-thumbs img{width:100%;height:100%;object-fit:contain;object-position:center;}

.color-swatches{display:flex;align-items:center;gap:10px;margin-top:16px;}
.cs-label{font-size:13.5px;font-weight:700;color:var(--blue-deep);}
.cs-swatch{width:28px;height:28px;border-radius:50%;border:2px solid var(--border);cursor:pointer;padding:0;transition:border-color .15s,transform .15s;position:relative;}
.cs-swatch:hover{transform:scale(1.08);}
.cs-swatch.active{border-color:var(--blue);box-shadow:0 0 0 2px rgba(0,87,184,0.18);}
.cs-swatch[data-color="trang"]{border-color:#D8DCE3;}
.cs-color-name{font-size:13.5px;color:#59616F;}
.pd-title .eyebrow{margin-bottom:8px;display:block;}
.pd-title h1{font-size:clamp(26px,3.4vw,36px);color:var(--blue-deep);margin-bottom:16px;}
.quickbox{border:1px solid #E7E9EE;border-radius:var(--radius-card);background:var(--gray-light);padding:24px 26px;margin-bottom:24px;}
.quickrow{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #E1E4EA;font-size:14px;}
.quickrow:last-child{border-bottom:none;}
.quickrow .k{color:#6B7480;}
.quickrow .v{color:var(--blue-deep);font-weight:600;text-align:right;}
.pd-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:8px;}
.warranty-line{margin-top:18px;font-size:13.5px;color:#6B7480;padding:14px 16px;background:var(--gray-light);border-radius:var(--radius-card);border:1px solid #E7E9EE;}

.tabs{margin-top:64px;}
.tabbar{display:flex;gap:6px;border-bottom:1px solid #E7E9EE;flex-wrap:wrap;}
.tabbtn{padding:12px 18px;font-size:14.5px;font-weight:600;color:#6B7480;border-bottom:2px solid transparent;cursor:pointer;background:none;border-top:none;border-left:none;border-right:none;font-family:var(--font-body);}
.tabbtn.active{color:var(--blue);border-bottom-color:var(--blue);}
.tabpanel{display:none;padding-top:30px;}
.tabpanel.active{display:block;}

table.specs{width:100%;border-collapse:collapse;font-size:13.5px;}
table.specs caption{text-align:left;font-family:var(--font-body);font-weight:700;color:var(--blue-deep);font-size:15px;margin-bottom:12px;caption-side:top;}
table.specs th{background:var(--blue-deep);color:var(--white);text-align:left;padding:10px 12px;font-weight:600;font-size:12.5px;text-transform:uppercase;letter-spacing:0.03em;}
table.specs td{padding:9px 12px;border-bottom:1px solid #E7E9EE;color:var(--ink);}
table.specs tr:nth-child(even) td{background:var(--gray-light);}
.specs-wrap{margin-bottom:40px;overflow-x:auto;}

.comp-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;}
.comp-item{border:1px solid var(--border);border-radius:var(--radius);padding:18px;text-align:center;background:var(--white);font-size:13.5px;color:var(--blue-deep);font-weight:600;}

.install-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:500px;}
.install-item{border:1px solid var(--border);border-radius:var(--radius-card);padding:24px;text-align:center;background:var(--white);}
.install-item .icon{width:44px;height:44px;margin:0 auto 12px;border-radius:50%;background:var(--blue);}
.install-item h4{font-size:14px;color:var(--blue-deep);font-family:var(--font-body);font-weight:700;}

.related{margin-top:80px;}

/* ===== FOOTER ===== */
footer{background:var(--navy);color:rgba(255,255,255,0.62);padding:0;font-size:13px;border-top:none;}
.foot-row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;}
.foot-row a{color:#3C4657;}

/* ===== GIÁ THAM KHẢO ===== */
.price-highlight{display:flex;align-items:baseline;gap:8px;margin:4px 0 18px;}
.price-highlight .from{font-size:12.5px;color:#6B7480;}
.price-highlight .amount{font-family:var(--font-display);font-size:22px;color:var(--blue);}
.price-note{font-size:12px;color:#8A93A2;margin-bottom:18px;}
table.specs td.price-cell{color:var(--blue);font-weight:700;}
table.specs th.price-th{background:var(--blue);}

/* ===== MACHINE GALLERY (bento) ===== */
.machine-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--grid-gutter);grid-auto-flow:dense;}
@media(min-width:700px){.machine-grid{grid-template-columns:repeat(4,1fr);}}
.machine-grid .m-thumb{border-radius:var(--radius-card);overflow:hidden;background:var(--gray-light);border:1px solid #E7E9EE;aspect-ratio:1/1;}
.machine-grid .m-thumb picture{width:100%;height:100%;}
.machine-grid .m-thumb img{width:100%;height:100%;object-fit:cover;}
@media(min-width:700px){.machine-grid .m-thumb.wide{grid-column:span 2;grid-row:span 2;aspect-ratio:auto;}}

/* ===== HERO FLOATING CARD ===== */
/* ===== BENTO CAPSTATS (Nang luc san xuat) ===== */
.capstats-bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:116px;gap:var(--grid-gutter);}
.capstats-bento.cols-3{grid-template-columns:repeat(3,1fr);}
@media(max-width:760px){.capstats-bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:104px;gap:14px;}.capstats-bento.cols-3{grid-template-columns:repeat(2,1fr);}}
.cb-item{border-radius:var(--radius-card);padding:24px;display:flex;flex-direction:column;justify-content:flex-end;background:var(--white);border:1px solid var(--border);}
.cb-item.featured{grid-column:span 2;grid-row:span 2;background:var(--navy);border:none;color:var(--white);}
.cb-item .num{font-family:var(--font-display);font-size:clamp(20px,2.6vw,30px);color:var(--blue);}
.cb-item.featured .num{color:var(--white);font-size:clamp(28px,3.6vw,46px);}
.cb-item .label{font-size:12.5px;color:#6B7480;margin-top:5px;}
.cb-item.featured .label{color:#CBDCF7;font-size:13.5px;}

/* ===== BENTO WHY GRID ===== */
.why-card.featured{background:var(--navy);border:none;color:var(--white);}
@media(min-width:700px){.why-card.featured{grid-column:span 2;}}
.why-card.featured .why-ic{background:rgba(255,255,255,0.16);}
.why-card.featured .why-ic svg{stroke:#fff;}
.why-card.featured h3{color:var(--white);}
.why-card.featured p{color:#CBDCF7;}

/* ===== HERO HIGHLIGHTS ===== */
.hero-highlights{display:flex;flex-wrap:wrap;gap:14px 30px;margin-top:8px;}
.hero-highlight{display:flex;align-items:center;gap:9px;font-size:14px;color:#EAF0FB;font-weight:600;}
.hero-highlight .hi-ic{width:20px;height:20px;flex-shrink:0;border-radius:50%;background:rgba(255,255,255,0.18);display:flex;align-items:center;justify-content:center;}
.hero-highlight .hi-ic svg{width:12px;height:12px;}

/* ===== VI SAO CHON ===== */
.why-grid{display:grid;grid-template-columns:1fr;gap:var(--grid-gutter);}
@media(min-width:700px){.why-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1080px){.why-grid{grid-template-columns:repeat(3,1fr);}}
.why-card{border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--card-padding);background:var(--gray-light);display:flex;gap:16px;align-items:flex-start;transition:border-color .2s, background .2s;}
.why-card:hover{border-color:var(--blue);}
.why-card .why-ic{width:48px;height:48px;flex-shrink:0;border-radius:6px;background:var(--white);box-shadow:0 1px 2px rgba(0,9,91,0.06);display:flex;align-items:center;justify-content:center;transition:background .2s;}
.why-card:hover .why-ic{background:var(--blue);}
.why-card:hover .why-ic svg{stroke:var(--white);}
.why-card .why-ic svg{width:22px;height:22px;stroke:var(--blue);transition:stroke .2s;}
.why-card h3{font-size:15px;font-family:var(--font-body);font-weight:700;color:var(--blue-deep);margin-bottom:4px;}
.why-card p{font-size:13.5px;color:#6B7480;}

/* ===== TAM NHIN - SU MENH - DINH VI ===== */
.tsm-grid{display:grid;grid-template-columns:1fr;gap:var(--grid-gutter);}
@media(min-width:860px){.tsm-grid{grid-template-columns:repeat(3,1fr);}}
.tsm-card{border-radius:var(--radius-card);padding:var(--card-padding);background:var(--gray-light);border:1px solid var(--border);transition:border-color .2s;}
.tsm-card:hover{border-color:var(--blue);}
.tsm-card .eyebrow{margin-bottom:10px;display:block;}
.tsm-card h3{font-size:19px;margin-bottom:10px;}
.tsm-card p{font-size:14px;color:#3C4657;}

/* ===== UNG DUNG SAN PHAM ===== */
.app-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--grid-gutter);}
@media(min-width:700px){.app-grid{grid-template-columns:repeat(4,1fr);}}
.app-card{border:1px solid var(--border);border-radius:var(--radius-card);padding:28px 20px;text-align:center;background:var(--white);transition:border-color .2s;}
.app-card:hover{border-color:var(--blue);}
.app-card .app-ic{width:48px;height:48px;margin:0 auto 16px;border-radius:6px;background:var(--gray-light);display:flex;align-items:center;justify-content:center;}
.app-card .app-ic svg{width:21px;height:21px;stroke:var(--blue);}
.app-card h3{font-size:14px;font-family:var(--font-body);font-weight:700;color:var(--blue-deep);}

/* ===== CTA STRIP ===== */
.cta-strip{background:linear-gradient(120deg,#EEF4FD,#E1EBFA);border:1px solid #DCE6F7;border-radius:var(--radius-card);padding:30px 32px;display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;margin-bottom:48px;}
.cta-strip p{font-size:15px;color:#0A2E63;max-width:560px;font-weight:500;}
.cta-strip .btn{flex-shrink:0;}
.cta-strip .btn-light{border-color:var(--blue);color:var(--blue);}
.cta-strip .btn-light:hover{background:var(--blue);color:var(--white);}

/* ===== FORM VALIDATION ===== */
.form .field-error{font-size:12px;color:#FFD1D1;margin:-10px 0 12px;display:none;}
.form input.invalid,.form select.invalid,.form textarea.invalid{border-color:#FF8B8B;background:rgba(255,80,80,0.08);}
.form input.invalid + .field-error,.form select.invalid + .field-error,.form textarea.invalid + .field-error{display:block;}
.form-status{font-size:13.5px;margin-top:10px;color:#FFD1D1;display:none;}
.form-status.show{display:block;}

/* ===== SUCCESS MODAL ===== */
.modal-overlay{position:fixed;inset:0;background:rgba(0,9,91,0.55);z-index:1000;display:none;align-items:center;justify-content:center;padding:20px;}
.modal-overlay.show{display:flex;}
.modal-box{background:var(--white);border-radius:var(--radius-card);max-width:440px;width:100%;padding:34px 30px 28px;text-align:center;position:relative;box-shadow:0 20px 60px rgba(0,9,91,0.3);}
.modal-box .modal-ic{width:56px;height:56px;border-radius:50%;background:#EAF7EE;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;}
.modal-box .modal-ic svg{width:28px;height:28px;stroke:#1FA254;}
.modal-box h3{font-size:19px;color:var(--blue-deep);margin-bottom:12px;}
.modal-box p{font-size:14.5px;color:#59616F;line-height:1.6;margin-bottom:22px;}
.modal-box .modal-close{position:absolute;top:14px;right:16px;font-size:20px;color:#B1B1B1;cursor:pointer;background:none;border:none;line-height:1;}
.modal-box .hotline-highlight{color:var(--blue);font-weight:700;}

/* ===== COMPACT CONTACT MODAL (light theme override of .form) ===== */
.contact-modal-box{max-width:460px;text-align:left;max-height:88vh;overflow-y:auto;}
.contact-modal-box h3{text-align:left;}
.contact-modal-box .form label{color:#59616F;}
.contact-modal-box .form input,.contact-modal-box .form select,.contact-modal-box .form textarea{background:#F5F7FB;color:var(--blue-deep);border:1px solid #E1E6EF;}
.contact-modal-box .form input::placeholder,.contact-modal-box .form textarea::placeholder{color:#9AA3B2;}
.contact-modal-box .modal-contact-info{display:flex;flex-wrap:wrap;gap:14px 20px;margin-top:16px;padding-top:16px;border-top:1px solid #E7E9EE;font-size:13.5px;}
.contact-modal-box .modal-contact-info a{color:var(--blue);font-weight:600;}

/* ===== BLOG / KIEN THUC ARTICLE ===== */
.article-wrap{max-width:760px;margin:0 auto;padding:0 40px;}
.article-body h2{font-size:22px;margin:34px 0 12px;}
.article-body h3{font-size:17px;margin:24px 0 10px;color:var(--blue-deep);font-family:var(--font-body);font-weight:700;}
.article-body p{font-size:15.5px;color:#3C4657;margin-bottom:14px;}
.article-body a,.seo-note a,.faq-a a,.insight-box a,.decision-box a,.article-cta a.inline-link{color:var(--blue);text-decoration:underline;text-underline-offset:2px;}
.article-body a:hover,.seo-note a:hover,.faq-a a:hover,.insight-box a:hover,.decision-box a:hover{color:var(--blue-bright);}
.article-body ul{margin:0 0 16px 0;}
.article-body ul li{font-size:15.5px;color:#3C4657;margin-bottom:8px;padding-left:20px;position:relative;}
.article-body ul li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--blue);}
.article-meta{display:flex;gap:14px;align-items:center;font-size:12.5px;color:#8A93A2;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:18px;}
.article-hero{aspect-ratio:21/9;border-radius:var(--radius-card);overflow:hidden;background:var(--gray-light);margin-bottom:32px;border:1px solid #E7E9EE;}
.article-hero picture{width:100%;height:100%;}
.article-hero img{width:100%;height:100%;object-fit:cover;}
.article-cta{margin-top:40px;padding:32px;background:var(--gray-light);border:1px solid #E7E9EE;border-radius:var(--radius-card);text-align:center;}
.article-cta p{font-size:15px;color:#0A2E63;margin-bottom:16px;font-weight:500;}

/* Article: tables inside body copy */
.article-body table.specs{margin:18px 0 24px;}
.article-body figure{margin:24px 0;}
.article-body figure img{width:100%;border-radius:var(--radius-card);display:block;}
.article-body figcaption{font-size:12.5px;color:#8A93A2;margin-top:8px;text-align:center;}

/* Insight / tip callout */
.insight-box{border:1px solid #C9DBFA;background:#F1F6FF;border-radius:var(--radius-card);padding:18px 20px;margin:22px 0;}
.insight-box .insight-tag{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--blue-deep);font-size:12.5px;letter-spacing:0.03em;text-transform:uppercase;margin-bottom:8px;}
.insight-box .insight-tag svg{width:15px;height:15px;stroke:var(--blue);}
.insight-box p{color:#1F3A5F;font-size:14.5px;line-height:1.65;margin:0;}

/* Interactive decision box */
.decision-box{border:1px solid var(--border);border-radius:var(--radius-card);background:var(--white);box-shadow:0 6px 24px rgba(10,22,40,0.06);padding:26px 28px;margin:28px 0;}
.decision-box h3{margin:0 0 6px;font-size:17px;color:var(--blue-deep);}
.decision-box .db-sub{font-size:13.5px;color:#59616F;margin-bottom:16px;}
.decision-box select{width:100%;padding:11px 14px;border:1px solid var(--border);border-radius:var(--radius);font-family:var(--font-body);font-size:14.5px;color:var(--ink);background:var(--gray-light);margin-bottom:16px;}
.decision-box .db-result{display:flex;gap:14px;align-items:flex-start;background:linear-gradient(120deg,#EFF4FF,#F7FAFF);border-radius:10px;padding:16px 18px;}
.decision-box .db-badge{flex-shrink:0;font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:var(--white);background:var(--blue);padding:5px 10px;border-radius:20px;}
.decision-box .db-result-text{font-size:15px;font-weight:700;color:var(--blue-deep);}
.decision-box .db-result-sub{font-size:13px;color:#59616F;margin-top:3px;}

/* Interactive checklist */
.check-list{display:flex;flex-direction:column;gap:2px;margin:18px 0 8px;}
.check-list label{display:flex;align-items:center;gap:12px;padding:11px 6px;font-size:14.5px;color:#3C4657;border-bottom:1px solid #EEF0F4;cursor:pointer;}
.check-list input[type="checkbox"]{width:18px;height:18px;flex-shrink:0;accent-color:var(--blue);cursor:pointer;}
.check-list input[type="checkbox"]:checked + span{color:#9AA2AE;text-decoration:line-through;}

/* FAQ accordion */
.faq-list{margin:18px 0 8px;}
.faq-item{border-bottom:1px solid var(--border);}
.faq-item summary{list-style:none;cursor:pointer;padding:18px 30px 18px 0;font-size:15px;font-weight:700;color:var(--blue-deep);position:relative;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+";position:absolute;right:2px;top:16px;font-size:20px;font-weight:400;color:var(--blue);transition:transform .2s;}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item .faq-a{padding:0 0 18px;font-size:14.5px;color:#3C4657;line-height:1.65;}

/* ===== SIDE DOCK: social icons + vertical "Liên hệ" tab (Schréder-style) ===== */
.side-dock{position:fixed;top:52%;right:0;transform:translateY(-50%);z-index:300;display:flex;flex-direction:column;align-items:flex-end;gap:8px;}
.social-dock{display:flex;flex-direction:column;gap:8px;}
.social-btn{width:46px;height:46px;border-radius:4px 0 0 4px;background:var(--navy);display:flex;align-items:center;justify-content:center;box-shadow:-4px 6px 18px rgba(0,9,91,0.25);transition:background .18s;}
.social-btn svg{width:19px;height:19px;color:var(--white);}
.social-btn:hover{background:var(--blue-bright);}
.contact-tab{writing-mode:vertical-rl;transform:rotate(180deg);width:46px;box-sizing:border-box;background:var(--blue-bright);color:var(--white);font-family:var(--font-body);font-weight:700;font-size:15px;letter-spacing:0.04em;padding:22px 12px 22px 0;text-align:center;border-radius:0 4px 4px 0;box-shadow:-4px 6px 18px rgba(0,9,91,0.25);transition:background .18s;}
.contact-tab:hover{background:var(--blue-deep);}

.fab-top{position:fixed;right:20px;bottom:22px;z-index:300;width:46px;height:46px;border-radius:50%;background:var(--white);border:1px solid #E1E4EA;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(0,9,91,0.16);transition:transform .18s, box-shadow .18s;}
.fab-top:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(0,9,91,0.22);}
.fab-top svg{width:19px;height:19px;color:var(--blue-deep);}
@media(max-width:640px){
  .side-dock{top:auto;bottom:88px;transform:none;}
  .contact-tab{font-size:13.5px;width:40px;padding:16px 0;}
  .social-btn{width:40px;height:40px;}
  .social-btn svg{width:17px;height:17px;}
}

/* ===== MEGA NAV DROPDOWN ===== */
.navlinks{position:relative;}
.navlinks .has-drop{position:relative;}
.navlinks .has-drop > a{display:flex;align-items:center;gap:4px;cursor:pointer;}
.navlinks .has-drop > a::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-top:-2px;}
.dropdown{position:absolute;top:100%;left:-20px;background:var(--white);border:1px solid var(--border);border-radius:var(--radius-card);box-shadow:0 12px 28px rgba(10,22,40,0.1);padding:24px;display:none;width:560px;grid-template-columns:repeat(3,1fr);gap:6px 18px;z-index:200;}
.navlinks .has-drop:hover .dropdown{display:grid;}
.dropdown .drop-col-title{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:0.08em;color:var(--blue-bright);font-weight:600;margin-bottom:8px;display:block;}
.dropdown a.drop-link{display:block;font-size:13.5px;color:#3C4657;padding:5px 0;}
.dropdown a.drop-link:hover{color:var(--blue);}
.dropdown .drop-col{padding-right:10px;border-right:1px solid #EEF0F3;}
.dropdown .drop-col:last-child{border-right:none;}
.dropdown .drop-hub{grid-column:1/-1;margin-top:8px;padding-top:12px;border-top:1px solid #EEF0F3;}

/* ===== FOOTER (extended, multi-column) ===== */
.foot-main{padding-top:96px;padding-bottom:30px;}
@media(max-width:640px){.foot-main{padding-top:56px;}}
.foot-grid{display:grid;grid-template-columns:1.7fr 0.9fr 0.9fr 0.9fr;gap:32px;}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr;}}
.foot-col h4{font-family:var(--font-body);font-size:12px;font-weight:700;color:var(--white);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:16px;}
.foot-col p{font-size:13.5px;color:rgba(255,255,255,0.55);margin-bottom:8px;}
.foot-col ul li{margin-bottom:9px;}
.foot-col ul li a{font-size:13.5px;color:rgba(255,255,255,0.62);transition:color .18s;}
.foot-col ul li a:hover{color:var(--white);}
.foot-bottom{margin-top:40px;padding:20px 0;border-top:1px solid rgba(255,255,255,0.12);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12.5px;color:rgba(255,255,255,0.4);}

/* ===== PRODUCT HUB (danh-muc-san-pham) ===== */
.material-cluster{margin-bottom:64px;}
.material-head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap;margin-bottom:32px;padding-bottom:24px;border-bottom:1px solid var(--border);}
.material-head .mh-copy{flex:1;min-width:260px;}
.material-head h2{font-size:22px;margin:6px 0 4px;}
.material-head p{font-size:14px;color:#59616F;max-width:620px;}
.material-tags{display:flex;gap:8px;flex-wrap:wrap;}
.material-tag{font-family:var(--font-mono);font-size:11px;padding:4px 10px;border-radius:20px;background:#EEF4FD;color:var(--blue);border:1px solid #CBDCF7;}
.pros-cons{display:flex;gap:12px;flex-wrap:wrap;margin:0;flex-shrink:0;}
.pc-box{width:230px;flex-shrink:0;border-radius:6px;padding:14px 16px;font-size:12.5px;background:var(--white);border:1px solid var(--border);color:#59616F;line-height:1.55;}
.pc-box strong{display:flex;align-items:center;gap:6px;margin-bottom:8px;font-size:12px;text-transform:uppercase;letter-spacing:0.04em;font-weight:700;}
.pc-box.pros strong{color:var(--blue);}
.pc-box.cons strong{color:#C0392B;}
.pc-box strong::before{content:"";width:15px;height:15px;border-radius:50%;flex-shrink:0;background-size:10px;background-repeat:no-repeat;background-position:center;}
.pc-box.pros strong::before{background-color:#EAF2FF;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230057b8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");}
.pc-box.cons strong::before{background-color:#FBEAE7;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C0392B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v4'%3E%3C/path%3E%3Ccircle cx='12' cy='12' r='9'%3E%3C/circle%3E%3Cpath d='M12 16h.01'%3E%3C/path%3E%3C/svg%3E");}
@media(max-width:760px){.pc-box{width:100%;}}

/* ===== PROJECT PAGE ===== */
.project-hero{aspect-ratio:16/7;border-radius:var(--radius-card);overflow:hidden;background:var(--gray-light);border:1px solid #E7E9EE;margin-bottom:30px;}
.project-hero picture{width:100%;height:100%;}
.project-hero img{width:100%;height:100%;object-fit:cover;}
.project-meta-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:#E7E9EE;border:1px solid #E7E9EE;margin-bottom:36px;}
@media(min-width:700px){.project-meta-grid{grid-template-columns:repeat(4,1fr);}}
.project-meta-grid div{background:var(--white);padding:16px 18px;}
.project-meta-grid .k{font-size:11.5px;color:#8A93A2;text-transform:uppercase;letter-spacing:0.05em;font-family:var(--font-mono);}
.project-meta-grid .v{font-size:14.5px;color:var(--blue-deep);font-weight:700;margin-top:4px;}
.project-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:30px 0;}
@media(min-width:700px){.project-gallery{grid-template-columns:repeat(4,1fr);}}
.project-gallery div{aspect-ratio:1/1;border-radius:var(--radius-card);overflow:hidden;background:var(--gray-light);border:1px solid #E7E9EE;}
.project-gallery picture{width:100%;height:100%;}
.project-gallery img{width:100%;height:100%;object-fit:cover;}

/* ===== TAI LIEU PAGE EXTRA ===== */
.tl-note{background:#EEF4FD;border:1px solid #CBDCF7;border-radius:var(--radius-card);padding:16px 20px;font-size:13.5px;color:#0A2E63;margin-bottom:30px;}

/* ===== KIEN THUC HUB ===== */
.kt-cluster-tag{display:inline-block;font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:0.06em;color:var(--white);background:var(--blue);padding:3px 9px;border-radius:20px;margin-bottom:10px;}

/* ===== KEYWORD NOTE (internal seo hint box on LP pages) ===== */
.seo-note{font-size:12px;color:#8A93A2;margin-top:10px;}

/* ===== HERO 2.0 (Stitch-style: light bg, 2-col, stat row, image card) ===== */
.hero2{position:relative;padding:calc(var(--section-gap) - 20px) 0 var(--section-gap);overflow:hidden;}
.hero2-grid{display:grid;gap:var(--grid-gutter);align-items:center;}
@media(min-width:960px){.hero2-grid{grid-template-columns:1fr 1fr;column-gap:64px;}}
.hero2-chip{display:inline-flex;align-items:center;gap:8px;background:var(--gray-light);color:var(--blue);padding:7px 16px 7px 12px;border-radius:var(--radius-pill);border:1px solid #DCE6F7;font-size:11.5px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:20px;}
.hero2 h1{font-size:clamp(34px,4.2vw,52px);line-height:1.12;color:var(--blue-deep);margin-bottom:20px;letter-spacing:-0.01em;}
.hero2 h1 span{color:var(--blue);}
.hero2 p.sub{font-size:17px;color:#4B5563;max-width:520px;margin-bottom:28px;}
.hero2-ctas{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:36px;}
.hero2-stats{display:flex;align-items:center;gap:28px;padding-top:28px;border-top:1px solid var(--border);}
.hero2-stats .divider{width:1px;height:38px;background:var(--border);}
.hero2-stats .num{font-size:24px;font-weight:700;color:var(--blue-deep);font-family:var(--font-display);}
.hero2-stats .label{font-size:12px;color:#6B7480;text-transform:uppercase;letter-spacing:0.03em;margin-top:2px;}
.hero2-media{position:relative;}
.hero2-frame-gradient{background:linear-gradient(135deg, var(--blue-deep) 0%, var(--blue) 58%, var(--blue-bright) 100%);display:flex;align-items:center;justify-content:center;padding:40px;}
.hgf-orb{position:absolute;inset:0;width:100%;height:100%;}
.hgf-copy{position:relative;z-index:1;text-align:center;max-width:340px;}
.hgf-eyebrow{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:rgba(255,255,255,0.75);margin-bottom:14px;}
.hgf-copy h3{color:var(--white);font-size:clamp(21px,2.4vw,27px);line-height:1.3;margin-bottom:16px;}
.hgf-copy p{color:rgba(255,255,255,0.8);font-size:14.5px;line-height:1.6;}
.hero2-frame{position:relative;aspect-ratio:4/5;border-radius:var(--radius-card-lg);overflow:hidden;background:var(--gray-light);border:1px solid var(--border);box-shadow:0 30px 60px -20px rgba(0,9,91,0.18);}
.hero2-frame video,.hero2-frame img{width:100%;height:100%;object-fit:cover;}
@media(min-width:960px){.hero2-frame{aspect-ratio:auto;height:640px;}}

/* ===== CORE VALUES (vertical icon cards, Stitch pattern) ===== */
.cv-grid{display:grid;grid-template-columns:1fr;gap:28px;}
@media(min-width:640px){.cv-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1080px){.cv-grid{grid-template-columns:repeat(3,1fr);}}
.cv-card{background:var(--gray-light);border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--card-padding);transition:border-color .2s;}
.cv-card:hover{border-color:var(--blue);}
.cv-card .cv-ic{width:56px;height:56px;border-radius:6px;background:var(--white);box-shadow:0 1px 3px rgba(0,9,91,0.08);display:flex;align-items:center;justify-content:center;margin-bottom:28px;transition:background .2s;}
.cv-card:hover .cv-ic{background:var(--blue);}
.cv-card:hover .cv-ic svg{stroke:var(--white);}
.cv-card .cv-ic svg{width:24px;height:24px;stroke:var(--blue);transition:stroke .2s;}
.cv-card h3{font-size:19px;margin-bottom:12px;}
.cv-card p{font-size:14px;color:#59616F;line-height:1.6;}

/* ===== MANUFACTURING BAND (dark, 2-col, Stitch pattern) ===== */
.mfg{background:var(--blue-deep);color:var(--white);}
.mfg-grid{display:grid;gap:var(--grid-gutter);align-items:center;}
@media(min-width:960px){.mfg-grid{grid-template-columns:5fr 7fr;column-gap:64px;}}
.mfg-copy .eyebrow{color:#9FC1FF;}
.mfg-copy h2{color:var(--white);font-size:clamp(26px,3.2vw,38px);margin:12px 0 16px;}
.mfg-copy p.lead{color:rgba(255,255,255,0.78);font-size:16px;line-height:1.7;max-width:480px;margin-bottom:28px;}
.mfg-stats{display:grid;grid-template-columns:1fr 1fr;gap:28px 32px;margin-bottom:32px;}
.mfg-stats .num{font-size:26px;font-weight:700;color:var(--white);font-family:var(--font-display);}
.mfg-stats .label{font-size:11.5px;color:rgba(255,255,255,0.6);text-transform:uppercase;letter-spacing:0.05em;margin-top:6px;}
.mfg-media{position:relative;border-radius:var(--radius-card-lg);overflow:hidden;border:1px solid rgba(255,255,255,0.14);box-shadow:0 30px 60px -18px rgba(0,0,0,0.4);aspect-ratio:16/10;}
.mfg-media img,.mfg-media picture{width:100%;height:100%;object-fit:cover;display:block;}
.mfg-caption{position:absolute;left:24px;bottom:24px;background:rgba(255,255,255,0.12);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.2);border-radius:var(--radius-card);padding:16px 20px;}
.mfg-caption p:first-child{color:var(--white);font-weight:700;font-size:14.5px;}
.mfg-caption p:last-child{color:rgba(255,255,255,0.72);font-size:12.5px;margin-top:2px;}

/* ===== PRODUCT CATEGORY CARDS (3-col material clusters, Stitch pattern) ===== */
.cats3{display:grid;grid-template-columns:1fr;gap:var(--grid-gutter);}
@media(min-width:760px){.cats3{grid-template-columns:repeat(3,1fr);}}
.cat-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-card-lg);padding:var(--card-padding);display:flex;flex-direction:column;height:100%;transition:border-color .2s, box-shadow .2s;}
.cat-card:hover{border-color:var(--blue);box-shadow:0 20px 40px -16px rgba(0,9,91,0.14);}
.cat-card .cat-media{aspect-ratio:1/1;background:var(--gray-light);border-radius:var(--radius-card);margin-bottom:28px;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.cat-card .cat-media picture{width:100%;height:100%;}
.cat-card .cat-media img{width:100%;height:100%;object-fit:cover;border-radius:0;}
.cat-card h3{font-size:20px;margin-bottom:12px;flex-shrink:0;}
.cat-card p{font-size:14px;color:#59616F;flex-grow:1;line-height:1.6;}
.cat-card .cat-link{display:inline-flex;align-items:center;gap:6px;margin-top:24px;font-weight:700;font-size:13.5px;color:var(--blue);}
.cat-card .cat-link span{transition:transform .18s;}
.cat-card:hover .cat-link span{transform:translateX(3px);}

/* ===== PROJECT SPOTLIGHT (2-col, image overlay caption, Stitch pattern) ===== */
.proj2{display:grid;gap:var(--grid-gutter);align-items:center;}
@media(min-width:960px){.proj2{grid-template-columns:5fr 7fr;column-gap:64px;}}
.proj2-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--card-padding);margin-top:28px;}
.proj2-card .proj2-tag{display:inline-flex;align-items:center;gap:6px;background:var(--gray-light);color:var(--blue);font-size:12.5px;font-weight:700;padding:5px 12px;border-radius:var(--radius-pill);margin-bottom:16px;}
.proj2-card h4{font-size:21px;margin-bottom:10px;}
.proj2-card p{font-size:14.5px;color:#59616F;margin-bottom:16px;}
.proj2-media{position:relative;border-radius:var(--radius-card-lg);overflow:hidden;border:1px solid var(--border);height:480px;}
.proj2-media img,.proj2-media picture{width:100%;height:100%;object-fit:cover;display:block;}
.proj2-media::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg, rgba(0,9,91,0.85) 0%, rgba(0,9,91,0.15) 45%, transparent 70%);}
.proj2-caption{position:absolute;left:32px;bottom:32px;right:32px;z-index:2;color:var(--white);}
.proj2-caption .loc{font-size:12px;text-transform:uppercase;letter-spacing:0.1em;opacity:0.8;margin-bottom:8px;}
.proj2-caption h3{color:var(--white);font-size:24px;margin-bottom:14px;}
.proj2-pills{display:flex;gap:10px;flex-wrap:wrap;}
.proj2-pills span{background:rgba(255,255,255,0.16);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,0.25);color:var(--white);font-size:12.5px;padding:6px 14px;border-radius:var(--radius-pill);}

/* ===== CTA BANNER (large rounded panel, Stitch pattern) ===== */
.cta-banner-wrap{padding:var(--section-gap) 0;}
.cta-banner{max-width:var(--wrap-max);margin:0 auto;background:linear-gradient(120deg, var(--blue-deep) 0%, var(--blue) 55%, var(--blue-bright) 100%);border-radius:14px;padding:72px 40px;text-align:center;color:var(--white);}
@media(min-width:760px){.cta-banner{padding:88px 64px;}}
.cta-banner h2{color:var(--white);font-size:clamp(28px,3.6vw,40px);max-width:640px;margin:0 auto 18px;}
.cta-banner p{color:rgba(255,255,255,0.82);font-size:16.5px;max-width:520px;margin:0 auto 36px;}
.cta-banner-wide p{max-width:800px;}
.cta-banner .hero2-ctas{justify-content:center;margin-bottom:0;}
.cta-banner .btn-light{border-color:rgba(255,255,255,0.6);}

/* ===== FOOTER 2.0 additions (icon rows, circular social) ===== */
.foot-contact{display:flex;flex-direction:column;gap:16px;}
.foot-contact-row{display:flex;align-items:flex-start;gap:12px;font-size:13.5px;color:rgba(255,255,255,0.62);}
.foot-contact-row svg{width:17px;height:17px;stroke:#9FC1FF;flex-shrink:0;margin-top:2px;}

/* ===== ABOUT PAGE: Brand story 2-col with floating quote badge ===== */
.story2{display:grid;gap:var(--grid-gutter);align-items:center;}
@media(min-width:960px){.story2{grid-template-columns:1fr 1fr;column-gap:64px;}}
.story2-copy h2{font-size:clamp(24px,3vw,32px);color:var(--blue);margin-bottom:24px;}
.story2-copy p{color:#3C4657;font-size:16px;line-height:1.75;margin-bottom:18px;}
.story-stats{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:40px;padding-top:32px;border-top:1px solid var(--border);}
.story-stats .num{font-size:26px;font-weight:700;color:var(--blue);font-family:var(--font-display);}
.story-stats .label{font-size:11.5px;color:#6B7480;text-transform:uppercase;letter-spacing:0.05em;margin-top:6px;}
.story2-media{position:relative;}
.story-frame{aspect-ratio:1/1;background:var(--gray-light);border:1px solid var(--border);border-radius:var(--radius-card);padding:14px;}
.story-frame picture,.story-frame img{width:100%;height:100%;object-fit:cover;border-radius:5px;display:block;}
.story-badge{position:absolute;left:-16px;bottom:-16px;background:var(--blue);color:var(--white);padding:20px 24px;border-radius:var(--radius-card);max-width:230px;box-shadow:0 16px 32px -12px rgba(0,9,91,0.35);}
.story-badge span{font-family:var(--font-display);font-weight:700;font-size:15px;text-transform:uppercase;line-height:1.4;}
@media(max-width:760px){.story-badge{display:none;}}

/* ===== ABOUT PAGE: Mission / Vision 2-col cards ===== */
.mv-grid{display:grid;grid-template-columns:1fr;gap:var(--grid-gutter);}
@media(min-width:760px){.mv-grid{grid-template-columns:1fr 1fr;}}
.mv-card{padding:var(--card-padding);border-radius:var(--radius-card);border:1px solid var(--border);}
.mv-card.is-light{background:var(--white);}
.mv-card.is-dark{background:var(--blue);color:var(--white);border-color:var(--blue);}
.mv-card .mv-ic{width:52px;height:52px;border-radius:6px;background:var(--gray-light);display:flex;align-items:center;justify-content:center;margin-bottom:24px;}
.mv-card.is-dark .mv-ic{background:rgba(255,255,255,0.16);}
.mv-card .mv-ic svg{width:24px;height:24px;stroke:var(--blue);}
.mv-card.is-dark .mv-ic svg{stroke:var(--white);}
.mv-card h3{font-size:19px;text-transform:uppercase;letter-spacing:0.02em;margin-bottom:14px;}
.mv-card.is-dark h3{color:var(--white);}
.mv-card p{font-size:15px;line-height:1.7;color:#59616F;}
.mv-card.is-dark p{color:rgba(255,255,255,0.85);}

/* ===== Centered section head with underline bar ===== */
.sec-head.center-bar{max-width:none;margin-left:auto;margin-right:auto;text-align:center;align-items:center;}
.sec-head.center-bar::after{content:"";display:block;width:56px;height:3px;background:var(--blue);margin-top:20px;border-radius:2px;}

/* ===== Factory mosaic (8-col big + 4-col stacked pair) ===== */
.mosaic12{display:grid;grid-template-columns:1fr;gap:var(--grid-gutter);}
@media(min-width:860px){.mosaic12{grid-template-columns:repeat(12,1fr);}}
.mosaic12 .big{border-radius:var(--radius-card);overflow:hidden;background:var(--gray-light);border:1px solid var(--border);aspect-ratio:16/10;}
.mosaic12 .side{display:flex;flex-direction:row;gap:var(--grid-gutter);}
.mosaic12 .cell{border-radius:var(--radius-card);overflow:hidden;background:var(--gray-light);border:1px solid var(--border);}
.mosaic12 .side .cell{flex:1;border-radius:var(--radius-card);overflow:hidden;background:var(--gray-light);border:1px solid var(--border);aspect-ratio:1/1;}
@media(min-width:860px){.mosaic12 .big{grid-column:span 8;} .mosaic12 .side{grid-column:span 4;flex-direction:column;} .mosaic12 .side .cell{aspect-ratio:auto;flex:1;}}
.mosaic12 img,.mosaic12 picture{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s;}
.mosaic12 .cell:hover img,.mosaic12 .big:hover img{transform:scale(1.04);}

/* ===== PRODUCTION PAGE: Photo hero with dark overlay ===== */
.hero-photo{position:relative;min-height:460px;display:flex;align-items:center;overflow:hidden;background:var(--blue-deep);}
@media(min-width:761px){.hero-photo{height:575px;}}
.hero-photo-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0.55;}
@media(max-width:760px),(prefers-reduced-motion:reduce){.hero-photo-video{display:none;}}
.hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg, rgba(0,9,91,0.92) 10%, rgba(0,9,91,0.55) 60%, rgba(0,9,91,0.35) 100%);}
.hero-photo-inner{position:relative;z-index:2;padding-top:64px;padding-bottom:56px;width:100%;text-align:center;}
.hero-photo .hero2-chip{background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.25);color:var(--white);}
.hero-photo .hero2-ctas{justify-content:center;}
.hero-photo .hero2-stats{justify-content:center;border-top-color:rgba(255,255,255,0.25);}
.hero-photo .hero2-stats .divider{background:rgba(255,255,255,0.25);}
.hero-photo .hero2-stats .num{color:var(--white);}
.hero-photo .hero2-stats .label{color:rgba(255,255,255,0.75);}
.hero-photo h1{color:var(--white);font-size:clamp(28px,4vw,42px);margin:16px auto 18px;max-width:920px;}
.hero-photo p.sub{color:rgba(255,255,255,0.85);max-width:900px;margin:0 auto 32px;}

/* ===== PRODUCTION PAGE: Machine/equipment cards ===== */
.mc-grid{display:grid;grid-template-columns:1fr;gap:var(--grid-gutter);}
@media(min-width:760px){.mc-grid{grid-template-columns:repeat(3,1fr);}}
.mc-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--card-padding);transition:border-color .2s, box-shadow .2s;}
.mc-card:hover{border-color:var(--blue);box-shadow:0 16px 32px -16px rgba(0,9,91,0.16);}
.mc-card .mc-ic{width:52px;height:52px;border-radius:6px;background:var(--gray-light);display:flex;align-items:center;justify-content:center;margin-bottom:24px;}
.mc-card .mc-ic svg{width:24px;height:24px;stroke:var(--blue);}
.mc-card h3{font-size:18px;margin-bottom:12px;}
.mc-card p{font-size:14px;color:#59616F;line-height:1.65;margin-bottom:20px;}
.mc-card .mc-photo{aspect-ratio:16/10;border-radius:6px;overflow:hidden;background:var(--gray-light);}
.mc-card .mc-photo img,.mc-card .mc-photo picture{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s;}
.mc-card:hover .mc-photo img{transform:scale(1.06);}

/* ===== PRODUCTION PAGE: Numbered horizontal timeline ===== */
.timeline4{display:grid;grid-template-columns:1fr;gap:36px;position:relative;}
@media(min-width:860px){.timeline4{grid-template-columns:repeat(4,1fr);}
  .timeline4::before{content:"";position:absolute;top:26px;left:calc(12.5% + 26px);right:calc(12.5% + 26px);height:1px;background:var(--border);}}
.timeline4 .t-step{text-align:center;position:relative;z-index:1;}
.timeline4 .t-num{width:52px;height:52px;border-radius:50%;background:var(--blue);color:var(--white);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:16px;margin:0 auto 20px;border:4px solid var(--white);box-shadow:0 2px 8px rgba(0,9,91,0.15);}
.timeline4 h4{font-size:13px;text-transform:uppercase;letter-spacing:0.04em;color:var(--blue-deep);margin-bottom:10px;}
.timeline4 p{font-size:13.5px;color:#6B7480;padding:0 8px;}

/* ===== PRODUCTION PAGE: Dark QC band (image + checklist) ===== */
.qcx{background:var(--blue-deep);color:var(--white);}
.qcx-grid{display:grid;gap:var(--grid-gutter);align-items:center;}
@media(min-width:960px){.qcx-grid{grid-template-columns:1fr 1fr;column-gap:64px;}}
.qcx-media{position:relative;}
.qcx-media .frame{aspect-ratio:16/10;border-radius:var(--radius-card-lg);overflow:hidden;border:1px solid rgba(255,255,255,0.14);}
.qcx-media .frame img,.qcx-media .frame picture{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(0.3);}
.qcx-badge{position:absolute;right:-14px;bottom:-20px;background:var(--blue);border:1px solid rgba(255,255,255,0.2);border-radius:var(--radius-card);padding:20px 24px;max-width:260px;box-shadow:0 20px 40px -14px rgba(0,0,0,0.5);}
.qcx-badge p:first-child{font-size:11.5px;text-transform:uppercase;letter-spacing:0.08em;font-weight:700;color:#9FC1FF;margin-bottom:6px;}
.qcx-badge p:last-child{font-size:13.5px;color:rgba(255,255,255,0.85);}
@media(max-width:760px){.qcx-badge{display:none;}}
.qcx-copy h2{color:var(--white);font-size:clamp(24px,3vw,32px);margin-bottom:8px;}
.qcx-list{margin-top:28px;display:flex;flex-direction:column;gap:24px;}
.qcx-list .qi{display:flex;gap:18px;align-items:flex-start;}
.qcx-list .qi-ic{width:44px;height:44px;border-radius:50%;border:1px solid rgba(159,193,255,0.4);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.qcx-list .qi-ic svg{width:20px;height:20px;stroke:#9FC1FF;}
.qcx-list h5{font-size:14px;text-transform:uppercase;letter-spacing:0.03em;color:var(--white);margin-bottom:6px;}
.qcx-list p{font-size:13.5px;color:rgba(255,255,255,0.65);line-height:1.6;}

/* ===== PRODUCT CATALOG: quick filter chip row ===== */
.filter-chips{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin-bottom:56px;}
/* ===== POLICY PAGE (Chính sách Bảo hành & Đổi trả) ===== */
.policy-hero{padding:40px 0 8px;}
.policy-hero h1{font-size:clamp(28px,3.6vw,40px);margin-bottom:10px;}
.policy-hero p{color:#59616F;font-size:15.5px;max-width:640px;}
.policy-num{display:inline-flex;align-items:center;gap:10px;margin-bottom:20px;}
.policy-num .ic{width:34px;height:34px;border-radius:8px;background:var(--blue);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.policy-num .ic svg{width:18px;height:18px;stroke:var(--white);}
.policy-num h2{font-size:21px;margin:0;color:var(--blue-deep);}

.alert-box{border:1.5px solid #E4534A;background:#FDEEEE;border-radius:var(--radius-card);padding:20px 22px;margin:22px 0 8px;}
.alert-box .alert-tag{display:flex;align-items:center;gap:8px;font-weight:700;color:#B3261E;font-size:13px;letter-spacing:0.03em;text-transform:uppercase;margin-bottom:8px;}
.alert-box .alert-tag svg{width:16px;height:16px;stroke:#B3261E;}
.alert-box p{color:#5C201C;font-size:14.5px;line-height:1.65;margin:0;}

.cond-grid{display:grid;gap:20px;}
@media(min-width:760px){.cond-grid{grid-template-columns:1fr 1fr;}}
.cond-card{border:1px solid var(--border);border-radius:var(--radius-card);padding:24px;background:var(--white);}
.cond-card.is-ok{border-top:3px solid #2E9E5B;}
.cond-card.is-no{border-top:3px solid #D5453C;}
.cond-card .cond-head{display:flex;align-items:center;gap:9px;margin-bottom:16px;}
.cond-card .cond-head svg{width:19px;height:19px;}
.cond-card.is-ok .cond-head svg{stroke:#2E9E5B;}
.cond-card.is-no .cond-head svg{stroke:#D5453C;}
.cond-card .cond-head h3{font-size:16.5px;margin:0;color:var(--blue-deep);}
.cond-list{display:flex;flex-direction:column;gap:12px;}
.cond-list li{display:flex;gap:10px;font-size:14px;line-height:1.6;color:#3C4657;}
.cond-list li svg{width:16px;height:16px;flex-shrink:0;margin-top:3px;}
.cond-card.is-ok .cond-list li svg{stroke:#2E9E5B;}
.cond-card.is-no .cond-list li svg{stroke:#D5453C;}

.steps-row{display:grid;gap:28px;position:relative;}
@media(min-width:760px){.steps-row{grid-template-columns:repeat(4,1fr);}
.steps-row::before{content:"";position:absolute;top:26px;left:12%;right:12%;height:1px;background:var(--border);z-index:0;}}
.step-item{position:relative;z-index:1;text-align:center;}
.step-item .step-ic{width:52px;height:52px;border-radius:12px;background:var(--blue);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;box-shadow:0 4px 14px rgba(0,87,184,0.25);}
.step-item .step-ic svg{width:24px;height:24px;stroke:var(--white);}
.step-item .step-label{font-family:var(--font-mono);font-size:11px;letter-spacing:0.1em;color:var(--blue-bright);font-weight:700;text-transform:uppercase;margin-bottom:6px;}
.step-item h4{font-size:15px;margin-bottom:8px;color:var(--blue-deep);}
.step-item p{font-size:13.5px;color:#59616F;line-height:1.6;}

.exchange-card{border:1px solid var(--border);border-radius:var(--radius-card);padding:26px;background:var(--gray-light);}
.exchange-item{display:flex;gap:14px;margin-bottom:18px;}
.exchange-item:last-child{margin-bottom:0;}
.exchange-item .ex-ic{width:36px;height:36px;border-radius:8px;background:var(--white);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.exchange-item .ex-ic svg{width:18px;height:18px;stroke:var(--blue);}
.exchange-item h4{font-size:14.5px;margin-bottom:4px;color:var(--blue-deep);}
.exchange-item p{font-size:13.5px;color:#59616F;line-height:1.6;}

.commit-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:8px;}
.commit-pills span{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:var(--radius-pill);border:1px solid rgba(255,255,255,0.35);font-size:13px;font-weight:700;color:var(--white);background:rgba(255,255,255,0.08);}
.commit-pills svg{width:15px;height:15px;stroke:var(--white);}
.cta-banner .commit-ic{width:52px;height:52px;border-radius:12px;background:rgba(255,255,255,0.14);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;}
.cta-banner .commit-ic svg{width:24px;height:24px;stroke:var(--white);}

.filter-chips .chips{display:flex;flex-wrap:wrap;gap:10px;}
.filter-chips .chips a{padding:8px 16px;border-radius:var(--radius-pill);border:1px solid var(--border);font-size:13px;font-weight:700;color:var(--blue-deep);transition:all .2s;}
.filter-chips .chips a:hover,.filter-chips .chips a.is-active{background:var(--blue);border-color:var(--blue);color:var(--white);}
.filter-chips .count{font-size:12.5px;color:#6B7480;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:0.04em;}
.filter-chips .count b{color:var(--blue);}

/* ===== PRODUCT CATALOG: premium dark cluster (Cau Dai Loan) ===== */
.material-cluster.is-premium{background:var(--blue-deep);color:var(--white);border-radius:var(--radius-card-lg);padding:48px;margin-bottom:80px;}
.material-cluster.is-premium .material-head{border-bottom-color:rgba(255,255,255,0.18);}
.material-cluster.is-premium .material-head h2{color:var(--white);}
.material-cluster.is-premium .material-head p{color:rgba(255,255,255,0.72);}
.material-cluster.is-premium .eyebrow{color:#9FC1FF;}
.material-cluster.is-premium .material-tag{background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.2);color:var(--white);}
.material-cluster.is-premium .pc-box{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.16);color:rgba(255,255,255,0.75);}
.material-cluster.is-premium .pc-box.pros strong{color:#9FC1FF;}
.material-cluster.is-premium .pc-box.pros strong::before{background-color:rgba(159,193,255,0.18);}
.material-cluster.is-premium .pc-box.cons strong{color:#FFB199;}
.material-cluster.is-premium .pc-box.cons strong::before{background-color:rgba(255,177,153,0.18);}
@media(max-width:760px){.material-cluster.is-premium{padding:28px 20px;}}

/* ===== PRODUCT CATALOG: qualitative comparison table ===== */
.spec-table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius-card);}
.spec-table{width:100%;border-collapse:collapse;min-width:640px;}
.spec-table th{background:var(--blue);color:var(--white);text-align:left;padding:18px 22px;font-size:12px;text-transform:uppercase;letter-spacing:0.05em;font-weight:700;}
.spec-table td{padding:20px 22px;border-bottom:1px solid var(--border);font-size:14px;color:#3C4657;}
.spec-table tr:last-child td{border-bottom:none;}
.spec-table td:first-child{font-weight:700;color:var(--blue-deep);}
.spec-table tr:hover td{background:var(--gray-light);}
.spec-table .hl{color:var(--blue);font-weight:700;}

/* ===== PRODUCT CATALOG: contact cards (hotline/email) ===== */
.contact-cards{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;margin-top:8px;}
.ccard{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-card);padding:20px 24px;display:flex;align-items:center;gap:16px;min-width:270px;text-align:left;}
.ccard .ccard-ic{width:48px;height:48px;border-radius:50%;background:var(--gray-light);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ccard .ccard-ic svg{width:22px;height:22px;stroke:var(--blue);}
.ccard .ccard-label{font-size:11px;text-transform:uppercase;letter-spacing:0.05em;color:#6B7480;margin-bottom:4px;}
.ccard .ccard-value{font-size:16px;font-weight:700;color:var(--blue-deep);}

/* ===== PROJECTS PAGE: Stitch-style spotlight card ===== */
.proj-spotlight{display:grid;grid-template-columns:1fr;gap:var(--grid-gutter);margin-bottom:56px;}
@media(min-width:900px){.proj-spotlight{grid-template-columns:1.5fr 1fr;}}
.proj-spotlight-media{border-radius:var(--radius-card-lg);overflow:hidden;background:var(--gray-light);border:1px solid var(--border);aspect-ratio:4/3;}
@media(min-width:900px){.proj-spotlight-media{aspect-ratio:auto;}}
.proj-spotlight-media picture,.proj-spotlight-media img{width:100%;height:100%;object-fit:cover;display:block;}
.proj-info-card{border:1px solid var(--border);border-radius:var(--radius-card-lg);padding:var(--card-padding);display:flex;flex-direction:column;background:var(--white);}
.proj-badge-header{background:var(--blue-deep);color:var(--white);border-radius:var(--radius-card);padding:18px 20px;margin-bottom:24px;}
.proj-badge-header .tag{font-size:11px;text-transform:uppercase;letter-spacing:0.08em;color:#9FC1FF;font-weight:700;margin-bottom:6px;}
.proj-badge-header h3{color:var(--white);font-size:20px;}
.proj-fields{display:grid;grid-template-columns:1fr 1fr;gap:18px 16px;margin-bottom:22px;}
.proj-fields .pf-label{font-size:10.5px;text-transform:uppercase;letter-spacing:0.06em;color:#6B7480;margin-bottom:5px;}
.proj-fields .pf-value{font-size:14px;font-weight:700;color:var(--blue-deep);}
.proj-quote{font-size:13.5px;font-style:italic;color:#59616F;border-top:1px solid var(--border);padding-top:18px;margin-bottom:22px;line-height:1.6;flex-grow:1;}