/*
Theme Name: Shop Design
Theme URI: https://uat-shop.lubu-workspace.io.vn
Author: Shop
Author URI: https://uat-shop.lubu-workspace.io.vn
Description: Theme tối giản cho website giới thiệu sản phẩm — tối ưu cho Elementor + Elementor Pro, có template listing (archive-product) & chi tiết (single-product). Font brand qua plugin shop-fonts.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: shop-design
Tags: elementor, full-width, custom-menu, translation-ready
*/

/* === BẢNG MÀU CHỦ ĐẠO (3 màu) ===
   --brand-pink  #ff4d8d : màu chính (header, giá, nút chính/CTA)
   --brand-cyan  #4ddeff : màu phụ  (topbar, viền chip, điểm nhấn)
   --brand-green #00ca92 : hover / tương tác                        */
:root {
  --brand-pink: #ff4d8d;
  --brand-cyan: #4ddeff;
  --brand-green: #00ca92;
  --brand-pink-deep: #e63c78;
  /* Màu tươi cho lứa tuổi trẻ em (dùng ở trang chủ / điểm nhấn) */
  --kid-yellow: #ffd23f;
  --kid-orange: #ff8a3d;
  --kid-purple: #9b6bff;
  --kid-mint:   #5fe3b3;
  /* Nền pastel dịu cho các section */
  --pastel-pink:   #fff0f6;
  --pastel-cyan:   #e9fbff;
  --pastel-green:  #e8fbf4;
  --pastel-yellow: #fff7e0;
  --pastel-purple: #f3ecff;
  /* Gradient nền trang (phong cách kids-store: pastel airy) */
  --page-gradient: linear-gradient(135deg, #fff0f6 0%, #eaf9ff 36%, #e9fff5 66%, #fff7e3 100%);
}

/* --- Reset tối thiểu (Elementor lo phần layout) --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: #2b2b2b;
  background: var(--page-gradient, #fff7fb) fixed;
  background-size: cover;
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: #00ca92; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 .5em; line-height: 1.2; }

/* Bao nội dung cho trang KHÔNG dùng Elementor canvas */
.shop-container { max-width: 1200px; margin: 0 auto; padding: 40px 24px; }
.shop-tl {
    padding: 0 !important;
}
/* ==========================================================================
   #block-chinhsach — dải USP dạng BOX MÀU (phong cách card thương hiệu)
   4 ô: mỗi ô 1 màu, bo góc, viền nét đứt trắng, tiêu đề trắng đậm.
   ========================================================================== */
#block-chinhsach .elementor-widget-icon-box .elementor-icon-box-wrapper{
  position: relative;
  border-radius: 16px;
  padding: 38px 32px;
  min-height: 170px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
/* Viền nét đứt bên trong */
#block-chinhsach .elementor-widget-icon-box .elementor-icon-box-wrapper::after{
  content: "";
  position: absolute;
  inset: 12px;
  border: 2px dashed rgba(255,255,255,.55);
  border-radius: 10px;
  pointer-events: none;
}
#block-chinhsach .elementor-icon-box-wrapper{ text-align: left; position: relative; z-index: 1; }
#block-chinhsach .elementor-icon-box-icon{ display: none; }
#block-chinhsach .elementor-icon-box-title,
#block-chinhsach .elementor-icon-box-title *{
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 25px;
  line-height: 1.15;
  margin: 0;
  text-shadow: 0 1px 2px rgba(0,0,0,.18);
}
#block-chinhsach .elementor-icon-box-description{
  color: #fff !important;
  opacity: .95;
  font-size: 15px;
  line-height: 1.5;
  margin-top: 10px;
  text-shadow: 0 1px 2px rgba(0,0,0,.14);
}
/* Màu từng ô */
#block-chinhsach .elementor-column:nth-child(1) .elementor-widget-icon-box .elementor-icon-box-wrapper{ background: #ff4d8d; }
#block-chinhsach .elementor-column:nth-child(2) .elementor-widget-icon-box .elementor-icon-box-wrapper{ background: #3f3d5c; }
#block-chinhsach .elementor-column:nth-child(3) .elementor-widget-icon-box .elementor-icon-box-wrapper{ background: #c3d545; }
#block-chinhsach .elementor-column:nth-child(4) .elementor-widget-icon-box .elementor-icon-box-wrapper{ background: #9b6bff; }
#block-chinhsach .elementor-icon-box-content{ position: relative; z-index: 1; }
#shop-footer .shop-ft-title {
  color: #fff !important;
}