@font-face{font-family:Roboto-Regular;src:url(../fonts/Roboto-Regular.woff);font-display:swap}
/* Inter tự lưu trữ (thay cho tải qua Google Fonts CDN) — chỉ các độ đậm site đang dùng */
@font-face{font-family:'Inter';src:url(../fonts/Inter/Inter-Regular.otf) format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url(../fonts/Inter/Inter-Medium.otf) format('opentype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url(../fonts/Inter/Inter-SemiBold.otf) format('opentype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url(../fonts/Inter/Inter-Bold.otf) format('opentype');font-weight:700;font-style:normal;font-display:swap}
.row-20 {
  margin-left: -10px;
  margin-right: -10px;
}

.row-30 {
  margin-left: -15px;
  margin-right: -15px;
}

.col-30 {
  padding-left: 15px;
  padding-right: 15px;
}

.col-20 {
  padding-left: 10px;
  padding-right: 10px;
}

.row-23 {
  margin-left: -11.5px;
  margin-right: -11.5px;
}

.col-23 {
  padding-left: 11.5px;
  padding-right: 11.5px;
}
:root{--color-main:#2E43C6;--color-main-solid:#2E43C6;--color-secondary:#1A1A2E;--menu-bg:var(--color-main);--menu-text:var(--color-secondary);--title-color:var(--color-secondary);--color-social:var(--color-main);--color-hover:var(--color-main);--color-text:var(--color-main)}
@keyframes gradient-flow-x{from{background-position:0% 0%}to{background-position:-200% 0%}}

/* ===== HIỆU ỨNG XUẤT HIỆN KHI CUỘN (Cấu hình giao diện > Hiệu ứng xuất hiện khi cuộn) ===== */
.reveal-fx{opacity:0;transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);will-change:opacity,transform}
.reveal-fx--in{opacity:1;transform:none!important}
.reveal-fx--fade-up{transform:translateY(48px)}
.reveal-fx--zoom-in{transform:scale(.92)}
.reveal-fx--slide-left{transform:translateX(60px)}
.reveal-fx--slide-right{transform:translateX(-60px)}
body{font-family:'Inter',system-ui,sans-serif;font-size:14px;line-height:1.5}
/* Full-bleed: bỏ hẳn max-width:1200px cố định trước đây — nội dung giờ luôn chiếm hết chiều
   rộng màn hình (chỉ chừa 10px/bên làm biên an toàn) ở MỌI kích thước, không còn bị "đóng khung"
   ở giữa màn hình rộng nữa. Áp dụng cho toàn bộ trang dùng .wrap-content/.max-width (news, sản
   phẩm, liên hệ, static...). */
.max-width,.wrap-content{width:calc(100% - 20px);margin:auto}
.mw-700{max-width:700px}
img{max-width:100%;display:inline-block}
img.lazy {
    opacity: 0;
    -webkit-filter: blur(10px);
    filter: blur(10px);
    transition: filter .4s, -webkit-filter .4s;
    transform: unset !important;
}


img:not(.initial) {
    -webkit-transition: opacity 1s;
    transition: opacity 1s
}

img.error,
img.initial,
img.loaded {
    opacity: 1;
    transition: opacity .3s;
    -webkit-filter: blur(0);
    filter: blur(0)
}

img:not([src]) {
    visibility: hidden
}
*{box-sizing:border-box}
a{text-decoration:none}
.social-plugin{display:flex;margin-top:10px}
.scale-img{overflow:hidden;display:block}

.scale-img img{transform:scale(1,1)}
.scale-img:hover>img{transform:scale(1.1,1.1)}

.hover_xemthem{transition:.4s}
.hover_xemthem:hover{letter-spacing:2px}
.hover-img{position:relative;overflow:hidden;display:block}
.text-split{overflow:hidden;text-overflow:ellipsis;white-space:normal;-webkit-box-orient:vertical;display:-webkit-box;-webkit-line-clamp:3}
.p-relative{position:relative}
@keyframes spin{
to{transform:rotate(360deg)}
}
@keyframes blink{
0%{opacity:1}
50%{opacity:0}
100%{opacity:1}
}
@keyframes shake-anim{
0%{transform:rotate(0) scale(1) skew(1deg)}
10%,30%{-moz-transform:rotate(-25deg) scale(1) skew(1deg)}
20%,40%{-moz-transform:rotate(25deg) scale(1) skew(1deg)}
100%,50%{-moz-transform:rotate(0) scale(1) skew(1deg)}
}
@keyframes rotate{
from{transform:rotate(0)}
to{transform:rotate(360deg)}
}
@keyframes fadeup{
from{opacity:0;transform:translateX(-20px)}
to{opacity:1;transform:translateX(0)}
}
@keyframes pulse-animation{
0%{transform:scale3d(1,1,1);opacity:0}
10%{transform:scale3d(1.1,1.1,1.1);opacity:1}
100%{transform:scale3d(1.6,1.6,1.6);opacity:0}
}
@keyframes border-animation{
0%{transform:scale3d(.6,.6,.6);opacity:0}
20%{transform:scale3d(1.2,1.2,1.2);opacity:1}
100%{transform:scale3d(1.4,1.4,1.4);opacity:0}
}
@keyframes spin{
0%{transform:rotate(0)}
100%{transform:rotate(360deg)}
}
.btn-frame .kenit-alo-circle-fill,.carousel-comment-media .carousel-control a span,.control-owl button,.menu ul li a.has-child:after,.menu ul li ul,.menu ul li:hover>ul,.scale-img img,.scale-img:hover>img,.support-online .kenit-alo-circle-fill,.transition{transition:.3s all}
.gutter-x-20{--bs-gutter-x:20px}
.gutter-x-5{--bs-gutter-x:5px}
.header{background:#4a90e2}
.flex-header{display:flex;justify-content:space-between;align-items:center}
.cart-head{border:1px solid #fff;padding:10px;border-radius:5px;position:relative;color:#fff}
.cart-head:hover{color:#fed402}
.cart-head i{font-size:20px}
.cart-head .count-cart{position:absolute;z-index:999;color:#fff;background:red;border-radius:50%;top:-10px;right:20px;width:20px;height:20px;text-align:center}
.menu-head{display:flex;gap:20px;justify-content:space-between;align-items:center}
.menu-head a{color:#fff}
.menu-head a:hover{color:#fed402}
.line-head{background-color:#72b2fd;height:32px;width:1px}
.slideshow{position:relative}
.search{width:50%;max-width:400px;background:#fff;position:relative;border-radius:10px}
.search input{width:calc(100% - 35px);font-size:13px;color:#333;border-radius:10px;border:none}
.search input:focus{border:none;box-shadow:none}
.search label{height:35px;cursor:pointer;text-align:center;font-size:16px;background:red;color:#fff;border-radius:10px;margin-right:3px;padding:5px 10px}
.search label i{font-weight:700;color:#999}
.search p{width:35px;height:35px;cursor:pointer;line-height:35px;text-align:center;font-size:16px}
.search p i{font-weight:700;color:#999}
.box-search{padding:10px;border-bottom:1px solid #f1f1f1;display:flex;justify-content:space-between;align-items:center}
.ds-item-search{width:calc(100% - 70px)}
.ds-item-search a{font-size:14px;color:#333}
.show-search{position:absolute;z-index:9999;top:100%;background:#fff;width:100%;border-radius:10px;box-shadow:0 1px 8px rgba(0,0,0,.3)}
.box-search .price-product{width:100%;margin:0;text-align:left}
.box-search .price-product .price-new{color:red;font-size:14px;font-weight:700}
.box-search .price-product .price-old{color:#999;text-decoration-line:line-through}
.company{border-bottom:1px solid #f1f1f1;padding-bottom:10px}
.company p{margin-bottom:5px;font-size:13px}
.company p span{color:#007bff}
.head-menu{display:flex;justify-content:center;flex-wrap:wrap}
.head-menu img{max-width:80px}
.control-owl{position:absolute;width:100%;z-index:2;left:0;top:calc(50% - 22.5px)}
.control-owl button{opacity:.5;top:0;position:absolute;outline:0;border:2px solid #fff;padding:0;margin:0;display:block;cursor:pointer;color:#fff;width:30px;height:30px;border-radius:50%;overflow:hidden;text-align:center;font-size:25px;margin:0;background-color:#00a3ff;display:flex;align-items:center;justify-content:center}
.control-owl button:hover{opacity:1}
.control-owl button.owl-prev{left:20px}
.control-owl button.owl-next{right:20px}
.item-partner{border:1px solid #f1f1f1;display:block}
.box-photo-ct{border-radius:20px;overflow:hidden}
.title-detail{position:relative;margin:20px 0}
.title-detail h1{font-size:20px;color:#333;font-weight:700;text-align:left;text-transform:uppercase}
.title-main{position:relative;text-align:center}
.title-main span{font-size:1.5em;font-weight:700;text-transform:uppercase}
.tt-week{font-size:25px;text-align:center;margin:20px 0;color:#fff;font-weight:700;text-transform:uppercase}
.title-cat-main{display:flex;flex-wrap:wrap;justify-content:center;gap:20px}
.title-cat-main span{display:block;color:#999;background:linear-gradient(64.85deg,#fca600 23.67%,#ffd41d 106.12%);background-color:#fff;padding:10px;border-radius:10px;cursor:pointer}
.title-cat-main span.active,.title-cat-main span:hover{background:linear-gradient(64.85deg,#ffd41d 23.67%,#fca600 106.12%);color:#000}
.grid-tintuc{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;flex-flow:row wrap;-webkit-flex-flow:row wrap;justify-content:space-between}
.news{display:block;margin-bottom:20px;display:block}
.pic-news{border-radius:10px;display:block;overflow:hidden;position:relative}
.pic-news img{width:100%}
a.views{display:inline-block;text-decoration:none;margin-top:10px;border:solid 1px #ccc;padding:7px 20px;border-radius:20px;color:#000;font-size:16px}
a.views:hover{border:solid 1px #fed402;color:#fed402}
.name-news{color:#1b1b1b;font-size:18px;line-height:22px;max-height:40px;-webkit-line-clamp:2!important;font-weight:400}
a.name-news.name1{font-size:25px;line-height:32px;max-height:64px}
.name-news:hover{color:#fed402}
.time-news{color:#fed402;margin-bottom:0;font-size:12px;margin:7px 0;font-style:italic;font-weight:500}
.desc-news{color:#333;margin:0}
.share{padding:17px 10px 10px 10px;line-height:normal;background:rgba(128,128,128,.15);margin-top:15px;border-radius:5px}
.share b{display:block;margin-bottom:5px}
.othernews b{margin-bottom:10px}
.list-news-other{padding-left:17px;list-style:square}
.list-news-other li{margin-bottom:2px}
.list-news-other li a{text-transform:none;color:#333}
.list-news-other li a:hover{color:#fed402}

a.mucluc-dropdown-list_button:before {
    content: "\f03a";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: 400;
    background: #fff;
    color: #006acb!important;
    font-size: 20px;
    width: 35px;
    height: 35px;
    display: inline-block;
    line-height: 38px;
    text-align: center;
    border: 1px solid #ddd
}

.meta-toc.fiedx {
    position: fixed;
    left: 5px;
    top: 200px;
    z-index: 111
}

.meta-toc .mucluc-dropdown-list_button {
    display: none
}

.meta-toc.fiedx .mucluc-dropdown-list_button {
    display: block
}

.meta-toc:not(.fiedx) .box-readmore {
    display: block!important
}

.box-readmore {
    padding: 10px;
    background-color: #f5f5f5;
    width: 100%;
    margin-top: 2px;
    border: 1px solid #ddd;
    font-size: 13px;
    margin-bottom: 10px
}

.meta-toc.fiedx .box-readmore {
    width: 350px;
    display: none
}

.box-readmore li ul>li {
    margin: 0;
    margin-bottom: 8px
}

.box-readmore li ul>li:before {
    content: counters(item, ".") " "
}

.box-readmore ul {
    list-style-type: none;
    counter-reset: item;
    margin-bottom: 0;
    padding-left: 0!important;
    margin-top: 8px
}

.box-readmore ul li {
    display: table;
    counter-increment: item;
    margin: 0 0 5px 0
}

.box-readmore ul li:before {
    content: counters(item, ".") ". ";
    display: table-cell;
    padding-right: 5px
}

.box-readmore ul li a {
    color: #000!important;
    cursor: pointer;
    font-weight: 500;
    font-size: 14px
}

.box-readmore ul li li a {
    font-weight: 400
}

.box-readmore ul li a:hover {
    color: #767676
}


.info-partner{background:#f8f8f8;padding:15px 0}
/* ===== FOOTER ===== */
/* Nền (màu hoặc ảnh) và lớp phủ là 2 lớp tách biệt: nền set trực tiếp qua style="background:...",
   lớp phủ là pseudo-element ::before riêng — không gộp chung 1 giá trị background */
.site-footer{position:relative;background-color:var(--color-main-solid);background-size:cover;background-position:center}
.site-footer::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:var(--footer-overlay, none);opacity:var(--footer-overlay-opacity, 1)}
.site-footer>*{position:relative;z-index:1}
.info-footer{padding:48px 0}
.info-footer .flex-footer{display:flex;flex-direction:row;align-items:flex-start;gap:16px}
/* Box footer 1 */
.box-footer-1{display:flex;flex-direction:column;align-items:flex-start;gap:24px;width:100%;max-width:594px}
.box-footer-inner{display:flex;flex-direction:row;align-items:flex-start;gap:16px;width:100%}
.logo-footer-link{flex-shrink:0;display:block;width:137px;height:137px;overflow:hidden;border-radius:8px;transition:transform .35s,box-shadow .35s}
.logo-footer-link:hover{transform:scale(1.06) rotate(-2deg);box-shadow:0 6px 20px rgba(255,102,0,.35)}
.logo-footer-link img{width:137px;height:137px;object-fit:cover}
.content-footer-box{display:flex;flex-direction:column;align-items:flex-start;gap:24px;width:100%;max-width:441px}
.title-footer{font-family:'Inter',sans-serif;font-style:normal;font-weight:700;font-size:28px;line-height:140%;color:var(--color-secondary);display:flex;align-items:center;align-self:stretch;flex-grow:0}
.desc-footer{font-family:'Inter',sans-serif;font-weight:500;font-size:14px;line-height:160%;color:rgba(255,255,255,.85);display:flex;align-items:center}
.btn-googlemaps{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;background:var(--color-main);color:#fff;border-radius:6px;font-family:'Inter',sans-serif;font-weight:600;font-size:14px;text-decoration:none;transition:background .25s,transform .25s,box-shadow .25s}
.btn-googlemaps:hover{background:#e55a00;color:#fff;text-decoration:none;transform:translateY(-2px);box-shadow:0 6px 18px rgba(255,102,0,.4)}
.btn-googlemaps svg{transition:transform .3s}
.btn-googlemaps:hover svg{transform:scale(1.25) rotate(-10deg)}
/* Box footer 2 */
.box-footer-2{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:24px;width:100%;max-width:232px}
.footer-section{display:flex;flex-direction:column;align-items:flex-start;gap:24px;width:100%}
.footer-support{max-width:229px}
.footer-section-title{font-family:'Be Vietnam Pro',sans-serif;font-weight:600;font-size:24px;line-height:125%;color:var(--color-secondary);display:flex;align-items:center}
.footer-policy-list{display:flex;flex-direction:column;align-items:flex-start;gap:12px;width:100%;max-height:168px;overflow-y:auto}
.footer-policy-item{box-sizing:border-box;display:flex;flex-direction:row;align-items:center;gap:6px;padding:0 0 12px;width:100%;border-bottom:1px solid rgba(229,231,235,.5);transition:padding-left .2s}
.footer-policy-item:hover{padding-left:6px}
.footer-policy-item svg{flex-shrink:0;transition:transform .2s}
.footer-policy-item:hover svg{transform:translateX(3px)}
.footer-policy-item a{font-family:'Be Vietnam Pro',sans-serif;font-weight:500;font-size:14px;line-height:128%;color:rgba(255,255,255,.85);text-decoration:none;transition:color .2s,letter-spacing .2s}
.footer-policy-item a:hover{color:var(--color-secondary);letter-spacing:.4px}
.footer-social-list{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:10px}
.footer-social-item{box-sizing:border-box;display:flex;justify-content:center;align-items:center;width:41px;height:41px;background:#fff;border:1px solid #E5E7EB;border-radius:500px;text-decoration:none;transition:box-shadow .3s,background .3s,border-color .3s}
.footer-social-item:hover{box-shadow:0 4px 14px rgba(255,102,0,.35);background:var(--color-main);border-color:var(--color-main);animation:social-rotate .5s ease-in-out}
@keyframes social-rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.footer-social-item img{height:auto;max-height:20px;width:auto;transition:filter .25s}
.footer-social-item:hover img{filter:brightness(0) invert(1)}
/* Box footer 3 */
.box-footer-3{display:flex;flex-direction:column;align-items:flex-start;gap:24px;width:100%;max-width:271px}
/* Footer powered / copyright */
.footer-powered{padding:16px 0;}
.copyright{font-family:'Inter',sans-serif;font-weight:400;font-size:14px;line-height:20px;color:rgba(255,255,255,.7);text-align:center;display:flex;justify-content:center;align-items:center;width:100%}
/* Footer bottom row: ggmap + hotline */
.footer-bottom-row{display:flex;flex-direction:row;align-items:center;gap:20px;flex-wrap:wrap}
/* Footer Hotline Circle */
.footer-hotline-wrap{position:relative;width:180px;height:180px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}
.hotline-pulse-ring{position:absolute;border-radius:50%;border:2px solid var(--color-main);top:50%;left:50%;pointer-events:none}
.hotline-pulse-ring.ring-1{width:80px;height:80px;animation:hotline-pulse 2s ease-out infinite}
.hotline-pulse-ring.ring-2{width:80px;height:80px;animation:hotline-pulse 2s ease-out infinite .65s}
@keyframes hotline-pulse{0%{transform:translate(-50%,-50%) scale(1);opacity:.85;border-color:var(--color-main)}100%{transform:translate(-50%,-50%) scale(2.2);opacity:0;border-color:#ff8533}}
.hotline-orbit{position:absolute;width:150px;height:150px;top:50%;left:50%;border-radius:50%;pointer-events:none;animation:hotline-orbit-spin 9s linear infinite}
@keyframes hotline-orbit-spin{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
.hotline-dot{position:absolute;top:50%;left:50%;width:7px;height:7px;border-radius:50%;background:var(--color-main);transform:translate(-50%,-50%) rotate(calc(var(--a) * 1deg)) translateY(-75px)}
.hotline-btn-circle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80px;height:80px;border-radius:50%;background:#1a1a2e;border:2px solid var(--color-main);display:flex;align-items:center;justify-content:center;text-decoration:none;z-index:2;box-shadow:0 0 0 3px rgba(255,102,0,.25),0 0 22px rgba(255,102,0,.4);transition:background .25s,box-shadow .25s,border-color .25s}
.hotline-btn-circle:hover{background:var(--color-main);box-shadow:0 0 0 4px rgba(255,102,0,.4),0 0 30px rgba(255,102,0,.7)}
.hotline-btn-num{font-family:'Inter',sans-serif;font-weight:700;font-size:10px;line-height:1.4;text-align:center;padding:0 8px;word-break:break-word;animation:hotline-num-blink 2.4s ease-in-out infinite}
@keyframes hotline-num-blink{0%,100%{color:#fff}33%{color:var(--color-main)}66%{color:rgba(255,255,255,.18)}}
.title-tags{position:relative;font-size:1em;font-weight:600;padding-bottom:15px;margin-bottom:15px;color:#777}
.title-tags:after{content:'';position:absolute;left:0;bottom:0;background-color:rgba(0,0,0,.1);display:block;height:3px;width:30px}
.flex-tags{display:flex;gap:5px}
.flex-tags a{color:#333;border:1px solid;border-radius:3px;display:inline-block;opacity:.8;padding:2px 5px}
.flex-tags a:hover{background-color:red;border-color:red;color:#fff;opacity:1}
.item-criteria a{display:flex;align-items:center;color:#333}
.item-criteria a .ds-criteria{width:calc(100% - 60px);margin-left:10px}
.item-criteria a .ds-criteria h3{-webkit-line-clamp:2;font-size:16px;color:var(--color-main)}
.item-criteria a .ds-criteria p{-webkit-line-clamp:2;margin:0}
.flex-about{display:flex;justify-content:space-between;align-items:center}
.content-about{width:50%}.meta-toc.fiedx {
    position: fixed;
    left: 5px;
    top: 200px;
    z-index: 111;
}
.photo-about{width:48%}
.title-about{margin-bottom:20px}
.title-about h3{font-size:30;color:#333;text-transform:uppercase}
.view-about{display:block;font-size:15px;text-transform:uppercase;margin:30px 0 20px;color:#333;text-align:center}
.view-about span{position:relative;z-index:1}
.view-about span:hover{color:red}
.view-about span:after{content:'';width:50px;height:50px;border-radius:50%;background:#c2d2a7;position:absolute;z-index:-1;left:4%;top:50%;transform:translateY(-50%) translateX(-50%)}
.item-service{position:relative}
.item-service h3{position:absolute;left:0;right:0;bottom:0;color:#fff;text-transform:uppercase;padding:10px;font-size:17px;margin:0}
.flex-video{display:flex;justify-content:space-between}
.wr-video{width:49%}
.wr-form{width:49%}
.video-main{position:relative}
.list-video{margin-top:10px;width:100%;border-radius:5px;border:1px solid #ddd}
.img-video span{position:absolute;left:50%;top:50%;transform:translateX(-50%) translateY(-50%);border:1px solid #ff000066;border-radius:50%;width:50px;height:50px;display:flex;justify-content:center;align-items:center;color:red;background:#ffffffa8;font-size:27px;cursor:pointer;transition:all 1s}
.item-video:hover span{transform:translateX(-50%) translateY(-50%) rotate(360deg)}
.item-video h3{text-align:center;font-size:16px;margin-top:10px}
/* ===== PRODUCT LISTING (prd-*) ===== */
.prd-list-section{padding:10px 0 60px}
.prd-list-head{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:24px;text-align:center}
.prd-list-line{width:60px;height:4px;background:var(--color-main-flow);background-size:200% 100%;animation:gradient-flow-x 3s linear infinite;border-radius:2px}
.prd-list-title{font-family:'Inter',system-ui,sans-serif;font-weight:700;font-size:28px;line-height:1.3;color:#1F2937;margin:0;text-transform:none}
.prd-toolbar{display:flex;align-items:center;justify-content:flex-end;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.prd-toolbar-count{font-family:'Inter',system-ui,sans-serif;font-size:14px;color:#6B7280;margin-right:auto}
.prd-toolbar-count b{color:#1F2937}
.sort-select{display:flex;justify-content:end;margin:0;position:relative}
.sort-select .click-sort{border:1px solid #E5E7EB;border-radius:8px;cursor:pointer;font-size:14px;padding:8px 14px 8px 10px;margin:0;font-family:'Inter',system-ui,sans-serif;background:#fff;transition:border-color .2s}
.sort-select .click-sort:hover{border-color:var(--color-main)}
.sort-select-main{display:grid;background-color:#fff;border-radius:10px;box-shadow:0 10px 30px rgb(0 0 0 / 12%);position:absolute;padding:4px 10px;top:42px;right:0;width:180px;z-index:2}
.sort-select-main p{border-bottom:1px solid #F3F4F6;margin:0;order:2}
.sort-select-main p:last-child{border-bottom:none}
.sort-select-main p:has(.check){order:1}
.sort a{color:#374151;font-size:14px;line-height:17px;padding:11px 3px;display:block;cursor:pointer;font-family:'Inter',system-ui,sans-serif}
.sort a.check{color:var(--color-main);font-weight:600}
.sort a.check i{box-sizing:border-box;position:relative;display:inline-block;transform:scale(var(--ggs,1));width:22px;height:16px;border:2px solid transparent;border-radius:100px;vertical-align:middle}
.sort a.check i::after{content:'';display:block;box-sizing:border-box;position:absolute;left:3px;top:-4px;width:6px;height:10px;border-width:0 2px 2px 0;border-style:solid;border-color:var(--color-main);transform-origin:bottom left;transform:rotate(45deg)}
.sort-select .sort-show{padding-right:12px;position:relative;color:var(--color-main);font-weight:600}
.sort-select .sort-show::before{content:'';border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid var(--color-main);height:0;position:absolute;top:6px;right:0;width:0}
.filter{position:static;padding:8px 16px;background:#fff;display:flex;justify-content:center;align-items:center;gap:6px;text-transform:none;border-radius:8px;cursor:pointer;border:1px solid #E5E7EB;font-family:'Inter',system-ui,sans-serif;font-size:14px;color:#374151;display:none}
.filter:hover{border-color:var(--color-main);color:var(--color-main)}
.flex-product-main{display:flex;gap:24px;align-items:flex-start;position:relative}
.flex-product-main .left-product{width:260px;flex-shrink:0;border:1px solid #F3F4F6;padding:20px;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,.04);position:relative;will-change:transform}
.flex-product-main .right-product{width:calc(100% - 284px)}
.wr-search{margin-bottom:20px}
.wr-search:last-child{margin-bottom:0}
.wr-search p{font-weight:700;text-transform:none;font-family:'Inter',system-ui,sans-serif;font-size:15px;color:#1F2937;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid #F3F4F6}
.item-search{display:flex;align-items:center}
.item-search label{font-family:'Inter',system-ui,sans-serif;font-size:14px;color:#4B5563;cursor:pointer}
.item-search .ip-search{accent-color:var(--color-main);width:16px;height:16px;cursor:pointer}
.product{display:flex;flex-direction:column;position:relative;background:#fff;border-radius:14px;padding:12px;text-align:left;border:1px solid #F3F4F6;box-shadow:0 4px 16px rgba(0,0,0,.04);transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.product:hover{transform:translateY(-5px);box-shadow:0 14px 30px rgba(0,0,0,.09);border-color:var(--color-main)}
.product .pic-product{background:#fff;margin-bottom:12px;display:block;position:relative;overflow:hidden;border-radius:10px;aspect-ratio:1/1}
.product .pic-product img{width:100%;height:100%;object-fit:cover;border-radius:10px}
.product .pic-product>a{display:flex;width:100%;height:100%;align-items:center;justify-content:center;text-align:center;border-radius:10px}
.pic-product-badge{position:absolute;top:10px;left:10px;background:var(--color-main);color:#fff;font-family:'Inter',system-ui,sans-serif;font-weight:700;font-size:12px;padding:4px 9px;border-radius:999px;z-index:2}
.product .name-product{margin-bottom:6px;font-weight:400;min-height:0}
.product .name-product a{font-size:15px;color:#232323;font-weight:600;font-family:'Inter',system-ui,sans-serif;line-height:1.4}
.product .name-product a:hover{color:var(--color-main)}
.product .name-product .text-split{-webkit-line-clamp:2}
.product .price-product{margin:auto 0 0;color:#555;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.product .price-new{font-size:17px;font-weight:700;color:var(--color-main);display:inline-block;text-transform:none;font-family:'Inter',system-ui,sans-serif}
.product .price-old{padding:0;font-size:13px;text-decoration:line-through;display:inline-block;color:#9CA3AF;text-transform:none;font-family:'Inter',system-ui,sans-serif}
.grid-product{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.grid-product>*{max-width:100%;min-width:0}
@media(max-width:1200px){.grid-product{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1024px){.flex-product-main .right-product{width:100%}}
@media(max-width:768px){.grid-product{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.prd-list-title{font-size:22px}}
/* ===== PRODUCT DETAIL (prdd-*) ===== */
.grid-pro-detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start}
.grid-pro-detail .left-pro-detail{position:sticky;top:100px}
.prdd-main-img{border-radius:16px;border:1px solid #F3F4F6}
.prdd-main-img img{width:100%;display:block;border-radius:16px}
.thumb-pro-detail{border:1px solid #F3F4F6!important;border-radius:8px;overflow:hidden;display:block}
.thumb-pro-detail img{border-radius:8px}
.swiper-slide.thumb-pro-detail.swiper-slide-thumb-active,.thumb-pro-detail:hover{border-color:var(--color-main)!important}
.prdd-brand{display:inline-block;font-family:'Inter',system-ui,sans-serif;font-size:13px;font-weight:700;color:var(--color-main);text-decoration:none;text-transform:uppercase;letter-spacing:.03em;margin-bottom:8px}
.prdd-title h1{font-size:24px;text-align:left;margin:0 0 12px;text-transform:none}
.prdd-subline{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-bottom:16px;font-family:'Inter',system-ui,sans-serif;font-size:14px;color:#6B7280}
.prdd-subline-item b{color:#374151;font-weight:600}
.prdd-sold{color:#B45309;background:#FFFBEB;border:1px solid #FDE68A;border-radius:999px;padding:2px 10px}
.prdd-sold b{color:#B45309}
.prdd-price-box{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;background:#FFF7ED;border:1px solid #FFEDD5;border-radius:12px;padding:16px 20px;margin-bottom:20px}
.prdd-attr-group{margin-bottom:16px}
.prdd-attr-label{display:block;font-family:'Inter',system-ui,sans-serif;font-size:13px;font-weight:600;color:#374151;margin-bottom:8px}
.prdd-cart-actions{gap:12px}
.prdd-cart-actions a{border-radius:999px;padding:12px 28px;font-family:'Inter',system-ui,sans-serif}
.prdd-cart-actions a.addnow{background:#fff;color:var(--color-main);border:1px solid var(--color-main)}
.prdd-cart-actions a.addnow:hover{background:var(--color-main)!important;color:#fff!important;border-color:var(--color-main)!important}
.prdd-cart-actions a.buynow{background:var(--color-main)!important;color:#fff}
.prdd-cart-actions a.buynow:hover{filter:brightness(1.12);color:#fff!important}
.prdd-desc{margin:24px 0;color:#4B5563;font-family:'Inter',system-ui,sans-serif;font-size:14px;line-height:1.7}
.prdd-share{margin-top:20px;padding-top:20px;border-top:1px solid #F3F4F6}
.prdd-more-btn{display:block;margin:16px auto 4px;padding:8px 20px;border:1px solid #D1D5DB;border-radius:999px;background:#fff;font-family:'Inter',system-ui,sans-serif;font-weight:600;cursor:pointer;transition:.2s}
.prdd-more-btn:hover{border-color:var(--color-main);color:var(--color-main)}
.prdd-related-title{position:relative;text-align:center;margin:8px 0 20px}
.prdd-related-title span{font-family:'Inter',system-ui,sans-serif;font-size:22px;font-weight:700;color:#1F2937;text-transform:none}
.tabs-pro-detail .nav-tabs{border-bottom:1px solid #E5E7EB;gap:8px}
.tabs-pro-detail .nav-tabs .nav-link{border:none;border-bottom:2px solid transparent;border-radius:0;text-transform:none;font-weight:600;color:#6B7280;font-family:'Inter',system-ui,sans-serif;padding:12px 4px;margin-right:24px}
.tabs-pro-detail .nav-tabs .nav-link.active,.tabs-pro-detail .nav-tabs .nav-link:hover{color:var(--color-main);border-color:var(--color-main);background:transparent}
.tabs-pro-detail .tab-content{border:none;padding:20px 0}
.ul-actions{display:flex;justify-content:center;margin:20px;gap:15px;align-items:flex-start}
.ul-actions li,.ul-actions>div{list-style-type:none;margin:0;padding:0;width:80px;text-align:center}
.ul-actions .active .box__tabr,.ul-actions .box__tabr:hover{border-color:#fd6e1d}
.ul-actions .box__tabr{align-items:center;border:1px solid #e0e0e0;border-radius:2px;display:flex;justify-content:center;min-height:55px;padding:4px;height:60px;width:80px}
.icon-action{background-image:url(../images/icon_chitiet@2x-min.png);background-repeat:no-repeat;display:inline-block;height:30px;width:30px;line-height:30px;vertical-align:middle;background-size:300px 180px}
.icon-dnb{background-position:0 0;height:28px;width:28px}
.icon-tskt{background-position:-105px 0;height:30px;width:30px}
.icon-ttsp{background-position:-140px 0;height:19px;width:23px}
.ul-actions p{font-size:14px;line-height:1.3;margin-top:5px;white-space:normal;color:#000}
.modal-detail::-webkit-scrollbar{width:10px}
.modal-detail::-webkit-scrollbar-thumb{width:10px;background:#4d90e0;border-radius:10px;height:50px}
.modal-detail{position:fixed;z-index:999;background:#000000c4;top:0;left:0;width:100%;height:100%;overflow-y:scroll}
.content-modal-detail{background:#fff;max-width:1200px;margin:0 auto;min-height:100vh}
.content-modal-detail .tabs{display:flex;cursor:pointer;padding:0;list-style:none;justify-content:center;border-bottom:1px solid #e0e0e0;position:sticky;top:0;background:#fff;z-index:99}
.content-modal-detail .tabs li{padding:20px 20px;margin-right:5px;font-weight:700;position:relative;border-bottom:4px solid #fff}
.content-modal-detail .tabs li.active{color:#2d9cdb;border-bottom:4px solid #2d9cdb}
.content-modal-detail .tab-content{padding:20px;max-width:900px;margin:0 auto}
.content-modal-detail .tab-content.active{display:block}
.close-tab{position:fixed;top:15px;right:20px;z-index:10}
.btn-closemenu{position:fixed;top:10px;right:20px;background-color:#fff;border:1px solid #e0e0e0;border-radius:4px;color:#333;cursor:pointer;line-height:21px;padding:7px;text-align:right;width:72px}
.btn-closemenu::before{transform:rotate(45deg)}
.btn-closemenu::after{transform:rotate(-45deg)}
.btn-closemenu::after,.btn-closemenu::before{background-color:#333;content:'';left:13px;height:14px;position:absolute;top:10px;width:1px}
.cursor-pointer{cursor:pointer}
.contact-map{position:relative;height:500px;margin-top:30px}
.contact-map iframe{position:absolute;left:0;top:0;width:100%;height:100%}
.contact-text{max-width:800px;margin:auto;margin-bottom:50px;border-radius:50px;border:solid 1px #e8e8e8;padding:30px 50px;color:#7b7b7b}
.box-frm{position:relative}
form.contact-form{padding:30px;border-radius:30px;max-width:800px;margin:auto;background:#fff}
.contact-input input,.contact-input textarea{border-radius:0;border-top:none;border-left:none;border-right:none;border-bottom:1px dotted #045b8a}
.btn-send{margin:auto;border-radius:50px;display:block;text-transform:uppercase;font-weight:700;padding:10px 25px}
.breadCrumbs{padding:10px 0;background:#ddd}
.breadCrumbs ol{margin:0}
.breadCrumbs ol li a{color:#333}
.breadCrumbs ol li a:hover{color:red}
.paging-product{position:relative}
.pagination{margin:20px 0}
.pagination li span{cursor:pointer}
.btn-frame{display:flex;align-items:center;justify-content:center;width:50px;height:50px;position:fixed;right:20px;z-index:10;cursor:pointer}
.btn-frame i{width:50px;height:50px;border-radius:50%;background:#1182fc;position:relative;z-index:1;display:flex;align-items:center;justify-content:center}
.btn-frame i img{vertical-align:middle;width:70%}
.btn-frame .animated.infinite{animation-iteration-count:infinite}
/* Căn giữa bằng top/left 50% + margin âm (không dùng transform vì animate.css zoomIn/pulse
   đã chiếm transform để phóng to — nếu cũng đặt transform ở đây sẽ bị animation ghi đè, làm
   vòng tròn lệch tâm). Cách này căn đúng tâm bất kể phần tử cha rộng đúng 49px hay 50px. */
.btn-frame .kenit-alo-circle{width:60px;height:60px;top:50%;left:50%;margin-top:-30px;margin-left:-30px;position:absolute;background-color:transparent;border-radius:100%;border:2px solid rgba(7,41,103,.8);opacity:.1;border-color:#1182fc;opacity:.5}
.btn-frame .zoomIn{animation-name:zoomIn}
.btn-frame .animated{animation-duration:1s;animation-fill-mode:both}
.btn-frame .kenit-alo-circle-fill{width:70px;height:70px;top:50%;left:50%;margin-top:-35px;margin-left:-35px;position:absolute;border-radius:100%;border:2px solid transparent;background-color:rgba(7,41,103,.35);opacity:.4}
.btn-frame .pulse{animation-name:pulse}
.grid-properties{display:flex;gap:10px;flex-wrap:wrap}
.grid-properties span{position:relative;border:1px solid #E5E7EB;border-radius:8px;padding:8px 18px;cursor:pointer;font-family:'Inter',system-ui,sans-serif;font-size:14px;color:#374151;transition:.2s}
.grid-properties span.active,.grid-properties span:hover{border:1px solid var(--color-main);color:var(--color-main);background:#FFF7ED}
.grid-properties span.outstock{pointer-events:none;background-color:#fafafa;color:rgba(0,0,0,.26);cursor:not-allowed}
.scrollToTop{width:41px;height:41px;text-align:center;font-weight:700;color:#444;text-decoration:none;position:fixed;bottom:65px;right:25px;display:none;z-index:10;cursor:pointer}
.grecaptcha-badge{display:none!important;width:0!important;height:0!important;visibility:hidden!important;overflow:hidden}
[x-cloak]{display:none!important}
a.views_dm{width:140px;height:38px}
.effect_button{transform-style:preserve-3d;transform:translateZ(-25px);transition:transform .25s;position:relative;display:inline-flex;z-index:1}
.effect_button:after,.effect_button:before{position:absolute;content:'xem thêm';height:100%;width:100%;display:flex;align-items:center;justify-content:center;border:1px solid red;box-sizing:border-box;border-radius:5px;z-index:-1;text-transform:uppercase;font-weight:700;font-size:15px}
.effect_button:before{color:#fff;background:red;transform:rotateY(0) translateZ(25px)}
.effect_button:after{color:red;transform:rotateX(90deg) translateZ(25px)}
.effect_button:hover{transform:translateZ(-25px) rotateX(-90deg)}
.grid-news{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.item-news{--tw-bg-opacity:1;background-color:#f1f1f1;padding:1rem;box-shadow:0 0 5px rgb(0 0 0 / 19%);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.5s}
.item-news:hover{transform:translateY(-.25rem);box-shadow:0 0 10px rgb(0 0 0 / 19%)}
.item-news .ds-news{width:100%}
.ds-news span{display:block;line-height:25px;color:#999;font-size:13px;margin:10px 0 0;font-style:italic}
.ds-news h3{font-size:16px;margin:0;color:#000;font-weight:500;text-transform:uppercase;-webkit-line-clamp:2!important}
.ds-news .desc{color:#333}
.item-news:hover h3{color:red}
.item-news-all a{display:flex;justify-content:space-between}
.item-news-all a .ds-news{width:calc(100% - 110px)}
.item-news-all a .ds-news h3{text-transform:capitalize;font-size:15px}
.item-news-one .scale-img{height:200px;overflow:hidden}
.item-news-one .scale-img img,.item-news-one .scale-img picture img{width:100%;height:100%;object-fit:cover;display:block}
.item-news-all .scale-img{width:100px;height:75px;flex-shrink:0;overflow:hidden}
.item-news-all .scale-img img,.item-news-all .scale-img picture img{width:100%;height:100%;object-fit:cover;display:block}
.flex-news-detail{display:flex;justify-content:space-between;align-items:start;flex-wrap:wrap}
.news-left{width:68%}
.news-right{position:sticky;top:20px;width:30%;background:#f1f1f1cc;padding:20px;box-shadow:0 0 5px #99999978}
a.btn_link{position:relative;margin:5px;height:36px;width:140px}
.btn_link.effect_button:first-child:after,.btn_link.effect_button:first-child:before{content:'facebook'}
.btn_link.effect_button:first-child:after,.btn_link.effect_button:first-child:before,.btn_link.effect_button:nth-child(2):after,.btn_link.effect_button:nth-child(2):before{border-width:1px;border-style:solid;--tw-border-opacity:1;border-color:rgb(0 165 217 / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgb(0 165 217 / var(--tw-bg-opacity))}
.btn_link.effect_button:nth-child(2):after,.btn_link.effect_button:nth-child(2):before{content:'google map'}
div.slick.in-page:not(.slick-initialized){display:flex;gap:10px;overflow:hidden;white-space:nowrap}
.baonoidung iframe{max-width:100%!important}
.baonoidung img{height:auto!important}
.baonoidung *{max-width:100%!important}
.baonoidung table{display:block;overflow-y:auto}
div.desc-pro-detail ul li{margin-bottom:.75rem;list-style-type:circle}
div.desc-pro-detail ul li:last-child{margin-bottom:0!important}
div.baonoidung ul li{margin-bottom:.75rem;list-style-type:disc}
div.baonoidung ol li{margin-bottom:.75rem;list-style-type:decimal}
.price-new-pro-detail{font-weight:700;font-size:28px;color:var(--color-main);font-family:'Inter',system-ui,sans-serif}
.price-old-pro-detail{font-weight:500;font-size:16px;color:#9CA3AF;text-decoration:line-through;padding-left:0;font-family:'Inter',system-ui,sans-serif}
.quantity-pro-detail{width:100%;max-width:120px;line-height:normal;display:flex;align-items:center;justify-content:space-between;text-align:center;margin-right:20px;font-weight:500;border:1px solid #E5E7EB;border-radius:8px;overflow:hidden}
.quantity-pro-detail span{line-height:38px;padding:0;width:32px;height:38px;color:#374151;cursor:pointer;font-size:18px;user-select:none;transition:.2s}
.quantity-pro-detail span:hover{background:#FFF7ED;color:var(--color-main)}
.quantity-pro-detail span.quantity-plus-pro-detail{border-left:1px solid #E5E7EB}
.quantity-pro-detail span.quantity-minus-pro-detail{border-right:1px solid #E5E7EB}
.quantity-pro-detail input{height:38px;width:calc(100% - 64px);text-align:center;font-size:16px;padding:5px;font-weight:700;border:none}
.cart-pro-detail{margin-bottom:1rem;display:flex;align-items:center;justify-content:flex-start}
.cart-pro-detail a{text-align:center;color:#fff;padding:8px 15px;cursor:pointer;border-radius:5px;font-weight:700}
.cart-pro-detail a.addnow{margin-right:10px;color:#fff;border-radius:5px}
.cart-pro-detail a.addnow:hover{background-color:var(--color-main);color:#fff;border-color:var(--color-main)}
.cart-pro-detail a.buynow{background-color:#000}
.cart-pro-detail a.buynow:hover{background-color:var(--color-main);color:#fff}
.cart-pro-detail a i{vertical-align:top;margin-top:3px;margin-right:8px}
.swiper .swiper-wrapper{width:inherit;height:inherit}
.swiper.swiper-initialized .swiper-wrapper{margin:0;width:100%;height:100%}
.swiper.swiper-initialized .swiper-slide{padding:0;overflow:hidden}
/* Swiper dùng chung grid Bootstrap (.row.row-cols-*) cho gallery/sản phẩm liên quan:
   khi số item ít hơn số cột, Bootstrap flex mặc định vẫn căn trái — nhưng lúc Swiper
   chưa kịp khởi tạo (hoặc số slide < slidesPerView) danh sách bị kéo giãn đều ra hai đầu.
   Ép căn đầu (flex-start), không space-between, không co giãn item để lấp đầy hàng. */
.swiper-wrapper.row{justify-content:flex-start!important}
.swiper-wrapper.row>.swiper-slide{flex-grow:0!important}
.modal-title{font-size:20px}
.loading-overlay{display:none;position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(255,255,255,.7);justify-content:center;align-items:center;z-index:999}
.loading{width:50px;height:50px;border:5px solid rgba(0,0,0,.1);border-radius:50%;border-top:5px solid #3498db;animation:spin 1s linear infinite}
.baonoidung iframe{max-width:100%!important}
.baonoidung img{height:auto!important}
.baonoidung *{max-width:100%!important}
.baonoidung table{display:block;overflow-y:auto}
div.desc-pro-detail ul li{margin-bottom:.75rem;list-style-type:circle}
div.desc-pro-detail ul li:last-child{margin-bottom:0!important}
div.baonoidung ul li{margin-bottom:.75rem;list-style-type:disc}
div.baonoidung ol li{margin-bottom:.75rem;list-style-type:decimal}
.he-first{max-height:300px;overflow:hidden;position:relative}
.he-first:before{position:absolute;bottom:0;left:0;right:0;height:100px;background:linear-gradient(to top,#fff,transparent);content:''}
.he-first.heigt-auto{max-height:unset}
.he-first.heigt-auto:before{display:none}
/* ===== NAVIGATION REDESIGN ===== */
.above-nav{display:none}
.navigation{background:var(--menu-bg);background-size:200% 100%;animation:gradient-flow-x 6s linear infinite;position:sticky;top:0;z-index:1000;overflow:visible}
.navigation.nav-menu-fixed{position:fixed;top:0;left:0;right:0}
.navigation.nav-menu-hidden{display:none}
body.nav-menu-fixed{padding-top:80px}
.nav-bar{display:flex;align-items:center;height:80px;gap:0;position:relative}
.logos-nav{display:block;width:64px;height:64px;flex-shrink:0;position:relative;z-index:200;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.12)}
.logos-nav img,.logos-nav picture img{width:100%;height:100%;object-fit:contain}
.nav-links{overflow:hidden;margin-left:32px;flex:1 1 auto;min-width:0}
.nav-ul{display:flex;align-items:center;gap:20px;list-style:none;margin:0;padding:0;flex-wrap:nowrap}
.nav-ul .nav-item>a{display:flex;align-items:center;color:var(--menu-text);font-weight:600;font-size:16px;padding:8px 12px;border-radius:8px;transition:.3s;white-space:nowrap;text-decoration:none;line-height:1.4}
.nav-ul .nav-item>a:hover,.nav-ul .nav-item>a.active{background:rgba(255,255,255,.18);color:var(--menu-text)}
.nav-search{position:relative;flex-shrink:0;display:flex;align-items:center}
.nav-search-box{position:relative}
.nav-search input{width:205px;height:40px;margin-left:32px;border-radius:9999px;border:none;padding:0 40px 0 16px;font-size:16px;outline:none;background:#F2F3F4;color:#3C4142;transition:.3s}
.nav-search input::placeholder{color:#3C4142}
.nav-search input:focus{background:#E8E9EA}
.nav-search-box button{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:#3C4142;padding:0;line-height:1;display:flex;align-items:center}
.nav-search .show-search{position:absolute;z-index:9999;top:calc(100% + 6px);left:0;background:#fff;width:280px;border-radius:10px;box-shadow:0 4px 16px rgba(0,0,0,.15)}
/* Chế độ icon: khung tìm kiếm ẩn (max-width:0), bấm icon mới xổ ra đẩy các phần tử khác */
.nav-search-toggle{background:none;border:none;cursor:pointer;color:var(--menu-text);padding:8px;margin-left:12px;line-height:1;display:flex;align-items:center;flex-shrink:0}
.nav-search--icon-mode .nav-search-box{max-width:0;opacity:0;overflow:hidden;transition:max-width .3s ease,opacity .2s ease}
.nav-search--icon-mode .nav-search-box input{margin-left:12px}
.nav-search--icon-mode.is-open .nav-search-box{max-width:260px;opacity:1}
.nav-hotline{display:flex;align-items:center;gap:10px;flex-shrink:0}
.nav-hotline svg{flex-shrink:0}
.hotline-box{display:flex;flex-direction:column;align-items:flex-start;padding:0;width:129px;height:51.5px;justify-content:center}
.hotline-label{font-family:system-ui, -apple-system, sans-serif;font-weight:700;font-size:14px;line-height:20px;color:#666;display:flex;align-items:center}
.hotline-number{font-family:system-ui, -apple-system, sans-serif;font-weight:700;font-size:20px;line-height:160%;color:var(--color-main);display:flex;align-items:center;white-space:nowrap}
.mobile-menu-btn{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px;margin-left:auto;flex-shrink:0}
.mobile-menu-btn span{display:block;width:24px;height:2px;background:var(--menu-text);border-radius:2px;transition:.3s}

/* ===== NAV LANGUAGE (Google Translate) =====
   Đặt trong .hp-header-top (nền TRẮNG, xem navigation.blade.php) — KHÔNG dùng var(--menu-text)/
   var(--menu-bg) như bản gốc dưới đây được thiết kế cho (đó là biến màu riêng của thanh menu màu
   .navigation/.menu-mobile, đổi theo "Đảo màu" — nếu dùng ở đây có thể ra chữ trắng/nền trùng màu
   trên nền trắng tuỳ theme). Dùng màu cố định #232935 khớp các icon liên hệ cạnh bên
   (.hp-hcircle/.hp-hcontact). Nút đóng hiện CỜ + MÃ ngôn ngữ viết hoa (vd "VI"/"EN", KHÔNG phải tên
   đầy đủ) ngay sau cờ — bấm mới xổ dropdown ra tên đầy đủ từng ngôn ngữ. */
.nav-lang{position:relative;flex-shrink:0;width:auto;height:41px;margin-left:16px}
.nav-lang-btn{display:flex;align-items:center;justify-content:center;gap:6px;height:100%;box-sizing:border-box;padding:6px 10px;border:1px solid #E0E0E0;border-radius:6px;background:#FFFFFF;color:#232935;cursor:pointer;transition:.3s}
.nav-lang-btn:hover{background:#F4F4F4;border-color:#232935}
.nav-lang-label{display:block;font-weight:700;font-size:13px;line-height:1;color:#232935;white-space:nowrap}
.nav-lang-current{display:flex;align-items:center;line-height:0;flex-shrink:0;color:#232935}
.nav-lang-globe{display:block;width:22px;height:22px}
.nav-lang-current img,.nav-lang-current .nav-flag-svg,.nav-lang-current .nav-flag-svg svg,.nav-lang-current .nav-flag-badge{display:flex;width:26px;height:18px;object-fit:cover;border-radius:3px}
.nav-lang-current .nav-flag-svg{border:1px solid #E0E0E0;overflow:hidden;line-height:0}
/* fillFlagIcons()/applyToButton() (navigation.blade.php) chèn thẳng SVG cờ (window.LANG_FLAGS)
   vào .lang-flag mà không bọc qua .nav-flag-svg — chốt cứng kích thước cho đúng trường hợp này. */
.nav-lang-current .lang-flag,.nav-lang-current .lang-flag svg{display:flex;width:26px;height:18px;border-radius:3px;overflow:hidden}
.nav-lang-opt .lang-flag svg{display:flex;width:30px;height:20px;border-radius:3px;overflow:hidden}
.nav-lang-caret{flex-shrink:0;color:#232935}
/* position:absolute đủ dùng — trước đây bị .hp-header-top{overflow:hidden} cắt mất phần xổ ra
   ngoài khung (đã bỏ overflow:hidden ở đó), nên giờ dropdown hiện đúng vị trí không bị cắt nữa. */
.nav-lang-dropdown{display:none;position:absolute;top:calc(100% + 6px);right:0;background:#FFFFFF;border-radius:10px;box-shadow:0 4px 16px rgba(0,0,0,.18);width:220px;max-width:calc(100vw - 24px);max-height:calc(100vh - 100px);overflow-y:auto;overflow-x:hidden;z-index:200;padding:6px}
.nav-lang.open .nav-lang-dropdown{display:block}
.nav-lang-dropdown a.nav-lang-opt{display:flex;align-items:center;justify-content:flex-start;gap:10px;padding:8px 12px;border-radius:6px;transition:.2s;text-decoration:none}
.nav-lang-dropdown a.nav-lang-opt:hover,.nav-lang-dropdown a.nav-lang-opt.is-active{background:#F4F4F4}
.nav-lang-opt .lang-flag{display:flex;flex-shrink:0}
.nav-lang-opt .lang-flag img,.nav-lang-opt .lang-flag .nav-flag-svg,.nav-lang-opt .lang-flag .nav-flag-svg svg,.nav-lang-opt .lang-flag .nav-flag-badge{display:flex;width:30px;height:20px;object-fit:cover;border-radius:3px}
.nav-lang-opt .lang-flag .nav-flag-svg{border:1px solid #E0E0E0;overflow:hidden;line-height:0}
.nav-lang-opt .lang-name{font-size:14px;font-weight:600;color:#232935;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.nav-flag-badge{align-items:center;justify-content:center;background:#232935;color:#fff;font-size:9px;font-weight:700;letter-spacing:.2px;line-height:1;flex-shrink:0}

/* Ẩn vĩnh viễn thanh banner + tooltip mặc định của Google Translate — site đã có UI chọn ngôn ngữ riêng */
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
iframe.goog-te-banner-frame,
.goog-te-menu-frame,
.goog-te-balloon-frame,
#goog-gt-tt,
.goog-tooltip,
.goog-tooltip:hover,
.VIpgJd-ZVi9od-ORHb-OEVmcd,
iframe.VIpgJd-ZVi9od-ORHb-OEVmcd,
body>iframe.skiptranslate,
body>.skiptranslate:not(#google_translate_element){display:none!important;visibility:hidden!important}
body{top:0!important;position:static!important}
.goog-text-highlight{background:none!important;box-shadow:none!important}
#google_translate_element{display:none!important}

/* Mobile offcanvas */
.mmenu-offcanvas .offcanvas-body{padding:0!important}
.menu-mobile{background:var(--menu-bg);background-size:200% 100%;animation:gradient-flow-x 6s linear infinite;min-height:100vh;display:flex;flex-direction:column}
.mmenu-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.2);background:white;color:black}
.mmenu-head svg{stroke:black}
.mmenu-logo img{max-height:80px;width:auto;object-fit:contain}
.btn-close-menu{background:none;border:none;cursor:pointer;color:#FFFFFF;padding:4px;line-height:1;display:flex;align-items:center;justify-content:center}
.mmenu-search{display:flex;align-items:center;gap:8px;padding:12px 20px;border-bottom:1px solid rgba(255,255,255,.15);background:white;color:black}
.mmenu-search input{flex:1;height:36px;border-radius:20px;border:none;padding:0 14px;font-size:13px;outline:none;background:rgba(0,0,0,.25);color:black}
.mmenu-search input::placeholder{color:rgba(0,0,0,.75)}
.mmenu-search button{background:none;border:none;cursor:pointer;color:#FFFFFF;padding:0;line-height:1;display:flex;align-items:center}
.mmenu-search svg{stroke:black}
.mmenu-ul{list-style:none;margin:0;padding:0;flex:1}
.mmenu-ul li a{display:flex;align-items:center;gap:10px;color:#FFFFFF;font-weight:600;font-size:15px;padding:14px 20px;border-bottom:1px solid rgba(255,255,255,.12);text-decoration:none;transition:.2s}
.mmenu-ul li a:hover,.mmenu-ul li a.active{background:rgba(255,255,255,.15);color:#FFFFFF}
.mmenu-company{padding:20px;margin-top:auto;border-top:1px solid rgba(255,255,255,.2)}
.mmenu-company .hp-info-item{margin-bottom:8px}
.mmenu-company .hp-info-item:last-child{margin-bottom:0}
.mmenu-company .hp-info-text,.mmenu-company .hp-info-text a{color:#FFFFFF;opacity:.9}
.mmenu-company .hp-info-ico{opacity:.8}
.mmenu-company .hp-info-ico svg path{stroke:#FFFFFF}
/* Khi mmenu offcanvas mở, ẩn hẳn các widget nổi (hotline + social/toolbar) để không bị đè lên nhau */
body.mmenu-open .btn-frame,
body.mmenu-open .toolbar,
body.mmenu-open .toolbar-custom,
body.mmenu-open .contact-group,
body.mmenu-open .footer-hotline-wrap{display:none!important}

/* Responsive */
@media(max-width:1200px){.nav-ul .nav-item>a{font-size:12px;padding:6px 7px}} */
 @media(max-width:1024px){
  .nav-links{display:none}
  .nav-search{display:none}
  .mobile-menu-btn{display:flex}
  .nav-lang{margin-left:auto}
}
@media(max-width:768px){
  .logos-nav{width:54px;height:54px}
  .nav-lang{width:auto;height:38px;margin-left:auto}
  .nav-lang-btn{gap:6px;padding:6px 8px}
  .nav-lang-label{font-size:14px;max-width:90px}
}
/* ===== SO LIEU SECTION ===== */
.so-lieu-section{padding:24px 0}
.so-lieu-box{display:flex;flex-direction:row;justify-content:space-between;align-items:center;border:1px solid #E5E7EB;border-radius:10px;box-shadow:0px 4px 16px rgba(0,0,0,0.08);box-sizing:border-box;width:100%;height:195px;padding:20px 4px}
.so-lieu-sep{width:1px;height:100px;background-color:#E5E7EB;border:none;margin:0 32.75px;flex-shrink:0}
.so-lieu-item{display:flex;flex-direction:row;align-items:center;padding:16px;gap:20px;width:341px;height:155px;background:#FFFFFF;border-radius:16px;margin:0 auto;box-sizing:border-box;flex-shrink:0}
.so-lieu-icon{flex-shrink:0;width:80px;height:80px;display:flex;align-items:center;justify-content:center}
.so-lieu-icon img,.so-lieu-icon .sl-icon-img{width:80px;height:80px;object-fit:contain}
.so-lieu-content{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:0;width:209px;height:123px;justify-content:center}
.so-lieu-number{font-family:system-ui, -apple-system, sans-serif;font-weight:700;font-size:36px;line-height:51px;color:var(--color-main);display:flex;align-items:center}
.so-lieu-title{font-family:system-ui, -apple-system, sans-serif;font-weight:700;font-size:14px;line-height:20px;color:#1A1A1A;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.so-lieu-desc{font-family:system-ui, -apple-system, sans-serif;font-weight:400;font-size:14px;line-height:160%;color:#666666;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:1200px){.so-lieu-box{height:auto;padding:16px 4px;flex-wrap:wrap;justify-content:center;gap:8px}.so-lieu-sep{display:none}.so-lieu-item{width:calc(33.333% - 16px)}}
@media(max-width:768px){.so-lieu-item{width:calc(50% - 8px);height:auto}.so-lieu-content{height:auto}}
@media(max-width:480px){.so-lieu-item{width:100%}}

/* ===== UTILITY ===== */
.text-orange{color:var(--title-color)}

/* ===== ABOUT SECTION ===== */
.about-section-wrap{padding:60px 0}
.about-layout{display:flex;flex-direction:row;align-items:flex-start;gap:47px}
.about-content{display:flex;flex-direction:column;align-items:flex-start;padding:0;gap:20px;width:487px;flex-shrink:0}
.about-row1{display:flex;flex-direction:row;align-items:center;padding:0;gap:12px;align-self:stretch;height:40px}
.about-icon-box{display:flex;justify-content:center;align-items:center;width:40px;height:40px;background:#FFF5EF;border-radius:8px;flex-shrink:0}
.about-title-section{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:8px}
.about-label{font-family:'Inter',system-ui,sans-serif;font-weight:700;font-size:14px;line-height:20px;color:var(--color-main);display:flex;align-items:center}
.about-label-line{width:40px;height:0;border:2px solid var(--color-main);border-radius:2px}
.about-heading{font-family:'Inter',system-ui,sans-serif;font-weight:700;font-size:48px;line-height:68px;color:#1A1A1A;margin:0}
.about-heading-line{width:40px;height:0;border:2px solid var(--color-main)}
.about-desc{font-family:'Inter',system-ui,sans-serif;font-weight:400;font-size:18px;line-height:160%;color:#666666;margin:0;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.about-cta{display:flex;flex-direction:row;align-items:center;padding:16px 0 0;gap:32px;width:487px}
.btn-thamkhao{display:inline-flex;flex-direction:row;justify-content:center;align-items:center;padding:16px 32px;gap:8px;min-width:222px;height:58px;background:transparent;border:1px solid var(--color-main);border-radius:999px;cursor:pointer;transition:all .3s;text-decoration:none;font-family:'Inter',system-ui,sans-serif;font-weight:700;font-size:16px;line-height:24px;color:var(--color-main)}
.btn-thamkhao:hover{background:var(--color-main);color:#fff}
.btn-thamkhao:hover svg path{stroke:#fff}
.about-hotline-badge{display:flex;flex-direction:row;align-items:center;padding:4px 24px 4px 4px;background:#FFF5EF;border:1px solid #FFF5EF;border-radius:9999px;gap:16px;flex-shrink:0}
.about-hotline-info{display:flex;flex-direction:column;align-items:flex-start;padding:0}
.about-hotline-label{font-family:'Inter',system-ui,sans-serif;font-weight:700;font-size:14px;line-height:20px;color:#666666}
.about-hotline-number{font-family:'Inter',system-ui,sans-serif;font-weight:700;font-size:20px;line-height:160%;color:var(--color-main);white-space:nowrap}
.about-image-frame{width:666px;height:535px;border:3px solid #FFFFFF;border-radius:20px;box-shadow:0 4px 4px rgba(0,0,0,.08);overflow:hidden;flex:1}
.about-image-frame img,.about-image-frame picture,.about-image-frame picture img{width:100%;height:100%;object-fit:cover;display:block}

/* ===== SERVICES SECTION ===== */
.dichvu-section{padding:60px 0}
.dichvu-header{display:flex;flex-direction:column;align-items:center;gap:16px;margin-bottom:32px}
.dichvu-title{font-family:'Inter',system-ui,sans-serif;font-weight:700;font-size:36px;line-height:51px;color:#333333;text-align:center;margin:0}
.dichvu-decoration{display:flex;align-items:center;justify-content:center;gap:16px;width:100%}
.dichvu-line{width:48px;height:2px;background:rgba(249,115,22,0.4);flex-shrink:0}
.dichvu-swiper{overflow:hidden;position:relative}
.dichvu-slide{width:282px!important;flex-shrink:0}
.dichvu-item{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;padding:12px;gap:12px;width:282px;height:421px;background:#FFFFFF;border:1px solid #F97316;border-radius:20px;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.dichvu-item-img-wrap{width:100%;height:260px;border-radius:20px;overflow:visible;position:relative;flex-shrink:0}
.dichvu-item-img-wrap img,.dichvu-item-img-wrap picture img{width:100%;height:260px;object-fit:cover;border-radius:20px;display:block}
.dichvu-item-icon{position:absolute;bottom:-21px;left:50%;transform:translateX(-50%);z-index:2}
.dichvu-item-content{display:flex;flex-direction:column;align-items:center;padding:0;gap:20px;flex:1;width:100%}
.dichvu-item-title{font-family:'Inter',system-ui,sans-serif;font-weight:700;font-size:20px;line-height:160%;color:#1F2937;text-align:center;width:100%;margin:0;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.dichvu-item-desc{font-family:'Inter',system-ui,sans-serif;font-weight:400;font-size:16px;line-height:1.4;color:#1F2937;text-align:center;width:100%;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dichvu-item-line{width:60px;height:2px;background:var(--color-main-flow);background-size:200% 100%;animation:gradient-flow-x 3s linear infinite;border:none;flex-shrink:0}
.dichvu-prev,.dichvu-next{opacity:0;transition:opacity .3s;pointer-events:none}
.dichvu-swiper:hover .dichvu-prev,.dichvu-swiper:hover .dichvu-next{opacity:1;pointer-events:auto}
.dichvu-viewall{display:flex;justify-content:center;margin-top:40px}
.btn-viewall{box-sizing:border-box;display:inline-flex;flex-direction:row;justify-content:center;align-items:center;gap:8px;min-width:222px;height:58px;background:transparent;border:1px solid var(--color-main);border-radius:999px;cursor:pointer;transition:all .3s;text-decoration:none;padding:0 32px}
.btn-viewall span{font-family:'Inter',system-ui,sans-serif;font-weight:700;font-size:18px;line-height:25px;color:var(--color-main)}
.btn-viewall:hover{background:var(--color-main)}
.btn-viewall:hover span{color:#fff}
.btn-viewall:hover svg path{stroke:#fff}

/* ===== PROJECTS SECTION ===== */
.duan-section{padding:60px 0}
.duan-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.duan-title{font-family:'Inter',system-ui,sans-serif;font-weight:700;font-size:36px;line-height:51px;color:#333333;margin:0}
.duan-viewall-link{display:flex;align-items:center;gap:8px;text-decoration:none}
.duan-viewall-link span{font-family:'Inter',system-ui,sans-serif;font-weight:700;font-size:18px;line-height:25px;color:var(--color-main)}
.duan-cats{display:flex;flex-wrap:nowrap;gap:12px;margin-bottom:32px}
.duan-cats.expanded{flex-wrap:wrap}
.duan-cat-btn{box-sizing:border-box;display:inline-flex;flex-direction:row;justify-content:center;align-items:center;padding:10px 16px;gap:8px;height:45px;background:#FFFFFF;border:1px solid #E5E7EB;border-radius:9999px;cursor:pointer;transition:all .3s;font-family:'Inter',system-ui,sans-serif;font-weight:500;font-size:14px;line-height:23px;color:#4B5563;flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.duan-cat-btn.active{background:#FFF7ED;border-color:var(--color-main);color:var(--color-main);font-weight:600}
.duan-cat-extra{display:none!important}
.duan-cats.expanded .duan-cat-extra{display:inline-flex!important;flex:0 0 auto}
.duan-cat-more{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;gap:8px;height:45px;background:#FFFFFF;border:1px solid #E5E7EB;border-radius:9999px;cursor:pointer;transition:all .3s;font-family:'Inter',system-ui,sans-serif;font-weight:500;font-size:14px;color:#4B5563;flex:0 0 auto;white-space:nowrap}
.duan-cat-more:hover{border-color:var(--color-main);color:var(--color-main)}
.duan-list-panel{display:block}
.duan-list-panel.d-none{display:none}
.duan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.duan-item{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;padding:0 0 24px;gap:16px;background:#FFFFFF;border-radius:20px;box-shadow:0 4px 16px rgba(249,115,22,.16);overflow:hidden;height:437px}
.duan-item-img{width:100%;height:300px;overflow:hidden;border-radius:20px 20px 0 0;flex-shrink:0}
.duan-item-img img,.duan-item-img picture img{width:100%;height:100%;object-fit:cover;display:block}
.duan-item-content{display:flex;flex-direction:column;align-items:flex-start;padding:0 20px;gap:8px;width:100%}
.duan-item-name{font-family:'Inter',system-ui,sans-serif;font-weight:700;font-size:20px;line-height:160%;color:#111827;margin:0}
.duan-item-addr{display:flex;flex-direction:row;align-items:center;gap:8px}
.duan-item-addr span{font-family:'Inter',system-ui,sans-serif;font-weight:500;font-size:16px;line-height:23px;color:#6B7280}
@media(max-width:1024px){.about-layout{flex-direction:column}.about-content{width:100%}.about-image-frame{width:100%;height:400px;flex:none}.about-cta{width:100%}.duan-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){.about-heading{font-size:32px;line-height:48px}.dichvu-section{padding:40px 0}.duan-section{padding:40px 0}.duan-grid{grid-template-columns:1fr}}
/* ===== ALBUM SECTION ===== */
.album-section{padding:60px 0}
.album-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.album-title{font-size:32px;font-weight:700;margin:0}
.album-nav{display:flex;gap:16px}
.album-btn{width:70px;height:40px;background:#fff;border:1px solid var(--color-main);box-shadow:0 4px 8px rgba(249,115,22,.12);border-radius:8px;display:flex;justify-content:center;align-items:center;cursor:pointer;transition:all .3s ease}
.album-btn:disabled{opacity:.4;cursor:not-allowed}
.album-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:280px 220px;gap:20px}
.album-cell{border-radius:20px;overflow:hidden}
.album-cell img{width:100%;height:100%;object-fit:cover;display:block}
.album-pos-0{grid-column:1;grid-row:1/3}
.album-pos-1{grid-column:2/4;grid-row:1}
.album-pos-2{grid-column:2;grid-row:2}
.album-pos-3{grid-column:3;grid-row:2}
.album-pos-4{grid-column:4;grid-row:1/3}
@media(max-width:767px){.album-grid{grid-template-columns:repeat(2,1fr);grid-template-rows:auto}.album-pos-0,.album-pos-1,.album-pos-2,.album-pos-3,.album-pos-4{grid-column:auto;grid-row:auto;height:180px}}
@media(max-width:575px){.album-grid{grid-template-columns:1fr}.album-pos-0,.album-pos-1,.album-pos-2,.album-pos-3,.album-pos-4{height:200px}}
/* ===== DKNT SECTION ===== */
.dknt-section{padding:0;background:#FFF9F5;min-height:900px;display:flex;flex-direction:column;justify-content:center}
.dknt-section>.wrap-content{height:900px;display:flex;align-items:stretch}
.dknt-layout{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:stretch;width:100%;height:100%}.dknt-layout>*{min-width:0}
.dknt-content{display:flex;flex-direction:column;align-items:flex-start;gap:20px;height:100%;box-sizing:border-box;padding:48px 0;min-width:0}
.dknt-form-wrap{align-self:center}
.dknt-heading{font-weight:800;font-size:60px;color:#1A1A1A;margin:0}
.dknt-heading-orange{color:#FF6B00}
.dknt-desc{font-size:18px;line-height:160%;color:#4B5563;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.dknt-form-wrap{background:#fff;border:1px solid #F3F4F6;border-radius:40px;padding:48px;display:flex;flex-direction:column;gap:24px}
.dknt-deco-row{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:16px;width:100%;height:20px}
.dknt-deco-line{width:48px;height:2px;background:rgba(249,115,22,.4);border-radius:1px}
.dknt-form-title{font-weight:700;font-size:32px;line-height:45px;color:#1F2937;text-align:center;margin:0}
.dknt-form-title-orange{color:#FF6B00}
.dknt-form{display:flex;flex-direction:column;align-items:flex-start;padding:16px 0 0;gap:16px;width:100%}
.dknt-input-group{display:flex;flex-direction:column;align-items:flex-start;width:100%;position:relative}
.dknt-input-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);display:flex;align-items:center;pointer-events:none;z-index:1}
.dknt-textarea-group .dknt-input-icon{top:14px;transform:none}
.dknt-input{width:100%;padding:12px 16px 12px 48px;border:1px solid #D1D5DB;border-radius:8px;font-size:16px;outline:none;transition:border-color .3s;font-family:inherit;box-sizing:border-box}
.dknt-input:focus{border-color:var(--color-main)}
.dknt-textarea{resize:vertical;min-height:80px}
.dknt-submit{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:8px;padding:16px 0;width:100%;background:var(--color-main-flow);background-size:200% 100%;animation:gradient-flow-x 5s linear infinite;border:none;border-radius:12px;color:#fff;font-weight:700;font-size:18px;cursor:pointer;transition:transform .2s,opacity .2s}
.dknt-submit:hover{opacity:.9;transform:translateY(-1px)}
.dknt-video-box{flex:1;min-height:0;min-width:0;display:flex;flex-direction:column;gap:10px;width:100%}
.dknt-video-player-wrap{flex:1;min-height:0;position:relative;border-radius:20px;overflow:hidden;background:#111;cursor:pointer}
.dknt-video-player{position:absolute;inset:0;width:100%;height:100%}
.dknt-video-player iframe{width:100%;height:100%;border:0;display:block}
.dknt-video-player video,.dknt-video-player img{width:100%;height:100%;object-fit:cover;display:block}
.dknt-video-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:auto;transition:opacity .2s}
.dknt-video-player-wrap:hover .dknt-video-overlay{opacity:.75}
.dknt-video-thumbs{display:flex;gap:8px;overflow-x:auto;flex-shrink:0;padding-bottom:2px;scrollbar-width:thin;scrollbar-color:rgba(255,102,0,.4) transparent}
.dknt-video-thumbs::-webkit-scrollbar{height:4px}
.dknt-video-thumbs::-webkit-scrollbar-thumb{background:rgba(255,102,0,.4);border-radius:2px}
.dknt-thumb-item{display:flex;flex-direction:column;gap:5px;cursor:pointer;flex-shrink:0;width:96px;opacity:.65;transition:opacity .2s}
.dknt-thumb-item:hover{opacity:.9}
.dknt-thumb-item.active{opacity:1}
.dknt-thumb-item.active .dknt-thumb-img{outline:2px solid var(--color-main);outline-offset:1px}
.dknt-thumb-img{width:96px;height:60px;border-radius:8px;overflow:hidden;background:#222;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dknt-thumb-img img{width:100%;height:100%;object-fit:cover;display:block}
.dknt-thumb-name{font-size:11px;color:#1A1A1A;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
@media(max-width:991px){.dknt-layout{grid-template-columns:1fr;height:auto}.dknt-section>.wrap-content{height:auto;align-items:center}.dknt-content{height:auto;padding:32px 0}.dknt-heading{font-size:40px;line-height:56px}.dknt-video-wrap{height:280px;flex:none}}
@media(max-width:575px){.dknt-form-wrap{padding:28px 20px;align-self:auto}.dknt-heading{font-size:32px;line-height:44px}.dknt-video-wrap{height:220px}}
/* ===== QUY TRINH SECTION ===== */
.quytrinh-section{padding:60px 0}
.quytrinh-header{text-align:center;margin-bottom:40px}
.quytrinh-title{font-size:32px;font-weight:700;margin-bottom:16px}
.quytrinh-items{display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;gap:0}
.quytrinh-arrow{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin:0 -7px;position:relative;z-index:1}
.quytrinh-item{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;padding:20px;gap:16px;width:100%;max-width:230.4px;height:265px;background:#fff;border:1px solid #F3F4F6;box-shadow:0 1px 2px rgba(0,0,0,.05);border-radius:16px}
.quytrinh-icon{box-sizing:border-box;display:flex;justify-content:center;align-items:center;width:80px;height:80px;background:rgba(255,247,237,.3);border:1px solid #FFEDD5;border-radius:9999px;box-shadow:inset 0 2px 4px 1px rgba(0,0,0,.05);flex-shrink:0}
.quytrinh-icon-img{width:80px;height:80px;object-fit:contain}
.quytrinh-item-title{font-weight:700;font-size:18px;line-height:140%;color:#1F2937;text-align:center;margin:0;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.quytrinh-item-desc{font-size:14px;line-height:160%;color:#6B7280;text-align:center;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.quytrinh-item-line{width:40px;height:4px;background:#F97316;border-radius:2px}
@media(max-width:991px){.quytrinh-items{flex-wrap:wrap;gap:16px}.quytrinh-arrow{display:none}.quytrinh-item{max-width:calc(50% - 8px)}}
@media(max-width:575px){.quytrinh-item{max-width:100%}}
/* ===== TIN TUC SECTION ===== */
.tintuc-section{padding:60px 0}
.tintuc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.tintuc-item{box-sizing:border-box;display:flex;flex-direction:column;background:#fff;border:1px solid #F3F4F6;box-shadow:0 3px 4px rgba(0,0,0,.06);border-radius:16px;width:100%;overflow:hidden}
.tintuc-img{width:100%;height:240px;overflow:hidden;isolation:isolate;position:relative}
.tintuc-date-badge{position:absolute;top:16px;left:16px;display:flex;flex-direction:row;align-items:center;padding:6px 12px;gap:8px;background:rgba(255,255,255,.8);box-shadow:0 1px 2px rgba(0,0,0,.05);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border-radius:8px;width:auto;min-width:125px;height:32px;z-index:1}
.tintuc-date-badge span{font-weight:600;font-size:14px;line-height:20px;color:var(--color-main);display:flex;align-items:center}
.tintuc-img img{width:100%;height:100%;object-fit:cover;display:block}
.tintuc-content{display:flex;flex-direction:column;align-items:flex-start;padding:23.25px 24px 48px;gap:10.75px;isolation:isolate;flex:1}
.tintuc-title{font-weight:700;font-size:18px;line-height:140%;color:#111827;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tintuc-desc{font-size:14px;line-height:160%;color:#6B7280;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tintuc-link{display:flex;flex-direction:row;align-items:center;gap:8px;text-decoration:none;margin-top:auto}
.tintuc-link span{font-weight:600;font-size:16px;line-height:23px;color:var(--color-main)}
.tintuc-swiper .tintuc-item{max-width:100%}
@media(max-width:991px){.tintuc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:575px){.tintuc-grid{grid-template-columns:1fr}}

/* ===== DUAN GALLERY (detail page) ===== */
.duan-gallery-section{padding:32px 0 0}
.duan-gallery-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.duan-gallery-title{font-size:22px;font-weight:700;color:#1A1A1A;margin:0}

/* ===== NEWS LISTING (nws-*) ===== */
.nws-list-section{padding:40px 0 60px}
.nws-list-head{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:32px;text-align:center}
.nws-list-line{width:60px;height:4px;background:var(--color-main-flow);background-size:200% 100%;animation:gradient-flow-x 3s linear infinite;border-radius:2px}
.nws-list-title{font-family:'Inter',system-ui,sans-serif;font-weight:700;font-size:28px;line-height:1.3;color:#1F2937;margin:0;text-transform:none}
.nws-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.nws-card{display:flex;flex-direction:column;background:#FFFFFF;border-bottom:2px solid var(--color-main);box-shadow:0 10px 30px rgba(0,0,0,.05);border-radius:16px;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease}
.nws-card:hover{transform:translateY(-6px);box-shadow:0 16px 36px rgba(0,0,0,.1)}
.nws-card-img{display:block;width:100%;aspect-ratio:390/260;overflow:hidden}
.nws-card-img img,.nws-card-img picture img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.nws-card:hover .nws-card-img img,.nws-card:hover .nws-card-img picture img{transform:scale(1.06)}
.nws-card-body{display:flex;flex-direction:column;align-items:flex-start;flex:1;padding:20px}
.nws-card-title{font-family:'Inter',system-ui,sans-serif;font-weight:700;font-size:18px;line-height:1.4;color:#212529;margin:0 0 8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-transform:none}
.nws-card-title a{color:inherit;text-decoration:none;transition:color .2s}
.nws-card:hover .nws-card-title a{color:var(--color-main)}
.nws-card-desc{font-family:'Inter',system-ui,sans-serif;font-weight:400;font-size:14px;line-height:1.6;color:#6B7280;margin:0 0 12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nws-card-more{display:flex;align-items:center;gap:8px;margin-top:auto;text-decoration:none;font-family:'Inter',system-ui,sans-serif;font-weight:700;font-size:14px;color:var(--color-main-solid)}
.nws-pagination{display:flex;justify-content:center;margin-top:40px}
.nws-pagination .pagination{display:flex;gap:8px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.nws-pagination .page-item .page-link{display:flex;align-items:center;justify-content:center;min-width:40px;height:40px;border-radius:8px;border:1px solid #E5E7EB;color:#374151;text-decoration:none;font-family:'Inter',system-ui,sans-serif;font-weight:600;transition:.2s}
.nws-pagination .page-item .page-link:hover{border-color:var(--color-main);color:var(--color-main)}
.nws-pagination .page-item.active .page-link{background:var(--color-main);border-color:var(--color-main);color:#fff}
.nws-pagination .page-item.disabled .page-link{opacity:.4;pointer-events:none}
@media(max-width:1024px){.nws-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.nws-list-section{padding:24px 0 40px}}
@media(max-width:480px){.nws-grid{grid-template-columns:1fr}.nws-list-title{font-size:22px}}

/* ===== NEWS DETAIL (nwsd-*) ===== */
.nwsd-section{padding:20px 0 60px}
.nwsd-layout{display:flex;justify-content:space-between;align-items:flex-start;gap:40px}
.nwsd-main{flex:1;min-width:0}
.nwsd-title{font-family:'Inter',system-ui,sans-serif;font-weight:700;font-size:28px;line-height:1.3;color:#1F2937;margin:0 0 12px;text-transform:none;text-align:left}
.nwsd-meta{display:flex;align-items:center;gap:20px;margin-bottom:20px;flex-wrap:wrap}
.nwsd-meta-item{display:flex;align-items:center;gap:6px;font-family:'Inter',system-ui,sans-serif;font-size:14px;color:#6B7280}
.nwsd-meta-item svg{flex-shrink:0}
.nwsd-desc{font-family:'Inter',system-ui,sans-serif;font-weight:600;font-size:16px;line-height:1.6;color:#374151;margin-bottom:16px}
.nwsd-content{font-family:'Inter',system-ui,sans-serif;font-size:15px;line-height:1.75;color:#374151}
.nwsd-content img{border-radius:12px;max-width:100%}
.nwsd-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:24px 0}
.nwsd-gallery-item{aspect-ratio:390/300;border-radius:12px;overflow:hidden;cursor:pointer}
.nwsd-gallery-item img,.nwsd-gallery-item picture img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.nwsd-gallery-item:hover img,.nwsd-gallery-item:hover picture img{transform:scale(1.06)}
.nwsd-share{display:flex;align-items:center;gap:12px;margin-top:32px;padding-top:24px;border-top:1px solid #E5E7EB}
.nwsd-share b{font-family:'Inter',system-ui,sans-serif;color:#1F2937}
.nwsd-sidebar{flex:0 0 340px;max-width:340px;position:sticky;top:100px}
.nwsd-sidebar-title{font-family:'Inter',system-ui,sans-serif;font-weight:700;font-size:18px;color:#1F2937;margin:0 0 16px;padding-bottom:12px;border-bottom:2px solid var(--color-main)}
.nwsd-side-feature{display:block;text-decoration:none;margin-bottom:16px;border-radius:12px;overflow:hidden;box-shadow:0 6px 20px rgba(0,0,0,.06);transition:transform .3s ease}
.nwsd-side-feature:hover{transform:translateY(-4px)}
.nwsd-side-feature-img{width:100%;aspect-ratio:340/220;overflow:hidden}
.nwsd-side-feature-img img,.nwsd-side-feature-img picture img{width:100%;height:100%;object-fit:cover;display:block}
.nwsd-side-feature-body{padding:12px 4px}
.nwsd-side-feature-title{font-family:'Inter',system-ui,sans-serif;font-weight:700;font-size:15px;color:#212529;margin:0 0 6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nwsd-side-feature-desc{font-family:'Inter',system-ui,sans-serif;font-size:13px;color:#6B7280;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nwsd-side-item{display:flex;gap:12px;align-items:flex-start;text-decoration:none;padding:12px 0;border-bottom:1px solid #F3F4F6}
.nwsd-side-item:last-child{border-bottom:none}
.nwsd-side-item-img{flex-shrink:0;width:84px;height:64px;border-radius:8px;overflow:hidden}
.nwsd-side-item-img img,.nwsd-side-item-img picture img{width:100%;height:100%;object-fit:cover;display:block}
.nwsd-side-item-text{flex:1;min-width:0}
.nwsd-side-item-title{font-family:'Inter',system-ui,sans-serif;font-weight:600;font-size:14px;color:#212529;margin:0 0 4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .2s}
.nwsd-side-item:hover .nwsd-side-item-title{color:var(--color-main)}
.nwsd-side-item-desc{font-family:'Inter',system-ui,sans-serif;font-weight:400;font-size:12px;line-height:1.5;color:#9CA3AF;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:1024px){.nwsd-layout{flex-direction:column}.nwsd-sidebar{flex:none;max-width:100%;width:100%;position:static}}
@media(max-width:768px){.nwsd-title{font-size:22px}.nwsd-gallery{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.nwsd-gallery{grid-template-columns:1fr}.nwsd-sidebar-title{font-size:16px}}



/* ==========================================================================
   THIẾT KẾ WEB VŨ VĂN TUẤN (TUANMOBI) — Figma node 37:2392
   Mọi class dùng prefix .vvt- để không xung đột với CSS phía trên.
   Màu / px / font / radius / shadow copy nguyên văn từ Figma.
   ========================================================================== */
:root {
    --vvt-grad: linear-gradient(360deg, #306CE6 0%, #2E43C6 100%);
    --vvt-grad-red: linear-gradient(360deg, #FF6B6B 0%, #FF2D55 100%);
    --vvt-grad-cyan: linear-gradient(360deg, #22C8E5 0%, #20A7E6 100%);
    --vvt-blue: #2E43C6;
    --vvt-blue-light: #306CE6;
    --vvt-red: #FF2D55;
    --vvt-font: 'Poppins', sans-serif;
}

.vvt-wrap {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Chữ tô gradient (tiêu đề section) — dùng lại nhiều nơi */
.vvt-grad-text {
    background: var(--vvt-grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

/* Nút gradient chuẩn (Frame 4) */
.vvt-btn {
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 14px 22px;
    gap: 10px;
    background: var(--vvt-grad);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    font-family: var(--vvt-font);
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    text-transform: capitalize;
    color: #FFFFFF;
    text-decoration: none;
    cursor: pointer;
    transition: transform .3s ease, box-shadow .3s ease, filter .3s ease;
    animation: vvt-btn-edge-glow 2.4s ease-in-out infinite;
}

/* Hiệu ứng tráng gương: 1 dải sáng chéo quét qua nút khi hover (kiểu lucas.vn) */
.vvt-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    left: -75%;
    width: 45%;
    background: linear-gradient(115deg, transparent, rgba(255, 255, 255, .65), transparent);
    transform: skewX(-22deg);
    transition: left .65s ease;
    pointer-events: none;
    z-index: 1;
}

.vvt-btn:hover::before {
    left: 130%;
}

@keyframes vvt-btn-edge-glow {

    0%,
    100% {
        box-shadow: 0 4px 14px rgba(46, 67, 198, .22), 0 0 0 rgba(48, 108, 230, 0);
    }

    50% {
        box-shadow: 0 4px 14px rgba(46, 67, 198, .22), 0 0 16px rgba(48, 108, 230, .55);
    }
}

.vvt-btn:hover {
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(46, 67, 198, .28), 0 0 22px rgba(48, 108, 230, .7);
    filter: brightness(1.06);
}

.vvt-btn--red {
    background: var(--vvt-grad-red);
    animation-name: vvt-btn-edge-glow-red;
}

@keyframes vvt-btn-edge-glow-red {

    0%,
    100% {
        box-shadow: 0 4px 14px rgba(255, 45, 85, .22), 0 0 0 rgba(255, 45, 85, 0);
    }

    50% {
        box-shadow: 0 4px 14px rgba(255, 45, 85, .22), 0 0 16px rgba(255, 45, 85, .55);
    }
}

.vvt-btn--red:hover {
    box-shadow: 0 10px 22px rgba(255, 45, 85, .28), 0 0 22px rgba(255, 45, 85, .75);
}

/* ============================ HEADER ============================ */
.vvt-topline {
    width: 100%;
    height: 14px;
    background: var(--vvt-grad);
}

.vvt-header {
    width: 100%;
    height: 82px;
    background: url('../images/vvt/header-bar-bg.png') center/cover no-repeat;
    display: flex;
    align-items: center;
}

.vvt-header-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    height: 62px;
}

/* Logo — có hiệu ứng phát sáng theo đặc tả */
.vvt-logo {
    display: block;
    flex: 0 0 auto;
}

.vvt-logo img {
    width: 111px;
    height: 62px;
    object-fit: contain;
    display: block;
    transition: filter .35s ease, transform .35s ease;
    animation: vvt-logo-glow 3.2s ease-in-out infinite;
}

.vvt-logo:hover img {
    transform: scale(1.04);
}

@keyframes vvt-logo-glow {
    0%, 100% {
        filter: drop-shadow(0 0 0 rgba(48, 108, 230, 0));
    }
    50% {
        filter: drop-shadow(0 0 10px rgba(48, 108, 230, .65));
    }
}

/* Ô tìm kiếm */
.vvt-search {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 0 16px;
    gap: 8px;
    width: 387px;
    height: 47px;
    min-height: 47px;
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    position: relative;
}

.vvt-search input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: var(--vvt-font);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #202020;
}

.vvt-search input::placeholder {
    color: #747474;
    opacity: 1;
}

/* Placeholder chạy hiện/tắt liên tục (đặc tả HEADER mục 4) */
.vvt-search input.vvt-ph-out::placeholder {
    opacity: 0;
    transition: opacity .35s ease;
}

.vvt-search input.vvt-ph-in::placeholder {
    opacity: 1;
    transition: opacity .35s ease;
}

.vvt-search-btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 47px;
    height: 47px;
    flex: 0 0 47px;
    background: var(--vvt-grad);
    border: 0;
    border-radius: 0 8px 8px 0;
    cursor: pointer;
    transition: filter .3s ease;
}

.vvt-search-btn:hover {
    filter: brightness(1.1);
}

.vvt-search .show-search {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 60;
}

/* Nhóm nút phải: hotline + giỏ hàng */
.vvt-header-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 38px;
    height: 44px;
    flex: 0 0 auto;
}

.vvt-hotline-btn {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 14px 22px;
    gap: 10px;
    height: 44px;
    background: var(--vvt-grad);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    font-family: var(--vvt-font);
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    text-transform: capitalize;
    color: #FFFFFF;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .3s ease, box-shadow .3s ease;
}

.vvt-hotline-btn:hover {
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(46, 67, 198, .3);
}

.vvt-cart-btn {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px;
    gap: 10px;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    background: var(--vvt-grad);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    color: #FFFFFF;
    text-decoration: none;
    position: relative;
    transition: transform .3s ease, box-shadow .3s ease;
}

.vvt-cart-btn:hover {
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(46, 67, 198, .3);
}

.vvt-cart-count {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--vvt-grad-red);
    color: #FFFFFF;
    font-family: var(--vvt-font);
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
}

/* ============================ THANH MENU ============================ */
.vvt-nav {
    width: 100%;
    height: 82px;
    background: var(--vvt-grad);
    display: flex;
    align-items: center;
    z-index: 50;
}

/* Giữ nguyên thanh công cụ khi kéo xuống (đặc tả HEADER mục 3) */
.vvt-nav.nav-menu-sticky {
    position: sticky;
    top: 0;
}

.vvt-nav.nav-menu-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

.vvt-nav.nav-menu-hidden {
    display: none;
}

body.nav-menu-fixed {
    padding-top: 82px;
}

.vvt-nav-inner {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 31px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    height: 27px;
}

.vvt-nav-list {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 31px;
    flex: 1 1 auto;
    min-width: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    height: 27px;
}

.vvt-nav-item {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2px;
    height: 27px;
}

.vvt-nav-item > a {
    display: flex;
    align-items: center;
    gap: 2px;
    font-family: var(--vvt-font);
    font-weight: 600;
    font-size: 18px;
    line-height: 27px;
    text-transform: capitalize;
    color: #FFFFFF;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity .3s ease;
}

.vvt-nav-item > a:hover,
.vvt-nav-item > a.active {
    color: #FFFFFF;
    opacity: .82;
}

.vvt-nav-caret {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    transition: transform .3s ease;
}

.vvt-nav-item:hover .vvt-nav-caret {
    transform: rotate(180deg);
}

/* Chữ "Sale" trên menu — màu đỏ + hiệu ứng phát sáng nhấp nháy nhẹ để nổi bật */
.vvt-nav-sale {
    color: var(--vvt-red);
    font-weight: 800;
    animation: vvt-sale-glow 1.8s ease-in-out infinite;
}

@keyframes vvt-sale-glow {

    0%,
    100% {
        text-shadow: 0 0 4px rgba(255, 45, 85, .35);
    }

    50% {
        text-shadow: 0 0 12px rgba(255, 45, 85, .9), 0 0 20px rgba(255, 45, 85, .5);
    }
}

/* Dropdown danh mục cấp 2 */
.vvt-nav-drop {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 10px);
    margin-top: 27px;
    min-width: 240px;
    background: #FFFFFF;
    border-radius: 8px;
    box-shadow: 1.66px 1.66px 6px -2.25px rgba(0, 0, 0, 0.03), 10px 10px 21.2132px -3.75px rgba(0, 0, 0, 0.16);
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, transform .3s ease, visibility .3s;
    z-index: 60;
}

.vvt-nav-item:hover .vvt-nav-drop {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.vvt-nav-drop a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    font-family: var(--vvt-font);
    font-weight: 500;
    font-size: 14px;
    line-height: 21px;
    color: #000000;
    text-decoration: none;
    transition: background .25s ease, color .25s ease;
}

.vvt-nav-drop a:hover {
    background: #F2F5FE;
    color: var(--vvt-blue);
}

/* Dropdown thương hiệu: logo + tên (đặc tả THANH MENU mục 1) */
.vvt-nav-drop--brand {
    min-width: 280px;
}

.vvt-nav-drop--brand img {
    width: 40px;
    height: 28px;
    object-fit: contain;
    flex: 0 0 40px;
}

.vvt-nav-toggle {
    display: none;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.vvt-nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: #FFFFFF;
    border-radius: 2px;
}

/* ============================ HERO / SLIDER ============================ */
.vvt-hero {
    position: relative;
    width: 100%;
    min-height: 878.88px;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.vvt-hero .swiper {
    width: 100%;
    position: relative;
    z-index: 2;
}

/* Mỗi slide = 1 banner full-width riêng, ảnh nền lấy từ dashboard Slideshow
   (thay cho ảnh xoáy nước cố định trước đây) */
.vvt-hero-slide {
    position: relative;
    display: flex !important;
    align-items: center;
    min-height: 878.88px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Lớp phủ tối giúp chữ luôn đọc được dù ảnh nền sáng/tối/nhiều màu khác nhau */
.vvt-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.vvt-hero-inner {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.vvt-hero-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    gap: 32px;
    width: 628px;
    max-width: 100%;
}

.vvt-hero-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    gap: 8px;
    width: 100%;
}

.vvt-hero-title {
    width: 100%;
    margin: 0;
    font-family: var(--vvt-font);
    font-style: normal;
    font-weight: 700;
    font-size: 59.0118px;
    line-height: 130%;
    text-transform: capitalize;
    background: var(--vvt-grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

.vvt-hero-desc {
    width: 529px;
    max-width: 100%;
    margin: 0;
    font-family: var(--vvt-font);
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 27px;
    color: #2E2E2E;
}

.vvt-hero-btn {
    box-sizing: border-box;
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 17.5px 27.5px;
    gap: 12.5px;
    height: 65px;
    background: var(--vvt-grad);
    border: 1.25px solid rgba(255, 255, 255, 0.16);
    border-radius: 10px;
    font-family: var(--vvt-font);
    font-weight: 500;
    font-size: 20px;
    line-height: 30px;
    text-transform: capitalize;
    color: #FFFFFF;
    text-decoration: none;
    transition: transform .3s ease, box-shadow .3s ease;
}

.vvt-hero-btn:hover {
    color: #FFFFFF;
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(46, 67, 198, .32);
}

/* ============================ NỀN SECTION ============================ */
.vvt-secbg {
    position: relative;
    background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.89), rgba(255, 255, 255, 0.89)), url('../images/vvt/section-bg.png');
    background-size: cover;
    background-position: center;
}

/* 2 dải trắng mờ trên/dưới (Rectangle 37 / Rectangle 38) */
.vvt-secbg::before,
.vvt-secbg::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 212.18px;
    pointer-events: none;
    z-index: 1;
}

.vvt-secbg::before {
    top: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
    transform: matrix(1, 0, 0, -1, 0, 0);
}

.vvt-secbg::after {
    bottom: 0;
    height: 208.02px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
}

.vvt-secbg > * {
    position: relative;
    z-index: 2;
}

/* ============================ FLASH SALE ============================ */
.vvt-flash {
    padding: 60px 0 40px;
}

.vvt-flash-box {
    position: relative;
    width: 100%;
    background: #FFE2E6;
    box-shadow: 2.6583px 2.6583px 3.75941px -2.25px rgba(0, 0, 0, 0.09), 5.90083px 5.90083px 8.34503px -3px rgba(0, 0, 0, 0.092), 10px 10px 21.2132px -3.75px rgba(0, 0, 0, 0.055);
    border-radius: 21px;
    padding: 83px 24px 24px;
    margin-top: 104px;
}

/* Ruy băng "Flash sale hôm nay / Giảm tới xx%" — dùng đúng graphic Figma (nhiều khối
   vector xoay lệch: cờ đỏ FLASH SALE + cờ xanh GIẢM TỚI + tag HÔM NAY + bóng xanh dương
   phía sau) export nguyên trạng làm ảnh nền, KHÔNG dựng lại bằng CSS đơn giản (pill bo
   tròn) vì sẽ sai hình dạng thật. Chỉ số % là dữ liệu động (theo đặc tả FLASH SALE mục 4)
   nên được che bằng 1 lớp gradient khớp màu rồi đè text thật lên trên. */
.vvt-flash-ribbon {
    position: absolute;
    top: -104px;
    left: 3px;
    width: 475px;
    height: 172px;
    transform-origin: top left;
    pointer-events: none;
}

.vvt-flash-ribbon-bg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Hiệu ứng tráng gương quét qua ruy băng (đặc tả FLASH SALE mục 3) — dùng mask theo
   đúng hình dạng ảnh ruy băng nên không tràn ra phần nền trong suốt xung quanh. */
.vvt-flash-ribbon-shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .55) 48%, rgba(255, 255, 255, .85) 50%, rgba(255, 255, 255, .55) 52%, transparent 70%);
    background-size: 250% 100%;
    -webkit-mask-image: url('../images/vvt/flash-ribbon.png');
    -webkit-mask-size: 100% 100%;
    mask-image: url('../images/vvt/flash-ribbon.png');
    mask-size: 100% 100%;
    animation: vvt-shine 2.6s linear infinite;
}

@keyframes vvt-shine {
    0% {
        background-position: 150% 0;
    }
    100% {
        background-position: -50% 0;
    }
}

/* Che số "50%" gốc trong ảnh bằng đúng đoạn gradient cyan tương ứng (nội suy từ
   linear-gradient(360deg,#22C8E5,#20A7E6) của Vector 14) để liền màu tuyệt đối,
   rồi đè text % thật (đổi được trong admin) lên trên. */
.vvt-flash-ribbon-cover {
    position: absolute;
    left: 62.11%;
    top: 37.79%;
    width: 29.47%;
    height: 48.26%;
    background: linear-gradient(180deg, rgb(33, 189, 229) 0%, rgb(32, 173, 230) 100%);
}

.vvt-flash-ribbon-percent {
    position: absolute;
    left: 62.11%;
    top: 37.79%;
    width: 29.47%;
    height: 48.26%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(-1.3deg);
    font-family: var(--vvt-font);
    font-weight: 700;
    font-size: 55px;
    line-height: 82.5px;
    text-transform: uppercase;
    color: #FFFFFF;
    white-space: nowrap;
}

.vvt-flash-list {
    width: 100%;
}

/* ---- Card sản phẩm (Flash sale) ---- */
.vvt-prd {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 15.6859px 15.6859px 16.8063px;
    gap: 16.81px;
    width: 100%;
    background: #FFFFFF;
    border-radius: 8.96335px;
    text-decoration: none;
    transition: transform .3s ease, box-shadow .3s ease;
}

.vvt-prd:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 34px rgba(0, 0, 0, .12);
}

.vvt-prd-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 183 / 155.74;
    background: #F7F7F7;
    border-radius: 8.96335px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.vvt-prd-thumb img {
    width: 86%;
    height: 86%;
    object-fit: contain;
    transition: transform .4s ease;
}

.vvt-prd:hover .vvt-prd-thumb img {
    transform: scale(1.07);
}

.vvt-prd-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 4.19274px 10.4819px;
    gap: 10.48px;
    background: var(--vvt-grad-red);
    border-radius: 4.48168px;
    font-family: var(--vvt-font);
    font-weight: 600;
    font-size: 8.38549px;
    line-height: 13px;
    text-transform: capitalize;
    color: #FFFFFF;
}

.vvt-prd-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    gap: 8.39px;
    width: 100%;
}

.vvt-prd-name {
    width: 100%;
    margin: 0;
    font-family: var(--vvt-font);
    font-weight: 700;
    font-size: 10.4819px;
    line-height: 16px;
    color: #000000;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 32px;
}

.vvt-prd-cat {
    width: 100%;
    font-family: var(--vvt-font);
    font-weight: 700;
    font-size: 6.28912px;
    line-height: 9px;
    color: #838383;
    text-transform: uppercase;
}

.vvt-prd-prices {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0;
    gap: 3.14px;
    width: 100%;
    flex-wrap: wrap;
}

.vvt-prd-old {
    position: relative;
    font-family: var(--vvt-font);
    font-weight: 600;
    font-size: 9.33838px;
    line-height: 14px;
    color: #D9D9D9;
    text-decoration: line-through;
    text-decoration-color: #D9D9D9;
}

.vvt-prd-new {
    font-family: var(--vvt-font);
    font-weight: 600;
    font-size: 10.6724px;
    line-height: 13px;
    /* Giá mới ở card Flash Sale tô gradient đỏ theo đúng fill thật trong Figma
       (không phải màu đặc) */
    background: var(--vvt-grad-red);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

.vvt-prd-actions {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0;
    gap: 8.39px;
    width: 100%;
}

.vvt-prd-buy {
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    display: flex;
    flex: 1 1 auto;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8.21999px 12.9171px;
    gap: 5.87px;
    height: 27.25px;
    background: var(--vvt-grad-red);
    border: 0.587142px solid rgba(255, 255, 255, 0.16);
    border-radius: 4.69714px;
    font-family: var(--vvt-font);
    font-weight: 500;
    font-size: 9.39427px;
    line-height: 14px;
    text-transform: capitalize;
    color: #FFFFFF;
    text-decoration: none;
    white-space: nowrap;
    transition: filter .3s ease, box-shadow .3s ease;
    transition: filter .3s ease;
}

.vvt-prd-buy::before {
    content: '';
    position: absolute;
    inset: 0;
    left: -75%;
    width: 45%;
    background: linear-gradient(115deg, transparent, rgba(255, 255, 255, .65), transparent);
    transform: skewX(-22deg);
    transition: left .5s ease;
    pointer-events: none;
}

.vvt-prd-buy:hover {
    color: #FFFFFF;
    filter: brightness(1.08);
    box-shadow: 0 0 12px rgba(255, 45, 85, .65);
}

.vvt-prd-buy:hover::before {
    left: 130%;
}

.vvt-prd--lg .vvt-prd-buy:hover {
    box-shadow: 0 0 12px rgba(48, 108, 230, .65);
}

.vvt-prd-cart {
    box-sizing: border-box;
    display: flex;
    flex: 0 0 27.25px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 6.19383px;
    width: 27.25px;
    height: 27.25px;
    background: var(--vvt-grad-red);
    border: 0.619383px solid rgba(255, 255, 255, 0.16);
    border-radius: 4.95506px;
    color: #FFFFFF;
    cursor: pointer;
    transition: filter .3s ease;
}

.vvt-prd-cart:hover {
    color: #FFFFFF;
    filter: brightness(1.08);
}

/* ---- Card sản phẩm bản lớn (mục Bán chạy) ---- */
.vvt-prd--lg {
    padding: 18.4582px 18.4582px 19.7766px;
    gap: 20px;
    border: 1.17674px solid #E6E6E6;
    border-radius: 10.5475px;
}

.vvt-prd--lg .vvt-prd-thumb {
    aspect-ratio: 215.34 / 183.26;
    background: #F0F0F0;
    border-radius: 10.5475px;
}

.vvt-prd--lg .vvt-prd-badge {
    padding: 4.93377px 12.3344px;
    gap: 12.33px;
    background: var(--vvt-grad);
    border-radius: 5.27376px;
    font-size: 9.86754px;
    line-height: 15px;
}

.vvt-prd--lg .vvt-prd-info {
    gap: 9.87px;
}

.vvt-prd--lg .vvt-prd-name {
    font-size: 12.3344px;
    line-height: 19px;
    min-height: 38px;
}

.vvt-prd--lg .vvt-prd-cat {
    font-size: 7.40065px;
    line-height: 11px;
}

.vvt-prd--lg .vvt-prd-old {
    font-size: 10.9888px;
    line-height: 16px;
}

.vvt-prd--lg .vvt-prd-new {
    font-size: 12.5px;
    line-height: 16px;
    /* Giá mới ở card Bán chạy dùng gradient XANH chủ đề (--vvt-grad), KHÔNG phải
       gradient đỏ của Flash Sale — đúng theo fill thật trong Figma cho mục này */
    background: var(--vvt-grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

.vvt-prd--lg .vvt-prd-buy,
.vvt-prd--lg .vvt-prd-cart {
    background: var(--vvt-grad);
    height: 32px;
    font-size: 11px;
}

.vvt-prd--lg .vvt-prd-cart {
    flex: 0 0 32px;
    width: 32px;
}

/* ============================ DANH MỤC SP PHỤ KIỆN ============================ */
.vvt-cat {
    padding: 40px 0;
}

.vvt-sec-title {
    width: 100%;
    margin: 0 0 17px;
    font-family: var(--vvt-font);
    font-style: normal;
    font-weight: 700;
    font-size: 32px;
    line-height: 48px;
    text-align: center;
    text-transform: capitalize;
    background: var(--vvt-grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

.vvt-cat-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

.vvt-cat-item {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 6px 10px;
    gap: 10px;
    height: 112px;
    background: #FFFFFF;
    border: 1px solid #EDEDED;
    box-shadow: 1.66px 1.66px 6px -2.25px rgba(0, 0, 0, 0.03), 10px 10px 21.2132px -3.75px rgba(0, 0, 0, 0.055);
    border-radius: 8px;
    text-decoration: none;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.vvt-cat-item:hover {
    transform: translateY(-4px);
    border-color: var(--vvt-blue-light);
    box-shadow: 10px 14px 26px -6px rgba(46, 67, 198, .18);
}

.vvt-cat-inner {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    gap: 13px;
    width: 100%;
    height: 100%;
}

.vvt-cat-name {
    font-family: var(--vvt-font);
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 21px;
    text-transform: capitalize;
    color: #000000;
    flex: 1 1 auto;
}

.vvt-cat-img {
    flex: 0 0 auto;
    max-width: 50%;
    max-height: 88px;
    object-fit: contain;
    transition: transform .35s ease;
}

.vvt-cat-item:hover .vvt-cat-img {
    transform: scale(1.08);
}

/* Danh mục ẩn khi vượt quá số lượng cấu hình */
.vvt-cat-item.is-hidden {
    display: none;
}

.vvt-cat-more {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.vvt-cat-more button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 26px;
    background: transparent;
    border: 1px solid var(--vvt-blue-light);
    border-radius: 8px;
    font-family: var(--vvt-font);
    font-weight: 600;
    font-size: 14px;
    line-height: 21px;
    color: var(--vvt-blue);
    cursor: pointer;
    transition: background .3s ease, color .3s ease;
}

.vvt-cat-more button:hover {
    background: var(--vvt-grad);
    color: #FFFFFF;
    border-color: transparent;
}

/* ============================ SẢN PHẨM BÁN CHẠY ============================ */
.vvt-bc {
    padding: 40px 0;
}

.vvt-bc-layout {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0;
    gap: 20px;
}

.vvt-bc-banner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 46px 25px 510px 28px;
    gap: 10px;
    width: 387px;
    flex: 0 0 387px;
    min-height: 724px;
    background: url('../images/vvt/banchay-banner.png') center/cover no-repeat;
    border-radius: 18px;
    animation: vvt-banner-glow 3s ease-in-out infinite;
}

/* Hiệu ứng phát quang quanh banner (kiểu lucas.vn) */
@keyframes vvt-banner-glow {

    0%,
    100% {
        box-shadow: 0 0 22px rgba(48, 108, 230, .3);
    }

    50% {
        box-shadow: 0 0 46px rgba(48, 108, 230, .65);
    }
}

.vvt-bc-banner-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    gap: 18px;
    width: 334px;
    max-width: 100%;
}

.vvt-bc-title {
    width: 100%;
    margin: 0;
    font-family: var(--vvt-font);
    font-weight: 700;
    font-size: 32px;
    line-height: 48px;
    text-transform: capitalize;
    background: var(--vvt-grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

.vvt-bc-desc {
    width: 309px;
    max-width: 100%;
    margin: 0;
    font-family: var(--vvt-font);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #000000;
}

.vvt-bc-btn {
    box-sizing: border-box;
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 14px 22px;
    gap: 10px;
    height: 52px;
    background: var(--vvt-grad-red);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    font-family: var(--vvt-font);
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    text-transform: capitalize;
    color: #FFFFFF;
    text-decoration: none;
    transition: transform .3s ease, box-shadow .3s ease;
}

.vvt-bc-btn:hover {
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(255, 45, 85, .3);
}

.vvt-bc-slider-wrap {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.vvt-bc-swiper {
    width: 100%;
}

.vvt-bc-swiper .swiper-wrapper {
    padding-bottom: 4px;
}

/* Mỗi trang bên trong swiper là 1 khối grid tĩnh bình thường (3 cột x 2 hàng) —
   không dùng module Grid của Swiper để tránh lỗi layout phụ thuộc tính chiều cao JS. */
.vvt-bc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 19px;
}

.vvt-bc-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    color: var(--color-main-solid);
    border: 1px solid #E5E7EB;
    border-radius: 999px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
    cursor: pointer;
    z-index: 5;
    transition: background .25s ease, color .25s ease, transform .25s ease;
}

.vvt-bc-nav:hover {
    background: var(--color-main-solid);
    color: #FFFFFF;
}

.vvt-bc-nav.swiper-button-disabled {
    opacity: .35;
    cursor: default;
    pointer-events: none;
}

.vvt-bc-prev {
    left: 8px;
}

.vvt-bc-next {
    right: 8px;
}

@media (max-width: 1300px) {

    .vvt-bc-prev {
        left: 8px;
    }

    .vvt-bc-next {
        right: 8px;
    }
}

/* ============================ BANNER GIỮA TRANG ============================ */
.vvt-banner {
    padding: 40px 0;
}

.vvt-banner-layout {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}

.vvt-banner-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: 590px;
    flex: 1 1 590px;
    min-width: 0;
}

/* Nhãn "Phụ kiện Sạc" — Figma dùng ĐÚNG instance pill gradient đỏ bo tròn hoàn toàn
   (cornerRadius 999), không phải nền hồng nhạt như bản cũ */
.vvt-banner-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11.02px 17.32px;
    background: var(--vvt-grad-red);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    font-family: var(--vvt-font);
    font-weight: 500;
    font-size: 12.5977px;
    line-height: 18.8966px;
    text-transform: capitalize;
    color: #FFFFFF;
    margin-bottom: 24px;
    animation: vvt-badge-glow 2.2s ease-in-out infinite;
}

@keyframes vvt-badge-glow {

    0%,
    100% {
        box-shadow: 0 0 6px rgba(255, 45, 85, .35);
    }

    50% {
        box-shadow: 0 0 18px rgba(255, 45, 85, .85);
    }
}

/* 3 dòng tiêu đề có kích thước/màu KHÁC NHAU theo Figma:
   dòng 1 "Sạc nhanh Anker" = 60px gradient đỏ; dòng 2-3 = 44px màu #1C1C1C.
   Không dùng chung 1 font-size 44px cho cả khối như trước, và KHÔNG capitalize
   (Figma giữ nguyên chữ thường "nhỏ gọn, mạnh mẽ..."). */
.vvt-banner-title {
    margin: 0 0 16px;
    font-family: var(--vvt-font);
    font-weight: 700;
    font-size: 44px;
    line-height: 150%;
    color: #1C1C1C;
}

.vvt-banner-title .vvt-banner-title-1 {
    display: block;
    font-size: 60px;
    line-height: 150%;
    background: var(--vvt-grad-red);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

.vvt-banner-desc {
    width: 486px;
    max-width: 100%;
    margin: 0 0 24px;
    font-family: var(--vvt-font);
    font-weight: 400;
    font-size: 16px;
    line-height: 27px;
    color: #2E2E2E;
}

.vvt-banner-img {
    flex: 0 0 590px;
    width: 590px;
    max-width: 100%;
}

.vvt-banner-img img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 18px;
    transition: transform .4s ease;
    animation: vvt-banner-glow 3s ease-in-out infinite;
}

.vvt-banner-img:hover img {
    transform: scale(1.02);
}

/* ============================ ƯU ĐÃI COMBO ============================ */
.vvt-combo {
    padding: 40px 0 60px;
    overflow: hidden;
}

.vvt-combo-layout {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 21px;
    width: 100%;
    /* Section này KHÔNG bọc trong .vvt-wrap (xem home/index.blade.php) — tự bù
       padding-left để cột banner thẳng hàng với các section khác, KHÔNG giới hạn
       padding-right để cột phải (.vvt-combo-right) kéo dài tự nhiên tới sát mép
       phải màn hình bằng box THẬT, không phải mẹo overflow:visible. */
    padding-left: max(15px, calc((100vw - 1200px) / 2));
}

.vvt-combo-banner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 47px 67px 246px 57px;
    gap: 10px;
    width: 487px;
    flex: 0 0 487px;
    min-height: 508px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) -10.43%, rgba(102, 102, 102, 0) 73.62%), url('../images/vvt/combo-banner.png') center/cover no-repeat;
    box-shadow: 2.6583px 2.6583px 3.75941px -2.25px rgba(0, 0, 0, 0.09), 5.90083px 5.90083px 8.34503px -3px rgba(0, 0, 0, 0.092), 10px 10px 21.2132px -3.75px rgba(0, 0, 0, 0.055);
    border-radius: 18px;
}

.vvt-combo-banner-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    gap: 21px;
    width: 363px;
    max-width: 100%;
}

.vvt-combo-title {
    width: 100%;
    margin: 0;
    font-family: var(--vvt-font);
    font-weight: 700;
    font-size: 36px;
    line-height: 54px;
    text-align: center;
    text-transform: capitalize;
    color: #FFFFFF;
}

.vvt-combo-sub {
    width: 100%;
    margin: 0;
    font-family: var(--vvt-font);
    font-weight: 700;
    font-size: 25px;
    line-height: 38px;
    text-align: center;
    text-transform: capitalize;
    color: #FFFFFF;
}

.vvt-combo-desc {
    width: 334px;
    max-width: 100%;
    margin: 0;
    font-family: var(--vvt-font);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    text-transform: capitalize;
    color: #FFFFFF;
}

/* Cột phải là BOX THẬT kéo dài tới sát mép phải màn hình (không phải mẹo
   overflow:visible) — nhờ vậy overflow:hidden mặc định của Swiper clip ĐÚNG ở cả
   2 mép của chính hộp này khi kéo/slide, không bị tràn sang trái như cách cũ. */
.vvt-combo-right {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 508px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--vvt-grad);
    box-shadow: 2.6583px 2.6583px 3.75941px -2.25px rgba(0, 0, 0, 0.09), 5.90083px 5.90083px 8.34503px -3px rgba(0, 0, 0, 0.092), 10px 10px 21.2132px -3.75px rgba(0, 0, 0, 0.055);
    border-radius: 18px 0 0 18px;
}

.vvt-combo-list-wrap {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 0 0 28px;
    gap: 22px;
    width: 100%;
}

/* BUG: thư viện Swiper gốc (swiper-bundle.min.css) đặt cứng .swiper-slide{width:100%}
   làm mặc định. Với slidesPerView:'auto', Swiper KHÔNG set lại width bằng JS (chỉ tự
   đo kích thước có sẵn) — nên mỗi "khe" slide bị kéo giãn 100% dù .vvt-combo-item bên
   trong chỉ rộng 387px, khiến khung slide và item không khớp nhau (thừa khoảng trắng
   bên phải mỗi item). Ép width:auto để khe slide co đúng theo item con bên trong. */
.vvt-combo-list-wrap .swiper-slide {
    width: auto;
}

.vvt-combo-list-title {
    width: 100%;
    margin: 0;
    font-family: var(--vvt-font);
    font-weight: 700;
    font-size: 32px;
    line-height: 48px;
    text-transform: capitalize;
    color: #FFFFFF;
}

/* Kích thước item Combo theo ĐÚNG Figma (Frame 2071857752/3/4): 387×381 cố định —
   swiper dùng slidesPerView:'auto' nên phải khai báo width tường minh ở đây, không
   để item tự co giãn theo phân số nữa. */
.vvt-combo-item {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 387px;
    height: 381px;
    background-color: #FFFFFF;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 18px;
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease;
}

.vvt-combo-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 36px rgba(0, 0, 0, .22);
}

.vvt-combo-item-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px 0;
    text-decoration: none;
}

.vvt-combo-item-name {
    margin: 0;
    font-family: var(--vvt-font);
    font-weight: 700;
    font-size: 26px;
    line-height: 39px;
    text-align: center;
    color: #000000;
}

.vvt-combo-item-price {
    display: block;
    margin-top: 4px;
    font-family: var(--vvt-font);
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    color: var(--vvt-red);
}

/* Nút mua/thêm giỏ hàng — Figma không vẽ nút này trên tile combo (chỉ có tên+ảnh),
   nhưng combo giờ là sản phẩm có giá thật nên bổ sung để đồng bộ hành vi mua hàng
   với các card sản phẩm khác trên trang chủ (Flash Sale, Bán chạy). */
.vvt-combo-item-actions {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 20px 24px;
}

.vvt-combo-item-buy {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    background: var(--vvt-grad-red);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    font-family: var(--vvt-font);
    font-weight: 500;
    font-size: 14px;
    color: #FFFFFF;
    text-decoration: none;
    transition: filter .3s ease;
}

.vvt-combo-item-buy:hover {
    color: #FFFFFF;
    filter: brightness(1.08);
}

.vvt-combo-item-cart {
    flex: 0 0 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: var(--vvt-grad-red);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    color: #FFFFFF;
    cursor: pointer;
    transition: filter .3s ease;
}

.vvt-combo-item-cart:hover {
    filter: brightness(1.08);
}

/* ============================ VÌ SAO CHỌN CHÚNG TÔI ============================ */
.vvt-why {
    position: relative;
    min-height: 360px;
    display: flex;
    align-items: center;
    background: url('../images/vvt/visao-bg.png') center/cover no-repeat;
    padding: 52px 0;
}

.vvt-why-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    gap: 28px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.vvt-why-title {
    width: 100%;
    margin: 0;
    font-family: var(--vvt-font);
    font-weight: 700;
    font-size: 32px;
    line-height: 48px;
    text-align: center;
    text-transform: capitalize;
    color: #FFFFFF;
}

.vvt-why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    width: 100%;
}

.vvt-why-item {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 13px 17px 12px;
    gap: 10px;
    min-height: 180px;
    background: rgba(240, 240, 240, 0.3);
    box-shadow: -27px 66px 29px rgba(145, 145, 145, 0.01), -15px 37px 24px rgba(145, 145, 145, 0.03), -7px 17px 18px rgba(145, 145, 145, 0.04), -2px 4px 10px rgba(145, 145, 145, 0.05);
    backdrop-filter: blur(12.5px);
    -webkit-backdrop-filter: blur(12.5px);
    border-radius: 20px;
    transition: transform .3s ease, background .3s ease;
}

.vvt-why-item:hover {
    transform: translateY(-6px);
    background: rgba(240, 240, 240, 0.42);
}

.vvt-why-icon {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 10px;
    gap: 10px;
    width: 55px;
    height: 55px;
    background: #FFFFFF;
    border-radius: 999px;
    transition: transform .45s ease;
}

/* Lắc mạnh khi hover thay vì lật icon */
.vvt-why-item:hover .vvt-why-icon {
    animation: vvt-why-shake .5s ease-in-out;
}

@keyframes vvt-why-shake {

    0%,
    100% {
        transform: rotate(0) scale(1);
    }

    15% {
        transform: rotate(-18deg) scale(1.08);
    }

    30% {
        transform: rotate(16deg) scale(1.08);
    }

    45% {
        transform: rotate(-14deg) scale(1.05);
    }

    60% {
        transform: rotate(10deg) scale(1.05);
    }

    75% {
        transform: rotate(-6deg) scale(1.02);
    }

    90% {
        transform: rotate(3deg) scale(1.02);
    }
}

.vvt-why-icon img {
    width: 35px;
    height: 35px;
    object-fit: contain;
}

.vvt-why-name {
    width: 100%;
    margin: 0;
    font-family: var(--vvt-font);
    font-weight: 700;
    font-size: 18px;
    line-height: 27px;
    text-align: center;
    color: #FFFFFF;
}

.vvt-why-desc {
    width: 100%;
    margin: 0;
    font-family: var(--vvt-font);
    font-weight: 500;
    font-size: 14px;
    line-height: 21px;
    text-align: center;
    color: #FFFFFF;
}

/* ============================ ĐĂNG KÝ ĐẠI LÝ & SỈ ============================ */
.vvt-reg {
    padding: 60px 0;
    background:
        linear-gradient(rgba(255, 255, 255, 0.89), rgba(255, 255, 255, 0.89)),
        url("../images/bg-dknt.png") center center / cover no-repeat;
}

.vvt-reg-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 44px 53px 43px 54px;
    gap: 10px;
    width: 100%;
    background: url('../images/vvt/dangky-bg.png') center/cover no-repeat;
    border-radius: 18px;
}

.vvt-reg-layout {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0;
    gap: 64px;
    width: 100%;
}

.vvt-reg-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    gap: 30px;
    flex: 1 1 468px;
    min-width: 0;
}

.vvt-reg-head {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0;
    gap: 14px;
    width: 100%;
}

.vvt-reg-bar {
    width: 7px;
    flex: 0 0 7px;
    align-self: stretch;
    min-height: 163px;
    background: #FFFFFF;
    border-radius: 999px;
}

.vvt-reg-headtext {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    gap: 8px;
    min-width: 0;
}

.vvt-reg-badge {
    margin: 0;
    font-family: var(--vvt-font);
    font-weight: 500;
    font-size: 18px;
    line-height: 27px;
    text-transform: uppercase;
    color: #FFFFFF;
}

.vvt-reg-title {
    margin: 0;
    /* Khớp đúng khung chữ Figma (474px) để luôn xuống đúng 2 dòng như thiết kế,
       không phụ thuộc độ rộng thật của flex container (có thể co giãn) */
    max-width: 474px;
    font-weight: 900;
    font-size: 40px;
    line-height: 160%;
    color: #FFFFFF;
}

.vvt-reg-contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    gap: 24px;
    width: 100%;
}

.vvt-reg-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0;
    gap: 16px;
    width: 100%;
}

.vvt-reg-ico {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px;
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: -13px 43px 18px rgba(0, 0, 0, 0.01), -7px 24px 15px rgba(0, 0, 0, 0.04), -3px 11px 11px rgba(0, 0, 0, 0.07), -1px 3px 6px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(7.5px);
    -webkit-backdrop-filter: blur(7.5px);
    border-radius: 8px;
    color: #FFFFFF;
}

.vvt-reg-txt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    min-width: 0;
}

.vvt-reg-txt span,
.vvt-reg-txt a {
    font-family: var(--vvt-font);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #FFFFFF;
    text-decoration: none;
}

.vvt-reg-txt a:hover {
    color: #FFFFFF;
    text-decoration: underline;
}

/* Form */
.vvt-reg-form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px 29px 23px;
    gap: 10px;
    width: 558px;
    flex: 0 0 558px;
    background: #FFFFFF;
    border-radius: 18px;
}

.vvt-reg-form-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    gap: 9px;
    width: 100%;
}

.vvt-reg-form-title {
    width: 100%;
    margin: 0;
    font-family: var(--vvt-font);
    font-weight: 700;
    font-size: 26px;
    line-height: 39px;
    text-align: center;
    background: var(--vvt-grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

.vvt-reg-fields {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    gap: 26px;
    width: 100%;
}

.vvt-reg-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    gap: 16px;
    width: 100%;
}

.vvt-reg-field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    gap: 4px;
    width: 100%;
}

.vvt-reg-row2 {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0;
    gap: 17px;
    width: 100%;
}

.vvt-reg-row2 .vvt-reg-field {
    flex: 1 1 0;
    min-width: 0;
}

.vvt-reg-label {
    font-family: 'Open Sans', var(--vvt-font);
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: #5F5F5F;
}

.vvt-reg-input {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 18px 16px;
    width: 100%;
    height: 52px;
    background: #F7F7F7;
    border: 1px solid #EAECF0;
    border-radius: 4px;
    font-family: 'Open Sans', var(--vvt-font);
    font-weight: 400;
    font-size: 14px;
    line-height: 19px;
    color: #101828;
    outline: 0;
    transition: border-color .3s ease, box-shadow .3s ease;
}

.vvt-reg-input::placeholder {
    color: rgba(16, 24, 40, 0.5);
}

.vvt-reg-input:focus {
    border-color: var(--vvt-blue-light);
    box-shadow: 0 0 0 3px rgba(48, 108, 230, .12);
}

textarea.vvt-reg-input {
    height: 119px;
    align-items: flex-start;
    resize: vertical;
}

.vvt-reg-submit {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 14px 22px;
    gap: 10px;
    width: 100%;
    height: 52px;
    background: var(--vvt-grad);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    font-family: var(--vvt-font);
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    text-transform: capitalize;
    color: #FFFFFF;
    cursor: pointer;
    transition: transform .3s ease, box-shadow .3s ease;
}

.vvt-reg-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(46, 67, 198, .3);
}

/* ============================ FOOTER ============================ */
.vvt-footer {
    position: relative;
    min-height: 531px;
    display: flex;
    align-items: center;
    padding: 60px 0 0;
    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.17), rgba(0, 0, 0, 0.17)), url('../images/vvt/footer-bg.png');
    background-size: cover;
    background-position: center;
}

.vvt-footer-layout {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    padding: 0;
    gap: 17px;
    width: 100%;
}

.vvt-footer-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 34px 24px 34px 25px;
    gap: 10px;
    width: 387px;
    flex: 0 0 387px;
    background: #FFFFFF;
    border-radius: 21px;
}

.vvt-footer-card-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    gap: 16px;
    width: 100%;
}

.vvt-footer-logo img {
    width: 111px;
    height: 62px;
    object-fit: contain;
    display: block;
}

.vvt-footer-slogan {
    width: 100%;
    margin: 0;
    font-family: var(--vvt-font);
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.03em;
    color: #000000;
}

.vvt-footer-contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    gap: 12px;
    width: 100%;
}

.vvt-footer-contact-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0;
    gap: 10px;
    width: 100%;
    font-family: var(--vvt-font);
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    color: #000000;
}

.vvt-footer-contact-row a {
    color: #000000;
    text-decoration: none;
}

.vvt-footer-contact-row a:hover {
    color: var(--vvt-blue);
}

.vvt-footer-contact-row svg {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    margin-top: 1px;
}

.vvt-footer-main {
    flex: 1 1 auto;
    min-width: 0;
    background: var(--vvt-grad);
    border-radius: 21px;
    padding: 40px 41px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
}

.vvt-footer-cols {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0;
    gap: 42px;
}

.vvt-footer-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    gap: 20px;
    min-width: 0;
}

.vvt-footer-col-title {
    margin: 0;
    font-family: var(--vvt-font);
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.03em;
    color: #FFFFFF;
}

.vvt-footer-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    gap: 12px;
    list-style: none;
    margin: 0;
}

.vvt-footer-links a {
    font-family: var(--vvt-font);
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    letter-spacing: -0.03em;
    color: #FFFFFF;
    text-decoration: none;
    transition: opacity .25s ease, padding-left .25s ease;
}

.vvt-footer-links a:hover {
    color: #FFFFFF;
    opacity: .8;
    padding-left: 4px;
}

.vvt-footer-map {
    width: 285px;
    flex: 0 0 285px;
}

.vvt-footer-map-frame {
    width: 100%;
    height: 116px;
    border-radius: 8px;
    overflow: hidden;
    background: #FFFFFF;
}

.vvt-footer-map-frame iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.vvt-footer-social {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}

.vvt-footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    transition: transform .3s ease, background .3s ease;
}

.vvt-footer-social a:hover {
    transform: translateY(-3px) rotate(8deg);
    background: rgba(255, 255, 255, .35);
}

.vvt-footer-social img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.vvt-footer-copy {
    margin-top: 24px;
    padding: 18px 0;
    text-align: center;
    font-family: var(--vvt-font);
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    color: #FFFFFF;
}

/* ============================ TRẠNG THÁI RỖNG ============================ */
.vvt-empty {
    width: 100%;
    padding: 48px 20px;
    text-align: center;
    font-family: var(--vvt-font);
    font-size: 16px;
    line-height: 24px;
    color: #747474;
}

/* ============================ RESPONSIVE ============================ */
/* --- Desktop nhỏ / tablet ngang: 1024px --- */
@media (max-width: 1024px) {
    .vvt-header-inner {
        gap: 20px;
    }
	.vvt-nav-list {
	    display: none;
	}
	
	.vvt-nav-toggle {
	    display: flex;
	}

    .vvt-search {
        width: 260px;
    }

    .vvt-header-actions {
        gap: 14px;
    }

    .vvt-nav-inner {
        gap: 18px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .vvt-nav-inner::-webkit-scrollbar {
        display: none;
    }

    .vvt-nav-item > a {
        font-size: 16px;
    }

    .vvt-hero,
    .vvt-hero-slide {
        min-height: 620px;
    }

    .vvt-hero-title {
        font-size: 44px;
    }

    .vvt-cat-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .vvt-bc-banner {
        width: 320px;
        flex: 0 0 320px;
        padding: 36px 20px 240px 22px;
        min-height: 600px;
    }

    .vvt-bc-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .vvt-combo-banner {
        width: 380px;
        flex: 0 0 380px;
        padding: 40px 30px 160px 30px;
    }

    .vvt-why-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .vvt-reg-form {
        width: 460px;
        flex: 0 0 460px;
    }

    .vvt-reg-layout {
        gap: 32px;
    }

    .vvt-reg-title {
        font-size: 32px;
    }

    .vvt-footer-card {
        width: 320px;
        flex: 0 0 320px;
    }

    .vvt-footer-cols {
        gap: 24px;
        flex-wrap: wrap;
    }

    .vvt-footer-map {
        width: 100%;
        flex: 1 1 100%;
    }
}

/* --- Tablet dọc: 768px --- */
@media (max-width: 991px) {
    .vvt-hero-inner {
        flex-direction: column;
        text-align: center;
        gap: 28px;
    }

    .vvt-hero-content {
        align-items: center;
        width: 100%;
    }

    .vvt-hero-text {
        align-items: center;
    }

    .vvt-hero-desc {
        width: 100%;
    }

    .vvt-banner-layout {
        flex-direction: column;
    }

    .vvt-banner-content,
    .vvt-banner-img {
        width: 100%;
        flex: 1 1 100%;
    }

    .vvt-bc-layout {
        flex-direction: column;
    }

    .vvt-bc-banner {
        width: 100%;
        flex: 1 1 100%;
        min-height: 420px;
        padding: 36px 24px 200px;
    }

    .vvt-bc-grid {
        width: 100%;
        grid-template-columns: repeat(3, 1fr);
    }

    .vvt-combo-layout {
        flex-direction: column;
        /* Xếp cột (không còn bleed ngang) — trả về lề đều 2 bên như các section khác */
        padding-right: 15px;
    }

    .vvt-combo-banner {
        width: 100%;
        flex: 1 1 100%;
        min-height: 360px;
        padding: 40px 30px 120px;
    }

    .vvt-combo-right {
        width: 100%;
        min-height: 0;
        padding: 28px 0;
        /* Không còn bleed sang phải khi đã xếp cột full-width — bo tròn đều 4 góc */
        border-radius: 18px;
    }

    .vvt-combo-list-wrap {
        padding: 0 12px;
    }

    .vvt-reg-layout {
        flex-direction: column;
        gap: 32px;
    }

    .vvt-reg-form {
        width: 100%;
        flex: 1 1 100%;
    }

    .vvt-reg-box {
        padding: 32px 24px;
    }

    .vvt-footer-layout {
        flex-direction: column;
    }

    .vvt-footer-card {
        width: 100%;
        flex: 1 1 100%;
    }
} */

/* --- Mobile: 767px --- */
@media (max-width: 768px) {
    .vvt-header {
        height: auto;
        padding: 12px 0;
    }

    .vvt-header-inner {
        height: auto;
        flex-wrap: wrap;
        gap: 12px;
    }

    .vvt-logo img {
        width: 88px;
        height: 49px;
    }

    .vvt-search {
        order: 3;
        width: 100%;
        flex: 1 1 100%;
        height: 44px;
        min-height: 44px;
    }

    .vvt-search-btn {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
    }

    .vvt-header-actions {
        gap: 10px;
    }

    .vvt-hotline-btn {
        padding: 10px 14px;
        font-size: 14px;
    }

    .vvt-nav {
        height: 56px;
    }

    .vvt-nav-inner {
        height: 56px;
        justify-content: space-between;
        gap: 0;
        overflow: visible;
    }

    /* Menu desktop ẩn, dùng menu mobile */
    .vvt-nav-list {
        display: none;
    }

    .vvt-nav-toggle {
        display: flex;
    }

    .vvt-hero,
    .vvt-hero-slide {
        min-height: 480px;
    }

    /* Căn giữa khối nội dung Hero theo chiều dọc trong khoảng không gian phía trên ảnh */
    .vvt-hero-inner {
        min-height: 480px;
    }

    .vvt-hero-content {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .vvt-hero-title {
        font-size: 30px;
    }

    .vvt-hero-desc {
        font-size: 15px;
        line-height: 24px;
    }

    .vvt-hero-btn {
        height: 52px;
        padding: 12px 20px;
        font-size: 16px;
        line-height: 24px;
    }

    .vvt-sec-title,
    .vvt-bc-title,
    .vvt-combo-list-title,
    .vvt-why-title {
        font-size: 22px;
        line-height: 32px;
    }

    .vvt-flash-box {
        padding: 56px 12px 16px;
        margin-top: 72px;
        border-radius: 14px;
    }

    /* Thu nhỏ nguyên khối ruy băng (ảnh + lớp che + text %) theo đúng tỉ lệ gốc
       475x172, neo tại đúng góc trên-trái đã tính từ Figma — không tính lại % riêng lẻ. */
    .vvt-flash-ribbon {
        top: -70px;
        left: 2px;
        width: 320px;
        height: 116px;
    }

    .vvt-flash-ribbon-percent {
        font-size: 34px;
    }

    .vvt-cat-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .vvt-cat-item {
        height: 96px;
    }

    .vvt-cat-name {
        font-size: 13px;
        line-height: 18px;
    }

    .vvt-bc-banner {
        min-height: 340px;
        padding: 28px 18px 150px;
    }

    .vvt-bc-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .vvt-banner-title {
        font-size: 28px;
    }

    .vvt-combo-title {
        font-size: 26px;
        line-height: 38px;
    }

    .vvt-combo-sub {
        font-size: 18px;
        line-height: 26px;
    }

    /* Thu nhỏ item Combo cho vừa màn hình nhỏ — KHÔNG đụng tới kích thước nút
       "Mua ngay"/giỏ hàng ở mốc ≥1200px (chỉ khai báo riêng trong block ≤768px này). */
    .vvt-combo-item {
        width: 260px;
        height: 300px;
    }

    .vvt-combo-item-link {
        padding: 24px 16px 0;
    }

    .vvt-combo-item-name {
        font-size: 20px;
        line-height: 30px;
    }

    .vvt-combo-item-price {
        font-size: 14px;
        line-height: 21px;
    }

    .vvt-combo-item-actions {
        padding: 0 14px 18px;
        gap: 6px;
    }

    .vvt-combo-item-buy {
        height: 34px;
        font-size: 12px;
    }

    .vvt-combo-item-cart {
        flex: 0 0 34px;
        width: 34px;
        height: 34px;
    }

    .vvt-combo-item-cart svg {
        width: 14px;
        height: 14px;
    }

    /* Lưới 4 tiêu chí "Vì sao chọn chúng tôi": 2 cột × 2 hàng (thay vì 1 cột dồn 4 hàng),
       thu nhỏ mọi thứ bên trong mỗi item cho vừa khung hẹp hơn. */
    .vvt-why-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .vvt-why-item {
        min-height: 140px;
        padding: 10px 10px 10px;
        gap: 6px;
        border-radius: 14px;
    }

    .vvt-why-icon {
        width: 40px;
        height: 40px;
        padding: 7px;
    }

    .vvt-why-icon img {
        width: 26px;
        height: 26px;
    }

    .vvt-why-name {
        font-size: 14px;
        line-height: 20px;
    }

    .vvt-why-desc {
        font-size: 12px;
        line-height: 17px;
    }

    .vvt-reg-title {
        font-size: 24px;
    }

    .vvt-reg-row2 {
        flex-direction: column;
        gap: 16px;
    }

    .vvt-reg-form {
        padding: 20px 16px;
    }

    .vvt-reg-box {
        padding: 24px 16px;
        border-radius: 14px;
    }

    .vvt-reg-bar {
        min-height: 0;
    }

    .vvt-footer-main {
        padding: 28px 20px;
    }

    .vvt-footer-cols {
        flex-direction: column;
        gap: 24px;
    }

    .vvt-footer-card {
        padding: 24px 18px;
    }
} */

/* Tôn trọng người dùng tắt hiệu ứng chuyển động */

/* ===== Menu mobile: danh mục con ===== */
.mmenu-ul li {
    position: relative;
}

.mmenu-sub-toggle {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    transition: transform .3s ease;
}

.mmenu-ul li.is-open > .mmenu-sub-toggle {
    transform: rotate(180deg);
}

.mmenu-sub {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0 0 6px 16px;
}

.mmenu-ul li.is-open > .mmenu-sub {
    display: block;
}

.mmenu-sub a {
    display: block;
    padding: 7px 0;
    font-family: var(--vvt-font);
    font-size: 14px;
    line-height: 21px;
    opacity: .85;
    text-decoration: none;
    color: #FFFFFF;
}

.mmenu-sub a:hover {
    opacity: 1;
}

/* ===== Breadcrumbs: KHÔNG để thanh menu đè lên ở mọi trang trong =====
   - .vvt-nav sticky vẫn chiếm chỗ trong luồng nên không đè;
   - riêng chế độ "fixed" thì <body> đã được bù padding-top đúng bằng chiều cao menu (82px);
   - scroll-margin-top giúp khi nhảy tới #anchor không bị menu che phần đầu. */
.breadCrumbs {
    position: relative;
    z-index: 1;
    padding: 14px 0;
    background: #F4F6FB;
    font-family: var(--vvt-font);
    font-size: 14px;
    line-height: 21px;
}

.breadCrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.breadCrumbs ol li a {
    color: #3C4142;
    text-decoration: none;
}

.breadCrumbs ol li a:hover {
    color: var(--vvt-blue);
}

body.nav-menu-fixed .breadCrumbs {
    margin-top: 0;
}

/* Mọi mốc nhảy tới đều chừa đúng chiều cao thanh menu dính */
[id],
:target {
    scroll-margin-top: 96px;
}

@media (max-width: 767px) {
    [id],
    :target {
        scroll-margin-top: 70px;
    }

    body.nav-menu-fixed {
        padding-top: 56px;
    }
}
.vvt-why-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    animation: vvt-shake 1.2s ease-in-out infinite;
}

@keyframes vvt-shake {
    0%, 70%, 100% {
        transform: rotate(0deg);
    }

    75% {
        transform: rotate(-18deg);
    }

    80% {
        transform: rotate(18deg);
    }

    85% {
        transform: rotate(-15deg);
    }

    90% {
        transform: rotate(15deg);
    }

    95% {
        transform: rotate(-8deg);
    }
}
/* =========================================
   GLOW EFFECT - BANNER
   ========================================= */

.vvt-bc-banner,
.vvt-banner-img {
    position: relative;
    overflow: hidden;
}


/* =========================================
   VỆT SÁNG CHẠY QUA BANNER
   ========================================= */

.vvt-bc-banner::after,
.vvt-banner-img::after {
    content: "";
    position: absolute;
    top: -20%;
    left: -80%;

    width: 35%;
    height: 140%;

    background: linear-gradient(
        100deg,
        transparent 0%,
        rgba(255, 255, 255, 0.05) 25%,
        rgba(255, 255, 255, 0.75) 50%,
        rgba(255, 255, 255, 0.05) 75%,
        transparent 100%
    );

    transform: skewX(-20deg);

    pointer-events: none;
    z-index: 5;

    animation: vvt-light-sweep 4s ease-in-out infinite;
}


@keyframes vvt-light-sweep {

    0% {
        left: -80%;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    45% {
        left: 120%;
        opacity: 1;
    }

    50%,
    100% {
        left: 120%;
        opacity: 0;
    }
}
.vvt-bc-title {
    position: relative;
    z-index: 6;

    text-shadow:
        0 0 5px rgba(255, 255, 255, 0.35),
        0 0 12px rgba(255, 255, 255, 0.25);

    animation: vvt-title-glow 2.5s ease-in-out infinite;
}


@keyframes vvt-title-glow {
    0%,
    100% {
        text-shadow:
            0 0 5px rgba(255, 255, 255, 0.25),
            0 0 10px rgba(255, 255, 255, 0.15);
    }

    50% {
        text-shadow:
            0 0 8px rgba(255, 255, 255, 0.7),
            0 0 20px rgba(255, 255, 255, 0.45),
            0 0 32px rgba(255, 255, 255, 0.2);
    }
}
.vvt-bc-btn {
    position: relative;
    z-index: 6;

    box-shadow:
        0 0 8px rgba(255, 255, 255, 0.25),
        0 0 18px rgba(255, 255, 255, 0.12);

    animation: vvt-btn-glow 2s ease-in-out infinite;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.vvt-bc-btn:hover {
    transform: translateY(-2px);

    box-shadow:
        0 0 10px rgba(255, 255, 255, 0.8),
        0 0 25px rgba(255, 255, 255, 0.55),
        0 0 45px rgba(255, 255, 255, 0.25);
}


@keyframes vvt-btn-glow {
    0%,
    100% {
        box-shadow:
            0 0 6px rgba(255, 255, 255, 0.2),
            0 0 14px rgba(255, 255, 255, 0.1);
    }

    50% {
        box-shadow:
            0 0 10px rgba(255, 255, 255, 0.55),
            0 0 24px rgba(255, 255, 255, 0.3);
    }
}
.vvt-banner-img {
    box-shadow:
        0 0 15px rgba(255, 255, 255, 0.08);
}
/* ================================
   HIỆU ỨNG PHÁT QUANG CHO BUTTON
   ================================ */

.vvt-prd-buy,
.vvt-prd-cart,
.vvt-btn,
.vvt-reg-submit,
.vvt-hotline-btn,
.vvt-cart-btn,
.cart-pro-detail .addnow,
.cart-pro-detail .buynow {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        filter 0.25s ease;

    box-shadow:
        0 0 6px rgba(255, 255, 255, 0.18),
        0 0 14px rgba(255, 255, 255, 0.10);

    animation: vvt-button-glow 2.5s ease-in-out infinite;
}


/* Vệt sáng chạy qua nút */
.vvt-prd-buy::after,
.vvt-prd-cart::after,
.vvt-btn::after,
.vvt-reg-submit::after,
.vvt-hotline-btn::after,
.vvt-cart-btn::after,
.cart-pro-detail .addnow::after,
.cart-pro-detail .buynow::after {
    content: "";

    position: absolute;
    top: -50%;
    left: -80%;

    width: 35%;
    height: 200%;

    background: linear-gradient(
        100deg,
        transparent 0%,
        rgba(255, 255, 255, 0.05) 25%,
        rgba(255, 255, 255, 0.8) 50%,
        rgba(255, 255, 255, 0.05) 75%,
        transparent 100%
    );

    transform: skewX(-20deg);

    pointer-events: none;
    z-index: 2;

    animation: vvt-button-sweep 3.5s ease-in-out infinite;
}


/* Glow */
@keyframes vvt-button-glow {
    0%,
    100% {
        box-shadow:
            0 0 6px rgba(255, 255, 255, 0.15),
            0 0 14px rgba(255, 255, 255, 0.08);
    }

    50% {
        box-shadow:
            0 0 9px rgba(255, 255, 255, 0.35),
            0 0 22px rgba(255, 255, 255, 0.18);
    }
}


/* Vệt sáng chạy */
@keyframes vvt-button-sweep {
    0% {
        left: -80%;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    40% {
        left: 120%;
        opacity: 1;
    }

    45%,
    100% {
        left: 120%;
        opacity: 0;
    }
}


/* Hover */
.vvt-prd-buy:hover,
.vvt-prd-cart:hover,
.vvt-btn:hover,
.vvt-reg-submit:hover,
.vvt-hotline-btn:hover,
.vvt-cart-btn:hover,
.cart-pro-detail .addnow:hover,
.cart-pro-detail .buynow:hover {
    transform: translateY(-2px);

    filter: brightness(1.08);

    box-shadow:
        0 0 10px rgba(255, 255, 255, 0.65),
        0 0 24px rgba(255, 255, 255, 0.35),
        0 0 45px rgba(255, 255, 255, 0.15);
}


/* Giữ icon giỏ hàng nằm trên vệt sáng */
.vvt-prd-cart svg,
.vvt-cart-btn svg {
    position: relative;
    z-index: 3;
}
.vvt-banner-layout {
    background:
        radial-gradient(
            120% 120% at 95% 10%,
            #e6f5ff 0%,
            transparent 50%
        ),
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f1f7fc 100%
        );

    box-shadow: 0 24px 60px -28px rgba(26, 26, 26, 0.26);

    border-radius: 22px;
    overflow: visible;
}
.vvt-banner-content {
	padding:52px;
}

.vvt-banner-img {
    position: relative;
    z-index: 1;
	padding: 46px;
}

/* Hào quang xanh phía sau ảnh */
.vvt-banner-img::before {
    content: "";
    position: absolute;
    z-index: -1;

    width: clamp(190px, 30vw, 420px);
    height: clamp(190px, 30vw, 420px);

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    border-radius: 42% 58% 57% 43% / 48% 42% 58% 52%;

    background: linear-gradient(
        135deg,
        rgba(0, 200, 255, 0.28),
        rgba(0, 120, 255, 0.20)
    );

    filter: blur(25px);

    pointer-events: none;

    animation: vvtBlob 12s ease-in-out infinite;
}

/* Chuyển động nhẹ giống Lucas */
@keyframes vvtBlob {
    0%,
    100% {
        border-radius: 42% 58% 57% 43% / 48% 42% 58% 52%;
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        border-radius: 58% 42% 43% 57% / 42% 58% 42% 58%;
        transform: translate(-50%, -50%) scale(1.08);
    }
}
body, html {
    overflow-x: clip;
}

@media (max-width: 1024px) {
    .vvt-bc-slider-wrap {
        max-height: 800px;
        overflow: hidden;
    }

    .vvt-bc-swiper {
        max-height: 800px;
        overflow: auto;
    }

    .vvt-bc-layout {
        flex-direction: column;
    }
}
@media (max-width: 1024px) {
    /* ... CSS hiện tại ... */

    /* THÊM CÁI NÀY: */
    .vvt-bc-layout {
        flex-direction: column;
        gap: 12px;
    }

    .vvt-bc-slider-wrap {
        width: 100%;
        overflow: hidden;
        max-height: 900px;
    }

    .vvt-bc-swiper {
        width: 100%;
        height: auto;
    }
}
.vvt-bc-slider-wrap {
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}
@media (max-width: 600px) {
    .vvt-bc-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}
@media (max-width: 768px){
	.vvt-header {
	    display: none;
	}	
}
.mmenu-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mmenu-cart {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
}

@media (min-width: 1024px){.hh-device-mobile{display:none!important}}
@media (max-width: 1023px){.hh-device-desktop{display:none!important}}
/* =========================================================================
   HOÀNG PHÁT — GIAO DIỆN THEO THIẾT KẾ FIGMA (prefix .hp-)
   Giá trị màu/px/font copy đúng từ file thiết kế, không làm tròn.
   ========================================================================= */

/* ---------- Header ---------- */
.hp-topline{height:19px;background:#232935}

.hp-header{position:relative;z-index:100;background:#FFFFFF}
.hp-header.nav-menu-sticky{position:sticky;top:0}
.hp-header.nav-menu-fixed{position:fixed;top:19px;left:0;right:0}
.hp-header.nav-menu-hidden .hp-nav{display:none}
body.nav-menu-fixed{padding-top:175px}

/* Bỏ overflow:hidden — trước đây vô tình cắt mất dropdown chọn ngôn ngữ (.nav-lang-dropdown, xổ ra
   từ trong .hp-header-right) mỗi khi bấm mở, ẩn hẳn không thấy được. Khối ::before (mảng tối vát
   chéo) không cần overflow:hidden để giữ đúng khung — clip-path + width/height cố định trùng khớp
   chiều cao 82px của chính .hp-header-top đã tự giới hạn hình dạng rồi, không tràn ra ngoài. */
/* Đã REDO lại về đúng chiều cao gốc 82px (trước khi tăng lên 110px cho logo 116×95) — logo VẪN
   giữ nguyên kích thước to 116×95 (95px > 82px chiều cao thanh), nên giờ logo cố ý TRÀN ra ngoài
   khung .hp-header-top/.hp-header-inner một chút ở trên/dưới (không bị cắt vì không có
   overflow:hidden, xem ghi chú phía trên) — cùng kiểu logo-to-hơn-menu đã áp dụng sẵn ở tablet
   (.hp-logo-img 93×76 trong khung .hp-header-inner chỉ cao 60px, xem media.css). */
.hp-header-top{position:relative;height:82px;background:#FFFFFF;display:flex;align-items:center}
/* width dùng min(994.41px, calc(100vw - 605.59px)) — GIỮ ĐÚNG 994.41px ở màn hình ≥1600px (khớp
   thiết kế gốc), dưới 1600px thì width tự giảm tuyến tính theo viewport (605.59 = 1600 - 994.41,
   nên đúng 1600px là điểm bắt đầu giảm) — đảm bảo cạnh trái khối tối luôn CÁCH viewport đúng
   605.59px, không bao giờ lấn qua vùng logo+ô tìm kiếm (.hp-header-left, rộng cố định ~570px kể cả
   lề) dù màn hình có hẹp cỡ nào (cho tới khi <=1024px, nơi rule riêng bên dưới đổi hẳn sang nền
   trắng/kích thước khác cho tablet, không cần công thức này nữa). */
.hp-header-top::before{content:"";position:absolute;top:0;right:0;width:min(994.41px, calc(100vw - 605.59px));height:82px;background:#232935;clip-path:polygon(0 0,34.9091px 100%,100% 100%,100% 0)}
/* Full-bleed: trước đây width:1366px cố định + max-width:calc(100% - 40px) chỉ co lại ở màn hình
   hẹp, nên màn hình rộng hơn 1406px bị đóng khung ở đúng 1366px, dư khoảng trống 2 bên. Bỏ mốc
   1366px, luôn lấy đúng công thức calc(100% - 40px) ở MỌI độ rộng (giữ nguyên biên 20px/bên). */
.hp-header-inner{position:relative;z-index:2;width:calc(100% - 40px);height:67px;margin:0 auto;display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:142px}
/* Nhóm logo + tìm kiếm lại gần nhau (khoảng cách nhỏ), tách biệt với justify-content:space-between
   của .hp-header-inner (khoảng đó vẫn áp dụng giữa CẢ NHÓM này với .hp-header-right bên phải) */
.hp-header-left{display:flex;flex-direction:row;align-items:center;gap:24px}

.hp-logo{display:flex;flex-direction:row;align-items:center;flex:0 0 auto;text-decoration:none}
.hp-logo-img{width:116px;height:95px;object-fit:contain;display:block}

.hp-search{position:relative;flex:0 0 auto}
/* Tăng từ 352×47 lên 410×55 (to hơn theo yêu cầu, cùng hướng với logo) */
.hp-search-box{box-sizing:border-box;display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:0 0 0 16px;gap:8px;width:352px;height:47px;min-height:47px;background:#FFFFFF;border:1px solid #E0E0E0;border-radius:8px;overflow:hidden}
.hp-search-box input{flex:1 1 auto;min-width:0;height:45px;border:0;outline:0;background:transparent;font-family:'Fz Poppins','Be Vietnam Pro',sans-serif;font-weight:400;font-size:16px;line-height:24px;color:#1A1A1A}
.hp-search-box input::placeholder{color:#747474}
.hp-search-btn{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:10px;width:47px;height:47px;flex:0 0 47px;background:#232935;border:0;border-radius:0 8px 8px 0;cursor:pointer;transition:background .3s}
.hp-search-btn:hover{background:#0F1319}
.hp-search .show-search{position:absolute;top:52px;left:0;width:352px;background:#FFFFFF;border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,.12);overflow:hidden;z-index:20}
.hp-search .show-search:empty{display:none}
.hp-search-toggle{display:none;width:47px;height:47px;align-items:center;justify-content:center;background:transparent;border:0;color:#232935;cursor:pointer}
.hp-search--icon-mode .hp-search-box{max-width:0;padding-left:0;border-width:0;transition:max-width .35s ease,padding .35s ease}
.hp-search--icon-mode.is-open .hp-search-box{max-width:352px;padding-left:16px;border-width:1px}
.hp-search--icon-mode .hp-search-toggle{display:flex}

.hp-header-right{display:flex;flex-direction:row;align-items:center;gap:28px;height:46px;flex:0 0 auto}
.hp-hcontact{display:flex;flex-direction:row;align-items:center;gap:10px;text-decoration:none}
.hp-hcircle{display:flex;align-items:center;justify-content:center;width:44px;height:44px;flex:0 0 44px}
.hp-hcircle svg{display:block;width:44px;height:44px}
.hp-hinfo{display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.hp-hlabel{font-family:'Inter',sans-serif;font-weight:600;font-size:12px;line-height:15px;color:#FFFFFF}
.hp-hvalue{font-family:'Inter',sans-serif;font-weight:400;font-size:12px;line-height:15px;color:#FFFFFF}
.hp-hcontact:hover .hp-hvalue{text-decoration:underline}
.hp-hline{width:0;height:46px;flex:0 0 1px;border-left:1px solid rgba(255,255,255,.35)}

.hp-lang{display:flex;flex-direction:row;align-items:center;padding:10.3631px;gap:16px;height:38px;border-radius:10.3631px;margin-left:6px}
.hp-lang-item{display:flex;align-items:center;justify-content:center;width:23px;height:17px;border-radius:2px;overflow:hidden;opacity:.65;transition:opacity .3s,transform .3s}
.hp-lang-item:hover,.hp-lang-item.is-active{opacity:1;transform:scale(1.08)}
.hp-lang-item .lang-flag{display:block;width:23px;height:17px;line-height:0}
.hp-lang-item .lang-flag svg{display:block;width:23px;height:17px}
.hp-lang-item .nav-flag-badge{display:flex;align-items:center;justify-content:center;width:23px;height:17px;font-family:'Inter',sans-serif;font-size:9px;font-weight:700;color:#FFFFFF;background:rgba(255,255,255,.2);border-radius:2px}
.hp-lang-sep{width:0;height:21px;border-left:.5px solid #FFFFFF;opacity:.6}

.hp-menu-btn{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:0 10px;background:transparent;border:0;cursor:pointer}
/* Đổi từ #FFFFFF sang màu tối — nút nằm trong .hp-header-top nền TRẮNG (không phải nền tối như
   thiết kế gốc giả định), 3 gạch trắng trên nền trắng gần như vô hình. */
.hp-menu-btn span{display:block;height:2px;background:#232935;border-radius:2px}

/* ---------- Menu chính ---------- */
/* Full-bleed: bỏ hẳn mốc padding lớn 277px/360px chỉ áp dụng riêng >1500px trước đây (khiến màn
   hình desktop/laptop phổ biến 1536-2560px vẫn thấy viền trắng rất dày 2 bên dù đã bỏ cap width ở
   -inner) — dùng ĐÚNG 1 mức đệm nhỏ (40px) cho MỌI độ rộng ≥1025px, chỉ còn thu nhỏ tiếp ở tablet/
   mobile (xem media.css). */
.hp-nav{background:#F4F4F4;height:74px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding:0 40px;gap:10px}
/* Full-bleed: .hp-nav đã có padding 2 bên riêng (277px/40px tuỳ breakpoint) làm biên rồi, nên
   -inner chỉ cần lấp đầy 100% phần còn lại thay vì đóng khung cứng ở 1366px. */
.hp-nav-inner{width:100%;height:44px;display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;gap:13px}
.hp-nav-item{position:relative;height:44px;flex:0 0 auto}
.hp-nav-item>a,a.hp-nav-item{display:block;font-family:'Inter',sans-serif;font-weight:500;font-size:16px;line-height:19px;text-transform:uppercase;color:#232935;text-decoration:none;white-space:nowrap;transition:color .3s}
.hp-nav-item:hover>a,a.hp-nav-item:hover{color:#0d6efd}
.hp-nav-item.active>a,a.hp-nav-item.active{font-weight:700;color:#0d6efd}
.hp-nav-item.active::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:#232935}
.hp-nav-item:hover::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:#232935;opacity:.45}

.hp-nav-sub{position:absolute;top:100%;left:0;min-width:260px;margin:0;padding:8px 0;list-style:none;background:#FFFFFF;border-radius:0 0 8px 8px;box-shadow:0 4px 16px rgba(0,0,0,.12);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .3s,transform .3s,visibility .3s;z-index:30}
.hp-nav-has-sub:hover .hp-nav-sub{opacity:1;visibility:visible;transform:translateY(0)}
.hp-nav-sub li{margin:0}
.hp-nav-sub a{display:block;padding:9px 18px;font-family:'Inter',sans-serif;font-weight:400;font-size:14px;line-height:20px;color:#232935;text-decoration:none;transition:background .3s,color .3s,padding-left .3s}
.hp-nav-sub a:hover{background:#F4F4F4;color:#000000;padding-left:24px}

/* ---------- 3. Danh mục nổi bật ---------- */
.hp-cat-featured{background:#F5F5F5}
/* 3 ô chia đều (flex:1 1 0) chiếm trọn full-width màn hình — trước đây cố định 455.67px/ô + 2 mảng
   nền tối (.hp-cat-side) lấp phần dư 2 bên theo đúng thiết kế Figma gốc (canvas 1366px). Bỏ hẳn
   width/height cố định, dùng aspect-ratio để giữ tỉ lệ khi bề ngang co giãn theo màn hình (xem
   kích thước khuyến nghị mới ở config/type-products.php categories.list.images.photo). */
.hp-cat-row{display:flex;flex-direction:row;align-items:stretch}
.hp-cat-tile{position:relative;display:block;flex:1 1 0;width:auto;aspect-ratio:800/843;overflow:hidden;text-decoration:none}
.hp-cat-tile-img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.hp-cat-tile:hover .hp-cat-tile-img{transform:scale(1.06)}
.hp-cat-tile-band{position:absolute;left:0;right:0;bottom:0;height:134.73px;background:rgba(0,0,0,.55);display:flex;flex-direction:row;align-items:flex-end;padding:0 21.2px 32.5px;overflow:hidden}
/* Rộng theo hết phần đệm của băng thay vì chốt cứng 220px (thiết kế Figma chỉ auto-size theo
   đúng chữ mẫu ngắn, không phải giới hạn cứng) — và chốt CHIỀU CAO đúng 2 dòng (68px = 34px×2)
   kèm line-clamp: tên danh mục dài tuỳ ý (nhập từ dashboard) không bao giờ tràn ra khỏi băng tối. */
.hp-cat-tile-name{display:-webkit-box;width:100%;max-width:100%;height:68px;font-family:'Fz Poppins','Be Vietnam Pro',sans-serif;font-weight:700;font-size:22.9837px;line-height:34px;text-transform:uppercase;color:#FFFFFF;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* ---------- 4-6. Lưới danh mục cấp 2 ---------- */
.hp-prd-section{padding:60px 40px;background:#FFFFFF}
.hp-prd-section--grey{background:#F5F5F5}
/* Full-bleed: .hp-prd-section đã có padding 2 bên riêng (277px/40px tuỳ breakpoint), -inner chỉ
   cần lấp đầy 100% phần còn lại thay vì đóng khung cứng ở 1367px. */
.hp-section-inner{width:100%;margin:0 auto;display:flex;flex-direction:column;align-items:flex-start;gap:30px}
.hp-section-header{position:relative;display:flex;flex-direction:column;align-items:center;padding:0;gap:12px;width:100%}
.hp-section-title{width:100%;margin:0;font-family:'Fz Poppins','Be Vietnam Pro',sans-serif;font-weight:600;font-size:32px;line-height:48px;text-align:center;text-transform:uppercase;color:#1A1A1A}
/* Tiêu đề danh mục cấp 1 (mục 4-6 trang chủ) bấm vào vào thẳng trang danh mục cấp 1 đó — link kế
   thừa màu/font của tiêu đề thay vì màu xanh gạch chân mặc định của thẻ <a> */
.hp-section-title a{color:inherit;text-decoration:none;transition:color .3s ease}
.hp-section-title a:hover{color:var(--color-main-solid)}
/* "Xem thêm" của danh mục cấp 1 — đặt tuyệt đối bên phải để không phá vỡ tiêu đề đang canh giữa đúng thiết kế */
.hp-section-more{position:absolute;right:0;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;gap:6px;font-family:'Inter',sans-serif;font-weight:600;font-size:14px;line-height:20px;color:var(--color-main-solid);text-decoration:none;white-space:nowrap;transition:gap .3s ease,color .3s ease}
.hp-section-more:hover{gap:10px;color:var(--color-secondary)}

.hp-grid-wrap{position:relative;width:100%}
.hp-grid-viewport{overflow:hidden;width:100%}
/* Swiper thật cho lưới danh mục cấp 2 (data-hp-grid-swiper, xem initGrid trong apps.js) —
   grid module tự chia 2 hàng, mỗi slide là 1 danh mục, slidesPerView đổi theo breakpoint JS
   (5/3/2 cột, khớp đúng 5/3/2 cột của grid-template-columns cũ). */
.hp-grid-slide{height:auto;display:flex}
.hp-grid-nav.swiper-button-disabled{opacity:.45;cursor:not-allowed;pointer-events:none}

.hp-card{display:flex;flex-direction:column;align-items:center;padding:0;width:100%;min-width:0;background:#FFFFFF;border-radius:8px;text-decoration:none;transition:transform .3s ease,box-shadow .3s ease}
.hp-card--boxed{padding:13.5px 0}
.hp-card:hover{transform:translateY(-4px);box-shadow:0 4px 16px rgba(0,0,0,.12)}
.hp-card-top{display:flex;flex-direction:column;align-items:center;padding:0;gap:16px;width:100%}
.hp-card-pic{display:flex;align-items:center;justify-content:center;width:194px;height:194px;max-width:100%;overflow:hidden}
.hp-card-img{width:194px;height:194px;max-width:100%;object-fit:contain;display:block;transition:transform .3s ease}
.hp-card:hover .hp-card-img{transform:scale(1.05)}
.hp-card-content{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:0 16px;gap:8px;width:100%}
.hp-card-name{margin:0;width:100%;font-family:'Archivo',sans-serif;font-weight:700;font-size:18px;line-height:20px;text-align:center;color:#1A1A1A;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .3s}
.hp-card:hover .hp-card-name{color:#232935}
.hp-card-more{display:inline-flex;align-items:center;gap:6px;font-family:'Inter',sans-serif;font-weight:600;font-size:13px;line-height:18px;color:#015BDF;transition:gap .3s ease}
.hp-card:hover .hp-card-more{gap:10px}

.hp-grid-nav{position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:#FFFFFF;border:1px solid #E0E0E0;border-radius:9999px;color:#232935;cursor:pointer;z-index:3;transition:background .3s,color .3s,box-shadow .3s}
.hp-grid-nav:hover{background:#232935;color:#FFFFFF;box-shadow:0 4px 16px rgba(0,0,0,.12)}
.hp-grid-prev{left:-20px}
.hp-grid-next{right:-20px}

/* ---------- 7. Dịch vụ chuyên nghiệp ---------- */
.hp-service-section{position:relative;padding:20px 20px;background:#F5F5F5}
/* Overlay phủ toàn bộ mục 7 (nền + khoảng trống + tiêu đề), dẫn sang bài static "Giới thiệu dịch
   vụ" — z-index thấp hơn .hp-service-item/.hp-grid-nav nên bấm đúng vào 1 ô dịch vụ hoặc nút mũi
   tên vẫn ăn link/hành vi riêng của chúng (đè lên trên), còn lại mọi chỗ khác trong mục rơi vào
   overlay này. */
.hp-service-section-link{position:absolute;inset:0;z-index:1}
/* 6 mục cố định (dữ liệu cứng, không còn danh sách động nên không cần slider/mũi tên nữa) —
   lưới đơn giản luôn đúng 6 cột ở desktop, thu gọn cột ở tablet/mobile (xem media.css). */
/* Căn giữa cả hàng thay vì kéo giãn 6 ô full-width (grid 1fr trước đây làm ô to bất thường trên
   màn hình rộng) — mỗi ô giữ đúng kích thước cố định nhỏ (64×52, đã giảm 1 nửa so với 128×104 gốc),
   flex-wrap để tự xuống hàng ở màn hình hẹp thay vì cần khai báo lại số cột theo breakpoint. */
/* width:100% BẮT BUỘC — .hp-section-inner là flex-column với align-items:flex-start, nếu thiếu
   width:100% thì .hp-service-list chỉ rộng vừa đúng nội dung (6 ô ~444px) rồi bị đẩy sát lề trái
   thay vì lấp đầy chiều rộng section, khiến justify-content:center bên trong vô nghĩa (căn giữa
   trong 1 khung đã tự thu hẹp bằng đúng nội dung thì trông vẫn như lệch trái). */
/* Desktop: giãn đều cả hàng 6 ô ra hết chiều rộng section (space-between) thay vì gom cụm giữa
   (center trước đây) — riêng ≤1024px chuyển hẳn sang lưới 3 cột/hàng cố định (xem media.css), lúc
   đó justify-content không còn tác dụng nhiều vì flex-basis đã ép đúng 3/hàng rồi. */
/* Quay lại center (không dùng space-between nữa) — giãn cách bằng cách TĂNG gap thay vì kéo dàn
   đều ra sát 2 mép section. */
.hp-service-list{width:100%;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:48px}
.hp-service-item{position:relative;z-index:2;box-sizing:border-box;display:flex;flex:0 0 auto;width:64px;aspect-ratio:128/104;flex-direction:row;justify-content:center;align-items:center;padding:13px 6px 14px;gap:5px;background:#FFFFFF;border:1px solid #000000;border-radius:8px;text-decoration:none;transition:transform .3s ease,box-shadow .3s ease}
.hp-service-item:hover{transform:scale(1.06);box-shadow:0 4px 16px rgba(0,0,0,.12)}
.hp-service-inner{display:flex;flex-direction:column;align-items:center;padding:0;gap:4px}
.hp-service-ico{display:block;width:17px;height:17px}
.hp-service-ico img{display:block;width:17px;height:17px;object-fit:contain}
.hp-service-name{font-family:'Inter',sans-serif;font-weight:600;font-size:12px;line-height:150%;color:#1A1A1A;white-space:nowrap}

/* ---------- 8. Khách hàng & đối tác ---------- */
.hp-partner-section{padding:64px 40px;background:#FFFFFF}
/* Full-bleed: .hp-partner-section đã có padding 2 bên riêng (360px/40px tuỳ breakpoint), -inner
   chỉ cần lấp đầy 100% phần còn lại thay vì đóng khung cứng ở 1201px. */
.hp-partner-inner{width:100%;margin:0 auto;display:flex;flex-direction:column;align-items:flex-start;padding:0;gap:40px}
.hp-partner-title{width:100%;margin:0;font-family:'Fz Poppins','Be Vietnam Pro',sans-serif;font-weight:700;font-size:20px;line-height:30px;text-align:center;text-transform:uppercase;color:#666666}
/* Luôn 1 hàng ngang, không bao giờ wrap ở bất kỳ responsive nào — chạy slide vòng lặp vô hạn liên tục */
.hp-logo-strip{width:100%;overflow:hidden}
.hp-logo-track{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:64px;width:max-content;animation:hp-marquee 32s linear infinite}
.hp-logo-strip:hover .hp-logo-track{animation-play-state:paused}
.hp-logo-item{display:flex;align-items:center;justify-content:center;height:35.04px;flex:0 0 auto;text-decoration:none}
.hp-logo-item img,.hp-logo-item picture{display:block;width:auto;max-width:170px;max-height:35.04px;height:auto;object-fit:contain;transition:transform .3s ease}
.hp-logo-item:hover img{transform:scale(1.08)}
@keyframes hp-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- 9. Footer ---------- */
.hp-footer{position:relative;display:flex;flex-direction:column;align-items:center;padding:60px 40px 40px;background:#FFFFFF;overflow:hidden}
.hp-footer::after{content:"";position:absolute;inset:0;background-image:var(--hp-footer-img,none);background-size:cover;background-position:center;opacity:.2;pointer-events:none;z-index:0}
/* Full-bleed: .hp-footer đã có padding 2 bên riêng (360px/40px/24px/16px tuỳ breakpoint), -inner
   chỉ cần lấp đầy 100% phần còn lại thay vì đóng khung cứng ở 1134px. .hp-col-about vẫn giữ
   width:349px cố định (flex-grow:0), chỉ .hp-col-contact (flex:1 1 635px, đã grow sẵn) giãn thêm
   theo phần rộng ra — đúng tỉ lệ 2 cột như thiết kế, không kéo giãn logo/mô tả công ty. */
.hp-footer-inner{position:relative;z-index:1;width:100%;display:flex;flex-direction:column;align-items:center;gap:64px}
.hp-footer-columns{display:flex;flex-direction:row;align-items:flex-start;padding:0;gap:150px;width:100%}
.hp-col-about{display:flex;flex-direction:column;align-items:flex-start;padding:0;gap:20px;width:349px;flex:0 0 349px}
.hp-flogo{display:flex;flex-direction:row;align-items:center;padding:0;gap:10px;width:100%;text-decoration:none}
.hp-flogo-img{width:116px;height:95px;object-fit:contain;display:block;flex:0 0 116px}
.hp-fname{font-family:'Inter',sans-serif;font-weight:900;font-size:16px;line-height:17px;color:#000000;text-transform:uppercase}
.hp-fdesc{width:100%;font-family:'Inter',sans-serif;font-weight:400;font-size:13px;line-height:160%;color:#1A1A1A}
.hp-fsocial{display:flex;flex-direction:row;align-items:center;padding:0;gap:10px}
.hp-fsocial-item{display:block;width:43.21px;height:43.21px;border-radius:5.26906px;overflow:hidden;transition:transform .3s ease}
.hp-fsocial-item:hover{transform:translateY(-3px)}
.hp-fsocial-item img{display:block;width:43.21px;height:43.21px;object-fit:contain}

.hp-col-contact{display:flex;flex-direction:column;align-items:flex-start;padding:0;gap:16px;width:635px;flex:1 1 635px}
.hp-ftitle{font-family:'Archivo',sans-serif;font-weight:700;font-size:15px;line-height:16px;text-transform:uppercase;color:#000000}
.hp-info-list{display:flex;flex-direction:column;align-items:flex-start;padding:0;gap:12px;width:100%}
.hp-info-item{display:flex;flex-direction:row;align-items:flex-start;padding:0;gap:10px;width:100%}
.hp-info-ico{display:block;width:16px;height:16px;flex:0 0 16px;line-height:0}
.hp-info-text{font-family:'Inter',sans-serif;font-weight:400;font-size:13px;line-height:140%;color:#1A1A1A}
.hp-info-text a{color:#1A1A1A;text-decoration:none;transition:color .3s}
.hp-info-text a:hover{color:#015BDF}
.hp-fcontent{font-family:'Inter',sans-serif;font-size:13px;line-height:160%;color:#1A1A1A}
.hp-fcontent p{margin:0 0 6px}

.hp-footer-bottom{display:flex;flex-direction:column;align-items:flex-start;padding:0;gap:24px;width:100%}
.hp-fline{box-sizing:border-box;width:100%;height:0;border-top:1px solid #152E4E;opacity:.35}
.hp-fbottom-row{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:0;gap:24px;width:100%}
.hp-copyright{font-family:'Inter',sans-serif;font-weight:400;font-size:12px;line-height:15px;color:#1A1A1A}
.hp-fpolicies{display:flex;flex-direction:row;align-items:flex-start;padding:0;gap:24px}
.hp-fpolicies a{font-family:'Inter',sans-serif;font-weight:400;font-size:12px;line-height:15px;color:#1A1A1A;text-decoration:none;transition:color .3s}
.hp-fpolicies a:hover{color:#015BDF;text-decoration:underline}

/* ---------- Hiệu ứng xuất hiện khi cuộn (dùng chung với reveal.js) ---------- */
.hp-card.reveal-fx,.hp-service-item.reveal-fx{will-change:opacity,transform}

/* ---------- Cây danh mục sản phẩm (trang trong) ---------- */
.hp-tree{margin-bottom:20px}
.hp-tree-title{font-family:'Archivo',sans-serif;font-weight:700;font-size:15px;line-height:16px;text-transform:uppercase;color:#1A1A1A;padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid #F3F4F6}
.hp-tree-ul,.hp-tree-sub{list-style:none;margin:0;padding:0}
.hp-tree-ul>li{border-bottom:1px solid #F3F4F6}
.hp-tree-ul>li:last-child{border-bottom:0}
.hp-tree-list{display:block;padding:9px 0;font-family:'Inter',sans-serif;font-weight:600;font-size:14px;line-height:20px;color:#232935;text-decoration:none;transition:color .3s}
.hp-tree-list:hover,.hp-tree-list.active{color:#015BDF}
.hp-tree-sub{display:none;padding:0 0 8px 12px;border-left:2px solid #F3F4F6}
.hp-tree-ul>li.is-open .hp-tree-sub{display:block}
.hp-tree-sub a{display:block;padding:6px 0;font-family:'Inter',sans-serif;font-weight:400;font-size:13px;line-height:18px;color:#4B5563;text-decoration:none;transition:color .3s,padding-left .3s}
.hp-tree-sub a:hover{color:#015BDF;padding-left:4px}
.hp-tree-sub a.active{color:#015BDF;font-weight:600}

/* ---------- Catalogs ---------- */
.hp-cata-section,.hp-catad-section{padding:24px 0 48px}
/* Không còn tab bấm chọn danh mục — mỗi danh mục catalogs giờ là 1 hàng riêng (giống trang danh
   sách sản phẩm), 5 catalog/hàng, nhiều hơn thì tự xổ xuống hàng tiếp theo. */
.hp-cata-rows{display:flex;flex-direction:column;gap:36px}
.hp-cata-row-block{display:flex;flex-direction:column;gap:16px}
.hp-cata-row-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:12px;border-bottom:1px solid #F3F4F6}
.hp-cata-row-title{margin:0;font-family:'Archivo',sans-serif;font-weight:700;font-size:20px;line-height:28px;color:#1A1A1A}
.hp-cata-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px 20px;margin-top:8px}
.hp-cata-card{display:flex;flex-direction:column;background:#FFFFFF;border:1px solid #E0E0E0;border-radius:8px;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease}
.hp-cata-card:hover{transform:translateY(-4px);box-shadow:0 4px 16px rgba(0,0,0,.12)}
.hp-cata-cover{display:block;background:#F5F5F5}
.hp-cata-cover img{display:block;width:100%;height:auto;object-fit:contain}
.hp-cata-body{display:flex;flex-direction:column;gap:8px;padding:16px}
.hp-cata-name{margin:0;font-family:'Archivo',sans-serif;font-weight:700;font-size:16px;line-height:22px;color:#1A1A1A}
.hp-cata-name a{color:inherit;text-decoration:none;transition:color .3s}
.hp-cata-name a:hover{color:#015BDF}
.hp-cata-desc{margin:0;font-family:'Inter',sans-serif;font-weight:400;font-size:13px;line-height:160%;color:#4B5563;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hp-cata-actions,.hp-catad-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.hp-btn{display:inline-flex;align-items:center;justify-content:center;padding:9px 16px;border-radius:8px;font-family:'Inter',sans-serif;font-weight:600;font-size:13px;line-height:18px;text-decoration:none;transition:background .3s,color .3s,border-color .3s}
.hp-btn--dark{background:#232935;color:#FFFFFF;border:1px solid #232935}
.hp-btn--dark:hover{background:#0F1319;color:#FFFFFF}
.hp-btn--line{background:#FFFFFF;color:#232935;border:1px solid #232935}
.hp-btn--line:hover{background:#232935;color:#FFFFFF}
/* Nút tải catalog — chỉ icon SVG (download-minimalistic-svgrepo-com.svg đã inline), không còn chữ
   "Tải catalog" (vẫn giữ qua title/aria-label cho accessibility) — GIỮ NGUYÊN width/height như lúc
   nội dung nút còn là chữ "Tải catalog" (không co lại thành ô vuông nhỏ theo icon) */
.hp-btn--icon{width:132px;height:40px;padding:0;flex:0 0 132px}
.hp-btn--icon svg{width:18px;height:18px;display:block}
.hp-catad-title{margin:0 0 16px;font-family:'Fz Poppins','Be Vietnam Pro',sans-serif;font-weight:600;font-size:32px;line-height:44px;color:#1A1A1A}
.hp-catad-desc{margin-bottom:20px;font-family:'Inter',sans-serif;font-size:14px;line-height:170%;color:#4B5563}
.hp-catad-viewer{width:100%;height:80vh;min-height:520px;background:#F5F5F5;border:1px solid #E0E0E0;border-radius:8px;overflow:hidden;-webkit-overflow-scrolling:touch}
.hp-catad-viewer iframe{display:block;width:100%;height:100%;border:0}
/* Nút "Xem catalog" mở PDF ở tab mới — CHỈ hiện ở mobile ≤1024px (xem media.css), thay thế hẳn
   .hp-catad-viewer (ẩn ở đó) vì iframe PDF không đáng tin cậy trên di động */
.hp-catad-view-mobile{display:none;margin-top:12px}
.hp-catad-cover{max-width:560px;margin:0 auto}
/* Khung xem PDF trong modal Fancybox (khác .hp-catad-viewer của trang chi tiết) — cao theo
   height:100% để lấp đầy đúng khung modal đã phóng gần kín màn hình (xem .hp-cata-fullscreen).
   touch-action:pan-y — QUAN TRỌNG cho mobile: Fancybox mặc định bắt (capture) cử chỉ vuốt trên nội
   dung slide để xử lý vuốt-đóng/chuyển-slide, khiến thao tác vuốt dọc để lướt trang PDF bên trong
   <iframe> bị nuốt mất, cảm giác như "kẹt cứng ở trang đầu". Khai báo pan-y cho phép trình duyệt ưu
   tiên cuộn dọc bình thường thay vì để Fancybox chặn gesture. */
.hp-cata-modal-viewer{width:100%;height:100%;background:#F5F5F5;overflow:hidden;touch-action:pan-y;-webkit-overflow-scrolling:touch}
.hp-cata-modal-viewer iframe{display:block;width:100%;height:100%;border:0;touch-action:pan-y}
/* Modal catalog xem gần full màn hình (mainClass truyền qua Fancybox.show(), xem apps.js) */
.hp-cata-fullscreen .fancybox__content{width:96vw;max-width:96vw;height:92vh;max-height:92vh;display:flex;flex-direction:column;gap:12px;padding:16px}
.hp-cata-fullscreen .hp-cata-modal-viewer{flex:1 1 auto;min-height:0}
.hp-cata-fullscreen .hp-catad-actions{flex:0 0 auto}
.hp-catad-content{margin-top:24px;font-family:'Inter',sans-serif;font-size:14px;line-height:170%;color:#1A1A1A}
.hp-catad-other{margin-top:40px}
.hp-catad-other .hp-ftitle{margin-bottom:16px}

/* ---------- Dịch vụ (trang trong) ---------- */
.hp-dv-section,.hp-dvd-section{padding:24px 0 48px}
.hp-dv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 20px;margin-top:24px}
.hp-dv-card{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:28px 24px;background:#FFFFFF;border:1px solid #E0E0E0;border-radius:8px;text-decoration:none;transition:transform .3s ease,box-shadow .3s ease,border-color .3s}
.hp-dv-card:hover{transform:translateY(-4px);box-shadow:0 4px 16px rgba(0,0,0,.12);border-color:#232935}
.hp-dv-ico{display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:8px;background:#F5F5F5}
.hp-dv-ico img{display:block;width:34px;height:34px;object-fit:contain}
.hp-dv-name{margin:0;font-family:'Inter',sans-serif;font-weight:600;font-size:20px;line-height:150%;color:#1A1A1A}
.hp-dv-desc{margin:0;font-family:'Inter',sans-serif;font-weight:400;font-size:14px;line-height:170%;color:#4B5563}
.hp-dv-more{font-family:'Inter',sans-serif;font-weight:600;font-size:13px;line-height:18px;color:#015BDF}
.hp-dvd-photo{max-width:800px;margin:0 auto 24px}
.hp-dvd-photo img{display:block;width:100%;height:auto;border-radius:8px}
.prdd-catalog{margin:16px 0}
.prdd-catalog .hp-btn{gap:8px;background-color:#0d6efd}

/* ---------- Danh mục cấp 1: hiển thị theo từng hàng danh mục cấp 2 ---------- */
.hp-cat-rows{display:flex;flex-direction:column;gap:36px}
.hp-cat-row-block{display:flex;flex-direction:column;gap:16px}
.hp-cat-row-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:12px;border-bottom:1px solid #F3F4F6}
.hp-cat-row-title{margin:0;font-family:'Archivo',sans-serif;font-weight:700;font-size:20px;line-height:28px;color:#1A1A1A}
.hp-cat-row-more{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;font-family:'Inter',sans-serif;font-weight:600;font-size:13px;line-height:18px;color:var(--color-main-solid);text-decoration:none;white-space:nowrap;transition:gap .3s ease,color .3s ease}
.hp-cat-row-more:hover{gap:10px;color:var(--color-secondary)}
/* Không còn slider — .grid-product kế thừa nguyên lưới wrap chuẩn (5 cột desktop/3 cột ≤1200px/
   2 cột ≤768px, xem base rule .grid-product) cho mọi hàng danh mục cấp 2, nhiều hơn 5 sản phẩm thì
   tự xổ xuống hàng tiếp theo thay vì cần bấm mũi tên. */

/* ---------- Nút mở cây danh mục trên mobile (đứng ngoài .prd-toolbar) ----------
   Phải hiện đúng khớp với breakpoint mà .left-product chuyển sang dạng drawer ẩn (xem
   media.css "@media(max-width:1025px) .flex-product-main .left-product") — trước đây nút này
   chỉ hiện <=767px trong khi cây danh mục đã ẩn off-canvas từ <=1025px, khiến khoảng 768-1024px
   không có cách nào mở lại cây danh mục. */
.hp-tree-toggle{display:none;padding:8px 16px;background:#fff;align-items:center;justify-content:center;gap:6px;border-radius:8px;cursor:pointer;border:1px solid #E5E7EB;font-family:'Inter',system-ui,sans-serif;font-size:14px;color:#374151;margin-bottom:16px}
.hp-tree-toggle:hover{border-color:var(--color-main);color:var(--color-main)}
@media(max-width:1024px){.hp-tree-toggle{display:inline-flex}}

/* Nút tắt + lớp phủ nền tối khi cây danh mục mở dạng drawer trên mobile/tablet */
.hp-tree-title{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hp-tree-close{display:none;background:none;border:none;cursor:pointer;padding:2px;color:#6B7280;align-items:center;justify-content:center;flex:0 0 auto}
.hp-tree-close:hover{color:var(--color-main-solid)}
@media(max-width:1024px){.hp-tree-close{display:inline-flex}}
.hp-tree-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:998}
.hp-tree-backdrop.show{display:block}
@media (max-width:768px){
	.hp-hcontact{display:none !important}
}