@charset "UTF-8";
/* --- Khoảng cách footer mobile: đổi ở đây, áp dụng lại toàn bộ --- */
/* khoảng cách giữa các accordion (VỀ OLV/CHÍNH SÁCH/LIÊN HỆ), và từ tên nhóm xuống nội dung mở ra */
/* khoảng cách mỗi bên của 2 đường viền ngăn cách (Newsletter và Thanh toán) */
.footer-title--newsletter-mobile {
  display: none; }

/* vietnamese */
@font-face {
  font-family: 'Bungee';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/bungee/v17/N0bU2SZBIuF2PU_0AnR1Gd8.woff2) format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }

/* latin-ext */
@font-face {
  font-family: 'Bungee';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/bungee/v17/N0bU2SZBIuF2PU_0A3R1Gd8.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* latin */
@font-face {
  font-family: 'Bungee';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/bungee/v17/N0bU2SZBIuF2PU_0DXR1.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Oswald - vietnamese */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/oswald/v57/TK3iWkUHHAIjg752Fj8Ghe4.woff2) format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }

/* Oswald - latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/oswald/v57/TK3iWkUHHAIjg752GT8G.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Inter - vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcCo3FwrK3iLTcvtYwYL8g.woff2) format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }

/* Inter - latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcCo3FwrK3iLTcviYwY.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* IBM Plex Sans - vietnamese */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ibmplexsans/v23/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxRKYbABA.woff2) format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }

/* IBM Plex Sans - latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ibmplexsans/v23/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxeKYY.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Montserrat - vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2) format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }

/* Montserrat - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

.olv-footer--pink .footer-link li a,
.olv-footer--pink .footer-contact li,
.pro-loop .pro-name,
.pro-loop .product-price,
.dual-cta__cta,
.split-banner__cta,
.notify-topbar--top p,
.category-showcase__label {
  font-family: "Fz Poppins", "Montserrat", sans-serif; }

.css-1ayc9cw {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: url(https://file.hstatic.net/1000304367/file/bg-gifts-left_813fd32114304c81a0e57c0f2566e2c4.png), url(https://file.hstatic.net/1000304367/file/bg-gifts-right_21a558bdcaec4ff2a0fe485373e74600.png);
  background-size: 20px,27.5px;
  background-repeat: no-repeat;
  background-position: left calc(50% + 3.5px), right calc(50% + 0.5px); }

header .nav-container .mega-contain {
  background: rgba(241, 232, 227, 0.9);
  opacity: 1; }

.mega-contain.mega2 .dropdown-menu, .mega-contain .dropdown-menu {
  max-width: 1230px !important; }

.mega-contain.mega2 .fllex, .mega-contain .fllex {
  display: flex;
  justify-content: space-between; }
  .mega-contain.mega2 .fllex > div, .mega-contain .fllex > div {
    width: 40%; }
    .mega-contain.mega2 .fllex > div.flexhinhanh, .mega-contain .fllex > div.flexhinhanh {
      display: flex; }
      .mega-contain.mega2 .fllex > div.flexhinhanh li, .mega-contain .fllex > div.flexhinhanh li {
        width: 100%; }
        .mega-contain.mega2 .fllex > div.flexhinhanh li a, .mega-contain .fllex > div.flexhinhanh li a {
          display: block;
          height: 100%; }
    .mega-contain.mega2 .fllex > div .sub-item.sub-itemimg, .mega-contain .fllex > div .sub-item.sub-itemimg {
      width: 100% !important;
      margin-left: 15px; }

.mega-contain .dropdown-menu .sub-item {
  padding-left: 0 !important; }

#main_cate_menu .submenu-button:after {
  top: 20px; }

#main_cate_menu .submenu-button:before {
  top: 15px; }

@media (max-width: 767px) {
  .title-instagram a, .title-instagram {
    font-size: 22px; }
  .checkot1 button {
    bottom: 20px; }
  .bst_home_1 [class*="col-"]:first-child {
    padding-right: 0; }
  .bst_home_1 [class*="col-"]:last-child {
    padding-left: 5px; }
  .bst_home_1 .row-d-flex {
    align-items: stretch; }
    .bst_home_1 .row-d-flex .checkot1 {
      padding-bottom: 0; }
    .bst_home_1 .row-d-flex .checkot2 {
      float: none;
      gap: 15px; }
    .bst_home_1 .row-d-flex .bst_1_r {
      flex: 1; }
      .bst_home_1 .row-d-flex .bst_1_r img {
        width: 100%;
        height: 100%;
        object-fit: cover; }
  .bst_1_r {
    height: 100%; }
    .bst_1_r picture, .bst_1_r img {
      /*height:auto;
			object-fit: contain;*/
      width: 100%;
      height: 100%;
      object-fit: cover; }
  .checkot1 {
    padding-left: 15px; } }

@media (max-width: 767px) {
  .checkot1 {
    padding-right: 5px !important; }
  .checkot1 button, .bst_1_r button {
    bottom: 13px; }
  .bst_home_1, .bst_home_2 {
    margin-bottom: 10px; }
  .intro h3 {
    margin: 15px 0; }
  .title-instagram {
    margin: 15px 0; }
  #main_cate_menu ul ul .submenu-button:after {
    top: 19px;
    left: 15px; }
  #main_cate_menu ul ul .submenu-button:before {
    top: 14px;
    left: 20px; }
  #main_cate_menu ul ul ul a {
    display: flex;
    align-items: center;
    vertical-align: middle; } }

.mega-contain.mega2 .fllex > div, .mega-contain .fllex > div {
  width: auto; }

.mega-contain.mega2 .fllex > div.flexhinhanh,
.mega-contain .fllex > div.flexhinhanh {
  margin-left: 2%; }

header .nav-container .dropdown-menu .sub-item > a.menucus-title {
  font-weight: 600; }

header .nav-container .dropdown-menu .sub-item > a:not(.menucus-title) {
  padding: 0 0 0 7px; }

#buyxgety-program {
  margin-top: 20px;
  border: 2px dotted #dc2626;
  padding: 10px;
  position: relative;
  min-height: 100px;
  z-index: 0; }

#buyxgety-program .buyxgety-heading {
  padding: 5px 60px 5px 0;
  position: relative; }

#buyxgety-program .buyxgety-heading h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 4px; }

#buyxgety-program .buyxgety-heading p {
  font-size: 12px; }

#buyxgety-program .buyxgety-heading:after {
  content: "";
  position: absolute;
  width: 35px;
  height: 35px;
  right: 10px;
  top: 6px;
  background-image: url("https://file.hstatic.net/200000593853/file/gift-filled_774ac33d774c4a29aa86ed5620d5b902.png");
  background-repeat: no-repeat;
  background-size: auto;
  background-position: center; }

#buyxgety-program .modal-body {
  padding: 15px 30px; }

.buyxgety_item {
  display: -webkit-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  padding: 5px 10px 10px; }

.buyxgety_item .buyxgety_checkbox {
  width: 30px; }

.buyxgety_item .buyxgety_image {
  width: 70px;
  text-align: center; }

.buyxgety_item .buyxgety_image img {
  padding: 3px;
  border: 1px solid #eee; }

.buyxgety_item .buyxgety_item_title {
  width: calc(100% - 70px);
  padding-left: 10px; }

.buyxgety_item .buyxgety_list_variant select {
  font-size: 94%;
  font-style: italic;
  min-width: 110px;
  outline: none;
  padding: 1px 15px 2px;
  margin: 2px 0 5px; }

.buyxgety_item .buyxgety_checkbox input[type=radio] {
  cursor: pointer;
  width: 15px;
  height: 15px; }

.buyxgety_item .buyxgety_item_title .bxy__tt1 span {
  margin-bottom: 2px;
  margin-right: 8px;
  font-weight: 500;
  font-size: 10px;
  padding: 1px 6px 2px;
  border: 1px solid #ffe1db;
  background: #fef4f4;
  color: #ff0000;
  border-radius: 3px;
  display: inline-block; }

.buyxgety_item .buyxgety_item_title .bxy__tt1 a {
  color: #315399; }

.buyxgety_item .buyxgety_item_title .bxy__tt2 strong {
  color: #ff0000; }

.buyxgety_item .buyxgety_item_title .bxy__tt2 span {
  color: #315399; }

.pro-loop .product-img .gift.product_gift_label,
.pro-loop .product-img .gift.product_gift_label {
  min-height: 25px; }

.pro-loop .product-img.gift.product_gift_label img,
.pro-loop .product-img .gift.product_gift_label img {
  display: inline-block; }

.gift.product_gift_label {
  width: 30px;
  height: 30px;
  line-height: 25px;
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  text-align: center;
  border-radius: 50%;
  padding: 0 5px;
  background: #ffffff;
  border: 1px solid var(--shop-color-border); }

.gift.product_gift_label:not(.hidden) {
  display: flex;
  align-items: center;
  justify-content: center; }

.gift.product_gift_label img {
  width: 20px;
  height: 20px; }

.buyxgety_item *:not(.font-semibold) {
  font-weight: 400; }

.buyxgety_item .buyxgety_item_title a {
  font-weight: bold; }

/* =========================================================================
   MATEMADE-INSPIRED HOMEPAGE RESTYLE
   Giữ nguyên logic Liquid / dữ liệu, chỉ override phần nhìn (spacing, chữ,
   nút, hover sản phẩm) cho trang chủ có cảm giác tối giản, nhiều khoảng
   trắng hơn, gần với phong cách matemade.vn. Vẫn giữ tông đỏ $mainColor
   (#dc2626) làm màu nhấn.
   ========================================================================= */
/* --- Khoảng cách section rộng rãi hơn --- */
.section-space {
  padding-bottom: 64px; }

@media (max-width: 767px) {
  .section-space {
    padding-bottom: 36px; } }

/* Banner slider đầu trang: áp dụng cùng khoảng cách 64px/36px xuống
   section kế tiếp, đồng bộ với toàn bộ section-space còn lại */
.bst_home_top {
  padding-bottom: 64px; }

@media (max-width: 767px) {
  .bst_home_top {
    padding-bottom: 36px; } }

/* --- Tiêu đề section: mảnh, chữ hoa, letter-spacing rộng --- */
.section-head {
  margin-bottom: 36px; }

.section-head .section-head__left svg {
  color: #ff5ca8; }

.section-col .section-title a,
.section-col .section-title,
.section-category-showcase .section-title a,
.section-new-arrivals .section-title a,
.section-community--minimal .section-title a {
  color: #ff5ca8 !important; }

.section-col .section-title a:hover,
.section-category-showcase .section-title a:hover,
.section-new-arrivals .section-title a:hover,
.section-community--minimal .section-title a:hover {
  opacity: .8; }

.section-detail-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: #ff5ca8; }

.section-detail-link:hover {
  opacity: .8; }

.section-detail-link svg {
  transition: transform .2s ease; }

.section-detail-link:hover svg {
  transform: translateX(3px); }

.section-col .section-head__left,
.section-category-showcase .section-head__left,
.section-new-arrivals .section-head__left,
.section-community--minimal .section-head__left {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px; }

.section-more {
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.08em;
  font-weight: 500; }

.section-desc {
  font-family: "Fz Poppins", "Montserrat", sans-serif;
  color: #6b6560;
  font-size: 14px;
  margin-top: 8px; }

/* --- Nút chính: outline mảnh, chữ hoa, hover mới đổ màu --- */
.btn-main {
  background: transparent;
  color: #1c1917;
  border: 1px solid #1c1917;
  border-radius: 0;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.08em;
  font-weight: 500;
  padding: 13px 28px;
  transition: all .25s ease; }

.btn-main:hover {
  background: #ff5ca8;
  border-color: #ff5ca8;
  color: #fff; }

.btn-main svg {
  transition: transform .25s ease; }

.btn-main:hover svg {
  transform: translateX(3px); }

/* --- Hero slider: full-width sát mép như matemade, dính liền nav --- */
.bst_home_top {
  margin-bottom: 0;
  padding-top: 0;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100%; }

.hero-container {
  position: relative;
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important; }

@media (min-width: 768px) {
  .hero-container {
    padding-left: 3px !important;
    padding-right: 3px !important; } }

/* --- Banner slider: viết lại hoàn toàn bằng CSS/JS thuần, KHÔNG dùng
   Slick.js nữa (bỏ hẳn phụ thuộc thư viện ngoài, tránh lỗi thứ tự tải
   script gây ra hàng loạt vấn đề trước đây) --- */
.home-slider {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%; }

.home-slider .slide-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  z-index: 1;
  transition: opacity .5s ease; }

.home-slider .slide-item.active {
  opacity: 1;
  visibility: visible;
  z-index: 2; }

.home-slider .slide-item a:not(.slide-item__cta),
.home-slider .slide-item picture {
  display: block;
  width: 100%;
  height: 100%; }

.home-slider .slide-item img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02); }

.home-slider__dots {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  z-index: 6; }

.home-slider__dot {
  width: 20px;
  height: 2px;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer; }

.home-slider__dot.active {
  background: #fff; }

/* --- Product card: tối giản, ảnh làm chủ đạo --- */
.pro-loop .product-block {
  margin-bottom: 0;
  position: relative; }

.pro-loop .product-img {
  border-radius: 0;
  overflow: hidden;
  background: #f7f5f3; }

.pro-loop .product-img img {
  transition: transform .6s ease, opacity .4s ease; }

.pro-loop .product-block:hover .product-img img {
  transform: scale(1.04); }

/* ============================================================
   THẺ SẢN PHẨM — khu vực nội dung dưới ảnh (.product-detail)
   Thứ tự hiển thị: Tên sản phẩm -> Giá -> Chấm màu -> Nút thêm
   giỏ hàng. Toàn bộ margin/padding gom về đây, mỗi phần tử 1
   khối riêng, tránh rải rác nhiều nơi dễ đè lên nhau.
   ============================================================ */
/* Khối bao ngoài */
.pro-loop .product-detail {
  text-align: center;
  padding-top: 4px;
  padding-bottom: 10px; }

/* Tên sản phẩm */
.pro-loop .product-detail .pro-name {
  padding-top: 12px;
  margin-top: 0;
  margin-bottom: 2px;
  font-size: 12px;
  font-weight: 400;
  color: #1c1917;
  text-transform: none;
  letter-spacing: 0.01em; }

.pro-loop .product-detail .pro-name a {
  font-size: 12px;
  font-weight: 400;
  color: #1c1917;
  text-transform: none;
  letter-spacing: 0.01em; }

/* Giá */
.pro-loop .product-detail .price-loop {
  padding-top: 8px;
  margin-top: 2px;
  margin-bottom: 3px;
  justify-content: center; }

.pro-loop .product-detail .pro-price {
  font-size: 14px; }

.pro-loop .product-detail .compare-price,
.pro-loop .product-detail .pro-price-del {
  font-size: 12px; }

@media (min-width: 1280px) {
  .pro-loop .product-detail .pro-name,
  .pro-loop .product-detail .pro-name a {
    font-size: 14px; }
  .pro-loop .product-detail .pro-price {
    font-size: 16px; }
  .pro-loop .product-detail .compare-price,
  .pro-loop .product-detail .pro-price-del {
    font-size: 14px; } }

/* Chấm màu */
.pro-loop .product-detail .pro-variant.variantColor {
  min-height: 40px;
  margin-top: 0;
  margin-bottom: 10px; }

.pro-loop .product-detail .pro-variant.variantColor .list-color {
  display: inline-flex;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0; }

.pro-loop .product-detail .pro-variant.variantColor .list-color li.color-count {
  width: auto;
  height: 40px;
  padding: 0;
  border: none;
  font-size: 12px;
  color: #1c1917;
  align-items: center;
  justify-content: center; }

.pro-loop .product-detail .pro-variant.variantColor .list-color li.color-count span {
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  border: none !important; }

.pro-loop .product-detail .pro-variant.variantColor .list-color li.color-count {
  cursor: pointer; }

/* Popup hiện đủ toàn bộ chấm màu, mở ra khi bấm +N */
.pro-loop .color-popup {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #e8398f;
  border-radius: 6px;
  box-sizing: border-box;
  padding: 16px 12px 12px;
  z-index: 10;
  overflow-y: auto; }

.pro-loop .color-popup.is-open {
  display: block; }

.pro-loop .color-popup__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  color: #e8398f;
  cursor: pointer; }

.pro-loop .color-popup__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0; }

/* Dưới 1024px: đổi popup +N thành dạng "bottom sheet" — trượt lên từ
   mép dưới màn hình, full ngang, chiều cao tự theo nội dung. Chấm màu
   trong popup dùng đúng cơ chế viền/đệm giống bên ngoài thẻ sản phẩm
   (luôn 40x40px, chỉ đổi màu viền khi chọn), đảm bảo khoảng cách nhìn
   thấy thật giữa 2 chấm luôn là 20px, không đổi theo trạng thái chọn. */
@media (max-width: 1023px) {
  .pro-loop .color-popup {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-height: 70vh;
    min-height: 100px !important;
    border-radius: 16px 16px 0 0;
    border: 1px solid #e8398f;
    border-bottom: none;
    padding: 44px 16px 24px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15); }
  .pro-loop .color-popup__close {
    top: 12px;
    right: 12px; }
  .pro-loop .color-popup__list {
    justify-content: flex-start; } }

/* Nút "Thêm vào giỏ hàng" — ẩn mặc định, hiện khi hover thẻ sản phẩm.
   (Cơ chế ẩn/hiện này sẽ xem lại/sửa riêng ở bước sau theo yêu cầu) */
.pro-loop .product-detail .btn-addcart-qv {
  display: flex;
  visibility: hidden;
  transition: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: calc(100% - 20px);
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
  background: #fff;
  border: 1px solid #e8398f;
  color: #e8398f;
  border-radius: 4px;
  padding: 12px 0;
  box-sizing: border-box;
  text-decoration: none; }

.pro-loop .product-detail .btn-addcart-qv svg {
  display: none; }

.pro-loop .product-block:hover .product-detail .btn-addcart-qv {
  visibility: visible; }

.pro-loop .product-detail .btn-addcart-qv:hover {
  background: #ffc2de; }

.pro-loop .product-detail .btn-addcart-qv.soldout {
  opacity: 0.6;
  pointer-events: none; }

.pro-loop .product-detail .btn-addcart-qv span {
  font-size: 12px;
  font-weight: 500; }

/* Badge (VD: -XX%, HẾT HÀNG...) */
.pro-loop .badge-item {
  border-radius: 0;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.05em; }

/* Dưới 1024px: không có hover chuột -> đổi nút thêm giỏ hàng thành
   icon tròn nổi trên góc dưới-phải ảnh, luôn hiện sẵn (không cần hover).
   Giá trở thành phần tử cuối cùng trong luồng chữ -> margin-bottom về 0,
   khoảng cách đáy lúc này do padding-bottom:10px của .product-detail
   đảm nhiệm. */
@media (max-width: 1023px) {
  .pro-loop .product-detail {
    position: relative; }
  .pro-loop .product-detail .btn-addcart-qv {
    display: flex !important;
    visibility: visible !important;
    position: absolute;
    bottom: 100%;
    right: 12px;
    width: 38px;
    height: 38px;
    margin: 0 0 8px 0;
    padding: 0;
    background: #ffd6e8;
    border: none;
    border-radius: 50%;
    color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); }
  .pro-loop .product-detail .btn-addcart-qv svg {
    display: block;
    width: 18px;
    height: 18px; }
  .pro-loop .product-detail .btn-addcart-qv span {
    display: none; }
  .pro-loop .product-detail .price-loop {
    margin-bottom: 0; } }

/* Khoảng cách từ dòng Giá (cuối cùng của mỗi thẻ sản phẩm) tới thanh
   trượt kéo: chỉ áp dụng riêng cho khối SPECIAL DEAL/OLV CÓ GÌ MỚI
   (không ảnh hưởng BST/OLV MATE vì chúng dùng wrapper class khác).
   Vì nút Thêm giỏ hàng giờ dùng visibility (giữ nguyên chỗ trống kể
   cả lúc ẩn) nên chiều cao thẻ không đổi giữa hover/không hover,
   thanh trượt sẽ luôn đứng yên đúng 50px, không bị nhảy vị trí. */
.content-product-list-wrapper.js-scroll-track + .scroll-dragbar {
  margin-top: 20px; }

.community-list--minimal.js-scroll-track + .scroll-dragbar,
.category-showcase.js-scroll-track + .scroll-dragbar {
  margin-top: 64px; }

/* --- Banner lookbook: bo góc nhẹ + khoảng cách đều --- */
.bst_home_1 .checkot1, .bst_home_1 .checkot2, .bst_home_1 .bst_1_r, .bst_home_2 .checkot1, .bst_home_2 .checkot2, .bst_home_2 .bst_1_r {
  border-radius: 2px;
  overflow: hidden; }

.checkot1 button, .bst_1_r button {
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 13px;
  font-weight: 500; }

/* --- Notify topbar (marquee) kiểu matemade: chữ mảnh, canh giữa --- */
.notify-topbar .topbar-content p {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center; }

/* --- Community / Loyalty / Suggestion: khung mảnh, thoáng --- */
.section-community .community-box, .section-community .loyalty-box, .section-community .suggestion-heading h3, .section-loyalty .community-box, .section-loyalty .loyalty-box, .section-loyalty .suggestion-heading h3, .section-suggestion .community-box, .section-suggestion .loyalty-box, .section-suggestion .suggestion-heading h3 {
  border-radius: 2px; }

.loyalty-box h2.font-turnpike, .suggestion-heading h3.font-turnpike {
  letter-spacing: 0.02em; }

.section-dual-cta {
  padding-left: 0 !important;
  padding-right: 0 !important; }

.section-dual-cta .container {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important; }

.dual-cta {
  display: flex;
  align-items: stretch;
  margin-left: 0 !important;
  margin-right: 0 !important; }

.dual-cta__item {
  display: flex;
  padding-left: 0 !important;
  padding-right: 0 !important; }

.dual-cta__box {
  width: 100%;
  height: 100vh;
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start; }

.dual-cta__box--quiz {
  background: #ededed; }

.dual-cta__box--loyalty {
  background: #ffd6e8; }

.dual-cta__title {
  font-family: "Montserrat", "Fz Poppins", "Montserrat", sans-serif;
  font-size: 32px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: #1c1917;
  margin: 0 0 16px; }

.dual-cta__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #1c1917;
  border: 1px solid #1c1917;
  padding: 12px 22px;
  transition: all .25s ease; }

.dual-cta__cta:hover {
  background: #ff5ca8;
  border-color: #ff5ca8;
  color: #fff; }

@media (max-width: 767px) {
  .dual-cta {
    display: block; }
  .dual-cta__item {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    box-sizing: border-box; }
  .dual-cta__box {
    height: 70vh;
    padding: 28px;
    width: 100%;
    box-sizing: border-box; } }

.section-dual-cta {
  margin-bottom: 24px; }

/* =========================================================================
   OLV BRAND PINK + CÁC THÀNH PHẦN MỚI THEO YÊU CẦU (topbar, menu, split
   banner, category showcase, dragbar, footer, store locator...)
   ========================================================================= */
/* --- Topbar (marquee) di chuyển lên đầu + nút mũi tên --- */
.notify-topbar--top {
  background: #fff;
  border-bottom: 1px solid #f1e8e7;
  position: relative;
  padding: 0 40px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box; }

.notify-topbar--top p,
.notify-topbar--top p a {
  color: #e8398f !important; }

.notify-topbar--top .topbar-content-slider {
  width: 100%; }

.notify-topbar--top .topbar-content-slider p {
  margin: 0;
  padding: 0; }

.notify-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: #1c1917;
  padding: 4px;
  z-index: 2; }

.notify-arrow__prev {
  left: 12px; }

.notify-arrow__next {
  right: 12px; }

@media (min-width: 1400px) {
  .container:not(.hero-container) {
    max-width: 1920px !important;
    width: 96% !important; } }

/* --- Main nav: nền hồng nhạt, full-width sát mép như matemade --- */
.olv-header__container {
  background: #ffd6e8;
  max-width: 100%;
  width: 100%;
  margin: 0; }

.olv-header__container .container {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box; }

#olv-header .header-row__inner {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important; }

#olv-header .header-flex__side {
  flex: 1 1 0;
  width: auto;
  padding: 0;
  display: flex;
  align-items: center;
  order: 1; }

#olv-header .header-flex__side:last-of-type {
  justify-content: flex-end;
  order: 3; }

#olv-header .menu-mb-actions {
  width: auto !important;
  max-width: none !important;
  flex: 1 1 0 !important; }

.olv-header__container.hSticky.hSticky-nav {
  background: #ffd6e8 !important; }

/* --- Cơ chế mới: ẩn khi cuộn xuống, hiện lại ngay khi cuộn lên
   (thay cho cơ chế hSticky cũ có lỗi "chớp ẩn" ~150px) --- */
#olv-header.header-fixed {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  transition: transform 0.3s ease; }

#olv-header.header-fixed.header-hide {
  transform: translateY(-100%); }

.menu-dt .nav-menu {
  margin-left: -10px; }

.olv-header__container .menu-link,
.olv-header__container .header-actions .link-action,
.olv-header__container .act-lang a {
  color: #e8398f; }

.olv-header__container .menu-link {
  font-size: 14px; }

.header-actions__divider {
  background: rgba(0, 0, 0, 0.2) !important; }

/* --- Icon "Hệ thống cửa hàng" trên nav: chỉ hiện trên mobile/tablet
   (thay cho icon điện thoại, vẫn giữ trên desktop) --- */
.show-mb-only {
  display: none; }

@media (max-width: 991px) {
  .show-mb-only {
    display: block; } }

/* ============================================================
   THANH MENU BAR — Logo + chiều cao, gom về đúng 1 khối duy nhất,
   dùng height cố định (không phụ thuộc padding/nội dung để tránh
   sai lệch). Không còn rule nào khác nằm rải rác nơi khác.
   ============================================================ */
.olv-header__container {
  display: flex;
  align-items: center;
  box-sizing: border-box; }

@media (max-width: 1023px) {
  .olv-header__container {
    height: 56px; }
  .header-logo.col-lg-2 img {
    max-width: 70px; } }

@media (min-width: 1024px) and (max-width: 1439px) {
  .olv-header__container {
    height: 74px; }
  .header-logo.col-lg-2 img {
    max-width: 90px; } }

@media (min-width: 1440px) {
  .olv-header__container {
    height: 74px; }
  .header-logo.col-lg-2 img {
    max-width: 110px; } }

/* ================== HẾT KHỐI LOGO + CHIỀU CAO MENU BAR ================== */
.header-row__inner {
  position: relative; }

/* ============================================================
   THANH MENU BAR — Logo LUÔN canh giữa tuyệt đối (mọi màn hình,
   mọi chế độ hiển thị), tách riêng khỏi cơ chế chuyển đổi
   hamburger/desktop bên dưới để tránh phụ thuộc lẫn nhau.
   ============================================================ */
.header-logo.col-lg-2 {
  flex: 0 0 auto;
  width: auto;
  float: none;
  order: 2; }

/* ================== HẾT PHẦN CANH GIỮA LOGO ================== */
/* ============================================================
   THANH MENU BAR — Cơ chế chuyển đổi hamburger <-> thanh chữ đầy
   đủ, gom về đúng 1 khối duy nhất, 1 mốc duy nhất (1440px), không
   còn rule nào khác nằm rải rác nơi khác trong file.
   - <1440px: hiện icon hamburger (☰).
   - ≥1440px: hiện thanh chữ đầy đủ (SALE/BỘ SƯU TẬP/SẢN PHẨM/...).
   ============================================================ */
.menu-dt {
  display: none !important; }

.menu-mb-actions {
  display: flex !important; }

@media (min-width: 1440px) {
  .menu-dt {
    display: flex !important; }
  .menu-mb-actions {
    display: none !important; }
  .header-menu {
    float: none; }
  .col-lg-8.menu-dt {
    width: auto;
    flex: 1 1 0;
    order: 1;
    display: flex; } }

/* ================== HẾT CƠ CHẾ CHUYỂN ĐỔI HAMBURGER/DESKTOP ================== */
#olv-header.is-sticky {
  position: sticky;
  top: 0;
  z-index: 999;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); }

.header-actions__divider {
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, 0.5);
  margin: 0;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0; }

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end; }

.header-actions > li {
  position: relative; }

.action-preview {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background: #fff;
  color: #e8398f;
  border: 1px solid #e8398f;
  min-width: 180px;
  padding: 10px 16px;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  flex-direction: column;
  gap: 8px;
  font-size: 13.5px;
  font-family: "Fz Poppins", "Montserrat", sans-serif;
  text-align: center;
  white-space: nowrap;
  z-index: 20;
  margin-top: 10px; }

.header-actions > li:hover .action-preview {
  display: flex; }

.action-preview a {
  color: #e8398f; }

.action-preview a:hover {
  color: #e8398f; }

/* --- Mega menu hover style giống matemade (mảnh, gọn) --- */
.megamenu-col h4 a, .megamenu-col h4 {
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.04em; }

.megamenu-col--nhucau h4 {
  color: #e8398f; }

.megamenu-container:not(.megamenu-sale) {
  padding: 0 !important; }

.megamenu-container:not(.megamenu-sale) .megamenu-list {
  display: flex;
  flex-wrap: nowrap !important;
  gap: 16px;
  min-height: 300px; }

.megamenu-container:not(.megamenu-sale) .megamenu-col {
  flex: 1 1 0 !important;
  max-width: none !important;
  min-width: 0; }

.megamenu-container:not(.megamenu-sale) .megamenu-col h4,
.megamenu-container:not(.megamenu-sale) .megamenu-col h4 a {
  font-family: "Fz Poppins", "Montserrat", sans-serif;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 14px;
  color: #e8398f; }

.megamenu-container:not(.megamenu-sale) .megamenu-sub a {
  font-family: "Fz Poppins", "Montserrat", sans-serif;
  font-size: 16px; }

.megamenu-container:not(.megamenu-sale) .megamenu-sub li.menu-item a.menu-link,
.megamenu-container:not(.megamenu-sale) .megamenu-sub li a.menu-link {
  font-family: "Fz Poppins", "Montserrat", sans-serif !important;
  font-size: 16px !important;
  color: #e8398f !important; }

.megamenu-container:not(.megamenu-sale) .megamenu-sub li:not(:last-child) {
  margin-bottom: 10px; }

.megamenu-sale .megamenu-lv2 a {
  font-family: "Fz Poppins", "Montserrat", sans-serif;
  font-size: 16px;
  color: #e8398f; }

.megamenu-container.megamenu-sale .megamenu-lv2 li a {
  font-family: "Fz Poppins", "Montserrat", sans-serif !important;
  font-size: 16px !important;
  color: #e8398f !important; }

/* Bỏ padding ẩn 34px/20px không cân đối của .megamenu-container gốc
   (chỉ áp dụng cho SALE/BỘ SƯU TẬP) - đây là nguyên nhân gây lệch trái
   và lệch trên/dưới, vì nó cộng dồn với padding của khung ngoài */
.megamenu-container.megamenu-sale {
  padding: 0 !important;
  box-sizing: border-box; }

.megamenu-container.megamenu-sale .megamenu-list {
  align-items: stretch !important;
  min-height: 300px;
  /* Ghi đè rule gốc của theme (flex:0 0 30%; max-width:30%) — rule đó
     viết cho cấu trúc HTML cũ (banner là cột riêng cạnh megamenu-list),
     còn cấu trúc thật hiện tại lồng .megamenu-banner BÊN TRONG
     .megamenu-list, nên bị ép hẹp 30% khiến ảnh rớt xuống dòng dưới. */
  flex: 1 1 auto !important;
  max-width: none !important;
  width: 100% !important; }

.megamenu-banner {
  gap: 18px !important;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 40px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  flex-wrap: nowrap !important;
  flex: 1 1 auto !important;
  align-self: stretch;
  box-sizing: border-box; }

.megamenu-banner .mega-banner__col {
  flex: 0 0 auto !important;
  max-width: none !important;
  min-width: 0 !important;
  align-self: stretch; }

.megamenu-banner .mega-banner__col a {
  display: block;
  width: auto; }

.megamenu-banner .mega-banner__col img {
  height: 276px;
  width: auto;
  aspect-ratio: 3/4;
  object-fit: cover;
  display: block; }

.megamenu-wrapper {
  position: fixed !important;
  top: var(--olv-header-height, 110px) !important;
  left: 0 !important;
  right: auto !important;
  transform: none !important;
  width: 100vw !important;
  background: #fff;
  border: 1px solid #ffd6e8;
  box-sizing: border-box; }

#olv-header .menu-item .megamenu-wrapper,
#olv-header .menu-item.megamenu .megamenu-wrapper {
  position: fixed !important;
  left: 0 !important;
  right: auto !important;
  width: 100vw !important;
  max-width: 100vw !important; }

.megamenu-wrapper .container {
  max-width: 100% !important;
  width: 100% !important;
  padding: 32px 40px !important; }

/* --- Contact panel (menu Liên hệ) --- */
.megamenu-wrapper--contact .contact-panel {
  display: flex;
  gap: 40px;
  padding: 28px 0; }

.contact-panel__info {
  width: 220px;
  flex: none; }

.contact-panel__info h4, .contact-panel__stores h4 {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 14px;
  margin-bottom: 14px; }

.contact-info-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px; }

.contact-info-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 13px; }

.contact-panel__stores {
  flex: 1; }

.store-locator {
  display: flex;
  gap: 0;
  height: 260px;
  border: 1px solid #eee; }

.store-locator__col {
  border-right: 1px solid #eee;
  overflow-y: auto;
  padding: 10px; }

.store-locator__provinces {
  width: 22%; }

.store-locator__branches {
  width: 32%; }

.store-locator__map {
  flex: 1;
  border-right: none;
  padding: 0; }

.store-locator ul {
  list-style: none;
  margin: 0;
  padding: 0; }

.store-locator__provinces li {
  padding: 8px 6px;
  cursor: pointer;
  font-size: 13px;
  border-radius: 2px; }

.store-locator__provinces li.active, .store-locator__provinces li:hover {
  background: #fdeef4;
  color: #e8398f; }

.store-locator__branches li {
  padding: 8px 6px;
  font-size: 12.5px;
  border-bottom: 1px solid #f5f5f5;
  cursor: pointer;
  display: none; }

.store-locator__branches li.active {
  display: block;
  background: #fdeef4; }

.store-locator__branches li strong {
  display: block;
  margin-bottom: 4px; }

.store-locator__branches li span {
  display: block;
  margin-bottom: 2px;
  color: #777; }

.store-locator__note {
  font-size: 11px;
  color: #999;
  margin-top: 10px; }

.contact-page-stores {
  margin: 20px 0 40px; }

.contact-page-stores__title {
  font-family: "Montserrat", "Fz Poppins", "Montserrat", sans-serif;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 20px;
  color: #e8398f; }

.store-locator--page {
  height: 420px; }

/* --- Trang Liên hệ: bố cục 2 cột ngang (1/4 Hotline/Email - 3/4 Hệ thống cửa hàng) --- */
.contact-split-row {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  min-height: 75vh;
  margin-top: 24px;
  clear: both;
  width: 100%;
  box-sizing: border-box; }

.contact-split__info {
  flex: 0 0 340px;
  width: 340px;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 28px;
  padding-right: 24px;
  border-right: 1px solid #eee;
  box-sizing: border-box; }

.contact-split__info .info_contact_hotline strong,
.contact-split__info #info_contact strong {
  display: block;
  font-family: "Montserrat", "Fz Poppins", "Montserrat", sans-serif;
  text-transform: uppercase;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px; }

.contact-split__info .info_contact_hotline p,
.contact-split__info #info_contact p {
  margin: 0;
  color: #1c1917;
  font-size: 15px; }

.contact-form--split {
  margin-top: 16px;
  width: 100%; }

.contact-form--split .form_row {
  margin-bottom: 12px; }

.contact-form--split .form_row input,
.contact-form--split .form_row textarea {
  background: #ffd6e8 !important;
  color: #1c1917;
  border: none;
  border-radius: 4px;
  font-family: "Fz Poppins", "Montserrat", sans-serif; }

.contact-form--split .form_row textarea {
  height: 100px; }

.contact-form--split .form_row input::placeholder,
.contact-form--split .form_row textarea::placeholder {
  color: #a56b85; }

.contact-form--split .btn_contact_send {
  display: block !important;
  width: 100% !important;
  margin: 0 auto !important;
  background: #ff5ca8 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 12px 0 !important;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  text-align: center; }

.contact-split__stores {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0; }

.contact-split__stores .contact-page-stores__title {
  margin-bottom: 16px; }

.contact-split__stores .store-locator--page {
  flex: none;
  height: 420px; }

.contact-split__stores .store-locator__col {
  overflow-y: auto; }

@media (max-width: 767px) {
  .contact-split-row {
    flex-direction: column;
    min-height: 0;
    gap: 24px; }
  .contact-split__info {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    border-right: none;
    border-bottom: 1px solid #eee;
    padding-right: 0;
    padding-bottom: 20px; } }

@media (max-width: 767px) {
  .store-locator--page {
    flex-direction: column;
    height: auto; }
  .store-locator--page .store-locator__col {
    width: 100% !important;
    max-height: 220px; } }

/* --- Hero arrows: đã bỏ hẳn (dùng bấm trái/phải trực tiếp trên banner) --- */
/* --- Thanh trượt kéo tay (dragbar) cho carousel --- */
.js-scroll-track {
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  display: flex !important;
  flex-wrap: nowrap !important; }

.js-scroll-track::-webkit-scrollbar {
  display: none; }

/* Dùng descendant selector (không có ">") để chắc chắn áp dụng được
   dù .pro-loop/.col-xxx có bị lồng thêm 1 lớp bọc trung gian nào đó
   (khác với BST dùng class riêng .category-showcase__item nên không
   bị ảnh hưởng bởi độ sâu lồng, còn selector direct-child này trước
   đây có thể "trượt" không khớp, khiến thẻ sản phẩm rơi về đúng width
   mặc định 25% kiểu Bootstrap 4-cột của nền tảng Haravan). */
.js-scroll-track [class*="col-"] {
  float: none !important;
  flex: 0 0 auto !important;
  width: calc(22% - 12px) !important;
  max-width: calc(22% - 12px) !important;
  min-width: 220px; }

.js-scroll-track.community-list--minimal [class*="col-"] {
  width: calc(22% - 12px) !important;
  max-width: calc(22% - 12px) !important;
  min-width: 220px; }

/* Ép thêm riêng cho .pro-loop bằng chính class thật của nó (không phụ
   thuộc attribute selector/độ sâu lồng), để chắc chắn tuyệt đối thắng
   mọi rule mặc định 25% (col-md-3) của nền tảng. */
.js-scroll-track .pro-loop {
  float: none !important;
  flex: 0 0 auto !important;
  width: calc(22% - 6px) !important;
  max-width: calc(22% - 6px) !important;
  min-width: 220px !important;
  padding-left: 3px !important;
  padding-right: 3px !important; }

@media (max-width: 767px) {
  .js-scroll-track [class*="col-"] {
    width: calc(46% - 4px) !important;
    max-width: calc(46% - 4px) !important;
    min-width: 0; }
  .js-scroll-track.community-list--minimal [class*="col-"] {
    width: calc(46% - 4px) !important;
    max-width: calc(46% - 4px) !important;
    min-width: 0; }
  .js-scroll-track .pro-loop.pro-loop,
  .content-product-list.js-scroll-track .pro-loop,
  .content-product-list-wrapper .pro-loop {
    width: calc(46% - 4px) !important;
    max-width: calc(46% - 4px) !important;
    flex: 0 0 calc(46% - 4px) !important;
    min-width: 0 !important;
    padding-left: 2px !important;
    padding-right: 2px !important; } }

.scroll-dragbar {
  position: relative;
  height: 6px;
  background: #ffd6e8;
  margin: 20px auto 0;
  width: 50%;
  border-radius: 3px;
  cursor: pointer;
  touch-action: none; }

@media (max-width: 767px) {
  .scroll-dragbar {
    display: none !important; } }

/* Chỉ dùng thanh trượt kéo (dragbar), không dùng mũi tên 2 bên cho các
   carousel sản phẩm/BST/OLV MATE */
.section-col .owl-nav,
.section-new-arrivals .owl-nav,
.section-category-showcase .owl-nav,
.section-community--minimal .owl-nav,
.js-scroll-track ~ .owl-nav,
.content-product-list-wrapper .owl-nav,
.content-product-list-wrapper .owl-prev,
.content-product-list-wrapper .owl-next {
  display: none !important; }

.scroll-dragbar__thumb {
  position: absolute;
  top: -2px;
  left: 0;
  width: 30%;
  height: 10px;
  background: #ff5ca8;
  border-radius: 5px;
  cursor: grab; }

/* --- Split banner 2 cột --- */
.section-split-banner {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  box-sizing: border-box; }

.section-split-banner .container {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 3px !important;
  padding-right: 3px !important; }

.split-banner {
  margin-left: 0 !important;
  margin-right: 0 !important; }

.split-banner__item {
  margin-bottom: 0;
  padding-left: 0 !important;
  padding-right: 0 !important; }

.split-banner__link {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 8/9; }

.split-banner__link picture {
  display: block;
  width: 100%;
  height: 100%; }

.split-banner__link img,
.split-banner__link video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease; }

@media (max-width: 767px) {
  .section-split-banner {
    padding-top: 0 !important;
    padding-bottom: 0 !important; }
  .section-split-banner .container {
    padding-left: 12px !important;
    padding-right: 12px !important; }
  .split-banner {
    display: block; }
  .split-banner__item {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    box-sizing: border-box;
    margin-bottom: 3px; }
  .split-banner__item:last-child {
    margin-bottom: 0; }
  .split-banner__link {
    width: 100%;
    box-sizing: border-box; } }

.split-banner__link:hover img {
  transform: scale(1.03); }

.split-banner__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 55%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent); }

.split-banner__text {
  position: absolute;
  left: 28px;
  bottom: 24px;
  color: #fff; }

.split-banner__title {
  display: block;
  font-family: "Turnpike", "Fredoka", sans-serif;
  font-size: 26px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin-bottom: 8px; }

.section-title {
  font-family: "Turnpike", "Fredoka", sans-serif !important; }

.page-collection .section-title {
  font-size: 20px; }

@media (min-width: 1024px) {
  .page-collection .section-title {
    font-size: 26px; } }

.split-banner__desc {
  display: block;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 12px;
  max-width: 320px;
  opacity: 0.92; }

.split-banner__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px; }

/* --- KHÁM PHÁ PHONG CÁCH CỦA BẠN / OLV LOYALTY PROGRAM --- */
.section-quiz-loyalty {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important; }

.section-quiz-loyalty .container {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 3px !important;
  padding-right: 3px !important; }

.quiz-loyalty-banner {
  margin-left: 0 !important;
  margin-right: 0 !important; }

.quiz-loyalty-banner__item {
  margin-bottom: 0;
  padding-left: 0 !important;
  padding-right: 0 !important; }

.quiz-loyalty-banner__link {
  position: relative;
  display: block;
  overflow: hidden;
  height: 105vh; }

.quiz-loyalty-banner__link picture {
  display: block;
  width: 100%;
  height: 100%; }

.quiz-loyalty-banner__link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease; }

@media (max-width: 767px) {
  .section-quiz-loyalty .container {
    padding-left: 12px !important;
    padding-right: 12px !important; }
  .quiz-loyalty-banner {
    display: block; }
  .quiz-loyalty-banner__item {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    box-sizing: border-box;
    margin-bottom: 3px; }
  .quiz-loyalty-banner__item:last-child {
    margin-bottom: 0; }
  .quiz-loyalty-banner__link {
    height: 70vh;
    width: 100%;
    box-sizing: border-box; } }

.quiz-loyalty-banner__link:hover img {
  transform: scale(1.03); }

.quiz-loyalty-banner__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 55%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent); }

.quiz-loyalty-banner__text {
  position: absolute;
  left: 28px;
  bottom: 24px;
  color: #fff; }

.quiz-loyalty-banner__title {
  display: block;
  font-family: "Montserrat", "Fz Poppins", "Montserrat", sans-serif;
  font-size: 26px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin-bottom: 8px; }

.quiz-loyalty-banner__desc {
  display: block;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 12px;
  max-width: 320px;
  opacity: 0.92; }

.quiz-loyalty-banner__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #fff; }

/* --- Category showcase (BỘ SƯU TẬP) --- */
.category-showcase {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  padding-bottom: 4px; }

.category-showcase__item {
  flex: 0 0 auto;
  width: 22%;
  min-width: 220px;
  text-align: left; }

@media (max-width: 767px) {
  .category-showcase__item {
    width: 46%;
    min-width: 0; } }

.category-showcase__image {
  width: 100%;
  aspect-ratio: 3/4;
  overflow: hidden;
  border-radius: 6px;
  background: #f7f5f3; }

.category-showcase__image picture {
  display: block;
  width: 100%;
  height: 100%; }

.category-showcase__image--all {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #ff5ca8; }

.category-showcase__image--all span {
  color: #fff;
  font-family: "Montserrat", "Fz Poppins", "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 0 20px; }

.category-showcase__image img,
.category-showcase__image video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease; }

.category-showcase__item:hover .category-showcase__image img,
.category-showcase__item:hover .category-showcase__image video {
  transform: scale(1.05); }

.category-showcase__label {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  color: #e8398f !important;
  text-align: center; }

.category-showcase__desc {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #999;
  line-height: 1.4; }

/* --- Community/KOL gallery minimal (edge-to-edge, không caption) --- */
.community-list--minimal .community-item {
  padding: 0 4px; }

.community-box--minimal .community-image {
  aspect-ratio: 3/4;
  overflow: hidden;
  border-radius: 6px;
  position: relative;
  display: block; }

.community-embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

.community-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  border: none; }

.community-box--minimal .community-image img,
.community-box--minimal .community-image video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  display: block; }

.community-name-badge {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: inline-block;
  max-width: calc(100% - 20px);
  padding: 6px 14px;
  border-radius: 20px;
  background: #ffd6e8;
  color: #ff5ca8;
  font-family: "Montserrat", "Fz Poppins", "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none; }

.community-box--minimal .community-image:hover .community-name-badge {
  opacity: 1;
  transform: translateY(0); }

/* --- Footer hồng theo brand, full-width sát mép --- */
.olv-footer--pink {
  background: #ffd6e8;
  color: #e8398f;
  max-width: 100%;
  width: 100%;
  margin: 0; }

/* --- Full-width sát mép cho SPECIAL DEAL / BỘ SƯU TẬP / OLV CÓ GÌ MỚI / OLV MATE --- */
.section-col,
.section-category-showcase,
.section-new-arrivals,
.section-community--minimal {
  padding-left: 0 !important;
  padding-right: 0 !important; }

.section-col .container,
.section-category-showcase .container,
.section-new-arrivals .container,
.section-community--minimal .container {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 24px !important;
  padding-right: 24px !important; }

.section-col .content-product-list,
.section-category-showcase .category-showcase,
.section-new-arrivals .content-product-list,
.section-community--minimal .community-list--minimal {
  padding-right: 24px; }

@media (max-width: 767px) {
  .section-col .container,
  .section-category-showcase .container,
  .section-new-arrivals .container,
  .section-community--minimal .container {
    padding-left: 12px !important;
    padding-right: 12px !important; }
  .section-col .content-product-list,
  .section-category-showcase .category-showcase,
  .section-new-arrivals .content-product-list,
  .section-community--minimal .community-list--minimal {
    padding-right: 12px; } }

.olv-footer--pink .footer-title,
.olv-footer--pink .footer-link a,
.olv-footer--pink .footer-link li a,
.olv-footer--pink .footer-contact span,
.olv-footer--pink .footer-contact li a,
.olv-footer--pink .footer-contact li,
.olv-footer--pink .newsletter-title {
  color: #e8398f !important; }

.olv-footer--pink .footer-contact li a {
  text-decoration: none; }

.olv-footer--pink .footer-contact li a:hover {
  text-decoration: underline; }

.olv-footer--pink .footer-link a:hover {
  opacity: .7; }

.submenu--groups > li > a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between; }

.submenu--groups > li > a .btn-submenu {
  position: static !important; }

.submenu--groups > li > ul.submenu {
  padding-left: 16px; }

#main_cate_menu .menu-mobile-scroll > li > a {
  color: #e8398f !important; }

#main_cate_menu ul ul a {
  color: #e8398f !important; }

.olv-header__container .menu-link.highlight,
#main_cate_menu .menu-mobile-scroll li a.highlight {
  color: #e8398f !important; }

.footer-logo--top {
  padding: 32px 0 8px; }

.footer-logo--top img {
  height: 32px; }

.olv-footer--pink .footer-title {
  font-family: "Montserrat", "Fz Poppins", "Montserrat", sans-serif;
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 18px; }

.olv-footer--pink .footer-link li a {
  font-size: 14px;
  font-weight: 400;
  opacity: .85; }

.footer-title--sub {
  margin-top: 18px;
  font-size: 12px; }

.olv-footer--pink .newsletter-input {
  border: 1px solid #e8398f;
  background: #ffd6e8;
  color: #e8398f;
  height: 53px !important;
  padding: 0 15px !important;
  font-size: 16px; }

.olv-footer--pink .newsletter-btn {
  height: 53px !important; }

.olv-footer--pink .newsletter-input::placeholder {
  color: #e8398f;
  opacity: .6; }

.olv-footer--pink .newsletter-btn {
  background: #e8398f;
  color: #ffd6e8;
  border: 1px solid #e8398f;
  text-transform: uppercase;
  font-size: 16px;
  padding: 0 27px; }

.newsletter-content .form-group {
  display: flex !important;
  gap: 0 !important;
  border-radius: 4px;
  overflow: hidden;
  width: 75%; }

@media (max-width: 767px) {
  .newsletter-content .form-group {
    width: 100%; } }

.newsletter-content .newsletter-input {
  flex: 1 1 auto;
  border-radius: 4px 0 0 4px !important;
  border-right: 0 !important; }

.newsletter-content .newsletter-btn {
  flex: 0 0 auto;
  border-radius: 0 4px 4px 0 !important;
  white-space: nowrap; }

.footer-badge img {
  height: 52px;
  margin-top: 0; }

.footer-payment {
  display: flex;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  flex-wrap: wrap; }

.payment-icon-minimal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(232, 57, 143, 0.12);
  color: #e8398f;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  height: 32px;
  padding: 0 14px;
  border-radius: 16px; }

.payment-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 6px 10px;
  border-radius: 4px;
  min-width: 44px;
  height: 26px; }

.payment-icon--visa {
  color: #1a1f71;
  font-style: italic; }

.payment-icon--master {
  color: #eb001b; }

.payment-icon--jcb {
  color: #0e4c96; }

.payment-icon--momo {
  color: #a50064; }

.olv-footer--pink .footer-contact li {
  color: #1c1917; }

.olv-footer--pink .footer-contact li svg {
  color: #e8398f; }

/* --- Mobile nav: hamburger + search cạnh nhau (giống matemade) --- */
.menu-mb-actions {
  display: flex;
  align-items: center;
  gap: 14px; }

.act-search--mb {
  display: flex;
  align-items: center;
  color: #e8398f; }

.act-search--mb svg {
  width: 20px;
  height: 20px; }

.btn-menu-mb {
  color: #e8398f; }

.olv-footer--pink .footer-social a {
  background: rgba(232, 57, 143, 0.12) !important;
  color: #e8398f !important; }

.olv-footer--pink .footer-social a:hover {
  background: #ff5ca8 !important;
  color: #fff !important; }

/* ============================================================
   FOOTER — Thứ tự cột, icon mạng xã hội, khối Thanh toán, accordion
   mobile. Gom toàn bộ về đây, không còn rule nào rải rác nơi khác.
   ============================================================ */
.footer-main__row {
  display: flex !important;
  flex-wrap: wrap !important; }

/* Thứ tự cột desktop: VỀ OLV(mặc định 1) -> CHÍNH SÁCH(2) -> LIÊN HỆ(3)
   -> Newsletter(4, đẩy ra cuối) -> Thanh toán(5, dòng riêng dưới cùng) */
.footer-col--newsletter {
  order: 4; }

.footer-col--bottom {
  order: 5;
  margin-top: 0; }

.footer-col--bottom .footer-title--sub,
.footer-col--bottom .footer-payment {
  display: none; }

/* Icon mạng xã hội: bản mobile (trong Newsletter) và bản desktop
   (trong LIÊN HỆ) - mặc định ẩn bản desktop, hiện bản mobile;
   đảo lại từ 768px trở lên */
.footer-social--top {
  display: flex;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 10px 0 0; }

.footer-social--desktop {
  display: none;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0; }

.footer-social--desktop-label {
  margin-top: 24px !important;
  margin-bottom: 10px !important; }

.footer-social--top li a,
.footer-social--desktop li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%; }

@media (min-width: 768px) {
  .footer-social--top {
    display: none; }
  .footer-social--desktop {
    display: flex; }
  .footer-col--bottom {
    display: none !important; } }

/* Badge/logo "Đã thông báo Bộ Công Thương" - chỉ hiện desktop */
.footer-badge--desktop {
  margin-top: 0; }

.footer-badge.footer-badge--desktop {
  margin-top: 18px; }

.footer-title--sub.footer-badge--desktop {
  margin-top: 18px;
  margin-bottom: 18px; }

.footer-payment.footer-badge--desktop {
  margin-top: 0; }

@media (max-width: 767px) {
  .footer-badge--desktop {
    display: none !important; } }

/* Accordion tự viết (div, không dùng details/summary) cho
   VỀ OLV / CHÍNH SÁCH / LIÊN HỆ - kiểm soát hoàn toàn bằng JS/CSS */
.footer-accordion__trigger {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none; }

.footer-accordion__chevron {
  flex-shrink: 0;
  transition: transform .2s ease; }

.footer-accordion.is-open .footer-accordion__chevron {
  transform: rotate(180deg); }

.footer-accordion .footer-link,
.footer-accordion .footer-contact {
  margin-top: 6px; }

.footer-accordion__content {
  display: none; }

.footer-accordion.is-open .footer-accordion__content {
  display: block; }

@media (max-width: 767px) {
  .footer-main__row {
    gap: 0 !important; }
  .footer-col {
    padding-top: 0 !important;
    margin-top: 0 !important; }
  .footer-social--desktop-label {
    display: none !important; }
  .footer-title {
    margin-bottom: 10px !important; }
  .footer-title--sub {
    margin-top: 10px !important; }
  .footer-col--newsletter {
    order: -1;
    padding-bottom: 20px;
    margin-bottom: 20px; }
  .footer-col__box--newsletter {
    display: flex;
    flex-direction: column; }
  .footer-title--newsletter-desktop {
    display: none; }
  .footer-title--newsletter-mobile {
    display: block;
    order: 1; }
  .footer-social--top {
    order: 2;
    margin-top: 0; }
  .newsletter-content {
    order: 3;
    margin-top: 14px; }
  .footer-col--bottom {
    order: 5; }
  .footer-accordion {
    padding-bottom: 0;
    margin-bottom: 14px; }
  .footer-accordion:last-of-type {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding-bottom: 20px;
    margin-bottom: 20px; }
  .footer-accordion .footer-title {
    margin-bottom: 0 !important; }
  .footer-accordion .footer-link,
  .footer-accordion .footer-contact {
    margin-top: 14px; } }

/* ============================================================
   FOOTER — Riêng khoảng 768px-991px (tablet, 2 cột/dòng):
   Dòng 1: VỀ OLV | LIÊN HỆ
   Dòng 2: CHÍNH SÁCH | "THEO DÕI CHÚNG TÔI"
   Cột "THEO DÕI CHÚNG TÔI" gộp nội dung Newsletter + Thanh toán,
   thứ tự: icon mạng xã hội -> ô email -> logo BCT -> logo thanh toán
   ============================================================ */
@media (min-width: 768px) and (max-width: 991px) {
  .footer-main__row > div:nth-child(2) {
    order: 1; }
  /* VỀ OLV */
  .footer-main__row > div:nth-child(4) {
    order: 2; }
  /* LIÊN HỆ */
  .footer-main__row > div:nth-child(3) {
    order: 3; }
  /* CHÍNH SÁCH */
  .footer-col--newsletter {
    order: 4; }
  .footer-col--bottom {
    display: none !important; }
  .footer-main__row > div:nth-child(4) .footer-social--desktop-label,
  .footer-main__row > div:nth-child(4) .footer-social--desktop {
    display: none !important; }
  .footer-col__box--newsletter {
    display: flex;
    flex-direction: column; }
  .footer-title--newsletter-desktop {
    display: none; }
  .footer-title--newsletter-mobile {
    display: block;
    order: 1; }
  .footer-social--top {
    display: flex !important;
    order: 2;
    margin-top: 0; }
  .newsletter-content {
    order: 3;
    margin-top: 14px; }
  .footer-badge--desktop {
    order: 4; }
  .footer-badge.footer-badge--desktop {
    margin-top: 14px; }
  .footer-title--sub.footer-badge--desktop {
    display: none; }
  .footer-payment.footer-badge--desktop {
    margin-top: 14px !important; } }

@media (min-width: 768px) {
  .footer-accordion__trigger {
    cursor: default;
    pointer-events: none; }
  .footer-accordion__chevron {
    display: none; }
  .footer-accordion__content {
    display: block !important; } }

/* --- Menu mobile (hamburger drawer): không full màn hình, giống matemade --- */
#main_cate_menu .cate_menu-wrapper {
  width: 85% !important;
  max-width: 380px !important; }

.mobile-menu-login {
  padding: 4px 0 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between; }

.mobile-menu-login a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #e8398f;
  font-size: 15px;
  font-weight: 500; }

.btn-menu-close--inline {
  background: none;
  border: 0;
  outline: 0;
  padding: 4px;
  line-height: 1;
  color: #e8398f;
  cursor: pointer; }

/* --- Nút "Thêm vào giỏ hàng" hover trên ảnh sản phẩm: cách mép 8px,
   bo góc nhẹ, có viền khung quanh cả thẻ khi hover - giống matemade --- */
.product-act__wrapper {
  width: 100% !important;
  padding: 8px !important;
  left: 0;
  right: 0;
  box-sizing: border-box; }

.product-act__wrapper .btn-addcart-qv {
  width: 100% !important;
  border-radius: 4px !important;
  padding: 12px 0 !important;
  box-sizing: border-box;
  background: #ffd6e8 !important;
  border: 1px solid #e8398f !important;
  color: #e8398f !important; }

.product-act__wrapper .btn-addcart-qv:hover {
  background: #ffc2de !important; }

.pro-loop .product-block {
  border: 1px solid transparent;
  border-radius: 6px;
  overflow: hidden;
  transition: border-color .25s ease; }

.pro-loop .product-block:hover {
  border-color: #e8398f; }

@media (max-width: 1199px) {
  .product-act__wrapper {
    opacity: 1 !important;
    visibility: visible !important; } }

/* --- Trang Promotion: grid nhiều thẻ chương trình khuyến mãi,
   lấy dữ liệu từ mục 6 (10 mục "Chi tiết chương trình khuyến mãi") --- */
.promotion-page {
  padding-top: 32px;
  padding-bottom: 60px; }

.promotion-hero {
  position: relative;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 32px;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box; }

.promotion-hero__picture {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1; }

.promotion-hero__picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block; }

.promotion-hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 32px 24px; }

.promotion-hero__title {
  font-family: "Montserrat", "Fz Poppins", "Montserrat", sans-serif;
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 8px;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35); }

.promotion-hero__desc {
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35); }

.promotion-hero--noimg {
  background: #ffd6e8;
  min-height: auto; }

.promotion-hero--noimg .promotion-hero__title {
  color: #e8398f;
  text-shadow: none; }

.promotion-hero--noimg .promotion-hero__desc {
  color: #e8398f;
  text-shadow: none; }

@media (max-width: 767px) {
  .promotion-hero {
    min-height: 180px; }
  .promotion-hero__title {
    font-size: 22px; } }

@media (min-width: 768px) {
  .promotion-page {
    padding-top: 0; }
  .promotion-hero {
    width: calc(100vw - 60px);
    margin-left: calc(-50vw + 50% + 30px);
    margin-right: calc(-50vw + 50% + 30px);
    border-radius: 0;
    height: 300px;
    min-height: 300px;
    max-height: 300px; }
  .promotion-hero--noimg {
    min-height: 300px; } }

.promotion-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px; }

@media (max-width: 991px) {
  .promotion-grid {
    grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 600px) {
  .promotion-grid {
    grid-template-columns: 1fr;
    gap: 20px; } }

@media (min-width: 992px) {
  .promotion-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; }
  .promotion-grid .promotion-card {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: calc((100% - 48px) / 3);
    scroll-snap-align: start; }
  .promotion-more {
    display: flex; } }

.promotion-dragbar {
  margin-top: 10px !important; }

.promotion-more {
  display: none;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 10px;
  color: #e8398f;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  opacity: 1;
  transition: opacity .2s ease; }

.promotion-more.is-hidden {
  opacity: 0;
  pointer-events: none; }

.promotion-card {
  display: block;
  text-decoration: none;
  color: #1c1917; }

.promotion-card__image {
  position: relative;
  width: 100%;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: #f7f5f3;
  border-radius: 4px; }

.promotion-card__image picture {
  display: block;
  width: 100%;
  height: 100%; }

.promotion-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease; }

.promotion-card:hover .promotion-card__image img {
  transform: scale(1.05); }

.promotion-card__body {
  display: flex;
  flex-direction: column;
  margin-top: 12px; }

.promotion-card__title {
  font-family: "Montserrat", "Fz Poppins", "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: #e8398f;
  margin-bottom: 6px; }

.promotion-card__desc {
  font-size: 13px;
  line-height: 1.5;
  color: #777;
  margin-bottom: 8px; }

.promotion-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #e8398f; }

.promotion-empty {
  text-align: center;
  padding: 80px 20px;
  color: #999;
  font-size: 15px; }

/* --- Trang Liên hệ (thiết kế mới): Thông tin liên hệ + Form + Bản đồ tĩnh --- */
.page-pd--contact {
  padding-top: 0 !important;
  padding-bottom: 0 !important; }

.contact-page--v2 .container {
  padding-top: 15px;
  padding-bottom: 60px; }

.contact-page--v2 .container > .col-md-12 {
  padding-left: 0 !important;
  padding-right: 0 !important; }

.contact-v2-row {
  display: flex;
  gap: 0;
  align-items: stretch;
  margin-top: 24px;
  width: 100%; }

.contact-v2__left {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 60%;
  width: 60%;
  max-width: 60%;
  box-sizing: border-box;
  padding-right: 40px; }

.contact-v2__right {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 40%;
  width: 40%;
  max-width: 40%;
  min-height: 600px;
  box-sizing: border-box;
  border: 1px solid #e8398f;
  border-radius: 8px;
  overflow: hidden; }

.contact-v2__right iframe {
  width: 100%;
  height: 100%;
  min-height: 600px;
  display: block; }

.contact-v2__heading {
  font-family: "Montserrat", "Fz Poppins", "Montserrat", sans-serif;
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 20px;
  color: #ffd6e8; }

.contact-v2__heading--form {
  margin-top: 40px;
  color: #e8398f; }

.contact-v2__info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px; }

.contact-v2__info-item {
  display: flex;
  align-items: flex-start;
  gap: 12px; }

.contact-v2__info-item strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
  color: #ffd6e8; }

.contact-v2__info-item p {
  margin: 0;
  color: #ffd6e8;
  font-size: 14px;
  line-height: 1.5; }

.contact-v2__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #ffd6e8;
  color: #ffd6e8;
  display: flex;
  align-items: center;
  justify-content: center; }

.contact-v2__info-section .contact-v2__heading--info,
.contact-v2__info-section strong,
.contact-v2__info-section p {
  color: #e8398f !important; }

.contact-v2__info-section .contact-v2__icon {
  border-color: #e8398f;
  color: #e8398f; }

.contact-v2__desc {
  color: #e8398f;
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 20px; }

.contact-v2__field {
  margin-bottom: 16px; }

.contact-v2__field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px; }

.contact-v2__input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #e8398f !important;
  border-radius: 6px !important;
  padding: 14px 16px;
  height: 50px;
  font-size: 14px;
  font-family: "Fz Poppins", "Montserrat", sans-serif;
  color: #1c1917; }

.contact-v2__input::placeholder {
  color: #ffd6e8; }

.contact-v2__textarea {
  height: 140px;
  resize: vertical; }

.contact-v2__submit {
  display: inline-block;
  background: #ffd6e8;
  color: #e8398f;
  border: none;
  border-radius: 6px;
  padding: 14px 32px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer; }

.contact-v2__submit:hover {
  background: #ffc2de; }

.contact-v2__success {
  color: #2e7d32;
  font-size: 14px;
  margin-bottom: 16px; }

@media (max-width: 767px) {
  .contact-v2-row {
    flex-direction: column;
    gap: 32px; }
  .contact-v2__left {
    flex-basis: auto;
    width: 100%;
    max-width: 100%;
    padding-right: 0; }
  .contact-v2__info-grid {
    grid-template-columns: 1fr; }
  .contact-v2__field-row {
    grid-template-columns: 1fr; }
  .contact-v2__right {
    flex-basis: auto;
    width: 100%;
    max-width: 100%;
    min-height: 320px; }
  .contact-v2__right iframe {
    min-height: 320px; } }

/* --- Trang Hệ thống cửa hàng (tách riêng khỏi Liên hệ) --- */
.contact-page-stores-page .container {
  padding-top: 15px;
  padding-bottom: 50px; }

.contact-page-stores-page .container > .col-md-12 {
  padding-left: 0 !important;
  padding-right: 0 !important; }

.store-locator--full {
  height: 420px;
  align-items: stretch;
  border: none;
  gap: 20px; }

.store-locator--full .store-locator__left {
  display: flex;
  flex-direction: column;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(50% - 10px);
  width: calc(50% - 10px);
  box-sizing: border-box;
  gap: 10px;
  position: relative; }

.store-locator--full .store-province-dropdown {
  position: static;
  z-index: 2; }

.store-locator--full .store-province-trigger {
  width: 100%;
  height: 50px;
  background: #fff;
  border: 1px solid #e8398f;
  border-radius: 8px;
  color: #e8398f;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
  padding: 0 16px;
  cursor: pointer;
  text-align: left;
  box-sizing: border-box;
  font-family: "Fz Poppins", "Montserrat", sans-serif; }

.store-locator--full .store-province-menu {
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  border: 1px solid #e8398f;
  border-radius: 8px;
  z-index: 10;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 6px 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease; }

.store-locator--full .store-province-dropdown.is-open .store-province-menu {
  opacity: 1;
  visibility: visible; }

.store-locator--full .store-province-menu li {
  padding: 10px 16px;
  cursor: pointer;
  font-size: 13px; }

.store-locator--full .store-province-menu li.active,
.store-locator--full .store-province-menu li:hover {
  background: #fdeef4;
  color: #e8398f; }

.store-locator--full .store-locator__branches {
  flex: 1;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #e8398f;
  border-radius: 8px;
  background: #fff;
  overflow-y: auto;
  padding: 10px;
  border-right: none; }

.store-locator--full .store-locator__map {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(50% - 10px);
  width: calc(50% - 10px);
  box-sizing: border-box;
  border: 1px solid #e8398f;
  border-radius: 8px;
  overflow: hidden;
  padding: 0;
  border-right: none; }

.store-locator--full .store-locator__left,
.store-locator--full .store-locator__left * {
  color: #e8398f; }

.store-locator--full .store-locator__branches li {
  box-sizing: border-box;
  width: 100%; }

.store-locator--full .store-locator__branches li strong {
  font-weight: 700; }

.store-locator--full .store-branch-line3 {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-top: 2px; }

.store-locator--full .store-branch-icon-text {
  display: inline-flex;
  align-items: center;
  gap: 6px; }

.store-locator--full .store-branch-icon-text svg {
  flex-shrink: 0; }

@media (max-width: 767px) {
  .store-locator--full {
    flex-direction: column;
    height: auto;
    gap: 10px; }
  .store-locator--full .store-locator__left {
    width: 100% !important;
    flex-basis: auto !important; }
  .store-locator--full .store-locator__branches {
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    flex-basis: 300px !important;
    height: 300px; }
  .store-locator--full .store-locator__map {
    width: 100% !important;
    flex-basis: auto !important;
    height: 300px; }
  .store-locator--full .store-locator__map iframe {
    height: 100% !important; } }

/* --- Trang Hệ thống cửa hàng: banner ảnh full-width bên dưới Khung 2-3 --- */
.store-banner-list {
  margin-top: 20px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px; }

.store-banner-item img {
  width: 100%;
  height: auto;
  display: block; }

/* --- Vá lỗi popup (newsletter): theme gốc thiếu breakpoint khoảng
   601px-1199px (đúng tầm iPad/tablet), khiến popup bị giãn full màn
   hình. Bổ sung kích thước hợp lý cho khoảng này. --- */
@media screen and (min-width: 601px) and (max-width: 1199px) {
  .newletter-popup.engo-popup .content {
    width: 500px;
    max-width: 80%; } }

/* --- Overlay tìm kiếm gợi ý trực tiếp: bên trái màn hình, tông hồng OLV,
   gồm 2 phần: Phần 1 (40%, nền trắng, nội dung tìm kiếm) + Phần 2 (15%,
   nền hồng nhạt, nút X đóng góc trên phải) --- */
.search-site {
  background: rgba(0, 0, 0, 0.45) !important;
  transform: translateX(-200%);
  height: 100vh !important;
  height: 100dvh !important;
  width: 100% !important;
  display: flex !important;
  align-items: stretch !important;
  right: auto !important;
  left: 0 !important;
  pointer-events: none; }

body.open-search .search-site {
  transform: translateX(0); }

.search-site .search-container {
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  flex-basis: 40% !important;
  width: 40% !important;
  max-width: 40% !important;
  height: 100vh !important;
  height: 100dvh !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding-top: 30px;
  pointer-events: auto; }

.search-top-links {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 24px !important; }

.search-top-links a {
  color: #e8398f;
  font-size: 14px; }

.search-top-links a:hover {
  color: #e8398f; }

.search-top-icon {
  margin-left: auto;
  color: #e8398f;
  display: flex; }

.search-form {
  margin-top: 40px !important;
  padding: 0 24px !important;
  display: block !important; }

.search-form .form-search input {
  width: 100%;
  border: none !important;
  padding: 10px 0 !important;
  font-size: 16px;
  color: #e8398f !important;
  background: #fff !important;
  height: auto !important;
  border-radius: 0 !important; }

.search-form .form-search input::placeholder {
  color: #ffd6e8; }

.search-divider {
  height: 1px;
  background: #e8398f;
  margin: 10px 24px 0 !important; }

.search-content {
  margin-top: 10px;
  padding: 0 24px !important;
  flex: 1;
  overflow-y: auto; }

.search-content .title-group {
  padding: 15px 0 !important;
  margin: 0 !important; }

.search-content .list-keyword {
  padding: 0 !important;
  margin: 0 !important; }

.search-content .search-results {
  padding: 0 !important; }

.search-site .search-side-close {
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  flex-basis: 20% !important;
  width: 20% !important;
  max-width: 20% !important;
  height: 100vh !important;
  height: 100dvh !important;
  background: #ffd6e8;
  box-sizing: border-box;
  position: relative;
  pointer-events: auto; }

.search-site .btn-close-search {
  position: absolute;
  top: 20px;
  right: calc(40% + 20px);
  background: none;
  border: none;
  color: #e8398f;
  cursor: pointer;
  padding: 0;
  display: flex;
  pointer-events: auto;
  z-index: 10; }

@media (max-width: 767px) {
  .search-site .btn-close-search {
    right: 20px; } }

.search-site .form-search button {
  color: #e8398f; }

.search-site .title-group {
  background: #fdf2f7;
  color: #e8398f; }

.search-site .list-keyword li a {
  color: #1c1917; }

.search-site .list-keyword li a:hover {
  color: #e8398f; }

.search-site .item-ult {
  flex-direction: row-reverse; }

.search-site .item-ult .thumbs {
  margin-left: 15px; }

.search-site .item-ult .title {
  padding-left: 0; }

.search-site .item-ult .title a {
  color: #1c1917; }

.search-site .item-ult .title a:hover {
  color: #e8398f; }

.search-site .item-ult .price-cur {
  color: #e8398f;
  font-weight: 600; }

.search-site .resultsMore a {
  color: #e8398f;
  font-weight: 600; }

.search-quicklinks {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  padding: 0 24px 20px !important;
  flex-shrink: 0; }

.search-quicklinks a {
  color: #e8398f;
  font-size: 13px;
  text-decoration: none; }

@media (max-width: 767px) {
  .search-top-links {
    display: none; }
  .search-site {
    width: 100% !important;
    flex-direction: column !important; }
  .search-site .search-container {
    flex-basis: 70% !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 70% !important;
    max-height: 70% !important; }
  .search-site .search-side-close {
    flex-basis: 30% !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 30% !important;
    max-height: 30% !important; }
  .search-quicklinks {
    flex-direction: row;
    gap: 24px;
    padding: 0 24px 10px; }
  .search-quicklinks a:last-child {
    display: none; } }

/* --- Nút "Liên hệ" nổi thay Zalo: vòng tròn đen, icon chat, lắc qua lắc lại --- */
.social-chat .contact-bubble {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: #fff;
  color: #e8398f;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  text-decoration: none;
  animation: contactBubbleSway 1.6s ease-in-out infinite;
  transform-origin: bottom center;
  border: none;
  cursor: pointer;
  font-family: inherit; }

.social-chat .contact-bubble svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0; }

.social-chat .contact-bubble span {
  color: #e8398f;
  font-size: 8px;
  font-weight: 600;
  line-height: 1; }

@keyframes contactBubbleSway {
  0%, 100% {
    transform: rotate(-8deg); }
  50% {
    transform: rotate(8deg); } }

/* --- Popup 2 dòng khi bấm nút Liên hệ: Gọi ngay / Chat Zalo --- */
.contact-bubble-wrap {
  position: relative; }

.contact-popup {
  position: absolute;
  bottom: calc(100% + 12px);
  right: 0;
  width: 260px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s; }

.contact-popup.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0); }

.contact-popup__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  text-decoration: none;
  color: #e8398f;
  font-size: 13.5px;
  border-bottom: 1px solid #f5f5f5; }

.contact-popup__item:last-child {
  border-bottom: none; }

.contact-popup__item:hover {
  background: #fdf2f7; }

.contact-popup__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffd6e8;
  color: #e8398f;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0; }

.contact-popup__icon--zalo {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em; }

/* --- Nút "Xem chi tiết" góc dưới trái banner slider --- */
.slide-item__media {
  width: 100%;
  height: 100%;
  position: relative; }

.slide-item__media picture, .slide-item__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block; }

.slide-item__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  top: 0;
  left: 0; }

/* ============================================================
   BANNER SLIDER CHÍNH (đầu trang chủ) — Toàn bộ cơ chế tỉ lệ
   khung hình + chuyển ảnh/video Desktop-Mobile gom về đúng 1 khối
   duy nhất tại đây, mốc chuyển đổi thống nhất là 768px, không còn
   rule nào khác nằm rải rác nơi khác trong file.
   - <768px: khung 9:16 (dọc), dùng ảnh/video Mobile.
   - ≥768px: khung 2.56:1 (ngang), dùng ảnh/video Desktop.
   ============================================================ */
.home-slider {
  aspect-ratio: 9/16; }

.slide-item__video--desktop,
.slide-item__img--desktop {
  display: none; }

.slide-item__video--mobile,
.slide-item__img--mobile {
  display: block; }

@media (min-width: 768px) {
  .home-slider {
    aspect-ratio: 2.56/1; }
  .slide-item__video--desktop,
  .slide-item__img--desktop {
    display: block; }
  .slide-item__video--mobile,
  .slide-item__img--mobile {
    display: none; } }

/* ================== HẾT KHỐI BANNER SLIDER CHÍNH ================== */
.slide-item__cta {
  position: absolute !important;
  left: 24px !important;
  bottom: 24px !important;
  top: auto !important;
  right: auto !important;
  width: auto !important;
  height: auto !important;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid #ffd6e8;
  color: #ffd6e8;
  padding: 8px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none; }

.slide-item__cta:hover {
  background: #e8398f;
  border-color: #e8398f;
  color: #fff; }

@media (max-width: 767px) {
  .slide-item__cta {
    left: 16px !important;
    bottom: 16px !important;
    padding: 8px 14px;
    font-size: 12px; } }

/* --- Mô tả dưới tiêu đề Slider ảnh (trang collection) --- */
.bst-head h2 {
  color: #e8398f !important;
  font-family: "Turnpike", "Fredoka", sans-serif !important; }

.bst-head__desc {
  text-align: center;
  max-width: 1000px;
  margin: 8px auto 0;
  font-size: 14px;
  line-height: 1.5;
  color: #e8398f; }

/* --- Vá lỗi 2 ảnh 2 bên slider trang collection không đối xứng: CSS gốc
   dùng kiểu chọn "+ (em kế bên)" chỉ bắt được 1 phía sau ảnh giữa, không
   đối xứng cho phía trước. Ép đồng nhất tuyệt đối 2 bên bằng !important,
   không phụ thuộc thứ tự DOM. --- */
.bst-slider .slick-slide:not(.slick-center) img {
  transform: none !important; }

.bst-slider .slick-slide:not(.slick-center) a {
  transform: none !important; }

/* --- Thanh trượt kéo tay cho Slider trang collection (chỉ desktop),
   thay cho mũi tên đã bỏ --- */
.bst-slider-dragbar {
  position: relative;
  height: 6px;
  background: #ffd6e8;
  margin: 30px auto 50px;
  width: 50%;
  border-radius: 3px;
  cursor: pointer;
  touch-action: none; }

.bst-slider-dragbar__thumb {
  position: absolute;
  top: -2px;
  left: 0;
  width: 30%;
  height: 10px;
  background: #ff5ca8;
  border-radius: 5px;
  cursor: grab; }

@media (max-width: 767px) {
  .bst-slider-dragbar {
    display: none; } }

/* --- Mục "Nhóm sản phẩm" (trang collection): 20 dòng BST gộp thành 1
   mục, mỗi dòng theo thứ tự Tiêu đề -> 10px -> Hình ảnh -> 10px ->
   Hình sản phẩm, cách dòng kế tiếp 30px --- */
.prod-line .scroll-dragbar {
  margin-top: 30px !important;
  margin-bottom: 50px !important; }

.prod-line {
  margin-bottom: 30px; }

.prod-line__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px; }

.prod-line__title {
  color: #e8398f !important;
  margin: 0 !important;
  padding-left: 12px; }

.prod-line__image {
  position: relative !important;
  margin-bottom: 10px; }

.prod-line__image img,
.prod-line__image video {
  width: 100%;
  height: auto;
  display: block; }

.prod-line__cta {
  position: absolute !important;
  left: 24px !important;
  bottom: 24px !important;
  top: auto !important;
  right: auto !important;
  width: auto !important;
  height: auto !important;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid #ffd6e8;
  color: #ffd6e8;
  padding: 8px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none; }

@media (max-width: 767px) {
  .prod-line__cta {
    font-size: 12px; } }

.prod-line__cta:hover {
  background: #e8398f;
  border-color: #e8398f;
  color: #fff; }

/* --- Khối "Giới thiệu" đầu trang collection: ảnh/video full-width,
   desktop/mobile riêng biệt khi dùng video (ảnh dùng <picture> nên đã
   tự động responsive, chỉ video cần class ẩn/hiện thủ công) --- */
.page-collection {
  padding-top: 0 !important; }

.page-collection__intro {
  width: 100%;
  margin-bottom: 30px; }

.page-collection__intro--empty {
  background: #ffd6e8;
  min-height: 300px; }

.page-collection__intro img,
.page-collection__intro video,
.page-collection__intro picture {
  width: 100%;
  height: auto;
  display: block; }

.page-collection__intro video.hide-mb {
  display: block; }

.page-collection__intro video.show-mb-only {
  display: none; }

@media (max-width: 767px) {
  .page-collection__intro video.hide-mb {
    display: none; }
  .page-collection__intro video.show-mb-only {
    display: block; } }

/* --- Khoảng cách 10px giữa các hàng sản phẩm trong trang danh sách
   nhóm sản phẩm (collection listing) - chỉ áp dụng riêng khung lưới
   này, không ảnh hưởng các carousel BST/Special Deal khác --- */
.content-product-list-collection .pro-loop {
  margin-bottom: 10px; }

/* --- Trang nhóm sản phẩm: bỏ khoảng đệm 40px/20px mặc định của
   .page-pd (áp dụng chung cho nhiều trang khác), để nội dung Cột 1
   và Cột 2 tự kiểm soát khoảng cách riêng, đúng 20px dưới mép nav --- */
.page-pd--collection {
  padding: 0 !important; }

/* Khóa cuộn toàn trang khi mở bảng bộ lọc (trang nhóm sản phẩm) —
   dùng riêng class này, không dùng chung "openFilter" vì class đó
   kéo theo lớp phủ tối toàn màn hình (z-index cao) của mobile,
   khiến bảng lọc desktop cũng bị che mất, không bấm được. */
body.filter-page-lock {
  overflow: hidden; }

/* ============================================================
   TRANG NHÓM SẢN PHẨM — Thanh ngang ALL / Filter / Sort / 2 icon
   lưới ảnh. TOÀN BỘ CSS của cụm này gom trong khối này, không có
   rule nào khác nằm rải rác nơi khác trong file (chỉ scoped riêng
   .collection-split, không ảnh hưởng trang Sản phẩm bán chạy hay
   nơi khác dùng chung class gốc .filter-sort/.display_product_option).
   ============================================================ */
.collection-split .filter-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 14px;
  background: #ffd6e8;
  border: 1px solid #ffd6e8;
  border-radius: 6px;
  position: relative; }

.collection-split .filter-toolbar__count {
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  padding-left: 6px;
  margin-right: auto; }

.collection-split .filter-toolbar__box {
  height: 36px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  border-radius: 6px;
  background: #fff;
  color: #ffd6e8;
  cursor: pointer;
  white-space: nowrap; }

/* Sort: nền hồng nhạt (giống thanh nền), viền trắng, chữ/icon trắng */
.collection-split .filter-sort.filter-toolbar__box {
  padding: 0;
  background: #ffd6e8;
  border: 1px solid #fff;
  color: #fff;
  position: static; }

.collection-split .filter-sort.filter-toolbar__box > span {
  height: 100%;
  width: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  margin: 0;
  background: none;
  border: none;
  border-radius: 0;
  color: #fff;
  white-space: nowrap;
  cursor: pointer; }

/* Ghi đè rule cũ (thiết kế cũ ghim icon vào góc phải bằng absolute),
   giờ icon nằm inline bình thường cạnh chữ "Sort" */
.collection-split .filter-sort.filter-toolbar__box > span svg {
  position: static;
  top: auto;
  right: auto;
  transform: none;
  flex-shrink: 0; }

/* Dropdown "Sắp xếp theo": căn theo mép phải của CẢ THANH NGANG
   (không phải chỉ riêng khung Sort), cách 2px, nền trắng viền hồng đậm */
.collection-split .filter-sort ul {
  left: auto;
  right: 0;
  top: calc(100% + 2px);
  min-width: 238px;
  background: #fff;
  border: none;
  border-radius: 6px;
  color: #e8398f; }

.collection-split .filter-sort ul li {
  color: #e8398f; }

.collection-split .filter-sort ul li:hover {
  color: #ff5ca8; }

/* 2 icon hiển thị lưới: mỗi icon 1 khung vuông riêng, cách đều nhau */
.collection-split .display_product_option {
  display: none !important;
  gap: 10px; }

@media (min-width: 1440px) {
  .collection-split .display_product_option {
    display: flex !important; } }

.collection-split .display_product_option .filter-toolbar__box {
  width: 36px;
  padding: 0; }

.collection-split .display_product_option span.active {
  background: #ffd6e8;
  border: 1px solid #fff;
  color: #fff; }

/* Khoảng 1024px-1279px: Cột 1 (25%) hẹp nhất trong toàn bộ dải desktop,
   thanh ALL/Filter/Sort dễ bị xuống dòng -> thu gọn riêng đúng khoảng
   này. Từ 1280px trở lên, cột 1 đủ rộng nên dùng lại kích thước
   bình thường như khai báo gốc ở trên. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .collection-split .filter-toolbar {
    gap: 6px;
    padding: 6px 10px; }
  .collection-split .filter-toolbar__box {
    height: 32px;
    gap: 4px;
    padding: 0 8px; }
  .collection-split .filter-sort.filter-toolbar__box > span {
    gap: 4px;
    padding: 0 8px; }
  .collection-split .display_product_option .filter-toolbar__box {
    width: 32px; } }

/* ================== HẾT CỤM ALL/Filter/Sort/icon lưới ================== */
.collection-split__col2 {
  padding-top: 20px; }

/* --- Trang nhóm sản phẩm: đổi cơ chế lưới ảnh từ 4 cột/3 cột
   thành 3 cột (mặc định) / 2 cột (khi bấm icon còn lại) --- */
/* 1024px - <1440px: cố định lưới 3 cột (icon chuyển đổi chưa hiện
   ở khoảng này, nên không cần cơ chế toggle 3/4 cột) */
@media (min-width: 1024px) and (max-width: 1439px) {
  .collection-split .content-product-list-collection > div {
    width: 33.3%; }
  .collection-split .content-product-list-collection > div:nth-child(3n+1) {
    clear: both; } }

/* Từ 1440px: mặc định lưới 4 cột, bấm icon còn lại chuyển sang 3 cột
   (icon chuyển đổi chỉ hiện từ mốc này) */
@media (min-width: 1440px) {
  .collection-split .content-product-list-collection > div {
    width: 25%; }
  .collection-split .content-product-list-collection > div:nth-child(4n+1) {
    clear: both; }
  .collection-split .content-product-list-collection.three_col > div {
    width: 33.3%; }
  .collection-split .content-product-list-collection.three_col > div:nth-child(4n+1) {
    clear: none; }
  .collection-split .content-product-list-collection.three_col > div:nth-child(3n+1) {
    clear: both; } }

/* --- Trang nhóm sản phẩm: từ 768px đến dưới 1024px (hiển thị kiểu
   mobile nhưng màn hình rộng hơn) -> lưới 3 sản phẩm, thay cho 2 cột
   mặc định của Bootstrap ở khoảng này --- */
@media (min-width: 768px) and (max-width: 1023px) {
  .collection-split .content-product-list-collection > div {
    width: 33.3%; }
  .collection-split .content-product-list-collection > div:nth-child(3n+1) {
    clear: both; } }

/* --- Trang nhóm sản phẩm: ẩn breadcrumb, tiêu đề đổi màu hồng đậm
   và đưa lên sát 20px dưới mép nav (vì breadcrumb đã ẩn, tiêu đề
   giờ là phần tử đầu tiên trong Cột 1) --- */
.collection-split__breadcrumb {
  display: none; }

/* Ẩn breadcrumb riêng ở trang chi tiết sản phẩm, không ảnh hưởng
   các trang khác đang dùng chung class .breadcrumb (blog, tài khoản...) */
#product .breadcrumb {
  display: none; }

.collection-split__col1 .page-heading {
  margin-top: 20px; }

.collection-split__col1 .page-title {
  color: #e8398f; }

/* --- Dropdown dạng ảnh/video full-bảng cho VỀ OLV / GIỚI THIỆU BẠN BÈ --- */
.megamenu-wrapper .container.megamenu-simple-container {
  padding: 0 !important; }

.megamenu-container.megamenu-simple {
  padding: 0 !important;
  min-height: 300px; }

.megamenu-simple__banner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 300px;
  overflow: hidden; }

.megamenu-simple__banner img,
.megamenu-simple__banner video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block; }

.megamenu-simple__banner--fallback {
  background: #ffe1ee; }

.megamenu-simple__desc {
  position: absolute;
  left: 32px;
  bottom: 88px;
  max-width: 55%;
  color: #fff;
  font-size: 15px;
  line-height: 1.5;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4); }

.megamenu-simple__banner--fallback .megamenu-simple__desc {
  color: #1c1917;
  text-shadow: none; }

.megamenu-simple__cta {
  position: absolute;
  left: 32px;
  bottom: 32px;
  display: inline-flex;
  align-items: center;
  padding: 10px 22px;
  background: #fff;
  border: 1px solid #ff5ca8;
  border-radius: 8px;
  color: #ff5ca8;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: opacity .2s ease; }

.megamenu-simple__cta:hover {
  opacity: .8; }

/* --- Trang nhóm sản phẩm: bố cục 2 cột cố định
   chiều cao (từ mép dưới thanh điều hướng đến mép dưới màn hình),
   mỗi cột tự cuộn riêng. Chỉ áp dụng từ 1024px trở lên;
   dưới 1024px hiển thị theo kiểu mobile (xếp dọc). --- */
@media (min-width: 1024px) {
  .collection-split {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 0 16px; }
  .collection-split__col1 {
    flex: 0 0 25%;
    max-width: 25%;
    position: relative;
    height: calc(100vh - var(--olv-header-height, 130px)); }
  .collection-split__col1-scroll {
    height: 100%;
    overflow-y: auto;
    padding-right: 6px;
    overscroll-behavior: contain; }
  .collection-split__col2 {
    flex: 0 0 calc(75% - 24px);
    max-width: calc(75% - 24px);
    height: calc(100vh - var(--olv-header-height, 130px));
    overflow-y: auto;
    padding-right: 6px; }
  .collection-split__media {
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 6px;
    overflow: hidden;
    aspect-ratio: 2/3;
    background: #f7f5f3;
    max-width: 400px;
    max-height: 600px; }
  .collection-split__media img,
  .collection-split__media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block; }
  .collection-split .collection-sortfilter .row > div {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%; } }

/* --- Phần đầu (tiêu đề "Bộ lọc") và accordion từng nhóm lọc:
   áp dụng chung cho cả mobile lẫn desktop/tablet --- */
.sidebar-collection__head {
  flex: 0 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 15px; }

.sidebar-collection__head h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
  color: #e8398f; }

.sidebar-collection__head .sidebar-collection__close {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  color: #e8398f; }

.sidebar-collection__head .sidebar-collection__close svg {
  width: 18px;
  height: 18px; }

/* Ẩn header cũ dành riêng cho mobile (đã thay bằng header mới ở trên, dùng chung) */
.sidebar-collection__body .visible-sm.visible-xs:not(.text-center) {
  display: none !important; }

/* Mỗi nhóm lọc chỉ cách nhau đúng viền 1px, không dư khoảng trắng */
.sidebar-collection__body .menu-toogle-sidebar {
  margin-bottom: 0; }

.sidebar-collection__body .menu-toogle-sidebar .sidebar-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  margin: 0;
  padding: 14px 0;
  border-bottom: 1px solid #f0eeeb; }

.sidebar-collection__body .menu-toogle-sidebar .sidebar-title__chevron {
  transition: transform .2s ease;
  flex-shrink: 0; }

.sidebar-collection__body .menu-toogle-sidebar.active .sidebar-title__chevron {
  transform: rotate(180deg); }

.sidebar-collection__body .menu-toogle-sidebar > .filter {
  display: none;
  padding-top: 12px;
  padding-bottom: 12px; }

.sidebar-collection__body .menu-toogle-sidebar.active > .filter {
  display: block; }

@media (min-width: 768px) {
  /* --- Bảng lọc chi tiết: đè đúng vị trí + kích thước cột 1, ẩn/hiện
     bằng cách toggle class "hide" (đã dùng sẵn ở nơi khác trong theme).
     Chỉ dùng display:none/flex - không dùng song song opacity/visibility
     để tránh vênh với cơ chế transform của mobile lúc giao thoa breakpoint. */
  .collection-split__col1 .sidebar-collection {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    margin: 0;
    background: #fff;
    color: #555;
    z-index: 5;
    overflow: hidden;
    padding: 0;
    box-sizing: border-box;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: none !important;
    flex-direction: column; }
  .collection-split__col1 .sidebar-collection:not(.hide) {
    display: flex; } }

/* Giữa: tự cuộn riêng, không làm bể khung tổng thể — áp dụng chung
   mọi màn hình, không riêng gì desktop */
.sidebar-collection__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0 15px; }

@media (min-width: 768px) {
  .collection-split__col1 .sidebar-collection .sider-left-scroll {
    position: static !important;
    height: auto !important;
    overflow: visible !important;
    padding: 0 !important; }
  /* Ẩn footer riêng của mobile (đã có bản riêng cho desktop bên ngoài) */
  .sidebar-collection__body .visible-sm.visible-xs {
    display: none !important; } }

/* Cuối cố định: Đặt lại / Áp dụng — style chung cho MỌI màn hình,
   không riêng gì desktop, để mobile/tablet cũng đồng bộ giao diện */
.sidebar-collection__foot {
  flex: 0 0 auto;
  display: flex;
  gap: 12px;
  padding: 14px 15px;
  border-top: 1px solid #e8398f;
  background: #fff; }

.sidebar-collection__foot .btn-filter {
  flex: 1 1 0;
  width: auto;
  max-width: none;
  height: 44px;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  background: #fff !important;
  color: #e8398f !important;
  border: 1px solid #e8398f !important;
  border-radius: 6px;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 500; }

/* Khóa Cột 2 (lưới sản phẩm) bằng lớp xám mờ khi bảng lọc đang mở
     - chỉ áp dụng từ 1024px (nơi có bố cục 2 cột thật) */
@media (min-width: 1024px) {
  .collection-split__col2 {
    position: relative; }
  .collection-split__col2.is-locked {
    overflow: hidden; }
  .collection-split__col2.is-locked::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.15);
    z-index: 6; } }

@media (max-width: 1023px) {
  .collection-split {
    display: block;
    padding: 0 0px; }
  .collection-split__col1,
  .collection-split__col2 {
    height: auto;
    overflow: visible; }
  .collection-split__media {
    display: none; }
  .sidebar-collection__head {
    display: flex; }
  .collection-split__col1-scroll .page-heading,
  .collection-split__col1-scroll .collection-sortfilter {
    padding: 0 6px; } }

@media (min-width: 768px) and (max-width: 1023px) {
  .collection-split__col1-scroll .page-heading,
  .collection-split__col1-scroll .collection-sortfilter {
    padding: 0 16px; } }

/* ===================== CART DRAWER (panel giỏ hàng trượt) ===================== */
body.cart-drawer-lock {
  overflow: hidden; }

.cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 99999;
  visibility: hidden;
  pointer-events: none; }

.cart-drawer.is-open {
  visibility: visible;
  pointer-events: auto; }

.cart-drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity .25s ease; }

.cart-drawer.is-open .cart-drawer__overlay {
  opacity: 1; }

.cart-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 420px;
  max-width: 90vw;
  background: #fff;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .3s ease;
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12); }

.cart-drawer.is-open .cart-drawer__panel {
  transform: translateX(0); }

.cart-drawer__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid #f0e6ec; }

.cart-drawer__head h4 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: #e8398f;
  text-transform: uppercase; }

.cart-drawer__close {
  background: none;
  border: 0;
  padding: 4px;
  cursor: pointer;
  color: #e8398f;
  display: flex;
  align-items: center; }

.cart-drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0 20px; }

.cart-drawer__empty {
  display: none;
  padding: 60px 0;
  text-align: center;
  color: #9a9a9a;
  font-size: 14px; }

.cart-drawer.cart-drawer--empty .cart-drawer__empty {
  display: block; }

.cart-drawer.cart-drawer--empty .cart-drawer__items {
  display: none; }

.cart-drawer__items {
  list-style: none;
  margin: 0;
  padding: 0; }

.cart-drawer__item {
  display: flex;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid #f5f0f3; }

.cart-drawer__item-img {
  flex: 0 0 auto;
  width: 72px;
  height: 96px;
  border-radius: 6px;
  overflow: hidden;
  background: #f7f5f3; }

.cart-drawer__item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block; }

.cart-drawer__item-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px; }

.cart-drawer__item-title {
  font-size: 14px;
  font-weight: 600;
  color: #1c1917;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden; }

.cart-drawer__item-variant {
  font-size: 12.5px;
  color: #9a9a9a; }

.cart-drawer__item-price {
  font-size: 14px;
  font-weight: 600;
  color: #e8398f; }

.cart-drawer__qty {
  display: flex;
  align-items: center;
  border: 1px solid #e8398f;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  width: fit-content; }

.cart-drawer__qty button {
  background: #fff;
  border: 0;
  width: 26px;
  height: 26px;
  color: #e8398f;
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center; }

.cart-drawer__qty-display {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 26px;
  border-left: 1px solid #e8398f;
  border-right: 1px solid #e8398f;
  font-size: 13px;
  color: #1c1917; }

.cart-drawer__item-remove {
  align-self: flex-end;
  background: none;
  border: 0;
  color: #9a9a9a;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center; }

.cart-drawer__item-remove:hover {
  color: #e8398f; }

.cart-drawer__foot {
  flex: 0 0 auto;
  padding: 16px 20px 20px;
  border-top: 1px solid #f0e6ec; }

.cart-drawer__subtotal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 600;
  color: #1c1917;
  margin-bottom: 14px; }

.cart-drawer__subtotal-value {
  color: #e8398f;
  font-size: 17px; }

.cart-drawer__checkout {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 46px;
  background: #e8398f;
  color: #fff;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 6px;
  text-decoration: none;
  margin-bottom: 10px; }

.cart-drawer__checkout:hover {
  opacity: .9;
  color: #fff; }

.cart-drawer__viewcart {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px;
  background: #fff;
  color: #e8398f;
  border: 1px solid #e8398f;
  border-radius: 6px;
  text-decoration: none;
  font-size: 14px; }

@media (max-width: 480px) {
  .cart-drawer__panel {
    width: 100vw;
    max-width: 100vw; } }