*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,"Noto Sans JP",sans-serif;color:#092d52;background:#fff;line-height:1.7}.header{height:78px;display:flex;align-items:center;justify-content:space-between;padding:0 4.5%;background:#fff;position:sticky;top:0;z-index:10;box-shadow:0 1px 10px #092d5212}.logo{display:flex;gap:12px;align-items:center;text-decoration:none;color:#092d52}.logo-mark{font-size:48px;line-height:1;font-weight:300;border:2px solid #0a3762;padding:0 5px;height:47px}.logo b{font-size:25px;letter-spacing:1px;display:block}.logo small{display:block;font-size:10px}.nav{display:flex;align-items:center;gap:28px}.nav a{color:#092d52;text-decoration:none;font-size:13px;font-weight:bold}.nav-contact{background:#1164a8!important;color:#fff!important;padding:12px 20px;border-radius:5px}.menu-btn{display:none;background:none;border:0;font-size:26px;color:#092d52}.hero{min-height:500px;position:relative;overflow:hidden;background:linear-gradient(110deg,#082e52 0%,#0d4775 45%,#dce8f0 100%);color:#fff}.hero-bg{position:absolute;inset:0;background:linear-gradient(110deg,#06294bdd,#0b4c7fbb 55%,#dce8f022),repeating-linear-gradient(0deg,transparent 0 39px,#ffffff12 40px),repeating-linear-gradient(90deg,transparent 0 59px,#ffffff0c 60px);transform:skewX(-7deg) scale(1.1);opacity:.8}.hero:after{content:"CAD  ────────┐\A          │\A      ┌───┴───┐\A      │ DOOR  │\A      └───────┘";white-space:pre;position:absolute;right:7%;top:20%;font:28px/2 monospace;color:#fff4;transform:rotate(-7deg)}.hero-content{position:relative;z-index:1;padding:75px 5%;max-width:800px}.eyebrow,.section span,.price span,.contact span{font-size:12px;font-weight:bold;letter-spacing:2px;color:#1a72b7}.hero .eyebrow{color:#9bc9ed}.hero h1{font-size:42px;line-height:1.35;margin:12px 0 20px;letter-spacing:1px}.hero p{font-size:18px}.btn{display:inline-block;background:#1475c3;color:#fff;text-decoration:none;padding:14px 24px;border-radius:5px;margin-top:12px;font-weight:bold}.hero-caption{position:absolute;right:6%;bottom:60px;z-index:1;font-size:17px;text-align:right}.section{padding:85px 5%}.section-head{display:grid;grid-template-columns:1fr 1.6fr;gap:50px;margin-bottom:35px}.section h2,.company h2,.price h2,.contact h2{font-size:32px;line-height:1.2;margin:6px 0 15px}.section-head>p{margin-top:25px;color:#47627a}.cards{display:grid;grid-template-columns:repeat(8,1fr);gap:12px}.cards article{background:#f3f7fa;text-align:center;padding:24px 8px;min-height:160px}.cards i{font-style:normal;font-size:32px}.cards h3{font-size:14px;margin:8px 0}.cards p{font-size:11px;color:#5c7184;margin:0}.strength{background:#eef5f9;padding:75px 5%}.strength-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.strength-item{background:#fff;padding:27px;display:flex;gap:18px;box-shadow:0 5px 20px #092d5208}.strength-item>b{background:#082e52;color:#fff;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none}.strength-item h3{margin:0 0 4px;font-size:17px}.strength-item p{margin:0;font-size:13px;color:#61778b}.flow{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.flow>div{text-align:center;position:relative}.flow b{display:block;font-size:11px;color:#fff;background:#0b3d69;width:28px;height:28px;border-radius:50%;line-height:28px;margin:auto}.flow span{display:grid;place-items:center;margin:10px auto;width:70px;height:70px;border-radius:50%;background:#f0f5f8;font-size:25px}.flow h3{font-size:13px;margin:5px}.flow p{font-size:10px;color:#63778a;margin:0}.price{padding:45px 5%;background:#eaf3f9;display:grid;grid-template-columns:1fr 2fr 1fr;align-items:center;gap:25px}.price>div:nth-child(2){display:flex;gap:18px;align-items:center}.price strong{font-size:25px;background:#0b3d69;color:#fff;border-radius:50%;width:50px;height:50px;display:grid;place-items:center}.price p{margin:0;font-size:13px}.outline-btn{border:1px solid #1971b4;color:#0b4a78;text-decoration:none;padding:13px;text-align:center;border-radius:5px;font-weight:bold}.company-table{max-width:850px;border-top:1px solid #ccd7df}.company-table div{display:grid;grid-template-columns:180px 1fr;border-bottom:1px solid #ccd7df;padding:13px}.company-table b{font-size:13px}.company-table span{font-size:13px}.contact{background:#092f52;color:#fff;padding:65px 5%;display:grid;grid-template-columns:1fr 1.4fr;gap:50px;align-items:center}.contact h2{color:#fff}.contact span{color:#8fc3e8}.contact p{color:#c4d6e5}.contact-actions{display:grid;grid-template-columns:1fr 1fr;gap:14px}.contact-actions a{background:#fff;color:#092f52;text-decoration:none;padding:20px;border-radius:5px}.contact-actions small{display:block;font-size:11px}.contact-actions b{font-size:14px}footer{background:#062743;color:#fff;padding:30px 5%;display:flex;align-items:center;gap:30px}.footer-logo{font-size:20px}.footer-logo small{display:block;font-size:9px}.footer-logo+nav{display:flex;gap:18px;flex:1;justify-content:center}.footer-logo+nav a{color:#dbe8f2;text-decoration:none;font-size:11px}footer>small{font-size:9px;color:#a9bdcd}@media(max-width:900px){.nav{gap:14px}.cards{grid-template-columns:repeat(4,1fr)}.flow{grid-template-columns:repeat(3,1fr);row-gap:35px}.price{grid-template-columns:1fr 2fr}.price .outline-btn{grid-column:2}.contact{grid-template-columns:1fr}.section-head{grid-template-columns:1fr}.footer-logo+nav{display:none}}@media(max-width:650px){.header{height:68px}.menu-btn{display:block}.nav{display:none;position:absolute;top:68px;left:0;right:0;background:#fff;padding:15px 5%;flex-direction:column;align-items:stretch;box-shadow:0 8px 15px #0001}.nav.open{display:flex}.nav-contact{text-align:center}.hero{min-height:570px}.hero-content{padding:60px 7%}.hero h1{font-size:31px}.hero p{font-size:15px}.hero-caption{right:7%;bottom:30px;font-size:13px}.section,.strength{padding:60px 6%}.cards{grid-template-columns:repeat(2,1fr)}.strength-grid{grid-template-columns:1fr}.flow{grid-template-columns:repeat(2,1fr)}.price{display:block;padding:40px 6%}.price>div:nth-child(2){margin:20px 0}.price .outline-btn{display:block}.company-table div{grid-template-columns:110px 1fr}.contact{padding:55px 6%}.contact-actions{grid-template-columns:1fr}footer{display:block;text-align:center}.footer-logo{margin-bottom:15px}}

.lang{display:flex;border:1px solid #1164a8;border-radius:5px;overflow:hidden;margin-left:6px}.lang button{border:0;background:#fff;color:#1164a8;font-size:12px;font-weight:bold;padding:9px 12px;cursor:pointer;font-family:inherit}.lang button.active{background:#1164a8;color:#fff}
.contact-form-box{max-width:850px;margin:35px auto 0;background:#f3f7fa;padding:40px;border-radius:6px}.contact-form-box span{font-size:12px;font-weight:bold;letter-spacing:2px;color:#1a72b7}.contact-form-box h2{font-size:28px;margin:6px 0 10px}.contact-form-box>p{color:#47627a;margin:0 0 22px}
#inquiry-form{display:grid;grid-template-columns:1fr 1fr;gap:18px}#inquiry-form label{display:block}#inquiry-form .full,#inquiry-form .btn,#inquiry-form .form-status{grid-column:1/-1}
.lb{display:block;font-size:13px;font-weight:bold;margin-bottom:6px;color:#092d52!important;letter-spacing:0!important}.lb em{font-style:normal;font-size:10px;background:#cdd9e2;color:#41596e;padding:2px 7px;border-radius:3px;margin-left:6px}.lb em.req{background:#d9455b;color:#fff}
#inquiry-form input[type=text],#inquiry-form input[type=tel],#inquiry-form input[type=email],#inquiry-form textarea{width:100%;padding:12px;border:1px solid #b9c9d6;border-radius:5px;font:inherit;font-size:14px;background:#fff;color:#092d52}#inquiry-form input:focus,#inquiry-form textarea:focus{outline:2px solid #1475c3;border-color:#1475c3}
#inquiry-form .btn{border:0;cursor:pointer;font-size:15px;font-family:inherit;justify-self:center;padding:15px 40px}#inquiry-form .btn:disabled{opacity:.6;cursor:wait}
.form-status{margin:0;text-align:center;font-size:14px;font-weight:bold}.form-status.ok{color:#1a8a4a}.form-status.err{color:#d9455b}
@media(max-width:650px){.lang{align-self:flex-start;margin:8px 0 0}.contact-form-box{padding:25px 18px}#inquiry-form{grid-template-columns:1fr}}


/* ===== bổ sung (rà soát) ===== */
html{scroll-padding-top:78px}.nav a{white-space:nowrap}.section .lb{font-size:13px}
@media(max-width:1200px){.menu-btn{display:block}.nav{display:none;position:absolute;top:78px;left:0;right:0;background:#fff;padding:15px 5%;flex-direction:column;align-items:stretch;gap:14px;box-shadow:0 8px 15px #0001}.nav.open{display:flex}.nav-contact,.nav-login{text-align:center}.lang{align-self:flex-start;margin:8px 0 0}}
@media(max-width:650px){html{scroll-padding-top:68px}.nav{top:68px}}
.contact-page-hero{background:linear-gradient(110deg,#082e52,#0d4775);color:#fff;padding:60px 5%;text-align:center}.contact-page-hero span{font-size:12px;font-weight:bold;letter-spacing:2px;color:#9bc9ed}.contact-page-hero h1{font-size:36px;line-height:1.3;margin:8px 0 14px}.contact-page-hero p{margin:0;font-size:16px}
.contact-intro{text-align:center;margin-bottom:30px}.contact-intro p{color:#47627a;margin:0}
.contact-info-card{max-width:850px;margin:0 auto;border-top:1px solid #ccd7df}.contact-info-row{display:grid;grid-template-columns:180px 1fr;border-bottom:1px solid #ccd7df;padding:13px}.contact-info-row b,.contact-info-row span{font-size:13px}.contact-info-row span{font-weight:normal;letter-spacing:0;color:#092d52}
.contact-mail-box{max-width:850px;margin:35px auto 0;background:#eef5f9;padding:40px;border-radius:6px;text-align:center}.contact-mail-box h2{font-size:28px;margin:6px 0 10px}.contact-mail-box p{color:#47627a;margin:0 0 18px}.contact-mail-box p.contact-email{margin:16px 0 0;font-weight:bold}
.back-home{text-align:center;margin-top:40px}.back-home .outline-btn{display:inline-block}
@media(max-width:650px){.contact-page-hero{padding:45px 6%}.contact-page-hero h1{font-size:28px}.contact-info-row{grid-template-columns:110px 1fr}.contact-mail-box{padding:25px 18px}}

footer>small a{color:inherit;text-decoration:underline}

/* ===== v2: navy + cam ===== */
:root{--navy:#14233b;--ac:#e8872b}
body{color:var(--navy)}
.logo-mark{border-color:var(--ac)}.logo,.nav a,.menu-btn{color:var(--navy)}
.nav-contact,.btn{background:var(--ac)!important;color:#fff!important}
.lang{border-color:var(--navy)}.lang button{color:var(--navy)}.lang button.active{background:var(--navy);color:#fff}
.outline-btn{border-color:var(--ac);color:var(--navy)}
.section span,.price span,.contact-page-hero span,.contact-form-box span{color:var(--ac)}
.contact-page-hero{background:var(--navy)}.price{background:#f6efe6}.price strong,.strength-item>b,.flow b{background:var(--navy)}
.strength{background:#f3f5f8}footer{background:var(--navy)}
.hero{background:var(--navy);display:grid;grid-template-columns:1.1fr .9fr;align-items:center}
.hero-bg{background:repeating-linear-gradient(0deg,transparent 0 39px,#ffffff14 40px),repeating-linear-gradient(90deg,transparent 0 39px,#ffffff14 40px);transform:none;opacity:1}
.hero:after{display:none}.hero .eyebrow{color:var(--ac)}.hero-caption{display:none}
.hero-art{position:relative;z-index:1;padding:30px 5% 30px 0}.hero-art svg{width:100%;max-height:420px}
.facts{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:22px;font-size:13px;color:#cdd6e4;list-style:none;padding:0}
.facts li:before{content:"■ ";color:var(--ac);font-size:9px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.chips li{border:1px solid #c8d0dc;border-left:4px solid var(--ac);padding:10px 16px;font-weight:bold;font-size:14px}
.ptable{max-width:850px;border-top:1px solid #ccd7df}.ptable div{display:grid;grid-template-columns:1fr 160px;padding:12px;border-bottom:1px solid #ccd7df;font-size:14px}.ptable b{text-align:right;color:var(--ac)}
.note{font-size:13px;color:#47627a;max-width:850px}
details{max-width:850px;border-bottom:1px solid #ccd7df;padding:14px 4px}summary{font-weight:bold;cursor:pointer}details p{margin:8px 0 0;font-size:14px;color:#47627a}
@media(max-width:900px){.hero{grid-template-columns:1fr}.hero-art{display:none}}

/* ===== logo: cánh cửa + chấm cam ===== */
.logo-mark{font-size:0!important;width:28px;height:46px;padding:0;border:3px solid var(--navy);border-radius:3px;position:relative;display:block}
.logo-mark:after{content:"";position:absolute;right:4px;top:50%;width:7px;height:7px;margin-top:-3px;border-radius:50%;background:var(--ac)}
.fm{display:inline-block;width:17px;height:27px;border:2px solid #fff;border-radius:2px;position:relative;vertical-align:-6px}
.fm:after{content:"";position:absolute;right:2px;top:50%;width:5px;height:5px;margin-top:-2px;border-radius:50%;background:var(--ac)}
.policy{max-width:850px;margin:auto}.policy h3{margin:26px 0 6px;font-size:17px;border-left:4px solid var(--ac);padding-left:10px}.policy p{font-size:14px;margin:0}

/* ===== sửa: span trong bảng không bị kế thừa kiểu nhãn ===== */
.ptable span,.company-table span{font-weight:normal;letter-spacing:0;color:var(--navy);font-size:14px}
.company-table b{font-size:14px}
.ptable b{font-size:15px}
.hero{padding-left:5%}.hero-content{padding-left:0}
.strength .section-head span{font-size:12px;font-weight:bold;letter-spacing:2px;color:var(--ac)}
@media(max-width:650px){.hero h1{font-size:26px}.section-head{gap:4px}.section-head>p{margin-top:8px}}

/* ===== carousel 制作事例 + nút liên hệ nổi ===== */
.car{position:relative}
.track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.track::-webkit-scrollbar{display:none}
.track figure{flex:0 0 calc((100% - 28px)/3);margin:0;aspect-ratio:1.414/1;scroll-snap-align:start;scroll-snap-stop:always;border:1px solid #d5dbe5;background:#fff;cursor:zoom-in;overflow:hidden}
.track img{width:100%;height:100%;object-fit:contain;display:block;-webkit-user-drag:none}
.cb:disabled{opacity:.35;cursor:default}.cb:disabled:hover{background:var(--navy)}
/* lightbox xem ảnh */
.vw{position:fixed;inset:0;z-index:100;background:rgba(10,16,28,.94)}
.vw[hidden]{display:none}
.vw-st{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none}
.vw-st img{max-width:100%;max-height:100%;background:#fff;transform-origin:center;will-change:transform;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.vw-bar{position:absolute;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:flex;gap:8px;z-index:2}
.vw button{width:48px;height:48px;border:0;border-radius:50%;background:#fff;color:var(--navy);font-size:26px;line-height:1;cursor:pointer;box-shadow:0 2px 10px #0006;padding:0}
.vw-x{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));right:12px;z-index:2}
.cb{position:absolute;top:50%;margin-top:-22px;width:44px;height:44px;border:0;border-radius:50%;background:var(--navy);color:#fff;font-size:26px;line-height:1;cursor:pointer;z-index:2;box-shadow:0 2px 8px #0003}
.cb:hover{background:var(--ac)}.cb.prev{left:-14px}.cb.next{right:-14px}.cb[hidden]{display:none}
@media(max-width:900px){.track figure{flex-basis:calc((100% - 14px)/2)}}
@media(max-width:650px){.track figure{flex-basis:100%}.cb.prev{left:4px}.cb.next{right:4px}}
.fab{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:20;background:var(--ac);color:#fff;text-decoration:none;font-weight:bold;font-size:14px;padding:12px 18px;border-radius:999px;box-shadow:0 4px 14px #0004;opacity:0;transform:translateY(12px);pointer-events:none;transition:.25s}
.fab.on{opacity:1;transform:none;pointer-events:auto}.fab i{font-style:normal;margin-right:6px}

/* ===== chips thẳng hàng + nút liên hệ gọn ===== */
.chips{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.chips li{text-align:center;padding:14px 8px}.chips li.d{border-left-color:var(--navy)}
@media(max-width:900px){.chips{grid-template-columns:repeat(3,1fr)}}
@media(max-width:650px){.chips{grid-template-columns:repeat(2,1fr)}}
.fab{padding:10px 16px;font-size:13px}
@media(min-width:1201px){.fab{display:none}}
.fab.on.off{opacity:0;transform:translateY(12px);pointer-events:none}

/* ===== chips gọn: 2 hàng, rộng bằng nhau ===== */
.chipbox{width:fit-content;max-width:100%}
.chipbox .chips,.chips.fl{display:flex;flex-wrap:wrap;gap:10px}
.chipbox .chips{margin:0 0 10px}.chipbox .chips:last-child{margin:0}
.chipbox .chips li,.chips.fl li{padding:10px 16px;text-align:center}
.chipbox .chips li{flex:1 1 auto}.chips.fl li{flex:0 0 auto}