/* --- GLOBAL STYLES (Toàn trang) --- */
body {
    /* Đổi màu nền sang xanh đen đậm (Dark Blue/Black) để đồng bộ */
    background-color: #020c1b;

    /* Chuyển màu chữ mặc định sang màu trắng xám cho dễ đọc trên nền tối */
    color: #8892b0;

    font-family: var(--main-font);
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

/* Thêm đoạn này để xử lý các thẻ h1, h2, h3 mặc định sẽ có màu sáng */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: #ccd6f6;
    /* Màu trắng hơi xanh */
    margin-top: 0;
}

/* Xử lý thẻ link mặc định */
a {
    color: #64ffda;
    /* Màu xanh neon chủ đạo */
    text-decoration: none;
    transition: all 0.2s ease;
}

a:hover {
    color: #00e6e6;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.site-header {
    background: #0a192f;
    /* Màu xanh đen công nghệ */
    color: #fff;
    padding: 15px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-header a {
    color: #64ffda;
    /* Màu xanh neon */
    text-decoration: none;
    font-weight: bold;
    font-size: 1.2rem;
}

.site-footer {
    background: #112240;
    color: #8892b0;
    text-align: center;
    padding: 20px 0;
    margin-top: 50px;
}

/* --- CSS cho Header & Logo (Phiên bản Cyberpunk) --- */
.site-header {
    background: #0b1120;
    padding: 15px 0;
    border-bottom: 1px solid rgba(100, 255, 218, 0.1);
    /* Thêm viền mờ đáy cho sang */
}

.site-header .container {
    display: flex;
    justify-content: space-between;
    /* Đẩy logo sang trái, menu sang phải */
    align-items: center;
}

/* --- LOGO --- */
.logo {
    margin-right: 50px;
    /* Đẩy logo cách xa menu ra một chút nếu màn hình bé */
}

.logo img {
    height: 65px;
    /* Tăng kích thước logo lên chút cho rõ */
    width: auto;
    display: block;
    border-radius: 50%;

    /* Viền và hiệu ứng phát sáng cho viền tròn Logo */
    border: 2px solid #00e6e6;
    box-shadow: 0 0 10px #00e6e6, 0 0 20px rgba(0, 230, 230, 0.5);

    transition: transform 0.3s ease;
}

.logo img:hover {
    transform: rotate(5deg);
    /* Hiệu ứng xoay nhẹ khi chỉ vào logo */
}

/* --- MENU --- */
.main-menu ul {
    list-style: none;
    display: flex;
    gap: 50px;
    /* Tăng khoảng cách giữa các chữ trong menu */
    margin: 0;
    padding: 0;
}

.main-menu a {
    /* Màu xanh Neon mặc định */
    color: #00e6e6;
    text-decoration: none;
    font-weight: 600;
    /* Đậm hơn */
    font-size: 1.3rem;
    /* Tăng kích thước chữ to hơn */
    text-transform: uppercase;
    /* Chữ in hoa nhìn cho khỏe khoắn */
    transition: all 0.3s ease;

    /* Bóng chữ nhẹ lúc bình thường */
    text-shadow: 0 0 2px rgba(0, 230, 230, 0.3);
}

/* Hiệu ứng khi rê chuột (Hover) -> Màu Tím phát sáng */
.main-menu a:hover {
    color: #d500f9;
    /* Màu tím Neon */

    /* Hiệu ứng phát sáng tím rực rỡ */
    text-shadow:
        0 0 10px #d500f9,
        0 0 20px #d500f9;

    transform: translateY(-2px);
    /* Nhấc chữ lên 1 xíu tạo cảm giác nổi */
}

/* --- CSS cho Hero Section (Banner) - Đã khôi phục và nâng cấp --- */
.hero-section {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 600px;
    /* Chiều cao banner */
    display: flex;
    align-items: center;
    /* Căn giữa dọc */
    justify-content: center;
    /* Căn giữa ngang */
    text-align: center;
    color: #fff;
    overflow: hidden;
}

/* Lớp phủ màu tối để làm nổi bật chữ neon */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    /* Màu đen mờ 70% */
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    /* Để nội dung nổi lên trên lớp phủ */
}

/* --- HIỆU ỨNG NEON SÓI SÀNH SỎI --- */
.neon-text {
    font-size: 4.5rem;
    /* Chữ to đùng */
    font-weight: 900;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 10px;

    /* Hiệu ứng đổ bóng phát sáng nhiều lớp */
    text-shadow:
        0 0 5px #fff,
        0 0 10px #fff,
        0 0 20px #00e6e6,
        /* Màu xanh Cyan chủ đạo */
        0 0 40px #00e6e6,
        0 0 80px #00e6e6,
        0 0 90px #00e6e6,
        0 0 100px #00e6e6;

    /* Animation nhấp nháy nhẹ */
    animation: neon-flicker 1.5s infinite alternate;
}

/* Hiệu ứng phụ cho slogan bên dưới */
.sub-title {
    font-size: 1.5rem;
    font-weight: 300;
    letter-spacing: 2px;
    margin-bottom: 40px;
    color: #e0e0e0;
    text-shadow: 0 0 5px rgba(0, 230, 230, 0.5);
}

/* Nút bấm nổi bật */
.btn-primary {
    background: linear-gradient(45deg, #ff0055, #ff0000);
    /* Gradient đỏ */
    color: #fff;
    padding: 15px 40px;
    font-size: 1.1rem;
    text-decoration: none;
    border-radius: 50px;
    /* Nút bo tròn */
    font-weight: bold;
    text-transform: uppercase;
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.6);
    /* Nút cũng phát sáng đỏ */
    transition: transform 0.3s ease;
    display: inline-block;
}

.btn-primary:hover {
    transform: scale(1.05);
    /* Phóng to nhẹ khi di chuột */
    box-shadow: 0 0 30px rgba(255, 0, 0, 0.9);
}

/* Keyframes tạo hiệu ứng nhấp nháy Neon */
@keyframes neon-flicker {

    0%,
    100% {
        text-shadow:
            0 0 4px #fff,
            0 0 10px #fff,
            0 0 20px #00e6e6,
            0 0 40px #00e6e6,
            0 0 70px #00e6e6,
            0 0 80px #00e6e6,
            0 0 100px #00e6e6;
    }

    50% {
        text-shadow:
            0 0 2px #fff,
            0 0 5px #fff,
            0 0 10px #00e6e6,
            0 0 20px #00e6e6,
            0 0 35px #00e6e6,
            0 0 40px #00e6e6,
            0 0 50px #00e6e6;
    }
}

/* Responsive: Trên mobile chữ nhỏ lại chút không bị vỡ */
@media (max-width: 768px) {
    .neon-text {
        font-size: 2.5rem;
    }

    .sub-title {
        font-size: 1rem;
    }
}

/* =========================================
   WOOCOMMERCE CUSTOM STYLES - SÓI SÀNH SỎI
   ========================================= */

/* 1. Nền tối cho toàn bộ trang WooCommerce */
.woocommerce-page {
    background-color: #0b1120;
    color: #e6f1ff;
    /* Màu chữ sáng */
}

/* 2. Bố cục trang chi tiết sản phẩm: Flexbox chia đôi */
.woocommerce div.product {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    /* Khoảng cách giữa ảnh và chữ */
    background: #112240;
    /* Nền khối sản phẩm sáng hơn nền web xíu */
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    /* Bóng đổ cho có chiều sâu */
}

/* Cột bên trái: Ảnh sản phẩm */
.woocommerce div.product div.images {
    flex: 1;
    /* Chiếm 1 phần */
    width: 100%;
}

.woocommerce div.product div.images img {
    border-radius: 10px;
    border: 2px solid #64ffda;
    /* Viền xanh neon */
    box-shadow: 0 0 15px rgba(100, 255, 218, 0.2);
}

/* Cột bên phải: Thông tin sản phẩm */
.woocommerce div.product div.summary {
    flex: 1;
    /* Chiếm 1 phần */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 3. Tùy chỉnh các thành phần chữ */
.woocommerce div.product .product_title {
    color: #fff;
    font-size: 2.5rem;
    text-transform: uppercase;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    margin-bottom: 20px;
}

.woocommerce div.product .price {
    color: #64ffda;
    /* Giá tiền màu xanh Neon */
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 20px;
}

.woocommerce div.product .woocommerce-product-details__short-description {
    color: #8892b0;
    line-height: 1.8;
    margin-bottom: 30px;
    font-size: 1.1rem;
}

/* 4. Tùy chỉnh nút "Add to cart" (Mua hàng) */
.woocommerce div.product form.cart .button {
    background: linear-gradient(45deg, #ff0055, #ff0000) !important;
    /* Đỏ Neon */
    color: #fff !important;
    padding: 15px 40px !important;
    border-radius: 50px !important;
    font-weight: bold !important;
    text-transform: uppercase;
    border: none !important;
    transition: all 0.3s ease;
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.5);
    margin-top: 20px;
}

.woocommerce div.product form.cart .button:hover {
    transform: scale(1.05);
    box-shadow: 0 0 25px rgba(255, 0, 0, 0.8);
    background: linear-gradient(45deg, #ff0000, #ff0055) !important;
}

/* 5. Tùy chỉnh ô nhập số lượng */
.woocommerce .quantity .qty {
    background-color: #0b1120;
    color: #fff;
    border: 1px solid #64ffda;
    padding: 10px;
    border-radius: 5px;
    margin-right: 10px;
    font-weight: bold;
    width: 60px;
}

/* 6. Tabs thông tin bên dưới (Mô tả chi tiết/Đánh giá) */
.woocommerce div.product .woocommerce-tabs ul.tabs {
    border-bottom: 1px solid #233554;
    padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    background: transparent;
    border: 1px solid #233554;
    border-bottom: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    color: #8892b0;
    font-weight: bold;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    background: #112240;
    border-bottom-color: #112240;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: #64ffda;
    /* Tab đang chọn màu xanh */
}

.woocommerce div.product .woocommerce-tabs .panel {
    background: #112240;
    color: #ccd6f6;
    padding: 20px 0;
}

/* 7. Responsive: Trên điện thoại thì xếp dọc */
@media (max-width: 768px) {
    .woocommerce div.product {
        flex-direction: column;
        padding: 20px;
    }
}

/* =========================================
   HOMEPAGE PRODUCT GRID
   ========================================= */

/* --- ĐỒNG BỘ TIÊU ĐỀ SECTION (CẬP NHẬT MỚI & SẢN PHẨM) --- */

/* Class chung cho tiêu đề các phần (Section Title) */
.section-title {
    text-align: center;
    /* Bắt buộc căn giữa */
    width: 100%;
    margin-bottom: 60px;
    /* Khoảng cách xuống nội dung bên dưới */
    clear: both;
}

/* Class tạo hiệu ứng chữ Neon nhỏ (Dùng cho cả 2 tiêu đề) */
.neon-text-small {
    color: #fff;
    text-transform: uppercase;
    font-weight: 900;
    /* Rất đậm */
    font-size: 2.5rem;
    /* Kích thước chữ thống nhất (khoảng 40px) */
    letter-spacing: 2px;
    /* Khoảng cách chữ */

    /* Hiệu ứng bóng chữ xanh neon */
    text-shadow: 0 0 10px rgba(100, 255, 218, 0.7), 0 0 20px rgba(100, 255, 218, 0.5);

    display: inline-block;
    position: relative;
}

/* Đường gạch chân phát sáng dưới tiêu đề */
.neon-text-small::after {
    content: '';
    display: block;
    width: 80px;
    /* Độ dài gạch chân */
    height: 4px;
    background: #64ffda;
    /* Màu neon chủ đạo */
    margin: 15px auto 0;
    /* auto để căn giữa gạch chân */
    border-radius: 2px;
    box-shadow: 0 0 10px #64ffda;
}

/* Responsive: Trên điện thoại thì chữ nhỏ lại chút */
@media (max-width: 768px) {
    .neon-text-small {
        font-size: 1.8rem;
    }
}

/* ==================================================================
   FIX TRANG CHỦ: SẢN PHẨM THẲNG HÀNG & NEON (REPLACE CODE CŨ)
   ================================================================== */

/* Lưới sản phẩm: Chia 4 cột */
.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    /* Đảm bảo các ô trong 1 hàng có chiều cao bằng nhau */
    align-items: stretch;
}

/* Thẻ sản phẩm (Khung Neon) */
.product-card {
    /* Thiết lập Flexbox để căn chỉnh nội dung bên trong */
    display: flex;
    flex-direction: column;
    height: 100%;
    /* Chiều cao full ô lưới */

    /* Style Neon cũ của bạn */
    border: 3px solid transparent;
    border-radius: 15px;
    background:
        linear-gradient(#112240, #112240) padding-box,
        linear-gradient(45deg, #00e6e6, #d500f9, #ff0055) border-box;

    overflow: hidden;
    transition: all 0.3s ease;
    position: relative;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Hiệu ứng hover */
.product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 0 30px rgba(0, 230, 230, 0.4);
}

/* Link bao quanh (Biến thành cột dọc để đẩy nội dung) */
.product-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    /* Flexbox */
    flex-direction: column;
    /* Xếp dọc */
    flex-grow: 1;
    /* Chiếm hết chiều cao thẻ */
    height: 100%;
}

/* Ảnh sản phẩm */
.product-image {
    position: relative;
    overflow: hidden;
    height: 200px;
    /* Chiều cao cố định */
    width: 100%;
    flex-shrink: 0;
    /* Không cho ảnh bị co lại */
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.product-card:hover .product-image img {
    transform: scale(1.1);
}

/* Thông tin bên dưới (Tên + Giá) */
.product-info {
    padding: 20px;
    text-align: center;
    display: flex;
    /* Flexbox */
    flex-direction: column;
    /* Xếp dọc */
    flex-grow: 1;
    /* Chiếm hết khoảng trống còn lại */
    justify-content: space-between;
    /* Đẩy các phần tử ra xa nhau */
}

/* Tên sản phẩm */
.product-title {
    font-size: 1.1rem;
    margin: 0 0 15px 0;
    color: #e6f1ff;
    font-weight: 600;
    line-height: 1.4;
    /* Giới hạn 2 dòng để đều nhau */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 46px;
    /* Chiều cao tối thiểu cho 2 dòng chữ */
}

/* Giá tiền (Được đẩy xuống đáy nhờ margin-top: auto) */
.product-price {
    color: #64ffda;
    font-weight: bold;
    font-size: 1.2rem;
    margin-top: auto;
    /* Kỹ thuật đẩy giá xuống đáy khung */
    display: block;
}

/* Responsive cho Mobile (Giữ nguyên logic cũ của bạn) */
@media (max-width: 768px) {
    .product-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Responsive: Trên Mobile thì về 1 cột */
@media (max-width: 768px) {
    .product-grid {
        grid-template-columns: 1fr;
        /* 1 cột duy nhất */
        gap: 20px;
    }
}

/* Tablet thì 2 cột */
@media (min-width: 769px) and (max-width: 1024px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =========================================
   TIMELINE BLOG POSTS (CYBERPUNK STYLE)
   ========================================= */

.timeline-wrapper {
    position: relative;
    padding-left: 30px;
    /* Chừa chỗ cho đường kẻ dọc */
}

/* 1. Đường kẻ dọc (The Line) */
.timeline-line {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, #00e6e6, #d500f9, rgba(0, 0, 0, 0));
    /* Gradient dọc mờ dần */
    box-shadow: 0 0 10px #00e6e6;
}

/* 2. Item bao ngoài */
.timeline-item {
    position: relative;
    margin-bottom: 40px;
    /* Khoảng cách giữa các bài */
}

/* 3. Điểm tròn (The Dot) */
.timeline-dot {
    position: absolute;
    left: -36px;
    /* Căn chỉnh cho trùng với đường kẻ */
    top: 25px;
    width: 14px;
    height: 14px;
    background: #020c1b;
    /* Nền đen */
    border: 2px solid #00e6e6;
    /* Viền xanh */
    border-radius: 50%;
    z-index: 2;
    box-shadow: 0 0 10px #00e6e6;
}

/* 4. Thẻ bài viết nằm ngang (Horizontal Card) */
.post-card-horizontal {
    display: flex;
    background: rgba(17, 34, 64, 0.8);
    border-radius: 12px;
    overflow: hidden;
    position: relative;

    /* Viền Gradient 3 màu bao quanh thẻ bài viết */
    padding: 2px;
    /* Độ dày viền */
    background: linear-gradient(90deg, #ff0055, #d500f9, #00e6e6);
}

/* Nội dung bên trong thẻ (để che lớp gradient làm nền) */
.post-card-horizontal::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background: #112240;
    /* Nền chính của thẻ */
    border-radius: 10px;
    z-index: 0;
}

/* Cấu trúc Flexbox */
.post-thumb {
    width: 35%;
    /* Ảnh chiếm 35% */
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.post-card-horizontal:hover .post-thumb img {
    transform: scale(1.1);
}

/* Nhãn "Blog mới" */
.post-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #ff0055;
    color: #fff;
    font-size: 0.7rem;
    font-weight: bold;
    padding: 4px 10px;
    border-radius: 4px;
    text-transform: uppercase;
    box-shadow: 0 0 10px rgba(255, 0, 85, 0.5);
}

.post-content {
    width: 65%;
    /* Nội dung chiếm 65% */
    padding: 25px;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.post-meta {
    font-size: 0.9rem;
    color: #8892b0;
    margin-bottom: 10px;
}

.post-title {
    margin: 0 0 15px 0;
    line-height: 1.3;
}

.post-title a {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    transition: color 0.3s;
}

.post-title a:hover {
    color: #64ffda;
    text-shadow: 0 0 10px rgba(100, 255, 218, 0.4);
}

.post-excerpt {
    color: #a8b2d1;
    font-size: 1rem;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.btn-read-more {
    display: inline-block;
    color: #64ffda;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.9rem;
    border: 1px solid #64ffda;
    padding: 8px 20px;
    border-radius: 4px;
    width: fit-content;
    transition: all 0.3s;
}

.btn-read-more:hover {
    background: rgba(100, 255, 218, 0.1);
    box-shadow: 0 0 15px rgba(100, 255, 218, 0.2);
}

/* Responsive Mobile */
@media (max-width: 768px) {
    .post-card-horizontal {
        flex-direction: column;
    }

    .post-thumb,
    .post-content {
        width: 100%;
    }

    .post-thumb {
        height: 200px;
    }

    .timeline-wrapper {
        padding-left: 20px;
    }

    .timeline-dot {
        left: -27px;
    }
}

/* =========================================
   SECTION ABOUT ME & FAQ (SEO CONTENT)
   ========================================= */

/* --- 1. ABOUT SECTION --- */
.about-grid {
    display: flex;
    align-items: center;
    gap: 60px;
}

/* Ảnh chân dung có viền neon xoay */
.image-frame-neon {
    position: relative;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    /* Hình tròn */
    padding: 5px;
    background: linear-gradient(to right, #00e6e6, #d500f9);
    box-shadow: 0 0 30px rgba(0, 230, 230, 0.3);
    animation: pulse-border 3s infinite;
}

.image-frame-neon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 5px solid #020c1b;
    /* Viền đen ngăn cách */
}

@keyframes pulse-border {
    0% {
        box-shadow: 0 0 20px rgba(0, 230, 230, 0.3);
    }

    50% {
        box-shadow: 0 0 40px rgba(213, 0, 249, 0.5);
    }

    100% {
        box-shadow: 0 0 20px rgba(0, 230, 230, 0.3);
    }
}

/* Con số ấn tượng */
.stats-grid {
    display: flex;
    gap: 40px;
    margin-top: 30px;
}

.stat-number {
    display: block;
    font-size: 2.5rem;
    font-weight: 900;
    color: #64ffda;
    text-shadow: 0 0 10px rgba(100, 255, 218, 0.5);
}

.stat-label {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- 2. FAQ SECTION (ACCORDION) --- */
.faq-wrapper {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    background: rgba(17, 34, 64, 0.5);
    border: 1px solid rgba(100, 255, 218, 0.1);
    margin-bottom: 20px;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.3s;
}

.faq-item[open] {
    border-color: #64ffda;
    /* Khi mở ra thì viền sáng lên */
    background: rgba(17, 34, 64, 0.8);
}

.faq-question {
    padding: 20px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    list-style: none;
    /* Ẩn mũi tên mặc định */
    position: relative;
    padding-right: 40px;
    font-size: 1.1rem;
}

/* Tạo mũi tên tùy chỉnh dấu + */
.faq-question::after {
    content: '+';
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    color: #64ffda;
    font-weight: bold;
}

/* Khi mở thì dấu + thành dấu - */
.faq-item[open] .faq-question::after {
    content: '-';
    color: #d500f9;
}

.faq-answer {
    padding: 0 20px 20px 20px;
    color: #a8b2d1;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    line-height: 1.6;
}

/* Responsive */
@media (max-width: 768px) {
    .about-grid {
        flex-direction: column;
        text-align: center;
    }

    .about-content h2 {
        text-align: center !important;
    }

    .stats-grid {
        justify-content: center;
    }
}

/* =========================================
   SINGLE BLOG POST STYLES
   ========================================= */

/* Giới hạn chiều rộng bài viết để mắt dễ bao quát (Quy tắc đọc sách) */
.single-post-article {
    max-width: 800px;
    margin: 0 auto;
    /* Căn giữa màn hình */
}

/* Breadcrumb */
.breadcrumb {
    color: #8892b0;
    margin-bottom: 30px;
    font-size: 0.9rem;
    text-transform: uppercase;
}

.breadcrumb a {
    color: #64ffda;
}

.breadcrumb .sep {
    margin: 0 10px;
    color: #444;
}

/* Meta info (Ngày, Tác giả) */
.entry-meta {
    margin-bottom: 30px;
    color: #a8b2d1;
    font-size: 0.95rem;
    border-bottom: 1px solid rgba(100, 255, 218, 0.2);
    padding-bottom: 20px;
}

.entry-meta span {
    margin-right: 20px;
}

/* Ảnh đại diện bài viết */
.single-post-thumbnail {
    margin-bottom: 40px;
}

.single-post-thumbnail img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    border: 1px solid rgba(100, 255, 218, 0.3);
}

/* --- NỘI DUNG BÀI VIẾT (QUAN TRỌNG) --- */
.entry-content {
    color: #c0c5ce;
    /* Màu chữ xám sáng dịu mắt */
    font-size: 1.15rem;
    /* Cỡ chữ 18px đọc cho sướng */
    line-height: 1.8;
    /* Khoảng cách dòng thoáng */
}

/* Các thẻ Heading trong bài viết */
.entry-content h2,
.entry-content h3 {
    color: #fff;
    margin-top: 40px;
    margin-bottom: 20px;
    font-weight: bold;
}

.entry-content h2 {
    font-size: 1.8rem;
    border-left: 4px solid #64ffda;
    /* Gạch dọc xanh đầu dòng */
    padding-left: 15px;
}

.entry-content h3 {
    color: #ccd6f6;
    font-size: 1.5rem;
}

/* Thẻ P, UL, OL */
.entry-content p {
    margin-bottom: 25px;
}

.entry-content ul,
.entry-content ol {
    margin-bottom: 25px;
    padding-left: 20px;
}

.entry-content li {
    margin-bottom: 10px;
}

/* Trích dẫn (Blockquote) */
.entry-content blockquote {
    background: rgba(100, 255, 218, 0.1);
    border-left: 5px solid #64ffda;
    margin: 30px 0;
    padding: 20px;
    font-style: italic;
    color: #fff;
    border-radius: 0 10px 10px 0;
}

/* Hộp tác giả cuối bài */
.author-bio-box {
    margin-top: 60px;
    padding: 30px;
    background: #112240;
    border: 1px dashed #64ffda;
    border-radius: 10px;
    text-align: center;
}

.author-bio-box h3 {
    color: #64ffda;
    text-transform: uppercase;
    margin-bottom: 10px;
}

/* Responsive text */
@media (max-width: 768px) {
    .entry-title {
        font-size: 2rem !important;
    }

    .entry-content {
        font-size: 1rem;
    }
}

/* =========================================
   CONTACT PAGE STYLES
   ========================================= */

.contact-grid-wrapper {
    display: flex;
    gap: 50px;
    align-items: stretch;
}

/* CỘT THÔNG TIN */
.contact-info-box {
    flex: 1;
    background: rgba(17, 34, 64, 0.6);
    padding: 40px;
    border-radius: 15px;
    border: 1px solid rgba(100, 255, 218, 0.1);
}

.contact-heading {
    color: #fff;
    font-size: 1.5rem;
    margin-bottom: 20px;
    border-left: 4px solid #64ffda;
    padding-left: 15px;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    color: #ccd6f6;
    font-size: 1.1rem;
}

.neon-icon {
    color: #64ffda;
    font-size: 1.2rem;
    text-shadow: 0 0 10px rgba(100, 255, 218, 0.5);
    width: 30px;
    text-align: center;
}

/* Nút mạng xã hội tròn */
.social-btn {
    display: inline-flex;
    width: 40px;
    height: 40px;
    border: 1px solid #64ffda;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    color: #64ffda;
    transition: all 0.3s;
}

.social-btn:hover {
    background: #64ffda;
    color: #020c1b;
    box-shadow: 0 0 15px rgba(100, 255, 218, 0.6);
}

/* CỘT FORM */
.contact-form-box {
    flex: 1.5;
    /* Cột form rộng hơn chút */
    background: #112240;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* --- Style đè lên Contact Form 7 --- */
.wpcf7-form label {
    color: #ccd6f6;
    font-weight: bold;
    font-size: 0.9rem;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
    width: 100%;
    background: #020c1b;
    /* Nền input tối */
    border: 1px solid #233554;
    color: #fff;
    padding: 12px;
    border-radius: 5px;
    margin-top: 5px;
    margin-bottom: 20px;
    outline: none;
    transition: all 0.3s;
}

/* Khi bấm vào input thì viền sáng lên */
.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
    border-color: #64ffda;
    box-shadow: 0 0 10px rgba(100, 255, 218, 0.2);
}

/* Nút Gửi */
.wpcf7-form input[type="submit"] {
    background: linear-gradient(45deg, #00e6e6, #d500f9);
    color: #fff;
    border: none;
    padding: 12px 30px;
    border-radius: 5px;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s;
}

.wpcf7-form input[type="submit"]:hover {
    box-shadow: 0 0 20px rgba(213, 0, 249, 0.6);
}

/* Responsive */
@media (max-width: 768px) {
    .contact-grid-wrapper {
        flex-direction: column;
    }
}

/* =========================================
   WOOCOMMERCE FIX TOÀN DIỆN (CART & CHECKOUT)
   ========================================= */

/* 1. FIX Ô NHẬP LIỆU (Input) - Chuyển hết sang màu tối */
.woocommerce input.input-text,
.woocommerce textarea,
.woocommerce select,
.select2-container .select2-selection--single {
    background-color: #0b1120 !important;
    /* Nền xanh đen */
    color: #fff !important;
    /* Chữ trắng */
    border: 1px solid #233554 !important;
    /* Viền xanh tối */
    border-radius: 5px !important;
    padding: 12px !important;
    outline: none !important;
    height: auto !important;
    /* Fix chiều cao bị bóp méo */
}

/* Fix riêng cho cái ô chọn Quốc gia (Select2) */
.select2-container .select2-selection--single .select2-selection__rendered {
    color: #fff !important;
}

.select2-dropdown {
    background-color: #112240 !important;
    border: 1px solid #64ffda !important;
}

/* Khi bấm vào ô nhập liệu */
.woocommerce input.input-text:focus,
.woocommerce textarea:focus {
    border-color: #64ffda !important;
    box-shadow: 0 0 10px rgba(100, 255, 218, 0.2) !important;
}

/* Màu chữ của nhãn (Họ tên, Địa chỉ...) */
.woocommerce form .form-row label {
    color: #ccd6f6 !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
}

/* 2. FIX NÚT BẤM "TIẾN HÀNH THANH TOÁN" & "ĐẶT HÀNG" */
/* Nút ở trang Giỏ hàng */
.woocommerce .wc-proceed-to-checkout a.checkout-button {
    background: linear-gradient(45deg, #00e6e6, #d500f9) !important;
    color: #fff !important;
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    padding: 15px 30px !important;
    border-radius: 50px !important;
    display: block !important;
    text-align: center !important;
    margin-bottom: 20px !important;
    transition: all 0.3s ease !important;
}

.woocommerce .wc-proceed-to-checkout a.checkout-button:hover {
    box-shadow: 0 0 20px rgba(0, 230, 230, 0.6) !important;
    transform: translateY(-2px);
    background: linear-gradient(45deg, #d500f9, #00e6e6) !important;
}

/* Nút ở trang Thanh toán (Place Order) */
#place_order {
    background: linear-gradient(45deg, #ff0055, #d500f9) !important;
    /* Đổi màu đỏ-tím cho khác biệt */
    color: #fff !important;
    font-size: 1.3rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    padding: 20px 40px !important;
    border-radius: 50px !important;
    border: none !important;
    width: 100% !important;
    margin-top: 20px !important;
    cursor: pointer !important;
}

#place_order:hover {
    box-shadow: 0 0 30px rgba(255, 0, 85, 0.6) !important;
    transform: scale(1.02);
}

/* =========================================
   FIX BỐ CỤC GIỎ HÀNG (SIDE-BY-SIDE) & NÚT BẤM
   ========================================= */

/* 1. Dàn hàng ngang: Bảng bên trái - Tổng tiền bên phải (Chỉ áp dụng trên máy tính) */
@media (min-width: 992px) {

    /* Class .woocommerce mặc định bao quanh cả 2 khối này */
    .woocommerce-cart .woocommerce {
        display: flex;
        gap: 30px;
        /* Khoảng cách giữa 2 khối */
        align-items: flex-start;
        /* Căn thẳng hàng trên cùng */
    }

    /* Khối bên trái: Bảng sản phẩm */
    .woocommerce-cart .woocommerce-cart-form {
        width: 65%;
        /* Chiếm 65% màn hình */
        flex: 0 0 65%;
    }

    /* Khối bên phải: Tổng tiền (Cart Collaterals) */
    .woocommerce-cart .cart-collaterals {
        width: 35%;
        /* Chiếm 35% màn hình */
        flex: 0 0 35%;
        margin-top: 0 !important;
        /* Bỏ khoảng cách thừa */
    }

    /* Đẩy khung tổng tiền dính lên trên */
    .cart_totals {
        margin-top: 0 !important;
        width: 100% !important;
    }
}

/* 2. Fix nút "Cập nhật giỏ hàng" (Update Cart) */
button[name="update_cart"] {
    /* Biến nó thành nút trong suốt có viền, để không tranh chấp với nút Thanh toán */
    background-color: transparent !important;
    color: #64ffda !important;
    /* Chữ xanh neon */
    border: 1px solid #64ffda !important;
    border-radius: 5px !important;
    padding: 10px 20px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    opacity: 1 !important;
    /* Luôn hiển thị rõ, không bị mờ */
    cursor: pointer;
    transition: all 0.3s;
    float: right;
    /* Đẩy sang phải cho gọn */
    margin-top: 10px;
}

button[name="update_cart"]:hover {
    background-color: rgba(100, 255, 218, 0.1) !important;
    box-shadow: 0 0 10px rgba(100, 255, 218, 0.3);
}

/* Khi nút này bị disable (chưa sửa gì), vẫn cho nó hiện đẹp nhưng mờ đi tí */
button[name="update_cart"]:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed;
}

/* 3. Tinh chỉnh lại ô nhập Mã giảm giá cho cân đối */
.coupon {
    display: flex;
    align-items: center;
    gap: 10px;
    float: left;
    /* Mã giảm giá nằm bên trái */
    margin-top: 10px;
}

.coupon input.input-text {
    width: 200px !important;
    /* Rộng ra tí cho dễ nhập */
    margin: 0 !important;
}

.coupon button.button {
    background: #112240 !important;
    color: #fff !important;
    border: 1px solid #233554 !important;
    padding: 11px 20px !important;
    border-radius: 5px !important;
}

.coupon button.button:hover {
    border-color: #64ffda !important;
    color: #64ffda !important;
}

/* Mobile: Trả về dạng dọc (quan trọng để không vỡ trên điện thoại) */
@media (max-width: 991px) {
    .woocommerce-cart .woocommerce {
        display: block;
    }

    .woocommerce-cart .woocommerce-cart-form,
    .woocommerce-cart .cart-collaterals {
        width: 100%;
    }
}

/* 4. FIX KHUNG TỔNG TIỀN (Cart Totals) */
.cart-collaterals .cart_totals {
    background: #112240 !important;
    padding: 30px !important;
    border-radius: 10px !important;
    border: 1px solid #64ffda !important;
}

.cart-collaterals .cart_totals h2 {
    color: #fff !important;
    border-bottom: 2px solid #64ffda !important;
    padding-bottom: 10px !important;
}

/* 5. FIX KHUNG THANH TOÁN (Payment Box) */
#payment {
    background: #020c1b !important;
    border-radius: 8px !important;
}

#payment ul.payment_methods li {
    color: #fff !important;
}

#payment div.payment_box {
    background-color: #112240 !important;
    color: #ccd6f6 !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

#payment div.payment_box::before {
    display: none !important;
    /* Ẩn cái mũi tên xấu xí */
}

/* Tinh chỉnh Responsive */
@media (max-width: 768px) {
    .woocommerce table.shop_table {
        display: block;
        overflow-x: auto;
    }
}

/* =========================================
   FIX LỖI CHỒNG CHÉO GIỎ HÀNG & THU NHỎ CHỮ
   ========================================= */

/* 1. Thu nhỏ cỡ chữ trong bảng sản phẩm */
.woocommerce table.shop_table th {
    font-size: 0.85rem !important;
    /* Chữ tiêu đề cột nhỏ lại */
    padding: 12px 8px !important;
    /* Giảm khoảng cách đệm cho gọn */
    letter-spacing: 0.5px;
    /* Dãn chữ xíu cho dễ đọc */
}

.woocommerce table.shop_table td {
    font-size: 0.9rem !important;
    /* Chữ nội dung nhỏ lại */
    padding: 12px 8px !important;
}

/* 2. Thu nhỏ tên sản phẩm cho đỡ tốn chỗ */
.woocommerce table.shop_table td.product-name a {
    font-size: 0.95rem !important;
    font-weight: 600;
}

/* 3. Thu nhỏ ô nhập số lượng */
.woocommerce .quantity .qty {
    width: 45px !important;
    /* Bé lại */
    padding: 5px !important;
    font-size: 0.9rem !important;
}

/* 4. CHIA LẠI CỘT CHO AN TOÀN (QUAN TRỌNG) */
@media (min-width: 992px) {

    /* Khối bên trái: Bảng sản phẩm -> Giảm xuống còn 58% */
    .woocommerce-cart .woocommerce-cart-form {
        width: 58% !important;
        flex: 0 0 58% !important;
        margin-right: 4% !important;
        /* Tạo khoảng hở 4% ở giữa -> Hết bị đè */
    }

    /* Khối bên phải: Tổng tiền -> Giữ 38% */
    .woocommerce-cart .cart-collaterals {
        width: 38% !important;
        flex: 0 0 38% !important;
    }
}

/* 5. Ẩn ảnh nhỏ (Thumbnail) trên mobile để đỡ chật (Tùy chọn) */
@media (max-width: 600px) {
    .woocommerce table.shop_table .product-thumbnail {
        display: none;
    }
}

/* =========================================
   FIX XUỐNG DÒNG TÊN SẢN PHẨM (CHỐNG VỠ KHUNG)
   ========================================= */

.woocommerce table.shop_table td.product-name {
    /* 1. Giới hạn chiều rộng tối đa của cột tên */
    max-width: 200px !important;

    /* 2. Ép buộc xuống dòng nếu văn bản dài */
    white-space: normal !important;

    /* 3. Ngắt từ nếu từ đó quá dài (ví dụ mã code dài ngoằng) */
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* Trên mobile thì cho rộng ra chút vì nó xuống dòng rồi */
@media (max-width: 768px) {
    .woocommerce table.shop_table td.product-name {
        max-width: none !important;
        /* Thả lỏng trên mobile */
    }
}

/* =========================================
   GIAO DIỆN CHECKOUT FINAL (CÂN ĐỐI TỶ LỆ)
   ========================================= */

/* 1. BỐ CỤC CHIA ĐÔI (FLEXBOX) */
.soi-checkout-layout {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* Căn giữa toàn bộ khối */
    gap: 4%;
    /* Khoảng cách giữa 2 cột */
    margin-top: 20px;
}

/* CỘT TRÁI: Thu nhỏ lại còn 48% */
.soi-col-left {
    width: 48%;
    flex: 0 0 48%;
}

/* CỘT PHẢI: Mở rộng ra thành 48% (cho cân đối chiều cao) */
.soi-col-right {
    width: 48%;
    flex: 0 0 48%;
}

/* Responsive Mobile */
@media (max-width: 991px) {

    .soi-col-left,
    .soi-col-right {
        width: 100%;
        flex: 0 0 100%;
        margin-bottom: 30px;
    }
}

/* 2. STYLE CỘT TRÁI (FORM NHẬP) */
/* Tiêu đề "Thông tin thanh toán" */
.soi-section-header h3 {
    color: #fff;
    text-transform: uppercase;
    font-size: 1.5rem;
    margin-bottom: 25px;
    border-bottom: 1px solid #233554;
    padding-bottom: 15px;
}

/* Khoảng cách giữa các dòng nhập liệu */
.woocommerce form .form-row {
    margin-bottom: 20px;
}

/* Style nhãn (Label) */
.woocommerce form .form-row label {
    display: block;
    color: #ccd6f6;
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 0.95rem;
}

/* Style ô nhập liệu (Input) - Đồng bộ kích thước */
.woocommerce input.input-text {
    background: #0b1120;
    border: 1px solid #233554;
    color: #fff;
    padding: 15px;
    /* Padding đều nhau */
    border-radius: 8px;
    width: 100%;
    font-size: 1rem;
    height: 50px;
    /* Cố định chiều cao để 3 ô bằng chằn chặn */
    box-sizing: border-box;
    transition: all 0.3s;
}

/* Hiệu ứng khi bấm vào */
.woocommerce input.input-text:focus {
    border-color: #64ffda;
    box-shadow: 0 0 15px rgba(100, 255, 218, 0.15);
    outline: none;
}

/* 3. STYLE KHUNG MÃ GIẢM GIÁ (CUSTOM) */
.soi-coupon-section {
    background: rgba(17, 34, 64, 0.4);
    padding: 25px;
    border-radius: 10px;
    border: 1px dashed #64ffda;
    margin-top: 40px;
    /* Cách xa form nhập liệu một chút */
}

.coupon-input-group {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.coupon-input-group input {
    flex: 1;
    height: 45px !important;
    margin: 0 !important;
}

.coupon-input-group button {
    background: #112240;
    color: #64ffda;
    border: 1px solid #64ffda;
    padding: 0 25px;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    height: 45px;
    text-transform: uppercase;
    transition: all 0.3s;
}

.coupon-input-group button:hover {
    background: #64ffda;
    color: #020c1b;
}

/* 4. STYLE CỘT PHẢI (ĐƠN HÀNG) */
.soi-sticky-box {
    background: #112240;
    padding: 35px;
    /* Tăng padding cho thoáng */
    border-radius: 15px;
    border: 1px solid #64ffda;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    position: sticky;
    top: 30px;
}

#order_review_heading {
    margin-top: 0;
    color: #fff;
    text-transform: uppercase;
    font-size: 1.3rem;
    margin-bottom: 25px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 15px;
}

#order_review table.shop_table {
    border: none;
    margin-bottom: 20px;
}

#order_review table.shop_table td,
#order_review table.shop_table th {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: #ccd6f6;
    padding: 15px 0;
}

#order_review .product-name {
    padding-right: 10px;
}

#order_review .product-total,
#order_review .order-total .amount {
    text-align: right;
    color: #64ffda;
    font-weight: bold;
}

/* Khung chuyển khoản ngân hàng */
#payment {
    background: #020c1b;
    border-radius: 8px;
    padding: 15px;
    margin-top: 20px;
}

#payment ul.payment_methods {
    border-bottom: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#payment div.payment_box {
    background-color: #112240;
    color: #a8b2d1;
    padding: 15px;
    font-size: 0.9rem;
    border-radius: 5px;
    margin-top: 10px;
}

/* Nút Đặt hàng */
#place_order {
    background: linear-gradient(45deg, #00e6e6, #d500f9);
    color: #fff;
    width: 100%;
    padding: 20px;
    border-radius: 50px;
    font-size: 1.2rem;
    font-weight: 800;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    margin-top: 25px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    transition: all 0.3s;
}

#place_order:hover {
    box-shadow: 0 0 30px rgba(213, 0, 249, 0.6);
    transform: translateY(-2px);
}

/* 5. ẨN CÁC PHẦN TỬ RÁC */
.woocommerce-form-coupon-toggle {
    display: none !important;
}

.woocommerce-additional-fields {
    display: none;
}

.site-footer {
    clear: both;
    width: 100%;
    display: block;
    margin-top: 50px;
}

/* 1. Ẩn tiêu đề "Thông tin thanh toán" bị lặp ở bên dưới */
.woocommerce-billing-fields>h3 {
    display: none !important;
}

/* 2. Ép tất cả các dòng nhập liệu trong cột trái rộng 100% */
#customer_details .form-row {
    width: 100% !important;
    float: none !important;
    margin-right: 0 !important;
    clear: both !important;
}

/* Đảm bảo input bên trong cũng full 100% */
#customer_details input.input-text {
    width: 100% !important;
    box-sizing: border-box !important;
    /* Để padding không làm lồi ô ra ngoài */
}

/* Khối CSS trang thông tin đơn hàng/
/* =========================================
   TRANG CẢM ƠN FINAL (QR CODE & CĂN GIỮA)
   ========================================= */

/* 1. CĂN GIỮA TUYỆT ĐỐI CÁC TIÊU ĐỀ */
.woocommerce-order h2,
.woocommerce-order h3,
.woocommerce-bacs-bank-details h2,
.woocommerce-order-details__title {
    text-align: center !important;
    float: none !important;
    /* Hủy bỏ float mặc định */
    clear: both !important;
    /* Ngắt dòng sạch sẽ */
    width: 100% !important;
    display: block !important;
    margin-top: 40px !important;
    margin-bottom: 30px !important;
    color: #fff !important;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(100, 255, 218, 0.3);
    padding-bottom: 15px;
}

/* Dòng thông báo cảm ơn */
.woocommerce-order p.woocommerce-notice {
    text-align: center !important;
    font-size: 1.2rem;
    margin-bottom: 40px;
    color: #64ffda;
}

/* 2. KHỐI QR CODE & HƯỚNG DẪN (MỚI) */
.soi-bank-transfer-box {
    background: #112240;
    border: 2px solid #64ffda;
    /* Viền xanh neon */
    border-radius: 15px;
    padding: 40px;
    text-align: center;
    max-width: 600px;
    margin: 0 auto 50px auto;
    /* Căn giữa màn hình */
    box-shadow: 0 0 30px rgba(100, 255, 218, 0.15);
}

.qr-image-wrapper img {
    max-width: 250px;
    /* Kích thước QR */
    border-radius: 10px;
    border: 5px solid #fff;
    /* Viền trắng cho QR dễ đọc */
    margin-bottom: 20px;
}

.transfer-instruction p {
    color: #ccd6f6;
    margin-bottom: 10px;
}

/* Cú pháp chuyển khoản nổi bật */
.transfer-syntax {
    background: #020c1b;
    color: #ff0055;
    /* Màu đỏ nổi bật */
    font-size: 1.5rem;
    font-weight: 900;
    padding: 15px;
    border: 2px dashed #ff0055;
    border-radius: 8px;
    display: inline-block;
    user-select: all;
    /* Bấm vào là bôi đen để copy */
}

/* 3. FIX LẠI KHUNG NGÂN HÀNG (BACS) CHO ĐẸP */
.woocommerce-bacs-bank-details {
    max-width: 800px;
    margin: 0 auto;
}

/* Danh sách bank: Chuyển từ Grid sang Flex để không bị vụn */
.wc-bacs-bank-details {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    /* Căn giữa */
    gap: 30px;
}

.wc-bacs-bank-details li {
    background: transparent !important;
    /* Bỏ nền đen nhỏ */
    border: 1px solid rgba(100, 255, 218, 0.3) !important;
    padding: 20px !important;
    border-radius: 10px;
    min-width: 200px;
    text-align: center;
}

.wc-bacs-bank-details strong {
    display: block;
    color: #64ffda;
    font-size: 1.3rem;
    margin-top: 5px;
}

/* 4. BẢNG TÓM TẮT & CHI TIẾT */
ul.order_details {
    display: flex;
    justify-content: center;
    gap: 40px;
    background: rgba(17, 34, 64, 0.6);
    padding: 20px;
    border-radius: 10px;
    list-style: none;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

ul.order_details li {
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    padding-right: 40px;
    margin: 0;
}

ul.order_details li:last-child {
    border: none;
}

/* Bảng chi tiết sản phẩm */
.woocommerce-order-details {
    max-width: 800px;
    margin: 0 auto;
    background: #112240;
    padding: 30px;
    border-radius: 15px;
}

.woocommerce-table--order-details th {
    background: #0a192f;
    color: #64ffda;
}

.woocommerce-table--order-details td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Responsive */
@media (max-width: 768px) {
    ul.order_details {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    ul.order_details li {
        border: none;
        padding: 0;
    }

    .wc-bacs-bank-details {
        flex-direction: column;
    }
}

.woocommerce-bacs-bank-details {
    display: none !important;
}

.woocommerce-order-received h1.entry-title,
.woocommerce-checkout h1.entry-title {
    text-align: center !important;
    /* Ép chữ ra giữa */
    display: block !important;
    /* Chiếm hết dòng */
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Căn giữa luôn cái gạch chân neon của nó (nếu có) */
.woocommerce-order-received h1.entry-title::after,
.woocommerce-checkout h1.entry-title::after {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* =========================================
   TRANG TÀI KHOẢN (MY ACCOUNT) - FINAL DASHBOARD
   ========================================= */

/* 1. CẤU TRÚC DASHBOARD (FLEXBOX) */
/* Gom menu và nội dung vào 1 hàng ngang */
.woocommerce-account .woocommerce {
    display: flex;
    align-items: flex-start;
    /* Căn hàng trên cùng */
    gap: 40px;
    /* Khoảng cách giữa Menu và Nội dung */
    margin-top: 30px;
}

/* --- CỘT TRÁI: MENU ĐIỀU HƯỚNG --- */
.woocommerce-MyAccount-navigation {
    width: 300px;
    /* Chiều rộng cố định cho menu */
    flex: 0 0 300px;
    /* Không co giãn */
    background: #112240;
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid #64ffda;
    /* Viền xanh neon */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.woocommerce-MyAccount-navigation li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.woocommerce-MyAccount-navigation li:last-child {
    border-bottom: none;
}

.woocommerce-MyAccount-navigation li a {
    display: block;
    padding: 18px 25px;
    color: #a8b2d1;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Hiệu ứng khi di chuột hoặc đang chọn */
.woocommerce-MyAccount-navigation li a:hover,
.woocommerce-MyAccount-navigation li.is-active a {
    background: rgba(100, 255, 218, 0.1);
    /* Nền xanh mờ */
    color: #64ffda;
    /* Chữ sáng lên */
    padding-left: 35px;
    /* Hiệu ứng trượt sang phải */
    border-left: 4px solid #64ffda;
}

/* Thêm mũi tên nhỏ bên phải link menu */
.woocommerce-MyAccount-navigation li a::after {
    content: '›';
    font-size: 1.5rem;
    line-height: 1;
}

/* --- CỘT PHẢI: NỘI DUNG CHÍNH --- */
.woocommerce-MyAccount-content {
    flex: 1;
    /* Chiếm hết phần còn lại */
    background: rgba(17, 34, 64, 0.6);
    /* Nền trong suốt tối */
    padding: 40px;
    border-radius: 15px;
    border: 1px dashed rgba(100, 255, 218, 0.3);
    /* Viền đứt nét tech */
    color: #ccd6f6;
    min-height: 400px;
}

/* Style chữ trong nội dung */
.woocommerce-MyAccount-content p {
    font-size: 1.1rem;
    line-height: 1.8;
}

.woocommerce-MyAccount-content a {
    color: #64ffda;
    text-decoration: underline;
}

.woocommerce-MyAccount-content strong {
    color: #fff;
}

/* --- FORM ĐĂNG NHẬP / ĐĂNG KÝ (KHI CHƯA LOGIN) --- */
/* Tách riêng layout cho trang login vì nó không có menu bên trái */
#customer_login {
    display: flex;
    gap: 50px;
}

.u-column1,
.u-column2 {
    flex: 1;
    background: #112240;
    padding: 40px;
    border-radius: 15px;
    border: 1px solid #233554;
}

.u-column1 h2,
.u-column2 h2 {
    color: #fff;
    text-transform: uppercase;
    border-bottom: 1px solid #64ffda;
    padding-bottom: 15px;
    margin-bottom: 20px;
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 991px) {

    /* Trên mobile thì xếp dọc */
    .woocommerce-account .woocommerce {
        flex-direction: column;
    }

    .woocommerce-MyAccount-navigation {
        width: 100%;
        flex: none;
        margin-bottom: 30px;
    }

    .woocommerce-MyAccount-content {
        width: 100%;
        flex: none;
        padding: 20px;
    }

    #customer_login {
        flex-direction: column;
    }
}

/* 1. Căn giữa tiêu đề trang Tài khoản */
.woocommerce-account .entry-header,
.woocommerce-account h1.entry-title {
    text-align: center !important;
    width: 100%;
    display: block;
}

/* Căn giữa gạch chân neon (nếu có) */
.woocommerce-account h1.entry-title::after {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 2. (Khuyến mãi) Fix cái khung thông báo màu trắng xấu xí thành nền tối */
.woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-MyAccount-content .woocommerce-info {
    background-color: #112240 !important;
    /* Nền tối */
    color: #fff !important;
    /* Chữ trắng */
    border-top: 3px solid #64ffda !important;
    /* Viền trên xanh neon */
}

/* Đổi màu icon trong khung thông báo */
.woocommerce-MyAccount-content .woocommerce-message::before,
.woocommerce-MyAccount-content .woocommerce-info::before {
    color: #64ffda !important;
}

/* Nút "Duyệt sản phẩm" */
.woocommerce-MyAccount-content .woocommerce-Button {
    background: #64ffda !important;
    color: #020c1b !important;
    font-weight: bold;
    border-radius: 4px;
}

/* Ẩn cột Địa chỉ giao hàng (Chỉ dùng cho web bán hàng số) */
.woocommerce-account .u-column2.woocommerce-Address {
    display: none !important;
}

.woocommerce-account .u-columns.woocommerce-Addresses {
    justify-content: center;
    /* Đưa khung còn lại ra giữa */
}

.woocommerce-account .u-columns.woocommerce-Addresses .u-column1 {
    width: 100% !important;
    /* Cho khung thanh toán rộng ra hoặc giữ nguyên tùy bạn */
    max-width: 600px;
    /* Giới hạn độ rộng cho đẹp */
}

/* Khung bao quanh khu vực tải file */
.woocommerce-order-downloads {
    margin-bottom: 40px;
    background: rgba(17, 34, 64, 0.8);
    border: 2px dashed #00e6e6;
    /* Viền đứt nét xanh neon */
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    position: relative;
    box-shadow: 0 0 30px rgba(0, 230, 230, 0.15);
}

/* Tiêu đề "Tải xuống" (nếu có) */
.woocommerce-order-downloads h2 {
    color: #fff !important;
    text-transform: uppercase;
    font-size: 1.5rem;
    border-bottom: none !important;
    margin-bottom: 20px !important;
}

/* Bảng chứa link tải */
.woocommerce-order-downloads table {
    border: none !important;
    margin: 0 auto !important;
    width: 100%;
    max-width: 600px;
    background: transparent !important;
}

.woocommerce-order-downloads table th,
.woocommerce-order-downloads table td {
    border: none !important;
    padding: 15px !important;
    text-align: center !important;
    color: #ccd6f6;
}

/* Tên file */
.woocommerce-order-downloads .download-product a {
    color: #fff;
    font-size: 1.2rem;
    font-weight: bold;
    text-decoration: none;
}

/* NÚT TẢI XUỐNG (QUAN TRỌNG NHẤT) */
.woocommerce-order-downloads .download-file .button {
    background: linear-gradient(45deg, #00e6e6, #d500f9) !important;
    color: #fff !important;
    padding: 12px 30px !important;
    border-radius: 50px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    display: inline-block !important;
    box-shadow: 0 0 15px rgba(0, 230, 230, 0.5) !important;
    transition: all 0.3s;
    border: none !important;
}

.woocommerce-order-downloads .download-file .button:hover {
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(213, 0, 249, 0.8) !important;
}

/* Ẩn các cột thừa thãi (như ngày hết hạn) trên mobile cho gọn */
@media (max-width: 768px) {
    .woocommerce-order-downloads .download-expires {
        display: none;
    }
}

/* =========================================
   FOOTER FINAL (GRID SYSTEM - CÂN ĐỐI)
   ========================================= */

.site-footer {
    background-color: #020c1b;
    border-top: 1px solid rgba(100, 255, 218, 0.1);
    padding-top: 60px;
    margin-top: 0;
    font-size: 0.95rem;
    /* Cỡ chữ toàn footer vừa phải */
}

/* 1. CHIA 3 CỘT BẰNG GRID (Cực chuẩn) */
.footer-grid {
    display: grid;
    /* Chia tỷ lệ: Cột 1 (4 phần) - Cột 2 (3 phần) - Cột 3 (4 phần) */
    grid-template-columns: 1.3fr 0.7fr 1fr;
    gap: 50px;
    /* Khoảng cách giữa các cột */
    padding-bottom: 40px;
    align-items: start;
    /* Căn hàng ngang bắt đầu từ trên cùng */
}

/* 2. STYLE CHUNG CHO CÁC CỘT */
.footer-col {
    text-align: left;
    /* Bắt buộc căn trái toàn bộ */
}

.footer-title {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 25px;
    letter-spacing: 1px;
    display: block;
    border-left: 3px solid #64ffda;
    /* Gạch dọc trang trí */
    padding-left: 15px;
    line-height: 1;
}

/* 3. CỘT 1: THÔNG TIN LIÊN HỆ */
.footer-desc {
    color: #64ffda;
    font-weight: 600;
    margin-bottom: 20px;
    font-size: 0.9rem;
}

.footer-contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 15px;
    color: #a8b2d1;
}

.footer-contact-list i {
    color: #64ffda;
    margin-top: 4px;
    /* Căn icon khớp với dòng đầu tiên của text */
}

/* Social Icons (Thẳng hàng với text) */
.social-icons {
    display: flex;
    gap: 15px;
    margin-top: 25px;
}

.social-icons a {
    width: 35px;
    height: 35px;
    border: 1px solid #64ffda;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64ffda;
    transition: all 0.3s;
}

.social-icons a:hover {
    background: #64ffda;
    color: #020c1b;
    box-shadow: 0 0 10px #64ffda;
}

/* 4. CỘT 2: LIÊN KẾT NHANH (Fix lỗi lệch) */
.footer-links {
    list-style: none;
    padding: 0 !important;
    /* Xóa padding mặc định của trình duyệt */
    margin: 0 !important;
}

.footer-links li {
    margin-bottom: 12px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
    /* Đường kẻ mờ phân cách */
    padding-bottom: 5px;
}

.footer-links a {
    color: #a8b2d1;
    text-decoration: none;
    transition: 0.3s;
    display: block;
    /* Để click được hết dòng */
}

.footer-links a:hover {
    color: #64ffda;
    padding-left: 5px;
}

/* 5. CỘT 3: FANPAGE (Fix ảnh to) */
.footer-fanpage-box {
    background: #112240;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid rgba(100, 255, 218, 0.2);
    text-align: center;
    /* Căn giữa nội dung trong hộp này */
}

/* Ảnh đại diện Fanpage (Thu nhỏ thành Avatar) */
.footer-fanpage-box img {
    width: 80px !important;
    /* Kích thước cố định nhỏ gọn */
    height: 80px !important;
    object-fit: cover;
    /* Cắt ảnh cho tròn trịa không méo */
    border-radius: 50%;
    /* Bo tròn */
    border: 2px solid #64ffda;
    margin: 0 auto 15px auto;
    /* Căn giữa ảnh */
    display: block;
    box-shadow: 0 0 15px rgba(100, 255, 218, 0.3);
}

/* Nút theo dõi */
.btn-follow {
    display: inline-block;
    background: transparent;
    color: #64ffda;
    padding: 8px 20px;
    border-radius: 30px;
    font-weight: bold;
    border: 1px solid #64ffda;
    transition: 0.3s;
    font-size: 0.85rem;
    text-transform: uppercase;
}

.btn-follow:hover {
    background: #64ffda;
    color: #020c1b;
    box-shadow: 0 0 15px rgba(100, 255, 218, 0.5);
}

/* 6. DÒNG COPYRIGHT */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 20px 0;
    text-align: center;
    font-size: 0.85rem;
    color: #555;
    margin-top: 20px;
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr;
        /* Về 1 cột */
        gap: 40px;
    }

    .footer-col {
        text-align: center;
        /* Trên mobile căn giữa cho đẹp */
    }

    .footer-title {
        border-left: none;
        border-bottom: 2px solid #64ffda;
        display: inline-block;
        padding-left: 0;
        padding-bottom: 5px;
    }

    .footer-contact-list li {
        justify-content: center;
    }

    .social-icons {
        justify-content: center;
    }
}

/* =========================================
   BỔ SUNG: MENU MOBILE (FIX LỖI HIỆN TRÊN PC)
   ========================================= */

/* 1. MẶC ĐỊNH TRÊN MÁY TÍNH: ẨN NÚT 3 GẠCH */
.menu-toggle {
    display: none !important;
    /* Quan trọng: Ẩn nút này đi */
}

/* 2. CHỈ ÁP DỤNG TRÊN ĐIỆN THOẠI & TABLET (Màn hình nhỏ hơn 768px) */
/* --- FIX FOOTER MOBILE (CĂN GIỮA ĐỒNG BỘ) --- */
@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr;
        /* Về 1 cột */
        gap: 40px;
        text-align: center;
        /* Quan trọng: Căn giữa tất cả */
    }

    /* Căn giữa các thành phần con */
    .footer-col {
        text-align: center !important;
        align-items: center !important;
        display: flex;
        flex-direction: column;
    }

    .footer-title {
        border-left: none;
        border-bottom: 2px solid #64ffda;
        padding-left: 0;
        padding-bottom: 10px;
        display: inline-block;
        /* Để gạch chân chỉ dài bằng chữ */
        margin: 0 auto 20px auto;
        /* Căn giữa block */
    }

    /* Danh sách liên hệ */
    .footer-contact-list li {
        justify-content: center;
        text-align: center;
    }

    /* Social Icons */
    .social-icons {
        justify-content: center;
        margin-top: 20px;
        width: 100%;
    }

    /* Fanpage Box */
    .footer-fanpage-box {
        margin: 0 auto;
        /* Căn giữa hộp fanpage */
        max-width: 300px;
    }
}

/* ======================================================
   FIX TOÀN DIỆN MOBILE - FINAL (DÁN CUỐI FILE STYLE.CSS)
   ====================================================== */

@media only screen and (max-width: 768px) {

    /* --- 1. FIX MENU MOBILE XỔ RA --- */
    /* Mặc định ẩn menu đi */
    .main-menu {
        display: none !important;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #0b1120;
        border-top: 2px solid #64ffda;
        z-index: 9999;
    }

    /* Chỉ hiện khi có class active (do JS thêm vào) */
    .main-menu.active {
        display: block !important;
        animation: slideDown 0.3s ease;
    }

    /* Chuyển list thành dọc */
    .main-menu ul {
        flex-direction: column !important;
        width: 100% !important;
        gap: 0 !important;
    }

    .main-menu li {
        text-align: center !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        width: 100% !important;
    }

    .main-menu a {
        display: block !important;
        padding: 15px !important;
    }

    /* --- 2. FIX FOOTER CĂN GIỮA TUYỆT ĐỐI --- */
    .footer-grid {
        display: block !important;
        /* Hủy Grid, chuyển sang block dọc */
        padding: 0 15px !important;
    }

    .footer-col {
        width: 100% !important;
        margin-bottom: 40px !important;
        text-align: center !important;
        /* Căn giữa nội dung */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        /* Căn giữa flex item */
    }

    /* Tiêu đề footer */
    .footer-title {
        text-align: center !important;
        border-left: none !important;
        border-bottom: 2px solid #64ffda !important;
        padding-left: 0 !important;
        padding-bottom: 10px !important;
        display: inline-block !important;
        margin: 0 auto 20px auto !important;
    }

    /* Các list liên hệ */
    .footer-contact-list li {
        justify-content: center !important;
        text-align: center !important;
    }

    /* Mạng xã hội */
    .social-icons {
        justify-content: center !important;
        width: 100% !important;
        display: flex !important;
        gap: 15px !important;
    }

    /* Ảnh fanpage */
    .footer-fanpage-box {
        margin: 0 auto !important;
        max-width: 100% !important;
    }
}

/* ======================================================
   FIX MENU MOBILE FINAL: NÚT SÁT MÉP - FONT ĐẸP - MÀU NEON
   ====================================================== */

@media (max-width: 768px) {

    /* 1. HEADER CONTAINER: Thiết lập sân khấu */
    .site-header .container {
        display: flex !important;
        justify-content: center !important;
        /* Logo nằm chính giữa */
        align-items: center !important;
        height: 70px;
        padding: 0 !important;
        /* Xóa padding để căn mép chuẩn */
        width: 100% !important;
        /* Chiếm hết chiều rộng màn hình */
        max-width: 100% !important;
        position: relative !important;
        /* Làm mốc tọa độ */
    }

    /* 2. LOGO: Nằm giữa */
    .site-header .logo {
        margin: 0 !important;
        z-index: 1001;
        /* Nổi lên trên */
    }

    .site-header .logo img {
        height: 50px !important;
        /* Logo nhỏ gọn */
    }

    /* 3. NÚT MENU (3 GẠCH): Ghim sát mép trái màn hình */
    .menu-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        position: absolute !important;
        /* Tách khỏi dòng chảy */
        left: 20px !important;
        /* Cách mép trái 20px */
        top: 50% !important;
        /* Căn giữa dọc */
        transform: translateY(-50%) !important;

        /* Style nút bấm */
        background: transparent !important;
        border: 1px solid #64ffda !important;
        /* Viền xanh neon */
        color: #64ffda !important;
        font-size: 1.4rem !important;
        width: 40px;
        height: 40px;
        border-radius: 5px;
        cursor: pointer;
        z-index: 1002;
        /* Luôn nằm trên cùng */
    }

    /* 4. MENU XỔ XUỐNG: Phủ kín màn hình, Font đẹp */
    .main-menu {
        display: none !important;
        /* Mặc định ẩn */
        position: fixed !important;
        /* Cố định che toàn màn hình bên dưới header */
        top: 70px !important;
        /* Bắt đầu ngay dưới header */
        left: 0 !important;
        width: 100% !important;
        height: calc(100vh - 70px) !important;
        /* Chiều cao full màn hình còn lại */
        background-color: rgba(2, 12, 27, 0.98) !important;
        /* Nền đen đậm (gần như đặc) */
        z-index: 1000;
        overflow-y: auto;
        /* Cho phép cuộn nếu menu dài */
        border-top: 1px solid #64ffda;
    }

    /* Khi có class active thì hiện ra */
    .main-menu.active {
        display: block !important;
        animation: slideInLeft 0.3s ease;
        /* Hiệu ứng trượt từ trái sang */
    }

    /* DANH SÁCH LINK */
    .main-menu ul {
        flex-direction: column !important;
        width: 100% !important;
        padding: 20px 0 !important;
        margin: 0 !important;
        gap: 0 !important;
    }

    .main-menu li {
        width: 100% !important;
        text-align: center !important;
        /* Chữ nằm giữa */
        border-bottom: 1px solid rgba(100, 255, 218, 0.1) !important;
        /* Gạch ngang mờ */
    }

    /* Style chữ trong menu (Sửa lỗi font xấu) */
    .main-menu a {
        display: block !important;
        padding: 20px !important;

        /* Font chữ chuẩn đẹp */
        font-family: var(--main-font) !important;
        font-size: 1.1rem !important;
        /* Chữ to rõ */
        font-weight: 700 !important;
        /* Chữ đậm */
        text-transform: uppercase !important;
        /* Viết hoa toàn bộ */
        color: #fff !important;
        /* Màu trắng */
        text-decoration: none !important;
        letter-spacing: 1px;
    }

    /* Hiệu ứng khi bấm vào link trên điện thoại */
    .main-menu a:hover,
    .main-menu a:active {
        background-color: rgba(100, 255, 218, 0.1) !important;
        color: #64ffda !important;
        /* Chữ chuyển xanh neon */
    }

    /* 5. FIX FOOTER MOBILE (Giữ nguyên code cũ cho footer) */
    .footer-grid {
        display: flex !important;
        flex-direction: column !important;
    }

    .footer-col {
        text-align: center !important;
        margin-bottom: 30px !important;
        width: 100% !important;
    }

    .social-icons {
        justify-content: center !important;
    }

    .footer-title {
        margin: 0 auto 20px auto !important;
        display: inline-block !important;
    }

    .footer-fanpage-box {
        margin: 0 auto !important;
    }
}

/* Hiệu ứng trượt nhẹ */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* =========================================
   HEADER CART & FINAL MOBILE LAYOUT
   ========================================= */

/* --- 1. STYLE ICON GIỎ HÀNG (CHUNG) --- */
.header-cart {
    margin-left: auto;
    /* Đẩy sang phải trên PC */
    position: relative;
    margin-left: 30px !important;
    /* Đẩy khối giỏ hàng cách xa menu 30px */
    padding-left: 20px !important;
    /* Khoảng cách từ dấu gạch đến icon giỏ */
}

.header-cart a {
    color: #64ffda;
    font-size: 1.5rem;
    text-decoration: none;
    display: flex;
    align-items: center;
    transition: 0.3s;
}

.header-cart a:hover {
    color: #fff;
    text-shadow: 0 0 10px #64ffda;
}

/* Số lượng sản phẩm (Badge) */
.cart-count {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #ff0055;
    color: #fff;
    font-size: 0.75rem;
    font-weight: bold;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 5px #ff0055;
}

/* --- 2. CĂN CHỈNH TRÊN MÁY TÍNH (DESKTOP) --- */
@media (min-width: 769px) {
    .site-header .container {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        /* Logo trái, Menu giữa */
    }

    .main-menu {
        margin-left: 40px;
        /* Cách logo một đoạn */
    }

    /* Ẩn nút menu mobile trên PC (Nhắc lại cho chắc) */
    .menu-toggle {
        display: none !important;
    }
}

/* --- 3. CĂN CHỈNH TRÊN ĐIỆN THOẠI (MOBILE) --- */
@media (max-width: 768px) {

    /* Layout 3 phần tử: Nút (Trái) - Logo (Giữa) - Giỏ (Phải) */
    .site-header .container {
        display: flex !important;
        justify-content: center !important;
        /* Logo ở giữa */
        align-items: center !important;
        padding: 10px 20px !important;
        position: relative !important;
        height: 70px;
    }

    /* 1. Nút Menu (Trái) */
    .menu-toggle {
        position: absolute !important;
        left: 20px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
        right: auto !important;
    }

    /* 2. Logo (Giữa) */
    .site-header .logo {
        margin: 0 !important;
    }

    /* 3. Giỏ hàng (Phải) */
    .header-cart {
        position: absolute !important;
        right: 20px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
        z-index: 1002;
    }
}

/* =========================================
   FIX KHOẢNG CÁCH GIỎ HÀNG & MENU (PC)
   ========================================= */
@media (min-width: 769px) {
    .header-cart {
        margin-left: 30px !important;
        /* Cách xa menu 30px */
        padding-left: 30px !important;
        /* Thêm đệm bên trong */
        border-left: 1px solid rgba(100, 255, 218, 0.2);

    }

    /* Đẩy menu sang trái một chút để nhường chỗ */
    .main-menu {
        margin-right: 0;
    }
}

/* =========================================
   FIX CĂN GIỮA TIÊU ĐỀ TOÀN BỘ WEBSITE
   ========================================= */

/* Target tất cả các loại tiêu đề chính của trang */
h1.entry-title,
/* Trang thường, Bài viết */
h1.page-title,
/* Trang lưu trữ */
h1.woocommerce-products-header__title,
/* Trang Shop (Cửa hàng) */
.woocommerce-cart .entry-title,
/* Trang Giỏ hàng */
.woocommerce-checkout .entry-title,
/* Trang Thanh toán */
.woocommerce-account .entry-title

/* Trang Tài khoản */
    {
    text-align: center !important;
    /* Ép ra giữa */
    width: 100% !important;
    /* Chiếm hết dòng */
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 40px !important;
    /* Cách nội dung bên dưới ra cho thoáng */

    /* Style chữ cho thống nhất */
    color: #fff !important;
    text-transform: uppercase !important;
    font-weight: 900 !important;
    font-size: 2.5rem !important;
}

/* Căn giữa luôn cái gạch chân Neon (nếu có) */
h1.entry-title::after,
h1.page-title::after,
h1.woocommerce-products-header__title::after {
    margin-left: auto !important;
    margin-right: auto !important;
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background: #64ffda;
    margin-top: 15px;
    border-radius: 2px;
    box-shadow: 0 0 10px #64ffda;
}

/* Responsive mobile: Giảm size chữ chút cho đỡ tràn */
@media (max-width: 768px) {

    h1.entry-title,
    h1.page-title,
    h1.woocommerce-products-header__title {
        font-size: 1.8rem !important;
    }
}

/* =========================================
   SHOP LAYOUT & KHUNG SẢN PHẨM (NEW)
   ========================================= */

/* 1. BỐ CỤC 2 CỘT (NỘI DUNG - SIDEBAR) */
/* Class này có được do bạn đã sửa file woocommerce.php ở bước trước */
.shop-layout-wrapper {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    margin-top: 40px;
}

.shop-main-content {
    flex: 1;
    /* Nội dung chiếm phần lớn */
    width: 70%;
}

.shop-sidebar-area {
    width: 300px;
    /* Sidebar cố định 300px */
    flex: 0 0 300px;
}

/* 2. KHUNG SẢN PHẨM CHI TIẾT (VIỀN 3 MÀU BO TRÒN) */
.woocommerce div.product {
    display: flex !important;
    flex-wrap: wrap !important;
    padding: 40px !important;
    margin-bottom: 50px !important;
    position: relative !important;

    /* --- VIỀN GRADIENT BO TRÒN (GIỐNG TRANG CHỦ) --- */
    border: 3px solid transparent !important;
    border-radius: 20px !important;
    background:
        linear-gradient(#112240, #112240) padding-box,
        linear-gradient(45deg, #00e6e6, #d500f9, #ff0055) border-box !important;

    box-shadow: 0 0 30px rgba(0, 230, 230, 0.15) !important;
}

/* Ảnh và chữ bên trong */
.woocommerce div.product div.images {
    width: 45% !important;
    float: left !important;
    margin-right: 5% !important;
}

.woocommerce div.product div.summary {
    width: 50% !important;
    float: right !important;
}

/* Bo tròn ảnh sản phẩm bên trong */
.woocommerce div.product div.images img {
    border-radius: 15px !important;
    border: 1px solid rgba(100, 255, 218, 0.2) !important;
}

/* 3. STYLE CHO SIDEBAR (TÌM KIẾM & LỌC) */
.widget {
    background: #112240;
    padding: 25px;
    border-radius: 15px;
    border: 1px solid rgba(100, 255, 218, 0.2);
    margin-bottom: 30px;
}

.widget-title {
    color: #fff;
    font-size: 1.1rem;
    border-bottom: 2px solid #64ffda;
    padding-bottom: 10px;
    margin-bottom: 20px;
    text-align: left !important;
    /* Tiêu đề widget căn trái */
}

/* Ô tìm kiếm */
.woocommerce-product-search {
    display: flex;
}

.woocommerce-product-search input {
    background: #020c1b;
    border: 1px solid #233554;
    color: #fff;
    padding: 10px;
    border-radius: 5px 0 0 5px;
    width: 100%;
}

.woocommerce-product-search button {
    background: #64ffda;
    color: #020c1b;
    border: none;
    font-weight: bold;
    padding: 10px 15px;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
}

/* Thanh trượt giá (Price Filter) */
.price_slider_wrapper .ui-slider {
    background-color: #020c1b;
    height: 6px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.price_slider_wrapper .ui-slider-range {
    background: #64ffda;
}

.price_slider_wrapper .ui-slider-handle {
    background: #d500f9;
    border-radius: 50%;
    top: -3px;
}

.price_slider_amount .button {
    background: #64ffda;
    color: #020c1b;
    padding: 5px 15px;
    font-size: 0.8rem;
    border-radius: 4px;
    font-weight: bold;
    float: right;
}

.price_slider_amount .price_label {
    color: #ccd6f6;
    font-size: 0.9rem;
}

/* Responsive Mobile */
@media (max-width: 991px) {
    .shop-layout-wrapper {
        flex-direction: column;
    }

    .shop-main-content,
    .shop-sidebar-area {
        width: 100%;
        flex: none;
    }

    .shop-sidebar-area {
        order: 2;
        margin-top: 40px;
    }

    /* Đẩy sidebar xuống dưới */
    .woocommerce div.product div.images,
    .woocommerce div.product div.summary {
        width: 100% !important;
        float: none !important;
    }
}

/* =========================================
   SHOP LAYOUT FINAL (FIX CỨNG CHO WIDGET BLOCK)
   ========================================= */

/* --- 1. BỐ CỤC CHIA 2 CỘT (FLEXBOX THAY VÌ GRID) --- */
/* Dùng Flexbox an toàn hơn khi Widget sinh ra thẻ lạ */
.shop-layout-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: flex-start;
    margin-top: 40px;
    width: 100%;
}

/* Cột Sidebar (Bên trái) */
.shop-sidebar-area {
    width: 260px;
    /* Chiều rộng cố định */
    flex: 0 0 260px;
    /* Không co giãn */
    margin-top: 85px;
    /* Đẩy xuống ngang hàng sản phẩm */
    z-index: 1;
}

/* Cột Nội dung (Bên phải) */
.shop-main-content {
    flex: 1;
    /* Chiếm hết phần còn lại */
    width: calc(100% - 290px);
    /* Trừ đi sidebar và gap */
    max-width: 100%;
}

/* --- 2. LƯỚI SẢN PHẨM (GRID 4 CỘT) --- */
.woocommerce ul.products {
    display: grid !important;
    /* Ép cứng 4 cột bằng mọi giá */
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    margin: 0 0 40px 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

/* Reset thẻ li sản phẩm */
.woocommerce ul.products li.product {
    width: auto !important;
    margin: 0 !important;
    float: none !important;
    clear: none !important;
    display: flex !important;
    flex-direction: column !important;
}

/* --- 3. STYLE THẺ SẢN PHẨM (NEON CARD) --- */
.woocommerce ul.products li.product {
    background: rgba(17, 34, 64, 0.6) !important;
    border-radius: 15px !important;
    padding: 15px !important;
    position: relative !important;
    overflow: hidden !important;
    text-align: center !important;

    /* Viền Gradient */
    border: 2px solid transparent !important;
    background:
        linear-gradient(#112240, #112240) padding-box,
        linear-gradient(45deg, #00e6e6, #d500f9, #ff0055) border-box !important;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.3s ease !important;
}

.woocommerce ul.products li.product:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 0 25px rgba(0, 230, 230, 0.4) !important;
}

.woocommerce ul.products li.product a img {
    height: 180px !important;
    width: 100% !important;
    object-fit: cover !important;
    border-radius: 10px !important;
    margin-bottom: 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    color: #fff !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin-bottom: 5px !important;
    flex-grow: 1;
    padding: 0 5px !important;
}

.woocommerce ul.products li.product .price {
    color: #64ffda !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    display: block !important;
    margin-bottom: 10px !important;
}

.woocommerce ul.products li.product .button {
    background: linear-gradient(45deg, #ff0055, #d500f9) !important;
    color: #fff !important;
    border-radius: 50px !important;
    padding: 8px 15px !important;
    font-weight: bold !important;
    font-size: 0.8rem !important;
    text-transform: uppercase !important;
    border: none !important;
    margin-top: auto !important;
    width: 100% !important;
}

/* --- 4. STYLE SIDEBAR WIDGETS --- */
.shop-sidebar-area .widget {
    background: #112240 !important;
    padding: 20px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(100, 255, 218, 0.2) !important;
    margin-bottom: 25px !important;
    display: block !important;
    /* Hiện widget */
}

.shop-sidebar-area .widget-title {
    color: #fff !important;
    font-size: 1.1rem !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding-bottom: 10px !important;
    margin-bottom: 15px !important;
    text-align: left !important;
}

/* Ô tìm kiếm */
.woocommerce-product-search {
    display: flex !important;
    position: relative;
}

.woocommerce-product-search input {
    background: #020c1b !important;
    border: 1px solid #233554 !important;
    color: #fff !important;
    width: 100% !important;
    height: 40px !important;
    padding-right: 40px !important;
    /* Chừa chỗ cho nút */
    border-radius: 5px !important;
}

.woocommerce-product-search button {
    position: absolute;
    right: 0;
    top: 0;
    background: #64ffda !important;
    color: #020c1b !important;
    border: none !important;
    font-weight: bold !important;
    height: 40px !important;
    border-radius: 0 5px 5px 0 !important;
    padding: 0 15px !important;
}

/* --- 5. RESPONSIVE --- */

/* Laptop nhỏ (1200px): 3 cột */
@media (max-width: 1200px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Tablet (991px): Sidebar rớt xuống, 2 cột sản phẩm */
@media (max-width: 991px) {
    .shop-layout-wrapper {
        flex-direction: column;
    }

    .shop-sidebar-area {
        width: 100%;
        flex: none;
        margin-top: 0;
        margin-bottom: 30px;
        order: 1;
        /* Sidebar lên đầu */
    }

    .shop-main-content {
        width: 100%;
        flex: none;
        order: 2;
    }

    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Mobile (480px): 1 cột */
@media (max-width: 480px) {
    .woocommerce ul.products {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================
   FIX LỖI Ô TRỐNG ĐẦU TIÊN & NÚT TRÀN VIỀN
   ========================================= */

/* 1. XÓA BỎ "PHẦN TỬ MA" CỦA WOOCOMMERCE (Sửa lỗi ô trống) */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
    content: none !important;
    display: none !important;
}

/* 2. FIX NÚT MUA HÀNG TRÀN VIỀN */
.woocommerce ul.products li.product {
    padding-bottom: 25px !important;
    /* Tăng khoảng hở dưới đáy */
}

.woocommerce ul.products li.product .button {
    width: 90% !important;
    /* Nút nhỏ lại chút để không chạm viền */
    margin: 15px auto 0 auto !important;
    /* Căn giữa nút */
    font-size: 0.8rem !important;
    /* Chữ nhỏ lại xíu cho gọn */
    padding: 10px 0 !important;
}

/* 3. CĂN CHỈNH LẠI GIÁ TIỀN CHO THOÁNG */
.woocommerce ul.products li.product .price {
    margin-bottom: 15px !important;
}

/* =========================================
   FIX LỖI MENU & LÀM ĐẸP BỘ LỌC GIÁ (FINAL)
   ========================================= */

/* --- 1. FIX LỖI MENU BIẾN MẤT KHI TÌM KIẾM --- */
/* Nguyên nhân: Do xung đột thứ tự hiển thị (Z-Index) */

.site-header {
    position: relative !important;
    z-index: 99999 !important;
    /* Đặt chỉ số cao nhất để luôn nằm trên mọi thứ */
    background: #0b1120 !important;
    /* Đảm bảo nền không bị trong suốt */
}

/* Đảm bảo menu chính trên PC luôn hiện (Force Display) */
@media (min-width: 769px) {
    .main-menu {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}


/* 4. FIX LẠI BỘ LỌC GIÁ (Cho đẹp như cũ) */
.price_slider_amount {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-direction: row !important;
    margin-top: 15px !important;
}

.price_slider_amount .price_label {
    order: 1 !important;
    color: #ccd6f6 !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    text-align: left !important;
}

.price_slider_amount .price_label span {
    color: #64ffda !important;
}

.price_slider_amount .button {
    order: 2 !important;
    float: none !important;
    background: #64ffda !important;
    color: #020c1b !important;
    font-weight: 800 !important;
    padding: 5px 15px !important;
    font-size: 0.8rem !important;
}

/* =========================================
   FIX SIDEBAR MOBILE: CHỈ HIỆN TÌM KIẾM & LỌC GIÁ
   ========================================= */

@media (max-width: 991px) {

    /* 1. Ẩn tất cả các Widget khác (Mặc định) */
    .shop-sidebar-area .widget {
        display: none !important;
    }

    /* 2. Chỉ hiện lại Widget TÌM KIẾM */
    .shop-sidebar-area .widget_product_search,
    .shop-sidebar-area .widget_search {
        display: block !important;
    }

    /* 3. Chỉ hiện lại Widget LỌC GIÁ */
    .shop-sidebar-area .widget_price_filter {
        display: block !important;
    }

    /* Tinh chỉnh khoảng cách cho đẹp trên mobile */
    .shop-sidebar-area {
        margin-bottom: 20px !important;
        border-bottom: 1px dashed #64ffda;
        /* Thêm đường kẻ ngăn cách với sản phẩm */
        padding-bottom: 20px;
    }
}

/* =========================================
   ẨN SORT & KẾT QUẢ TRÊN MOBILE (CHO GỌN)
   ========================================= */

@media (max-width: 768px) {

    /* Ẩn dòng "Hiển thị tất cả 5 kết quả" */
    .woocommerce-result-count {
        display: none !important;
    }

    /* Ẩn khung "Sắp xếp mặc định" */
    .woocommerce-ordering {
        display: none !important;
    }

    /* Đẩy sản phẩm lên sát tiêu đề SHOP hơn (nếu cần) */
    .shop-main-content {
        margin-top: -20px !important;
    }
}

/* ======================================================
   FIX MENU MOBILE FINAL V2 (NÚT SÁT MÉP & ĐÓNG MỞ MƯỢT)
   ====================================================== */

@media (max-width: 768px) {

    /* 1. HEADER: Logo Giữa - Nút Trái - Giỏ Phải */
    .site-header .container {
        display: flex !important;
        justify-content: center !important;
        /* Logo căn giữa */
        align-items: center !important;
        height: 70px;
        padding: 0 !important;
        /* Xóa đệm để căn sát mép */
        position: static !important;
        /* Bỏ relative để nút theo body */
    }

    /* Logo */
    .site-header .logo {
        margin: 0 !important;
        z-index: 1001;
    }

    .site-header .logo img {
        height: 50px !important;
    }

    /* 2. NÚT MENU (3 GẠCH): Ghim sát mép màn hình trái */
    /* --- SỬA LẠI NÚT MENU (CĂN GIỮA TUYỆT ĐỐI) --- */
    .menu-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;

        position: absolute !important;
        /* Tách khỏi dòng chảy */
        left: 20px !important;
        /* Cách lề trái 20px */

        /* CÔNG THỨC CĂN GIỮA DỌC CHUẨN NHẤT */
        top: 50% !important;
        transform: translateY(-50%) !important;

        /* Style nút */
        background: transparent !important;
        border: 1px solid #64ffda !important;
        color: #64ffda !important;
        width: 40px;
        height: 40px;
        border-radius: 5px;
        cursor: pointer;
        z-index: 1005 !important;
        margin: 0 !important;
        /* Xóa margin thừa nếu có */
    }

    /* 3. MENU XỔ XUỐNG */
    .main-menu {
        display: none !important;
        /* Mặc định ẩn tuyệt đối */
        position: fixed !important;
        top: 70px !important;
        left: 0 !important;
        width: 100% !important;
        height: calc(100vh - 70px) !important;
        background-color: rgba(2, 12, 27, 0.98) !important;
        z-index: 1000;
        border-top: 1px solid #64ffda;
    }

    /* KHI CÓ CLASS 'OPEN' THÌ HIỆN (Logic đơn giản hóa) */
    .main-menu.open {
        display: block !important;
        animation: fadeIn 0.3s ease;
    }

    /* Nội dung menu */
    .main-menu ul {
        flex-direction: column !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .main-menu li {
        text-align: center !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        width: 100%;
    }

    .main-menu a {
        display: block !important;
        padding: 20px !important;
        font-size: 1.1rem !important;
        font-weight: bold !important;
        color: #fff !important;
        text-transform: uppercase !important;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* =========================================
   KHO PROMPT STYLES (NEON DARK MODE)
   ========================================= */

.prompt-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

/* THẺ CARD (STYLE GIỐNG SẢN PHẨM) */
.prompt-card {
    position: relative;
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 30px 20px;
    border-radius: 20px;
    min-height: 380px;
    transition: all 0.3s ease;

    /* Viền Gradient 3 màu */
    border: 3px solid transparent;
    background:
        linear-gradient(#112240, #112240) padding-box,
        linear-gradient(45deg, #00e6e6, #d500f9, #ff0055) border-box;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.prompt-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 0 30px rgba(0, 230, 230, 0.2);
}

/* Badge Tên Ứng dụng (Đỏ cam nổi bật) */
.prompt-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(45deg, #ff0055, #ff5722);
    color: white;
    font-size: 0.8rem;
    font-weight: 800;
    padding: 6px 15px;
    border-radius: 20px;
    box-shadow: 0 5px 15px rgba(255, 0, 85, 0.4);
    white-space: nowrap;
    text-transform: uppercase;
    border: 2px solid #020c1b;
    /* Viền đen tách nền */
}

/* Icon Info (i) */
.prompt-info-icon {
    position: absolute;
    top: 15px;
    right: 15px;
    color: #64ffda;
    cursor: help;
    font-size: 1.2rem;
    z-index: 10;
}

.prompt-info-icon:hover {
    text-shadow: 0 0 10px #64ffda;
    transform: scale(1.1);
}

/* Tooltip Hướng dẫn */
.prompt-tooltip {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 100%;
    right: -20px;
    width: 280px;
    background: #0b1120;
    color: #ccd6f6;
    text-align: left;
    padding: 15px;
    border-radius: 10px;
    font-size: 0.9rem;
    line-height: 1.5;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
    z-index: 20;
    transition: all 0.3s;
    border: 1px solid #64ffda;
}

.prompt-info-icon:hover .prompt-tooltip {
    visibility: visible;
    opacity: 1;
    bottom: 140%;
}

/* Icon Chính */
.prompt-main-icon {
    font-size: 3rem;
    margin-bottom: 20px;
    margin-top: 20px;
    /* Icon màu gradient */
    background: -webkit-linear-gradient(45deg, #00e6e6, #d500f9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 5px rgba(0, 230, 230, 0.5));
}

/* Nội dung */
.prompt-title {
    color: #fff;
    font-size: 1.3rem;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.prompt-desc {
    color: #a8b2d1;
    font-size: 0.95rem;
    margin-bottom: 25px;
    flex-grow: 1;
    line-height: 1.6;
}

/* KHU VỰC NÚT BẤM COPY */
.prompt-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: auto;
}

.btn-copy-prompt {
    background: transparent;
    border: 1px solid #64ffda;
    /* Viền xanh neon */
    color: #64ffda;
    padding: 12px 20px;
    border-radius: 50px;
    /* Bo tròn như nút mua hàng */
    cursor: pointer;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
}

.btn-copy-prompt:hover {
    background: rgba(100, 255, 218, 0.1);
    box-shadow: 0 0 15px rgba(100, 255, 218, 0.4);
}

/* Trạng thái ĐÃ COPY (Màu xanh lá hoặc Tím) */
.btn-copy-prompt.copied {
    background: #00e676 !important;
    /* Xanh lá thành công */
    color: #000 !important;
    border-color: #00e676 !important;
    box-shadow: 0 0 20px #00e676 !important;
}

/* Responsive */
@media (max-width: 1200px) {
    .prompt-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 991px) {
    .prompt-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .prompt-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   ZALO FLOATING BUTTON (FIXED POSITION - FINAL)
   ========================================= */

.zalo-floating-btn {
    position: fixed !important;
    /* Bắt buộc cố định vị trí */
    bottom: 30px;
    /* Cách đáy 30px */
    right: 30px;
    /* Cách phải 30px */
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999 !important;
    /* Lớp cao nhất, đè lên mọi thứ */
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.3s ease;

    /* Fix lỗi bị rung lắc nhẹ trên một số trình duyệt */
    -webkit-transform: translateZ(0);
}

.zalo-floating-btn:hover {
    transform: scale(1.1);
}

/* 1. VÒNG TRÒN CHỮ XOAY */
.zalo-text-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: spinText 15s linear infinite;
    /* Xoay chậm rãi */
    pointer-events: none;
}

.zalo-text-ring text {
    font-size: 24px;
    /* Chữ to rõ */
    font-weight: 800;
    letter-spacing: 3px;
    font-family: var(--main-font);
    text-shadow: 0 0 8px #64ffda;
    /* Phát sáng mạnh hơn */
}

@keyframes spinText {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* 2. ICON RUNG LẮC */
.zalo-icon-center {
    width: 65px;
    height: 65px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 25px rgba(41, 98, 255, 0.8);
    /* Bóng xanh đậm đà */
    position: relative;
    z-index: 2;
    animation: shakeIcon 4s infinite;
    /* Rung nhẹ */
}

@keyframes shakeIcon {
    0% {
        transform: rotate(0) scale(1);
    }

    5% {
        transform: rotate(-10deg) scale(1.1);
    }

    10% {
        transform: rotate(10deg) scale(1.1);
    }

    15% {
        transform: rotate(-10deg) scale(1.1);
    }

    20% {
        transform: rotate(10deg) scale(1.1);
    }

    25% {
        transform: rotate(0) scale(1);
    }

    100% {
        transform: rotate(0) scale(1);
    }
}

/* 3. RESPONSIVE MOBILE (THU NHỎ ĐỂ KHÔNG CHE NỘI DUNG) */
@media (max-width: 768px) {
    .zalo-floating-btn {
        width: 90px;
        height: 90px;
        bottom: 20px;
        right: 10px;
    }

    .zalo-text-ring svg {
        width: 90px;
        height: 90px;
    }

    .zalo-icon-center {
        width: 50px;
        height: 50px;
    }

    .zalo-icon-center svg {
        width: 30px;
        height: 30px;
    }

    .zalo-text-ring text {
        font-size: 26px;
    }

    /* Chỉnh cỡ chữ SVG cho khớp mobile */
}

/* =========================================
   SORA DOWNLOADER TOOL STYLES
   ========================================= */

.sora-tool-header {
    text-align: center;
    margin-bottom: 40px;
}

.sora-tool-box {
    background: #112240;
    border-radius: 20px;
    border: 1px solid #64ffda;
    padding: 40px;
    max-width: 600px;
    margin: 0 auto 50px auto;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
}

/* Input Group */
.sora-input-wrapper {
    display: flex;
    position: relative;
    background: #020c1b;
    border: 2px solid #233554;
    border-radius: 50px;
    padding: 5px;
    transition: 0.3s;
}

.sora-input-wrapper:focus-within {
    border-color: #64ffda;
    box-shadow: 0 0 15px rgba(100, 255, 218, 0.2);
}

.input-icon {
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64ffda;
    font-size: 1.2rem;
}

.sora-input-wrapper input {
    flex: 1;
    background: transparent !important;
    border: none !important;
    color: #fff !important;
    font-size: 1.1rem;
    padding: 0 10px;
    height: 50px !important;
}

.sora-input-wrapper input:focus {
    box-shadow: none !important;
}

/* Nút Action */
.btn-neon-action {
    background: linear-gradient(45deg, #00e6e6, #d500f9);
    color: #fff;
    border: none;
    border-radius: 40px;
    padding: 0 30px;
    font-weight: 800;
    font-size: 1rem;
    cursor: pointer;
    transition: 0.3s;
    min-width: 150px;
}

.btn-neon-action:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(213, 0, 249, 0.6);
}

/* Thông báo lỗi */
.sora-alert {
    background: rgba(255, 85, 85, 0.1);
    border: 1px solid #ff5555;
    color: #ff5555;
    padding: 15px;
    border-radius: 10px;
    margin-top: 20px;
    text-align: center;
    font-weight: 600;
}

/* Kết quả */
#sora-result {
    margin-top: 40px;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
    padding-top: 40px;
}

.sora-result-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.sora-preview video {
    width: 100%;
    border-radius: 15px;
    border: 2px solid #233554;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Action Card */
.action-card {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.action-card .icon {
    width: 50px;
    height: 50px;
    background: rgba(100, 255, 218, 0.1);
    color: #64ffda;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.action-card h3 {
    margin: 0;
    color: #fff;
    font-size: 1.2rem;
}

.action-card p {
    margin: 0;
    color: #a8b2d1;
    font-size: 0.9rem;
}

/* Nút tải xuống to */
.btn-download-big {
    display: block;
    text-align: center;
    background: #64ffda;
    color: #020c1b;
    padding: 18px;
    border-radius: 10px;
    font-weight: 900;
    font-size: 1.2rem;
    text-decoration: none;
    text-transform: uppercase;
    margin-bottom: 20px;
    transition: 0.3s;
}

.btn-download-big:hover {
    background: #fff;
    box-shadow: 0 0 20px #64ffda;
    transform: translateY(-3px);
}

.action-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 20px 0;
}

.secondary-actions {
    display: flex;
    gap: 15px;
}

.btn-small {
    flex: 1;
    text-align: center;
    padding: 10px;
    border-radius: 5px;
    background: #233554;
    color: #ccd6f6;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    border: 1px solid transparent;
    cursor: pointer;
}

.btn-small:hover {
    border-color: #64ffda;
    color: #64ffda;
}

/* Hướng dẫn */
.sora-guide {
    max-width: 800px;
    margin: 0 auto;
    color: #a8b2d1;
}

.sora-guide h3 {
    color: #fff;
    border-left: 3px solid #64ffda;
    padding-left: 10px;
    margin-bottom: 15px;
}

.sora-guide ul {
    padding-left: 20px;
}

.sora-guide li {
    margin-bottom: 10px;
}

/* Mobile */
@media (max-width: 768px) {
    .sora-input-wrapper {
        flex-direction: column;
        border-radius: 15px;
        padding: 15px;
    }

    .btn-neon-action {
        width: 100%;
        margin-top: 10px;
        padding: 12px 0;
    }

    .sora-result-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   HEADER ACTIONS (LOGIN & CART) - FINAL
   ========================================= */

/* Khung bao quanh cả 2 nút */
.header-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    /* Khoảng cách giữa User và Cart */
    margin-left: auto;
    /* Đẩy sát phải */
}

/* Style Nút Tài khoản */
.header-account a {
    color: #64ffda;
    font-size: 1.2rem;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    transition: 0.3s;
}

.header-account a:hover {
    color: #fff;
    text-shadow: 0 0 10px #64ffda;
}

/* Chữ "Đăng nhập" (Ẩn trên mobile cho gọn) */
.login-text {
    font-size: 0.9rem;
    text-transform: uppercase;
}

/* Style Nút Giỏ hàng (Giữ nguyên style cũ nhưng bỏ margin-left vì đã có gap) */
.header-cart {
    margin-left: 0 !important;
    padding-left: 20px;
    border-left: 1px solid rgba(100, 255, 218, 0.2);
    /* Gạch ngăn cách */
    margin-left: 30px !important;
    /* Đẩy khối giỏ hàng cách xa menu 30px */
    padding-left: 20px !important;
    /* Khoảng cách từ dấu gạch đến icon giỏ */
}

/* RESPONSIVE MOBILE */
@media (max-width: 768px) {
    .login-text {
        display: none;
    }

    /* Ẩn chữ Đăng nhập */

    /* Đẩy cụm nút này ra sát phải trên mobile */
    .header-actions {
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1002;
        gap: 15px;
    }

    /* Ẩn bớt border ngăn cách trên mobile cho thoáng */
    .header-cart {
        border-left: none;
        padding-left: 0;
    }
}

/* =========================================
   FIX KHOẢNG CÁCH HEADER (TÁCH MENU & GIỎ HÀNG)
   ========================================= */

@media (min-width: 992px) {

    /* 1. Thu hẹp lại khoảng cách giữa các chữ trong Menu (để tiết kiệm chỗ) */
    .main-menu ul {
        gap: 20px !important;
        /* Giảm khoảng cách giữa các link menu */
    }

    /* 2. Đẩy cụm nút (Liên hệ + Giỏ hàng) ra xa Menu */
    .header-actions {
        margin-left: 50px !important;
        /* Cách xa menu 50px */
        padding-left: 30px !important;
        /* Đệm thêm bên trong */
        border-left: 1px solid rgba(100, 255, 218, 0.2) !important;
        /* Thêm vạch ngăn cách mờ */
        height: 40px;
        display: flex;
        align-items: center;
    }
}

/* =========================================
   HEADER ACTIONS (LOGIN & CART) - FINAL
   ========================================= */

/* --- 1. CẤU TRÚC CHUNG --- */
.header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    /* Khoảng cách giữa User và Cart */
    margin-left: auto;
    /* Đẩy sát về bên phải */
}

/* --- 2. STYLE NÚT ĐĂNG NHẬP (USER ICON) --- */
.header-login a {
    color: #64ffda;
    /* Xanh neon */
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    transition: 0.3s;
}

.header-login a:hover {
    color: #fff;
    text-shadow: 0 0 10px #64ffda;
}

/* --- 3. STYLE VẠCH NGĂN CÁCH --- */
.header-divider {
    color: rgba(100, 255, 218, 0.3);
    font-size: 1.2rem;
    margin-top: -3px;
    /* Căn chỉnh lại chút cho thẳng hàng với icon */
}

/* --- 4. STYLE GIỎ HÀNG (RESET LẠI) --- */
.header-cart {
    position: relative;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

.header-cart a {
    color: #64ffda;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
}

/* --- 5. RESPONSIVE (MOBILE & TABLET) --- */
@media (max-width: 768px) {

    /* Ẩn Icon Đăng nhập và Vạch ngăn cách trên Mobile */
    .header-login,
    .header-divider {
        display: none !important;
    }

    /* Đưa Giỏ hàng về vị trí chuẩn trên Mobile (Góc phải) */
    .header-actions {
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        margin: 0;
        z-index: 1002;
    }
}

/* Fix khoảng cách trên PC (Tách Menu và Icon ra xa) */
@media (min-width: 769px) {
    .header-actions {
        margin-left: 40px !important;
    }

    /* Đảm bảo menu nằm giữa hoặc lệch trái tùy ý */
    .main-menu {
        margin-right: auto;
        margin-left: 40px;
    }
}

/* =========================================
   NÚT ĐĂNG NHẬP TRONG MENU MOBILE
   ========================================= */

/* 1. Mặc định ẩn trên máy tính (PC) */
.mobile-login-section {
    display: none;
}

/* 2. Chỉ hiện trên điện thoại */
@media (max-width: 768px) {
    .mobile-login-section {
        display: block !important;
        margin: 0;
        padding: 0;
        list-style: none;
        /* Tạo đường kẻ ngăn cách với các menu trên */
        border-top: 2px solid #64ffda;
        margin-top: 10px;
        background: rgba(100, 255, 218, 0.05);
        /* Nền sáng nhẹ để nổi bật */
    }

    .mobile-login-section li {
        width: 100%;
        text-align: center;
    }

    .mobile-login-section a {
        display: block !important;
        padding: 20px !important;
        color: #64ffda !important;
        /* Chữ màu xanh Neon */
        font-weight: 900 !important;
        text-transform: uppercase;
        font-size: 1.1rem !important;
        text-decoration: none;
    }

    .mobile-login-section a i {
        margin-right: 10px;
        /* Khoảng cách icon */
    }

    .mobile-login-section a:hover {
        background: rgba(100, 255, 218, 0.2);
    }
}

/* =========================================
   FIX HIỂN THỊ MENU & ICON (FINAL)
   ========================================= */

/* 1. TRÊN MÁY TÍNH (PC): Ẩn dòng chữ chào Admin, chỉ hiện Icon */
@media (min-width: 769px) {

    /* Ẩn khối text "Chào Admin / Đăng nhập" trong menu */
    .mobile-login-section {
        display: none !important;
    }

    /* Căn chỉnh lại khoảng cách giữa chữ "LIÊN HỆ" và cụm Icon bên phải */
    .header-actions {
        margin-left: 40px !important;
        /* Cách menu ra 40px */
        padding-left: 25px !important;
        /* Khoảng cách từ dấu gạch đến icon */
        border-left: 1px solid rgba(100, 255, 218, 0.3);
        /* Dấu gạch mờ */
        display: flex;
        align-items: center;
    }
}

/* 2. TRÊN ĐIỆN THOẠI (MOBILE): Hiện chữ chào Admin */
@media (max-width: 768px) {
    .mobile-login-section {
        display: block !important;
    }
}

/* =========================================
   YOUTUBE POPUP STYLES (CYBERPUNK)
   ========================================= */

/* 1. Lớp phủ nền đen mờ (Overlay) */
.soi-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    /* Nền đen rất đậm */
    z-index: 9999999;
    /* Cao nhất mọi thời đại */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
    backdrop-filter: blur(5px);
    /* Làm mờ hậu cảnh */
}

/* Khi kích hoạt thì hiện lên */
.soi-popup-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* 2. Hộp nội dung chính */
.soi-popup-content {
    background: #112240;
    width: 90%;
    max-width: 450px;
    padding: 40px 30px;
    border-radius: 20px;
    text-align: center;
    position: relative;
    border: 2px solid #ff0055;
    /* Viền đỏ Youtube pha Neon */
    box-shadow: 0 0 30px rgba(255, 0, 85, 0.4);
    transform: scale(0.8);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Hiệu ứng nảy */
}

.soi-popup-overlay.active .soi-popup-content {
    transform: scale(1);
}

/* 3. Nút tắt X */
.soi-close-popup {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 2rem;
    color: #8892b0;
    cursor: pointer;
    line-height: 1;
    transition: 0.3s;
}

.soi-close-popup:hover {
    color: #fff;
    transform: rotate(90deg);
}

/* 4. Icon Youtube to */
.soi-popup-icon {
    font-size: 4rem;
    color: #ff0000;
    margin-bottom: 15px;
    text-shadow: 0 0 20px rgba(255, 0, 0, 0.6);
    animation: floatIcon 3s infinite ease-in-out;
}

/* 5. Nội dung chữ */
.soi-popup-content h2 {
    color: #fff;
    font-size: 1.8rem;
    margin-bottom: 15px;
    text-transform: uppercase;
    font-weight: 900;
}

.soi-popup-content p {
    color: #ccd6f6;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* 6. Nút Subscribe hành động */
.soi-btn-sub {
    display: inline-block;
    background: linear-gradient(45deg, #ff0000, #ff0055);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 800;
    text-decoration: none;
    padding: 15px 30px;
    border-radius: 50px;
    box-shadow: 0 5px 15px rgba(255, 0, 0, 0.4);
    transition: 0.3s;
    width: 100%;
    box-sizing: border-box;
}

.soi-btn-sub:hover {
    background: linear-gradient(45deg, #ff0055, #ff0000);
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(255, 0, 0, 0.6);
    color: #fff;
}

@keyframes floatIcon {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}