/* ============================================================ */

/* THANH TRANG MOBILE HOMEPAGE CORE STYLES */

/* ============================================================ */







/* HIDE FLATSOME ORIGINAL TOPBAR HOOK ON HOMEPAGE TO PREVENT DUPLICATION */

#wrapper > #ttm-topbar-notice,

.header-wrapper #ttm-topbar-notice,

#header #ttm-topbar-notice {

  display: none !important;

  visibility: hidden !important;

  height: 0 !important;

}



/* 1. ENABLE FLATSOME GLOBAL SYNCHRONIZED HEADER ON HOMEPAGE */

#header {

  display: block !important;

  position: sticky !important;

  top: 0 !important;

  z-index: 9999 !important;

  width: 100% !important;

  background: #FFFFFF !important;

  box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;

}

.header-wrapper {

  display: block !important;

  width: 100% !important;

}

.top-bar, 

#top-bar,

.header-bottom,

#masthead .top-divider {

  display: none !important;

}



/* 2. ZERO OUT WRAPPER PADDING FOR HOMEPAGE HERO */

#main {

  padding-top: 15px !important;

  background-color: #F8FAFC !important;

}

#content.page-wrapper {

  padding: 0 !important;

  max-width: 100% !important;

}

.row.row-main {

  max-width: 100% !important;

  padding: 0 !important;

  margin: 0 !important;

}



/* 3. HIDE INLINE DUPLICATE HEADER WRAPPER IN PAGE CONTENT */

.ttm-header-sticky-wrapper {

  display: none !important;

  height: 0 !important;

  visibility: hidden !important;

}



/* 4. ĐỒNG BỘ 100% CONTAINER 1250px CHO TOÀN BỘ CÁC SECTION TRÊN HOMEPAGE */

.hdr-inner,

.ttm-topbar-inner,

.hero-section,

.device-quick-section,

.home-services-title-wrap,

.row.home-services-title,

.row.section_product,

.row.row-gioi-thieu,

.section_blog,

.row-blog-posts,

#row-1704043185,

.section-content > .row.large-columns-6,

.section-content > .post-video-slider,

.section-content > .row {

  max-width: 1250px !important;

  margin-left: auto !important;

  margin-right: auto !important;

  padding-left: 15px !important;

  padding-right: 15px !important;

  box-sizing: border-box !important;

}



/* KHẮC PHỤC TRIỆT ĐỂ LỆCH LỀ 2 BÊN DEVICE QUICK (ẢNH 4) */

.device-quick-section {

  width: 100% !important;

  max-width: 1250px !important;

  margin: 16px auto 0 auto !important;

  padding: 0 15px !important;

  box-sizing: border-box !important;

}

.device-quick-card {

  width: 100% !important;

  max-width: 100% !important;

  margin: 0 !important;

  box-sizing: border-box !important;

}



/* 5. ẨN TRIỆT ĐỂ THANH CTA CŨ CỦA THEME MẸ TRÊN MOBILE (CHỐNG ĐÈ CHỒNG CTA) */

@media (max-width: 849px) {

  .ttm-cta-bar,

  #ttm-cta-bar,

  nav.ttm-cta-bar,

  .mobile-contact-bar,

  .footer-bar,

  .mf-mobile-bar {

    display: none !important;

    visibility: hidden !important;

    height: 0 !important;

    min-height: 0 !important;

    pointer-events: none !important;

    opacity: 0 !important;

  }

}



/* 6. STYLE CHO TIÊU ĐỀ SECTION DỊCH VỤ SỬA CHỮA NỔI BẬT & ĐƯỜNG KẺ CHUẨN ĐẸP */

.home-services-title-wrap {

  text-align: center;

  padding: 34px 15px 16px 15px;

}

.home-services-heading {

  margin: 0 0 10px 0;

  font-size: 25px;

  font-weight: 850;

  letter-spacing: -0.3px;

  text-transform: uppercase;

  line-height: 1.3;

}

.home-services-heading a {

  color: #0F172A !important;

  text-decoration: none !important;

  transition: color 0.18s ease;

}

.home-services-heading a:hover {

  color: #EE4D2D !important;

}

.home-services-divider {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 12px;

  max-width: 240px;

  margin: 0 auto;

}

.home-services-divider .line {

  flex: 1;

  height: 2px;

  background: linear-gradient(90deg, rgba(238,77,45,0.05), #EE4D2D);

  border-radius: 2px;

}

.home-services-divider .line:last-child {

  background: linear-gradient(90deg, #EE4D2D, rgba(238,77,45,0.05));

}

.home-services-divider .gem {

  color: #EE4D2D;

  font-size: 13px;

  line-height: 1;

}



/* 7. STYLE CHO CÁC TIÊU ĐỀ TABGROUP CÓ LINK SEO CHUẨN */

.tabgroup-seo-title-wrap {
  margin-bottom: 8px;
  padding-top: 6px;
}

@media (min-width: 768px) {
  .section_product .col-inner {
    position: relative !important;
  }
  .section_product .tabgroup-seo-title-wrap {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 10 !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
  }
  .section_product .tabgroup-seo-heading {
    margin: 0 !important;
    line-height: 42px !important;
  }
  .section_product .tabbed-content > ul.nav {
    min-height: 42px !important;
    align-items: center !important;
    margin-bottom: 15px !important;
  }
}
@media (max-width: 767px) {
  .section_product .tabgroup-seo-title-wrap {
    position: static !important;
    margin-bottom: 8px !important;
    width: 100% !important;
  }
  .section_product .tabbed-content > ul.nav {
    justify-content: flex-start !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 4px !important;
  }
}

.tabgroup-seo-heading {

  margin: 0;

  font-size: 18px;

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: -0.2px;

}

.tabgroup-seo-heading a {

  color: #0F172A !important;

  text-decoration: none !important;

  display: inline-flex;

  align-items: center;

  gap: 6px;

  transition: color 0.18s ease;

}

.tabgroup-seo-heading a:hover {

  color: #EE4D2D !important;

}

.tabgroup-seo-heading a::after {

  content: '›';

  font-size: 20px;

  color: #EE4D2D;

  font-weight: 700;

  line-height: 1;

  transition: transform 0.15s ease;

}

.tabgroup-seo-heading a:hover::after {

  transform: translateX(3px);

}



/* 8. CÂN ĐỐI MENU DỌC 9 MỤC VỚI SLIDER CARD (451px) */

.cat-box {

  height: 100% !important;

  min-height: 451px !important;

}

.cat-list {

  justify-content: space-between !important;

  padding: 6px 0 !important;

}

.cat-item {

  padding: 8.5px 14px !important;

  font-size: 12.8px !important;

  min-height: 40px !important;

}

.cat-tag-hot {

  background: #EE4D2D;

  color: #FFFFFF;

  font-size: 9.5px;

  font-weight: 800;

  padding: 2px 6px;

  border-radius: 4px;

  letter-spacing: 0.3px;

  margin-left: 6px;

}



/* 9. VISUALLY HIDDEN H1 FOR HOMEPAGE SEO */

.visually-hidden {

  position: absolute !important;

  width: 1px !important;

  height: 1px !important;

  padding: 0 !important;

  margin: -1px !important;

  overflow: hidden !important;

  clip: rect(0, 0, 0, 0) !important;

  white-space: nowrap !important;

  border: 0 !important;

}









:root {

    --p: #EE4D2D;

    --pd: #D03515;

    --pl: #FFF4F0;

    --dark: #0F172A;

    --text-primary: #1E293B;

    --text-secondary: #475569;

    --text-muted: #94A3B8;

    --bg-page: #F8FAFC;

    --card: #FFFFFF;

    --border: #E2E8F0;

    --border-light: #F1F5F9;

    --radius-sm: 8px;

    --radius-md: 12px;

    --radius-lg: 16px;

    --shadow-soft: 0 2px 10px rgba(0, 0, 0, 0.04);

    --shadow-btn: 0 4px 14px rgba(238, 77, 45, 0.3);

    --shadow-hover: 0 8px 20px rgba(0, 0, 0, 0.08);

    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  }



* {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}





.visually-hidden {

  position: absolute !important;

  width: 1px !important;

  height: 1px !important;

  padding: 0 !important;

  margin: -1px !important;

  overflow: hidden !important;

  clip: rect(0, 0, 0, 0) !important;

  white-space: nowrap !important;

  border: 0 !important;

}



body {

  font-family: var(--font);

  background: #F8FAFC;

  color: var(--text-primary);

  margin: 0;

  padding: 0;

  -webkit-font-smoothing: antialiased;

  overflow-x: hidden;

}



/* ============================================================ */

/* DESKTOP STYLES (CHUẨN 100% NHƯ PROTOTYPE) */

/* ============================================================ */



.hero-section {

  max-width: 1220px;

  margin: 14px auto 16px auto;

  padding: 0 10px;

  box-sizing: border-box;

}

.hero-grid {

  display: grid;

  grid-template-columns: 240px 1fr 270px;

  gap: 16px;

  align-items: stretch;

  position: relative;

}

.device-quick-section {

  max-width: 1220px;

  margin: 0 auto 24px auto;

  padding: 0 10px;

  box-sizing: border-box;

}



/* Ẩn các thành phần Mobile trên Desktop */

.mobile-header-bar,

.mobile-search-row,

.mobile-cat-grid,

.mobile-dock {

  display: none;

}





/* ============================================================ */

/* TOPBAR ANNOUNCEMENT PIN GHIM ÉP KÍNH GIẢM 30% (DESKTOP & MOBILE) */

/* ============================================================ */

.ttm-topbar-notice {

  background: #090d16;

  background: linear-gradient(90deg, #090d16 0%, #1e293b 50%, #090d16 100%);

  border-bottom: 1px solid rgba(255, 255, 255, 0.15);

  color: #f8fafc;

  width: 100%;

  position: relative;

  z-index: 10001;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);

  user-select: none;

}

.ttm-topbar-inner {

  max-width: 1220px;

  margin: 0 auto;

  padding: 6px 14px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 12px;

  white-space: nowrap;

  font-family: var(--font);

  font-size: 13.5px;

  line-height: 1;

}

.ttm-topbar-fire {

  display: inline-block;

  font-size: 14px;

  vertical-align: -1px;

  margin-right: 2px;

}

.ttm-topbar-text {

  color: #f8fafc;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  letter-spacing: 0.2px;

}

.ttm-topbar-text strong {

  color: #fde047;

  font-weight: 750;

}

.ttm-topbar-cta {

  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);

  color: #000000 !important;

  font-weight: 800;

  font-size: 12px;

  padding: 4px 14px;

  border-radius: 20px;

  text-decoration: none !important;

  display: inline-flex;

  align-items: center;

  flex-shrink: 0;

  transition: transform 0.15s ease, box-shadow 0.15s ease;

  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.4);

  border: 1px solid #fbbf24;

}

.ttm-topbar-cta:hover {

  background: #fde047;

  color: #000000 !important;

  transform: scale(1.04);

}

button.ttm-topbar-close {

  background: transparent !important;

  border: none !important;

  color: #94a3b8 !important;

  font-size: 18px !important;

  line-height: 1 !important;

  min-height: 0 !important;

  height: auto !important;

  margin: 0 !important;

  padding: 0 4px !important;

  cursor: pointer;

  opacity: 0.85;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  box-shadow: none !important;

}

button.ttm-topbar-close:hover {

  opacity: 1;

  color: #ffffff !important;

}



@media (max-width: 768px) {

  .ttm-topbar-inner {

    padding: 5px 8px;

    gap: 7px;

    font-size: 11.5px;

  }

  .ttm-topbar-fire {

    font-size: 12px;

  }

  .ttm-topbar-text {

    font-size: 11px;

  }

  .ttm-topbar-cta {

    font-size: 10.5px;

    padding: 3px 9px;

  }

  button.ttm-topbar-close {

    font-size: 16px !important;

    padding: 0 2px !important;

  }

}

@media (max-width: 360px) {

  .ttm-topbar-inner {

    padding: 4px 6px;

    gap: 5px;

  }

  .ttm-topbar-text {

    font-size: 10.5px;

  }

  .ttm-topbar-cta {

    font-size: 10px;

    padding: 2.5px 7px;

  }

}



/* 1. HEADER CHÍNH DESKTOP (GRID 3 CỘT CÂN ĐỐI TUYỆT ĐỐI) */

.site-header {

  background: #FFFFFF;

  border-bottom: 1px solid var(--border);

  position: relative;

  z-index: 100;

  width: 100%;

}

.header-top-accent {

  height: 3px;

  background: linear-gradient(90deg, #EE4D2D, #FF6B4A);

}

.header-inner {

  max-width: 1250px !important;

  margin: 0 auto !important;

  padding: 10px 15px !important;

  display: grid !important;

  grid-template-columns: 1fr auto 1fr !important;

  align-items: center !important;

  gap: 16px !important;

  box-sizing: border-box !important;

}

.brand-logo-link {

  display: flex !important;

  align-items: center !important;

  text-decoration: none !important;

  justify-self: start !important;

}

.brand-logo-img {

  height: 36px !important;

  width: auto !important;

  object-fit: contain !important;

  display: block !important;

}



/* Header Search CÂN GIỮA TRỤC TRUNG TÂM & RESET CHỐNG LỆCH FLATSOME */

.header-search {

  width: 440px !important;

  max-width: 100% !important;

  margin: 0 auto !important;

  justify-self: center !important;

  position: relative !important;

}

.header-search form.search-input-wrap,

.header-search .search-input-wrap,

form.search-input-wrap,

.search-input-wrap {

  margin: 0 !important;

  display: flex !important;

  align-items: center !important;

  background: #F1F5F9 !important;

  border: 1.5px solid #E2E8F0 !important;

  border-radius: 24px !important;

  padding: 0 4px 0 14px !important;

  height: 42px !important;

  max-height: 42px !important;

  box-sizing: border-box !important;

  transition: all 0.2s ease !important;

  overflow: hidden !important;

}

.header-search form.search-input-wrap:focus-within,

.header-search .search-input-wrap:focus-within,

.search-input-wrap:focus-within {

  background: #FFFFFF !important;

  border-color: #EE4D2D !important;

  box-shadow: 0 0 0 3px rgba(238, 77, 45, 0.15) !important;

}

.header-search .search-input-wrap input,

.header-search .search-input-wrap input[type="text"],

.header-search .search-input-wrap input[type="search"],

.search-input-wrap input,

.search-input-wrap input[type="text"] {

  flex: 1 1 auto !important;

  border: none !important;

  background: transparent !important;

  outline: none !important;

  box-shadow: none !important;

  font-family: inherit !important;

  font-size: 13px !important;

  color: #1E293B !important;

  padding: 0 8px !important;

  margin: 0 !important;

  height: 38px !important;

  line-height: 38px !important;

  box-sizing: border-box !important;

  vertical-align: middle !important;

}

.header-search .search-input-wrap input::placeholder,

.search-input-wrap input::placeholder {

  color: #94A3B8 !important;

}

.header-search .search-input-wrap button,

.header-search .search-input-wrap .btn-search-exec,

.btn-search-exec,

button.btn-search-exec {

  background: #EE4D2D !important;

  color: #FFFFFF !important;

  border: none !important;

  border-radius: 20px !important;

  padding: 0 16px !important;

  height: 34px !important;

  line-height: 34px !important;

  font-family: inherit !important;

  font-size: 12px !important;

  font-weight: 700 !important;

  cursor: pointer !important;

  margin: 0 !important;

  box-shadow: none !important;

  letter-spacing: 0.3px !important;

  flex-shrink: 0 !important;

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  transition: background 0.2s, transform 0.15s !important;

  vertical-align: middle !important;

}

.header-search .search-input-wrap .btn-search-exec:hover,

.btn-search-exec:hover,

button.btn-search-exec:hover {

  background: #D73C1C !important;

  transform: translateY(-0.5px) !important;

}



.header-actions {

  display: flex !important;

  align-items: center !important;

  gap: 8px !important;

  justify-self: end !important;

}

.h-item {

  padding: 4px 6px !important;

  gap: 6px !important;

}

.h-meta .h-label {

  font-size: 11px !important;

  font-weight: 700 !important;

  white-space: nowrap !important;

}

.h-meta .h-sub {

  font-size: 10px !important;

  white-space: nowrap !important;

}

.btn-header-booking {

  padding: 6px 11px !important;

  font-size: 11.5px !important;

  gap: 5px !important;

  white-space: nowrap !important;

}

.btn-header-booking .badge-save {

  font-size: 9.5px !important;

  padding: 1.5px 5px !important;

}



/* Header Fast Actions */

.header-actions {

  display: flex;

  align-items: center;

  gap: 10px;

  justify-self: end;

}

.h-item {

  padding: 4px 8px !important;

  gap: 6px !important;

}

.h-meta .h-label {

  font-size: 11.5px !important;

  font-weight: 700 !important;

  white-space: nowrap !important;

}

.h-meta .h-sub {

  font-size: 10.5px !important;

  white-space: nowrap !important;

}

.btn-header-booking {

  padding: 6px 12px !important;

  font-size: 12px !important;

  gap: 5px !important;

  white-space: nowrap !important;

}

.btn-header-booking .badge-save {

  font-size: 9.5px !important;

  padding: 1.5px 5px !important;

}



  .h-item {

    display: flex;

    align-items: center;

    gap: 8px;

    text-decoration: none;

    color: var(--text-primary);

    padding: 6px 10px;

    border-radius: var(--radius-sm);

    transition: background 0.2s;

  }

  .h-item:hover {

    background: #F1F5F9;

  }

  .h-icon {

    color: var(--p);

    display: flex;

    align-items: center;

  }

  .h-meta {

    display: flex;

    flex-direction: column;

    line-height: 1.25;

  }

  .h-meta .h-label {

    font-size: 12px;

    font-weight: 700;

    color: var(--text-primary);

  }

  .h-meta .h-sub {

    font-size: 11px;

    color: var(--text-secondary);

  }



  /* Nút Đặt Lịch Chuẩn FluentForm §5.27 */

  .btn-header-booking {

    background: linear-gradient(135deg, #EE4D2D, #FF5722);

    color: #FFFFFF !important;

    padding: 8px 16px;

    border-radius: 20px;

    font-weight: 700;

    font-size: 12.5px;

    display: flex;

    align-items: center;

    gap: 6px;

    box-shadow: var(--shadow-btn);

    transition: all 0.2s;

    text-decoration: none;

  }

  .btn-header-booking:hover {

    transform: translateY(-1px);

    box-shadow: 0 6px 16px rgba(238, 77, 45, 0.4);

  }

  .btn-header-booking .badge-save {

    background: #FFFFFF;

    color: var(--pd);

    font-size: 10px;

    font-weight: 800;

    padding: 2px 6px;

    border-radius: 10px;

  }



  /* DROPDOWN & MODAL HỆ THỐNG CHI NHÁNH */

  .branch-trigger-wrap {

    position: relative;

  }

  .btn-branch-trigger {

    cursor: pointer;

    user-select: none;

    text-decoration: none;

  }

  .h-meta .h-arrow {

    font-size: 9px;

    margin-left: 2px;

    color: #94A3B8;

    transition: transform 0.2s;

  }

  .branch-trigger-wrap:hover .h-arrow,

  .branch-trigger-wrap.hover-active .h-arrow {

    transform: rotate(180deg);

  }



  /* Quick Dropdown */

  .branch-quick-dropdown {

    position: absolute;

    top: calc(100% + 4px);

    right: 0;

    width: 340px;

    background: #FFFFFF;

    border: 1px solid var(--border);

    border-radius: var(--radius-md);

    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.14);

    display: none;

    flex-direction: column;

    z-index: 500;

    overflow: visible;

    animation: fadeInDropdown 0.18s ease-out;

  }

  /* CẦU NỐI HOVER VÔ HÌNH — CHỐNG TẮT DROPDOWN KHI DI CHUỘT TỪ NÚT XUỐNG BẢNG */

  .branch-quick-dropdown::before {

    content: '';

    position: absolute;

    top: -14px;

    left: 0;

    width: 100%;

    height: 16px;

    background: transparent;

    z-index: 10;

  }

  .branch-trigger-wrap:hover .branch-quick-dropdown,

  .branch-trigger-wrap.hover-active .branch-quick-dropdown {

    display: flex;

  }

  @keyframes fadeInDropdown {

    from { opacity: 0; transform: translateY(-4px); }

    to { opacity: 1; transform: translateY(0); }

  }

  .bq-head {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 10px 14px;

    background: #F8FAFC;

    border-bottom: 1px solid #EDF2F7;

    font-size: 11px;

    font-weight: 800;

    color: #1E293B;

    letter-spacing: 0.2px;

  }

  .bq-view-all {

    color: var(--p);

    text-decoration: none;

    font-size: 11px;

    font-weight: 700;

    cursor: pointer;

  }

  .bq-view-all:hover {

    text-decoration: underline;

  }

  .bq-list {

    display: flex;

    flex-direction: column;

    max-height: 270px;

    overflow-y: auto;

  }

  .bq-item {

    padding: 9px 14px;

    border-bottom: 1px solid #F1F5F9;

    text-decoration: none;

    transition: all 0.15s;

    display: block;

  }

  .bq-item:last-child {

    border-bottom: none;

  }

  .bq-item:hover {

    background: #FFF7F4;

    padding-left: 17px;

  }

  .bq-item-name {

    font-size: 12px;

    font-weight: 700;

    color: #1E293B;

    line-height: 1.3;

  }

  .bq-item-sub {

    font-size: 11px;

    color: #64748B;

    margin-top: 2px;

  }

  .bq-foot {

    padding: 8px 14px;

    background: #FFF5F2;

    border-top: 1px solid rgba(238, 77, 45, 0.15);

    text-align: center;

  }

  .bq-btn-modal {

    display: block;

    color: var(--p);

    font-size: 11.5px;

    font-weight: 800;

    text-decoration: none;

    cursor: pointer;

  }

  .bq-btn-modal:hover {

    text-decoration: underline;

  }



  /* MODAL OVERLAY & DIALOG */

  .branch-modal-overlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100vw;

    height: 100vh;

    background: rgba(15, 23, 42, 0.65);

    backdrop-filter: blur(4px);

    -webkit-backdrop-filter: blur(4px);

    display: none;

    align-items: center;

    justify-content: center;

    z-index: 9999;

    padding: 16px;

    box-sizing: border-box;

    opacity: 0;

    transition: opacity 0.2s ease-out;

  }

  .branch-modal-overlay.open {

    display: flex;

    opacity: 1;

  }

  .branch-modal-dialog {

    background: #FFFFFF;

    border-radius: 16px;

    width: 100%;

    max-width: 820px;

    max-height: 90vh;

    display: flex;

    flex-direction: column;

    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);

    border: 1px solid var(--border);

    overflow: hidden;

    transform: scale(0.96);

    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);

  }

  .branch-modal-overlay.open .branch-modal-dialog {

    transform: scale(1);

  }

  .bm-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 14px 20px;

    background: #F8FAFC;

    border-bottom: 1px solid #E2E8F0;

  }

  .bm-title-group {

    display: flex;

    align-items: center;

    gap: 12px;

  }

  .bm-icon-pin {

    width: 38px;

    height: 38px;

    border-radius: 10px;

    background: #FFF0EB;

    color: var(--p);

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

  }

  .bm-title {

    font-size: 15px;

    font-weight: 800;

    color: #0F172A;

    margin: 0;

    line-height: 1.3;

  }

  .bm-subtitle {

    font-size: 11.5px;

    color: #64748B;

    margin: 2px 0 0;

  }

  .bm-close-btn {

    width: 32px;

    height: 32px;

    border-radius: 50%;

    background: #E2E8F0;

    border: none;

    color: #475569;

    font-size: 15px;

    font-weight: bold;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.15s;

  }

  .bm-close-btn:hover {

    background: #CBD5E1;

    color: #0F172A;

    transform: rotate(90deg);

  }

  .bm-body {

    padding: 16px 20px;

    overflow-y: auto;

    flex: 1;

  }

  .bm-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 12px;

  }

  @media (max-width: 640px) {

    .bm-grid {

      grid-template-columns: 1fr;

    }

  }

  .bm-card {

    background: #FFFFFF;

    border: 1px solid #E2E8F0;

    border-radius: 10px;

    padding: 12px 14px;

    display: flex;

    flex-direction: column;

    gap: 6px;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);

    transition: all 0.18s;

  }

  .bm-card:hover {

    border-color: rgba(238, 77, 45, 0.4);

    box-shadow: 0 4px 12px rgba(238, 77, 45, 0.08);

  }

  .bm-card-head {

    display: flex;

    align-items: center;

    justify-content: space-between;

  }

  .bm-tag-badge {

    font-size: 9.5px;

    font-weight: 800;

    padding: 2px 6px;

    border-radius: 4px;

    background: #F1F5F9;

    color: #475569;

    letter-spacing: 0.2px;

  }

  .bm-tag-badge.hot {

    background: #FEE2E2;

    color: #DC2626;

  }

  .bm-status-open {

    font-size: 10.5px;

    color: #16A34A;

    font-weight: 600;

  }

  .bm-branch-name {

    font-size: 12.5px;

    font-weight: 700;

    color: #1E293B;

    margin: 0;

    line-height: 1.35;

  }

  .bm-branch-desc {

    font-size: 11px;

    color: #64748B;

    margin: 0;

  }

  .bm-actions {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-top: 4px;

  }

  .bm-btn-map {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    padding: 5px 10px;

    background: #FFF7F4;

    color: var(--p);

    border: 1px solid rgba(238, 77, 45, 0.25);

    border-radius: 6px;

    font-size: 11px;

    font-weight: 700;

    text-decoration: none;

    transition: all 0.15s;

  }

  .bm-btn-map:hover {

    background: var(--p);

    color: #FFFFFF;

  }

  .bm-btn-call {

    display: inline-flex;

    align-items: center;

    gap: 4px;

    padding: 5px 9px;

    background: #F8FAFC;

    color: #475569;

    border: 1px solid #CBD5E1;

    border-radius: 6px;

    font-size: 11px;

    font-weight: 600;

    text-decoration: none;

    transition: all 0.15s;

  }

  .bm-btn-call:hover {

    background: #E2E8F0;

    color: #0F172A;

  }

  .bm-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 12px 20px;

    background: #FFF5F2;

    border-top: 1px solid rgba(238, 77, 45, 0.15);

    gap: 12px;

  }

  .bm-foot-note {

    font-size: 11px;

    color: #475569;

    font-weight: 600;

    display: flex;

    align-items: center;

    gap: 6px;

  }

  .bm-foot-note svg {

    color: var(--p);

    flex-shrink: 0;

  }

  .bm-foot-actions {

    display: flex;

    align-items: center;

    gap: 12px;

    flex-shrink: 0;

  }

  .bm-link-contact {

    font-size: 11.5px;

    color: #64748B;

    text-decoration: none;

    font-weight: 600;

  }

  .bm-link-contact:hover {

    color: var(--p);

    text-decoration: underline;

  }

  .bm-btn-book {

    background: linear-gradient(135deg, #EE4D2D 0%, #D03515 100%);

    color: #FFFFFF;

    font-size: 11px;

    font-weight: 800;

    padding: 6px 14px;

    border-radius: 20px;

    text-decoration: none;

    box-shadow: 0 2px 8px rgba(238, 77, 45, 0.3);

    transition: all 0.15s;

    white-space: nowrap;

  }

  .bm-btn-book:hover {

    transform: translateY(-1px);

    box-shadow: 0 4px 12px rgba(238, 77, 45, 0.4);

  }

  @media (max-width: 640px) {

    .bm-footer {

      flex-direction: column;

      align-items: stretch;

      padding: 10px 14px;

      gap: 8px;

    }

    .bm-foot-note {

      justify-content: center;

      text-align: center;

      font-size: 10px;

      line-height: 1.35;

    }

    .bm-foot-actions {

      display: flex;

      align-items: center;

      justify-content: space-between;

      gap: 8px;

      width: 100%;

    }

    .bm-link-contact {

      font-size: 11px;

      white-space: nowrap;

    }

    .bm-btn-book {

      flex: 1;

      text-align: center;

      padding: 7px 12px;

      font-size: 10.5px;

    }

  }



  /* Nút chi nhánh trên mobile header */

  .m-btn-branch {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 32px;

    height: 32px;

    background: #FFF4F0;

    color: var(--p);

    border-radius: 50%;

    text-decoration: none;

    border: 1px solid rgba(238, 77, 45, 0.2);

    transition: all 0.15s;

    flex-shrink: 0;

  }

  .m-btn-branch:active {

    transform: scale(0.95);

  }



  /* ============================================================ */

  .trust-strip {

    background: #FFFFFF;

    border-bottom: 1px solid var(--border-light);

    padding: 8px 16px;

  }

  .trust-strip-inner {

    max-width: 1000px;

    margin: 0 auto;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 22px;

  }

  .trust-pill {

    display: flex;

    align-items: center;

    gap: 6px;

    font-size: 12px;

    font-weight: 600;

    color: #334155;

    white-space: nowrap;

  }

  .trust-pill svg {

    color: #16A34A;

    flex-shrink: 0;

  }

  .trust-sep {

    color: #CBD5E1;

    font-size: 11px;

    user-select: none;

  }



  /* ============================================================ */

  /* 3. HERO SECTION */

  /* ============================================================ */

  .hero-section {

    max-width: 1180px;

    margin: 16px auto;

    padding: 0 16px;

  }

  .hero-grid {

    display: grid;

    grid-template-columns: 240px 1fr 270px;

    gap: 16px;

    align-items: stretch;

    position: relative;

  }



  /* CỘT 1: MENU DANH MỤC CÓ FLYOUT SUBMENU */

  .cat-box {

    background: #FFFFFF;

    border-radius: var(--radius-md);

    border: 1px solid var(--border);

    box-shadow: var(--shadow-soft);

    display: flex;

    flex-direction: column;

    position: relative;

    z-index: 250;

  }

  .cat-header {

    padding: 12px 14px;

    font-size: 12px;

    font-weight: 800;

    color: var(--text-primary);

    text-transform: uppercase;

    letter-spacing: 0.4px;

    background: #FAFAFA;

    border-bottom: 1px solid var(--border-light);

    border-radius: var(--radius-md) var(--radius-md) 0 0;

    display: flex;

    align-items: center;

    gap: 6px;

  }

  .cat-list {

    list-style: none;

    display: flex;

    flex-direction: column;

    padding: 4px 0;

    flex: 1;

    justify-content: space-around;

  }

  .cat-item-wrap {

    position: static;

  }

  .cat-item {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 9.5px 14px;

    color: #334155;

    font-size: 12.5px;

    font-weight: 600;

    text-decoration: none;

    transition: all 0.15s;

    cursor: pointer;

    white-space: nowrap;

  }

  .cat-item-wrap:hover > .cat-item, .cat-item.active {

    color: var(--p);

    background: var(--pl);

    padding-left: 17px;

  }

  .cat-item-left {

    display: flex;

    align-items: center;

    gap: 8px;

    min-width: 0;

  }

  .cat-item svg.icon-main {

    color: #64748B;

    transition: color 0.15s;

    flex-shrink: 0;

  }

  .cat-item:hover svg.icon-main {

    color: var(--p);

  }

  .cat-arrow {

    color: #94A3B8;

    font-size: 13px;

    flex-shrink: 0;

    transition: transform 0.15s;

  }

  .cat-item-wrap:hover > .cat-item .cat-arrow {

    color: var(--p);

    transform: translateX(2px);

  }



  /* FLYOUT MEGA SUBMENU 3 CỘT ĐỒNG ĐỀU, CÂN ĐỐI HOÀN HẢO */

  .cat-flyout {

    position: absolute;

    top: 0;

    left: calc(100% + 16px);

    width: 715px;

    height: 100%;

    background: #FFFFFF;

    border: 1px solid var(--border);

    border-radius: var(--radius-md);

    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.14);

    display: none;

    flex-direction: column;

    z-index: 300;

    box-sizing: border-box;

    overflow: hidden;

  }

  /* CẦU NỐI HOVER VÔ HÌNH — CHỐNG TẮT SUBMENU KHI DI CHUỘT QUA KHOẢNG TRỐNG GAP 16PX */

  .cat-flyout::before {

    content: '';

    position: absolute;

    top: 0;

    left: -24px;

    width: 26px;

    height: 100%;

    background: transparent;

    z-index: 10;

  }

  .cat-item-wrap:hover .cat-flyout,

  .cat-item-wrap.hover-active .cat-flyout {

    display: flex;

    animation: fadeInSubmenu 0.16s ease-out;

  }

  @keyframes fadeInSubmenu {

    from { opacity: 0; transform: translateX(-3px); }

    to { opacity: 1; transform: translateX(0); }

  }



  .flyout-body {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 8px;

    padding: 8px 10px;

    flex: 1;

    box-sizing: border-box;

    min-width: 0;

  }



  .flyout-group {

    background: #FFFFFF;

    border: 1px solid #E2E8F0;

    border-radius: 8px;

    padding: 8px 7px 6px;

    display: flex;

    flex-direction: column;

    gap: 2px;

    height: 100%;

    box-sizing: border-box;

    transition: all 0.2s ease;

    min-width: 0;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);

  }

  .flyout-group:hover {

    border-color: rgba(238, 77, 45, 0.35);

    box-shadow: 0 4px 12px rgba(238, 77, 45, 0.08);

  }



  .flyout-group-title {

    font-size: 11px;

    font-weight: 800;

    color: #1E293B;

    text-transform: uppercase;

    letter-spacing: 0.1px;

    display: flex;

    align-items: center;

    gap: 5px;

    padding-bottom: 7px;

    border-bottom: 1.5px solid #F1F5F9;

    margin-bottom: 3px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

  }

  .flyout-group-title svg {

    color: var(--p);

    flex-shrink: 0;

  }



  .flyout-link-item {

    display: flex;

    align-items: center;

    justify-content: space-between;

    font-size: 11px;

    color: #334155;

    text-decoration: none;

    padding: 4px 4px;

    border-radius: 4px;

    transition: all 0.15s ease;

    white-space: nowrap;

    min-width: 0;

    gap: 3px;

    line-height: 1.35;

  }

  .flyout-link-item:hover {

    background: #FFF7F4;

    color: var(--p);

    transform: translateX(2px);

  }



  .flyout-link-text {

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-weight: 500;

    min-width: 0;

    flex: 1;

  }



  .flyout-link-badge {

    font-size: 8.5px;

    font-weight: 700;

    padding: 2px 4.5px;

    border-radius: 3px;

    line-height: 1;

    text-transform: uppercase;

    letter-spacing: 0.1px;

    flex-shrink: 0;

    margin-left: 2px;

  }

  .flyout-link-badge.hot {

    background: #FEE2E2;

    color: #DC2626;

    border: 1px solid #FECACA;

  }

  .flyout-link-badge.deal {

    background: #FEF3C7;

    color: #D97706;

    border: 1px solid #FDE68A;

  }

  .flyout-link-badge.zin {

    background: #EFF6FF;

    color: #2563EB;

    border: 1px solid #DBEAFE;

  }



  /* Khối tiện ích / cam kết mini ở chân mỗi cột cân đối bố cục */

  .flyout-col-promo {

    margin-top: auto;

    padding: 5px 6px;

    background: #FFF9F7;

    border-radius: 6px;

    border: 1px solid rgba(238, 77, 45, 0.2);

    font-size: 9.5px;

    color: var(--p);

    font-weight: 700;

    display: flex;

    align-items: center;

    gap: 4px;

    line-height: 1.3;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

  }

  .flyout-col-promo svg {

    color: var(--p);

    flex-shrink: 0;

  }



  /* DẢI CHÂN SUBMENU: CAM KẾT & NÚT CTA CÂN ĐỐI */

  .flyout-foot-bar {

    background: #FFF7F4;

    border-top: 1px solid rgba(238, 77, 45, 0.15);

    padding: 6px 12px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-radius: 0 0 var(--radius-md) var(--radius-md);

    box-sizing: border-box;

  }

  .flyout-foot-commitments {

    display: flex;

    align-items: center;

    gap: 12px;

  }

  .flyout-foot-item {

    display: flex;

    align-items: center;

    gap: 4px;

    font-size: 10px;

    color: #475569;

    font-weight: 600;

  }

  .flyout-foot-item svg {

    color: var(--p);

    flex-shrink: 0;

  }

  .flyout-foot-cta {

    display: inline-flex;

    align-items: center;

    gap: 4px;

    background: linear-gradient(135deg, #EE4D2D 0%, #D03515 100%);

    color: #FFFFFF;

    text-decoration: none;

    font-size: 10px;

    font-weight: 800;

    padding: 4px 10px;

    border-radius: 20px;

    box-shadow: 0 2px 6px rgba(238, 77, 45, 0.25);

    transition: all 0.18s ease;

    white-space: nowrap;

  }

  .flyout-foot-cta:hover {

    transform: translateY(-1px);

    box-shadow: 0 4px 10px rgba(238, 77, 45, 0.35);

  }



  /* CỘT 2 CONTAINER: BỌC SLIDER + SUB STRIP CÂN ĐỐI 100% CHIỀU CAO */

  .center-col {

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    height: 100%;

    gap: 10px;

    min-width: 0;

  }

  .slider-card {

    background: #FFFFFF;

    border-radius: var(--radius-md);

    border: 1px solid var(--border);

    box-shadow: var(--shadow-soft);

    overflow: hidden;

    display: flex;

    flex-direction: column;

    position: relative;

    flex: 1 1 0;

    min-height: 380px;

  }

  .slider-screen {

    position: relative;

    overflow: hidden;

    flex: 1 1 0;

    min-height: 0;

  }

  .slide-track {

    display: flex;

    height: 100%;

    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  }

  .slide {

    min-width: 100%;

    height: 100%;

    display: block;

    position: relative;

    background: #F8FAFC;

  }

  .slide-banner-img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

  }



  /* CỘT 2: BANNER SLIDER CHÍNH (CHUẨN TỶ LỆ 16:10 ~ 1200x750PX) */

  .slider-card {

    background: #FFFFFF;

    border-radius: var(--radius-md);

    border: 1px solid var(--border);

    box-shadow: var(--shadow-soft);

    overflow: hidden;

    display: flex;

    flex-direction: column;

    position: relative;

    height: 378px;

    flex-shrink: 0;

  }



  /* DẢI 3 MINI PROMO BOXES ĐẮP VÀO KHOẢNG TRỐNG CHÂN SLIDER (CAO 61PX) */

  .slider-sub-strip {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 10px;

    height: 61px;

    flex-shrink: 0;

  }

  .sub-strip-item {

    background: #FFFFFF;

    border: 1px solid var(--border);

    border-radius: var(--radius-md);

    box-shadow: var(--shadow-soft);

    padding: 8px 12px;

    display: flex;

    align-items: center;

    gap: 10px;

    text-decoration: none;

    transition: all 0.2s ease;

  }

  .sub-strip-item:hover {

    transform: translateY(-2px);

    box-shadow: 0 6px 16px rgba(0,0,0,0.08);

    border-color: var(--p);

  }

  .ss-icon {

    width: 34px;

    height: 34px;

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

  }

  .ss-icon-orange { background: #FFF4F0; color: #EE4D2D; }

  .ss-icon-blue { background: #EFF6FF; color: #2563EB; }

  .ss-icon-green { background: #ECFDF5; color: #059669; }

  

  .ss-info {

    display: flex;

    flex-direction: column;

    overflow: hidden;

  }

  .ss-title {

    font-size: 12px;

    font-weight: 800;

    color: #1E293B;

    line-height: 1.3;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

  }

  .ss-sub {

    font-size: 10.5px;

    color: #64748B;

    line-height: 1.25;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

  }

  .slider-screen {

    position: relative;

    overflow: hidden;

    flex: 1;

    min-height: 0;

  }

  .slide-track {

    display: flex;

    height: 100%;

    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  }

  

  .slide {

    min-width: 100%;

    height: 100%;

    position: relative;

    overflow: hidden;

    display: block;

    text-decoration: none;

    background: #F8FAFC;

  }

  .slide-banner-img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform 0.35s ease;

  }

  .slide:hover .slide-banner-img {

    transform: scale(1.018);

  }



  /* Slider Navigation Dots */

  .slider-dots {

    display: flex;

    justify-content: center;

    gap: 6px;

    padding: 8px 0;

    background: #FFFFFF;

    border-top: 1px solid var(--border-light);

  }

  .s-dot {

    width: 6px;

    height: 6px;

    border-radius: 3px;

    background: #CBD5E1;

    cursor: pointer;

    transition: all 0.2s;

  }

  .s-dot.active {

    width: 18px;

    background: var(--p);

  }



  /* CỘT 3: 2 DEAL CARDS NỔI BẬT ĐẬM CHẤT BÁN LẺ (KHÔNG BỊ CHÌM) */

  .promo-col {

    display: flex;

    flex-direction: column;

    gap: 12px;

  }

  .deal-card {

    background: #FFFFFF;

    border-radius: var(--radius-md);

    border: 1px solid var(--border);

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);

    overflow: hidden;

    flex: 1;

    display: flex;

    flex-direction: column;

    transition: transform 0.2s, box-shadow 0.2s;

  }

  .deal-card:hover {

    transform: translateY(-2px);

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);

  }

  

  /* HEADER BANNER MÀU RỰC RỠ NỔI BẬT */

  .deal-card-header {

    padding: 10px 14px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    color: #FFFFFF;

  }

  .deal-card.card-flash .deal-card-header {

    background: linear-gradient(135deg, #DC2626 0%, #EE4D2D 100%);

  }

  .deal-card.card-booking .deal-card-header {

    background: linear-gradient(135deg, #1E40AF 0%, #3B82F6 100%);

  }

  

  .dc-title {

    font-size: 12.5px;

    font-weight: 800;

    display: flex;

    align-items: center;

    gap: 6px;

    letter-spacing: 0.3px;

  }

  .dc-badge {

    font-size: 10.5px;

    font-weight: 800;

    padding: 2px 7px;

    border-radius: 4px;

  }

  .deal-card.card-flash .dc-badge {

    background: #FFB800;

    color: #1F2937;

  }

  .deal-card.card-booking .dc-badge {

    background: #10B981;

    color: #FFFFFF;

  }



  .deal-card-body {

    padding: 12px 14px;

    flex: 1;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

  }

  .deal-item-name {

    font-size: 13.5px;

    font-weight: 800;

    color: var(--text-primary);

    line-height: 1.3;

    margin-bottom: 4px;

  }

  .deal-desc-tag {

    font-size: 11px;

    font-weight: 700;

    display: inline-block;

    padding: 2px 7px;

    border-radius: 4px;

    margin-bottom: 6px;

  }

  .deal-card.card-flash .deal-desc-tag {

    color: var(--pd);

    background: #FEE2E2;

  }

  .deal-card.card-booking .deal-desc-tag {

    color: #1E40AF;

    background: #EFF6FF;

  }

  .deal-summary-text {

    font-size: 11.5px;

    color: var(--text-secondary);

    line-height: 1.45;

    margin-bottom: 12px;

  }



  .deal-card-foot {

    padding: 0 14px 12px;

  }

  

  /* NÚT BẤM CTA RỰC RỠ CÓ HIỆU ỨNG TIA SÁNG */

  .deal-action-btn {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    width: 100%;

    text-align: center;

    padding: 9px 12px;

    border-radius: var(--radius-sm);

    font-size: 12px;

    font-weight: 800;

    color: #FFFFFF !important;

    text-decoration: none;

    position: relative;

    overflow: hidden;

    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);

    transition: all 0.2s;

  }

  .deal-card.card-flash .deal-action-btn {

    background: linear-gradient(135deg, #DC2626 0%, #EE4D2D 100%);

  }

  .deal-card.card-booking .deal-action-btn {

    background: linear-gradient(135deg, #1E40AF 0%, #2563EB 100%);

  }

  .deal-action-btn:hover {

    transform: translateY(-1px);

    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.25);

  }



  /* HIỆU ỨNG TIA SÁNG QUÉT QUA */

  .btn-shine-light {

    position: absolute;

    top: -50%;

    left: -100%;

    width: 60%;

    height: 200%;

    background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);

    animation: shine-sweep 3.2s infinite;

  }

  @keyframes shine-sweep {

    0% { left: -100%; }

    35% { left: 140%; }

    100% { left: 140%; }

  }



  /* ============================================================ */

  /* 4. DÒNG MÁY PHỔ BIẾN — CÂN ĐỐI 2 HÀNG ĐẦY ĐỦ */

  /* ============================================================ */

  .device-quick-section {

    max-width: 1180px;

    margin: 14px auto 0;

    padding: 0 16px;

  }

  .device-quick-card {

    background: #FFFFFF;

    border: 1px solid var(--border);

    border-radius: var(--radius-md);

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);

    padding: 14px 18px;

    display: flex;

    flex-direction: column;

    gap: 11px;

  }

  .dq-header-line {

    display: flex;

    align-items: center;

    justify-content: space-between;

  }

  .dq-label {

    font-size: 12px;

    font-weight: 800;

    color: #1E293B;

    text-transform: uppercase;

    display: flex;

    align-items: center;

    gap: 6px;

    margin: 0;

  }

  .dq-label svg {

    color: var(--p);

  }

  .dq-sub-note {

    font-size: 11.5px;

    color: var(--text-secondary);

  }

  

  /* BỐ CỤC 2 HÀNG CÂN ĐỐI 100% (MỖI HÀNG 6 DÒNG MÁY TIÊU BIỂU) */

  .dq-row {

    display: grid;

    grid-template-columns: repeat(6, 1fr);

    gap: 9px;

  }

  .dq-chip {

    padding: 7px 5px;

    border-radius: 8px;

    background: #F8FAFC;

    border: 1px solid #E2E8F0;

    color: #334155;

    font-size: 11px;

    letter-spacing: -0.15px;

    font-weight: 600;

    text-decoration: none;

    text-align: center;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);

    cursor: pointer;

    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);

  }

  .dq-chip:hover {

    background: #FFFFFF;

    border-color: var(--p);

    color: var(--p);

    transform: translateY(-2px);

    box-shadow: 0 4px 10px rgba(238, 77, 45, 0.12);

  }

  .dq-chip.active {

    background: rgba(238, 77, 45, 0.05);

    border-color: rgba(238, 77, 45, 0.4);

    color: var(--p);

    font-weight: 700;

  }



  /* ============================================================ */

  /* MOBILE ADAPTATION & DOCK */

  /* ============================================================ */

  .mobile-header-bar {

    display: none;

    align-items: center;

    justify-content: space-between;

    padding: 9px 14px;

    background: #FFFFFF;

    border-bottom: 1px solid var(--border-light);

    gap: 10px;

  }

  .m-logo-link {

    display: flex;

    align-items: center;

    text-decoration: none;

    flex-shrink: 0;

  }

  .m-logo-img {

    height: 30px;

    width: auto;

    object-fit: contain;

  }

  .m-header-actions {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-left: auto;

  }

  .m-btn-branch, .m-btn-call {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 34px;

    height: 34px;

    background: #FFF4F0;

    color: var(--p);

    border-radius: 50%;

    text-decoration: none;

    border: 1px solid rgba(238, 77, 45, 0.2);

    transition: all 0.15s;

    flex-shrink: 0;

  }

  .m-btn-branch:active, .m-btn-call:active {

    transform: scale(0.94);

  }

  .m-btn-booking-cta {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    background: linear-gradient(135deg, #EE4D2D 0%, #FF5722 100%);

    color: #FFFFFF !important;

    font-size: 12px;

    font-weight: 800;

    padding: 7px 12px;

    border-radius: 20px;

    text-decoration: none;

    box-shadow: 0 3px 10px rgba(238, 77, 45, 0.35);

    white-space: nowrap;

    transition: all 0.15s;

  }

  .m-btn-booking-cta:active {

    transform: scale(0.96);

  }

  .m-cta-badge {

    background: #FFFFFF;

    color: var(--pd);

    font-size: 10px;

    font-weight: 900;

    padding: 2px 6px;

    border-radius: 10px;

    line-height: 1.1;

  }

  .mobile-search-row {

    display: none;

    padding: 8px 14px 10px 14px;

    background: #FFFFFF;

    border-bottom: 1px solid var(--border);

  }

  .mobile-search-row form.search-input-wrap,

  .mobile-search-row .search-input-wrap {

    margin: 0 !important;

    height: 38px !important;

    padding: 0 4px 0 12px !important;

    border-radius: 20px !important;

    overflow: hidden !important;

  }

  .mobile-search-row .search-input-wrap input {

    margin: 0 !important;

    height: 34px !important;

    line-height: 34px !important;

  }

  .mobile-search-row .btn-search-exec,

  .mobile-search-row button.btn-search-exec {

    margin: 0 !important;

    height: 30px !important;

    line-height: 30px !important;

    padding: 0 12px !important;

    font-size: 11px !important;

  }

  .mobile-cat-grid {

    display: none;

    grid-template-columns: repeat(4, 1fr);

    gap: 8px;

    padding: 12px;

    background: #FFFFFF;

    border-bottom: 1px solid var(--border);

  }

.mc-btn {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 6px;

    text-decoration: none;

  }

  .mc-icon {

    width: 44px;

    height: 44px;

    border-radius: 12px;

    background: #F8FAFC;

    border: 1px solid var(--border);

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--p);

  }

  .mc-text {

    font-size: 10.5px;

    font-weight: 600;

    color: #334155;

    text-align: center;

  }



  /* BỐ CỤC MOBILE BOTTOM DOCK ĐỒNG CAO 44PX CÂN ĐỐI TUYỆT ĐỐI */

  .mobile-dock {

    display: none;

    position: fixed;

    bottom: 0; left: 0; right: 0;

    background: rgba(255, 255, 255, 0.98);

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    border-top: 1px solid var(--border);

    padding: 8px 10px;

    z-index: 9999;

    box-shadow: 0 -4px 20px rgba(0,0,0,0.08);

  }

  .device-shell.mode-mobile .mobile-dock {

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    border-radius: 0 0 36px 36px;

    padding: 8px 12px 14px;

  }

  .dock-flex {

    display: flex;

    align-items: center;

    gap: 7px;

    width: 100%;

  }

  .btn-dock-quick {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    width: 58px;

    height: 44px;

    border-radius: 10px;

    text-decoration: none;

    font-size: 9.5px;

    font-weight: 700;

    gap: 2px;

    white-space: nowrap;

    flex-shrink: 0;

    transition: transform 0.1s;

    border: 1px solid transparent;

  }

  .btn-dock-quick:active {

    transform: scale(0.96);

  }

  .btn-dock-quick.call {

    background: #FFF1F2;

    color: #E11D48;

    border-color: #FFE4E6;

  }

  .btn-dock-quick.zalo {

    background: #F0F9FF;

    color: #0284C7;

    border-color: #E0F2FE;

  }

  .btn-dock-booking {

    flex: 1;

    height: 44px;

    background: linear-gradient(135deg, #EE4D2D 0%, #FF5722 100%);

    color: #FFFFFF !important;

    text-decoration: none;

    padding: 0 12px;

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    box-shadow: 0 3px 12px rgba(238, 77, 45, 0.35);

    min-width: 0;

    transition: transform 0.1s;

  }

  .btn-dock-booking:active {

    transform: scale(0.98);

  }

  .btn-dock-booking-left {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: center;

    line-height: 1.25;

    min-width: 0;

  }

  .btn-dock-booking-left .b-main {

    font-size: 11.5px;

    font-weight: 800;

    letter-spacing: 0.1px;

    white-space: nowrap;

  }

  .btn-dock-booking-left .b-sub {

    font-size: 9px;

    opacity: 0.95;

    font-weight: 500;

    white-space: nowrap;

  }

  .btn-dock-booking-tag {

    background: #FFFFFF;

    color: var(--pd);

    font-size: 10px;

    font-weight: 900;

    padding: 3px 7px;

    border-radius: 6px;

    white-space: nowrap;

    box-shadow: 0 2px 5px rgba(0,0,0,0.12);

  }



  



/* ============================================================ */

/* RESPONSIVE TRÊN MOBILE THẬT (<= 991px) */

/* ============================================================ */

@media (max-width: 991px) {

  body {

    padding-bottom: 65px;

  }

  .site-header {

    display: none !important;

  }

  .mobile-header-bar {

    display: flex !important;

  }

  .mobile-search-row {

    display: block !important;

  }

  .mobile-cat-grid {

    display: grid !important;

  }

  .mobile-dock {

    display: block !important;

    position: fixed !important;

    bottom: 0 !important;

    left: 0 !important;

    right: 0 !important;

    z-index: 9999 !important;

    background: #FFFFFF !important;

    border-top: 1px solid var(--border) !important;

    box-shadow: 0 -4px 16px rgba(0,0,0,0.08) !important;

    padding: 8px 12px !important;

  }

  .hero-section {

    margin: 8px auto !important;

    padding: 0 8px !important;

  }

  .hero-grid {

    grid-template-columns: 1fr !important;

    gap: 10px !important;

  }

  .cat-box {

    display: none !important;

  }

  .center-col {

    height: auto !important;

    gap: 0 !important;

  }

  .slider-card {

    height: auto !important;

    border-radius: var(--radius-sm) !important;

  }

  .slider-screen {

    min-height: 220px !important;

    height: 220px !important;

  }

  .slide-banner-img {

    height: 220px !important;

  }

  .slider-sub-strip {

    display: none !important;

  }

  .promo-col {

    display: flex !important;

    flex-direction: column !important;

    gap: 10px !important;

  }

  .deal-card {

    border-radius: var(--radius-sm) !important;

  }

  .deal-item-name {

    font-size: 13.5px !important;

    margin-bottom: 4px !important;

  }

  .deal-summary-text {

    display: block !important;

    font-size: 11px !important;

    color: #64748B !important;

  }

  .deal-action-btn {

    padding: 9.5px 12px !important;

    font-size: 11.5px !important;

  }

  .device-quick-section {

    display: none !important;

  }



  

  .site-header { display: none; }

  .mobile-header-bar { display: flex; }

  .mobile-search-row { display: block; }

  .mobile-cat-grid { display: grid; }

  .mobile-dock { display: block; }

  .hero-section { margin: 8px auto; padding: 0 8px; }

  .hero-grid { grid-template-columns: 1fr; gap: 8px; }

  .cat-box { display: none; }

  .slider-card { height: auto !important; border-radius: var(--radius-sm); }

  .slider-screen { min-height: 234px; height: 234px; }

  .slide { padding: 20px 18px; min-height: 234px; height: 234px; }

  .slide-info { max-width: 66%; }

  .slide-tag { font-size: 10px; padding: 2.5px 8px; margin-bottom: 6px; }

  .slide-title { font-size: 19px; margin-bottom: 6px; line-height: 1.25; }

  .slide-desc { font-size: 11px; margin-bottom: 12px; line-height: 1.4; }

  .slide-btn { padding: 7px 15px; font-size: 11.5px; border-radius: 20px; }

  .slide-graphic { width: 95px; height: 160px; right: 14px; bottom: 20px; }

  .center-col { height: auto !important; gap: 0 !important; }

  .slider-sub-strip { display: none !important; }

  .promo-col { 

    display: flex !important; 

    flex-direction: column !important; 

    gap: 10px !important; 

  }

  .deal-card { 

    border-radius: var(--radius-sm); 

    box-shadow: 0 2px 8px rgba(0,0,0,0.06); 

  }

  .deal-card-header { padding: 8px 12px; }

  .dc-title { font-size: 12px; font-weight: 800; }

  .dc-badge { font-size: 10.5px; padding: 2px 6px; }

  .deal-card-body { padding: 10px 12px 6px; }

  .deal-item-name { 

    font-size: 13.5px !important; 

    font-weight: 800 !important; 

    line-height: 1.35 !important;

    white-space: normal;

  }

  .deal-desc-tag { 

    font-size: 11px !important; 

    padding: 2px 6px !important; 

    display: inline-block;

    margin: 3px 0 4px;

  }

  .deal-summary-text { 

    display: block !important; 

    font-size: 11px !important; 

    color: #64748B !important; 

    line-height: 1.35; 

  }

  .deal-card-foot { padding: 0 12px 10px; }

  .deal-action-btn { 

    padding: 9px 12px; 

    font-size: 11.5px; 

    font-weight: 800; 

    border-radius: var(--radius-sm);

  }

  .device-quick-section { display: none; }



  /* Real Mobile Responsive */

  

}









/* 1. KHAI BÁO CHÍNH XÁC FONT CHỮ GỐC CỦA THANH TRANG MOBILE */

@font-face {

  font-family: 'SF Pro Display Regular';

  src: url('/wp-content/uploads/fonts/sfprodisplay-regular.woff2') format('woff2');

  font-weight: 400;

  font-style: normal;

  font-display: swap;

}

@font-face {

  font-family: 'SF Pro Display Medium';

  src: url('/wp-content/uploads/fonts/sfprodisplay-medium.woff2') format('woff2');

  font-weight: 500;

  font-style: normal;

  font-display: swap;

}

@font-face {

  font-family: 'SF Pro Display Bold';

  src: url('/wp-content/uploads/fonts/sfprodisplay-bold.woff2') format('woff2');

  font-weight: 700;

  font-style: normal;

  font-display: swap;

}



:root {

  --font-regular: 'SF Pro Display Regular', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;

  --font-medium: 'SF Pro Display Medium', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;

  --font-bold: 'SF Pro Display Bold', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;

  --font: var(--font-medium) !important;

}



/* Áp dụng đồng bộ 100% font chữ website trên toàn trang demo */

body, button, input, select, textarea {

  font-family: var(--font-medium) !important;

}

h1, h2, h3, h4, h5, h6, strong, b,

.cat-title, .flyout-group-title, .flyout-foot-cta,

.deal-tag, .slide-badge, .badge-label, .btn-lead,

.btn-search, .header-cta-btn {

  font-family: var(--font-bold) !important;

}

p, span, a, li,

.cat-item, .flyout-link-item, .flyout-link-text,

.ss-title, .ss-sub, .deal-item-name, .deal-badge,

.quick-tag-item {

  font-family: var(--font-medium) !important;

}



/* 2. CÂN ĐỐI GIÃN CÁCH HOÀN HẢO CHO CẢ 7 FLYOUT - KHÔNG CÒN KHOẢNG TRỐNG ĐÁY */

.cat-flyout {

  position: absolute !important;

  top: 0 !important;

  left: calc(100% + 14px) !important;

  width: 725px !important;

  height: 100% !important;

  background: #FFFFFF !important;

  border: 1px solid #E2E8F0 !important;

  border-radius: 12px !important;

  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12) !important;

  display: none !important;

  flex-direction: column !important;

  z-index: 300 !important;

  box-sizing: border-box !important;

  overflow: hidden !important;

}



.cat-item-wrap:hover .cat-flyout,

.cat-item-wrap.hover-active .cat-flyout {

  display: flex !important;

  animation: fadeInSubmenu 0.16s ease-out !important;

}



.cat-flyout .flyout-body {

  display: grid !important;

  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

  gap: 10px !important;

  padding: 10px 12px 8px 12px !important;

  flex: 1 !important;

  box-sizing: border-box !important;

  min-height: 0 !important;

  align-items: stretch !important;

}



.cat-flyout .flyout-group {

  background: #FFFFFF !important;

  border: 1px solid #E2E8F0 !important;

  border-radius: 8px !important;

  padding: 8px 8px 6px 8px !important;

  display: flex !important;

  flex-direction: column !important;

  box-sizing: border-box !important;

  height: 100% !important;

  min-width: 0 !important;

  transition: all 0.2s ease !important;

}



.cat-flyout .flyout-group:hover {

  border-color: rgba(238, 77, 45, 0.35) !important;

  box-shadow: 0 4px 12px rgba(238, 77, 45, 0.08) !important;

}



.cat-flyout .flyout-group-title {

  font-size: 11.5px !important;

  font-weight: 700 !important;

  color: #0F172A !important;

  text-transform: uppercase !important;

  letter-spacing: 0.1px !important;

  display: flex !important;

  align-items: center !important;

  gap: 5px !important;

  padding-bottom: 6px !important;

  border-bottom: 1.5px solid #F1F5F9 !important;

  margin-bottom: 2px !important;

  white-space: nowrap !important;

  flex-shrink: 0 !important;

}



.cat-flyout .flyout-group-title svg {

  color: #EE4D2D !important;

  flex-shrink: 0 !important;

}



/* CONTAINER PHÂN BỔ ĐỀU CÁC DÒNG LINK - GIẢI PHÁP TRIỆT TIÊU KHOẢNG TRỐNG ĐÁY */

.cat-flyout .flyout-links-wrap {

  display: flex !important;

  flex-direction: column !important;

  justify-content: space-evenly !important; /* Trải đều các dòng theo chiều dọc */

  flex: 1 !important;

  min-height: 0 !important;

  padding: 2px 0 !important;

}



.cat-flyout .flyout-link-item {

  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;

  padding: 7px 7px !important;

  border-radius: 5px !important;

  color: #334155 !important;

  text-decoration: none !important;

  font-size: 12.5px !important;

  line-height: 1.35 !important;

  transition: all 0.15s ease !important;

  white-space: nowrap !important;

  min-width: 0 !important;

}



.cat-flyout .flyout-link-item:hover {

  background: #FFF5F2 !important;

  color: #EE4D2D !important;

  transform: translateX(2px) !important;

}



.cat-flyout .flyout-link-text {

  overflow: hidden !important;

  text-overflow: ellipsis !important;

  white-space: nowrap !important;

  font-weight: 500 !important;

  flex: 1 !important;

}



.cat-flyout .flyout-link-badge {

  font-size: 9px !important;

  font-weight: 700 !important;

  padding: 2px 5px !important;

  border-radius: 3px !important;

  line-height: 1 !important;

  text-transform: uppercase !important;

  letter-spacing: 0.1px !important;

  flex-shrink: 0 !important;

  margin-left: 4px !important;

}



.cat-flyout .flyout-link-badge.hot { background: #FEE2E2 !important; color: #DC2626 !important; border: 1px solid #FECACA !important; }

.cat-flyout .flyout-link-badge.deal { background: #FEF3C7 !important; color: #D97706 !important; border: 1px solid #FDE68A !important; }

.cat-flyout .flyout-link-badge.zin { background: #EFF6FF !important; color: #2563EB !important; border: 1px solid #DBEAFE !important; }

.cat-flyout .flyout-link-badge.fast { background: #FEF9C3 !important; color: #CA8A04 !important; border: 1px solid #FEF08A !important; }

.cat-flyout .flyout-link-badge.vip { background: #EDE9FE !important; color: #6D28D9 !important; border: 1px solid #DDD6FE !important; }



.cat-flyout .flyout-col-promo {

  margin-top: 4px !important;

  padding: 5px 7px !important;

  background: #FFF9F7 !important;

  border-radius: 6px !important;

  border: 1px solid rgba(238, 77, 45, 0.2) !important;

  font-size: 9.5px !important;

  color: #EE4D2D !important;

  font-weight: 700 !important;

  display: flex !important;

  align-items: center !important;

  gap: 4px !important;

  line-height: 1.3 !important;

  white-space: nowrap !important;

  overflow: hidden !important;

  flex-shrink: 0 !important;

}



.cat-flyout .flyout-col-promo svg {

  color: #EE4D2D !important;

  flex-shrink: 0 !important;

}



/* 3. DẢI CHÂN CAM KẾT CHUẨN THƯƠNG HIỆU & NÚT CTA */

.cat-flyout .flyout-foot-bar {

  background: #FFF7F4 !important;

  border-top: 1px solid rgba(238, 77, 45, 0.15) !important;

  padding: 7px 14px !important;

  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;

  border-radius: 0 0 12px 12px !important;

  box-sizing: border-box !important;

  flex-shrink: 0 !important;

}



.cat-flyout .flyout-foot-commitments {

  display: flex !important;

  align-items: center !important;

  gap: 12px !important;

}



.cat-flyout .flyout-foot-item {

  display: flex !important;

  align-items: center !important;

  gap: 5px !important;

  font-size: 10.5px !important;

  color: #475569 !important;

  font-weight: 600 !important;

}



.cat-flyout .flyout-foot-item svg {

  color: #EE4D2D !important;

  flex-shrink: 0 !important;

}



.cat-flyout .flyout-foot-cta {

  display: inline-flex !important;

  align-items: center !important;

  gap: 4px !important;

  background: linear-gradient(135deg, #EE4D2D 0%, #D03515 100%) !important;

  color: #FFFFFF !important;

  text-decoration: none !important;

  font-size: 10.5px !important;

  font-weight: 700 !important;

  padding: 5px 12px !important;

  border-radius: 20px !important;

  box-shadow: 0 2px 6px rgba(238, 77, 45, 0.25) !important;

  transition: all 0.18s ease !important;

  white-space: nowrap !important;

}



.cat-flyout .flyout-foot-cta:hover {

  transform: translateY(-1px) !important;

  box-shadow: 0 4px 10px rgba(238, 77, 45, 0.35) !important;

}







/* ========================================================================== */

/* TTM 2026 UNIFIED TYPOGRAPHY ENGINE: ĐỒNG BỘ 100% FONT & TYPOGRAPHY SCALE */

/* ========================================================================== */



@font-face {

  font-family: 'SF Pro Display';

  src: url('/wp-content/uploads/fonts/sfprodisplay-regular.woff2') format('woff2');

  font-weight: 400;

  font-style: normal;

  font-display: swap;

}

@font-face {

  font-family: 'SF Pro Display';

  src: url('/wp-content/uploads/fonts/sfprodisplay-medium.woff2') format('woff2');

  font-weight: 500;

  font-style: normal;

  font-display: swap;

}

@font-face {

  font-family: 'SF Pro Display';

  src: url('/wp-content/uploads/fonts/sfprodisplay-bold.woff2') format('woff2');

  font-weight: 600 800;

  font-style: normal;

  font-display: swap;

}



/* Fallback aliases */

@font-face {

  font-family: 'SF Pro Display Regular';

  src: url('/wp-content/uploads/fonts/sfprodisplay-regular.woff2') format('woff2');

  font-weight: 400;

  font-style: normal;

  font-display: swap;

}

@font-face {

  font-family: 'SF Pro Display Medium';

  src: url('/wp-content/uploads/fonts/sfprodisplay-medium.woff2') format('woff2');

  font-weight: 500;

  font-style: normal;

  font-display: swap;

}

@font-face {

  font-family: 'SF Pro Display Bold';

  src: url('/wp-content/uploads/fonts/sfprodisplay-bold.woff2') format('woff2');

  font-weight: 700;

  font-style: normal;

  font-display: swap;

}



:root {

  --font-main: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;

  --font-regular: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;

  --font-medium: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;

  --font-bold: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;

  --font: var(--font-main) !important;

}



/* 1. ÉP 100% CẢ KHÚC TRÊN LẪN KHÚC DƯỚI DÙNG CHUNG HỆ FONT SF PRO DISPLAY */

html, body, #main, #content,

.site-header, .site-header *,

.hero-section, .hero-section *,

.device-quick-section, .device-quick-section *,

.home-services-title, .home-services-title *,

.section_product, .section_product *,

.tabgroup, .tabgroup *,

.tabbed-content, .tabbed-content *,

.nav-tabs, .nav-tabs *,

.woocommerce, .woocommerce *,

.box-text, .box-text *,

.row-gioi-thieu, .row-gioi-thieu *,

.footer-wrapper, .footer-wrapper * {

  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}



/* 2. ĐỒNG BỘ KÍCH THƯỚC CHỮ MENU 7 DANH MỤC TRÊN DESKTOP */

.cat-item-text {

  font-size: 13.5px !important;

  font-weight: 600 !important;

  color: #1E293B !important;

}

.cat-item:hover .cat-item-text,

.cat-item.active .cat-item-text {

  color: #EE4D2D !important;

}



/* 3. ĐỒNG BỘ HOÀN HẢO KÍCH THƯỚC VÀ TRỌNG LƯỢNG 12 CHIP DÒNG MÁY TIÊU BIỂU */

.device-quick-section {

  width: 100% !important;

  max-width: 1250px !important;

  margin: 18px auto 0 auto !important;

  padding: 0 15px !important;

  box-sizing: border-box !important;

}

.device-quick-card {

  width: 100% !important;

  max-width: 1220px !important;

  margin: 0 auto !important;

  box-sizing: border-box !important;

}

.device-quick-card {

  background: #FFFFFF !important;

  border: 1px solid #E2E8F0 !important;

  border-radius: 12px !important;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;

  padding: 16px 20px !important;

  display: flex !important;

  flex-direction: column !important;

  gap: 12px !important;

}

.dq-header-line {

  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;

  margin-bottom: 2px !important;

}

.dq-label {

  font-size: 14.5px !important;

  font-weight: 700 !important;

  color: #0F172A !important;

  text-transform: uppercase !important;

  letter-spacing: 0.3px !important;

  display: flex !important;

  align-items: center !important;

  gap: 8px !important;

  margin: 0 !important;

}

.dq-label svg {

  color: #EE4D2D !important;

  width: 16px !important;

  height: 16px !important;

}

.dq-sub-note {

  font-size: 13px !important;

  color: #64748B !important;

  font-weight: 500 !important;

}



.dq-row {

  display: grid !important;

  grid-template-columns: repeat(6, 1fr) !important;

  gap: 10px !important;

}

.dq-chip {

  padding: 8px 12px !important;

  height: 38px !important;

  border-radius: 8px !important;

  background: #F8FAFC !important;

  border: 1px solid #CBD5E1 !important;

  color: #1E293B !important;

  font-size: 13.5px !important;

  font-weight: 600 !important;

  letter-spacing: -0.1px !important;

  text-decoration: none !important;

  text-align: center !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  white-space: nowrap !important;

  overflow: hidden !important;

  text-overflow: ellipsis !important;

  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;

  cursor: pointer !important;

  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;

}

.dq-chip:hover {

  background: #FFFFFF !important;

  border-color: #EE4D2D !important;

  color: #EE4D2D !important;

  transform: translateY(-2px) !important;

  box-shadow: 0 4px 12px rgba(238, 77, 45, 0.15) !important;

}

.dq-chip.active {

  background: #FFF4F0 !important;

  border-color: #EE4D2D !important;

  color: #EE4D2D !important;

  font-weight: 700 !important;

}



/* 4. ĐỒNG BỘ TIÊU ĐỀ PHÂN CÁCH & KHỐI TABS DỊCH VỤ PHÍA DƯỚI */

.row.home-services-title {

  max-width: 1250px !important;

  margin: 28px auto 14px auto !important;

  padding: 0 15px !important;

}

.home-services-title h2,

.home-services-title .section-title {

  font-size: 22px !important;

  font-weight: 700 !important;

  color: #0F172A !important;

  letter-spacing: -0.2px !important;

  text-align: center !important;

  margin: 0 !important;

}



.tabgroup h4,

.section_product h4.uppercase {

  font-size: 18px !important;

  font-weight: 700 !important;

  color: #0F172A !important;

  letter-spacing: 0.3px !important;

  margin-bottom: 12px !important;

}



.tab-button,

.nav-tabs li a {

  font-size: 14px !important;

  font-weight: 600 !important;

  padding: 6px 14px !important;

  border-radius: 6px !important;

}



.product-title,

.woocommerce-loop-product__title,

.box-text a {

  font-size: 14px !important;

  font-weight: 600 !important;

  line-height: 1.4 !important;

  color: #1E293B !important;

}



.price ins .amount,

.price .amount {

  font-size: 17px !important;

  font-weight: 700 !important;

  color: #EE4D2D !important;

}

.price del .amount {

  font-size: 13px !important;

  color: #94A3B8 !important;

}



@media (max-width: 768px) {

  .dq-row {

    grid-template-columns: repeat(2, 1fr) !important;

  }

}





/* FIX ẢNH 2: CÂN ĐỐI KHỐI LỖI THIẾT BỊ & ƯU ĐÃI */

.section_blog {

  padding-top: 10px !important;

  padding-bottom: 20px !important;

}

.section_blog .row {

  display: flex !important;

  flex-wrap: wrap !important;

  align-items: stretch !important;

}

.section_blog .col {

  display: flex !important;

  flex-direction: column !important;

}

.section_blog .col .col-inner {

  height: 100% !important;

  display: flex !important;

  flex-direction: column !important;

  justify-content: space-between !important;

}

.section_blog .btn-outline {

  margin-top: auto !important;

  align-self: flex-start !important;

}









/* ENFORCE SUBMENU HIDDEN DEFAULT */

.cat-flyout {

  display: none !important;

  position: absolute !important;

}

.cat-item-wrap:hover .cat-flyout,

.cat-item-wrap.hover-active .cat-flyout {

  display: flex !important;

}


/* ==========================================================================
   TTM UI/UX FIX: MOBILE BANNER GAP & STICKY HEADER ALIGNMENT
   ========================================================================== */
@media (max-width: 849px) {
  .slider-card {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: none !important;
  }
  .slider-screen {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  .slide {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
  }
  .slide-banner-img,
  .slider-card img {
    height: auto !important;
    max-height: 230px !important;
    width: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: var(--radius-sm, 8px) !important;
  }
  .slider-dots {
    margin-top: 6px !important;
    padding-bottom: 4px !important;
  }
}

/* Nút Hệ Thống 7 Cửa Hàng TP.HCM chuẩn UI/UX */
.button-system-footer {
  margin: 16px 0 0 0 !important;
  display: block !important;
}
.ttm-store-pill-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 13px !important;
  background: #FFF5F2 !important;
  border: 1.5px solid #FDDCD2 !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  transition: all 0.22s ease !important;
  box-sizing: border-box !important;
  max-width: 270px !important;
  width: 100% !important;
}
.ttm-store-pill-btn:hover {
  background: #EE4D2D !important;
  border-color: #EE4D2D !important;
  box-shadow: 0 6px 16px rgba(238, 77, 45, 0.25) !important;
  transform: translateY(-2px) !important;
}
.ttm-pill-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  background: #FFFFFF !important;
  color: #EE4D2D !important;
  flex-shrink: 0 !important;
  box-shadow: 0 2px 6px rgba(238, 77, 45, 0.15) !important;
}
.ttm-pill-text {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  line-height: 1.25 !important;
}
.ttm-pill-text strong {
  font-size: 13.5px !important;
  color: #C43214 !important;
  font-weight: 700 !important;
  transition: color 0.2s !important;
}
.ttm-pill-text small {
  font-size: 11.5px !important;
  color: #8C4030 !important;
  transition: color 0.2s !important;
}
.ttm-store-pill-btn:hover .ttm-pill-text strong,
.ttm-store-pill-btn:hover .ttm-pill-text small {
  color: #FFFFFF !important;
}
.ttm-pill-arrow {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #EE4D2D !important;
  line-height: 1 !important;
  transition: transform 0.2s, color 0.2s !important;
}
.ttm-store-pill-btn:hover .ttm-pill-arrow {
  color: #FFFFFF !important;
  transform: translateX(3px) !important;
}