/* Phần bổ sung cho các class riêng của site (không có trong Bootstrap/MOCKUP) */
.hero__tile{display:flex;align-items:flex-end;min-height:260px;padding:24px;border-radius:12px;text-decoration:none;color:#fff;font-size:1.6rem;font-weight:800;background:linear-gradient(135deg,#24406b,#0f3d6e)}
.hero__tile--alt{background:linear-gradient(135deg,#f2c94c,#e88b7a)}
.card__img img{width:100%;height:100%}
.card__ph{display:block;width:100%;height:100%;background:repeating-linear-gradient(45deg,#eef0f3,#eef0f3 10px,#e6e9ee 10px,#e6e9ee 20px)}
.page{padding:32px 0 56px}
.crumbs{font-size:.85rem;color:#6c757d;margin-bottom:12px}
.product{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:16px}
.product__img{border-radius:12px;overflow:hidden;background:#f5f6f8;min-height:260px}
.prose{max-width:760px}
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}
.swatch{display:flex;flex-direction:column;gap:4px}.swatch small{color:#6c757d}
.swatch__chip{height:90px;border-radius:12px;border:1px solid #dee2e6}
.filter{max-width:280px;margin-bottom:16px}
.filter select,.form input,.form textarea{width:100%;padding:10px 12px;border:1px solid #ced4da;border-radius:8px;font:inherit}
.stores{list-style:none;padding:0;display:grid;gap:12px}.stores li{padding:12px 14px;border:1px solid #dee2e6;border-radius:12px}
.form{display:grid;gap:14px;max-width:520px}.form label{display:grid;gap:4px;font-weight:600}
.hp{position:absolute;left:-9999px}
.form__status{margin:0;min-height:1.5em}
.site-footer a{color:#cfd3dc;text-decoration:none}.site-footer a:hover{color:#fff}
.footer__copy{color:#8b92a3}
@media(max-width:860px){.product{grid-template-columns:1fr}}

/* Header + hero trang chủ — phần Bootstrap không có sẵn */
.text-shadow{text-shadow:0 1px 4px rgba(0,0,0,.6)}
/* Nav kiểu nội thất sang trọng — ghi đè .nav-link toàn cục của style.css (MOCKUP) */
.site-header .navbar-nav{gap:2.5rem}
.site-header .navbar-nav .nav-link{position:relative;display:inline-block;padding:.4rem 0;margin:0;border:0;border-top:3px solid transparent;border-bottom:3px solid transparent;border-radius:0;background:none;box-shadow:none;color:rgba(255,255,255,.92);font-size:1.1rem;font-weight:500;letter-spacing:normal;text-transform:uppercase;text-shadow:0 1px 6px rgba(0,0,0,.55);transition:color .25s}
.site-header .navbar-nav .nav-link::before{content:none;display:none}
.site-header .navbar-nav .nav-link::after{content:none;display:none}
.site-header .navbar-nav .nav-link:hover{color:#fff;background:none;border-bottom-color:rgba(255,255,255,.45);box-shadow:none;text-decoration:none}
.site-header .navbar-nav .nav-link.active{color:#fff;background:none;border-bottom-color:#fff;font-weight:700;box-shadow:none;text-decoration:none}

.site-header .btn-outline-light{--bs-btn-border-color:rgba(255,255,255,.75);--bs-btn-hover-bg:#d9b87c;--bs-btn-hover-border-color:#d9b87c;--bs-btn-hover-color:#1c1712;--bs-btn-active-bg:#d9b87c;--bs-btn-active-border-color:#d9b87c;--bs-btn-active-color:#1c1712;font-size:1rem;font-weight:500;letter-spacing:normal;padding:.5rem 3rem;border-radius:0 !important}
.navbar[data-bs-theme=dark] .navbar-collapse.show,.navbar[data-bs-theme=dark] .navbar-collapse.collapsing{background:rgba(28,23,18,.92);padding:1.25rem;margin-top:.5rem}
@media(max-width:991.98px){.site-header .navbar-nav{gap:.5rem}}
.hero-carousel{position:relative}
.hero-carousel::before{content:"";position:absolute;inset:0 0 auto 0;height:140px;background:linear-gradient(rgba(0,0,0,.45),transparent);z-index:2;pointer-events:none}
.hero-carousel__img{width:100%;height:auto}

/* Header cố định khi cuộn */
.site-header{background:transparent;transition:background-color .2s}
.site-header.is-scrolled{background:rgba(28,23,18,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 2px 16px rgba(0,0,0,.25)}
.main-offset{padding-top:5.75rem}

/* Hiệu ứng slide: thanh tiến trình ở chỉ báo */
.hero-carousel .carousel-item{overflow:hidden}

.hero-carousel .carousel-indicators [data-bs-target]{position:relative;width:48px;height:3px;border:0;margin-inline:6px;margin-bottom:2rem;background:rgba(255,255,255,.45);opacity:1;overflow:hidden}
.hero-carousel .carousel-indicators .active::after{content:"";position:absolute;inset:0;background:#d9b87c;transform-origin:left;animation:heroProgress 5s linear both}
.hero-carousel:hover .carousel-indicators .active::after{animation-play-state:paused}
@keyframes heroProgress{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.hero-carousel .carousel-control-prev-icon,.hero-carousel .carousel-control-next-icon{transition:transform .3s ease}
.hero-carousel .carousel-control-prev:hover .carousel-control-prev-icon{transform:translateX(-6px)}
.hero-carousel .carousel-control-next:hover .carousel-control-next-icon{transform:translateX(6px)}

@media(prefers-reduced-motion:reduce){
  .hero-carousel .carousel-indicators .active::after{animation:none}
  .hero-carousel .carousel-indicators .active::after{transform:none}
}


/* Section 5 sản phẩm */
.featured-section{background:#fff;padding:clamp(3rem,6vw,6rem) clamp(1.5rem,5vw,6rem);color:#2a241d;font-family:"Cabin",system-ui,sans-serif}
.featured-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;max-width:1400px;margin:0 auto clamp(1.5rem,3vw,2.5rem)}
.featured-head__title{font-size:clamp(1.4rem,2vw,1.9rem);font-weight:700;line-height:1.2;margin:0}
.featured-head__all{color:#2a241d;font-size:.95rem;text-decoration:none;border-bottom:1px solid currentColor}
.featured-head__all:hover{color:#000;border-bottom-width:2px}
.featured-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(1rem,2vw,2.5rem);max-width:1400px;margin:0 auto;padding:0}
.featured-item{display:flex;flex-direction:column;align-items:center;text-align:center;color:inherit;text-decoration:none}
.featured-item__img{display:block;width:100%;max-width:17rem;height:auto;aspect-ratio:1;object-fit:contain}
.featured-item__sku{margin-top:.5rem;font-size:.82rem;letter-spacing:.08em;color:#6c6258}
.featured-item__name{margin-top:.5rem;font-size:1rem;font-weight:600;text-transform:uppercase}
.featured-item:hover .featured-item__name{text-decoration:underline;text-underline-offset:.3em}
@media(max-width:991.98px){.featured-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:575.98px){.featured-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Các chủ đề màu: hiển thị liên tiếp, mỗi chủ đề một khung ghép */
.themes{background:#fff;font-family:"Cabin",system-ui,sans-serif;color:#2b2b2b}
.theme{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(1.5rem,4vw,4rem);align-items:stretch;max-width:1180px;margin:0 auto;padding:clamp(2rem,4vw,3.5rem) clamp(1rem,4vw,2rem);border-top:1px solid #e6e6e6}
.theme:first-child{border-top:0}
.theme__title{font-size:1.5rem;font-weight:600;text-transform:uppercase;color:var(--tc);margin:0 0 .25rem}
.theme__subtitle{font-size:1rem;color:#777;margin:0 0 1rem}
.theme__desc{font-size:1rem;line-height:1.6;margin:0}
.theme__tones{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:0;padding:0;min-height:14rem}
.theme__tone{display:flex;flex-direction:column;justify-content:flex-end;padding:.6rem .6rem;color:#4a3f3a;font-size:.85rem;line-height:1.3}
.theme__tone strong{font-weight:700}
.theme__tone--dark{color:#fff}
@media (max-width:991.98px){
  .theme{grid-template-columns:1fr;gap:1.25rem}
  .theme__tones{grid-template-columns:repeat(2,1fr);min-height:0}
  .theme__tone{min-height:5rem}
}

/* Trang Bảng màu */
.pal{max-width:1180px;margin:0 auto;padding:1rem 1rem 4rem;font-family:"Cabin",system-ui,sans-serif;color:#222}
.pal-collections{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem;text-align:center}
.pal-collection{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding-bottom:.35rem;color:#2f6a95;font-size:.85rem;text-decoration:none;border-bottom:2px solid transparent}
.pal-collection img{width:80px;height:80px;object-fit:contain}
.pal-collection:hover{color:#1d4a6b}
.pal-collection.is-active{color:#222;border-bottom-color:#222;font-weight:700}
.pal-label{margin:2.5rem 0 .75rem;font-size:.85rem;font-weight:400;text-transform:uppercase}
.pal-hues{display:grid;grid-template-columns:repeat(13,1fr);gap:.5rem}
.pal-hue{display:flex;flex-direction:column;gap:.3rem;color:#555;font-size:.75rem;text-decoration:none}
.pal-hue span{display:block;aspect-ratio:1}
.pal-hue:hover{color:#000}
.pal-hue.is-active{color:#000;font-weight:700}
.pal-hue.is-active span{outline:2px solid #222;outline-offset:2px}
.pal-search{display:flex;gap:.75rem;margin:2rem 0}
.pal-search input{flex:1;min-width:0;padding:.6rem .8rem;border:1px solid #ccc;border-radius:4px;font:inherit;font-size:.95rem}
.pal-search button{padding:.5rem 1.8rem;border:0;border-radius:6px;background:#2f6a95;color:#fff;font:inherit;font-weight:600;cursor:pointer}
.pal-search button:hover{background:#245577}
.pal-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:20px 15px}
.pal-color{display:flex;flex-direction:column;gap:.4rem;min-height:130px;padding:.65rem .75rem;color:#fff;font-size:.95rem;line-height:1.3}
.pal-color.is-dark-text{color:#111}
.pal-color__code{margin-top:.1rem}
.pal-count{margin:2rem 0 .5rem;text-align:center;color:#666;font-size:.9rem}
.pal-more{text-align:center;margin:0}
.pal-more a{display:inline-block;padding:.6rem 2rem;border:1px solid #222;color:#222;text-decoration:none;font-weight:600}
.pal-more a:hover{background:#222;color:#fff}
.pal-empty{padding:3rem 0;text-align:center;color:#666}
@media(max-width:991.98px){
  .pal-collections{grid-template-columns:repeat(3,1fr)}
  .pal-hues{grid-template-columns:repeat(7,1fr)}
  .pal-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:575.98px){
  .pal-collections{grid-template-columns:repeat(2,1fr)}
  .pal-hues{grid-template-columns:repeat(5,1fr)}
  .pal-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
}

/* Danh mục sản phẩm */
.cat,.prod{max-width:1280px;margin:0 auto;padding:1.5rem 1rem 4rem;font-family:"Cabin",system-ui,sans-serif;color:#222}
.cat{display:grid;grid-template-columns:230px minmax(0,1fr);gap:2.5rem}
.cat-side__title{font-size:1rem;font-weight:700;text-transform:uppercase;margin:0 0 .75rem;padding-bottom:.6rem;border-bottom:2px solid #222}
.cat-side__list{margin:0;padding:0}
.cat-side__list a{display:block;padding:.55rem 0;border-bottom:1px solid #e4e4e4;color:#444;text-decoration:none}
.cat-side__list a span{color:#888;font-size:.85rem}
.cat-side__list a:hover{color:#000}
.cat-side__list a.is-active{color:#000;font-weight:700}
.cat-main__title{font-size:clamp(1.5rem,2.2vw,2rem);font-weight:700;margin:0 0 .5rem}
.cat-main__lead{color:#555;margin:0 0 .5rem}
.cat-main__count{color:#777;font-size:.9rem;margin:0 0 1.5rem}
.cat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem 1.25rem;margin:0;padding:0}
.cat-item{display:flex;flex-direction:column;align-items:center;text-align:center;color:inherit;text-decoration:none}
.cat-item__img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain}
.cat-item__sku{margin-top:.5rem;font-size:.8rem;letter-spacing:.06em;color:#666}
.cat-item__name{margin-top:.35rem;font-size:.95rem;font-weight:600;text-transform:uppercase}
.cat-item:hover .cat-item__name{text-decoration:underline;text-underline-offset:.3em}
.prod-crumbs{font-size:.88rem;color:#666;margin-bottom:1.5rem}
.prod-crumbs a{color:#444}
.prod-main{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:3rem;align-items:start}
.prod-img img{display:block;width:100%;height:auto;max-width:34rem;margin:0 auto}
.prod-cat{margin:0 0 .5rem;font-size:.85rem;text-transform:uppercase;color:#777}
.prod-name{font-size:clamp(1.7rem,2.8vw,2.4rem);font-weight:700;margin:0 0 .5rem}
.prod-sku{margin:0 0 1.25rem;color:#555}
.prod-desc p{line-height:1.75;color:#333}
.prod-desc h3{font-size:1rem;font-weight:700;text-transform:uppercase;margin:1.5rem 0 .6rem}
.prod-desc .spec{display:grid;grid-template-columns:max-content 1fr;gap:.4rem 1.25rem;margin:0}
.prod-desc .spec dt{font-weight:700}
.prod-desc .spec dd{margin:0}
.prod-btn{display:inline-block;margin-top:1.75rem;padding:.7rem 2rem;border:1px solid #222;color:#222;font-weight:600;text-decoration:none}
.prod-btn:hover{background:#222;color:#fff}
.prod-related__title{font-size:1.25rem;font-weight:700;margin:3.5rem 0 1.5rem}
.cat-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:991.98px){
  .cat{grid-template-columns:minmax(0,1fr);gap:1.5rem}
  .cat-grid,.cat-grid--4{grid-template-columns:repeat(3,minmax(0,1fr))}
  .prod-main{grid-template-columns:minmax(0,1fr);gap:1.5rem}
}
@media(max-width:575.98px){.cat-grid,.cat-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Logo header */
.brand-logo{display:block;height:2.6rem;width:auto}
@media(max-width:575.98px){.brand-logo{height:2.1rem}}

@media(min-width:992px){.site-header .navbar-nav{margin-right:2.5rem}}
@media(min-width:992px){.site-header .navbar-collapse{align-items:center}.site-header .navbar-nav{align-items:center}}
@media(min-width:992px){.site-header .navbar-nav{align-self:center;margin-top:0;margin-bottom:0}.site-header .navbar-nav .nav-item{margin:0}}
@media(min-width:992px){.site-header .navbar-nav .nav-link{display:block;line-height:1.5}}
.lang-switch{display:inline-block;padding:.2rem .55rem;border:1px solid rgba(255,255,255,.55);color:#fff;font-size:.8rem;font-weight:600;letter-spacing:.08em;text-decoration:none}
.lang-switch:hover{background:#fff;color:#1c1712}


.theme{display:block}
.theme__photo{display:block;width:100%;aspect-ratio:21/9;object-fit:cover;margin-bottom:1.5rem}
.theme__photo--empty{display:flex;align-items:center;justify-content:center;background:#ececec;color:#888;font-size:.9rem;text-align:center;padding:1rem}
.theme__body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(1.5rem,4vw,4rem)}
.theme__tones{min-height:9rem}
@media (max-width:991.98px){.theme__body{grid-template-columns:1fr;gap:1.25rem}.theme__photo{aspect-ratio:4/3}}
.theme__gallery{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:6px;height:clamp(18rem,36vw,30rem);margin-bottom:1.5rem}
.theme__gallery img{width:100%;height:100%;min-height:0;object-fit:cover;display:block}
.theme__gallery img:nth-child(1){grid-row:span 2}
.theme__gallery img:nth-child(4){grid-column:span 2}
@media (max-width:991.98px){.theme__gallery{grid-template-columns:1fr 1fr;grid-template-rows:auto;height:auto}.theme__gallery img{aspect-ratio:4/3}.theme__gallery img:nth-child(1),.theme__gallery img:nth-child(4){grid-row:auto;grid-column:span 2}}

.site-header--light,.site-header--light.is-scrolled{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:#e6e6e6 !important}
.site-header--light .navbar-nav .nav-link{color:#222;text-shadow:none}
.site-header--light .navbar-nav .nav-link:hover{color:#000;border-bottom-color:rgba(0,0,0,.35)}
.site-header--light .navbar-nav .nav-link.active{color:#000;border-bottom-color:#000}
.site-header--light .btn-outline-dark{--bs-btn-color:#222;--bs-btn-border-color:#222;--bs-btn-hover-bg:#222;--bs-btn-hover-border-color:#222;--bs-btn-hover-color:#fff;font-size:1rem;font-weight:500;padding:.5rem 3rem;border-radius:0 !important}
.site-header--light .lang-switch{color:#222;border-color:#222}
@media(max-width:991.98px){.site-header--light .navbar-collapse.show,.site-header--light .navbar-collapse.collapsing{background:#fff}}

.theme[hidden],.themes__more[hidden]{display:none}
.themes__more{text-align:center;padding:1rem 0 4rem;border-top:1px solid #e6e6e6;max-width:1180px;margin:0 auto}
.themes__more button{background:none;border:1px solid #222;border-radius:0;color:#222;font:500 1rem "Cabin",system-ui,sans-serif;text-transform:uppercase;padding:.6rem 3rem;margin-top:2rem;cursor:pointer}
.themes__more button:hover{background:#222;color:#fff}

.about{max-width:860px;margin:0 auto;padding:2.5rem 1rem 4rem;font-family:"Cabin",system-ui,sans-serif;line-height:1.65}
.about__title{font-size:2rem;font-weight:600;margin:0 0 1rem}
.about__lead{font-size:1.15rem;color:#333}
.about__h{font-size:1.25rem;font-weight:600;margin:2.5rem 0 1rem;padding-bottom:.5rem;border-bottom:1px solid #222}
.about__timeline{margin:0;padding:0}
.about__timeline li{display:grid;grid-template-columns:7rem 1fr;gap:1rem;padding:.65rem 0;border-bottom:1px solid #e6e6e6}
.about__timeline strong{font-weight:700}
.about__src{font-size:.9rem;color:#666}
.about__link{color:#222;font-weight:600}
.about__contact dt{font-weight:700;margin-top:.75rem}
.about__contact dd{margin:0}
@media(max-width:575.98px){.about__timeline li{grid-template-columns:1fr;gap:.15rem}}

.prod-h{font-size:1.35rem;font-weight:600;margin:3rem 0 1rem;padding-bottom:.5rem;border-bottom:1px solid #222}
.prod-specs{display:grid;grid-template-columns:1fr 1fr;gap:0 3rem;margin:0}
.prod-specs>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:1rem;padding:.7rem 0;border-bottom:1px solid #e6e6e6}
.prod-specs dt{font-weight:400;color:#666}
.prod-specs dd{margin:0;font-weight:600}
.prod-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem 2.5rem;margin:0;padding:0}
.prod-benefits__n{display:block;font-size:.9rem;font-weight:700;color:#999;margin-bottom:.35rem}
.prod-benefits h3{font-size:1.05rem;font-weight:600;margin:0 0 .35rem}
.prod-benefits p{margin:0;color:#444;line-height:1.55}
.prod-uses{display:grid;grid-template-columns:repeat(6,1fr);gap:.75rem;margin:0;padding:0}
.prod-uses li{display:flex;flex-direction:column;align-items:center;gap:.6rem;padding:1.4rem .5rem;background:#f1f1f1;text-align:center}
.prod-uses i{font-size:1.8rem;color:#2b4a63}
@media(max-width:991.98px){.prod-specs{grid-template-columns:1fr}.prod-benefits{grid-template-columns:1fr 1fr}.prod-uses{grid-template-columns:repeat(3,1fr)}}
@media(max-width:575.98px){.prod-benefits{grid-template-columns:1fr}}

.rooms{max-width:1180px;margin:0 auto;padding:4rem 1rem;font-family:"Cabin",system-ui,sans-serif}
.rooms__title{font-size:1.75rem;font-weight:600;margin:0 0 .35rem}
.rooms__head p{color:#666;margin:0 0 1.75rem}
.rooms__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin:0;padding:0}
.rooms__item{display:block;color:#222;text-decoration:none}
.rooms__swatches{display:flex;height:7rem}
.rooms__swatches i{flex:1}
.rooms__name{display:block;font-size:1.15rem;font-weight:600;margin-top:.7rem}
.rooms__cta{display:block;font-size:.9rem;color:#666}
.rooms__item:hover .rooms__cta{color:#222;text-decoration:underline}
@media(max-width:991.98px){.rooms__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:575.98px){.rooms__grid{gap:1rem}.rooms__swatches{height:5rem}}


.themes__heading{max-width:1180px;margin:0 auto;padding:5rem 1rem 1rem;text-align:center;font-family:"Montserrat",system-ui,sans-serif;font-size:clamp(1.75rem,4vw,3rem);font-weight:700;text-transform:uppercase;letter-spacing:.06em;line-height:1.2}
.themes__head{max-width:1180px;margin:0 auto;padding:2.5rem 1rem 1rem;text-align:center}
.themes__head .themes__heading{padding:0;margin:0}
.themes__sub{margin:.9rem 0 0;font-size:1.15rem;color:#666}

.themes__carousel{--gal-h:clamp(18rem,36vw,30rem);position:relative;max-width:1180px;margin:0 auto}
.themes__tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 2rem;padding:0 1rem 1.25rem;border-bottom:1px solid #e6e6e6;margin-bottom:2rem}
.themes__tabs button{background:none;border:0;border-bottom:3px solid transparent;border-radius:0;padding:.35rem 0;font:600 .95rem "Montserrat",system-ui,sans-serif;text-transform:uppercase;letter-spacing:.04em;color:#888;cursor:pointer}
.themes__tabs button:hover{color:#222}
.themes__tabs button.active{color:#222;border-bottom-color:#222}
.themes__carousel .theme{border-top:0}
.themes__carousel .theme__gallery{height:var(--gal-h)}
.themes__carousel .carousel-control-prev,.themes__carousel .carousel-control-next{top:calc(var(--gal-h) * 0 + 4.4rem);bottom:auto;height:var(--gal-h);width:4rem}
.themes__carousel .carousel-control-prev{left:1rem}
.themes__carousel .carousel-control-next{right:1rem}
@media(max-width:991.98px){.themes__carousel .carousel-control-prev,.themes__carousel .carousel-control-next{width:2.5rem}}

.themes__carousel{max-width:1180px;margin:0 auto}
.themes__tabs{max-width:1180px;margin-left:auto;margin-right:auto}
.themes__carousel .theme{padding-top:0}
.themes__carousel .carousel-control-prev,.themes__carousel .carousel-control-next{top:0;bottom:auto;height:var(--gal-h);width:3.5rem;opacity:1}
.themes__carousel .carousel-control-prev{left:clamp(1rem,4vw,2rem)}
.themes__carousel .carousel-control-next{right:clamp(1rem,4vw,2rem)}
.themes__carousel .carousel-control-prev-icon,.themes__carousel .carousel-control-next-icon{filter:drop-shadow(0 0 4px rgba(0,0,0,.7));width:2rem;height:2rem}
/* Làm mờ nhẹ khi chuyển slide bộ màu: slide đi blur dần, slide đến rõ dần */
.themes__carousel .carousel-item{transition:transform .6s ease-in-out,filter .6s ease-in-out}
.themes__carousel .carousel-item.active.carousel-item-start,
.themes__carousel .carousel-item.active.carousel-item-end,
.themes__carousel .carousel-item-next:not(.carousel-item-start),
.themes__carousel .carousel-item-prev:not(.carousel-item-end){filter:blur(6px)}
@media(prefers-reduced-motion:reduce){.themes__carousel .carousel-item{transition:none}}
.themes__carousel .carousel-item{margin-right:-100%;max-width:none;width:100%}
.themes__carousel .carousel-item{display:none}
.themes__carousel .carousel-item.active,.themes__carousel .carousel-item-next,.themes__carousel .carousel-item-prev{display:block}

/* Nền loang theo màu chủ đề đang chọn: đậm hai bên trái/phải, trên và dưới thiên về trắng */
@property --glow{syntax:"<color>";inherits:true;initial-value:#4c7a9d}
.themes{--glow:#4c7a9d;transition:--glow .7s ease;
  background:
    radial-gradient(circle at var(--bx,50%) var(--by,52%),color-mix(in srgb,var(--glow) var(--ca),transparent) 0,color-mix(in srgb,var(--glow) var(--ca),transparent) calc(var(--cw) - 14%),transparent var(--cw)),
    radial-gradient(ellipse var(--gw) var(--gh) at 0% 52%,color-mix(in srgb,var(--glow) var(--ga),transparent) var(--gs1),transparent var(--gs2)),
    radial-gradient(ellipse var(--gw) var(--gh) at 100% 52%,color-mix(in srgb,var(--glow) var(--ga),transparent) var(--gs1),transparent var(--gs2)),
    #fff}

/* Vụ nổ: từ tâm section bùng ra một vòng màu nét phủ kín rồi tan dần; nền nghỉ là hai vệt mờ trái/phải */
@property --cw{syntax:"<percentage>";inherits:true;initial-value:0%}
@property --ca{syntax:"<percentage>";inherits:true;initial-value:0%}
@keyframes glowBurst{
  0%{--cw:0%;--ca:40%;animation-timing-function:cubic-bezier(.12,.7,.25,1)}
  40%{--cw:125%;--ca:32%;animation-timing-function:ease-out}
  100%{--cw:140%;--ca:0%}
}
.themes{--gw:30%;--gh:56%;--ga:62%;--gs1:0%;--gs2:68%;--cw:0%;--ca:0%;animation:glowBurst 3s linear 1}
@media(prefers-reduced-motion:reduce){.themes{animation:none}}

.themes{position:relative;overflow:hidden}
.themes>*{position:relative;z-index:1}

/* Các tầng sóng nằm dưới chữ: thêm lớp nền trắng mờ sau khối chữ để vòng màu không làm khó đọc */
.theme__head{position:relative}
.theme__head::before{content:"";position:absolute;inset:0 .5rem;background:rgba(255,255,255,.5);filter:blur(18px);z-index:-1}

/* Backdrop logo: bức tường logo đen trên nền trắng, nghiêng 3D, các hàng chạy qua lại */
.backdrop{background:#fff;padding:4rem 0 3rem;overflow:hidden;font-family:"Cabin",system-ui,sans-serif}
.backdrop__head{max-width:1180px;margin:0 auto;padding:0 1rem 1.5rem;text-align:center}
.backdrop__title{font-family:"Montserrat",system-ui,sans-serif;font-size:clamp(1.5rem,3.2vw,2.25rem);font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin:0 0 .5rem}
.backdrop__head p{color:#666;margin:0}
.backdrop__stage{perspective:2600px;height:clamp(380px,36vw,560px);display:flex;justify-content:center;align-items:center;position:relative;overflow:hidden}
.backdrop__wall{flex:none;display:flex;flex-direction:column;align-items:center;gap:clamp(2.6rem,5vw,4rem);transform-style:preserve-3d;transform:rotateY(22deg) scale(.95)}
.bd-row{display:flex;gap:clamp(5rem,9vw,8rem);width:max-content;align-items:center;animation:bdSlide 18s ease-in-out infinite alternate}
.bd-row--a{animation-direction:alternate-reverse}
.bd-row--b{margin-left:clamp(4rem,8vw,7rem)}
@keyframes bdSlide{from{transform:translateX(-6%)}to{transform:translateX(6%)}}
.bd-logo{display:flex;align-items:center;justify-content:center;min-width:9rem;height:2.1rem;color:#111}
.bd-logo img{height:100%;width:auto;filter:grayscale(1) brightness(0)}
.bd-word{font-family:"Montserrat",system-ui,sans-serif;font-weight:700;font-size:1.05rem;letter-spacing:.16em;text-transform:uppercase;line-height:1;white-space:nowrap;color:#111}
.bd-word--b,.bd-word--d{font-weight:500}
@media(max-width:767.98px){.backdrop__wall{transform:rotateY(18deg) scale(1)}.bd-word{font-size:1.15rem}}
@media(prefers-reduced-motion:reduce){.bd-row{animation:none}}

/* Mép section: logo mờ dần (blur tăng về phía mép) rồi hòa vào nền trắng, thống nhất với các section lân cận */
.backdrop__stage::before,.backdrop__stage::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2}
.backdrop__stage::before{background:linear-gradient(90deg,#fff 0,rgba(255,255,255,.55) 8%,rgba(255,255,255,0) 22%,rgba(255,255,255,0) 78%,rgba(255,255,255,.55) 92%,#fff 100%);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  -webkit-mask-image:linear-gradient(90deg,#000 0,transparent 24%,transparent 76%,#000 100%);mask-image:linear-gradient(90deg,#000 0,transparent 24%,transparent 76%,#000 100%)}
.backdrop__stage::after{background:linear-gradient(180deg,#fff 0,rgba(255,255,255,.85) 14%,rgba(255,255,255,0) 34%,rgba(255,255,255,0) 66%,rgba(255,255,255,.85) 86%,#fff 100%);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  -webkit-mask-image:linear-gradient(180deg,#000 0,transparent 30%,transparent 70%,#000 100%);mask-image:linear-gradient(180deg,#000 0,transparent 30%,transparent 70%,#000 100%)}
.bd-logo img{height:100%;width:auto;filter:brightness(0)}
.bd-logo img{opacity:.88}

/* Kiểu lego: lưới ô vuông đen/trắng xen kẽ, các hàng trượt qua lại đúng một ô */
.backdrop__wall{--tile:clamp(4.6rem,8.2vw,7.6rem);--gap:6px;gap:var(--gap)}
.bd-row,.bd-row--a,.bd-row--b{gap:var(--gap);margin-left:0;animation:bdSlide 7s ease-in-out infinite alternate}
.bd-row--a{animation-direction:alternate-reverse}
@keyframes bdSlide{from{transform:translateX(calc((var(--tile) + var(--gap)) * -1))}to{transform:translateX(calc(var(--tile) + var(--gap)))}}
.bd-tile{flex:none;display:flex;align-items:center;justify-content:center;width:var(--tile);height:var(--tile)}
.bd-tile--dark{background:#111}
.bd-tile--light{background:#f3f3f3;box-shadow:inset 0 0 0 1px #e3e3e3}
.bd-tile img{width:74%;height:auto;filter:none;opacity:1}
.bd-tile--light img{filter:brightness(0)}

/* Lưới vuông cố định: phẳng, thẳng hàng thẳng cột, không nghiêng, không trượt */
.backdrop__stage{perspective:none}
.backdrop__wall,.backdrop__wall[class]{transform:none;transform-style:flat}
.bd-row,.bd-row--a,.bd-row--b{animation:none;transform:none}
@media(max-width:767.98px){.backdrop__wall{transform:none}}

/* Đóng/mở ngẫu nhiên từng ô: mỗi ô khép lại rồi mở ra theo nhịp riêng (--bd-delay, --bd-dur do PHP random) */
.bd-tile.is-flip{animation:bdPop 1.4s ease-in-out 1}
@keyframes bdPop{
  0%{transform:scale(1);opacity:1}
  12%{transform:scale(1.25);opacity:1}
  18%,60%{transform:scale(0);opacity:0}
  100%{transform:scale(1);opacity:1}
}
.bd-frag{position:absolute;z-index:1;pointer-events:none;animation:bdFrag .6s ease-out forwards}
@keyframes bdFrag{to{transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(0);opacity:0}}
@media(prefers-reduced-motion:reduce){.bd-tile{animation:none}}

/* Thu gần: tiêu đề sát hero và sát lưới, mép mờ ngắn lại */
.backdrop{padding:2rem 0 1.5rem}
.backdrop__head{padding-bottom:.25rem}
.backdrop__stage{margin-top:-.75rem}
.backdrop__stage::after{background:linear-gradient(180deg,#fff 0,rgba(255,255,255,.85) 6%,rgba(255,255,255,0) 18%,rgba(255,255,255,0) 82%,rgba(255,255,255,.85) 94%,#fff 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 0,transparent 16%,transparent 84%,#000 100%);mask-image:linear-gradient(180deg,#000 0,transparent 16%,transparent 84%,#000 100%)}

/* Section 2 sát section 1 (hero) */
.backdrop{padding-top:.75rem}

/* Chừa khoảng giữa dòng mô tả và hàng ô đầu tiên */
.backdrop__head{padding-bottom:1rem}
.backdrop__stage{margin-top:0}

/* 2 hàng: stage vừa khít, bỏ mờ trên/dưới */
.backdrop__stage{height:auto;padding:.5rem 0}
.backdrop__stage::after{display:none}

/* Tràn hết chiều ngang: bỏ mờ mép, hàng dài hơn màn hình và căn giữa */
.backdrop__stage::before{display:none}
.backdrop__wall{width:100%;align-items:center}
.backdrop{padding-bottom:0}

/* Tiêu đề nằm giữa section, đè lên lưới, có bóng trắng để đọc rõ */
.backdrop{position:relative;padding:0}
.backdrop__head{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;max-width:none;margin:0;padding:0 1rem;pointer-events:none}
.backdrop__title,.backdrop__head p{color:#111;text-shadow:0 0 6px #fff,0 0 14px #fff,0 0 28px #fff,0 0 44px #fff}
.backdrop__head p{font-weight:600}
.backdrop__stage{padding:0}

/* Nền trắng mờ phía sau chữ để không chìm vào ô đen */
.backdrop__head::before{content:"";position:absolute;left:50%;top:50%;width:min(94%,60rem);height:9.5rem;transform:translate(-50%,-50%);z-index:-1;
  background:radial-gradient(ellipse at center,#fff 0,#fff 55%,rgba(255,255,255,.85) 70%,rgba(255,255,255,0) 100%);filter:blur(6px)}
.backdrop__title,.backdrop__head p{text-shadow:none}

/* Blur các ô phía sau chữ (kính mờ), mép mờ dần */
.backdrop__head::before{background:rgba(255,255,255,.55);filter:none;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  -webkit-mask-image:radial-gradient(ellipse at center,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse at center,#000 55%,transparent 100%)}

/* Mép blur tròn mềm: gradient kết thúc đúng ở cạnh hộp nên không còn viền vuông */
.backdrop__head::before{width:min(100%,64rem);height:13rem;background:rgba(255,255,255,.5);
  -webkit-mask-image:radial-gradient(closest-side,#000 35%,transparent 100%);mask-image:radial-gradient(closest-side,#000 35%,transparent 100%)}

/* Băng chuyền: hàng chạy liên tục, hai hàng ngược chiều. Dịch đúng 2 ô (chu kỳ đen/trắng) nên vòng lặp liền mạch */
.bd-row{animation:bdBelt 6s linear infinite;will-change:transform}
.bd-row--b{animation-direction:reverse}
@keyframes bdBelt{from{transform:translateX(0)}to{transform:translateX(calc((var(--tile) + var(--gap)) * -2))}}
@media(prefers-reduced-motion:reduce){.bd-row{animation:none}}

/* Khoảng trống giữa hai hàng: tiêu đề + mô tả nằm ở giữa, không đè lên ô */
.backdrop{display:flex;flex-direction:column;gap:6px}
.backdrop__head{position:static;inset:auto;display:block;padding:1.75rem 1rem;pointer-events:auto}
.backdrop__head::before{display:none}
.backdrop__title,.backdrop__head p{text-shadow:none}
.backdrop__head p{font-weight:400}
.backdrop__title{margin-bottom:.4rem}



/* Đơn vị phân phối độc quyền: cùng ngôn ngữ với hệ thống (Montserrat in hoa, Cabin, đen/trắng/xám, ô vuông) */
.dist{background:#f1f1f1;font-family:"Cabin",system-ui,sans-serif;padding:4rem 1rem;color:#222}
.dist__inner{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:auto 1fr auto;gap:3rem;align-items:center}
.dist__tile{width:11rem;height:11rem;background:#fff;box-shadow:inset 0 0 0 1px #e3e3e3;display:flex;align-items:center;justify-content:center}
.dist__tile img{width:80%;height:auto}
.dist__eyebrow{margin:0 0 .5rem;color:#666;font-size:.95rem}
.dist__title{font-family:"Montserrat",system-ui,sans-serif;font-size:clamp(1.4rem,2.6vw,2rem);font-weight:700;text-transform:uppercase;letter-spacing:.06em;line-height:1.25;margin:0 0 .5rem}
.dist__brand{margin:0 0 1rem;color:#666}
.dist__brand a{color:#222;font-weight:600;margin-left:.5rem;text-decoration:underline}
.dist__lead{margin:0 0 .9rem;color:#444;max-width:36rem}
.dist__points{list-style:none;margin:0;padding:0}
.dist__points li{position:relative;padding-left:1.1rem;font-weight:600}
.dist__points li::before{content:"";position:absolute;left:0;top:.5em;width:.5rem;height:.5rem;background:#111}
.dist__cta{min-width:15.5rem;display:flex;flex-direction:column;gap:.6rem}
.dist__label{color:#666}
.dist__phone{font-family:"Montserrat",system-ui,sans-serif;font-size:1.6rem;font-weight:700;color:#222;text-decoration:none;line-height:1.1}
.dist__chips{display:flex;gap:.5rem}
.dist__btn{display:inline-flex;align-items:center;justify-content:center;padding:.6rem 1rem;background:none;border:1px solid #222;border-radius:0;color:#222;font:500 1rem "Cabin",system-ui,sans-serif;text-transform:uppercase;text-decoration:none}
.dist__btn:hover{background:#222;color:#fff}
.dist__btn--solid{background:#222;color:#fff}
.dist__btn--solid:hover{background:#444;border-color:#444}
.dist__chips .dist__btn{flex:1}
.dist__more{color:#222;font-weight:600;text-decoration:underline}
@media(max-width:991.98px){
  .dist__inner{grid-template-columns:auto 1fr;gap:2rem}
  .dist__cta{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:center;gap:.75rem 1.5rem}
}
@media(max-width:575.98px){
  .dist__inner{grid-template-columns:1fr;gap:1.5rem}
  .dist__tile{width:8.5rem;height:8.5rem}
  .dist__cta{flex-direction:column;align-items:stretch}
}

/* Trang chi tiết sản phẩm theo thiết kế kellymoore.ru: tiêu đề xanh + phụ đề vàng olive, 3 khối đặc tính / ưu điểm / ứng dụng */
.pdx{--blue:#2f6489;--olive:#8c7d4f;--btn:#2f6489;--tile:#ececec;font-family:"Roboto",system-ui,sans-serif;color:var(--blue)}
.pdx-sec{padding:2.5rem 0 1rem}
.pdx-head{margin:0 0 1.5rem}
.pdx-title{font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:700;text-transform:uppercase;line-height:1.1;margin:0;color:var(--blue)}
.pdx-sub{display:block;font-size:clamp(1.4rem,2.6vw,2rem);font-weight:300;color:var(--olive);line-height:1.15;margin-top:.1rem}
.pdx-btn{display:inline-block;padding:.65rem 1.9rem;background:var(--btn);border-radius:.6rem;color:#fff;font-size:1.1rem;font-weight:500;text-decoration:none}
.pdx-btn:hover{background:#254f6f;color:#fff}

.pdx-specs{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:3rem;align-items:center}
.pdx-specs__img img{display:block;width:100%;max-width:26rem;height:auto;margin:0 auto}
.pdx-specs__list{margin:0 0 2rem}
.pdx-specs__list>div{display:grid;grid-template-columns:minmax(0,11rem) 1fr;gap:1rem;padding:.35rem 0}
.pdx-specs__list dt{font-weight:400;color:var(--olive)}
.pdx-specs__list dd{margin:0;color:var(--blue)}

.pdx-ben{position:relative;margin-top:1rem;min-height:clamp(20rem,28vw,30rem);overflow:hidden;background:#fff url(/assets/img/product-benefits-bg.jpg) left center/cover no-repeat;display:flex;align-items:center}
.pdx-ben__list{position:relative;list-style:none;margin:0;padding:2.5rem 1rem 2.5rem 24rem;display:grid;gap:2rem;max-width:56rem}
.pdx-ben__list h3{margin:0;font-size:clamp(1.25rem,2.2vw,1.75rem);font-weight:300;text-transform:uppercase;line-height:1.2;color:var(--blue)}
.pdx-ben__list p{margin:.3rem 0 0;font-size:.95rem;color:#222}

.pdx-app__lead{margin:0 0 1.1rem;line-height:1.6}
.pdx-app__lead b{font-weight:700;text-transform:uppercase}
.pdx-uses{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:2.25rem;list-style:none;margin:1.75rem 0 2rem;padding:0}
.pdx-uses li{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4rem;aspect-ratio:1;padding:1rem;background:var(--tile);border-radius:.9rem;text-align:center}
.pdx-uses i{font-size:4.2rem;line-height:1;color:var(--blue)}
.pdx-cta{text-align:center;padding:0 0 1rem}

@media(max-width:991.98px){
  .pdx-specs{grid-template-columns:1fr;gap:1.5rem}
  .pdx-ben{background-image:linear-gradient(rgba(255,255,255,.88),rgba(255,255,255,.88)),url(/assets/img/product-benefits-bg.jpg)}
  .pdx-ben__list{padding:2rem 1rem}
  .pdx-uses{gap:1rem}
}
@media(max-width:575.98px){
  .pdx-specs__list>div{grid-template-columns:1fr;gap:0;padding:.5rem 0}
  .pdx-uses i{font-size:3rem}
}

/* Catalog 3 cấp theo kellymoore.ru: khu vực (lưới ảnh + thanh xanh) -> sản phẩm (thẻ trắng) -> chi tiết */
.ktl{max-width:1180px;margin:0 auto;padding:1.5rem 1rem 4rem;font-family:"Roboto",system-ui,sans-serif;color:#2f6489}
.ktl .prod-crumbs a{color:#2f6489}
.ktl__title{font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:500;color:#2f6489;margin:0 0 1.5rem}
.ktl-areas,.ktl-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.5rem;margin:0;padding:0}
.ktl-area{display:block;text-decoration:none;color:#fff}
.ktl-area__img{display:block;aspect-ratio:1;background:#f3f3f3;border-radius:1.1rem 1.1rem 0 0;overflow:hidden;display:flex;align-items:center;justify-content:center}
.ktl-area__img img{width:100%;height:100%;object-fit:contain;padding:1.5rem;transition:transform .4s}
.ktl-area:hover .ktl-area__img img{transform:scale(1.05)}
.ktl-area__label{display:block;padding:.8rem 1rem;background:#2f6489;border-radius:0 0 .6rem .6rem;text-align:center;font-size:1.15rem;font-weight:500}
.ktl-area:hover .ktl-area__label{background:#254f6f}
.ktl-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:1.5rem 1.5rem 1.25rem;border:1px solid #e8e8e8;border-radius:.8rem;background:#fff}
.ktl-card__img{display:block;width:100%}
.ktl-card__img img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain}
.ktl-card__name{font-size:1.1rem;font-weight:500;text-transform:uppercase;margin:1.1rem 0 .5rem}
.ktl-card__name a{color:#111;text-decoration:none}
.ktl-card__desc{flex:1;margin:0 0 1.1rem;color:#222;font-size:.95rem;line-height:1.5}
.ktl-btn{display:block;width:100%;padding:.65rem 1rem;background:#2f6489;border-radius:.6rem;color:#fff;font-size:1.05rem;text-align:center;text-decoration:none}
.ktl-btn:hover{background:#254f6f;color:#fff}
@media(max-width:991.98px){.ktl-areas,.ktl-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}}
@media(max-width:575.98px){.ktl-areas,.ktl-cards{grid-template-columns:1fr}}
.pdx-btn--blue{background:var(--blue)}
.pdx-btn--blue:hover{background:#254f6f}
.pdx-actions{display:flex;flex-wrap:wrap;gap:1rem}

/* Chỉnh sát thiết kế mẫu */
.ktl-areas,.ktl-cards{gap:2.5rem 2.5rem}
.ktl-area__img{border-radius:1.1rem;background:#f4f4f4}
.ktl-area__img img{padding:1rem}
.ktl-area__label{border-radius:.6rem;margin-top:0;padding:.75rem 1rem;font-size:1.1rem}
.ktl-card{padding:1.25rem 1.25rem 1.25rem;border-color:#ececec}
.ktl-card__name{font-size:1.05rem;font-weight:500;letter-spacing:0}
.ktl-btn{border-radius:.6rem;padding:.7rem 1rem;font-weight:400}
.pdx-specs__list>div{padding:.3rem 0;align-items:center}
.pdx-specs__list dt{font-size:1rem}
.pdx-chips{display:flex;flex-wrap:wrap;gap:.4rem}
.pdx-chip{padding:.15rem .6rem;border-radius:.3rem;color:var(--blue)}
.pdx-chip.is-alt{background:var(--tile)}
.pdx-btn{border-radius:.6rem;padding:.7rem 1.6rem;font-weight:500}
.pdx-specs__img img{max-width:30rem}

/* Khối Ưu điểm như mẫu: dải ảnh tràn hết chiều ngang, tiêu đề và danh sách thẳng hàng cùng một cột chữ */
main{overflow-x:clip}
.pdx-sec--ben{--ben-x:max(24rem,19.5vw);width:100vw;margin-left:calc(50% - 50vw);padding-bottom:0}
.pdx-sec--ben .pdx-head{padding-left:var(--ben-x);padding-right:1rem}
.pdx-sec--ben .pdx-ben{margin-top:0;min-height:max(26rem,27vw);background-size:cover;background-position:left center}
.pdx-sec--ben .pdx-ben__list{padding:2.5rem 1rem 2.5rem var(--ben-x);max-width:none;width:min(100%,calc(var(--ben-x) + 34rem))}
.pdx-sec--ben .pdx-ben__list h3{font-weight:300;font-size:clamp(1.3rem,2vw,1.9rem)}
.pdx-sec--ben .pdx-ben__list p{font-size:.95rem}
@media(max-width:991.98px){
  .pdx-sec--ben{--ben-x:1rem}
  .pdx-sec--ben .pdx-ben__list{width:100%}
}
.ktl-area__img.is-photo img{object-fit:cover;padding:0}
/* Danh sách ưu điểm dài: ảnh giữ đúng tỉ lệ theo chiều ngang (không phóng to), phần dưới nối nền trắng */
/* Ưu điểm gọn như mẫu: toàn bộ nằm trong dải ảnh, chia 2 cột chữ ngắn; khung "Độ bám dính" xanh đè lên mép dưới dải ảnh */
.pdx-sec--ben .pdx-ben{min-height:max(22rem,28.5vw);align-items:center;background-size:cover;background-position:left center}
.pdx-sec--ben .pdx-ben__list{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem 2.5rem;padding:2.5rem 1rem 4.5rem var(--ben-x);width:min(100%,calc(var(--ben-x) + 44rem))}
.pdx-sec--ben .pdx-ben__list h3{font-size:clamp(1rem,1.3vw,1.3rem);line-height:1.2}
.pdx-sec--ben .pdx-ben__list p{font-size:.85rem;margin-top:.2rem}
.pdx-adh{position:relative;z-index:1;margin:-3.5rem 1rem 0 var(--ben-x);max-width:72rem;padding:1.6rem 3rem;background:var(--blue);border-radius:1.2rem;color:#fff}
.pdx-adh h3{margin:0 0 .35rem;font-size:clamp(1.4rem,2vw,1.9rem);font-weight:300;text-transform:uppercase}
.pdx-adh p{margin:0;font-size:.95rem;font-weight:500;line-height:1.5}
@media(max-width:991.98px){
  .pdx-sec--ben .pdx-ben__list{grid-template-columns:1fr;padding:2rem 1rem}
  .pdx-adh{margin:1rem 1rem 0;padding:1.25rem 1.5rem}
}

/* Nút CONTACT trên header trong suốt (trang chủ): hover nền trắng, chữ tối */
.site-header .btn-outline-light{--bs-btn-hover-bg:#fff;--bs-btn-hover-border-color:#fff;--bs-btn-hover-color:#1c1712;--bs-btn-active-bg:#fff;--bs-btn-active-border-color:#fff;--bs-btn-active-color:#1c1712}

/* Phối thử màu (?code=): nền = màu đang chọn, ảnh phòng có tường trong suốt đè lên trên.
   Điều khiển đè lên ảnh như mẫu: link quay lại + khung bo tròn (đậm hơn / mã màu / nhạt hơn) ở trên, mũi tên + gạch chỉ phòng ở giữa dưới */
a.pal-color{text-decoration:none;transition:transform .15s}
a.pal-color:hover{transform:scale(1.04);box-shadow:0 6px 18px rgba(0,0,0,.18);position:relative;z-index:1}
.viz{--ink:#fff;background:var(--c);color:var(--ink);font-family:"Roboto",system-ui,sans-serif}
.viz--light{--ink:#111}
.viz__stage{position:relative;background:var(--c);overflow:hidden}
.viz__room{display:block;width:100%;height:auto;min-height:22rem;object-fit:cover}
.viz__top{position:absolute;top:clamp(1rem,3vw,2.25rem);left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:1rem;padding:0 1rem;pointer-events:none}
.viz__top>*{pointer-events:auto}
.viz__back{display:inline-flex;align-items:center;gap:.6rem;color:var(--ink);font-weight:500;text-decoration:none}
.viz__back .bi{font-size:1.5rem}
.viz__back:hover{text-decoration:underline}
.viz__nav{display:flex;align-items:center;justify-content:space-between;gap:2rem;min-width:min(26rem,100%);padding:.55rem 1.25rem;border:1px solid var(--ink);border-radius:2rem}
.viz__title{margin:0;font-size:clamp(1.2rem,2vw,1.6rem);font-weight:500;color:var(--ink);text-align:center;line-height:1.15}
.viz__title small{display:block;font-size:.55em;font-weight:400;opacity:.8}
.viz__step{display:inline-flex;align-items:center;gap:.5rem;color:var(--ink);font-size:.9rem;text-decoration:none;white-space:nowrap}
.viz__step:hover{text-decoration:underline}
.viz__step.is-off{opacity:.35}
.viz__ico{display:inline-flex;align-items:center;justify-content:center;width:1.4rem;height:1.4rem;border-radius:50%;background:#fff;color:#2f6489;font-size:.8rem}
.viz__slider{position:absolute;left:50%;bottom:clamp(1rem,6vw,4.5rem);transform:translateX(-50%);display:flex;align-items:center;gap:.5rem}
.viz__arrow{display:inline-flex;align-items:center;justify-content:center;width:1.9rem;height:1.9rem;padding:0;border:0;border-radius:50%;background:#fff;color:#2f6489;font-size:1rem;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.viz__arrow:hover{background:#2f6489;color:#fff}
.viz__dot{width:1.5rem;height:.4rem;padding:0;border:0;border-radius:.2rem;background:rgba(255,255,255,.65);cursor:pointer;transition:width .25s,background .25s;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.viz__dot:hover{background:#fff}
.viz__dot.is-active{width:3rem;background:#fff}
.viz-note{max-width:1280px;margin:0 auto;padding:1.5rem 1rem 3rem;font-family:"Roboto",system-ui,sans-serif;color:#2f6489}
.viz-note p{margin:0 0 .4rem}
.viz-note__cta{margin-top:1.25rem !important}
.viz-note .pdx-btn{background:#2f6489;border-radius:.6rem;color:#fff;padding:.65rem 1.9rem;text-decoration:none;display:inline-block}
@media(max-width:767.98px){
  .viz__stage{display:flex;flex-direction:column}
  .viz__top{position:static;order:-1;padding:1rem 1rem .75rem}
  .viz__nav{gap:.75rem;padding:.45rem .8rem;min-width:0;width:100%}
  .viz__step{font-size:.8rem}
  .viz__room{min-height:0}
  .viz__slider{bottom:.75rem}
  .viz__dot{width:1rem}
  .viz__dot.is-active{width:2rem}
}

/* style.css cũ đặt body padding-top:110px trên màn hình nhỏ -> header trong suốt bị đẩy lộ nền trắng. Header là fixed nên không cần. */
body{padding-top:0}

/* Tab bộ chủ đề màu: luôn 1 hàng, gọn; mobile cuộn ngang, tab đang chọn tự cuộn vào giữa */
.themes__tabs{position:relative;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;gap:2rem;scroll-padding:0 1rem}
.themes__tabs::-webkit-scrollbar{display:none}
.themes__tabs button{flex:none;white-space:nowrap}
@media(max-width:991.98px){
  .themes__tabs{justify-content:flex-start;gap:1.5rem;margin-bottom:1.5rem;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 1rem,#000 calc(100% - 2rem),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 1rem,#000 calc(100% - 2rem),transparent)}
  .themes__tabs button{font-size:.85rem}
}

/* Menu mobile: mở ra thì cả header thành nền đặc (không còn hộp mờ nhìn xuyên nội dung), link xếp dọc có kẻ ngăn */
@media(max-width:991.98px){
  .site-header:has(.navbar-collapse.show),.site-header:has(.navbar-collapse.collapsing){background:#1c1712;-webkit-backdrop-filter:none;backdrop-filter:none}
  .site-header--light:has(.navbar-collapse.show),.site-header--light:has(.navbar-collapse.collapsing){background:#fff}
  .navbar[data-bs-theme=dark] .navbar-collapse.show,.navbar[data-bs-theme=dark] .navbar-collapse.collapsing,
  .site-header--light .navbar-collapse.show,.site-header--light .navbar-collapse.collapsing{background:transparent;padding:0;margin-top:.75rem}
  .site-header .navbar-collapse.show{max-height:calc(100vh - 5rem);overflow-y:auto}
  .site-header .navbar-nav{gap:0}
  .site-header .navbar-nav .nav-item{border-top:1px solid rgba(255,255,255,.15)}
  .site-header--light .navbar-nav .nav-item{border-top-color:#e6e6e6}
  .site-header .navbar-nav .nav-link{display:block;padding:.85rem 0;border-top:0;border-bottom:0;font-size:1rem}
  .site-header .navbar-nav .nav-link.active{border-bottom:0;color:#d9b87c}
  .site-header--light .navbar-nav .nav-link.active{color:#000}
  .site-header .navbar-collapse>.btn{display:inline-block;margin:1rem 0 1.25rem !important;padding:.5rem 2.5rem}
  .site-header .navbar-collapse>.lang-switch{margin:1rem 0 1.25rem .75rem !important;vertical-align:middle}
  .site-header .navbar-toggler{border-color:rgba(255,255,255,.5);padding:.35rem .55rem}
  .site-header--light .navbar-toggler{border-color:#222}
}

/* Nút ngôn ngữ cao bằng nút CONTACT (1rem chữ x 1.5 + đệm .5rem x 2 + viền 2px), ô vuông */
.site-header .lang-switch{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:calc(2.5rem + 2px);min-width:calc(2.5rem + 2px);padding:0 .6rem;font-size:.9rem;line-height:1;vertical-align:middle}

/* Menu 5 mục: màn hình 992–1279px thu gọn khoảng cách để nút CONTACT + ngôn ngữ không bị đẩy ra ngoài */
@media(min-width:992px) and (max-width:1279.98px){
  .site-header .navbar-nav{gap:1.5rem;margin-right:1.5rem}
  .site-header .navbar-nav .nav-link{font-size:.95rem}
  .site-header .btn-outline-light,.site-header--light .btn-outline-dark{padding:.5rem 1.5rem}
  .site-header .brand-logo{max-width:150px;height:auto}
}
/* Khung điều hướng màu: nền mờ nhẹ cùng màu tường để đọc rõ khi đè lên tranh/đồ vật */
.viz__nav{background:color-mix(in srgb,var(--c) 55%,transparent);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.viz__back{padding:.2rem .7rem;border-radius:1rem;background:color-mix(in srgb,var(--c) 45%,transparent)}

/* Hiệu ứng đổi màu: lớp màu mới nằm giữa nền và ảnh phòng, loang ra từ chỗ bấm như sơn thấm (mép mềm); nền trang chuyển màu mượt theo */
@property --ink-r{syntax:'<length>';inherits:false;initial-value:0px}
.viz{transition:background-color .9s ease}
.viz__room{position:relative;z-index:1}
.viz__top,.viz__slider{z-index:2}
.viz__wipe{--ink-r:0px;position:absolute;inset:0;z-index:0;
  -webkit-mask-image:radial-gradient(circle at var(--x,50%) var(--y,35%),#000 calc(var(--ink-r) * .72),rgba(0,0,0,.55) calc(var(--ink-r) * .88),transparent var(--ink-r));
  mask-image:radial-gradient(circle at var(--x,50%) var(--y,35%),#000 calc(var(--ink-r) * .72),rgba(0,0,0,.55) calc(var(--ink-r) * .88),transparent var(--ink-r));
  animation:vizInk 1.6s cubic-bezier(.5,0,.3,1) forwards}
@keyframes vizInk{from{--ink-r:0px}to{--ink-r:max(170vw,1700px)}}
@media(prefers-reduced-motion:reduce){.viz__wipe{animation-duration:.01s}.viz{transition:none}}

/* Trượt khi đổi không gian: ảnh mới đặt chồng lên (absolute) rồi hai ảnh cùng trượt ngang */
.viz__room.is-incoming{position:absolute;left:0;width:100%}
.viz__room.is-sliding{transition:transform .65s cubic-bezier(.65,0,.35,1);will-change:transform}
.viz-note .pdx-btn:hover{background:#254f6f;color:#fff}

/* Hero trên mobile: ảnh 1920x720 quá thấp -> cắt khung 5:4 (object-fit:cover), lệch trái để giữ khối chữ "Color of the Year" */
@media(max-width:767.98px){
  .hero-carousel__img{aspect-ratio:5/4;height:auto;object-fit:cover;object-position:40% center}
  /* Chừa đúng chiều cao header (73px) bằng dải tối để logo không đè lên chữ trong ảnh */
  .hero-carousel{padding-top:73px;background:#1c1712}
}

/* Nhà phân phối trên mobile: gọn lại, gộp hàng
   - logo nhỏ cạnh nhãn + tên công ty + Sơn Mỹ Nhà Việt/website
   - hàng 1 liên hệ: số điện thoại + "Cửa hàng →"; hàng 2: Zalo | Messenger | Liên hệ */
.dist__short{display:none}
@media(max-width:575.98px){
  .dist{padding:2rem 1rem}
  .dist__inner{grid-template-columns:4.5rem 1fr;gap:.25rem 1rem;align-items:start}
  .dist__tile{width:4.5rem;height:4.5rem;grid-row:span 3;align-self:center}
  .dist__body{display:contents}
  .dist__eyebrow{grid-column:2;margin:0;font-size:.8rem;line-height:1.3}
  .dist__title{grid-column:2;margin:0;font-size:1.1rem}
  .dist__brand{grid-column:2;margin:0;font-size:.85rem}
  .dist__lead,.dist__points{grid-column:1/-1}
  .dist__lead{margin:.9rem 0 .5rem;font-size:.92rem}
  .dist__cta{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;align-items:center;margin-top:1rem;padding-top:1rem;border-top:1px solid #ddd}
  .dist__label{display:none}
  .dist__phone{grid-row:1;grid-column:1/3;font-size:1.3rem}
  .dist__more{grid-row:1;grid-column:3;justify-self:end;font-size:.9rem}
  .dist__cta .dist__btn{grid-row:2}
  .dist__cta .dist__btn--solid{grid-column:3}
  .dist__chips{display:contents}
  .dist__btn{padding:.55rem .4rem;font-size:.85rem}
  .dist__full{display:none}
  .dist__short{display:inline}
}

/* Tiêu đề thương hiệu giữa 2 hàng ô: nhãn nhỏ có gạch hai bên, tên lớn (Kelly-Moore đậm, Paints mảnh, không bẻ dòng giữa tên),
   dòng "Từ năm 1946" bằng chữ serif nghiêng để tạo điểm nhấn */
.backdrop__head{padding:2.25rem 1rem 2rem}
.backdrop__eyebrow{display:flex;align-items:center;justify-content:center;gap:.9rem;margin:0 0 .6rem;font:600 .78rem "Montserrat",system-ui,sans-serif;letter-spacing:.32em;text-transform:uppercase;color:#777}
.backdrop__eyebrow::before,.backdrop__eyebrow::after{content:"";width:2.5rem;height:1px;background:#bbb}
.backdrop__title{margin:0;font-family:"Montserrat",system-ui,sans-serif;font-size:clamp(2rem,6vw,3.6rem);line-height:1.05;letter-spacing:.03em;text-transform:uppercase;color:#111}
.backdrop__km{font-weight:800;white-space:nowrap}
.backdrop__paints{font-weight:300;white-space:nowrap}
.backdrop__since{margin:.7rem 0 0;font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-weight:500;font-size:clamp(1.1rem,2vw,1.4rem);color:#444}
.backdrop__head p.backdrop__since,.backdrop__head p.backdrop__eyebrow{font-weight:inherit}
.backdrop__head p.backdrop__eyebrow{font-weight:600}
@media(max-width:575.98px){
  .backdrop__head{padding:1.5rem 1rem 1.25rem}
  .backdrop__eyebrow{letter-spacing:.24em;font-size:.7rem}
  .backdrop__eyebrow::before,.backdrop__eyebrow::after{width:1.5rem}
  .backdrop__title{font-size:clamp(1.7rem,8.5vw,2.4rem)}
}

/* Header mobile thấp hơn: đệm dọc nhỏ, logo và nút menu gọn (cao 47px thay vì 73px) */
@media(max-width:991.98px){
  .site-header .navbar{padding-top:.5rem !important;padding-bottom:.5rem !important}
  .brand-logo{height:1.75rem}
  .site-header .navbar-toggler{padding:.25rem .45rem;font-size:1rem}
  .site-header .navbar-toggler-icon{width:1.25em;height:1.25em}
  .main-offset{padding-top:47px}
}
@media(max-width:767.98px){
  .hero-carousel{padding-top:47px}
}

/* Gạch chỉ slide hero trên mobile: ngắn, mảnh, sát đáy ảnh */
@media(max-width:767.98px){
  .hero-carousel .carousel-indicators{margin-bottom:0}
  .hero-carousel .carousel-indicators [data-bs-target]{width:18px;height:2px;margin-inline:3px;margin-bottom:.75rem}
}

/* Menu mobile gọn: link xếp 2 cột (5 mục còn 3 hàng), chữ nhỏ hơn; hàng cuối CONTACT giãn hết + nút ngôn ngữ vuông cùng chiều cao */
@media(max-width:991.98px){
  .site-header .navbar-collapse.show,.site-header .navbar-collapse.collapsing{margin-top:.5rem}
  .site-header .navbar-nav{display:grid;grid-template-columns:1fr 1fr;column-gap:1.25rem;border-top:1px solid rgba(255,255,255,.15)}
  .site-header--light .navbar-nav{border-top-color:#e6e6e6}
  .site-header .navbar-nav .nav-item{border-top:0;border-bottom:1px solid rgba(255,255,255,.1)}
  .site-header--light .navbar-nav .nav-item{border-bottom-color:#eee}
  .site-header .navbar-nav .nav-link{padding:.6rem 0 .6rem .7rem;font-size:.85rem;letter-spacing:.04em;border-left:2px solid transparent}
  .site-header .navbar-nav .nav-link.active{border-left-color:#d9b87c}
  .site-header--light .navbar-nav .nav-link.active{border-left-color:#000}
  .site-header .navbar-collapse.show,.site-header .navbar-collapse.collapsing{display:flex;flex-wrap:wrap;align-items:center;gap:0 .5rem}
  .site-header .navbar-collapse>.navbar-nav{flex:0 0 100%}
  .site-header .navbar-collapse>.btn{flex:1;margin:.75rem 0 .9rem !important;padding:.45rem 1rem;font-size:.9rem}
  .site-header .navbar-collapse>.lang-switch{margin:.75rem 0 .9rem !important;height:calc(1.35rem + .9rem + 2px);min-width:calc(1.35rem + .9rem + 2px)}
}

/* Trang Tìm cửa hàng theo style hệ thống (như trang chủ / header): Montserrat in hoa, Cabin, đen-trắng-xám, góc vuông.
   Trái danh sách thẻ, phải bản đồ dính; mobile bản đồ lên trên */
.stl{font-family:"Cabin",system-ui,sans-serif;color:#222}
.stl .prod-crumbs,.stl .prod-crumbs a{color:#666}
.stl .ktl__title{font-family:"Montserrat",system-ui,sans-serif;font-size:clamp(1.6rem,3.4vw,2.4rem);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#111;margin-bottom:.5rem}
.stl__lead{margin:0 0 1.75rem;color:#666;font-size:1.05rem}
.stl__wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:1.5rem;align-items:start}
.stl__list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.stl__list>li{border:1px solid #e3e3e3;background:#fff;transition:border-color .2s,background .2s}
.stl__list>li:hover{border-color:#bbb}
.stl__list>li:has(.is-active){border-color:#111;background:#fff}
.stl__card{display:flex;gap:1rem;width:100%;padding:1.1rem 1.2rem .6rem;border:0;background:none;text-align:left;color:inherit;cursor:pointer}
.stl__num{flex:none;display:flex;align-items:center;justify-content:center;width:2.4rem;height:2.4rem;background:#f1f1f1;color:#111;font:700 .9rem "Montserrat",system-ui,sans-serif}
.stl__card.is-active .stl__num{background:#111;color:#fff}
.stl__info{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.stl__area{font:600 .72rem "Montserrat",system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#888}
.stl__name{font:700 1rem "Montserrat",system-ui,sans-serif;text-transform:uppercase;letter-spacing:.04em;color:#111}
.stl__addr{display:flex;gap:.4rem;color:#444;font-size:.95rem;line-height:1.45}
.stl__addr .bi{color:#111;margin-top:.1rem}
.stl__acts{display:flex;gap:1.5rem;padding:.25rem 1.2rem 1rem 4.6rem}
.stl__acts a{display:inline-flex;align-items:center;gap:.4rem;color:#222;font-weight:600;font-size:.9rem;text-decoration:underline;text-underline-offset:.25em}
.stl__acts a:hover{color:#000}
.stl__map{position:sticky;top:6.5rem;overflow:hidden;background:#f1f1f1;aspect-ratio:4/3;border:1px solid #e3e3e3}
.stl__map iframe{display:block;width:100%;height:100%;border:0;filter:grayscale(.35)}
.stl__help{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.25rem 2rem;margin-top:2.5rem;padding:2rem;background:#1c1712;color:#fff}
.stl__help h2{margin:0 0 .35rem;font:700 1.2rem "Montserrat",system-ui,sans-serif;text-transform:uppercase;letter-spacing:.06em;color:#fff}
.stl__help p{margin:0;color:rgba(255,255,255,.75);max-width:34rem}
.stl__help-acts{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.stl__phone{display:inline-flex;align-items:center;gap:.5rem;margin-right:.75rem;color:#fff;font:700 1.4rem "Montserrat",system-ui,sans-serif;text-decoration:none}
.stl__chip{padding:.5rem 1rem;border:1px solid rgba(255,255,255,.7);color:#fff;font-size:.85rem;font-weight:500;text-transform:uppercase;letter-spacing:.04em;text-decoration:none}
.stl__chip:hover{background:#fff;color:#1c1712}
@media(max-width:991.98px){
  .stl__wrap{grid-template-columns:1fr}
  .stl__map{position:static;order:-1;aspect-ratio:16/10}
}
@media(max-width:575.98px){
  .stl__card{padding:.9rem .9rem .5rem;gap:.75rem}
  .stl__num{width:2rem;height:2rem;font-size:.8rem}
  .stl__acts{padding:.1rem .9rem .85rem 3.65rem}
  .stl__help{padding:1.5rem 1.25rem}
  .stl__phone{width:100%;margin:0 0 .25rem}
}

/* Logo ngang (SVG 492x42): cao theo chữ, rộng tự động */
.site-header .brand-logo{height:1.45rem;width:auto;max-width:none}
@media(min-width:992px) and (max-width:1279.98px){.site-header .brand-logo{height:1.15rem;max-width:none}}
@media(max-width:991.98px){.site-header .brand-logo{height:1.15rem}}
@media(max-width:374.98px){.site-header .brand-logo{height:1rem}}

/* Menu desktop không bao giờ bẻ dòng chữ; tiếng Việt dài hơn nên thu gọn khoảng cách tới 1399px */
@media(min-width:992px){
  .site-header .navbar-nav .nav-link,.site-header .navbar-collapse>.btn{white-space:nowrap}
}
@media(min-width:992px) and (max-width:1399.98px){
  .site-header .navbar-nav{gap:1.4rem;margin-right:1.4rem}
  .site-header .navbar-nav .nav-link{font-size:.9rem}
  .site-header .btn-outline-light,.site-header--light .btn-outline-dark{padding:.5rem 1.5rem}
}
@media(min-width:992px) and (max-width:1199.98px){
  .site-header .navbar-nav{gap:1rem;margin-right:1rem}
  .site-header .navbar-nav .nav-link{font-size:.82rem}
  .site-header .btn-outline-light,.site-header--light .btn-outline-dark{padding:.5rem 1rem;font-size:.9rem}
}

/* Section lịch sử: dãy slide, trang chính ở giữa phóng to để đọc, hai bên nhỏ + mờ (vị trí do JS đặt).
   Tự chuyển sau 3 giây theo thanh tiến trình; rê chuột / chạm giữ / mở lightbox / cuộn khỏi màn hình thì dừng */
.hist{background:#f1f1f1;color:#222;font-family:"Cabin",system-ui,sans-serif;padding:clamp(3rem,6vw,5rem) 0;overflow:hidden}
.hist__head{max-width:44rem;margin:0 auto 2rem;padding:0 1rem;text-align:center}
.hist__eyebrow{display:flex;align-items:center;justify-content:center;gap:.9rem;margin:0 0 .6rem;font:600 .78rem "Montserrat",system-ui,sans-serif;letter-spacing:.3em;text-transform:uppercase;color:#777}
.hist__eyebrow::before,.hist__eyebrow::after{content:"";width:2.5rem;height:1px;background:#bbb}
.hist__title{margin:0;font:700 clamp(1.75rem,4vw,2.8rem)/1.1 "Montserrat",system-ui,sans-serif;letter-spacing:.05em;text-transform:uppercase;color:#111}
.hist__lead{margin:.9rem 0 0;color:#666;font-size:1.05rem;line-height:1.6}
.hist__stage{--w:min(880px,74vw);position:relative;height:calc(var(--w) * 644 / 1200 + 2.5rem)}
.hist__slide{position:absolute;left:50%;top:50%;width:var(--w);aspect-ratio:1200/644;padding:0;border:0;background:#fff;cursor:pointer;
  transform:translate(-50%,-50%);transition:transform .8s cubic-bezier(.65,0,.35,1),opacity .6s,filter .6s,box-shadow .6s;
  filter:grayscale(.4) brightness(.92);opacity:.55;box-shadow:0 8px 20px rgba(0,0,0,.12)}
.hist__slide img{display:block;width:100%;height:100%;object-fit:cover;user-select:none}
.hist__slide.is-near:hover{opacity:.85}
.hist__slide.is-active{filter:none;opacity:1;cursor:zoom-in;box-shadow:0 22px 50px rgba(0,0,0,.28)}
.hist__bar{display:flex;align-items:center;justify-content:center;gap:1.25rem;margin-top:1.5rem;padding:0 1rem}
.hist__btn{display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;padding:0;border:1px solid #222;background:transparent;color:#222;font-size:1.1rem;cursor:pointer;transition:background .2s,color .2s}
.hist__btn:hover{background:#222;color:#fff}
.hist__mid{display:flex;flex-direction:column;align-items:center;gap:.45rem;min-width:9rem}
.hist__count{font:600 .85rem "Montserrat",system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#111}
.hist__progress{display:block;width:100%;height:2px;background:#d6d6d6;overflow:hidden}
.hist__progress span{display:block;height:100%;background:#111;transform-origin:left;transform:scaleX(0)}
.hist__progress span.is-run{animation:histTick 3s linear forwards}
@keyframes histTick{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hist:has(.hist__stage:hover) .hist__progress span,.hist:has(.hist__stage:focus-within) .hist__progress span,
.hist__stage.is-hold~.hist__bar .hist__progress span,.hist.is-lb .hist__progress span,.hist.is-off .hist__progress span{animation-play-state:paused}
@media(max-width:767.98px){
  .hist__stage{--w:84vw}
  .hist__head{margin-bottom:1.25rem}
  .hist__eyebrow::before,.hist__eyebrow::after{width:1.5rem}
}
@media(prefers-reduced-motion:reduce){.hist__slide{transition:none}.hist__progress span.is-run{animation-duration:6s}}
/* Lightbox */
.hist-lb{width:min(1200px,94vw);max-width:none;max-height:94vh;padding:0;border:0;background:transparent;overflow:visible}
.hist-lb::backdrop{background:rgba(10,10,10,.88)}
.hist-lb__img{display:block;width:100%;height:auto;max-height:80vh;object-fit:contain;background:#fff;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.hist-lb__close{position:absolute;top:-2.75rem;right:0;width:2.25rem;height:2.25rem;padding:0;border:1px solid rgba(255,255,255,.6);background:transparent;color:#fff;font-size:1rem;cursor:pointer}
.hist-lb__close:hover{background:#fff;color:#111}
.hist-lb__bar{display:flex;align-items:center;justify-content:center;gap:1.25rem;margin-top:1rem}
.hist-lb__btn{display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;padding:0;border:1px solid rgba(255,255,255,.6);background:transparent;color:#fff;font-size:1.1rem;cursor:pointer}
.hist-lb__btn:hover{background:#fff;color:#111}
.hist-lb__count{min-width:8rem;text-align:center;font:600 .85rem "Montserrat",system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#fff}

/* Section lịch sử gọn lại: đệm trên/dưới nhỏ, tiêu đề nhỏ hơn, slide giữa hẹp hơn (thấp ~330px thay vì ~470px) */
.hist{padding:clamp(2rem,4vw,3rem) 0}
.hist__head{margin-bottom:1rem}
.hist__title{font-size:clamp(1.4rem,2.6vw,2rem)}
.hist__lead{margin-top:.5rem;font-size:.95rem;line-height:1.5}
.hist__stage{--w:min(620px,54vw);height:calc(var(--w) * 644 / 1200 + 1.5rem)}
.hist__bar{margin-top:.75rem;gap:1rem}
.hist__btn{width:2.25rem;height:2.25rem;font-size:.95rem}
@media(max-width:767.98px){.hist__stage{--w:78vw}}
/* Thu nhỏ thêm slide giữa; nút TRẢI NGHIỆM NHANH (nền đen, chữ in hoa) mở xem lớn và tự chuyển trang 3 giây */
.hist__stage{--w:min(540px,48vw)}
@media(max-width:767.98px){.hist__stage{--w:74vw}}
.hist__quick{display:inline-flex;align-items:center;gap:.45rem;height:2.25rem;margin-left:.75rem;padding:0 1.1rem;border:1px solid #111;background:#111;color:#fff;font:600 .8rem "Montserrat",system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s}
.hist__quick:hover{background:#fff;color:#111}
.hist__quick .bi{font-size:1rem}
@media(max-width:575.98px){.hist__bar{flex-wrap:wrap}.hist__quick{flex-basis:100%;justify-content:center;margin:.5rem 0 0}}
.hist-lb__mid{display:flex;flex-direction:column;align-items:center;gap:.45rem;min-width:9rem}
.hist-lb__progress{display:none;width:100%;height:2px;background:rgba(255,255,255,.25);overflow:hidden}
.hist-lb.is-auto .hist-lb__progress{display:block}
.hist-lb__progress span{display:block;height:100%;background:#fff;transform-origin:left;transform:scaleX(0)}
.hist-lb__progress span.is-run{animation:histTick 3s linear forwards}
.hist-lb:hover .hist-lb__progress span{animation-play-state:paused}

/* Banner trang chủ chuyển cảnh mờ dần (carousel-fade của Bootstrap), chậm hơn mặc định cho mượt */
.hero-carousel.carousel-fade .carousel-item{transition-duration:1.2s}
.hero-carousel.carousel-fade .active.carousel-item-start,.hero-carousel.carousel-fade .active.carousel-item-end{transition:opacity 0s 1.2s}
@media(prefers-reduced-motion:reduce){.hero-carousel.carousel-fade .carousel-item{transition-duration:.01s}}

/* Loang màu chủ đề ra toàn website (Inspiration collection): lớp phủ cố định cả màn hình, không chặn thao tác,
   vòng màu lan từ chỗ bấm phủ hết màn hình rồi nhạt dần; multiply để chỉ nhuộm màu, không che nội dung */
@property --sr{syntax:'<length>';inherits:false;initial-value:0px}
@property --sa{syntax:'<percentage>';inherits:false;initial-value:0%}
.page-splash{position:fixed;inset:0;z-index:1050;pointer-events:none;opacity:0;mix-blend-mode:multiply;
  background:radial-gradient(circle at var(--sx,50%) var(--sy,50%),
    color-mix(in srgb,var(--sc,#4c7a9d) var(--sa),transparent) 0,
    color-mix(in srgb,var(--sc,#4c7a9d) var(--sa),transparent) calc(var(--sr) * .8),
    transparent var(--sr))}
.page-splash.is-run{animation:pageSplash 2.6s cubic-bezier(.2,.65,.3,1) forwards}
@keyframes pageSplash{
  0%{opacity:1;--sr:0px;--sa:70%}
  45%{opacity:1;--sr:170vmax;--sa:55%}
  100%{opacity:0;--sr:190vmax;--sa:0%}
}
/* Loang nhanh hơn: lan kín màn hình trong ~0,5s rồi mờ dần biến mất, tổng ~1,3s */
.page-splash.is-run{animation:pageSplashFast 1.3s cubic-bezier(.25,.8,.3,1) forwards}
@keyframes pageSplashFast{
  0%{opacity:1;--sr:0px;--sa:62%}
  38%{opacity:1;--sr:170vmax;--sa:50%}
  100%{opacity:0;--sr:185vmax;--sa:20%}
}
/* Loang dưới nền: lớp màu cố định nằm sau nội dung (z-index -1, không trộn màu); nền các section tạm trong suốt
   trong lúc loang (html.is-splash) rồi hiện lại mượt, nên màu lan phía sau chữ và ảnh thay vì phủ lên trên */
.page-splash{z-index:-1;mix-blend-mode:normal}
main>section,.site-footer{transition:background-color .35s ease}
html.is-splash main>section{background-color:transparent !important}

/* Nổ màu 2 giây (thay cho loang): sóng xung kích bùng cực nhanh từ chỗ bấm phủ kín màn hình (màu nhạt),
   các giọt sơn đậm bắn tung ra mọi hướng, sau đó tất cả mờ dần biến mất. Vẫn nằm dưới nội dung */
.page-splash.is-run{animation:pageBurst 2s linear forwards}
@keyframes pageBurst{
  0%{opacity:1;--sr:0px;--sa:75%;animation-timing-function:cubic-bezier(.05,.85,.2,1)}
  22%{opacity:1;--sr:175vmax;--sa:42%;animation-timing-function:linear}
  55%{opacity:1;--sr:185vmax;--sa:38%;animation-timing-function:ease-in}
  100%{opacity:0;--sr:190vmax;--sa:0%}
}
.page-splash__drop{position:absolute;left:var(--sx);top:var(--sy);border-radius:50%;background:var(--sc);
  transform:translate(-50%,-50%) scale(.1);opacity:0;filter:blur(.5px)}
.page-splash.is-run .page-splash__drop{animation:pageDrop 2s cubic-bezier(.12,.75,.25,1) forwards}
@keyframes pageDrop{
  0%{opacity:1;transform:translate(-50%,-50%) scale(.1)}
  30%{opacity:.95;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1)}
  60%{opacity:.75;transform:translate(calc(-50% + var(--dx) * 1.06),calc(-50% + var(--dy) * 1.06)) scale(1.08)}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx) * 1.1),calc(-50% + var(--dy) * 1.1)) scale(1.15)}
}

/* Ô logo thương hiệu thấp lại (giữ nguyên chiều rộng nên băng chuyền vẫn dịch đúng 2 ô) */
.bd-tile{height:calc(var(--tile) * .55)}
.bd-tile img{width:66%}

/* Slide lịch sử nằm trong section thương hiệu (dưới tiêu đề Kelly-Moore Paints, trên 1 dãy ô logo) */
.hist--embed{background:transparent;padding:0 0 1.75rem}
.hist--embed .hist__lead{margin:0 auto 1rem;padding:0 1rem;text-align:center;font-size:.9rem;color:#777}
.backdrop__head{padding-bottom:1rem}
.hist--embed{padding-top:.5rem}

/* Nổ màu kiểu 1 làn sóng, chậm (~3,4s): một gợn sóng màu đậm lan dần từ chỗ bấm ra hết màn hình,
   phía sau mép sóng để lại lớp màu nhạt, rồi mờ dần. Không còn giọt sơn. Vẫn nằm dưới nội dung */
@property --sa2{syntax:'<percentage>';inherits:false;initial-value:0%}
.page-splash{background:radial-gradient(circle at var(--sx,50%) var(--sy,50%),
  color-mix(in srgb,var(--sc,#4c7a9d) var(--sa2),transparent) 0,
  color-mix(in srgb,var(--sc,#4c7a9d) var(--sa2),transparent) calc(var(--sr) - 22vmax),
  color-mix(in srgb,var(--sc,#4c7a9d) var(--sa),transparent) calc(var(--sr) - 6vmax),
  color-mix(in srgb,var(--sc,#4c7a9d) var(--sa),transparent) calc(var(--sr) - 2vmax),
  transparent var(--sr))}
.page-splash.is-run{animation:pageWave 3.4s cubic-bezier(.33,.1,.3,1) forwards}
@keyframes pageWave{
  0%{opacity:1;--sr:0px;--sa:70%;--sa2:30%}
  65%{opacity:1;--sr:150vmax;--sa:55%;--sa2:30%}
  100%{opacity:0;--sr:210vmax;--sa:40%;--sa2:22%}
}
.page-splash__drop{display:none}