/* ====================== menu.css ====================== */
/* menu mb */
.wrapmenumb a { text-decoration: none; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); color: inherit; }
        .wrapmenumb ul { list-style: none; padding: 0; margin: 0; }

        .wrapmenumb p { line-height: 1.7; color: #475569; }

        .wrapmenumb .main-header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background: white;
            z-index: 1000;
            border-bottom: 1px solid rgba(15, 23, 42, 0.05);
        }

        .wrapmenumb .header-top-bar {
            background: var(--theme-color);
            color: #ffffff;
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            padding: 6px 0;
            text-align: center;
        }

        .wrapmenumb .header-content {
            height: 70px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 20px;
        }

        .wrapmenumb .logo-text img{
            width: 140px;height: auto;
        }

        .wrapmenumb .icon-btn {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            background: #f1f5f9;
            color: #0f172a;
            cursor: pointer;
            border: none;
            transition: all 0.2s ease;
        }
        .wrapmenumb .icon-btn:active {
            transform: scale(0.95);
        }
        .wrapmenumb .icon-btn.rounded-circle {
            border-radius: 50%;
        }

        .wrapmenumb .modal-custom-backdrop {
            position: fixed;
            inset: 0;
            background: rgba(15, 23, 42, 0.4);
            backdrop-filter: blur(4px);
            z-index: 1800;
            display: none;
            opacity: 0;
            transition: opacity 0.4s ease;
        }
        .wrapmenumb .modal-custom-backdrop.active { display: block; opacity: 1; }

        .wrapmenumb .overlay-panel {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 90%;
            background: #ffffff;
            z-index: 2000;
            border-top-left-radius: 32px;
            border-top-right-radius: 32px;
            transform: translateY(100%);
            transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
            box-shadow: 0 -20px 40px rgba(0,0,0,0.1);
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        .wrapmenumb .overlay-panel.active { transform: translateY(0); }
        .wrapmenumb .overlay-panel .titlemd{font-weight: 600;font-size: 20px;}
        .wrapmenumb .overlay-side {
            position: fixed;
            top: 0;
            left: 0;
            width: 85%;
            max-width: 360px;
            height: 100%;
            background: #ffffff;
            z-index: 2100;
            transform: translateX(-100%);
            transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
            display: flex;
            flex-direction: column;
        }
        .wrapmenumb .overlay-side.active { transform: translateX(0); }

        .wrapmenumb .sheet-header {
            padding: 24px 20px 15px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: relative;
        }
        
        .wrapmenumb .panel-title {
            font-size: 16px;
            font-weight: 800;
            color: #0f172a;
            text-align: center;
            text-transform: uppercase;
            letter-spacing: 1px;
            position: relative;
            padding-bottom: 12px;
            flex-grow: 1;
            margin: 0;
        }
        
        .wrapmenumb .panel-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 36px;
            height: 4px;
            background: var(--theme-color);
            border-radius: 4px;
        }

        .wrapmenumb .menu-auth-header {
            padding: 20px 15px 25px;
            background: linear-gradient(135deg, var(--theme-color5) 0%, #ffffff 100%);
            border-bottom: 1px solid #f1f5f9;
        }
        .wrapmenumb .user-avatar-big {
            width: 60px; height: 60px;
            border-radius: 20px;
            background: #ffffff;
            box-shadow: 0 10px 20px var(--theme-color5);
            display: flex; align-items: center; justify-content: center;
            font-size: 24px; color: var(--theme-color); border: 2px solid #ffffff;
        }

        .wrapmenumb .nav-list-wrapper { padding: 10px 15px; flex: 1; overflow-y: auto; }
        
        .wrapmenumb .nav-item-l1 {
            border-radius: 16px;
            margin-bottom: 4px;
            overflow: hidden;
        }
        .wrapmenumb .nav-link-l1 {
            padding: 14px 16px;
            display: flex;
            align-items: center;
            font-weight: 700;
            color: #1e293b;
            font-size: 15px;
            justify-content: space-between;
        }
        .wrapmenumb .nav-link-l1:active { background: #f1f5f9; }
        .wrapmenumb .nav-icon-box {
            width: 32px; height: 32px;
            border-radius: 10px;
            display: flex; align-items: center; justify-content: center;
            margin-right: 12px;
            font-size: 14px;
        }

        .wrapmenumb .submenu-l2 { background: #f8fafc; display: none; padding: 5px 0; }
        .wrapmenumb .nav-link-l2 {
            padding: 12px 16px 12px 40px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 14px;
            font-weight: 600;
            color: #475569;
        }
        .wrapmenumb .submenu-l3 { display: none; background: #f1f5f9; padding: 5px 0; }
        .wrapmenumb .nav-link-l3 {
            padding: 10px 16px 10px 75px;
            display: block;
            font-size: 13px;
            color: #64748b;
            font-weight: 500;
            position: relative;
        }
        .wrapmenumb .nav-link-l3::before {
            content: ''; position: absolute; left: 60px; top: 50%;
            width: 4px; height: 4px; border-radius: 50%; background: #cbd5e1;
            transform: translateY(-50%);
        }

        .wrapmenumb .toggle-chevron {
            width: 30px; height: 30px;
            display: flex; align-items: center; justify-content: center;
            transition: transform 0.3s ease;
            color: #94a3b8;
        }
        .wrapmenumb .rotated { transform: rotate(180deg); }

        .wrapmenumb .search-input-group {
            background: #f1f5f9;
            border-radius: 16px;
            padding: 4px 12px;
            display: flex;
            align-items: center;
            margin: 15px 20px;
        }
        .wrapmenumb .search-input-group input {
            border: none; background: transparent; padding: 10px;
            font-size: 15px; width: 100%; outline: none;
        }

        .wrapmenumb .bottom-tab-nav {
            position: fixed; bottom: 0; left: 0; width: 100%;
            height: 85px; background: white;
            backdrop-filter: blur(20px);
            display: flex; justify-content: space-around;
            align-items: center; border-top: 1px solid rgba(0,0,0,0.05);
            z-index: 200; padding-bottom: env(safe-area-inset-bottom);
        }
        .wrapmenumb .tab-item {
            display: flex; flex-direction: column; align-items: center;
            gap: 4px; color: #94a3b8; font-size: 11px; font-weight: 700;
            flex: 1; position: relative;
        }
        .wrapmenumb .tab-item.active { color: var(--theme-color); }
        .wrapmenumb .tab-item i { font-size: 20px; transition: transform 0.2s ease; }
        .wrapmenumb .tab-item:active i { transform: scale(1.2); }
        
        .wrapmenumb .tab-cart-center {
            width: 56px; height: 56px; background: var(--theme-color);
            border-radius: 20px; display: flex; align-items: center;
            justify-content: center; margin-top: -45px;
            box-shadow: 0 10px 25px var(--theme-color5);
            border: 4px solid #ffffff; color: #ffffff !important;
            position: relative;
        }
        .wrapmenumb .cart-badge-dot {
            position: absolute;
            top: -2px;
            right: -2px;
            background: #ffffff;
            color: var(--theme-color);
            font-size: 10px;
            font-weight: 800;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        .wrapmenumb .form-floating-custom {
            margin-bottom: 15px;
            position: relative;
        }
        .wrapmenumb .form-floating-custom label {
            display: block; font-size: 12px; font-weight: 800;
            color: #64748b; text-transform: uppercase; margin-bottom: 8px;
        }
        .wrapmenumb .form-floating-custom input {
            width: 100%; padding: 14px 18px; border-radius: 16px;
            background: #f8fafc; border: 1px solid #e2e8f0;
            font-size: 15px; font-weight: 500; transition: all 0.3s ease;
        }
        .wrapmenumb .form-floating-custom input:focus {
            background: #ffffff; border-color: var(--theme-color); outline: none;
            box-shadow: 0 0 0 4px var(--theme-color5);
        }
        .wrapmenumb .toggle-password {
            position: absolute;
            right: 15px;
            bottom: 14px;
            color: #94a3b8;
            cursor: pointer;
            z-index: 10;
        }

        .wrapmenumb .btn-social {
            width: 100%;
            padding: 12px;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            font-weight: 700;
            font-size: 14px;
            border: 1px solid #e2e8f0;
            background: #ffffff;
            margin-bottom: 12px;
        }

        .wrapmenumb .search-prod-item {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 12px;
            border-radius: 16px;
            background: #f8fafc;
            margin-bottom: 10px;
            border: 1px solid transparent;
            transition: all 0.2s ease;
        }
        .wrapmenumb .search-prod-item:active { background: #f1f5f9; border-color: #e2e8f0; }
        .wrapmenumb .search-prod-item img {
            width: 54px;
            height: 54px;
            border-radius: 10px;
            object-fit: cover;
        }

        .wrapmenumb .lang-section {
            padding: 24px;
            border-top: 1px solid #f1f5f9;
            background: #ffffff;
        }
        .wrapmenumb .lang-title {
            font-size: 11px;
            font-weight: 800;
            color: #94a3b8;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 12px;
            display: block;
        }
        .wrapmenumb .lang-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }
        .wrapmenumb .lang-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 10px;
            border-radius: 12px;
            border: 1px solid #e2e8f0;
            background: #ffffff;
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .wrapmenumb .lang-btn.active {
            border-color: var(--theme-color);
            background: var(--theme-color5);
            color: var(--theme-color);
        }
        .wrapmenumb .lang-btn img {
            width: 20px;
            height: 14px;
            object-fit: cover;
            border-radius: 2px;
        }
        
        .wrapmenumb .btn-outline-custom {
            border: 1px solid #e2e8f0;
            color: #475569;
            background: transparent;
            transition: all 0.3s ease;
        }
        .wrapmenumb .btn-outline-custom:hover, .wrapmenumb .btn-outline-custom:active {
            background: #f8fafc;
            color: #0f172a;
        }

        .wrapmenumb .contact-pill {
            background: #ffffff; 
            border-radius: 20px; 
            padding: 16px;
            display: flex; 
            align-items: center; 
            gap: 15px; 
            margin-bottom: 15px;
            border: 1px solid #f1f5f9;
            box-shadow: 0 10px 30px rgba(0,0,0,0.03);
            transition: all 0.3s ease;
        }
        .wrapmenumb .contact-pill:active {
            transform: scale(0.98);
        }
        .wrapmenumb .contact-icon-bg {
            width: 50px; height: 50px; border-radius: 16px;
            display: flex; align-items: center; justify-content: center;
            font-size: 22px; color: #ffffff;
            background: linear-gradient(135deg, var(--theme-color), var(--theme-color2));
            box-shadow: 0 8px 15px var(--theme-color5);
        }
        .wrapmenumb .contact-icon-bg.zalo {
            background: linear-gradient(135deg, #0ea5e9, #0284c7);
            box-shadow: 0 8px 15px rgba(14, 165, 233, 0.2);
        }

        @media (max-width: 768px) {
            .wrapmenumb .main-header { height: auto; }
            .wrapmenumb .header-content { height: 60px; }
        }

        @media (max-width: 576px) {
            .wrapmenumb .tab-item span { font-size: 10px; }
        }
        

/* login nhanh menu */

.user-hover-wrapper {

    position: relative;

    display: inline-block;

}



.user-hover-wrapper .icon-trigger {

    width: 48px;

    height: 48px;

    border-radius: 50%;

    background: #ffffff;

    box-shadow: 0 0 0 6px var(--theme-color5), 0 4px 10px rgba(255, 77, 141, 0.1);

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--theme-color);

    font-size: 18px;

    cursor: pointer;

    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

    position: relative;

    z-index: 10;

}



.user-hover-wrapper:hover .icon-trigger {

    background: var(--theme-color);

    color: #ffffff;

    box-shadow: 0 0 0 6px var(--theme-color5), 0 6px 15px rgba(255, 77, 141, 0.25);

    transform: translateY(-2px);

}



.user-hover-wrapper .hover-dropdown-panel {

    position: absolute;

    top: calc(100% + 25px);

    right: -10px;

    width: 360px;

    background: #ffffff;

    border-radius: 20px;

    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);

    border: 1px solid #f8fafc;

    padding: 30px;

    opacity: 0;

    visibility: hidden;

    transform: translateY(15px);

    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);

    z-index: 1100;

}



.user-hover-wrapper .hover-dropdown-panel::before {

    content: '';

    position: absolute;

    top: -25px;

    right: 0;

    width: 100%;

    height: 25px;

    background: transparent;

}



.user-hover-wrapper:hover .hover-dropdown-panel {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}



.user-hover-wrapper .panel-header h2 {

    font-weight: 800;

    font-size: 20px;

    color: #0f172a;

    margin-bottom: 4px;

}



.user-hover-wrapper .panel-header p {

    font-size: 13px;

    color: #64748b;

    margin-bottom: 24px;

}



.user-hover-wrapper .form-label {

    font-weight: 700;

    font-size: 13px;

    color: #0f172a;

    margin-bottom: 8px;

    display: block;

}



.user-hover-wrapper .forgot-link {

    font-size: 12px;

    font-weight: 700;

    color: var(--theme-color);

    text-decoration: none;

    transition: color 0.2s;

}



.user-hover-wrapper .forgot-link:hover {

    color: var(--theme-color2);

}



.user-hover-wrapper .form-control {

    border-radius: 12px;

    padding: 12px 16px;

    border: 1.5px solid #f1f5f9;

    background: #f8fafc;

    font-size: 14px;

    transition: all 0.3s;

    color: #0f172a;

    width: 100%;

}



.user-hover-wrapper .form-control:focus {

    box-shadow: 0 0 0 4px var(--theme-color5);

    border-color: var(--theme-color);

    background: #ffffff;

    outline: none;

}



.user-hover-wrapper .password-input-wrapper {

    position: relative;

}



.user-hover-wrapper .password-toggle-btn {

    position: absolute;

    right: 12px;

    top: 50%;

    transform: translateY(-50%);

    background: none;

    border: none;

    color: #94a3b8;

    padding: 4px 8px;

    cursor: pointer;

    transition: color 0.3s;

}



.user-hover-wrapper .password-toggle-btn:hover {

    color: var(--theme-color);

}



.user-hover-wrapper .btn-primary-action {

    background: var(--theme-color);

    color: #ffffff;

    border: none;

    width: 100%;

    padding: 14px;

    border-radius: 14px;

    font-weight: 700;

    font-size: 14px;

    transition: all 0.3s;

    margin-top: 10px;

    cursor: pointer;

}



.user-hover-wrapper .btn-primary-action:hover {

    background: var(--theme-color2);

    transform: translateY(-2px);

    box-shadow: 0 8px 15px var(--theme-color5);

}



.user-hover-wrapper .divider {

    display: flex;

    align-items: center;

    margin: 20px 0;

    color: #cbd5e1;

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;

}



.user-hover-wrapper .divider::before, 

.user-hover-wrapper .divider::after {

    content: "";

    flex: 1;

    height: 1px;

    background: #f1f5f9;

}



.user-hover-wrapper .divider span {

    padding: 0 12px;

}



.user-hover-wrapper .btn-social {

    width: 100%;

    border: 1.5px solid #f1f5f9;

    background: #ffffff;

    padding: 12px;

    border-radius: 12px;

    font-weight: 600;

    font-size: 14px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    color: #0f172a;

    cursor: pointer;

    transition: background 0.3s;

}



.user-hover-wrapper .btn-social:hover {

    background: #f8fafc;

}



.user-hover-wrapper .register-hint {

    text-align: center;

    margin-top: 20px;

    font-size: 13px;

    color: #64748b;

}



.user-hover-wrapper .register-hint a {

    color: var(--theme-color);

    font-weight: 800;

    text-decoration: none;

}



.user-hover-wrapper .user-profile-card {

    background: var(--theme-color5);

    border-radius: 16px;

    padding: 16px;

    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 20px;

}



.user-hover-wrapper .user-avatar-large {

    width: 48px;

    height: 48px;

    border-radius: 14px;

    object-fit: cover;

    border: 2px solid #ffffff;

}



.user-hover-wrapper .user-info h4 {

    font-size: 15px;

    font-weight: 800;

    margin: 0 0 2px 0;

    color: var(--theme-color2);

}



.user-hover-wrapper .user-info p {

    font-size: 12px;

    color: #64748b;

    margin: 0;

}



.user-hover-wrapper .menu-links {

    list-style: none;

    padding: 0;

    margin: 0;

}



.user-hover-wrapper .menu-links li a {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 12px 16px;

    text-decoration: none;

    color: #475569;

    font-size: 14px;

    font-weight: 600;

    border-radius: 12px;

    transition: all 0.3s;

}



.user-hover-wrapper .menu-links li a:hover {

    background: #f8fafc;

    color: var(--theme-color);

    padding-left: 20px;

}



.user-hover-wrapper .menu-links li a i {

    width: 20px;

    font-size: 15px;

}



.user-hover-wrapper .menu-links .logout-item {

    margin-top: 10px;

    padding-top: 10px;

    border-top: 1px solid #f1f5f9;

}



.user-hover-wrapper .menu-links .logout-item a {

    color: #ef4444;

}



.user-hover-wrapper .menu-links .logout-item a:hover {

    background: #fef2f2;

    color: #dc2626;

}



@media (max-width: 768px) {

    .user-hover-wrapper .hover-dropdown-panel {

        position: fixed;

        top: 80px;

        right: 15px;

        width: calc(100vw - 30px);

    }

}

/* ====================== footer.css ====================== */
 .wrapfooter {

            background-color: #ffffff;

        }



        .wrapfooter .footer-wrapper {

            background-color: #0f172a;

            color: #f8f9fa;

            position: relative;

            padding-top: 80px;

        }



        /* Branding Section */

        .wrapfooter .brand-logo {

            display: flex;

            align-items: center;

            gap: 12px;     width: 170px;

        }



        .wrapfooter .logo-icon {

            width: 42px;

            height: 42px;

            background: var(--theme-color);

            display: flex;

            align-items: center;

            justify-content: center;

            border-radius: 12px;

            color: #fff;

            font-size: 1.25rem;

            box-shadow: 0 8px 20px rgba(255, 77, 141, 0.3);

        }



        .wrapfooter .logo-text {

            font-size: 1.5rem;

            font-weight: 800;

            letter-spacing: -0.02em;

            color: #ffffff;

        }



        .wrapfooter .logo-text span {

            color: var(--theme-color);

        }



        .wrapfooter .brand-desc {

            color: #94a3b8;

            line-height: 1.8;

            font-size: 0.95rem;

            margin-bottom: 30px;

            max-width: 360px;

        }



        /* Social Icons */

        .wrapfooter .social-group {

            display: flex;

            gap: 12px;

        }



        .wrapfooter .social-item {

            width: 40px;

            height: 40px;

            background: rgba(255, 255, 255, 0.05);

            color: #ffffff;

            display: flex;

            align-items: center;

            justify-content: center;

            border-radius: 50%;

            text-decoration: none;

            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);

            border: 1px solid rgba(255, 255, 255, 0.1);

        }



        .wrapfooter .social-item:hover {

            background: var(--theme-color);

            border-color: var(--theme-color);

            transform: translateY(-5px);

            box-shadow: 0 10px 20px rgba(255, 77, 141, 0.2);

            color: #fff;

        }



        /* Headings & Links */

        .wrapfooter .footer-main {

            padding-bottom: 80px;

        }



        .wrapfooter .footer-heading {

            font-size: 1.15rem;

            font-weight: 700;

            margin-bottom: 30px;

            color: #ffffff;

            position: relative;

        }



        .wrapfooter .footer-heading::after {

            content: '';

            position: absolute;

            bottom: -8px;

            left: 0;

            width: 30px;

            height: 2px;

            background: var(--theme-color);

        }



        .wrapfooter .footer-links {

            list-style: none;

            padding: 0;

            margin: 0;

        }



        .wrapfooter .footer-links li {

            margin-bottom: 14px;

        }



        .wrapfooter .footer-links a {

            color: #94a3b8;

            text-decoration: none;

            transition: all 0.3s ease;

            font-weight: 500;

            font-size: 0.95rem;

            display: inline-block;

        }



        .wrapfooter .footer-links a:hover {

            color: var(--theme-color);

            transform: translateX(6px);

        }



        /* Newsletter Form */

        .wrapfooter .newsletter-desc {

            color: #94a3b8;

            font-size: 0.9rem;

            margin-bottom: 20px;

        }



        .wrapfooter .newsletter-form .input-group {

            background: rgba(255, 255, 255, 0.04);

            padding: 6px;

            border-radius: 14px;

            border: 1px solid rgba(255, 255, 255, 0.1);

            transition: all 0.3s ease;

        }



        .wrapfooter .newsletter-form .input-group:focus-within {

            border-color: var(--theme-color);

            background: rgba(255, 255, 255, 0.08);

        }



        .wrapfooter .newsletter-form .form-control {

            background: transparent;

            border: none;

            color: #ffffff;

            padding-left: 15px;

            font-size: 0.95rem;

            box-shadow: none !important;

        }



        .wrapfooter .btn-submit {

            background: var(--theme-color);

            color: white;

            border-radius: 10px !important;

            width: 44px;

            height: 44px;

            display: flex;

            align-items: center;

            justify-content: center;

            transition: all 0.3s ease;

            border: none;

        }



        .wrapfooter .btn-submit:hover {

            background: var(--theme-color2);

            transform: scale(1.05);

        }



        .wrapfooter .payment-title {

            color: #64748b;

            font-size: 0.75rem;

            text-transform: uppercase;

            letter-spacing: 0.1em;

            margin-bottom: 15px;

        }



        .wrapfooter .payment-icons {

            font-size: 1.4rem;

            color: #475569;

        }



        .wrapfooter .payment-icons i:hover {

            color: #94a3b8;

            cursor: pointer;

        }



        /* Bottom Footer */

        .wrapfooter .footer-bottom {

            padding: 30px 0;

            border-top: 1px solid rgba(255, 255, 255, 0.06);

        }



        .wrapfooter .copyright {

            color: #64748b;

            font-size: 0.9rem;

            margin-bottom: 0;

        }



        .wrapfooter .bottom-links a {

            color: #64748b;

            text-decoration: none;

            font-size: 0.85rem;

            margin-left: 20px;

            transition: color 0.3s ease;

        }



        .wrapfooter .bottom-links a:hover {

            color: var(--theme-color);

        }



        /* Media Queries */

        @media (max-width: 1200px) {

            .wrapfooter .container { max-width: 1140px; }

        }



        @media (max-width: 1000px) {

            .wrapfooter .footer-main { padding-bottom: 60px; }

        }



        @media (max-width: 992px) {

            .wrapfooter section { padding: 3rem 0; }

            .wrapfooter .footer-reveal { margin-bottom: 20px; }

        }



        @media (max-width: 768px) {

            .wrapfooter .footer-heading { font-size: 1.1rem !important; margin-bottom: 20px; }

            .wrapfooter p { font-size: 0.95rem !important; }

            .wrapfooter .col-md-6 { width: 100% !important; }

            .wrapfooter .footer-wrapper { padding-top: 60px; }

            .wrapfooter .brand-desc { max-width: 100%; }

        }



        @media (max-width: 576px) {

            .wrapfooter h4 { font-size: 1.05rem !important; }

            .wrapfooter .btn { width: auto; }

            .wrapfooter .container { padding-left: 20px; padding-right: 20px; }

            .wrapfooter .bottom-links { margin-top: 10px; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }

            .wrapfooter .bottom-links a { margin-left: 0; }

            .wrapfooter .logo-text { font-size: 1.3rem !important; }

            .wrapfooter .footer-main { padding-bottom: 40px; }

        }

/* ====================== mauchung.css ====================== */
/* cart menu */

.wrapghhome .cart-trigger {

    position: relative;

    background: #fff;

    width: 56px;

    height: 56px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    box-shadow: 0 10px 20px var(--theme-color5);

    border: 2px solid var(--theme-color5);

    transition: all 0.4s ease;

    cursor: pointer;

}



.wrapghhome .cart-trigger:hover {

    background: var(--theme-color);

    border-color: var(--theme-color);

}



.wrapghhome .cart-trigger i {

    font-size: 22px;

    color: var(--theme-color);

    transition: color 0.3s ease;

}



.wrapghhome .cart-trigger:hover i {

    color: #fff;

}



.wrapghhome .cart-badge {

    position: absolute;

    top: -2px;

    right: -2px;

    background: #0f172a;

    color: #fff;

    font-size: 12px;

    font-weight: 700;

    width: 22px;

    height: 22px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    border: 2px solid #fff;

}



/* Main Cart Card */

.wrapghhome .cart-card {

    background: #ffffff;

    border-radius: 32px;

    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.15);

    padding: 32px;

    border: 1px solid rgba(241, 245, 249, 1);

    position: absolute;

    top: 65px; 

    right: 0;

    width: 450px;

    z-index: 1000;

    opacity: 0;

    visibility: hidden;

    transform: translateY(15px);

    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);

    pointer-events: none;

}



/* Invisible bridge */

.wrapghhome .cart-card::before {

    content: "";

    position: absolute;

    top: -40px;

    right: 0;

    width: 100px;

    height: 50px;

    background: transparent;

    z-index: -1;

}



.wrapghhome .cart-card.is-active {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

    pointer-events: auto;

}



@media (min-width: 992px) {

    .wrapghhome .cart-header-top:has(.cart-trigger:hover) + .cart-card,

    .wrapghhome .cart-card:hover {

        opacity: 1;

        visibility: visible;

        transform: translateY(0);

        pointer-events: auto;

    }

}



.wrapghhome .cart-title {

    font-size: 22px;

    font-weight: 800;

    margin-bottom: 24px;

    color: #0f172a;

    letter-spacing: -0.02em;

}



.wrapghhome .cart-item-list {

    display: flex;

    flex-direction: column;

    gap: 20px;

    margin-bottom: 30px;

    max-height: 380px;

    overflow-y: auto;

    padding-right: 5px;

}



.wrapghhome .cart-item-list::-webkit-scrollbar {

    width: 4px;

}

.wrapghhome .cart-item-list::-webkit-scrollbar-track {

    background: #f1f5f9;

}

.wrapghhome .cart-item-list::-webkit-scrollbar-thumb {

    background: #cbd5e1;

    border-radius: 10px;

}



.wrapghhome .cart-item {

    display: flex;

    gap: 16px;

    padding-bottom: 20px;

    border-bottom: 1px dashed #e2e8f0;

    transition: all 0.3s ease;

    text-decoration: none !important;

}



.wrapghhome .cart-item:last-child {

    border-bottom: none;

    padding-bottom: 0;

}



.wrapghhome .item-img-wrapper {

    width: 85px;

    height: 85px;

    flex-shrink: 0;

    background: #f8fafc;

    border-radius: 16px;

    overflow: hidden;

    border: 1px solid #f1f5f9; padding: 4px;

}



.wrapghhome .item-img-wrapper img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.5s ease;

}



.wrapghhome .cart-item:hover .item-img-wrapper img {

    transform: scale(1.1);

}



.wrapghhome .item-details {

    flex-grow: 1; line-height: 17px;

}



.wrapghhome .item-name {

    font-size: 15px;

    font-weight: 700;

    color: #0f172a;

    margin-bottom: 4px;

    line-height: 1.4;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

    transition: color 0.3s ease;

}



.wrapghhome .cart-item:hover .item-name {

    color: var(--theme-color);

}



.wrapghhome .item-meta {

    font-size: 12px;

    color: #64748b;

    margin-bottom: 8px;

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

}



.wrapghhome .item-meta span:not(:last-child)::after {

    content: "|";

    margin-left: 8px;

    opacity: 0.5;

}



.wrapghhome .item-pricing {

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.wrapghhome .item-price {

    font-size: 16px;

    font-weight: 800;

    color: var(--theme-color);

}



.wrapghhome .item-qty {

    background: #f1f5f9;

    padding: 2px 10px;

    border-radius: 6px;

    font-size: 12px;

    font-weight: 700;

    color: #475569;

}



/* ==== Mini-cart: cụm combo ==== */

.wrapghhome .mc-combo-group {

    border: 1px solid var(--theme-color5);

    background: linear-gradient(180deg, var(--theme-color5), #fff 60%);

    border-radius: 16px;

    padding: 12px 14px;

    margin-bottom: 18px;

}

.wrapghhome .mc-combo-group .cart-item {

    padding-bottom: 12px;

    margin-bottom: 12px;

    border-bottom: 1px dashed var(--theme-color5);

}

.wrapghhome .mc-combo-group .cart-item:last-child {

    padding-bottom: 0;

    margin-bottom: 0;

    border-bottom: none;

}

.wrapghhome .mc-combo-head {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

    font-size: 13px;

    font-weight: 800;

    color: #0f172a;

    margin-bottom: 12px;

}

.wrapghhome .mc-combo-badge {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    background: var(--theme-color);

    color: #fff;

    font-size: 11px;

    font-weight: 800;

    padding: 3px 9px;

    border-radius: 999px;

    text-transform: uppercase;

    letter-spacing: .4px;

}

.wrapghhome .mc-combo-save {

    background: #fee2e2;

    color: #dc2626;

    font-size: 11px;

    font-weight: 800;

    padding: 3px 9px;

    border-radius: 999px;

}

.wrapghhome .mc-item-tag {

    display: inline-block;

    background: var(--theme-color5);

    color: var(--theme-color);

    font-size: 10px;

    font-weight: 800;

    padding: 1px 7px;

    border-radius: 6px;

    vertical-align: middle;

    margin-left: 4px;

    text-transform: uppercase;

    letter-spacing: .3px;

}

.wrapghhome .item-price-old {

    color: #94a3b8;

    font-weight: 600;

    font-size: 12px;

    margin-right: 4px;

}



.wrapghhome .cart-actions {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 12px;

}



.wrapghhome .btn-custom {

    height: 52px;

    padding: 2px 26px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    font-size: 15px;

    font-weight: 700;

    text-decoration: none;

    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    border: none;

}



.wrapghhome .btn-cart-view {

    background: #f1f5f9;

    color: #475569;

}



.wrapghhome .btn-cart-view:hover {

    background: #e2e8f0;

    color: #1e293b;

    transform: translateY(-2px);

}



.wrapghhome .btn-checkout {

    background: var(--theme-color);

    color: #fff;

    box-shadow: 0 10px 20px rgba(255, 77, 141, 0.2);

}



.wrapghhome .btn-checkout:hover {

    background: var(--theme-color2);

    transform: translateY(-2px);

    box-shadow: 0 15px 30px rgba(255, 77, 141, 0.3);

    color: #fff;

}

/* kiểm tra mã đơn hàng */

/* TỔNG QUAN */

.wraplotrinh-v3 {background-color: #f8fafc; padding: 40px 15px; color: #1e293b; }

.wraplotrinh-v3 .main-card { background: #ffffff; border-radius: 24px; box-shadow: 0 10px 40px rgba(0,0,0,0.03); max-width: 1100px; margin: 0 auto; overflow: hidden; border: 1px solid #f1f5f9; }



/* HERO SECTION */

.wraplotrinh-v3 .hero-status { background: linear-gradient(135deg, #1e293b 0%, #334155 100%); padding: 40px; color: #ffffff; position: relative; }

.wraplotrinh-v3 .hero-status h1 { font-weight: 800; font-size: 2rem; margin-bottom: 8px; letter-spacing: -1px; }

.wraplotrinh-v3 .order-badge { background: rgba(255,255,255,0.15); padding: 4px 12px; border-radius: 6px; font-size: 0.75rem; font-weight: 700; display: inline-block; margin-bottom: 12px; }

.wraplotrinh-v3 .delivery-estimate { display: inline-flex; align-items: center; background: rgba(255, 255, 255, 0.1); padding: 8px 18px; border-radius: 50px; font-size: 0.85rem; border: 1px solid rgba(255,255,255,0.1); }

.wraplotrinh-v3 .hero-icon { font-size: 100px !important; color: #fff; opacity: 0.1; position: absolute; right: 40px; bottom: -10px; transform: rotate(-15deg); }



/* STEPPER */

.wraplotrinh-v3 .stepper-container { background: #ffffff; padding: 35px 40px; border-bottom: 1px solid #f1f5f9; overflow-x: auto; }

.wraplotrinh-v3 .stepper-wrapper { display: flex; justify-content: space-between; min-width: 650px; position: relative; }

.wraplotrinh-v3 .stepper-line { position: absolute; top: 22px; left: 7%; right: 7%; height: 4px; background: #f1f5f9; z-index: 1; border-radius: 10px; }

.wraplotrinh-v3 .step { flex: 1; text-align: center; position: relative; z-index: 2; }

.wraplotrinh-v3 .step-icon { width: 48px; height: 48px; background: #ffffff; border: 3px solid #e2e8f0; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; color: #94a3b8; transition: 0.4s; font-size: 1.1rem; }

.wraplotrinh-v3 .step.active .step-icon {border-color: var(--theme-color);color: var(--theme-color);background: #fff;box-shadow: 0 0 0 8px var(--theme-color5);}

.wraplotrinh-v3 .step.completed .step-icon { background: #4f46e5; border-color: #4f46e5; color: #ffffff; }

.wraplotrinh-v3 .step-label { font-size: 0.85rem; font-weight: 600; color: #64748b; }

.wraplotrinh-v3 .step.active .step-label, .wraplotrinh-v3 .step.completed .step-label { color: #0f172a; font-weight: 700; }



/* CONTENT GRID */

.wraplotrinh-v3 .content-grid { display: grid; grid-template-columns: 1.6fr 1fr; }

@media (max-width: 992px) { .wraplotrinh-v3 .content-grid { grid-template-columns: 1fr; } }



.wraplotrinh-v3 .timeline-details { padding: 40px; border-right: 1px solid #f1f5f9; }

.wraplotrinh-v3 .section-title { font-weight: 800; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1.5px; color: #64748b; margin-bottom: 25px; }



/* SẢN PHẨM */

.wraplotrinh-v3 .prod-item { display: flex; gap: 20px; padding: 20px 0; border-bottom: 1px solid #f1f5f9; align-items: center; }

.wraplotrinh-v3 .prod-img { width: 80px; height: 80px; border-radius: 12px; background: #f8fafc; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 1px solid #e2e8f0; overflow: hidden; position: relative; }

.wraplotrinh-v3 .prod-img img { width: 100%; height: 100%; object-fit: cover; position: absolute; z-index: 2; }

.wraplotrinh-v3 .prod-info { flex: 1; }

.wraplotrinh-v3 .prod-info h4 { font-size: 1rem; font-weight: 700; margin-bottom: 6px; color: #0f172a; line-height: 1.4; }

.wraplotrinh-v3 .prod-meta { font-size: 0.85rem; color: #64748b; }

.wraplotrinh-v3 .prod-price { font-weight: 800; font-size: 1.1rem; margin-left: auto; color: #0f172a; }



/* TÍNH TIỀN (ĐÃ UPDATE CHUẨN MỚI) */

.wraplotrinh-v3 .price-summary-card { background: #f8fafc; border-radius: 16px; padding: 24px; margin-top: 30px; border: 1px solid #e2e8f0; }

.wraplotrinh-v3 .price-row { display: flex; justify-content: space-between; margin-bottom: 12px; font-size: 0.95rem; }

.wraplotrinh-v3 .price-row .label { color: #64748b; font-weight: 500; }

.wraplotrinh-v3 .price-row .value { color: #1e293b; font-weight: 700; }

.wraplotrinh-v3 .price-row.total-row { border-top: 1px solid #e2e8f0; margin-top: 15px; padding-top: 15px; }

.wraplotrinh-v3 .price-row.total-row .label { font-weight: 800; color: #0f172a; font-size: 1.1rem; }

.wraplotrinh-v3 .price-row.total-row .value {font-weight: 800;color: var(--theme-color);font-size: 1.5rem;}



/* TIMELINE */

.wraplotrinh-v3 .timeline-item { display: flex; gap: 20px; margin-bottom: 30px; position: relative; }

.wraplotrinh-v3 .time-box { min-width: 90px; text-align: right; }

.wraplotrinh-v3 .h-time { font-weight: 800; color: #0f172a; font-size: 1rem; }

.wraplotrinh-v3 .h-date { font-size: 0.75rem; color: #94a3b8; font-weight: 600; }

.wraplotrinh-v3 .indicator { display: flex; flex-direction: column; align-items: center; padding-top: 6px; }

.wraplotrinh-v3 .dot { width: 14px; height: 14px; background: #cbd5e1; border-radius: 50%; z-index: 2; border: 3px solid #fff; box-shadow: 0 0 0 1px #cbd5e1; }

.wraplotrinh-v3 .timeline-item.current .dot {background: var(--theme-color);box-shadow: 0 0 0 5px var(--theme-color5);border: 3px solid #fff;}

.wraplotrinh-v3 .line { width: 2px; flex-grow: 1; background: #e2e8f0; margin: 8px 0; }

.wraplotrinh-v3 .timeline-item:last-child .line { display: none; }

.wraplotrinh-v3 .status-content h4 { font-size: 1.05rem; font-weight: 800; margin-bottom: 6px; color: #0f172a; }

.wraplotrinh-v3 .status-content p { font-size: 0.9rem; color: #64748b; line-height: 1.5; margin: 0; }



/* SIDEBAR */

.wraplotrinh-v3 .info-sidebar { padding: 40px; background: #fafafb; }

.wraplotrinh-v3 .modern-card { background: #ffffff; border-radius: 20px; padding: 25px; border: 1px solid #e2e8f0; box-shadow: 0 4px 12px rgba(0,0,0,0.02); margin-bottom: 24px; }

.wraplotrinh-v3 .card-title-small { font-size: 0.75rem; font-weight: 800; color: #94a3b8; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 15px; display: block; }

.wraplotrinh-v3 .icon-circle { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }

.wraplotrinh-v3 .pay-method { font-weight: 700; color: #0f172a; }

.wraplotrinh-v3 .pay-amount {font-weight: 800;color: var(--theme-color);font-size: 1.1rem;}

.wraplotrinh-v3 .status-badge-soft { padding: 10px 15px; border-radius: 10px; font-size: 0.85rem; font-weight: 700; display: flex; align-items: center; gap: 8px; margin-top: 15px; }



.wraplotrinh-v3 .btn-support {display: block;width: 100%;padding: 14px;border-radius: 14px;background: #ffffff;color: var(--theme-color);border: 1.5px solid var(--theme-color);text-align: center;font-weight: 800;text-decoration: none;transition: 0.3s;}

.wraplotrinh-v3 .btn-support:hover {background: var(--theme-color);color: #fff;transform: translateY(-2px);}

/* end kiểm tra mã đơn hàng*/

/* form đặt hàng*/

.checkout-gift-wrapper {

    margin-top: 10px;

    background: #f8fafc;

    padding: 10px;

    border-radius: 6px;

    border: 1px dashed #cbd5e1;

}



.checkout-gift-header {

    font-size: 12px;

    font-weight: 700;

    color: #334155;

    margin-bottom: 6px;

    display: flex;

    align-items: center;

    gap: 5px;

}



.checkout-gift-header .gift-icon {

    color: #ef4444;

    font-size: 13px;

}



.checkout-gift-list {

    display: flex;

    flex-direction: column;

    gap: 6px;

}



.checkout-gift-item {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 12px; /* Chữ nhỏ hơn so với trang giỏ hàng */

}



.checkout-gift-item .gift-check {

    color: #10b981;

    font-size: 11px;

    flex-shrink: 0;

}



.checkout-gift-item .gift-thumb-micro {

    width: 24px;  /* Ảnh thu nhỏ hơn (24px thay vì 32px) */

    height: 24px;

    border-radius: 4px;

    object-fit: cover;

    border: 1px solid #e2e8f0;

    flex-shrink: 0;

    background: #fff;

}



.checkout-gift-item .gift-text {

    color: #475569;

    font-weight: 500;

    line-height: 1.3;

    margin: 0;

    /* Cắt chữ nếu dài quá 1 dòng để tránh vỡ layout trang thanh toán */

    display: -webkit-box;

    -webkit-line-clamp: 1;

    -webkit-box-orient: vertical;

    overflow: hidden;

}



a.gift-text.has-link {

    color: #2563eb;

    text-decoration: none;

    transition: color 0.2s;

}



a.gift-text.has-link:hover {

    text-decoration: underline;

    color: #1d4ed8;

}

.wrapthanhtoan .vip-discount-box{background: var(--theme-color5);

    border: 1px dashed var(--theme-color);

    border-radius: 12px;}

    .wrapthanhtoan .vip-discount-box .title{color: var(--theme-color);

        font-size: 15px;text-transform: capitalize;}

        .wrapthanhtoan .vip-discount-box .noidung{    font-size: 15px;

            color: #4a535e;

            margin-top: 2px;

            line-height: 24px;}

            .wrapthanhtoan .form-switch .form-check-input{

                width: 47px;

                height: 21px;

            }

            .wrapthanhtoan .points-discount-box{    background: #fff;

                border: 1px solid var(--theme-color);

                border-radius: 12px;

                box-shadow: 0 2px 4px rgba(250, 204, 21, 0.1);

            }

            .wrapthanhtoan .points-discount-box .iconxu{width: 32px;

                height: 32px;

                background: var(--theme-color);

                color: #fff;

                border-radius: 50%;

                display: flex;

                align-items: center;

                justify-content: center;}

                .wrapthanhtoan .points-discount-box .textsodu{    color: var(--theme-color);}

                .wrapthanhtoan .points-discount-box #text-max-use-point{color: var(--theme-color2);}

                .wrapthanhtoan .summary-details .text-giatri{color: var(--theme-color);}

                .wrapthanhtoan { background-color: #f8fafc; color: #1e293b; padding: 40px 0; min-height: 100vh; font-family: 'Plus Jakarta Sans', sans-serif;}

                .wrapthanhtoan .checkout-container { max-width: 1200px; margin: 0 auto; }

                .wrapthanhtoan .section-title { font-weight: 800; font-size: 1.5rem; letter-spacing: -0.02em; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 12px; color: #0f172a; }

                .wrapthanhtoan .section-title i { color: #0d9488; font-size: 1.25rem; }

                .wrapthanhtoan .card-custom { background: #ffffff; border: 1px solid #f1f5f9; border-radius: 24px; padding: 32px; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.04); margin-bottom: 24px; transition: transform 0.3s ease, box-shadow 0.3s ease; }

                .wrapthanhtoan .form-label { font-weight: 600; font-size: 0.9rem; color: #475569; margin-bottom: 8px; }

                .wrapthanhtoan .form-control, .wrapthanhtoan .form-select { border: 2px solid #f1f5f9; border-radius: 12px; padding: 12px 16px; font-size: 0.95rem; transition: all 0.3s ease; background-color: #fcfdfe; }

                .wrapthanhtoan .form-control:focus, .wrapthanhtoan .form-select:focus { border-color: #0d9488; box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.1); background-color: #fff; outline: none; }



                .wrapthanhtoan .shipping-option { position: relative; cursor: pointer; border: 2px solid #e2e8f0; border-radius: 16px; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; transition: all 0.3s ease; background: #fff; }

                .wrapthanhtoan .shipping-option:hover { border-color: #94a3b8; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.03); }

                .wrapthanhtoan .shipping-option.active { border-color: #0d9488; background-color: #f0fdfa; }

                .wrapthanhtoan .shipping-option input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }

                .wrapthanhtoan .shipping-info-box { display: flex; align-items: center; gap: 16px; }

                .wrapthanhtoan .shipping-logo { width: 48px; height: 48px; object-fit: contain; border-radius: 8px; background: #fff; }

                .wrapthanhtoan .shipping-details { display: flex; flex-direction: column; gap: 4px; }

                .wrapthanhtoan .shipping-name { font-weight: 700; font-size: 1rem; color: #1e293b; }

                .wrapthanhtoan .shipping-eta { font-size: 0.8rem; color: #64748b;display: block;}

                .wrapthanhtoan .shipping-price { font-weight: 700; color: #0d9488; font-size: 1.1rem; }

                /* Dấu tick của .shipping-option nay định nghĩa ở cuối file (khối v29) — bỏ rule cũ để không chèn width/height/animation đè lên. */



/* Container chính */

.payment-container {

    background: #ffffff;

    border: 1px solid #f1f5f9;

    border-radius: 24px;

    padding: 32px;

    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.04);

    margin-bottom: 24px;

    transition: transform 0.3s ease, box-shadow 0.3s ease;

}



/* Header */

.payment-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 15px;

}



.section-title {

    font-size: 18px;

    font-weight: 500;

    margin: 0;

    color: #333;

}



.view-all {

    text-decoration: none;

    color: #888;

    font-size: 14px;

}



/* Danh sách item */

.payment-list {

    display: flex;

    flex-direction: column;

}



.payment-item {

    cursor: pointer;

    position: relative;

    border-bottom: 1px solid #f5f5f5;

}



.payment-item:last-child {

    border-bottom: none;

}



/* Ẩn radio button mặc định */

.payment-item input[type="radio"] {

    position: absolute;

    opacity: 0;

}



/* Content bên trong mỗi item */

.payment-content {

   display: flex;

   align-items: center;

   padding: 10px 6px;

   transition: all 0.2s;

}



.payment-icon {

    width: 40px;

    height: 40px;

    margin-right: 15px;

    display: flex;

    align-items: center;

    justify-content: center;

}



.payment-icon img {

    max-width: 100%;

    max-height: 100%;

    object-fit: contain;

}



.payment-info {

    flex: 1;

}



.payment-name {

    font-size: 16px;

    color: #1e1e1e;

    font-weight: 700;

    margin-bottom: 4px;

}



.payment-desc {

    font-size: 13px;

    color: #888;

}



/* Custom Checkmark (Dấu tick màu cam) */

.check-mark {

    width: 22px;

    height: 22px;

    border: 2px solid #ddd;

    border-radius: 50%;

    position: relative;

    transition: all 0.2s;

}



/* Khi Radio được chọn */

.payment-item input[type="radio"]:checked + .payment-content .check-mark {

    background-color: var(--theme-color, #27AE60);

    border-color: var(--theme-color, #27AE60);

}



.payment-item input[type="radio"]:checked + .payment-content .check-mark::after {

    content: '';

    position: absolute;

    left: 7px;

    top: 3px;

    width: 5px;

    height: 10px;

    border: solid white;

    border-width: 0 2px 2px 0;

    transform: rotate(45deg);

}



/* Hiệu ứng khi hover */

.payment-item:hover .payment-content {

    background-color: #fafafa;

}

@keyframes popIn { 0% { transform: scale(0); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }



.wrapthanhtoan .summary-card { position: sticky; top: 40px; background: #ffffff; border-radius: 24px; padding: 32px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06); border: 1px solid #f1f5f9; }

.wrapthanhtoan .product-item { display: flex; gap: 16px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #f1f5f9; }
/* Cụm combo trong trang thanh toán */
.wrapthanhtoan .dh-combo-group { border: 1px solid var(--theme-color5, #27ae602e); border-radius: 14px; padding: 10px 12px; margin-bottom: 20px; background: linear-gradient(180deg, var(--theme-color5, #27ae602e), #fff 60px); }
.wrapthanhtoan .dh-combo-group__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 2px 2px 10px; font-size: 13.5px; color: #0f172a; }
.wrapthanhtoan .dh-combo-group__badge { display: inline-flex; align-items: center; gap: 5px; background: var(--theme-color, #27AE60); color: #fff; font-weight: 800; font-size: 11px; padding: 3px 10px; border-radius: 999px; }
.wrapthanhtoan .dh-combo-group__save { background: #dcfce7; color: #15803d; font-weight: 800; font-size: 11px; padding: 2px 9px; border-radius: 999px; }
.wrapthanhtoan .dh-combo-group .product-item { margin-bottom: 12px; padding-bottom: 12px; }
.wrapthanhtoan .dh-combo-group .product-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.wrapthanhtoan .product-item--combo { padding-left: 12px; border-left: 2px dashed var(--theme-color5, #27ae602e); }
.wrapthanhtoan .dh-combo-tag { display: inline-flex; align-items: center; gap: 4px; background: var(--theme-color, #27AE60); color: #fff; font-size: 10px; font-weight: 800; padding: 1px 8px; border-radius: 999px; vertical-align: middle; }
.wrapthanhtoan .dh-combo-tag--add { background: var(--theme-color5, #27ae602e); color: var(--theme-color, #27AE60); border: 1px solid var(--theme-color5, #27ae602e); }

.wrapthanhtoan .product-img { width: 80px; height: 80px; object-fit: cover; border-radius: 12px; background: #f8fafc; }

.wrapthanhtoan .product-info { flex: 1; }

.wrapthanhtoan .product-title { font-weight: 600; font-size: 0.95rem; margin-bottom: 4px; line-height: 1.4; }

.wrapthanhtoan .product-meta { font-size: 0.8rem; color: #64748b; margin-bottom: 4px; }

.wrapthanhtoan .product-price { font-weight: 700; font-size: 0.95rem; color: #0f172a; }

.wrapthanhtoan .summary-row { display: flex; justify-content: space-between; margin-bottom: 12px; color: #64748b; font-size: 0.95rem; }

.wrapthanhtoan .summary-total { border-top: 2px dashed #f1f5f9; margin-top: 20px; padding-top: 20px; display: flex; justify-content: space-between; align-items: center; }

.wrapthanhtoan .total-label { font-weight: 700; font-size: 1.1rem; color: #0f172a; }

.wrapthanhtoan .total-amount { font-weight: 800; font-size: 1.5rem; color: var(--theme-color4); }

.wrapthanhtoan .btn-checkout { background: #0f172a; color: white; border: none; border-radius: 14px; padding: 18px; font-weight: 700; width: 100%; margin-top: 24px; transition: all 0.4s ease; box-shadow: 0 10px 20px rgba(15, 23, 42, 0.15); }

.wrapthanhtoan .btn-checkout:hover { background: #334155; transform: translateY(-2px); box-shadow: 0 15px 25px rgba(15, 23, 42, 0.2); color: #fff; }

.form-check-input:checked {

    background-color: var(--theme-color);

    border-color: var(--theme-color);

}

.wrapthanhtoan .select2-container--bootstrap-5 .select2-selection { border: 2px solid #f1f5f9 !important; border-radius: 12px !important; min-height: 52px !important;  background-color: #fcfdfe !important; display: flex !important; align-items: center; transition: all 0.3s ease; box-shadow: none !important; position: relative; }

.wrapthanhtoan .select2-container--bootstrap-5 .select2-selection__arrow { display: flex !important; align-items: center; position: absolute; top: 0; right: 16px; height: 100%; width: auto; }

.wrapthanhtoan .select2-container--bootstrap-5 .select2-selection__arrow b { display: none !important; }

.wrapthanhtoan .select2-container--bootstrap-5 .select2-selection__arrow::after { content: "\f107";  font-family: "Font Awesome 6 Pro"; color: #475569;  font-size: 0.9rem; }

.wrapthanhtoan .select2-container--bootstrap-5.select2-container--focus .select2-selection, .wrapthanhtoan .select2-container--bootstrap-5.select2-container--open .select2-selection { border-color: #0d9488 !important; box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.1) !important; background-color: #fff !important; }

.wrapthanhtoan .select2-container--bootstrap-5 .select2-selection__rendered { padding-left: 16px !important; padding-right: 40px !important;  font-size: 0.95rem; color: #1e293b !important; width: 100%; text-align: left; }

.select2-container--bootstrap-5 .select2-dropdown { border: 1px solid #e2e8f0 !important; border-radius: 12px !important; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important; overflow: hidden; margin-top: 4px; }
/* Danh sách dài (VD Phường/Xã) phải có scroll riêng, không kéo giãn cả trang. */
.select2-container--bootstrap-5 .select2-results__options { max-height: 280px; overflow-y: auto; }



.voucher-trigger-box { border: 1px dashed #cbd5e1; border-radius: 12px; padding: 16px; cursor: pointer; transition: all 0.3s ease; background: #f8fafc; }

.voucher-trigger-box:hover { border-color: #0d9488; background: #f0fdfa; }



/* CSS cũ của modal voucher (.voucher-card/.voucher-left/.btn-use-voucher/...) đã gỡ ở v31:
   modal dựng lại bằng bộ .vcm*/.vc* ở cuối file, không còn markup nào dùng các class đó. */

.textvoucher{}

.textchonma{}

@media (max-width: 768px) {

    .wrapthanhtoan .vip-discount-box .noidung {

        font-size: 11px;

        color: #4a535e;

        margin-top: 2px;

        line-height: 18px;

    }

    .wrapthanhtoan .points-discount-box .iconxu {

        width: 54px;

        height: 31px;}

        .wrapthanhtoan .textvoucher{

            font-size: 10px;

        } 

        .wrapthanhtoan .shipping-option { flex-direction: column; align-items: flex-start; padding: 16px; }

        .wrapthanhtoan .shipping-price { margin-top: 0; margin-left: 64px; }

        .wrapthanhtoan .shipping-option.active::after { position: absolute; top: 16px; right: 16px; }

        .wrapthanhtoan .payment-grid { grid-template-columns: repeat(1, 1fr); gap: 12px; }

        .voucher-card { align-items: stretch; }

        .voucher-left { width: 90px; padding: 8px; }

        .voucher-right { flex-direction: column; align-items: flex-start; padding: 10px 12px; justify-content: center; gap: 10px; }

        .voucher-info .progress-wrap .progress { width: 80px; }

        .voucher-info .progress-wrap span { font-size: 0.65rem; }

        .btn-use-voucher { width: 100%; text-align: center; padding: 8px; }

        .voucher-missing-text { max-width: 100%; text-align: left; background: #fff1f2; padding: 6px 8px; border-radius: 4px; display: block; width: 100%; }

        #applied-voucher-text { max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; text-align: right; font-size: 10px;}

    }

    @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

    .wrapthanhtoan .animate-up { animation: fadeInUp 0.6s ease forwards; }

/* mục lục */



.wrapmucluc {

    color: #334155;

    line-height: 1.7;

    position: relative;

    width: 100%;

}



.wrapmucluc * {

    box-sizing: border-box;

}



.wrapmucluc a {

    text-decoration: none;

}



/* --- STATIC TOC (PREMIUM CARD) --- */

.wrapmucluc .toc-container {

    background: #ffffff;

    border-radius: 16px;

    border: 1px solid #e2e8f0;

    box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.06);

    overflow: hidden;

    position: relative;

    transition: transform 0.3s ease, box-shadow 0.3s ease;

}



.wrapmucluc .toc-container:hover {

    transform: translateY(-2px);

    box-shadow: 0 20px 40px -5px rgba(15, 23, 42, 0.1);

}



/* Gradient Accent Line */

.wrapmucluc .toc-container::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 3px;

    background: var(--theme-color3);

}



/* Header */

.wrapmucluc .toc-header {

    padding: 11px 13px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    background: #ffffff;

    cursor: pointer;

    border-bottom: 1px solid #f1f5f9;

    user-select: none;

}



.wrapmucluc .toc-title-wrapper {

    display: flex;

    align-items: center;

    gap: 14px;

}



.wrapmucluc .toc-icon {

    width: 25px;

    height: 25px;

    padding: 16px;

    background: var(--theme-color3);

    color: #ffffff;

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.1rem;

    transition: all 0.3s ease;

    margin: 4px 0px;

}



.wrapmucluc .toc-header:hover .toc-icon {

    background: var(--theme-color4);

    color: #ffffff;

    transform: rotate(-10deg);

}



.wrapmucluc .toc-header h4 {

    margin: 0;

    font-size: 1.15rem;

    font-weight: 700;

    color: #0f172a;

}



.wrapmucluc .toc-toggle-btn {

    background: #f8fafc;

    color: #64748b;

    padding: 6px 11px;

    border-radius: 30px;

    font-size: 9px;

    font-weight: 700;

    border: 1px solid #e2e8f0;

    transition: all 0.2s ease;

    display: flex;

    align-items: center;

    gap: 6px;

}



.wrapmucluc .toc-toggle-btn i {

    font-size: 0.7rem;

    transition: transform 0.3s ease;

}



/* Body List */

.wrapmucluc .toc-body {

    padding: 10px 0;

    background: #fff;

    display: block; /* Default visible */

}



.wrapmucluc .toc-list {

    list-style: none;

    padding: 0;

    margin: 0;

}



.wrapmucluc .toc-link {

    display: block;

    padding: 10px 24px;

    color: #64748b;

    font-size: 14px;

    font-weight: 500;

    border-left: 3px solid transparent;

    transition: all 0.2s ease;

}



.wrapmucluc .toc-link:hover {

    color: var(--theme-color);

    background: #f8fafc;

    border-left-color: #cbd5e1;

    padding-left: 28px;

}



.wrapmucluc .toc-link.active {

    color: #ffffff !important;

    background: var(--theme-color3);

    font-weight: 700;

    border-left-color: var(--theme-color3);

}



/* Hierarchy Styles */

.wrapmucluc .toc-h2 .toc-link {

    font-weight: 600;

    color: #222222;

}



.wrapmucluc .toc-h3 .toc-link {

    padding-left: 44px;

    font-size: 0.9rem;

    color: #64748b;

}



.wrapmucluc .toc-h3 .toc-link::before {

    content: '\f111';

    margin-right: 8px;

    color: #cbd5e1;

    font-family: "Font Awesome 6 Pro";font-size: 8px;font-weight: 700;

}



/* --- STICKY FLOATING TOC (FIXED SCOPE) --- */

.wrapmucluc .sticky-toc-wrapper {

    position: fixed;

    top: auto;

    bottom: 111px;

    left: 8px;

    z-index: 1050;

    opacity: 0;

    visibility: hidden;

    transform: translateX(-30px);

    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

}



.wrapmucluc .sticky-toc-wrapper.is-visible {

    opacity: 1;

    visibility: visible;

    transform: translateX(0);

}



.wrapmucluc .sticky-btn {

    width: 48px;

    height: 48px;

    background: linear-gradient(135deg, var(--theme-color3) 0%, var(--theme-color4) 100%);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    box-shadow: 0 8px 20px var(--theme-color4);

    cursor: pointer;

    transition: all 0.3s ease;

    font-size: 1.1rem;

    position: relative;

    z-index: 1052;

    border: none;

}



.wrapmucluc .sticky-btn:hover {

    transform: scale(1.1);

    box-shadow: 0 12px 25px #dbffb2cf;

}



/* Sticky Panel Popover */

.wrapmucluc .sticky-panel {

    position: absolute;

    bottom: 0;

    left: 60px;

    width: 340px;

    max-height: 450px;

    background: rgba(255, 255, 255, 0.95);

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

    border-radius: 12px;

    box-shadow: 0 15px 40px rgba(15, 23, 42, 0.15);

    border: 1px solid rgba(226, 232, 240, 0.8);

    padding: 15px 0;

    overflow-y: auto;

    opacity: 0;

    visibility: hidden;

    transform: scale(0.9) translateX(-10px);

    transform-origin: top left;

    transition: all 0.3s ease;

}



.wrapmucluc .sticky-toc-wrapper.is-open .sticky-panel {

    opacity: 1;

    visibility: visible;

    transform: scale(1) translateX(0);

}





@media (max-width: 992px) {

 .wrapmucluc .sticky-toc-wrapper {

    transform: translateY(20px);

}

.wrapmucluc .sticky-toc-wrapper.is-visible {

    transform: translateY(0);

}

.wrapmucluc .sticky-panel {

    top: auto;

    bottom: 60px; /* Open upwards */

    left: 0;

    transform-origin: bottom left;

}

}



@media (max-width: 768px) {

    .wrapmucluc .toc-header { padding: 15px; }

    .wrapmucluc .toc-header h4 { font-size: 1rem; }



    /* Smaller Sticky Button on Mobile */

    .wrapmucluc .sticky-btn { width: 44px; height: 44px; font-size: 1rem; }

    .wrapmucluc .sticky-panel { width: 260px; max-height: 50vh; }

}



@media (max-width: 576px) {

    .wrapmucluc .toc-status-badge span { display: none; }

    .wrapmucluc .toc-icon-box { width: 35px; height: 35px; }

}



/* end mục lục */





/* back to top */





.backtotop .section-demo {

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 80px 20px;

}



.backtotop .hero-gradient {

    background: radial-gradient(circle at top right, #fdfcfb 0%, #e2d1c3 100%);

}



.backtotop h1 {

    font-weight: 800;

    letter-spacing: -0.03em;

    color: #0f172a;

}



.backtotop .text-luxury {

    color: #64748b;

    line-height: 1.8;

    max-width: 600px;

}



/* THE COMPONENT: BACK TO TOP PROGRESS BUTTON */

.backtotop .scroll-progress-container {

    position: fixed;

    bottom: 40px;

    right: 40px;

    height: 70px;

    width: 70px;

    z-index: 9999;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    opacity: 0;

    visibility: hidden;

    transform: translateY(20px) scale(0.8);

    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);

}



.backtotop .scroll-progress-container.is-active {

    opacity: 1;

    visibility: visible;

    transform: translateY(0) scale(1);

}



/* SVG Progress Ring */

.backtotop .progress-svg {

    position: absolute;

    top: 0;

    left: 0;

    transform: rotate(-90deg);

}



.backtotop .progress-circle-bg {

    fill: rgba(15, 23, 42, 0.05);

    stroke: rgba(15, 23, 42, 0.1);

    stroke-width: 2;

}



.backtotop .progress-circle-bar {

    fill: none;

    stroke: var(--theme-color); /* Gold */

    stroke-width: 3;

    stroke-linecap: round;

    stroke-dasharray: 307.8; /* 2 * PI * r (approx) */

    stroke-dashoffset: 307.8;

    transition: stroke-dashoffset 0.1s linear;

}



/* The Button Core */

.backtotop .button-core {

    height: 52px;

    width: 52px;

    background: #0f172a;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #ffffff;

    font-size: 18px;

    box-shadow: 0 15px 35px rgba(15, 23, 42, 0.25);

    position: relative;

    z-index: 2;

    transition: all 0.4s ease;

}



.backtotop .scroll-progress-container:hover .button-core {

    background: var(--theme-color);

    color: #ffffff;

    transform: scale(1.05);

    box-shadow: 0 10px 25px rgb(255 156 191);

}



.backtotop .scroll-progress-container:hover .arrow-icon {

    animation: bounceArrow 0.6s infinite alternate;

}



@keyframes bounceArrow {

    from { transform: translateY(0); }

    to { transform: translateY(-4px); }

}



/* Content Placeholder styles */

.backtotop .card-custom {

    border: none;

    border-radius: 24px;

    background: #ffffff;

    box-shadow: 0 10px 40px rgba(0,0,0,0.04);

    padding: 40px;

    transition: transform 0.4s ease;

}



.backtotop .card-custom:hover {

    transform: translateY(-10px);

}



.backtotop .badge-luxury {

    background: rgba(251, 191, 36, 0.1);

    color: #b45309;

    font-weight: 700;

    padding: 8px 16px;

    border-radius: 100px;

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: 0.1em;

    margin-bottom: 20px;

    display: inline-block;

}

/* end back to top */



/* modal form thông tin liên hệ */

.wrap-content .fw-800 { font-weight: 800; }

.wrap-content .fw-700 { font-weight: 700; }

.wrap-content .fw-600 { font-weight: 600; }

.wrap-content .fw-500 { font-weight: 500; }

.wrap-content .ls-tight { letter-spacing: -0.03em; }

.wrap-content .ls-1 { letter-spacing: 0.05em; }

.wrap-content .z-index-2 { position: relative; z-index: 2; }

.wrap-content .text-slate-900 { color: #0f172a; }

.wrap-content .text-slate-500 { color: #64748b; }



/* Trigger Button */

.wrap-content .btn-main-trigger {

    background: #0f172a;

    color: #ffffff;

    border: none;

    padding: 12px 12px 12px 32px;

    border-radius: 100px;

    font-weight: 700;

    display: inline-flex;

    align-items: center;

    gap: 15px;

    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15);

}



.wrap-content .btn-main-trigger .icon-circle {

    width: 44px;

    height: 44px;

    background: var(--theme-color);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.1rem;

    transition: all 0.4s ease;

}



.wrap-content .btn-main-trigger:hover {

    transform: translateY(-5px);

    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.25);

    background: #1e293b;

}



/* Sidebar V2 Styling */

.wrap-content .sidebar-gradient-v2 {

    background-color: #0f172a;

    overflow: hidden;

}



.wrap-content .sidebar-overlay {

    position: absolute;

    inset: 0;

    background: rgba(15, 23, 42, 0.3);

    backdrop-filter: blur(2px);

}



.wrap-content .floating-blob {

    position: absolute;

    border-radius: 50%;

    filter: blur(60px);

    z-index: 1;

    opacity: 0.5;

    animation: floating-anim 10s infinite alternate ease-in-out;

}



.wrap-content .blob-1 {

    width: 250px; height: 250px;

    background: var(--theme-color);

    top: -50px; left: -50px;

}



.wrap-content .blob-2 {

    width: 200px; height: 200px;

    background: var(--theme-color3);

    bottom: 10%; right: -50px;

    animation-delay: -2s;

}



.wrap-content .blob-3 {

    width: 150px; height: 150px;

    background: #6366f1;

    top: 40%; left: 30%;

    animation-delay: -5s;

}



@keyframes floating-anim {

    0% { transform: translate(0, 0) scale(1); }

    100% { transform: translate(20px, 40px) scale(1.1); }

}



/* Brand Badge V2 */

.wrap-content .brand-badge-v2 {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 8px 18px;

    background: rgba(255, 255, 255, 0.1);

    border: 1px solid rgba(255, 255, 255, 0.2);

    backdrop-filter: blur(10px);

    border-radius: 100px;

    font-size: 0.85rem;

    font-weight: 700;

}



.wrap-content .pulse-dot {

    width: 8px; height: 8px;

    background: var(--theme-color3);

    border-radius: 50%;

    box-shadow: 0 0 0 0 rgba(77, 182, 172, 0.7); /* Giữ nguyên rgba vì dùng HEX khó làm mờ */

    animation: pulse-green 2s infinite;

}



@keyframes pulse-green {

    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(77, 182, 172, 0.7); }

    70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(77, 182, 172, 0); }

    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(77, 182, 172, 0); }

}



.wrap-content .text-gradient-highlight {

    background: linear-gradient(to right, #ffffff, #ffb0cd);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    border-bottom: 3px solid rgba(255, 255, 255, 0.2);

}



/* Contact Glass Cards */

.wrap-content .contact-glass-item {

    display: flex;

    align-items: center;

    padding: 16px;

    background: rgba(255, 255, 255, 0.05);

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 20px;

    transition: all 0.3s ease;

    backdrop-filter: blur(5px);

}



.wrap-content .contact-glass-item:hover {

    background: rgba(255, 255, 255, 0.1);

    transform: translateX(10px);

    border-color: rgba(255, 255, 255, 0.3);

}



.wrap-content .glass-icon {

    width: 44px; height: 44px;

    background: linear-gradient(135deg, var(--theme-color), var(--theme-color2));

    border-radius: 14px;

    display: flex; align-items: center; justify-content: center;

    font-size: 1.1rem;

    box-shadow: 0 8px 16px rgba(255, 77, 141, 0.3);

}



.wrap-content .contact-glass-item .label {

    display: block;

    font-size: 0.7rem;

    text-transform: uppercase;

    letter-spacing: 1px;

    font-weight: 700;

    opacity: 0.6;

    margin-bottom: 2px;

}



.wrap-content .contact-glass-item .value {

    margin: 0;

    font-weight: 600;

    font-size: 0.95rem;

}



/* Footer Section V2 */

.wrap-content .trust-badge {

    display: flex;

    align-items: center;

    background: var(--theme-color5);

    padding: 10px 20px;

    border-radius: 16px;

    width: fit-content;

    margin-top: 10px;

}



.wrap-content .avatar-group {

    display: flex;

    align-items: center;

}



.wrap-content .avatar-mini {

    width: 28px; height: 28px;

    border-radius: 50%;

    border: 2px solid #0f172a;

    margin-left: -8px;

    overflow: hidden;

    background: #334155;

    display: flex; align-items: center; justify-content: center;

    font-size: 0.6rem; font-weight: 800;

}



.wrap-content .avatar-mini img { width: 100%; height: 100%; object-fit: cover; }

.wrap-content .avatar-mini:first-child { margin-left: 0; }

.wrap-content .avatar-mini.count { background: var(--theme-color); color: white; border: none; }



.wrap-content .social-circle {

    width: 40px; height: 40px;

    background: rgba(255, 255, 255, 0.1);

    border-radius: 12px;

    display: flex; align-items: center; justify-content: center;

    color: white;

    text-decoration: none;

    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    border: 1px solid rgba(255, 255, 255, 0.1);

}



.wrap-content .social-circle:hover {

    background: #ffffff;

    color: #0f172a;

    transform: translateY(-5px) rotate(8deg);

}



/* Right Side - Form Customization */

.wrap-content .badge-custom {

    display: inline-block;

    padding: 6px 14px;

    background: var(--theme-color5);

    color: var(--theme-color);

    border-radius: 100px;

    font-size: 0.75rem;

    font-weight: 800;

    text-transform: uppercase;

}



.wrap-content .btn-close-minimal {

    position: absolute;

    top: 25px; right: 25px;

    width: 40px; height: 40px;

    border-radius: 50%;

    border: none;

    background: #f1f5f9;

    color: #64748b;

    display: flex; align-items: center; justify-content: center;

    transition: all 0.3s ease;

    z-index: 10;

}



.wrap-content .btn-close-minimal:hover {

    background: var(--theme-color);

    color: white;

    transform: rotate(90deg);

}



/* FIXED ICON CLUSTERING BUG HERE */

.wrap-content .input-wrapper {

    position: relative;

    width: 100%;

}



.wrap-content .form-control-minimal, 

.wrap-content .form-select-minimal {

    width: 100%;

    padding: 14px 20px 14px 50px;

    background: #f8fafc;

    border: 2px solid #f1f5f9;

    border-radius: 14px;

    font-size: 0.95rem;

    font-weight: 500;

    color: #0f172a;

    transition: all 0.3s ease;

    display: block;

}



/* Textarea không cần padding trái lớn nếu không có icon */

.wrap-content .form-control-minimal.no-icon {

    padding-left: 20px;

}



.wrap-content .form-control-minimal:focus {

    outline: none;

    border-color: var(--theme-color);

    background: white;

}



.wrap-content .input-icon {

    position: absolute; 

    left: 18px; 

    top: 50%;

    transform: translateY(-50%);

    color: #94a3b8;

    z-index: 2;

    pointer-events: none;

}



.wrap-content .btn-submit-main {

    width: 100%;

    background: var(--theme-color);

    color: white;

    border: none;

    padding: 16px 32px;

    border-radius: 14px;

    font-weight: 700;

    box-shadow: 0 10px 20px rgba(255, 77, 141, 0.2);

    transition: all 0.3s ease;

}



.wrap-content .btn-submit-main:hover {

    background: var(--theme-color2);

    transform: translateY(-2px);

}

.page-header-section {

    padding: 20px 0px;

    background: linear-gradient(to bottom, #ffffff 0%, #f8fafc 100%);

    border-bottom: 1px solid #e2e8f0;

}



/* Container của Breadcrumb */

.page-breadcrumb {

    display: flex;

    align-items: center;

    font-size: 0.875rem; /* 14px - Kích thước chuẩn thực tế */

    color: #64748b;

    list-style: none;

    padding: 0;

    flex-wrap: wrap;

}



.page-breadcrumb li {

    display: flex;

    align-items: center;

    position: relative;

}



.page-breadcrumb li a {

    text-decoration: none;

    color: #64748b;

    font-weight: 500;

    border-radius: 6px;

    transition: all 0.2s ease;

    display: flex;

    align-items: center;

    gap: 6px;

}

.page-breadcrumb li i{margin-right: 5px}

.page-breadcrumb li a i {

    font-size: 0.9em;

    opacity: 0.8;

}

.page-breadcrumb li a:hover {

    color: #0f172a;

}

.page-breadcrumb li + li::before {

    content: "/"; 

    color: #cbd5e1;

    padding: 0 4px;

    font-size: 0.9em;

    font-weight: 400;margin-right: 4px;

}

.page-breadcrumb li.active {

    color: #0f172a; 

    font-weight: 600;

    padding: 4px 8px;

    pointer-events: none; 

}

/* RESPONSIVE */

@media (max-width: 992px) {

    .wrap-content .modal-xl { max-width: 700px; }

}



@media (max-width: 768px) {

    .wrap-content .p-md-5 { padding: 1.5rem !important; }

    .wrap-content .display-5 { font-size: 2rem !important; }

}



/* Animations */

.wrap-content .modal.fade .modal-dialog {

    transform: scale(0.9) translateY(40px);

    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

}

.wrap-content .modal.show .modal-dialog {

    transform: scale(1) translateY(0);

}

/* end modal form thông tin liên hệ */



/* nút button */

.wrapnutload{display: flex;justify-content: center;}

.wrapnutload .btn-original {

    background: transparent;

    border: 1.5px solid var(--theme-color);

    color: var(--theme-color);

    padding: 14px 40px;

    border-radius: 12px;

    font-weight: 600;

    font-size: 16px;

    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);

    display: flex;

    align-items: center;

    cursor: pointer;

    box-shadow: 0 4px 12px var(--theme-color5);

}



.wrapnutload .btn-original:hover {

    background-color: var(--theme-color);

    color: #ffffff;

    box-shadow: 0 8px 25px var(--theme-color5);

    transform: translateY(-3px);

}

@media (max-width: 992px) {

    .wrapnutload .btn-original{    font-size: 12px;

        padding: 12px 16px;}

    }



/* header desktop: dựng 100% bằng LOV Builder (Builder Cài Đặt → Header), tự style trong fragment. Bỏ CSS .wrapheader legacy của webgoc để không đè lên (đang làm topbar bị trắng). */

/* slider */



.wrapslider .main-hero-slider {

    width: 100%;

    height: auto;

    position: relative;

}



.wrapslider .swiper-slide {

    display: block;

    width: 100%;

    /* Aspect ratio based on original image dimensions 1968x790 (~40%) */

    aspect-ratio: 1968 / 790;

    min-height: 250px; 

    border-radius: 0;

    overflow: hidden;

}



.wrapslider .swiper-slide img {

    max-width: 100%;

    height: auto;

    display: block;

    border-radius: 10px;

}



.wrapslider .slide-link {

    display: block;

    width: 100%;

    height: 100%;

    text-decoration: none;

}



/* Swiper Navigation Customization */

.wrapslider .swiper-button-next, 

.wrapslider .swiper-button-prev {

    width: 40px;

    height: 40px;

    background: rgba(255,255,255,0.7);

    border-radius: 50%;

    color: #333;

    box-shadow: 0 4px 10px rgba(0,0,0,0.1);

    transition: all 0.3s ease;

    backdrop-filter: blur(4px);

    z-index: 10;

}



.wrapslider .swiper-button-next:after, 

.wrapslider .swiper-button-prev:after {

    font-size: 16px;

    font-weight: 900;

}



.wrapslider .swiper-button-next:hover, 

.wrapslider .swiper-button-prev:hover {

    background: var(--theme-color);

    color: #fff;

}



.wrapslider .swiper-pagination-bullet {

    width: 10px;

    height: 10px;

    background: #fff;

    opacity: 0.5;

    transition: all 0.3s ease;

}



.wrapslider .swiper-pagination-bullet-active {

    opacity: 1;

    width: 30px;

    border-radius: 10px;

    background: #fff;

    box-shadow: 0 0 10px rgba(0,0,0,0.2);

}



/* MEDIA QUERIES */

@media (max-width: 992px) {

    .wrapslider .swiper-slide {

        min-height: 200px;

    }

}



@media (max-width: 768px) {

    .wrapslider .swiper-button-next, 

    .wrapslider .swiper-button-prev { 

        display: none; 

    }

    .wrapslider .swiper-slide {

        min-height: 160px;

    }

}



@media (max-width: 576px) {

    .wrapslider .swiper-slide {

        min-height: 140px;

        aspect-ratio: 16 / 9; /* Slightly taller aspect for mobile readability */

    }

}

/* load nút ajax */
.btn-loadmore-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.btn-loadmore-wrapper .btn-loadmore{
    background: #fff0f5 !important;
    border: 2px dashed var(--theme-color) !important;
    color: var(--theme-color) !important;
    border-radius: 40px !important;
    padding: 10px 32px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px var(--theme-color5) !important;
}

.btn-loadmore-wrapper .btn-loadmore i {
    font-size: 12px;
    transition: transform 0.3s ease;
}

.btn-loadmore-wrapper .btn-loadmore:hover {
    background: var(--theme-color) !important;
    border: 2px solid var(--theme-color) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px rgba(255, 77, 141, 0.4) !important;
    transform: translateY(-4px) scale(1.03);
}

.btn-loadmore-wrapper .btn-loadmore:hover i {
    transform: translateY(3px);
}

.btn-loadmore-wrapper .btn-loadmore:active {
    transform: scale(0.92);
    box-shadow: 0 2px 6px rgba(255, 77, 141, 0.3) !important;
}

.btn-loadmore-wrapper .loading {
    font-size: 14px;
    font-weight: 600;
    color: var(--theme-color) !important;
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    animation: bounceCute 0.8s infinite alternate ease-in-out;
}

@keyframes bounceCute {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-6px);
    }
}

@media (max-width: 768px) {
    .btn-loadmore-wrapper .btn-loadmore {
        padding: 10px 24px !important;
        font-size: 13px !important;
    }
    
    .btn-loadmore-wrapper .btn-loadmore:hover {
        transform: translateY(-2px) scale(1.02);
    }
    
    .btn-loadmore-wrapper #btn-loadmore-dm:active {
        transform: scale(0.95);
    }
}

/* tiêu đề sản phẩm liên quan */
.wrap-titlechitiet .site-heading-inline {
    text-align: left; 
    margin-bottom: 15px;
}

.wrap-titlechitiet .site-title-lq {
    position: relative;
    display: inline-block;
    color: #222a33;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding-bottom: 12px;
    font-size: 23px;
}

.wrap-titlechitiet .site-title-lq::after {
    content: '';
    position: absolute;
    left: 0; 
    bottom: 0;
    width: 60px; 
    height: 4px; 
    background-color: var(--theme-color); 
    border-radius: 2px;
}
@media (max-width: 992px) {
   .wrap-titlechitiet .site-title-lq
   {
    font-size: 18px;
   } 
   .wrap-titlechitiet .site-heading-inline{
        margin-bottom: 6px;
   }
}
/* end tiêu đề sản phẩm liên quan */

/* tin mới */
.wrapnews .section-header {
            border-bottom: 2px solid #eef2f6;
            margin-bottom: 20px;
            padding-bottom: 12px;
            position: relative;
        }
        .wrapnews .section-header::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 48px;
            height: 3px;
            background-color: var(--theme-color);
            border-radius: 2px;
        }
        .wrapnews h2.section-title {
            font-size: 24px;
            font-weight: 800;
            color: #1e293b;
            margin: 0;
            letter-spacing: -0.02em;
        }
        .wrapnews h2.section-title a {
            color: #1e293b;
            text-decoration: none;
            transition: color 0.3s ease;
        }
        .wrapnews h2.section-title a:hover {
            color: var(--theme-color);
        }
        .wrapnews .nav-btn-container {
            display: flex;
            gap: 10px;
        }
        .wrapnews .nav-btn {
            width: 40px;
            height: 40px;
            border: 1px solid #e2e8f0;
            background: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            color: var(--theme-color);
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 14px;
        }
        .wrapnews .nav-btn:hover {
            background-color: var(--theme-color);
            color: #ffffff;
            border-color: var(--theme-color);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px var(--theme-color5);
        }
        .wrapnews .news-card {
            background: #ffffff;
            border-radius: 0px;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
            height: 100%;
            border: none;
            display: flex;
            flex-direction: column;
        }
        .wrapnews .news-card:hover {
            transform: translateY(-10px);
        }
        .wrapnews .image-wrapper {
            position: relative;
            aspect-ratio: 16/11;
            overflow: hidden;
            margin-bottom: 20px;
        }
        .wrapnews .image-link {
            display: block;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        .wrapnews .image-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s ease;
        }
        .wrapnews .news-card:hover .image-wrapper img {
            transform: scale(1.08);
        }
        .wrapnews .play-btn {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 54px;
            height: 54px;
            background: #ffffff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 2;
            box-shadow: 0 10px 25px rgba(0,0,0,0.15);
            transition: all 0.3s ease;
            pointer-events: none;
        }
        .wrapnews .play-btn i {
            color: var(--theme-color);
            font-size: 18px;
            margin-left: 4px;
        }
        .wrapnews .card-content {
            padding: 0 4px;
        }
        .wrapnews .category {
            font-size: 12px;
            text-transform: uppercase;
            font-weight: 700;
            color: #64748b;
            letter-spacing: 0.05em;
            margin-bottom: 12px;
            display: block;
        }
        .wrapnews h3.post-title {
            margin: 0 0 16px 0;
            padding: 0;
            line-height: 1.4;
        }
        .wrapnews h3.post-title a {
            font-size: 16px;
            font-weight: 700;
            color: #1e293b;
            text-decoration: none;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            transition: color 0.3s ease;
        }
        .wrapnews h3.post-title a:hover {
            color: var(--theme-color);
        }
        .wrapnews .post-meta {
            display: flex;
            align-items: center;
            gap: 15px;
            color: #94a3b8;
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.02em;
        }
        .wrapnews .post-meta i {
            margin-right: 4px;
            font-size: 14px;
        }
        .wrapnews .swiper {
            padding-bottom: 10px;
        }
        @media (max-width: 1200px) {
            .wrapnews .container { max-width: 1140px; }
        }
        @media (max-width: 1000px) {
            .wrapnews h3.post-title a { font-size: 16px; }
        }
        @media (max-width: 768px) {
            .wrapnews h2.section-title { font-size: 22px !important; }
            .wrapnews h3.post-title a { font-size: 16px !important; }
            .wrapnews .category { font-size: 11px !important; }
        }
        @media (max-width: 576px) {
            .wrapnews h2.section-title { font-size: 20px !important; }
            .wrapnews h3.post-title a { font-size: 16px !important; }
            .wrapnews .nav-btn { width: 35px; height: 35px; }
            .wrapnews .container { padding-left: 20px; padding-right: 20px; }
        }

        /* card tin tức */
        .spa-news-card {
  background-color: #ffffff;
  border-radius: 24px;
  padding: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  transition: all 0.4s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid rgba(234, 70, 129, 0.05);
}

.spa-news-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 40px rgba(234, 70, 129, 0.12);
  border-color: var(--theme-color5);
}

.spa-news-card .spa-news-image {
  width: 100%;
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 4/3;
}

.spa-news-card .spa-news-image a {
  display: block;
  width: 100%;
  height: 100%;
}

.spa-news-card .spa-news-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.spa-news-card:hover .spa-news-image img {
  transform: scale(1.08);
}

.spa-news-card .spa-news-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  background-color: rgba(255, 255, 255, 0.95);
  color: var(--theme-color2);
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 30px;
  z-index: 2;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.spa-news-card .spa-news-body {
  padding: 24px 8px 8px 8px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.spa-news-card .spa-news-title {
  font-size: 17px;
  line-height: 26px;
  font-weight: 700;
  margin: 0 0 12px 0;
}

.spa-news-card .spa-news-title a {
      color: #2c2c2c;
    text-decoration: none;
    transition: color 0.3s ease;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.spa-news-card .spa-news-title a:hover {
  color: var(--theme-color);
}

.spa-news-card .spa-news-summary {
  font-size: 15px;
  line-height: 24px;
  color: #777777;
  margin: 0 0 24px 0;
  flex-grow: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.spa-news-card .spa-news-action {
  margin-top: auto;
  text-align: center;
}

.spa-news-card .spa-news-btn {
  display: inline-block;
  width: 100%;
  padding: 12px 24px;
  background-color: var(--theme-color5);
  color: var(--theme-color2);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 14px;
  transition: all 0.3s ease;
}

.spa-news-card .spa-news-btn:hover {
  background-color: var(--theme-color);
  color: #ffffff;
  box-shadow: 0 6px 20px var(--theme-color5);
}

@media (max-width: 768px) {
  .spa-news-card {
    padding: 12px;
    border-radius: 20px;
  }
  
  .spa-news-card .spa-news-image {
    border-radius: 14px;
  }
  
  .spa-news-card .spa-news-body {
    padding: 20px 4px 4px 4px;
  }
  
  .spa-news-card .spa-news-title {
    font-size: 16px;
    line-height: 24px;
  }
  
  .spa-news-card .spa-news-summary {
    font-size: 14px;
    line-height: 22px;
    margin: 0 0 16px 0;
  }
  
  .spa-news-card .spa-news-btn {
    padding: 10px 20px;
    font-size: 14px;
  }
}

/* title chung */
.custom-title-wrapper .custom-section-title {
  position: relative;
  font-size: 22px;
  font-weight: 700;
  color: #232a31;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0;
  padding-bottom: 12px;
  display: inline-block;
}

.custom-title-wrapper .custom-section-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}

.custom-title-wrapper .custom-section-title a:hover {
  color: var(--theme-color);
}

.custom-title-wrapper .custom-section-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 90px;
  height: 4px;
  background-color: var(--theme-color);
  border-radius: 2px;
}

@media (max-width: 768px) {
  .custom-title-wrapper .custom-section-title {
    font-size: 18px;
    padding-bottom: 10px;
  }
  
  .custom-title-wrapper .custom-section-title::after {
    width: 70px;
    height: 3px;
  }
}
/* danh mục layout */
.wrapdmslider{padding: 15px 0px}
.wrapdmslider .swiper-nav-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    color: #0f172a;
    background: #fff;
}

.wrapdmslider .swiper-nav-btn:hover {
    background-color: var(--theme-color);
    border-color: var(--theme-color);
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(255, 77, 141, 0.25);
}

.wrapdmslider .dm-swiper-container {
    overflow: hidden;
    height: auto;
}

.wrapdmslider .category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 24px;
    padding: 30px 20px;
    text-decoration: none;
    text-align: center;
    transition: all 0.4s ease;
    height: auto;
    box-sizing: border-box;
}

.wrapdmslider .category-card:hover {
    background: #ffffff;
    border-color: transparent;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
    transform: translateY(-8px);
}

.wrapdmslider .card-icon {
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 9px;
    transition: all 0.4s ease;
}

.wrapdmslider .card-icon.icon-alt {
    background-color: rgba(77, 182, 172, 0.1);
}

.wrapdmslider .card-icon img {
    max-width: 60px; 
    height: auto;
    transition: transform 0.4s ease;
}

.wrapdmslider .category-card:hover .card-icon img {
    transform: scale(1.1) rotate(5deg);
}

.wrapdmslider .card-title {
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 8px;
}

.wrapdmslider .card-count {
    color: #838384;
    font-size: 0.95rem;
    margin: 0;
}
.wrapdmslider .swiper-button-lock {
    display: none !important;
}
@media (max-width: 1200px) {
    .wrapdmslider .container { max-width: 1140px; }
}

@media (max-width: 1000px) {
}


@media (max-width: 768px) {
    .wrapdmslider .nutbtslider{display: none !important}
    .wrapdmslider .swiper-nav-btn { width: 40px; height: 40px; }
    .wrapdmslider .category-card { padding: 25px 15px; }
    .wrapdmslider .card-title{font-size: 14px;font-weight: 600}
    .wrapdmslider .card-count {
    color: #94a3b8;
    font-size: 11px;}
}

@media (max-width: 576px) {
    .wrapdmslider .container { padding-left: 20px; padding-right: 20px; }
    .wrapdmslider .dm-swiper-container { height: auto; }
}

/* flashsale tab */


/* ====================== itemdm.css ====================== */
.cardsp .product-item {
    background: #ffffff;
    border-radius: 24px; 
    padding: 18px;
    height: 100%;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    border: 1px solid #ffeaf0;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 15px rgba(255, 117, 140, 0.03);
}

.cardsp .product-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(255, 117, 140, 0.12);
    border-color: #ffd6e0;
}

.cardsp .img-wrapper {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 15px;
    aspect-ratio: 1/1;
    background: #fff5f7;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cardsp .img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.cardsp .product-item:hover .img-wrapper img {
    transform: scale(1.08);
}

.cardsp .badge-sale {
    position: absolute;
    top: 10px;
    left: 10px;
    color: white;
    padding: 6px 12px;
    border-radius: 12px 0 12px 0;
    font-weight: 800;
    font-size: 13px;
    z-index: 2;
    box-shadow: 0 4px 10px rgba(255, 117, 140, 0.3);
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, var(--theme-color) 0%, var(--theme-color2) 100%);
}

.cardsp h3 {
        margin-bottom: 4px;
}

.cardsp h3 a {
    text-decoration: none;
    color: #171717;
    transition: color 0.3s;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 15px;
    line-height: 21px;
    font-weight: 600;
}

.cardsp h3 a:hover {
    color: var(--theme-color);
}

.cardsp .price-box {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 5px;
    flex-wrap: wrap;
}

.cardsp .sale-price {
    font-size: 17px;
    font-weight: 800;
    color: var(--theme-color);
}

.cardsp .old-price {
    font-size: 14px;
    color: #b2bec3;
    text-decoration: line-through;
    font-weight: 500;
}

.cardsp .timer-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--theme-color5);
    padding: 8px 12px;
    border-radius: 50px;
    margin-bottom: 10px;
    gap: 8px;
    width: 100%;
}

.cardsp .timer-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 800;
    color: var(--theme-color);
    text-transform: uppercase;
    white-space: nowrap;
}

.cardsp .timer-blocks {
    display: flex;
    align-items: center;
    gap: 4px;
}

.cardsp .timer-unit {
    background: #ffffff; 
    color: var(--theme-color); 
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 800;
    font-size: 13px;
    box-shadow: 0 3px 8px rgba(255, 117, 140, 0.15);
}

.cardsp .timer-sep {
    color: var(--theme-color2);
    font-weight: 800;
    margin: 0 1px;
}

.cardsp .progress-label {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 6px;
    color: #515354;
}

.cardsp .progress {
    height: 6px; 
    background-color: #ffeaf0;
    border-radius: 50px; 
    overflow: hidden;
}

.cardsp .progress-bar {
    background: linear-gradient(135deg, var(--theme-color) 0%, var(--theme-color2) 100%);
    border-radius: 50px;
    transition: width 1s ease-in-out;
}

.cardsp .product-item:not(.is-flashsale) .timer-container,
.cardsp .product-item:not(.is-flashsale) .flashsale-progress {
    display: none;
}

@media (max-width: 1400px) {
    .cardsp .timer-container { 
        flex-direction: column;
        align-items: center; 
        justify-content: center;
        padding: 8px;
        gap: 3px;
        margin-bottom: 4px;
    }
}

@media (max-width: 992px) {
    .cardsp .section-title { font-size: 29px; }
}

@media (max-width: 768px) {
    .cardsp .badge-sale{padding: 1px 10px;    font-size: 10px;}
    .cardsp .section-title { font-size: 24px; justify-content: center; } 
    .cardsp .product-item { padding: 12px; border-radius: 18px; }
    .cardsp .img-wrapper { border-radius: 12px; }
    .cardsp h3 a{ font-size: 14px; line-height: 24px;overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;}
    .cardsp .sale-price { font-size: 16px; }
    .cardsp .old-price { font-size: 13px; }
    .cardsp .timer-container { 
        flex-direction: column;
        align-items: center; 
        justify-content: center;
        padding: 10px;
        border-radius: 16px;
        gap: 3px;
        margin-bottom: 4px;
    }
    .cardsp .timer-label { margin-bottom: 6px; font-size: 11px; }
    .cardsp .row { --bs-gutter-x: 12px; --bs-gutter-y: 12px; }
}

/* ====================== dvw-item-card.css ======================
   Thẻ sản phẩm DÙNG CHUNG mọi nơi (site/page/danhmuc/item.php): danh mục, sản phẩm liên quan,
   tìm kiếm, yêu thích, trang chủ, khối Builder "Kho giao diện"... — 1 kiểu duy nhất.
   Đặt ở ĐÂY (mau.css, nạp trên MỌI trang) chứ không phải builder.css, vì builder.css CHỈ nạp
   khi $temp === 'site/page/builder/render' (xem site/layout.php) — trang danh mục/sản phẩm
   thường không có file đó, để CSS bên builder.css thì thẻ sẽ vỡ giao diện (không có style).
   --theme-color* khai báo RIÊNG ngay trên .dvw-templates__item để không đụng --theme-color
   chung của site (site đang dùng xanh #27AE60, bộ thẻ này cố định tông cam thương hiệu dvw). */
.dvw-templates__item {
    --theme-color: #FF6B35;
    --theme-color2: #D94E1D;
    --theme-color5: #ffe7deab;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border: 1px solid #efe9e4;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(31, 36, 48, 0.05);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}

.dvw-templates__item:hover {
    transform: translateY(-8px);
    border-color: #ffd3c1;
    box-shadow: 0 28px 54px rgba(31, 36, 48, 0.14);
}

.dvw-templates__frame {
    position: relative;
}

.dvw-templates__bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    background-color: #fbf3ef;
    border-bottom: 1px solid #f1e4dc;
}

.dvw-templates__bar-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: #e4c7ba;
}

.dvw-templates__bar-dot:nth-child(1) { background-color: #ff5f57; }
.dvw-templates__bar-dot:nth-child(2) { background-color: #febc2e; }
.dvw-templates__bar-dot:nth-child(3) { background-color: #28c840; }

.dvw-templates__bar-url {
    margin-left: 10px;
    padding: 4px 14px;
    border-radius: 20px;
    background-color: #ffffff;
    border: 1px solid #f1e4dc;
    font-size: 11px;
    color: #9aa2b4;
    max-width: 65%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dvw-templates__shot {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: linear-gradient(135deg, #fbe9e1 0%, #f4dccd 100%);
}

.dvw-templates__img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: top center;
    transition: transform 0.6s ease;
}

.dvw-templates__item:hover .dvw-templates__img {
    transform: scale(1.06);
}

.dvw-templates__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #d99a76;
}

.dvw-templates__placeholder-icon {
    width: 46px;
    height: 46px;
    opacity: 0.65;
}

.dvw-templates__placeholder span {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
    opacity: 0.8;
}

.dvw-templates__shot::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 65%;
    background: linear-gradient(to top, rgba(20, 15, 12, 0.5), rgba(20, 15, 12, 0));
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.dvw-templates__frame:hover .dvw-templates__shot::after {
    opacity: 1;
}

.dvw-templates__item .dvw-templates__preview {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 18px;
    border-radius: 40px;
    background: linear-gradient(135deg, var(--theme-color) 0%, var(--theme-color2) 100%);
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(217, 78, 29, 0.35);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dvw-templates__frame:hover .dvw-templates__preview {
    transform: translateY(-3px);
    box-shadow: 0 16px 32px rgba(217, 78, 29, 0.45);
}

.dvw-templates__preview-icon {
    display: inline-flex;
}

.dvw-templates__preview-icon-svg {
    width: 15px;
    height: 15px;
}

.dvw-templates__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 24px 24px 26px;
}

.dvw-templates__cat {
    align-self: flex-start;
    padding: 5px 12px;
    border-radius: 30px;
    background-color: var(--theme-color5);
    color: var(--theme-color2);
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 12px;
}

.dvw-templates__name {
    font-size: 19px;
    font-weight: 700;
    color: #14181f;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
}

.dvw-templates__name-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.25s ease;
}

.dvw-templates__name-link:hover,
.dvw-templates__item:hover .dvw-templates__name-link {
    color: var(--theme-color2);
}

.dvw-templates__text {
    font-size: 14px;
    color: #5a6377;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dvw-templates__price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px dashed #efe3da;
    text-decoration: none;
}

.dvw-templates__price-col {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.dvw-templates__price-label {
    font-size: 11px;
    font-weight: 600;
    color: #9aa2b4;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.dvw-templates__price-wrap {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.dvw-templates__price {
    font-size: 19px;
    font-weight: 800;
    color: #14181f;
    transition: color 0.25s ease;
}

.dvw-templates__item:hover .dvw-templates__price {
    color: var(--theme-color2);
}

.dvw-templates__price-old {
    font-size: 13px;
    color: #aeb5bc;
    text-decoration: line-through;
    font-weight: 500;
}

.dvw-templates__price-arrow {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--theme-color5);
    color: var(--theme-color2);
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.dvw-templates__price-arrow svg {
    width: 16px;
    height: 16px;
}

.dvw-templates__item:hover .dvw-templates__price-arrow {
    background: linear-gradient(135deg, var(--theme-color) 0%, var(--theme-color2) 100%);
    color: #ffffff;
    transform: translateX(3px);
}

.dvw-templates__soldout {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 5px 12px;
    border-radius: 30px;
    background-color: rgba(20, 24, 31, 0.75);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    z-index: 2;
}

.dvw-templates__discount {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 5px 12px;
    border-radius: 30px;
    background: linear-gradient(135deg, var(--theme-color) 0%, var(--theme-color2) 100%);
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.3px;
    box-shadow: 0 8px 18px rgba(217, 78, 29, 0.35);
    z-index: 2;
}

@media (max-width: 768px) {
    .dvw-templates__shot { height: 190px; }
    .dvw-templates__body { padding: 20px 18px 22px; }
    .dvw-templates__name { font-size: 17px; }
    .dvw-templates__bar { padding: 10px 14px; }
    .dvw-templates__bar-url { font-size: 10px; }
}

/* ====================== detailsp.css ====================== */
.wrap-detailhai { padding: 20px 0; color: #2c2c2c; }
.wrap-detailhai .titletv { background-color: var(--theme-color); color: white !important; padding: 2px 7px; font-size: 12px; border-radius: 4px; }
.wrap-detailhai .container-product { background: #ffffff; border-radius: 20px; box-shadow: 0 15px 45px rgba(230, 69, 126, 0.05); padding: 20px; border: 1px solid rgba(255, 77, 141, 0.08); }
.wrap-detailhai .badgefs { background: linear-gradient(135deg, var(--theme-color), var(--theme-color2)); padding: 6px 12px; font-weight: 600; border-radius: 6px; }
.wrap-detailhai .text-theme3 { color: var(--theme-color3); }
.wrap-detailhai .product-gallery-container { position: sticky; top: 30px; }
.wrap-detailhai .swiper-main { width: 100%; height: 550px; border-radius: 16px; overflow: hidden; background: #fdfafb; border: 1px solid #f2e9ec; display: flex; align-items: center; }
.wrap-detailhai .swiper-main .swiper-slide { display: flex; align-items: center; justify-content: center; background: #ffffff; width: 100%; height: 100%; }
.wrap-detailhai .swiper-main .swiper-slide-video { background: #000; }
.wrap-detailhai .swiper-main img { max-width: 100%; height: auto; padding: 10px; }
.wrap-detailhai .plyr { width: 100%; height: 100%; }
.wrap-detailhai .plyr__video-wrapper { height: 100%; }
.wrap-detailhai .swiper-main .zoomable-img { cursor: zoom-in; transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); }
.wrap-detailhai .swiper-main .zoomable-img:hover { transform: scale(1.08); }
.wrap-detailhai .swiper-thumbs { margin-top: 15px; height: auto; position: relative; padding: 10px 5px; }
.wrap-detailhai .swiper-thumbs .swiper-slide { aspect-ratio: 1 / 1; height: auto; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 2px solid transparent; border-radius: 12px; overflow: hidden; opacity: 0.5; transition: all 0.3s ease; background: #fdfafb; box-sizing: border-box; }
.wrap-detailhai .swiper-thumbs .swiper-slide:hover { opacity: 0.8; }
.wrap-detailhai .swiper-thumbs .swiper-slide-thumb-active { border-color: var(--theme-color); opacity: 1; transform: translateY(-3px); box-shadow: 0 4px 10px rgba(255, 77, 141, 0.15); }
.wrap-detailhai .swiper-thumbs img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.wrap-detailhai .swiper-thumbs .swiper-button-next, .wrap-detailhai .swiper-thumbs .swiper-button-prev { width: 32px; height: 32px; background: rgba(255, 255, 255, 0.95); border-radius: 50%; box-shadow: 0 2px 8px rgba(0,0,0,0.1); color: var(--theme-color); top: 50%; transform: translateY(-50%); margin-top: 0; z-index: 10; }
.wrap-detailhai .swiper-thumbs .swiper-button-next::after, .wrap-detailhai .swiper-thumbs .swiper-button-prev::after { font-size: 14px; font-weight: 800; }
.wrap-detailhai .swiper-thumbs .swiper-button-prev { left: 0px; }
.wrap-detailhai .swiper-thumbs .swiper-button-next { right: 0px; }
.wrap-detailhai .swiper-thumbs .swiper-button-disabled { display: none; }
.wrap-detailhai .video-play-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: rgba(255, 255, 255, 0.95); font-size: 28px; text-shadow: 0 2px 10px rgba(0,0,0,0.3); pointer-events: none; z-index: 2; }
.wrap-detailhai .share-action-wrap { background: #fafafa; padding: 12px 16px; border-radius: 12px; }
.wrap-detailhai .share-icon { transition: transform 0.2s; display: inline-block; }
.wrap-detailhai .share-icon:hover { transform: scale(1.15); }
.wrap-detailhai .product-title { font-size: 28px; font-weight: 700; line-height: 1.4; margin-bottom: 15px; color: #1a1a1a; letter-spacing: -0.3px; }
.wrap-detailhai .stats-row { display: flex; align-items: center; gap: 20px; margin-bottom: 25px; padding-bottom: 20px; border-bottom: 1px dashed #eee; }
.wrap-detailhai .stat-item { display: flex; align-items: center; font-size: 14px; color: #777; }
.wrap-detailhai .rating-box { background: #fff8fa; padding: 4px 12px; border-radius: 20px; border: 1px solid rgba(255, 77, 141, 0.1); }
.wrap-detailhai .stat-rating { color: var(--theme-color); font-weight: 700; font-size: 16px; margin-right: 6px; }
.wrap-detailhai .stars { color: #f5c518; margin-right: 0; }
.wrap-detailhai .sold-count { color: #2c2c2c; font-weight: 700; margin-right: 4px; }
.wrap-detailhai .flash-sale-banner { background: linear-gradient(135deg, var(--theme-color), var(--theme-color2)); padding: 12px 24px; display: flex; justify-content: space-between; align-items: center; border-radius: 12px 12px 0 0; color: white; }
.wrap-detailhai .flash-sale-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 18px; letter-spacing: 0.5px; }
.wrap-detailhai .flash-sale-title i { font-size: 22px; color: #ffeba1; }
.wrap-detailhai .countdown-wrap { display: flex; align-items: center; gap: 6px; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 15px; }
.wrap-detailhai .countdown-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-right: 5px; }
.wrap-detailhai .time-box { background: rgba(255, 255, 255, 0.2); color: white; padding: 4px 8px; border-radius: 6px; font-weight: 700; min-width: 32px; text-align: center; backdrop-filter: blur(4px); }
.wrap-detailhai .price-section { background: #fff8fa; padding: 20px 24px; margin-bottom: 25px; display: flex; align-items: center; border-radius: 0 0 12px 12px; border: 1px solid rgba(255, 77, 141, 0.1); border-top: none; }
.wrap-detailhai .price-section__body { display: flex; align-items: center; flex-wrap: wrap; row-gap: 6px; }
.wrap-detailhai .price-section__row { display: flex; align-items: center; flex-wrap: wrap; }
.wrap-detailhai .old-price { text-decoration: line-through; color: #aeb5bc; font-size: 18px; margin-right: 15px; font-weight: 500; }
.wrap-detailhai .current-price { font-size: 34px; color: var(--theme-color); font-weight: 800; letter-spacing: -0.5px; }
.wrap-detailhai .discount-label { background: var(--theme-color2); color: #fff; font-size: 12px; padding: 4px 10px; font-weight: 700; border-radius: 8px; margin-left: 15px; text-transform: uppercase; box-shadow: 0 4px 10px rgba(230, 69, 126, 0.2); }

/* ===== Không có Flash Sale phía trên -> tự đứng thành 1 thẻ giá riêng, chuyên nghiệp gọn gàng
   (trước đây ăn theo banner flash sale nên cạnh trên bị cắt phẳng trơ trọi khi không có sale). ===== */
.wrap-detailhai .price-section--solo {
    background: linear-gradient(180deg, #fff 0%, #fbfbfd 100%);
    border: 1px solid #edf0f5;
    border-radius: 16px;
    padding: 10px 26px 22px 24px;
    box-shadow: 0 1px 2px rgba(15,23,42,.03), 0 12px 28px -18px rgba(15,23,42,.14);
    position: relative;
    overflow: hidden;
}
.wrap-detailhai .price-section--solo::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: linear-gradient(180deg, var(--theme-color), var(--theme-color2));
}
.wrap-detailhai .price-section--solo .price-section__body {
    display: flex; flex-direction: column; align-items: flex-start; gap: 7px; flex: 1; min-width: 0;
}
.wrap-detailhai .price-section--solo .price-section__row { column-gap: 12px; row-gap: 4px; }
.wrap-detailhai .price-section--solo .old-price { margin-right: 0; font-size: 16px; }
.wrap-detailhai .price-section--solo .current-price { font-size: 32px; }
.wrap-detailhai .price-section--solo .discount-label { margin-left: 0; }
.wrap-detailhai .price-section__save {
    display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700;
    color: #15803d; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 999px; padding: 4px 13px;
}
.wrap-detailhai .price-section__save i { font-size: 11px; }
@media (max-width: 576px) {
    .wrap-detailhai .price-section--solo { padding: 18px 20px 18px 20px; }
    .wrap-detailhai .price-section--solo .current-price { font-size: 26px; }
}
.wrap-detailhai .attr-row { display: flex; margin-bottom: 24px; align-items: flex-start; }
.wrap-detailhai .attr-label { width: 130px; color: #777; font-size: 14px; font-weight: 600; padding-top: 10px; }
.wrap-detailhai .attr-content { display: flex; flex-wrap: wrap; gap: 12px; flex: 1; }
.wrap-detailhai .brand-link { color: var(--theme-color); font-size: 16px; font-weight: 700; text-decoration: none; transition: all 0.2s; background: #fff5f8; padding: 6px 16px; border-radius: 20px; }
.wrap-detailhai .brand-link:hover { background: var(--theme-color); color: #fff; }
.wrap-detailhai .option-btn { position: relative; padding: 10px 24px; border: 1px solid #e8e8e8; border-radius: 8px; background: #fff; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; color: #444; }
.wrap-detailhai .option-btn:hover { border-color: var(--theme-color); color: var(--theme-color); background: #fff8fa; }
.wrap-detailhai .option-btn.active { border-color: var(--theme-color); color: var(--theme-color); background: #fff8fa; box-shadow: 0 0 0 1px var(--theme-color); }
.wrap-detailhai .option-btn.active::after { content: "\f00c"; font-family: "Font Awesome 6 Pro"; font-weight: 900; position: absolute; bottom: -1px; right: -1px; background: var(--theme-color); color: #fff; font-size: 10px; padding: 3px 5px; border-radius: 6px 0 6px 0; line-height: 1; }

/* Thuộc tính đã hết hàng — gạch chéo, không cho chọn */
.option-btn.inv-out,
.wrap-detailhai .option-btn.inv-out {
    position: relative;
    color: #b0b0b0 !important;
    background-color: #f7f7f7 !important;
    border-color: #e5e5e5 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    pointer-events: none;
    opacity: .8;
    background-image: linear-gradient(to top right, transparent calc(50% - 0.8px), #c9c9c9 calc(50% - 0.8px), #c9c9c9 calc(50% + 0.8px), transparent calc(50% + 0.8px)) !important;
}
.option-btn.inv-out::after,
.wrap-detailhai .option-btn.inv-out::after {
    display: none !important;
}

/* SP đơn giản đã hết hàng */
.shop-single-action.sp-soldout .btn-cart[disabled] {
    background: #f1f1f1;
    color: #9a9a9a;
    border: 1px solid #e2e2e2;
    cursor: not-allowed;
    width: 100%;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.wrap-detailhai .btn-quick-spec { background: none; border: none; color: var(--theme-color3); font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; padding: 0; transition: 0.2s; cursor: pointer; }
.wrap-detailhai .btn-quick-spec:hover { color: var(--theme-color4); text-decoration: underline; }
.wrap-detailhai .qty-input { display: flex; align-items: center; background: #fff; border: 1px solid #e8e8e8; border-radius: 8px; padding: 4px; width: fit-content; box-shadow: 0 2px 5px rgba(0,0,0,0.02); }
.wrap-detailhai .qty-btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: #f8f8f8; border-radius: 6px; border: none; cursor: pointer; color: #555; transition: 0.2s; }
.wrap-detailhai .qty-btn:hover { background: var(--theme-color); color: #fff; }
.wrap-detailhai .qty-val { width: 50px; background: transparent; border: none; text-align: center; font-weight: 700; font-size: 16px; outline: none; color: #2c2c2c; }
.wrap-detailhai .action-btns { display: flex; gap: 16px; }
.wrap-detailhai .btn-cart { padding: 16px 24px; border: 2px solid var(--theme-color); background: #fffafb; color: var(--theme-color); border-radius: 12px; font-weight: 700; font-size: 15px; flex: 1; transition: all 0.3s; display: flex; align-items: center; justify-content: center; gap: 10px; }
.wrap-detailhai .btn-cart:hover { background: var(--theme-color); color: #fff; box-shadow: 0 8px 20px rgba(255, 77, 141, 0.2); }
.wrap-detailhai .btn-buy { padding: 16px 40px; background: linear-gradient(135deg, var(--theme-color), var(--theme-color2)); color: #fff; border: none; border-radius: 12px; font-weight: 700; font-size: 16px; flex: 1.5; transition: all 0.3s; box-shadow: 0 8px 20px rgba(230, 69, 126, 0.25); }
.wrap-detailhai .btn-buy:hover { transform: translateY(-2px); box-shadow: 0 12px 25px rgba(230, 69, 126, 0.35); }
.wrap-detailhai .trust-badges { color: #555; }
.wrap-detailhai .modal-custom-product { max-width: 1050px; }
.wrap-detailhai .modal-content { border-radius: 20px; border: none; overflow: hidden; box-shadow: 0 30px 60px rgba(0,0,0,0.15); }
.wrap-detailhai .modal-close-shopee { position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer; z-index: 1000; transition: 0.3s; box-shadow: 0 5px 15px rgba(0,0,0,0.08); color: #555; }
.wrap-detailhai .modal-close-shopee:hover { background: var(--theme-color); color: #fff; transform: rotate(90deg); }
.wrap-detailhai .modal-left-view { background: #fcfcfc; padding: 30px; display: flex; align-items: center; justify-content: center; min-height: 550px; position: relative; border-right: 1px solid #f0f0f0; }
.wrap-detailhai .modal-main-img { max-width: 100%; height: auto; border-radius: 12px; }
.wrap-detailhai .modal-main-video-wrapper { width: 100%; height: 550px; display: flex; align-items: center; justify-content: center; }
.wrap-detailhai .modal-main-video-wrapper video, .wrap-detailhai .modal-main-video-wrapper iframe, .wrap-detailhai .modal-main-video-wrapper .plyr { max-width: 100%; max-height: 100%; width: 100%; height: 100%; object-fit: contain; border-radius: 12px; outline: none; }
.wrap-detailhai .modal-right-info { padding: 40px 30px; background: #fff; }
.wrap-detailhai .modal-nav-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 45px; height: 45px; background: #fff; border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; color: #444; cursor: pointer; z-index: 10; box-shadow: 0 4px 15px rgba(0,0,0,0.08); transition: all 0.3s; }
.wrap-detailhai .modal-nav-btn:hover { background: var(--theme-color); color: #fff; }
.wrap-detailhai .modal-prev { left: 20px; }
.wrap-detailhai .modal-next { right: 20px; }
.wrap-detailhai .modal-thumb-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 20px; max-height: 320px; overflow-y: auto; padding-right: 10px; scroll-behavior: smooth; }
.wrap-detailhai .modal-thumb-item { aspect-ratio: 1/1; border-radius: 10px; overflow: hidden; border: 2px solid transparent; cursor: pointer; transition: all 0.3s ease; position: relative; background: #fafafa; }
.wrap-detailhai .modal-thumb-item img { width: 100%; height: 100%; object-fit: cover; }
.wrap-detailhai .modal-thumb-item.active { border-color: var(--theme-color); box-shadow: 0 4px 10px rgba(255, 77, 141, 0.2); }
.wrap-detailhai .modal-thumb-grid::-webkit-scrollbar { width: 6px; }
.wrap-detailhai .bg-lbpt { background-color: var(--theme-color); }
.wrap-detailhai .numberprice { font-weight: 800; font-size: 22px; color: var(--theme-color); }
.wrap-detailhai .modal-thumb-grid::-webkit-scrollbar-track { background: #f5f5f5; border-radius: 10px; }
.wrap-detailhai .modal-thumb-grid::-webkit-scrollbar-thumb { background: #dcdcdc; border-radius: 10px; }
.wrap-detailhai .modal-thumb-grid::-webkit-scrollbar-thumb:hover { background: var(--theme-color); }
.wrap-detailhai .modal-info-box { margin-top: 30px; padding: 24px; background: #fff8fa; border-radius: 16px; border: 1px dashed rgba(255, 77, 141, 0.2); }
.wrap-detailhai #specsModal .modal-content, .wrap-detailhai #sizeGuideModal .modal-content { border-radius: 20px; padding: 10px; }
.wrap-detailhai #specsModal .modal-header, .wrap-detailhai #sizeGuideModal .modal-header { border-bottom: none; padding: 24px 24px 10px 24px; }
.wrap-detailhai #specsModal .modal-title, .wrap-detailhai #sizeGuideModal .modal-title { font-size: 20px; font-weight: 700; color: #1a1a1a; }
.wrap-detailhai #specsModal .btn-close, .wrap-detailhai #sizeGuideModal .btn-close { background-size: 12px; opacity: 0.5; transition: 0.2s; }
.wrap-detailhai #specsModal .btn-close:hover, .wrap-detailhai #sizeGuideModal .btn-close:hover { opacity: 1; transform: rotate(90deg); }
.wrap-detailhai #specsModal .modal-body, .wrap-detailhai #sizeGuideModal .modal-body { padding: 10px 24px 24px 24px; }
.wrap-detailhai .spec-table-clean { width: 100%; }
.wrap-detailhai .spec-table-clean td { padding: 14px 0; font-size: 14px; vertical-align: top; border-bottom: 1px dashed #eee; }
.wrap-detailhai .spec-table-clean tr:last-child td { border-bottom: none; }
.wrap-detailhai .spec-table-clean .spec-label { width: 35%; color: #777; font-weight: 600; padding-right: 15px; }
.wrap-detailhai .spec-table-clean .spec-value { color: #2c2c2c; font-weight: 500; line-height: 1.6; }
@keyframes slideInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
.wrap-detailhai .animate-entry { animation: slideInUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.modal.fade .modal-dialog { transform: scale(0.95); transition: transform 0.3s ease-out; }
.modal.show .modal-dialog { transform: scale(1); }

@media (max-width: 991px) {
    .wrap-detailhai .container-product { padding: 20px; }
    .wrap-detailhai .product-title { font-size: 24px; }
}

@media (max-width: 768px) {
    .wrap-detailhai { padding: 15px 0; }
    .wrap-detailhai .container-product { padding: 15px; border-radius: 16px; }
    .wrap-detailhai .swiper-main { height: 380px; }
    .wrap-detailhai .modal-left-view { min-height: 350px; padding: 15px; border-right: none; border-bottom: 1px solid #eee; }
    .wrap-detailhai .modal-nav-btn { width: 36px; height: 36px; font-size: 14px; }
    .wrap-detailhai .modal-prev { left: 10px; }
    .wrap-detailhai .modal-next { right: 10px; }
    .wrap-detailhai .product-title { font-size: 20px; margin-top: 15px; }
    .wrap-detailhai .stats-row { gap: 12px; flex-wrap: wrap; margin-bottom: 15px; }
    .wrap-detailhai .flash-sale-title { font-size: 15px; }
    .wrap-detailhai .flash-sale-banner { padding: 10px 15px; }
    .wrap-detailhai .price-section { padding: 15px; flex-wrap: wrap; gap: 8px; }
    .wrap-detailhai .current-price { font-size: 26px; }
    .wrap-detailhai .old-price { font-size: 15px; }
    .wrap-detailhai .discount-label { margin-left: 0; font-size: 11px; padding: 3px 8px; }
    .wrap-detailhai .attr-row { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 15px; }
    .wrap-detailhai .attr-label { width: 100%; font-size: 13px; padding-top: 0; }
    .wrap-detailhai .option-btn { padding: 8px 16px; font-size: 13px; }
    .wrap-detailhai .action-btns { flex-direction: column; gap: 12px; margin-top: 20px; }
    .wrap-detailhai .btn-cart, .wrap-detailhai .btn-buy { padding: 14px; width: 100%; font-size: 15px; }
    .wrap-detailhai .countdown-label { display: none; }
    .wrap-detailhai .modal-thumb-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; max-height: 220px; }
    .wrap-detailhai .modal-main-video-wrapper { height: 350px; }
    .wrap-detailhai .swiper-thumbs { height: auto; padding: 5px; margin-top: 12px; }
}

/* ===== wrap-detailhai — dọn tông HỒNG còn sót của template, đưa về ROOT (--theme-color* xanh) ===== */
.wrap-detailhai .container-product{
    border:1px solid #edf0f4;
    box-shadow:0 24px 60px -28px rgba(15,23,42,.12);
    border-radius:22px;
}
.wrap-detailhai .swiper-main{ background:#f6f7f9; border:1px solid #edf0f4; border-radius:18px; }
.wrap-detailhai .swiper-thumbs .swiper-slide{ background:#f6f7f9; border-radius:12px; }
.wrap-detailhai .swiper-thumbs .swiper-slide-thumb-active{
    border-color:var(--theme-color);
    box-shadow:0 8px 16px -8px var(--theme-color);
}
.wrap-detailhai .product-title{ color:#0f172a; font-weight:800; letter-spacing:-.3px; }
.wrap-detailhai .stats-row{ border-bottom:1px dashed #e6e9ee; }
.wrap-detailhai .rating-box{ background:var(--theme-color5); border:1px solid transparent; }
.wrap-detailhai .price-section{
    background:linear-gradient(180deg,var(--theme-color5),#fff 70%);
    border:1px solid var(--theme-color5); border-top:none; border-radius:0 0 14px 14px;
}
/* Thẻ giá độc lập (không Flash Sale) PHẢI ghi đè lại các dòng trên — nếu không toàn thẻ bị nhuộm
   xanh theo theme-color5 + bo góc phẳng lại (đã gặp lỗi này, nhìn xấu/lệch như ảnh chủ shop gửi). */
.wrap-detailhai .price-section--solo{
    background:#fff; border:1px solid #edf0f5; border-radius:16px;
}
.wrap-detailhai .current-price{ color:var(--theme-color); }
.wrap-detailhai .discount-label{
    background:var(--theme-color2);
    box-shadow:0 6px 14px -6px var(--theme-color2);
}
.wrap-detailhai .brand-link{ background:var(--theme-color5); }
.wrap-detailhai .brand-link:hover{ background:var(--theme-color); color:#fff; }

/* Nhãn + nút thuộc tính */
.wrap-detailhai .attr-label{ color:#64748b; font-weight:700; }
.wrap-detailhai .option-btn{ border:1px solid #e2e5ea; border-radius:10px; color:#475467; padding:9px 20px; transition:all .18s ease; }
.wrap-detailhai .option-btn:hover{ border-color:var(--theme-color); color:var(--theme-color); background:var(--theme-color5); }
.wrap-detailhai .option-btn.active{
    border-color:var(--theme-color); color:var(--theme-color); background:var(--theme-color5);
    box-shadow:0 0 0 1px var(--theme-color) inset;
}

/* Số lượng + nút hành động */
.wrap-detailhai .qty-input{ border:1px solid #e6e9ee; border-radius:10px; box-shadow:none; }
.wrap-detailhai .qty-btn{ background:#f4f6f8; border-radius:8px; }
.wrap-detailhai .btn-cart{ background:var(--theme-color5); border-radius:12px; }
.wrap-detailhai .btn-cart:hover{ box-shadow:0 12px 24px -12px var(--theme-color); }
.wrap-detailhai .btn-buy{ box-shadow:0 12px 26px -12px var(--theme-color); }
.wrap-detailhai .btn-buy:hover{ transform:translateY(-2px); box-shadow:0 18px 34px -14px var(--theme-color); }

/* Modal xem nhanh + thông số */
.wrap-detailhai .modal-thumb-item.active{ border-color:var(--theme-color); box-shadow:0 8px 16px -8px var(--theme-color); }
.wrap-detailhai .modal-info-box{ background:var(--theme-color5); border:1px dashed var(--theme-color); }
.wrap-detailhai .share-action-wrap{ background:#f6f7f9; border:1px solid #edf0f4; }

/* Nhãn tồn kho — SP đơn: hiện luôn; SP có biến thể: ẩn tới khi khách chọn xong phân loại */
.wrap-detailhai .inv-stock-badge{ display:inline-flex; }
.wrap-detailhai .inv-stock-badge[data-hasvar]{ display:none; }
.wrap-detailhai .inv-stock-badge[data-hasvar].is-shown{ display:inline-flex; }

.sp-gift-front { background: #fffafa; border: 1px dashed var(--theme-color); border-radius: 8px; overflow: hidden; }
.gift-front-header { background: var(--theme-color5); color: var(--theme-color); font-weight: bold; font-size: 15px; padding: 10px 15px; text-transform: uppercase; }
.gift-front-header i { margin-right: 8px; }
.gift-front-body { padding: 15px; }
.gift-front-list { list-style: none; padding: 0; margin: 0; }
.gift-front-item { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px dashed #fca5a5; }
.gift-front-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.gift-thumb { width: 45px; height: 45px; border-radius: 6px; overflow: hidden; border: 1px solid var(--theme-color5); }
.gift-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gift-title-link { color: #334155; font-size: 14px; font-weight: 600; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gift-title-link:hover { color: var(--theme-color); }
.gift-note { font-size: 12px; color: #94a3b8; margin-top: 3px; line-height: 1.4; }
.gift-note-inline { color: #94a3b8; margin-left: 4px; cursor: help; }
.gift-note--warn { color: #b45309; font-weight: 600; }
.gift-capped-tag { font-size: 10.5px; font-weight: 700; color: #b45309; background: #fef3c7; border-radius: 999px; padding: 1px 8px; margin-left: 6px; white-space: nowrap; }

.premium-specs-card { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.02); }
.nav-tabs-wrapper { position: relative; margin-bottom: 24px; display: flex; align-items: center; }

.nav-arrow { background: #fff; border: 1px solid #e2e8f0; border-radius: 50%; width: 36px; height: 36px; display: none; align-items: center; justify-content: center; color: #64748b; font-size: 14px; cursor: pointer; z-index: 100; position: absolute; top: 50%; transform: translateY(-50%); box-shadow: 0 4px 12px rgba(0,0,0,0.05); transition: color 0.3s, border-color 0.3s; outline: none; }
.nav-arrow:hover { color: var(--theme-color); border-color: var(--theme-color); }
.nav-arrow-left { left: -10px; }
.nav-arrow-right { right: -10px; }
.specs-nav-wrapper { position: sticky; top: 0px; z-index: 99; background: #ffffff; border-bottom: 1px solid #e5e7eb; padding-top: 15px; overflow-x: auto !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; width: 100%; transition: padding 0.3s ease; }
.specs-nav-wrapper::-webkit-scrollbar { display: none; }
.specs-nav-wrapper.is-stuck { box-shadow: 0 4px 10px rgba(0,0,0,0.03); }
.specs-nav-list { display: flex; flex-wrap: nowrap !important; white-space: nowrap; list-style: none; padding: 0 20px 0 0; margin: 0; gap: 25px; }
.specs-nav-item { flex-shrink: 0; font-size: 15px; color: #6b7280; padding: 0 0 12px 0; cursor: pointer; font-weight: 500; position: relative; transition: 0.3s; }
.specs-nav-item:hover { color: var(--theme-color); }
.specs-nav-item.active { color: var(--theme-color); font-weight: 600; }
.specs-nav-item.active::after { content: ""; position: absolute; bottom: -1px; left: 0; width: 100%; height: 2px; background-color: var(--theme-color); }
.specs-group { margin-bottom: 30px; }
.specs-group:last-child { margin-bottom: 0; }
.specs-group-title { font-size: 16px; font-weight: 700; color: #374151; margin-bottom: 12px; }
.specs-table-container { border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; }
.specs-table { width: 100%; border-collapse: collapse; margin: 0; }
.specs-table tr { border-bottom: 1px solid #e5e7eb; }
.specs-table tr:last-child { border-bottom: none; }
.specs-table td { padding: 12px 15px; font-size: 14px; vertical-align: top; line-height: 1.5; }
.specs-table td.specs-name { width: 30%; background-color: #f3f4f6; color: #4b5563; font-weight: 500; border-right: 1px solid #e5e7eb; }
.specs-table td.specs-value { width: 70%; background-color: #ffffff; color: #1f2937; }
.specs-content-limit { position: relative; max-height: 400px; overflow: hidden; transition: max-height 0.5s ease-in-out; }
.specs-content-limit.expanded { max-height: 8000px; }
.specs-fade-overlay { position: absolute; bottom: 0; left: 0; width: 100%; height: 100px; background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1) 90%); pointer-events: none; transition: opacity 0.3s; }
.specs-content-limit.expanded .specs-fade-overlay { opacity: 0; }
.btn-specs-toggle { background-color: #fff; color: var(--theme-color); border: 1px solid var(--theme-color); font-weight: 600; padding: 8px 24px; border-radius: 6px; transition: 0.3s; cursor: pointer; outline: none; }
.btn-specs-toggle:hover { background-color: var(--theme-color5); color: var(--theme-color); }

@media (max-width: 768px) {
    .specs-nav-wrapper { top: 60px; } 
    .specs-nav-item { font-size: 14px; gap: 15px; }
    .specs-table td.specs-name { width: 40%; }
    .specs-table td.specs-value { width: 60%; }
    .nav-arrow { display: none !important; }
    .nav-tabs-wrapper.has-arrows .specs-nav-wrapper { padding: 0; }
}

/* ====================== binhluan.css ====================== */
.wrapbinhluan { color: #374151;font-size: 15px; line-height: 1.6; background-color: transparent; }
.wrapbinhluan .titleyk { font-weight: 700 !important; font-size: 1.35rem; color: #111827; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 1.5rem; }
.wrapbinhluan h2.section-title, .wrapbinhluan .section-title { color: #111827; font-weight: 800; font-size: 1.7rem; letter-spacing: -0.5px; margin-bottom: 0.5rem; }
.wrapbinhluan .section-subtitle { color: #6b7280; font-size: 1rem; }
.wrapbinhluan .text-primary { color: var(--theme-color) !important; }
.wrapbinhluan .bg-primary { background-color: var(--theme-color) !important; }
.wrapbinhluan .text-warning { color: #fbbf24 !important; }
.wrapbinhluan .star-rating-input { font-size: 1.8rem !important; display: flex; align-items: center; gap: 6px; }
.wrapbinhluan .star-rating-input i { color: #e5e7eb; transition: all 0.3s ease; }
.wrapbinhluan .star-rating-input i.text-warning { color: #fbbf24 !important; }
.wrapbinhluan .star-rating-input i:hover { transform: scale(1.15); }
.wrapbinhluan .stats-card, .wrapbinhluan .gallery-widget-card { background: #ffffff; padding: 32px; border-radius: 16px; border: 1px solid #f3f4f6; box-shadow: 0 4px 20px rgba(0,0,0,0.03); height: 100%; transition: all 0.3s ease; }
.wrapbinhluan .stats-card:hover, .wrapbinhluan .gallery-widget-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,0.06); }
.wrapbinhluan .rating-big { font-size: 4.5rem; font-weight: 700; color: #111827; line-height: 1; letter-spacing: -1px; }
.wrapbinhluan .rating-bar-row { display: flex; align-items: center; margin-bottom: 12px; }
.wrapbinhluan .star-label { min-width: 50px; font-weight: 600; font-size: 0.9rem; color: #4b5563; display: flex; align-items: center; gap: 4px; }
.wrapbinhluan .custom-progress { height: 6px; background-color: #f3f4f6; border-radius: 100px; flex-grow: 1; margin: 0 16px; overflow: hidden; }
.wrapbinhluan .progress-bar { background: var(--theme-color); border-radius: 100px; }
.wrapbinhluan .filter-chip { background: #ffffff; border: 1px solid #e5e7eb; color: #4b5563; padding: 10px 24px; border-radius: 50px; font-weight: 500; font-size: 0.95rem; transition: all 0.3s ease; cursor: pointer; margin-bottom: 12px; box-shadow: 0 2px 4px rgba(0,0,0,0.02); }
.wrapbinhluan .filter-chip:hover { border-color: var(--theme-color); color: var(--theme-color); transform: translateY(-2px); box-shadow: 0 6px 12px var(--theme-color5); }
.wrapbinhluan .filter-chip.active { background: var(--theme-color); color: #ffffff; border-color: var(--theme-color); box-shadow: 0 6px 15px var(--theme-color5); }
.wrapbinhluan .review-card { background: #ffffff; border: 1px solid #f3f4f6; border-radius: 16px; padding: 32px; margin-bottom: 24px; box-shadow: 0 4px 20px rgba(0,0,0,0.02); transition: all 0.3s ease; }
.wrapbinhluan .review-card:hover { border-color: #e5e7eb; box-shadow: 0 10px 30px rgba(0,0,0,0.05); transform: translateY(-2px); }
.wrapbinhluan .avatar { width: 56px; height: 56px; font-size: 1.2rem; font-weight: 600; background: #f3f4f6; color: var(--theme-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid #ffffff; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.wrapbinhluan .titlename { font-size: 1.1rem; color: #111827; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.wrapbinhluan .titlename .fa-circle-check { color: #10b981; font-size: 1rem; }
.wrapbinhluan .review-card small.text-muted { font-size: 0.85rem; color: #9ca3af !important; font-weight: 500; }
.wrapbinhluan .fa-star.text-warning { color: #fbbf24 !important; }
.wrapbinhluan .review-body { color: #374151; font-size: 1rem; line-height: 1.8; margin-top: 16px; }
.wrapbinhluan .gallery-group .media-thumb { width: 90px; height: 90px; border-radius: 12px; border: none; cursor: pointer; transition: all 0.3s ease; overflow: hidden; position: relative; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.wrapbinhluan .gallery-group .media-thumb::after { content: ''; position: absolute; inset: 0; background: #111827; opacity: 0; transition: opacity 0.3s ease; }
.wrapbinhluan .gallery-group .media-thumb:hover { transform: scale(1.05); box-shadow: 0 8px 20px rgba(0,0,0,0.1); }
.wrapbinhluan .gallery-group .media-thumb:hover::after { opacity: 0.15; }
.wrapbinhluan .review-actions { border-top: 1px solid #f3f4f6; padding-top: 16px; margin-top: 24px; display: flex; gap: 16px; }
.wrapbinhluan .action-like, .wrapbinhluan .reply-trigger { background: #f9fafb; color: #4b5563; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 50px; }
.wrapbinhluan .action-like:hover, .wrapbinhluan .reply-trigger:hover { background: var(--theme-color5); color: var(--theme-color) !important; }
.wrapbinhluan .action-like.liked { color: #ffffff !important; background: var(--theme-color); }
.wrapbinhluan .replies-wrapper { margin-top: 24px; }
.wrapbinhluan .threaded-border { border-left: 2px solid #e5e7eb !important; margin-left: 28px; padding-left: 24px; }
.wrapbinhluan .item-reply { background: transparent !important; border: none !important; border-radius: 0 !important; padding: 16px 0 !important; margin-bottom: 0 !important; box-shadow: none !important; border-bottom: 1px solid #f3f4f6 !important; }
.wrapbinhluan .item-reply:last-child { border-bottom: none !important; }
.wrapbinhluan .item-reply.ms-4 { margin-left: 0 !important; padding-left: 20px !important; background: #f9fafb !important; border-left: 3px solid var(--theme-color) !important; border-radius: 0 12px 12px 0 !important; margin-top: 12px !important; border-bottom: none !important; }
.wrapbinhluan .item-reply strong.text-dark { color: #111827 !important; font-size: 0.95rem; font-weight: 700; }
.wrapbinhluan .item-reply small.text-muted { font-size: 0.8rem; color: #9ca3af !important; font-weight: 500; }
.wrapbinhluan .item-reply .badge.bg-primary { background: #111827 !important; color: #ffffff; padding: 4px 10px; border-radius: 50px; font-weight: 600; font-size: 0.7rem; margin-left: 8px; letter-spacing: 0.5px; text-transform: uppercase; }
.wrapbinhluan .item-reply .text-secondary { color: #4b5563 !important; font-size: 0.95rem !important; margin-top: 8px; display: block; line-height: 1.6; }
.wrapbinhluan .item-reply b.text-primary { color: var(--theme-color) !important; font-weight: 600; margin-right: 4px; }
.wrapbinhluan .reply-child-trigger { color: #6b7280 !important; font-weight: 600; font-size: 0.85rem; cursor: pointer; display: inline-flex; align-items: center; margin-top: 12px; transition: all 0.3s ease; }
.wrapbinhluan .reply-child-trigger:hover { color: var(--theme-color) !important; }
.wrapbinhluan .btn-load-more-replies { color: var(--theme-color); padding: 8px 20px; font-size: 0.9rem; font-weight: 600; background: var(--theme-color5); border: none; border-radius: 50px; margin-top: 12px; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 8px; }
.wrapbinhluan .btn-load-more-replies:hover { background: var(--theme-color); color: #ffffff; transform: translateY(-2px); box-shadow: 0 6px 15px var(--theme-color5); }
.wrapbinhluan .reply-input-wrapper { margin-top: 20px; }
.wrapbinhluan .reply-input-wrapper .card { background: #f9fafb !important; border: 1px solid #f3f4f6 !important; padding: 24px !important; border-radius: 16px; box-shadow: none !important; }
.wrapbinhluan .reply-input-wrapper input, .wrapbinhluan .reply-input-wrapper textarea { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 14px 18px; font-size: 0.95rem; color: #111827; margin-bottom: 16px; transition: all 0.3s ease; box-shadow: 0 2px 4px rgba(0,0,0,0.02); }
.wrapbinhluan .reply-input-wrapper input:focus, .wrapbinhluan .reply-input-wrapper textarea:focus { background: #ffffff; border-color: var(--theme-color); outline: none; box-shadow: 0 0 0 4px var(--theme-color5); }
.wrapbinhluan .reply-input-wrapper .btn-primary { background: var(--theme-color); border: none; border-radius: 50px; padding: 12px 32px; font-weight: 600; font-size: 0.95rem; transition: all 0.3s ease; color: #ffffff; }
.wrapbinhluan .reply-input-wrapper .btn-primary:hover { background: var(--theme-color2); transform: translateY(-2px); box-shadow: 0 8px 20px var(--theme-color5); }
.wrapbinhluan .review-form-wrapper .card { border: 1px solid #f3f4f6 !important; border-radius: 20px; box-shadow: 0 10px 40px rgba(0,0,0,0.04) !important; background: #ffffff; padding: 40px !important; }
.wrapbinhluan .form-control { background-color: #f9fafb; border: 1px solid #e5e7eb; padding: 16px 20px; border-radius: 12px; transition: all 0.3s ease; font-size: 1rem; color: #111827; }
.wrapbinhluan .form-control:focus { background-color: #ffffff; border-color: var(--theme-color); box-shadow: 0 0 0 4px var(--theme-color5); }
.wrapbinhluan .upload-area { border: 2px dashed #cbd5e1; background-color: #f9fafb; border-radius: 16px; padding: 40px 20px; text-align: center; cursor: pointer; transition: all 0.3s ease; }
.wrapbinhluan .upload-area:hover, .wrapbinhluan .upload-area.dragover { border-color: var(--theme-color); background-color: var(--theme-color5); }
.wrapbinhluan .upload-trigger i { color: #9ca3af; font-size: 3rem; transition: all 0.3s ease; margin-bottom: 16px; }
.wrapbinhluan .upload-area:hover .upload-trigger i { color: var(--theme-color); transform: translateY(-4px); }
.wrapbinhluan .upload-trigger p { color: #4b5563; font-weight: 500; font-size: 1.05rem; }
.wrapbinhluan .btn-primary-custom { background: var(--theme-color); color: #ffffff; border: none; padding: 16px 40px; border-radius: 50px; font-weight: 600; font-size: 1.05rem; transition: all 0.3s ease; box-shadow: 0 8px 20px var(--theme-color5); display: inline-flex; align-items: center; justify-content: center; }
.wrapbinhluan .btn-primary-custom:hover { transform: translateY(-3px); box-shadow: 0 12px 25px rgba(255, 77, 141, 0.4); color: #ffffff; }
.wrapbinhluan .btn-loadmore { border: 1px solid #e5e7eb; color: #374151; padding: 14px 44px; border-radius: 50px; font-weight: 600; font-size: 1.05rem; background: #ffffff; transition: all 0.3s ease; box-shadow: 0 4px 10px rgba(0,0,0,0.02); }
.wrapbinhluan .btn-loadmore:hover { border-color: var(--theme-color); color: #ffffff; background: var(--theme-color); box-shadow: 0 8px 25px var(--theme-color5); transform: translateY(-2px); }
.wrapbinhluan .gallery-title { font-weight: 700; font-size: 1.15rem; color: #111827; margin-bottom: 24px; letter-spacing: 0.5px; }
.wrapbinhluan .media-swiper { padding-bottom: 50px !important; margin: 0 -5px; padding-left: 5px; padding-right: 5px; }
.wrapbinhluan .media-item-wrap { border-radius: 16px; overflow: hidden; position: relative; aspect-ratio: 1/1; cursor: pointer; border: none; background: #ffffff; box-shadow: 0 4px 15px rgba(0,0,0,0.06); transition: all 0.4s ease; }
.wrapbinhluan .media-item-wrap img, .wrapbinhluan .media-item-wrap video { width: 100%; height: 100%; object-fit: cover; transition: all 0.5s ease; }
.wrapbinhluan .media-item-wrap:hover { transform: translateY(-6px); box-shadow: 0 12px 30px rgba(0,0,0,0.12); }
.wrapbinhluan .media-item-wrap:hover img { transform: scale(1.1); }
.wrapbinhluan .video-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; background: rgba(255, 255, 255, 0.9); border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #111827; z-index: 10; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0,0,0,0.15); }
.wrapbinhluan .media-item-wrap:hover .video-overlay { background: var(--theme-color); color: #ffffff; transform: translate(-50%, -50%) scale(1.1); box-shadow: 0 8px 20px var(--theme-color5); }
.wrapbinhluan .swiper-container-wrapper { position: relative; }
.wrapbinhluan .gallery-nav-btn { color: #111827; background: #ffffff; width: 44px; height: 44px; border-radius: 50%; box-shadow: 0 4px 15px rgba(0,0,0,0.08); margin-top: -22px; transition: all 0.3s ease; border: 1px solid #f3f4f6; }
.wrapbinhluan .gallery-nav-btn:hover { background: var(--theme-color); color: #ffffff; border-color: var(--theme-color); transform: scale(1.1); }
.wrapbinhluan .gallery-nav-btn::after { font-size: 16px; font-weight: 700; }
.wrapbinhluan .swiper-button-next.gallery-nav-btn { right: -12px; }
.wrapbinhluan .swiper-button-prev.gallery-nav-btn { left: -12px; }
.wrapbinhluan .gallery-pagination { bottom: 0 !important; }
.wrapbinhluan .swiper-pagination-bullet { width: 8px; height: 8px; background: #cbd5e1; opacity: 1; margin: 0 6px !important; transition: all 0.3s ease; border-radius: 50px; }
.wrapbinhluan .swiper-pagination-bullet-active { background: var(--theme-color); width: 24px; border-radius: 50px; }
@media (max-width: 768px) {
    .wrapbinhluan .rating-big { font-size: 3.5rem; }
    .wrapbinhluan .stats-card, .wrapbinhluan .gallery-widget-card, .wrapbinhluan .review-card { padding: 24px; border-radius: 16px; }
    .wrapbinhluan .avatar { width: 48px; height: 48px; font-size: 1.1rem; }
    .wrapbinhluan .threaded-border { margin-left: 0; padding-left: 0; border-left: none !important; }
    .wrapbinhluan .item-reply { padding: 16px 0 !important; }
    .wrapbinhluan .item-reply.ms-4 { margin-left: 0 !important; padding-left: 16px !important; border-left: 2px solid var(--theme-color) !important; background: #f9fafb !important; }
}
@media (max-width: 576px) {
    .wrapbinhluan .titleyk { font-size: 1.2rem; }
    .wrapbinhluan h2.section-title { font-size: 1.4rem; }
    .wrapbinhluan .gallery-group .media-thumb { width: 75px; height: 75px; }
    .wrapbinhluan .filter-chip { flex: 1 1 auto; text-align: center; padding: 10px 16px; font-size: 0.9rem; }
    .wrapbinhluan .btn-primary-custom { width: 100%; font-size: 1rem; }
    .wrapbinhluan .action-like, .wrapbinhluan .reply-trigger { padding: 8px 16px; font-size: 0.85rem; flex: 1; justify-content: center; }
    .wrapbinhluan .review-actions { flex-wrap: wrap; gap: 12px; }
    .wrapbinhluan .swiper-button-next.gallery-nav-btn, .wrapbinhluan .swiper-button-prev.gallery-nav-btn { display: none !important; }
}
/* ====================== google-translate (ẩn control) ====================== */
/* Chỉ dùng combo ẩn (.goog-te-combo) để đổi ngôn ngữ — giấu toàn bộ UI của Google. */
.skiptranslate,
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
iframe.skiptranslate,
.goog-te-gadget-icon,
.goog-te-balloon-frame,
#goog-gt-tt,
.goog-tooltip,
.goog-tooltip:hover,
.jfk-bubble,
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf,
.VIpgJd-ZVi9od-ORHb-OEVmcd { display: none !important; visibility: hidden !important; }

/* Google chèn thanh trên đẩy trang xuống ~40px — ép về 0 */
body { top: 0 !important; }
html.translated-ltr body,
html.translated-rtl body { top: 0 !important; position: static !important; }

/* Ô highlight vàng + bóng quanh chữ đã dịch */
font { background-color: transparent !important; box-shadow: none !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }

/* Gadget "Powered by Google" — giấu chữ nhưng vẫn để combo hoạt động */
.goog-te-gadget { font-size: 0 !important; height: 0; overflow: hidden; }
.goog-te-gadget .goog-te-combo { display: none !important; }
#google_translate_element { display: none !important; }

/* ====================== auth pages (.wrapdk — đăng nhập / đăng ký / lấy lại mật khẩu) ====================== */
.wrapdk { position: relative; display: flex; align-items: center; justify-content: center; padding: 56px 20px 72px; overflow: hidden; background: #f6f8fb; }
.wrapdk.over { overflow: hidden; }
.wrapdk .circle-deco { position: absolute; border-radius: 50%; z-index: 0; filter: blur(90px); pointer-events: none; }
.wrapdk .circle-1 { width: 420px; height: 420px; background: var(--theme-color5, rgba(39,174,96,.18)); top: -120px; right: -110px; }
.wrapdk .circle-2 { width: 320px; height: 320px; background: rgba(99,102,241,.10); bottom: -90px; left: -90px; }

.wrapdk .auth-container { position: relative; z-index: 1; width: 100%; max-width: 1060px; }
.wrapdk .auth-card { display: flex; background: #fff; border-radius: 28px; overflow: hidden; box-shadow: 0 40px 80px -32px rgba(15,23,42,.28), 0 0 0 1px rgba(15,23,42,.04); }

/* cột trái — thương hiệu */
.wrapdk .auth-info-side { position: relative; width: 42%; padding: 56px 52px; color: #fff; overflow: hidden; background: linear-gradient(150deg, var(--theme-color, #27AE60) 0%, var(--theme-color2, #2ECC71) 100%); display: flex; flex-direction: column; justify-content: center; }
.wrapdk .auth-info-side::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.16) 1.2px, transparent 1.3px); background-size: 22px 22px; opacity: .5; pointer-events: none; }
.wrapdk .auth-info-side > * { position: relative; z-index: 1; }
.wrapdk .auth-info-side h1 { font-weight: 800; letter-spacing: -.02em; }
.wrapdk .auth-info-side .fa-3x { opacity: .92; }
.wrapdk .auth-info-side .d-flex span { font-weight: 500; opacity: .95; }

/* cột phải — form */
.wrapdk .auth-form-side { width: 58%; padding: 56px 56px 48px; }
.wrapdk .auth-form-side h2 { font-weight: 800; font-size: 1.9rem; letter-spacing: -.02em; color: #0f172a; margin: 0 0 6px; }
.wrapdk .subtitle { color: #64748b; margin-bottom: 28px; font-size: .96rem; }

.wrapdk .input-group-custom { margin-bottom: 18px; }
.wrapdk .form-label { display: block; font-weight: 600; font-size: .82rem; color: #334155; margin-bottom: 7px; }
.wrapdk .form-control { width: 100%; height: 54px; background: #f1f5f9; border: 2px solid transparent; border-radius: 14px; padding: 12px 18px; font-size: .95rem; font-weight: 500; color: #0f172a; transition: border-color .2s, background .2s, box-shadow .2s; }
.wrapdk .form-control::placeholder { color: #94a3b8; font-weight: 400; }
.wrapdk .form-control:focus { background: #fff; border-color: var(--theme-color, #27AE60); box-shadow: 0 0 0 4px var(--theme-color5, rgba(39,174,96,.15)); outline: none; }
.wrapdk .form-control.is-invalid { border-color: #ef4444; background: #fef2f2; }
.wrapdk .invalid-feedback { display: none; font-size: .8rem; color: #ef4444; margin-top: 6px; }
.wrapdk .form-control.is-invalid ~ .invalid-feedback, .wrapdk .was-validated .form-control:invalid ~ .invalid-feedback { display: block; }

.wrapdk .password-wrapper { position: relative; }
.wrapdk .password-wrapper .form-control { padding-right: 46px; }
.wrapdk .toggle-password { position: absolute; right: 14px; top: 27px; transform: translateY(-50%); cursor: pointer; color: #94a3b8; padding: 6px; transition: color .2s; z-index: 2; }
.wrapdk .toggle-password:hover { color: var(--theme-color, #27AE60); }

.wrapdk .form-check-input { width: 18px; height: 18px; margin-top: .12rem; border-radius: 6px; border: 2px solid #cbd5e1; cursor: pointer; }
.wrapdk .form-check-input:checked { background-color: var(--theme-color, #27AE60); border-color: var(--theme-color, #27AE60); }
.wrapdk .form-check-input:focus { box-shadow: 0 0 0 3px var(--theme-color5, rgba(39,174,96,.15)); border-color: var(--theme-color, #27AE60); }
.wrapdk .form-check-label { font-weight: 500; color: #64748b; cursor: pointer; }

.wrapdk .btn-register { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 54px; border: 0; border-radius: 14px; cursor: pointer; background: var(--theme-color, #27AE60); color: #fff; font-weight: 700; font-size: 1rem; box-shadow: 0 14px 26px -10px var(--theme-color5, rgba(39,174,96,.6)); transition: transform .18s ease, box-shadow .2s ease, background .2s ease; }
.wrapdk .btn-register:hover { background: var(--theme-color2, #2ECC71); transform: translateY(-2px); box-shadow: 0 18px 30px -10px var(--theme-color5, rgba(39,174,96,.7)); color: #fff; }
.wrapdk .btn-register:active { transform: translateY(0); }

.wrapdk .divider { display: flex; align-items: center; gap: 14px; margin: 22px 0; color: #94a3b8; font-size: .82rem; font-weight: 500; }
.wrapdk .divider::before, .wrapdk .divider::after { content: ''; flex: 1; height: 1px; background: #e2e8f0; }

.wrapdk .btn-google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 54px; border: 2px solid #e2e8f0; border-radius: 14px; background: #fff; color: #0f172a; font-weight: 600; text-decoration: none; transition: border-color .2s, background .2s, transform .18s; }
.wrapdk .btn-google:hover { background: #f8fafc; border-color: #cbd5e1; transform: translateY(-2px); color: #0f172a; }
.wrapdk .btn-google img { width: 20px; }

.wrapdk .login-link { text-align: center; margin-top: 26px; font-size: .9rem; color: #64748b; }
.wrapdk .login-link a { color: var(--theme-color, #27AE60); font-weight: 700; text-decoration: none; }
.wrapdk .login-link a:hover { text-decoration: underline; }

@keyframes wgAuthUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
.wrapdk .animate-up { animation: wgAuthUp .7s cubic-bezier(.16,1,.3,1) both; }

@media (max-width: 992px) {
  .wrapdk .auth-card { flex-direction: column; }
  .wrapdk .auth-info-side, .wrapdk .auth-form-side { width: 100%; }
  .wrapdk .auth-info-side { padding: 40px 36px; text-align: center; }
  .wrapdk .auth-info-side .d-flex { justify-content: center; }
  .wrapdk .auth-form-side { padding: 40px 32px; }
}
@media (max-width: 576px) {
  .wrapdk { padding: 28px 12px 44px; }
  .wrapdk .auth-card { border-radius: 20px; }
  .wrapdk .auth-info-side { padding: 34px 22px; }
  .wrapdk .auth-info-side h1 { font-size: 1.7rem !important; }
  .wrapdk .auth-form-side { padding: 32px 20px; }
  .wrapdk .auth-form-side h2 { font-size: 1.5rem; }
  .wrapdk .form-control, .wrapdk .btn-register, .wrapdk .btn-google { height: 50px; }
  .wrapdk .toggle-password { top: 25px; }
}

/* ====================== page-header-section (breadcrumb đầu trang) ====================== */
.page-header-section {
    padding: 16px 0;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border-bottom: 1px solid #eef2f7;
}
.page-header-section .page-breadcrumb {
    display: flex; align-items: center; flex-wrap: wrap; gap: 2px 0;
    margin: 0; padding: 0; list-style: none;
    font-size: .875rem; color: #64748b; min-width: 0;
}
.page-header-section .page-breadcrumb li { display: flex; align-items: center; min-width: 0; }
.page-header-section .page-breadcrumb li a {
    display: inline-flex; align-items: center; gap: 6px;
    color: #64748b; font-weight: 500; text-decoration: none;
    padding: 3px 6px; border-radius: 7px; transition: color .18s, background .18s;
    white-space: nowrap;
}
.page-header-section .page-breadcrumb li a:hover { color: var(--theme-color, #0f172a); background: var(--theme-color5, #f1f5f9); }
.page-header-section .page-breadcrumb li a i { font-size: .95em; opacity: .85; }
.page-header-section .page-breadcrumb li i { margin-right: 4px; }
.page-header-section .page-breadcrumb li + li::before {
    content: "\203A"; /* › */
    color: #cbd5e1; padding: 0 6px; font-size: 1em; line-height: 1;
}
.page-header-section .page-breadcrumb li.active {
    color: #0f172a; font-weight: 600; padding: 3px 8px;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    pointer-events: none;
}

/* Mobile: 1 dòng, mục cuối (tên trang) dài quá -> cắt "…" */
@media (max-width: 640px) {
    .page-header-section { padding: 12px 0; }
    .page-header-section .page-breadcrumb { flex-wrap: nowrap; }
    .page-header-section .page-breadcrumb li { flex: 0 0 auto; }
    .page-header-section .page-breadcrumb li a { padding: 3px 4px; }
    .page-header-section .page-breadcrumb li + li::before { padding: 0 4px; }
    .page-header-section .page-breadcrumb li.active { flex: 1 1 auto; min-width: 0; display: block; }
}
/* Màn nhỏ: mục "Trang chủ" chỉ còn icon nhà */
@media (max-width: 420px) {
    .page-header-section .page-breadcrumb li:first-child a { gap: 0; font-size: 0; }
    .page-header-section .page-breadcrumb li:first-child a i { font-size: 15px; opacity: 1; }
}

/* ====================== user dashboard — .main-profile-wrapper ====================== */
.wrapthongtinus .main-profile-wrapper {
    position: relative;
    min-height: 70vh;
    background:
        radial-gradient(1000px 360px at 6% -8%, var(--theme-color5, rgba(39,174,96,.14)), transparent 72%),
        radial-gradient(820px 320px at 100% -4%, rgba(99,102,241,.09), transparent 72%),
        linear-gradient(180deg, #f7f9fc 0%, #eef2f7 100%);
}
/* lớp hoa văn nền — KHÔNG đặt z-index để không tạo stacking-context nhốt modal bên trong.
   Nó vẽ trước .container (theo thứ tự DOM) nên nằm dưới nội dung, trên nền gradient. */
.wrapthongtinus .main-profile-wrapper::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(rgba(15,23,42,.05) 1px, transparent 1.5px);
    background-size: 26px 26px;
    -webkit-mask-image: linear-gradient(180deg, #000, transparent 360px);
            mask-image: linear-gradient(180deg, #000, transparent 360px);
}
.wrapthongtinus .main-profile-wrapper > .container { position: relative; max-width: 1440px; }
@media (min-width: 1200px) { .wrapthongtinus .main-profile-wrapper > .container { padding-left: 24px; padding-right: 24px; } }

/* helper view dùng nhưng chưa khai CSS */
.wrapthongtinus .shadow-subtle { box-shadow: 0 18px 44px -20px rgba(15,23,42,.16); }
.wrapthongtinus .text-muted-custom { color: #94a3b8; }
.wrapthongtinus .content-card { transition: box-shadow .3s ease; }

/* sidebar dính: chừa khoảng thở khi cuộn */
@media (min-width: 992px) {
    .wrapthongtinus .profile-sidebar.sticky-top { top: 24px; }
}
/* mobile: bỏ min-height + bỏ dính; hoa văn ngắn lại */
@media (max-width: 991px) {
    .wrapthongtinus .main-profile-wrapper { min-height: auto; }
    .wrapthongtinus .profile-sidebar.sticky-top { position: static !important; }
}
@media (max-width: 575px) {
    .wrapthongtinus .main-profile-wrapper::before {
        -webkit-mask-image: linear-gradient(180deg, #000, transparent 220px);
                mask-image: linear-gradient(180deg, #000, transparent 220px);
    }
}

/* ====================== Đặc Điểm Nổi Bật (premium-hl — chi tiết SP) ====================== */
.premium-hl-box {
    background-color: #ffffff; 
    border: 1px solid #ebebeb; 
    border-radius: 12px;
    margin-bottom: 24px;
    overflow: hidden;
}
.premium-hl-box .premium-hl-title {
    margin: 0;
    padding: 16px 20px 8px 20px;
    font-size: 16px;
    font-weight: 700;
    color: #27272a;
    text-transform: capitalize;
}
.premium-hl-box .premium-hl-content {
    position: relative;
    padding: 0 20px;
    max-height: 160px;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.premium-hl-box .premium-hl-content.is-expanded {
    max-height: 2000px; 
}
.premium-hl-box .premium-hl-list {
    list-style: none;
    padding: 0;
    margin: 0;
    padding-bottom: 16px;
}
.premium-hl-box .premium-hl-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.5;
    color: #3f3f46;
}
.premium-hl-box .premium-hl-list li i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background-color: var(--theme-color5);
    color: var(--theme-color);
    border-radius: 50%;
    font-size: 10px;
    margin-top: 2px;
    flex-shrink: 0;
}
.premium-hl-box .premium-hl-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background: linear-gradient(rgba(255, 255, 255, 0), #ffffff 80%);
    pointer-events: none;
    transition: opacity 0.3s;
}
.premium-hl-box .premium-hl-content.is-expanded .premium-hl-fade {
    opacity: 0;
}
.premium-hl-box .premium-hl-footer {
    text-align: center;
    padding: 0 20px 20px 20px;
    background-color: #ffffff;
    position: relative;
    z-index: 2;
    margin-top: -15px;
}
.premium-hl-box .premium-hl-btn {
    background-color: #ffffff;
    color: var(--theme-color);
    border: none;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}
.premium-hl-box .premium-hl-btn:hover {
    opacity: 0.8;
}
.premium-hl-box .premium-hl-btn i {
    font-size: 12px;
    transition: transform 0.3s ease;
}
.premium-hl-box .premium-hl-btn.is-active i {
    transform: rotate(180deg);
}

/* ====================== COMBO — Mua kèm deal sốc ======================
   Khối gợi ý mua kèm ở trang chi tiết sản phẩm (site/page/danhmuc/detailkhung.php).
   Dùng --theme-color* CHUNG của site (style.css :root) để ăn theo màu thương hiệu. */
.combo-box{
    margin-top:20px;border:1px solid var(--theme-color5);border-radius:16px;
    padding:16px 18px;background:linear-gradient(180deg,var(--theme-color5),#fff 60%);
    box-shadow:0 8px 24px rgba(0,0,0,.04);
}
.combo-box__head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:15px;font-weight:700;color:#1f2937;margin-bottom:4px}
.combo-box__tag{
    display:inline-flex;align-items:center;gap:6px;background:var(--theme-color);color:#fff;
    font-weight:800;font-size:12px;padding:4px 12px;border-radius:999px;white-space:nowrap;
    box-shadow:0 4px 10px var(--theme-color5);
}
.combo-box__sub{font-size:12.5px;color:#7a8699;margin:6px 0 6px}

.combo-add{
    display:flex;align-items:center;gap:14px;padding:12px 6px;margin:0 -6px;
    border-top:1px solid var(--theme-color5);cursor:pointer;border-radius:10px;transition:background .15s;
}
.combo-add:first-of-type{border-top:0}
.combo-add:hover{background:var(--theme-color5)}
.combo-add.oos{opacity:.55;cursor:not-allowed;filter:grayscale(.6)}
.combo-add.oos:hover{background:transparent}
.combo-add.oos .combo-add__ck{cursor:not-allowed}
.combo-add.combo-add--anchor.oos:hover{background:#fff}
.combo-add__ckwrap{flex:0 0 auto;display:flex}
.combo-add__ck{width:19px;height:19px;accent-color:var(--theme-color);cursor:pointer}
/* nhãn HẾT HÀNG cho món kèm / SP chính */
.combo-add__soldout{display:inline-block;background:#fef2f2;color:#dc2626;border:1px solid #fecaca;font-size:11px;font-weight:800;padding:3px 10px;border-radius:6px;white-space:nowrap;line-height:1.2}
.combo-add__soldout--inline{margin-left:6px;font-size:10px;padding:1px 7px;vertical-align:middle}

/* dòng "Sản phẩm chính" (anchor) trong khối combo */
.combo-add--anchor{cursor:default;background:#fff;border:1px dashed var(--theme-color);border-radius:12px;margin:2px 0 4px;padding:12px}
.combo-add--anchor:hover{background:#fff}
.combo-add--anchor .combo-add__ckwrap{color:var(--theme-color);font-size:19px;align-items:center}
.combo-add__badge{display:inline-block;background:var(--theme-color);color:#fff;font-size:10px;font-weight:800;padding:2px 7px;border-radius:6px;vertical-align:middle;margin-right:4px}
.combo-add__img{
    width:60px;height:60px;border-radius:12px;object-fit:cover;flex:0 0 auto;
    background:#fff;border:1px solid var(--theme-color5);
}
.combo-add__mid{flex:1;min-width:0}
.combo-add__nm{font-size:14px;font-weight:600;color:#1e293b;line-height:1.4}
.combo-add__qty{color:var(--theme-color);font-weight:800}

/* nhãn thuộc tính — KHÔNG dùng select, bấm chọn như trang sản phẩm */
.combo-add__opts{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
.combo-opt{
    position:relative;padding:5px 13px;border:1px solid #e2e5ea;border-radius:8px;background:#fff;
    font-size:12.5px;font-weight:600;color:#475467;cursor:pointer;line-height:1.3;transition:all .18s ease;
}
.combo-opt:hover{border-color:var(--theme-color);color:var(--theme-color)}
.combo-opt.active{
    border-color:var(--theme-color);color:var(--theme-color);background:var(--theme-color5);
    box-shadow:0 0 0 1px var(--theme-color) inset;
}
.combo-opt.active::after{
    content:"\f00c";font-family:"Font Awesome 6 Pro","Font Awesome 5 Pro","FontAwesome";font-weight:900;
    position:absolute;top:-7px;right:-7px;background:var(--theme-color);color:#fff;font-size:8px;
    width:15px;height:15px;border-radius:50%;display:flex;align-items:center;justify-content:center;
}
.combo-opt.is-out{opacity:.4;text-decoration:line-through;cursor:not-allowed}
.combo-add__lock{margin-top:7px;font-size:12px;color:#7a8699}
.combo-add__lock b{color:var(--theme-color)}

.combo-add__pr{white-space:nowrap;text-align:right;font-size:13px;flex:0 0 auto}
.combo-add__old{display:block;text-decoration:line-through;color:#9aa4b2;font-size:11.5px}
.combo-add__new{font-weight:800;color:var(--theme-color);font-size:14.5px}
.combo-add__off{display:block;color:#166534;background:#dcfce7;border-radius:6px;font-weight:800;font-size:10.5px;padding:1px 6px;margin-top:2px}

.combo-box__foot{
    display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
    margin-top:14px;padding-top:14px;border-top:1px dashed var(--theme-color);
}
.combo-box__tot{font-size:13px;color:#475569}
.combo-box__tot b{font-size:20px;color:var(--theme-color);margin-left:6px}
.combo-box__save{
    background:#dcfce7;color:#166534;font-weight:800;font-size:12px;padding:3px 10px;border-radius:999px;margin-left:8px;
}
.combo-box__btn{
    border:0;border-radius:12px;padding:12px 24px;font-weight:800;font-size:14.5px;color:#fff;cursor:pointer;
    background:linear-gradient(100deg,var(--theme-color),var(--theme-color2));
    box-shadow:0 8px 18px var(--theme-color5);transition:filter .15s,transform .05s;
}
.combo-box__btn:hover{filter:brightness(1.05)}
.combo-box__btn:active{transform:translateY(1px)}
.combo-box__btn:disabled{opacity:.6;cursor:default;box-shadow:none}

@media (max-width:576px){
    .combo-box{padding:14px}
    .combo-add{gap:11px}
    .combo-add__img{width:52px;height:52px}
    .combo-box__foot{gap:10px}
    .combo-box__btn{width:100%;padding:12px}
}


/* ============================================================================
   TỒN KHO — nhãn trạng thái, khối "đặt trước", nút mua bị khoá   (v25)
   Ghi đè các rule cũ ở trên, đặt cuối file để thắng cascade.
   ========================================================================== */

/* --- nhãn trạng thái cạnh giá — ẨN cho gọn giao diện (giữ nguyên markup/JS phía sau để
   không phá logic "nhận đặt trước" theo biến thể, chỉ ẩn phần hiển thị còn/hết hàng). --- */
.inv-stock-badge, .wrap-detailhai .inv-stock-badge, .wrap-detailhai .inv-stock-badge[data-hasvar].is-shown{
    display:none !important;
}
.inv-stock-badge{
    align-items:center;gap:8px;margin:14px 0 4px;padding:7px 14px;border-radius:999px;
    font-size:13px;font-weight:700;line-height:1.2;
    color:var(--inv-fg,#16a34a);background:var(--inv-bg,#dcfce7);
    border:1px solid color-mix(in srgb,var(--inv-fg,#16a34a) 22%,transparent);
}
.inv-stock-badge__ico{font-size:13px;flex:0 0 auto}
/* --- khối giải thích "nhận đặt trước" — tông trung tính --theme-color3/4 --- */
.inv-preorder-note[hidden]{display:none}
.inv-preorder-note{
    display:flex;align-items:flex-start;gap:12px;margin:10px 0 2px;padding:13px 15px;
    border:1px solid var(--theme-color4,#95A5A6);border-left:4px solid var(--theme-color3,#7F8C8D);
    border-radius:12px;background:#f6f8f8;
}
.inv-preorder-note > i{color:var(--theme-color3,#7F8C8D);font-size:17px;margin-top:2px;flex:0 0 auto}
.inv-preorder-note b{display:block;font-size:13.5px;font-weight:800;color:#2f3b3c;margin-bottom:2px}
.inv-preorder-note span{display:block;font-size:12.5px;color:#4f5d5e;line-height:1.6}

/* --- nút mua khi HẾT HÀNG: khoá, rõ ràng, không còn xám xịt vô nghĩa --- */
.shop-single-action.sp-soldout{display:block}
.shop-single-action.sp-soldout .btn-cart[disabled],
.wrap-detailhai .shop-single-action.sp-soldout .btn-cart[disabled]{
    width:100%;display:flex;align-items:center;justify-content:center;gap:12px;
    padding:15px 22px;border-radius:14px;cursor:not-allowed;box-shadow:none;
    border:1px dashed #d6d9e0;background:repeating-linear-gradient(135deg,#f7f8fa,#f7f8fa 9px,#f2f3f6 9px,#f2f3f6 18px);
    color:#8b93a3;font-weight:800;font-size:15px;
}
.shop-single-action.sp-soldout .btn-cart[disabled]:hover{background:repeating-linear-gradient(135deg,#f7f8fa,#f7f8fa 9px,#f2f3f6 9px,#f2f3f6 18px);color:#8b93a3}
.shop-single-action.sp-soldout .btn-cart[disabled] > i{font-size:18px;color:#aeb5c2}
.btn-cart__txt{display:flex;flex-direction:column;align-items:flex-start;line-height:1.25;text-align:left}
.btn-cart__txt small{font-weight:600;font-size:11.5px;color:#a2a9b8;margin-top:2px}

/* --- SP cho ĐẶT TRƯỚC: vẫn mua được nên nút GIỮ NGUYÊN màu thương hiệu như nút mua thường.
   Cố tình KHÔNG tô xám: nút xám đọc như bị khoá, trong khi khách vẫn đặt được bình thường.
   Việc "chưa có sẵn" đã do nhãn .inv-stock-badge + khối .inv-preorder-note nói rõ. --- */
.shop-single-action.sp-preorder .js-cart-label,
.shop-single-action.sp-preorder .js-buy-label{font-size:0}
.shop-single-action.sp-preorder .js-cart-label::after{content:"Đặt Trước Ngay";font-size:15px}
.shop-single-action.sp-preorder .js-buy-label::after{content:"Đặt Trước";font-size:15px}

/* ============================================================================
   COMBO — ô tick tuỳ biến (dấu check trắng) + nhãn "cho đặt trước"   (v25)
   ========================================================================== */
.combo-add__ckwrap{flex:0 0 auto;display:flex;align-items:center}
.combo-add__ck{
    -webkit-appearance:none;appearance:none;margin:0;flex:0 0 auto;
    width:22px;height:22px;border-radius:7px;cursor:pointer;position:relative;
    border:2px solid #cfd6e0;background:#fff;transition:background .15s,border-color .15s,box-shadow .15s;
}
.combo-add__ck::after{
    content:"";position:absolute;left:7px;top:3px;width:5px;height:10px;
    border:solid #fff;border-width:0 2.5px 2.5px 0;border-radius:1px;
    transform:rotate(45deg) scale(.4);opacity:0;transition:transform .15s ease,opacity .12s ease;
}
.combo-add:hover .combo-add__ck:not(:disabled){border-color:var(--theme-color)}
.combo-add__ck:focus-visible{outline:none;box-shadow:0 0 0 3px var(--theme-color5)}
.combo-add__ck:checked{
    background:var(--theme-color);border-color:var(--theme-color);
    box-shadow:0 3px 8px -2px var(--theme-color);
}
.combo-add__ck:checked::after{opacity:1;transform:rotate(45deg) scale(1)}
.combo-add__ck:disabled{background:#f1f3f6;border-color:#e0e4ea;cursor:not-allowed;box-shadow:none}

/* nhãn "cho đặt trước" trên từng dòng combo — tông trung tính, không giành màu với giá & nút */
.combo-add__pre{
    display:inline-flex;align-items:center;gap:5px;margin-top:6px;
    background:#f1f4f4;color:#4f5d5e;border:1px solid var(--theme-color4,#95A5A6);
    font-size:11px;font-weight:800;padding:2px 9px;border-radius:6px;line-height:1.5;
}
.combo-add__pre[hidden]{display:none}
.combo-add.pre{background:linear-gradient(90deg,#f4f6f6,transparent 70%)}
.combo-add.pre:hover{background:linear-gradient(90deg,#eef1f1,transparent 70%)}
.combo-add--anchor.pre{border-style:solid;border-color:var(--theme-color4,#95A5A6)}
.combo-opt.is-pre{border-color:var(--theme-color4,#95A5A6);color:#4f5d5e;background:#f6f8f8}
.combo-opt.is-pre.active{
    border-color:var(--theme-color3,#7F8C8D);background:#eef1f1;
    box-shadow:0 0 0 1px var(--theme-color3,#7F8C8D) inset;
}

/* ghi chú chung dưới khối combo khi có món phải đặt trước */
.combo-box__note{
    display:flex;align-items:center;gap:9px;margin-top:12px;padding:10px 13px;
    border:1px solid var(--theme-color4,#95A5A6);border-radius:10px;background:#f6f8f8;
    font-size:12.5px;color:#4f5d5e;line-height:1.55;
}
.combo-box__note[hidden]{display:none}
.combo-box__note > i{color:var(--theme-color3,#7F8C8D);flex:0 0 auto}
.combo-box__note b{color:#2f3b3c}
@media (max-width:575px){
    .inv-preorder-note{padding:11px 13px;gap:10px}
    .shop-single-action.sp-soldout .btn-cart[disabled]{padding:14px 16px;font-size:14px}
    .btn-cart__txt small{font-size:11px}
}

/* ============================================================================
   HÀNG ĐẶT TRƯỚC — nhãn dòng + dải báo (mini-cart, giỏ hàng, đặt hàng,
   chi tiết đơn khách). Dùng chung 1 bộ class: .pre-tag + .pre-banner
   Tông TRUNG TÍNH --theme-color3/4: "chưa có sẵn" là thông tin cần đọc, không
   phải khuyến mãi — để màu thương hiệu dành riêng cho giá, nút và trạng thái còn hàng.
   ========================================================================== */
.pre-tag{
    display:inline-flex;align-items:center;gap:5px;margin-top:6px;
    background:#f1f4f4;color:#4f5d5e;border:1px solid var(--theme-color4,#95A5A6);
    font-size:11px;font-weight:800;line-height:1.5;padding:2px 9px;border-radius:6px;
    white-space:normal;
}
.pre-tag > i{font-size:10.5px;flex:0 0 auto}

.pre-banner{
    display:flex;align-items:flex-start;gap:11px;margin:0 0 18px;padding:12px 15px;
    border:1px solid var(--theme-color4,#95A5A6);border-left:4px solid var(--theme-color3,#7F8C8D);
    border-radius:12px;background:#f6f8f8;
}
.pre-banner > i{color:var(--theme-color3,#7F8C8D);font-size:16px;margin-top:2px;flex:0 0 auto}
.pre-banner b{display:block;font-size:13.5px;font-weight:800;color:#2f3b3c;margin-bottom:2px}
.pre-banner span{display:block;font-size:12.5px;color:#4f5d5e;line-height:1.6}
.pre-banner span b{display:inline;font-size:inherit;color:#2f3b3c;margin:0}

/* mini-cart (.ajcontentgh): dòng hẹp -> nhãn nhỏ hơn, viền trái cho dễ quét mắt */
.ajcontentgh .pre-tag{margin-top:4px;font-size:10px;padding:1px 7px}
.cart-item--pre{border-left:3px solid var(--theme-color4,#95A5A6);padding-left:9px}

/* giỏ hàng: thẻ SP đặt trước có nền nhạt để phân biệt với hàng có sẵn */
.cart-card--pre{background:linear-gradient(90deg,#f4f6f6,transparent 60%)}

@media (max-width:575px){
    .pre-banner{padding:11px 13px;gap:9px}
    .pre-banner b{font-size:13px}
}
/* ============================================================================
   MODAL CHỌN VOUCHER   (v31)
   Toàn bộ màu lấy từ :root (--theme-color / 2 / 3 / 4 / 5). Không đổ bóng nặng —
   phân tầng bằng viền, nền tint và bo góc, đồng bộ với khối vận chuyển/thanh toán.
   Class: .vcm* = khung modal, .vc* = thẻ voucher (Giohang::get_list_coupons dựng).
   ========================================================================== */
.modal-voucher .modal-dialog{max-width:580px}
.vcm{border:0;border-radius:22px;overflow:hidden}

/* --- đầu modal --- */
.vcm-head{
    display:flex;align-items:center;gap:13px;padding:19px 22px;color:#fff;
    background:linear-gradient(115deg,var(--theme-color,#27AE60),var(--theme-color2,#2ECC71));
    position:relative;
}
/* vân răng cưa mờ gợi hình tấm vé */
.vcm-head::after{
    content:'';position:absolute;left:0;right:0;bottom:0;height:8px;
    background:radial-gradient(circle at 6px 8px,#fff 5px,transparent 5.5px) 0 0/16px 8px repeat-x;
    opacity:.9;
}
.vcm-head__ic{
    width:44px;height:44px;border-radius:14px;flex:0 0 auto;display:grid;place-items:center;
    background:rgba(255,255,255,.2);font-size:19px;
}
.vcm-head__tx{flex:1;min-width:0}
.vcm-head h5{margin:0;font-size:17.5px;font-weight:800;letter-spacing:.2px}
.vcm-head p{margin:3px 0 0;font-size:12.5px;opacity:.92;line-height:1.45}
.vcm-close{
    flex:0 0 auto;width:33px;height:33px;border:0;border-radius:50%;cursor:pointer;
    background:rgba(255,255,255,.2);color:#fff;font-size:15px;transition:background .18s;
}
.vcm-close:hover{background:rgba(255,255,255,.36)}

/* --- ô nhập mã --- */
.vcm-entry{display:flex;gap:10px;padding:20px 22px 12px;background:#fff}
.vcm-field{
    flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:0 14px;
    border:1.5px solid #e4e9ef;border-radius:12px;background:#f8fafc;transition:border-color .18s,background .18s;
}
.vcm-field:focus-within{border-color:var(--theme-color,#27AE60);background:#fff}
.vcm-field > i{color:var(--theme-color4,#95A5A6);font-size:14px;flex:0 0 auto;transition:color .18s}
.vcm-field:focus-within > i{color:var(--theme-color,#27AE60)}
.vcm-field input{
    flex:1;min-width:0;border:0;outline:none;background:transparent;
    padding:12px 0;font-size:14px;font-weight:700;color:#0f172a;text-transform:uppercase;letter-spacing:.5px;
}
.vcm-field input::placeholder{font-weight:500;letter-spacing:0;text-transform:none;color:var(--theme-color4,#95A5A6)}
.vcm-apply{
    flex:0 0 auto;border:0;border-radius:12px;padding:0 24px;cursor:pointer;
    background:var(--theme-color,#27AE60);color:#fff;font-weight:800;font-size:13.5px;transition:background .18s;
}
.vcm-apply:hover{background:var(--theme-color2,#2ECC71)}
.vcm-apply:disabled{opacity:.6;cursor:default}

.vcm-msg{
    margin:0 22px 12px;padding:10px 14px;border-radius:11px;
    background:#f8fafc;border:1px solid #e4e9ef;
    font-size:12.8px;font-weight:700;line-height:1.5;text-align:center;
}

/* --- danh sách --- */
.vcm-body{
    padding:4px 22px 18px;background:#f8fafc;border-top:1px solid #eceff4;
    max-height:58vh;overflow-y:auto;overscroll-behavior:contain;
}
.vcm-body::-webkit-scrollbar{width:6px}
.vcm-body::-webkit-scrollbar-thumb{background:#dfe3ea;border-radius:4px}

.vc-sec{
    display:flex;align-items:center;gap:8px;margin:16px 0 10px;
    font-size:11.5px;font-weight:800;color:var(--theme-color3,#7F8C8D);text-transform:uppercase;letter-spacing:.5px;
}
.vc-sec > i{color:var(--theme-color,#27AE60);font-size:12px}
.vc-sec b{
    margin-left:auto;background:var(--theme-color5,#27ae602e);color:var(--theme-color,#27AE60);
    border-radius:20px;padding:1px 9px;font-size:11px;
}
.vc-sec.is-muted,.vc-sec.is-muted > i{color:var(--theme-color4,#95A5A6)}
.vc-sec.is-muted b{background:#eef1f5;color:var(--theme-color3,#7F8C8D)}

/* --- thẻ voucher --- */
.vc{
    display:flex;align-items:stretch;margin-bottom:11px;background:#fff;
    border:1.5px solid #e4e9ef;border-radius:14px;position:relative;
    transition:border-color .18s,background .18s;
}
.vc:hover{border-color:var(--theme-color2,#2ECC71)}
.vc.is-off{background:#fbfcfd;border-color:#eceff4}
.vc.is-off:hover{border-color:#eceff4}
.vc.is-off .vc-stub{opacity:.5}

.vc-stub{
    flex:0 0 92px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    color:#fff;text-align:center;padding:13px 6px;border-radius:12px 0 0 12px;position:relative;
}
/* mã giảm giá = xanh đậm thương hiệu; mã vận chuyển = xanh sáng -> phân biệt bằng sắc độ + icon */
.vc--sale .vc-stub{background:linear-gradient(160deg,var(--theme-color,#27AE60),var(--theme-color2,#2ECC71))}
.vc--ship .vc-stub{background:linear-gradient(160deg,var(--theme-color2,#2ECC71),var(--theme-color,#27AE60))}
.vc-stub__ic{font-size:13px;opacity:.85;margin-bottom:1px}
.vc-stub b{font-size:10px;font-weight:800;letter-spacing:1.1px;opacity:.9}
.vc-stub span{font-size:19px;font-weight:900;line-height:1.05;word-break:break-all}
/* răng cưa nối cuống với thân */
.vc-stub::before,.vc-stub::after{
    content:'';position:absolute;right:-6px;width:11px;height:11px;border-radius:50%;
    background:#f8fafc;border:1.5px solid #e4e9ef;
}
.vc-stub::before{top:-7px}
.vc-stub::after{bottom:-7px}

.vc-body{flex:1;min-width:0;padding:11px 14px;border-left:1.5px dashed #e4e9ef}
.vc-head{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.vc-head h6{margin:0;font-size:14px;font-weight:800;color:#0f172a;line-height:1.35}
.vc-chip{font-size:9.5px;font-weight:800;padding:2px 8px;border-radius:6px;letter-spacing:.2px;white-space:nowrap}
.vc-chip--solo{background:#fff;color:var(--theme-color3,#7F8C8D);border:1px solid #dfe4ea}
.vc-chip--best{
    background:var(--theme-color5,#27ae602e);color:var(--theme-color,#27AE60);
    border:1px solid var(--theme-color2,#2ECC71);
}
.vc-meta{margin-top:4px;font-size:12px;color:var(--theme-color3,#7F8C8D);line-height:1.5}
.vc-scope{
    display:flex;align-items:flex-start;gap:6px;margin-top:6px;padding:4px 9px;
    background:var(--theme-color5,#27ae602e);border:1px solid var(--theme-color2,#2ECC71);border-radius:8px;
    font-size:11.5px;font-weight:700;color:var(--theme-color,#27AE60);line-height:1.45;
}
.vc-scope > i{margin-top:2px;flex:0 0 auto;font-size:10px}
.vc-foot{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:7px}
.vc-code{
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;font-weight:800;
    background:#f8fafc;border:1px dashed #d5dbe3;border-radius:7px;padding:2px 9px;color:#3d4551;
}
.vc-exp{font-size:11.5px;color:var(--theme-color4,#95A5A6);display:inline-flex;align-items:center;gap:4px}
.vc-exp.is-soon{color:#c2410c;font-weight:700}
.vc-bar{display:flex;align-items:center;gap:8px;margin-top:7px}
.vc-bar__t{flex:1;height:5px;border-radius:4px;background:#eef1f5;overflow:hidden;min-width:60px}
.vc-bar__t > i{display:block;height:100%;border-radius:4px;background:var(--theme-color,#27AE60)}
.vc-bar > span{font-size:10.5px;font-weight:700;color:var(--theme-color4,#95A5A6);white-space:nowrap}

.vc-act{
    flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:8px;
    padding:11px 14px 11px 4px;max-width:180px;
}
.vc-save{font-size:14.5px;font-weight:900;color:var(--theme-color,#27AE60);white-space:nowrap}
.vc-use{
    border:0;border-radius:10px;padding:8px 18px;cursor:pointer;white-space:nowrap;
    background:var(--theme-color,#27AE60);color:#fff;font-weight:800;font-size:12.5px;transition:background .18s;
}
.vc-use:hover{background:var(--theme-color2,#2ECC71)}
.vc-off{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    color: var(--theme-color);
    background: var(--theme-color5);
    border: 1px solid var(--theme-color);
    line-height: 1.4;
    padding: 6px 11px;
    border-radius: 20px;
    text-align: left;
    white-space: normal;
    font-size: 8px;
}
.vc-off > i{flex:0 0 auto;font-size:11px;color: var(--theme-color);}

.vc-loading{display:flex;flex-direction:column;align-items:center;gap:10px;padding:44px 0;color:var(--theme-color3,#7F8C8D);font-size:13px}
.vc-loading > i{font-size:26px;color:var(--theme-color,#27AE60)}
.vc-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:46px 20px;text-align:center}
.vc-empty > i{font-size:34px;color:#d5dbe3;margin-bottom:4px}
.vc-empty b{font-size:14px;font-weight:800;color:var(--theme-color3,#7F8C8D)}
.vc-empty span{font-size:12.5px;color:var(--theme-color4,#95A5A6);line-height:1.5}

/* --- chân modal --- */
.vcm-foot{display:flex;align-items:center;gap:12px;padding:14px 22px;background:#fff;border-top:1px solid #eceff4}
.vcm-foot > span{flex:1;min-width:0;font-size:11.8px;color:var(--theme-color4,#95A5A6);line-height:1.5}
.vcm-foot > span > i{color:var(--theme-color,#27AE60);margin-right:3px}
.vcm-foot b{color:var(--theme-color3,#7F8C8D)}
.vcm-done{
    flex:0 0 auto;border:0;border-radius:11px;padding:11px 28px;cursor:pointer;
    background:var(--theme-color,#27AE60);color:#fff;font-weight:800;font-size:13px;transition:background .18s;
}
.vcm-done:hover{background:var(--theme-color2,#2ECC71)}

@media (prefers-reduced-motion:reduce){
    .vc,.vc-use,.vcm-apply,.vcm-done,.vcm-field{transition:none}
}
@media (max-width:575px){
    .modal-voucher{padding:0 !important}
    .modal-voucher .modal-dialog{max-width:100%;margin:0;height:100dvh;max-height:100dvh}
    .modal-voucher .modal-content.vcm{height:100%;border-radius:0;display:flex;flex-direction:column}
    .vcm-head{padding:16px 17px;gap:11px;flex:0 0 auto}
    .vcm-head h5{font-size:16px}
    .vcm-entry{padding:16px 17px 10px;flex:0 0 auto;flex-wrap:wrap}
    .vcm-field{flex-basis:100%}
    .vcm-apply{flex:1 1 auto;padding: 6px 7px;}
    .vcm-msg{margin:0 17px 10px;flex:0 0 auto}
    .vcm-body{padding:2px 17px 15px;max-height:none;flex:1 1 auto}
    .vcm-foot{padding:12px 17px;flex:0 0 auto;flex-wrap:wrap}
    .vc-stub{flex-basis:64px;padding:11px 4px}
    .vc-stub span{font-size:15px}
    .vc-body{padding:11px 12px}
    .vc{flex-wrap:wrap}
    .vc-act{max-width:none;width:100%;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;padding:0 12px 11px;gap:8px}
    .vc-off{        flex: 1 1 auto;
        margin-top: 5px;
        padding: 8px 8px;
        font-size: 9px;}
    .vc-save{flex:0 0 auto}
}
@media (max-width:360px){
    .vc-stub{display:none}
    .vc-body{border-left:0}
}

/* ============================================================================
   DAT-HANG — thẻ "Tổng Đơn Hàng" (.summary-card.animate-up)   (v28)
   Đặt cuối file để thắng bộ rule .wrapthanhtoan cũ ở trên.
   ========================================================================== */
.wrapthanhtoan .summary-card{
    position:sticky;top:24px;background:#fff;border:1px solid #eceff4;border-radius:22px;
    padding:0;overflow:hidden;box-shadow:0 24px 60px -30px rgba(15,23,42,.35);
}
/* vệt màu thương hiệu chạy ngang đỉnh thẻ */
.wrapthanhtoan .summary-card::before{
    content:'';display:block;height:4px;
    background:linear-gradient(90deg,var(--theme-color,#27AE60),var(--theme-color2,#2ECC71),var(--theme-color,#27AE60));
}
/* Thẻ padding:0 để vệt màu chạm mép; lề trong do từng khối con tự giữ. */
.wrapthanhtoan .summary-card > *{margin-left:26px;margin-right:26px}
.wrapthanhtoan .summary-card::before{margin:0}

/* --- tiêu đề --- */
.wrapthanhtoan .summary-card .section-title{
    display:flex;align-items:center;gap:10px;margin:22px 26px 16px!important;
    font-size:17px;font-weight:800;color:#0f172a;letter-spacing:-.01em;
}
.wrapthanhtoan .summary-card .section-title::before{
    content:'\f291';font-family:"Font Awesome 6 Pro";font-weight:900;
    width:32px;height:32px;border-radius:10px;display:grid;place-items:center;flex:0 0 auto;
    background:var(--theme-color5,#27ae602e);color:var(--theme-color,#27AE60);font-size:14px;
}

/* --- danh sách sản phẩm: cuộn riêng khi giỏ dài --- */
.wrapthanhtoan .product-list{max-height:330px;overflow-y:auto;padding-right:6px;margin-bottom:4px}
.wrapthanhtoan .product-list::-webkit-scrollbar{width:6px}
.wrapthanhtoan .product-list::-webkit-scrollbar-thumb{background:#dfe3ea;border-radius:4px}

.wrapthanhtoan .product-item{
    display:flex;gap:13px;align-items:flex-start;
    margin-bottom:13px;padding-bottom:13px;border-bottom:1px solid #f3f5f8;
}
.wrapthanhtoan .product-list > .product-item:last-child{margin-bottom:0;padding-bottom:0;border-bottom:0}

.wrapthanhtoan .product-thumb{position:relative;flex:0 0 auto}
.wrapthanhtoan .product-img{width:62px;height:62px;object-fit:cover;border-radius:12px;background:#f6f8fa;border:1px solid #eef1f5;display:block}
.wrapthanhtoan .product-qty{
    position:absolute;top:-7px;right:-7px;min-width:22px;height:22px;padding:0 6px;
    border-radius:11px;background:#0f172a;color:#fff;border:2px solid #fff;
    font-size:11px;font-weight:800;display:grid;place-items:center;line-height:1;
}
.wrapthanhtoan .product-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.wrapthanhtoan .product-title{
    font-weight:700;font-size:13.5px;line-height:1.45;color:#0f172a;margin:0;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.wrapthanhtoan .product-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:11.5px;color:#8b93a1;margin:0}
.wrapthanhtoan .product-attr{background:#f4f6f9;border:1px solid #e9edf2;border-radius:5px;padding:1px 7px;font-weight:600;color:#5b6471}
.wrapthanhtoan .product-qtytx{font-weight:700;color:#68707d}
.wrapthanhtoan .product-price{font-weight:800;font-size:14px;color:#0f172a;margin-top:2px}

/* --- các ô ưu đãi (VIP / Xu / voucher) --- */
.wrapthanhtoan .vip-discount-box,
.wrapthanhtoan .points-discount-box,
.wrapthanhtoan .voucher-trigger-box{border-radius:13px!important}
.wrapthanhtoan .voucher-trigger-box{
    border:1px dashed #cfd6e0;background:#fbfcfd;padding:14px 16px!important;transition:.18s;
}
.wrapthanhtoan .voucher-trigger-box:hover{border-color:var(--theme-color,#27AE60);background:var(--theme-color5,#27ae602e)}
.wrapthanhtoan .voucher-trigger-box .textvoucher{font-size:13.5px;color:#0f172a}
.wrapthanhtoan .voucher-trigger-box .textvoucher::before{
    content:'\f02c';font-family:"Font Awesome 6 Pro";font-weight:900;
    margin-right:8px;color:var(--theme-color,#27AE60);font-size:13px;
}

/* --- các dòng cộng trừ --- */
.wrapthanhtoan .summary-details{
    margin-top:18px!important;padding:16px 18px;border-radius:15px;
    background:#f8fafc;border:1px solid #eef1f5;
}
.wrapthanhtoan .summary-row{
    display:flex;justify-content:space-between;align-items:center;gap:12px;
    margin-bottom:9px;font-size:13.5px;color:#68707d;
}
.wrapthanhtoan .summary-row:last-of-type{margin-bottom:0}
.wrapthanhtoan .summary-row > span:first-child{display:inline-flex;align-items:center;gap:7px}
.wrapthanhtoan .summary-row > span:first-child i{font-size:12px;opacity:.9}
.wrapthanhtoan .summary-row > span:last-child{font-weight:700;color:#0f172a;white-space:nowrap}
.wrapthanhtoan .summary-row.text-danger > span:last-child{color:#dc2626}
.wrapthanhtoan .summary-row.text-success > span:last-child{color:#16a34a}

/* --- tổng thanh toán --- */
.wrapthanhtoan .summary-total{
    display:flex;justify-content:space-between;align-items:flex-end;gap:12px;
    margin-top:14px;padding-top:14px;border-top:1px dashed #d9dee6;
}
.wrapthanhtoan .summary-total__l{display:flex;flex-direction:column;gap:2px;min-width:0}
.wrapthanhtoan .total-label{font-weight:800;font-size:15px;color:#0f172a;line-height:1.2}
.wrapthanhtoan .summary-total__l small{font-size:11px;color:#a2a9b5}
.wrapthanhtoan .summary-total__r{display:flex;flex-direction:column;align-items:flex-end;gap:5px;min-width:0}
.wrapthanhtoan .total-amount{
    font-weight:900;font-size:26px;line-height:1.05;white-space:nowrap;
    color:var(--theme-color,#27AE60);letter-spacing:-.02em;
}
.wrapthanhtoan .total-save{
    background:#dcfce7;color:#15803d;border-radius:20px;padding:2px 10px;
    font-size:11px;font-weight:800;white-space:nowrap;
}

/* --- nút đặt hàng --- */
.wrapthanhtoan .btn-checkout{
    display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
    margin-top:18px;padding:16px 20px;border:0;border-radius:14px;cursor:pointer;
    background:linear-gradient(100deg,var(--theme-color,#27AE60),var(--theme-color2,#2ECC71));
    color:#fff;font-weight:800;font-size:15px;letter-spacing:.02em;
    box-shadow:0 14px 26px -12px var(--theme-color,#27AE60);transition:.22s;
}
.wrapthanhtoan .btn-checkout:hover{color:#fff;transform:translateY(-2px);box-shadow:0 20px 34px -14px var(--theme-color,#27AE60);filter:brightness(1.04)}
.wrapthanhtoan .btn-checkout:active{transform:translateY(0)}
.wrapthanhtoan .btn-checkout i{transition:transform .22s}
.wrapthanhtoan .btn-checkout:hover i{transform:translateX(4px)}

.wrapthanhtoan .summary-trust{
    display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;
    margin-top:13px;font-size:11.5px;color:#9aa2ae;
}
.wrapthanhtoan .summary-trust span{display:inline-flex;align-items:center;gap:5px}
.wrapthanhtoan .summary-trust i{color:var(--theme-color,#27AE60);font-size:11px}

.wrapthanhtoan .summary-back{text-align:center;margin:12px 0 26px}
.wrapthanhtoan .summary-back a{font-size:13px;color:#8b93a1;text-decoration:none;font-weight:600;transition:.15s}
.wrapthanhtoan .summary-back a:hover{color:var(--theme-color,#27AE60)}

/* giỏ trống */
.wrapthanhtoan .summary-card .text-center.py-5{padding:48px 0 44px!important}

/* --- vào trang: trượt lên mượt, tôn trọng người tắt hiệu ứng --- */
@keyframes dhUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
.wrapthanhtoan .animate-up{animation:dhUp .62s cubic-bezier(.16,1,.3,1) both}
@media (prefers-reduced-motion:reduce){
    .wrapthanhtoan .animate-up{animation:none}
    .wrapthanhtoan .btn-checkout,.wrapthanhtoan .btn-checkout i{transition:none}
    .wrapthanhtoan .btn-checkout:hover{transform:none}
}

@media (max-width:991px){
    .wrapthanhtoan .summary-card{position:static;top:auto}
    .wrapthanhtoan .product-list{max-height:none}
}
@media (max-width:575px){
    .wrapthanhtoan .summary-card > *{margin-left:17px;margin-right:17px}
    .wrapthanhtoan .summary-card .section-title{margin:18px 17px 13px!important;font-size:16px}
    .wrapthanhtoan .total-amount{font-size:22px}
    .wrapthanhtoan .summary-details{padding:14px 15px}
    .wrapthanhtoan .summary-back{margin-bottom:20px}
}


/* ============================================================================
   DAT-HANG — Đơn vị vận chuyển & Phương thức thanh toán   (v29)
   Toàn bộ màu lấy từ :root (--theme-color / 2 / 5), icon dùng Font Awesome 6 Pro.
   Đặt cuối file để thắng bộ rule cũ ở trên.
   ========================================================================== */

/* ---------------------------------------------------------------
   ĐƠN VỊ VẬN CHUYỂN  (.shipping-option, dựng động trong mau.js)
   --------------------------------------------------------------- */
/* Khung chứa danh sách hãng vận chuyển: nền lõm nhẹ để các thẻ hãng nổi lên,
   không cần đổ bóng. Có thanh cuộn riêng khi hãng trả về nhiều lựa chọn. */
.wrapthanhtoan #list-shipping-methods{
    display:flex;flex-direction:column;gap:10px;
    padding:12px;border:1px solid #eceff4;border-radius:17px;background:#f8fafc;
    max-height:392px;overflow-y:auto;overscroll-behavior:contain;
}
.wrapthanhtoan #list-shipping-methods::-webkit-scrollbar{width:6px}
.wrapthanhtoan #list-shipping-methods::-webkit-scrollbar-thumb{background:#dfe3ea;border-radius:4px}
/* chỉ có 1 khối thông báo (chờ / nhắc chọn quận huyện) -> bỏ khung ngoài cho gọn */
.wrapthanhtoan #list-shipping-methods:has(> .shipping-hint:only-child),
.wrapthanhtoan #list-shipping-methods:has(> .shipping-loading:only-child){padding:0;border:0;background:none}

.wrapthanhtoan .shipping-option{
    position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px;
    margin:0;padding:15px 52px 15px 16px;cursor:pointer;background:#fff;
    border:1.5px solid #e4e9ef;border-radius:13px;transition:border-color .18s,background .18s;
}
.wrapthanhtoan .shipping-option:hover{border-color:var(--theme-color2,#2ECC71)}
.wrapthanhtoan .shipping-option.active{
    border-color:var(--theme-color,#27AE60);
    background:linear-gradient(100deg,var(--theme-color5,#27ae602e),#fff 65%);
}
.wrapthanhtoan .shipping-option input[type="radio"]{position:absolute;opacity:0;width:0;height:0}

/* vệt màu mép trái khi được chọn */
.wrapthanhtoan .shipping-option::before{
    content:'';position:absolute;left:-2px;top:14px;bottom:14px;width:4px;border-radius:0 4px 4px 0;
    background:var(--theme-color,#27AE60);opacity:0;transition:opacity .2s;
}
.wrapthanhtoan .shipping-option.active::before{opacity:1}

.wrapthanhtoan .shipping-info-box{display:flex;align-items:center;gap:13px;min-width:0;flex:1}
.wrapthanhtoan .shipping-logo{
    width:46px;height:46px;flex:0 0 auto;object-fit:contain;padding:5px;
    background:#fff;border:1px solid #eef1f5;border-radius:11px;
}
.wrapthanhtoan .shipping-option.active .shipping-logo{border-color:var(--theme-color5,#27ae602e)}
/* ô icon "miễn phí vận chuyển" (mau.js dựng) — cùng khuôn với logo hãng */
.wrapthanhtoan .shipping-freeico{
    width:46px;height:46px;flex:0 0 auto;display:grid;place-items:center;border-radius:11px;
    background:var(--theme-color5,#27ae602e);
}
.wrapthanhtoan .shipping-freeico > i{font-size:19px;color:var(--theme-color,#27AE60)}

/* trạng thái chờ / nhắc chọn quận huyện */
.wrapthanhtoan .shipping-loading{
    display:flex;align-items:center;gap:9px;padding:15px 16px;border-radius:14px;
    border:1px dashed var(--theme-color5,#27ae602e);background:#fbfdfc;
    font-size:13px;color:var(--theme-color,#27AE60);font-weight:600;
}
.wrapthanhtoan .shipping-hint{
    display:flex;align-items:flex-start;gap:9px;margin:0;padding:13px 15px;border-radius:14px;
    border:1px solid var(--theme-color5,#27ae602e);border-left:4px solid var(--theme-color,#27AE60);
    background:linear-gradient(100deg,var(--theme-color5,#27ae602e),#fff 70%);
    font-size:12.8px;color:#41566b;line-height:1.55;
}
.wrapthanhtoan .shipping-hint > i{color:var(--theme-color,#27AE60);margin-top:2px;flex:0 0 auto}
.wrapthanhtoan .shipping-hint b{color:#0f172a}

.wrapthanhtoan .shipping-name{
    display:block;font-weight:700;font-size:14px;color:#0f172a;line-height:1.35;
    overflow:hidden;text-overflow:ellipsis;
}
.wrapthanhtoan .shipping-option.active .shipping-name{color:var(--theme-color,#27AE60)}
.wrapthanhtoan .shipping-eta{display:block;margin-top:2px;font-size:11.8px;color:#8b93a1;line-height:1.45}
.wrapthanhtoan .shipping-price{
    flex:0 0 auto;font-weight:800;font-size:15px;white-space:nowrap;
    color:var(--theme-color,#27AE60);
}

/* dấu tick góc phải */
.wrapthanhtoan .shipping-option::after{
    content:'\f00c';font-family:"Font Awesome 6 Pro","Font Awesome 5 Pro","FontAwesome";font-weight:900;
    position:absolute;right:15px;top:50%;transform:translateY(-50%);
    width:23px;height:23px;border-radius:50%;display:grid;place-items:center;font-size:10px;
    background:#fff;border:2px solid #e0e5ec;color:transparent;transition:.2s;
}
/* popIn gốc animate 'transform: scale()' -> sẽ NUỐT MẤT translateY(-50%) canh giữa của dấu tick.
   Dùng keyframe riêng giữ nguyên phần canh giữa. */
@keyframes tickPop{from{transform:translateY(-50%) scale(0);opacity:0}to{transform:translateY(-50%) scale(1);opacity:1}}
.wrapthanhtoan .shipping-option.active::after{
    background:var(--theme-color,#27AE60);border-color:var(--theme-color,#27AE60);color:#fff;
    animation:tickPop .3s cubic-bezier(.175,.885,.32,1.275) both;
}

/* ---------------------------------------------------------------
   PHƯƠNG THỨC THANH TOÁN  (.payment-container / .payment-item)
   --------------------------------------------------------------- */
/* Cột trái phẳng đồng bộ: thẻ địa chỉ (.card-custom) và thẻ thanh toán cùng bỏ đổ bóng,
   phân tách bằng viền + bo góc. Thẻ tóm tắt bên phải vẫn giữ bóng để nổi lên trên. */
.wrapthanhtoan .card-custom{
    border:1px solid #eceff4;border-radius:22px;box-shadow:none;transition:border-color .2s;
}
.wrapthanhtoan .payment-container{
    background:#fff;border:1px solid #eceff4;border-radius:22px;padding:24px 26px;
    box-shadow:none;margin-bottom:24px;
}
.wrapthanhtoan .payment-header{margin-bottom:16px}
.wrapthanhtoan .payment-header .section-title{
    display:flex;align-items:center;gap:10px;margin:0;
    font-size:17px;font-weight:800;color:#0f172a;letter-spacing:-.01em;
}
.wrapthanhtoan .payment-header .section-title::before{
    content:'\f555';font-family:"Font Awesome 6 Pro","Font Awesome 5 Pro","FontAwesome";font-weight:900;
    width:32px;height:32px;flex:0 0 auto;border-radius:10px;display:grid;place-items:center;
    background:var(--theme-color5,#27ae602e);color:var(--theme-color,#27AE60);font-size:14px;
}

.wrapthanhtoan .payment-list{display:flex;flex-direction:column;gap:10px}

.wrapthanhtoan .payment-item{border:0;margin:0;cursor:pointer;position:relative}
.wrapthanhtoan .payment-item input[type="radio"]{position:absolute;opacity:0;width:0;height:0}

.wrapthanhtoan .payment-content{
    display:flex;align-items:center;gap:13px;padding:13px 15px;
    border:1.5px solid #e4e9ef;border-radius:13px;background:#fff;
    transition:border-color .18s,background .18s;
}
.wrapthanhtoan .payment-item:hover .payment-content{border-color:var(--theme-color2,#2ECC71)}
.wrapthanhtoan .payment-item input[type="radio"]:checked + .payment-content{
    border-color:var(--theme-color,#27AE60);
    background:linear-gradient(100deg,var(--theme-color5,#27ae602e),#fff 65%);
}

.wrapthanhtoan .payment-icon{
    width:46px;height:46px;margin:0;flex:0 0 auto;padding:6px;
    display:flex;align-items:center;justify-content:center;
    background:#fff;border:1px solid #eef1f5;border-radius:11px;
}
.wrapthanhtoan .payment-item input[type="radio"]:checked + .payment-content .payment-icon{border-color:var(--theme-color5,#27ae602e)}
.wrapthanhtoan .payment-icon img{max-width:100%;max-height:100%;object-fit:contain}

.wrapthanhtoan .payment-info{flex:1;min-width:0}
.wrapthanhtoan .payment-name{font-size:14px;font-weight:700;color:#0f172a;margin-bottom:2px;line-height:1.35}
.wrapthanhtoan .payment-item input[type="radio"]:checked + .payment-content .payment-name{color:var(--theme-color,#27AE60)}
.wrapthanhtoan .payment-desc{font-size:11.8px;color:#8b93a1;line-height:1.45}

.wrapthanhtoan .check-mark{
    width:23px;height:23px;flex:0 0 auto;border-radius:50%;position:relative;
    background:#fff;border:2px solid #e0e5ec;transition:.2s;
    display:grid;place-items:center;
}
.wrapthanhtoan .payment-item input[type="radio"]:checked + .payment-content .check-mark{
    background:var(--theme-color,#27AE60);border-color:var(--theme-color,#27AE60);
}
/* bỏ dấu tick vẽ bằng border cũ, dùng icon Pro cho sắc nét */
.wrapthanhtoan .payment-item input[type="radio"]:checked + .payment-content .check-mark::after{
    content:'\f00c';font-family:"Font Awesome 6 Pro","Font Awesome 5 Pro","FontAwesome";font-weight:900;
    position:static;width:auto;height:auto;border:0;transform:none;
    font-size:10px;color:#fff;line-height:1;
    animation:popIn .3s cubic-bezier(.175,.885,.32,1.275) both;
}

@media (prefers-reduced-motion:reduce){
    .wrapthanhtoan .shipping-option,
    .wrapthanhtoan .payment-content{transition:none}
    .wrapthanhtoan .shipping-option.active::after,
    .wrapthanhtoan .payment-item input[type="radio"]:checked + .payment-content .check-mark::after{animation:none}
}

@media (max-width:575px){
    .wrapthanhtoan .payment-container{padding:18px 17px;border-radius:18px}
    .wrapthanhtoan .shipping-option{padding:13px 46px 13px 13px;gap:10px}
    .wrapthanhtoan .shipping-logo,
    .wrapthanhtoan .shipping-freeico,
    .wrapthanhtoan .payment-icon{width:40px;height:40px}
    .wrapthanhtoan .shipping-price{font-size:14px}
    .wrapthanhtoan .payment-content{padding:11px 13px;gap:11px}
}


/* ============================================================================
   CHUYỂN KHOẢN VietQR — khối QR ở trang đặt hàng thành công / tra cứu đơn  (v33)
   Tài khoản nhận tiền khai ở admin/paymentsetup ▸ "Chuyển khoản ngân hàng (VietQR)".
   ========================================================================== */
.bqr{
    margin:22px auto 6px;max-width:620px;text-align:left;
    border:1px solid var(--theme-color5,#27ae602e);border-radius:18px;overflow:hidden;background:#fff;
}
.bqr-hd{
    display:flex;align-items:center;gap:9px;padding:13px 18px;font-size:14px;font-weight:800;color:#fff;
    background:linear-gradient(115deg,var(--theme-color,#27AE60),var(--theme-color2,#2ECC71));
}
.bqr-body{display:flex;gap:20px;padding:18px;align-items:flex-start}
.bqr-img{flex:0 0 auto;width:190px}
.bqr-img img{
    width:100%;display:block;border-radius:14px;background:#fff;
    border:1px solid var(--theme-color5,#27ae602e);padding:8px;
}
.bqr-info{flex:1;min-width:0}
.bqr-row{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:8px 0;border-bottom:1px dashed #eceff4;font-size:13px;color:var(--theme-color3,#7F8C8D);
}
.bqr-row:last-of-type{border-bottom:0}
.bqr-row > b{font-weight:800;color:#0f172a;text-align:right;word-break:break-all}
.bqr-row > b.cp{cursor:pointer;transition:color .15s}
.bqr-row > b.cp i{font-size:11px;color:var(--theme-color4,#95A5A6);margin-left:4px}
.bqr-row > b.cp:hover,.bqr-row > b.cp:hover i{color:var(--theme-color,#27AE60)}
.bqr-row > b.cp.ok,.bqr-row > b.cp.ok i{color:var(--theme-color,#27AE60)}
.bqr-row > b.cp.ok::after{content:' đã copy';font-size:11px;font-weight:700}
.bqr-amt{font-size:17px!important;color:var(--theme-color,#27AE60)!important}
.bqr-note{
    margin:12px 0 0;padding:10px 12px;border-radius:10px;background:#f8fafc;border:1px solid #eceff4;
    font-size:12px;color:#4f5d5e;line-height:1.6;
}
.bqr-note > i{color:var(--theme-color,#27AE60);margin-right:4px}
.bqr-note b{color:#0f172a}

@media (max-width:575px){
    .bqr-body{flex-direction:column;align-items:center;gap:14px}
    .bqr-img{width:210px}
    .bqr-info{width:100%}
}

/* Đã nhận chuyển khoản (SePay tự dò) — thay hẳn khối QR bằng trạng thái thành công to rõ,
   khách không phải tự đọc dòng ghi chú nhỏ mới biết đã chuyển được hay chưa. */
.bqr-hd.bqr-hd-ok{background:linear-gradient(115deg,var(--theme-color,#27AE60),var(--theme-color2,#2ECC71))}
.bqr-paid{display:none;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:34px 24px 30px}
.bqr-paid-ic{width:78px;height:78px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    background:radial-gradient(circle,rgba(39,174,96,.14),rgba(39,174,96,0) 70%);margin-bottom:6px;position:relative}
.bqr-paid-ic svg{width:52px;height:52px}
.bqr-paid-ic .checkmark__circle{stroke:var(--theme-color,#27AE60)}
.bqr-paid-ic .checkmark__check{stroke:var(--theme-color,#27AE60)}
.bqr-paid-ic::before,.bqr-paid-ic::after{content:'';position:absolute;inset:0;border-radius:50%;
    border:2px solid var(--theme-color,#27AE60);opacity:0;animation:bqrPulse 1.8s ease-out infinite}
.bqr-paid-ic::after{animation-delay:.6s}
@keyframes bqrPulse{0%{transform:scale(.8);opacity:.55}100%{transform:scale(1.7);opacity:0}}
.bqr-paid-tt{font-size:19px;font-weight:800;color:#0f172a;margin-top:4px;
    animation:bqrFadeUp .45s ease both .15s}
.bqr-paid-amt{font-size:26px;font-weight:900;color:var(--theme-color,#27AE60);letter-spacing:-.3px;
    animation:bqrFadeUp .45s ease both .28s}
.bqr-paid-sub{font-size:13px;color:var(--theme-color3,#7F8C8D);max-width:360px;line-height:1.6;
    animation:bqrFadeUp .45s ease both .4s}
@keyframes bqrFadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
    .bqr-paid-ic::before,.bqr-paid-ic::after{animation:none;opacity:0}
    .bqr-paid-tt,.bqr-paid-amt,.bqr-paid-sub{animation:none}
}

/* ============================================================================
   HỆ THỐNG CỬA HÀNG CÒN HÀNG (modal ở trang chi tiết sản phẩm, kiểu CellphoneS)
   Class: .btn-check-store = nút mở modal; .stm* = khung + nội dung modal.
   ========================================================================== */
.btn-check-store{
    display:flex;align-items:center;justify-content:center;gap:9px;width:100%;margin-top:12px;
    border:1.5px dashed var(--theme-color2,#2ECC71);border-radius:12px;background:var(--theme-color5,#27ae602e);
    color:var(--theme-color,#27AE60);font-weight:800;font-size:13.5px;padding:12px 16px;cursor:pointer;
    transition:background .18s,border-color .18s;
}
.btn-check-store:hover{background:#fff;border-style:solid}
.btn-check-store > i{font-size:14px}

.stm-modal .modal-dialog{max-width:560px}
/* KHÔNG overflow:hidden ở modal-content — nếu không, ô gợi ý Tỉnh/Phường (position:absolute,
   xổ dài xuống dưới) sẽ bị modal cắt cụt mất phần dưới, không cuộn hết được (đã gặp lỗi này).
   Bo góc top qua .stm-head, bo góc bottom qua .stm-body thay thế cho overflow:hidden ở đây. */
.stm{border:0;border-radius:22px}
.stm-head{
    display:flex;align-items:center;gap:13px;padding:19px 22px;color:#fff;border-radius:22px 22px 0 0;
    background:linear-gradient(115deg,var(--theme-color,#27AE60),var(--theme-color2,#2ECC71));
}
.stm-head__ic{width:44px;height:44px;border-radius:14px;flex:0 0 auto;display:grid;place-items:center;background:rgba(255,255,255,.2);font-size:19px}
.stm-head__tx{flex:1;min-width:0}
.stm-head__tx h5{margin:0;font-size:17.5px;font-weight:800;letter-spacing:.2px}
.stm-head__tx p{margin:3px 0 0;font-size:12.5px;opacity:.95;line-height:1.45}
.stm-head__tx b{font-weight:900}
.stm-close{flex:0 0 auto;width:33px;height:33px;border:0;border-radius:50%;cursor:pointer;background:rgba(255,255,255,.2);color:#fff;font-size:15px;transition:background .18s}
.stm-close:hover{background:rgba(255,255,255,.36)}

.stm-body{padding:14px 22px 20px;background:#f8fafc;max-height:60vh;overflow-y:auto;border-radius:0 0 22px 22px}
.stm-body::-webkit-scrollbar{width:6px}
.stm-body::-webkit-scrollbar-thumb{background:#dfe3ea;border-radius:4px}
.stm-loading{display:flex;flex-direction:column;align-items:center;gap:10px;padding:44px 0;color:var(--theme-color3,#7F8C8D);font-size:13px}
.stm-loading > i{font-size:26px;color:var(--theme-color,#27AE60)}
.stm-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:46px 20px;text-align:center}
.stm-empty > i{font-size:34px;color:#d5dbe3;margin-bottom:4px}
.stm-empty b{font-size:14px;font-weight:800;color:var(--theme-color3,#7F8C8D)}
.stm-empty span{font-size:12.5px;color:var(--theme-color4,#95A5A6);line-height:1.5}

.stm-group{background:#fff;border:1.5px solid #e4e9ef;border-radius:14px;margin-top:10px;overflow:hidden}
.stm-group:first-child{margin-top:0}
.stm-group__hd{
    width:100%;display:flex;align-items:center;gap:10px;padding:13px 15px;border:0;background:transparent;
    cursor:pointer;font-size:13.5px;font-weight:800;color:#0f172a;text-align:left;
}
.stm-group__hd span{flex:1;display:flex;align-items:center;gap:8px;min-width:0}
.stm-group__hd span > i{color:var(--theme-color,#27AE60);font-size:13px;flex:0 0 auto}
.stm-group__hd b{background:var(--theme-color5,#27ae602e);color:var(--theme-color,#27AE60);border-radius:20px;padding:2px 10px;font-size:11.5px}
.stm-group__car{color:var(--theme-color4,#95A5A6);font-size:12px;transition:transform .18s}
.stm-group__hd.is-open .stm-group__car{transform:rotate(180deg)}
.stm-group__bd{display:none;border-top:1px dashed #e4e9ef;padding:6px 15px 10px}
.stm-group__bd.show{display:block}

.stm-dist{font-size:10.5px;font-weight:800;color:var(--theme-color3,#7F8C8D);text-transform:uppercase;letter-spacing:.4px;margin:12px 0 6px}
.stm-dist:first-child{margin-top:8px}
.stm-dist__old{display:block;font-size:10.5px;font-weight:600;color:#b5b9c2;text-transform:none;letter-spacing:0;margin-top:2px}
.stm-store{display:flex;align-items:flex-start;gap:11px;padding:10px 0;border-bottom:1px dashed #eef1f5}
.stm-store:last-child{border-bottom:0}
.stm-store__ic{width:36px;height:36px;border-radius:10px;background:var(--theme-color5,#27ae602e);color:var(--theme-color,#27AE60);display:grid;place-items:center;font-size:14px;flex:0 0 auto}
.stm-store__info{flex:1;min-width:0}
.stm-store__name{font-size:13.5px;font-weight:800;color:#0f172a}
.stm-store__addr,.stm-store__phone{font-size:12px;color:var(--theme-color3,#7F8C8D);margin-top:3px;display:flex;align-items:flex-start;gap:6px;line-height:1.5}
.stm-store__addr > i,.stm-store__phone > i{margin-top:3px;flex:0 0 auto;font-size:10px;color:var(--theme-color4,#95A5A6)}
.stm-store__side{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.stm-tag{font-size:10.5px;font-weight:800;color:var(--theme-color,#27AE60);background:var(--theme-color5,#27ae602e);border-radius:20px;padding:3px 10px;white-space:nowrap}
.stm-map{font-size:11.5px;font-weight:700;color:var(--theme-color,#27AE60);text-decoration:underline;white-space:nowrap}

@media (max-width:575px){
    .stm-modal .modal-dialog{margin:0;max-width:100%;height:100dvh;max-height:100dvh}
    .stm-modal .modal-content.stm{height:100%;border-radius:0;display:flex;flex-direction:column}
    .stm-head{padding:16px 17px}
    .stm-body{padding:10px 14px 16px;max-height:none;flex:1 1 auto}
    .stm-store__side{align-items:flex-end}
}

/* ---- bộ lọc Tỉnh/Quận trong modal Hệ thống cửa hàng — 2 ô nằm 2 bên (2 góc) ---- */
.stm-filter{display:flex;gap:10px;padding:14px 22px;background:#fff;border-top:1px solid #eceff4}
.stm-filter .stm-provwrap{flex:1 1 50%;min-width:0}
.stm-distblock{margin-bottom:2px}
@media (max-width:575px){
    .stm-filter{padding:12px 14px;flex-wrap:wrap}
    .stm-filter .stm-provwrap{flex-basis:100%}
}

/* ---- ô tìm Tỉnh (mới, kèm gợi ý tỉnh cũ) trong modal Hệ thống cửa hàng ---- */
.stm-provwrap{position:relative;flex:1;min-width:200px}
.stm-provwrap > i.fa-magnifying-glass{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:#94a3b8;font-size:12px;pointer-events:none}
.stm-provwrap input{width:100%;border:1.5px solid #e4e9ef;border-radius:10px;padding:9px 34px 9px 32px;font-size:13px;background:#f8fafc}
.stm-provwrap input:focus{outline:none;border-color:var(--theme-color,#27AE60);background:#fff}
.stm-provwrap input:disabled{background:#f1f5f9;color:#b7c0cc;cursor:not-allowed}
.stm-provwrap .stm-clearbtn{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:none;color:#94a3b8;cursor:pointer;font-size:12px;padding:4px;line-height:1}
.stm-provwrap .stm-clearbtn:hover{color:#334155}
.stm-provlist{display:none;position:absolute;left:0;right:0;top:calc(100% + 6px);background:#fff;border:1.5px solid #e4e9ef;border-radius:12px;max-height:260px;overflow-y:auto;z-index:50;box-shadow:0 16px 36px -12px rgba(15,23,42,.25)}
.stm-provlist.show{display:block}
.stm-provitem{padding:9px 14px;cursor:pointer;border-bottom:1px solid #f4f6fb}
.stm-provitem:last-child{border-bottom:0}
.stm-provitem:hover{background:var(--theme-color5,#27ae602e)}
.stm-provitem__n{font-size:13.5px;font-weight:800;color:#0f172a}
.stm-provitem__o{font-size:11.5px;color:#94a3b8;margin-top:2px}
.stm-provempty{padding:16px;text-align:center;font-size:12.5px;color:#94a3b8}

/* ---- select2 địa danh MỚI (dat-hang): tên mới đậm + tên cũ nhỏ xám bên dưới, giống ô tìm Hệ thống cửa hàng ---- */
.dd-opt{padding:2px 0}
.dd-opt__n{font-size:13.5px;font-weight:700;color:#0f172a}
.dd-opt__o{font-size:11.5px;color:#94a3b8;margin-top:2px}