/* ------------------ form begin --------------------- */

        :root {
            --formcos-primary: #d0011b;       /* Màu chính */
            --formcos-primary-dark: #b00015;  /* Màu chính đậm hơn (hover) */
            --formcos-secondary: #333;        /* Màu phụ */
            --formcos-success: #28a745;       /* Màu thành công */
            --formcos-warning: #ff9800;       /* Màu cảnh báo */
            --formcos-border: #ddd;           /* Màu viền */
            --formcos-bg-input: #fff;         /* Nền input */
            --formcos-radius: 8px;            /* Bo góc chuẩn */
            --formcos-shadow: 0 4px 10px rgba(0,0,0,0.1);
        }
        
        /* -----------------------------------------------------------
           1. INPUT STYLES (formcos_input)
           ----------------------------------------------------------- */
        .formcos_group {
            position: relative;
            margin-bottom: 20px;
            width: 100%; max-width: 400px;
        }
        .formcos_label {
            display: block; font-weight: 600; font-size: 13px; margin-bottom: 6px; color: #444;
        }
        .formcos_input_wrap {
            position: relative;
            display: flex; align-items: center;
        }
        /* Icon bên trong Input */
        .formcos_icon_left {
            position: absolute; left: 12px;
            color: #999; font-size: 18px; pointer-events: none;
            transition: 0.3s;
        }
        /* Input Chuẩn */
        .formcos_input {
            width: 100%;
            padding: 12px 15px 12px 40px; /* Padding trái 40px để né icon */
            border: 1px solid var(--formcos-border);
            border-radius: var(--formcos-radius);
            font-size: 14px;
            background: var(--formcos-bg-input);
            transition: all 0.3s ease;
            outline: none;
            color: #333;
        }
        /* Trạng thái Focus */
        .formcos_input:focus {
            border-color: var(--formcos-primary);
            box-shadow: 0 0 0 4px rgba(208, 1, 27, 0.1);
        }
        .formcos_input:focus + .formcos_icon_left, 
        .formcos_input:focus ~ .formcos_icon_left {
            color: var(--formcos-primary);
        }
        .formcos_input_border { border: dashed 1px}
        /* Trạng thái Lỗi (Error) */
        .formcos_input.error {
            border-color: #dc3545;
            background-color: #fff8f8;
            color: #dc3545;
        }
        .formcos_input.error ~ .formcos_icon_left { color: #dc3545; }
        
        /* Animation Lắc (Shake) khi lỗi */
        @keyframes formcos_shake {
            0%, 100% { transform: translateX(0); }
            20%, 60% { transform: translateX(-5px); }
            40%, 80% { transform: translateX(5px); }
        }
        .formcos_shake {
            animation: formcos_shake 0.4s ease-in-out;
        }
        /* -----------------------------------------------------------
           2. BUTTON STYLES (formcos_btn)
           ----------------------------------------------------------- */
        .formcos_btn {
            display: inline-flex; align-items: center; justify-content: center; gap: 8px;
            padding: 12px 24px;
            border-radius: var(--formcos-radius);
            font-size: 14px; font-weight: 700;
            cursor: pointer; border: none; outline: none;
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            position: relative; overflow: hidden;
            text-transform: uppercase; letter-spacing: 0.5px;
            user-select: none;
        }
        /* -- Kích thước -- */
        .formcos_btn_sm { padding: 8px 16px; font-size: 12px; border-radius: 6px; }
        .formcos_btn_lg { padding: 16px 32px; font-size: 16px; width: 100%; max-width: 300px; }
        /* -- Màu sắc -- */
        .formcos_primary {
            background: var(--formcos-primary); color: #fff;
            box-shadow: 0 4px 6px rgba(208, 1, 27, 0.2);
        }
        .formcos_primary:hover {
            background: var(--formcos-primary-dark);
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(208, 1, 27, 0.3);
        }
        .formcos_secondary {
            background: var(--formcos-secondary); color: #fff;
        }
        .formcos_secondary:hover { opacity: 0.9; transform: translateY(-2px); }
        .formcos_outline {
            background: transparent; color: var(--formcos-primary);
            border: 1px solid var(--formcos-primary);
        }
        .formcos_outline:hover {
            background: var(--formcos-primary); color: #fff;
        }
        .formcos_buy_now {
            background: #ff9800; color: #fff; /* Màu cam Shopee */
        }
        .formcos_buy_now:hover {
            background: #f57c00; transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(255, 152, 0, 0.3);
        }
        /* -- Trạng thái Khóa (Disabled/Locked) -- */
        .formcos_btn.locked, .formcos_btn:disabled {
            background: #e0e0e0; color: #999;
            cursor: not-allowed; pointer-events: none;
            box-shadow: none; transform: none !important;
            border: 1px solid #ccc;
        }
        /* -----------------------------------------------------------
           3. BUTTON EFFECTS (Hiệu ứng đặc biệt)
           ----------------------------------------------------------- */
        
        /* Effect 1: Hover Xoay Icon (Spin) */
        .formcos_hover_spin i { transition: transform 0.5s ease; }
        .formcos_hover_spin:hover i { transform: rotate(180deg); }
        /* Effect 2: Hover Icon Rớt từ trên xuống (Drop) */
        .formcos_hover_drop { overflow: hidden; }
        .formcos_hover_drop i { position: relative; transition: transform 0.3s ease; }
        .formcos_hover_drop:hover i {
            animation: dropDown 0.4s forwards;
        }
        @keyframes dropDown {
            0% { transform: translateY(0); }
            49% { transform: translateY(150%); opacity: 0; }
            50% { transform: translateY(-150%); opacity: 0; }
            100% { transform: translateY(0); opacity: 1; }
        }
        /* Effect 3: Hover Icon Chạy từ trái sang (Slide Right) */
        .formcos_hover_slide i { transition: transform 0.3s ease; }
        .formcos_hover_slide:hover i { transform: translateX(5px); }
        /* Effect 4: Ripple Click (Hiệu ứng toả sóng khi bấm) */
        .formcos_btn:active { transform: scale(0.96); } /* Nhún nhẹ khi click */

/* ------------------ form end --------------------- */


/* ------------------ Modal begin --------------------- */

        :root {
            --cos-primary: #d0011b;
            --cos-text: #333;
            --cos-bg: #f4f6f8;
            /* Tốc độ animation 150ms cực nhanh và mượt như Native App */
            --cos-anim-speed: 0.15s; 
        }
        .cos_modal_backdrop {
            position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
            background: rgba(0, 0, 0, 0.65);
            z-index: 9999;
            display: none; /* JS sẽ đổi thành flex */
            align-items: center; justify-content: center;
            padding: 15px; box-sizing: border-box;
            
            /* Setup Animation */
            opacity: 0;
            transition: opacity var(--cos-anim-speed) ease-out;
        }
        /* 2. Khung Modal Chính */
        .cos_modal_dialog {
            background: #fff;
            border-radius: 16px;
            box-shadow: 0 20px 40px -10px rgba(0,0,0,0.3);
            width: 100%;
            display: flex; flex-direction: column;
            overflow: hidden; /* Đảm bảo bo góc header/footer */
            
            /* Setup Animation (Scale 95% -> 100%) */
            transform: scale(0.95);
            opacity: 0;
            /* Cubic-bezier tạo độ nảy nhẹ rất mượt */
            transition: transform var(--cos-anim-speed) cubic-bezier(0.2, 0.8, 0.2, 1), 
                        opacity var(--cos-anim-speed) ease-out;
        }
        /* Trạng thái KÍCH HOẠT (Mở Modal) */
        .cos_modal_backdrop.is-open { opacity: 1; }
        .cos_modal_backdrop.is-open .cos_modal_dialog {
            transform: scale(1);
            opacity: 1;
        }
        /* 3. Header Modal */
        .cos_modal_header {
            background: var(--cos-primary);
            padding: 16px 25px;
            display: flex; justify-content: space-between; align-items: center;
            position: relative; flex-shrink: 0;
        }
        .cos_modal_title {
            color: #fff; font-size: 17px; font-weight: 700; text-transform: uppercase; margin: 0;
            display: flex; align-items: center; gap: 8px;
        }
        /* 4. Nút Đóng (Nổi bật, xoay mượt) */
        .cos_modal_close {
            position: absolute; right: 15px; top: 50%;
            transform: translateY(-50%); /* Căn giữa chiều dọc header */
            width: 36px; height: 36px;
            background: #fff; color: var(--cos-primary);
            border-radius: 50%; border: none; outline: none;
            display: flex; align-items: center; justify-content: center;
            font-size: 20px; cursor: pointer;
            box-shadow: 0 4px 10px rgba(0,0,0,0.25);
            transition: all 0.25s ease;
        }
        .cos_modal_close:hover {
            background: #f8f9fa;
            /* Hiệu ứng xoay 90 độ và phóng to nhẹ */
            transform: translateY(-50%) rotate(90deg) scale(1.1);
            box-shadow: 0 6px 15px rgba(0,0,0,0.3);
        }
        /* 5. Nội dung Modal */
        .cos_modal_body {
            padding: 25px;
            overflow-y: auto; /* Tự cuộn nếu nội dung quá dài */
            -webkit-overflow-scrolling: touch;
        }
        
/* ------------------ Modal begin --------------------- */