/* ===============================================
   HEADER DESIGN MODULE (ICON + HOVER POPUP)
   =============================================== */

/* 1. Khung bao ngoài */
.header-design-module {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
}

/* 2. Icon Trigger trên Header */
.design-trigger {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-600);
  transition: all 0.3s ease;
}

.design-trigger:hover {
  color: var(--brand-color-1);
}

/* Dấu chấm đỏ/cam nháy báo hiệu Beta */
.beta-ping-dot {
  position: absolute;
  top: -2px;
  right: -4px;
  width: 10px;
  height: 10px;
  background-color: var(--brand-color-2);
  border-radius: var(--border-radius-circle);
  border: 2px solid var(--white);
}

.beta-ping-dot::after {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  width: 100%;
  height: 100%;
  border-radius: var(--border-radius-circle);
  border: 2px solid var(--brand-color-2);
  animation: ping-animation 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes ping-animation {
  75%,
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}

/* 3. Popup Dropdown */
.design-dropdown {
  position: absolute;
  top: calc(100% + 5px);
  right: -50%;
  width: 320px;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.header-design-module:hover .design-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ===============================================
   VÔ HIỆU HÓA CLICK VÀO ICON THIẾT KẾ
   =============================================== */

/* Ngăn chặn click vào icon bên ngoài */
.header-design-module .nav__icon-btn.design-trigger {
  pointer-events: none;
  cursor: default;
}
.header-design-module .design-dropdown {
  pointer-events: auto;
}

/* Cầu nối tàng hình giúp chuột không bị mất hover khi rê xuống */
.dropdown-bridge {
  position: absolute;
  top: -20px;
  left: 0;
  width: 100%;
  height: 20px;
  background: transparent;
}

/* 4. Thiết kế bên trong Thẻ Popup */
.design-dropdown__inner {
  background: var(--white);
  border-radius: var(--border-radius-xl);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--gray-200);
  padding: 15px;
  position: relative;
}

/* Mũi tên chỉ lên icon (Caret) */
.design-dropdown__inner::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 35px; /* Căn chỉnh vị trí mũi tên khớp với icon bên trên */
  width: 12px;
  height: 12px;
  background: var(--white);
  transform: rotate(45deg);
  border-top: 1px solid var(--blue-100);
  border-left: 1px solid var(--blue-100);
}

.design-dropdown__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.dd-icon-box {
  width: 45px;
  height: 45px;
  background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
  color: var(--brand-color-1, var(--brand-color-3-light));
  border-radius: var(--border-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dd-icon-box .js-svg-inject {
  width: 24px;
  height: 24px;
}

.dd-badge {
  background: var(--white) beb;
  color: #d97706;
  font-size: 1.1rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 50px;
  text-transform: uppercase;
}

.design-dropdown__body h4 {
  font-size: 1.8rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 8px;
}

.design-dropdown__body p {
  font-size: 1.35rem;
  color: var(--gray-600);
  line-height: 1.5;
  margin-bottom: 20px;
}

.btn-dd-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px;
  background: var(--brand-color-1);
  color: var(--white) !important;
  border-radius: var(--border-radius-lg);
  font-size: 1.45rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-dd-action:hover {
  background: #0037c1; /* Màu đậm hơn khi hover */
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(33, 103, 221, 0.25);
}

/* Ẩn trên Mobile (Mobile thường dùng Menu Hamburger) */
@media (max-width: 991px) {
  .header-design-module {
    display: none;
  }
}
/* END HEADER DESIGN MODULE */
/* ===============================================
   TOP PROMO MARQUEE (BANNER CHẠY NGANG TRÊN CÙNG)
   =============================================== */
.top-promo-marquee {
  width: 100%;
  background: linear-gradient(
    90deg,
    var(--white) 0%,
    #fef1eb 60%,
    var(--white) 100%
  );
  border-bottom: 1px solid #fae2c2;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 8px 0;
  position: relative;
  z-index: 10001;
}

.promo-marquee-track {
  display: flex;
  width: max-content;
  animation: scrollLTR 35s linear infinite;
}

.top-promo-marquee:hover .promo-marquee-track {
  animation-play-state: paused;
}

.marquee-group {
  display: flex;
  gap: 50px;
  padding-right: 50px;
}

.marquee-text {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.35rem;
  color: var(--gray-700);
  white-space: nowrap;
}

.marquee-text strong {
  color: var(--brand-color-2);
  font-weight: 800;
  font-size: 1.45rem;
}

.marquee-text .js-svg-inject {
  color: var(--brand-color-2);
  width: 18px;
  height: 18px;
}

@keyframes scrollLTR {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}
/* END TOP PROMO MARQUEE */

/* ===============================================
   SIMPLE MODERN HEADER
   =============================================== */
.header {
  position: sticky;
  top: 0;
  width: 100%;
  backdrop-filter: blur(15px);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
  z-index: 10000;
  padding: 12px 0;
}

.header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header__logo {
  flex-shrink: 0;
}

.header__logo img {
  height: 48px;
  width: auto;
  display: block;
}

.nav {
  display: flex;
  align-items: center;
  min-width: 0;
  margin-left: auto;
  margin-right: 40px;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: 40px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 1.55rem;
  font-weight: 600;
  color: var(--gray-600);
  white-space: nowrap;
  padding: 10px 0;
  position: relative;
  transition: color 0.3s ease;
  text-decoration: none;
}

.nav__link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 3px;
  background-color: var(--brand-color-1);
  border-radius: 4px;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav__link svg {
  width: 20px;
  height: 20px;
}

.nav__link:hover,
.nav__link.active {
  color: var(--brand-color-1);
}

.nav__link:hover::after,
.nav__link.active::after {
  width: 100%;
}

/* Icon Buttons (Giỏ hàng, User) */
.header__actions {
  display: flex;
  align-items: center;
  gap: 15px;
}
.header__burger {
  display: none;
  background: transparent;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 6px;
  cursor: pointer;
  color: var(--brand-color-1);
  transition: 0.2s ease;
}

.header__burger:hover {
  background: var(--white);
}

.header__burger svg,
.header__burger .js-svg-inject {
  width: 26px !important;
  height: 26px !important;
  display: block;
}

.nav__divider {
  width: 1px;
  height: 20px;
  background: var(--gray-200);
  margin: 0 5px;
}

.nav__icon-btn svg,
.nav__icon-btn i {
  width: 24px;
  height: 24px;
  display: block;
}
/* Badge số giỏ hàng */
.nav__cart-badge {
  position: absolute;
  top: -2px;
  right: -4px;

  background: #ff4d4d !important;
  color: var(--white) !important;
  font-size: 1.1rem !important;
  font-weight: 900;
  min-width: 18px;
  height: 18px;
  border-radius: var(--border-radius-circle);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--white);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  z-index: 5;
  line-height: 1;
}
.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px);
  z-index: 99998 !important;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}

.nav {
  z-index: 999999 !important;
}

.mobile-menu-overlay.is-active {
  opacity: 1 !important;
  visibility: visible !important;
}

.mobile-menu-header {
  display: none;
}

@media (max-width: 1300px) {
  .nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 320px;
    max-width: 85vw;
    height: 100vh;
    background: var(--white);
    z-index: 99999;
    display: flex !important;
    flex-direction: column;
    transform: translateX(-100%);
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.08);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .nav.is-active {
    transform: translateX(0);
  }

  .mobile-menu-header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid var(--blue-100);
  }

  .mobile-logo {
    height: 35px;
    object-fit: contain;
  }

  .nav__body {
    flex: 1;
    overflow-y: auto;
    width: 100%;
    padding: 20px 15px;
  }

  .nav__list li {
    width: 100%;
    display: block;
  }

  .nav__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .nav__link {
    display: flex;
    align-items: center;
    justify-content: flex-start !important;
    gap: 15px;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 20px !important;
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--gray-600);
    border-radius: var(--border-radius-lg);
    transition: all 0.2s ease;
    text-decoration: none;
  }

  .nav__link::after {
    display: none;
  }

  .nav__link-icon {
    width: 24px;
    display: flex;
    justify-content: center;
    transition: color 0.2s ease;
  }

  .nav__link.active,
  .nav__link:hover {
    color: var(--brand-color-1, #2167dd);
    background: rgba(33, 103, 221, 0.08);
    font-weight: 600;
  }

  .nav__link.active .nav__link-icon,
  .nav__link:hover .nav__link-icon {
    color: var(--brand-color-1, #2167dd);
  }

  .nav__footer {
    padding: 20px;
    border-top: 1px solid var(--blue-100);
    background: #fafafa;
    text-align: center;
    font-size: 1.4rem;
    color: var(--gray-600);
  }

  .header__burger {
    display: block !important;
  }
}

@media (max-width: 768px) {
  .header .container {
    padding: 0 15px !important;
  }

  .header__actions {
    gap: 10px;
  }
  .hide-on-mobile {
    display: none !important;
  }

  .header__logo img {
    height: 38px;
  }
}
/* END SIMPLE MODERN HEADER */

/* ===============================================
   ACCOUNT POPUP
   =============================================== */

.header-account {
  position: relative;
}

.chevron-icon {
  width: 14px !important;
  height: 14px !important;
  margin-left: 2px;
  opacity: 0.5;
}

/* Khung Popup tổng thể */
.account-popup {
  position: absolute;
  top: 100%;
  right: -20px;
  width: 320px;
  z-index: 10000;
  visibility: hidden;
  opacity: 0;
  transform: translateY(15px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

/* Hiển thị khi rê chuột */
.header-account:hover .account-popup {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.account-popup__inner {
  background: var(--white);
  border-radius: var(--border-radius-xl);
  padding: 30px 20px;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
  border: 1px solid var(--gray-200);
}

/* Avatar Circle */
.account-popup__avatar {
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
}

.avatar-circle {
  width: 64px;
  height: 64px;
  background-color: #f0fdfa;
  border-radius: var(--border-radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-color-1-dark);
  border: 1px solid var(--brand-color-1-light);
}

.avatar-circle svg {
  width: 32px;
  height: 32px;
}

/* Text Styles */
.account-popup__title {
  font-size: 2rem;
  font-weight: 800;
  color: #1a1a1a;
  margin-bottom: 10px;
}

.account-popup__desc {
  font-size: 1.4rem;
  color: #94a3b8;
  line-height: 1.5;
  margin-bottom: 25px;
}

/* Button Đăng nhập */
.account-popup__btn {
  width: 100%;
  background-color: var(--brand-color-1);
  color: var(--white);
  border: none;
  padding: 14px;
  border-radius: var(--border-radius-pill);
  font-weight: 700;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  transition: 0.3s;
}

.account-popup__btn:hover {
  background-color: var(--brand-color-3);
  transform: scale(1.02);
  box-shadow: 0 8px 20px rgba(4, 120, 87, 0.2);
}

/* Style cho menu khi đã đăng nhập */
.account-quick-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

.account-quick-menu li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 15px;
  color: #444;
  font-size: 1.4rem;
  font-weight: 600;
  border-radius: var(--border-radius-lg);
  transition: 0.2s;
}

.account-quick-menu li a:hover {
  background: var(--white);
  color: var(--brand-color-1);
}

.account-quick-menu .divider {
  height: 1px;
  background: var(--blue-100);
  margin: 10px 0;
}

.text-red {
  color: #ef4444 !important;
}
/* End ACCOUNT POPUP */

/* HERO */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hero-custom {
  padding: 10px 0;
  margin-top: 10px;
}

.hero-custom__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 15px;
}

.hero-custom__main {
  position: relative;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  height: 100%;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  padding: 0;
}

.slider-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--border-radius-lg);
}

.slider-track {
  display: flex;
  width: 100%;
  will-change: transform;
}

.slide {
  flex: 0 0 100%;
  width: 100%;
}
.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.slider-track.not-smooth {
  transition: none !important;
}

.slider-track.smooth {
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.slider-dots {
  position: absolute;
  bottom: 15px;
  right: 20px;
  display: flex;
  gap: 8px;
  z-index: 10;
}

.dot {
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: var(--border-radius-circle);
  cursor: pointer;
  transition: 0.3s;
}

.dot.active {
  background: var(--white);
  width: 25px;
  border-radius: 5px;
}

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

.hero-custom__time-badge {
  position: absolute;
  bottom: 15px;
  left: 15px;
  background: #059669;
  color: var(--white);
  padding: 6px 15px;
  border-radius: 50px;
  font-size: 1.3rem;
  font-weight: 600;
}

.hero-custom__side-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
}

.hero-item {
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.hero-item__wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Ảnh nền */
.hero-item__bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.hero-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-item:hover,
.hero-custom__main:hover {
  transform: scale(1.02);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.hero-item:hover .hero-item__bg {
  transform: scale(1.15);
}

.hero-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
}

.hero-item::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transform: skewX(-25deg);
  transition: none;
}

.hero-item:hover::after {
  left: 150%;
  transition: all 0.8s ease;
}

@media (max-width: 991px) {
  .hero-custom__grid {
    grid-template-columns: 1fr;
  }
}

/* END HERO CUSTOM */

/* ===============================================
   BREADCRUMB MODERN
   =============================================== */
.breadcrumb-nav {
  padding: 20px 0;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.breadcrumb li {
  font-size: 1.6rem;
  color: var(--gray-500);
  display: flex;
  align-items: center;
}

.breadcrumb li a {
  color: var(--gray-600);
  transition: 0.3s;
}

.breadcrumb li a:hover {
  color: var(--brand-color-1);
}

.breadcrumb li.separator {
  color: var(--gray-300);
  font-size: 1.4rem;
  margin: 0 4px;
}

.breadcrumb li.active {
  color: var(--brand-color-1);
  font-weight: 600;
}
/* END BREADCRUMB MODERN */

/* ===============================================
 PRODUCT LIST - DANH SÁCH SẢN PHẨM
  =============================================== */

.product-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 30px;
  margin-top: 20px;
}

.product-list-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.category-title {
  font-size: 2.4rem;
  font-weight: 700;
  margin-bottom: 5px;
  color: #333;
}

.product-count {
  color: #888;
  font-size: 1.4rem;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

.product-card-item {
  transition: transform 0.3s ease;
}
.product-card-item:hover {
  transform: translateY(-5px);
}

/* Sidebar Sticky */
.sidebar-wrapper {
  position: sticky;
  top: 20px;
  height: fit-content;
}

/* Responsive cho Mobile */
@media (max-width: 992px) {
  .product-layout {
    grid-template-columns: 1fr;
  }

  .sidebar-wrapper {
    position: fixed;
    left: -100%;
    top: 0;
    width: 300px;
    height: 100%;
    background: var(--white);
    z-index: 1001;
    transition: 0.4s;
    padding: 20px;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
  }

  .sidebar-wrapper.active {
    left: 0;
  }

  .hidden-desktop {
    display: block !important;
  }
}

@media (max-width: 600px) {
  .product-list-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .header-left,
  .header-right {
    width: 100%;
  }

  .category-title {
    font-size: 2.2rem;
  }

  .product-card__name a {
    font-size: 1.6rem;
    height: auto !important;
    line-height: 1.4 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    margin-bottom: 8px;
  }
}
/* END PRODUCT LIST */

/* ===============================================
   REFINED CONTROLS (BỘ LỌC & SẮP XẾP)
   =============================================== */

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-filter-mobile i {
  width: 16px;
  height: 16px;
}
.sort-wrapper {
  position: relative;
  min-width: 200px;
  user-select: none;
}

.sort-inner {
  display: flex;
  align-items: center;
  background: var(--white);
  border: 1.5px solid #e2e8f0;
  padding: 8px 16px;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  gap: 10px;
  min-width: fit-content;
}

.sort-inner:hover {
  border-color: var(--brand-color-1);
  box-shadow: 0 4px 12px rgba(33, 103, 221, 0.08);
}

.sort-inner:focus-within {
  border-color: var(--brand-color-1);
  box-shadow: 0 0 0 4px rgba(33, 103, 221, 0.1);
}

.sort-icon {
  width: 30px;
  height: 30px;
  color: var(--gray-400);
}

.sort-inner label {
  font-size: 1.3rem;
  font-weight: 600;
  color: #94a3b8;
  margin: 0;
}

.current-value {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--gray-900);
  margin-right: 5px;
  white-space: nowrap;
}

.sort-inner .sort-icon:first-child {
  width: 18px;
  height: 18px;
  color: var(--brand-color-1);
  flex-shrink: 0;
}

.sort-inner .sort-icon.chevron {
  position: static !important;
  width: 14px;
  height: 14px;
  color: #94a3b8;
  transition: transform 0.3s ease;
  flex-shrink: 0;
  margin-left: auto;
}

.sort-wrapper.is-open .sort-icon.chevron {
  transform: rotate(180deg);
  color: var(--brand-color-1);
}

.sort-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 100%;
  min-width: 200px;
  background: var(--white);
  border-radius: var(--border-radius-xl);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
  border: 1px solid var(--blue-100);
  padding: 8px;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Khi mở menu */
.sort-wrapper.is-open .sort-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.sort-wrapper.is-open .sort-icon.chevron {
  transform: rotate(180deg);
  color: var(--brand-color-1);
}

.sort-menu li {
  padding: 12px 16px;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--gray-600);
  border-radius: var(--border-radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sort-menu li:hover {
  background: #f8faff;
  color: var(--brand-color-1);
}

.sort-menu li.selected {
  background: rgba(33, 103, 221, 0.08);
  color: var(--brand-color-1);
}

.sort-menu li.selected::after {
  content: "✓";
  font-weight: 900;
}

.sort-icon[data-icon="arrow-down-up"] {
  width: 18px;
  height: 18px;
  color: var(--brand-color-1);
  margin-right: 10px;
}

.sort-icon[data-icon="chevron-down"] {
  position: absolute;
  right: 15px;
  width: 16px;
  height: 16px;
  color: #94a3b8;
  pointer-events: none;
  transition: transform 0.3s ease;
  z-index: 1;
}

.sort-inner:focus-within .sort-icon[data-icon="chevron-down"] {
  transform: translateY(2px);
  color: var(--brand-color-1);
}

.custom-select option {
  font-weight: 500;
  padding: 10px;
  background: var(--white);
  color: #334155;
}

@media (max-width: 576px) {
  .header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    gap: 8px;
  }

  .btn-filter-mobile {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 38px;
    padding: 0 12px;
    background: var(--white);
    border: 1.5px solid #e2e8f0;
    border-radius: 50px;
    color: var(--gray-700);
    font-size: 1.3rem;
    font-weight: 600;
    white-space: nowrap;
  }

  .btn-filter-mobile .js-svg-inject {
    width: 14px !important;
    height: 14px !important;
    color: var(--brand-color-1);
  }

  .sort-wrapper {
    min-width: unset;
    flex-grow: 1;
    max-width: 180px;
  }

  .sort-inner {
    height: 38px;
    padding: 0 12px;
    gap: 6px;
  }

  .sort-inner label {
    display: none;
  }

  .current-value {
    font-size: 1.3rem;
  }

  .sort-inner .sort-icon:first-child {
    width: 14px;
    height: 14px;
  }

  .sort-inner .sort-icon.chevron {
    width: 12px;
    height: 12px;
  }
}
/* END REFINED CONTROLS */

/* ===============================================
   CATEGORY PROMO BANNER (BANNER ƯU ĐÃI DANH MỤC)
   =============================================== */
.category-promo-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(90deg, var(--white) 5f2 0%, var(--white) 100%);
  border: 1px solid #ffe4dc;
  padding: 15px 25px;
  border-radius: var(--border-radius-xl);
  margin-bottom: 25px;
  box-shadow: 0 4px 15px rgba(250, 140, 22, 0.05);
  animation: fadeInSlideDown 0.6s ease-out;
}

@keyframes fadeInSlideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.promo-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.promo-content strong {
  font-size: 2rem;
}

.promo-icon {
  color: var(--brand-color-2);
  width: 40px;
  height: 40px;
}

.promo-text {
  font-size: 1.5rem;
  color: #4a4a4a;
}

.promo-text strong {
  color: var(--brand-color-2);
  font-weight: 700;
}

.btn-promo-action {
  background: var(--brand-color-2);
  color: var(--white) !important;
  padding: 8px 20px;
  border-radius: 50px;
  font-size: 1.3rem;
  font-weight: 700;
  transition: all 0.3s ease;
}

.btn-promo-action:hover {
  transform: scale(1.05);
  box-shadow: 0 5px 15px rgba(250, 140, 22, 0.3);
}

/* Responsive cho điện thoại */
@media (max-width: 768px) {
  .category-promo-banner {
    flex-direction: column;
    gap: 15px;
    text-align: center;
    padding: 20px;
  }
}
/* END CATEGORY PROMO BANNER */

/* ===============================================
   MODAL SIDEBAR: GRAY & GLASSMOPRHISM STYLE
   =============================================== */
.modern-sidebar {
  position: sticky;
  top: 100px;
  z-index: 10;
}

.sidebar-backdrop {
  position: absolute;
  inset: -10px;
  background: var(--blue-100);
  border-radius: 30px;
  z-index: -1;
}

.sidebar-glass-card {
  background: rgba(255, 255, 255, 0.35) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid var(--white) !important;
  border-radius: var(--border-radius-2xl);
  padding: 30px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
}

.filter-headline {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--gray-900);
  margin-bottom: 25px;
}

.filter-headline i {
  color: var(--brand-color-1);
  width: 20px;
}

.modern-filter-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.filter-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-radius: var(--border-radius-lg);
  color: var(--gray-700);
  font-size: 1.45rem;
  font-weight: 600;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.filter-link .dot {
  width: 6px;
  height: 6px;
  background: var(--brand-color-1);
  border-radius: var(--border-radius-circle);
  opacity: 0;
  transform: scale(0);
  transition: 0.3s;
}

.filter-link:hover {
  background: rgba(33, 103, 221, 0.08);
  color: var(--brand-color-1);
  padding-left: 20px;
}

.is-active .filter-link {
  background: var(--brand-color-1);
  color: var(--white);
  box-shadow: 0 8px 20px rgba(33, 103, 221, 0.2);
}

.filter-link:hover .dot {
  opacity: 1;
  transform: scale(1);
}

.is-active .filter-link .dot {
  background: var(--white);
  opacity: 1;
  transform: scale(1);
}

.sidebar-divider {
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(0, 0, 0, 0.05),
    transparent
  );
  margin: 25px 0;
}
.glass-check-group {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.glass-check-item {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-size: 1.45rem;
  font-weight: 500;
  color: var(--gray-700);
  padding: 8px 0;
  user-select: none;
  transition: 0.3s;
}

.glass-check-item input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.checkmark {
  height: 20px;
  width: 20px;
  background-color: rgba(255, 255, 255, 0.8);
  border: 2px solid var(--gray-300);
  border-radius: var(--border-radius-md);
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-check-item:hover .checkmark {
  border-color: var(--brand-color-1);
  background-color: var(--white);
}
.glass-check-item input:checked ~ .checkmark {
  background-color: var(--brand-color-3);
  border-color: var(--brand-color-3);
  box-shadow: 0 4px 10px rgba(4, 120, 87, 0.3);
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid var(--white);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

.glass-check-item input:checked ~ .checkmark:after {
  display: block;
}

.glass-check-item input:checked ~ .label-text {
  color: var(--brand-color-3);
  font-weight: 700;
}

.custom-box {
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.8);
  border: 2px solid var(--gray-200);
  border-radius: 7px;
  transition: 0.3s;
}

.glass-check-item input:checked + .custom-box {
  background: var(--brand-color-3);
  border-color: var(--brand-color-3);
  box-shadow: 0 0 10px rgba(4, 120, 87, 0.2);
}

.sidebar-ad-card {
  margin-top: 20px;
  width: 100%;
  border-radius: var(--border-radius-xl);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  line-height: 0;
}

.sidebar-ad-card img {
  width: 100%;
  height: 120px;
  object-fit: cover;
}

.ad-full-img {
  width: 100% !important;
  height: auto !important;
  display: block;
  object-fit: contain;
}

.ad-blur-caption {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 10px;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(5px);
  color: var(--white);
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
}
/* END SIDEBAR REFINEMENT */

/* ===============================================
   PRODUCT LIST UPGRADE
   =============================================== */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 25px;
  width: 100%;
}

.product-card {
  background: var(--white);
  border-radius: var(--border-radius-xl);
  border: 1px solid var(--gray-150);
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.product-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  border-color: var(--brand-color-1);
}

.product-card__image-box {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--white-200);
  overflow: hidden;
}

.product-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.product-card:hover .product-card__img {
  transform: scale(1.1);
}

.product-card__actions {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translate(-50%, 20px);
  display: flex;
  gap: 10px;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 5;
}

.product-card:hover .product-card__actions {
  opacity: 1;
  transform: translate(-50%, 0);
}

.product-card__content {
  padding: 15px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.product-card__name a {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 24px;
}

.product-card__price-box {
  margin-top: auto;
}

.price-top {
  height: 18px;
  margin-bottom: 2px;
}

.price-regular {
  font-size: 1.3rem;
  color: var(--gray-500);
  text-decoration: line-through;
}

.price-main {
  display: flex;
  align-items: baseline;
  gap: 5px;
  flex-wrap: wrap;
}

.price-discount {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--red-700);
}

.product-card__badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--red-700);
  color: var(--white);
  font-size: 1rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 50px;
  z-index: 2;
  text-transform: uppercase;
}

.product-card__ticker-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  height: 26px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);
  border-radius: 50px;
  padding: 0 12px;
  z-index: 5;
  pointer-events: none;
  border: 1px solid rgba(255, 225, 225, 0.6);
}

.ticker-wrapper {
  display: flex;
  flex-direction: column;
  animation: tickerVertical 9s infinite cubic-bezier(0.65, 0, 0.35, 1);
}

.ticker-item {
  height: 26px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--white);
  font-size: 1.2rem;
  font-weight: 300;
  white-space: nowrap;
  text-transform: none;
}

.ticker-item .js-svg-inject {
  width: 14px;
  height: 14px;
  color: var(--brand-color-2);
}

@keyframes tickerVertical {
  0%,
  25% {
    transform: translateY(0);
  }
  30%,
  55% {
    transform: translateY(-26px);
  }
  60%,
  85% {
    transform: translateY(-52px);
  }
  90%,
  100% {
    transform: translateY(-78px);
  }
}

@media (max-width: 576px) {
  .product-card__ticker-tag {
    top: 12px;
    left: 12px;
    height: 26px;
    padding: 0 10px;
  }

  .ticker-item {
    height: 26px;
    font-size: 1.3rem;
  }

  .ticker-item .js-svg-inject {
    width: 15px;
    height: 15px;
    margin-right: 5px;
  }

  @keyframes tickerVertical {
    0%,
    25% {
      transform: translateY(0);
    }
    30%,
    55% {
      transform: translateY(-26px);
    }
    60%,
    85% {
      transform: translateY(-52px);
    }
    90%,
    100% {
      transform: translateY(-78px);
    }
  }
}

@media (max-width: 500px) {
  .product-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .product-card__name a {
    font-size: 1.4rem;
    height: 40px;
  }
  .price-discount {
    font-size: 1.5rem;
  }
}
/* END PRODUCT LIST UPGRADE */

/* ===============================================
   PRODUCT DETAIL MODERN UI
   =============================================== */
.product-main-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 40px;
  margin-top: 20px;
}

.product-essentials {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.product-gallery .main-image-container {
  background: #f9f9f9;
  border-radius: var(--border-radius-xl);
  overflow: hidden;
  border: 5px solid var(--gray-150);
}

.product-image-main {
  width: 100%;
  display: block;
  transition: 0.3s;
}

.main-image-container {
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius-lg);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
}

.product-image-main,
.product-video-main {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.4s ease;
}

.product-video-main {
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}
.product-image-main {
  opacity: 1;
  z-index: 2;
}

.main-image-container.is-showing-video .product-video-main {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}
.main-image-container.is-showing-video .product-image-main {
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

.btn-toggle-media {
  position: absolute;
  bottom: 15px;
  right: 15px;
  z-index: 10;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 50px;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--brand-color-1);
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.btn-toggle-media:hover {
  background: var(--brand-color-1);
  color: var(--white);
  transform: translateY(-3px);
}

.btn-toggle-media .icon-media {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
}

.toggle-play .icon-pause {
  display: none;
}
.toggle-play .icon-play {
  display: block;
}

.toggle-mute .icon-volume-off {
  display: none;
}
.toggle-mute .icon-volume-on {
  display: block;
}

.toggle-mute.is-muted .icon-volume-on {
  display: none;
}
.toggle-mute.is-muted .icon-volume-off {
  display: block;
}

.toggle-fullscreen .icon-minimize {
  display: none;
}
.toggle-fullscreen .icon-maximize {
  display: block;
}

.video-wrapper.is-fullscreen .toggle-fullscreen .icon-maximize {
  display: none;
}
.video-wrapper.is-fullscreen .toggle-fullscreen .icon-minimize {
  display: block;
}

.video-wrapper.is-playing .toggle-play .icon-play {
  display: none;
}
.video-wrapper.is-playing .toggle-play .icon-pause {
  display: block;
}

.product-detail-name {
  font-size: 3.2rem;
  font-weight: 800;
  color: var(--gray-900);
  margin-bottom: 15px;
}

.product-rating-mini,
.product-status-row {
  font-size: 1.5rem;
}

.product-short-desc {
  font-size: 1.4rem;
  color: var(--gray-700);
}

.stock-msg {
  font-size: 1.4rem;
  margin-bottom: 30px;
}

/* .product-price-box {
  margin: 20px 0;
  padding: 20px;
  background: var(--white);
  border-radius: var(--border-radius-lg);
  border: 1px solid #e2e8f0;
  font-size: 1.8rem;
  font-weight: 700;
}

.price-current {
  font-size: 2.8rem;
  font-weight: 800;
  color: #ef4444;
}

.price-old {
  text-decoration: line-through;
  color: var(--gray-400);
  margin-right: 10px;
} */
/* ==========================================================
   PHẦN SỐ LƯỢNG
   ========================================================== */
.product-pricing-config {
  background-color: var(--white);
  border-radius: var(--border-radius-lg);
  padding: 24px;
  border: 1px solid #e2e8f0;
  margin-top: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.variant-group {
  margin-bottom: 14px;
}

.variant-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 10px;
  font-size: 15px;
}

.variant-name {
  font-weight: 700;
  color: #1e293b;
  margin-right: 8px;
}

.variant-selected-value {
  color: var(--gray-600);
  font-weight: 500;
}

.custom-radio-btn input[type="radio"],
.custom-radio-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.variant-options.type-button {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.custom-radio-btn .radio-ui {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  background: var(--white);
  border: 1px solid #cbd5e1;
  border-radius: var(--border-radius-md);
  font-weight: 600;
  color: var(--gray-600);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
}

.custom-radio-btn:hover .radio-ui {
  border-color: var(--brand-color-1);
}

.custom-radio-btn input[type="radio"]:checked + .radio-ui {
  background: var(--brand-color-1);
  border-color: var(--brand-color-1);
  color: var(--white);
}

/* UI Card (Các gói Combo) */
.variant-options.type-card {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 12px;
}

.combo-item {
  display: block;
}

.custom-radio-card .card-ui {
  background: var(--white);
  border: 1px solid #cbd5e1;
  border-radius: var(--border-radius-md);
  padding: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.custom-radio-card:hover .card-ui {
  border-color: var(--blue-400);
}

.custom-radio-card .card-title {
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 0px;
  font-size: 15px;
}

.custom-radio-card input[type="radio"]:checked + .card-ui {
  border: 2px solid var(--brand-color-1);
  background: var(--gray-100);
}

.custom-radio-card input[type="radio"]:checked + .card-ui .card-title {
  color: var(--brand-color-1);
}

.quantity-selector {
  display: flex;
  align-items: center;
  width: 110px;
  height: 32px;
  border: 1px solid var(--gray-200);
  border-radius: 20px;
  overflow: hidden;
  background: var(--white);
  flex-shrink: 0;
}
.qty-btn {
  background: transparent;
  border: none;
  width: 32px;
  height: 100%;
  font-size: 2rem;
  font-weight: 700;
  color: var(--gray-700);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.qty-btn:hover {
  background: var(--gray-300);
  color: var(--brand-color-1);
}

.js-qty-input {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  font-size: 1.3rem;
  font-weight: 700;
  color: red;
  pointer-events: none;
  background: transparent;
}

#qty-input {
  width: 50px;
  height: 100%;
  border: none;
  border-left: 1px solid #cbd5e1;
  border-right: 1px solid #cbd5e1;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: #1e293b;
  -moz-appearance: textfield;
}

#qty-input::-webkit-outer-spin-button,
#qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.delivery-note-wrapper {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--border-radius-md);
  font-size: 13px;
  transition: all 0.3s ease;
}

.delivery-note-text {
  line-height: 1.4;
}

.config-footer {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px dashed #cbd5e1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.total-price-box {
  display: flex;
  flex-direction: column;
}

.price-label {
  font-size: 14px;
  color: var(--gray-600);
  margin-bottom: 4px;
}

.price-amount {
  font-size: 32px;
  color: var(--brand-color-1);
  font-weight: 700;
  line-height: 1;
}

.price-amount .currency {
  text-decoration: underline;
  font-size: 24px;
}

.action-buttons-group {
  display: flex;
  gap: 12px;
  flex: 1;
  justify-content: flex-end;
}

.btn-action-outline {
  background: var(--white);
  color: var(--brand-color-3);
  border: 2px solid var(--brand-color-3);
  padding: 0 16px;
  height: 48px;
  border-radius: var(--border-radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-action-outline:hover {
  background: #f0fdfa;
  color: var(--brand-color-3);
  border-color: var(--brand-color-3);
}

.btn-action-primary {
  background: var(--brand-color-3);
  color: var(--white);
  border: none;
  padding: 0 12px;
  height: 48px;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--border-radius-md);
  cursor: pointer;
  transition:
    background 0.3s ease,
    box-shadow 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  flex: 1;
  max-width: 250px;
}

.btn-action-primary:hover {
  background: var(--brand-color-3-light);
  box-shadow: 0 4px 12px rgba(13, 148, 136, 0.3);
}

@media (max-width: 576px) {
  .config-footer {
    flex-direction: column;
    align-items: stretch;
  }
  .action-buttons-group {
    width: 100%;
  }
  .btn-action-primary {
    max-width: 100%;
  }
}

/* END PHẦN SỐ LƯỢNG */

/* 4. Nút bấm & Qty */
.purchase-actions {
  display: flex;
  gap: 15px;
  margin-top: 30px;
}

.qty-selector {
  display: flex;
  border: 1px solid #ddd;
  border-radius: var(--border-radius-md);
  overflow: hidden;
}

.qty-input {
  width: 50px;
  text-align: center;
  border: none;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
}

.btn-add-to-cart {
  flex: 1;
  background: var(--brand-color-1);
  color: var(--white);
  border: none;
  padding: 15px;
  border-radius: var(--border-radius-md);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  transition: 0.3s;
}

.btn-add-to-cart:hover {
  background: var(--brand-color-1);
  transform: translateY(-2px);
}


/* ==========================================================================
   LIÊN HỆ BÁO GIÁ
   ========================================================================== */
.btn-contact-now {
  background: var(--brand-color-1);
  color: var(--white);
  font-weight: 700;
  font-size: 1.6rem;
  padding: 15px;
  border-radius: var(--border-radius-md);
}

.out-of-stock-contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #fdf8f5;
    border: 1px dashed var(--brand-color-2);
    padding: 24px 20px;
    border-radius: 12px;
    margin: 20px 0;
    box-shadow: 0 4px 15px rgba(242, 112, 36, 0.05);
    transition: all 0.3s ease;
}

.out-of-stock-contact:hover {
    background: #fff6f0;
    box-shadow: 0 6px 20px rgba(242, 112, 36, 0.08);
}

.out-of-stock-contact .stock-msg {
    font-size: 15px;
    color: #4a4a4a;
    font-weight: 500;
    margin-bottom: 16px;
    line-height: 1.5;
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

.out-of-stock-contact .stock-msg::before {
    content: "💡";
    font-size: 16px;
}

.out-of-stock-contact .btn-contact-now {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, var(--brand-color-2) 0%, var(--brand-color-3-light) 100%);
    color: var(--white) !important;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 12px 32px;
    border-radius: 30px;
    text-decoration: none !important;
    text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(242, 112, 36, 0.3);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
}

.out-of-stock-contact .btn-contact-now:hover {
    background: linear-gradient(135deg, var(--brand-color-1) 0%, var(--brand-color-1-dark) 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(196, 229, 249, 0.5);
}


.out-of-stock-contact .btn-contact-now:active {
    transform: translateY(1px);
    box-shadow: 0 2px 8px rgba(196, 229, 249, 0.3);
}

/* END LIÊN HỆ BÁO GIÁ */

.purchase-section {
  margin-top: 25px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.qty-control {
  display: flex;
  align-items: center;
  gap: 15px;
}

.qty-label {
  font-weight: 700;
  color: var(--gray-600);
  font-size: 1.4rem;
}

/* Qty Selector Styling */
.qty-selector {
  display: flex;
  align-items: center;
  background: var(--blue-100);
  border-radius: var(--border-radius-lg);
  padding: 4px;
  width: fit-content;
  border: 1px solid #e2e8f0;
}

.qty-input {
  width: 50px;
  border: none;
  background: transparent;
  text-align: center;
  font-weight: 800;
  font-size: 1.6rem;
  color: #1e293b;
  outline: none;
}

.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-

/* 5. Tabs System */
.product-details-tabs {
  margin-top: 60px;
}

.tabs-header {
  border-bottom: 2px solid #eee;
  display: flex;
  gap: 30px;
}

.tab-btn.active::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--brand-color-1);
}

.tab-pane {
  display: none;
  padding: 30px 0;
  line-height: 1.8;
}

.tab-pane.active {
  display: block;
}

/* Sidebar Sticky */
.sidebar-sticky-box {
  position: sticky;
  top: 100px;
}

/* Mobile Responsive */
@media (max-width: 991px) {
  .product-main-layout,
  .product-essentials {
    grid-template-columns: 1fr;
  }
}
/* END PRODUCT DETAIL MODERN UI */

/* ==========================================================
   SPECIFICATIONS
   ========================================================== */

.specs-container {
  position: relative;
  padding: 20px;
  background-color: var(--white);
  border-radius: var(--border-radius-xl);
  border: 1px solid var(--gray-200);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.specs-title {
  color: var(--brand-color-1);
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.specs-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.specs-label {
  color: var(--gray-600);
  min-width: 110px;
  font-size: 1.5rem;
}

.specs-label::before {
  content: "- ";
}

.specs-value-group {
  display: flex;
  align-items: center;
}

.specs-value {
  font-weight: 600;
  font-size: 1.6rem;
  color: #333;
}

.specs-info-icon {
  position: relative;
  top: -5px;
  margin-left: 8px;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--brand-color-1);
  color: var(--brand-color-1);
  border-radius: var(--border-radius-circle);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: bold;
  cursor: help;
  transition: all 0.2s ease-in-out;
}

/* Ô chú thích (Tooltip) */
.specs-info-icon::after {
  content: attr(data-tooltip); /* Lấy dữ liệu từ attribute data-tooltip */
  position: absolute;
  bottom: 150%; /* Đẩy lên trên icon */
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background-color: var(--gray-700); /* Màu nền tối sang trọng */
  color: var(--white);
  padding: 8px 12px;
  border-radius: var(--border-radius-md);
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Hiệu ứng mượt */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  z-index: 100;
}

/* Mũi tên nhỏ của Tooltip */
.specs-info-icon::before {
  content: "";
  position: absolute;
  bottom: 80%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: var(--gray-700) transparent transparent transparent;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 100;
}

/* Hiệu ứng khi Hover */
.specs-info-icon:hover {
  background-color: var(--brand-color-1);
  color: var(--white);
  transform: scale(1.1);
}

.specs-info-icon:hover::after,
.specs-info-icon:hover::before {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Ghi chú tổng dưới cùng */
.specs-note {
  margin-top: 15px;
  padding-top: 12px;
  border-top: 1px dashed #ddd;
  font-size: 13px;
  color: #777;
  font-style: italic;
}
/* END SPECIFICATIONS */

/* ==========================================================
   PRODUCT TABS
   ========================================================== */
.product-details-tabs-modern {
  background: var(--gray-100);
  margin-top: 60px;
  border: 1px solid var(--gray-200);
  border-radius: 32px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.02);
}

/* 1. Tab Navigation */
.tabs-nav-outer {
  background: #fcfdfe;
  border-bottom: 1px solid var(--blue-100);
}

.tabs-header {
  display: flex;
  justify-content: center;
  gap: 0; /* Xếp sát nhau */
}

.tab-btn {
  padding: 25px 40px;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--gray-600);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}

.tab-icon-wrap {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--blue-100);
  border-radius: var(--border-radius-md);
  transition: 0.3s;
}

.tab-btn.active {
  color: var(--brand-color-1);
}

.tab-btn.active .tab-icon-wrap {
  background: var(--brand-color-1);
  color: var(--white);
  box-shadow: 0 4px 12px rgba(33, 103, 221, 0.2);
}

.tab-btn::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 3px;
  background: var(--brand-color-1);
  transition: width 0.3s ease;
}

.tab-btn.active::after {
  width: 100%;
}

.tab-pane {
  display: none;
  animation: paneFadeIn 0.5s ease forwards;
}

@keyframes paneFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ORDER NOTES */
.order-notes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
  margin-top: 25px;
}

.note-box {
  background: #fcfcfc;
  border: 1px solid var(--gray-200);
  padding: 20px;
  border-radius: var(--border-radius-lg);
  transition: all 0.3s ease;
}

.note-box:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  background: var(--white);
  border-color: var(--brand-color-1);
}

.note-title {
  color: var(--brand-color-1);
  font-size: 1.9rem;
  font-weight: 700;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.note-title .js-svg-inject {
  width: 20px;
  height: 20px;
}

.note-list {
  list-style: none;
  padding: 0;
}

.note-list li {
  font-size: 1.5rem;
  color: var(--gray-700);
  margin-bottom: 8px;
  line-height: 1.6;
  position: relative;
  padding-left: 15px;
}

.note-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--brand-color-1);
}

/* Responsive cho mobile */
@media (max-width: 768px) {
  .order-notes-grid {
    grid-template-columns: 1fr;
  }
}
/* END ORDER NOTES */

/* ==========================================================
   FAQ PREMIUM PRODUCT
   ========================================================== */
.faq-modern-layout {
  display: grid;
  grid-template-columns: 350px 1fr;
  gap: 60px;
  padding: 0 40px;
}

.faq-badge {
  background: var(--blue-100);
  color: var(--brand-color-1);
  padding: 6px 14px;
  border-radius: 50px;
  font-weight: 800;
  font-size: 1.2rem;
  text-transform: uppercase;
}

.faq-main-title {
  font-size: 3.2rem;
  font-weight: 900;
  color: #1e293b;
  margin: 15px 0 20px;
  line-height: 1.5;
}

.faq-sub-desc,
.faq-empty-state p {
  font-size: 1.4rem;
  color: var(--gray-600);
}

.faq-main-title span {
  color: var(--brand-color-1);
}

.faq-empty-state p {
  margin-top: 15px;
}

.btn-faq-support {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: var(--blue-50);
  border: 1px solid var(--blue-150);
  color: var(--brand-color-1);
  padding: 14px 25px;
  border-radius: var(--border-radius-lg);
  font-size: 1.4rem;
  font-weight: 700;
  margin-top: 30px;
  transition: 0.3s;
}

.btn-faq-support:hover {
  background: var(--brand-color-1);
  color: var(--white);
  transform: scale(1.05);
}

.faq-item-premium {
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--border-radius-xl);
  margin-bottom: 15px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.faq-item-premium[open] {
  border-color: var(--brand-color-1);
  box-shadow: 0 15px 35px rgba(33, 103, 221, 0.08);
  background-color: var(--white);
}

.faq-q-premium {
  padding: 22px 25px;
  display: flex;
  align-items: center;
  gap: 20px;
  cursor: pointer;
  font-weight: 700;
  font-size: 1.65rem;
  color: var(--gray-800);
  list-style: none;
  transition: background 0.3s ease;
}
.faq-q-premium::-webkit-details-marker {
  display: none;
}

.faq-item-premium[open] .faq-q-premium {
  color: var(--brand-color-1);
  background-color: rgba(33, 103, 221, 0.02);
}

.q-number {
  color: var(--gray-500);
  font-size: 1.4rem;
  font-family: monospace;
}

.q-icon-box {
  margin-left: auto;
  transition: 0.4s;
  color: #cbd5e1;
}
.faq-item-premium[open] .q-icon-box {
  transform: rotate(180deg);
  color: var(--brand-color-1);
}

.a-content-inner {
  padding: 5px 30px 30px 70px;
  color: var(--gray-600);
  line-height: 1.8;
  font-size: 1.55rem;
  position: relative;
  animation: faqPremiumSlideIn 0.4s ease-out forwards;
}
.a-content-inner::before {
  content: "";
  position: absolute;
  left: 35px;
  top: 10px;
  bottom: 30px;
  width: 4px;
  background: linear-gradient(to bottom, var(--brand-color-1), var(--blue-300));
  border-radius: var(--border-radius-md);
}

.faq-item-premium[open] .q-icon-box {
  transform: rotate(180deg);
  color: var(--brand-color-1);
}

@keyframes faqPremiumSlideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 992px) {
  .faq-modern-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .faq-side-info {
    text-align: center;
  }
}

@media (max-width: 768px) {
  .a-content-inner {
    padding: 5px 20px 25px 45px;
  }
  .a-content-inner::before {
    left: 20px;
  }
  .faq-q-premium {
    font-size: 1.5rem;
    padding: 18px 20px;
  }
}

/* END FAQ PREMIUM PRODUCT */

/* PRODUCT REVIEWS */
.reviews-premium-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 40px;
  padding: 0 40px;
}

/* Cột trái: Thống kê */
.reviews-summary-card {
  background: var(--white);
  border-radius: var(--border-radius-2xl);
  padding: 40px 30px;
  text-align: center;
  border: 1px solid #edf2f7;
  height: fit-content;
  position: sticky;
  top: 20px;
}

.big-score {
  font-size: 6rem;
  font-weight: 900;
  color: #1e293b;
  line-height: 1;
}

.stars-gold-big {
  color: #f59e0b;
  font-size: 2.5rem;
  margin: 15px 0 10px;
}

.summary-top p {
  font-size: 1.6rem;
  color: var(--gray-600);
  margin-top: 8px;
  font-weight: 500;
}

.rating-bars-detailed {
  margin: 30px 0;
}

.bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--gray-600);
}

.bar-bg {
  flex: 1;
  height: 6px;
  background: #e2e8f0;
  border-radius: var(--border-radius-md);
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  background: #f59e0b;
}

.btn-trigger-review {
  width: 100%;
  padding: 15px;
  background-color: var(--blue-100);
  border: 1px solid #bfdbfe;
  color: var(--brand-color-1);
  border-radius: var(--border-radius-lg);
  font-size: 1.6rem;
  font-weight: 800;
  cursor: pointer;
  transition: 0.3s;
}

.reviews-content-main {
  display: flex;
  flex-direction: column;
}

/* --- FORM GỬI NHẬN XÉT (Style Hình 1) --- */
.review-form-container-modern {
  background: var(--white);
  border: 1px solid #e5e7eb;
  border-radius: var(--border-radius-lg);
  padding: 30px;
  margin-bottom: 30px;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.05);
}

.form-grid-layout {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 40px;
}

.form-main-title {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--gray-900);
  margin-bottom: 15px;
  text-transform: uppercase;
}

.form-step {
  margin-bottom: 10px;
}

.step-label {
  display: block;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--gray-600);
  margin-bottom: 8px;
}

.star-rating-select {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 4px;
}
.star-rating-select input {
  display: none;
}
.star-rating-select label {
  font-size: 2.4rem;
  color: #d1d5db;
  cursor: pointer;
  transition: 0.2s;
}
.star-rating-select input:checked ~ label,
.star-rating-select label:hover,
.star-rating-select label:hover ~ label {
  color: #fbbf24;
}

.input-modern,
.textarea-modern {
  width: 100%;
  border: 1px solid var(--gray-200);
  border-radius: var(--border-radius-lg);
  padding: 12px;
  font-size: 1.4rem;
}

.btn-cancel-link {
  background: transparent;
  border: none;
  color: var(--gray-500);
  cursor: pointer;
  margin-right: 20px;
  font-size: 1.3rem;
  text-decoration: underline;
}

/* Cột phải của Form (Preview sản phẩm) */
.form-info-side {
  border-left: 1px solid #f3f4f6;
  padding-left: 40px;
}

.product-mini-preview p {
  font-weight: 700;
  font-size: 1.8rem;
  color: #1e293b;
  margin: 0;
}
.support-text {
  font-size: 1.3rem;
  color: var(--gray-600);
  line-height: 1.7;
  margin-top: 15px;
}

.product-mini-preview img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 8px;
}

.upload-wrapper {
  margin-top: 10px;
}

.upload-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 15px !important; /* Giảm padding cho khung nhỏ lại */
  min-height: 110px !important; /* Hạ chiều cao tối thiểu xuống */
  border: 2px dashed #cbd5e1;
  border-radius: var(--border-radius-xl);
  background: var(--white);
  cursor: pointer;
  text-align: center;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
  box-sizing: border-box;
}

#uploadStatusText {
  font-size: 1.35rem !important; /* Thu nhỏ chữ lại một chút */
  font-weight: 600;
  color: var(--gray-600);
  margin: 0;
  line-height: 1.4;
}
.upload-hint {
  font-size: 1.15rem !important; /* Thu nhỏ dòng ghi chú */
  color: #94a3b8;
  margin: 4px 0 0 0;
  font-weight: 500;
}

/* Chặn chuột phần tử con để không lỗi dragover */
.upload-label * {
  pointer-events: none;
}

.upload-label:hover {
  border-color: var(--brand-color-1);
  background: var(--blue-100);
}

/* Màu viền highlight khi kéo file lơ lửng trên khung */
.upload-label.dragover {
  border-color: var(--brand-color-1, #2167dd) !important;
  background-color: #eff6ff !important;
  transform: scale(1.01);
  box-shadow: 0 8px 20px rgba(33, 103, 221, 0.08);
}

/* Khung chứa danh sách tệp tin đã chọn */
.checkout-file-preview-list {
  margin-top: 15px;
  background: var(--white);
  border: 1px solid #e2e8f0;
  border-radius: var(--border-radius-xl);
  padding: 10px;
  max-height: 160px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Định dạng từng dòng tệp tin */
.file-preview-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  padding: 8px 12px;
  border-radius: var(--border-radius-lg);
  border: 1px solid #e2e8f0;
  animation: fileItemFadeIn 0.3s ease forwards;
}

@keyframes fileItemFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.file-item-icon {
  font-size: 1.6rem;
  flex-shrink: 0;
}

.file-item-info {
  flex: 1;
  min-width: 0; /* Ép chữ text-overflow chạy đúng */
}

.file-item-name {
  font-size: 1.3rem;
  font-weight: 600;
  color: #334155;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-item-size {
  font-size: 1.1rem;
  color: #94a3b8;
  display: block;
}

/* Nút xóa tệp tin đã đính kèm */
.btn-remove-file-item {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 1.8rem;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

.btn-remove-file-item:hover {
  color: #ef4444;
  transform: scale(1.15);
}

#image-preview-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

#image-preview {
  max-width: 80px;
  max-height: 80px;
  object-fit: contain;
  opacity: 0.5;
  filter: grayscale(1);
  margin-bottom: 10px;
  transition: all 0.3s ease;
}
/* Hiệu ứng khi người dùng rê chuột vào vùng upload */
.upload-label:hover #image-preview {
  opacity: 0.8;
  filter: grayscale(0);
  transform: scale(1.05);
}

/* Style cho dòng chữ "Bấm để chọn ảnh" */
#image-preview-container span {
  font-size: 1.3rem;
  color: #6b7280;
  font-weight: 500;
}

.upload-label span {
  font-size: 1.4rem;
  color: var(--gray-600);
  font-weight: 600;
}

/* --- DANH SÁCH BÌNH LUẬN --- */
.list-header-push {
  margin-bottom: 30px;
}

.list-title {
  font-size: 2.2rem;
  font-weight: 700;
  color: #1e293b;
}

.title-line {
  width: 60px;
  height: 4px;
  background: var(--brand-color-1);
  border-radius: var(--border-radius-sm);
  margin-top: 8px;
}

.comment-item-premium {
  display: flex;
  gap: 25px;
  padding: 25px;
  background: var(--white);
  border: 1px solid var(--blue-100);
  border-radius: var(--border-radius-xl);
  margin-bottom: 20px;
}

.user-avatar-premium {
  width: 56px;
  height: 56px;
  background: #e0e7ff;
  color: #4338ca;
  border-radius: var(--border-radius-circle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 2rem;
}
/* 5. Rich Text Content (Mô tả chi tiết) */
.content-rich-text {
  max-width: 85%;
  margin: 0 auto;
}
.content-header-mini {
  margin-bottom: 40px;
  text-align: center;
}
.content-label {
  color: var(--brand-color-1);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 1.6rem;
}
.content-main-title {
  font-size: 3.2rem;
  font-weight: 900;
  color: #1e293b;
  margin-top: 10px;
}

/* Responsive */
@media (max-width: 992px) {
  .faq-modern-layout,
  .reviews-premium-layout {
    grid-template-columns: 1fr;
  }
  .tab-btn {
    padding: 20px;
    font-size: 1.4rem;
  }
  .faq-main-title {
    font-size: 2.6rem;
  }
}
/* END PRODUCT DETAILS TABS */
/* ==========================================================
   PRODUCT TAGS FOOTER
   ========================================================== */
.product-tags-layout {
  width: 100%;
  margin: 30px 0 50px 0;
  background: var(--white);
  border: 1px solid #e2e8f0; /* Viền xám nhạt */
  border-radius: var(--border-radius-xl);
  padding: 20px 25px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.tags-container {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.tags-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 15px;
  color: #1e293b;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tag-icon {
  color: var(--brand-color-1);
  font-size: 18px;
}

.tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tag-pill {
  display: inline-block;
  padding: 8px 18px;
  background: var(--gray-100);
  color: var(--gray-700);
  font-size: 14px;
  font-weight: 600;
  border-radius: 50px;
  text-decoration: none;
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
}

/* Hiệu ứng tương tác */
.tag-pill:hover {
  background: #2167dd; /* Đổi sang màu xanh khi hover */
  color: var(--white);
  border-color: #2167dd;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(33, 103, 221, 0.2);
}

/* --- 4. RESPONSIVE --- */
@media (max-width: 991px) {
  .related-grid-mockup {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .tags-container {
    flex-direction: column; /* Mobile thì tiêu đề nằm trên, tags nằm dưới */
    align-items: flex-start;
    gap: 15px;
  }
  .related-grid-mockup {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* END PRODUCT TAGS FOOTER */

/* ===============================================
   PRODUCT REVIEWS - PREMIUM UI/UX (REVISED)
   =============================================== */

/* Container chính */
.reviews-list-premium {
  font-family:
    "Inter",
    system-ui,
    -apple-system,
    sans-serif;
  color: #334155;
  max-width: 1000px;
  margin: 0 auto;
}

/* Header của danh sách */
.list-header {
  margin-bottom: 30px;
  position: relative;
}

.list-title {
  font-size: 2.2rem; /* Tăng kích thước */
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 8px;
}

.title-line {
  width: 60px;
  height: 4px;
  background: var(--brand-color-1); /* Màu xanh thương hiệu */
  border-radius: var(--border-radius-sm);
}

/* 2. Trạng thái trống (Empty State) - Phần bạn khoanh đỏ */
.empty-state-premium {
  text-align: center;
  padding: 60px 20px;
  background: var(--white);
  border-radius: var(--border-radius-xl);
  border: 2px dashed var(--gray-300);
  margin: 20px 0;
}

.empty-state-premium .js-svg-inject {
  margin: 0 auto 20px;
  display: flex;
  justify-content: center;
  opacity: 0.6;
}

.empty-state-premium h4 {
  font-size: 1.8rem;
  color: var(--gray-600);
  font-weight: 600;
  margin-bottom: 10px;
}

.empty-state-premium p {
  font-size: 1.5rem;
  color: var(--gray-600);
  max-width: 400px;
  margin: 0 auto;
  line-height: 1.6;
}

/* 3. Danh sách đánh giá */
.comment-vertical-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.comment-item-premium {
  display: flex;
  gap: 24px;
  padding: 24px;
  background: var(--white);
  border: 1px solid var(--blue-100);
  border-radius: var(--border-radius-xl);
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}

.comment-item-premium:hover {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  border-color: #e2e8f0;
}

/* Khu vực User (Avatar & Name) */
.comment-user-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 120px;
  text-align: center;
}

.user-avatar-premium {
  width: 56px;
  height: 56px;
  background: #e0e7ff;
  color: #4338ca;
  border-radius: var(
    --border-radius-circle
  ); /* Chuyển sang hình tròn cho hiện đại */
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 2rem;
  margin-bottom: 10px;
}

.user-name-premium {
  font-size: 1.5rem;
  color: #1e293b;
  display: block;
  margin-bottom: 4px;
}

.badge-verified {
  font-size: 1.1rem;
  color: var(--brand-color-3);
  background: #f0fdf4;
  padding: 4px 8px;
  border-radius: var(--border-radius-md);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

/* Khu vực nội dung bình luận */
.comment-content-area {
  flex: 1;
}

.comment-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.comment-stars {
  color: var(--brand-color-2);
  font-size: 1.4rem;
  display: flex;
  gap: 2px;
}

.comment-date-premium {
  font-size: 1.3rem;
  color: #94a3b8;
}

.comment-text-premium {
  font-size: 1.6rem;
  line-height: 1.8;
  color: #334155;
  word-break: break-word;
}

/* Responsive */
@media (max-width: 640px) {
  .comment-item-premium {
    flex-direction: column;
    gap: 16px;
  }
  .comment-user-area {
    flex-direction: row;
    text-align: left;
    gap: 15px;
    min-width: auto;
  }
}
/* END PRODUCT REVIEWS */

/* ===============================================
   RELATED PRODUCTS - MODERN GRID STYLE
   =============================================== */

.related-products-modern {
  margin-top: 80px;
  padding-bottom: 80px;
}

/* Header & Title */
.related-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 40px;
}

.related-title {
  font-size: 2.6rem;
  font-weight: 800;
  color: #1e293b;
  margin: 0;
}

.title-divider {
  width: 60px;
  height: 4px;
  background: var(--brand-color-1);
  border-radius: var(--border-radius-md);
  margin-top: 8px;
}

.btn-view-all {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--brand-color-1);
  transition: 0.3s;
}

.btn-view-all:hover {
  gap: 12px;
  color: #0037c1;
}

.btn-view-all i {
  width: 18px;
  height: 18px;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}

.related-item-card {
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.related-item-card:hover {
  transform: translateY(-8px);
}

/* Responsive */
@media (max-width: 1024px) {
  .related-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .related-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

  .related-title {
    font-size: 2rem;
  }

  .related-header {
    margin-bottom: 25px;
  }
}

@media (max-width: 480px) {
  .related-grid {
    grid-template-columns: 1fr;
  }
}
/* END RELATED PRODUCTS */

/* ===============================================
   MODERN PURCHASE ACTIONS (BUTTONS)
   =============================================== */

.product-purchase-actions {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 15px;
  margin-top: 30px;
  padding-top: 25px;
  border-top: 1px solid #f1f1f1;
}

.btn-action-secondary i {
  width: 20px;
  height: 20px;
  stroke-width: 2.5px;
}

/* Hiệu ứng click cho cả 2 nút */
.btn-action-primary:active,
.btn-action-secondary:active {
  transform: translateY(-1px);
}

/* Responsive cho điện thoại nhỏ */
@media (max-width: 480px) {
  .product-purchase-actions {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}
/* END MODERN PURCHASE ACTIONS */

/* ===============================================
   PRODUCT DETAIL BANNER
   =============================================== */
.product-detail-banner {
  margin-top: 25px;
  border-radius: var(--border-radius-xl);
  overflow: hidden;
  background: var(--white);
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.product-detail-banner:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.product-detail-banner__link {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 10px;
}

.product-detail-banner__img {
  width: 110px;
  height: 110px;
  border-radius: var(--border-radius-lg);
  object-fit: cover;
  flex-shrink: 0;
}

.product-detail-banner__content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product-detail-banner__badge {
  display: inline-flex;
  padding: 4px 8px;
  background: rgba(33, 103, 221, 0.1); /* Màu thương hiệu nhạt */
  color: #2167dd; /* Màu thương hiệu chính */
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 50px;
  width: max-content;
  margin-bottom: 5px;
}

.product-detail-banner__title {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 3px 0;
  color: #1e293b;
}

.product-detail-banner__desc {
  font-size: 1.3rem;
  color: var(--gray-600);
}

/* Fix tiêu đề tabs khi cuộn trang */
.product-details-tabs {
  margin-top: 50px;
}

/* Responsive cho mobile */
@media (max-width: 480px) {
  .product-detail-banner__link {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 15px;
  }

  .product-detail-banner__img {
    width: 100%;
    height: 120px;
    margin-bottom: 10px;
  }
}
/* END PRODUCT DETAIL BANNER */

/* ===============================================
   PRO SIDEBAR CONTACT - FIXED REAL DATA STYLE
   =============================================== */
.sidebar-contact-outer {
  background: var(--gray-100);
  border: 1px solid #edf2f7;
  border-radius: var(--border-radius-xl);
  overflow: hidden;
  margin-bottom: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

/* 2. Header chính */
.contact-header-pro {
  background: var(--blue-500);
  padding: 25px 20px 20px 20px;
  border-bottom: 1px dashed #e2e8f0;
}

.contact-header-pro .header-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.2);
  color: var(--white);
  font-size: 1.1rem;
  font-weight: 700;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}
.contact-header-pro .header-title {
  font-size: 2.08rem;
  font-weight: 800;
  color: var(--white);
  margin: 0;
  line-height: 1.2;
}

.contact-header-pro .header-subtitle {
  font-size: 1.2rem;
  color: var(--white);
  margin: 5px 0 0;
  font-weight: 500;
}

/* 3. Danh sách nhân viên */
.staff-list {
  padding: 15px;
  background: var(--gray-100);
}

/* Thẻ nhân viên */
.staff-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--border-radius-lg);
  padding: 10px;
  margin-bottom: 10px;
  transition: all 0.3s ease;
}

.staff-card:last-child {
  margin-bottom: 0;
}

.staff-card:hover,
.staff-card-active {
  background: var(--white);
  border-color: var(--brand-color-3);
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.staff-card__top {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
}

.staff-avatar {
  position: relative;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

.staff-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--border-radius-circle);
}

/* Chấm xanh status */
.status-indicator {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 13px;
  height: 13px;
  background: #22c55e;
  border: 3px solid var(--white);
  border-radius: var(--border-radius-circle);
  animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}

.staff-meta {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.staff-label {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: #718096;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.staff-name {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1a202c;
  margin: 3px 0 0;
}

.staff-actions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.st-btn-pro {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 35px;
  border-radius: var(--border-radius-pill);
  font-size: 1.3rem;
  font-weight: 700;
  text-decoration: none !important;
  transition: all 0.3s ease;
  border: none;
}

.st-btn-pro:hover {
  transform: translateY(-2px);
}

.st-btn-zalo {
  background: #f0f7ff;
  color: #0068ff;
  border: 1px solid #cce3ff;
}

.st-zalo-img {
  width: 16px;
  height: 16px;
}

.st-btn-zalo:hover {
  background: #0068ff;
  color: var(--white);
  border-color: #0068ff;
  box-shadow: 0 5px 15px rgba(0, 104, 255, 0.2);
}

.st-btn-phone {
  background: #f0fdf4;
  color: #16a34a;
  border: 1px solid #dcfce7;
}

.st-btn-phone i {
  width: 14px;
  height: 14px;
}

.st-btn-phone:hover {
  background: #16a34a;
  color: var(--white);
  border-color: #16a34a;
  box-shadow: 0 5px 15px rgba(22, 163, 74, 0.2);
}

.sidebar-contact-footer {
  padding: 15px 20px;
  border-top: 1px solid #edf2f7;
  background: var(--blue-500);
  text-align: center;
  font-size: 1.6rem;
  color: var(--white);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.sidebar-contact-footer i {
  width: 14px;
  height: 14px;
}
/* END PRO SIDEBAR CONTACT */

/* ===============================================
   SIDEBAR COMMITMENT - ANTI-OVERFLOW
   =============================================== */

/* Wrapper cho phần cam kết trong sidebar */
.product-commit-sidebar-wrapper {
  padding: 15px;
  border-top: 1px dashed var(--gray-400);
  width: 100%; /* Ép luôn bằng chiều rộng sidebar */
}

.commit-sidebar-inner {
  display: flex;
  flex-direction: column; /* Xếp dọc các mục */
  gap: 12px;
}

.commit-item-mini {
  display: flex;
  align-items: center; /* Căn giữa icon và chữ theo hàng ngang */
  gap: 12px;
  padding: 12px;
  background: var(--white);
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--gray-300);
  transition: 0.3s;
}

.commit-item-mini:hover {
  border-color: var(--brand-color-3);
  background: var(--white);
}

.commit-icon-mini {
  width: 36px;
  height: 36px;
  background: rgba(4, 120, 87, 0.1);
  color: var(--brand-color-3-light); /* Màu xanh điểm nhấn */
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0; /* Không cho icon bị bóp méo */
}

.commit-icon-mini i {
  width: 18px;
  height: 18px;
}

.commit-content-mini {
  display: flex;
  flex-direction: column;
}

.commit-title-mini {
  font-size: 1.44rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}

.commit-desc-mini {
  font-size: 1.2rem;
  color: var(--gray-600);
  margin: 2px 0 0;
  line-height: 1.2;
}

/* END SIDEBAR COMMITMENT */

/* ===============================================
  FOOTER MODERN
  =============================================== */

.footer {
  background-color: var(--gray-1000);
  color: var(--white);
  padding: 80px 0 30px;
}

.footer__top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 40px;
  margin-bottom: 50px;
}

.footer__title {
  font-size: 1.84rem;
  font-weight: 700;
  margin-bottom: 25px;
  color: var(--white);
  position: relative;
  padding-bottom: 10px;
}

.footer__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 2px;
  background-color: var(--brand-color-1);
}

.footer__desc {
  color: var(--gray-300, #cbd5e1);
  font-size: 1.4rem;
  line-height: 1.7;
  margin: 15px 0;
}

.footer__contact-info {
  gap: 12px;
  color: var(--gray-300, #cbd5e1);
  font-size: 1.44rem;
  line-height: 1.7;
}

.footer__contact-info svg {
  width: 20px;
  height: 20px;
  margin: -8px 8px 0 0;
}

.footer__contact-info p {
  display: flex;
  align-items: center;
  font-size: 1.36rem;
  color: var(--gray-300, #cbd5e1);
  margin-bottom: 10px;
}

.footer__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer__link {
  color: var(--gray-400);
  text-decoration: none;
  font-size: 1.44rem;
  transition: 0.3s ease;
}

.footer__social-link .js-svg-inject svg {
  width: 50%;
  height: 50%;
  display: block;
}

.footer__link:hover {
  color: var(--brand-color-1);
  padding-left: 5px;
}

.footer__support-box {
  margin-top: 25px;
  padding: 15px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
}

.footer__subtitle {
  font-size: 1.36rem;
  margin-bottom: 8px;
  color: var(--brand-color-2);
}

.footer__phone {
  font-size: 1.36rem;
  color: var(--gray-300);
  margin-bottom: 5px;
}

.footer__phone span {
  font-weight: 700;
  color: var(--white);
}

/* Newsletter */
.footer__newsletter {
  margin-top: 20px;
  max-width: 350px;
}

.footer__input-group {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--border-radius-lg);
  padding: 6px;
  transition: all 0.3s ease;
}
.footer__input-group:focus-within {
  border-color: var(--brand-color-3);
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 0 4px rgba(4, 120, 87, 0.15);
}

.footer__input {
  flex: 1;
  background: transparent;
  border: none;
  padding: 10px 15px;
  color: var(--white);
  outline: none;
  font-size: 1.44rem;
}
.footer__input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.footer__submit-btn {
  background: var(--brand-color-3) !important;
  color: var(--white) !important;
  border: none;
  padding: 10px 25px;
  border-radius: var(--border-radius-md);
  font-weight: 700;
  font-size: 1.4rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.footer__submit-btn:hover {
  background: #03664a !important;
  transform: scale(1.02);
}

.footer__trust-badge {
  margin-top: 25px;
  opacity: 0.8;
  transition: 0.3s;
}

.footer__trust-badge:hover {
  opacity: 1;
}

.footer__socials {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.footer__social-link {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--border-radius-circle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white) !important;
  transition: all 0.4s ease;
  text-decoration: none !important;
  position: relative;
  overflow: hidden;
}

.footer__social-link:hover {
  background: var(--brand-color-1);
  border-color: var(--brand-color-1);
  color: rgb(101, 181, 251);
  transform: translateY(-2px);
  box-shadow: 0 0 20px color-mix(in srgb, var(--brand-color-1) 40%, transparent);
}

.footer__social-link::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  animation: sweepShine 4s infinite;
}

.footer__bottom {
  padding-top: 25px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}

.footer__copyright {
  color: var(--gray-400, #94a3b8);
  font-size: 1.3rem;
}

.footer__legal {
  display: flex;
  gap: 20px;
}

/* --- Ý TƯỞNG 2: Nút Xem Bản Đồ Neon Pulse --- */
.footer__map-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: rgba(26, 115, 232, 0.1);
  color: rgb(101, 181, 251);
  padding: 8px 20px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  margin-bottom: 15px;
  border: 0.5px solid color-mix(in srgb, rgb(101, 181, 251) 40%, transparent);
  transition: all 0.4s ease;
  width: max-content;
  position: relative;
  overflow: hidden;
}

.footer__map-btn:hover {
  background-color: var(--brand-color-1);
  color: var(--white);
  border-color: var(--brand-color-1);
  box-shadow: 0 0 20px color-mix(in srgb, var(--brand-color-1) 40%, transparent);
  transform: translateY(-2px);
}

.footer__map-btn svg {
  width: 18px;
  height: 18px;
  display: block;
  margin: 0 !important;
}

.footer__map-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  animation: sweepShine 3s infinite;
}

@keyframes sweepShine {
  0% {
    left: -100%;
  }
  20% {
    left: 200%;
  }
  100% {
    left: 200%;
  }
}

@media (max-width: 768px) {
  .footer {
    padding: 50px 0 30px;
  }
  .footer__bottom {
    justify-content: center;
    text-align: center;
  }
}
@media (max-width: 480px) {
  .footer__input-group {
    border-radius: var(--border-radius-md);
  }
  .footer__submit-btn {
    padding: 10px 15px;
  }
}
/* --- END FOOTER MODERN --- */

/* ===============================================
   SCROLL TO TOP
   =============================================== */

/* Hiện nút */
.scroll-top-btn__svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  pointer-events: none;
}

.scroll-top-btn__track {
  fill: none !important; /* BẮT BUỘC KHÔNG TÔ MÀU NỀN */
  stroke: rgba(0, 0, 0, 0.05);
  stroke-width: 2px;
}

.scroll-top-btn__progress {
  fill: none !important; /* BẮT BUỘC KHÔNG TÔ MÀU NỀN */
  stroke: var(--brand-color-1); /* Màu xanh thương hiệu */
  stroke-width: 2px;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.1s linear;
}

/* --- ICON VÀ CHỮ --- */
.scroll-top-btn__inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--border-radius-circle);
}

.scroll-top-btn__icon {
  color: var(--brand-color-1);
  transition: transform 0.4s ease;
}

.scroll-top-btn__text {
  position: absolute;
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--brand-color-1);
  transform: translateY(35px); /* Giấu chữ xuống dưới */
  transition: transform 0.4s ease;
}

/* Hiệu ứng rê chuột: Mũi tên bay lên, chữ hiện ra */
.scroll-top-btn:hover {
  background: var(--white) !important;
}

.scroll-top-btn:hover .scroll-top-btn__icon {
  transform: translateY(-35px);
}

.scroll-top-btn:hover .scroll-top-btn__text {
  transform: translateY(0);
}
/* END SCROLL TO TOP */

/* ===============================================
  MODAL TRÀN FOOTER - HỆ THỐNG OVERLAY CHUẨN
   =============================================== */

/* 1. Lớp nền bao phủ toàn màn hình */
.auth-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100000 !important;
  display: none; /* Mặc định ẩn */
  background-color: rgba(0, 0, 20, 0.6);
  backdrop-filter: blur(8px);
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-x: hidden;
  overflow-y: auto;
}

.auth-modal.in,
.auth-modal.show {
  display: flex !important;
}

.auth-modal__dialog {
  width: 100%;
  max-width: 480px;
  margin: auto;
  pointer-events: auto;
  animation: modalSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.auth-modal__content {
  background: var(--white);
  border-radius: 28px !important;
  border: none !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3) !important;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}

.auth-form-group {
  width: 100%;
  margin-bottom: 20px;
}

.auth-input {
  width: 100% !important;
}

.auth-social-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  width: 100%;
}

/* 4. Nút đóng (X) */
.auth-modal__close {
  position: absolute;
  top: 20px;
  right: 25px;
  background: none;
  border: none;
  font-size: 2.8rem;
  color: var(--gray-400);
  cursor: pointer;
  z-index: 10;
  line-height: 1;
}
.auth-modal__close:hover {
  color: var(--red-700);
}

/* Fix lỗi cho Mobile */
@media (max-width: 576px) {
  .auth-modal__dialog {
    max-width: 100%;
    margin: 10px;
  }
  .auth-social-grid {
    grid-template-columns: 1fr;
  }
}
/* END MODAL TRÀN FOOTER - HỆ THỐNG OVERLAY CHUẨN */
/* ===============================================
   MODAL LOGIN DIALOG
   =============================================== */
.auth-modal__content {
  border: none !important;
  border-radius: var(--border-radius-2xl) !important;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

.auth-modal__header {
  padding: 40px 40px 10px;
  text-align: center;
  position: relative;
}

.auth-modal__close {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 2.8rem;
  color: var(--gray-400);
  transition: 0.3s;
}

.auth-modal__title {
  font-size: 3.2rem;
  font-weight: 800;
  color: var(--gray-900);
  margin-bottom: 8px;
}

.auth-modal__subtitle {
  font-size: 1.6rem;
  color: var(--gray-500);
}

.auth-modal__body {
  padding: 30px 40px !important;
}

/* Input Fields */
.auth-form-group {
  margin-bottom: 20px;
}

.auth-label-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.auth-form-group label {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--gray-700);
}

.auth-input {
  width: 100%;
  height: 50px;
  padding: 0 16px;
  background: var(--gray-100);
  color: var(--gray-800);
  border: 2px solid transparent;
  border-radius: var(--border-radius-lg);
  font-size: 1.4rem;
  line-height: 1.5;
  transition: 0.3s;
}

.auth-input:focus {
  background: var(--white);
  border-color: var(--brand-color-1);
  outline: none;
  box-shadow: 0 0 0 4px rgba(33, 103, 221, 0.1);
}

/* --- Khối tùy chọn đăng nhập (Ghi nhớ & Quên MK) --- */
.auth-options-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}

/* Custom Checkbox Ghi nhớ */
.auth-remember {
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  user-select: none;
}

.auth-remember input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.auth-remember__checkmark {
  height: 20px;
  width: 20px;
  background-color: var(--gray-100);
  border: 2px solid var(--gray-300);
  border-radius: var(--border-radius-md);
  margin-right: 10px;
  transition: 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-remember:hover input ~ .auth-remember__checkmark {
  border-color: var(--brand-color-1);
}

.auth-remember input:checked ~ .auth-remember__checkmark {
  background-color: var(--brand-color-1);
  border-color: var(--brand-color-1);
}

/* Biểu tượng dấu tích trắng khi được chọn */
.auth-remember__checkmark:after {
  content: "";
  display: none;
  width: 5px;
  height: 10px;
  border: solid var(--white);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
  margin-bottom: 2px;
}

.auth-remember input:checked ~ .auth-remember__checkmark:after {
  display: block;
}

.auth-remember__text {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--gray-600);
}

/* Tinh chỉnh lại link quên mật khẩu trong hàng này */
.auth-options-row .link-accent {
  margin-bottom: 0;
  font-size: 1.4rem;
}

/* Divider */
.auth-divider {
  text-align: center;
  margin: 25px 0;
  position: relative;
}

.auth-divider::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--gray-200);
}

.auth-divider span {
  position: relative;
  background: var(--white);
  padding: 0 15px;
  font-size: 1.3rem;
  color: var(--gray-400);
}

/* Social Buttons */
.auth-social-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
}

.btn-social-login img {
  width: 20px;
  height: 20px;
}

.google-btn span {
  color: #444;
  font-size: 1.4rem;
  font-weight: 700;
}

/* Footer */
.auth-modal__footer {
  padding: 25px 40px 40px;
  text-align: center;
  font-size: 1.4rem;
  color: var(--gray-500);
  border-top: 1px solid var(--gray-100);
}

.link-primary {
  color: var(--brand-color-1);
  font-weight: 700;
}
.link-accent {
  color: var(--brand-color-2);
  font-size: 1.2rem;
  font-weight: 700;
}

/* Grid for Register */
.auth-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

@media (max-width: 576px) {
  .auth-grid,
  .auth-social-grid {
    grid-template-columns: 1fr;
  }
}
/* END MODAL LOGIN DIALOG */

/* ===============================================
   ACCOUNT SUCCESS MODAL
   =============================================== */

.account-modal__content {
  border-radius: 28px !important;
  overflow: hidden;
  border: none !important;
}

/* Header xanh thương hiệu */
.account-modal__header {
  background-color: var(--brand-color-3);
  padding: 40px 20px 30px;
  text-align: center;
  position: relative;
}

.account-modal__header .auth-modal__close {
  color: rgba(255, 255, 255, 0.7);
}

.account-modal__avatar-wrapper {
  position: relative;
  display: inline-block;
  margin-bottom: 15px;
}

.account-modal__avatar {
  width: 90px;
  height: 90px;
  background: var(--white);
  border-radius: var(--border-radius-2xl);
  padding: 5px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.account-modal__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--border-radius-xl);
}

.account-modal__badge {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--white);
  color: var(--gray-400);
  padding: 4px 12px;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 1px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.account-modal__name {
  color: var(--white);
  font-size: 1.8rem;
  font-weight: 700;
  margin-top: 15px;
}

/* Menu items */
.account-modal__body {
  padding: 25px 30px !important;
}

.account-modal__menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.account-modal__link {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 12px;
  border-radius: var(--border-radius-xl);
  transition: 0.3s;
  text-decoration: none !important;
  color: var(--gray-700);
  font-weight: 600;
}

.account-modal__link:hover {
  background-color: var(--gray-100);
  color: var(--brand-color-1);
}

.account-modal__icon {
  width: 42px;
  height: 42px;
  border-radius: var(--border-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.account-modal__icon i {
  width: 20px;
  height: 20px;
}

/* Màu icon nền nhẹ nhàng */
.bg-green-light {
  background: #ecfdf5;
  color: #10b981;
}
.bg-blue-light {
  background: var(--blue-100);
  color: var(--brand-color-1);
}
.bg-yellow-light {
  background: var(--white) beb;
  color: #f59e0b;
}

/* Logout Button */
.account-modal__footer {
  padding: 0 30px 30px;
}

.account-modal__logout-btn {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 2px solid #fee2e2;
  background: var(--white) 5f5;
  color: #ef4444;
  border-radius: var(--border-radius-xl);
  font-weight: 700;
  transition: 0.3s;
}

.account-modal__logout-btn:hover {
  background: #ef4444;
  color: var(--white);
  border-color: #ef4444;
  box-shadow: 0 8px 15px rgba(239, 68, 68, 0.2);
}
/* END ACCOUNT SUCCESS MODAL */

/* ===============================================
   CART MODAL - PROFESSIONAL CHECKOUT UI
   =============================================== */
/* Overlay làm mờ nền */
.cart-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

/* Khi modal được mở */
.cart-modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

/* Container chứa nội dung trắng */
.cart-modal-container {
  background: var(--white);
  width: 90%;
  max-width: 1000px;
  border-radius: var(--border-radius-xl);
  position: relative;
  transform: translateY(-20px);
  transition: all 0.3s ease;
  overflow: hidden;
}

.cart-modal-overlay.is-open .cart-modal-container {
  transform: translateY(0);
}

/* Nút đóng */
.cart-modal-close-btn {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 3rem;
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  z-index: 10;
}

.cart-modal-close-btn:hover {
  color: #1e293b;
}

/* Layout 2 cột */
.cart-modal__layout {
  display: flex;
}
.cart-modal__info {
  flex: 1.2;
  padding: 40px;
  border-right: 1px solid var(--blue-100);
}
.cart-modal__summary {
  flex: 1;
  padding: 40px;
  background: #fcfdfe;
}

/* Responsive cho Mobile */
@media (max-width: 768px) {
  .cart-modal__layout {
    flex-direction: column;
  }
  .cart-modal-container {
    height: 90vh;
    overflow-y: auto;
  }
}

/* END CART MODAL */

/* ===============================================
   STATS SECTION - PREMIUM UPGRADE
   =============================================== */
.stats-section {
  padding: 60px 0;
  margin-top: -20px;
  position: relative;
  z-index: 10;
}

.stats-wrapper {
  background: var(--white);
  border-radius: var(--border-radius-2xl);
  padding: 40px 20px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06) !important;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
}

.stats-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 0 15px;
  transition: all 0.4s ease;
}

/* Vách ngăn tinh tế */
.stats-item:not(:last-child) {
  border-right: 1px solid var(--blue-100);
}

/* Icon Box */
.stats-icon-box {
  width: 54px;
  height: 54px;
  background: var(--blue-50);
  color: var(--blue-500);
  border-radius: var(--border-radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: 0.3s;
}

.stats-icon-box .js-svg-inject {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.stats-icon-box svg {
  width: 35px;
  height: 35px;
  object-fit: contain;
  fill: currentColor;
}

.stats-item:hover .stats-icon-box {
  transform: translateY(-3px) scale(1.05);
  background-color: var(--brand-color-1);
  color: var(--white);
}

/* Typography */
.stats-value {
  font-size: 3.2rem;
  font-weight: 600;
  color: var(--gray-900);
  line-height: 1;
  margin-bottom: 5px;
  letter-spacing: -1px;
}

.stats-label {
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--gray-600);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Mobile Responsive */
@media (max-width: 1024px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 40px;
  }
  .stats-item:nth-child(2) {
    border-right: none;
  }
}

@media (max-width: 600px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
  .stats-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 15px 10px;
    gap: 10px;
  }
  .stats-item h3 {
    font-size: 2.2rem;
    margin-bottom: 4px;
  }

  .stats-item p {
    font-size: 1.2rem;
  }
  .stats-wrapper {
    border-radius: 32px;
    padding: 40px 15px;
  }
  .stats-section {
    margin-top: 10px;
  }
}
/* END STATS SECTION */

/* ===============================================
   FLASH SALE SECTION - MODERN STYLE
   =============================================== */
.flash-sale {
  background-color: #f8faff;
  padding: 40px 0;
  overflow: hidden;
}

/* 1. Header & Timer */
.fs-header {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-bottom: 40px;
}

@media (min-width: 768px) {
  .fs-header {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}

.fs-header__info {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fs-title-wrapper {
  display: flex;
  align-items: center;
  gap: 15px;
}

.fs-icon-box {
  width: 45px;
  height: 45px;
  border-radius: var(--border-radius-lg);
  background: linear-gradient(135deg, #ff4d4d, #f59e0b);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  box-shadow: 0 10px 15px rgba(255, 77, 77, 0.3);
  animation: pulse-red 2s infinite;
}

.fs-icon-box svg {
  width: 30px;
  height: 30px;
  object-fit: contain;
  fill: currentColor;
}

@keyframes pulse-red {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.fs-desc {
  max-width: 500px;
  font-size: 1.5rem;
  color: var(--gray-600);
}

/* Bộ đếm ngược (Timer) */
.fs-timer-box {
  display: flex;
  align-items: center;
  gap: 15px;
  background: var(--white);
  padding: 12px 20px;
  border-radius: var(--border-radius-xl);
  border: 1px solid var(--gray-150);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.fs-timer-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--gray-700);
  font-weight: 800;
  font-size: 1.3rem;
  text-transform: uppercase;
}

.fs-timer-label svg {
  width: 20px;
  height: 20px;
}

.fs-timer-blocks {
  display: flex;
  gap: 10px;
}

.fs-timer-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.fs-timer-val {
  width: 45px;
  height: 45px;
  border-radius: var(--border-radius-md);
  background: var(--blue-400);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 800;
}

.fs-timer-unit {
  font-size: 1rem;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gray-600);
  margin-top: 4px;
}

/* 2. Grid Sản Phẩm */
.fs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

/* 3. Product Card Flash Sale */
.fs-card {
  --card-radius: 20px;
  position: relative;
  background: var(--white);
  border-radius: var(--card-radius);
  border: 1px solid var(--gray-200);
  padding: 15px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.fs-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(33, 103, 221, 0.1);
  border-color: var(--brand-color-1);
}

/* Badge giảm giá */
.fs-card__badge {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 10;
  padding: 6px 14px;
  border-radius: 100px;
  background: var(--red-900);
  color: var(--white);
  font-size: 1.3rem;
  font-weight: 800;
  box-shadow: 0 5px 10px rgba(255, 77, 77, 0.3);
}

.fs-card__img-box {
  border-radius: calc(var(--card-radius) * 0.5);
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
  margin-bottom: 20px;
}

.fs-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.fs-card:hover .fs-card__img {
  transform: scale(1.1);
}

/* Nút thêm nhanh khi hover */
.fs-card__add-btn {
  position: absolute;
  bottom: 15px;
  left: 15px;
  right: 15px;
  padding: 12px;
  background: var(--brand-color-1);
  color: var(--white);
  border: none;
  border-radius: var(--border-radius-lg);
  font-size: 1.4rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transform: translateY(60px);
  opacity: 0;
  transition: all 0.4s ease;
  z-index: 20;
}

.fs-card:hover .fs-card__add-btn {
  transform: translateY(0);
  opacity: 1;
}

/* 4. Nội dung text & Giá */
.fs-card__title {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--gray-900);
  overflow: hidden;
  margin-bottom: 6px;
}

.fs-card__title:hover {
  color: var(--red-700);
}

.fs-card__desc {
  font-size: 1.3rem;
  color: var(--gray-600);
  line-height: 1.4;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fs-card__price-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 15px;
}

.fs-card__price-sale {
  font-size: 2rem;
  font-weight: 800;
  color: var(--red-700);
}

.fs-card__price-original {
  font-size: 1.3rem;

  text-decoration: line-through;
  color: var(--gray-600);
}

/* 5. Thanh tiến trình (Stock Progress) */
.fs-progress {
  margin-top: auto;
}

.fs-progress__text {
  display: flex;
  justify-content: space-between;
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.fs-progress__bar {
  height: 8px;
  background: #eee;
  border-radius: var(--border-radius-md);
  overflow: hidden;
}

.fs-progress__fill {
  height: 100%;
  border-radius: var(--border-radius-md);
  background: linear-gradient(90deg, var(--red-700), var(--brand-color-2));
}

/* Các class bổ trợ màu sắc */
.bg-accent {
  background: var(--brand-color-3) !important;
}
.text-accent {
  color: var(--red-700);
}

/* 6. Footer section */
.fs-footer {
  margin-top: 50px;
  text-align: center;
}

.fs-view-all {
  display: inline-flex;
  align-items: center;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--brand-color-1);
  text-decoration: none;
  padding: 12px 30px;
  border: 2px solid var(--brand-color-1);
  border-radius: 100px;
  transition: all 0.3s;
}

.fs-view-all:hover {
  background: var(--brand-color-1);
  color: var(--white);
}

/* Mobile Responsive */
@media (max-width: 480px) {
  .fs-grid {
    grid-template-columns: 1fr;
  }
  .fs-card__add-btn {
    transform: translateY(0);
    opacity: 1;
    position: relative;
    bottom: 0;
    left: 0;
    width: 100%;
    margin-top: 15px;
  }
}
/* END FLASH SALE */

/* ===============================================
   FLASH SALE BANNER SLIDER
   =============================================== */

.fs-banner-slider {
  position: relative;
  width: 100%;
  height: 100%; /* Sẽ tự co giãn theo chiều cao của các Card bên cạnh */
  min-height: 400px;
  border-radius: var(--border-radius-xl);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.fs-slider-track {
  display: flex;
  width: 400%; /* 4 ảnh x 100% */
  height: 100%;
  animation: fsSliderAnim 16s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

.fs-slide {
  width: 25%; /* 100% / 4 ảnh */
  height: 100%;
}

.fs-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ảnh phủ kín không bị móp */
}

/* Hiệu ứng chuyển động slide */
@keyframes fsSliderAnim {
  0%,
  20% {
    transform: translateX(0);
  }
  25%,
  45% {
    transform: translateX(-25%);
  }
  50%,
  70% {
    transform: translateX(-50%);
  }
  75%,
  95% {
    transform: translateX(-75%);
  }
  100% {
    transform: translateX(0);
  }
}

/* Lớp phủ chữ trên banner */
.fs-slider-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 30px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  color: var(--white);
  pointer-events: none;
}

.fs-slider-tag {
  background: var(--brand-color-2);
  color: var(--white);
  font-size: 1rem;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 50px;
  text-transform: uppercase;
  margin-bottom: 10px;
  display: inline-block;
}

.fs-slider-overlay h3 {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.3;
}

/* Responsive cho Mobile: Giảm độ cao banner */
@media (max-width: 768px) {
  .fs-banner-slider {
    min-height: 250px;
    margin-bottom: 20px;
  }
}
/* END FLASH SALE BANNER SLIDER */

/* ===============================================
   SECTION: SERVICES (DỊCH VỤ IN ẤN ĐA DẠNG)
   =============================================== */

.services {
  padding: 40px 0;
  background-color: var(--white-200);
}

.services .section-header--center {
  display: flex;
  text-align: center;
  margin-bottom: 40px;
  flex-direction: column;
  align-items: center;
}

.services .section-title {
  font-size: 3rem;
  font-weight: 800;
  color: var(--gray-900);
  margin-bottom: 15px;
  text-transform: none !important;
}

.services__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
}
.service-card {
  background: var(--white);
  border: 1px solid var(--blue-100);
  border-radius: var(--border-radius-xl);
  padding: 35px 25px;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}

.service-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
  border-color: var(--brand-color-1);
}

.service-card__icon-box {
  width: 50px;
  height: 50px;
  background-color: var(--blue-100);
  color: var(--brand-color-1);
  border-radius: var(--border-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 25px;
}

.service-card__icon-box i,
.service-card__icon-box svg {
  width: 24px;
  height: 24px;
}

.service-card__title {
  font-size: 2rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 15px;
  text-transform: none;
}

.service-card__desc {
  font-size: 1.5rem;
  color: var(--gray-700);
  line-height: 1.6;
  margin-bottom: 25px;
  flex-grow: 1;
}
.service-card__btn i,
.service-card__btn svg {
  width: 18px;
  height: 18px;
  transition: transform 0.3s ease;
}

.service-card__btn:hover i,
.service-card__btn:hover svg {
  transform: translate(2px, -2px);
}

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

@media (max-width: 600px) {
  .services__grid {
    grid-template-columns: 1fr;
  }
  .services {
    padding: 50px 0;
  }
}
/* END SERVICES */

/* ===============================================
   PRODUCTS (SẢN PHẨM TIÊU BIỂU)
   =============================================== */
.products {
  padding: 60px 0;
  background-color: var(--white);
}

.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.products__header {
  margin-bottom: 40px;
}

.products__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

.product-card {
  background: var(--white);
  border-radius: var(--border-radius-xl);
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid var(--gray-200);
}

.product-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

.product-card__image-box {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.product-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.product-card:hover .product-card__img {
  transform: scale(1.1);
}

.product-card__tag {
  position: absolute;
  top: 15px;
  left: 15px;
  background: var(--blue-500);
  color: var(--white);
  font-size: 1rem;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 2;
}

.product-card__content {
  padding: 20px;
}

.product-card__name a {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--gray-900);
  text-decoration: none !important;
  display: block;
  margin-bottom: 8px;
  transition: 0.3s;
}

.product-card__name a:hover {
  color: var(--brand-color-1);
}

.product-card__desc {
  font-size: 1.36rem;
  color: var(--gray-700);
  line-height: 1.5;
  margin-bottom: 20px;
  height: 40px;
  overflow: hidden;
}

.product-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--blue-100);
  padding-top: 15px;
}

.product-card__price-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.price-label {
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--gray-600);
  margin-right: 0;
}

.product-card__price {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--brand-color-1);
}

.product-card .btn--small {
  padding: 8px 20px;
  border-radius: 50px;
  font-size: 1.3rem;
  background-color: var(--blue-400) !important;
  color: var(--white) !important;
  border: none;
  font-weight: 700;
}

.product-card__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: 0.3s;
}

.product-card:hover .product-card__overlay {
  opacity: 1;
}

.product-card__plus {
  width: 50px;
  height: 50px;
  background: var(--white);
  border-radius: var(--border-radius-circle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-color-1);
}

/* ===============================================
   HIỆU ỨNG HOVER CHO NÚT "ĐẶT IN" (SECTION SẢN PHẨM TIÊU BIỂU)
   =============================================== */
.product-card .btn--primary.js-trigger-quote {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.product-card .btn--primary.js-trigger-quote:hover {
  color: var(--white) !important;
  background-color: var(--brand-color-3) !important;
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(5, 150, 105, 0.3);
}

.product-card .btn--primary.js-trigger-quote:active {
  transform: translateY(-1px);
  box-shadow: 0 5px 10px rgba(5, 150, 105, 0.2);
}

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

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

  .products__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .section-title {
    font-size: 2.6rem !important;
  }
  .section-desc {
    font-size: 1.6rem !important;
  }
  .btn-view-all {
    font-size: 1.6rem !important;
  }

  .product-card__name a {
    font-size: 2rem !important;
  }

  .product-card__desc {
    font-size: 1.5rem !important;
    line-height: 1.5 !important;
    height: auto !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .price-label {
    font-size: 1.4rem !important;
  }

  .product-card__price {
    font-size: 2.2rem !important;
  }

  .product-card .btn--small {
    font-size: 1.5rem !important;
    padding: 10px 24px !important;
  }
}
/* END PRODUCTS */

/* ===============================================
   TESTIMONIALS ADVANCED
   =============================================== */
.testimonials-advanced {
  position: relative;
  padding: 60px 0;
  background-color: var(--white);
  overflow: hidden;
}

/* 1. Header & Rating Box */
.testimonials-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  margin-bottom: 30px;
  position: relative;
  z-index: 1;
}

.trust-badge {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 15px;
}

.trust-badge__faces {
  display: flex;
  margin-left: 12px;
}

.trust-badge__face {
  width: 40px;
  height: 40px;
  border-radius: var(--border-radius-circle);
  border: 2px solid var(--white);
  margin-left: -12px;
  object-fit: cover;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.trust-badge__text {
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--gray-600);
}

.stars i {
  width: 16px;
  height: 16px;
  fill: #f59e0b;
  color: #f59e0b;
}

.rating-box {
  background: var(--white) !important;
  padding: 24px;
  border-radius: var(--border-radius-2xl);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  gap: 25px;
}

.rating-box__stars .stars {
  display: flex;
  gap: 2px;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 4px;
}

.rating-box__source {
  font-size: 1.1rem;
  color: var(--gray-600);
  text-transform: uppercase;
  font-weight: 600;
}

.rating-box__stars .js-svg-inject[data-icon="star"] {
  color: #ff9f43;
}

.rating-box__stars .js-svg-inject[data-icon="star"] svg {
  fill: #ff9f43;
  stroke: none;
}

.score-number {
  font-size: 3.2rem;
  font-weight: 800;
  color: var(--gray-900);
  line-height: 1;
}

.score-label {
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--gray-600);
  margin-top: 4px;
}

.rating-box__divider {
  width: 1px;
  height: 40px;
  background: var(--gray-200);
}

.testimonials-advanced .stars i,
.testimonials-advanced .stars svg {
  fill: #f59e0b !important;
  stroke: var(--blue-500) !important;
  stroke-width: 1px;
  width: 20px;
  height: 20px;
}

.testimonials-advanced .section-title {
  display: block;
  text-align: center;
  line-height: 1.2;
  margin-bottom: 10px;
}

.testimonials-advanced .section-desc {
  max-width: 580px;
  margin: 0 auto 30px auto;
}

.testimonials-advanced .section-title .text-gradient {
  background: linear-gradient(90deg, #2167dd, #00c6ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: italic;
}

.testimonials-header__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 15px;
}

.view-all-reviews {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0;
  color: var(--blue-500) !important;
  font-size: 1.4rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  transition: all 0.3s ease;
}

.view-all-reviews svg,
.view-all-reviews i {
  width: 18px;
  height: 18px;
  display: block;
  color: inherit;
  transition: transform 0.3s ease;
}

.view-all-reviews:hover {
  opacity: 0.8;
  color: var(--brand-color-3) !important;
}

.view-all-reviews:hover svg,
.view-all-reviews:hover i {
  transform: translateX(4px);
}

.testimonial-slider-container {
  display: grid;
  grid-template-columns: 8fr 4fr;
  gap: 60px;
  align-items: center;
  margin-bottom: 40px;
  position: relative;
  z-index: 1;
}

.testimonial-slider__visual {
  width: 100%;
  max-width: 380px;
  margin-left: auto;
}

.testimonial-track {
  display: grid;
  grid-template-columns: 1fr;
}

.testi-item {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateX(30px);
  transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.testi-item.active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.testi-quote {
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--gray-800);
  margin-bottom: 40px;
  font-style: italic;
}

.testi-author-box {
  display: flex;
  align-items: center;
  gap: 20px;
}

.testi-avatar-wrapper {
  position: relative;
}

.testi-avatar {
  width: 70px;
  height: 70px;
  border-radius: var(--border-radius-xl);
  object-fit: cover;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.testi-check {
  position: absolute;
  bottom: -5px;
  right: -5px;
  width: 24px !important;
  height: 24px !important;
  background: var(--brand-color-1);
  border-radius: var(--border-radius-circle);
  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--white);
  border: 2px solid var(--white);
  z-index: 10;
  line-height: 0;
}

.testi-check .js-svg-inject svg {
  width: 20px;
  height: 20px;
  stroke-width: 3;
}

.testi-name {
  font-size: 2rem;
  font-weight: 700;
  color: var(--gray-900);
}

.testi-meta {
  font-size: 1.4rem;
  color: var(--gray-600);
}

.testimonial-controls {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 50px;
}

.control-btn {
  width: 45px;
  height: 45px;
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--gray-200);
  background: transparent;
  cursor: pointer;
  transition: 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.control-btn:hover {
  background: var(--white);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  color: var(--brand-color-1);
}

.testimonial-dots {
  display: flex;
  gap: 8px;
  margin-left: 15px;
}

.testi-dot {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: var(--gray-200);
  cursor: pointer;
  transition: 0.4s;
}

.testi-dot.active {
  width: 25px;
  background: var(--brand-color-1);
}

.visual-bg-rotate {
  position: absolute;
  inset: 0;
  background: rgba(33, 103, 221, 0.03);
  border-radius: 40px;
  transform: rotate(3deg) scale(0.95);
}

.visual-frame {
  position: relative;
  aspect-ratio: 5/6;
  border-radius: 40px;
  overflow: hidden;
  border: 8px solid var(--white);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
}

.visual-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.5s;
}

.visual-caption {
  position: absolute;
  bottom: 30px;
  left: 30px;
  right: 30px;
  z-index: 2;
}

.visual-badge {
  display: inline-block;
  padding: 4px 12px;
  background: var(--brand-color-1);
  color: var(--white);
  border-radius: 100px;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.visual-desc {
  color: var(--white);
  font-size: 1.4rem;
  font-style: italic;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.testimonial-marquee-wrapper {
  position: relative;
  padding-top: 50px;
  border-top: 1px solid var(--gray-150);
}

.testimonial-marquee {
  overflow: hidden;
}

.marquee-track {
  display: flex;
  gap: 30px;
  animation: marquee 30s linear infinite;
  width: max-content;
}

.marquee-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px 25px;
  background: var(--white);
  border-radius: var(--border-radius-xl);
  border: 1px solid var(--gray-150);
  min-width: 280px;
}

.marquee-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--border-radius-circle);
  background: var(--blue-50);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--brand-color-1);
  font-size: 1.6rem;
}

.marquee-name {
  font-size: 1.8rem !important;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 2px;
}

.marquee-comment {
  font-size: 1.4rem !important;
  color: var(--gray-600);
  font-style: normal;
  line-height: 1.4;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@media (max-width: 1024px) {
  .testimonial-slider-container {
    grid-template-columns: 1fr;
  }
  .testimonial-slider__visual {
    display: none;
  }
  .testimonials-header {
    flex-direction: column;
    align-items: flex-start;
  }
}
/* END TESTIMONIALS ADVANCED */

/* ===============================================
   CONTACT & QUOTE (LIÊN HỆ & BÁO GIÁ)
   =============================================== */
.contact {
  padding: 40px 0;
  background-color: #f8f9fa;
}

.contact__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: center;
}
/* Style cho Video Container */
.contact__video-container {
  width: 100%;
}

.video-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  padding-left: 5px;
}

.video-header__icon {
  width: 24px;
  height: 24px;
  color: var(--brand-color-1);
}

.video-header__title {
  font-size: 1.6rem;
  font-weight: 700;
  color: #334155;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Khung viền ngoài cho Video (Outer Frame) */
.video-outer-frame {
  padding: 12px;
  background: var(--white);
  border-radius: 35px;
  border: 1.5px solid #e2e8f0;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
}

.yt-style {
  position: relative;
  cursor: pointer;
}

.yt-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  padding: 10px;
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 10;
}

.video-footer-info {
  background: var(--white);
  padding: 12px;
  border-radius: var(--border-radius-2xl);
  border: 1px solid var(--gray-200);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.v-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 10px;
  background: var(--gray-100);
  border-radius: var(--border-radius-xl);
  border: 1px solid transparent;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin-bottom: 0 !important;
}
.v-feature:hover {
  background: var(--white);
  border-color: var(--brand-color-1);
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(33, 103, 221, 0.08);
}

.v-feature__icon {
  width: 48px;
  height: 48px;
  background: var(--blue-100);
  color: var(--brand-color-1);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius-lg);
  flex-shrink: 0;
  transition: 0.3s;
}

.v-feature:hover .v-feature__icon {
  transform: rotate(12deg) scale(1.1);
  background: var(--brand-color-1);
  color: var(--white);
}

.v-feature__icon svg,
.v-feature__icon .js-svg-inject {
  width: 24px !important;
  height: 24px !important;
}

.v-feature span {
  font-size: 1.4rem;
  color: var(--gray-600);
  font-weight: 500;
  line-height: 1.5;
}

.v-feature span strong {
  color: var(--gray-800);
  font-size: 1.6rem;
  font-weight: 800;
}

@media (max-width: 991px) {
  .video-footer-info {
    grid-template-columns: 1fr;
  }
  .v-feature {
    flex-direction: row;
    text-align: left;
    padding: 15px;
  }
  .v-feature span strong {
    display: inline;
  }
  .v-feature:hover {
    transform: translateX(5px);
  }
}
/* Video */
.video-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  background: #1a1a1a;
  border-radius: var(--border-radius-2xl);
  overflow: hidden;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.1),
    0 1px 8px rgba(0, 0, 0, 0.05);
  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease;
}

.video-wrapper:hover .yt-controls {
  opacity: 1;
}
/* Thanh Progress Bar đỏ rực */
.yt-controls__progress {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  margin-bottom: 12px;
  cursor: pointer;
  position: relative;
  border-radius: 0;
  transition: height 0.1s ease;
}

.yt-controls__progress:hover {
  height: 6px;
}
.progress-bar {
  width: 100%;
  height: 100%;
  position: relative;
}

.progress-filled {
  height: 100%;
  background: var(--red-700);
  width: 0%;
  position: relative;
}

.progress-filled::after {
  content: "";
  position: absolute;
  right: -7px;
  top: 50%;
  transform: translateY(-50%) scale(0);
  width: 14px;
  height: 14px;
  background: var(--red-700);
  border-radius: var(--border-radius-circle);
  transition: transform 0.15s ease;
}

.yt-controls__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 5px;
}
.yt-controls__left,
.yt-controls__right {
  display: flex;
  align-items: center;
  gap: 5px;
}

.yt-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: none;
  color: var(--white);
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: var(--border-radius-circle);
  padding: 0;
  transition: background-color 0.2s ease;
}

.yt-btn svg,
.yt-btn .js-svg-inject {
  width: 22px !important;
  height: 22px !important;
}

.yt-btn:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

.yt-time {
  color: var(--white);
  font-size: 1.35rem;
  font-family: "Roboto", Arial, sans-serif;
  margin-left: 10px;
  pointer-events: none;
  user-select: none;
}

.yt-controls__volume-slider {
  -webkit-appearance: none;
  width: 0;
  height: 4px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 4px;
  outline: none;
  cursor: pointer;
  margin-left: -5px;
  opacity: 0;
  transition:
    width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s ease;
}

.yt-controls__left:hover .yt-controls__volume-slider {
  width: 60px;
  opacity: 1;
}

.yt-controls__volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: var(--border-radius-circle);
  background: var(--white);
  cursor: pointer;
  transition: transform 0.2s ease;
}

.yt-controls__volume-slider:hover::-webkit-slider-thumb {
  transform: scale(1.3);
}

.factory-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Badge trang trí */
.video-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 10;
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  color: var(--white);
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 1.1rem;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.3);
  text-transform: uppercase;
  pointer-events: none;
}

/* Nút Play và Overlay */
.video-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.4s ease;
  cursor: pointer;
  z-index: 5;
}

.video-wrapper:hover .progress-filled::after,
.yt-controls__progress:hover .progress-filled::after {
  transform: translateY(-50%) scale(1);
}

.play-button-ripple {
  width: 70px;
  height: 70px;
  background: var(--brand-color-1);
  color: var(--white);
  border-radius: var(--border-radius-circle);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
  position: relative;
  box-shadow: 0 0 20px rgba(var(--brand-color-1-rgb), 0.5);
}

/* Hiệu ứng sóng rung */
.play-button-ripple::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px solid var(--brand-color-1);
  border-radius: var(--border-radius-circle);
  animation: ripple 2s infinite;
}

.play-icon {
  width: 30px;
  height: 30px;
  margin-left: 4px;
}

.play-text {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 1.5rem;
  font-weight: 500;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

@keyframes ripple {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

.video-wrapper.is-playing .video-overlay {
  opacity: 0;
  visibility: hidden;
}

.contact__header {
  margin-bottom: 30px;
}

.contact__header .section-title {
  font-size: 3rem;
  margin-bottom: 15px;
}

.contact__header .section-desc {
  text-align: left;
  margin-bottom: 25px;
}

.contact__desc {
  color: var(--gray-600);
  margin-bottom: 40px;
  line-height: 1.6;
}

.contact__form-wrapper {
  background: var(--white);
  padding: 40px;
  border-radius: var(--border-radius-2xl);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--gray-200);
}

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

.form__group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.form__label {
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--gray-900);
}

.form__input,
.form__select,
.form__textarea {
  width: 100%;
  background-color: var(--gray-100);
  border: 1px solid transparent;
  border-radius: var(--border-radius-lg);
  padding: 14px 16px;
  font-size: 1.4rem;
  transition: 0.3s;
  outline: none;
}

.form__input:focus,
.form__select:focus,
.form__textarea:focus {
  border-color: var(--brand-color-1);
  background-color: var(--white);
  box-shadow: 0 0 0 4px rgba(33, 103, 221, 0.1);
}

.form__textarea {
  height: 120px;
  resize: none;
}
.form__input:focus::placeholder,
.form__textarea:focus::placeholder {
  color: transparent;
  background-color: var(--gray-100);
}

.form__input::placeholder,
.form__textarea::placeholder {
  transition: color 0.2s ease;
}

.btn--full {
  width: 100%;
  justify-content: center;
  padding: 15px;
  font-size: 1.6rem;
  background-color: var(--blue-50);
  color: var(--brand-color-1);
  border: 1px solid var(--blue-100);
  border-radius: var(--border-radius-md);
}

.btn--full:hover {
  background-color: var(--brand-color-1);
  color: var(--white);
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(33, 103, 221, 0.2);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 991px) {
  .contact__grid {
    grid-template-columns: 1fr;
  }

  .contact__header .section-title {
    font-size: 2.8rem;
    text-align: center;
  }

  .contact__header .section-desc {
    text-align: center;
  }

  .contact__video-container {
    order: 2;
  }

  .video-footer-info {
    align-items: center;
    text-align: center;
  }

  .form__row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* Custom Dropdown cho Form Liên Hệ */
#productContactDropdown.active .custom-product-menu {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: translateY(0);
}

.custom-product-select {
  width: 100%;
  position: relative;
  cursor: pointer;
}

.custom-product-select .sort-inner {
  background: var(--white);
  border: 1.5px solid #e2e8f0;
  border-radius: var(--border-radius-lg);
  padding: 1.2rem 1.6rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: all 0.2s;
}

.custom-product-select .sort-inner:hover {
  border-color: var(--brand-color-1);
}

.custom-product-select .current-value {
  flex: 1;
  font-size: 1.5rem;
  color: #334155;
  font-weight: 400;
}

/* Menu xổ xuống */
.custom-product-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 100%;
  max-height: 35rem;
  overflow-y: auto;
  background: var(--white);
  border-radius: var(--border-radius-xl);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.05);
  z-index: 100;
  padding: 1rem;
  display: none;
}

.js-dropdown.active .custom-product-menu {
  display: block;
  animation: slideDown 0.3s ease-out;
}

.menu-category-title {
  padding: 1.2rem 1.6rem 0.5rem;
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--brand-color-1);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  pointer-events: none;
}

/* Item sản phẩm */
.custom-product-menu li.select-item {
  padding: 1rem 2.5rem;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--gray-600);
  border-radius: 8px;
  transition: all 0.2s;
  list-style: none;
}

.custom-product-menu li.select-item:hover {
  background: var(--blue-100);
  color: var(--brand-color-1);
  padding-left: 3rem;
}

.custom-product-menu li.selected {
  background: var(--blue-100);
  color: var(--brand-color-1);
}

/* Custom thanh cuộn cho mượt */
.custom-product-menu::-webkit-scrollbar {
  width: 6px;
}
.custom-product-menu::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: var(--border-radius-md);
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* END CONTACT */

/* ===============================================
   PRESS MENTIONS (BÁO CHÍ) - INFINITE MARQUEE UI
   =============================================== */
.press-mentions {
  background-color: var(--white);
  padding: 60px 0;
  overflow: hidden; /* Đảm bảo logo không bị tràn ra ngoài màn hình */
}

.press-marquee-wrapper {
  position: relative;
  max-width: 100%;
  margin: 0 auto;
}

/* 1. Lớp mờ (Gradient) ở 2 bên mép tạo cảm giác premium */
.press-gradient {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none; /* Tránh cản trở thao tác click của người dùng */
}
.press-gradient--left {
  left: 0;
  background: linear-gradient(to right, var(--white), rgba(248, 250, 252, 0));
}
.press-gradient--right {
  right: 0;
  background: linear-gradient(to left, var(--white), rgba(248, 250, 252, 0));
}

/* 2. Khung chạy và Đường ray */
.press-marquee {
  overflow: hidden;
  white-space: nowrap;
}

.press-track {
  display: inline-flex;
  align-items: center;
  gap: 70px;
  animation: marqueePress 25s linear infinite;
  padding-right: 70px;
}

.press-track img {
  max-width: none;
}

.press-marquee:hover .press-track {
  animation-play-state: paused;
}

.press__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  filter: grayscale(100%) opacity(50%);
}

.press__item:hover {
  filter: grayscale(0%) opacity(100%);
  transform: scale(1.08);
}

.press__logo {
  height: 35px;
  width: auto;
  object-fit: contain;
}

/* 4. Định nghĩa chuyển động Animation (Từ phải sang trái) */
@keyframes marqueePress {
  0% {
    transform: translateX(0);
  }
  100% {
    /* Di chuyển đúng 50% chiều rộng của track (vì ta đã nhân đôi nội dung trong HTML) */
    transform: translateX(-50%);
  }
}

/* 5. Responsive cho điện thoại */
@media (max-width: 768px) {
  .press-mentions {
    padding: 40px 0;
  }
  .press-track {
    gap: 40px;
    padding-right: 40px;
  }
  .press__logo {
    height: 25px; /* Nhỏ hơn nữa trên Mobile */
  }
  .press-gradient {
    width: 40px;
  }
}
/* END PRESS MENTIONS */

/* ===============================================
   SECTION: PROCESS (Quy trình làm việc)
   =============================================== */
.process {
  padding: 40px 0;
  background: var(--white);
}

.process .section-header--center {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40px;
}

.process .section-title {
  font-size: 4rem;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--gray-900);
  letter-spacing: -0.5px;
}

.process__wrapper {
  position: relative;
  margin-top: 20px;
}

/* Đường kẻ nối giữa các bước */
.process__line {
  position: absolute;
  top: 40px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: var(--blue-100);
  z-index: 1;
}

.process__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 15px;
  position: relative;
  z-index: 2;
}

.process-step {
  text-align: center;
}

/* Khung chứa Icon và Số */
.process-step__icon-wrapper {
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
  position: relative;
}

.process-step__icon-box {
  width: 100%;
  height: 100%;
  background: var(--white);
  border: 2px solid var(--gray-300);
  border-radius: var(--border-radius-circle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-color-1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hiệu ứng khi di chuột vào từng bước */
.process-step:hover .process-step__icon-box {
  border-color: var(--brand-color-1);
  background-color: var(--blue-50);
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(33, 103, 221, 0.12);
}

/* Số thứ tự bước */
.process-step__number {
  position: absolute;
  top: 0;
  right: 0;
  width: 26px;
  height: 26px;
  background: var(--brand-color-1);
  color: var(--white);
  border-radius: var(--border-radius-circle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 700;
  border: 2px solid var(--white); /* Tạo khoảng trắng với icon-box */
}

.process-step__title {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--gray-800);
}

.process-step__desc {
  font-size: 1.5rem;
  color: var(--gray-600);
  line-height: 1.5;
}

/* ===============================================
   RESPONSIVE
   =============================================== */
@media (max-width: 1024px) {
  .process__line {
    display: none;
  } /* Ẩn đường kẻ khi xuống hàng */
  .process__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 20px;
  }
}

@media (max-width: 600px) {
  .process .section-title {
    font-size: 2.6rem !important;
  }
  .process__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* END PROCESS*/

/* ===============================================
   SECTION: NEWS (TIN TỨC)
   =============================================== */

.news {
  padding: 40px 0;
  background-color: var(--white);
}

/* Lưới 3 cột */
.news__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-top: 30px;
}

/* Thẻ bài viết */
.blog-card {
  text-decoration: none !important;
  display: block;
  color: inherit;
  transition: all 0.3s ease;
}

/* Hình ảnh và hiệu ứng zoom */
.blog-card__image-wrapper {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--border-radius-xl);
  overflow: hidden;
  margin-bottom: 20px;
}

.blog-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.blog-card:hover .blog-card__img {
  transform: scale(1.1);
}

/* Nhãn Kiến thức (Tag) */
.blog-card__tag {
  position: absolute;
  top: 15px;
  left: 15px;
  background: rgba(255, 255, 255, 0.95);
  padding: 4px 12px;
  border-radius: 100px;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #1a1a1a;
  letter-spacing: 1px;
}

/* Meta (Ngày tháng) */
.blog-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.3rem;
  color: var(--gray-600);
  margin-bottom: 20px;
}

.blog-card__meta svg {
  width: 14px;
  height: 14px;
}

/* Tiêu đề bài viết */
.blog-card__title {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.4;
  color: #1a1a1a;
  margin-bottom: 12px;
  /* Giới hạn 2 dòng tiêu đề */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card:hover .blog-card__title {
  color: var(--brand-color-1);
}

/* Mô tả ngắn */
.blog-card__desc {
  font-size: 1.4rem;
  color: #666;
  line-height: 1.6;
  margin-bottom: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- NÚT ĐỌC THÊM TRONG TIN TỨC --- */

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

@media (max-width: 600px) {
  /* 1. Đổi thành lưới 2 cột và giảm khoảng cách giữa 2 bài */
  .news__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

  /* 2. Thu nhỏ thẻ Tag (Nhãn Kiến thức) */
  .blog-card__tag {
    font-size: 0.85rem;
    padding: 3px 8px;
    top: 10px;
    left: 10px;
  }

  /* 3. Thu nhỏ ngày tháng */
  .blog-card__meta {
    font-size: 1.15rem;
    margin-bottom: 10px;
  }

  /* 4. Thu nhỏ tiêu đề bài viết */
  .blog-card__title {
    font-size: 1.45rem;
    margin-bottom: 8px;
  }

  /* 5. Xử lý đoạn mô tả ngắn */
  .blog-card__desc {
    font-size: 1.25rem;
    -webkit-line-clamp: 2; /* Rút xuống chỉ hiển thị 2 dòng để tiết kiệm diện tích */
    margin-bottom: 15px;
  }

  /* 6. Thu nhỏ nút Đọc thêm (dựa theo ảnh của bạn) */
  /* Lưu ý: Nếu nút của bạn dùng class khác, hãy đổi .btn-read-more thành class của bạn */
  .btn-read-more {
    font-size: 1.2rem;
    padding: 6px 14px;
  }
  .blog-card__btn {
    margin-bottom: 20px;
  }
}
/* END NEWS */

/* ===============================================
   FOOTER SKYLINE (Dải trang trí chân trang mới)
   =============================================== */
.footer-skyline {
  width: 100%;
  background-color: var(--white);
  line-height: 0;
}

.footer-skyline img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

@media (max-width: 768px) {
  .footer-skyline {
    margin-top: 30px;
  }
  .footer-skyline img {
    min-height: 100px;
  }
}
/* END FOOTER SKYLINE */
/* ===============================================
  ICON CHAT
   =============================================== */

.contact-buttons {
  position: fixed;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 999999;
}

.contact-buttons .js-svg-inject svg {
  width: 60%;
  height: 60%;
}

.cb-item {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  text-decoration: none !important;
  position: relative;
}

/* KHUNG NÚT TRÒN BÊN NGOÀI */
.cb-item__icon {
  width: 50px;
  height: 50px;
  border-radius: var(--border-radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--brand-color-1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  z-index: 2;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ĐỊNH DẠNG ICON SVG BÊN TRONG */
.cb-item__icon.js-svg-inject svg {
  width: 75%;
  height: 75%;
  transition: all 0.3s ease;
}

.cb-item__label {
  position: absolute;
  right: 65px;
  background: #222222;
  color: var(--white);
  padding: 6px 14px;
  border-radius: var(--border-radius-md);
  font-size: 1.3rem;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translateX(15px) scale(0.95);
  transition: all 0.3s ease;
  pointer-events: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.cb-item__label::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -4px;
  transform: translateY(-50%);
  border-width: 5px 0 5px 5px;
  border-style: solid;
  border-color: transparent transparent transparent #222222;
}

/* HIỆU ỨNG HOVER TƯƠNG TÁC */
.cb-item:hover .cb-item__icon {
  transform: scale(1.1);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.cb-item:hover .cb-item__label {
  opacity: 1;
  visibility: visible;
  transform: translateX(0) scale(1);
}

.cb-item.messenger .cb-item__icon svg path {
  fill: #0866ff;
}

@media (max-width: 768px) {
  .contact-buttons {
    right: 30px;
    bottom: 200px;
    top: auto;
    transform: none;
    gap: 12px;
  }

  .cb-item__icon {
    width: 48px;
    height: 48px;
  }

  .cb-item__label {
    display: none;
  }
}

.chatbot__trigger {
  min-width: 48px;
  min-height: 48px;
}
/* ===============================================
   END ICON CHAT
   =============================================== */

/* ===============================================
   MODERN NEWS PAGE (LƯỚI TẠP CHÍ)
   =============================================== */

.news-page-modern {
  background-color: var(--white);
  padding-bottom: 80px;
}

.news-main-layout {
  display: flex;
  gap: 25px;
  position: relative;
  align-items: flex-start;
  margin-top: 15px;
}

/* --- 1. KHỐI HERO GRID (TIN NỔI BẬT) --- */
.news-hero-section {
  margin-bottom: 40px;
}

.hero-grid {
  display: grid;
  grid-template-columns: 2.5fr 1fr;
  gap: 20px;
}

.hero-side-posts {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 20px;
}

.hero-card {
  position: relative;
  border-radius: var(--border-radius-xl);
  overflow: hidden;
  height: 100%;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.hero-card--large {
  min-height: 400px;
}

.hero-card__img-wrapper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  font-size: 1.4rem;
}

.hero-card__img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.hero-card:hover .hero-card__img-wrapper img {
  transform: scale(1.08);
}

.hero-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.9) 0%,
    rgba(0, 0, 0, 0.2) 60%,
    transparent 100%
  );
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 30px;
  z-index: 2;
}

.news-badge {
  background: var(--brand-color-1);
  color: var(--white);
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 50px;
  align-self: flex-start;
  margin-bottom: 15px;
}

.hero-card__title {
  color: var(--white);
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1.4;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hero-card--small .hero-card__title {
  font-size: 1.8rem;
  -webkit-line-clamp: 2;
  margin-bottom: 0;
}

.hero-card__desc {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.4rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- 2. TIN TỨC DẠNG LIST (GẦN ĐÂY) --- */
.recent-news-section {
  background: var(--white);
  border-radius: var(--border-radius-xl);
  padding: 25px;
  border: 1px solid #edf2f7;
  margin-bottom: 40px;
}

.section-title-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.news-list-vertical {
  display: flex;
  flex-wrap: wrap; /* Nếu DB của bạn đổ ra nhiều bài, chúng sẽ rải đều ra */
  gap: 20px;
}

.news-item-row {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
  padding-bottom: 15px;
  border-bottom: 1px dashed #e2e8f0;
}

.news-item-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.news-item-row__img {
  width: 120px;
  height: 80px;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  flex-shrink: 0;
}

.news-item-row__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.3s;
}

.news-item-row:hover .news-item-row__img img {
  transform: scale(1.1);
}

.news-item-row__title a {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1e293b;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 5px;
  transition: 0.3s;
}

.news-item-row__title a:hover {
  color: var(--brand-color-1);
}

.news-item-row__meta {
  font-size: 1.2rem;
  color: var(--gray-500);
  display: flex;
  align-items: center;
  gap: 5px;
}

.news-item-row__meta i {
  width: 12px;
  height: 12px;
}

/* --- 3. TIN TỨC THEO DANH MỤC (GRID CHUẨN) --- */
.category-news-block {
  margin-bottom: 50px;
}

.cat-block-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 2px solid #e2e8f0;
}

.cat-block-title {
  font-size: 2.2rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  position: relative;
}

/* Gạch chân màu thương hiệu */
.cat-block-title::after {
  content: "";
  position: absolute;
  bottom: -17px;
  left: 0;
  width: 60px;
  height: 2px;
  background: var(--brand-color-1);
}

.cat-block-viewall {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--brand-color-1);
  display: flex;
  align-items: center;
  gap: 5px;
  transition: 0.3s;
}

.cat-block-viewall:hover {
  gap: 8px;
}

.cat-block-viewall i {
  width: 14px;
  height: 14px;
}

/* Lưới 2 cột cho danh mục */
.standard-news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.standard-news-card {
  background: var(--white);
  border-radius: var(--border-radius-xl);
  padding: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
  border: 1px solid var(--blue-100);
  display: flex;
  flex-direction: column;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

.standard-news-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05);
  border-color: var(--brand-color-1);
}

.standard-card__img {
  width: 100%;
  aspect-ratio: 3/2;
  border-radius: var(--border-radius-xl);
  overflow: hidden;
  margin-bottom: 20px;
  display: block;
  font-size: 1.4rem;
}

.standard-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.5s ease;
}

.standard-news-card:hover .standard-card__img img {
  transform: scale(1.1);
}

.standard-card__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.standard-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.3rem;
  color: #94a3b8;
}

.standard-card__meta i {
  width: 14px;
  height: 14px;
  color: var(--brand-color-1);
}

.meta-item-group {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}

.meta-item-group i {
  width: 16px;
  height: 16px;
  color: #cbd5e1;
}
.meta-item-group.category {
  color: var(--brand-color-1);
}

.standard-card__stars {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-bottom: 8px;
}

.standard-card__stars i {
  color: #cbd5e1; /* Màu mặc định cho sao rỗng */
  font-size: 1.3rem;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.standard-card__stars i.fa-solid {
  color: #f59e0b;
}

/* 1. Phóng to các ngôi sao */
.standard-news-card:hover .standard-card__stars i {
  transform: scale(1.2);
}

/* 2. Hiệu ứng nảy so le (tạo cảm giác sóng lượn) */
.standard-news-card:hover .standard-card__stars i:nth-child(1) {
  transition-delay: 0.05s;
}
.standard-news-card:hover .standard-card__stars i:nth-child(2) {
  transition-delay: 0.1s;
}
.standard-news-card:hover .standard-card__stars i:nth-child(3) {
  transition-delay: 0.15s;
}
.standard-news-card:hover .standard-card__stars i:nth-child(4) {
  transition-delay: 0.2s;
}
.standard-news-card:hover .standard-card__stars i:nth-child(5) {
  transition-delay: 0.25s;
}

/* 3. Đổi màu sáng rực rỡ hơn khi di chuột trực tiếp vào cụm sao */
.standard-card__stars:hover i.fa-solid {
  color: #fbbf24;
  filter: drop-shadow(0 0 5px rgba(245, 158, 11, 0.5));
  cursor: pointer;
}

/* Điểm số text bên cạnh */
.standard-card__stars span {
  font-size: 1.2rem;
  font-weight: 700;
  color: #94a3b8;
  margin-left: 6px;
  transition: 0.3s;
}

.standard-news-card:hover .standard-card__stars span {
  color: var(--brand-color-1);
}

.standard-card__title {
  font-size: 1.7rem;
  font-weight: 800;
  color: #1e293b;
  line-height: 1.4;
  margin: 5px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Ép tiêu đề chỉ hiện tối đa 2 dòng */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.standard-card__title a {
  color: inherit;
  transition: 0.3s;
}

.standard-card__title a:hover {
  color: var(--brand-color-1);
}

.standard-card__desc {
  color: var(--gray-600);
  font-size: 1.45rem;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Ép mô tả chỉ hiện tối đa 3 dòng */
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 15px; /* Khoảng cách cho nút */
}

.standard-card__btn-view {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 25px;
  background: var(--brand-color-1); /* Màu thương hiệu chính (In Ấn Trần Gia) */
  color: var(--white);
  border-radius: 50px; /* Bo tròn hoàn hảo kiểu viên thuốc (Pill shape) */
  font-size: 1.4rem;
  font-weight: 700;
  margin-top: auto; /* Đẩy nút xuống cuối thẻ */
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  text-align: center;
}

.standard-card__btn-view:hover {
  background: #00817c; /* Màu xanh đậm hơn một chút (ví dụ) */
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 161, 155, 0.3);
}

.standard-card__btn-view:hover i {
  transform: translateX(5px);
}

.sidebar-sticky-wrapper {
  position: sticky;
  top: 100px;
}

.empty-state {
  font-size: 1.5rem;
  min-width: 600px;
}

/* --- RESPONSIVE --- */
@media (max-width: 1024px) {
  .news-main-layout {
    grid-template-columns: 1fr; /* Đẩy sidebar xuống dưới trên tablet/mobile */
  }
  .hero-grid {
    grid-template-columns: 1fr; /* Khối hero thành 1 cột */
  }
  .hero-card--large {
    min-height: 300px;
  }
  .hero-side-posts {
    grid-template-columns: 1fr 1fr; /* 2 tin nhỏ nằm ngang nhau trên tablet */
    grid-template-rows: auto;
  }
}

@media (max-width: 768px) {
  .standard-news-grid {
    grid-template-columns: 1fr; /* Danh mục tin thành 1 cột trên mobile */
  }
  .hero-side-posts {
    grid-template-columns: 1fr; /* 2 tin nhỏ xếp dọc lại */
  }

  .section-main-title {
    font-size: 2.6rem; /* Tăng kích thước chữ cho to và rõ ràng trên Desktop */
    font-weight: 800; /* Làm đậm chữ để nổi bật */
    color: #0f172a; /* Màu xám đậm sang trọng */
    margin: 0;
    position: relative;
  }

  /* Thêm thanh gạch ngang màu xanh (thương hiệu) dưới tiêu đề cho đẹp mắt */
  .section-main-title::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 50px;
    height: 3px;
    background: var(--brand-color-1, #2167dd);
    border-radius: var(--border-radius-sm);
  }

  /* Điều chỉnh lại hộp chứa tiêu đề để phù hợp với thanh gạch ngang */
  .section-title-box {
    margin-bottom: 30px; /* Tăng khoảng cách với danh sách tin bên dưới */
  }
}

@media (max-width: 600px) {
  .section-main-title {
    font-size: 2.2rem; /* Kích thước tối ưu cho điện thoại */
  }
}
/* END MODERN NEWS PAGE */

/* ===============================================
   MODERN PREMIUM PAGINATION
   =============================================== */
.pagination-wrapper {
  margin-top: 50px;
  display: flex;
  justify-content: center;
  padding-bottom: 20px;
}

.pagination-list {
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  padding: 0;
}

/* Style chung cho mỗi nút trang */
/*  */

/* Nút TRƯỚC/SAU với icon */
/* .page-link.prev-next i {
  width: 20px;
  height: 20px;
  stroke-width: 2.5px;
} */

/* Hiệu ứng Hover */

/* Trạng thái trang hiện tại (ACTIVE) */

/* Style cho dấu ba chấm (...) */
.pagination-ellipsis {
  color: #cbd5e1;
  font-weight: 800;
  letter-spacing: 2px;
  padding: 0 5px;
}

/* Responsive cho điện thoại */
@media (max-width: 480px) {
  .pagination-list {
    gap: 6px;
  }
}
/* END MODERN PREMIUM PAGINATION */

/* ===============================================
   PREMIUM NEWS SIDEBAR STYLE
   =============================================== */
.news-sidebar-wrapper {
  display: flex;
  flex-direction: column;
  gap: 35px;
}

/* WIDGET CHUNG */
.sidebar-widget {
  background: var(--white);
  border-radius: var(--border-radius-2xl);
  padding: 25px;
  border: 1px solid var(--gray-200);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
  transition: 0.3s;
}

.sidebar-widget:hover {
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06);
}

.sidebar-widget__title {
  font-size: 1.9rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 25px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  padding-bottom: 15px;
}

.sidebar-widget__title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 4px;
  background: var(--brand-color-1);
  border-radius: var(--border-radius-md);
}

/* 1. CÂY DANH MỤC (CATEGORY TREE) */
#js-news-container.is-loading {
  cursor: wait;
}

.sidebar-category-tree {
  list-style: none;
  padding: 0;
}

.cat-item-parent {
  margin-bottom: 12px;
}

.cat-link-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--border-radius-lg); /* Bo góc mềm mại hơn */
  color: var(--gray-600);
  font-weight: 700;
  font-size: 1.6rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  cursor: default;
  user-select: none;
}

.cat-item-parent.active > .cat-link-main {
  background: var(--brand-color-1);
  color: var(--white);
  border-color: var(--brand-color-1);
  box-shadow: 0 8px 20px rgba(33, 103, 221, 0.3); /* Tạo độ nổi khối */
}

.cat-item-parent.active > .cat-link-main::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 4px;
  background: rgba(255, 255, 255, 0.5);
}

.cat-item-parent.active > .cat-link-main:hover {
  color: var(--white);
  transform: none; /* Không nhích khi đã active */
}

.cat-link-main:hover {
  background: var(--blue-50);
  color: var(--brand-color-1);
  border-color: var(--blue-200);
  transform: translateX(4px); /* Nhích nhẹ sang phải khi hover */
}

.cat-link-main .arrow-icon {
  width: 16px;
  opacity: 0.5;
  transition: 0.3s;
}

.cat-link-main:hover .arrow-icon {
  transform: rotate(90deg);
  opacity: 1;
}

/* Danh mục con (Hiệu ứng đường kẻ nối) */
.cat-child-list {
  list-style: none;
  padding-left: 20px;
  margin-top: 8px;
  border-left: 2px solid var(--gray-150); /* Đường nối mờ hơn */
  margin-left: 20px;
}

.cat-item-child {
  position: relative;
  margin-bottom: 4px;
}

.cat-item-child::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 12px;
  height: 2px;
  background: var(--blue-100);
}

.cat-link-child {
  display: flex;
  align-items: center;
  color: var(--gray-600);
  font-size: 1.5rem;
  font-weight: 400;
  padding: 8px 12px;
  transition: all 0.3s ease;
  border-radius: 8px;
  cursor: pointer;
}

.cat-item-child.active .cat-link-child {
  color: var(--brand-color-1);
  font-weight: 700;
  background: rgba(33, 103, 221, 0.08); /* Nền xanh nhạt tinh tế */
}

/* Thêm một dấu chấm tròn nhỏ trước chữ khi mục con được chọn */
.cat-item-child.active .cat-link-child::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--brand-color-1);
  border-radius: var(--border-radius-circle);
  margin-right: 10px;
  display: inline-block;
}

/* Hiệu ứng hover cho mục con */
.cat-link-child:hover {
  color: var(--brand-color-1);
  padding-left: 18px; /* Trượt nhẹ chữ */
}

/* 2. BÀI VIẾT NỔI BẬT (POST CARD) */
.sidebar-post-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sidebar-post-card {
  display: flex;
  gap: 15px;
  align-items: flex-start;
}

.sidebar-post-thumb {
  width: 90px;
  height: 70px;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}

.sidebar-post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.5s;
}

.post-count-badge {
  position: absolute;
  top: 5px;
  left: 5px;
  background: #ef4444;
  color: var(--white);
  font-size: 1rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}

.sidebar-post-card:hover .sidebar-post-thumb img {
  transform: scale(1.1);
}

.sidebar-post-name a {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--gray-800);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: 0.3s;
}

.sidebar-post-name a:hover {
  color: var(--brand-color-1);
}

.post-date {
  font-size: 1.2rem;
  color: #94a3b8;
  display: block;
  margin-top: 5px;
}

/* 3. BANNER QUẢNG CÁO HIỆN ĐẠI */
.ad-banner-item {
  display: block;
  position: relative;
  border-radius: var(--border-radius-xl);
  overflow: hidden;
}

.ad-banner-item img {
  width: 100%;
  transition: 0.5s;
}

.ad-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: 0.3s;
}

.ad-overlay span {
  background: var(--white);
  color: #000;
  padding: 10px 20px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 1.3rem;
  transform: translateY(10px);
  transition: 0.3s;
}

.ad-banner-item:hover .ad-overlay {
  opacity: 1;
}

.ad-banner-item:hover .ad-overlay span {
  transform: translateY(0);
}

.ad-banner-item:hover img {
  transform: scale(1.05);
}
/* END PREMIUM NEWS SIDEBAR STYLE */

/* ===============================================
   MODERN SINGLE ARTICLE (CHI TIẾT BÀI VIẾT)
   =============================================== */

/* CỘT CÔNG CỤ (BÊN TRÁI) */
.article-sticky-sidebar {
  position: sticky;
  top: 120px;
  z-index: 100;
  width: 50px; /* Cố định chiều rộng cột 1 */
  flex-shrink: 0;
}

.sticky-tools-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--blue-100);
  border-radius: 100px;
  padding: 6px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  gap: 12px;
}

/* 3. CỘT NỘI DUNG CHÍNH (GIỮA) */
.news-content-area {
  flex: 1; /* Tự động lấy không gian còn lại */
  min-width: 0;
}

.category-header-box {
  display: flex;
  align-items: center;
  font-size: 2rem;
  line-height: 1.2;
  gap: 12px;
  margin-bottom: 20px;
}

.article-title {
  font-size: 3.52rem;
  font-weight: 900;
  color: #0f172a;
  margin-bottom: 15px;
}

.article-meta-info {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 1.4rem;
  color: var(--gray-600);
  margin-bottom: 20px;
}

.meta-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.meta-item .js-svg-inject svg {
  margin-bottom: 8px;
}

.single-article-box {
  background: var(--white);
  border-radius: var(--border-radius-2xl);
  padding: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
  border: 1px solid #edf2f7;
  margin-bottom: 50px;
}

.related-articles-section {
  margin-bottom: 80px;
}

.news-sidebar-area {
  width: 320px;
  flex-shrink: 0;
}

.tool-btn {
  background: var(--white);
  border: 1px solid var(--blue-150);
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius-circle);
  color: var(--gray-600);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  text-decoration: none !important;
}

.tool-btn svg {
  text-align: center;
  width: 18px;
  height: 18px;
}

.font-current-value {
  text-align: center;
  font-size: 1.3rem;
  font-weight: 800;
  color: #1e293b;
  margin: 10px 0;
}

/* HOVER MÀU SẮC */
.tool-btn:hover {
  color: var(--white);
  background: var(--brand-color-1);
  border-color: var(--brand-color-1);
  transform: translateY(-3px) scale(1.1);
}

.tool-btn.btn-facebook:hover {
  background: #1877f2;
  border-color: #1877f2;
}
.tool-btn.btn-zalo:hover {
  background: #0068ff;
  border-color: #0068ff;
}
.tool-btn.btn-faq:hover {
  background: #f59e0b;
  border-color: #f59e0b;
}

.tool-divider {
  width: 25px;
  height: 1px;
  background: var(--blue-150);
}

/* ==========================================================
   FAQ EXCLUSIVE ACCORDION (CSS ONLY)
   ========================================================== */
.article-faq-section {
  margin-top: 20px;
}

.faq-accordion-native {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Khung bao ngoài */
.faq-item-native {
  background: var(--white);
  border: 1px solid #e2e8f0;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Tiêu đề */
.faq-question-native {
  list-style: none;
  padding: 18px 25px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--gray-700);
  user-select: none;
  transition:
    background 0.3s ease,
    color 0.3s ease;
}

.q-text {
  font-weight: 500;
}

.faq-question-native::-webkit-details-marker {
  display: none;
}

/* Trạng thái khi ĐANG MỞ [open] */
.faq-item-native[open] {
  border-color: var(--brand-color-1);
  box-shadow: 0 12px 30px rgba(33, 103, 221, 0.1);
  background-color: var(--white);
}

.faq-item-native[open] .faq-question-native {
  color: var(--brand-color-1);
  background-color: rgba(33, 103, 221, 0.03); /* Highlight nhẹ tiêu đề */
  padding-bottom: 15px;
}

/* Câu trả lời */
.faq-answer-native {
  border-top: 1px solid rgba(33, 103, 221, 0.05);
}

.answer-content {
  padding: 20px 30px 25px 50px;
  color: var(--gray-600);
  line-height: 1.8;
  font-size: 1.55rem;
  position: relative;
  /* Hiệu ứng trượt nhẹ cho nội dung */
  animation: faqSlideIn 0.4s ease-out forwards;
}

/* Thanh chỉ thị màu xanh bên trái câu trả lời */
.answer-content::before {
  content: "";
  position: absolute;
  left: 25px;
  top: 22px;
  bottom: 25px;
  width: 4px;
  background: linear-gradient(to bottom, var(--brand-color-1), #60a5fa);
  border-radius: var(--border-radius-xl);
}

/* Xoay Icon */
.faq-item-native[open] .q-icon {
  transform: rotate(180deg);
  color: var(--brand-color-1);
}

.q-icon {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  color: #cbd5e1;
}

/* Keyframes cho hiệu ứng hiện chữ */
@keyframes faqSlideIn {
  from {
    opacity: 0;
    transform: translateY(-15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 5. RESPONSIVE */
@media (max-width: 1200px) {
  .news-sidebar-area {
    display: none;
  } /* Ẩn sidebar phải trước */
}

@media (max-width: 992px) {
  .article-sticky-sidebar {
    display: none;
  } /* Ẩn công cụ trái khi màn hình hẹp */
  .news-main-layout {
    gap: 0;
  }
  .single-article-box {
    padding: 25px;
    border-radius: 0;
  }
}

@media print {
  .article-sticky-sidebar,
  .news-sidebar-area,
  .breadcrumb-nav {
    display: none !important;
  }
}

/* Responsive cho mobile */
@media (max-width: 768px) {
  .answer-content {
    padding: 15px 20px 20px 35px;
  }
  .answer-content::before {
    left: 15px;
  }
}
/* END MODERN SINGLE ARTICLE (CHI TIẾT BÀI VIẾT)*/

/* ===============================================
   TOAST NOTIFICATION SYSTEM
   =============================================== */
/* Container chứa các thông báo */
#toast-container {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Giao diện từng thông báo */
.toast-message {
  background: #1e293b; /* Màu Slate 800 - cực sang */
  color: var(--white);
  padding: 12px 24px;
  border-radius: var(--border-radius-lg);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.4rem;
  font-weight: 600;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  animation: toastSlideIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  border-left: 4px solid var(--brand-color-1); /* Nhấn màu thương hiệu */
  min-width: 280px;
}

/* .toast-message i {
  color: var(--brand-color-1);
  width: 18px;
  height: 18px;
} */

/* Hiệu ứng trượt vào */
@keyframes toastSlideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Hiệu ứng biến mất */
.toast-message.hide {
  animation: toastFadeOut 0.5s ease forwards;
}

@keyframes toastFadeOut {
  to {
    transform: translateX(20px);
    opacity: 0;
  }
}
/* END TOAST NOTIFICATION SYSTEM */

/* ===============================================
   MODERN CONTACT PAGE
   =============================================== */
.contact-page {
  padding: 40px 0 80px;
  background: var(--white);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr; /* Chia 2 cột: Bản đồ và Form */
  gap: 40px;
  align-items: start;
}

/* 1. Phía Bản đồ & Thông tin */
.map-wrapper {
  border-radius: var(--border-radius-2xl);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border: 1px solid #e2e8f0;
  margin-bottom: 30px;
}

.direct-contact-cards {
  display: grid;
  gap: 15px;
}

.contact-card {
  background: var(--white);
  padding: 20px;
  border-radius: var(--border-radius-xl);
  display: flex;
  gap: 15px;
  align-items: center;
  border: 1px solid var(--blue-100);
  transition: 0.3s;
}

.contact-card:hover {
  transform: translateX(10px);
  border-color: var(--brand-color-1);
}

/* .contact-card i {
  width: 45px;
  height: 45px;
  background: rgba(var(--brand-color-1-rgb), 0.1);
  color: var(--brand-color-1);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius-lg);
} */

.contact-card h4 {
  font-size: 1.4rem;
  color: #94a3b8;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.contact-card p {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}

/* 2. Phía Form liên hệ */
.contact-form-side {
  background: var(--white);
  padding: 45px;
  border-radius: 30px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.04);
  border: 1px solid var(--blue-100);
}

.form-header h2 {
  font-size: 2.8rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 12px;
}
.form-header p {
  color: var(--gray-600);
  margin-bottom: 35px;
  font-size: 1.5rem;
  line-height: 1.6;
}

.input-group {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.input-group label {
  font-size: 1.4rem;
  font-weight: 700;
  color: #334155;
}

.input-group input,
.input-group textarea {
  padding: 14px 20px;
  border-radius: var(--border-radius-lg);
  border: 1px solid #e2e8f0;
  background: var(--white);
  font-family: inherit;
  font-size: 1.5rem;
  transition: all 0.3s;
}

.input-group input:focus,
.input-group textarea:focus {
  outline: none;
  border-color: var(--brand-color-1);
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(var(--brand-color-1-rgb), 0.1);
}

.form-row.two-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* Nút gửi form */

/* Responsive */
@media (max-width: 992px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
  .contact-info-side {
    order: 2;
  }
  .contact-form-side {
    order: 1;
    padding: 30px;
  }
}

@media (max-width: 600px) {
  .form-row.two-cols {
    grid-template-columns: 1fr;
  }
}

.message-alert {
  padding: 15px 20px;
  border-radius: var(--border-radius-lg);
  margin-bottom: 20px;
  font-size: 1.4rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

.message-alert.alert-success {
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

.message-alert.alert-danger {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}
/* END MODERN CONTACT PAGE */

/* ===============================================
   FLY TO CART ANIMATION
   =============================================== */
.fly-item {
  position: fixed;
  z-index: 10001;
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: var(--border-radius-circle);
  pointer-events: none;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  transition: all 0.8s cubic-bezier(0.42, 0, 0.58, 1);
  opacity: 1;
}

/* Hiệu ứng rung nhẹ cho icon giỏ hàng khi bài bay tới */
@keyframes cart-bounce {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
    color: var(--brand-color-1);
  }
  100% {
    transform: scale(1);
  }
}

.cart-animate {
  animation: cart-bounce 0.5s ease-in-out;
}
/* END FLY TO CART ANIMATION */

/* ===============================================
   MODERN COUNTDOWN BOX
   =============================================== */
#countdown-container {
  background: linear-gradient(135deg, var(--white) 0%, var(--blue-100) 100%);
  border: 2px solid #e2e8f0;
  border-radius: var(--border-radius-2xl);
  padding: 20px;
  margin: 40px 0;
}

.countdown-inner {
  display: flex;
  align-items: center;
  gap: 25px;
}

.countdown-icon {
  width: 60px;
  height: 60px;
  background: var(--brand-color-1);
  color: var(--white);
  border-radius: var(--border-radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.countdown-title {
  font-size: 1.8rem;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 10px;
}

/* Nút lấy mã */
.btn-reveal-pass {
  background: #1e293b;
  color: var(--white);
  border: none;
  padding: 12px 25px;
  border-radius: var(--border-radius-lg);
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: 0.3s;
}

.btn-reveal-pass:hover {
  background: var(--brand-color-1);
  transform: translateY(-2px);
}

/* Số đếm ngược */
.timer-display {
  font-size: 3.2rem;
  font-weight: 900;
  color: var(--brand-color-1);
  font-family: monospace;
}

/* Kết quả mật khẩu */
.password-result {
  display: flex;
  align-items: center;
  gap: 15px;
  background: var(--white);
  padding: 8px 8px 8px 20px;
  border-radius: var(--border-radius-lg);
  border: 1px solid #cbd5e1;
}

.pass-text {
  font-size: 2rem;
  font-weight: 800;
  color: #ef4444;
  letter-spacing: 1px;
}

.btn-copy-pass {
  background: var(--blue-100);
  border: none;
  padding: 10px 15px;
  border-radius: var(--border-radius-md);
  color: var(--gray-600);
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-copy-pass:hover {
  background: #e2e8f0;
  color: #1e293b;
}
/* Hiệu ứng Rung lắc */
@keyframes shake-attention {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-8px) rotate(-1deg);
  }
  50% {
    transform: translateX(8px) rotate(1deg);
  }
  75% {
    transform: translateX(-4px) rotate(-0.5deg);
  }
}

.shake-now {
  animation: shake-attention 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  border-color: var(
    --brand-color-1
  ) !important; /* Đổi màu viền khi rung để gây chú ý */
  box-shadow: 0 10px 30px rgba(var(--brand-color-1-rgb), 0.2) !important;
}
/* END MODERN COUNTDOWN BOX */

/* ===============================================
   MODERN POLICY PAGE
   =============================================== */
.policy-page {
  background-color: var(--white);
  padding: 40px 0 80px;
}

.policy-grid {
  display: grid;
  grid-template-columns: 300px 1fr; /* Sidebar cố định 300px */
  gap: 30px;
  align-items: start;
}

.policy-support-card {
  margin-top: 25px;
  padding: 10px;
  background: var(--white); /* Nền xám xanh cực nhẹ */
  border-radius: var(--border-radius-xl);
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  gap: 15px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* Hiệu ứng nổi khối khi hover */
.policy-support-card:hover {
  background: var(--white);
  border-color: var(--brand-color-1);
  transform: translateY(-5px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.05);
}

/* Phần chứa icon */
.support-card__icon {
  width: 44px;
  height: 44px;
  background: var(--brand-color-1);
  color: var(--white);
  border-radius: var(--border-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(var(--brand-color-1-rgb), 0.3);
}

.support-card__icon svg {
  width: 22px;
  height: 22px;
}

/* Nội dung text */
.support-card__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.support-card__text {
  font-size: 1.4rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}

/* Link liên hệ */
.support-card__link {
  font-size: 1.3rem;
  color: var(--brand-color-1);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: 0.3s;
}

.support-card__link svg {
  width: 14px;
  height: 14px;
  transition: transform 0.3s;
}

.support-card__link:hover {
  color: #000;
}

.support-card__link:hover svg {
  transform: translateX(5px);
}

/* 1. SIDEBAR STYLE */
.policy-sidebar__inner {
  background: var(--white);
  border-radius: var(--border-radius-xl);
  padding: 25px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
  position: sticky;
  top: 100px;
}

.sidebar-title {
  font-size: 1.8rem;
  font-weight: 800;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 2px dashed var(--blue-100);
}

/* .sidebar-title i {
  color: var(--brand-color-1);
  width: 22px;
} */

.policy-menu {
  list-style: none;
  padding: 0;
}

.policy-menu__item {
  margin-bottom: 8px;
}

.policy-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-radius: var(--border-radius-lg);
  color: var(--gray-600);
  font-weight: 600;
  font-size: 1.5rem;
  transition: all 0.3s;
  background: transparent;
}

.policy-menu__item.active .policy-menu__link,
.policy-menu__link:hover {
  background: var(--blue-100);
  color: var(--brand-color-1);
}

.policy-menu__item.active .policy-menu__link {
  background: rgba(var(--brand-color-1-rgb), 0.1);
}

.policy-menu__link .dot {
  width: 6px;
  height: 6px;
  background-color: #cbd5e1; /* Màu xám nhạt */
  border-radius: var(--border-radius-circle);
  margin-right: 15px;
  flex-shrink: 0;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Hiệu ứng đàn hồi */
  position: relative;
}

.policy-menu__link:hover .dot {
  background-color: var(--brand-color-1);
  transform: scale(1.4);
  box-shadow: 0 0 8px rgba(var(--brand-color-1-rgb), 0.5);
}

.policy-menu__link .link-text {
  transition: transform 0.3s ease;
}
.policy-menu__link:hover .link-text {
  transform: translateX(3px);
}

.policy-menu__link .arrow {
  width: 14px;
  height: 14px;
  opacity: 0; /* Ẩn đi mặc định */
  transform: translateX(-10px);
  transition: all 0.3s ease;
}

.policy-menu__link:hover .arrow,
.policy-menu__item.active .arrow {
  opacity: 1;
  transform: translateX(0);
}

.policy-menu__item.active .dot {
  width: 4px;
  height: 18px; /* Biến từ chấm tròn thành thanh dọc */
  background-color: var(--blue-400); /* Trắng để nổi trên nền màu thương hiệu */
  border-radius: 4px;
  transform: scale(1);
  box-shadow: none;
}

/* 2. MAIN CONTENT STYLE */
.policy-main-content {
  background: var(--white);
  border-radius: var(--border-radius-2xl);
  padding: 50px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

.policy-header {
  margin-bottom: 40px;
  border-bottom: 1px solid var(--blue-100);
  padding-bottom: 30px;
}

.policy-badge {
  display: inline-block;
  background: #f0fdf4;
  color: #16a34a;
  font-size: 1.2rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 50px;
  margin-bottom: 15px;
}

.policy-title {
  font-size: 3.2rem;
  font-weight: 800;
  color: var(--gray-900);
  line-height: 1.2;
  margin-bottom: 20px;
}

.policy-meta {
  display: flex;
  gap: 25px;
  color: var(--gray-600);
  font-size: 1.4rem;
}

/* 1. Căn giữa icon và chữ cho đẹp */
.policy-meta span {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Content Rich Text */
.policy-content-rich {
  color: var(--gray-800);
  line-height: 1.8;
  font-size: 1.6rem;
}

.policy-content-rich p {
  margin-bottom: 20px;
}

.policy-content-rich strong {
  color: var(--gray-900);
}

.policy-footer {
  margin-top: 50px;
  padding: 25px;
  background: var(--white);
  border-radius: var(--border-radius-xl);
  border-left: 4px solid var(--brand-color-1);
}

.policy-footer p {
  font-size: 1.4rem;
  color: var(--gray-600);
  font-style: italic;
  margin: 0;
}

/* Responsive */
/* Responsive: Tablet & Mobile */
@media (max-width: 992px) {
  .policy-grid {
    grid-template-columns: 1fr;
    /* Thiết lập lại phần chứa thành flexbox để dễ điều khiển thứ tự trên/dưới */
    display: flex;
    flex-direction: column;
  }

  /* Đưa sidebar LÊN ĐẦU (trước nội dung bài viết) */
  .policy-sidebar {
    order: 1;
  }

  /* Đưa nội dung chính XUỐNG DƯỚI sidebar */
  .policy-main-content {
    order: 2;
    padding: 30px;
  }

  /* Tùy chọn nhỏ: Bỏ sticky của sidebar trên mobile để nó cuộn tự nhiên cùng trang */
  .policy-sidebar__inner {
    position: relative;
    top: 0;
  }
}
/* END MODERN POLICY PAGE */

/* ===============================================
   KỸ THUẬT TÀNG HÌNH: ĐÈ WIDGET ZALO LÊN SIDEBAR
   =============================================== */

.zalo-chat-widget {
  position: fixed !important;
  bottom: 90px !important;
  right: 20px !important;
  z-index: 999999 !important;
}

.zalo-chat-widget iframe {
  opacity: 0 !important;
  width: 60px !important;
  height: 60px !important;
  cursor: pointer !important;
}

.zalo-chat-widget[style*="width: 3"] iframe,
.zalo-chat-widget[style*="width: 4"] iframe {
  opacity: 1 !important;
  width: 100% !important;
  height: 100% !important;
}
/* END ZALO CHAT WIDGET */

/* ===============================================
   CHATBOT UI (Giao diện Chatbot)
   =============================================== */

/* 1. Container bao ngoài - Khóa vị trí ở góc phải màn hình */
.chatbot-fixed-container {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 1000000 !important;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-family: "Google Sans", sans-serif;
}

/* 2. Cửa sổ Chat */
.chatbot__window {
  width: 350px;
  height: 500px;
  background: var(--white);
  border-radius: var(--border-radius-2xl);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
  display: none; /* Hiện bằng JS qua class .active */
  flex-direction: column;
  overflow: hidden;
  margin-bottom: 15px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(10px);
}

.chatbot-fixed-container.active .chatbot__window {
  display: flex;
  animation: fadeInSlide 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeInSlide {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 3. Header */
.chatbot__header {
  background: #2167dd;
  color: var(--white);
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chatbot__header-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chatbot__avatar {
  width: 35px;
  height: 35px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: var(--border-radius-circle);
  display: flex;
  align-items: center;
  justify-content: center;
}

.chatbot__name {
  font-weight: 700;
  font-size: 1.5rem;
}
.chatbot__status {
  font-size: 1.1rem;
  opacity: 0.8;
}
.chatbot__close {
  background: none;
  border: none;
  color: var(--white);
  font-size: 2.4rem;
  cursor: pointer;
  line-height: 1;
}

/* 4. Body & Tin nhắn */
.chatbot__body {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 15px;
  background: var(--white);
}

.chat-msg {
  max-width: 85%;
  padding: 12px 16px;
  font-size: 1.4rem;
  border-radius: var(--border-radius-xl);
  line-height: 1.5;
}

.chat-msg--ai {
  align-self: flex-start;
  background: var(--white);
  border: 1px solid #e2e8f0;
  color: #334155;
  border-bottom-left-radius: 4px;
}

.chat-msg--user {
  align-self: flex-end;
  background: #2167dd;
  color: var(--white);
  border-bottom-right-radius: 4px;
}

/* 5. Gợi ý & Typing (Copy từ phần bạn gửi) */
.chatbot__suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 5px;
}

.suggestion-btn {
  background: var(--white);
  border: 1px solid #2167dd;
  color: #2167dd;
  padding: 6px 14px;
  border-radius: var(--border-radius-pill);
  font-size: 1.2rem;
  cursor: pointer;
  transition: 0.3s;
}

.suggestion-btn:hover {
  background: #2167dd;
  color: var(--white);
}

/* 5. Typing indicator - Cập nhật để không chiếm chỗ khi ẩn */
.chatbot__typing {
  padding: 0 20px;
  display: flex;
  gap: 4px;
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease;
}

/* Khi đang typing thì mới hiện */
.chatbot__typing.is-active {
  height: 20px;
  margin-bottom: 10px;
}
.chatbot__typing span {
  width: 6px;
  height: 6px;
  background: #cbd5e1;
  border-radius: var(--border-radius-circle);
  animation: typing 1.4s infinite;
}
.chatbot__typing span:nth-child(2) {
  animation-delay: 0.2s;
}
.chatbot__typing span:nth-child(3) {
  animation-delay: 0.4s;
}

#js-chat-messages.chatbot-drag-over {
  background-color: #f0f7ff !important;
  border: 2px dashed #2167dd !important;
  position: relative;
}

/* Hình ảnh trong khung chat (Frontend) */
.chat-img-preview {
  max-width: 100px !important;
  max-height: 100px !important;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  display: block;
  margin-top: 5px;
  transition: transform 0.2s;
}

.chat-img-preview:hover {
  transform: scale(1.02);
}

.chat-file--img {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

@keyframes typing {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

/* 6. Footer & Input */
.chatbot__footer {
  padding: 12px 15px;
  background: var(--white);
  border-top: 1px solid var(--blue-100);
  display: flex;
  gap: 8px;
  align-items: center;
}

.chatbot__input {
  flex: 1;
  border: 1px solid #e2e8f0;
  padding: 10px 18px;
  border-radius: 25px;
  outline: none;
  font-size: 1.4rem;
  min-width: 0;
}

.chatbot__btn-action {
  width: 36px;
  height: 36px;
  border-radius: var(--border-radius-circle);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

/* Nút Send (Màu xanh) */
.chatbot__send {
  background: #2167dd;
  color: var(--white);
}
.chatbot__send:hover {
  background: #1a56bb;
}

/* Nút Upload (Màu xám nhạt) */
.chatbot__upload {
  background: var(--blue-100);
  color: var(--gray-600);
}
.chatbot__upload:hover {
  background: #e2e8f0;
  color: #334155;
}

/* 7. Trigger Button */
.chatbot__trigger {
  width: 55px;
  height: 55px;
  background: #2167dd;
  border-radius: var(--border-radius-circle);
  border: none;
  color: var(--white);
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(33, 103, 221, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: 0.3s;
  line-height: 0;
}

.chatbot__trigger:hover {
  transform: scale(1.1);
}

.chatbot__dot {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 12px;
  height: 12px;
  background: #ef4444;
  border: 2px solid var(--white);
  border-radius: var(--border-radius-circle);
  animation: bounce 1.5s infinite;
}

@keyframes bounce {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
}

/* Custom Scrollbar */
.chatbot__body::-webkit-scrollbar {
  width: 4px;
}
.chatbot__body::-webkit-scrollbar-thumb {
  background: #e2e8f0;
  border-radius: var(--border-radius-md);
}
/* END CHATBOT UI */

.equal {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
}

@media (max-width: 990px) {
  .desktop-menu {
    margin-top: 10px;
    min-height: 30px;
  }

  .desktop-menu .navbar-right {
    float: right;
    margin: 0;
  }

  .cart-product img {
    max-width: 150px;
  }

  main aside .inner-aside {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    background-color: var(--white);
    width: 100%;
  }
}

label.error {
  color: var(--red-800);
  font-size: 1.4rem;
  font-weight: normal;
}

/*END*/
@media (min-width: 1200px) {
  .container {
    width: 1200px;
    padding: 0;
  }
}

@media screen and (max-width: 900px) {
  .carousel_library img {
    width: calc(100% / 2);
  }
}

@media (min-width: 768px) {
  .col-sm-3 {
    width: 25%;
  }
  .col-sm-9 {
    width: 75%;
  }
}

@media screen and (max-width: 550px) {
  .carousel_library img {
    width: 100%;
  }
}

/*  CHATBOT UI (Giao diện Chatbot) */
/* ==========================================================================
   TOTAL OPTIMIZED CSS: CREATIVE STUDIO ACCOUNT INTERFACE
   ========================================================================== */

/* --- 1. KHÔNG GIAN NỀN: STUDIO SÁNG TẠO ĐỔI MÀU REALTIME --- */
.cs-premium-wrapper {
  --mouse-x: 50%;
  --mouse-y: 50%;
  position: relative;
  width: 100%;
  min-height: 90vh;
  /* Điểm sáng tỏa Neon đuổi theo chuột */
  background: radial-gradient(
    circle at var(--mouse-x) var(--mouse-y),
    var(--white) 0%,
    #edf5ff 35%,
    #e2ecf8 100%
  );
  overflow: hidden;
  z-index: 1;
  transition: background 0.1s ease-out;
}

/* Lưới Blueprint kỹ thuật chạy dưới đáy không gian */
.cs-bg-grid {
  position: absolute;
  bottom: -15%;
  left: -50%;
  width: 200%;
  height: 80%;
  background-image:
    linear-gradient(rgba(33, 103, 221, 0.04) 1.5px, transparent 1.5px),
    linear-gradient(90deg, rgba(33, 103, 221, 0.04) 1.5px, transparent 1.5px);
  background-size: 60px 60px;
  transform: perspective(600px) rotateX(65deg);
  z-index: 2;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 75%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 75%);
  animation: blueprintGridMove 18s linear infinite;
  pointer-events: none;
}

/* Khung lưới phân bổ (Sidebar + Main Content) */
.account-grid {
  display: grid;
  grid-template-columns: 290px 1fr;
  gap: 30px;
  align-items: start;
}

/* --- 2. CÁC PHẦN TỬ ĐỒ HỌA BAY LƠ LỬNG (CREATIVE FLOATING ITEMS) --- */
.cs-floating-item {
  position: absolute;
  z-index: 5;
  will-change: transform;
  transition: transform 0.15s cubic-bezier(0.25, 1, 0.5, 1);
  pointer-events: auto;
}

/* Cánh trái: Khung điểm neo vector */
.cs-float-left {
  top: 20%;
  left: 4%;
}
.cs-transform-box {
  width: 160px;
  height: 160px;
  border: 1.5px dashed rgba(37, 99, 235, 0.4);
  border-radius: 8px;
  position: relative;
  background-color: rgba(255, 255, 255, 0.7);
  background-image: radial-gradient(
    rgba(37, 99, 235, 0.1) 1px,
    transparent 1px
  );
  background-size: 12px 12px;
  backdrop-filter: blur(6px);
  transform: rotate(-6deg);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
  animation: basicFloatSmooth 5s ease-in-out infinite alternate;
}
.cs-box-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cs-box-content div {
  width: 40px;
  height: 40px;
  color: #2563eb;
  filter: drop-shadow(0 4px 6px rgba(37, 99, 235, 0.2));
}

/* Điểm neo (Handles) của bounding box thiết kế */
.handle {
  width: 10px;
  height: 10px;
  background: var(--white);
  border: 2px solid #2563eb;
  border-radius: 50%;
  position: absolute;
  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.3);
}
.h-tl {
  top: -5px;
  left: -5px;
}
.h-tr {
  top: -5px;
  right: -5px;
}
.h-bl {
  bottom: -5px;
  left: -5px;
}
.h-br {
  bottom: -5px;
  right: -5px;
}
.h-mt {
  top: -5px;
  left: calc(50% - 5px);
}
.h-mb {
  bottom: -5px;
  left: calc(50% - 5px);
}

/* Cánh phải: Dải thẻ màu CMYK/RGB xòe bài */
.cs-float-right {
  top: 18%;
  right: 4%;
}
.cs-card-stack {
  position: relative;
  width: 150px;
  height: 200px;
  animation: basicFloatSmooth 5.5s ease-in-out infinite alternate-reverse;
}
.cs-card {
  position: absolute;
  width: 120px;
  height: 160px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: 1px solid rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
}
.cs-card div {
  width: 32px;
  height: 32px;
  color: rgba(255, 255, 255, 0.9);
}

.card-back {
  top: -10px;
  right: -20px;
  transform: rotate(18deg) scale(0.88);
  background: linear-gradient(135deg, #cbd5e1 0%, #2563eb 100%);
  z-index: 1;
}
.card-middle {
  top: 5px;
  right: -5px;
  transform: rotate(8deg) scale(0.92);
  background: linear-gradient(135deg, #93c5fd 0%, #1d4ed8 100%);
  z-index: 2;
}
.card-front {
  top: 20px;
  right: 10px;
  transform: rotate(-4deg);
  z-index: 3;
  background: rgba(255, 255, 255, 0.95);
  border: 1.5px solid var(--white);
  box-shadow: -5px 10px 30px rgba(15, 23, 42, 0.06);
}
.card-front div {
  color: #2563eb;
  filter: drop-shadow(0 3px 6px rgba(37, 99, 235, 0.25));
}
.card-front span {
  font-weight: 800;
  color: #1e293b;
  font-size: 1.3rem;
  letter-spacing: -0.5px;
}

/* Tương tác xòe dải màu khi Hover */
.cs-card-stack:hover .card-back {
  transform: rotate(26deg) translate(20px, -15px) scale(0.92);
}
.cs-card-stack:hover .card-middle {
  transform: rotate(14deg) translate(15px, -8px) scale(0.96);
}
.cs-card-stack:hover .card-front {
  transform: rotate(0deg) translate(-5px, -5px) scale(1.03);
}

/* --- 3. KHỐI CARD HIỂN THỊ THÔNG TIN CHÍNH (BẢO VỆ CLASS HỆ THỐNG) --- */
.account-card {
  background: var(--white, var(--white));
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(148, 163, 184, 0.03);
  border: 1px solid #e2e8f0;
  overflow: hidden;
  margin-bottom: 60px;
}
.account-card__header {
  background: var(--white, var(--white));
  padding: 25px 40px;
  border-bottom: 1px solid #edf2f7;
  display: flex;
  align-items: center;
  gap: 20px;
}
.header-icon {
  width: 52px;
  height: 52px;
  background: rgba(59, 130, 246, 0.08);
  color: var(--brand-color-1);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.header-text h2 {
  font-size: 2rem;
  font-weight: 800;
  color: #1e293b;
  margin: 0;
}
.header-text p {
  font-size: 1.4rem;
  color: var(--gray-600);
  margin: 2px 0 0;
}

.account-form {
  padding: 40px;
}
.form-section {
  margin-bottom: 35px;
}
.section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0 0 20px 0;
}

.section-title div {
  width: 18px;
  color: var(--brand-color-1);
}
.section-note {
  font-size: 1.3rem;
  color: var(--gray-500);
  margin: -12px 0 20px 0;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.form-group {
  margin-bottom: 20px;
}
.form-group label {
  display: block;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--gray-700);
  margin-bottom: 8px;
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.input-wrapper input {
  width: 100%;
  padding: 12px 15px 12px 42px;
  border-radius: 8px;
  border: 1.5px solid #e2e8f0;
  font-size: 1.45rem;
  color: #1e293b;
  background-color: var(--white);
  transition: all 0.25s ease;
  outline: none;
}
.input-wrapper input:focus {
  border-color: var(--brand-color-1);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08);
}
.input-icon {
  position: absolute;
  left: 15px;
  width: 16px;
  height: 16px;
  color: #94a3b8;
  z-index: 10;
  pointer-events: none;
}

.js-toggle-password {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.js-toggle-password:hover {
  color: #3b82f6;
}

.js-toggle-password:active {
  transform: translateY(-50%) scale(0.9);
}

.js-toggle-password div,
.js-toggle-password svg {
  width: 18px;
  height: 18px;
  display: block;
  pointer-events: none;
}

.btn-update-account {
  background: var(--brand-color-1);
  color: var(--white);
  border: none;
  padding: 14px 30px;
  border-radius: 8px;
  font-size: 1.45rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.25s ease;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.25);
}
.btn-update-account:hover {
  transform: translateY(-2px);
  box-shadow:
    0 6px 20px rgba(59, 130, 246, 0.35),
    0 0 12px rgba(59, 130, 246, 0.5);
}

/* --- 4. 3 THẺ MINI CARD DASHBOARD PHÍA TRÊN --- */
.account-dashboard-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 25px;
}
.account-mini-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  box-shadow: 0 4px 20px rgba(148, 163, 184, 0.01);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}
.account-mini-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(148, 163, 184, 0.05);
}
.mini-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.account-mini-card:nth-child(1) .mini-card-icon {
  background: rgba(59, 130, 246, 0.08);
  color: var(--brand-color-1);
}
.account-mini-card:nth-child(2) .mini-card-icon {
  background: rgba(16, 185, 129, 0.08);
  color: #10b981;
}
.account-mini-card:nth-child(3) .mini-card-icon {
  background: rgba(245, 158, 11, 0.08);
  color: #f59e0b;
}
.mini-card-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}
.mini-card-label {
  font-size: 1.3rem;
  color: var(--gray-600);
  font-weight: 500;
}
.mini-card-value {
  font-size: 1.4rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}
/* ==========================================================================
   ISOLATED COMPONENT: MODERN ACCOUNT SIDEBAR INTERFACE
   ========================================================================== */

.account-sidebar__inner {
  background: var(--white);
  border-radius: 16px;
  padding: 0 0 15px 0;
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 40px rgba(148, 163, 184, 0.05);
  overflow: hidden;
  margin-bottom: 60px;
}

/* Khối Avatar sơ lược người dùng */
.user-brief {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 25px 25px;
  margin-bottom: 15px;
  background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
  background-size: cover;
  background-position: center;
}

.user-brief::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(15, 23, 42, 0.2) 0%,
    rgba(15, 23, 42, 0.6) 100%
  );
  z-index: 1;
}

.avatar-upload-form,
.user-brief__info {
  position: relative;
  z-index: 2;
}

.user-brief__avatar {
  width: 90px;
  height: 90px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: #f1f5f9;
  border: 3px solid rgba(255, 255, 255, 0.9); /* Viền trắng dày làm nổi bật avatar trên nền tối */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  transition:
    transform 0.3s ease,
    border-color 0.3s ease;
}

.user-brief__avatar:hover {
  transform: scale(1.05);
  border-color: var(--white);
}

.user-brief__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Chữ cái thay thế nếu không có Avatar */
.avatar-placeholder {
  font-size: 3.2rem;
  font-weight: 800;
  color: var(--brand-color-1);
  user-select: none;
}

/* Typography (Chữ) trên nền ảnh bìa */
.user-brief__info {
  text-align: center;
}

.user-brief__info .user-name {
  font-size: 1.9rem;
  font-weight: 800;
  margin: 0 0 4px 0;
  color: var(--white); /* Đổi tên sang màu trắng */
  letter-spacing: 0.3px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.user-brief__info .greeting {
  font-size: 1.25rem;
  color: #cbd5e1; /* Đổi text phụ sang màu xám sáng */
  font-weight: 500;
}

/* HIỆU ỨNG HOVER CAMERA */
.avatar-hover-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.65);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--white);
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: 10;
}

.user-brief__avatar:hover .avatar-hover-overlay {
  opacity: 1;
}
.avatar-hover-overlay div {
  width: 24px;
  height: 24px;
  margin-bottom: 2px;
}
.avatar-hover-overlay span {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.account-nav {
  margin-top: 30px;
}
/* Tiêu đề nhóm phân vùng Menu chức năng lẻ */
.sidebar-group-title {
  font-size: 1.5rem;
  text-transform: uppercase;
  color: var(--blue-400);
  letter-spacing: 0.6px;
  padding: 0 25px 10px;
  margin: 18px 0 0 0;
  font-weight: 700;
  user-select: none;
}
.sidebar-menu-group:first-child .sidebar-group-title {
  margin-top: 0;
}

/* Danh sách liên kết điều hướng */
.account-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.account-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 25px !important;
  color: var(--gray-700);
  font-weight: 600;
  font-size: 1.5rem;
  transition: all 0.25s ease;
  position: relative;
}

.link-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.link-left div {
  width: 16px;
  height: 16px;
}

.account-menu__item {
  margin-bottom: 10px;
}

/* Trạng thái kích hoạt và Hover chuột */
.account-menu__item.active .account-menu__link,
.account-menu__link:hover {
  background: rgba(59, 130, 246, 0.1);
  color: var(--brand-color-1);
}
.account-menu__item.active .link-left div {
  color: var(--brand-color-1);
}

/* Thanh LED Chỉ báo cạnh phải đồ họa */
.active-indicator {
  width: 4px;
  height: 0;
  background: var(--brand-color-1);
  border-radius: 4px 0 0 4px;
  transition: all 0.25s ease;
  position: absolute;
  right: 0;
}
.account-menu__item.active .active-indicator {
  height: 60%;
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.6);
}

/* Đường phân dòng thắt chặt chân Đăng xuất */
.nav-divider {
  height: 1px;
  background: #f1f5f9;
  margin: 10px 25px !important;
}
.account-menu__item.logout .account-menu__link:hover {
  color: var(--red-800);
  background: rgba(239, 68, 68, 0.1);
}

/* --- 6. KEYFRAMES HOẠT ẢNH NỀN TĨNH --- */
@keyframes blueprintGridMove {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 60px 120px;
  }
}
@keyframes neonAuraFloat {
  0% {
    transform: translateY(0);
    opacity: 0.7;
  }
  100% {
    transform: translateY(-20px);
    opacity: 1;
  }
}
@keyframes basicFloatSmooth {
  0% {
    transform: translateY(0px) rotate(-6deg);
  }
  100% {
    transform: translateY(-12px) rotate(-3deg);
  }
}

@media (max-width: 1200px) {
  .cs-floating-item {
    display: none;
  }
}
@media (max-width: 992px) {
  .account-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}
/* END ACTION */

/* ===============================================
   MODERN ORDER LIST & LED STATUS
   =============================================== */
.order-page {
  background: var(--white);
  padding: 40px 0 80px;
}

.header-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 5px;
}
.header-title i {
  color: var(--brand-color-1);
  width: 28px;
  height: 28px;
}
.header-title h2 {
  font-size: 2.4rem;
  font-weight: 800;
  color: #1e293b;
  margin: 0;
}
.header-subtitle {
  color: var(--gray-600);
  font-size: 1.4rem;
  margin: 0;
}

.order-list {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

/* Thẻ đơn hàng */
.order-card {
  background: var(--white);
  border-radius: var(--border-radius-xl);
  border: 1px solid #e2e8f0;
  overflow: hidden;
  transition: 0.3s;
}
.order-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.order-card__header {
  background: #fcfdfe;
  padding: 15px 30px;
  border-bottom: 1px solid var(--blue-100);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.order-info {
  display: flex;
  gap: 20px;
  font-size: 1.4rem;
}
.order-id {
  color: #1e293b;
}
.order-date {
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 6px;
}
.order-date i {
  width: 14px;
}

.btn-view-detail {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--brand-color-1);
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Sản phẩm trong đơn hàng */
.order-card__body {
  padding: 10px 30px;
}
.order-product-row {
  display: flex;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px dashed var(--blue-100);
}
.order-product-row:last-child {
  border-bottom: none;
}

.product-img {
  width: 70px;
  height: 70px;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  border: 1px solid var(--blue-100);
  flex-shrink: 0;
}
.product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-info {
  flex: 1;
  padding: 0 20px;
}
.product-name {
  display: block;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 5px;
  font-size: 1.5rem;
}
.product-qty {
  font-size: 1.3rem;
  color: var(--gray-600);
}

/* Cột trạng thái và LED */
.product-status-col {
  text-align: right;
  min-width: 180px;
}
.delivery-note {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  font-size: 1.2rem;
  color: #94a3b8;
  margin-top: 8px;
}
.delivery-note i {
  width: 14px;
}

/* BASE STATUS BADGE */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 1.3rem;
  font-weight: 700;
}

.led-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--border-radius-circle);
  position: relative;
}

/* CÁC LOẠI ĐÈN LED */

/* 1. Đang giao (Xanh dương) */
.status-shipping {
  background: var(--blue-100);
  color: var(--brand-color-1);
}
.status-shipping .led-dot {
  background: var(--brand-color-1);
  animation: led-pulse-blue 2s infinite;
}
@keyframes led-pulse-blue {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(37, 99, 235, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
  }
}

/* 2. Hoàn thành (Xanh lá) */
.status-completed {
  background: #f0fdf4;
  color: #16a34a;
}
.status-completed .led-dot {
  background: #16a34a;
  box-shadow: 0 0 8px #16a34a;
}

/* 3. Chờ xử lý (Vàng/Cam) */
.status-pending {
  background: var(--white) beb;
  color: #d97706;
}
.status-pending .led-dot {
  background: #d97706;
  animation: led-blink 1s infinite alternate;
}
@keyframes led-blink {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0.4;
    transform: scale(0.8);
  }
}

.status-cancelled {
  background: #fef2f2;
  color: #dc2626;
}
.status-cancelled .led-dot {
  background: #dc2626;
}

/* Responsive */
@media (max-width: 768px) {
  .order-product-row {
    flex-wrap: wrap;
    gap: 15px;
  }
  .product-status-col {
    text-align: left;
    width: 100%;
    min-width: unset;
  }
  .delivery-note {
    justify-content: flex-start;
  }
}
/* END MODERN ORDER LIST & LED STATUS */

/* ===============================================
   ORDER DETAIL & LED TIMELINE
   =============================================== */
.order-detail-page {
  background: var(--white);
  padding: 40px 0 80px;
}

.order-detail-card {
  background: var(--white);
  border-radius: var(--border-radius-2xl);
  border: 1px solid #e2e8f0;
  padding: 30px;
  margin-bottom: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
}

/* Header */
.card-header-flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 40px;
}
.card-header-flex h1 {
  font-size: 2.4rem;
  font-weight: 900;
  color: #1e293b;
  margin: 0 0 5px;
}
.order-time {
  color: #94a3b8;
  font-size: 1.4rem;
}
.btn-back {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--gray-600);
}

/* TIMELINE LED SYSTEM */
.order-timeline-container {
  padding: 20px 0 40px;
}
.timeline-steps {
  display: flex;
  justify-content: space-between;
  position: relative;
}

.step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
}

.step-icon {
  width: 50px;
  height: 50px;
  background: var(--blue-100);
  color: var(--gray-600);
  border-radius: var(--border-radius-circle);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  transition: 0.4s;
}

.cancelled .step-icon{
  color: var(--red-600);

}

/* Thanh nối (LED Bar) */
.led-bar {
  position: absolute;
  top: 25px;
  left: 50%;
  width: 100%;
  height: 4px;
  background: var(--blue-100);
  z-index: -1;
}

/* TRẠNG THÁI COMPLETED */
.step.completed .step-icon {
  background: var(--brand-color-1);
  color: var(--white);
}
.step.completed .step-label {
  color: #1e293b;
}
.step.completed .led-bar {
  background: var(--brand-color-1);
}

/* HIỆU ỨNG LED ĐANG CHẠY (CURRENT STEP) */
.step.current .step-icon {
  background: var(--brand-color-1);
  color: var(--white);
  box-shadow: 0 0 0 6px rgba(var(--brand-color-1-rgb), 0.15);
  animation: led-pulse-active 1.5s infinite;
}

.step.current .led-bar {
  background: linear-gradient(
    90deg,
    var(--brand-color-1) 0%,
    var(--blue-100) 100%
  );
  overflow: hidden;
}

/* Hiệu ứng LED chạy dọc thanh bar */
.step.current .led-bar::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.8),
    transparent
  );
  animation: led-running 2s infinite;
}

@keyframes led-running {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

@keyframes led-pulse-active {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--brand-color-1-rgb), 0.6);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(var(--brand-color-1-rgb), 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(var(--brand-color-1-rgb), 0);
  }
}

/* Nút Hủy Đơn Hàng */
.btn-cancel-order {
  background: var(--white);
  color: #ef4444; /* Màu đỏ warning */
  border: 1.5px solid #fee2e2;
  padding: 10px 20px;
  border-radius: var(--border-radius-lg);
  font-size: 1.4rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 15px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  text-decoration: none;
}

.btn-cancel-order:hover {
  background: #fef2f2;
  border-color: #ef4444;
  color: #b91c1c;
  transform: translateY(-2px);
  /* Hiệu ứng LED Đỏ tỏa sáng */
  box-shadow:
    0 5px 15px rgba(239, 68, 68, 0.1),
    0 0 10px rgba(239, 68, 68, 0.2);
}

.btn-cancel-order i {
  width: 16px;
  height: 16px;
}

/* Header-right flex adjustment */
.header-right {
  display: flex;
  align-items: center;
}

/* 2 Column Details */
.detail-columns {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 30px;
}
.card-title {
  font-size: 1.8rem;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 25px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.card-title i {
  color: var(--brand-color-1);
  width: 20px;
}

/* Product Item */
.product-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px 0;
  border-bottom: 1px solid var(--blue-100);
}
.product-item img {
  width: 60px;
  height: 60px;
  border-radius: var(--border-radius-lg);
  object-fit: cover;
}
.p-info {
  flex: 1;
}
.p-name {
  display: block;
  font-weight: 700;
  color: #1e293b;
  font-size: 1.4rem;
  margin-bottom: 4px;
}
.p-meta {
  font-size: 1.3rem;
  color: var(--gray-600);
}
.p-price {
  font-weight: 800;
  color: #1e293b;
}

.order-summary {
  margin-top: 25px;
  background: #fcfdfe;
  padding: 20px;
  border-radius: var(--border-radius-xl);
}
.summary-line {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 1.4rem;
  color: var(--gray-600);
}
.summary-line.total {
  border-top: 1px solid #e2e8f0;
  padding-top: 15px;
  margin-top: 10px;
  font-weight: 800;
  color: #1e293b;
  font-size: 1.8rem;
}
.total-amount {
  color: var(--brand-color-1);
}

/* Shipping Info */
.info-group {
  margin-bottom: 20px;
}
.info-group label {
  display: block;
  font-size: 1.2rem;
  font-weight: 800;
  color: #94a3b8;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.info-group p {
  font-size: 1.5rem;
  color: #1e293b;
  line-height: 1.6;
  margin: 0;
}
.payment-method {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--brand-color-1);
  font-weight: 700;
  font-size: 1.4rem;
  margin-top: 5px;
}

@media (max-width: 992px) {
  .detail-columns {
    grid-template-columns: 1fr;
  }
  .timeline-steps {
    flex-direction: column;
    gap: 30px;
    align-items: flex-start;
    padding-left: 20px;
  }
  .led-bar {
    width: 4px;
    height: 100%;
    left: 23px;
    top: 50px;
  }
  .step {
    align-items: flex-start;
    flex-direction: row;
    gap: 20px;
  }
}
/* END ORDER DETAIL & LED TIMELINE */

/* ===============================================
   SHIPPING ADDRESS INTERFACE
   =============================================== */
.shipping-page {
  background-color: #f0f4f8;
  padding: 40px 0 80px;
}

.shipping-form {
  padding: 30px 40px;
}

/* Tối ưu các ô nhập trong layout/address.php nếu bạn dùng chung class */
.shipping-form .form-group {
  margin-bottom: 25px;
}

.shipping-form label {
  display: block;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--gray-600);
  margin-bottom: 10px;
}

/* Làm đẹp ô Select (Tỉnh/Thành) */
.shipping-form select,
.shipping-form input[type="text"],
.shipping-form input[type="tel"] {
  width: 100%;
  padding: 12px 15px;
  border-radius: var(--border-radius-lg);
  border: 1.5px solid #e2e8f0;
  font-size: 1.5rem;
  color: #1e293b;
  background-color: var(--white);
  transition: all 0.3s ease;
  outline: none;
  appearance: none; /* Bỏ icon mặc định của trình duyệt */
}

/* Thêm icon mũi tên cho ô select bằng background-image nếu cần */
.shipping-form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 18px;
  padding-right: 45px;
}

.shipping-form select:focus,
.shipping-form input:focus {
  border-color: var(--brand-color-1);
  box-shadow: 0 0 0 4px rgba(var(--brand-color-1-rgb), 0.1);
}

/* Nút cập nhật chuyên nghiệp */
.form-actions-footer {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid var(--blue-100);
  display: flex;
  justify-content: flex-end;
}

.btn-update-shipping {
  background: var(--brand-color-1);
  color: var(--white);
  border: none;
  padding: 14px 40px;
  border-radius: var(--border-radius-lg);
  font-size: 1.5rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s;
  box-shadow: 0 4px 15px rgba(var(--brand-color-1-rgb), 0.2);
}

.btn-update-shipping:hover {
  transform: translateY(-2px);
  box-shadow:
    0 8px 25px rgba(var(--brand-color-1-rgb), 0.3),
    0 0 15px rgba(var(--brand-color-1-rgb), 0.5); /* LED Glow xanh */
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .shipping-form {
    padding: 20px;
  }
  .btn-update-shipping {
    width: 100%;
    justify-content: center;
  }
}

/* Layout cho Address Form */
.address-form-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* Chia hàng linh hoạt */
.form-row.flex-row {
  display: flex;
  gap: 20px;
}

.form-row.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.flex-1 {
  flex: 1;
}

/* Responsive cho Mobile */
@media (max-width: 768px) {
  .form-row.flex-row,
  .form-row.grid-3 {
    grid-template-columns: 1fr;
    flex-direction: column;
    gap: 15px;
  }
}

/* Hiệu ứng ô chọn Select (giống phong cách LED bạn đã làm) */
.address-form-container select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
}

.shipping-form input[type="text"],
.shipping-form input[type="tel"],
.address-form-container select {
  padding-left: 45px !important;
}

.address-form-container label {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--gray-600);
  margin-bottom: 8px;
  display: block;
}

/* END SHIPPING ADDRESS INTERFACE */

/* ===============================================
   MINI CART DROPDOWN (POPUP GIỎ HÀNG TRÊN HEADER)
   =============================================== */
.cart-dropdown__header {
  font-size: 1.4rem;
  margin-left: 14px;
  color: var(--gray-600);
}
.cart-dropdown__empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--gray-400);
}

.cart-dropdown__empty-icon {
  font-size: 3rem;
  margin-bottom: 10px;
  opacity: 0.7;
}

.cart-dropdown__empty p {
  font-size: 1.4rem;
  margin: 0;
}

/* Thân của Dropdown chứa danh sách sản phẩm */
.cart-dropdown__body {
  max-height: 360px;
  overflow-y: auto;
  padding: 5px 16px;
}

/* Tối ưu thanh cuộn (Scrollbar) cho mượt và đẹp hơn */
.cart-dropdown__body::-webkit-scrollbar {
  width: 5px;
}
.cart-dropdown__body::-webkit-scrollbar-track {
  background: transparent;
}
.cart-dropdown__body::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: var(--border-radius-md);
}
.cart-dropdown__body::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Từng item sản phẩm */
.cart-dropdown__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--blue-100);
  transition: background-color 0.2s ease;
}

.cart-dropdown__item:last-child {
  border-bottom: none;
}

/* Wrapper của ảnh để tránh méo hoặc sai tỷ lệ */
.cart-dropdown__img-wrapper {
  width: 60px;
  height: 60px;
  border-radius: var(--border-radius-md);
  overflow: hidden;
  flex-shrink: 0;
  background-color: var(--white);
  border: 1px solid #e2e8f0;
}

.cart-dropdown__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.cart-dropdown__item:hover .cart-dropdown__img {
  transform: scale(1.05);
}

/* Thông tin text */
.cart-dropdown__info {
  flex: 1;
  min-width: 0;
}

.cart-dropdown__name {
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--gray-700);
  margin: 0 0 10px 5px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s ease;
}

.cart-dropdown__name:hover {
  color: var(--brand-color-1, #2167dd);
}

/* Khu vực hiển thị giá & số lượng */
.cart-dropdown__meta {
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
}

.cart-dropdown__price {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--brand-color-1);
  margin: 0 5px;
}

.cart-dropdown__multiply {
  margin: 0 5px;
}

.cart-dropdown__qty,
.cart-dropdown__multiply {
  font-size: 1.5rem;
  color: var(--gray-600);
  font-weight: 600;
}

.cart-dropdown__delete-btn {
  flex-shrink: 0;
  background: var(--gray-100);
  border: none;
  color: var(--gray-600);
  width: 32px;
  height: 32px;
  border-radius: var(--border-radius-circle);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cart-dropdown__delete-btn svg,
.cart-dropdown__delete-btn div {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-dropdown__delete-btn:hover {
  background: var(--red-300);
  color: var(--red-700);
  transform: rotate(15deg);
}

/* Footer & Button hành động chính */
.cart-dropdown__footer {
  padding: 16px;
  border-top: 1px solid var(--blue-100);
  background: var(--white);
}

.btn-dd-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 20px;
  background: var(--brand-color-1);
  color: var(--white) !important;
  font-size: 1.4rem;
  font-weight: 700;
  border-radius: var(--border-radius-pill);
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(33, 103, 221, 0.15);
  transition: all 0.25s ease;
}

.btn-dd-action:hover {
  background: #1952b3;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(33, 103, 221, 0.25);
}
/* END MINI CART DROPDOWN */
/* ==========================================================================
   CHECKOUT PROGRESS STEPS NAV
   ========================================================================== */
.checkout-steps-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
  background: var(--white);
  padding: 12px 20px;
  border-radius: var(--border-radius-xl);
  border: 1px solid #e2e8f0;
}

.step-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0.5;
  transition: all 0.3s ease;
}

.step-nav-item.active {
  opacity: 1;
}

.step-nav-item.active .step-num {
  background: var(--brand-color-1);
  color: var(--white);
  box-shadow: 0 0 0 4px rgba(33, 103, 221, 0.15);
}

.step-nav-item.active .step-lbl {
  color: var(--gray-900);
  font-weight: 700;
}

.step-num {
  width: 28px;
  height: 28px;
  background: #cbd5e1;
  color: var(--gray-600);
  border-radius: var(--border-radius-circle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 700;
  transition: all 0.3s ease;
}

.step-lbl {
  font-size: 1.35rem;
  color: var(--gray-600);
  font-weight: 500;
}

.step-nav-line {
  flex: 1;
  height: 2px;
  background: #e2e8f0;
  margin: 0 10px;
}

/* Hiệu ứng ẩn/hiện bước nội dung mượt mà */
.checkout-step-content {
  display: none;
  animation: stepFadeIn 0.4s ease forwards;
}

.checkout-step-content.active {
  display: block;
}

@keyframes stepFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.step-content-title {
  font-size: 2rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 5px;
}

.step-content-desc {
  font-size: 1.4rem;
  color: var(--gray-600);
  margin-bottom: 20px;
}

/* Grid cấu hình file */
.file-option-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-bottom: 20px;
}

.upload-file-zone {
  margin-top: 15px;
  width: 100%;
}
/* Hàng sản phẩm tại Bước 2 */
.checkout-cart-items-list {
  max-height: 320px;
  overflow-y: auto;
  padding-right: 8px;
}

.checkout-cart-row {
  display: flex;
  align-items: center; /* Căn giữa theo chiều dọc */
  justify-content: space-between;
  gap: 15px;
  padding: 15px 0;
  border-bottom: 1px dashed #e2e8f0;
}

.cart-row-img-wrap {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  overflow: hidden;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
}

.checkout-modal-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Đảm bảo ảnh không bị méo */
}

.cart-row-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.cart-row-name {
  font-size: 1.45rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hiển thị chi tiết (Kích thước, chất liệu...) */
.cart-row-variant {
  font-size: 1.25rem;
  color: var(--gray-600);
  line-height: 1.5;
  margin-top: 2px;
}

/* Khối Đơn giá + Đơn vị tính */
.cart-row-meta {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.cart-row-price-wrap {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.cart-row-price {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--brand-color-1, #2167dd);
}

.cart-row-unit {
  font-size: 1.25rem;
  color: #94a3b8;
}
/* Khối hóa đơn mở rộng */
.invoice-toggle-box {
  margin: 20px 0 10px;
}

.invoice-expanded-fields {
  background: var(--white);
  padding: 20px;
  border-radius: var(--border-radius-xl);
  border: 1px solid #e2e8f0;
  margin-top: 10px;
  animation: stepFadeIn 0.3s ease forwards;
}

/* Kiểu dòng chọn thanh toán */
.payment-methods-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.payment-method-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border: 1px solid #e2e8f0;
  border-radius: var(--border-radius-xl);
  cursor: pointer;
  transition: all 0.25s ease;
  margin-bottom: 8px;
}

.payment-method-row:hover {
  border-color: var(--brand-color-1);
  background: #f8faff;
}

.payment-method-row input[type="radio"] {
  display: none;
}

.custom-radio-ui {
  width: 20px;
  height: 20px;
  border: 2px solid #cbd5e1;
  border-radius: var(--border-radius-circle);
  display: block;
  margin-top: 2px;
  flex-shrink: 0;
  position: relative;
  transition: all 0.2s ease;
}

.payment-method-row input[type="radio"]:checked + .custom-radio-ui {
  border-color: var(--brand-color-1);
  background: var(--brand-color-1);
}

.payment-method-row input[type="radio"]:checked + .custom-radio-ui::after {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--white);
  border-radius: var(--border-radius-circle);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.payment-method-text strong {
  font-size: 1.45rem;
  color: #1e293b;
  display: block;
  margin-bottom: 4px;
}

.payment-method-text p {
  font-size: 1.3rem;
  color: var(--gray-600);
  margin: 0;
}

/* Định tuyến chân Modal điều hướng điều hướng */
.checkout-actions-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #f1f5f9;
}

.btn-checkout-nav {
  padding: 12px 30px;
  font-size: 1.45rem;
  font-weight: 700;
  border-radius: var(--border-radius-pill);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-checkout-nav.prev {
  background: #cbd5e1;
  color: var(--gray-600);
}

.btn-checkout-nav.prev:hover {
  background: #94a3b8;
}

.btn-checkout-nav.next {
  background: var(--brand-color-1);
  color: var(--white);
}

.btn-checkout-nav.next:hover {
  background: #1952b3;
}

.btn-checkout-nav.submit {
  background: var(--brand-color-3);
  color: var(--white);
}

.btn-checkout-nav.submit:hover {
  background: #03664a;
}

.summary-title {
  font-size: 1.8rem;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 15px;
}

.summary-divider {
  height: 1px;
  background: #e2e8f0;
  margin-bottom: 20px;
}

.summary-calc-box {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.checkout-safety-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 30px;
  font-size: 1.25rem;
  color: var(--gray-600);
  line-height: 1.4;
}

/* Khối bọc cụm sản phẩm + cấu hình thiết kế */
.checkout-cart-item-block {
  border-bottom: 1px dashed #e2e8f0;
  padding: 10px 0;
}
.checkout-cart-item-block .checkout-cart-row {
  border-bottom: none;
  padding: 5px 0;
}

/* Khung cấu hình thiết kế phụ */
.item-design-config-box {
  background: var(--white);
  border-radius: 6px;
  padding: 10px 12px;
  margin-top: 8px;
  border: 1px solid #edf2f7;
}
.design-config-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.design-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.3rem;
  color: #334155;
  cursor: pointer;
  font-weight: 500;
}
.design-badge-price {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--red-800); /* Màu đỏ làm nổi bật chi phí cộng thêm */
}

/* Thanh điều hướng nhập số trang */
.design-pages-input-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #e2e8f0;
}
.pages-label {
  font-size: 1.25rem;
  color: var(--gray-600);
}
.pages-counter {
  display: flex;
  align-items: center;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  height: 26px;
  background: var(--white);
}
.pages-btn {
  background: none;
  border: none;
  width: 24px;
  height: 100%;
  cursor: pointer;
  font-size: 1.4rem;
  color: var(--gray-600);
}
.js-design-pages-input {
  width: 30px;
  height: 100%;
  border: none;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 700;
  color: #1e293b;
}
.design-min-note {
  font-size: 1.15rem;
  color: #94a3b8;
  font-style: italic;
}

/* Khung bọc tùy chọn hình thức thiết kế dạng Select Box cao cấp */
.design-type-selector-wrap {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
}
.design-select-lbl {
  font-size: 1.25rem;
  color: var(--gray-600);
  font-weight: 500;
}
.js-item-design-select {
  padding: 6px 10px;
  font-size: 1.3rem;
  font-weight: 600;
  color: #1e293b;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background-color: var(--white);
  outline: none;
  cursor: pointer;
  min-width: 180px;
  transition: all 0.2s;
}
.js-item-design-select:focus {
  border-color: var(--brand-color-1);
  box-shadow: 0 0 0 2px #eff6ff;
}
/* END CHECKOUT PROGRESS STEPS NAV */

/* ==========================================================================
   UPGRADE STYLE: CHECKOUT FINAL CONFIRMATION MODAL & BANK INFO
   ========================================================================== */
.checkout-payment-confirmation-zone {
  animation: modalFadeInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.bank-transfer-invoice-card {
  background: linear-gradient(135deg, #1e3a8a 0%, #0f172a 100%);
  color: var(--white) fff;
  padding: 25px;
  border-radius: 14px;
  box-shadow: 0 10px 25px rgba(30, 58, 138, 0.15);
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}

.bank-transfer-invoice-card::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -20%;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: rgba(59, 130, 246, 0.1);
  pointer-events: none;
}

.bank-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 12px;
  margin-bottom: 15px;
}

.bank-logo-text {
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #60a5fa;
}
.bank-type-badge {
  background: rgba(255, 255, 255, 0.15);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 1.1rem;
  font-weight: 600;
  text-transform: uppercase;
}

.bank-card-body .bank-line {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}
.bank-card-body .bank-line:last-child {
  margin-bottom: 0;
}
.bank-line label {
  font-size: 1.2rem;
  color: #93c5fd;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  margin: 0;
}
.bank-line span {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--white) fff;
}
.bank-line strong.amount-highlight {
  font-size: 2.2rem;
  color: #facc15;
  font-weight: 800;
}

.checkout-notice-infobox {
  background-color: #f0fdf4;
  border-left: 4px solid #10b981;
  padding: 15px 20px;
  border-radius: 0 12px 12px 0;
  margin-bottom: 15px;
}
.checkout-notice-infobox.cod-style {
  background-color: #fefce8;
  border-left-color: #eab308;
}
.checkout-notice-infobox h4 {
  font-size: 1.45rem;
  font-weight: 700;
  margin: 0 0 6px 0;
  color: #14532d;
}
.checkout-notice-infobox.cod-style h4 {
  color: #713f12;
}
.checkout-notice-infobox p {
  font-size: 1.3rem;
  margin: 0;
  color: #166534;
  line-height: 1.5;
}
.checkout-notice-infobox.cod-style p {
  color: #854d0e;
}

@keyframes modalFadeInUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* END CHECKOUT FINAL CONFIRMATION MODAL & BANK  */

/* --- CUSTOMER PAGES ACCOUNT --- */
.cs-center-content {
    position: relative;
    z-index: 10;
}

.account-card__header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.account-header-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.header-actions-gap {
    display: flex;
    gap: 10px;
}

.btn-cancel-order {
    background: var(--red-800);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-back-history {
    background: var(--gray-600);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: var(--border-radius-pill);
}

.order-timeline-container {
    padding: 30px 40px 10px;
}

.timeline-steps {
    display: flex;
    justify-content: space-between;
    position: relative;
}

.detail-columns-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 25px;
    align-items: start;
}

.card-padding-compact {
    padding: 25px 30px;
}

.margin-bottom-main {
    margin-bottom: 20px;
}

.margin-bottom-large {
    margin-bottom: 25px;
}

.product-item-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
    border-bottom: 1px solid #f1f5f9;
    gap: 15px;
}

.product-item-thumb-box {
    width: 55px;
    height: 55px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    background: var(--white);
    flex-shrink: 0;
}

.product-item-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-item-title-link {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1e293b;
    text-decoration: none;
    display: block;
    margin-bottom: 4px;
}

.product-item-meta-price {
    font-size: 1.25rem;
    color: var(--gray-600);
}

.product-item-design-alert {
    font-size: 1.2rem;
    color: var(--brand-color-3-light);
    margin-top: 2px;
}

.product-item-total-right {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--red-800);
    text-align: right;
}

.order-summary-block {
    margin-top: 20px;
    background: var(--white);
    border-radius: 8px;
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.summary-row-flex {
    display: flex;
    justify-content: space-between;
    font-size: 1.35rem;
    color: var(--gray-600);
}

.summary-row-total {
    display: flex;
    justify-content: space-between;
    font-size: 1.5rem;
    color: #1e293b;
    font-weight: 800;
    border-top: 1px dashed #cbd5e1;
    padding-top: 10px;
    margin-top: 5px;
}

.total-label-dark {
    color: #0f172a;
}

.total-price-highlight {
    color: var(--red-800);
    font-size: 1.8rem;
    font-weight: 700;
}

.shipping-box-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.shipping-info-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.shipping-label-caps {
    font-size: 1.2rem;
    text-transform: uppercase;
    color: var(--gray-600);
    font-weight: 700;
    letter-spacing: 0.5px;
}

.shipping-value-bold {
    font-size: 1.4rem;
    color: #1e293b;
    font-weight: 700;
}

.shipping-value-semi {
    font-size: 1.4rem;
    color: #1e293b;
    font-weight: 600;
}

.shipping-address-text {
    font-size: 1.35rem;
    color: #334155;
    line-height: 1.5;
}

.payment-method-divider {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-top: 1px solid #f1f5f9;
    padding-top: 15px;
}

.payment-method-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 1.35rem;
    color: var(--brand-color-3-light);
    font-weight: 700;
    margin-top: 4px;
}

.form-padding-large {
    padding: 30px 40px;
}

.empty-state-center {
    text-align: center;
    padding: 50px 20px;
}

.empty-state-icon {
    width: 60px;
    height: 60px;
    color: var(--gray-600);
    margin: 0 auto 15px;
}

.empty-state-text {
    font-size: 1.5rem;
    color: var(--gray-600);
    font-weight: 600;
    margin-bottom: 20px;
}

.btn-shopping-now {
    display: inline-flex;
    text-decoration: none;
    width: max-content;
    margin: 0 auto;
}

.product-card-row-layout {
    background: var(--white);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    margin-bottom: 20px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(148, 163, 184, 0.01);
    padding: 15px 25px;
}

.product-card-frequent-padding {
    padding: 20px 25px !important;
}

.card-item-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.card-item-left-info {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
    min-width: 250px;
}

.card-item-frequent-minwidth {
    gap: 20px !important;
    min-width: 280px !important;
}

.product-image-box-standard {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    background: var(--white);
    flex-shrink: 0;
}

.product-image-box-frequent {
    width: 70px !important;
    height: 70px !important;
}

.product-image-fill {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-data-stack {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.product-frequent-gap {
    gap: 5px !important;
}

.product-title-bold-link {
    font-size: 1.45rem;
    font-weight: 700;
    color: #1e293b;
    text-decoration: none;
}

.product-frequent-title-hover {
    font-size: 1.5rem !important;
    transition: color 0.2s;
}

.product-price-start {
    font-size: 1.3rem;
    color: var(--red-800);
    font-weight: 600;
}

.product-price-contact {
    font-size: 1.3rem;
    color: var(--gray-600);
}

.frequent-meta-row {
    display: flex;
    gap: 15px;
    align-items: center;
}

.badge-counter-frequent {
    font-size: 1.3rem;
    color: var(--gray-600);
    background: #f1f5f9;
    padding: 2px 10px;
    border-radius: 20px;
    font-weight: 500;
}

.badge-counter-frequent strong {
    color: #0f172a;
}

.price-last-order {
    font-size: 1.3rem;
    color: var(--gray-600);
}

.price-last-order strong {
    color: var(--red-800);
}

.card-item-right-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
}

.btn-remove-wishlist {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--red-400);
    color: var(--red-800);
    transition: all 0.2s;
    border: 1px solid var(--red-400);
}

.btn-reorder-frequent {
    background-color: var(--brand-color-3-light);
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 1.35rem;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-wishlist-toggle {
    background: var(--red-300);
    border: 1px solid var(--red-400);
    color: var(--red-700);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s ease;
}

.btn-wishlist-toggle:hover {
    background: var(--red-400);
    color: var(--red-700);
    border-color: var(--red-400);
    transform: scale(1.08);
}

.btn-wishlist-toggle.is-active {
    background: var(--red-400);
    color: var(--red-700);
    border-color: var(--red-400);
}
/* END CUSTOMER PAGES ACCOUNT */