/* ============================================================================
 * shop-reward-a.css   —   Cửa hàng đổi thưởng (phần A)
 * ----------------------------------------------------------------------------
 * 🔴 LÁT CẮT CỦA style.css. 11 lát PHẢI nạp ĐÚNG THỨ TỰ trong index.html.
 *    Đổi thứ tự = đổi kết quả đè = lệch giao diện, KHÔNG có lỗi nào báo.
 *    Nối cả 11 lát (bỏ banner này) = style.css gốc TỪNG BYTE.
 *    Kiểm:  node scripts/cut-css.js --verify
 *
 * MỤC LỤC — 532 dòng · 61 rule · 14.2 KB
 *   dòng    15–532    Cửa hàng & phần thưởng  (61 rule)
 *
 * Bảng tra đầy đủ mọi miền:      docs/BANDO-CSS.md
 * Vì sao cắt kiểu này:           docs/kien-truc/K6-1-so-do-tach-css.md
 * ========================================================================== */
.reward-detail-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(var(--shadow-rgb), 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    box-sizing: border-box;
}

.reward-detail-box {
    position: relative;
    width: min(560px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    background: var(--surface-white);
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
    text-align: center;
    box-sizing: border-box;
}

.reward-detail-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    padding: 0;
    margin: 0;
    border-radius: var(--radius-circle);
    font-size: 22px;
    line-height: 34px;
    background: var(--red-500);
}

.reward-detail-header {
    margin-bottom: 14px;
    padding-right: 34px;
}

.reward-detail-title {
    font-size: 26px;
    font-weight: bold;
    color: var(--text-strong);
}

.reward-detail-point {
    margin-top: 4px;
    font-weight: bold;
    color: var(--red-500);
}

.reward-detail-image {
    width: 100%;
    max-width: 460px;
    height: auto;
    max-height: 420px;
    object-fit: contain !important;
    /* Giữ nguyên tỷ lệ, không bị méo/mờ */
    object-position: center;
    border-radius: var(--radius-lg);
    margin: 15px auto 20px;
    display: block;
    box-shadow: 0 8px 25px rgba(var(--shadow-rgb), 0.15);
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    transition: transform 0.25s ease;
}

/* [M4.2 lô 1e] bọc chống HOVER DÍNH trên màn cảm ứng */
@media (hover: hover) {
.reward-detail-image:hover {
    transform: scale(1.03);
}
}

.reward-detail-note {
    margin: 14px 0;
    font-size: 16px;
    line-height: 1.5;
    color: #333;
    white-space: pre-wrap;
}

.reward-detail-btn {
    /* Nền vàng, in ĐẬM, bỏ viền xanh nhạt của .choice-btn, có BÓNG NỔI 3D.
       [M4.2 lô 1] Chữ TRẮNG cũ chỉ 1,87:1 trên nền vàng → đổi sang chữ xanh đậm
       (7,64:1) cho khớp .btn-bonus. Gom luôn #f0b400/#c98f00 về token. */
    background: var(--yellow-500);
    color: var(--blue-900);
    border: none;
    font-weight: 800;
    font-size: 14px;
    box-shadow: 0 4px 0 var(--orange-text), 0 6px 12px rgba(255, 201, 60, 0.35);
}

.reward-detail-btn:hover {
    background: var(--orange-brand);
}

.reward-detail-btn:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #c98f00;
}

.reward-shop-admin-panel {
    /* Bỏ viền/box bao quanh để đồng bộ với "Cửa hàng đổi thưởng" (.reward-shop-body) */
    max-width: 1100px;
    margin: 0 auto;
    box-sizing: border-box;
}

.reward-shop-admin-title {
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    color: var(--text-strong);
    margin-bottom: 12px;
}

/* [THẺ] Khu quản lý phần thưởng: mỗi quà = 1 thẻ, 2–3 thẻ / hàng (tự co theo bề rộng) */
.reward-shop-admin-body {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
    align-items: start;
}

.reward-shop-admin-card {
    padding: 14px;
    border: 1px solid #b7b7b7;
    border-radius: var(--radius-lg);
    background: var(--surface-white);
    box-shadow: 0 3px 10px rgba(var(--shadow-rgb), 0.1);
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Thẻ đang mở bảng icon → nâng lên trên để popup không bị thẻ kế bên đè */
.reward-shop-admin-card.icon-picking {
    z-index: 30;
}

/* Trong thẻ: Tên (full, hàng trên) → hàng dưới: Icon (nhỏ) | Điểm | Ảnh */
.reward-shop-admin-grid {
    display: block;
}

.reward-shop-admin-grid label {
    font-size: 13px;
    font-weight: bold;
    color: var(--text-strong);
}

.reward-shop-admin-grid input[type="text"],
.reward-shop-admin-grid input[type="number"] {
    width: 100%;
    margin-top: 4px;
    padding: 7px 8px;
    border: 1px solid var(--border-field);
    border-radius: var(--radius-xs);
    box-sizing: border-box;
    font-size: 16px;
}

/* Tên phần thưởng: 1 hàng riêng phía trên */
.reward-shop-admin-name {
    display: block;
}

/* Hàng dưới: Icon (nhỏ) | Điểm | Ảnh(to) — cùng hàng; stretch để ảnh cao bằng cả cột */
.reward-shop-admin-row2 {
    margin-top: 10px;
    display: flex;
    align-items: stretch;
    gap: 10px;
}

/* Ô Điểm: chiếm phần giữa còn lại */
.reward-shop-diem-field {
    flex: 1 1 auto;
    min-width: 60px;
    display: flex;
    flex-direction: column;
}

.reward-shop-diem-field input {
    height: 40px;
}

/* ===== Trường Icon: nút icon NHỎ (≈ 1/2 cũ) + bảng chọn emoji ===== */
.reward-shop-icon-field {
    display: flex;
    flex-direction: column;
    position: relative; /* mỏ neo cho popup nổi đè */
    flex: 0 0 auto;
}

/* Nút hiện icon hiện tại (thay ô gõ tay) — nhỏ gọn ~44x40, đồng cao với ô Điểm & ảnh.
   margin: 4px 0 0 0 để HUỶ margin:3px của button CHUNG (gây lệch cao hơn ô Điểm/Ảnh). */
.reward-shop-icon-btn {
    width: 44px;
    height: 40px;
    min-height: 40px;
    margin: 4px 0 0 0;
    padding: 0;
    border: 1px solid var(--border-input);
    border-radius: var(--radius-xs);
    box-sizing: border-box;
    background: var(--surface-white);
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    text-align: center;
}

.reward-shop-icon-btn:hover {
    background: var(--surface-white); /* giữ nền trắng (button chung đổi sang xanh khi hover) */
    border-color: var(--blue-800);
    box-shadow: 0 0 0 3px rgba(var(--shadow-rgb), 0.12);
}

/* Bảng chọn icon: POPUP NỔI ĐÈ lên thẻ (không đẩy/vỡ form), neo ngay dưới nút icon */
.reward-shop-icon-pop {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 40;
    width: 248px;
    max-width: calc(100vw - 48px);
    max-height: 220px;
    overflow-y: auto;
    padding: 10px;
    border: 1px solid var(--border-input);
    border-radius: var(--radius-md);
    background: var(--surface-white);
    box-shadow: 0 12px 30px rgba(var(--shadow-rgb), 0.25);
}

/* Lật mở LÊN TRÊN khi dưới không đủ chỗ (thẻ gần đáy vùng cuộn) */
.reward-shop-icon-pop--up {
    top: auto;
    bottom: calc(100% + 6px);
}

.reward-shop-icon-pop[hidden] {
    display: none;
}

.reward-shop-icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    gap: 6px;
}

.reward-shop-icon-choice {
    min-height: 40px;
    padding: 4px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--surface-white);
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
}

.reward-shop-icon-choice:hover {
    border-color: var(--blue-400);
    background: var(--surface-hover);
}

.reward-shop-icon-choice.is-selected {
    border-color: #1f7a3d;
    background: var(--surface-success);
    box-shadow: 0 0 0 2px rgba(31, 122, 61, 0.25);
}

/* Input file ẨN HOÀN TOÀN — bấm "📷" hoặc bấm vào ảnh để mở hộp chọn file */
.reward-shop-file-input {
    display: none !important;
}

/* ===== Ô ảnh: CHỈ thumbnail (bỏ chữ "Ảnh"), bên phải ô Điểm, to bằng cả cột ===== */
.reward-shop-image-cell {
    display: flex;
    flex: 0 0 auto;
    align-items: stretch;
}

.reward-shop-image-box {
    position: relative;
    width: 84px;
    align-self: stretch; /* cao bằng cả cột (caption + ô nhập) → thumbnail to như khung đỏ */
    min-height: 56px; /* [FIX] SÀN chống co: nếu vì lý do nào ô Ảnh nằm 1 mình (không có sibling cao để
                         align-self:stretch bám) → vẫn đủ cao hiện nút 📷, KHÔNG dẹt thành đường kẻ. */
    overflow: hidden; /* bo góc ảnh; dấu X nằm BÊN TRONG nên không bị cắt */
    box-sizing: border-box;
    border: 1px solid #b7b7b7;
    border-radius: var(--radius-sm);
    background: var(--surface-tint-blue);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ảnh đặt ABSOLUTE lấp đầy khung → KHÔNG để chiều cao ảnh thật đẩy hàng cao lệch nhau */
.reward-shop-admin-preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: pointer; /* bấm vào ảnh để đổi ảnh */
}

/* Nút "📷" khi CHƯA có ảnh — lấp đầy ô 60x40 (huỷ margin/min-height của button chung) */
.reward-shop-choose-btn {
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: 1px dashed var(--blue-400);
    border-radius: var(--radius-sm);
    background: var(--surface-hover);
    color: var(--text-strong);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.reward-shop-choose-btn:hover {
    background: var(--blue-100);
}

/* Nút "✕": CHỈ là dấu X (KHÔNG nền/viền/bo tròn), đè lên góc trên-phải thumbnail.
   Huỷ min-height:40 + margin:3px của button CHUNG để không bị kéo dài thành bầu dục.
   CHỈ hiện khi rê chuột/focus. */
.reward-shop-image-remove {
    position: absolute;
    top: 1px;
    right: 2px;
    width: 16px;
    height: 16px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent; /* KHÔNG nền — chỉ thấy dấu X */
    color: #000000;
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0; /* ẩn khi không rê chuột */
    outline: none; /* bỏ viền xanh khi focus */
    box-shadow: none;
    text-shadow: 0 0 2px var(--surface-white), 0 0 3px var(--surface-white); /* X đen vẫn rõ trên ảnh */
    transition: opacity .12s ease;
}

/* Huỷ hover của button chung (đổi nền xanh + nhấc lên) cho dấu X */
/* [M4.2 lô 1e] bọc chống HOVER DÍNH trên màn cảm ứng */
@media (hover: hover) {
.reward-shop-image-remove:hover:not(:disabled) {
    background: transparent;
    transform: none;
}
}

.reward-shop-image-remove:focus,
.reward-shop-image-remove:focus-visible {
    outline: none;
    box-shadow: none;
}

/* Hiện X khi rê chuột vào ô ảnh, hoặc khi focus vào chính nút X */
.reward-shop-image-box:hover .reward-shop-image-remove,
.reward-shop-image-remove:focus,
.reward-shop-image-remove:focus-visible {
    opacity: 1;
}

/* Trạng thái "⏳" khi đang tải ảnh — lấp đầy ô, thẻ không bị nhảy */
.reward-shop-image-box .reward-shop-no-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    border-radius: 7px;
}

.reward-shop-no-image {
    color: #777;
    font-size: 13px;
    font-weight: bold;
}

.reward-shop-admin-checks {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.reward-shop-admin-checks label {
    font-size: 14px;
    font-weight: bold;
    color: #333;
}

.reward-shop-admin-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.reward-shop-add-btn {
    background: var(--accent-primary);
    color: var(--text-inverse);
    border: none;
    border-radius: var(--radius-sm);
    padding: 7px 12px;
    font-weight: bold;
    font-size: 13px;
    cursor: pointer;
}

.reward-shop-add-btn:hover {
    background: var(--accent-primary-hover);
}

.reward-shop-delete-btn {
    background: var(--red-500);
}

.reward-shop-delete-btn:hover {
    background: #990000;
}

.reward-shop-admin-empty {
    grid-column: 1 / -1;
    padding: 18px;
    border: 1px dashed #b7b7b7;
    border-radius: var(--radius-md);
    text-align: center;
    background: var(--surface-white);
    color: #666;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* Màn hẹp: 1 thẻ / hàng */
@media (max-width: 720px) {
    .reward-shop-admin-body {
        grid-template-columns: 1fr;
    }
}

.reward-shop-status {
    margin-top: 8px;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: bold;
    text-align: center;
}

.reward-status-enough {
    background: #d9ead3;
    color: var(--green-800);
}

.reward-shop-toolbar {
    max-width: 1100px;
    margin: 0 auto 18px;
    display: grid;
    grid-template-columns: 1fr 180px 220px;
    gap: 10px;
}

.reward-shop-toolbar input,
.reward-shop-toolbar select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-field);
    border-radius: var(--radius-sm);
    box-sizing: border-box;
    font-size: 14px;
}

@media (max-width: 800px) {
    .reward-shop-toolbar {
        grid-template-columns: 1fr;
    }
}

.reward-detail-modal.hidden-section {
    display: none !important;
}