:root { --primary: #ee002d; 
            --bg: #f4f6f8; 
            --white: #ffffff; 
            --text: #212529; 
            --gray: #6c757d; 
            --green: #28a745; 
            --purple: #6f42c1; 
            --red-light: #fff5f5; 
            --blue-light: #f0f4ff; }
        html { font-size: 16px; 
            scroll-behavior: smooth; }
        body { font-family: 'Segoe UI', sans-serif; 
            margin: 0; 
            background-color: var(--bg); 
            color: var(--text); 
            line-height: 1.5; 
            overflow-x: hidden; }
        /* TABS - Liquid Glass */
        .tabs { display: flex; 
            background: rgba(255, 255, 255, 0.4); 
            backdrop-filter: blur(15px) saturate(180%);
            -webkit-backdrop-filter: blur(15px) saturate(180%);
            border-bottom: 1px solid rgba(255, 255, 255, 0.3); 
            position: sticky; 
            top: 0; 
            z-index: 1000; 
            box-shadow: 0 4px 12px rgba(0,0,0,0.05); 
            justify-content: center; }
        .tab-btn { flex: 1; 
            max-width: 200px; 
            padding: 18px 5px; 
            border: none; 
            background: none; 
            font-weight: bold; 
            font-size: 0.85rem; 
            color: var(--gray); 
            cursor: pointer; 
            border-bottom: 3px solid transparent; 
            transition: 0.3s; 
            text-shadow: 0 1px 1px rgba(255,255,255,0.5);}
        .tab-btn.active { color: var(--primary); 
            border-bottom-color: var(--primary); }
        .container { max-width: 900px; 
            margin: 20px auto; 
            padding: 0 15px; 
            min-height: 80vh; }
        /* CARD & FORMS */
        .card { background: var(--white); 
            border-radius: 12px; 
            padding: 25px; 
            box-shadow: 0 4px 15px rgba(0,0,0,0.05); 
            margin-bottom: 20px; 
            border: 1px solid rgba(0,0,0,0.05); }
        label { display: block; 
            margin-bottom: 8px; 
            font-weight: 600; 
            font-size: 0.85rem; 
            color: var(--gray); 
            text-transform: uppercase; }
        .form-control { width: 100%; 
            padding: 14px; 
            border: 1.5px solid #eee; 
            border-radius: 10px; 
            font-size: 1rem; 
            box-sizing: border-box; 
            margin-bottom: 15px; 
            outline: none; 
            transition: 0.3s; }
        .form-control:focus { border-color: var(--primary); 
            background: #fff; 
            box-shadow: 0 0 0 3px rgba(238, 0, 45, 0.1); }
        /* 2 cột so sánh thuế */
        .tax-grid { display: flex; 
            gap: 20px; 
            margin-top: 20px; 
            align-items: stretch; }
        .tax-card { flex: 1; 
            background: var(--white); 
            border-radius: 20px; 
            padding: 25px; 
            border: 2px solid #eee; 
            position: relative; 
            box-sizing: border-box; 
            display: flex; 
            flex-direction: column; 
            transition: 0.3s; }
        .tax-card.best { border-color: var(--green); 
            background: #f9fff9; }
        .tax-card.warning { border-color: var(--primary); 
            background: #fff9f9; }
        .badge-status { position: absolute; 
            top: -15px; right: 25px; 
            padding: 6px 20px; 
            border-radius: 12px; font-size: 11px; 
            font-weight: bold; color: white; 
            text-transform: uppercase; 
            box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
        .badge-best { background: var(--green); }
        .badge-warn { background: var(--primary); }
        .tax-title { font-size: 0.8rem;
            font-weight: bold; 
            color: var(--gray); 
            margin-bottom: 10px; 
            text-transform: uppercase; }
        .tax-main-value { font-size: 2.2rem; 
            font-weight: 900; 
            color: var(--primary); 
            margin-bottom: 15px; }
        .detail-box { background: rgba(0,0,0,0.03);
            border-radius: 12px; 
            padding: 18px; 
            flex-grow: 1; 
            border: 1px dashed #ddd; }
        .math-row { display: flex; 
            justify-content: space-between; 
            padding: 10px 0; 
            font-size: 0.85rem; 
            border-bottom: 1px solid rgba(0,0,0,0.05); 
            line-height: 1.4; }
        .math-row:last-child { border-bottom: none; 
            font-weight: bold; 
            color: var(--primary); 
            font-size: 1.05rem; 
            padding-top: 15px; }
        .avg-box { background: var(--blue-light); 
            border-radius: 12px; 
            padding: 15px; 
            margin-top: 20px; 
            text-align: center; }
        .avg-label { font-size: 0.7rem; 
            font-weight: bold; 
            color: #4e5ef3; 
            text-transform: uppercase; 
            margin-bottom: 4px; 
            letter-spacing: 0.5px; }
        .avg-value { font-size: 1.5rem; 
            font-weight: 800; 
            color: #2d3748; }
        .advice-box { background: #fffbeb; 
            border-left: 4px solid #f59e0b; 
            padding: 20px; 
            margin-top: 25px; 
            border-radius: 0 12px 12px 0; 
            font-size: 0.9rem; }
        .advice-box b { color: #92400e; 
            display: block; 
            margin-bottom: 5px; 
            font-size: 1rem; }
        /* SUB-TABS & POS  */
        .sub-tabs { 
            display: flex; 
            justify-content: center; 
            gap: 10px; 
            margin-bottom: 20px; 
            flex-wrap: wrap; }
        /* Cấu hình riêng cho Mobile */
        @media (max-width: 768px) {
        .sub-tab-btn {
            flex: 0 1 calc((100% - 20px) / 3); 
            min-width: 80px;
            padding: 10px 5px;
            text-align: center;
            box-sizing: border-box;}}
        .sub-tab-btn { padding: 10px 20px; 
            border-radius: 20px; 
            border: 1px solid #ddd; 
            background: white; font-size: 0.85rem; 
            font-weight: 600; 
            color: var(--gray); 
            cursor: pointer; 
            transition: 0.3s; }
        .sub-tab-btn.active { background: var(--primary); 
            color: white; 
            border-color: var(--primary); }
        .tab-content { display: none; 
            animation: fadeIn 0.4s ease; }
        .tab-content.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; 
            transform: translateY(10px); } to { 
                opacity: 1; 
                transform: translateY(0); } }
        .pos-grid { display: grid; 
            grid-template-columns: repeat(3, 1fr); 
            gap: 15px; 
            margin-bottom: 20px; }
        .pos-item { background: white; 
            border-radius: 12px; 
            padding: 15px; 
            border: 1px solid #eee; 
            text-align: center; 
            cursor: pointer; 
            transition: 0.3s; }
        .pos-item:hover { transform: translateY(-5px); 
            box-shadow: 0 10px 20px rgba(0,0,0,0.1); 
            border-color: var(--primary); }
        .pos-item img { width: 100%; 
            height: auto; 
            border-radius: 8px; }
        /* hoa rơi */
        .cherry-blossom-container { position: fixed;
            top: 0; left: 0; 
            width: 100%; 
            height: 100%; 
            pointer-events: none; 
            z-index: 9999; }
        .petal { position: absolute; 
            background-color: #ffb7c5; 
            border-radius: 150% 0 150% 0; 
            opacity: 0.6; 
            animation: fall linear infinite; }
        @keyframes fall { 0% { transform: translate(0, -10px) rotate(0deg); 
            opacity: 0; } 10% { 
            opacity: 0.8; } 100% { 
            transform: translate(150px, 100vh) rotate(360deg); 
            opacity: 0; } }
        /* cửa sổ */
        .modal { display: none;
            position: fixed; 
            top: 0; left: 0; 
            width: 100%; 
            height: 100%; 
            background: rgba(0, 0, 0, 0.5); 
            z-index: 2000; 
            justify-content: center; 
            align-items: center; }
        .modal-content { width: 95%; 
            max-width: 450px; 
            background: rgba(255, 255, 255, 0.6); 
            backdrop-filter: blur(20px) saturate(160%);
            -webkit-backdrop-filter: blur(20px) saturate(160%);
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 20px; 
            overflow: hidden; 
            position: relative; 
            box-shadow: 0 20px 40px rgba(0,0,0,0.2);}
            @media (max-width: 992px) { .pos-grid { grid-template-columns: repeat(2, 1fr); } }
            @media (max-width: 768px) { .tax-grid { flex-direction: column; }
                                        .tax-main-value { font-size: 1.8rem; }}
        /* DỊCH VỤ NAMECARD */
        .service-footer { background: linear-gradient(135deg, #1e293b, #0f172a); 
            color: white; 
            border-radius: 15px; 
            padding: 30px; 
            margin: 30px 0; 
            position: relative; 
            overflow: hidden; }
        .service-footer::after { content: 'Tendoo'; 
            position: absolute; 
            right: -20px; 
            bottom: -10px; 
            font-size: 6rem; 
            font-weight: 900; 
            opacity: 0.05; 
            pointer-events: none; }
        .service-link { display: inline-flex; 
            width: 100%; 
            align-items: center; 
            gap: 12px; 
            text-decoration: none; 
            color: #cbd5e1; 
            padding: 15px 0; 
            border-bottom: 1px solid #334155; 
            font-size: 0.95rem; 
            transition: 0.3s; }
        .service-link:hover { color: #fff; 
            transform: translateX(5px); }
        /* TABLE HOADON */
        .table-invoice { width: 100%; 
            border-collapse: collapse; 
            font-size: 0.85rem; 
            margin-top: 5px; }
        .table-invoice th, .table-invoice td { border: 1px solid #eee; 
            padding: 10px; 
            text-align: center; }
        .table-invoice th { background: #f8fafc; 
            color: var(--gray); }
        /*căn chỉnh ảnh cô kế toán*/
        .responsive-img {
            border-radius: 20px;
            width: 50%;       
            height: auto;      
            display: block;    
            margin: 0 auto;    }
        /* nút chuyển ảnh*/
        .swiper-pagination-bullet-active { background: var(--primary) !important; }
        .swiper-slide img { user-select: none; 
            pointer-events: none; }
        /*hoa dơn giỏ hàng*/
        .add-cart-btn {background: var(--primary);
            color: white;border: none;
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 0.75rem;
            font-weight: bold;
            cursor: pointer;
            transition: 0.2s;}
        .add-cart-btn:hover {background: #c20025;
            transform: scale(1.05);}
        .add-cart-btn:active {transform: scale(0.95);}
        /* Banner Kế toán */
        .accountant-banner {
            width: 100%;
            height: 300px;
            background: url('https://images.unsplash.com/photo-1554224155-6726b3ff858f?q=80&w=1000&auto=format&fit=crop') no-repeat center center;
            background-size: cover;
            border-radius: 15px;
            position: relative;
            overflow: hidden;
            margin-bottom: 20px;}
        /* Lớp phủ làm nổi bật chữ */
        .banner-overlay {
            background: linear-gradient(to right, rgba(238, 0, 46, 0.8), rgba(0, 0, 0, 0.3));
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            padding: 0 40px;}
        .banner-text h2 { 
            color: white; 
            font-size: 1.8rem; 
            margin: 0; }
        .banner-text p { 
            color: #fecaca; 
            margin: 10px 0; }
        .banner-badge { 
            background: white; 
            color: var(--primary); 
            display: inline-block; 
            padding: 5px 15px; 
            border-radius: 20px; 
            font-weight: bold; 
            font-size: 0.8rem; }
        /* bảng giá kế toán */
        .ketoan-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 20px;}
        .ketoan-card {
            background: white;
            border: 1px solid #eee;
            padding: 25px;
            border-radius: 15px;
            text-align: center;
            transition: 0.3s;
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center; }
        .ketoan-card ul {
            list-style: none;
            padding: 0;
            margin: 15px 0;
            width: 100%; 
            text-align: left; }
        .ketoan-card ul li {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            margin-bottom: 12px;
            font-size: 0.9rem;
            line-height: 1.5;
            color: #475569;}
        .ketoan-card ul li i {
            color: #28a745; 
            margin-top: 4px;
            flex-shrink: 0; }
        .ketoan-card:hover { 
            transform: translateY(-5px); 
            border-color: var(--primary); }
        .ketoan-card.featured { 
            border: 2px solid var(--primary); 
            box-shadow: 0 10px 30px rgba(238,0,46,0.1); }
        .ketoan-card h4 { 
            margin: 0 0 15px; 
            font-size: 1.1rem; }
        .ketoan-card .price { 
            font-size: 1.6rem; 
            font-weight: 900; 
            color: var(--primary); 
            margin-bottom: 20px; }
        .ketoan-card .price span { 
            font-size: 0.9rem; 
            color: #64748b; }
        .ketoan-card ul { 
            list-style: none; 
            padding: 0; 
            text-align: left; 
            margin-bottom: 25px; 
            height: 120px; }
        .ketoan-card li { 
            font-size: 0.85rem; 
            margin-bottom: 10px; 
            color: #475569; }
        .ketoan-card li i { 
            color: #22c55e; 
            margin-right: 8px; }
        .ketoan-card button {
            width: 100%;
            padding: 12px;
            border: none;
            background: #f1f5f9;
            color: #334155;
            border-radius: 8px;
            font-weight: bold;
            cursor: pointer;}
        .ketoan-card.featured button { 
            background: var(--primary); 
            color: white; }
        /* Mobile */
        @media (max-width: 600px) {
            .accountant-banner { height: 180px; }
            .banner-overlay { padding: 0 20px; }
            .banner-text h2 { font-size: 1.2rem; }
            .banner-text p { font-size: 0.8rem; }}
        /*lua ga*/
        .order-notification {position: fixed;
            bottom: 20px;
            left: -300px;
            background: rgba(255, 255, 255, 0.6);
            backdrop-filter: blur(12px) saturate(160%);
            -webkit-backdrop-filter: blur(12px) saturate(160%);
            padding: 8px 10px;
            border-radius: 10px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.1);
            display: flex;
            align-items: center;
            gap: 10px;
            z-index: 1000;
            transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            width: 230px;
            border: 1px solid rgba(255, 255, 255, 0.4);
            border-left: 3px solid var(--primary);}
        .order-notification.show { left: 15px; }
        .notif-img img {width: 38px;
            height: 38px;
            border-radius: 6px;
            object-fit: cover;
            filter: brightness(1.05);}
        .notif-content {line-height: 1.2;
            overflow: hidden;}
        .notif-title { font-size: 0.75rem;
            font-weight: bold; 
            color: #1e293b;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;}
        .notif-desc { font-size: 0.7rem;
            color: #475569; 
            margin: 1px 0;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;}
        .notif-time { font-size: 0.7rem; 
            color: #64748b; }
        .notif-close {position: absolute;
            top: 5px;
            right: 8px;
            background: none;
            border: none;
            color: #94a3b8;
            cursor: pointer;
            font-size: 1.2rem;
            transition: 0.2s;}
        .notif-close:hover {color: var(--primary);}
            @keyframes zoomIn {
            from { 
                opacity: 0; 
                transform: scale(0.9) translateY(10px);}
            to { 
                opacity: 1; 
                transform: scale(1) translateY(0); }}
    /* Đảm bảo các nút điều hướng nằm trên cùng và bấm được */
        .slider-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(255, 255, 255, 0.4);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.4);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 20px;
            color: #1e293b;
            z-index: 9999;
            box-shadow: 0 8px 16px rgba(0,0,0,0.1);
            transition: all 0.2s ease;}
        .slider-nav:active {transform: translateY(-50%) scale(0.95);}
        .slider-nav:hover {background: rgba(238, 0, 46, 0.75);
            color: white;
            border-color: rgba(238, 0, 46, 0.2);
            box-shadow: 0 8px 20px rgba(238, 0, 46, 0.3);}
        /* Hiệu ứng Pulse kết hợp đổ bóng phát sáng */
        @keyframes pulse-glow {
            0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7); }
            50% { transform: scale(1.08); box-shadow: 0 0 15px 5px rgba(255, 0, 0, 0.3); }
            100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); }
        }
        .btn-pulse {background-color: #ff0000;
            color: white;
            border: none;
            padding: 6px 12px;
            font-weight: bold;
            font-size: 0.8rem;
            cursor: pointer;
            border-radius: 50px;
            animation: pulse-glow 1.5s infinite ease-in-out;
            vertical-align: middle;
            position: relative;
            top: -3px; 
            margin-left: 5px;
            display: inline-block;
            line-height: normal;}
        .btn-pulse:hover {background-color: #e60000;
            animation-play-state: paused; }
            /* Hiệu ứng Pulse nhịp tim */
        @keyframes pulse-zalo {
            0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 104, 255, 0.7); }
            70% { transform: scale(1.1); box-shadow: 0 0 0 15px rgba(0, 104, 255, 0); }
            100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 104, 255, 0); }}
        @keyframes pulse-phone {
            0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7); }
            70% { transform: scale(1.1); box-shadow: 0 0 0 15px rgba(0, 104, 255, 0); }
            100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 104, 255, 0); }}
        .floating-contact {position: fixed;
            bottom: 30px; 
            right: 30px;  
            z-index: 9999;
            display: flex;
            flex-direction: column;
            gap: 12px;}
        .contact-zalo {width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            transition: all 0.3s ease;
            animation: pulse-zalo 2s infinite;
            position: relative;}
        .contact-phone {width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            transition: all 0.3s ease;
            animation: pulse-phone 2s infinite;
            position: relative;}
        .zalo-btn { background-color: #0068ff; }
        .phone-btn { background-color: #ff0000; 
            animation-delay: 0.5s; }
        .contact-badge {
            position: absolute;
            top: -2px;
            right: -2px;
            background: #000;
            color: #fff;
            font-size: 10px;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid #fff;}
        .contact-item img { width: 30px; height: 30px; }

        .result { margin-top: 20px; padding: 15px; background: #e7f3ff; border-left: 5px solid #2196F3; }
        .result p { margin: 5px 0; font-size: 1.1em; }
        .highlight { font-weight: bold; color: #d32f2f;font-size: 1.5em; }

        .dropdown-menu {
            display: none; 
            position: absolute;
            top: 100%;
            right: 0;
            background: white;
            border: 1px solid #ccc;
            box-shadow: 0px 8px 16px rgba(0,0,0,0.1);
            z-index: 99;
            min-width: 150px;
            flex-direction: column;}
        .dropdown-menu.show {display: flex;}
        .dropdown-menu .sub-tab-btn {
            width: 100%;
            text-align: left;
            padding: 10px;
            border: none;
            border-bottom: 1px solid #f0f0f0;}
        .dropdown-menu .sub-tab-btn:last-child {border-bottom: none;}