/* Hero: render full photos without cropping on desktop and mobile */
.hero{background:#fff9ee}
.slider{position:relative!important;width:100%;height:auto!important;aspect-ratio:16 / 9!important;min-height:0!important;max-height:none!important;overflow:hidden;background:#233f32}
.slide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#233f32}
.slide picture{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative;isolation:isolate;overflow:hidden}
/* Background fills any unused area, while sharp foreground always shows the entire photo. */
.slide picture::before{content:'';position:absolute;inset:-24px;background-size:cover;background-position:center;filter:blur(22px) brightness(.72);z-index:-1}
.slide--facade picture::before{background-image:url('bia-anh-that-1.webp')}
.slide--food picture::before{background-image:url('bia-anh-that-2.webp')}
.slide--space picture::before{background-image:url('bia-anh-that-3.webp')}
.slide img,.slide picture img{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important;max-width:100%;background:transparent}
.slide-copy,.slide-wash{display:none!important}
.hero-content{position:absolute!important;bottom:12px!important;left:0!important;right:0!important;display:flex!important;justify-content:center!important;pointer-events:none}
.hero-content .slide-controls{margin:0!important;pointer-events:auto;background:rgba(20,52,36,.76);backdrop-filter:blur(8px)}
.hero-cta-below{display:flex;gap:10px;justify-content:center;align-items:center;padding:14px 18px 3px;background:#fff9ee}
.hero-cta-below .btn{min-width:170px}
@media(min-width:641px){
 .hero{max-width:min(1320px,100%);margin:0 auto}
 .slider{aspect-ratio:16 / 9!important;max-height:740px!important}
 .hero-cta-below{padding:16px 18px 8px}
}
@media(max-width:640px){
 .slider{aspect-ratio:4 / 3!important;min-height:0!important;max-height:none!important}
 .hero-content{bottom:9px!important}
 .hero-cta-below{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:12px 13px 2px;gap:8px}
 .hero-cta-below .btn{min-width:0;padding:10px 7px;font-size:12px;min-height:46px}
}
@media(max-width:350px){.hero-cta-below .btn{font-size:11px}}