/* Shared public presentation: content and contact endpoints remain independent. */
#portfolio .portfolio-item{padding:10px}
#portfolio .inner-content{display:block;aspect-ratio:auto;background:#fff;border:1px solid #e1e9ee;border-radius:16px;box-shadow:0 4px 18px #16374c08;transition:box-shadow .2s,transform .2s}
#portfolio .inner-content>a{display:block;text-decoration:none;color:#17384d}
#portfolio .inner-content img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
#portfolio .project-name{position:static;display:block;opacity:1;background:none;color:#17384d;font-size:17px;line-height:1.45;font-weight:600;padding:18px 18px 15px;min-height:116px;text-shadow:none}
#portfolio .project-name::after{display:block;content:'VIEW PROJECT →';color:var(--primary-color);opacity:1;transform:none;margin-top:10px;font-size:11px;letter-spacing:.08em}
html[lang=vi] #portfolio .project-name::after{content:'XEM DỰ ÁN →'}
#portfolio .inner-content:hover,#portfolio .inner-content:focus-within{box-shadow:0 12px 30px #16374c18;transform:translateY(-3px)}
#portfolio a:focus-visible,.hero-cta:focus-visible,.slider button:focus-visible{outline:3px solid var(--primary-color);outline-offset:4px}
.slider{isolation:isolate;aspect-ratio:21/9;min-height:440px;max-height:680px;background:#17384d}
.slider::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#081f31c9 0%,#081f315e 56%,#081f3100 100%)}
.slider .slides img{height:100%;object-fit:cover;flex-shrink:0}
.slider .image-title{top:25%;left:8%;right:28%;font-size:clamp(25px,3.2vw,46px);line-height:1.2;text-align:left;text-shadow:0 2px 12px #0004;z-index:2}
.hero-copy{position:absolute;inset:0;z-index:2;color:#fff;pointer-events:none}
.hero-eyebrow{position:absolute;top:13%;left:8%;font-size:12px;font-weight:600;letter-spacing:.15em}
.hero-summary{position:absolute;left:8%;bottom:24%;font-size:17px;max-width:75%}
.hero-cta{position:absolute;left:8%;bottom:12%;display:inline-block;padding:12px 22px;border-radius:30px;background:#fff;color:#17384d;font-weight:600;text-decoration:none;pointer-events:auto}
.hero-cta:hover{background:#eaf5fc;color:#125d88}
.slider .dots{bottom:22px;left:auto;right:8%;width:auto;display:flex;gap:5px;z-index:3}
.slider .dot{display:grid;place-items:center;width:26px;height:26px;padding:0;border:0;background:transparent;border-radius:50%}
.slider .dot::before{content:'';width:7px;height:7px;background:#ffffff75;border-radius:50%;transition:width .2s}
.slider .dot.active{background:none;transform:none}
.slider .dot.active::before{width:21px;border-radius:8px;background:white}
.slider .nav-button{z-index:3}
.call-button,.zalo-container .zalo-chat{width:46px;height:46px;right:18px;display:flex;justify-content:center;padding:0;animation:none;box-shadow:0 3px 14px #15395424;z-index:100;border:1px solid #dce8f0;background:#fff}
.call-button{bottom:calc(78px + env(safe-area-inset-bottom,0px))}
.zalo-container .zalo-chat{bottom:calc(22px + env(safe-area-inset-bottom,0px));background:var(--primary-color)}
.zalo-container .zalo-chat:hover{width:46px}
.zalo-chat .zalo-text{display:none}
.call-button img{width:34px;height:34px}
.zalo-chat img{width:30px;height:30px}
@media(min-width:992px){.zalo-chat:hover::before{content:attr(aria-label);position:absolute;right:56px;white-space:nowrap;padding:8px 14px;border-radius:8px;background:#17384d;color:#fff;font-size:13px}}
@media(max-width:767px){
 #portfolio .portfolio-item{padding:7px}
 #portfolio .project-name{font-size:16px;padding:15px;min-height:105px}
 .slider{aspect-ratio:auto;height:470px;min-height:0;max-height:none}
 .slider .slides img{height:100%;object-fit:cover}
 .slider::after{background:linear-gradient(0deg,#081f31e6 0%,#081f3150 70%,#081f311a 100%)}
 .slider .image-title{top:auto;bottom:167px;left:24px;right:24px;font-size:28px;text-align:left}
 .hero-eyebrow{top:26px;left:24px;right:24px;font-size:10px;letter-spacing:.11em}
 .hero-summary{left:24px;bottom:104px;max-width:82%;font-size:15px;margin:0}
 .hero-cta{left:24px;bottom:48px;padding:10px 18px;font-size:14px}
 .slider .dots{bottom:9px;right:20px;left:auto}
 .slider .nav-button{top:34%;width:34px;height:34px;font-size:16px}
 .call-button,.zalo-container .zalo-chat{right:12px;width:42px;height:42px}
 .call-button{bottom:calc(68px + env(safe-area-inset-bottom,0px))}
 .zalo-container .zalo-chat{bottom:calc(16px + env(safe-area-inset-bottom,0px))}
 .zalo-container .zalo-chat:hover{width:42px}
}
@media(prefers-reduced-motion:reduce){.slider .slides,.slider .slides img,#portfolio .inner-content{transition:none}}
.slider .dots{display:none}
.hero-controls{position:absolute;left:8%;right:8%;bottom:18px;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:14px;color:#fff}
.hero-group{display:flex;align-items:center;gap:10px;font-size:12px}.hero-group select{color:#fff;background:#17384dcc;border:1px solid #ffffff60;border-radius:24px;padding:9px 32px 9px 14px;max-width:260px;font-size:13px}.hero-group option{background:#17384d;color:white}.hero-counter{display:flex;align-items:center;gap:12px;font-size:13px;font-variant-numeric:tabular-nums}.hero-counter button{width:34px;height:34px;border-radius:50%;border:1px solid #ffffff70;color:white;background:#17384d55}.hero-counter button:disabled{opacity:.4}.slider .hero-cta{bottom:19%}.slider .hero-summary{bottom:30%}
@media(max-width:767px){.hero-controls{left:20px;right:20px;bottom:14px;gap:8px}.hero-group>span{display:none}.hero-group select{max-width:190px;padding:8px 22px 8px 10px;font-size:11px}.hero-counter{gap:6px;font-size:12px}.hero-counter button{width:28px;height:28px}.slider .hero-cta{bottom:74px}.slider .hero-summary{bottom:128px}.slider .image-title{bottom:188px}}
.hero-group-buttons{display:none}
@media(min-width:1100px){.hero-group{display:none}.hero-group-buttons{display:flex;gap:7px;flex-wrap:wrap}.hero-group-buttons button{border:1px solid #ffffff60;color:#fff;background:#17384d99;border-radius:22px;padding:8px 12px;font-size:12px}.hero-group-buttons button[aria-pressed=true]{color:#17384d;background:#fff}.hero-group-buttons button:disabled{opacity:.4}}
