.elementor-4028 .elementor-element.elementor-element-629d011{--display:flex;}/* Start custom CSS */:root {
  --red: #C8002F;
  --red-dark: #8B0020;
  --red-glow: rgba(200,0,47,0.35);
  --gold: #D4A017;
  --gold-light: #F5C842;
  --black: #0A0A0A;
  --dark: #111318;
  --dark2: #1A1D24;
  --dark3: #22262F;
  --gray: #8A8F9A;
  --light: #E8EAF0;
  --white: #FFFFFF;
  --font-display: 'Oswald', sans-serif;
  --font-body: 'Mulish', sans-serif;
}

/* =========================================================
   1. GLOBAL TỔNG QUAN & TYPOGRAPHY
   ========================================================= */
body, .elementor-page, .elementor-widget-wrap {
  background-color: var(--black) !important;
  color: var(--light);
  font-family: var(--font-body);
}

/* Hợp nhất các style của Heading (Elementor + WooCommerce) */
h1, h2, h3, h4, h5, h6, 
.elementor-heading-title, 
.woocommerce-checkout h3 {
  font-family: var(--font-display) !important;
  color: var(--white) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}

.elementor-heading-title em, 
.elementor-heading-title b,
.elementor-heading-title strong {
  color: var(--gold) !important;
  font-style: normal !important;
}

/* =========================================================
   2. NÚT BẤM (BUTTONS) - Gộp chung hiệu ứng và style
   ========================================================= */
/* Style chung cho nút Hero, Elementor và Checkout */
.btn-hero, .elementor-button, 
.woocommerce-checkout #payment #place_order,
.woocommerce-checkout button#place_order,
.woocommerce #payment #place_order {
  background-color: var(--red) !important;
  color: var(--white) !important;
  border: none !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  border-radius: 6px !important; /* Riêng nút place_order sẽ bị ghi đè thành 8px ở dưới */
  box-shadow: 0 0 40px var(--red-glow) !important;
  transition: all 0.3s ease !important;
  animation: pulse-btn 2.5s ease-in-out infinite !important;
  cursor: pointer !important;
}

/* Đặc tính riêng cho nút Hero / Elementor */
.btn-hero, .elementor-button {
  padding: 18px 44px !important;
  font-size: clamp(16px, 2.5vw, 22px) !important;
  letter-spacing: .5px;
  animation-delay: 1.5s !important; 
}

/* Đặc tính riêng cho nút Place Order của WooCommerce */
.woocommerce-checkout #payment #place_order,
.woocommerce-checkout button#place_order,
.woocommerce #payment #place_order {
  font-size: 20px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  width: 100% !important;
  padding: 18px 30px !important;
  border-radius: 8px !important;
  margin-top: 15px !important;
}

/* Hover chung cho tất cả các nút */
.btn-hero:hover, .elementor-button:hover,
.woocommerce-checkout #payment #place_order:hover,
.woocommerce-checkout button#place_order:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 0 60px rgba(200, 0, 47, 0.7) !important;
  background-color: var(--red-dark) !important;
}

/* =========================================================
   3. FORM & INPUTS (Gộp Elementor & WooCommerce)
   ========================================================= */
.elementor-field-group input, 
.elementor-field-group textarea, 
.woocommerce form .form-row input.input-text, 
.woocommerce form .form-row textarea,
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .select2-container--default .select2-selection--single {
  background-color: var(--dark3) !important;
  color: var(--white) !important;
  border: 1px solid rgba(200, 0, 47, 0.3) !important;
  border-radius: 6px !important;
  padding: 12px 16px !important;
  height: auto !important;
  font-size: 15px !important;
}

/* Focus form */
.elementor-field-group input:focus, 
.woocommerce form .form-row input.input-text:focus,
.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus {
  border-color: var(--red) !important;
  box-shadow: 0 0 12px var(--red-glow) !important;
  outline: none !important;
}

/* Form labels */
.elementor-field-label, 
.woocommerce form .form-row label,
.woocommerce-checkout label {
  color: var(--light) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  margin-bottom: 6px !important;
}

.woocommerce-checkout label .required {
  color: var(--red) !important;
  text-decoration: none !important;
}

/* =========================================================
   4. WOOCOMMERCE CHUYÊN SÂU
   ========================================================= */
/* Ẩn các trường không cần thiết & tiêu đề Additional Information (Dùng cho cả Woo gốc & Elementor Pro) */
#billing_postcode_field,
#billing_address_2_field,
#order_comments_field,
.woocommerce-additional-fields,
.woocommerce-additional-fields__field-wrapper,
.woocommerce-additional-fields h3,
h3#order_comments_heading,
.elementor-checkout__additional-fields,
.e-checkout__additional-information {
  display: none !important;
}

/* Ẩn khoảng trống thừa (nếu có) do Elementor tạo ra sau khi ẩn chữ */
.elementor-checkout__additional-fields-wrapper {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Bảng tóm tắt đơn hàng (Order Review) */
.woocommerce-checkout-review-order,
#order_review,
.woocommerce-checkout table.shop_table {
  background: var(--dark2) !important;
  border: 1px solid rgba(200, 0, 47, 0.3) !important;
  border-radius: 12px !important;
  color: var(--light) !important;
  overflow: hidden !important;
}

.woocommerce-checkout table.shop_table {
  border-collapse: collapse !important;
  width: 100% !important;
  margin-bottom: 20px !important;
}

.woocommerce table.shop_table th, 
.woocommerce table.shop_table td,
.woocommerce-checkout table.shop_table th,
.woocommerce-checkout table.shop_table td,
.woocommerce-checkout table.shop_table tr,
.woocommerce-checkout table.shop_table tbody,
.woocommerce-checkout table.shop_table tfoot {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: var(--white) !important;
  padding: 14px 18px !important;
  font-size: 15px !important;
}

.woocommerce-checkout table.shop_table .product-name { font-weight: 600 !important; }
.woocommerce-checkout table.shop_table .product-quantity { color: var(--gold) !important; font-weight: bold !important; }
.woocommerce-checkout table.shop_table .amount,
.woocommerce-checkout table.shop_table .order-total .amount {
  color: var(--gold-light) !important;
  font-family: var(--font-display) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
}

/* Phương thức thanh toán */
#add_payment_method #payment,
.woocommerce-checkout #payment {
  background: var(--dark2) !important;
  border: 1px solid rgba(200, 0, 47, 0.3) !important;
  border-radius: 12px !important;
  padding: 20px !important;
  margin-top: 20px !important;
}

.woocommerce-checkout #payment ul.payment_methods {
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding-bottom: 15px !important;
  margin-bottom: 15px !important;
}

.woocommerce-checkout #payment ul.payment_methods li {
  background: var(--dark3) !important;
  border: 1px solid rgba(200, 0, 47, 0.3) !important;
  border-radius: 8px !important;
  padding: 14px 18px !important;
  margin-bottom: 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.woocommerce-checkout #payment ul.payment_methods li label {
  cursor: pointer !important;
  margin: 0 !important;
}

.woocommerce-checkout #payment input[type="radio"] {
  accent-color: var(--red) !important;
  width: 18px !important;
  height: 18px !important;
}

.woocommerce-checkout #payment div.payment_box {
  background: var(--dark) !important;
  color: var(--gray) !important;
  border-radius: 6px !important;
  padding: 12px 16px !important;
  margin-top: 10px !important;
  font-size: 14px !important;
  border-left: 3px solid var(--gold) !important;
}

/* =========================================================
   5. CÁC KHỐI THÀNH PHẦN (COMPONENTS)
   ========================================================= */
/* Gộp Background Hero chung */
.hero, .hero-animated-bg {
  position: relative !important;
  overflow: hidden !important;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, #2a0010 0%, var(--black) 70%) !important;
}

.pain-card {
  background: var(--dark3) !important;
  border: 1px solid rgba(255,255,255,0.06);
  border-left: 3px solid var(--red) !important;
  padding: 24px 22px;
  border-radius: 8px;
  transition: transform .25s, border-color .25s;
}
.pain-card:hover { transform: translateX(4px); border-left-color: var(--gold) !important; }

.pricing-card {
  background: var(--dark2);
  border: 2px solid var(--red) !important;
  border-radius: 16px;
  box-shadow: 0 0 60px rgba(200,0,47,.2);
}

.story-wrap {
  border-left: 3px solid var(--red) !important;
  padding-left: 32px;
}

.guarantee-box {
  background: var(--dark2) !important;
  border: 1px dashed rgba(212,160,23,.4) !important;
  border-radius: 12px;
  padding: 36px 32px;
}

/* =========================================================
   6. ANIMATIONS & PARTICLES
   ========================================================= */
.hero-particles {
  position: absolute; top: 0; left: 0; 
  width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
}

.hero-particle {
  position: absolute; bottom: -10px;
  border-radius: 50%; opacity: 0;
  animation: float-up linear infinite;
}

@keyframes pulse-btn {
  0%, 100% { box-shadow: 0 0 40px var(--red-glow); }
  50%      { box-shadow: 0 0 80px rgba(200,0,47,.7); }
}

@keyframes float-up {
  0%   { transform: translateY(0) scale(1); opacity: 0; }
  15%  { opacity: 0.8; }
  85%  { opacity: 0.4; }
  100% { transform: translateY(-105vh) scale(0.3); opacity: 0; }
}/* End custom CSS */