/* ═══════════════════════════════════════════════════════════════════════════════
   VIỆT SIN — STATIC THEME CSS
   Design tokens, product card, animations, custom overrides
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── CSS Custom Properties (Design Tokens) ───────────────────────────────────── */
:root {
  --font-size: 18px;
  --background: #ffffff;
  --foreground: #1a1a1a;
  --card: #ffffff;
  --card-foreground: #1a1a1a;
  --popover: #ffffff;
  --popover-foreground: #1a1a1a;
  --primary: #F30104;
  --primary-foreground: #ffffff;
  --secondary: #F5F5F5;
  --secondary-foreground: #1a1a1a;
  --muted: #F0F0F0;
  --muted-foreground: #6B6B6B;
  --accent: #F47B20;
  --accent-foreground: #ffffff;
  --destructive: #F30104;
  --destructive-foreground: #ffffff;
  --border: rgba(0, 0, 0, 0.1);
  --input: transparent;
  --input-background: #F8F8F8;
  --ring: #F30104;
  --radius: 0.5rem;

  /* Brand extended palette */
  --vs-red-50: #FFF0F2;
  --vs-red-100: #FFD6DB;
  --vs-red-200: #FFB3BB;
  --vs-red-300: #FF8090;
  --vs-red-400: #F44D5E;
  --vs-red-500: #F30104;
  --vs-red-600: #C40002;
  --vs-red-700: #9C0001;
  --vs-red-800: #7A0001;
  --vs-red-900: #5C0000;

  --vs-orange-50: #FFF7F0;
  --vs-orange-100: #FFE8D0;
  --vs-orange-200: #FFD0A0;
  --vs-orange-300: #FFB366;
  --vs-orange-400: #FF9533;
  --vs-orange-500: #F47B20;
  --vs-orange-600: #D96510;
  --vs-orange-700: #B54F0A;
  --vs-orange-800: #8F3D08;
  --vs-orange-900: #6A2D05;

  --vs-gray-50: #F8F8F8;
  --vs-gray-100: #F0F0F0;
  --vs-gray-200: #E0E0E0;
  --vs-gray-300: #C8C8C8;
  --vs-gray-400: #A0A0A0;
  --vs-gray-500: #6B6B6B;
  --vs-gray-600: #4A4A4A;
  --vs-gray-700: #333333;
  --vs-gray-800: #1A1A1A;
  --vs-gray-900: #0D0D0D;
}

/* ── Base Styles ──────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: var(--font-size);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  background-color: var(--background);
  color: var(--foreground);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Font Family Overrides (Force Anton & Montserrat) ─────────────────────────── */
.font-serif,
[class*="font-['Playfair_Display']"],
[class*="font-serif"] {
  font-family: 'Anton', sans-serif !important;
  font-weight: 400 !important;
  -webkit-text-stroke: 0 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.font-sans,
[class*="font-['Inter']"],
[class*="font-['DM_Mono']"],
[class*="font-sans"] {
  font-family: 'Montserrat', sans-serif !important;
}

/* Font size overrides for hardcoded Tailwind arbitrary pixel classes */
.text-\[10px\] { font-size: 12px !important; }
.text-\[11px\] { font-size: 13px !important; }
.text-\[12px\] { font-size: 14px !important; }
.text-\[14px\] { font-size: 16px !important; }

img {
  max-width: 100%;
  height: auto;
}

a {
  text-decoration: none;
  color: inherit;
}

/* ── Product Card Style ───────────────────────────────────────────────────────── */
.vs-product-card {
  border: 1px solid var(--vs-gray-200);
  border-radius: 12px;
  box-shadow: 0 4px 20px 0 rgba(185, 185, 185, 0.15);
  overflow: hidden;
  transition: all 0.4s ease;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.vs-product-card:hover {
  border-color: var(--primary);
  transform: translateY(-8px);
  box-shadow: 0 12px 32px 0 rgba(243, 1, 4, 0.12);
}

/* ── ELEGANT VARIATION PRICE STYLING ───────────────────────────────────────── */
.woocommerce-variation-price {
  margin-top: 0.5rem;
  margin-bottom: 0.75rem;
}
.woocommerce-variation-price .price {
  display: flex !important;
  align-items: baseline !important;
  gap: 0.75rem !important;
  font-family: 'Montserrat', sans-serif !important;
}
.woocommerce-variation-price del,
.woocommerce-variation-price del .woocommerce-Price-amount {
  font-size: 0.95rem !important;
  color: #9CA3AF !important;
  text-decoration: line-through !important;
  font-weight: 400 !important;
}
.woocommerce-variation-price ins,
.woocommerce-variation-price ins .woocommerce-Price-amount {
  font-size: 1.85rem !important;
  color: #F30104 !important;
  font-weight: 900 !important;
  text-decoration: none !important;
}

/* HIDE NATIVE BROWSER SPIN ARROWS FOR NUMBER INPUTS */
.vs-qty-val::-webkit-outer-spin-button,
.vs-qty-val::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}
.vs-qty-val[type=number] {
  -moz-appearance: textfield !important;
}

/* ── WOOCOMMERCE NATIVE CART & CHECKOUT STYLING ────────────────────────────── */

/* General Form Inputs & Selects */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container--default .select2-selection--single {
  border: 1px solid #E5E7EB !important;
  border-radius: 0.75rem !important;
  padding: 0.75rem 1rem !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.875rem !important;
  background-color: #FAFAFA !important;
  outline: none !important;
  transition: all 0.2s ease !important;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  border-color: #F30104 !important;
  background-color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(243, 1, 4, 0.1) !important;
}

/* Checkout Page Grid Layout */
.woocommerce-checkout .col2-set {
  margin-bottom: 2rem;
}

.woocommerce-checkout form.checkout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

@media (min-width: 1024px) {
  .woocommerce-checkout form.checkout {
    grid-template-columns: 7fr 5fr;
  }
}

/* Order Review Box (Right Column) */
#order_review_heading {
  font-family: 'Anton', sans-serif;
  font-size: 1.5rem;
  text-transform: uppercase;
  color: #111827;
  margin-bottom: 1rem;
}

#order_review {
  background-color: #ffffff;
  border: 1px solid #F3F4F6;
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Place Order Button (#place_order) */
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
#place_order {
  background-color: #F30104 !important;
  color: #ffffff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 0.95rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 1rem 2rem !important;
  border-radius: 0.75rem !important;
  border: 0 !important;
  width: 100% !important;
  box-shadow: 0 4px 14px rgba(243, 1, 4, 0.25) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
#place_order:hover {
  background-color: #C40002 !important;
  box-shadow: 0 6px 18px rgba(243, 1, 4, 0.35) !important;
}

/* Cart Table Styling */
.woocommerce-cart-form table.shop_table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid #F3F4F6 !important;
  border-radius: 1rem !important;
  overflow: hidden !important;
  background-color: #ffffff !important;
}

.woocommerce-cart-form table.shop_table th {
  font-family: 'Anton', sans-serif !important;
  text-transform: uppercase !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.04em !important;
  background-color: #FAFAFA !important;
  padding: 1rem !important;
  color: #374151 !important;
}

.woocommerce-cart-form table.shop_table td {
  padding: 1rem !important;
  border-top: 1px solid #F3F4F6 !important;
}

/* Coupon & Update Cart Buttons */
.woocommerce-cart-form .coupon input.input-text {
  border-radius: 0.75rem !important;
  padding: 0.6rem 1rem !important;
  height: 2.75rem !important;
}

.woocommerce-cart-form .coupon button.button,
.woocommerce-cart-form button[name="update_cart"] {
  height: 2.75rem !important;
  border-radius: 0.75rem !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  padding: 0 1.5rem !important;
  text-transform: uppercase !important;
}

/* ── CLEAN INLINE CART BUTTON & STEPPER ──────────────────────────────────────── */
.woocommerce div.product form.cart {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

.woocommerce div.product form.cart .quantity {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  float: none !important;
  display: inline-block !important;
}

.woocommerce div.product form.cart .single_add_to_cart_button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.6rem !important;
  flex-direction: row !important;
  height: 3rem !important;
  margin: 0 !important;
  line-height: 1 !important;
  background-color: #F30104 !important;
  color: #ffffff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 4px 14px rgba(243, 1, 4, 0.22) !important;
  cursor: pointer !important;
  border: 0 !important;
  opacity: 1 !important;
}

/* Ẩn triệt để icon ::before / ::after / :before / :after mặc định từ WooCommerce */
.single_add_to_cart_button::before,
.single_add_to_cart_button::after,
.single_add_to_cart_button:before,
.single_add_to_cart_button:after,
.vs-add-to-cart-btn::before,
.vs-add-to-cart-btn::after,
.vs-add-to-cart-btn:before,
.vs-add-to-cart-btn:after,
.woocommerce form.cart .button::before,
.woocommerce form.cart .button::after,
.woocommerce form.cart .button:before,
.woocommerce form.cart .button:after,
.woocommerce div.product form.cart .single_add_to_cart_button::before,
.woocommerce div.product form.cart .single_add_to_cart_button::after,
.woocommerce div.product form.cart .single_add_to_cart_button:before,
.woocommerce div.product form.cart .single_add_to_cart_button:after,
.woocommerce-variation-add-to-cart .single_add_to_cart_button::before,
.woocommerce-variation-add-to-cart .single_add_to_cart_button::after,
.woocommerce-variation-add-to-cart .single_add_to_cart_button:before,
.woocommerce-variation-add-to-cart .single_add_to_cart_button:after,
button.single_add_to_cart_button::before,
button.single_add_to_cart_button::after,
button.single_add_to_cart_button:before,
button.single_add_to_cart_button:after {
  content: "" !important;
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  font-size: 0 !important;
  speak: none !important;
}

.woocommerce div.product form.cart .single_add_to_cart_button:hover {
  background-color: #C40002 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(243, 1, 4, 0.35) !important;
}

.woocommerce div.product form.cart .single_add_to_cart_button *,
.woocommerce div.product form.cart .single_add_to_cart_button span {
  color: #ffffff !important;
}

/* Image container shine effect */
.vs-product-image-container {
  position: relative;
  overflow: hidden;
  background-color: var(--vs-gray-50);
  aspect-ratio: 1 / 1 !important;
  width: 100%;
}

.vs-product-image-container::before {
  position: absolute;
  top: 0;
  left: -100%;
  display: block;
  content: "";
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
  transform: skewX(-25deg);
  z-index: 10;
  pointer-events: none;
}

.vs-product-card:hover .vs-product-image-container::before {
  animation: vsHoverShine 1.2s;
}

@keyframes vsHoverShine {
  100% {
    left: 125%;
  }
}

/* ── Marquee Animation (Partner Logos) ────────────────────────────────────────── */
@keyframes vsMarquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

.animate-marquee-infinite {
  display: flex;
  width: max-content;
  animation: vsMarquee 60s linear infinite;
}

.animate-marquee-infinite:hover {
  animation-play-state: paused;
}

/* Gradient mask for smooth fading edges in logo ticker */
.mask-gradient {
  mask-image: linear-gradient(to right, transparent, white 15%, white 85%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, white 15%, white 85%, transparent);
}

/* ── Overlay & Drawer Animations ──────────────────────────────────────────────── */
.overlay-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.overlay-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

/* Search overlay */
.search-overlay-panel {
  transform: translateY(-100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.search-overlay-panel.active {
  transform: translateY(0);
}

/* Cart drawer */
.cart-drawer-panel {
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cart-drawer-panel.active {
  transform: translateX(0);
}

/* Checkout modal */
.checkout-modal-panel {
  transform: scale(0.95);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}

.checkout-modal-panel.active {
  transform: scale(1);
  opacity: 1;
}

/* Mobile nav */
.mobile-nav {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-nav.open {
  max-height: 85vh;
  overflow-y: auto;
}

/* ── Scroll Reveal Animations ─────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* ── Product Carousel (CSS Scroll Snap) ───────────────────────────────────────── */
.product-carousel {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}

.product-carousel::-webkit-scrollbar {
  display: none;
}

.product-carousel > * {
  scroll-snap-align: start;
  flex-shrink: 0;
}

/* 5-col carousel item sizing */
.carousel-item-5 {
  width: calc((100% - 4rem) / 5);
}

/* 4-col carousel item sizing */
.carousel-item-4 {
  width: calc((100% - 3rem) / 4);
}

@media (max-width: 1279px) {
  .carousel-item-5 {
    width: calc((100% - 2rem) / 3);
  }
  .carousel-item-4 {
    width: calc((100% - 2rem) / 3);
  }
}

@media (max-width: 767px) {
  .carousel-item-5 {
    width: calc((100% - 1rem) / 2);
  }
  .carousel-item-4 {
    width: calc((100% - 1rem) / 2);
  }
}

@media (max-width: 480px) {
  .carousel-item-5,
  .carousel-item-4 {
    width: 85%;
  }
}

/* ── Intro Slider ─────────────────────────────────────────────────────────────── */
.intro-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease;
}

.intro-slide.active {
  opacity: 1;
}

/* ── Heart Button Animation ───────────────────────────────────────────────────── */
.heart-btn {
  transition: transform 0.3s ease;
}

.heart-btn:active {
  transform: scale(0.85);
}

.heart-btn.liked svg {
  fill: #F30104;
  color: #F30104;
}

/* ── Top Bar Collapse ─────────────────────────────────────────────────────────── */
.top-bar {
  overflow: hidden;
  transition: height 0.3s ease, opacity 0.3s ease;
  height: 2.5rem;
  opacity: 1;
}

.top-bar.collapsed {
  height: 0;
  opacity: 0;
}

/* ── Logo Scale on Scroll ─────────────────────────────────────────────────────── */
.logo-wrapper {
  transition: transform 0.3s ease;
  transform-origin: top center;
}

.logo-wrapper.scrolled {
  transform: scale(0.67);
}

/* ── Active Nav Underline ─────────────────────────────────────────────────────── */
.nav-link-underline {
  position: absolute;
  bottom: 0;
  left: 0.75rem;
  right: 0.75rem;
  height: 2.5px;
  background: #F30104;
  border-radius: 9999px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}

.nav-link:hover .nav-link-underline,
.nav-link.active .nav-link-underline {
  transform: scaleX(1);
}

/* ── Mega Menu Dropdown ───────────────────────────────────────────────────────── */
.mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 50;
  margin-top: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.mega-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ── Dropdown Submenu Animations & Helpers ───────────────────────────────────── */
.rotate-180 {
  transform: rotate(180deg);
}

.dropdown-menu,
.dropdown-sub-menu {
  will-change: opacity, transform, visibility;
}

.mobile-submenu {
  transition: max-height 0.3s ease, opacity 0.25s ease;
}


/* ── Utility: Line Clamp ──────────────────────────────────────────────────────── */
.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Misc ─────────────────────────────────────────────────────────────────────── */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  scrollbar-width: none;
}

/* ── WooCommerce Styles Override ───────────────────────────────────────────────── */
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce input.button.alt,
.woocommerce-page button.button.alt,
.woocommerce-page a.button.alt {
  background-color: #F30104 !important;
  color: #ffffff !important;
  border-radius: 9999px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  padding: 0.625rem 1.5rem !important;
  transition: all 0.2s ease !important;
}

.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover {
  background-color: #C40002 !important;
}

.woocommerce .single_add_to_cart_button {
  background-color: #F30104 !important;
  color: #fff !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  font-family: 'Montserrat', sans-serif !important;
}

.woocommerce .woocommerce-ordering select {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.875rem;
  border-radius: 8px;
  border: 1px solid #E0E0E0;
  padding: 0.5rem 1rem;
  background-color: #ffffff;
}

/* ── Footer Bright White Color Enforcement ────────────────────────────────── */
footer,
footer p,
footer a,
footer span,
footer li,
footer div,
footer h1,
footer h2,
footer h3,
footer h4,
footer label {
  color: #ffffff !important;
}

footer a {
  opacity: 0.9;
  transition: opacity 0.2s ease, text-decoration 0.2s ease;
}

footer a:hover {
  opacity: 1 !important;
  color: #ffffff !important;
  text-decoration: underline !important;
}

footer input {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

footer input::placeholder {
  color: rgba(255, 255, 255, 0.75) !important;
}

footer input:focus {
  background-color: rgba(255, 255, 255, 0.3) !important;
  border-color: #ffffff !important;
}

footer .social-icon-link {
  background-color: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

footer .social-icon-link:hover {
  background-color: #ffffff !important;
  color: #F30104 !important;
}

footer .social-icon-link:hover svg {
  fill: #F30104 !important;
  color: #F30104 !important;
}

/* ── Top Bar White Enforcement ────────────────────────────────────────────── */
#top-bar,
#top-bar *,
#top-bar a,
#top-bar span,
#top-bar div {
  color: #ffffff !important;
}

#top-bar svg {
  stroke: #ffffff !important;
  color: #ffffff !important;
}

/* ── Yoast SEO Breadcrumbs Styling ────────────────────────────────────────── */
.yoast-breadcrumbs,
.yoast-breadcrumbs span,
.yoast-breadcrumbs a {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.75rem !important;
  color: #4B5563 !important;
  line-height: 1.5 !important;
}

.yoast-breadcrumbs a:hover {
  color: #F30104 !important;
  text-decoration: underline !important;
}

.yoast-breadcrumbs .breadcrumb_last {
  color: #111827 !important;
  font-weight: 700 !important;
}

/* ── WooCommerce Single Product Form & Add To Cart Enhancements ─────────────── */
.woocommerce div.product form.cart {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.25rem !important;
  margin-top: 0.75rem !important;
  margin-bottom: 1rem !important;
}

.woocommerce div.product form.cart .variations {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 0.75rem !important;
}

.woocommerce div.product form.cart .single_variation_wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
  width: 100% !important;
}

.woocommerce div.product form.cart .woocommerce-variation-add-to-cart,
.woocommerce-variation-add-to-cart,
.variations_button {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 1rem !important;
  width: 100% !important;
  flex-wrap: nowrap !important;
}

.woocommerce .single_variation {
  display: block !important;
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

.woocommerce-variation-price {
  margin-bottom: 0.25rem !important;
}

.woocommerce .single_variation .price,
.woocommerce-variation-price .price {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 0.5rem !important;
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif !important;
  font-size: 1.75rem !important;
  font-weight: 900 !important;
  color: #F30104 !important;
  letter-spacing: -0.025em !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

.woocommerce .single_variation .price .amount,
.woocommerce .single_variation .price bdi,
.woocommerce-variation-price .price .amount,
.woocommerce-variation-price .price bdi {
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif !important;
  font-size: 1.75rem !important;
  font-weight: 900 !important;
  color: #F30104 !important;
  text-decoration: none !important;
}

.woocommerce .single_variation .price del,
.woocommerce-variation-price .price del,
.woocommerce .single_variation .price del .amount {
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif !important;
  font-size: 1.1rem !important;
  font-weight: 500 !important;
  color: #9CA3AF !important;
  text-decoration: line-through !important;
}

.woocommerce .single_variation .price ins,
.woocommerce-variation-price .price ins {
  text-decoration: none !important;
  background: transparent !important;
}

.woocommerce .single_variation .woocommerce-Price-currencySymbol {
  font-size: 0.9em !important;
  font-weight: 900 !important;
  margin-left: 0.2rem !important;
  display: inline-block !important;
  text-decoration: none !important;
}

.woocommerce div.product form.cart div.quantity,
.woocommerce div.product form.cart .quantity,
.woocommerce-variation-add-to-cart .quantity {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 9999px !important;
  padding: 0.25rem 0.75rem !important;
  background-color: #F9FAFB !important;
  height: 3.25rem !important;
  margin: 0 !important;
  float: none !important;
}

.woocommerce div.product form.cart div.quantity input.qty,
.woocommerce div.product form.cart .quantity input.qty,
.woocommerce-variation-add-to-cart .quantity input.qty {
  width: 3.5rem !important;
  height: 2.75rem !important;
  text-align: center !important;
  font-weight: 800 !important;
  font-size: 1.05rem !important;
  border: none !important;
  background: transparent !important;
  color: #111827 !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce div.product form.cart button[type="submit"].single_add_to_cart_button,
.woocommerce-variation-add-to-cart .single_add_to_cart_button {
  flex: 1 !important;
  min-height: 3.25rem !important;
  background-color: #F30104 !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 0.95rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border-radius: 9999px !important;
  padding: 0.85rem 2rem !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(243, 1, 4, 0.35) !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  margin: 0 !important;
  float: none !important;
}

.woocommerce div.product form.cart .single_add_to_cart_button:hover,
.woocommerce-variation-add-to-cart .single_add_to_cart_button:hover {
  background-color: #C40002 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(243, 1, 4, 0.45) !important;
}

.woocommerce div.product form.cart .reset_variations {
  display: inline-block !important;
  font-size: 0.75rem !important;
  color: #9CA3AF !important;
  margin-left: 0.5rem !important;
}

/* ── PAGINATION STYLES (Dành cho Tin tức & Sản phẩm WooCommerce) ─────────────── */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

.vs-pagination,
.navigation.pagination,
.woocommerce-pagination {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin-top: 2rem !important;
  margin-bottom: 1rem !important;
  padding: 0 !important;
}

.vs-pagination .navigation.pagination,
.vs-pagination .nav-links,
.navigation.pagination .nav-links,
.woocommerce-pagination ul.page-numbers {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}

.nav-links,
.woocommerce-pagination ul.page-numbers,
ul.page-numbers {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0.75rem !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.woocommerce-pagination ul.page-numbers li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
}

.page-numbers,
.nav-links .page-numbers,
.vs-pagination .page-numbers,
.woocommerce-pagination ul.page-numbers li a,
.woocommerce-pagination ul.page-numbers li span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 2.75rem !important;
  height: 2.75rem !important;
  padding: 0 1rem !important;
  margin: 0 !important;
  font-family: var(--font-sans, system-ui, -apple-system, sans-serif) !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  color: #374151 !important;
  background-color: #ffffff !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.06) !important;
  text-decoration: none !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  user-select: none !important;
  line-height: 1 !important;
}

/* Hover state for links */
a.page-numbers:hover,
a.page-numbers:focus,
.nav-links a.page-numbers:hover,
.woocommerce-pagination ul.page-numbers li a:hover {
  color: #F30104 !important;
  border-color: rgba(243, 1, 4, 0.4) !important;
  background-color: #FFF0F2 !important;
  box-shadow: 0 4px 12px rgba(243, 1, 4, 0.15) !important;
  transform: translateY(-2px) !important;
  outline: none !important;
}

/* Active / Current page state */
span.page-numbers.current,
.page-numbers.current,
.nav-links .page-numbers.current,
.woocommerce-pagination ul.page-numbers li span.current {
  color: #ffffff !important;
  background-color: #F30104 !important;
  border-color: #F30104 !important;
  box-shadow: 0 4px 14px rgba(243, 1, 4, 0.35) !important;
  pointer-events: none !important;
}

/* Prev & Next Buttons */
.page-numbers.prev,
.page-numbers.next,
.nav-links .page-numbers.prev,
.nav-links .page-numbers.next,
.woocommerce-pagination ul.page-numbers li a.prev,
.woocommerce-pagination ul.page-numbers li a.next {
  padding: 0 1.15rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.025em !important;
}

/* Dots / Ellipsis (...) */
.page-numbers.dots,
.nav-links .page-numbers.dots,
.woocommerce-pagination ul.page-numbers li span.dots {
  border-color: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: #9CA3AF !important;
  cursor: default !important;
}

/* ── FLUENT FORMS — Tailwind v4 Preflight Reset Fix (layout-only) ────────────── */
/* Tailwind CDN preflight strips display/sizing from Fluent Forms elements.       */
/* These rules restore ONLY the structural layout; cosmetic styling stays native. */

/* Restore the form container to full width */
.fluentform,
.fluentform .frm-fluent-form {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Two-column row container — restore flex layout */
.fluentform .ff-t-container {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
}

/* Two-column cells — restore 50% width */
.fluentform .ff-t-cell {
  flex: 0 0 50% !important;
  max-width: 50% !important;
  width: 50% !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
  box-sizing: border-box !important;
}

/* Stack columns on mobile */
@media (max-width: 640px) {
  .fluentform .ff-t-cell {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* Restore form controls to fill their parent width */
.fluentform .ff-el-form-control,
.fluentform input[type="text"],
.fluentform input[type="email"],
.fluentform input[type="tel"],
.fluentform input[type="number"],
.fluentform input[type="url"],
.fluentform select,
.fluentform textarea {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Restore submit button cursor */
.fluentform .ff-btn-submit {
  cursor: pointer !important;
}

/* ── WOOCOMMERCE CUSTOM CART & CHECKOUT PAGE UPGRADES ────────────────────── */

/* Table adjustments for Cart/Checkout Review Order */
.woocommerce-checkout-review-order-table,
.shop_table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.875rem !important;
  border: 0 !important;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td,
.shop_table th,
.shop_table td {
  padding: 0.75rem 0 !important;
  border-bottom: 1px solid #F3F4F6 !important;
  color: #1A1A1A !important;
  text-align: left !important;
}

.woocommerce-checkout-review-order-table th {
  font-family: 'Anton', sans-serif !important;
  font-weight: 400 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.75rem !important;
  color: #6B7280 !important;
  border-bottom: 2px solid #E5E7EB !important;
}

.woocommerce-checkout-review-order-table .product-name {
  font-weight: 600 !important;
}

.woocommerce-checkout-review-order-table .product-total,
.woocommerce-checkout-review-order-table td.product-total {
  text-align: right !important;
  font-weight: 700 !important;
}

.woocommerce-checkout-review-order-table tr.cart-subtotal th,
.woocommerce-checkout-review-order-table tr.cart-subtotal td,
.woocommerce-checkout-review-order-table tr.order-total th,
.woocommerce-checkout-review-order-table tr.order-total td {
  border-top: 1px solid #E5E7EB !important;
  padding: 1rem 0 !important;
}

.woocommerce-checkout-review-order-table tr.order-total th {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  text-transform: none !important;
  color: #1A1A1A !important;
}

.woocommerce-checkout-review-order-table tr.order-total td {
  text-align: right !important;
  color: #F30104 !important;
  font-size: 1.25rem !important;
  font-weight: 900 !important;
}

/* Payment Gateways Selection Box */
#payment {
  background: #FAFAFA !important;
  border-radius: 1.25rem !important;
  border: 1px solid #E5E7EB !important;
  padding: 1.25rem !important;
  margin-top: 1.5rem !important;
  font-family: 'Montserrat', sans-serif !important;
}

#payment ul.payment_methods {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 1.25rem 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
}

#payment ul.payment_methods li {
  padding: 0.75rem 1rem !important;
  background-color: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 0.75rem !important;
  transition: all 0.2s ease !important;
}

#payment ul.payment_methods li input[type="radio"] {
  margin-right: 0.5rem !important;
  accent-color: #F30104 !important;
}

#payment ul.payment_methods li label {
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  color: #1A1A1A !important;
  cursor: pointer !important;
}

#payment ul.payment_methods li .payment_box {
  margin-top: 0.5rem !important;
  padding: 0.75rem !important;
  background-color: #F9FAFB !important;
  border-radius: 0.5rem !important;
  border-left: 3px solid #F30104 !important;
  font-size: 0.75rem !important;
  color: #6B7280 !important;
  line-height: 1.5 !important;
}

/* Place Order Button styling */
#place_order, 
.woocommerce-checkout #place_order {
  width: 100% !important;
  height: 3rem !important;
  background-color: #F30104 !important;
  color: #FFFFFF !important;
  border-radius: 9999px !important;
  border: 0 !important;
  font-family: 'Anton', sans-serif !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  font-size: 0.875rem !important;
  letter-spacing: 0.05em !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

#place_order:hover, 
.woocommerce-checkout #place_order:hover {
  background-color: #C40002 !important;
  box-shadow: 0 10px 15px -3px rgba(243, 1, 4, 0.2), 0 4px 6px -2px rgba(243, 1, 4, 0.1) !important;
}

/* Fix spacing for WooCommerce errors & notices */
.woocommerce-error, 
.woocommerce-info, 
.woocommerce-message {
  border-radius: 1rem !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.875rem !important;
  padding: 1rem 1.5rem !important;
  margin-bottom: 1.5rem !important;
  border-left-width: 4px !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;
}

.woocommerce-error {
  background-color: #FEF2F2 !important;
  border-left-color: #EF4444 !important;
  color: #991B1B !important;
}

.woocommerce-message {
  background-color: #ECFDF5 !important;
  border-left-color: #10B981 !important;
  color: #065F46 !important;
}

.woocommerce-info {
  background-color: #EFF6FF !important;
  border-left-color: #3B82F6 !important;
  color: #1E40AF !important;
}

/* ── MOBILE RESPONSIVENESS OVERRIDES (AGENTS.md Section 8 & 9) ────────────── */

@media (max-width: 375px) {
  #top-bar .flex.items-center.gap-3 {
    display: none !important; /* Hide social icons on extremely narrow mobile devices */
  }
}

@media (max-width: 767px) {
  /* Compact Page-Header Banner Overlay Opacity */
  .page-header-overlay {
    opacity: 0.85 !important; /* Ensure white text contrasts beautifully with background photo */
  }

  /* Single Product page Add to Cart buttons & Stepper optimization */
  .woocommerce div.product form.cart {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    width: 100% !important;
  }

  .woocommerce div.product form.cart .quantity {
    float: none !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: none !important;
    display: flex !important;
  }

  .woocommerce div.product form.cart .quantity .qty {
    width: 100% !important;
    height: 3rem !important;
    border-radius: 0.75rem !important;
    border: 1px solid #E5E7EB !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
  }

  .woocommerce div.product form.cart .button {
    margin-left: 0 !important;
    width: 100% !important;
    height: 3rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: 'Anton', sans-serif !important;
    font-weight: 400 !important;
    font-size: 0.875rem !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    border-radius: 9999px !important;
  }
}

/* ── PAGINATION STYLING (FIX CÁC NÚT PHÂN TRANG BỊ SÁT NHAU) ─────────────────── */
.vs-pagination,
.woocommerce-pagination,
.navigation.pagination,
ul.page-numbers {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.625rem !important; /* 10px spacing between pagination buttons */
  flex-wrap: wrap !important;
  list-style: none !important;
  margin-top: 2rem !important;
  margin-bottom: 1.5rem !important;
  padding: 0 !important;
}

.vs-pagination li,
.woocommerce-pagination li,
ul.page-numbers li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: inline-flex !important;
}

.vs-pagination .page-numbers,
.woocommerce-pagination .page-numbers,
.navigation.pagination .page-numbers,
ul.page-numbers a,
ul.page-numbers span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 2.6rem !important;
  height: 2.6rem !important;
  padding: 0 0.9rem !important;
  border-radius: 0.75rem !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  color: #374151 !important;
  background-color: #ffffff !important;
  border: 1px solid #E5E7EB !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  margin: 0 0.15rem !important;
}

.vs-pagination a.page-numbers:hover,
.woocommerce-pagination a.page-numbers:hover,
.navigation.pagination a.page-numbers:hover,
ul.page-numbers a:hover {
  color: #F30104 !important;
  border-color: #F30104 !important;
  background-color: #FFF0F2 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(243, 1, 4, 0.15) !important;
}

.vs-pagination .page-numbers.current,
.woocommerce-pagination .page-numbers.current,
.navigation.pagination .page-numbers.current,
ul.page-numbers span.current {
  color: #ffffff !important;
  background-color: #F30104 !important;
  border-color: #F30104 !important;
  box-shadow: 0 4px 14px rgba(243, 1, 4, 0.35) !important;
}

.vs-pagination .page-numbers.dots,
.woocommerce-pagination .page-numbers.dots,
ul.page-numbers span.dots {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #9CA3AF !important;
}