/* RESET & CHUNG */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;font-family:'Poppins',sans-serif;background:#dfe9f3;padding:10px;line-height:1.5; color:#333}

.box{max-width:420px;margin:10px auto;background:#fff;border-radius:25px;padding:20px;box-shadow:0 20px 50px rgba(0,0,0,0.1)}
.title{text-align:center;font-weight:700;color:#ff0000;margin-bottom:15px;text-transform:uppercase}

/* INPUT & VALIDATION */
input, input[type="tel"]{width:100%;padding:14px;border-radius:15px;border:1px solid #ddd;margin-bottom:10px;outline:none;font-size:14px;transition:0.3s}
input:focus{border-color:#ff0000;box-shadow:0 0 10px rgba(255,0,0,0.1)}
input.invalid{border-color:#ff0000;background:#fff5f5}
.err-text{color:#ff0000;font-size:11px;margin:-8px 0 10px 5px;display:none;font-weight:600}

.section-label{font-size:13px;font-weight:bold;color:#666;margin:15px 0 10px 5px;display:block;text-transform:uppercase}

/* COMBO CARDS */
.radio-card{position:relative;border:2px solid #eee;border-radius:18px;padding:15px;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center;background:#fafafa;cursor:pointer;transition:0.3s}
.radio-card.active{border-color:#ff0000;background:#fff5f5;transform:scale(1.02);box-shadow:0 5px 15px rgba(255,0,0,0.1)}
.radio-card label{font-weight:600;font-size:15px;pointer-events:none}
.price{color:#ff0000;font-weight:bold;font-size:18px}
.hot-badge{position:absolute;top:-10px;left:15px;background:#ff0000;color:#fff;font-size:10px;padding:3px 10px;border-radius:20px;font-weight:700}

/* POPUP MODAL */
.modal-overlay {position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);display:none;align-items:center;justify-content:center;z-index:1000}
.modal-content {background:#fff;width:92%;max-width:380px;border-radius:30px;overflow:hidden;animation:zoomIn 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28)}
@keyframes zoomIn{from{transform:scale(0.7);opacity:0}to{transform:scale(1);opacity:1}}

.modal-header {background:#ff0000;color:#fff;text-align:center;padding:20px}
.modal-header h4{margin:0;font-size:20px;text-transform:uppercase}
.modal-body {padding:20px;max-height:65vh;overflow-y:auto}

.sub-title {font-size:14px;font-weight:700;margin:15px 0 10px;display:flex;justify-content:space-between;align-items:center;color:#333}
.sub-title b{color:#ff0000;background:#fff5f5;padding:2px 8px;border-radius:10px}
.gift-text {color:#e65100;border-top:1px solid #eee;padding-top:15px}

/* ITEM SELECTION (Cập nhật cho ảnh sản phẩm) */
.item-row {display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding:10px;background:#f9f9f9;border-radius:15px; border: 1px solid #eee;}
.prod-info {display:flex; align-items:center; gap:10px;}
.prod-img {
    width: 45px; 
    height: 45px; 
    object-fit: cover; 
    border-radius: 10px; 
    background:#eee;
    border: 1px solid #ddd;
}
.prod-name {font-weight:600; font-size:13px; color:#444;}

/* NÚT BẤM CỘNG TRỪ */
.qty-btn {display:flex;align-items:center;gap:12px}
.btn-c {
    width:32px;
    height:32px;
    border:none;
    border-radius:50%;
    font-weight:bold;
    cursor:pointer;
    font-size:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:0.2s;
    user-select: none;
}
.btn-c.plus {background:#008a45;color:#fff; box-shadow: 0 4px 8px rgba(0,138,69,0.2);}
.btn-c.minus {background:#e0e0e0;color:#666;}
.btn-c:active {transform: scale(0.9);}
.qty-val { min-width: 20px; text-align: center; font-weight: 700; font-size: 16px;}

/* FOOTER & BUTTONS */
.total-box{text-align:center;font-weight:bold;color:#ff0000;font-size:22px;margin:20px 0;background:#fff5f5;padding:15px;border-radius:15px; border: 1px dashed #ff0000;}
.btn-submit {
    width:100%;
    padding:18px;
    border:none;
    border-radius:18px;
    background:linear-gradient(135deg,#ff3d00,#ff0000);
    color:#fff;
    font-weight:bold;
    font-size:18px;
    cursor:pointer;
    box-shadow:0 10px 25px rgba(255,0,0,0.3);
    transition: 0.3s;
}
.btn-submit:hover { opacity: 0.9; transform: translateY(-2px); }

.btn-confirm {
    width:100%;
    padding:18px;
    border:none;
    background:#008a45;
    color:#fff;
    font-weight:bold;
    cursor:pointer;
    font-size:16px;
    text-transform:uppercase;
    letter-spacing: 1px;
}
.btn-confirm:hover { background: #007038; }