:root{font-family:Arial,Helvetica,sans-serif;color:#202020;background:#fff;font-synthesis:none;scroll-behavior:smooth}*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}a:focus-visible{outline:3px solid #3672c4;outline-offset:6px}.wrap{width:min(1280px,calc(100% - 96px));margin-inline:auto}.header{min-height:126px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ddd;gap:32px}.brand{display:block;width:225px;flex-shrink:0}.logo-window{display:block;position:relative;width:100%;aspect-ratio:1780/466;overflow:hidden;background:#fff}.logo-window img{position:absolute;width:115%;height:auto;max-width:none;left:-7.4%;top:-64.5%}nav{display:flex;gap:32px;align-items:center;font-size:15px}.nav-contact{padding:13px 23px;border:1px solid #222;border-radius:3px}.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:70px;align-items:stretch;padding-block:74px 86px}.eyebrow{font-size:13px;letter-spacing:.14em;font-weight:700;margin:0 0 28px;line-height:1.7}h1{font-size:clamp(3rem,6vw,5.8rem);line-height:1.08;letter-spacing:-.055em;margin:0 0 30px;font-weight:750}h1 em{font-style:normal;color:#747474}.intro{max-width:450px;font-size:18px;line-height:1.75;color:#5c5c5c;margin:0 0 32px}.button{display:inline-flex;gap:36px;align-items:center;padding:20px 25px;background:#202020;color:#fff;border-radius:3px;font-weight:700;font-size:16px}.button:hover{background:#444}.brand-panel{background:#181818;color:#fff;padding:32px;display:flex;flex-direction:column;justify-content:space-between;min-height:500px;overflow:hidden}.panel-caption{font-size:12px;letter-spacing:.18em;color:#aaa}.logo-mat{background:white;padding:26px 14px;margin:60px -3px 38px;transform:rotate(-4deg)}.brand-panel>p{font-size:clamp(1.4rem,2.5vw,2rem);line-height:1.4;letter-spacing:-.02em;margin:0 0 50px}.panel-link{font-size:14px;display:flex;gap:20px;justify-content:space-between;padding-top:22px;border-top:1px solid #484848;color:#ddd}.about{border-top:1px solid #ddd;padding-block:66px 76px;display:grid;grid-template-columns:1fr 1.4fr;gap:60px}h2{font-size:clamp(2rem,3.8vw,3.4rem);line-height:1.18;letter-spacing:-.04em;margin:0 0 26px}.about p:not(.eyebrow){font-size:18px;color:#5c5c5c;line-height:1.8;max-width:610px;margin-bottom:0}.quote-section{background:#f3f3f3;padding-block:76px}.section-heading{display:flex;justify-content:space-between;gap:50px;align-items:start}.section-heading h2{width:58%}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;margin-top:38px}.steps article{border-top:1px solid #bdbdbd;padding-top:22px}.number{font-size:14px;color:#777}h3{font-size:21px;margin:38px 0 16px;line-height:1.4}.steps p{font-size:16px;line-height:1.8;color:#626262;margin:0}.contact{padding-block:88px;display:grid;grid-template-columns:1fr 1fr;gap:60px}.contact p:not(.eyebrow){color:#666;font-size:16px;line-height:1.7}.phone-list a{display:block;border-bottom:1px solid #ccc;padding:24px 0 30px}.phone-list a:first-child{padding-top:0}.phone-list small{font-size:12px;letter-spacing:.12em;color:#666;display:block;margin-bottom:16px}.phone-list span{display:flex;justify-content:space-between;gap:15px;font-size:clamp(1.5rem,3vw,2.65rem);letter-spacing:-.03em}.phone-list b{font-weight:400}footer{border-top:1px solid #ddd;padding-block:27px;display:flex;justify-content:space-between;gap:20px;font-size:12px;letter-spacing:.07em}footer a{font-size:14px;letter-spacing:0}.skip{position:absolute;left:10px;top:-100px;background:#fff;padding:20px;z-index:5}.skip:focus{top:10px}section{scroll-margin-top:24px}@media(max-width:850px){.wrap{width:calc(100% - 40px)}.header{min-height:100px;flex-wrap:wrap;padding-block:20px;gap:20px}.brand{width:180px}nav{gap:18px;font-size:14px}.nav-contact{padding:10px 14px}.hero{grid-template-columns:1fr;gap:36px;padding-block:44px}.brand-panel{min-height:350px}.logo-mat{max-width:550px;width:95%;margin:40px auto}.brand-panel>p{margin-bottom:30px}.about,.contact{grid-template-columns:1fr;gap:24px;padding-block:48px}.section-heading{display:block}.section-heading h2{width:auto}.steps{grid-template-columns:1fr;gap:30px}h3{margin-top:20px}.quote-section{padding-block:48px}.intro{max-width:100%}h1{font-size:clamp(3rem,10vw,5rem)}}@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}}

/* Hình ảnh thực tế của Garage Phương Nam */
.hero{grid-template-columns:.85fr 1.15fr;gap:46px;align-items:center}.hero h1{font-size:clamp(2.7rem,4.7vw,4.8rem);line-height:1.15}.hero-photo{margin:0;background:#f3f3f3}.hero-photo img{display:block;width:100%;height:auto;aspect-ratio:1800/1013;object-fit:contain}.hero-photo figcaption{padding:18px 20px;font-size:14px;color:#555}.gallery-section{padding-bottom:80px}.gallery-heading{display:flex;justify-content:space-between;gap:50px;align-items:end;margin-bottom:35px}.gallery-heading>p{max-width:330px;font-size:17px;line-height:1.8;color:#666}.photo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 24px}.gallery-card{margin:0;min-width:0}.gallery-card a{display:block;background:#ededed;overflow:hidden}.gallery-card img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain}.gallery-card h3{font-size:19px;margin:17px 0 8px}.gallery-card p{font-size:15px;line-height:1.7;margin:0;color:#666}.gallery-card a:hover{outline:2px solid #333;outline-offset:3px}@media(max-width:1000px){.hero{grid-template-columns:1fr}.hero h1{font-size:clamp(2.7rem,6.5vw,4.8rem)}.hero-photo{max-width:none}.photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.gallery-heading{display:block}.gallery-heading>p{max-width:100%}.header{flex-wrap:wrap;padding-block:20px}nav{flex-wrap:wrap}}@media(max-width:540px){.photo-grid{grid-template-columns:1fr}.gallery-section{padding-bottom:48px}nav{gap:15px}.hero{gap:28px}}

/* Xem ảnh trực tiếp và liên hệ trên điện thoại */
button{font:inherit;cursor:pointer}button:focus-visible{outline:3px solid #3672c4;outline-offset:4px}
.mobile-contact{display:none}dialog{border:0;padding:20px;background:#171717;color:#fff;border-radius:8px;width:min(1100px,94vw);max-height:94dvh}dialog::backdrop{background:rgb(0 0 0 / .82)}.viewer-bar,.viewer-controls{display:flex;align-items:center;justify-content:space-between;gap:12px}dialog button{padding:12px 16px;border:1px solid #777;border-radius:4px;background:#252525;color:white;min-height:44px}#large-photo{display:block;width:100%;height:65dvh;object-fit:contain;margin-top:14px}#photo-caption{line-height:1.6;margin:14px 0}body:has(dialog[open]){overflow:hidden}
@media(max-width:540px){.mobile-contact{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:4;background:#202020;color:white;box-shadow:0 -2px 12px #0002;padding:12px 16px calc(12px + env(safe-area-inset-bottom));align-items:center;justify-content:space-between;gap:12px;font-size:14px}.mobile-contact a{padding:8px 0}.mobile-contact a:first-child{font-weight:bold}body{padding-bottom:82px}#large-photo{height:52dvh}dialog{padding:14px}nav a{padding-block:8px}footer{align-items:center}}

.services{padding-block:0 80px}.service-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px}.service-grid article{border-top:1px solid #bbb;padding-top:22px}.service-grid article>span{color:#777;font-size:13px}.service-grid h3{margin:22px 0 12px}.service-grid p{color:#626262;line-height:1.8;font-size:16px}.text-link{display:inline-block;text-decoration:underline;text-underline-offset:5px;line-height:1.7;margin-top:20px}.hero-copy>.text-link{display:block;width:fit-content}.visit{display:grid;grid-template-columns:1fr 1fr;gap:60px;padding-bottom:80px}.visit address{font-style:normal;font-size:20px;line-height:1.7}.address-note{color:#777;line-height:1.7}.visit .button{margin-top:15px;font-size:14px}.visit-details h3{margin-top:0}.visit-details>p{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid #ddd;padding-block:14px;color:#555}.contact-links{display:grid;gap:18px;margin-top:30px}.contact-links a{text-decoration:underline;text-underline-offset:5px;width:fit-content}footer small{display:block;font-size:10px;line-height:1.8;letter-spacing:0;margin-top:8px}@media(max-width:1000px){.service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:650px){.visit{grid-template-columns:1fr;gap:36px;padding-bottom:48px}.service-grid{grid-template-columns:1fr}.services{padding-bottom:48px}.phone-list small{line-height:1.8}}

/* Danh bạ liên hệ theo thông tin người dùng cung cấp */
.contact-directory{padding-block:80px}.directory-heading{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:end;margin-bottom:30px}.directory-heading>p{color:#626262;line-height:1.8;max-width:390px;margin:0 0 26px}.contact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.contact-card{border:1px solid #ddd;border-radius:6px;padding:28px;background:#fafafa;min-width:0}.contact-card h3{font-size:22px;margin:0 0 12px}.contact-card>p{color:#626262;line-height:1.7;margin:0 0 22px}.contact-number{display:grid;grid-template-columns:1fr auto;gap:7px 16px;padding-block:18px;border-top:1px solid #ddd}.contact-person{grid-column:1/-1;color:#626262;font-size:14px}.contact-number strong{font-size:clamp(1.4rem,2.7vw,2rem);font-weight:600;letter-spacing:-.02em}.call-label{align-self:center;font-size:14px;white-space:nowrap}.contact-number:hover strong{text-decoration:underline;text-underline-offset:5px}.contact-card:last-child{grid-column:1/-1}.contact-card:last-child .contact-number{max-width:520px}@media(max-width:700px){.contact-directory{padding-block:48px}.directory-heading{display:block;margin-bottom:24px}.contact-grid{grid-template-columns:1fr}.contact-card{padding:22px}.contact-card:last-child{grid-column:auto}.contact-number strong{font-size:26px}.directory-heading>p{max-width:none}}

.founded{font-size:clamp(2rem,4vw,3.8rem)!important;font-weight:700;letter-spacing:-.05em;color:#202020!important;margin:0!important}.founded-label{font-size:14px!important;color:#777!important;margin-top:8px!important}.service-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px}.quote-cta{margin-top:36px}.about p+p{margin-top:18px}.hero-photo img{aspect-ratio:auto}@media(max-width:1000px){.service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:650px){.service-grid{grid-template-columns:1fr}}

/* Immersive illustrative workshop background */
.hero.hero-immersive{position:relative;isolation:isolate;display:flex;align-items:center;min-height:740px;padding:90px max(48px,calc((100vw - 1280px)/2)) 130px;margin:0;width:100%;overflow:hidden;background:#101315;color:#fff}
.hero-immersive:before{content:"";position:absolute;z-index:-2;inset:0;background:url("garage-background.png") center 54%/cover no-repeat}
.hero-immersive:after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(0deg,#fff 0%,rgba(255,255,255,.01) 19%),linear-gradient(90deg,rgba(7,12,16,.91) 0%,rgba(7,12,16,.72) 36%,rgba(7,12,16,.16) 72%,rgba(7,12,16,.08))}
.hero-immersive .hero-copy{width:min(620px,58%)}
.hero-immersive .eyebrow{color:#e6c59c;letter-spacing:.2em;margin-bottom:24px}
.hero-immersive h1{font-size:clamp(2.7rem,4.6vw,4.7rem);line-height:1.12;text-wrap:balance;text-shadow:0 2px 24px #0004}
.hero-immersive h1 em{color:#dfc6a3}
.hero-immersive .intro{color:#e0e3e5;max-width:500px;font-size:17px}
.hero-immersive .button{background:#e9d0aa;color:#172027;border:1px solid #e9d0aa}
.hero-immersive .button:hover{background:#f5e1c4}
.hero-immersive .text-link{color:#fff}
.hero-note{position:absolute;right:48px;bottom:102px;font-size:11px;letter-spacing:.04em;color:#e0e0e0;text-shadow:0 1px 5px #000}
.about{border-top:0}
@media(max-width:850px){.hero.hero-immersive{min-height:690px;padding:65px 24px 130px}.hero-immersive .hero-copy{width:min(600px,100%)}.hero-immersive:before{background-position:63% center}.hero-immersive:after{background:linear-gradient(0deg,#fff 0%,transparent 18%),linear-gradient(90deg,#080e14e8,#080e14a6 58%,#080e1466)}.hero-immersive h1{font-size:clamp(2.55rem,7.3vw,4rem)}.hero-note{right:24px;bottom:95px}}
@media(max-width:420px){.hero.hero-immersive{padding-inline:20px;min-height:700px}.hero-immersive .intro{font-size:16px}.hero-immersive h1{font-size:2.7rem}}

.zalo-number{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 18px;margin:0 0 18px;background:#0068d9;color:#fff;border-radius:6px;font-size:15px;font-weight:700}.zalo-number:hover{background:#0053ad}.fanpage-button{display:inline-flex;align-items:center;min-height:48px;padding:14px 22px;margin:0 0 28px;border-radius:6px;background:#0866df;color:#fff;font-size:15px;font-weight:700;line-height:1.6}.fanpage-button:hover{background:#064faa}.social-float{position:fixed;right:20px;bottom:24px;z-index:4;display:grid;gap:10px}.social-float a{min-height:46px;display:flex;align-items:center;justify-content:center;padding:12px 20px;border-radius:28px;background:#0068d9;color:#fff;font-weight:700;font-size:14px;box-shadow:0 3px 14px #0003;border:2px solid #fff}.social-float .facebook-float{background:#0866df}.social-float a:hover{filter:brightness(.9)}@media(max-width:540px){.social-float{display:none}.mobile-contact{font-size:12px;gap:9px}.mobile-contact a{min-height:44px;display:flex;align-items:center}.mobile-contact a:nth-child(2){color:#8fcaff}.fanpage-button{width:100%;justify-content:center;text-align:center}}

.brands-section,.faq-section{padding-block:30px 80px}.brands-section>p:not(.eyebrow){max-width:800px;line-height:1.8;color:#626262;font-size:17px}.brand-tags{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0}.brand-tags span{border:1px solid #c7b38f;background:#f7f3ec;border-radius:5px;padding:14px 24px;font-weight:700}.channel-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:start;margin-top:25px}.whatsapp-button{display:inline-flex;align-items:center;justify-content:center;background:#137c49;color:#fff;padding:12px 18px;min-height:44px;border-radius:6px;font-size:15px;font-weight:700;line-height:1.6}.whatsapp-button:hover{background:#0c6439}.whatsapp-contact{margin-bottom:28px}.social-float .whatsapp-float{background:#137c49}.faq-section details{border-bottom:1px solid #ddd;padding:20px 0;max-width:950px}.faq-section summary{font-size:19px;font-weight:700;cursor:pointer;line-height:1.6}.faq-section details p{line-height:1.8;color:#626262;max-width:850px}.header nav{gap:22px}@media(max-width:540px){.mobile-contact{display:grid;grid-template-columns:1fr 1fr;padding:5px 16px calc(5px + env(safe-area-inset-bottom));gap:0 18px}.mobile-contact a{justify-content:center}.mobile-contact a:nth-child(3){color:#8ce3af}body{padding-bottom:110px}.brands-section,.faq-section{padding-bottom:48px}.header nav{gap:15px}.brand-tags span{padding:12px 15px}.whatsapp-button{max-width:100%;text-align:center}}

.visit-counter{border-top:1px solid #ddd;display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;padding-block:28px 35px}.visit-counter>span{font-size:16px;font-weight:700}.visit-counter>strong{font-size:28px;font-variant-numeric:tabular-nums;color:#137c49}.visit-counter>small{flex-basis:100%;font-size:12px;line-height:1.7;color:#707070}

/* Mobile layout: compact navigation and comfortable touch targets */
.menu-toggle{display:none}
@media(max-width:700px){
 .header.wrap{min-height:88px;padding-block:14px;gap:12px;align-items:center;justify-content:space-between}
 .header .brand{width:175px;max-width:65%}
 .menu-ready .menu-toggle{display:inline-flex;align-items:center;justify-content:center;min-width:84px;min-height:44px;border:1px solid #bbb;background:#fff;color:#202020;border-radius:5px;font-size:15px;padding:10px 12px}
 .header nav{width:100%;gap:8px;display:grid;grid-template-columns:1fr 1fr;padding-top:10px}
 .menu-ready nav:not(.is-open){display:none}
 .header nav a{display:flex;align-items:center;min-height:46px;padding:12px 15px;background:#f4f4f4;border-radius:5px;font-size:15px}
 .header nav .nav-contact{border:0;background:#202020;color:#fff}
 .hero.hero-immersive{min-height:650px;padding:50px 20px 112px;align-items:flex-start}
 .hero-immersive .eyebrow{font-size:11px;margin-bottom:24px}
 .hero-immersive h1{font-size:clamp(2rem,9.3vw,3.2rem);line-height:1.16;letter-spacing:-.035em;margin-bottom:24px}
 .hero-immersive .intro{font-size:16px;line-height:1.75;margin-bottom:24px}
 .hero-immersive .button{min-height:52px;padding:16px 22px}
 .hero-immersive .text-link{min-height:44px;margin-top:12px;padding-block:10px}
 .hero-note{bottom:85px;font-size:10px}
 .wrap{width:calc(100% - 40px)}
 .about h2,.services h2,.brands-section h2,.gallery-heading h2,.directory-heading h2,.visit h2,.faq-section h2,.quote-section h2{font-size:clamp(1.85rem,7.8vw,2.5rem);line-height:1.22;letter-spacing:-.035em}
 .about p:not(.eyebrow){font-size:16px;line-height:1.8}
 .about,.contact-directory{padding-block:40px}
 .gallery-card img{background:#f3f3f3}
 .contact-card{padding:20px}.contact-card h3{font-size:20px}
 .contact-number{gap:8px}.contact-number strong{font-size:25px}.call-label{font-size:13px}
 .zalo-number,.whatsapp-button{min-height:48px}
 .channel-actions{display:grid;grid-template-columns:1fr}.channel-actions a{margin:0;text-align:center}
 .faq-section summary{font-size:17px;padding-block:6px}
 footer.wrap{padding-bottom:30px;align-items:flex-start;flex-wrap:wrap;line-height:1.7}
 .visit-counter>strong{font-size:30px}
}
@media(max-width:540px){
 .mobile-contact{background:#17222b;border-top:1px solid #ffffff24;box-shadow:0 -3px 18px #0003;padding:5px 12px calc(5px + env(safe-area-inset-bottom));gap:0 8px}
 .mobile-contact a{font-size:13px;min-height:44px;border-radius:5px}
 .mobile-contact a:active{background:#ffffff18}
 body{padding-bottom:calc(108px + env(safe-area-inset-bottom))}
}
@media(max-width:350px){.header .brand{width:145px}.menu-ready .menu-toggle{min-width:76px}.contact-number strong{font-size:22px}.hero-immersive h1{font-size:2rem}.mobile-contact a{font-size:12px}}

/* Lead with photography, followed by a short introduction. */
.hero.hero-image-first{display:block;min-height:0;padding:0;background:#11181c;overflow:hidden}
.hero-image-first:before,.hero-image-first:after{display:none}
.opening-photo{position:relative;margin:0;width:100%;background:#11181c}
.opening-photo img{display:block;width:100%;height:clamp(300px,39vw,560px);object-fit:cover;object-position:center 48%}
.opening-photo:after{content:"";position:absolute;inset:auto 0 0;height:90px;background:linear-gradient(transparent,#11181c);pointer-events:none}
.opening-photo figcaption{position:absolute;bottom:24px;right:28px;z-index:1;font-size:10px;color:#e2e2e2;text-shadow:0 1px 4px #000}
.hero-image-first .hero-copy{width:min(1280px,calc(100% - 96px));margin-inline:auto;padding:28px 0 58px}
.hero-image-first .eyebrow{margin-bottom:14px}
.hero-image-first h1{font-size:clamp(2rem,3.5vw,3.7rem);margin-bottom:18px}
.hero-image-first h1 br{display:none}.hero-image-first h1 em:before{content:" "}
.hero-image-first .intro{max-width:740px;font-size:17px;margin-bottom:22px}
.hero-image-first .hero-copy>.text-link{display:inline-flex;vertical-align:middle;margin:0 0 0 24px;min-height:48px;align-items:center}
@media(max-width:700px){
 .opening-photo img{height:290px;object-position:65% center}
 .opening-photo:after{height:65px}.opening-photo figcaption{bottom:14px;right:20px}
 .hero-image-first .hero-copy{width:calc(100% - 40px);padding:16px 0 38px}
 .hero-image-first .eyebrow{font-size:10px;margin-bottom:12px}
 .hero-image-first h1{font-size:clamp(1.9rem,8.2vw,2.7rem);line-height:1.18;margin-bottom:16px}
 .hero-image-first h1 br{display:block}.hero-image-first h1 em:before{content:none}
 .hero-image-first .intro{font-size:15px;line-height:1.65;margin-bottom:18px}
 .hero-image-first .button{padding:14px 18px;min-height:48px;font-size:14px}
 .hero-image-first .hero-copy>.text-link{margin:8px 0 0;display:flex;width:fit-content;font-size:14px;min-height:44px}
}
@media(max-width:350px){.opening-photo img{height:240px}}

/* Public company information */
.company-footer{align-items:flex-start;letter-spacing:0;gap:24px;padding-block:32px}.company-footer>div{max-width:850px}.company-footer p{font-size:15px;line-height:1.8;margin:8px 0;overflow-wrap:anywhere}.company-footer .company-label{font-size:12px;letter-spacing:.12em;color:#666}.company-footer .company-name{font-size:18px;font-weight:700}.company-footer>a{flex-shrink:0;min-height:44px;display:flex;align-items:center}@media(max-width:700px){footer.company-footer{display:flex;flex-direction:column;gap:12px}.company-footer .company-name{font-size:16px}}