/* MAMDOCUNG.VN - MATERIAL 3 TOKENS */

:root {
  /* Color */
  --md-sys-color-primary: #123E35;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-secondary: #C5AC78;
  --md-sys-color-on-secondary: #123E35;
  --md-sys-color-surface: #FCFAF4;
  --md-sys-color-surface-container: #F4EFE3;
  --md-sys-color-on-surface: #1F2623;
  --md-sys-color-on-surface-variant: #4E5A55;
  --md-sys-color-outline: #7A8580;
  --md-sys-color-outline-variant: #D5CBBF;
  --md-sys-color-error: #B3261E;

  /* Shape */
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-full: 9999px;

  /* Typography Reference */
  --md-ref-typeface-brand: "Playfair Display", Georgia, serif;
  --md-ref-typeface-plain: "Be Vietnam Pro", "UTM Avo", system-ui, sans-serif;

  /* Typography Scale */
  --md-sys-typescale-display-medium: 600 clamp(36px, 5vw, 64px)/1.1 var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-large: 600 clamp(32px, 4vw, 52px)/1.2 var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-medium: 600 clamp(28px, 3vw, 40px)/1.2 var(--md-ref-typeface-brand);
  --md-sys-typescale-title-large: 600 clamp(20px, 2.5vw, 28px)/1.3 var(--md-ref-typeface-plain);
  
  --md-sys-typescale-label-large: 600 14px/20px var(--md-ref-typeface-plain);
  --md-sys-typescale-label-large-tracking: 0.1px;
  --md-sys-typescale-body-large: 400 16px/24px var(--md-ref-typeface-plain);
  --md-sys-typescale-body-medium: 400 14px/20px var(--md-ref-typeface-plain);

  /* Spacing */
  --space-1: 4px; 
  --space-2: 8px; 
  --space-3: 12px;
  --space-4: 16px; 
  --space-6: 24px; 
  --space-8: 32px;

  /* State layer */
  --md-sys-state-hover: 0.08;
  --md-sys-state-focus: 0.10;
  --md-sys-state-pressed: 0.10;
}

/* Global Body setup using M3 Surface */
body {
    background-color: var(--md-sys-color-surface) !important;
    color: var(--md-sys-color-on-surface) !important;
}

/* M3 Headings Application */
h1, .md3-display-medium {
    font-weight: 600 !important;
    font-size: clamp(36px, 5vw, 64px) !important;
    line-height: 1.1 !important;
    font-family: var(--md-ref-typeface-brand) !important;
    color: var(--md-sys-color-on-surface);
}

h2, .md3-headline-large {
    font-weight: 600 !important;
    font-size: clamp(32px, 4vw, 52px) !important;
    line-height: 1.2 !important;
    font-family: var(--md-ref-typeface-brand) !important;
    color: var(--md-sys-color-on-surface);
}

h3, .md3-headline-medium {
    font-weight: 600 !important;
    font-size: clamp(28px, 3vw, 40px) !important;
    line-height: 1.2 !important;
    font-family: var(--md-ref-typeface-brand) !important;
    color: var(--md-sys-color-on-surface);
}

h4, .md3-title-large {
    font-weight: 600 !important;
    font-size: clamp(20px, 2.5vw, 28px) !important;
    line-height: 1.3 !important;
    font-family: var(--md-ref-typeface-plain) !important;
    color: var(--md-sys-color-on-surface);
}

/* Body Text overrides */
p, .product-small .box-text {
    color: var(--md-sys-color-on-surface-variant) !important;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    font-family: var(--md-ref-typeface-plain);
}

/* ==========================================================================
   CHẶNG 2: MATERIAL 3 TEXT FIELDS (FORM & Ô NHẬP LIỆU)
   ========================================================================== */

/* Reset & Chuẩn hóa Ô nhập liệu (Input, Select, Textarea) toàn hệ thống */
input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="date"], input[type="number"], select, textarea,
.woocommerce form .input-text, .woocommerce form select, .woocommerce-checkout .select2-selection {
    height: 56px !important;
    padding: 0 var(--space-4) !important;
    border: 1px solid var(--md-sys-color-outline) !important;
    border-radius: var(--md-sys-shape-corner-extra-small) !important;
    background-color: var(--md-sys-color-surface) !important;
    color: var(--md-sys-color-on-surface) !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 24px !important;
    font-family: var(--md-ref-typeface-plain) !important;
    box-shadow: none !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    width: 100%;
    box-sizing: border-box;
    line-height: normal !important;
}

/* Fix chiều cao cho Select2 (WooCommerce checkout) */
.woocommerce-checkout .select2-selection__rendered {
    line-height: 54px !important;
}
.woocommerce-checkout .select2-selection__arrow {
    height: 54px !important;
}

/* Riêng Textarea cần chiều cao tự do hơn */
textarea, .woocommerce form textarea {
    height: auto !important;
    min-height: 120px;
    padding: var(--space-3) var(--space-4) !important;
}

/* Trạng thái Focus (Đang nhập liệu) */
input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="password"]:focus, input[type="date"]:focus, input[type="number"]:focus, select:focus, textarea:focus,
.woocommerce form .input-text:focus, .woocommerce form select:focus, .woocommerce-checkout .select2-container--focus .select2-selection {
    border: 2px solid var(--md-sys-color-primary) !important;
    padding: 0 calc(var(--space-4) - 1px) !important; /* Trừ hao 1px viền dày lên để text không nhảy */
    outline: none !important;
    box-shadow: none !important;
    background-color: #FFFFFF !important;
}

/* Định dạng nhãn (Label) của form */
label, .woocommerce form .form-row label, .mdc-input-wrap label {
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-family: var(--md-ref-typeface-plain) !important;
    color: var(--md-sys-color-on-surface-variant) !important;
    margin-bottom: var(--space-1);
    display: block;
}

/* Sửa lại Form Trang Chủ đang dùng style inline */
.mdc-input-wrap select, .mdc-input-wrap input {
    background-color: #FFFFFF !important;
}

/* ==========================================================================
   CHẶNG 3: MATERIAL 3 BUTTONS & HEADER ICONS
   ========================================================================== */

/* Nút cơ bản - Ghi đè Flatsome button mặc định */
.button:not(.is-form), .mdc-btn-solid, .mdc-btn-tonal, .mdc-btn-outline, .mdc-btn-text, .mdc-header-btn, button[type="submit"]:not(.search-submit) {
  display: inline-flex !important; 
  align-items: center !important; 
  justify-content: center !important; 
  gap: var(--space-2) !important;
  min-height: 40px !important; 
  padding: 0 var(--space-6) !important;
  border-radius: var(--md-sys-shape-corner-full) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  font-family: var(--md-ref-typeface-plain) !important;
  letter-spacing: var(--md-sys-typescale-label-large-tracking) !important;
  text-transform: none !important; /* M3 không in hoa toàn bộ */
  position: relative !important; 
  overflow: hidden !important;
  transition: box-shadow .2s, background-color .2s, border-color .2s, color .2s !important;
  cursor: pointer;
  text-decoration: none !important;
}

/* Vùng chạm 48px trên mobile / màn cảm ứng */
@media (pointer: coarse) { 
  .button:not(.is-form), .mdc-btn-solid, .mdc-btn-tonal, .mdc-btn-outline, button[type="submit"]:not(.search-submit) { 
    min-height: 48px !important; 
  } 
}

/* Biến thể M3 */
.mdc-btn-solid, button[type="submit"]:not(.search-submit):not(.mdc-btn-tonal):not(.mdc-btn-outline), .button.primary, .mdc-header-btn { 
  background: var(--md-sys-color-primary) !important; 
  color: var(--md-sys-color-on-primary) !important; 
  border: 0 !important; 
}

.mdc-btn-tonal, .button.secondary { 
  background: var(--md-sys-color-secondary) !important; 
  color: var(--md-sys-color-on-secondary) !important; 
  border: 0 !important; 
}

.mdc-btn-outline, .button.is-outline { 
  background: transparent !important; 
  color: var(--md-sys-color-primary) !important; 
  border: 1px solid var(--md-sys-color-outline) !important; 
}
.mdc-btn-outline.on-dark { 
  color: #fff !important; 
  border-color: rgba(255,255,255,0.8) !important; 
}

.mdc-btn-text { 
  background: transparent !important; 
  color: var(--md-sys-color-primary) !important; 
  border: 0 !important; 
  padding: 0 var(--space-3) !important; 
}

/* State Layer (Hover/Active) bằng pseudo-element ::after */
.button::after, .mdc-btn-solid::after, .mdc-btn-tonal::after, .mdc-btn-outline::after, .mdc-btn-text::after, .mdc-header-btn::after {
  content: "" !important; 
  position: absolute !important; 
  inset: 0 !important; 
  background: currentColor !important; 
  opacity: 0; 
  transition: opacity .15s !important;
  border-radius: inherit !important;
  pointer-events: none !important;
}

.button:hover::after, :is(.mdc-btn-solid,.mdc-btn-tonal,.mdc-btn-outline,.mdc-btn-text,.mdc-header-btn):hover::after { 
  opacity: var(--md-sys-state-hover) !important; 
}
.button:active::after, :is(.mdc-btn-solid,.mdc-btn-tonal,.mdc-btn-outline,.mdc-btn-text,.mdc-header-btn):active::after { 
  opacity: var(--md-sys-state-pressed) !important; 
}
.button:focus-visible, :is(.mdc-btn-solid,.mdc-btn-tonal,.mdc-btn-outline,.mdc-btn-text,.mdc-header-btn):focus-visible {
  outline: 3px solid var(--md-sys-color-secondary) !important; 
  outline-offset: 2px !important;
}

/* Xóa box-shadow mặc định của nút Flatsome */
.button:not(.is-form) {
  box-shadow: none !important;
}

/* ==========================================================================
   HEADER ICONS (Giỏ hàng, Tìm kiếm)
   ========================================================================== */
.header-nav .icon-button, .header-nav .header-cart-link, .header-nav .search-icon, .header-nav .nav-top-link.icon-button {
  width: 48px !important; 
  height: 48px !important; 
  display: inline-flex !important; 
  align-items: center !important; 
  justify-content: center !important;
  border-radius: var(--md-sys-shape-corner-full) !important;
  position: relative;
  color: var(--md-sys-color-on-surface) !important;
}

.header-nav .icon-button:hover, .header-nav .header-cart-link:hover, .header-nav .search-icon:hover, .header-nav .nav-top-link.icon-button:hover { 
  background-color: rgba(31, 38, 35, 0.08) !important; /* Dùng rgba tương đương color-mix 8% */
}

.header-nav .icon-button i, .header-nav .header-cart-link i, .header-nav .search-icon i, .header-nav .nav-top-link.icon-button i {
  font-size: 24px !important;
  line-height: 1 !important;
}

/* ==========================================================================
   CHẶNG 4: MATERIAL 3 PRODUCT CARDS
   ========================================================================== */

/* Thiết lập Thẻ Sản Phẩm (Cards) */
.product-small.box, .product-small .col-inner {
    background-color: var(--md-sys-color-surface-container) !important;
    border-radius: var(--md-sys-shape-corner-medium) !important;
    overflow: hidden !important;
    box-shadow: none !important; /* Xóa bóng đổ mặc định */
    transition: transform 0.2s, box-shadow 0.2s !important;
    border: 1px solid var(--md-sys-color-outline-variant); /* Viền mỏng thay vì bóng đổ nặng nề */
}

/* Khoảng cách bên trong phần chữ của Card */
.product-small.box .box-text {
    padding: var(--space-4) !important;
    background-color: transparent !important; /* Tránh đè nền */
}

/* Fix góc bo tròn của hình ảnh bên trong thẻ */
.product-small.box .box-image, .product-small.box .box-image img {
    border-radius: var(--md-sys-shape-corner-medium) var(--md-sys-shape-corner-medium) 0 0 !important;
    overflow: hidden !important;
}

/* Hiệu ứng Hover - Elevation 1 của Material 3 */
.product-small.box:hover, .product-small .col-inner:hover {
    transform: translateY(-2px) !important; /* Nâng nhẹ thẻ lên */
    box-shadow: 0 4px 8px 3px rgba(31, 38, 35, 0.05), 0 1px 3px rgba(31, 38, 35, 0.1) !important; /* Bóng đổ mềm M3 */
}

/* Tùy chỉnh Tiêu đề (Tên mâm) trong thẻ sản phẩm */
.product-small.box .woocommerce-loop-product__title {
    font-weight: 600 !important;
    font-size: clamp(20px, 2.5vw, 28px) !important;
    line-height: 1.3 !important;
    font-family: var(--md-ref-typeface-plain) !important;
    color: var(--md-sys-color-on-surface) !important;
    margin-bottom: var(--space-2) !important;
}

/* Giá tiền trong thẻ */
.product-small.box .price {
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 24px !important;
    font-family: var(--md-ref-typeface-plain) !important;
    font-weight: 700 !important;
    color: var(--md-sys-color-primary) !important;
}

/* Loại bỏ gạch chân của link thẻ (nếu có) */
.product-small.box a {
    text-decoration: none !important;
}

/* ==========================================================================
   P0 - SỬA LỖI CSS MỚI PHÁT SINH (C1 - C4)
   ========================================================================== */

/* C1 – Chữ trên nền tối */
.dark p, .dark li, .dark label,
.section.dark p, .banner p, .bg-hero p,
.footer-wrapper p, .footer-wrapper li, .absolute-footer {
  color: rgba(255, 255, 255, .85) !important;
}
.dark small, .footer-wrapper small { color: rgba(255, 255, 255, .7) !important; }

/* C2 – Thang chữ: Playfair chỉ cho h1/h2 */
h3, h4, h5, .footer-wrapper h3, .footer-wrapper .widget-title {
  font-family: var(--md-ref-typeface-plain) !important;
  font-weight: 600 !important; 
  letter-spacing: 0 !important;
}
h3 { font-size: 20px !important; line-height: 28px !important; }
h4, .footer-wrapper .widget-title { font-size: 16px !important; line-height: 24px !important; }
@media (max-width: 767px) { h3 { font-size: 18px !important; line-height: 26px !important; } }

/* C3 – Khối kiểm tra lịch giao */
#mdc_home_checker_form {
  display: grid !important; gap: var(--space-3) !important;
  grid-template-columns: 1fr 1fr 1.4fr auto !important; align-items: end !important; position: relative !important;
}
#mdc_home_checker_form .form-row, .mdc-delivery-check .field-wrap {
  border: 0 !important; padding: 0 !important; background: none !important;
}
#mdc_home_checker_form input, #mdc_home_checker_form select { width: 100% !important; min-width: 0 !important; }
@media (max-width: 767px) { #mdc_home_checker_form { grid-template-columns: 1fr !important; } }

/* C4 – Nút hero co theo nội dung */
.bg-hero .button, .bg-hero .mdc-btn-outline, .bg-hero .mdc-btn-tonal {
  width: auto !important; flex: 0 0 auto !important; padding: 0 var(--space-6) !important;
}