:root {

  --body-font: "Open Sans", sans-serif;

  --heading-font: "Montserrat", sans-serif;

  --theme-color: #FF6B35;

  --theme-color2: #D94E1D;

  --theme-color3: #4CAF50;

  --theme-color4: #29862d;

  --theme-color5: #ffe7deab;

  --text-dark: #1e1e24;

  --text-gray: #64748b;

  --bg-light: #fcfaf9;

  --khung: 50px;

  --bg: 80px;

} 



body {

  font-family: var(--body-font);

  font-style: normal;

  font-size: 16px;

  font-weight: normal;

  color: var(--body-text-color);

  line-height: 1.8;

  top: 0 !important;

  overflow-x: hidden;

}



a {

  color:  var(--color-dark);

  display: inline-block;

  text-decoration: none;

}



a,

a:active,

a:focus,

a:hover {

  outline: none;

  -webkit-transition: all 0.3s ease-out 0s;

  -moz-transition: all 0.3s ease-out 0s;

  -o-transition: all 0.3s ease-out 0s;

  -ms-transition: all 0.3s ease-out 0s;

  transition: all 0.3s ease-out 0s;

  text-decoration: none;

}



a:hover {

  color: var(--color-blue);

}



ul {

  margin: 0;

  padding: 0;

}



li {

  list-style: none;

}

.bg{background: linear-gradient(90deg, #ff885d12 0%, #ffa98914 100%), #FFF;padding: var(--bg) 0 !important}

.kc{ padding: var(--khung) 0;}

.over{overflow: hidden;}

/* end reset */

.wrap-menu {

    background-color: #f8f9fa;

}



        /* ==============================

           DESKTOP NAVBAR STYLES

           ============================== */

           .wrap-menu .navbar {

            background-color: #ffffff;

            box-shadow: 0 4px 20px rgba(0,0,0,0.03);

            padding: 0;

            height: 80px;

            position: relative;

            z-index: 100;

        }



        .wrap-menu .container-custom {

            max-width: 1400px;

            margin: 0 auto;

            padding: 0 20px;

            height: 100%;

            display: flex;

            align-items: center;

            justify-content: space-between;

            width: 100%;

            position: relative;

        }



        .wrap-menu .navbar-brand img {

            height: 36px;

        }



        .wrap-menu .nav-link {

            color: #334155;

            font-weight: 700;

            font-size: 15px;

            padding: 28px 15px !important;

            display: flex;

            align-items: center;

            gap: 6px;

            transition: color 0.3s;

            cursor: pointer;

            position: relative;

        }



        .wrap-menu .nav-link::after {

            content: '';

            position: absolute;

            bottom: 0;

            left: 50%;

            transform: translateX(-50%);

            width: 0;

            height: 3px;

            background: var(--theme-color);

            transition: width 0.3s ease;

            border-radius: 3px 3px 0 0;

        }



        .wrap-menu .nav-link:hover {

            color: var(--theme-color);

        }



        .wrap-menu .nav-link:hover::after {

            width: 80%;

        }



        .wrap-menu .nav-link i {

            font-size: 11px;

            margin-top: 2px;

            color: #94a3b8;

            transition: transform 0.3s;

        }

        

        .wrap-menu .nav-item:hover .nav-link i {

            transform: rotate(180deg);

            color: var(--theme-color);

        }



        .wrap-menu .badge-new {

            background: #ff4646;

            color: #fff;

            font-size: 9px;

            font-weight: 800;

            padding: 3px 6px;

            border-radius: 6px;

            position: absolute;

            top: 14px;

            right: -5px;

            line-height: 1;

            box-shadow: 0 2px 5px rgba(239, 68, 68, 0.3);

        }



        .wrap-menu .nav-item {

            position: static;

        }



        .wrap-menu .btn-login {

            background: linear-gradient(90deg, var(--theme-color), #0056d2);

            color: #fff;

            font-weight: 700;

            padding: 10px 28px;

            border-radius: 50px;

            text-decoration: none;

            transition: all 0.3s;

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

        }



        .wrap-menu .btn-login:hover {

            transform: translateY(-2px);

            box-shadow: 0 6px 15px rgba(0, 104, 255, 0.3);

            color: #fff;

        }



        /* ==============================

           MEGA MENU GENERAL

           ============================== */

           .wrap-menu .mega-menu-wrapper {

            position: absolute;

            top: 100%;

            left: 0;

            width: 100%;

            background: #fff;

            border-top: 1px solid #f1f5f9;

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

            opacity: 0;

            visibility: hidden;

            transform: translateY(15px);

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

            z-index: 99;

            padding: 30px 0 40px 0;

            border-radius: 0 0 20px 20px;

        }



        .wrap-menu .nav-item:hover .mega-menu-wrapper {

            opacity: 1;

            visibility: visible;

            transform: translateY(0);

        }



        .wrap-menu .mega-content {

            max-width: 1360px;

            margin: 0 auto;

            padding: 0 20px;

        }



        /* ==============================

           HOSTING & LOGISTICS CARD STYLES

           ============================== */

           .wrap-menu .host-card {

            display: flex;

            gap: 16px;

            padding: 20px;

            border-radius: 16px;

            transition: all 0.2s ease;

            height: 100%;

            border: 1px solid transparent;

            text-decoration: none; align-items: center;

        }



        .wrap-menu .host-card:hover {

            background-color: #fffcfb;

            border-color: #dedede;

            transform: translateY(-3px);

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

        }



        .wrap-menu .host-icon {

            width: 52px;

            height: 52px;

            flex-shrink: 0;

            display: flex;

            align-items: center;

            justify-content: center;

            background: #fff;

            border-radius: 12px;

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

            border: 1px solid #f1f5f9;

            font-size: 24px;

            color: var(--theme-color);margin-right: 7px;padding: 4px;

        }

        

        .wrap-menu .host-icon img {max-width: 100%;height: auto;}

        .wrap-menu .host-info { flex-grow: 1; }

        .wrap-menu .host-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 2px; }

        .wrap-menu .host-title {font-size: 16px;font-weight: 800;color: #0f172a;margin: 0;font-family: var(--heading-font);}

        .wrap-menu .host-badge {background: #ff4646;color: white;font-size: 10px;padding: 3px 8px;border-radius: 20px;font-weight: 700;text-transform: uppercase;}

        .wrap-menu .host-desc {font-size: 13.5px;color: #64748b;margin-bottom: 12px;line-height: 1.5;font-weight: 500;margin-top: 1px !important;}

        

        /* Speed bar & Features */

        .wrap-menu .speed-row { display: flex; align-items: center; gap: 10px; font-size: 12px; color: #64748b; margin-bottom: 10px; font-weight: 600; }

        .wrap-menu .speed-track { width: 100px; height: 6px; background: #e2e8f0; border-radius: 10px; overflow: hidden; }

        .wrap-menu .speed-bar {height: 100%;background: linear-gradient(90deg, var(--theme-color), var(--theme-color2));border-radius: 10px;}



        /* ==============================

           LOGISTICS SPECIFIC STYLES

           ============================== */

           /* Tracking Box */

           .wrap-menu .logistics-track-box {

            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);

            border-radius: 16px;

            padding: 30px;

            color: #fff;

            height: 100%;

            display: flex;

            flex-direction: column;

            justify-content: center;

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

        }

        .wrap-menu .logi-track-title { font-size: 20px; font-weight: 800; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }

        .wrap-menu .logi-track-desc { font-size: 14px; opacity: 0.8; margin-bottom: 20px; line-height: 1.5; }

        .wrap-menu .logi-input-group { position: relative; display: flex; background: rgba(255,255,255,0.1); border-radius: 8px; padding: 4px; border: 1px solid rgba(255,255,255,0.1); }

        .wrap-menu .logi-input { background: transparent; border: none; color: #fff; padding: 10px 15px; width: 100%; outline: none; font-size: 14px; }

        .wrap-menu .logi-input::placeholder { color: rgba(255,255,255,0.5); }

        .wrap-menu .logi-btn { background: var(--theme-color); color: #fff; border: none; padding: 8px 15px; border-radius: 6px; cursor: pointer; font-weight: 600; transition: background 0.2s; }

        .wrap-menu .logi-btn:hover { background: #2563eb; }

        

        .wrap-menu .logi-support-link { margin-top: 25px; font-size: 13px; color: #94a3b8; display: flex; align-items: center; gap: 8px; }

        .wrap-menu .logi-support-link i { color: #22d3ee; }



        /* Logistics Icons Customization */

        .wrap-menu .host-icon.ship { color: #0284c7; background: #f6f6f6; border-color: #ffd5c5;width: 50px}

        .wrap-menu .host-icon.ship img{max-width: 100%;height: auto;}

        .wrap-menu .host-icon.plane { color: #d97706; background: #fef3c7; border-color: #fde68a; }

        .wrap-menu .host-icon.truck { color: #059669; background: #d1fae5; border-color: #a7f3d0; }

        .wrap-menu .host-icon.box { color: #7c3aed; background: #ede9fe; border-color: #ddd6fe; }



        /* ==============================

           DOMAIN MENU STYLES

           ============================== */

           .wrap-menu .domain-layout { display: flex; gap: 40px; }

           .wrap-menu .domain-intro-box { background: linear-gradient(145deg, #f0f0f0, #fff0da); border-radius: 16px; padding: 30px; height: 100%; display: flex; flex-direction: column; justify-content: center; }

           .wrap-menu .domain-intro-title {font-size: 24px;

    font-weight: 800;

    color: #060f25;

    line-height: 34px;}

           .wrap-menu .domain-intro-desc {color: #3b3b3b;font-weight: 600;margin-bottom: 25px;font-size: 15px;}

           .wrap-menu .domain-search-mock { background: #fff; padding: 8px; border-radius: 10px; box-shadow: 0 4px 15px rgba(59, 130, 246, 0.15); display: flex; gap: 10px; }

           .wrap-menu .mock-input { flex-grow: 1; border: none; background: transparent; padding-left: 10px; font-size: 14px; color: #94a3b8; display: flex; align-items: center; }

           .wrap-menu .mock-btn {    width: 130px;background: var(--theme-color);color: white;border: none;border-radius: 8px;padding: 8px 15px;font-size: 14px;font-weight: 600;}

           .wrap-menu .domain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

           .wrap-menu .domain-item { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 15px 20px; display: flex; flex-direction: column; align-items: flex-start; transition: all 0.3s; position: relative; overflow: hidden; }

           .wrap-menu .domain-item:hover {border-color: var(--theme-color);box-shadow: 0 8px 20px rgba(59, 130, 246, 0.1);transform: translateY(-3px);}

           .wrap-menu .domain-ext { font-size: 20px; font-weight: 800; color: #0f172a; margin-bottom: 5px; }

           .wrap-menu .domain-dot { color: #2563eb; }

           .wrap-menu .domain-prices { display: flex; flex-direction: column; }

           .wrap-menu .price-new { font-weight: 700; color: #dc2626; font-size: 15px; }

           .wrap-menu .price-old { font-size: 12px; color: #94a3b8; text-decoration: line-through; }

           .wrap-menu .badge-hot {position: absolute;top: 0;right: 0;background: var(--theme-color3);color: white;font-size: 9px;font-weight: 800;padding: 2px 8px;border-bottom-left-radius: 8px;}

           .wrap-menu .domain-transfer-link { display: inline-block; margin-top: 25px; font-weight: 700; color: #2563eb; text-decoration: none; font-size: 14px; }

           .wrap-menu .domain-transfer-link:hover { text-decoration: underline; }



        /* ==============================

           BLOG / NEWS MENU STYLES

           ============================== */

           .wrap-menu .blog-layout { display: flex; gap: 30px; }

           .wrap-menu .blog-sidebar { flex: 0 0 300px; background: #f8fafc; border-radius: 12px; padding: 8px; border: 1px solid #e2e8f0; width:200px }

           .wrap-menu .blog-sidebar img{max-width: 100%;height: auto;border-radius: 12px}

           .wrap-menu .blog-featured-card { text-decoration: none; display: block; color: inherit; }

           .wrap-menu .blog-feat-img { width: 100%; height: 160px; border-radius: 8px; overflow: hidden; margin-bottom: 15px; position: relative; }

           .wrap-menu .blog-feat-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }

           .wrap-menu .blog-featured-card:hover .blog-feat-img img { transform: scale(1.08); }

           .wrap-menu .blog-tag {background: var(--theme-color);color: #fff;font-size: 10px;font-weight: 700;padding: 4px 8px;border-radius: 4px;position: absolute;top: 10px;left: 10px;text-transform: uppercase;}

           .wrap-menu .blog-feat-title { font-size: 16px; font-weight: 700; color: #0f172a; margin-bottom: 8px; line-height: 1.4; transition: color 0.2s; }

           .wrap-menu .blog-featured-card:hover .blog-feat-title {color: var(--theme-color);}

           .wrap-menu .blog-feat-meta { font-size: 12px; color: #64748b; display: flex; align-items: center; gap: 5px; }

           .wrap-menu .blog-grid { flex-grow: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

           .wrap-menu .blog-cat-group { margin-bottom: 10px; }

           .wrap-menu .blog-cat-header { font-size: 15px; font-weight: 800; color: #0f172a; margin-bottom: 15px; display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 2px solid #f1f5f9; }

           .wrap-menu .blog-cat-header i {color: var(--theme-color);

    background: #fff3ee;

    width: 28px;

    height: 28px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 6px;

    font-size: 13px;

    margin-right: 6px;}

           .wrap-menu .blog-sub-list { list-style: none; padding: 0; margin: 0; }

           .wrap-menu .blog-sub-item { margin-bottom: 8px; }

           .wrap-menu .blog-sub-link { text-decoration: none; color: #64748b; font-size: 14px; font-weight: 500; display: block; padding: 5px 0 5px 12px; position: relative; transition: all 0.2s ease; }

           .wrap-menu .blog-sub-link::before { content: ''; position: absolute; left: 0; top: 13px; width: 4px; height: 4px; background: #cbd5e1; border-radius: 50%; transition: all 0.2s; }

           .wrap-menu .blog-sub-link:hover {color: var(--theme-color);transform: translateX(5px);}

           .wrap-menu .blog-sub-link:hover::before {background: var(--theme-color);width: 6px;height: 6px;top: 12px;}

           .wrap-menu .blog-view-all { margin-top: 10px; display: inline-flex; align-items: center; font-size: 13px; font-weight: 700; color: #2563eb; text-decoration: none; gap: 5px; }

           .wrap-menu .blog-view-all:hover { text-decoration: underline; }



           /* Generic Promo Banner */

           .wrap-menu .menu-promo-banner {

            margin-top: 30px;

            background: linear-gradient(90deg, #1e40af, #3b82f6);

            border-radius: 12px;

            padding: 12px 30px;

            display: flex;

            align-items: center;

            justify-content: space-between;

            color: white;

            font-size: 14px;

            box-shadow: 0 4px 15px rgba(37, 99, 235, 0.25);

        }



        .wrap-menu .promo-btn {

            background: #ffffff;

            color: #1e40af;

            border: none;

            padding: 8px 20px;

            border-radius: 6px;

            font-size: 13px;

            font-weight: 700;

            text-transform: uppercase;

            transition: transform 0.2s;

            text-decoration: none;

            display: inline-block;

        }

        .wrap-menu .promo-btn:hover { transform: scale(1.05); background: #f8fafc; }



        /* ==============================

           MOBILE MENU STYLES

           ============================== */

           .wrap-menu .mobile-menu-overlay {

            position: fixed;

            top: 0;

            left: 0;

            width: 100%;

            height: 100vh;

            background: #fff;

            z-index: 9999;

            display: none;

            flex-direction: column;

            overflow-y: auto;

        }

        

        .wrap-menu .mobile-header {

            display: flex;

            justify-content: space-between;

            align-items: center;

            padding: 15px 20px;

            border-bottom: 1px solid #f1f5f9;

            background: #fff;

            position: sticky; top: 0; z-index: 10;

        }

        

        .wrap-menu .mobile-close-btn { font-size: 24px; color: #334155; cursor: pointer; padding: 5px; }

        .wrap-menu .mobile-content { padding: 20px; flex-grow: 1; }

        .wrap-menu .mobile-nav-list { list-style: none; padding: 0; margin: 0; }

        .wrap-menu .mobile-nav-item { border-bottom: 1px solid #f1f5f9; }

        .wrap-menu .mobile-nav-link { display: flex; justify-content: space-between; padding: 18px 0; font-weight: 700; cursor: pointer; color: #0f172a; font-size: 16px; }

        .wrap-menu .mobile-submenu { display: none; padding-bottom: 15px; background: #f8fafc; margin: 0 -20px; padding: 10px 20px; box-shadow: inset 0 2px 6px rgba(0,0,0,0.03); }

        .wrap-menu .navbar-toggler { border: none; font-size: 24px; color: #334155; }



        .wrap-menu .mobile-submenu .host-card { border-bottom: 1px dashed #cbd5e1; padding: 15px 0; border-radius: 0; background: transparent; }

        .wrap-menu .mobile-submenu .host-card:hover { transform: none; box-shadow: none; }

        .wrap-menu .mobile-submenu .host-card:last-child { border-bottom: none; }

        

        .wrap-menu .mobile-domain-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px dashed #cbd5e1; }

        .wrap-menu .mobile-domain-ext { font-weight: 800; font-size: 16px; }

        .wrap-menu .mobile-domain-price { color: #dc2626; font-weight: 700; }



        /* Mobile Nested Level 3 */

        .wrap-menu .mobile-lvl3-title { font-weight: 700; color: #1e293b; margin-top: 15px; margin-bottom: 8px; font-size: 14px; display: flex; align-items: center; gap: 8px; }

        .wrap-menu .mobile-lvl3-list { list-style: none; padding-left: 20px; border-left: 2px solid #e2e8f0; margin-left: 5px; }

        .wrap-menu .mobile-lvl3-link { display: block; padding: 6px 0; color: #64748b; font-size: 14px; text-decoration: none; }

        

        .wrapheader {

            background-color: var(--theme-color); /* Elegant Dark Navy */

            color: #ffffff;

            position: relative;

            z-index: 1000;

        }



        .wrapheader .top-bar-premium {

            padding: 10px 0;

            font-size: 0.875rem;

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

        }



        .wrapheader .contact-link {

            color: rgba(255, 255, 255, 0.9);

            text-decoration: none;

            display: inline-flex;

            align-items: center;

            transition: all 0.3s ease;

            margin-right: 24px;

        }



        .wrapheader .contact-link i {

            margin-right: 8px;

            color: #ffffff; /* Soft blue accent */

            font-size: 1.1rem;

        }



        .wrapheader .contact-link:hover {

            color: #ffffff;

            transform: translateY(-1px);

        }



        .wrapheader .lang-dropdown {

            position: relative;

            cursor: pointer;

            padding: 0 15px;

            display: inline-flex;

            align-items: center;

            user-select: none;

        }



        .wrapheader .lang-dropdown i.globe {

            margin-right: 8px;

            color: #ffffff;

        }



        .wrapheader .lang-dropdown i.chevron {

            margin-left: 6px;

            font-size: 0.7rem;

            transition: transform 0.3s ease;

        }



        .wrapheader .lang-dropdown.active i.chevron {

            transform: rotate(180deg);

        }



        .wrapheader .lang-menu {

            position: absolute;

            top: 100%;

            right: 0;

            background: #ffffff;

            color: #1e293b;

            min-width: 140px;

            border-radius: 12px;

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

            padding: 8px;

            margin-top: 10px;

            opacity: 0;

            visibility: hidden;

            transform: translateY(10px);

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

            z-index: 1001;

        }



        .wrapheader .lang-menu.show {

            opacity: 1;

            visibility: visible;

            transform: translateY(0);

        }



        .wrapheader .lang-item {

            padding: 8px 12px;

            border-radius: 8px;

            display: flex;

            align-items: center;

            gap: 10px;

            transition: background 0.2s;

            text-decoration: none;

            color: #1e293b;

            font-weight: 500;

        }



        .wrapheader .lang-item:hover {

            background: #eafcff;

            color: var(--theme-color2);

        }



        .wrapheader .social-group {

            display: flex;

            align-items: center;

            gap: 12px;

            margin-left: 20px;

            padding-left: 20px;

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

        }



        .wrapheader .social-link {

            color: rgba(255, 255, 255, 0.8);

            width: 32px;

            height: 32px;

            display: flex;

            align-items: center;

            justify-content: center;

            border-radius: 50%;

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

            transition: all 0.4s ease;

            text-decoration: none;

        }



        .wrapheader .social-link:hover {

            background: #ffffff;

            color: var(--theme-color);

            transform: translateY(-3px) scale(1.1);

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

        }



        .wrapheader .divider-vertical {

            width: 1px;

            height: 16px;

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

            margin: 0 10px;

        }

        .account-dropdown-wrapper .dropdown-container {

            position: relative;

        }



        /* Toggle Button Styles */

        .account-dropdown-wrapper .btn-account-trigger {

            background: #ffffff;

            border: 1.5px solid #e2e8f0;

            padding: 10px 20px;

            border-radius: 14px;

            font-weight: 700;

            color: #0f172a;

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

            display: flex;

            align-items: center;

            gap: 12px;

            cursor: pointer;

            box-shadow: 0 1px 2px rgba(0,0,0,0.05);

        }



        .account-dropdown-wrapper .btn-account-trigger:hover {

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

            background: #f8fafc;

            transform: translateY(-1px);

        }



        .account-dropdown-wrapper .btn-account-trigger.active {

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

            box-shadow: 0 0 0 4px rgb(219 217 251 / 10%);

        }



        .account-dropdown-wrapper .btn-account-trigger .user-avatar-small {

            width: 28px;

            height: 28px;

            border-radius: 50%;

            object-fit: cover;

            background: #f1f5f9;

            display: flex;

            align-items: center;

            justify-content: center;

            font-size: 14px;

            color: var(--theme-color);

        }



        .account-dropdown-wrapper .btn-account-trigger .chevron-icon {

            font-size: 0.75rem;

            transition: transform 0.3s ease;

            color: #64748b;

        }



        .account-dropdown-wrapper .btn-account-trigger.active .chevron-icon {

            transform: rotate(180deg);

        }



        /* Dropdown Panel */

        .account-dropdown-wrapper .dropdown-panel {

            position: absolute;

            top: calc(100% + 15px);

            right: 0;

            width: 380px;

            background: #ffffff;

            border-radius: 24px;

            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);

            border: 1px solid #f1f5f9;

            padding: 32px;

            opacity: 0;

            visibility: hidden;

            transform: translateY(15px) scale(0.95);

            transform-origin: top right;

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

            z-index: 1100;

        }



        .account-dropdown-wrapper .dropdown-panel.show {

            opacity: 1;

            visibility: visible;

            transform: translateY(0) scale(1);

        }

        /* Generic Header in Dropdown */

        .account-dropdown-wrapper .panel-header .title {

            font-weight: 800;

            font-size: 22px;

            color: #0f172a;

            margin-bottom: 6px;

            letter-spacing: -0.02em;

        }



        .account-dropdown-wrapper .panel-header p {

            font-size: 14px;

            color: #64748b;

            margin-bottom: 24px;

        }



        /* STATE: NOT LOGGED IN */

        .account-dropdown-wrapper .auth-state-guest .form-label {

            font-weight: 700;

            font-size: 13px;

            color: #0f172a;

            margin-bottom: 8px;

        }



        .account-dropdown-wrapper .auth-state-guest .form-control {

            border-radius: 12px;

            padding: 12px 16px;

            border: 1.5px solid #f1f5f9;

            background: #f8fafc;

            font-size: 14px;

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

            color: #0f172a;

        }



        .account-dropdown-wrapper .auth-state-guest .form-control:focus {

            box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);

            border-color: #4f46e5;

            background: #ffffff;

            outline: none;

        }



        /* Password Eye Integration */

        .account-dropdown-wrapper .password-input-wrapper {

            position: relative;

        }



        .account-dropdown-wrapper .password-input-wrapper .form-control {

            padding-right: 48px;

        }



        .account-dropdown-wrapper .password-toggle-btn {

            position: absolute;

            right: 12px;

            top: 50%;

            transform: translateY(-50%);

            background: none;

            border: none;

            color: #64748b;

            padding: 8px;

            cursor: pointer;

            transition: all 0.3s ease;

            display: flex;

            align-items: center;

            justify-content: center;

            font-size: 16px;

            z-index: 5;

        }



        .account-dropdown-wrapper .password-toggle-btn:hover {

            color: var(--theme-color);

        }



        .account-dropdown-wrapper .btn-primary-action {

            background: var(--theme-color);

            color: #ffffff;

            border: none;

            width: 100%;

            padding: 14px;

            border-radius: 14px;

            font-weight: 600;

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

            margin-top: 10px;

        }



        .account-dropdown-wrapper .btn-primary-action:hover {

            background: var(--theme-color2);

            transform: translateY(-2px);

            box-shadow: 0 8px 15px #ffdace;

        }



        .account-dropdown-wrapper .divider {

            display: flex;

            align-items: center;

            margin: 24px 0;

            color: #e2e8f0;

            font-size: 11px;

            font-weight: 700;

            text-transform: uppercase;

            /* letter-spacing: 1px; */

        }



        .account-dropdown-wrapper .divider::before, 

        .account-dropdown-wrapper .divider::after {

            content: "";

            flex: 1;

            height: 1px;

            background: #f1f5f9;

        }



        .account-dropdown-wrapper .divider span {padding: 0 12px;color: #4d4d4d;}



        .account-dropdown-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;

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

            color: #0f172a;

        }



        .account-dropdown-wrapper .btn-social:hover { background: #f8fafc; border-color: #e2e8f0; }



        /* STATE: LOGGED IN */

        .account-dropdown-wrapper .auth-state-user .user-profile-card {

            background: #f8fafc;

            border-radius: 18px;

            padding: 20px;

            display: flex;

            align-items: center;

            gap: 15px;

            margin-bottom: 20px;

        }



        .account-dropdown-wrapper .auth-state-user .user-avatar-large {

            width: 56px;

            height: 56px;

            border-radius: 16px;

            object-fit: cover;

            border: 3px solid #ffffff;

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

        }



        .account-dropdown-wrapper .auth-state-user .user-info .title {

            font-size: 16px;

            font-weight: 800;

            margin: 0;

            color: #0f172a;

        }



        .account-dropdown-wrapper .auth-state-user .user-info p {

            font-size: 13px;

            color: #64748b;

            margin: 0;

        }



        .account-dropdown-wrapper .menu-links {

            list-style: none;

            padding: 0;

            margin: 0;

        }



        .account-dropdown-wrapper .menu-links li a {

            display: flex;

            align-items: center;

            gap: 12px;

            padding: 12px 16px;

            text-decoration: none;

            color: #64748b;

            font-size: 14px;

            font-weight: 600;

            border-radius: 12px;

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

        }



        .account-dropdown-wrapper .menu-links li a:hover {

            background: #f8fafc;

            color: var(--theme-color);

            padding-left: 20px;

        }



        .account-dropdown-wrapper .menu-links li a i {

            width: 20px;

            font-size: 1.1rem;

        }



        .account-dropdown-wrapper .btn-logout {

            margin-top: 15px;

            padding-top: 15px;

            border-top: 1px solid #f1f5f9;

        }



        .account-dropdown-wrapper .btn-logout-link {

            color: #ef4444;

            display: flex;

            align-items: center;

            gap: 12px;

            font-size: 14px;

            font-weight: 700;

            text-decoration: none;

            padding: 12px 16px;

            border-radius: 12px;

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

        }



        .account-dropdown-wrapper .btn-logout-link:hover {

            background: #fef2f2;

        }



        /* State Switching Classes */

        .account-dropdown-wrapper.is-logged-in .auth-state-guest { display: none; }

        .account-dropdown-wrapper:not(.is-logged-in) .auth-state-user { display: none; }

         .wrapslider {

            background-color: #020617; /* Rich Dark Navy */

            color: #ffffff;

            position: relative;

            overflow: hidden;

            width: 100%;

            height: 100vh;

            padding: var(--khung) 0;

        }



        /* --- Background Effects --- */

        .wrapslider .ambient-glow {

            position: absolute;

            width: 800px;

            height: 800px;

            background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, rgba(15, 23, 42, 0) 70%);

            top: -20%;

            left: -10%;

            z-index: 0;

            pointer-events: none;

        }



        /* --- Swiper Setup --- */

        .wrapslider .main-swiper {

            width: 100%;

            height: 100%;

        }



        .wrapslider .swiper-slide {

            background: transparent;

            overflow: hidden;

        }



        .wrapslider .container-fluid-custom {

            padding: 0 5vw;

            height: 100%;

        }



        /* --- Content Layout (Left) --- */

        .wrapslider .content-wrapper {

            position: relative;

            z-index: 10;

            display: flex;

            flex-direction: column;

            justify-content: center;

            height: 100%;

            padding-right: 2rem;

        }



        .wrapslider .badge-pill {

            display: inline-flex;

            align-items: center;

            gap: 8px;

            padding: 8px 16px;

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

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

            border-radius: 100px;

            font-size: 0.85rem;

            font-weight: 600;

            color: #bfdbfe;

            margin-bottom: 24px;

            backdrop-filter: blur(10px);

            width: fit-content;

        }



        .wrapslider .badge-dot {

            width: 8px;

            height: 8px;

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

            border-radius: 50%;

            box-shadow: 0 0 10px #3b82f6;

        }



        .wrapslider .title{

            font-size: 40px;

            font-weight: 800;

            line-height: 48px;

            margin-bottom: 1.5rem;

            letter-spacing: -0.02em;

        }



        .wrapslider .text-gradient {

            background: var(--theme-color);

            -webkit-background-clip: text;

            -webkit-text-fill-color: transparent;

            background-clip: text;

            background-size: 200% auto;

            animation: gradientMove 5s linear infinite;

        }



        @keyframes gradientMove {

            0% { background-position: 0% 50%; }

            50% { background-position: 100% 50%; }

            100% { background-position: 0% 50%; }

        }



        .wrapslider p.desc {

            font-size: 1.125rem;

            color: #94a3b8;

            line-height: 1.7;

            max-width: 550px;

            margin-bottom: 2.5rem;

        }



        /* Buttons */

        .wrapslider .btn-group-custom {

            display: flex;

            gap: 15px;

        }



        .wrapslider .btn-primary-glow {

            padding: 16px 32px;

            background: #ffffff;

            color: #0f172a;

            border-radius: 50px;

            font-weight: 700;

            text-decoration: none;

            transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);

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

            position: relative;

            overflow: hidden;

            border: none;

            white-space: nowrap;

        }



        .wrapslider .btn-primary-glow:hover {

            transform: translateY(-3px);

            box-shadow: 0 10px 30px rgba(255, 255, 255, 0.4);

        }



        .wrapslider .btn-secondary-outline {

            padding: 16px 32px;

            background: transparent;

            color: #ffffff;

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

            border-radius: 50px;

            font-weight: 600;

            text-decoration: none;

            transition: all 0.3s ease;

            white-space: nowrap;

        }



        .wrapslider .btn-secondary-outline:hover {

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

            border-color: #ffffff;

            color: #ffffff;

        }



        /* --- 3D Visual Layout (Right) --- */

        .wrapslider .visual-wrapper {

            position: relative;

            height: 100%;

            display: flex;

            align-items: center;

            justify-content: center;

            perspective: 1500px;

            z-index: 5;

        }



        .wrapslider .card-3d-container {

            position: relative;

            width: 100%;

            max-width: 600px;

            aspect-ratio: 4/3;

            transform-style: preserve-3d;

            transform: rotateY(-10deg) rotateX(5deg);

        }



        .wrapslider .main-img-card {

            position: absolute;

            width: 100%;

            top: 5%;

            left: 5%;

            border-radius: 24px;

            overflow: hidden;

            box-shadow: 

                -30px 30px 60px rgba(0, 0, 0, 0.5),

                0 0 0 1px rgba(255, 255, 255, 0.1) inset;

            transform: translateZ(20px);

            background: #1e293b;

        }



        .wrapslider .main-img-card img {

            max-width: 100%;

            height: auto;

        }



        /* Floating Elements */

        .wrapslider .float-element {

            position: absolute;

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

            backdrop-filter: blur(16px);

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

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

            border-radius: 16px;

            padding: 12px 20px;

            display: flex;

            align-items: center;

            gap: 12px;

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

            z-index: 20;

            transform-style: preserve-3d;

        }



        .wrapslider .float-top-right {

            top: 0;

            right: 0;

            transform: translateZ(60px) translateX(20px);

        }



        .wrapslider .float-bottom-left {

            bottom: 10%;

            left: -10%;

            transform: translateZ(80px);

            padding: 16px;

            min-width: 200px;

        }



        .wrapslider .icon-box {

            width: 44px;

            height: 44px;

            border-radius: 12px;

            display: flex;

            align-items: center;

            justify-content: center;

            font-size: 1.2rem;

            color: white;

        }



        .wrapslider .gradient-1 { background: linear-gradient(135deg, #3b82f6, #8b5cf6); }

        .wrapslider .gradient-2 { background: linear-gradient(135deg, #f59e0b, #ef4444); }

        .wrapslider .gradient-3 { background: linear-gradient(135deg, #10b981, #3b82f6); }



        /* --- Controls --- */

        .wrapslider .nav-circle {

            width: 56px;

            height: 56px;

            border-radius: 50%;

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

            display: flex;

            align-items: center;

            justify-content: center;

            color: white;

            cursor: pointer;

            transition: all 0.3s ease;

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

            backdrop-filter: blur(5px);

        }



        .wrapslider .nav-circle:hover {

            background: white;

            color: #020617;

            border-color: white;

        }



        .wrapslider .swiper-controls {

            position: absolute;

            bottom: 40px;

            left: 5vw;

            z-index: 20;

            display: flex;

            align-items: center;

            gap: 20px;

        }



        .wrapslider .swiper-pagination {

            position: static !important;

            width: auto !important;

        }

        

        .wrapslider .swiper-pagination-bullet {

            width: 30px;

            height: 3px;

            border-radius: 2px;

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

            margin: 0 4px !important;

            opacity: 1;

            transition: all 0.3s;

        }



        .wrapslider .swiper-pagination-bullet-active {

            background: var(--theme-color);

            width: 50px;

        }

        .wrap-gioithieu {

            background-color: #ffffff;

            /* Subtle background pattern for depth */

            background-image: linear-gradient(135deg, #fffbf9 0%, #ffffff 100%);

            padding: var(--khung) 0;

            overflow: hidden; 

            position: relative;

        }



        /* Decorative Background Blob */

        .wrap-gioithieu::before {

            content: '';

            position: absolute;

            top: -10%;

            right: -5%;

            width: 600px;

            height: 600px;

            background: radial-gradient(circle, rgba(244,87,37,0.03) 0%, rgba(255,255,255,0) 70%);

            border-radius: 50%;

            z-index: 0;

            pointer-events: none;

        }



        /* Typography & Colors */

        .wrap-gioithieu .text-orange {

            color: #F45725 !important;

        }

        

        .wrap-gioithieu .text-dark-blue {

            color: #0E1D34;

        }



        .wrap-gioithieu .sub-title {

            font-weight: 700;

            text-transform: uppercase;

            letter-spacing: 2px;

            font-size: 13px;

            margin-bottom: 20px;

            display: inline-flex;

            align-items: center;

            color: #ff6b35;

            background: #ff6b3517;

            padding: 8px 16px;

            border-radius: 30px;

        }



        .wrap-gioithieu h2.main-title {

            font-size: 46px;

            font-weight: 800;

            line-height: 1.15;

            margin-bottom: 25px;

            color: #0E1D34;

            position: relative;

            z-index: 1;

        }



        .wrap-gioithieu h2.main-title span.highlight {

            position: relative;

            display: inline-block;

            color: var(--theme-color);

        }



        .wrap-gioithieu p.description {

            color: #555;

            line-height: 1.9;

            font-size: 16px;

            margin-bottom: 35px;

            max-width: 95%;

        }



        /* Image Composition Left */

        .wrap-gioithieu .img-composition {

            position: relative;

            padding-left: 30px; 

            z-index: 1;

        }



        /* Dotted Pattern behind image */

        .wrap-gioithieu .pattern-grid {

            position: absolute;

            bottom: -40px;

            left: -10px;

            width: 150px;

            height: 150px;

            background-image: radial-gradient(var(--theme-color) 1.5px, transparent 1.5px);

            background-size: 15px 15px;

            opacity: 0.4;

            z-index: -1;

            animation: patternFloat 5s infinite ease-in-out alternate;

        }



        @keyframes patternFloat {

            0% { transform: translateY(0); }

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

        }



        .wrap-gioithieu .main-img-wrap {

            position: relative;

            border-radius: 20px; /* Softer corners */

            overflow: hidden;

            margin-right: 40px; 

            box-shadow: 0 20px 40px rgba(14, 29, 52, 0.1);

            border: 5px solid #fff; /* White border frame */

        }



        .wrap-gioithieu .main-img-wrap img {

            width: 100%;

            height: auto;

            display: block;

            transition: transform 0.7s ease;

        }

        

        .wrap-gioithieu .main-img-wrap:hover img {

            transform: scale(1.05);

        }



        .wrap-gioithieu .circle-img-wrap {

            position: absolute;

            top: -50px;

            right: 0px;

            width: 260px;

            height: 260px;

            border-radius: 50%;

            border: 10px solid #ffffff;

            overflow: hidden;

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

            z-index: 2;

        }



        .wrap-gioithieu .circle-img-wrap img {

            width: 100%;

            height: 100%;

            object-fit: cover;

        }



        /* Experience Badge Redesigned */

        .wrap-gioithieu .exp-badge {

            position: absolute;

            bottom: 30px;

            left: 0px;

            background: var(--theme-color);

            color: white;

            padding: 25px 25px;

            z-index: 3;

            border-radius: 15px;

            box-shadow: 4px 9px 20px rgb(180 203 237);

            text-align: center;

            min-width: 140px;

            border: 4px solid #fff;

        }



        .wrap-gioithieu .exp-badge .nb {

            font-size: 38px;

            font-weight: 800;

            margin: 0;

            line-height: 1;

        }



        .wrap-gioithieu .exp-badge span {

            font-size: 14px;

            font-weight: 600;

            text-transform: uppercase;

            letter-spacing: 1px;

            opacity: 0.9;

        }



        /* Features List */

        .wrap-gioithieu .features-list {

            display: flex;

            flex-wrap: wrap;

            margin-bottom: 40px;

            gap: 15px 0;

        }



        .wrap-gioithieu .feature-item {

            width: 50%;

            display: flex;

            align-items: center;

            font-weight: 700;

            color: #0E1D34;

            font-size: 17px;

        }



        .wrap-gioithieu .check-icon {

            width: 24px;

            height: 24px;

            background-color: #ff6b3517;

            color: var(--theme-color);

            border-radius: 50%;

            display: flex;

            align-items: center;

            justify-content: center;

            margin-right: 10px;

            font-size: 12px;

        }



        /* CTA Area */

        .wrap-gioithieu .cta-area {

            display: flex;

            align-items: center;

            gap: 35px;

            margin-bottom: 60px; 

        }



        .wrap-gioithieu .btn-custom {

            background: var(--theme-color);

            color: white;

            padding: 16px 40px;

            border-radius: 50px;

            font-weight: 700;

            text-decoration: none;

            transition: all 0.3s ease;

            display: inline-flex;

            align-items: center;

            position: relative;

            overflow: hidden;

            z-index: 1;

        }

        

        .wrap-gioithieu .btn-custom::before {

            content: '';

            position: absolute;

            top: 0; left: 0; bottom: 0; right: 0;

            background: #0E1D34;

            z-index: -1;

            transform: scaleX(0);

            transform-origin: right;

            transition: transform 0.4s ease-out;

            border-radius: 50px;

        }



        .wrap-gioithieu .btn-custom:hover {

            color: #fff;

            box-shadow: 0 10px 25px rgba(14, 29, 52, 0.3);

        }



        .wrap-gioithieu .btn-custom:hover::before {

            transform: scaleX(1);

            transform-origin: left;

        }



        .wrap-gioithieu .btn-custom i {

            margin-left: 10px;

        }



        .wrap-gioithieu .phone-box {

            display: flex;

            align-items: center;

        }



        .wrap-gioithieu .phone-icon {

            width: 55px;

            height: 55px;

            background-color: transparent;

            border: 2px solid #e5e5e5;

            border-radius: 50%;

            display: flex;

            align-items: center;

            justify-content: center;

            color: var(--theme-color);

            margin-right: 15px;

            font-size: 20px;

            transition: all 0.3s;

        }



        .wrap-gioithieu .phone-box:hover .phone-icon {

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

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

            color: #fff;

            transform: rotateY(180deg);

        }



        .wrap-gioithieu .phone-text span {

            display: block;

            font-size: 13px;

            color: #888;

            font-weight: 600;

        }



        .wrap-gioithieu .phone-text a {

            font-size: 20px;

            font-weight: 800;

            color: #0E1D34;

            text-decoration: none;

            transition: color 0.3s;

        }

        

        .wrap-gioithieu .phone-text a:hover {

            color: #F45725;

        }



        /* Floating Bottom Card */

        .wrap-gioithieu .bottom-card {

            background-color: #ffffff;

            border-radius: 20px;

            padding: 40px;

            position: relative;

            margin-top: -30px;

            z-index: 5;

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

            margin-left: auto;

            width: 100%;

            max-width: 900px;

            left: 50px;

            border-bottom: 4px solid var(--theme-color);

        }



        .wrap-gioithieu .bottom-card-item {

            display: flex;

            align-items: flex-start;

            padding: 10px;

            transition: transform 0.3s;

        }

        

        .wrap-gioithieu .bottom-card-item:hover {

            transform: translateY(-5px);

        }



        .wrap-gioithieu .icon-box {

            min-width: 70px;

            height: 70px;

            background: #f8f9fa;

            border-radius: 50%;

            display: flex;

            align-items: center;

            justify-content: center;

            margin-right: 20px;

            font-size: 30px;

            color: var(--theme-color);

            transition: 0.3s;

        }

        .wrap-gioithieu .bottom-card-item:hover .icon-box {

            background: var(--theme-color2);

            color: #fff;

        }



        .wrap-gioithieu .bottom-card-content h4 {

            font-size: 20px;

            font-weight: 800;

            color: #0E1D34;

            margin-bottom: 10px;

        }



        .wrap-gioithieu .bottom-card-content p {

            font-size: 15px;

            color: #666;

            margin: 0;

            line-height: 1.6;

        }

        

        /* Vertical Separator for Bottom Card */

        .wrap-gioithieu .vertical-sep {

            border-right: 1px solid #eee;

        }

        .wrapdv {

            color: #334155;

            padding: var(--khung) 0;

            position: relative;

            overflow: hidden;

            width: 100%;

        }

        .wrapdv .content-layer {

            position: relative;

            z-index: 10;

        }



        /* Decorative Elements */

        .wrapdv .bg-ornament {

            position: absolute;

            width: 800px;

            height: 800px;

            border-radius: 50%;

            z-index: 1;

            pointer-events: none;

            filter: blur(80px);

        }

        

        .wrapdv .ornament-1 {

            top: -20%;

            right: -10%;

            background: radial-gradient(circle, rgba(79, 70, 229, 0.08) 0%, rgba(248, 250, 252, 0) 70%);

        }

        

        .wrapdv .ornament-2 {

            bottom: -20%;

            left: -10%;

            background: radial-gradient(circle, rgba(56, 189, 248, 0.08) 0%, rgba(248, 250, 252, 0) 70%);

        }



        /* --- TYPOGRAPHY --- */

        .wrapdv .section-badge {

            display: inline-flex;

            align-items: center;

            padding: 8px 16px;

            background: #ffffff;

            color: var(--theme-color);

            border-radius: 100px;

            font-size: 0.75rem;

            font-weight: 700;

            letter-spacing: 1px;

            text-transform: uppercase;

            margin-bottom: 24px;

            box-shadow: 0 4px 20px rgba(0,0,0,0.03);

            border: 1px solid rgba(79, 70, 229, 0.1);

        }



        .wrapdv .main-title {

            font-size: clamp(2.25rem, 4vw, 3.5rem);

            font-weight: 800;

            color: #0F172A;

            line-height: 1.15;

            margin-bottom: 24px;

            letter-spacing: -0.02em;

        }



        .wrapdv .sub-description {

            font-size: 1.125rem;

            line-height: 1.7;

            color: #64748B;

            margin-bottom: 40px;

            font-weight: 400;

        }



        /* --- BUTTON --- */

        .wrapdv .btn-premium {

            background: #05070e;

            color: #ffffff;

            padding: 16px 36px;

            border-radius: 14px;

            font-weight: 600;

            text-decoration: none;

            display: inline-flex;

            align-items: center;

            gap: 12px;

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

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

            border: 1px solid transparent;

        }



        .wrapdv .btn-premium:hover {

            background: var(--theme-color);

            color: #ffffff;

            transform: translateY(-3px);

            box-shadow: 0 20px 40px -12px rgba(67, 56, 202, 0.5);

        }



        /* --- STATS --- */

        .wrapdv .stats-container {

            margin-top: 50px;

            padding-top: 30px;

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

            display: flex;

            gap: 40px;

            flex-wrap: wrap;

        }



        .wrapdv .stat-item .item {

            font-size: 2rem;

            font-weight: 800;

            color: #0F172A;

            margin: 0;

            line-height: 1;

        }



        .wrapdv .stat-item span {

            font-size: 0.85rem;

            color: #5b5b5b;

            font-weight: 600;

            margin-top: 8px;

            display: block;

        }



        /* --- CARDS --- */

        .wrapdv .service-card {

            background: #ffffff;

            padding: 40px 32px;

            border-radius: 24px;

            border: 1px solid rgb(209 208 207 / 30%);

            position: relative;

            transition: all 0.4s ease;

            display: flex;

            flex-direction: column;

            justify-content: flex-start;

            overflow: hidden; /* For hot badge positioning */

            height: 100%;

        }



        .wrapdv .service-card:hover {

            transform: translateY(-8px);

            border: 1px solid rgba(249, 115, 22, 0.3);

            box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.08);

            z-index: 2;

        }



        /* --- HOT CARD STYLES (NEW) --- */

        .wrapdv .service-card.hot-card {

            border: 1px solid rgba(249, 115, 22, 0.3); /* Viền cam nhẹ */

            background: linear-gradient(180deg, #FFFFFF 0%, #FFF7ED 100%); /* Nền ấm nhẹ */

        }



        .wrapdv .hot-badge {

            position: absolute;

            top: 16px;

            right: 16px;

            background: linear-gradient(135deg, #F97316 0%, #DB2777 100%);

            color: white;

            padding: 6px 14px;

            border-radius: 20px;

            font-size: 0.75rem;

            font-weight: 800;

            box-shadow: 0 4px 15px rgba(249, 115, 22, 0.4);

            display: flex;

            align-items: center;

            gap: 6px;

            animation: softPulse 3s infinite;

        }



        @keyframes softPulse {

            0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.4); }

            50% { transform: scale(1.05); box-shadow: 0 0 0 6px rgba(249, 115, 22, 0); }

            100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(249, 115, 22, 0); }

        }



        .wrapdv .icon-box {

            width: 64px;

            height: 64px;

            background: rgb(249 115 22 / 68%);

            border-radius: 16px;

            display: flex;

            align-items: center;

            justify-content: center;

            font-size: 1.5rem;

            color: var(--theme-color);

            margin-bottom: 24px;

            transition: all 0.4s ease;

        }

        .wrapdv .icon-box img{max-width: 100%;padding: 10px;}

        /* Icon color for HOT card */

        .wrapdv .hot-card .icon-box {

            background: rgb(249 115 22 / 68%);

            color: #EA580C;

        }



        .wrapdv .service-card:hover .icon-box {

            background: var(--theme-color);

            color: #ffffff;

            transform: rotate(-5deg) scale(1.1);

        }

        

        /* Hover state for HOT card icon */

        .wrapdv .hot-card:hover .icon-box {

            background: linear-gradient(135deg, #F97316 0%, #DB2777 100%);

        }



        .wrapdv .card-title {

            font-size: 1.35rem;

            font-weight: 700;

            color: #1E293B;

            margin-bottom: 12px;

        }



        .wrapdv .card-text {

            font-size: 0.95rem;

            color: #64748B;

            line-height: 1.6;

            flex-grow: 1;

        }



        .wrapdv .learn-more {

            font-size: 0.9rem;

            font-weight: 700;

            color: var(--theme-color);

            text-decoration: none;

            display: inline-flex;

            align-items: center;

            gap: 6px;

            opacity: 0.8;

            transition: all 0.3s;

        }

        

        /* Link color for HOT card */

        .wrapdv .hot-card .learn-more {

            color: #EA580C;

        }



        .wrapdv .service-card:hover .learn-more {

            opacity: 1;

            gap: 10px;

        }

        /* CSS Scoping */

        .wrap-quytrinh {

            padding: var(--khung) 0;

            overflow: hidden;

            position: relative;

        }

        .wrap-quytrinh * {

            box-sizing: border-box;

        }



        /* Header Styling */

        .wrap-quytrinh .section-header {

            text-align: center;

            margin-bottom: 60px;

            position: relative;

            z-index: 2;

        }



        .wrap-quytrinh .sub-title {

            color: var(--theme-color);

            font-size: 13px;

            font-weight: 800;

            text-transform: uppercase;

            letter-spacing: 3px;

            display: inline-flex;

            align-items: center;

            gap: 15px;

            margin-bottom: 15px;

            background: #ff6b3517;

            padding: 8px 16px;

            border-radius: 30px;

        }



        .wrap-quytrinh h2 {

            font-size: 48px;

            font-weight: 800;

            color: #111111;

            margin: 0;

            line-height: 1.2;

        }



        .wrap-quytrinh h2 .highlight {

            color: var(--theme-color);

            position: relative;

            display: inline-block;

        }



        /* Card Container */

        .wrap-quytrinh .process-card-wrapper {

            position: relative;

            /* padding-top: 30px; */ /* Space for the floating badge */

            height: 100%;

            transition: transform 0.3s ease;

        }



        /* Card Main Style - Clean White */

        .wrap-quytrinh .card-main {

            background: #ffffff;

            border-radius: 20px;

            position: relative;

            overflow: hidden;

            height: 100%;

            padding: 40px 30px;

            border-top-right-radius: 0; /* Cut corner */

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

            border-bottom: 3px solid transparent;

            transition: all 0.4s ease;

        }



        /* Hover: Lift and Red Border */

        .wrap-quytrinh .process-card-wrapper:hover .card-main {

            transform: translateY(-10px);

            box-shadow: 0 20px 40px rgb(210 210 210 / 15%);

            border-bottom: 3px solid var(--theme-color);

        }



        /* Corner Bite - Must match section background color */

        .wrap-quytrinh .corner-bite {

            position: absolute;

            top: -1px;

            right: -1px;

            width: 80px;

            height: 80px;

            background: #f2f3f5; /* MATCH SECTION BACKGROUND */

            border-bottom-left-radius: 24px;

            z-index: 5;

            pointer-events: none;

        }

        

        /* Badge Number */

        .wrap-quytrinh .badge-float {

            position: absolute;

            top: 0;

            right: 0;

            width: 65px;

            height: 65px;

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

            color: white;

            font-size: 24px;

            font-weight: 800;

            display: flex;

            align-items: center;

            justify-content: center;

            border-radius: 16px;

            z-index: 10;

            /* box-shadow: 0 8px 20px rgb(15 201 230 / 23%); */

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

        }



        .wrap-quytrinh .process-card-wrapper:hover .badge-float {

            transform: scale(1.1) rotate(5deg);

        }



        /* Content Layer */

        .wrap-quytrinh .card-content {

            position: relative;

            z-index: 2;

            display: flex;

            flex-direction: column;

            align-items: flex-start;

        }



        /* Icon Styling - Circle Background */

        .wrap-quytrinh .icon-box {

            width: 70px;

            height: 70px;

            background-color: rgb(249 115 22 / 68%);

            border-radius: 50%;

            display: flex;

            align-items: center;

            justify-content: center;

            font-size: 32px;

            color: var(--theme-color);

            margin-bottom: 25px;

            transition: all 0.4s ease;

        }

        .wrap-quytrinh .icon-box img{max-width: 100%;padding: 10px}

        .wrap-quytrinh .process-card-wrapper:hover .icon-box {

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

            color: #ffffff;

            transform: rotateY(180deg);

        }



        /* Line Separator */

        .wrap-quytrinh .separator-line {

            width: 50px;

            height: 3px;

            background: #eee;

            margin-bottom: 20px;

            border-radius: 2px;

            transition: width 0.3s ease, background 0.3s ease;

        }

        

        .wrap-quytrinh .process-card-wrapper:hover .separator-line {

            width: 80px;

            background: var(--theme-color);

        }



        /* Text Styling */

        .wrap-quytrinh h3 {

            font-size: 20px;

            font-weight: 800;

            margin-bottom: 12px;

            color: #1a1a1a;

            letter-spacing: -0.5px;

        }



        .wrap-quytrinh p {

            font-size: 15px;

            line-height: 1.6;

            color: #666;

            margin-bottom: 0;

        }



        /* Background Pattern Decoration (Optional visual noise) */

        .wrap-quytrinh .card-main::before {

            content: '';

            position: absolute;

            bottom: -50px;

            right: -50px;

            width: 150px;

            height: 150px;

            background: radial-gradient(circle, #f3835b17 0%, rgb(255 255 255 / 0%) 70%);

            border-radius: 50%;

            z-index: 0;

            transition: transform 0.5s ease;

        }

        

        .wrap-quytrinh .process-card-wrapper:hover .card-main::before {

            transform: scale(1.5);

        }



        /* GSAP Initial State */

        .wrap-quytrinh .gsap-card {

            opacity: 0; 

            transform: translateY(50px);

            visibility: hidden;

        }

        .backtotop {

            background-color: #f8fafc;

            color: #0f172a;

            overflow-x: hidden;

        }



        .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: #000000;

            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(15 201 230 / 29%);

        }



        .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;

        }

        .wrapfaq {

            background-color: #fcfdfe;

            color: #0f172a;

            padding: var(--khung) 0;

            overflow-x: hidden;

        }

        /* Badge & Header */

        .wrapfaq .faq-badge {

            display: inline-flex;

            align-items: center;

            padding: 8px 20px;

            background: #ff6b3517;

            color: var(--theme-color);

            border-radius: 100px;

            font-size: 0.7rem;

            font-weight: 800;

            text-transform: uppercase;

            letter-spacing: 2px;

            margin-bottom: 24px;

            border: 1px solid #ff6b3517;

        }



        .wrapfaq .main-title {

            font-weight: 800;

            font-size: 3rem;

            letter-spacing: -0.02em;

            margin-bottom: 20px;

        }



        /* Search Bar High-End */

        .wrapfaq .search-container {

            position: relative;

            max-width: 720px;

            margin: 40px auto 0;

            z-index: 10;

        }



        .wrapfaq .search-input {

            width: 100%;

            padding: 12px 32px 12px 70px;

            border-radius: 30px;

            border: 1px solid rgba(0,0,0,0.05);

            background: #ffffff;

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

            font-size: 1.15rem;

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

        }



        .wrapfaq .search-input:focus {

            outline: none;

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

            box-shadow: 0 30px 60px -15px rgba(79, 70, 229, 0.15);

        }



        .wrapfaq .search-icon {

            position: absolute;

            left: 30px;

            top: 50%;

            transform: translateY(-50%);

            color: var(--theme-color);

            font-size: 1.4rem;

        }



        /* Sidebar Nav */

        .wrapfaq .nav-card {

            background: #ffffff;

            padding: 12px;

            border-radius: 28px;

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

            border: 1px solid rgba(0,0,0,0.03);

        }



        .wrapfaq .nav-item-btn {

            display: flex;

            align-items: center;

            width: 100%;

            padding: 18px 24px;

            margin-bottom: 6px;

            border: none;

            background: transparent;

            border-radius: 20px;

            color: #475569;

            font-weight: 600;

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

        }



        .wrapfaq .nav-item-btn:hover {

            background: #ff6b3517;

            color: var(--theme-color);

        }



        .wrapfaq .nav-item-btn.active {

            background: var(--theme-color);

            color: #ffffff;

            /* box-shadow: 0 12px 24px -6px rgba(79, 70, 229, 0.4); */

        }



        /* --- CONTACT 3 KHUNG DỌC --- */

        .wrapfaq .contact-stack {

            margin-top: 25px;

            display: flex;

            flex-direction: column;

            gap: 15px;

        }



        .wrapfaq .contact-box {

            display: flex;

            align-items: center;

            padding: 20px 25px;

            border-radius: 24px;

            text-decoration: none;

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

            border: 1px solid rgba(0,0,0,0.04);

            background: white;

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

        }



        .wrapfaq .contact-box .icon-box {

            width: 50px;

            height: 50px;

            border-radius: 16px;

            display: flex;

            align-items: center;

            justify-content: center;

            margin-right: 18px;

            font-size: 1.2rem;

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

        }



        /* Style từng nút liên hệ */

        .wrapfaq .contact-box.phone { border-left: 4px solid #10b981; }

        .wrapfaq .contact-box.phone .icon-box { background: rgba(16, 185, 129, 0.1); color: #10b981; }

        

        .wrapfaq .contact-box.zalo { border-left: 4px solid #2563eb; }

        .wrapfaq .contact-box.zalo .icon-box { background: rgba(37, 99, 235, 0.1); color: #2563eb; }



        .wrapfaq .contact-box.mess { border-left: 4px solid #db2777; }

        .wrapfaq .contact-box.mess .icon-box { background: rgba(219, 39, 119, 0.1); color: #db2777; }



        .wrapfaq .contact-box:hover {

            transform: translateX(10px);

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

            background: #ffffff;

        }

        

        .wrapfaq .contact-box h6 { margin: 0; font-weight: 700; color: #0f172a; font-size: 0.95rem; }

        .wrapfaq .contact-box span {font-size: 13px;color: #6d6d6d;}



        /* Content Area */

        .wrapfaq .content-card {

            background: #ffffff;

            padding: 60px;

            border-radius: 48px;

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

            border: 1px solid rgba(0,0,0,0.02);

        }



        .wrapfaq .faq-group { display: none; }

        .wrapfaq .faq-group.active { display: block; animation: slideIn 0.5s ease; }



        /* Custom Accordion */

        .wrapfaq .custom-acc-item {

            border: none;

            background: #f8fafc;

            border-radius: 24px !important;

            margin-bottom: 20px;

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

            border: 1px solid transparent;

        }



        .wrapfaq .custom-acc-item:hover {

            background: #ffffff;

            border-color: rgba(79, 70, 229, 0.15);

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

        }



        .wrapfaq .custom-acc-btn {

            background: transparent !important;

            padding: 21px 30px;

            font-weight: 700;

            color: #0f172a;

            box-shadow: none !important;

        }



        .wrapfaq .custom-acc-btn:not(.collapsed) {

            color: var(--theme-color);

        }



        .wrapfaq .accordion-body {

            padding: 0 32px 32px;

            color: #475569;

            line-height: 1.8;

            font-size: 1.05rem;

        }



        /* Flatten Search Effect */

        .wrapfaq.is-searching .faq-group { display: block !important; }

        .wrapfaq.is-searching .faq-group h3 { display: none; }

        .wrapfaq.is-searching .custom-acc-item { margin-bottom: 15px; border: 1px solid #f1f5f9; }



        @keyframes slideIn {

            from { opacity: 0; transform: translateY(20px); }

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

        }

        .wrap-banggia {

            padding: var(--khung) 0;

            color: #4a4a4a;

            position: relative;

        }

        

        /* Container */

        .wrap-layout .container-custom {

            max-width: 1320px;

            margin: 0 auto;

            padding: 0 15px;

        }

        .wrap-layout .section-title {

            text-align: center;

            margin-bottom: 60px;

        }



        .wrap-layout .section-title h2 {

            font-size: 40px;

            font-weight: 800;

            color: #1b1b1b;width: 85%;margin: auto;

            margin-bottom: 15px;

        }



        .wrap-layout .section-title h2 span {

            background: var(--theme-color);

            -webkit-background-clip: text;

            -webkit-text-fill-color: transparent;

        }



        .wrap-layout .section-title p {

            font-size: 18px;

            color: #6c757d;

            max-width: 700px;

            margin: 0 auto;

        }



        /* Header */

        .wrap-banggia .section-title {

            text-align: center;

            margin-bottom: 60px;

        }



        .wrap-banggia .section-title h2 {

            font-size: 40px;

            font-weight: 800;

            margin-bottom: 15px;

            color: #1b1b1b;

        }



        .wrap-banggia .section-title h2 span {

            background: var(--theme-color);

            -webkit-background-clip: text;

            -webkit-text-fill-color: transparent;

        }



        .wrap-banggia .section-title p {

            font-size: 18px;

            color: #6c757d;

            max-width: 700px;

            margin: 0 auto;

        }



        /* Card Styles */

        .wrap-banggia .pricing-item {

            background: #ffffff;

            border-radius: 24px;

            padding: 40px 30px;

            transition: all 0.3s ease-in-out;

            position: relative;

            border: 1px solid #edf2f9;

            height: 100%;

            display: flex;

            flex-direction: column;

            overflow: hidden;

        }



        .wrap-banggia .pricing-item:hover {

            transform: translateY(-10px);

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

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

        }



        /* Recommended / Active Card */

        .wrap-banggia .pricing-item.recommended {

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

            box-shadow: 0 10px 30px rgba(13, 110, 253, 0.1);

        }

        

        .wrap-banggia .badge-popular {

            position: absolute;

            top: 20px;

            right: -35px;

            background: var(--theme-color3);

            color: #fff;

            padding: 5px 40px;

            transform: rotate(45deg);

            font-size: 12px;

            font-weight: 700;

            text-transform: uppercase;

            z-index: 10;

        }



        /* Card Header */

        .wrap-banggia .pricing-header {

            text-align: center;

            margin-bottom: 30px;

            padding-bottom: 30px;

            border-bottom: 1px dashed #e0e0e0;

        }



        .wrap-banggia .plan-name {

            font-size: 16px;

            font-weight: 700;

            text-transform: uppercase;

            letter-spacing: 1.5px;

            color: var(--theme-color);

            margin-bottom: 15px;

            display: inline-block;

            background: #ff6b3517;

            padding: 6px 16px;

            border-radius: 50px;

            font-family: var(--heading-font);

        }



        .wrap-banggia .pricing-item.recommended .plan-name {

            background: var(--theme-color);

            color: #fff;

        }



        .wrap-banggia .price-tag {

            display: flex;

            align-items: flex-start;

            justify-content: center;

            color: #212529;

            line-height: 1;

        }



        .wrap-banggia .price-tag .currency {

            font-size: 20px;

            font-weight: 800;

            margin-top: 5px;

            color: #272727;

            font-family: var(--heading-font);

            margin-left: 4px;

        }



        .wrap-banggia .price-tag .amount {

            font-size: 42px;

            font-weight: 800;

            letter-spacing: -1px;

        }



        .wrap-banggia .plan-desc {

            margin-top: 15px;

            color: #6c757d;

            font-size: 15px;

            font-weight: 500;

        }



        /* Feature List - Strict 2 Icons Rule */

        .wrap-banggia .feature-list {

            list-style: none;

            padding: 0;

            margin: 0 0 30px 0;

            flex-grow: 1;

        }



        .wrap-banggia .feature-list li {

            margin-bottom: 16px;

            font-size: 15px;

            display: flex;

            align-items: flex-start;

            color: #4a4a4a;

            line-height: 1.4;

        }



        .wrap-banggia .feature-list li .icon-box {

            margin-right: 12px;

            flex-shrink: 0;

            width: 24px;

            height: 24px;

            border-radius: 50%;

            display: flex;

            align-items: center;

            justify-content: center;

            font-size: 12px;

        }



        /* Check Icon Style */

        .wrap-banggia .icon-check {

            background-color: rgba(25, 135, 84, 0.1);

            color: #198754;

        }



        /* Close Icon Style */

        .wrap-banggia .icon-close {

            background-color: rgba(220, 53, 69, 0.1);

            color: #dc3545;

        }



        /* Text Styles within List */

        .wrap-banggia .feature-list li.disabled {

            color: #adb5bd;

            text-decoration: line-through;

        }



        .wrap-banggia strong {

            color: #212529;

            font-weight: 700;

        }



        /* Buttons */

        .wrap-banggia .btn-action {

            width: 100%;

            padding: 14px;

            border-radius: 12px;

            font-weight: 700;

            text-transform: uppercase;

            font-size: 14px;

            letter-spacing: 0.5px;

            text-decoration: none;

            text-align: center;

            transition: all 0.3s;

            border: 2px solid transparent;

        }



        .wrap-banggia .btn-outline-custom {

            background: transparent;

            color: var(--theme-color);

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

        }



        .wrap-banggia .btn-outline-custom:hover {

            background: var(--theme-color);

            color: #fff;

            transform: translateY(-2px);

        }



        .wrap-banggia .btn-fill-custom {

            background: var(--theme-color3);

            color: #fff;

            box-shadow: 0 4px 15px rgba(13, 110, 253, 0.3);

        }



        .wrap-banggia .btn-fill-custom:hover {

            background: var(--theme-color4);

            transform: translateY(-2px);

            box-shadow: 0 6px 20px rgba(13, 110, 253, 0.4);

            color: #fff;

        }

        .premium-testimonials {

        padding: var(--khung) 0px;

        overflow: hidden;

        position: relative;

    }

    /* Background blobs */

    .premium-testimonials .blob {

        position: absolute;

        width: 500px;

        height: 500px;

        /* Mã màu var(--theme-color) chuyển sang rgba */

        background: radial-gradient(circle, #ff6b3517 0%, rgba(255, 255, 255, 0) 70%);

        border-radius: 50%;

        z-index: 0;

        pointer-events: none;

    }



    /* Header Styling */

    .premium-testimonials .section-header {

        position: relative;

        z-index: 10;

        margin-bottom: 60px;

    }



    .premium-testimonials .badge-sub {

        display: inline-block;

        padding: 6px 16px;

        background: white;

        border: 1px solid #ff6b3517;

        border-radius: 100px;

        font-size: 13px;

        font-weight: 700;

        color: var(--theme-color); /* Thay cho var(--primary) */

        text-transform: uppercase;

        letter-spacing: 1.5px;

        margin-bottom: 15px;

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

    }



    .premium-testimonials .title-display {

        font-weight: 800;

        font-size: clamp(2.5rem, 5vw, 3.8rem);

        letter-spacing: -2px;

        line-height: 1.1;

        color: #0f172a; /* Thay cho var(--bg-dark) */

    }



    /* Swiper & Card Styles */

    .premium-testimonials .swiper-container {

        padding: 40px 20px 0px 20px !important;

        overflow: visible !important;

    }



    .premium-testimonials .testi-card-new {

        background: rgba(255, 255, 255, 0.7); /* Thay cho var(--glass) */

        backdrop-filter: blur(20px);

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

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

        border-radius: 40px;

        padding: 50px;

        display: flex;

        flex-direction: column;

        justify-content: space-between;

        transition: all 0.4s ease;

        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.04);

        position: relative;

    }



    .premium-testimonials .testi-card-new:hover {

        transform: translateY(-12px);

        border-color: var(--theme-color); /* Thay cho var(--primary-light) */

        box-shadow: 0 40px 80px rgba(99, 102, 241, 0.1);

        background: #ffffff;

    }



    .premium-testimonials .quote-mark {

        position: absolute;

        top: 40px;

        right: 40px;

        font-size: 40px;

        color: var(--theme-color); /* Thay cho var(--primary) */

        opacity: 0.1;

    }



    .premium-testimonials .stars {

        color: #fbbf24;

        margin-bottom: 25px;

        font-size: 14px;

        display: flex;

        gap: 5px;

    }



    .premium-testimonials .feedback-text {

        font-size: 1.25rem;

        line-height: 1.6;

        color: #334155;

        font-weight: 500;

        margin-bottom: 40px;

    }



    .premium-testimonials .user-info {

        display: flex;

        align-items: center;

        gap: 15px;

    }



    .premium-testimonials .user-avatar {

        width: 60px;

        height: 60px;

        border-radius: 20px;

        object-fit: cover;

        rotate: -5deg;

        transition: 0.3s;

    }



    .premium-testimonials .testi-card-new:hover .user-avatar {

        rotate: 0deg;

        border-radius: 50%;

    }



    .premium-testimonials .user-name {

        font-weight: 700;

        font-size: 1.1rem;

        color: #0f172a; /* Thay cho var(--bg-dark) */

        margin: 0;

    }



    .premium-testimonials .user-tag {

        font-size: 0.85rem;

        color: #64748b; /* Thay cho var(--text-muted) */

    }



    /* Custom Navigation */

    .premium-testimonials .nav-wrapper {

        display: flex;

        gap: 15px;

        margin-top: 40px;

    }



    .premium-testimonials .nav-btn {

        width: 54px;

        height: 54px;

        border-radius: 50%;

        border: 1px solid #e2e8f0;

        background: white;

        display: flex;

        align-items: center;

        justify-content: center;

        cursor: pointer;

        transition: 0.3s;

        color: #0f172a; /* Thay cho var(--bg-dark) */

    }



    .premium-testimonials .nav-btn:hover {

        background: var(--theme-color); /* Thay cho var(--primary) */

        color: white;

        border-color: var(--theme-color); /* Thay cho var(--primary) */

    }



    /* Pagination */

    .premium-testimonials .swiper-pagination-bullet {

        width: 12px;

        height: 12px;

        background: #cbd5e1;

        opacity: 1;

    }

    

    .premium-testimonials .swiper-pagination-bullet-active {

        width: 30px;

        border-radius: 10px;

        background: var(--theme-color) !important; /* Thay cho var(--primary) */

    }

    .wrapformlh{

            overflow: hidden;

            color: #1e293b;

        }

        .wrapformlh .info-text a:hover{color: var(--theme-color)}

        .wrapformlh .contact-card-wrapper {

            background: #ffffff;

            border-radius: 40px;

            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.08);

            overflow: hidden;

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

        }



        .wrapformlh .info-side {

            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);

            color: #ffffff;

            padding: 60px;

            height: 100%;

            position: relative;

        }



        .wrapformlh .info-side::before {

            content: '';

            position: absolute;

            top: -50px;

            right: -50px;

            width: 200px;

            height: 200px;

            background: rgba(99, 102, 241, 0.1);

            border-radius: 50%;

            filter: blur(40px);

        }



        .wrapformlh .contact-label {

            display: inline-block;

            padding: 8px 16px;

            background: rgba(99, 102, 241, 0.15);

            color: white;

            border-radius: 100px;

            font-size: 14px;

            font-weight: 700;

            margin-bottom: 24px;

            text-transform: uppercase;

            letter-spacing: 1px;

        }



        .wrapformlh .info-title {

            font-size: 42px;

            font-weight: 800;

            line-height: 1.2;

            margin-bottom: 24px;

            letter-spacing: -0.02em;

        }



        .wrapformlh .info-desc {

            color: #94a3b8;

            font-size: 17px;

            line-height: 1.7;

            margin-bottom: 48px;

        }



        .wrapformlh .contact-item {

            display: flex;

            align-items: flex-start;

            margin-bottom: 32px;

            transition: transform 0.3s ease;

        }



        .wrapformlh .contact-item:hover {

            transform: translateX(10px);

        }



        .wrapformlh .icon-box {

            width: 54px;

            height: 54px;

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

            border-radius: 16px;

            display: flex;

            align-items: center;

            justify-content: center;

            margin-right: 20px;

            font-size: 20px;

            color: var(--theme-color);

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

            transition: all 0.3s ease;

        }



        .wrapformlh .contact-item:hover .icon-box {

            background: var(--theme-color);

            color: #ffffff;

            box-shadow: 0 10px 20px rgba(99, 102, 241, 0.3);

        }



        .wrapformlh .item-content .title {

            font-size: 18px;

            font-weight: 700;

            margin-bottom: 4px;

        }



        .wrapformlh .item-content p {

            color: #94a3b8;

            margin-bottom: 0;

            font-size: 15px;

        }



        .wrapformlh .form-side {

            padding: 60px;

        }



        .wrapformlh .form-group {

            margin-bottom: 24px;

        }



        .wrapformlh .form-label {

            font-weight: 600;

            font-size: 15px;

            margin-bottom: 8px;

            color: #334155;

        }



        .wrapformlh .form-control {

            border: 2px solid #f1f5f9;

            border-radius: 14px;

            padding: 14px 20px;

            font-size: 15px;

            color: #1e293b;

            transition: all 0.3s ease;

            background-color: #f8fafc;

        }



        .wrapformlh .form-control:focus {

            background-color: #ffffff;

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

            box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);

            outline: none;

        }



        .wrapformlh textarea.form-control {

            min-height: 150px;

            resize: none;

        }



        .wrapformlh .submit-btn {

            background: var(--theme-color);

            color: #ffffff;

            border: none;

            padding: 18px 36px;

            border-radius: 16px;

            font-weight: 700;

            font-size: 16px;

            width: 100%;

            display: flex;

            align-items: center;

            justify-content: center;

            gap: 12px;

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

            cursor: pointer;

            box-shadow: 0 10px 25px -5px rgba(99, 102, 241, 0.4);

        }



        .wrapformlh .submit-btn:hover {

            transform: translateY(-3px);

            background: var(--theme-color2);

            box-shadow: 0 20px 30px -10px #ff6b3517;

        }



        .wrapformlh .submit-btn:active {

            transform: translateY(0);

        }



        .wrapformlh .social-links {

            margin-top: 60px;

            display: flex;

            gap: 15px;

        }



        .wrapformlh .social-btn {

            width: 45px;

            height: 45px;

            border-radius: 12px;

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

            color: #ffffff;

            display: flex;

            align-items: center;

            justify-content: center;

            text-decoration: none;

            transition: all 0.3s ease;

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

        }



        .wrapformlh .social-btn:hover {

            background: #ffffff;

            color: #0f172a;

            transform: translateY(-5px);

        }

        .wrapfooter {

            background-color: #ffffff;

            overflow-x: hidden;margin-top: 10px;

        }



        .wrapfooter footer {

            background-color: #0f172a;

            color: #f8fafc;

            position: relative;

            padding-top: 120px;

            padding-bottom: 40px;

        }

        .wrapfooter .titleft{    font-weight: 800;

    color: #fff;

    letter-spacing: -1px;

    font-size: 30px;}

        /* Premium Newsletter Floating Card */

        .wrapfooter .newsletter-section {

            position: relative;

            z-index: 10;

            margin-bottom: -80px;

        }



        .wrapfooter .newsletter-card {

            background: #1e293b;

            background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);

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

            border-radius: 2rem;

            padding: 3rem;

            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);

        }



        .wrapfooter .newsletter-title {

            font-weight: 700;

            color: #f8fafc;

            font-size: 28px;

            line-height: 38px;

        }



        .wrapfooter .form-control {

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

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

            border-radius: 100px;

            padding: 1rem 1.5rem;

            color: #ffffff;

            transition: all 0.3s ease;

        }



        .wrapfooter .form-control:focus {

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

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

            box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.1);

            color: #ffffff;

        }



        .wrapfooter .btn-subscribe {

            background: var(--theme-color);

            color: #ffffff;

            font-weight: 700;

            border-radius: 28px;

            padding: 1rem 2.5rem;

            border: none;

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

        }



        .wrapfooter .btn-subscribe:hover {

            background: var(--theme-color2);

            transform: translateY(-3px);

        }



        /* Main Footer Content */

        .wrapfooter .footer-brand-text {

            color: #94a3b8;

            line-height: 1.8;

            font-size: 1.05rem;

        }



        .wrapfooter .footer-heading {

            font-size: 1.125rem;

            font-weight: 700;

            margin-bottom: 2rem;

            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;

        }



        .wrapfooter .footer-links li {

            margin-bottom: 1rem;

        }



        .wrapfooter .footer-links a {

            color: #94a3b8;

            text-decoration: none;

            transition: all 0.3s ease;

            display: inline-block;

        }



        .wrapfooter .footer-links a:hover {

            color: var(--theme-color);

            transform: translateX(5px);

        }



        .wrapfooter .social-icon {

            width: 45px;

            height: 45px;

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

            display: flex;

            align-items: center;

            justify-content: center;

            border-radius: 12px;

            color: #f8fafc;

            text-decoration: none;

            transition: all 0.4s ease;

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

        }



        .wrapfooter .social-icon:hover {

            background: var(--theme-color);

            color: white;

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

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

        }



        .wrapfooter .contact-info-item {

            display: flex;

            gap: 1rem;

            margin-bottom: 1.5rem;

        }



        .wrapfooter .contact-icon {

            color: var(--theme-color);

            font-size: 1.25rem;

        }



        /* Bottom Bar */

        .wrapfooter .footer-bottom {

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

            padding-top: 2rem;

            margin-top: 4rem;

        }



        .wrapfooter .copyright {

            color: #64748b;

            font-size: 0.9rem;

        }



        .wrapfooter .legal-links a {

            color: #64748b;

            text-decoration: none;

            font-size: 0.9rem;

            margin-left: 1.5rem;

            transition: color 0.3s ease;

        }



        .wrapfooter .legal-links a:hover {

            color: #f8fafc;

        }



        /* Abstract Background Decor */

        .wrapfooter .footer-glow {

            position: absolute;

            top: 0;

            right: 0;

            width: 400px;

            height: 400px;

            background: radial-gradient(circle, rgba(56, 189, 248, 0.08) 0%, rgba(15, 23, 42, 0) 70%);

            pointer-events: none;

        }

        .wrapfooter input.form-control::placeholder {

            color: white; /* Chọn màu xám sáng hoặc màu trắng mờ */

            opacity: 1; /* Bắt buộc: Firefox mặc định giảm độ mờ, dòng này giúp màu hiển thị chuẩn */

        }

        .wrap-giaodien {

            color: #0f172a;

            position: relative;

        }



        .wrap-giaodien::before {

            content: '';

            position: absolute;

            top: 0; left: 0; right: 0; bottom: 0;

            background-image: radial-gradient(#e2e8f0 1px, transparent 1px);

            background-size: 40px 40px;

            opacity: 0.4;

            pointer-events: none;

        }



        .wrap-giaodien .container { 

            position: relative; 

            z-index: 2; 

        }



        .wrap-giaodien .section-header {

            text-align: center;

            max-width: 700px;

            margin: 0 auto 70px;

        }



        .wrap-giaodien .section-header .badge-ui {

            background: #f1f5f9;

            color: #0f172a;

            padding: 6px 16px;

            border-radius: 100px;

            font-size: 11px;

            font-weight: 700;

            text-transform: uppercase;

            letter-spacing: 1.5px;

            border: 1px solid #e2e8f0;

            margin-bottom: 20px;

            display: inline-block;

        }



        .wrap-giaodien .section-header h2 {

            font-weight: 800;

            font-size: clamp(32px, 4vw, 48px);

            line-height: 1.2;

            margin-bottom: 20px;

            color: #0f172a;

            letter-spacing: -1.5px;

        }



        .wrap-giaodien .section-header p {

            color: #64748b;

            font-size: 18px;

            line-height: 1.6;

        }



        .wrap-giaodien .template-card {

            background: #ffffff;

            border: 1px solid #e2e8f0;

            border-radius: 24px;

            padding: 16px;

            height: 100%;

            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

            display: flex;

            flex-direction: column;position: relative;

        }



        .wrap-giaodien .template-card:hover {

            transform: translateY(-8px);

            border-color: #cbd5e1;

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

        }



        .wrap-giaodien .preview-frame {

            border-radius: 16px;

            overflow: hidden;

            position: relative;

            background: #f8fafc;

            aspect-ratio: 16/11;

            border: 1px solid rgba(0,0,0,0.03);

            height: 320px;

        }



        .wrap-giaodien .preview-frame::before {

            content: '';

            position: absolute;

            top: 0; left: 0; right: 0;

            height: 24px;

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

            backdrop-filter: blur(4px);

            z-index: 2;

            border-bottom: 1px solid rgba(0,0,0,0.05);

            display: flex;

            align-items: center;

            padding-left: 12px;

            background-image: radial-gradient(circle, #ff5f56 2px, transparent 2.5px), 

            radial-gradient(circle, #ffbd2e 2px, transparent 2.5px), 

            radial-gradient(circle, #27c93f 2px, transparent 2.5px);

            background-size: 12px 12px, 12px 12px, 12px 12px;

            background-position: 8px center, 22px center, 36px center;

            background-repeat: no-repeat;

        }



        .wrap-giaodien .preview-frame img {

            width: 100%;

            height: auto;

            object-fit: cover;

            object-position: top;

            transition: transform 5s ease-in-out;

            padding-top: 24px;

        }



        .wrap-giaodien .template-card:hover .preview-frame img {

            transform: translateY(calc(-100% + 300px));

        }



        .wrap-giaodien .card-info {

            padding: 24px 8px 8px;

            flex-grow: 1;

            display: flex;

            flex-direction: column;

        }



        .wrap-giaodien .tag-meta {

            display: flex;

            align-items: center;

            gap: 8px;

            margin-bottom: 12px;

        }



        .wrap-giaodien .tag-meta span {

            font-size: 12px;

            font-weight: 600;

            color: var(--theme-color);

            letter-spacing: 0.5px;

        }



        .wrap-giaodien .card-title a {

            font-size: 19px;

            font-weight: 700;

            margin-bottom: 15px;

            color: #0f172a;

            line-height: 1.3;

            font-family: var(--heading-font);

        }

        .wrap-giaodien .card-title a:hover{color: var(--theme-color2)}

        .wrap-giaodien .feature-list {

            display: flex;

            flex-wrap: wrap;

            gap: 6px;

            margin-bottom: 25px;

        }



        .wrap-giaodien .feature-item {

            background: #f8fafc;

            padding: 4px 12px;

            border-radius: 8px;

            font-size: 12px;

            color: #64748b;

            font-weight: 500;

        }



        .wrap-giaodien .card-action {

            display: flex;

            align-items: center;

            justify-content: space-between;

            margin-top: auto;

            padding-top: 20px;

            border-top: 1px solid #e2e8f0;

        }



        .wrap-giaodien .price {

            font-size: 18px;

            font-weight: 700;

            color: #0f172a;

        }



        .wrap-giaodien .price span {

            font-size: 13px;

            color: #64748b;

            font-weight: 400;

        }



        .wrap-giaodien .btn-view {

            padding: 10px 20px;

            border-radius: 12px;

            background: #1a1a1a;

            color: #fff;

            font-size: 14px;

            font-weight: 600;

            text-decoration: none;

            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

            display: flex;

            align-items: center;

            gap: 8px;

        }



        .wrap-giaodien .btn-view:hover {

            background: var(--theme-color);

            color: #fff;

        }



        .wrap-giaodien .btn-view i {

            font-size: 12px;

            transition: transform 0.3s ease;

        }



        .wrap-giaodien .btn-view:hover i {

            transform: translateX(4px);

        }



        .wrap-giaodien .floating-badge {

            position: absolute;

            top: 35px;

            right: 25px;

            z-index: 10;

            background: var(--theme-color3);

            color: #fff;

            padding: 4px 10px;

            border-radius: 6px;

            font-size: 10px;

            font-weight: 800;

            letter-spacing: 0.5px;

        }



        .wraptitle .text-reveal-stagger {

    font-weight: 800;

    font-size: 40px;

    line-height: 48px;

    color: #212121;

    font-family: var(--heading-font);

}



.wraptitle .text-reveal-stagger .highlight-text {

    position: relative;

    z-index: 1;

    display: inline-block;

    padding: 0 4px;

    --highlight-scale: 0;

}



.wraptitle .text-reveal-stagger .highlight-text::before {

    content: '';

    position: absolute;

    top: 0px;

    left: 0;

    bottom: 0;

    right: 0;

    z-index: -1;

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

    border-radius: 4px;

    transform: scaleX(var(--highlight-scale));

    transform-origin: left center;

    will-change: transform;

}



.wraptitle .text-reveal-stagger .highlight-text,

.wraptitle .text-reveal-stagger .highlight-text .word,

.wraptitle .text-reveal-stagger .highlight-text .char {

    color: #ffffff !important;

    position: relative;

    z-index: 2;

    -webkit-text-fill-color: #ffffff !important;

    margin-top: 2px;

}

.wrapnews {

        color: #0f172a;

        overflow-x: hidden;

        padding: var(--khung) 0;

        width: 100%;

        position: relative;

    }

    .wrapnews .badge-trending {

        background: #ffffff;

        color: var(--theme-color);

        padding: 10px 20px;

        border-radius: 100px;

        font-size: 0.75rem;

        font-weight: 800;

        display: inline-flex;

        align-items: center;

        gap: 10px;

        margin-bottom: 28px;

        box-shadow: 0 4px 15px rgba(0,0,0,0.03);

        border: 1px solid rgba(99, 102, 241, 0.1);

    }



    .wrapnews .section-title {

        font-size: clamp(2.5rem, 6vw, 3.8rem);

        font-weight: 800;

        letter-spacing: -0.05em;

        line-height: 1;

        margin-bottom: 30px;

        background: linear-gradient(135deg, #0f172a 0%, #334155 100%);

        -webkit-background-clip: text;

        -webkit-text-fill-color: transparent;

    }



    .wrapnews .news-card {

        display: block;

        background: #ffffff;

        border-radius: 28px;

        text-decoration: none !important;

        height: 100%;

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

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

        position: relative;

        overflow: hidden;

        box-shadow: 0 10px 30px -15px rgba(0,0,0,0.05);

    }



    .wrapnews .news-card:hover {

        transform: translateY(-12px);

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

        border-color: rgba(99, 102, 241, 0.15);

    }



    .wrapnews .img-wrapper {

        position: relative;

        aspect-ratio: 16/11;

        overflow: hidden;

        margin: 12px;

        border-radius: 20px;

    }



    .wrapnews .img-wrapper img {

        width: 100%;

        height: 100%;

        object-fit: cover;

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

    }



    .wrapnews .news-card:hover .img-wrapper img {

        transform: scale(1.08);

    }



    .wrapnews .category-tag {

        position: absolute;

        top: 15px;

        left: 15px;

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

        backdrop-filter: blur(12px);

        padding: 8px 16px;

        border-radius: 12px;

        font-size: 0.65rem;

        font-weight: 800;

        color: var(--theme-color);

        z-index: 2;

        letter-spacing: 0.5px;

    }



    .wrapnews .card-body-content {

        padding: 20px 32px 32px 32px;

    }



    .wrapnews .meta-info {

        font-size: 0.8rem;

        color: #64748b;

        margin-bottom: 16px;

        font-weight: 600;

        display: flex;

        align-items: center;

        gap: 15px;

    }



    .wrapnews .news-h3 {

        font-size: 1.4rem;

        font-weight: 700;

        color: #0f172a;

        line-height: 1.4;

        margin-bottom: 25px;

        display: -webkit-box;

        -webkit-line-clamp: 2;

        -webkit-box-orient: vertical;

        overflow: hidden;

        transition: color 0.3s ease;

    }



    .wrapnews .news-card:hover .news-h3 {

        color: var(--theme-color);

    }



    .wrapnews .author-box {

        display: flex;

        align-items: center;

        justify-content: space-between;

        padding-top: 20px;

        border-top: 1px solid #f1f5f9;

    }



    .wrapnews .author-info {

        display: flex;

        align-items: center;

        gap: 12px;

    }



    .wrapnews .author-info img {

        width: 38px;

        height: 38px;

        border-radius: 50%;

        border: 2px solid #ffffff;

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

    }



    .wrapnews .author-name {

        font-size: 0.9rem;

        font-weight: 700;

        color: #334155;

    }



    .wrapnews .btn-circle {

        width: 42px;

        height: 42px;

        border-radius: 50%;

        background: #f8fafc;

        display: flex;

        align-items: center;

        justify-content: center;

        color: #0f172a;

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

    }



    .wrapnews .news-card:hover .btn-circle {

        background: var(--theme-color);

        color: white;

        transform: rotate(-45deg);

    }



    .wrapnews .gsap-reveal {

        opacity: 0;

        transform: translateY(40px);

        will-change: transform, opacity;

    }

        .wrapkhung {

            padding: 20px 0;

            color: #1e293b;

            overflow-x: hidden;

        }



        /* Typography & Header */

        .wrapkhung .section-header {

            margin-bottom: 48px;

            text-align: left;

        }



        .wrapkhung .section-header h2 {

            font-weight: 800;

            font-size: 2.75rem;

            letter-spacing: -0.03em;

            color: #0f172a;

            margin-bottom: 12px;

            position: relative;

            display: inline-block;

        }



        .wrapkhung .section-header p {

            color: #64748b;

            font-size: 1.15rem;

            max-width: 700px;

            line-height: 1.7;

        }



        /* Main Filter Card */

        .wrapkhung .filter-card {

            background: #ffffff;

            border-radius: 28px;

            padding: 24px 32px;

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

            border: 1px solid #e2e8f0;

        }



        .wrapkhung .filter-main-row {display: flex;align-items: center;gap: 20px;}



        /* Search Input */

        .wrapkhung .search-wrapper {

            position: relative;

            flex: 0 0 280px;

        }



        .wrapkhung .search-input {width: 100%;padding: 14px 20px 14px 48px;background: #f1f5f9;border: 2px solid transparent;border-radius: 16px;font-size: 0.95rem;font-weight: 600;color: #1e293b;transition: all 0.3s ease;}



        .wrapkhung .search-input:focus {

            outline: none;

            background: #ffffff;

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

            box-shadow: 0 0 0 4px #ffd6c9;

        }



        .wrapkhung .search-wrapper i {

            position: absolute;

            left: 18px;

            top: 50%;

            transform: translateY(-50%);

            color: #94a3b8;

            font-size: 1rem;

        }



        /* Category Scroll Container */

        .wrapkhung .category-nav-container {/* flex: 1; */position: relative;display: flex;align-items: center;overflow: hidden;padding: 0 45px;}



        .wrapkhung .category-scroll {

            display: flex;

            gap: 10px;

            overflow-x: auto;

            scroll-behavior: smooth; /* Essential for smooth JS scrolling */

            scrollbar-width: none;

            -ms-overflow-style: none;

            padding: 5px 0;

            mask-image: linear-gradient(to right, transparent, black 30px, black calc(100% - 30px), transparent);

            -webkit-mask-image: linear-gradient(to right, transparent, black 30px, black calc(100% - 30px), transparent);

        }



        .wrapkhung .category-scroll::-webkit-scrollbar {

            display: none;

        }



        /* Chips */

        .wrapkhung .cat-chip {

            position: relative;

            white-space: nowrap;

            padding: 10px 20px;

            border-radius: 12px;

            background: #ffffff;

            border: 1.5px solid #e2e8f0;

            color: #475569;

            font-weight: 700;

            font-size: 0.88rem;

            cursor: pointer;

            transition: all 0.2s ease;

            user-select: none;

        }



        .wrapkhung .cat-chip input {

            position: absolute;

            opacity: 0;

            width: 0;

            height: 0;

        }



        .wrapkhung .cat-chip:hover {

            border-color: #fff0ea;

            background: #fff0ea;

        }



        .wrapkhung .cat-chip.active {

            background: var(--theme-color);

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

            color: #ffffff;

            box-shadow: 0 8px 15px -4px rgba(99, 102, 241, 0.3);

        }



        /* Navigation Arrows */

        .wrapkhung .nav-arrow {

            position: absolute;

            width: 36px;

            height: 36px;

            border-radius: 50%;

            background: #ffffff;

            border: 1px solid #e2e8f0;

            display: flex;

            align-items: center;

            justify-content: center;

            cursor: pointer;

            z-index: 10;

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

            transition: all 0.2s ease;

            color: #475569;

        }



        .wrapkhung .nav-arrow:hover {

            background: #0f172a;

            color: #ffffff;

            border-color: #0f172a;

        }



        .wrapkhung .nav-arrow.left { left: 0; }

        .wrapkhung .nav-arrow.right { right: 0; }

        .wrapkhung .nav-arrow.disabled { opacity: 0; visibility: hidden; }



        /* Sort Box */

        .wrapkhung .actions-wrapper {

            flex-shrink: 0;

        }



        .wrapkhung .select-box {

            position: relative;

        }



        .wrapkhung .custom-select {

            appearance: none;

            padding: 14px 40px 14px 18px;

            background: #ffffff;

            border: 1.5px solid #e2e8f0;

            border-radius: 16px;

            font-weight: 700;

            font-size: 0.9rem;

            color: #1e293b;

            cursor: pointer;

            transition: all 0.3s ease;

            min-width: 160px;

        }



        .wrapkhung .custom-select:focus {

            outline: none;

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

        }



        .wrapkhung .select-box::before {

            content: '\f078';

            font-family: "Font Awesome 6 Pro";

            font-weight: 900;

            position: absolute;

            right: 18px;

            top: 50%;

            transform: translateY(-50%);

            font-size: 0.7rem;

            color: #94a3b8;

            pointer-events: none;

        }

        .wrapnutload .btn-original {

            background: transparent;

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

            color: var(--theme-color);

            padding: 11px 24px;

            border-radius: 12px;

            font-weight: 600;

            font-size: 15px;

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

            align-items: center;

            cursor: pointer;

            box-shadow: 0 4px 12px rgba(37, 131, 255, 0.08);

        }



        .wrapnutload .btn-original:hover {

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

            color: #ffffff;

            box-shadow: 0 8px 25px rgba(37, 131, 255, 0.25);

            transform: translateY(-3px);

}

.selected-filters-container {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 20px;

    padding: 0 10px;

}



.filter-tag {

    display: inline-flex;

    align-items: center;

    background-color: #f1f5f9;

    border: 1px solid #e2e8f0;

    border-radius: 50px;

    padding: 6px 14px;

    font-size: 14px;

    color: #334155;

    font-weight: 500;

    transition: all 0.2s ease;

}



.filter-tag:hover {

    background-color: #e2e8f0;

    border-color: #cbd5e1;

}

.filter-tag .remove-tag {

    margin-left: 8px;

    cursor: pointer;

    color: #94a3b8;

    font-size: 16px;

    line-height: 1;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 20px;

    height: 20px;

    border-radius: 50%;

}



.filter-tag .remove-tag:hover {

    background-color: #cbd5e1;

    color: #ef4444; /* Màu đỏ khi hover */

}

.wrap-dtgd {

            color: #0f172a;

            padding: 40px 0;

            line-height: 1.5;

        }



        .wrap-dtgd * {

            box-sizing: border-box;

        }



        .wrap-dtgd a {

            text-decoration: none;

            transition: 0.3s;

        }



        /* --- LEFT SIDE: PREVIEW --- */

        .wrap-dtgd .preview-container {

            position: sticky;

            top: 20px;

            display: flex;

            align-items: flex-start;

            gap: 20px;

        }



        .wrap-dtgd .browser-mockup {

            background: #fff;

            border-radius: 16px;

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

            overflow: hidden;

            border: 1px solid #e2e8f0;

            position: relative;

            flex: 1;

        }



        .wrap-dtgd .browser-header {

            background: #f8fafc;

            padding: 12px 20px;

            border-bottom: 1px solid #e2e8f0;

            display: flex;

            align-items: center;

            gap: 8px;

        }



        .wrap-dtgd .dot {

            width: 10px;

            height: 10px;

            border-radius: 50%;

        }

        .wrap-dtgd .dot.red { background: #ef4444; }

        .wrap-dtgd .dot.yellow { background: #f59e0b; }

        .wrap-dtgd .dot.green { background: #22c55e; }



        .wrap-dtgd .address-bar {

            background: #fff;

            border: 1px solid #e2e8f0;

            border-radius: 6px;

            padding: 4px 12px;

            font-size: 0.8rem;

            color: #64748b;

            flex: 1;

            margin-left: 12px;

            display: flex;

            align-items: center;

            justify-content: space-between;

            white-space: nowrap;

            overflow: hidden;

            text-overflow: ellipsis;

        }



        .wrap-dtgd .live-badge {

            position: absolute;

            top: 60px;

            right: 20px;

            background: #fff;

            color: #0f172a;

            font-weight: 700;

            font-size: 0.8rem;

            padding: 8px 16px;

            border-radius: 30px;

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

            z-index: 10;

            border: 1px solid #e2e8f0;

            display: flex;

            align-items: center;

            gap: 6px;

        }



        .wrap-dtgd .scroll-viewport {

            width: 100%;

            height: 500px;

            position: relative;

            overflow: hidden;

            cursor: ns-resize;

            background: #e2e8f0;

        }



        .wrap-dtgd .scroll-viewport img {

            max-width: 100%;

            height: auto;

            position: absolute;

            top: 0;

            left: 0;

            transition: transform 6s cubic-bezier(0.45, 0.05, 0.55, 0.95);

            will-change: transform;

        }



        /* Thumbnails: Left Vertical Column */

        .wrap-dtgd .thumbs-row {

            display: flex;

            flex-direction: column; 

            gap: 12px;

            flex-shrink: 0;

        }

        .wrap-dtgd .thumb-item {

            width: 60px;

            height: 60px;

            border-radius: 10px;

            border: 2px solid #e2e8f0;

            overflow: hidden;

            cursor: pointer;

            transition: 0.2s;

            opacity: 0.6;

            background: #fff;

        }

        .wrap-dtgd .thumb-item:hover, .wrap-dtgd .thumb-item.active {

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

            opacity: 1;

            transform: translateY(-2px);

        }

        .wrap-dtgd .thumb-item img {

            width: 100%;

            height: 100%;

            object-fit: cover;

        }



        /* --- RIGHT SIDE: INFO --- */

        

        .wrap-dtgd .top-tag {

            background: #fff5f2;

            color: var(--theme-color);

            font-weight: 700;

            font-size: 0.75rem;

            text-transform: uppercase;

            padding: 6px 14px;

            border-radius: 6px;

            display: inline-block;

            margin-bottom: 16px;

            border: 1px solid #ddd6fe;

        }

        .wrap-dtgd .hero-title {

            font-size: 35px;

            font-weight: 800;

            line-height: 1.2;

            margin-bottom: 24px;

            color: #0b0b0b;

        }

        .wrap-dtgd .hero-title .highlight {

            color: #7c3aed;

        }



        /* Flash Sale (Orange) */

        .wrap-dtgd .flash-sale-card {

            background: linear-gradient(90deg, #ff5e3a 0%, #f09819 100%);

            border-radius: 16px;

            padding: 20px;

            color: white;

            margin-bottom: 24px;

            box-shadow: 0 10px 25px -5px rgba(255, 94, 58, 0.4);

            position: relative;

            overflow: hidden;

        }



        .wrap-dtgd .flash-sale-card::before {

            content: '';

            position: absolute;

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

            width: 150px; height: 150px;

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

            border-radius: 50%;

        }



        .wrap-dtgd .fs-header {

            display: flex;

            justify-content: space-between;

            align-items: center;

            margin-bottom: 15px;

        }

        

        .wrap-dtgd .fs-title {

            font-size: 1.25rem;

            font-weight: 800;

            font-style: italic;

            display: flex;

            align-items: center;

            gap: 8px;

        }

        

        .wrap-dtgd .fs-badge {

            background: rgba(0,0,0,0.2);

            font-size: 0.75rem;

            padding: 4px 10px;

            border-radius: 4px;

            text-transform: uppercase;

            font-weight: 600;

        }



        .wrap-dtgd .countdown-wrap {

            display: flex;

            align-items: center;

            justify-content: space-between;

        }



        .wrap-dtgd .progress-container {

            flex: 1;

            margin-right: 20px;

        }

        .wrap-dtgd .sold-text {

            font-size: 0.85rem;

            margin-bottom: 6px;

            display: block;

            font-weight: 600;

        }

        .wrap-dtgd .fs-progress {

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

            height: 8px;

            border-radius: 10px;

            overflow: hidden;

        }

        .wrap-dtgd .fs-bar {

            background: #fff;

            height: 100%;

            border-radius: 10px;

            width: 80%;

        }



        .wrap-dtgd .timer-blocks {

            display: flex;

            gap: 6px;

        }

        .wrap-dtgd .t-block {

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

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

            width: 40px;

            height: 42px;

            border-radius: 6px;

            display: flex;

            flex-direction: column;

            align-items: center;

            justify-content: center;

            line-height: 1;

        }

        .wrap-dtgd .t-val { font-weight: 700; font-size: 1.1rem; }

        .wrap-dtgd .t-lbl { font-size: 0.5rem; text-transform: uppercase; opacity: 0.9; }



        /* Feature Box */

        .wrap-dtgd .feature-box-purple {

            background: #f1f5f9;

            border-left: 4px solid #8b5cf6;

            padding: 16px;

            border-radius: 8px;

            margin-bottom: 24px;

            display: flex;

            align-items: flex-start;

            gap: 16px;

        }

        .wrap-dtgd .fb-icon {

            background: #8b5cf6;

            color: white;

            width: 36px;

            height: 36px;

            border-radius: 8px;

            display: flex;

            align-items: center;

            justify-content: center;

            font-size: 1.1rem;

            flex-shrink: 0;

        }

        .wrap-dtgd .fb-content h5 {

            font-size: 1rem;

            font-weight: 700;

            margin-bottom: 4px;

            color: #1e293b;

        }

        .wrap-dtgd .fb-content p {

            font-size: 0.9rem;

            color: #64748b;

            margin: 0;

        }

        .wrap-dtgd .badge-pro {

            background: #8b5cf6;

            color: white;

            font-size: 0.7rem;

            padding: 1px 6px;

            border-radius: 4px;

            vertical-align: middle;

            margin-left: 4px;

        }



        /* --- UPDATED PRICING BOX --- */

        .wrap-dtgd .pricing-box {

            background: white;

            padding: 30px;

            border-radius: 20px;

            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);

            border: 1px solid #f1f5f9;

        }



        .wrap-dtgd .price-display {

            display: flex;

            align-items: center;

            justify-content: space-between; /* Spread layout */

            margin-bottom: 20px;

            padding-bottom: 20px;

            border-bottom: 1px dashed #e2e8f0;

        }

        

        .wrap-dtgd .price-left {

            display: flex;

            flex-direction: column;

        }



        .wrap-dtgd .price-final {

            font-size: 2.8rem;

            font-weight: 800;

            /* Gradient Text for "Beautiful" look */

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

            -webkit-background-clip: text;

            -webkit-text-fill-color: transparent;

            line-height: 1;

            letter-spacing: -1.5px;

            position: relative;

        }

        

        .wrap-dtgd .price-final .currency {

            font-size: 0.5em;

            vertical-align: top;

            font-weight: 700;

            -webkit-text-fill-color: #ef4444; /* Fallback for currency symbol */

            margin-left: 2px;

        }



        .wrap-dtgd .price-right {

            text-align: right;

        }



        .wrap-dtgd .price-original {

            text-decoration: line-through;

            color: #94a3b8;

            font-size: 1.1rem;

            font-weight: 500;

            margin-bottom: 4px;

        }

        

        .wrap-dtgd .discount-badge {

            display: inline-block;

            background: #fee2e2;

            color: var(--theme-color);

            font-weight: 700;

            font-size: 0.85rem;

            padding: 4px 10px;

            border-radius: 6px;

        }



        /* Buttons */

        .wrap-dtgd .btn-setup {

            background: #0f172a;

            color: white;

            width: 100%;

            padding: 16px;

            border-radius: 10px;

            font-weight: 700;

            border: none;

            display: flex;

            align-items: center;

            justify-content: center;

            gap: 10px;

            margin-bottom: 12px;

            transition: all 0.3s ease;

        }

        .wrap-dtgd .btn-setup:hover {

            background: #1e293b;

            transform: translateY(-2px);

            color: white;

        }



        .wrap-dtgd .btn-review {

            background: var(--theme-color3);

            color: white;

            width: 100%;

            padding: 16px;

            border-radius: 10px;

            font-weight: 700;

            border: none;

            display: flex;

            align-items: center;

            gap: 10px;

            margin-bottom: 12px;

            transition: all 0.3s ease;

        }

        .wrap-dtgd .btn-review:hover {

            background: var(--theme-color4);

            transform: translateY(-2px);

            color: white;

        }



        .wrap-dtgd .btn-buy {

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

            color: white;

            width: 100%;

            padding: 16px;

            border-radius: 10px;

            font-weight: 700;

            border: none;

            display: flex;

            align-items: center;

            gap: 10px;

            box-shadow: 0 4px 14px 0 rgba(124, 58, 237, 0.39);

            transition: all 0.3s ease;

        }

        .wrap-dtgd .btn-buy:hover {

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

            transform: translateY(-2px);

            color: white;

        }

        

        .wrap-dtgd .setup-form-container {

            display: none;

            margin-top: 15px;

            background: #f8fafc;

            padding: 15px;

            border-radius: 10px;

            border: 1px dashed #cbd5e1;

        }

        .wrap-dtgd .setup-input {

            width: 100%;

            padding: 10px;

            border: 1px solid #cbd5e1;

            border-radius: 6px;

            margin-bottom: 10px;

            font-size: 0.9rem;

        }

        .wrap-dtgd .setup-input:focus {

            outline: none;

            border-color: #7c3aed;

        }

        

        .wrap-dtgd .setup-loader {

            display: none;

            font-size: 0.9rem;

            color: #0f172a;

            align-items: center;

            gap: 8px;

            padding: 10px;

        }



        .wrap-dtgd .footer-info {

            margin-top: 20px;

            padding-top: 20px;

            border-top: 1px solid #e2e8f0;

            display: flex;

            align-items: center;

            gap: 10px;

            color: #64748b;

            font-size: 0.9rem;

        }

       /* reset content */

      .resetcontent *:not(.noreset):not(.noreset *) {
    box-sizing: border-box;
}

.resetcontent h1:not(.noreset *) {
    margin-bottom: 1.5rem;
    line-height: 1.25;
    font-weight: 900;
    font-size: 36px !important;
    margin-top: 0;
    letter-spacing: -0.03em;
    background: linear-gradient(135deg, var(--theme-color) 0%, var(--theme-color2) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    position: relative;
}

.resetcontent h2:not(.noreset *) {
    color: #0f172a;
    margin-bottom: 1.5rem;
    line-height: 1.3;
    font-weight: 800;
    font-size: 28px;
    padding-bottom: 12px;
    position: relative;
    border-bottom: 1px solid #e2e8f0;
}

.resetcontent h2:not(.noreset *)::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 3px;
    width: 60px;
    background: var(--theme-color);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.resetcontent h2:not(.noreset *):hover::after {
    width: 100px;
}

.resetcontent h3:not(.noreset *) {
    color: #1e293b;
    margin-top: 2.5rem;
    margin-bottom: 1.25rem;
    line-height: 1.4;
    font-size: 22px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 12px;
}

.resetcontent h3:not(.noreset *)::before {
    content: "\f121";
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    font-size: 16px;
    color: #ffffff;
    background: var(--theme-color);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.resetcontent h4:not(.noreset *) {
    color: #334155;
    margin-bottom: 1rem;
    line-height: 1.5;
    font-size: 1.25rem !important;
    font-weight: 600;
}

.resetcontent p:not(.noreset *) {
    margin-bottom: 1.5rem;
    font-size: 17px;
    color: #475569;
    line-height: 1.8;
    font-weight: 400;
}

.resetcontent strong:not(.noreset *), 
.resetcontent b:not(.noreset *) {
    font-weight: 700;
    color: #0f172a;
}

.resetcontent a:not(.noreset *) {
    color: var(--theme-color) !important;
    text-decoration: none;
    font-weight: 600;
    position: relative;
    padding-bottom: 2px;
    transition: color 0.3s ease;
}

.resetcontent a:not(.noreset *)::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--theme-color);
    transform-origin: bottom right;
    transition: transform 0.3s cubic-bezier(0.86, 0, 0.07, 1);
}

.resetcontent a:not(.noreset *):hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

.resetcontent ul:not(.noreset *), 
.resetcontent ol:not(.noreset *) {
    padding-left: 0;
    margin-bottom: 1.75rem;
    list-style: none;
}

.resetcontent ul:not(.noreset *) li {
    position: relative;
    padding-left: 36px;
    margin-bottom: 12px;
    line-height: 1.7;
    color: #475569;
}

.resetcontent ul:not(.noreset *) li::before {
    content: "\f061";
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 6px;
    font-size: 12px;
    color: var(--theme-color);
    transition: transform 0.2s ease;
}

.resetcontent ul:not(.noreset *) li:hover::before {
    transform: translateX(4px);
}

.resetcontent ol:not(.noreset *) { 
    counter-reset: agency-counter; 
}

.resetcontent ol:not(.noreset *) li {
    position: relative;
    padding-left: 48px;
    margin-bottom: 16px;
    line-height: 1.7;
    color: #475569;
    font-weight: 500;
}

.resetcontent ol:not(.noreset *) li::before {
    counter-increment: agency-counter;
    content: counter(agency-counter, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: -2px;
    width: 32px;
    height: 32px;
    background: #f1f5f9;
    color: var(--theme-color);
    font-size: 12px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.resetcontent ol:not(.noreset *) li:hover::before {
    background: var(--theme-color);
    color: #ffffff;
    border-color: var(--theme-color);
}

.resetcontent img:not(.noreset *) {
    max-width: 100%;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
    margin: 10px 0;
    display: block;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.resetcontent img:not(.noreset *):hover {
    transform: translateY(-5px) scale(1.01);
}

.resetcontent figure:not(.noreset *) {
    margin: 2.5rem 0;
    width: 100%;
}

.resetcontent figcaption:not(.noreset *) {
    margin-top: 15px;
    text-align: center;
    font-size: 0.9rem !important;
    color: #64748b;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.resetcontent blockquote:not(.noreset *) {
    position: relative;
    margin: 3rem 0;
    padding: 2.5rem 3rem;
    background: #f8fafc;
    border-left: 4px solid var(--theme-color);
    border-radius: 0 16px 16px 0;
    font-size: 1.2rem !important;
    font-weight: 500;
    color: #0f172a;
    line-height: 1.8;
}

.resetcontent blockquote::before {
    content: "\f10d";
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    position: absolute;
    top: -15px;
    left: 2rem;
    font-size: 30px;
    color: #ffffff;
    background: var(--theme-color);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.resetcontent .table-wrapper:not(.noreset *) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
    margin: 3rem 0;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
}

.resetcontent table:not(.noreset *) {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    min-width: 100%;
}

.resetcontent th:not(.noreset *) {
    background-color: #f8fafc;
    color: #0f172a;
    font-weight: 700;
    font-size: 0.95rem !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 1.25rem 1.5rem;
    text-align: left;
    border-bottom: 2px solid #e2e8f0;
}

.resetcontent td:not(.noreset *) {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.95rem !important;
    color: #475569;
    vertical-align: middle;
    transition: background-color 0.2s ease;
}

.resetcontent tr:last-child td {
    border-bottom: none;
}

.resetcontent tr:hover td {
    background-color: #f8fafc;
}

.resetcontent .noidungbg:not(.noreset *) {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 2rem 2.5rem;
    border-radius: 16px;
    margin-bottom: 3rem;
    color: #334155;
    position: relative;
    overflow: hidden;
}

.resetcontent .noidungbg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, var(--theme-color), var(--theme-color2));
}

.resetcontent .myclass:not(.noreset *) {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 2.5rem 2rem;
    margin: 3rem 0 !important;
    color: #1e293b;
    display: flex;
    gap: 24px;
    align-items: flex-start;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.resetcontent .myclass:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.08);
}

.resetcontent .myclass::before {
    content: "\f108";
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    font-size: 28px;
    color: var(--theme-color);
    background: #f1f5f9;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    flex-shrink: 0;
}

.resetcontent iframe:not(.noreset *),
.resetcontent video:not(.noreset *) {
    display: block;
    width: 100% !important;
    max-width: 800px;
    aspect-ratio: 16 / 9;
    height: auto !important;
    border-radius: 16px;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
    margin: 3rem auto !important;
    border: none;
}

@media (max-width: 1200px) {
    .resetcontent .container{ max-width: 100%; padding: 0 1.5rem; }
}

@media (max-width: 1000px) {
    .resetcontent h1:not(.noreset *){ font-size: 30px !important; }
}

@media (max-width: 768px) {
    .resetcontent h1:not(.noreset *){ font-size: 26px !important; } 
    .resetcontent h2:not(.noreset *){ font-size: 22px !important; }
    .resetcontent h3:not(.noreset *){ font-size: 20px !important; }
    .resetcontent h3:not(.noreset *)::before{width: 50px}
    .resetcontent p:not(.noreset *){ font-size: 16px !important; line-height: 1.7 !important; }
    .resetcontent blockquote:not(.noreset *){ font-size: 1.05rem !important; padding: 2.5rem 1.5rem 1.5rem 1.5rem; margin: 3rem 0 2rem; border-radius: 0 12px 12px 0; }
    .resetcontent blockquote::before { left: 1rem; top: -20px; width: 40px; height: 40px; font-size: 20px; }
    .resetcontent .myclass:not(.noreset *){ padding: 1.5rem; flex-direction: column; gap: 15px; margin: 2rem 0 !important; }
    .resetcontent .myclass::before { width: 50px; height: 50px; font-size: 20px; border-radius: 12px; }
    
    .resetcontent table:not(.noreset *) {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    .resetcontent table:not(.noreset *)::-webkit-scrollbar {
        height: 6px;
        display: block;
    }

    .resetcontent table:not(.noreset *)::-webkit-scrollbar-track {
        background: #f1f5f9;
        border-radius: 4px;
        margin: 0 10px;
    }

    .resetcontent table:not(.noreset *)::-webkit-scrollbar-thumb {
        background: var(--theme-color);
        border-radius: 4px;
    }

    .resetcontent td:not(.noreset *),
    .resetcontent th:not(.noreset *) {
        padding: 1rem 1.25rem;
    }
}

@media (max-width: 576px) {
    .resetcontent h1:not(.noreset *){ font-size: 24px !important; }
    .resetcontent h2:not(.noreset *){ font-size: 20px !important; }
    .resetcontent .container { padding-left: 15px; padding-right: 15px; }
    .resetcontent img:not(.noreset *){ margin: 10px 0; border-radius: 12px; }
    .resetcontent .noidungbg:not(.noreset *){ padding: 1.5rem; margin-bottom: 2rem; }
}

        /* CARD STYLING */

        .wrapxemthem .premium-card {

            background: #ffffff;

            border-radius: 24px;

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

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

            padding: 23px 26px;

            position: relative;

            transition: all 0.4s ease;

        }



        .wrapxemthem .premium-card:hover {

            transform: translateY(-5px);

            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.08);

        }



        /* TYPOGRAPHY */

        .wrapxemthem .section-title {

            font-weight: 800;

            font-size: 2.5rem;

            letter-spacing: -0.03em;

            margin-bottom: 24px;

            color: #0f172a;

            line-height: 1.2;

        }



        .wrapxemthem .content-body {

            font-size: 1.125rem;

            line-height: 1.8;

            color: #475569;

            position: relative;

            overflow: hidden;

            max-height: 320px; /* Hidden height */

            transition: max-height 0.8s cubic-bezier(0.4, 0, 0.2, 1);

        }



        .wrapxemthem .content-body.expanded {

            max-height: 100%

        }



        /* FADE OVERLAY */

        .wrapxemthem .content-fade {

            position: absolute;

            bottom: 0;

            left: 0;

            width: 100%;

            height: 120px;

            background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));

            pointer-events: none;

            transition: opacity 0.4s ease;

        }



        .wrapxemthem .content-body.expanded .content-fade {

            opacity: 0;

        }



        /* BUTTON DESIGN */

        .wrapxemthem .btn-toggle-container {

            margin-top: 30px;

            display: flex;

            justify-content: center;

        }



        .wrapxemthem .btn-modern {

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

            color: #ffffff;

            border: none;

            padding: 14px 36px;

            border-radius: 100px;

            font-weight: 600;

            font-size: 1rem;

            display: flex;

            align-items: center;

            gap: 10px;

            cursor: pointer;

            box-shadow: 0 10px 20px rgba(79, 70, 229, 0.2);

            transition: all 0.3s ease;

        }



        .wrapxemthem .btn-modern:hover {

            transform: translateY(-2px);

            box-shadow: 0 15px 30px rgba(79, 70, 229, 0.35);

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

        }



        .wrapxemthem .btn-modern i {

            transition: transform 0.4s ease;

        }



        .wrapxemthem .btn-modern.active i {

            transform: rotate(180deg);

        }

         .wrap-blogscroll {

            background-color: #2582e7;

            color: #ffffff;

            position: relative;

            width: 100%;

            height: 100vh; /* Quan trọng: Giới hạn chiều cao ban đầu */

            overflow: hidden;

        }



        /* Ẩn scrollbar trong component */

        .wrap-blogscroll ::-webkit-scrollbar { display: none; }

        .wrap-blogscroll { -ms-overflow-style: none; scrollbar-width: none; }



        .wrap-blogscroll .panel {

            width: 100%;

            height: 100vh;

            display: flex;

            align-items: center;

            justify-content: center;

            padding: 0;

            margin: 0;

            box-sizing: border-box;

            position: absolute; /* Xếp chồng lên nhau */

            top: 0;

            left: 0;

            will-change: transform;

        }



        .wrap-blogscroll .panel .container {

            position: relative;

            z-index: 10;

        }



        /* --- SEO HEADING STYLES (H2 & H3) --- */

        

        /* Style cho H2 giống hệt thiết kế cũ */

        .wrap-blogscroll h2.seo-title {

            font-size: clamp(32px, 4.5vw, 56px);

            font-weight: 800;

            margin-bottom: 30px;

            line-height: 1.1;

        }

        

        .wrap-blogscroll h2.seo-title a {

            color: #ffffff;

            text-decoration: none;

            transition: opacity 0.3s;

        }

        

        .wrap-blogscroll h2.seo-title a:hover {

            opacity: 0.8;

        }



        /* Style cho H3 trong list */

        .wrap-blogscroll .list-container {

            display: flex;

            flex-direction: column;

            gap: 12px;

            margin-bottom: 30px;

            width: 100%;

        }



        .wrap-blogscroll h3.seo-list-item {

            margin: 0;

            padding: 0;

            font-size: 16px; /* Reset font size về chuẩn body */

            font-weight: normal;

        }



        .wrap-blogscroll .list-item {

            display: flex;

            align-items: center;

            padding: 16px 24px;

            border-radius: 16px;

            text-decoration: none; /* Bỏ gạch chân của thẻ a */

            color: #ffffff;

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

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

            backdrop-filter: blur(5px);

            transition: transform 0.3s ease, background 0.3s ease;

            width: 100%;

        }



        .wrap-blogscroll .list-item:hover {

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

            transform: translateX(10px);

            color: #ffffff;

        }



        /* --- OTHER COMPONENTS --- */

        .wrap-blogscroll .badge-custom span {

            background: #353535;

            color: #ffffff;

            padding: 6px 14px;

            border-radius: 8px;

            font-weight: 800;

            font-size: 12px;

            text-transform: uppercase;

            display: inline-flex;

            align-items: center;

            margin-bottom: 20px;

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

        }



        .wrap-blogscroll .item-number {

            font-weight: 800;

            margin-right: 18px;

            width: 28px;

            height: 28px;

            background: #ffffff;

            border-radius: 50%;

            display: flex;

            align-items: center;

            justify-content: center;

            flex-shrink: 0;

            font-size: 14px;

        }



        .wrap-blogscroll .item-text {

            font-size: 16px;

            font-weight: 600;

            line-height: 1.4;

        }



        .wrap-blogscroll .btn-view-more {

            display: inline-flex;

            align-items: center;

            gap: 10px;

            padding: 12px 30px;

            background: #ffffff;

            color: #2582e7;

            font-weight: 700;

            border-radius: 50px;

            text-decoration: none;

            transition: transform 0.3s ease;

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

        }

        .wrap-blogscroll .btn-view-more:hover { transform: translateY(-3px); }



        .wrap-blogscroll .image-wrapper { padding: 20px; text-align: center; }

        .wrap-blogscroll .image-wrapper img{max-width: 100%;border-radius:10px;height: auto;}

        .wrap-blogscroll .main-graphic {

            width: 100%; max-width: 500px; height: auto;

            border-radius: 20px; box-shadow: 0 20px 50px rgba(0,0,0,0.3);

        }



        /* --- DOTS NAVIGATION --- */

        .wrap-blogscroll .side-dots {

            position: fixed;

            right: 30px; top: 50%; transform: translateY(-50%);

            z-index: 9999;

            display: flex; flex-direction: column; gap: 18px; align-items: flex-end;

            opacity: 0; visibility: hidden; transition: opacity 0.3s ease;

            pointer-events: none;

        }

        .wrap-blogscroll .side-dots.visible { opacity: 1; visibility: visible; }

        

        .wrap-blogscroll .dot {

            width: 10px; height: 10px;

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

            border-radius: 50%; cursor: pointer; transition: all 0.3s ease;

            position: relative; pointer-events: auto;

        }

        .wrap-blogscroll .dot::after {

            content: ''; position: absolute; top: 50%; left: 50%;

            transform: translate(-50%, -50%); width: 0; height: 0;

            border: 1px solid rgba(255,255,255,0.8); border-radius: 50%;

            transition: all 0.3s ease; opacity: 0;

        }

        .wrap-blogscroll .dot.active { background: #ffffff; }

        .wrap-blogscroll .dot.active::after { width: 24px; height: 24px; opacity: 1; }

        

        .wrap-blogscroll .dot-label {

            position: absolute; right: 25px; top: 50%;

            transform: translateY(-50%) translateX(10px);

            background: rgba(0,0,0,0.7); backdrop-filter: blur(4px);

            color: #fff; padding: 4px 10px; border-radius: 4px;

            font-size: 11px; font-weight: 600; white-space: nowrap;

            opacity: 0; visibility: hidden; transition: all 0.3s ease;

            pointer-events: none;

        }

        .wrap-blogscroll .dot:hover .dot-label { opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0); }



        /* --- DEMO CONTENT BÊN DƯỚI --- */

        .next-section {

            height: 100vh;

            background-color: #f8f9fa;

            color: #333;

            display: flex;

            align-items: center;

            justify-content: center;

            text-align: center;

            z-index: 5;

            position: relative;

        }

        .wrapnews {

            background-color: #ffffff;

            color: #1e293b;

            padding: 40px 0;

            overflow: hidden;

            line-height: 1.6;

        }



        .wrapnews .container {

            max-width: 1320px;

        }



        /* Section Header */

        .wrapnews .section-header {

            display: flex;

            justify-content: space-between;

            align-items: normal;

            margin-bottom: 40px;

            border-bottom: 1px solid #f1f5f9;

            padding-bottom: 20px;

            position: relative;

        }



        .wrapnews .section-header::after {

            content: '';

            position: absolute;

            bottom: -1px;

            left: 0;

            width: 60px;

            height: 4px;

            background-color: var(--theme-color); /* Elevated Coral Red */

            border-radius: 2px;

        }



        .wrapnews .section-title {

            font-size: 2.25rem;

            font-weight: 800;

            color: #1e293b;

            margin: 0;

            letter-spacing: -0.03em;

        }



        /* Navigation Buttons */

        .wrapnews .nav-buttons {

            display: flex;

            gap: 12px;

            align-items: center;

        }



        .wrapnews .nav-btn {

            width: 44px;

            height: 44px;

            border-radius: 8px;

            border: 1px solid #e2e8f0;

            background: #fff;

            color: var(--theme-color);

            display: flex;

            align-items: center;

            justify-content: center;

            cursor: pointer;

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

            font-size: 0.9rem;

        }



        .wrapnews .nav-btn:hover {

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

            color: #fff;

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

            transform: translateY(-4px);

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

        }



        /* News Card Styles */

        .wrapnews .swiper {

            padding: 10px 10px 10px;

            margin: 0 -10px;

        }



        .wrapnews .news-card {

            display: flex;

            gap: 24px;

            background: #ffffff;

            border-radius: 20px;

            padding: 12px;

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

            border: 1px solid transparent;

        }



        .wrapnews .news-card:hover {

            transform: translateY(-5px);

            background: #fff;

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

            border-color: #f1f5f9;

        }



        .wrapnews .card-image-wrapper {

            flex: 0 0 160px;

            border-radius: 16px;

            overflow: hidden;

            box-shadow: 0 4px 12px rgba(0,0,0,0.05);

        }



        .wrapnews .card-image-wrapper img {

            width: 100%;

            height: 100%;

            object-fit: cover;

            transition: transform 0.8s ease;

        }



        .wrapnews .news-card:hover .card-image-wrapper img {

            transform: scale(1.1);

        }



        .wrapnews .card-content {

            flex-direction: column;

            justify-content: center;

            flex: 1;

        }



        .wrapnews .category-tag {

            display: inline-block;

            font-size: 10px;

            font-weight: 800;

            text-transform: uppercase;

            letter-spacing: 0.1em;

            color: #64748b;

            border: 1.5px solid #e2e8f0;

            padding: 5px 14px;

            border-radius: 6px;

            margin-bottom: 14px;

            width: fit-content;

            transition: all 0.3s ease;

        }



        .wrapnews .news-card:hover .category-tag {

            border-color: #ff6b6b;

            color: #ff6b6b;

        }



        .wrapnews .card-title {

            font-size: 1.2rem;

            font-weight: 700;

            line-height: 1.45;

            color: #0f172a;

            margin-bottom: 14px;

            display: -webkit-box;

            -webkit-line-clamp: 2;

            -webkit-box-orient: vertical;

            overflow: hidden;

            text-decoration: none;

            transition: color 0.3s ease;

        }



        .wrapnews .card-title:hover {

            color: var(--theme-color);

        }



        .wrapnews .card-meta {

            display: flex;

            align-items: center;

            gap: 10px;

            font-size: 12px;

            color: #94a3b8;

            font-weight: 600;

            letter-spacing: 0.02em;

        }



        .wrapnews .card-meta i {

            font-size: 14px;

            color: #cbd5e1;

        }

         .wrapccardnews {

            padding: 27px 0;

        }



        .wrapccardnews .news-card {

            background: #ffffff;

            border-radius: 24px;

            overflow: hidden;

            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

            height: 100%;

            border: 1px solid rgba(0, 0, 0, 0.03);

            position: relative;

            display: flex;

            flex-direction: column;

        }



        .wrapccardnews .news-card:hover {

            transform: translateY(-12px);

            box-shadow: 0 30px 60px -12px rgba(15, 23, 42, 0.12);

        }



        .wrapccardnews .image-container {

            position: relative;

            overflow: hidden;

            border-radius: 20px;

            margin: 12px;

        }



        /* New class for Image Link */

        .wrapccardnews .news-image-link {

            display: block;

            width: 100%;

            height: 100%;

            text-decoration: none;

            cursor: pointer;

        }



        .wrapccardnews .news-image {

            width: 100%;

            height: 100%;

            transition: transform 0.6s ease;

            display: block; /* Removes extra space below image */

        }



        .wrapccardnews .news-card:hover .news-image {

            transform: scale(1.08);

        }



        .wrapccardnews .category-badge {

            position: absolute;

            top: 6px;

            right: 16px;

            background: var(--theme-color);

            color: #ffffff;

            padding: 5px 11px;

            border-radius: 10px;

            font-weight: 700;

            font-size: 9px;

            text-transform: uppercase;

            box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);

            z-index: 2;

            pointer-events: none;

        }



        .wrapccardnews .card-content {

            padding: 6px 17px 12px 17px;

            flex-grow: 1;

            display: flex;

            flex-direction: column;

        }



        /* Updated for h3 and link styling */

        .wrapccardnews .news-title {

            font-size: 26px;

            font-weight: 800;

            line-height: 1.35;

            margin-bottom: 20px;

            letter-spacing: -0.02em;

            display: -webkit-box;

            -webkit-line-clamp: 2;

            -webkit-box-orient: vertical;

            overflow: hidden;

            margin-top: 0;

        }



        .wrapccardnews .news-title a {

            color: #1e1e1e;

            text-decoration: none;

            transition: color 0.3s ease;

            /* background-image: linear-gradient(to right, var(--theme-color), var(--theme-color2)); */

            background-size: 0% 2px;

            background-repeat: no-repeat;

            background-position: left bottom;

            font-size: 19px;

            font-family: var(

            --heading-font);

            overflow: hidden;

            display: -webkit-box;

            -webkit-line-clamp: 2;

            -webkit-box-orient: vertical;

        }



        /* Hover on card triggers link color change */

        .wrapccardnews .news-card:hover .news-title a {

            color: var(--theme-color);

            background-size: 100% 2px;

        }



        .wrapccardnews .meta-info {

            display: flex;

            align-items: center;

            gap: 12px;

            margin-bottom: 13px;

        }



        .wrapccardnews .author-thumb {

            width: 44px;

            height: 44px;

            border-radius: 50%;

            object-fit: cover;

            border: 2px solid #f1f5f9;

        }



        .wrapccardnews .meta-text {

            font-size: 15px;

            font-weight: 500;

            color: #64748b;

            display: flex;

            align-items: center;

            gap: 8px;

        }



        .wrapccardnews .author-name {

            color: var(--theme-color);

            font-weight: 600;

        }



        .wrapccardnews .dot-separator {

            width: 4px;

            height: 4px;

            background: #cbd5e1;

            border-radius: 50%;

            display: inline-block;

        }



        .wrapccardnews .news-excerpt {

            color: #64748b;

            font-size: 16px;

            line-height: 1.7;

            margin-bottom: 0;

            display: -webkit-box;

            -webkit-line-clamp: 3;

            -webkit-box-orient: vertical;

            overflow: hidden;

        }

        /* BASE SCOPING */

        .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: 4px;

            background: var(--theme-color3);

        }



        /* Header */

        .wrapmucluc .toc-header {

            padding: 20px 24px;

            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: 38px;

            height: 38px;

            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;

        }



        .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 14px;

            border-radius: 30px;

            font-size: 0.75rem;

            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: 0.95rem;

            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: #4f46e5;

            background: #f2ffe4;

            font-weight: 700;

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

        }



        /* Hierarchy Styles */

        .wrapmucluc .toc-h2 .toc-link {

            font-weight: 600;

            color: #334155;

        }



        .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: 150px;

            left: 30px;

            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 #d8ffacb5;

            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;

            top: 0;

            left: 60px;

            width: 500px;

            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);

        }



        /* Scrollbar Styling */

        .wrapmucluc .sticky-panel::-webkit-scrollbar { width: 4px; }

        .wrapmucluc .sticky-panel::-webkit-scrollbar-track { background: transparent; }

        .wrapmucluc .sticky-panel::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }

         .wrapformlh .btn-trigger-modal {

            background: var(--theme-color);

            color: #fff;

            padding: 16px 32px;

            border-radius: 16px;

            font-weight: 700;

            border: none;

            box-shadow: 0 10px 20px rgba(99, 102, 241, 0.3);

            transition: all 0.3s ease;

            cursor: pointer;

        }



        .wrapformlh .btn-trigger-modal:hover {

            transform: translateY(-3px);

            box-shadow: 0 15px 30px rgba(99, 102, 241, 0.4);

            background: #4f46e5;

        }



        /* Modal Customization */

        .wrapformlh .modal-xl {

            max-width: 1140px;

        }



        .wrapformlh .modal-content {

            border: none;

            border-radius: 40px;

            overflow: hidden;

            background: transparent;

        }



        .wrapformlh .modal-backdrop.show {

            opacity: 0.7;

            backdrop-filter: blur(8px);

            background-color: #0f172a;

        }



        .wrapformlh .contact-main-card {

            background: #ffffff;

            border-radius: 40px;

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

            overflow: hidden;

            position: relative;

        }



        /* Close Button */

        .wrapformlh .btn-close-custom {

            position: absolute;

            top: 25px;

            right: 25px;

            z-index: 10;

            background: rgb(224 224 224);

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

            color: #fff;

            width: 44px;

            height: 44px;

            border-radius: 12px;

            display: flex;

            align-items: center;

            justify-content: center;

            cursor: pointer;

            transition: all 0.3s ease;

            backdrop-filter: blur(5px);

        }



        .wrapformlh .btn-close-custom:hover {

            background: var(--theme-color);

            color: #fff;

            transform: rotate(90deg);

        }



        /* Sidebar Styling */

        .wrapformlh .info-panel {

            background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%);

            color: #ffffff;

            padding: 70px 60px;

            height: 100%;

            position: relative;

            z-index: 1;

        }



        .wrapformlh .badge-custom {

            display: inline-block;

            padding: 8px 20px;

            background: #fff4e5;

            color: var(--theme-color);

            border-radius: 100px;

            font-size: 13px;

            font-weight: 700;

            text-transform: uppercase;

            letter-spacing: 1.5px;

            margin-bottom: 30px;

            border: 1px solid rgba(99, 102, 241, 0.3);

        }



        .wrapformlh .headline-title {

            font-size: 42px;

            font-weight: 800;

            line-height: 1.1;

            margin-bottom: 25px;

            letter-spacing: -0.03em;

        }



        .wrapformlh .sub-headline {

            color: #94a3b8;

            font-size: 17px;

            margin-bottom: 50px;

        }



        .wrapformlh .contact-list-item {

            display: flex;

            align-items: center;

            margin-bottom: 35px;

            transition: transform 0.3s ease;

        }



        .wrapformlh .icon-container {

            width: 54px;

            height: 54px;

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

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

            border-radius: 16px;

            display: flex;

            align-items: center;

            justify-content: center;

            margin-right: 20px;

            font-size: 20px;

            color: var(--theme-color);

        }



        .wrapformlh .info-text h6 {

            font-size: 13px;

            color: #64748b;

            text-transform: uppercase;

            font-weight: 700;

            margin-bottom: 4px;

        }



        .wrapformlh .info-text p { font-size: 16px; margin-bottom: 0; }



        /* Form Styling */

        .wrapformlh .form-panel {

            padding: 70px 60px;

            background: #ffffff;

        }



        .wrapformlh .form-header-title {

            font-size: 28px;

            font-weight: 700;

            margin-bottom: 40px;

            color: #0f172a;

        }



        .wrapformlh .field-label {

            display: block;

            font-weight: 700;

            font-size: 14px;

            color: #475569;

            margin-bottom: 10px;

        }



        .wrapformlh .input-styled {

            width: 100%;

            background: #f8fafc;

            border: 2px solid #f1f5f9;

            border-radius: 16px;

            padding: 14px 20px;

            font-size: 15px;

            font-weight: 500;

            transition: all 0.3s ease;

        }



        .wrapformlh .input-styled:focus {

            background: #fff;

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

            box-shadow: 0 0 0 5px #fff2ed85;

            outline: none;

        }



        /* Template Selection Box */

        .wrapformlh .template-selection-box {

            background: #f8fafc;

            border: 2px solid #f1f5f9;

            border-radius: 24px;

            padding: 25px;

            margin-bottom: 30px;

        }



        .wrapformlh .selected-template-value {

            font-size: 18px;

            font-weight: 800;

            display: flex;

            align-items: center;

            gap: 12px;

            margin-bottom: 15px;

        }



        .wrapformlh .template-details-row { display: flex; gap: 12px; flex-wrap: wrap; }



        .wrapformlh .detail-pill {

            display: flex;

            align-items: center;

            gap: 8px;

            background: #fff;

            padding: 8px 16px;

            border-radius: 12px;

            border: 1px solid #e2e8f0;

        }



        .wrapformlh .detail-pill.price-pill {background: #ecfdf5;border-color: #bfffe1;color: var(--theme-color3);}



        .wrapformlh .btn-submit-premium {

            background: var(--theme-color);

            color: #fff;

            border: none;

            width: 100%;

            padding: 18px;

            border-radius: 18px;

            font-weight: 800;

            font-size: 17px;

            display: flex;

            align-items: center;

            justify-content: center;

            gap: 12px;

            box-shadow: 0 10px 25px rgba(99, 102, 241, 0.3);

            cursor: pointer;

            transition: all 0.3s ease;

        }



        .wrapformlh .btn-submit-premium:hover {

            background: var(--theme-color2);

            transform: translateY(-2px);

        }

        

    .account-dropdown-wrapper .footer-link a{color: var(--theme-color)}

        .account-dropdown-wrapper .footer-link a:hover{color: var(--theme-color2)}

         .wrapthongbao {

            display: flex;

            align-items: center;

            color: #1e293b;

            overflow-x: hidden;

        }



        .wrapthongbao .lux-hero-section { width: 100%; padding: 80px 0; }



        .wrapthongbao .lux-badge {

            background: rgba(79, 70, 229, 0.1);

            color: #4f46e5;

            padding: 10px 20px;

            border-radius: 100px;

            font-weight: 700;

            font-size: 0.8rem;

            text-transform: uppercase;

            letter-spacing: 0.05em;

            margin-bottom: 2rem;

            display: inline-block;

        }



        .wrapthongbao .lux-title {

            font-weight: 800;

            font-size: 3.8rem;

            letter-spacing: -0.04em;

            color: #0f172a;

            margin-bottom: 1.5rem;

        }



        .wrapthongbao .lux-subtitle {

            font-size: 1.25rem;

            color: #64748b;

            max-width: 800px;

            margin: 0 auto;

            line-height: 1.6;

        }

        /* Modal Core CSS */

        .wrapthongbao .lux-modal-overlay {

            position: fixed;

            top: 0; left: 0; width: 100%; height: 100%;

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

            backdrop-filter: blur(12px);

            z-index: 9999;

            display: flex;

            align-items: center;

            justify-content: center;

            padding: 24px;

        }



        .wrapthongbao .lux-modal-card {

            background: #ffffff;

            width: 100%;

            max-width: 460px;

            border-radius: 32px;

            padding: 48px 40px;

            text-align: center;

            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);

            animation: luxSlideUp 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);

        }



        @keyframes luxSlideUp {

            from { opacity: 0; transform: translateY(30px) scale(0.95); }

            to { opacity: 1; transform: translateY(0) scale(1); }

        }



        /* Loading Spinner */

        .wrapthongbao .lux-spinner-wrapper {

            display: flex; justify-content: center; margin-bottom: 24px;

        }



        .wrapthongbao .lux-spinner {

            width: 70px; height: 70px;

            border: 6px solid #f1f5f9;

            border-top: 6px solid #4f46e5;

            border-radius: 50%;

            animation: luxSpin 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;

        }



        @keyframes luxSpin { 100% { transform: rotate(360deg); } }



        /* Icons Styles */

        .wrapthongbao .lux-modal-icon-wrapper {

            width: 88px; height: 88px;

            border-radius: 50%;

            display: flex;

            align-items: center;

            justify-content: center;

            margin: 0 auto 28px;

            font-size: 36px;

            transition: all 0.3s ease;

        }



        .wrapthongbao .lux-modal-body #lux-modal-title {

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

            color: #0f172a; margin-bottom: 12px;

            letter-spacing: -0.02em;

        }



        .wrapthongbao .lux-modal-body p {

            color: #64748b; font-size: 1.1rem;

            line-height: 1.6; margin-bottom: 35px;

        }



        .wrapthongbao .lux-modal-footer {

            display: flex; gap: 16px; justify-content: center;

        }



        .wrapthongbao .lux-modal-btn {

            padding: 16px 24px;

            border-radius: 18px;

            font-weight: 700;

            transition: all 0.3s;

            cursor: pointer;

            border: none;

            flex: 1;

            font-size: 1rem;

        }



        .wrapthongbao .lux-modal-btn-confirm { font-size: 14px;background-color: var(--theme-color); color: white; }

        .wrapthongbao .lux-modal-btn-confirm:hover { background-color: var(--theme-color2); transform: translateY(-2px); }



        .wrapthongbao .lux-modal-btn-cancel { font-size: 14px;background-color: #f1f5f9; color: #64748b; }

        .wrapthongbao .lux-modal-btn-cancel:hover { background-color: #e2e8f0; color: #1e293b; }



        /* Contextual Colors */

        .wrapthongbao .lux-icon-success { background-color: #ecfdf5; color: #10b981; }

        .wrapthongbao .lux-icon-error { background-color: #fef2f2; color: #ef4444; }

        .wrapthongbao .lux-icon-warning { background-color: #fffbeb; color: #f59e0b; }

        .wrapthongbao .lux-icon-confirm { background-color: #f0f9ff; color: #0ea5e9; }



        /* Pulse Animation for Icons */

        /* =========================================

   1. CORE LAYOUT & TYPOGRAPHY

   ========================================= */

.wrapbinhluan {

    color: #334155;

    font-size: 14px;

    line-height: 1.6;

    -webkit-font-smoothing: antialiased;

}



.wrapbinhluan h2.section-title {

    color: #0f172a;

    font-weight: 800;

    font-size: 1.5rem;

    letter-spacing: -0.5px;

    margin-bottom: 0.25rem;

}



.wrapbinhluan .section-subtitle {

    color: #64748b;

    font-size: 0.95rem;

}



/* =========================================

   2. STATS CARD (THỐNG KÊ SAO)

   ========================================= */

.wrapbinhluan .stats-card {

    background: #ffffff;

    padding: 24px;

    border-radius: 16px;

    border: 1px solid #e2e8f0;

    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);

    height: 100%;

}



.wrapbinhluan .rating-big {

    font-size: 3.5rem;

    font-weight: 900;

    line-height: 1;

    color: #0f172a;

}



.wrapbinhluan .rating-bar-row {

    display: flex;

    align-items: center;

    margin-bottom: 8px;

}



.wrapbinhluan .star-label {

    min-width: 45px;

    font-weight: 600;

    font-size: 0.85rem;

    color: #475569;

    display: flex; align-items: center; gap: 4px;

}



.wrapbinhluan .custom-progress {

    height: 6px;

    background-color: #f1f5f9;

    border-radius: 100px;

    flex-grow: 1;

    margin: 0 12px;

    overflow: hidden;

}



.wrapbinhluan .progress-bar {

    background: linear-gradient(90deg, #fcd34d 0%, #fbbf24 100%);

    border-radius: 100px;

}



.wrapbinhluan .count-label {

    color: #94a3b8;

    font-size: 0.85rem;

    min-width: 30px;

    text-align: right;

}



/* =========================================

   3. GALLERY WIDGET & VIDEO ICON

   ========================================= */

.wrapbinhluan .gallery-widget-card {

    background: #ffffff;

    padding: 24px;

    border-radius: 16px;

    border: 1px solid #e2e8f0;

    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);

    height: 100%;

    position: relative;

}



.wrapbinhluan .gallery-title {

    font-weight: 700;

    text-transform: uppercase;

    font-size: 0.8rem;

    letter-spacing: 0.5px;

    color: #0f172a;

    position: relative;

    padding-left: 12px;

    margin-bottom: 16px;

    border-left: 4px solid #3b82f6;

}



.wrapbinhluan .media-swiper {

    padding-bottom: 30px !important;

}



.wrapbinhluan .media-item-wrap {

    border-radius: 12px;

    overflow: hidden;

    position: relative;

    aspect-ratio: 1/1;

    cursor: pointer;

    border: 2px solid transparent;

    transition: all 0.3s ease;

    background: #000;

}



.wrapbinhluan .media-item-wrap img,

.wrapbinhluan .media-item-wrap video {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.5s ease;

    opacity: 0.95;

}



.wrapbinhluan .media-item-wrap:hover {

    border-color: #3b82f6;

    box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.25);

}

.wrapbinhluan .media-item-wrap:hover img {

    transform: scale(1.1);

    opacity: 1;

}



/* --- FIX ICON VIDEO (Làm nổi bật hơn) --- */

.wrapbinhluan .video-overlay {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 44px;

    height: 44px;

    /* Nền tối đậm hơn để nổi trên video sáng */

    background: rgba(0, 0, 0, 0.65); 

    border: 2px solid #fff; /* Viền trắng rõ */

    border-radius: 50%;

    display: flex; 

    align-items: center; 

    justify-content: center;

    color: #fff;

    z-index: 10;

    pointer-events: none;

    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Hiệu ứng nảy */

    box-shadow: 0 2px 8px rgba(0,0,0,0.4);

}



.wrapbinhluan .video-overlay i {

    font-size: 16px;

    margin-left: 4px; /* Căn chỉnh tam giác play */

}



.wrapbinhluan .media-item-wrap:hover .video-overlay {

    background: #3b82f6;

    border-color: #3b82f6;

    transform: translate(-50%, -50%) scale(1.1);

}



/* Nút điều hướng Swiper */

.wrapbinhluan .gallery-nav-btn {

    width: 32px;

    height: 32px;

    background: #fff;

    border-radius: 50%;

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

    color: #0f172a;

    font-weight: bold;

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

    transition: 0.3s;

}

.wrapbinhluan .gallery-nav-btn:hover {

    background: #0f172a;

    color: #fff;

}

.wrapbinhluan .gallery-nav-btn::after { font-size: 12px; }



/* =========================================

   4. FORM VIẾT BÌNH LUẬN & UPLOAD AREA

   ========================================= */

.wrapbinhluan .review-form-wrapper .card {

    border: 1px solid #e2e8f0 !important;

    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05) !important;

}



.wrapbinhluan .form-control {

    background-color: #f8fafc;

    border: 1px solid #e2e8f0;

    padding: 0.75rem 1rem;

    border-radius: 8px;

}

.wrapbinhluan .form-control:focus {

    background-color: #fff;

    border-color: #3b82f6;

    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);

}



/* --- KHU VỰC UPLOAD ĐẸP HƠN --- */

.wrapbinhluan .upload-area {

    border: 2px dashed #cbd5e1;

    background-color: #f8fafc;

    border-radius: 12px;

    padding: 2rem 1rem; /* Tăng padding dọc */

    text-align: center;

    transition: all 0.3s ease;

    cursor: pointer;

    position: relative;

}



.wrapbinhluan .upload-area:hover {

    border-color: #3b82f6;

    background-color: #eff6ff;

}



.wrapbinhluan .upload-trigger i {

    font-size: 2.5rem; /* Icon to hơn */

    color: #94a3b8;

    margin-bottom: 0.75rem;

    display: block;

    transition: transform 0.3s;

}



.wrapbinhluan .upload-area:hover .upload-trigger i {

    color: #3b82f6;

    transform: translateY(-5px); /* Hiệu ứng bay lên */

}



/* Nút Gửi Đánh Giá Chính */

.wrapbinhluan .btn-primary-custom {

    background: #0f172a;

    color: #fff;

    border: none;

    padding: 10px 24px;

    border-radius: 50px;

    font-weight: 600;

    transition: all 0.3s;

    box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.2);

}

.wrapbinhluan .btn-primary-custom:hover {

    background: #3b82f6;

    transform: translateY(-2px);

    box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.4);

}



/* =========================================

   5. FILTER CHIPS

   ========================================= */

.wrapbinhluan .filter-chip {

    background: #fff;

    border: 1px solid #e2e8f0;

    color: #64748b;

    padding: 8px 16px;

    border-radius: 50px;

    font-weight: 600;

    font-size: 0.9rem;

    transition: all 0.2s;

    cursor: pointer;

}

.wrapbinhluan .filter-chip:hover {

    border-color: #94a3b8;

    background: #f1f5f9;

    color: #0f172a;

}

.wrapbinhluan .filter-chip.active {

    background: #0f172a;

    color: #fff;

    border-color: #0f172a;

    box-shadow: 0 4px 6px rgba(15, 23, 42, 0.2);

}



/* =========================================

   6. DANH SÁCH BÌNH LUẬN & ACTIONS

   ========================================= */

.wrapbinhluan .review-card {

    background: #fff;

    border: 1px solid #f1f5f9;

    border-radius: 12px;

    padding: 20px;

    margin-bottom: 20px;

    box-shadow: 0 1px 2px rgba(0,0,0,0.02);

}



.wrapbinhluan .avatar {

    width: 48px;

    height: 48px;

    font-size: 1.1rem;

    background: linear-gradient(135deg, #3b82f6, #2563eb);

    color: #fff;

    box-shadow: 0 4px 6px rgba(37, 99, 235, 0.15);

}



/* --- FIX NÚT THÍCH & TRẢ LỜI --- */

.wrapbinhluan .review-actions {

    border-top: 1px solid #f1f5f9;

    padding-top: 12px;

    margin-top: 15px;

}



.wrapbinhluan .action-like, 

.wrapbinhluan .reply-trigger {

    cursor: pointer !important; /* Bắt buộc hiện bàn tay */

    padding: 6px 14px;

    border-radius: 6px;

    transition: all 0.2s;

    display: inline-flex;

    align-items: center;

    font-weight: 600;

    color: #64748b;

    user-select: none;

    font-size: 0.9rem;

}



.wrapbinhluan .action-like:hover, 

.wrapbinhluan .reply-trigger:hover {

    background-color: #eff6ff; /* Nền xanh nhạt khi hover */

    color: #3b82f6 !important; /* Chữ xanh dương */

}



.wrapbinhluan .action-like i,

.wrapbinhluan .reply-trigger i {

    margin-right: 6px;

    font-size: 1rem;

}



/* Class căn chỉnh icon Like theo yêu cầu */

.wrapbinhluan .like {

    margin-right: 2px;

}



/* Gallery thu nhỏ trong comment */

.wrapbinhluan .gallery-group .media-thumb {

    width: 90px;

    height: 90px;

    border-radius: 10px;

    border: 1px solid #e2e8f0;

    transition: transform 0.2s;

    overflow: hidden;

    position: relative;

    box-shadow: 0 2px 4px rgba(0,0,0,0.05);

}

.wrapbinhluan .gallery-group .media-thumb:hover {

    transform: scale(1.05);

    border-color: #3b82f6;

    z-index: 2;

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

}



/* =========================================

   7. FORM TRẢ LỜI CON (SUB-FORM)

   ========================================= */

.wrapbinhluan .reply-input-wrapper .card {

    background-color: #f8fafc !important;

    border: 1px solid #e2e8f0 !important;

    box-shadow: none !important;

}



.wrapbinhluan .reply-input-wrapper textarea {

    background: #fff;

    border-color: #e2e8f0;

    resize: none;

    font-size: 0.9rem;

    min-height: 80px;

}

.wrapbinhluan .reply-input-wrapper textarea:focus {

    border-color: #3b82f6;

}



/* Nút Gửi trong form trả lời - Làm đẹp hơn */

.wrapbinhluan .reply-input-wrapper .btn-primary {

    background: linear-gradient(135deg, #0f172a 0%, #334155 100%);

    border: none;

    border-radius: 20px; /* Bo tròn */

    padding: 8px 24px;

    font-size: 0.85rem;

    font-weight: 600;

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

    transition: all 0.2s;

    letter-spacing: 0.5px;

}



.wrapbinhluan .reply-input-wrapper .btn-primary:hover {

    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);

    transform: translateY(-1px);

    box-shadow: 0 4px 8px rgba(37, 99, 235, 0.25);

}



/* =========================================

   8. THREADED REPLIES (CẤU TRÚC PHẢN HỒI)

   ========================================= */

.wrapbinhluan .replies-wrapper {

    margin-top: 15px;

}



.wrapbinhluan .threaded-border {

    border-left: 2px solid #e2e8f0 !important;

    margin-left: 24px;

    padding-left: 20px;

}



.wrapbinhluan .item-reply {

    background: #f8fafc;

    border-radius: 8px;

    padding: 12px 15px;

    border: 1px solid transparent;

    transition: 0.2s;

}



.wrapbinhluan .item-reply:hover {

    background: #fff;

    border-color: #e2e8f0;

    box-shadow: 0 2px 5px rgba(0,0,0,0.03);

}



/* Cấp độ trả lời 2 */

.wrapbinhluan .item-reply.ms-4 {

    margin-left: 2rem !important;

    background: #fff;

    border: 1px solid #f1f5f9;

}



.wrapbinhluan .text-primary {

    color: #3b82f6 !important;

    font-weight: 700;

}



.wrapbinhluan .reply-child-trigger {

    cursor: pointer;

    font-size: 0.8rem;

    color: #64748b;

    font-weight: 600;

}

.wrapbinhluan .reply-child-trigger:hover {

    color: #3b82f6;

    text-decoration: underline;

}



/* =========================================

   9. LIGHTBOX & UTILS

   ========================================= */

.wrapbinhluan .modal-fullscreen .modal-content {

    background-color: rgba(15, 23, 42, 0.99); /* Nền tối gần như đen */

}



.wrapbinhluan .btn-loadmore {

    border: 1px solid #cbd5e1;

    color: #64748b;

    padding: 10px 30px;

    background: transparent;

    transition: 0.3s;

}

.wrapbinhluan .btn-loadmore:hover {

    border-color: #0f172a;

    background: #0f172a;

    color: #fff;

}

 .wrapcaidat {

            font-family: 'Plus Jakarta Sans', sans-serif;

            --primary-hex: #6366f1;

            --success-hex: #10b981;

            --dark-hex: #0f172a;

            --slate-hex: #64748b;

            --bg-hex: #f8fafc;

        }



        .wrapcaidat .btn-trigger-modal {

            background: #0f172a;

            color: #ffffff;

            padding: 16px 32px;

            border-radius: 14px;

            font-weight: 700;

            border: none;

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

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

            cursor: pointer;

            display: inline-flex;

            align-items: center;

            gap: 10px;

        }



        .wrapcaidat .btn-trigger-modal:hover {

            transform: translateY(-3px);

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

            background: #1e293b;

            color: #ffffff;

        }



        .wrapcaidat .modal-xl { max-width: 1100px; }

        .wrapcaidat .modal-content { 

            border: none; 

            border-radius: 28px; 

            overflow: hidden; 

            background: #ffffff; 

            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

        }



        /* Step Containers */

        .wrapcaidat .step-content { display: none; }

        .wrapcaidat .step-content.active { display: block; }



        /* Panel Layouts */

        .wrapcaidat .install-container { display: flex; min-height: 600px; }

        .wrapcaidat .status-panel { flex: 1; padding: 50px; background: #ffffff; }

        .wrapcaidat .preview-panel { 

            width: 400px; 

            background: #f8fafc; 

            border-left: 1px solid #e2e8f0; 

            padding: 40px; 

            display: flex; 

            flex-direction: column; 

            justify-content: center;

        }



        /* Typography & Headings */

        .wrapcaidat .main-title { 

            font-size: 30px; 

            font-weight: 800; 

            color: #0f172a; 

            margin-bottom: 12px; 

            letter-spacing: -0.02em; 

        }

        .wrapcaidat .sub-title { color: #64748b; font-size: 15px; margin-bottom: 30px; line-height: 1.6; }



        /* Form Controls */

        .wrapcaidat .form-group { margin-bottom: 20px; }

        .wrapcaidat .form-label { font-weight: 700; font-size: 14px; color: #334155; margin-bottom: 8px; display: block; }

        .wrapcaidat .form-control-custom {

            width: 100%;

            padding: 14px 20px;

            border-radius: 12px;

            border: 2px solid #f1f5f9;

            background: #f8fafc;

            transition: all 0.3s ease;

            font-weight: 500;

            color: #0f172a;

        }

        .wrapcaidat .form-control-custom:focus {

            outline: none;

            border-color: #6366f1;

            background: #ffffff;

            box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);

        }



        /* Password Toggle Styling */

        .wrapcaidat .password-wrapper {

            position: relative;

            display: block;

        }

        .wrapcaidat .password-wrapper .form-control-custom {

            padding-right: 50px;

        }

        .wrapcaidat .password-toggle-btn {

            position: absolute;

            right: 15px;

            top: 50%;

            transform: translateY(-50%);

            background: transparent;

            border: none;

            color: #94a3b8;

            cursor: pointer;

            padding: 5px;

            font-size: 16px;

            transition: all 0.2s ease;

            display: flex;

            align-items: center;

            justify-content: center;

            z-index: 10;

        }

        .wrapcaidat .password-toggle-btn:hover {

            color: #6366f1;

        }



        /* Google Login Styles */

        .wrapcaidat .divider-text {

            display: flex;

            align-items: center;

            text-align: center;

            margin: 20px 0;

            color: #94a3b8;

            font-size: 12px;

            font-weight: 700;

            text-transform: uppercase;

            letter-spacing: 1px;

        }

        .wrapcaidat .divider-text::before, .wrapcaidat .divider-text::after {

            content: '';

            flex: 1;

            border-bottom: 1px solid #f1f5f9;

        }

        .wrapcaidat .divider-text span {

            padding: 0 15px;

        }



        .wrapcaidat .btn-google-login {

            display: flex;

            align-items: center;

            justify-content: center;

            gap: 12px;

            width: 100%;

            background: #ffffff;

            color: #334155;

            border: 2px solid #f1f5f9;

            padding: 14px;

            border-radius: 12px;

            font-weight: 700;

            font-size: 14px;

            transition: all 0.3s ease;

            cursor: pointer;

            text-decoration: none !important;

        }

        .wrapcaidat .btn-google-login:hover {

            background: #f8fafc;

            border-color: #e2e8f0;

            transform: translateY(-2px);

            box-shadow: 0 4px 12px rgba(0,0,0,0.05);

            color: #0f172a;

        }

        .wrapcaidat .btn-google-login img {

            width: 20px;

            height: 20px;

        }



        /* Step 1 & 2 Specifics */

        .wrapcaidat .auth-card { max-width: 450px; margin: 40px auto; text-align: center; }

        .wrapcaidat .icon-box {

            width: 70px; height: 70px; background: #e0e7ff; color: #6366f1;

            border-radius: 20px; display: flex; align-items: center; justify-content: center;

            font-size: 28px; margin: 0 auto 25px;

        }



        /* Progress Visuals */

        .wrapcaidat .progress-circle-wrap { position: relative; width: 100px; height: 100px; }

        .wrapcaidat .percentage-text { 

            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); 

            font-size: 24px; font-weight: 800; color: #6366f1; 

        }



        /* Task List */

        .wrapcaidat .task-item { 

            display: flex; align-items: center; gap: 15px; padding: 14px 18px; 

            border-radius: 12px; margin-bottom: 8px; background: #f8fafc; border: 1px solid transparent;

            transition: all 0.3s ease;

        }

        .wrapcaidat .task-item.active { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; font-weight: 600; }

        .wrapcaidat .task-item.completed { background: #f0fdf4; color: #166534; opacity: 0.8; }

        .wrapcaidat .task-name { font-size: 13.5px; }



        /* Result Card */

        .wrapcaidat .success-info-card {

            background: #ffffff; border-radius: 20px; padding: 25px;

            border: 1px solid #e2e8f0; box-shadow: 0 10px 30px rgba(0,0,0,0.05);

        }

        .wrapcaidat .info-row {

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

            padding: 12px 0; border-bottom: 1px solid #f1f5f9;

        }

        .wrapcaidat .info-label { font-size: 12px; color: #64748b; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }

        .wrapcaidat .info-value { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; color: #0f172a; }



        .wrapcaidat .copy-btn {

            background: #f1f5f9; border: none; width: 30px; height: 30px; border-radius: 8px;

            cursor: pointer; color: #6366f1; transition: 0.2s; display: flex; align-items: center; justify-content: center;

        }

        .wrapcaidat .copy-btn:hover { background: #6366f1; color: #fff; }



        .wrapcaidat .admin-link-btn {

            display: flex; align-items: center; justify-content: center; gap: 10px;

            background: var(--theme-color); color: #ffffff; text-decoration: none !important;

            padding: 16px; border-radius: 14px; font-weight: 700; margin-top: 20px;

            transition: 0.3s; box-shadow: 0 8px 15px rgba(99, 102, 241, 0.2);

        }

        .wrapcaidat .admin-link-btn:hover { background: var(--theme-color2); color: #fff; transform: translateY(-2px); }



        /* Skeleton */

        .wrapcaidat .skeleton-card { background: #fff; border-radius: 16px; padding: 20px; }

        .wrapcaidat .sk-line { height: 8px; background: #f1f5f9; border-radius: 4px; margin-bottom: 12px; }

        .wrapcaidat .sk-img { 

            height: 140px; background: #f1f5f9; border-radius: 12px; margin-bottom: 15px; 

            display: flex; align-items: center; justify-content: center; color: #cbd5e1; font-size: 32px;

        }



        /* System Badges */

        .wrapcaidat .system-badge {

            display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px;

            background: #f1f5f9; color: #475569; border-radius: 100px; font-size: 11px; font-weight: 800;

            margin-bottom: 15px; text-transform: uppercase;

        }



        /* Close Button */

        .wrapcaidat .btn-close-custom {

            position: absolute; top: 20px; right: 20px; background: #f1f5f9; border: none;

            width: 36px; height: 36px; border-radius: 10px; cursor: pointer; transition: 0.3s; z-index: 10;

        }

        .wrapcaidat .btn-close-custom:hover { background: #fee2e2; color: #ef4444; }

        .wraptopmb {

            color: #1e293b;

            background-color: #f8f9fa;

            position: relative;

            width: 100%;

            overflow-x: hidden;

            display: none;

        }



        /* --- NAVIGATION HEADER --- */

        .wraptopmb .navbar-custom {

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

            backdrop-filter: blur(12px);

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

            border-bottom: 1px solid rgba(0, 0, 0, 0.05);

            padding: 1rem 1.5rem;

            top: 0;

            left: 0;

            width: 100%;

            z-index: 1000;

            transition: all 0.4s ease;

            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03);

            position: fixed;

        }



        .wraptopmb .navbar-inner {

            display: flex;

            align-items: center;

            justify-content: space-between;

            max-width: 1400px;

            margin: 0 auto;

        }



        /* LEFT: NAV TRIGGER / MENU */

        .wraptopmb .nav-left {

            flex: 1;

            display: flex;

            align-items: center;

            justify-content: flex-start;

        }



        .wraptopmb .menu-trigger {

            background: none;

            border: none;

            cursor: pointer;

            padding: 10px;

            display: flex;

            align-items: center;

            gap: 10px;

            font-weight: 600;

            font-size: 0.9rem;

            color: #334155;

            transition: color 0.3s ease;

        }



        .wraptopmb .menu-trigger:hover {

            color: #b48a3c;

        }



        .wraptopmb .hamburger-icon {

            width: 24px;

            height: 18px;

            position: relative;

            display: flex;

            flex-direction: column;

            justify-content: space-between;

        }



        .wraptopmb .hamburger-icon span { 

            display: block;

            height: 2px;

            width: 100%;

            background-color: currentColor;

            border-radius: 2px;

            transition: transform 0.3s ease, opacity 0.3s ease;

        }



        .wraptopmb .menu-trigger.active .hamburger-icon span:nth-child(1) {

            transform: translateY(8px) rotate(45deg);

        }

        .wraptopmb .menu-trigger.active .hamburger-icon span:nth-child(2) {

            opacity: 0;

        }

        .wraptopmb .menu-trigger.active .hamburger-icon span:nth-child(3) {

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

        }



        /* CENTER: LOGO */

        .wraptopmb .nav-center {

            flex: 1;

            display: flex;

            justify-content: center;

            align-items: center;

        }



        .wraptopmb .logo-text {

            font-size: 1.5rem;

            font-weight: 800;

            letter-spacing: -0.03em;

            color: #0f172a;

            text-decoration: none;

            text-transform: uppercase;

            position: relative;

        }



        .wraptopmb .logo-text span {

            color: #b48a3c;

        }



        /* RIGHT: TOOLS */

        .wraptopmb .nav-right {

            flex: 1;

            display: flex;

            align-items: center;

            justify-content: flex-end;

            gap: 15px;

        }



        .wraptopmb .icon-btn {

            background: #f1f5f9;

            border: none;

            width: 40px;

            height: 40px;

            border-radius: 50%;

            display: flex;

            align-items: center;

            justify-content: center;

            color: #334155;

            transition: all 0.3s ease;

            cursor: pointer;

            position: relative;

        }



        .wraptopmb .icon-btn:hover {

            background: #b48a3c;

            color: white;

            transform: translateY(-2px);

            box-shadow: 0 4px 12px rgba(180, 138, 60, 0.3);

        }



        /* --- LANGUAGE DROPDOWN --- */

        .wraptopmb .lang-dropdown {

            position: absolute;

            top: 120%;

            right: 0;

            width: 180px;

            background: white;

            border-radius: 12px;

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

            padding: 8px;

            opacity: 0;

            visibility: hidden;

            transform: translateY(10px);

            transition: all 0.3s ease;

            z-index: 1001;

            border: 1px solid rgba(0,0,0,0.04);

        }



        .wraptopmb .lang-wrapper {

            position: relative;

        }



        .wraptopmb .lang-wrapper.active .lang-dropdown {

            opacity: 1;

            visibility: visible;

            transform: translateY(0);

        }



        .wraptopmb .lang-item {

            display: flex;

            align-items: center;

            gap: 10px;

            padding: 10px 12px;

            border-radius: 8px;

            color: #334155;

            text-decoration: none;

            font-size: 0.9rem;

            font-weight: 600;

            transition: background 0.2s;

            cursor: pointer;

        }



        .wraptopmb .lang-item:hover {

            background: #f8fafc;

            color: #b48a3c;

        }



        .wraptopmb .lang-item img {

            width: 20px;

            height: 20px;

            border-radius: 50%;

            object-fit: cover;

            border: 1px solid #e2e8f0;

        }



        /* --- SEARCH OVERLAY --- */

        .wraptopmb .search-overlay {

            position: fixed;

            top: 0;

            left: 0;

            width: 100%;

            height: 100vh;

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

            z-index: 999;

            display: flex;

            flex-direction: column;

            align-items: center;

            opacity: 0;

            visibility: hidden;

            transition: all 0.4s ease;

            padding-top: 100px;

        }



        .wraptopmb .search-overlay.active {

            opacity: 1;

            visibility: visible;

        }



        .wraptopmb .search-container {

            width: 90%;

            max-width: 600px;

            position: relative;

        }



        .wraptopmb .search-input-group {

            position: relative;

            border-bottom: 2px solid #e2e8f0;

        }



        .wraptopmb .search-input {

            width: 100%;

            padding: 20px 50px 20px 0;

            font-size: 1.5rem;

            font-weight: 700;

            border: none;

            background: transparent;

            color: #0f172a;

            outline: none;

        }



        .wraptopmb .search-input::placeholder {

            color: #cbd5e1;

            font-weight: 500;

        }



        .wraptopmb .close-search {

            position: absolute;

            top: 25px;

            right: 0;

            font-size: 1.5rem;

            color: #64748b;

            cursor: pointer;

            transition: color 0.3s;

        }



        .wraptopmb .close-search:hover {

            color: #ef4444;

        }



        /* AJAX RESULTS */

        .wraptopmb .search-results {

            margin-top: 40px;

            width: 100%;

            max-height: 60vh;

            overflow-y: auto;

            opacity: 0;

            transform: translateY(20px);

            transition: all 0.4s ease;

        }



        .wraptopmb .search-results.show {

            opacity: 1;

            transform: translateY(0);

        }



        .wraptopmb .result-card {

            display: flex;

            align-items: center;

            gap: 15px;

            padding: 15px;

            background: white;

            border-radius: 12px;

            margin-bottom: 15px;

            box-shadow: 0 4px 20px rgba(0,0,0,0.04);

            transition: transform 0.3s ease;

            cursor: pointer;

            border: 1px solid #f1f5f9;

        }



        .wraptopmb .result-card:hover {

            transform: translateY(-3px);

            border-color: #b48a3c;

        }



        .wraptopmb .result-img {

            width: 80px;

            height: 80px;

            border-radius: 8px;

            object-fit: cover;

        }



        .wraptopmb .result-info h4 {

            font-size: 1rem;

            font-weight: 700;

            margin: 0 0 5px;

            color: #0f172a;

        }



        .wraptopmb .result-info p {

            font-size: 0.85rem;

            color: #64748b;

            margin: 0;

        }



        .wraptopmb .result-price {

            margin-left: auto;

            font-weight: 700;

            color: #b48a3c;

        }



        /* --- MOBILE MENU DRAWER (3 LEVELS) --- */

        .wraptopmb .mobile-menu-drawer {

            position: fixed;

            top: 76px;

            left: 0;

            width: 100%;

            height: calc(100vh - 80px);

            background: white;

            transform: translateX(-100%);

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

            z-index: 999999;

            padding: 2rem;

            display: flex;

            flex-direction: column;

            overflow-y: auto; /* Allow scrolling for long nested menus */

        }



        .wraptopmb .mobile-menu-drawer.active {

            transform: translateX(0);

        }



        /* Level 1 Links */

        .wraptopmb .mobile-nav-link {

            font-size: 15px;

            font-weight: 700;

            color: #0f172a;

            padding: 15px 0;

            border-bottom: 1px solid #f1f5f9;

            text-decoration: none;

            display: flex;

            justify-content: space-between;

            align-items: center;

            cursor: pointer;

        }



        /* Icons for toggle */

        .wraptopmb .menu-toggle-icon {

            font-size: 1rem;

            color: #cbd5e1;

            transition: transform 0.3s ease;

        }



        /* Rotate icon when open */

        .wraptopmb .has-submenu.open > .menu-toggle-icon {

            transform: rotate(180deg);

            color: #b48a3c;

        }



        /* Submenus (Hidden by default) */

        .wraptopmb .submenu {

            display: none; /* JS will toggle this */

            padding-left: 15px;

            background-color: #fafafa; /* Slight background for contrast */

            border-radius: 8px;

            margin-bottom: 10px;

        }



        /* Level 2 Links */

        .wraptopmb .sub-nav-link {

            font-size: 13px;

            font-weight: 600;

            color: #171717;

            padding: 12px 10px;

            text-decoration: none;

            display: flex;

            justify-content: space-between;

            align-items: center;

            border-bottom: 1px dashed #e2e8f0;

        }

        

        .wraptopmb .sub-nav-link:last-child {

            border-bottom: none;

        }



        .wraptopmb .sub-nav-link:hover,

        .wraptopmb .has-submenu.open > .sub-nav-link {

            color: #b48a3c;

        }



        /* Level 3 Links */

        .wraptopmb .grandchild-link {

            font-size: 0.95rem;

            font-weight: 500;

            color: #64748b;

            padding: 10px 10px 10px 25px; /* Deep indent */

            text-decoration: none;

            display: block;

            transition: color 0.2s;

            position: relative;

        }



        .wraptopmb .grandchild-link:before {

            content: "•";

            position: absolute;

            left: 12px;

            color: #cbd5e1;

        }



        .wraptopmb .grandchild-link:hover {

            color: #b48a3c;

        }

        

        .wraptopmb .grandchild-link:hover:before {

            color: #b48a3c;

        }



        /* --- FOOTER CONTACT BOX (NEW) --- */

        .wraptopmb .contact-box {

            background: #f8fafc;

            padding: 1.5rem;

            border-radius: 16px;

            border: 1px solid #e2e8f0;

        }

        

        .wraptopmb .contact-title {

            font-size: 0.95rem;

            font-weight: 700;

            color: #0f172a;

            margin-bottom: 10px;

            display: flex;

            align-items: center;

            gap: 8px;

        }



        .wraptopmb .contact-subtitle {

            font-size: 0.85rem;

            color: #64748b;

            margin-bottom: 15px;

        }



        .wraptopmb .contact-btn-custom {

            background: #151515;

            color: white;

            padding: 6px 4px;

            border-radius: 50px;

            width: 100%;

            display: flex;

            align-items: center;

            justify-content: center;

            text-decoration: none;

            font-weight: 600;

            transition: all 0.3s ease;

            border: 2px solid #0f172a;

        }



        .wraptopmb .contact-btn-custom:hover {

            background: #b48a3c;

            border-color: #b48a3c;

            color: white;

            transform: translateY(-2px);

        }



        /* SPINNER */

        .wraptopmb .spinner-border {

            width: 2rem;

            height: 2rem;

            border-width: 3px;

            color: #b48a3c;

        }

        .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;

        }



        /* Link Style */

        .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;

        }



        /* Icon home nhỏ gọn */

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

        .page-breadcrumb li a i {

            font-size: 0.9em;

            opacity: 0.8;

        }



        /* Hover Effect: Nhẹ nhàng, giống Notion/Github */

        .page-breadcrumb li a:hover {

            color: #0f172a;

        }



        /* Dấu phân cách (Separator) */

        .page-breadcrumb li + li::before {

            content: "/"; /* Dùng dấu gạch chéo thay vì icon to */

            color: #cbd5e1;

            padding: 0 4px;

            font-size: 0.9em;

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

        }

        

        /* Item đang active (Trang hiện tại) */

        .page-breadcrumb li.active {

            color: #0f172a; /* Màu đậm */

            font-weight: 600;

            padding: 4px 8px;

            pointer-events: none; /* Không click được */

        }

        .wrapfaq .content-card .title{font-weight: 700;

    font-size: 23px;color: #141414}

        /* responsive */

        @media (max-width: 1200px) {

            .wrapmucluc .sticky-toc-wrapper { left: 10px; }

        }



        @media (max-width: 1000px) {

           .wrapnews .section-title { font-size: 1.85rem; }

           .wrap-menu{display: none}

           .wraptopmb{display: block;}

           body{margin-top:65px}

        }



        @media (max-width: 992px) {

            .wrapcaidat .preview-panel { display: none; }

            .wrapcaidat .status-panel { padding: 40px 25px; }

            .wrapformlh .info-panel, .wrapformlh .form-panel { padding: 40px; }

            .wrapformlh .headline-title { font-size: 32px; }

            .wrapformlh .btn-close-custom { color: #0f172a; background: #f1f5f9; top: 15px; right: 15px;}

            .wrapmucluc .sticky-toc-wrapper {
                top: auto;
                bottom: 100px;
                left: 9px;
                transform: translateY(20px);
            }

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

                transform: translateY(0);

            }

            .wrapmucluc .sticky-panel {
                width: 314px !important;
                top: auto;
                bottom: 60px; /* Open upwards */
                left: 0;
                transform-origin: bottom left;
            }
            .wrapmucluc .toc-link,.wrapmucluc .toc-h3 .toc-link{font-size: 13px;}
            .wrapnews { padding: 4rem 0; }

            .wrapnews .section-title { font-size: 1.75rem; }

            .wrapnews .news-card { gap: 18px; }

            .wrapnews .card-image-wrapper { flex: 0 0 140px; height: 140px; }

            .wrap-blogscroll { height: auto; overflow: visible; }

            .wrap-blogscroll .panel { position: relative; height: auto; min-height: 100vh; padding: 60px 0; }

            .wrap-blogscroll .side-dots { display: none !important; }

            .wrap-blogscroll h2.seo-title { text-align: center; font-size: 32px; }

            .wrap-blogscroll .image-wrapper { margin-top: 30px; }

            .wrap-blogscroll .btn-view-more { display: flex; width: fit-content; margin: 20px auto 0 auto; }

             .wrap-dtgd .hero-title { font-size: 2rem; }

            

            /* Stack columns */

            .wrap-dtgd .preview-container { 

                position: static; 

                margin-bottom: 30px; 

                flex-direction: column; 

            }

            

            /* Thumbs moved to bottom row */

            .wrap-dtgd .thumbs-row {

                flex-direction: row; 

                width: 100%;

                justify-content: center;

                order: 1; /* Below image */

                margin-top: 15px;

            }

            

            .wrap-dtgd .thumb-item {

                width: 50px; height: 50px; /* Slightly smaller */

            }



            .wrap-dtgd .browser-mockup {

                order: 0;

                width: 100%;

                border-radius: 12px;

                /* Fix for "Nice Image on Phone": Reduce height so it fits in one screen glance */

            }



            .wrap-dtgd .scroll-viewport {

                height: 350px; /* Optimized height for mobile screens */

            }

            

            /* Hide non-essential header elements on mobile to save space */

            .wrap-dtgd .browser-header {

                padding: 8px 12px;

            }

            .wrap-dtgd .address-bar {

                font-size: 0.7rem;

                padding: 3px 8px;

            }

            .wrap-dtgd .live-badge {

                top: 45px;

                right: 10px;

                padding: 4px 10px;

                font-size: 0.7rem;

            }



            /* Fix Price Size on Mobile */

            .wrap-dtgd .price-final { font-size: 2.2rem; }

            .wrap-dtgd .price-display { flex-direction: row; align-items: flex-end; }

            .wrapkhung .section-header h2 { font-size: 2.2rem; }

            .wrapkhung .filter-main-row { flex-wrap: wrap; }

            .wrapkhung .search-wrapper { flex: 1; order: 1; }

            .wrapkhung .actions-wrapper { order: 2; }

            .wrapkhung .category-nav-container { flex: 1 1 100%; order: 3; margin-top: 10px; }

            .wrapheader{display: none}

            .wrap-giaodien { padding: 60px 0; }

            .wrap-giaodien .section-header h2 { font-size: 30px; }

            .wrap-giaodien .card-title { font-size: 20px; }

            .wrapfooter .newsletter-card {

                padding: 2rem;

            }

            .wrapfooter .newsletter-title {

                font-size: 1.75rem;

                margin-bottom: 1.5rem;

                text-align: center;

            }

            .wrapfooter .footer-heading {

                margin-top: 2.5rem;

            }

            .wrapformlh .info-side, .wrapformlh .form-side {

                padding: 40px;

            }

            .wrapformlh .info-title {

                font-size: 32px;

            }

            .premium-testimonials .testi-card-new { padding: 50px; }

        .premium-testimonials .feedback-text { font-size: 1.1rem; }

            .wrap-banggia .pricing-item { margin-bottom: 20px; }

            .wrap-banggia .badge-popular { right: -32px; top: 15px; }

            .wrapfaq .main-title { font-size: 2.2rem; }

            .wrapfaq .content-card { padding: 30px; border-radius: 30px; margin-top: 40px; }

            .wrap-quytrinh .process-card-wrapper {

                margin-bottom: 30px;

            }

            .wrapdv .col-lg-5 {

                position: relative;

            }

            .wrapdv .sticky-content {

                position: sticky;

                top: 120px;

                padding-right: 40px;

            }

            .wrapdv .stagger-col {

                margin-top: 80px;

            }

            .wrap-gioithieu {

                padding: 60px 0;

            }

            .wrap-gioithieu .main-title {

                font-size: 36px;

            }

            .wrap-gioithieu .circle-img-wrap {

                width: 140px;

                height: 140px;

                top: -20px;

                right: -10px;

            }

            .wrap-gioithieu .bottom-card {

                margin-top: 40px;

                left: 0;

                margin-left: 0;

                padding: 30px 20px;

            }

            .wrap-gioithieu .vertical-sep {

                border-right: none;

                border-bottom: 1px solid #eee;

                padding-bottom: 20px;

                margin-bottom: 20px;

            }

            .wrap-gioithieu .img-composition {

                margin-bottom: 60px;

                padding-left: 10px;

            }

            .wrap-gioithieu .cta-area {

                flex-wrap: wrap;

                gap: 20px;

            }

             .wrapslider{

                height: auto;

                min-height: 100vh;

                padding: 35px 0 60px 0; /* Thêm padding top/bottom */

            }



            .wrapslider .container-fluid-custom {

                padding: 0 20px; /* Padding ngang an toàn */

            }



            .wrapslider .content-wrapper {

                text-align: center;

                align-items: center;

                padding-right: 0;

                margin-bottom: 0px; /* Tách biệt khối chữ và ảnh */

                height: auto;

            }



            .wrapslider h1 {

                font-size: 21px; /* Giảm size chữ */

                margin-bottom: 1rem;

            }



            .wrapslider p.desc {

                font-size: 14px;

                margin-bottom: 2rem;

            }

            

            .wrapslider .btn-group-custom {

                flex-wrap: wrap;

                justify-content: center;

                width: 100%;

            }



            /* Reset 3D effects on mobile for clean look */

            .wrapslider .visual-wrapper {

                perspective: none;

                height: auto;

                padding: 0 10px;

                margin-bottom: 40px;

            }



            .wrapslider .card-3d-container {

                transform: none !important;

                max-width: 100%;

                aspect-ratio: 4/3;

            }



            .wrapslider .main-img-card {

                position: relative;

                width: 100%;

                height: 100%;

                top: 0;

                left: 0;

                transform: none !important;

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

            }



            /* Điều chỉnh vị trí các thẻ nổi trên mobile để không bị cắt */

            .wrapslider .float-element {

                transform: none !important; /* Tắt 3D transform */

                padding: 7px 9px;

            }



            .wrapslider .float-top-right {

                top: -10px;

                right: -10px;

            }



            .wrapslider .float-bottom-left {

                bottom: -10px;

                left: -10px;

                min-width: auto;

            }



            /* Đưa control xuống dưới cùng và giữa */

            .wrapslider .swiper-controls {

                position: relative;

                bottom: auto;

                left: auto;

                justify-content: center;

                margin-top: 20px;

                width: 100%;

            }

            .wrap-news-v3 .news-title { font-size: 22px; }

            .wrap-news-v3 .card-body { padding: 25px; }

        }



        @media (max-width: 768px) {

            .wrapfooter .newsletter-title {

        font-size: 21px;

        line-height: 28px;}

            .wrap-dtgd .pricing-box{padding: 19px 12px;}

                .wrap-dtgd .hero-title {

            }

        font-size: 25px;

        line-height: 29px;

    }

            .titledt{display: none}

            .wrapslider .title{    font-size: 27px;

    font-weight: 800;

    line-height: 36px;}

    .wraptitle .text-reveal-stagger,.wrap-banggia .section-title h2,.wrap-layout .section-title h2 {

    font-weight: 800;

    font-size: 30px;

    line-height: 41px;

}

.wrap-giaodien .btn-view{display: none}

.wraptabcontent .section-header h2 {

    font-size: 24px;

    font-weight: 800;

    letter-spacing: -0.03em;

    line-height: 30px;

}

.wraptabcontent .section-header span {

    font-size: 13px;}

    .wraptabcontent .category-title {

    font-size: 25px;

    line-height: 40px;

}

.wrapformlh .submit-btn{padding: 12px 10px;}

.premium-testimonials .testi-card-new {

        padding: 41px 17px;

    }

    .premium-testimonials .swiper-container{padding: 11px 6px !important;}

            

            .wrap-layout .section-title h2 {

            width: 100%;margin: auto;

            }

            .wrapcaidat .main-title { font-size: 22px !important; }

            .wrapcaidat .status-panel { padding: 30px 20px; }

            .wrapcaidat .modal-content { border-radius: 20px; }

            .wrapthongbao .lux-title { font-size: 2.2rem; }

            .wrapthongbao .lux-modal-card { padding: 40px 24px; border-radius: 24px; }

            .wrapthongbao .lux-modal-body h3 { font-size: 1.5rem; }

             .wrapformlh .headline-title { font-size: 26px !important; }

            .wrapformlh .modal-dialog {  }

            .wrapformlh .detail-pill { width: 100%; justify-content: space-between; }

          .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: 500px; max-height: 50vh; }

             .wrapnews { padding: 3rem 0 !important; }

            .wrapnews .section-title { font-size: 1.6rem !important; }

            .wrapnews .news-card { flex-direction: column; gap: 20px; padding: 15px; }

            .wrapnews .card-image-wrapper { flex: 0 0 240px; width: 100%; height: 240px; }

            .wrapnews .card-title { font-size: 1.35rem !important; -webkit-line-clamp: 3; }

            .wrapnews .section-header { margin-bottom: 30px; }

            .wrapkhung { padding: 40px 0; }

            .wrapkhung .section-header { text-align: center; }

            .wrapkhung .section-header h2 { font-size: 2rem !important; }

            .wrapkhung .filter-card { padding: 20px; border-radius: 20px; }

            .wrapkhung .search-wrapper {flex: 1 1 41%;}

            .wrapkhung .actions-wrapper {flex: 1 1 38%;}

            .wrapkhung .custom-select {width: 100%;}

           .wrapdv { padding: 60px 0; }

            .wrapdv .main-title { font-size: 2.5rem; }

            .wrapdv .stats-container { gap: 24px; }

            .wrapdv .sticky-content { padding-right: 0; margin-bottom: 40px; }

            .wrapdv .service-card { padding: 30px; }

            .wrap-news-v3 { padding: 60px 0; }

            .wrap-news-v3 .section-title { font-size: 32px; }

            .wrap-news-v3 .news-card-vertical { margin-bottom: 30px; } 

        }



        @media (max-width: 576px) {

            .wrapthongbao .lux-title { font-size: 1.8rem; }

            .wrapthongbao .lux-modal-footer { flex-direction: column-reverse; gap: 10px; }

            .wrapthongbao .lux-btn { width: 100%; justify-content: center; padding: 14px 20px; }

            .wrapthongbao .lux-modal-btn { width: 100%; }

            .wrapthongbao .lux-badge { font-size: 0.7rem; padding: 8px 16px; }

            .wrapformlh .form-panel { padding: 30px 20px; }

            .wrapformlh .form-header-title { font-size: 22px; margin-bottom: 25px; }

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

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

              .wrapnews .section-title { font-size: 1.4rem !important; }

            .wrapnews .card-title { font-size: 1.15rem !important; }

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

            .wrapnews .card-image-wrapper { height: 200px; }

            .wrapnews .section-header { flex-direction: row; align-items: center; }

            .wrapnews .nav-btn { width: 38px; height: 38px; }

            .wrapkhung .section-header h2 { font-size: 1.6rem !important; }

            .wrapkhung .category-nav-container { padding: 0 35px; }

           .wrapdv .stat-item { flex: 1 1 40%; }

           .wrap-news-v3 .section-title { font-size: 28px; }

            .wrap-news-v3 .news-title { font-size: 20px; }

            .wrap-news-v3 .card-thumb { padding-top: 60%; }

       }



       /* sapo */

       

       .wraptabcontent {

            background-color: #020617;

            color: #ffffff;

            padding: 100px 0;

            overflow: hidden;

            position: relative;

        }



        .wraptabcontent .section-header {

            max-width: 900px;

            margin: 0 auto 80px auto;

            text-align: center;

        }



        .wraptabcontent .section-header span {

            font-size: 1.1rem;

            font-weight: 400;

            opacity: 0.9;

            display: block;

            margin-bottom: 15px;

        }



        .wraptabcontent .section-header h2 {

            font-size: clamp(2rem, 5vw, 3.5rem);

            font-weight: 800;

            letter-spacing: -0.03em;

            line-height: 1.2;

        }



        .wraptabcontent .category-title {

            font-size: 37px;

            font-weight: 800;

            margin-bottom: 14px;    line-height: 53px;

        }



        .wraptabcontent .category-title span {

            color: var(--theme-color);

        }



        .wraptabcontent .category-desc {

            font-size: 1rem;

            color: rgba(255, 255, 255, 0.8);

            margin-bottom: 40px;

            max-width: 500px;

            line-height: 1.6;

        }



        /* Tabs Styling */

        .wraptabcontent .feature-list {

            position: relative;

            padding-left: 0;

            list-style: none;

        }



        .wraptabcontent .feature-item {

            cursor: pointer;

            padding: 20px 0 20px 30px;

            border-left: 3px solid rgba(255, 255, 255, 0.1);

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

            margin-bottom: 10px;

            opacity: 0.5;

        }



        .wraptabcontent .feature-item:hover {

            opacity: 0.8;

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

        }



        .wraptabcontent .feature-item.active {

            opacity: 1;

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

            background: linear-gradient(90deg, rgba(0, 242, 195, 0.05) 0%, transparent 100%);

        }



        .wraptabcontent .feature-item h3 {

            font-size: 1.25rem;

            font-weight: 700;

            margin-bottom: 10px;

            color: #ffffff;

        }



        .wraptabcontent .feature-item p {

            font-size: 0.95rem;

            margin-bottom: 0;

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

            line-height: 1.5;

            display: none; /* Accordion effect for active */

        }



        .wraptabcontent .feature-item.active p {

            display: block;

        }



        /* Image Display Area */

        .wraptabcontent .visual-container {

            position: relative;

            height: 100%;

            min-height: 500px;

            display: flex;

            align-items: center;

            justify-content: center;

        }



        .wraptabcontent .main-image-wrapper {

            position: relative;

            width: 100%;

            border-radius: 24px;

            overflow: hidden;

            box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5);

            transition: transform 0.6s ease;

        }



        .wraptabcontent .main-image-wrapper:hover {

            transform: translateY(-10px);

        }



        .wraptabcontent .tab-image {

            max-width: 100%;

            height: auto;

            display: none;

            object-fit: contain;

            animation: imageFadeIn 0.8s forwards;

        }



        .wraptabcontent .tab-image.active {

            display: block;

        }



        /* Floating elements for "Premium" feel */

        .wraptabcontent .glow-orb {

            position: absolute;

            width: 400px;

            height: 400px;

            background: radial-gradient(circle, rgba(0, 242, 195, 0.1) 0%, transparent 70%);

            border-radius: 50%;

            z-index: 0;

            filter: blur(60px);

            pointer-events: none;

        }



        @keyframes imageFadeIn {

            from { opacity: 0; transform: scale(0.98); }

            to { opacity: 1; transform: scale(1); }

        }



        /* Responsive */

        @media (max-width: 991.98px) {

            .wraptabcontent {

                padding: 60px 0;

            }

            .wraptabcontent .feature-list {

                margin-top: 50px;

            }

            .wraptabcontent .visual-container {

                min-height: 350px;

            }

        }



            .wrapdk {

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 40px 20px;

    position: relative;

}

.wrapdk .circle-deco {

    position: absolute;

    border-radius: 50%;

    z-index: 0;

    filter: blur(80px);

}

.wrapdk .circle-1 {

    width: 400px;

    height: 400px;

    background: var(--theme-color5);

    top: -100px;

    right: -100px;

}

.wrapdk .circle-2 {

    width: 300px;

    height: 300px;

    background: rgba(77, 182, 172, 0.1);

    bottom: -50px;

    left: -50px;

}



.wrapdk .auth-container {

    position: relative;

    z-index: 1;

    width: 100%;

    max-width: 1100px;

}



.wrapdk .auth-card {

    background: #ffffff; /* Đã thay var(--white) */

    border-radius: 32px;

    overflow: hidden;

    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.08);

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

    display: flex;

    flex-direction: row;

}



.wrapdk .auth-info-side {

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

    padding: 60px;

    color: #ffffff; /* Đã thay var(--white) */

    width: 40%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    position: relative;

}



.wrapdk .auth-info-side::before {

    content: '';

    position: absolute;

    top: 0; left: 0; right: 0; bottom: 0;

    background: url('https://www.transparenttextures.com/patterns/cubes.png');

    opacity: 0.1;

}



.wrapdk .auth-form-side {

    padding: 60px;

    width: 60%;

    background: #ffffff; /* Đã thay var(--white) */

}



.wrapdk h2 {

    font-weight: 800;

    letter-spacing: -0.02em;

    color: #1e293b; /* Đã thay var(--text-main) */

    margin-bottom: 8px;

}



.wrapdk .subtitle {

    color: #64748b; /* Đã thay var(--text-muted) */

    margin-bottom: 32px;

    font-size: 1rem;

}



.wrapdk .form-label {

    font-weight: 600;

    font-size: 0.875rem;

    color: #1e293b; /* Đã thay var(--text-main) */

    margin-bottom: 8px;

}



.wrapdk .input-group-custom {

    position: relative;

    margin-bottom: 20px;

}



.wrapdk .form-control {

    height: 56px;

    background: #f1f5f9;

    border: 2px solid transparent;

    border-radius: 16px;

    padding: 12px 20px;

    font-size: 0.95rem;

    font-weight: 500;

    transition: all 0.3s ease;

    color: #1e293b; /* Đã thay var(--text-main) */

}



.wrapdk .form-control:focus {

    background: #ffffff; /* Đã thay var(--white) */

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

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

    outline: none;

}



.wrapdk .password-wrapper {

    position: relative;

}



.wrapdk .toggle-password {

    position: absolute;

    right: 16px;

    top: 50%;

    transform: translateY(-50%);

    cursor: pointer;

    color: #64748b; /* Đã thay var(--text-muted) */

    transition: color 0.3s;

    z-index: 10;

    padding: 5px;

}



.wrapdk .toggle-password:hover {

    color: var(--theme-color);

}



.wrapdk .btn-register {

    background: var(--theme-color);

    color: #ffffff; /* Đã thay var(--white) */

    border: none;

    height: 56px;

    border-radius: 16px;

    font-weight: 700;

    font-size: 1rem;

    width: 100%;

    margin-top: 10px;

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

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

}



.wrapdk .btn-register:hover {

    background: var(--theme-color2);

    transform: translateY(-3px);

    box-shadow: 0 15px 25px -5px rgba(255, 77, 141, 0.5);

    color: #ffffff; /* Đã thay var(--white) */

}



.wrapdk .divider {

    display: flex;

    align-items: center;

    text-align: center;

    margin: 24px 0;

    color: #64748b; /* Đã thay var(--text-muted) */

    font-size: 0.85rem;

    font-weight: 500;

}



.wrapdk .divider::before,

.wrapdk .divider::after {

    content: '';

    flex: 1;

    border-bottom: 1px solid #e2e8f0;

}



.wrapdk .divider:not(:empty)::before { margin-right: 15px; }

.wrapdk .divider:not(:empty)::after { margin-left: 15px; }



.wrapdk .btn-google {

    background: #ffffff; /* Đã thay var(--white) */

    border: 2px solid #e2e8f0;

    height: 56px;

    border-radius: 16px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    font-weight: 600;

    transition: all 0.3s ease;

    color: #1e293b; /* Đã thay var(--text-main) */

    width: 100%;

}



.wrapdk .btn-google:hover {

    background: #f8fafc;

    border-color: #cbd5e1;

    transform: translateY(-2px);

}



.wrapdk .btn-google img {

    width: 20px;

}



.wrapdk .login-link {

    text-align: center;

    margin-top: 30px;

    font-size: 0.9rem;

    color: #64748b; /* Đã thay var(--text-muted) */

}



.wrapdk .login-link a {

    color: var(--theme-color3);

    text-decoration: none;

    font-weight: 700;

    transition: color 0.3s;

}



.wrapdk .login-link a:hover {

    color: var(--theme-color4);

}



/* Animations */

@keyframes fadeInUp {

    from { opacity: 0; transform: translateY(30px); }

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

}



.wrapdk .animate-up {

    animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;

}



/* Responsive Breakpoints */

@media (max-width: 1200px) {

    .wrapdk .container { max-width: 95%; }

}



@media (max-width: 1000px) {

    .wrapdk .auth-card { flex-direction: column; }

    .wrapdk .auth-info-side { width: 100%; padding: 40px; }

    .wrapdk .auth-form-side { width: 100%; padding: 40px; }

}



@media (max-width: 992px) {

    .wrapdk section { padding: 3rem 0; }

}



@media (max-width: 768px) {

    .backtotop{display: none}

    .wrapdk h2 { font-size: 1.75rem !important; }

    .wrapdk .auth-form-side { padding: 30px 20px; }

    .wrapdk .auth-info-side { padding: 40px 20px; text-align: center; }

}



@media (max-width: 576px) {

    .wrapdk { padding: 20px 10px; }

    .wrapdk h2 { font-size: 1.5rem !important; }

    .wrapdk .subtitle { font-size: 0.9rem !important; }

    .wrapdk .form-control { height: 50px; }

    .wrapdk .btn-register, .wrapdk .btn-google { height: 50px; }

}



/* thông tin user */

/* ===== phần quản lý thông tin user */

/* File: public/site/css/user_dashboard.css */

.wrapthongtinus {

    background-color: #f8fafc;

    color: #1e293b;

    --primary-teal: #0d9488;

    --deep-slate: #0f172a;

    --emerald-glow: #10b981;

}



.wrapthongtinus .fw-800 { font-weight: 800; }

.wrapthongtinus .fw-700 { font-weight: 700; }

.wrapthongtinus .fw-600 { font-weight: 600; }

.wrapthongtinus .fw-500 { font-weight: 500; }

.wrapthongtinus .fs-14 { font-size: 14px; }

.wrapthongtinus .fs-15 { font-size: 15px; }

.wrapthongtinus .extra-small { font-size: 12px; }

.wrapthongtinus .text-teal {color: var(--theme-color);}

.wrapthongtinus .text-teal:hover{

    color: var(--theme-color2);

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

}

.wrapthongtinus .text-emerald { color: #10b981; }

.wrapthongtinus .bg-faded {background-color: #f8f9f9;}

.wrapthongtinus .bg-soft-teal {background-color: var(--theme-color5);color: var(--theme-color);}

.wrapthongtinus .bg-soft-indigo { background: #eef2ff; color: #4f46e5; }

.wrapthongtinus .tracking-wider { letter-spacing: 0.05em; }

.wrapthongtinus .border-bottom-dashed { border-bottom: 1px dashed #e2e8f0; }



/* Dashboard Stats */

.wrapthongtinus .stat-card { background: #ffffff; border: 1px solid #edf2f7; transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); box-shadow: 0 4px 6px rgba(0,0,0,0.02); }

.wrapthongtinus .stat-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.06); }

.wrapthongtinus .stat-icon { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 16px; font-size: 1.25rem; }

.wrapthongtinus .bg-soft-blue { background: #eff6ff; color: #3b82f6; }

.wrapthongtinus .bg-soft-amber { background: #fffbeb; color: #f59e0b; }

.wrapthongtinus .bg-soft-emerald { background: #ecfdf5; color: #10b981; }



/* Sidebar Navigation */

.wrapthongtinus .profile-sidebar { background: #ffffff; border: 1px solid #f1f5f9; box-shadow: 0 10px 30px rgba(0,0,0,0.03); }
.wrapthongtinus .sticky-top{z-index: 100}
.wrapthongtinus .avatar-wrapper { width: 110px; height: 110px; padding: 6px; border: 2px dashed #e2e8f0; border-radius: 50%; margin-bottom: 15px;}

.wrapthongtinus .avatar-wrapper img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.wrapthongtinus .btn-edit-avatar {background: var(--theme-color);color: white;width: 34px;height: 34px;display: flex;align-items: center;justify-content: center;box-shadow: 0 4px 12px rgba(13, 148, 136, 0.4);transition: 0.3s;cursor: pointer;}

.wrapthongtinus .btn-edit-avatar:hover {background: var(--theme-color2);transform: scale(1.1);}

.wrapthongtinus .id-badge { display: inline-block; padding: 4px 16px; background: #f1f5f9; border-radius: 50px; font-size: 12px; font-weight: 700; color: #64748b; }



/* Menu Tabs */

.wrapthongtinus .custom-sidebar-nav .nav-link { padding: 14px 18px; border-radius: 12px; margin-bottom: 4px; font-weight: 600; color: #64748b; transition: 0.3s; text-align: left; display: flex; align-items: center; gap: 12px; border: none; background: transparent; cursor: pointer; width: 100%;}

.wrapthongtinus .custom-sidebar-nav .nav-link:hover {background: #f8fafc;color: var(--theme-color);}

.wrapthongtinus .custom-sidebar-nav .nav-link.active {background: var(--theme-color);color: white;box-shadow: 0 10px 20px var(--theme-color5);}



/* Content Styling */

.wrapthongtinus .content-card { background: white; border: 1px solid #f1f5f9; box-shadow: 0 4px 20px rgba(0,0,0,0.02); }

.wrapthongtinus .custom-input { background: #f8fafc; border: 2px solid #f1f5f9; padding: 14px 18px; border-radius: 14px; font-weight: 500; transition: 0.3s; }

.wrapthongtinus .custom-input:focus { border-color: #0d9488; background: white; box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.1); outline: none; }

.wrapthongtinus .btn-premium-primary { background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%); color: white; font-weight: 700; border: none; transition: 0.3s; box-shadow: 0 10px 20px rgba(13, 148, 136, 0.2); }

.wrapthongtinus .btn-premium-primary:hover { transform: translateY(-2px); box-shadow: 0 15px 25px rgba(13, 148, 136, 0.3); color: white; }



/* Trạng thái Responsive */

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

.wrapthongtinus .animate-fade-in { animation: fadeIn 0.6s ease forwards; }

@media (max-width: 992px) { .wrapthongtinus .profile-sidebar { position: static !important; margin-bottom: 2rem; } }

@media (max-width: 768px) {

    .wrapthongtinus .border-bottom-dashed img{display: none;}

    .wrapthongtinus .border-bottom-dashed h6 a{font-size: 12px}

    .wrapthongtinus .custom-sidebar-nav { flex-direction: row; overflow-x: auto; white-space: nowrap; gap: 8px; padding-bottom: 10px; }

    .wrapthongtinus .custom-sidebar-nav .nav-link {justify-content: center;font-size: 16px;}

}



/* =========================================================

   CSS GIAI ĐOẠN 2: KHU VỰC SỔ ĐỊA CHỈ (ADDRESS BOOK)

   ========================================================= */



   .wrapthongtinus .address-card {

    background: #ffffff;

    transition: all 0.3s ease;

}



.wrapthongtinus .address-card:hover {

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

    border-color: #0d9488 !important; /* Đổi viền sang màu Teal khi hover */

}



.wrapthongtinus .address-icon {

    width: 50px;

    height: 50px;

    background: #f8fafc;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: 0.3s;

}



.wrapthongtinus .address-card:hover .address-icon {

    background: #f0fdfa;

    color: #0d9488 !important;

}



/* Background nền xanh lá nhạt cho thẻ mặc định */

.wrapthongtinus .bg-success-soft {

    background-color: #dcfce7 !important;

}



/* Nút 3 chấm mở Menu Dropdown */

.wrapthongtinus .btn-icon {

    width: 36px;

    height: 36px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #64748b;

    background: transparent;

    transition: 0.2s;

    cursor: pointer;

}



.wrapthongtinus .btn-icon:hover,

.wrapthongtinus .btn-icon:focus {

    background: #f1f5f9;

    color: #0f172a;

    outline: none;

}



/* Tùy chỉnh Dropdown Menu */

.wrapthongtinus .dropdown-menu {

    border-radius: 12px !important;

    padding: 8px 0;

}



.wrapthongtinus .dropdown-item {

    font-size: 14px;

    font-weight: 500;

    color: #475569;

    transition: 0.2s;

}



.wrapthongtinus .dropdown-item:hover {

    background-color: #f8fafc;

    color: #0f172a;

}



.wrapthongtinus .dropdown-item.text-danger:hover {

    background-color: #fef2f2;

    color: #dc2626 !important;

}

.wrapthongtinus .select2-container--bootstrap-5 {

    display: block;

    width: 100% !important;

}



.wrapthongtinus .select2-container--bootstrap-5 .select2-selection {

    background-color: #f8fafc !important;

    border: 2px solid #f1f5f9 !important;

    border-radius: 14px !important;

    min-height: 52px !important; /* Độ cao bằng với input thường */

    padding: 8px 15px !important;

    display: flex !important;

    align-items: center;

    font-weight: 500;

    color: #1e293b;

    transition: all 0.3s ease;

    box-shadow: none !important;

}



.wrapthongtinus .select2-container--bootstrap-5.select2-container--focus .select2-selection,

.wrapthongtinus .select2-container--bootstrap-5.select2-container--open .select2-selection {

    border-color: #0d9488 !important;

    background-color: #ffffff !important;

    box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.1) !important;

}



/* Chữ bên trong select */

.wrapthongtinus .select2-container--bootstrap-5 .select2-selection__rendered {

    padding-left: 0 !important;

    color: #1e293b !important;

    font-size: 14px;

}



/* Nút mũi tên trỏ xuống */

.wrapthongtinus .select2-container--bootstrap-5 .select2-selection__arrow {

    top: 50% !important;

    transform: translateY(-50%) !important;

    right: 15px !important;

}



/* Fix dropdown menu bên dưới */

.select2-container--bootstrap-5 .select2-dropdown {

    border-color: #e2e8f0 !important;

    border-radius: 12px !important;

    box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;

    overflow: hidden;

}

.select2-container--bootstrap-5 .select2-results__option {

    padding: 10px 15px;

    font-size: 14px;

}



/* CSS TIMELINE LỊCH SỬ VẬN CHUYỂN */

.wrapthongtinus .history-timeline .timeline-item { display: flex; gap: 15px; margin-bottom: 20px; position: relative; }

.wrapthongtinus .history-timeline .time-box { min-width: 60px; text-align: right; }

.wrapthongtinus .history-timeline .h-time { font-weight: 800; color: #0f172a; font-size: 13px; }

.wrapthongtinus .history-timeline .h-date { font-size: 11px; color: #94a3b8; font-weight: 600; }

.wrapthongtinus .history-timeline .indicator { display: flex; flex-direction: column; align-items: center; padding-top: 4px; }

.wrapthongtinus .history-timeline .dot { width: 12px; height: 12px; background: #cbd5e1; border-radius: 50%; z-index: 2; border: 2px solid #f1f5f9; }

.wrapthongtinus .history-timeline .current .dot { background: #0d9488; box-shadow: 0 0 0 4px rgba(13,148,136,0.1); }

.wrapthongtinus .history-timeline .line { width: 2px; flex-grow: 1; background: #cbd5e1; margin: 4px 0; }

.wrapthongtinus .history-timeline .timeline-item:last-child .line { display: none; }

.wrapthongtinus .history-timeline .status-content { flex: 1; padding-bottom: 10px; }



/* Custom Phân trang Bootstrap */

.wrapthongtinus .pagination .page-link { border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; margin: 0 5px; color: #64748b; border: none; font-weight: 600; background: #f8fafc;}

.wrapthongtinus .pagination .page-item.active .page-link {background: var(--theme-color);color: white;box-shadow: 0 4px 10px var(--theme-color5);}

.wrapthongtinus .pagination .page-item:not(.active) .page-link:hover { background: #e2e8f0; }

.wrapthongtinus .order-filter-wrapper .filter-btn i {

    margin-right: 6px !important;

}



/* Stepper - Thanh tiến trình Modal */

.wrapthongtinus .modern-stepper {

    position: relative;

    padding-top: 10px;

    z-index: 1;

}

/* Đây là cái đường kẻ ngang */

.wrapthongtinus .modern-stepper .progress-line {

    position: absolute;

    top: 25px; /* Canh giữa icon */

    left: 15%;

    right: 15%;

    height: 2px;

    background-color: #e2e8f0;

    z-index: -1;

}

.wrapthongtinus .step-point {

    position: relative;

    z-index: 2;

    text-align: center;

    flex: 1;

}

/* Icon trạng thái */

.wrapthongtinus .step-icon {

    width: 32px;

    height: 32px;

    background-color: #ffffff;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 8px;

    color: #94a3b8;

    font-size: 16px;

}

/* Màu sắc khi Active */

.wrapthongtinus .step-point.active .step-icon {

    color: #0f172a; /* Màu icon tối như thiết kế của bạn */

}

.wrapthongtinus .step-point.active .step-label {

    color: #0f172a;

    font-weight: 700;

}

.wrapthongtinus .step-label {

    font-size: 13px;

    font-weight: 500;

    color: #64748b;

}

.wrapthongtinus .order-filter-wrapper {

    display: inline-flex;

    align-items: center;

    background: #f1f5f900;

    padding: 6px;

    border-radius: 50px;

    gap: 8px; /* Tạo khoảng cách giữa các nút */

    flex-wrap: wrap; /* Chống vỡ giao diện trên Mobile */

}

.wrapthongtinus .order-filter-wrapper .filter-btn {

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 10px 22px;

    border-radius: 50px;

    font-weight: 700;

    font-size: 14px;

    color: #64748b;

    border: none;

    background: transparent;

    transition: all 0.3s ease;

}

.wrapthongtinus .order-filter-wrapper .filter-btn i {

    margin-right: 8px !important; /* Đẩy Icon cách xa chữ ra */

    font-size: 1.1rem;

}

.wrapthongtinus .badge-status {

    padding: 6px 14px;

    border-radius: 50px;

    font-size: 12px;

    font-weight: 700;

    display: inline-flex;

    align-items: center;

    gap: 6px; /* Khoảng cách giữa icon và chữ */

}

.wrapthongtinus .status-primary { background: #f1f5f9; color: #475569; } /* Đang xử lý - Xám */

.wrapthongtinus .status-warning { background: #fffbeb; color: #f59e0b; } /* Đang giao - Vàng */

.wrapthongtinus .status-success { background: #ecfdf5; color: #10b981; } /* Hoàn tất - Xanh lá */

.wrapthongtinus .status-danger { background: #fef2f2; color: #ef4444; }  /* Đã hủy - Đỏ */

.wrapthongtinus .status-return { background: #f3e8ff; color: #7e22ce; }  /* Đã hủy - Đỏ */

/* Nút Thao tác (Xem chi tiết) */

.wrapthongtinus .btn-outline-custom {

    border: 1px solid #e2e8f0;

    background-color: #ffffff;

    color: var(--theme-color); /* Màu xanh Teal chủ đạo */

    font-size: 12px;

    font-weight: 600;

    padding: 6px 16px;

    transition: all 0.3s ease;

}

.wrapthongtinus .btn-outline-custom:hover {

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

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

    color: var(--theme-color);

}

.wrapthongtinus .order-filter-wrapper .filter-btn.active {

    background: #ffffff;

    color: var(--theme-color);

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

}



/* =========================================================

   GIAI ĐOẠN 4: THẺ NGÂN HÀNG (BANK CARDS)

   ========================================================= */

   .wrapthongtinus .bank-card {

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

    border: none;

}

.wrapthongtinus .bank-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 15px 30px rgba(0,0,0,0.1);

}

.wrapthongtinus .bank-card-bg {

    position: absolute;

    top: 0; left: 0; right: 0; bottom: 0;

    z-index: 0;

    opacity: 0.9;

}

/* Màu thẻ mặc định (Xanh Teal) */

.wrapthongtinus .active-bank .bank-card-bg {

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

}

/* Màu thẻ phụ (Xám Đen) */

.wrapthongtinus .inactive-bank .bank-card-bg {

    background: linear-gradient(135deg, #334155 0%, #475569 100%);

}

/* Select2 cho Modal Ngân Hàng */

.wrapthongtinus #bankModal .select2-container--bootstrap-5 { width: 100% !important; }



/* Giai Đoạn 5 */

.wrapthongtinus select.custom-input {

    /* Gọi lại mũi tên SVG chuẩn của trình duyệt/Bootstrap */

    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%233f4f5e' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;

    background-repeat: no-repeat !important;

    background-position: right 1.2rem center !important; /* Căn mũi tên xích qua trái một chút */

    background-size: 14px 10px !important;

    padding-right: 2.5rem !important; /* Chừa khoảng trống bên phải để chữ không đè lên mũi tên */

    -webkit-appearance: none; 

    -moz-appearance: none;

    appearance: none;

}

/* Giao diện Thẻ Thống kê Affiliate Cao cấp */

.wrapthongtinus .affiliate-stat-box {

    background: #ffffff;

    border: 1px solid #f1f5f9;

    border-radius: 20px;

    padding: 24px;

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

    box-shadow: 0 4px 15px rgba(0,0,0,0.02);

    height: 100%;

    display: flex;

    flex-direction: column;

}

.wrapthongtinus .affiliate-stat-box:hover {

    transform: translateY(-6px);

    box-shadow: 0 15px 30px rgba(13, 148, 136, 0.1); /* Bóng đổ màu Teal nhẹ */

    border-color: #ccfbf1;

}

.wrapthongtinus .aff-icon-wrapper {

    width: 46px;

    height: 46px;

    border-radius: 14px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.25rem;

    margin-bottom: 16px;

}

.wrapthongtinus .aff-title {

    font-size: 12px;

    font-weight: 800;

    color: #707274;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    margin-bottom: 6px;

}

.wrapthongtinus .aff-value {

    font-size: 1.7rem;

    font-weight: 800;

    color: #0f172a;

    margin-bottom: auto; /* Đẩy phần subtext xuống đáy */

    line-height: 1.2;

}

.wrapthongtinus .aff-subtext {

    margin-top: 16px;

    padding-top: 12px;

    border-top: 1px dashed #e2e8f0;

    font-size: 12px;

    font-weight: 600;

    color: #64748b;

    display: flex;

    align-items: center;

}

.wrapthongtinus .aff-sub-badge {

    padding: 4px 8px;

    border-radius: 6px;

    font-size: 11px;

    font-weight: 800;

    margin-right: 8px;

}



/* Responsive cho màn hình điện thoại (Mobile) */

@media (max-width: 767.98px) {

    .wrapthongtinus .affiliate-stat-box { padding: 16px; border-radius: 16px; }

    .wrapthongtinus .aff-icon-wrapper { width: 38px; height: 38px; font-size: 1rem; margin-bottom: 12px; }

    .wrapthongtinus .aff-value { font-size: 1.35rem; }

    .wrapthongtinus .aff-subtext { flex-direction: column; align-items: flex-start; gap: 6px; }

}

/* form thay đổi mật khẩu */

.wrapthongtinus .form-label-custom {

    font-weight: 700;

    color: #475569;

    margin-bottom: 8px;

    font-size: 0.95rem;

}





/* Hiệu ứng khi click chuột vào ô nhập liệu */

.wrapthongtinus .custom-input:focus {

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

    background: white;

    box-shadow: 0 0 0 3px #ea46811a;

    outline: none;

}



/* Nút bấm Submit chính (Màu Gradient Xanh Teal) */

.wrapthongtinus .btn-premium-primary {

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

    color: white;

    font-weight: 700;

    border: none;

    transition: 0.3s;

    box-shadow: 0 10px 20px #ea46811a;

}



.wrapthongtinus .btn-premium-primary:hover {

    transform: translateY(-2px);

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

    color: white;

}



/* ==========================================================================

   PASSWORD TOGGLE (Ô nhập mật khẩu có con mắt ẩn/hiện)

   ========================================================================== */



   .wrapthongtinus .password-toggle-wrapper { 

    position: relative; 

    display: flex;

    align-items: center;

}



/* Chừa khoảng trống bên phải để chữ không bị đè lên con mắt */

.wrapthongtinus .password-toggle-wrapper .custom-input {

    padding-right: 45px; 

}



/* Nút bấm con mắt */

.wrapthongtinus .btn-toggle-eye {

    position: absolute;

    right: 15px;

    color: #94a3b8;

    font-size: 1.1rem;

    cursor: pointer;

    z-index: 10;

    transition: 0.3s;

    padding: 0;

    background: transparent;

    border: none;

}



/* Đổi màu con mắt khi rê chuột vào */

.wrapthongtinus .btn-toggle-eye:hover,

.wrapthongtinus .btn-toggle-eye:focus { 

    color: #0d9488; 

    outline: none;

}



/* Scoped UI - Creative Agency Theme */

        .wrapmenumb {

            background-color: var(--bg-light);

            color: var(--text-dark);

            overflow-x: hidden;

            -webkit-font-smoothing: antialiased;

        }

        .wrapmenumb .header-content img{max-width: 120px;

    height: auto;}

        .wrapmenumb a { text-decoration: none; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); color: inherit; }

        .wrapmenumb ul { list-style: none; padding: 0; margin: 0; }



        /* Typography */

        .wrapmenumb h1, .wrapmenumb h2, .wrapmenumb h3 { font-weight: 800; letter-spacing: -0.03em; line-height: 1.2; color: var(--text-dark); }

        .wrapmenumb p { line-height: 1.7; color: var(--text-gray); font-size: 15px; }



        /* Scrollbar */

        .wrapmenumb ::-webkit-scrollbar { width: 5px; }

        .wrapmenumb ::-webkit-scrollbar-track { background: #f1f5f9; }

        .wrapmenumb ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }



        /* Header - Glassmorphism */

        .wrapmenumb .main-header {

            position: fixed;

            top: 0; left: 0; width: 100%;

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

            backdrop-filter: blur(20px);

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

            z-index: 1000;

            border-bottom: 1px solid rgba(0, 0, 0, 0.05);

        }



        .wrapmenumb .header-top-bar {

            background: var(--text-dark);

            color: #ffffff;

            font-size: 11px;

            font-weight: 700;

            text-transform: uppercase;

            letter-spacing: 0.1em;

            padding: 10px 0;

            text-align: center;

        }



        .wrapmenumb .header-content {

            height: 72px;

            display: flex;

            align-items: center;

            justify-content: space-between;

            padding: 0 20px;

        }



        .wrapmenumb .logo-text {

            font-size: 22px;

            font-weight: 800;

            color: var(--text-dark);

            letter-spacing: -1px;

            display: flex;

            align-items: center;

            gap: 8px;

        }

        .wrapmenumb .logo-text i { color: var(--theme-color); }

        .wrapmenumb .logo-text span { color: var(--theme-color); }



        .wrapmenumb .icon-btn {

            width: 46px; height: 46px;

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

            border-radius: 14px; background: #ffffff; color: var(--text-dark);

            cursor: pointer; border: 1.5px solid #f1f5f9;

            transition: all 0.3s ease;

            box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);

        }

        .wrapmenumb .icon-btn:active { transform: scale(0.92); background: var(--bg-light); }

        .wrapmenumb .icon-btn:hover { border-color: var(--theme-color); color: var(--theme-color); }



        /* Panels & Overlays */

        .wrapmenumb .modal-custom-backdrop {

            position: fixed; inset: 0;

            background: rgba(0, 0, 0, 0.6);

            backdrop-filter: blur(8px);

            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: auto; max-height: 94%;

            background: #ffffff; z-index: 2000;

            border-top-left-radius: 32px; border-top-right-radius: 32px;

            transform: translateY(100%);

            transition: transform 0.6s cubic-bezier(0.32, 0.72, 0, 1);

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

            display: flex; flex-direction: column;

        }

        .wrapmenumb .overlay-panel.active { transform: translateY(0); }

        

        /* Tùy chỉnh riêng cho Search Panel cao hơn */

        .wrapmenumb #searchSheet {

            height: 85vh; /* Chiếm 85% chiều cao màn hình */

        }



        /* Modal Header iOS Style */

        .wrapmenumb .modal-header-premium {

            padding: 28px 20px 16px; position: relative;

            background: #ffffff; border-bottom: 1px solid #f1f5f9;

            border-top-left-radius: 32px; border-top-right-radius: 32px;

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

        }

        .wrapmenumb .modal-header-premium .modal-handle {

            position: absolute; top: 12px; left: 50%; transform: translateX(-50%);

            width: 44px; height: 5px; background: #e2e8f0; border-radius: 10px;

        }

        .wrapmenumb .modal-header-premium h5 {

            font-weight: 800; font-size: 20px; margin: 0; color: var(--text-dark); flex: 1; text-align: center;

        }



        .wrapmenumb .modal-body-scroll { flex: 1; overflow-y: auto; padding-bottom: 40px; -webkit-overflow-scrolling: touch; }



        /* Side Menu */

        .wrapmenumb .overlay-side {

            position: fixed; top: 0; left: 0; width: 88%; max-width: 380px; height: 100%;

            background: #ffffff; z-index: 2100; transform: translateX(-100%);

            transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);

            display: flex; flex-direction: column; box-shadow: 25px 0 70px rgba(0,0,0,0.15);

        }

        .wrapmenumb .thanhngang{border: 1px solid #9d9d9d;

    margin: 15px 10px;}

        .wrapmenumb .overlay-side.active { transform: translateX(0); }



        .wrapmenumb .menu-auth-header {

            padding: 25px 19px 25px;

            background: linear-gradient(135deg, var(--theme-color5) 0%, #ffffff 100%);

            border-bottom: 1px solid #e2e8f0;

        }

        .wrapmenumb .user-avatar-big {

            width: 68px; height: 68px; border-radius: 24px; background: #ffffff;

            box-shadow: 0 12px 24px rgba(255, 107, 53, 0.2);

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

            font-size: 28px; color: var(--theme-color); border: 3px solid #ffffff;

        }



        /* Navigation List */

        .wrapmenumb .nav-list-wrapper { padding: 16px; flex: 1; overflow-y: auto; }

        .wrapmenumb .nav-link-l1 {

            padding: 16px 20px; display: flex; align-items: center;

            font-weight: 700; color: var(--text-dark); font-size: 16px;

            justify-content: space-between; border-radius: 18px; margin-bottom: 4px;

        }

        .wrapmenumb .nav-link-l1:active { background: var(--theme-color5); color: var(--theme-color2); }

        .wrapmenumb .nav-icon-box {

            width: 40px; height: 40px; border-radius: 14px;

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

            margin-right: 14px; font-size: 18px;

        }

        

        .wrapmenumb .submenu-l2 { background: var(--bg-light); display: none; padding: 8px; border-radius: 20px; margin: 4px 0 12px; border: 1px solid #f1f5f9; }

        .wrapmenumb .nav-link-l2 {

            padding: 12px 18px; display: flex; align-items: center; justify-content: space-between;

            font-size: 15px; font-weight: 600; color: var(--text-gray); border-radius: 14px;

        }

        .wrapmenumb .submenu-l3 { display: none; background: #ffffff; border-radius: 14px; margin-top: 4px; padding: 6px 0; }

        .wrapmenumb .nav-link-l3 {

            padding: 10px 16px 10px 48px; display: block; font-size: 14px; color: var(--text-gray); font-weight: 500; position: relative;

        }

        .wrapmenumb .nav-link-l3::before {

            content: ''; position: absolute; left: 28px; top: 50%; width: 8px; height: 1.5px; background: #cbd5e1; transform: translateY(-50%);

        }

        .wrapmenumb .nav-link-l3:hover { color: var(--theme-color); }

        .wrapmenumb .nav-link-l3:hover::before { background: var(--theme-color); }



        .wrapmenumb .toggle-chevron {

            width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;

            transition: transform 0.4s ease; color: #94a3b8;

        }

        .wrapmenumb .rotated { transform: rotate(180deg); color: var(--theme-color); }



        /* Premium Forms */

        .wrapmenumb .input-group-custom {

            background: #f8fafc; border-radius: 18px; padding: 14px 20px;

            display: flex; align-items: center; margin-bottom: 16px;

            border: 1.5px solid #e2e8f0; transition: all 0.3s ease;

        }

        .wrapmenumb .input-group-custom:focus-within {

            background: #ffffff; border-color: var(--theme-color);

            box-shadow: 0 10px 25px rgba(255, 107, 53, 0.1);

        }

        .wrapmenumb .input-group-custom input {

            border: none; background: transparent; width: 100%; outline: none;

            font-size: 15px; font-weight: 600; color: var(--text-dark);

        }



        .wrapmenumb .btn-primary-custom {

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

            color: #ffffff; border: none; width: 100%;

            padding: 18px; border-radius: 20px; font-weight: 800; font-size: 16px;

            box-shadow: 0 12px 24px rgba(255, 107, 53, 0.3); transition: all 0.3s ease;

        }

        .wrapmenumb .btn-primary-custom:active { transform: scale(0.97); filter: brightness(0.9); }



        /* Contact & Search Cards */

        .wrapmenumb .contact-item-premium {

            display: flex; align-items: center; gap: 18px; padding: 22px;

            border-radius: 26px; background: #ffffff; margin-bottom: 16px;

            border: 1px solid #f1f5f9; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);

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

            cursor: pointer;

        }

        .wrapmenumb .contact-item-premium:hover {

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

            box-shadow: 0 8px 25px rgba(255, 107, 53, 0.08);

            transform: translateY(-2px);

        }

        .wrapmenumb .contact-item-premium:active { transform: scale(0.96); background: var(--bg-light); box-shadow: none; }

        

        .wrapmenumb .contact-icon-box {

            width: 56px; height: 56px; border-radius: 18px;

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

            font-size: 24px; flex-shrink: 0;

        }



        .wrapmenumb .contact-info-text .title { display: block; font-weight: 800; font-size: 16px; color: var(--text-dark); margin-bottom: 3px; transition: color 0.3s;}

        .wrapmenumb .contact-info-text .desc { display: block; font-size: 13.5px; color: var(--text-gray); font-weight: 600; }

        

        .wrapmenumb .contact-item-premium:hover .title { color: var(--theme-color); }



        /* Search Tags Links */

        .wrapmenumb .search-tag-link {

            display: inline-block;

            text-decoration: none;

            color: var(--text-dark);

            transition: all 0.3s ease;

            font-weight: 600;

        }

        .wrapmenumb .search-tag-link:hover, 

        .wrapmenumb .search-tag-link:active {

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

            color: #ffffff !important;

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

            transform: scale(1.05);

        }



        /* Hero Section */

        .wrapmenumb .hero-card {

            background: linear-gradient(135deg, var(--text-dark) 0%, #3f3f46 100%);

            border-radius: 36px; padding: 48px 28px; margin-bottom: 32px;

            position: relative; overflow: hidden; box-shadow: 0 25px 50px rgba(0,0,0,0.15);

        }

        .wrapmenumb .hero-card h2 { color: #ffffff; font-size: 32px; margin-bottom: 12px; }

        .wrapmenumb .hero-card p { color: #d4d4d8; font-size: 16px; margin-bottom: 24px; }



        .wrapmenumb .service-card {

            background: #ffffff; border-radius: 28px; padding: 16px;

            border: 1px solid #f1f5f9; transition: all 0.4s ease; height: 100%;

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

        }

        .wrapmenumb .service-img {

            width: 100%; aspect-ratio: 4/3; border-radius: 20px;

            object-fit: cover; margin-bottom: 16px;

        }



        /* Language Switcher */

        .wrapmenumb .lang-section { padding: 28px; border-top: 1px solid #f1f5f9; background: #ffffff; margin-top: auto; }

        .wrapmenumb .lang-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

        .wrapmenumb .lang-btn {

            display: flex; align-items: center; justify-content: center; gap: 10px;

            padding: 14px; border-radius: 16px; border: 1.5px solid #f1f5f9;

            background: #ffffff; font-size: 14px; font-weight: 700; cursor: pointer;

        }

        .wrapmenumb .lang-btn.active { border-color: var(--theme-color); background: var(--theme-color5); color: var(--theme-color2); }

        .wrapmenumb .lang-btn img { width: 22px; height: 16px; object-fit: cover; border-radius: 3px; }



        /* Bottom Nav */

        .wrapmenumb .bottom-tab-nav {

            position: fixed; bottom: 0; left: 0; width: 100%;

            height: 90px; background: rgba(255, 255, 255, 0.95);

            backdrop-filter: blur(20px); -webkit-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: 6px;

            color: #94a3b8; font-size: 11px; font-weight: 700; flex: 1; cursor: pointer;

        }

        .wrapmenumb .tab-item.active { color: var(--theme-color); }

        .wrapmenumb .tab-center-btn {

            width: 64px; height: 64px; background: var(--theme-color); border-radius: 24px;

            display: flex; align-items: center; justify-content: center; margin-top: -45px;

            box-shadow: 0 15px 35px rgba(255, 107, 53, 0.4); border: 5px solid #ffffff;

            color: #ffffff !important; font-size: 24px;

        }



        /* Responsive Breakpoints */

        @media (max-width: 1200px) { .wrapmenumb .container { max-width: 1140px; } }

        @media (max-width: 992px) { .wrapmenumb h2 { font-size: 2rem; } }

        

        @media (max-width: 768px) {

            .wrapmenumb h1 { font-size: 1.8rem !important; }

            .wrapmenumb h2 { font-size: 1.6rem !important; }

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

            .wrapmenumb .header-content { height: 64px; }

            .wrapmenumb .hero-card { padding: 36px 20px; }

        }



        @media (max-width: 576px) {

            .wrapmenumb .overlay-panel { border-top-left-radius: 28px; border-top-right-radius: 28px; }

            .wrapmenumb .tab-item span { font-size: 10px; }

            .wrapmenumb .logo-text { font-size: 19px; }

            .wrapmenumb .service-card { padding: 12px; }

        }



        @keyframes fadeInUp {

            from { opacity: 0; transform: translateY(24px); }

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

        }

        .wrapmenumb .animate-up { animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }

    .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: #ff6b3570;

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

}



.wrap-content .blob-2 {

    width: 200px; height: 200px;

    background: #5cd2615c;

    bottom: 10%; right: -50px;

    animation-delay: -2s;

}



.wrap-content .blob-3 {

    width: 150px; height: 150px;

    background: #6366f1a1;

    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 .titletwo{font-weight: 700;

    font-size: 25px;}

.wrap-content .form-label-custom{font-weight: 600;

    font-size: 15px;

    margin-bottom: 2px;}

.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-lh {

    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);

}



/* RESPONSIVE */

@media (max-width: 992px) {

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

}



@media (max-width: 768px) {
    .wrap-blogscroll .badge-custom{text-align: center;}

    .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);

}