/* ==========================================================
   MEDOGA.VN — CSS giao diện (Child Theme)
   Nguồn: artifact "Medoga.vn — Thiết kế giao diện website"
   Quy tắc: mọi tùy biến giao diện nằm ở file này.
   Không dán CSS vào từng khối UX Builder.
   ========================================================== */

/* ---------- 1. Màu (theo Quy phạm nhận diện 2025) ---------- */
:root{
  --mdg-vang:#F9BE11;      /* màu thương hiệu: nền lớn, nút mua, nhãn giảm giá */
  --mdg-vang-dam:#E8AE00;  /* trạng thái hover của nút vàng */
  --mdg-vang-nhat:#FFF3CC; /* khối câu chuyện, ô chọn đang bật */
  --mdg-den:#1A1A1A;       /* chữ chính, nút phụ, footer */
  --mdg-xam-dam:#727171;   /* chữ phụ, giá gạch ngang */
  --mdg-xam:#C9CACA;       /* đường kẻ, viền (không dùng cho chữ) */
  --mdg-xam-nhat:#F5F5F5;  /* nền khối xen kẽ, nền thẻ */
  --mdg-trang:#FFFFFF;
  --mdg-bo-the:20px;
  --mdg-bo-anh:16px;
}

/* ---------- 2. Chữ ---------- */
body{color:var(--mdg-den);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.heading-font{color:var(--mdg-den);letter-spacing:-0.02em}
/* Tiếng Việt viết hoa làm dấu chồng lên nhau: bỏ toàn bộ chữ in hoa tự động của Flatsome */
.nav > li > a,.nav-dropdown li a,.button,button,input[type=submit],
.section-title,.breadcrumbs,.widget-title,.product-title,.uppercase,
.nav-tabs > li > a,.is-divider + *{text-transform:none!important;letter-spacing:normal}
.mdg-h1{font-size:clamp(40px,5vw,68px);line-height:1.04;font-weight:700;letter-spacing:-0.03em}
.mdg-h2{font-size:clamp(28px,3.2vw,44px);line-height:1.1;font-weight:700;letter-spacing:-0.02em}
.mdg-lead{font-size:clamp(16px,1.4vw,19px);line-height:1.6}
.mdg-muted{color:var(--mdg-xam-dam)}

/* ---------- 3. Liên kết và điểm nhấn bàn phím ---------- */
a:hover{text-decoration-color:var(--mdg-vang)}
:focus-visible{outline:3px solid var(--mdg-den);outline-offset:3px}

/* ---------- 4. Nút: bo tròn như ba thanh ngang của logo ---------- */
.button,button.button,input.button{border-radius:999px!important;font-weight:700;min-height:48px;padding:0 28px;line-height:48px}
/* Nút vàng LUÔN chữ đen: chữ trắng trên nền vàng không đọc được */
body .button.primary:not(.is-outline),
body .single_add_to_cart_button,
body .checkout-button,
body #place_order,
body .button.alt{background-color:var(--mdg-vang)!important;color:var(--mdg-den)!important}
body .button.primary:not(.is-outline):hover,
body .single_add_to_cart_button:hover,
body .checkout-button:hover,
body #place_order:hover{background-color:var(--mdg-vang-dam)!important;color:var(--mdg-den)!important}
/* Nút đen: thêm class "mdg-den" ở ô Class của nút trong UX Builder */
body .button.mdg-den{background-color:var(--mdg-den)!important;color:#fff!important;border-color:var(--mdg-den)!important}
body .button.mdg-den:hover{background-color:#3A3A3A!important}
/* Nút viền: thêm class "mdg-vien" */
body .button.mdg-vien{background:transparent!important;color:var(--mdg-den)!important;box-shadow:inset 0 0 0 2px var(--mdg-den);border:0}

/* ---------- 5. Header ---------- */
.header-top{font-size:13px}
.header-main .nav > li > a{font-size:15px;font-weight:400}
.header-main .nav > li.active > a,.header-main .nav > li.current-menu-item > a{font-weight:700;
  text-decoration:underline;text-decoration-color:var(--mdg-vang);text-decoration-thickness:3px;text-underline-offset:8px}
.header-search-form .search-field{border-radius:999px;background:var(--mdg-xam-nhat);border:0;box-shadow:none}
.cart-icon strong,.header-cart-link .cart-icon strong{border-color:var(--mdg-den)}

/* ---------- 6. Thẻ sản phẩm, giá, nhãn giảm giá ---------- */
.product-small .box-image{border-radius:var(--mdg-bo-anh);overflow:hidden;background:var(--mdg-xam-nhat)}
.product-small .box-text .name,.product-small .product-title a{font-weight:700;font-size:16px;line-height:1.35;color:var(--mdg-den)}
.price,.price .amount,.price ins .amount{color:var(--mdg-den)!important;font-weight:700}
.price del,.price del .amount{color:var(--mdg-xam-dam)!important;font-weight:400}
.badge-container .badge-inner,.badge-inner.on-sale{background-color:var(--mdg-vang)!important;color:var(--mdg-den)!important;
  border-radius:999px;font-weight:700;font-size:12px;padding:4px 10px}
.badge{height:auto;width:auto}

/* ---------- 7. Khung mái nhà (hình khối riêng của Medoga) ----------
   Dùng: thêm class "mdg-nha" cho Section/Col/Ảnh trong UX Builder.
   Chỉ dùng cho ảnh chính, thẻ câu chuyện, khối Zalo. Không dùng cho thẻ sản phẩm. */
.mdg-nha{clip-path:polygon(50% 0%,100% 24%,100% 100%,0% 100%,0% 24%)}
.mdg-nha-cao{clip-path:polygon(50% 0%,100% 16%,100% 100%,0% 100%,0% 16%)}
.mdg-nha img,.mdg-nha-cao img{width:100%;height:100%;object-fit:cover}

/* ---------- 8. Nhà voi Medoga (sprite 18 tư thế) ----------
   Dùng trong khối HTML: <span class="mdg-voi mdg-voi-netcube" style="width:120px"></span> */
.mdg-voi{display:inline-block;aspect-ratio:1/1;width:120px;flex-shrink:0;
  background:url(../img/ip-voi-medoga.webp) no-repeat;background-size:600% 300%}
.mdg-voi-family{background-position:0% 0%}   .mdg-voi-hero{background-position:20% 0%}
.mdg-voi-bar{background-position:40% 0%}      .mdg-voi-hug{background-position:60% 0%}
.mdg-voi-bed{background-position:80% 0%}      .mdg-voi-netcube{background-position:100% 0%}
.mdg-voi-hammock{background-position:0% 50%} .mdg-voi-tincan{background-position:20% 50%}
.mdg-voi-bunk{background-position:40% 50%}    .mdg-voi-bird{background-position:60% 50%}
.mdg-voi-stars{background-position:80% 50%}   .mdg-voi-pillow{background-position:100% 50%}
.mdg-voi-zzz{background-position:0% 100%}     .mdg-voi-confused{background-position:20% 100%}
.mdg-voi-blush{background-position:40% 100%}  .mdg-voi-wink{background-position:60% 100%}
.mdg-voi-jojo{background-position:80% 100%}   .mdg-voi-duo{background-position:100% 100%}

/* ---------- 9. Thẻ và khối nền dùng chung ---------- */
.mdg-the{background:var(--mdg-trang);border-radius:var(--mdg-bo-the);overflow:hidden}
.mdg-the-xam{background:var(--mdg-xam-nhat);border-radius:var(--mdg-bo-the);padding:28px}
.mdg-nhan{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;
  background:var(--mdg-vang);color:var(--mdg-den);font-size:13px;font-weight:700}

/* ---------- 10. Footer ---------- */
.footer-wrapper,.absolute-footer{background:var(--mdg-den)!important;color:var(--mdg-xam)}
.footer-wrapper a{color:var(--mdg-xam)}
.footer-wrapper a:hover{color:#fff}
.mdg-phap-ly{font-size:13px;line-height:1.6}
.mdg-phap-ly p{margin-bottom:6px}