/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;600;700;800&display=swap');
/*************** ADD CUSTOM CSS HERE.    ***************/
@media only screen and (max-width: 48em) {
    /*************** ADD MOBILE ONLY CSS HERE  ***************/
    /* Code mobile cũ của bạn (nếu có) nằm ở đây */

} 
/* ⬅️ Dòng code cũ của bạn kết thúc tại dấu đóng ngoặc này */

/* ====================================================== */
/* ⬇️ BẮT ĐẦU PASTE CODE MỚI TỪ DÒNG NÀY TRỞ ĐI ⬇️ */
/* ====================================================== */
/* GIAO DIỆN LOGIN: V19 - SIÊU TƯƠNG PHẢN & TINH GỌN (ULTRA)
   ====================================================== */

/* ================================
   LOGIN LIGHTBOX - LIGHT THEME
   (white, compact padding, wider box)
================================== */

/* 0) Reset box sizing để không bị hẹp sai do padding */
#login-form-popup,
#login-form-popup * {
  box-sizing: border-box;
}

/* 1) KHUNG CHÍNH: NỀN TRẮNG + RỘNG HƠN ĐỂ CÂN ĐỐI VỚI CAPTCHA */
#login-form-popup {
  background: rgba(255, 255, 255, 0.98) !important;
  border: 1px solid #d9dee7 !important;
  border-radius: 14px !important;

  /* Bo sát viền: 1–2mm ~ 4–8px */
  padding: 12px 14px !important;

  /* Rộng hơn để đỡ “cao - hẹp” khi có captcha */
  width: min(92vw, 560px) !important;
  max-width: 560px !important;

  /* Đổ bóng nhẹ kiểu clean */
  box-shadow: 0 16px 60px rgba(16, 24, 40, 0.16) !important;

  /* Blur nền (nếu trình duyệt hỗ trợ) */
  backdrop-filter: blur(8px);
}

/* 2) TIÊU ĐỀ */
#login-form-popup h3 {
  color: #111827 !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  margin: 2px 0 10px 0 !important;
  text-shadow: none !important;
  letter-spacing: 0.2px;
}

/* 3) LABEL: SÁT HƠN + RÕ */
#login-form-popup label {
  color: #111827 !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  margin: 0 0 4px 0 !important; /* sát hơn */
  display: block;
  opacity: 1 !important;
  line-height: 1.2;
}

/* 4) Ô NHẬP: THẤP HƠN + ĐỦ RỘNG */
#login-form-popup input[type="text"],
#login-form-popup input[type="email"],
#login-form-popup input[type="password"] {
  width: 100% !important;
  background-color: #f8fafc !important; /* xám rất nhạt */
  color: #111827 !important;

  border: 1px solid #cfd7e3 !important;
  border-radius: 10px !important;

  height: 36px !important;         /* giảm chiều cao để bớt dài */
  font-size: 14px !important;

  /* bo sát viền: ít padding hơn */
  padding: 0 10px !important;

  margin: 0 0 10px 0 !important;   /* giảm khoảng cách */
}

/* Placeholder */
#login-form-popup input::placeholder {
  color: rgba(17, 24, 39, 0.45) !important;
}

/* Focus rõ + sạch */
#login-form-popup input[type="text"]:focus,
#login-form-popup input[type="email"]:focus,
#login-form-popup input[type="password"]:focus {
  outline: none !important;
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16) !important;
  background: #ffffff !important;
}

/* 5) KHU VỰC CAPTCHA: GIẢM “CHIỀU CAO CẢM GIÁC” + FIT NGANG */
/* Lưu ý: nội dung trong iframe reCAPTCHA không style sâu được,
   nhưng ta có thể can thiệp wrapper để đỡ chật và cân đối. */
#login-form-popup .g-recaptcha,
#login-form-popup .grecaptcha-badge,
#login-form-popup [id*="recaptcha"],
#login-form-popup [class*="recaptcha"] {
  max-width: 100% !important;
}

/* Nếu reCAPTCHA v2 thường rộng 304px, khung đã tăng width nên sẽ ổn.
   Trường hợp mobile bị tràn: scale nhẹ cho wrapper */
@media (max-width: 420px) {
  #login-form-popup .g-recaptcha {
    transform: scale(0.92);
    transform-origin: left top;
  }
}

/* 6) CHECKBOX / “Ghi nhớ mật khẩu”: cho gọn */
#login-form-popup input[type="checkbox"] {
  transform: translateY(1px);
}
#login-form-popup .rememberme,
#login-form-popup .remember-me,
#login-form-popup .login-remember {
  margin: 6px 0 8px 0 !important;
}

/* 7) NÚT ĐĂNG NHẬP: CLEAN + NỔI */
#login-form-popup button[name="login"],
#login-form-popup button[type="submit"],
#login-form-popup input[type="submit"] {
  width: 100% !important;
  background: #2563eb !important;
  color: #ffffff !important;

  font-size: 14.5px !important;
  font-weight: 900 !important;

  height: 38px !important;      /* thấp hơn */
  border: none !important;
  border-radius: 10px !important;

  margin: 4px 0 8px 0 !important;
  cursor: pointer;
}

#login-form-popup button[name="login"]:hover,
#login-form-popup button[type="submit"]:hover,
#login-form-popup input[type="submit"]:hover {
  filter: brightness(0.98);
}

/* 8) LINK PHỤ: GỌN + DỄ ĐỌC */
#login-form-popup .lost-password,
#login-form-popup .registration-link {
  margin-top: 8px !important;
  padding-top: 8px !important;
  border-top: 1px solid rgba(17, 24, 39, 0.08);
}
#login-form-popup .lost-password a,
#login-form-popup .registration-link,
#login-form-popup .registration-link a {
  color: #2563eb !important;
  font-size: 12px !important;
  opacity: 1 !important;
  text-decoration: none;
}
#login-form-popup .lost-password a:hover,
#login-form-popup .registration-link a:hover {
  text-decoration: underline;
}

/* 9) “HOẶC” + GOOGLE: CÂN ĐỐI, ÍT CAO */
#login-form-popup .or,
#login-form-popup .divider,
#login-form-popup .separator {
  margin: 8px 0 !important;
}

/* Nút Google (giữ class cũ của bạn) */
#login-form-popup .google-login-btn {
  width: 100% !important;
  background-color: #ffffff !important;
  border: 1px solid #cfd7e3 !important;
  color: #111827 !important;

  height: 38px !important;
  font-size: 14px !important;
  font-weight: 700 !important;

  border-radius: 10px !important;
  margin-top: 8px !important;
}

/* Nếu plugin dùng button/link khác cho Google (thường gặp),
   thêm vài selector “đỡ miss” */
#login-form-popup a[href*="google"],
#login-form-popup button[class*="google"],
#login-form-popup .nsl-button-google,
#login-form-popup .nsl-button {
  border-radius: 10px !important;
}

/* 10) BỚT “HẸP” DO CÁC WRAPPER BÊN TRONG */
#login-form-popup form,
#login-form-popup .form,
#login-form-popup .content,
#login-form-popup .inner {
  width: 100% !important;
}

/* 11) OPTIONAL: giảm khoảng cách giữa các đoạn text dài (terms/recaptcha note) */
#login-form-popup p,
#login-form-popup .description,
#login-form-popup .note,
#login-form-popup .recaptcha-terms {
  margin: 6px 0 !important;
  line-height: 1.35;
  color: rgba(17, 24, 39, 0.75);
  font-size: 12px;
}

/* --- TOP BAR: GIỮ NGUYÊN STYLE - CHỈ ÉP FULL MÀN HÌNH --- */
.top-bar-announcement {
    background: rgba(10, 11, 15, 0.95) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(90deg, transparent, #3b82f6, #8b5cf6, transparent);
    border-image-slice: 1;
    padding: 5px 0 !important; /* Giữ nguyên độ dày 5px */
    position: relative;
    z-index: 9999;
    /* KỸ THUẬT ÉP FULL MÀN HÌNH KHÔNG CẦN SỬA HTML */
    width: 100vw !important;
    position: relative;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    overflow: hidden;
}

/* --- HỦY BỎ GIỚI HẠN CỦA CONTAINER MÀ KHÔNG LÀM THAY ĐỔI CẤU TRÚC --- */
.top-bar-announcement .container {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* --- GIỮ NGUYÊN HIỆU ỨNG CHẠY CHỮ CỦA BẠN --- */
.scrolling-text {
    display: flex;
    white-space: nowrap;
    animation: marquee 30s linear infinite;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 11px !important; 
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #ffffff;
}

/* --- GIỮ NGUYÊN KHOẢNG CÁCH CỦA CÁC CAPSULE --- */
.scrolling-text span {
    padding: 4px 16px;
    margin-right: 20px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.3s ease;
}

/* Hover Effect giữ nguyên */
.top-bar-announcement:hover .scrolling-text span {
    border-color: rgba(59, 130, 246, 0.6);
    background: rgba(59, 130, 246, 0.15);
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.2);
}

/* --- ANIMATIONS & ICONS GIỮ NGUYÊN --- */
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } 
}

.status-online {
    color: #00ff88;
    font-size: 8px;
    box-shadow: 0 0 5px #00ff88;
    border-radius: 50%;
    animation: pulse-glow 1.5s infinite alternate;
}

.fa-bolt { 
    color: #fbbf24;
    filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.6)); 
}
.fa-gift { 
    color: #ec4899; 
    filter: drop-shadow(0 0 8px rgba(236, 72, 153, 0.6));
}

@keyframes pulse-glow {
    from { opacity: 0.5; box-shadow: 0 0 2px #00ff88; }
    to { opacity: 1; box-shadow: 0 0 8px #00ff88; }
}


/*-------------------------- BOX LIÊN HỆ NGANG HÀNG -----------------------------*/
.header-contact-box-retro {
    display: flex;
    align-items: center; /* Dóng hàng ngang các phần tử bên trong */
    gap: 15px; /* Khoảng cách giữa icon và chữ */
    padding: 8px 20px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 4px;
    border: 1px solid rgba(255, 0, 0, 0.1);
    transition: all 0.3s ease;
}

/* --- ICON : TĂNG KÍCH THƯỚC & NHỊP ĐẬP --- */
.retro-icon {
    font-size: 32px; /* Tăng kích thước icon lên mức nổi bật */
    color: #ff0000;
    line-height: 1;
    display: block;
    filter: drop-shadow(0 0 8px rgba(255, 0, 0, 0.8));
    /* Sử dụng hiệu ứng nhịp đập công nghệ (Pulse) */
    animation: tech-pulse-red 2s infinite ease-in-out;
}

.contact-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.contact-inner span {
    font-size: 11px;
    text-transform: uppercase;
    color: #94a3b8;
    letter-spacing: 1px;
    font-weight: 700;
    line-height: 1.2;
}

.contact-inner a {
    font-size: 18px; /* Tăng kích thước số điện thoại */
    font-weight: 900;
    color: #ffffff !important;
    line-height: 1.1;
    text-decoration: none;
    font-family: 'Be Vietnam Pro', sans-serif;
}

/* Hiệu ứng khi di chuột */
.header-contact-box-retro:hover {
    background: rgba(255, 0, 0, 0.08);
    border-color: #ff0000;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 0, 0, 0.3);
}

.header-contact-box-retro:hover a {
    color: #ff0000 !important;
}

/* --- ANIMATION: NHỊP ĐẬP CÔNG NGHỆ MÀU ĐỎ --- */
@keyframes tech-pulse-red {
    0% {
        transform: scale(1);
        filter: drop-shadow(0 0 5px rgba(255, 0, 0, 0.8));
    }
    50% {
        transform: scale(1.15); /* Icon to lên khi "đập" */
        filter: drop-shadow(0 0 20px rgba(255, 0, 0, 1));
        color: #ff3131;
    }
    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 5px rgba(255, 0, 0, 0.8));
    }
}

/* ============================================================
   TỔNG HỢP CSS HEADER MAIN: ĐỒNG BỘ - ĐẲNG CẤP - TRẢI NGHIỆM CAO
   ============================================================ */

/* 1. ÉP ĐỒNG BỘ 1 MÀU TRẮNG SÁNG CHO TẤT CẢ TEXT & ICON */
.header-main,
.header-main a,
.header-main i,
.header-main span,
.header-main li > a,
.header-main .searchform input,
.header-main .searchform button i {
    color: #f1f5f9 !important; /* Màu Trắng xanh Slate-100 */
    opacity: 1 !important;
    font-weight: 600 !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-shadow: none !important;
}

/* 2. HIỆU ỨNG PHÁT SÁNG KHI HOVER (ĐỒNG BỘ CYAN) */
.header-main a:hover,
.header-main a:hover i,
.header-main li.active > a,
.header-main .searchform:hover button i {
    color: #00ecff !important; /* Màu Cyan Neon */
    filter: drop-shadow(0 0 8px rgba(0, 236, 255, 0.8)) !important;
    text-shadow: 0 0 10px rgba(0, 236, 255, 0.5) !important;
    transform: translateY(-2px); /* Nhích nhẹ tạo trải nghiệm mượt */
}

/* 3. HIỆU ỨNG LOGO ĐẲNG CẤP: ZOOM & SHINE SWEEP */
.header-main .logo a {
    position: relative;
    display: block;
    overflow: hidden !important;
    transition: all 0.5s ease-in-out !important;
}

/* Phóng to logo khi hover */
.header-main .logo a:hover {
    transform: scale(1.15) !important; /* Phóng lớn 15% để bắt mắt */
    filter: drop-shadow(0 0 15px rgba(0, 236, 255, 0.4)) !important;
}

/* Tia sáng quét qua Logo */
.header-main .logo a::before {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        to right, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.4) 50%, 
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-25deg);
    z-index: 10;
}

.header-main .logo a:hover::before {
    left: 150%;
    transition: all 0.9s ease-in-out;
}

/* 4. XỬ LÝ RIÊNG KHUNG SEARCH (TRÁNH VIỀN ĐEN) */
.header-main .searchform {
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-radius: 4px !important;
}

.header-main .searchform:hover {
    border-color: #00ecff !important;
    box-shadow: 0 0 15px rgba(0, 236, 255, 0.2);
}

.header-main .searchform input::placeholder {
    color: rgba(241, 245, 249, 0.5) !important;
}

/* 5. ĐIỂM NHẤN HOTLINE ĐỎ (GIỮ NGUYÊN ĐỂ CTA HIỆU QUẢ) */
.header-contact-box-retro .retro-icon {
    color: #ff0000 !important;
    filter: drop-shadow(0 0 8px rgba(255, 0, 0, 0.8)) !important;
}

.header-contact-box-retro:hover {
    border-color: #ff0000 !important;
    background: rgba(255, 0, 0, 0.08) !important;
}

/* =========================================
   HEADER BOTTOM: DIGITAL LASER MENU EFFECT
   ========================================= */

/* 1. Trạng thái nghỉ: Sạch sẽ và rõ nét */
.header-bottom-nav > li > a {
    position: relative;
    color: #cbd5e1 !important; /* Màu xám Slate sáng */
    font-weight: 700 !important;
    font-size: 13px !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 10px 18px !important;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1) !important;
}
/* 2. Hiệu ứng Hover: Phát sáng và Nhấc nhẹ */
.header-bottom-nav > li > a:hover {
    color: #ffffff !important; /* Chữ sáng trắng tuyệt đối */
    transform: translateY(-2px); /* Nhấc nhẹ lên */
    text-shadow: 0 0 10px rgba(0, 236, 255, 0.6); /* Glow xanh Cyan nhẹ */
}

/* 3. Tạo thanh Laser Gạch chân (Underline Tracer) */
.header-bottom-nav > li > a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #00ecff, #0068FF); /* Gradient xanh AI */
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    transform: translateX(-50%);
    box-shadow: 0 0 8px rgba(0, 236, 255, 0.8);
}

/* Kích hoạt thanh Laser khi Hover hoặc Trang đang hoạt động */
.header-bottom-nav > li > a:hover::after,
.header-bottom-nav > li.current-menu-item > a::after {
    width: 60%; /* Thanh laser dài ra 60% độ rộng của menu */
}

/* 4. Hiệu ứng Dropdown (Menu con) đẳng cấp */
.nav-dropdown {
    background: rgba(10, 11, 15, 0.95) !important; /* Nền đen sâu mờ */
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
    padding: 15px 0 !important;
}

.nav-dropdown li a {
    color: #94a3b8 !important;
    font-size: 12px !important;
    padding: 8px 25px !important;
    border-left: 0px solid #00ecff;
    transition: all 0.3s ease !important;
}

.nav-dropdown li a:hover {
    color: #00ecff !important;
    background: rgba(0, 236, 255, 0.05) !important;
    padding-left: 32px !important; /* Đẩy nhẹ sang phải khi hover */
    border-left: 3px solid #00ecff; /* Hiện vạch xanh bên trái */
}

/* ============================================================
   FIX LỖI HIỂN THỊ SEARCH DROPDOWN (TEXT TRẮNG - NỀN TRẮNG)
   ============================================================ */

/* 1. Đưa nền của ô chọn danh mục (Category) về tông màu tối Cyber */
.header-main .searchform select {
    background-color: #0f172a !important; /* Nền xanh đen tối [cite: 276] */
    color: #00ecff !important;            /* Chữ màu Cyan Neon [cite: 191] */
    border: 1px solid rgba(0, 236, 255, 0.3) !important;
    border-radius: 4px 0 0 4px !important;
}

/* 2. Fix khung thả xuống (Dropdown List) bị trắng xóa */
/* Target vào các tùy chọn bên trong danh sách thả xuống */
.header-main .searchform select option {
    background-color: #0f172a !important; /* Nền tối sâu */
    color: #ffffff !important;            /* Chữ trắng rõ nét [cite: 188] */
    padding: 10px !important;
}

/* 3. Fix màu chữ trong ô Input tìm kiếm */
.header-main .searchform input[type="search"] {
    color: #ffffff !important;            /* Chữ trắng khi gõ [cite: 288] */
    background-color: rgba(255, 255, 255, 0.05) !important; /* Nền hơi trong suốt [cite: 201] */
}

/* 4. Hiệu ứng khi Hover vào các mục trong danh sách */
.header-main .searchform select:focus {
    border-color: #00ecff !important;     /* Phát sáng Cyan khi click [cite: 202] */
    box-shadow: 0 0 10px rgba(0, 236, 255, 0.3) !important;
    outline: none !important;
}

/* 5. Đồng bộ icon tìm kiếm */
.header-main .searchform button[type="submit"] i {
    color: #00ecff !important;            /* Icon kính lúp màu Cyan [cite: 191] */
}

/* ====================================== ZALO AGENCY BLOCK: FINAL VIP VER ======================================== */
.zalo-agency-block {
    position: relative;
    display: flex;
    align-items: center;
    padding: 8px 15px !important; /* Đã tinh chỉnh gọn gàng */
    background: rgba(0, 104, 255, 0.1) !important;
    border-radius: 8px;
    text-decoration: none !important;
    overflow: hidden;
    border: 1px solid rgba(0, 104, 255, 0.3) !important;
    min-width: 180px;
    transition: all 0.3s ease;
    margin-left: 10px; /* Cách hotline ra một chút */
}

/* Lớp phát sáng nền (Glow) */
.zalo-glow-layer {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(0, 104, 255, 0.4) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* Hiệu ứng viền chạy (Tracer) */
.zalo-border-tracer {
    position: absolute;
    inset: 0;
    border: 1px solid #00ecff;
    border-radius: 8px;
    clip-path: inset(0 95% 0 0);
    opacity: 0;
    transition: all 0.6s ease;
}

/* Hover Effects */
.zalo-agency-block:hover {
    background: rgba(0, 104, 255, 0.2) !important;
    box-shadow: 0 0 15px rgba(0, 236, 255, 0.3);
    transform: translateY(-2px);
}

.zalo-agency-block:hover .zalo-border-tracer {
    clip-path: inset(0 0 0 0);
    opacity: 1;
}

.zalo-agency-block:hover .zalo-glow-layer {
    opacity: 1;
}

/* Nội dung bên trong */
.zalo-content {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 2;
}

/* Icon Wrapper */
.zalo-icon-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 236, 255, 0.1);
}

.online-indicator {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 8px;
    height: 8px;
    background: #00ff88;
    border: 1px solid #000;
    border-radius: 50%;
    box-shadow: 0 0 5px #00ff88;
    animation: blink-zalo 1.5s infinite;
}

/* Text Stack */
.zalo-text-stack {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.zalo-label {
    font-size: 9px;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}

.zalo-main-text {
    font-size: 13px;
    color: #ffffff !important;
    font-weight: 800;
}

/* Cấu hình ảnh Zalo */
.zalo-png-icon {
    /* Các thuộc tính width/height đã được xử lý trong HTML, CSS này chỉ hỗ trợ thêm */
    object-fit: contain;
    filter: none;
}

@keyframes blink-zalo {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ============================================================
   ABSOLUTE FOOTER: CYBERPUNK HUB STYLE (FIXED & BRANDED)
   ============================================================ */

/* 1. NỀN ABSOLUTE FOOTER - HIỆU ỨNG KÍNH MỜ SÂU */
.absolute-footer {
    background-color: rgba(10, 11, 15, 0.98) !important;
    backdrop-filter: blur(10px);
    border-top: 1px solid transparent;
    border-image: linear-gradient(90deg, transparent, #3b82f6, #8b5cf6, transparent);
    border-image-slice: 1;
    padding: 30px 0 !important;
    position: relative;
    z-index: 1;
}

/* 2. ÉP KHUNG VÀ DÓNG HÀNG (QUAN TRỌNG ĐỂ VÀO KHUNG) */
.pn-footer-social-wrap, 
.pn-footer-trust-wrap {
    max-width: 1080px !important;
    margin: 0 auto !important;
    padding: 0 15px !important;
    display: flex !important;
    position: relative;
    z-index: 10 !important; /* Đảm bảo lớp tương tác nằm trên cùng để hover được */
}

/* 3. CỘT MẠNG XÃ HỘI (BEFORE) - MÀU SẮC CHUẨN BRAND */
.pn-footer-social-wrap {
    justify-content: flex-start !important;
    gap: 20px !important;
    margin-bottom: 15px !important;
}

.pn-footer-social-wrap a {
    color: #94a3b8 !important;
    font-size: 20px !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    display: inline-block !important;
}

/* Hiệu ứng Hover màu chuẩn cho từng mạng xã hội */
.pn-footer-social-wrap a[title*="Facebook"]:hover { 
    color: #1877F2 !important;
    filter: drop-shadow(0 0 10px #1877F2); 
    transform: translateY(-5px); 
}
.pn-footer-social-wrap a[title*="YouTube"]:hover { 
    color: #FF0000 !important; 
    filter: drop-shadow(0 0 10px #FF0000); 
    transform: translateY(-5px);
}
.pn-footer-social-wrap a[title*="LinkedIn"]:hover { 
    color: #0A66C2 !important; 
    filter: drop-shadow(0 0 10px #0A66C2); 
    transform: translateY(-5px); 
}
.pn-footer-social-wrap a[title*="TikTok"]:hover { 
    color: #00f2ea !important;
    filter: drop-shadow(0 0 10px #ff0050); 
    transform: translateY(-5px); 
}

/* 4. CỘT HUY HIỆU TIN CẬY (AFTER) - DÓNG NGANG COPYRIGHT */
.pn-footer-trust-wrap {
    justify-content: flex-end !important;
    align-items: center !important;
    margin-top: -45px !important; /* Kéo lên ngang hàng Copyright */
}

.pn-badge {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 15px !important;
    color: #94a3b8 !important;
    border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.pn-badge:first-child { border-left: none !important; }

.pn-badge i { 
    color: #00ecff !important; 
    font-size: 15px !important; 
    transition: 0.3s ease;
}

/* Hover Badge: Icon phát sáng nhẹ */
.pn-badge:hover i { transform: scale(1.2); filter: drop-shadow(0 0 8px #00ecff); }
.pn-badge span { font-size: 10px !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 1px !important; }

/* 5. TEXT COPYRIGHT & MENU */
.copyright-footer {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 13px;
    color: #94a3b8 !important;
    max-width: 1080px;
    margin: 0 auto;
}

.copyright-footer strong {
    color: #00ecff !important;
    text-shadow: 0 0 10px rgba(0, 236, 255, 0.3);
}

.footer-nav li a {
    color: #cbd5e1 !important;
    font-weight: 600 !important;
    transition: all 0.3s ease;
}

.footer-nav li a:hover {
    color: #00ecff !important; /* Đổi về Cyan cho đồng bộ dòng Tech */
    text-shadow: 0 0 8px rgba(0, 236, 255, 0.5);
}

/* 6. BACK TO TOP (BACK TO TOP) */
#top-link {
    background-color: rgba(0, 236, 255, 0.05) !important;
    border: 1px solid rgba(0, 236, 255, 0.3);
    border-radius: 4px;
    color: #00ecff !important;
}

#top-link:hover {
    background-color: #00ecff !important;
    color: #fff !important;
    box-shadow: 0 0 15px #00ecff;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .pn-footer-trust-wrap { margin-top: 20px !important; justify-content: center !important; }
    .pn-footer-social-wrap { justify-content: center !important; }
}

/* ============================================================
   🎨 CHECKOUT UX PRO - CÂN BẰNG MÀU SẮC & TRẢI NGHIỆM
   ============================================================ */

/* --- 1. PHÂN CẤP TIÊU ĐỀ (HEADING HIERARCHY) --- */
/* H3: Tiêu đề khu vực (Thông tin thanh toán, Đơn hàng) -> MÀU TRẮNG */
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3,
#order_review_heading {
    color: #ffffff !important; /* Trắng tinh khiết để làm điểm tựa mắt */
    font-size: 18px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding-bottom: 12px !important;
    margin-bottom: 25px !important;
    letter-spacing: 0.5px !important;
}

/* --- 2. NHÃN FORM (LABELS) --- */
/* Label: Tên, Họ, Địa chỉ -> MÀU XÁM BẠC (Dịu mắt, không tranh chấp với tiêu đề) */
.woocommerce-checkout label {
    color: #cbd5e1 !important; /* Xám sáng (Slate-300) */
    font-weight: 500 !important;
    font-size: 14px !important;
    margin-bottom: 6px !important;
    display: block !important;
}
/* Dấu sao bắt buộc (*) -> MÀU ĐỎ */
.woocommerce-checkout label .required {
    color: #ef4444 !important; /* Đỏ nhạt */
    text-decoration: none !important;
}

/* --- 3. INPUT (Ô NHẬP LIỆU) --- */
/* Nền tối sâu, chữ trắng, viền xám mờ */
.woocommerce-checkout input.input-text,
.woocommerce-checkout textarea,
.select2-selection {
    background-color: #0f172a !important; /* Nền xanh đen tối */
    border: 1px solid #334155 !important; /* Viền xám xanh */
    color: #fff !important;
    border-radius: 6px !important;
    padding: 12px !important;
    transition: all 0.3s ease !important;
}
/* Khi bấm vào -> Viền sáng lên nhẹ nhàng */
.woocommerce-checkout input.input-text:focus,
.woocommerce-checkout textarea:focus {
    border-color: #38bdf8 !important; /* Xanh dương sáng */
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.1) !important;
}

/* --- 4. LIÊN KẾT (LINKS) - KHẮC PHỤC LỖI "CHUỐI" --- */
/* Link đăng nhập, nhập mã giảm giá -> MÀU XANH DƯƠNG (Chuẩn UX Link) */
.woocommerce-form-login-toggle a,
.woocommerce-form-coupon-toggle a,
.woocommerce-privacy-policy-text a {
    color: #60a5fa !important; /* Xanh da trời (Blue-400) */
    text-decoration: none !important;
    font-weight: 600 !important;
    border-bottom: 1px dashed transparent !important;
}
.woocommerce-form-login-toggle a:hover,
.woocommerce-form-coupon-toggle a:hover {
    color: #ffffff !important;
    text-decoration: underline !important;
}

/* Khung thông báo (Bạn có mã ưu đãi?) */
.woocommerce-info {
    background-color: rgba(56, 189, 248, 0.1) !important;
    border-top: 3px solid #38bdf8 !important;
    color: #e2e8f0 !important;
}
.woocommerce-info::before { color: #38bdf8 !important; }

/* --- 5. BẢNG ĐƠN HÀNG (ORDER TABLE) --- */
/* Header Bảng (Sản phẩm / Tạm tính) -> MÀU XÁM ĐẬM (Làm nền) */
.shop_table thead th {
    color: #94a3b8 !important; /* Xám trung tính */
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border-bottom: 2px solid rgba(255,255,255,0.05) !important;
}

/* Tên sản phẩm -> MÀU TRẮNG (Thông tin chính) */
.shop_table td.product-name {
    color: #f1f5f9 !important; /* Trắng ngà */
    font-weight: 500 !important;
    padding: 15px 0 !important;
}
/* Số lượng x1 -> MÀU XÁM */
.shop_table td.product-name strong { color: #94a3b8 !important; }

/* --- 6. TIỀN BẠC (MONEY) - ĐIỂM NHẤN QUAN TRỌNG --- */
/* Giá thành phần & Tổng phụ -> XANH LÁ NHẸ */
.shop_table td.product-total .amount,
.cart-subtotal td .amount {
    color: #4ade80 !important; /* Xanh lá sáng */
    font-weight: 600 !important;
}

/* Dòng TỔNG CỘNG (Total) -> TO & SÁNG NHẤT */
tr.order-total th { 
    color: #fff !important; 
    font-size: 16px !important;
    vertical-align: middle !important;
}
tr.order-total td .amount {
    font-size: 24px !important;
    color: #00E676 !important; /* Xanh lá Neon đậm đà */
    font-weight: 800 !important;
    text-shadow: 0 0 20px rgba(0, 230, 118, 0.25) !important;
}

/* --- 7. NÚT ĐẶT HÀNG (PLACE ORDER) - PHIÊN BẢN "MONEY MAKER" --- */
/* Đổi từ Xanh Dương sang CAM/VÀNG để kích thích chốt đơn */
#place_order {
    /* Gradient Cam rực rỡ -> Tạo cảm giác hành động gấp */
    background: linear-gradient(92deg, #f97316 0%, #ea580c 100%) !important; 
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    padding: 20px 30px !important; /* To hơn chút để dễ bấm trên Mobile */
    border-radius: 8px !important; /* Bo góc nhẹ, trông cứng cáp hơn */
    border: 1px solid rgba(255,255,255,0.2) !important;
    box-shadow: 0 0 20px rgba(249, 115, 22, 0.4) !important; /* Phát sáng màu cam */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative;
    overflow: hidden;
    margin-top: 20px !important;
}

/* Hiệu ứng Hover: Nổi lên và sáng hơn */
#place_order:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 40px rgba(249, 115, 22, 0.6) !important;
    background: linear-gradient(92deg, #fb923c 0%, #ea580c 100%) !important;
}

/* --- 8. THÊM BIỂU TƯỢNG BẢO MẬT (TRUST SIGNAL) --- */
/* Chèn chữ "Bảo mật SSL 100%" vào dưới nút đặt hàng */
#place_order::after {
    content: "🔒 Secure Payment 24/7";
    display: block;
    font-size: 10px;
    font-weight: normal;
    text-transform: none;
    opacity: 0.8;
    margin-top: 2px;
}

/* --- 9. LÀM NỔI BẬT DÒNG TỔNG CỘNG (THE BOX) --- */
/* Tạo khung bao quanh dòng Total để khách biết phải trả bao nhiêu */
tr.order-total {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(74, 222, 128, 0.3) !important; /* Viền xanh lá mờ */
}

tr.order-total th, 
tr.order-total td {
    padding: 20px 10px !important;
}

/* ============================================================
   🎯 FIX TOÀN BỘ SỐ TIỀN TRANG CẢM ƠN (TRÁI & PHẢI)
   ============================================================ */

/* 1. SỐ TIỀN TRONG BẢNG CHI TIẾT (Bên Trái - Cái bạn đang khoanh vùng) */
/* Target vào chân bảng (tfoot) nơi chứa dòng Tổng cộng */
.woocommerce-table--order-details tfoot tr td .amount,
.woocommerce-table--order-details tfoot tr td span.woocommerce-Price-amount {
    color: #00E676 !important; /* Xanh lá Neon */
    font-weight: 800 !important;
    font-size: 18px !important;
    text-shadow: 0 0 10px rgba(0, 230, 118, 0.4) !important;
}

/* 2. SỐ TIỀN TRONG DANH SÁCH TỔNG QUAN (Bên Phải - Cho chắc ăn) */
ul.woocommerce-order-overview .amount,
ul.woocommerce-order-overview .woocommerce-Price-amount {
    color: #00E676 !important;
    font-weight: 800 !important;
}

/* 3. LÀM SÁNG TIÊU ĐỀ DÒNG TỔNG CỘNG (Để dễ đọc hơn) */
.woocommerce-table--order-details tfoot th {
    color: #ffffff !important; /* Màu trắng */
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

/* ============================================================
   🛠️ FIX LỖI TAB ĐIỀU HƯỚNG & SỐ DƯ VÍ
   ============================================================ */

/* --- 1. SỬA THANH ĐIỀU HƯỚNG (BREADCRUMBS) --- */
/* Bước HIỆN TẠI (Đang đứng ở đó): Màu TRẮNG SÁNG + Đậm */
.checkout-steps li.current a,
.breadcrumbs a.current,
.checkout-breadcrumbs a.current,
a.no-click.current {
    color: #ffffff !important; /* Trắng tinh khôi */
    opacity: 1 !important;
    font-weight: 800 !important;
    border-bottom: 2px solid #38bdf8 !important; /* Gạch chân Xanh Dương (Blue-400) */
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3) !important; /* Glow nhẹ để tách nền */
    background: transparent !important;
}

/* Các bước KHÁC (Chưa tới hoặc đã qua): Màu XÁM MỜ */
.checkout-steps li a,
.breadcrumbs a,
.checkout-breadcrumbs a {
    color: #64748b !important; /* Xám tối (Slate-500) để làm nền */
    font-weight: 600 !important;
}

/* Dấu gạch phân cách (Divider) */
.breadcrumbs .divider, 
.icon-angle-right {
    color: #334155 !important; /* Xám rất tối cho đỡ rối */
}

/* --- 2. SỬA SỐ DƯ VÍ ĐIỆN TỬ (WALLET BALANCE) --- */
/* Target vào nhãn của phương thức thanh toán */
.wc_payment_method label {
    color: #e2e8f0 !important; /* Màu trắng xám dễ đọc */
    font-weight: 500 !important;
}

/* Riêng dòng "Thanh toán ví điện tử | Số dư..." */
.wc_payment_method label[for="payment_method_wallet"] {
    color: #ffffff !important; /* Trắng tinh */
    display: inline-flex !important;
    align-items: center !important;
}

/* Nếu plugin bọc số tiền trong thẻ span/b (thường gặp), ép nó màu Xanh Lá */
.wc_payment_method label[for="payment_method_wallet"] span,
.wc_payment_method label[for="payment_method_wallet"] strong,
.wc_payment_method label[for="payment_method_wallet"] .amount {
    color: #4ade80 !important; /* Xanh lá sáng */
    font-weight: 700 !important;
    margin-left: 5px !important;
}

/* Fix mô tả bên dưới (nếu có) bị chìm */
.payment_box {
    background-color: rgba(255,255,255,0.05) !important; /* Nền sáng nhẹ */
    color: #cbd5e1 !important; /* Chữ xám bạc */
}

/* =================================================================
   🛒 ULTIMATE CART KIT: CYBERPUNK CARD STYLE (FULL V2)
   Fix: Coupon Visibility (Mã giảm giá nổi bật)
   ================================================================= */

/* -----------------------------------------------------------
   PHẦN 1: CỘT TRÁI - DANH SÁCH SẢN PHẨM (DẠNG THẺ)
   ----------------------------------------------------------- */
.woocommerce-cart table.shop_table {
    border-collapse: separate !important;
    border-spacing: 0 15px !important;
    background: transparent !important;
    border: none !important;
    width: 100% !important;
}
.woocommerce-cart table.shop_table thead { display: none !important; }

/* Thẻ sản phẩm */
.woocommerce-cart table.shop_table tbody tr {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    background: rgba(15, 23, 42, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 12px !important;
    padding: 15px !important;
    margin-bottom: 15px !important;
    transition: all 0.3s ease;
    position: relative;
}
.woocommerce-cart table.shop_table tbody tr:hover {
    background: rgba(15, 23, 42, 0.8) !important;
    border-color: rgba(0, 236, 255, 0.3) !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* Nút Xóa */
.woocommerce-cart table.shop_table td.product-remove {
    position: absolute !important; top: 10px !important; right: 10px !important;
    width: auto !important; padding: 0 !important; border: none !important; z-index: 10;
}
.woocommerce-cart table.shop_table a.remove {
    color: #ff0050 !important; background: rgba(255, 0, 80, 0.1) !important;
    border-radius: 50%; width: 24px !important; height: 24px !important;
    line-height: 22px !important; font-size: 16px !important; text-align: center;
}
.woocommerce-cart table.shop_table a.remove:hover { background: #ff0050 !important; color: #fff !important; }

/* Ảnh & Tên */
.woocommerce-cart table.shop_table td.product-thumbnail {
    width: 80px !important; padding: 0 !important; border: none !important; margin-right: 15px !important;
}
.woocommerce-cart table.shop_table td.product-thumbnail img {
    border-radius: 8px !important; width: 80px !important; height: auto !important;
}
.woocommerce-cart table.shop_table td.product-name {
    width: calc(100% - 110px) !important; padding: 0 !important; border: none !important; text-align: left !important;
}
.woocommerce-cart table.shop_table td.product-name a {
    color: #fff !important; font-weight: 700 !important; font-size: 15px !important; line-height: 1.4; text-decoration: none;
}

/* Tầng dưới: Giá - Lượng - Tổng */
.woocommerce-cart table.shop_table td.product-price,
.woocommerce-cart table.shop_table td.product-quantity,
.woocommerce-cart table.shop_table td.product-subtotal {
    width: 33.33% !important; display: flex !important; flex-direction: column;
    align-items: center !important; justify-content: flex-end !important;
    margin-top: 15px !important; padding-top: 15px !important;
    border-top: 1px dashed rgba(255, 255, 255, 0.1) !important; border-bottom: none !important;
    height: 70px !important;
}
/* Labels */
.woocommerce-cart table.shop_table td.product-price::before { content: "Đơn giá"; font-size: 10px; color: #94a3b8; text-transform: uppercase; margin-bottom: auto; }
.woocommerce-cart table.shop_table td.product-quantity::before { content: "Số lượng"; font-size: 10px; color: #94a3b8; text-transform: uppercase; margin-bottom: auto; }
.woocommerce-cart table.shop_table td.product-subtotal::before { content: "Thành tiền"; font-size: 10px; color: #94a3b8; text-transform: uppercase; margin-bottom: auto; }
/* Amount */
.woocommerce-cart table.shop_table td.product-price .amount,
.woocommerce-cart table.shop_table td.product-subtotal .amount {
    color: #00C853 !important; font-weight: 700 !important; font-size: 14px !important;
}

/* Input Số lượng */
.woocommerce-cart .quantity { margin: 0 auto !important; display: flex; align-items: center; }
.woocommerce-cart .quantity input.qty {
    background-color: rgba(0,0,0,0.3) !important; color: #fff !important;
    border: 1px solid #00ecff !important; border-radius: 4px !important;
    font-weight: bold; width: 40px !important; height: 34px !important;
    padding: 0 !important; text-align: center !important;
}
.woocommerce-cart .quantity .minus, .woocommerce-cart .quantity .plus {
    background: rgba(255,255,255,0.1) !important; color: #fff !important; border: none !important;
    width: 25px !important; height: 34px !important; display: flex; align-items: center; justify-content: center;
}

/* -----------------------------------------------------------
   PHẦN 2: CỘT PHẢI - CART TOTALS (ĐÃ FIX COUPON)
   ----------------------------------------------------------- */
.cart-collaterals .cart_totals {
    background: rgba(15, 23, 42, 0.6) !important;
    border: 1px solid rgba(0, 236, 255, 0.2) !important;
    border-radius: 16px !important;
    padding: 25px !important;
    box-shadow: 0 10px 30px -5px rgba(0,0,0,0.3) !important;
    margin-top: 0 !important;
}

.cart-collaterals .cart_totals h2 {
    color: #fff !important; font-size: 14px !important; font-weight: 700 !important;
    text-transform: uppercase; letter-spacing: 1px;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    padding-bottom: 15px !important; margin-bottom: 20px !important;
}

.cart_totals table.shop_table { margin: 0 !important; }
.cart_totals table.shop_table tr {
    display: flex !important; justify-content: space-between !important; align-items: center !important;
    background: transparent !important; border: none !important;
    border-bottom: 1px dashed rgba(255,255,255,0.1) !important;
    padding: 12px 0 !important; margin: 0 !important;
}
.cart_totals table.shop_table tr:last-child { border-bottom: none !important; }

.cart_totals table.shop_table th {
    color: #94a3b8 !important; font-size: 12px !important; font-weight: 600 !important;
    text-transform: uppercase; padding: 0 !important;
}
.cart_totals table.shop_table td { text-align: right !important; padding: 0 !important; }

.cart_totals .cart-subtotal .amount { color: #fff !important; font-size: 15px !important; font-weight: 700 !important; }
.cart_totals .order-total .amount {
    color: #00E676 !important; font-size: 22px !important; font-weight: 900 !important;
    text-shadow: 0 0 10px rgba(0, 230, 118, 0.4);
}

.wc-proceed-to-checkout { margin-top: 20px !important; }
.checkout-button {
    background: linear-gradient(90deg, #00C853, #00E676) !important;
    color: #000 !important; font-weight: 800 !important; text-transform: uppercase;
    font-size: 14px !important; padding: 16px !important; border-radius: 8px !important;
    width: 100% !important; box-shadow: 0 5px 15px rgba(0, 200, 83, 0.3) !important;
    margin-bottom: 15px !important;
}

/* --- FIX COUPON (MÃ GIẢM GIÁ) --- */
.woocommerce-cart .coupon {
    padding-top: 20px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    display: flex !important; gap: 10px !important;
    align-items: stretch !important; /* Căng đều chiều cao */
}

/* Ô nhập liệu nổi bật */
.woocommerce-cart .coupon input#coupon_code {
    background-color: rgba(255, 255, 255, 0.1) !important; /* Nền sáng hơn */
    border: 1px solid rgba(0, 236, 255, 0.3) !important; /* Viền Cyan */
    color: #ffffff !important;
    border-radius: 6px !important;
    padding: 0 15px !important;
    height: 42px !important; /* Chiều cao cố định */
    width: 100% !important;
    font-size: 13px !important;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.2) !important;
}
.woocommerce-cart .coupon input#coupon_code:focus {
    border-color: #00ecff !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
    outline: none !important;
}
.woocommerce-cart .coupon input#coupon_code::placeholder { color: rgba(255, 255, 255, 0.5) !important; }

/* Nút Áp dụng đẹp hơn */
.woocommerce-cart .coupon button[name="apply_coupon"] {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
    border-radius: 6px !important;
    height: 42px !important;
    padding: 0 20px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    font-size: 12px !important;
    cursor: pointer;
    transition: all 0.3s ease;
}
.woocommerce-cart .coupon button[name="apply_coupon"]:hover {
    background: #00ecff !important;
    color: #000 !important;
    border-color: #00ecff !important;
    box-shadow: 0 0 15px rgba(0, 236, 255, 0.4);
}

/* -----------------------------------------------------------
   PHẦN 3: MOBILE SPECIFIC
   ----------------------------------------------------------- */
@media (max-width: 480px) {
    .woocommerce-cart table.shop_table tbody tr { padding: 12px !important; }
    .woocommerce-cart table.shop_table td.product-thumbnail img { width: 60px !important; }
    .woocommerce-cart table.shop_table td.product-thumbnail { width: 60px !important; margin-right: 10px !important; }
    .woocommerce-cart table.shop_table td.product-name { width: calc(100% - 80px) !important; }
    .woocommerce-cart table.shop_table td.product-name a { font-size: 13px !important; }
    .woocommerce-cart table.shop_table td.product-price .amount,
    .woocommerce-cart table.shop_table td.product-subtotal .amount { font-size: 12px !important; }
    .cart-collaterals .cart_totals { padding: 15px !important; }
}

/* =========================================================
   NÂNG CẤP NÚT "THÊM VÀO HÀNG CHỜ" (ĐỒNG BỘ CHECKOUT)
   ========================================================= */

/* 1. Nâng cấp nút gốc của WooCommerce */
.single_add_to_cart_button.button.alt,
.woocommerce button.button.alt {
    /* Gradient từ Cyan sang Blue (Đồng bộ với màu tiêu đề h3 của bạn) */
    background: linear-gradient(92deg, #00ecff 0%, #3b82f6 100%) !important;
    color: #000 !important; /* Chữ đen để nổi bật trên nền sáng */
    border-radius: 50px !important;
    padding: 16px 40px !important;
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    border: none !important;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    box-shadow: 0 10px 20px rgba(0, 236, 255, 0.3) !important;
    cursor: pointer;
}

/* 2. Hiệu ứng Hover nhấc lên và phát sáng mạnh */
.single_add_to_cart_button.button.alt:hover {
    transform: translateY(-4px) scale(1.02) !important;
    box-shadow: 0 15px 30px rgba(0, 236, 255, 0.5) !important;
    filter: brightness(1.1);
}

/* 3. Hiệu ứng quét sáng (Shine) chạy ngang qua nút */
.single_add_to_cart_button.button.alt::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.4), transparent);
    transform: skewX(-25deg);
    transition: 0.6s;
}

.single_add_to_cart_button.button.alt:hover::after {
    left: 150%;
}

/* =========================================================
   NEW DESIGN: FLOATING TECH STACK (MENU NỔI)
   Giải pháp triệt để: Xóa khung bao, tập trung vào từng nút
   ========================================================= */

/* 1. XÓA BỎ KHUNG BAO NGOÀI & VẠCH KẺ GÂY LỖI */
.woocommerce-MyAccount-navigation,
.woocommerce-account .col-1, 
.woocommerce-account .large-3 {
    background: transparent !important; /* Trong suốt hoàn toàn */
    box-shadow: none !important; /* Bỏ bóng khung to */
    border: none !important; /* Bỏ viền khung */
    border-right: none !important; /* Triệt tiêu vạch kẻ dọc */
    padding: 0 !important;
}

/* 2. THIẾT KẾ TỪNG NÚT MENU (THẺ BÀI RIÊNG BIỆT) */
.woocommerce-MyAccount-navigation ul li {
    list-style: none !important;
    margin-bottom: 12px !important; /* Khoảng cách giữa các nút */
    border: none !important;
    padding: 0 !important;
}

.woocommerce-MyAccount-navigation ul li a {
    /* Nền kính tối màu cho từng nút */
    background: rgba(15, 23, 42, 0.8) !important;
    border: 1px solid rgba(59, 130, 246, 0.2) !important;
    
    /* Typography */
    color: #94a3b8 !important;
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    
    /* Hình dáng */
    padding: 16px 25px !important;
    border-radius: 16px !important; /* Bo tròn mạnh hơn */
    display: flex !important;
    align-items: center;
    justify-content: space-between; /* Đẩy mũi tên sang phải cùng */
    
    /* Hiệu ứng */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    backdrop-filter: blur(5px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* 3. HIỆU ỨNG HOVER (DI CHUỘT VÀO) */
.woocommerce-MyAccount-navigation ul li a:hover {
    background: rgba(30, 41, 59, 0.95) !important;
    border-color: #00ecff !important; /* Viền sáng Neon */
    color: #ffffff !important;
    transform: translateX(5px) scale(1.02); /* Nổi lên 3D nhẹ */
    box-shadow: 0 10px 15px -3px rgba(0, 236, 255, 0.15);
}

/* 4. TRẠNG THÁI ĐANG CHỌN (ACTIVE) - ĐẲNG CẤP NHẤT */
.woocommerce-MyAccount-navigation ul li.is-active a {
    /* Gradient Cyberpunk chạy ngang */
    background: linear-gradient(90deg, #3b82f6 0%, #06b6d4 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.4); /* Bóng xanh tỏa ra */
}

/* 5. THÊM ICON MŨI TÊN TỰ ĐỘNG Ở CUỐI NÚT */
.woocommerce-MyAccount-navigation ul li a::after {
    content: '\f054'; /* Mã icon Chevron Right của FontAwesome */
    font-family: 'Font Awesome 5 Free'; /* Hoặc FontAwesome tùy phiên bản web bạn */
    font-weight: 900;
    font-size: 12px;
    opacity: 0.5;
    transition: 0.3s;
}

/* --- PHẦN MŨI TÊN CHỈ DẪN (DÙNG FONTAWESOME CÓ SẴN) --- */
.woocommerce-MyAccount-navigation ul li a::after {
    content: '\f054'; /* Mã icon Chevron Right (>) đẹp hơn mũi tên dài */
    font-family: 'Font Awesome 5 Free', 'FontAwesome', sans-serif; /* Gọi đúng tên font */
    font-weight: 900; /* FontAwesome Free cần độ đậm 900 mới hiện */
    font-size: 12px;
    color: #94a3b8; /* Màu xám mặc định */
    transition: all 0.3s ease;
}

/* Khi Active hoặc Hover thì đổi thành dấu tích (V) hoặc sáng lên */
.woocommerce-MyAccount-navigation ul li.is-active a::after {
    content: '\f00c'; /* Đổi thành dấu check (V) xác nhận đang ở trang này */
    color: #00ecff; /* Màu Cyan Neon */
    text-shadow: 0 0 8px #00ecff;
}

.woocommerce-MyAccount-navigation ul li a:hover::after {
    color: #ffffff;
    transform: translateX(3px); /* Hiệu ứng đẩy nhẹ sang phải */
}

/* =========================================================
   FIX GIAO DIỆN "ACCOUNT DETAILS" (THÔNG TIN TÀI KHOẢN)
   ========================================================= */

/* --- 1. XỬ LÝ FORM NHẬP LIỆU (INPUTS) --- */
.woocommerce-EditAccountForm input.input-text,
.woocommerce-EditAccountForm input[type="email"],
.woocommerce-EditAccountForm input[type="password"],
.woocommerce-EditAccountForm input[type="text"] {
    background-color: #050505 !important; /* Nền đen */
    color: #fff !important; /* Chữ trắng */
    border: 1px solid #333 !important; /* Viền xám tối */
    padding: 15px !important;
    border-radius: 8px !important;
    transition: all 0.3s ease;
}

/* Hiệu ứng khi bấm vào nhập (Focus) - Phát sáng Cyan */
.woocommerce-EditAccountForm input:focus {
    border-color: #00ecff !important;
    box-shadow: 0 0 10px rgba(0, 236, 255, 0.2) !important;
    outline: none !important;
}

/* --- 2. XỬ LÝ NHÃN (LABELS) - ĐANG BỊ ẨN --- */
.woocommerce-EditAccountForm label {
    color: #e2e8f0 !important; /* Chuyển sang màu trắng xám dễ đọc */
    font-weight: 600 !important;
    text-transform: uppercase;
    font-size: 13px !important;
    letter-spacing: 0.5px;
    margin-bottom: 8px !important;
    display: block;
}

/* Dòng chữ nhỏ "This will be how your name will be displayed..." */
.woocommerce-EditAccountForm em {
    color: #94a3b8 !important; /* Xám nhạt */
    font-style: italic;
}

/* --- 3. TIÊU ĐỀ SECTION (PASSWORD CHANGE) --- */
.woocommerce-EditAccountForm fieldset legend {
    color: #00ecff !important; /* Màu Cyan Neon */
    font-weight: 800 !important;
    text-transform: uppercase;
    font-size: 18px !important;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    width: 100%;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

/* --- 4. NÚT "SAVE CHANGES" (ĐỒNG BỘ NÚT NEON) --- */
.woocommerce-EditAccountForm button[name="save_account_details"] {
    background: linear-gradient(90deg, #00C853, #00E676) !important; /* Gradient Xanh Lá */
    color: #000 !important; /* Chữ đen tương phản mạnh */
    font-weight: 900 !important;
    text-transform: uppercase;
    padding: 15px 40px !important;
    border-radius: 50px !important; /* Bo tròn kiểu viên thuốc */
    border: none !important;
    box-shadow: 0 0 20px rgba(0, 200, 83, 0.4);
    margin-top: 20px !important;
    transition: all 0.3s ease;
}

/* Hiệu ứng Hover */
.woocommerce-EditAccountForm button[name="save_account_details"]:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 40px rgba(0, 200, 83, 0.7);
    filter: brightness(1.1);
}

/* --- 5. TỐI ƯU KHOẢNG CÁCH (SPACING) --- */
.woocommerce-EditAccountForm p.form-row {
    margin-bottom: 25px !important; /* Tăng khoảng cách giữa các ô nhập */
}

/* Sửa lỗi 2 cột First Name / Last Name bị dính nhau trên Mobile */
@media (max-width: 768px) {
    .woocommerce-EditAccountForm .form-row-first,
    .woocommerce-EditAccountForm .form-row-last {
        width: 100% !important;
        float: none !important;
        margin-right: 0 !important;
    }
}

/* =========================================================
   GIAO DIỆN DASHBOARD (TRUNG TÂM ĐIỀU KHIỂN) - CYBER STYLE
   ========================================================= */

/* --- 1. SỬA LỖI TEXT "HELLO..." BỊ CHÌM --- */
.woocommerce-MyAccount-content p {
    color: #cbd5e1 !important; /* Màu trắng xám dễ đọc */
    font-size: 16px !important;
    line-height: 1.6 !important;
    margin-bottom: 25px !important;
}

/* Làm nổi bật tên User và các Link trong đoạn văn */
.woocommerce-MyAccount-content p strong {
    color: #fff !important; /* Tên user màu trắng sáng */
    font-weight: 800;
}

.woocommerce-MyAccount-content p a {
    color: #00ecff !important; /* Link màu Cyan Neon */
    text-decoration: none !important;
    font-weight: 600;
    border-bottom: 1px dashed #00ecff; /* Gạch chân đứt đoạn tinh tế */
    transition: all 0.3s;
}

.woocommerce-MyAccount-content p a:hover {
    color: #fff !important;
    border-bottom-style: solid;
    text-shadow: 0 0 10px rgba(0, 236, 255, 0.6);
}

/* --- 2. BIẾN CÁC Ô MENU (BOXES) THÀNH NÚT CÔNG NGHỆ --- */
/* (Áp dụng cho cấu trúc của Flatsome Theme) */

/* Định dạng chung cho các ô */
.dashboard-links a, 
.dashboard-links .col-inner {
    background: rgba(255, 255, 255, 0.03) !important; /* Nền kính mờ */
    border: 1px solid rgba(0, 236, 255, 0.3) !important; /* Viền Cyan mờ */
    color: #fff !important;
    border-radius: 12px !important;
    padding: 30px 20px !important;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 120px; /* Đảm bảo các ô cao đều nhau */
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* Chữ trong ô (Orders, Address...) */
.dashboard-links a {
    font-size: 16px !important;
    text-transform: uppercase;
    font-weight: 700 !important;
    letter-spacing: 1px;
    text-decoration: none !important;
}

/* --- 3. HIỆU ỨNG HOVER CỰC MẠNH (KHI DI CHUỘT VÀO Ô) --- */
.dashboard-links .col-inner:hover,
.dashboard-links a:hover {
    background: rgba(0, 236, 255, 0.1) !important; /* Sáng nền nhẹ */
    border-color: #00ecff !important; /* Viền sáng rực */
    transform: translateY(-5px); /* Nổi lên 3D */
    box-shadow: 0 0 30px rgba(0, 236, 255, 0.4) !important; /* Phát sáng Neon */
    color: #00ecff !important;
}

/* --- 4. ICON TRONG Ô (NẾU CÓ) --- */
/* Nếu Flatsome của anh có bật icon, đoạn này sẽ làm nó sáng lên */
.dashboard-links a i {
    font-size: 32px !important;
    margin-bottom: 15px !important;
    color: #00ecff !important; /* Icon màu Cyan */
    transition: all 0.3s;
}

.dashboard-links a:hover i {
    color: #fff !important;
    text-shadow: 0 0 10px #fff;
}

/* --- 5. MOBILE FIX --- */
/* Đảm bảo trên điện thoại các ô không bị dính chùm */
@media (max-width: 768px) {
    .dashboard-links .col {
        margin-bottom: 15px !important;
    }
}
/* =========================================================
   PNMEDIAPLUS - LUXURY TECH EDITION (CHILD THEME READY)
   FIXED & CLEANED BY SENIOR ENGINEER (POST PAGE)
   ========================================================= */

/* CẤU HÌNH BIẾN MÀU SẮC (CSS VARIABLES) */
:root {
  --pnm-bg-dark: #0f172a;
  --pnm-blue: #3b82f6;
  --pnm-orange: #f97316;
  --pnm-orange-gradient: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  --pnm-blue-gradient: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  --pnm-text-main: #334155;
  --pnm-text-light: #64748b;
  --pnm-shadow-blue: 0 20px 40px -10px rgba(59, 130, 246, 0.15);
  --pnm-shadow-orange: 0 20px 40px -10px rgba(249, 115, 22, 0.3);
}

/* =========================================================
   LUXURY CONTACT FOOTER - V4: PERFECT MATCH & ALIGNMENT
   ========================================================= */

.pnm-footer-contact {
    margin-top: 60px;
    padding: 50px 30px;
    background: #ffffff;
    border-radius: 32px; /* Bo góc đồng bộ với khối trên */
    border: 1px solid rgba(15, 23, 42, 0.05);
    box-shadow: 0 40px 100px -20px rgba(15, 23, 42, 0.1);
    text-align: center;
    position: relative;
    
    /* FIX: Nới rộng khung bằng với Main Card (1100px) */
    max-width: 1100px !important; 
    margin-left: auto;
    margin-right: auto;
}

.pnm-footer-label {
    font-size: 13px;
    font-weight: 700;
    color: #3b82f6; 
    color: var(--pnm-blue, #3b82f6); 
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 10px;
    display: block;
}

.pnm-footer-headline {
    font-size: 1.8rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 40px;
}

/* FLEXBOX WRAPPER */
.pnm-footer-info-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: 30px;
}

.pnm-info-box {
    flex: 1;
    display: flex;
    align-items: center;
}

.pnm-info-box.left { justify-content: flex-end; }
.pnm-info-box.right { justify-content: flex-start; }

/* DẤU GẠCH GIỮA */
.pnm-divider {
    width: 80px; /* Tăng khoảng cách giữa 2 bên cho thoáng */
    display: flex;
    justify-content: center;
}

.pnm-divider span {
    width: 1px;
    height: 30px; /* Tăng chiều cao gạch */
    background: #e2e8f0;
    display: block;
}

/* LINK LIÊN HỆ */
.pnm-footer-item {
    display: flex !important;
    align-items: center !important;
    gap: 15px; /* Tăng khoảng cách giữa icon và chữ */
    text-decoration: none !important;
    color: #475569 !important;
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

/* FIX ICON: ĐẨY XUỐNG DƯỚI ĐỂ CÂN BẰNG */
.pnm-footer-item .pnm-icon {
    width: 40px;
    height: 40px;
    background: rgba(59, 130, 246, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3b82f6;
    color: var(--pnm-blue, #3b82f6);
    font-size: 15px;
    transition: all 0.3s ease;
    
    /* FIX QUAN TRỌNG: Đẩy icon xuống 4px */
    transform: translateY(4px); 
}

/* DÒNG CHỮ */
.pnm-text {
    display: flex;
    align-items: center; /* Căn giữa theo trục ngang của dòng chữ */
    gap: 5px;
}

/* HOVER */
.pnm-footer-item:hover {
    color: #3b82f6 !important;
    color: var(--pnm-blue, #3b82f6) !important;
    transform: translateY(-2px);
}

.pnm-footer-item:hover .pnm-icon {
    background: #3b82f6;
    background: var(--pnm-blue, #3b82f6);
    color: #ffffff;
    box-shadow: 0 10px 20px rgba(59, 130, 246, 0.3);
}

.pnm-footer-address {
    font-size: 0.95rem;
    color: #94a3b8;
    border-top: 1px solid #f1f5f9;
    padding-top: 25px;
    display: inline-block;
    width: 80%; /* Giới hạn độ dài dòng kẻ địa chỉ */
}

/* MOBILE */
@media (max-width: 768px) {
    .pnm-footer-info-wrapper {
        flex-direction: column;
        gap: 20px;
    }
    .pnm-info-box.left, .pnm-info-box.right {
        justify-content: center;
    }
    .pnm-divider { display: none; }
    
    /* Trên mobile icon không cần đẩy xuống quá nhiều */
    .pnm-footer-item .pnm-icon { transform: translateY(2px); }
}

/* =====================================================================
   FIX MOBILE: WooCommerce My Account LOGIN (tránh chữ xám chìm nền tối)
   - Chỉ tác động form login/register trên trang tài khoản
===================================================================== */
@media (max-width: 768px) {
  body.woocommerce-account .woocommerce #customer_login,
  body.woocommerce-account .woocommerce form.login,
  body.woocommerce-account .woocommerce form.register {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 14px !important;
    padding: 16px !important;
    box-shadow: 0 12px 40px rgba(16, 24, 40, 0.14) !important;
  }

  body.woocommerce-account .woocommerce form.login,
  body.woocommerce-account .woocommerce form.register,
  body.woocommerce-account .woocommerce form.login *,
  body.woocommerce-account .woocommerce form.register * {
    color: #111827 !important;
    opacity: 1 !important;
    text-shadow: none !important;
  }

  body.woocommerce-account .woocommerce form.login label,
  body.woocommerce-account .woocommerce form.register label {
    color: #111827 !important;
    font-weight: 700 !important;
  }

  body.woocommerce-account .woocommerce form.login input[type="text"],
  body.woocommerce-account .woocommerce form.login input[type="email"],
  body.woocommerce-account .woocommerce form.login input[type="password"],
  body.woocommerce-account .woocommerce form.register input[type="text"],
  body.woocommerce-account .woocommerce form.register input[type="email"],
  body.woocommerce-account .woocommerce form.register input[type="password"] {
    background: #f8fafc !important;
    color: #111827 !important;
    border: 1px solid #cfd7e3 !important;
    border-radius: 12px !important;
    height: 40px !important;
    padding: 0 12px !important;
  }

  body.woocommerce-account .woocommerce form.login input:focus,
  body.woocommerce-account .woocommerce form.register input:focus {
    outline: none !important;
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16) !important;
    background: #ffffff !important;
  }

  body.woocommerce-account .woocommerce form.login button[type="submit"],
  body.woocommerce-account .woocommerce form.register button[type="submit"],
  body.woocommerce-account .woocommerce form.login input[type="submit"],
  body.woocommerce-account .woocommerce form.register input[type="submit"] {
    width: 100% !important;
    border-radius: 12px !important;
    height: 42px !important;
    font-weight: 900 !important;
  }
}

/* =================================================================
   YITH TOTAL TABLE RE-DESIGN: CYBERPUNK COMPACT (MINI VERSION)
   Phiên bản tinh gọn, font nhỏ, dòng sát, tiết kiệm diện tích tối đa
   ================================================================= */

/* 1. KHUNG BAO NGOÀI (CONTAINER) - THU GỌN */
#yith-wapo-container #wapo-total-price-table,
div#wapo-total-price-table {
    background: rgba(15, 23, 42, 0.6) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px);
    
    border: 1px solid rgba(0, 236, 255, 0.2) !important;
    border-radius: 10px !important; /* Bo góc nhỏ hơn */
    
    padding: 12px 15px !important;  /* Giảm mạnh padding (cũ là 25px) */
    margin-bottom: 15px !important; /* Giảm khoảng cách dưới */
    
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.5) !important;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Hiệu ứng Hover nhẹ nhàng */
#yith-wapo-container #wapo-total-price-table:hover {
    border-color: rgba(0, 236, 255, 0.5) !important;
}

/* 2. CẤU TRÚC BẢNG (RESET TABLE) */
#wapo-total-price-table table {
    width: 100% !important;
    border-collapse: collapse !important;
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
}

#wapo-total-price-table table tr {
    background: transparent !important;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1) !important;
    display: table-row !important;
}

#wapo-total-price-table table tr:last-child {
    border-bottom: none !important;
}

/* GIẢM CHIỀU CAO DÒNG (PADDING) - QUAN TRỌNG NHẤT */
#wapo-total-price-table table td {
    padding: 4px 0 !important; /* Giảm cực mạnh (cũ là 12px) -> Dòng sát lại */
    vertical-align: middle !important;
    border: none !important;
    line-height: 1.2 !important;
}

/* 3. NHÃN (LABEL - CỘT TRÁI) - NHỎ & GỌN */
#wapo-total-price-table table td:first-child {
    color: #94a3b8 !important;
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-size: 10px !important; /* Font nhỏ vừa đủ đọc */
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-align: left !important;
}

/* 4. GIÁ TRỊ (VALUE - CỘT PHẢI) - NHỎ & GỌN */
#wapo-total-price-table table td:last-child {
    text-align: right !important;
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-weight: 600 !important;
    font-size: 12px !important; /* Font số nhỏ lại */
    color: #f1f5f9 !important;
}

/* 5. DÒNG TỔNG CỘNG (ORDER TOTAL) - ĐIỂM NHẤN */
tr.wapo-total-order {
    border-top: 1px solid rgba(0, 236, 255, 0.2) !important;
    margin-top: 5px !important;
}

/* Chữ "Order Total" */
tr.wapo-total-order td:first-child {
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    padding-top: 8px !important; /* Kéo sát lên */
}

/* Số tiền tổng cộng (Credit) */
tr.wapo-total-order td:last-child,
tr.wapo-total-order .amount,
tr.wapo-total-order .pn-force-credit,
tr.wapo-total-order .pn-js-credit,
#yith-wapo-container .wapo-total-order .amount {
    font-size: 16px !important; /* Giảm từ 22px xuống 16px */
    color: #00E676 !important;
    font-weight: 900 !important;
    padding-top: 8px !important; /* Kéo sát lên */
    text-shadow: 0 0 10px rgba(0, 230, 118, 0.4) !important;
    display: block !important;
    width: 100% !important;
    text-align: right !important;
}

/* 6. ẨN TIÊU ĐỀ THỪA */
#wapo-total-price-table h3, 
.yith-wapo-block h3 {
    display: none !important;
}

/* 7. KHOẢNG CÁCH VỚI NÚT MUA */
form.cart {
    margin-top: 15px !important; /* Giảm khoảng cách để bố cục chặt chẽ */
    gap: 10px;
}