﻿.cms-contact{padding:28px;border:1px solid #d9e5dc;border-radius:16px;background:#f4f8f5}.cms-contact h2{margin-top:0}.cms-form{max-width:760px;margin:30px auto;padding:28px;border:1px solid #d9e5dc;border-radius:16px;background:white}.cms-form label{display:block;font-weight:600;margin:14px 0 5px}.cms-form input,.cms-form textarea{width:100%;padding:12px;border:1px solid #8a9e91;border-radius:8px;font:inherit}.cms-form input[type=checkbox]{width:auto}.cms-form textarea{min-height:140px}.cms-form button{margin-top:16px;cursor:pointer}.cms-form .message{padding:14px;background:#eef7ef;border:1px solid #b5d6bb;border-radius:8px}.cms-form .hp{position:absolute;left:-9999px}@media(max-width:600px){.cms-form{margin:12px;padding:18px}.cms-contact{padding:20px}}

/* MOBILE01: compact controls, explicit text sizing and reserved footer space. */
.cms-mobile-contact{display:none}
@media(max-width:760px){
 html{scroll-padding-bottom:calc(68px + env(safe-area-inset-bottom,0px))}
 body{padding-bottom:calc(68px + env(safe-area-inset-bottom,0px))}
 .cms-mobile-contact{position:fixed;bottom:0;left:0;right:0;width:100%;z-index:40;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.65fr) minmax(0,1.15fr);align-items:stretch;gap:6px;background:#075335;color:#fff;padding:6px 10px calc(6px + env(safe-area-inset-bottom,0px));box-shadow:0 -2px 8px #12342420;-webkit-text-size-adjust:100%;text-size-adjust:100%}
 .cms-mobile-contact a{display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:0;min-height:44px;margin:0;padding:0 3px;white-space:nowrap;text-align:center;font-size:13px;line-height:1.2;font-weight:700;border:1px solid #ffffff65;border-radius:6px;color:#fff;text-decoration:none}
}
@media(max-width:650px){
 .service-process{min-width:0}
 .service-process .process-photo{position:relative;min-height:0;min-width:0;max-width:100%;align-self:start}
 .service-process .process-photo>img{display:block;position:static;width:100%;max-width:100%;height:auto;object-fit:contain}
 .service-process .process-photo>div{position:static;margin:0;padding:14px 20px;font-size:16px;line-height:1.45;overflow-wrap:break-word}
}


.cms-form h1{font-size:clamp(30px,4vw,44px);margin:24px 0}.cms-form>a{display:inline-block;text-decoration:underline;margin-bottom:12px}

/* SPACING02: Reduce outer content spacing by 25%; preserve approved footer and CTA. */
.section{padding-top:45px;padding-bottom:45px}
.section-head{margin-bottom:28px}
.section.buyer-fit{padding-top:4px}
.section.portfolio{padding-top:11px}
.section.workshop{padding-top:15px}
.section.company-intro{padding-top:26px;padding-bottom:15px}
.section.technical-detail{padding-top:33px}
.section.service-options{padding-top:32px}
.section.faq{padding-top:20px;padding-bottom:35px}
.faq details{padding:16px 0}
.section.project-brief{margin-top:23px}
.cooperation{margin-bottom:35px}
.materials:not(.electronic-materials){margin-bottom:45px}
.partnership{padding-top:38px;padding-bottom:38px}
.process-copy{padding-top:35px;padding-bottom:35px}
.cta{padding-top:44px;padding-bottom:44px}
.cta .eyebrow{margin-bottom:18px}
footer{padding-top:36px;padding-bottom:16px;row-gap:20px}
footer p{margin-top:9px;margin-bottom:9px}
footer .foot-links{margin-top:12px}
footer .footer-contact{margin-top:12px;margin-bottom:12px;gap:5px}
footer .footbottom{padding-top:14px}
@media(max-width:850px){
 .section{padding-top:30px;padding-bottom:30px}
 .section-head{margin-bottom:24px}
 .section.technical-detail{padding-top:26px}
 .section.service-options{padding-top:26px}
 .section.faq{padding-top:18px;padding-bottom:26px}
 .partnership{padding-top:27px;padding-bottom:27px}
 .process-copy{padding-top:26px;padding-bottom:26px}
 .cta{padding-top:34px;padding-bottom:34px}
 footer{padding-top:28px;padding-bottom:16px;row-gap:18px}
 .cooperation{margin-bottom:26px}
 .materials:not(.electronic-materials){margin-bottom:30px}
}
@media(max-width:650px){
 .section.project-brief{margin-top:0}
 .section.company-intro{padding-top:21px;padding-bottom:15px}
}
@media(max-width:550px){
 .section.portfolio{padding-top:0}
 .cta-contact{margin-top:20px}
 footer .foot-links a{display:inline-flex;align-items:center;min-height:36px}
 footer .footer-contact>a{display:flex;align-items:center;min-height:32px}
 footer .footer-zalo{align-items:center;min-height:32px}
 footer .footer-zalo a{display:inline-flex;align-items:center;min-height:32px}
}

/* NAV01: materials link; switch to the existing Menu pattern on narrower laptops. */
@media(min-width:1301px){header nav{gap:18px}header nav>a{white-space:nowrap}}
@media(min-width:1101px) and (max-width:1300px){
 header{position:static;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 14px;align-items:center}
 header .menu{display:block;background:white;border:1px solid var(--line);color:var(--green);font-size:14px;line-height:1.4;padding:10px 12px;min-height:44px;appearance:none;border-radius:3px}
 header nav{display:none;grid-column:1/-1;width:100%;gap:0}
 header nav.open{display:flex;flex-direction:column;align-items:stretch}
 header nav a{padding:11px 12px;font-size:16px;line-height:1.5;min-height:46px}
 .solutions,.revision,.service-gallery,.service-options,#yeu-cau,.application-focus{scroll-margin-top:16px}
}

/* NAV02: active location, one gentle home sweep, contextual contact links. */
#navigation>a>span{display:inline-block;position:relative;transform-origin:center;line-height:1.5}
#navigation>a>span::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;opacity:0}
#navigation>a[aria-current="page"]>span{font-weight:700;transform:scale(1.1)}
#navigation>a[aria-current="page"]>span::after{transform:scaleX(1);opacity:1}
#navigation>a:not([aria-current]):hover>span::after,#navigation>a:not([aria-current]):focus-visible>span::after{transform:scaleX(1);opacity:.65}
@media(max-width:1300px){#navigation>a[aria-current="page"]>span{transform-origin:left}}
@media(min-width:1301px) and (prefers-reduced-motion:no-preference){
 #navigation.cms-home-nav>a>span::after{animation:dthn-menu-sweep 1.6s ease-in-out 1;animation-delay:.7s;height:3px}
 #navigation.cms-home-nav>a:nth-child(2)>span::after{animation-delay:1.8s}
 #navigation.cms-home-nav>a:nth-child(3)>span::after{animation-delay:2.9s}
 #navigation.cms-home-nav>a:nth-child(4)>span::after{animation-delay:4s}
 #navigation.cms-home-nav>a:nth-child(5)>span::after{animation-delay:5.1s}
 #navigation.cms-home-nav>a:nth-child(6)>span::after{animation-delay:6.2s}
}
@keyframes dthn-menu-sweep{0%{transform:scaleX(0);opacity:0}45%,65%{transform:scaleX(1);opacity:.65}100%{transform:scaleX(1);opacity:0}}
.cms-card-contact{display:inline-flex;align-items:center;justify-content:space-between;align-self:flex-start;gap:16px;min-height:44px;max-width:100%;margin-top:18px;padding:9px 14px;border:1px solid #a9c5b5;border-radius:3px;color:var(--green);font-size:14px;font-weight:600;line-height:1.5;background:white}
.cms-card-contact:hover{background:var(--pale);border-color:var(--green)}
.service-gallery-grid article{display:flex;flex-direction:column}
.service-gallery-grid article>div{display:flex;flex-direction:column;align-items:flex-start;flex:1}
.service-gallery-grid .cms-card-contact{margin-top:auto}
.service-gallery-grid article>div>p{margin-bottom:18px}
.fit-grid .cms-card-contact{margin-top:auto}

/* CONTACT01: readable stationary labels with a periodic decorative sweep. */
.contact .phone-grid>article>small{color:var(--green);position:relative;display:inline-block}
@media(prefers-reduced-motion:no-preference){
 .contact .phone-grid>article>small{background-image:linear-gradient(105deg,transparent 30%,rgba(255,215,66,.55) 48%,rgba(255,215,66,.55) 52%,transparent 70%);background-size:250% 100%;background-repeat:no-repeat;animation:dthn-contact-sweep 6.5s ease-in-out infinite}
 .contact .phone-grid>article:nth-child(2)>small{animation-delay:3.25s;background-position:150% 0}
 .contact .phone-grid>article:hover>small,.contact .phone-grid>article:focus-within>small{animation-play-state:paused}
}
@keyframes dthn-contact-sweep{0%{background-position:150% 0}30%,100%{background-position:-150% 0}}

/* INTRO01: concise company history without a new page or carousel. */
.hero-copy .company-tenure{color:var(--yellow);font-size:14px;font-weight:700;line-height:1.5;margin:0 0 20px;letter-spacing:.02em;max-width:none}
.company-intro .company-history{border-left:3px solid var(--green);padding:2px 0 2px 20px;margin:0 0 26px;max-width:1050px}
.company-history h2{font-size:22px;line-height:1.35;letter-spacing:0;margin:0 0 10px;color:var(--green)}
.company-history p{font-size:16px;line-height:1.7;margin:0}
@media(max-width:600px){.hero-copy .company-tenure{font-size:13px;margin-bottom:16px}.company-intro .company-history{padding-left:15px;margin-bottom:22px}.company-history h2{font-size:20px}}

/* GALLERY01: controls overlay the image; original frame and spacing stay intact. */
.dthn-gallery-parent{position:relative}
img.dthn-gallery-image{touch-action:pan-y;object-fit:contain}
.dthn-gallery-controls{position:absolute;z-index:3;display:flex;align-items:center;gap:2px;height:40px;width:max-content;padding:0 3px;border-radius:8px;background:rgba(15,35,29,.85);color:#fff;box-sizing:border-box;overflow:hidden}
.dthn-gallery-controls button{appearance:none;display:inline-flex;align-items:center;justify-content:center;width:40px;min-width:40px;height:40px;margin:0;padding:0;border:0;border-radius:6px;background:transparent;color:#fff;font:24px/1 system-ui;cursor:pointer;box-shadow:none;transform:none}
.dthn-gallery-controls button:last-child{font-size:15px}
.dthn-gallery-controls button:hover{background:rgba(255,255,255,.18)}
.dthn-gallery-controls button:focus-visible{outline:2px solid #ffde68;outline-offset:-3px}
.dthn-gallery-count{display:inline-block;min-width:36px;text-align:center;font:13px/1.2 system-ui;color:#fff}

/* PRODUCT26: four material groups, isolated from other page layouts. */
.material-catalog-four .material-grid-four{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.material-catalog-four .material-grid-four>article{min-width:0}
.material-catalog-four .material-grid-four>article>img{display:block;width:100%;height:360px;object-fit:contain;background:#f2f6f4}
.material-catalog-four .material-grid-four>article>div{padding:24px}
.material-catalog-four .material-grid-four h3{margin-top:0}
.dthn-gallery-controls button:disabled{opacity:.4;cursor:default}
.dthn-gallery-controls button:disabled:hover{background:transparent}
@media(max-width:900px){.material-catalog-four .material-grid-four>article>img{height:280px}}
@media(max-width:650px){.material-catalog-four .material-grid-four{grid-template-columns:1fr;gap:24px}.material-catalog-four .material-grid-four>article>img{height:300px}.material-catalog-four .material-grid-four>article>div{padding:20px}}
