/* ============================================================================
 * warranty.css — Module Bảo hành (customer-facing), DÙNG CHUNG CHO MỌI THEME.
 *
 * Toàn bộ form sống trong MỘT sandbox <div class="wr-app">. KHÔNG phụ thuộc
 * bất kỳ class nào của theme/Bootstrap. Mọi control tự reset (appearance, font,
 * color, background, border, line-height, margin) để CSS global của theme
 * (input{}, button{}, a{}, h3{}, h4{}, p{}, label{}, *{box-sizing}) không thể
 * làm méo.
 *
 * Chống theme "hung hãn": các control + vùng kết quả (JS render) dùng selector
 * lặp class .wr-app .wr-x.wr-x (specificity 0,3,0) + !important, thắng cả rule
 * 2-class phổ biến của theme như `.wrapper .content input{…!important}` (0,2,1).
 * (Giới hạn CSS: rule gắn id `#content input{…!important}` (1,0,1) vẫn thắng —
 * hiếm gặp, không thể chặn hoàn toàn bằng class.)
 *
 * Store đổi màu thương hiệu cho cả form bằng cách override 1 dòng trên .wr-app:
 *     .wr-app { --wr-accent:#c0392b; --wr-accent-dark:#a5281c; --wr-ring:rgba(192,57,43,.2); }
 * ==========================================================================*/

/* ---- 1. TOKENS (đổi 1 dòng để tint theo brand store) --------------------- */
.wr-app{
    --wr-accent:#2563eb;            /* neutral trust blue, theme-agnostic */
    --wr-accent-dark:#1d4ed8;
    --wr-accent-active:#1e40af;
    --wr-accent-soft:#eff4ff;
    --wr-ring:rgba(37,99,235,.20);

    --wr-text:#1f2937;
    --wr-text-soft:#6b7280;
    --wr-heading:#111827;

    --wr-canvas:#f4f6fb;
    --wr-surface:#ffffff;
    --wr-surface-soft:#f8fafc;
    --wr-field-bg:#ffffff;

    --wr-border:#d5dae1;
    --wr-border-strong:#9aa3af;
    --wr-placeholder:#6b7280;      /* WCAG AA ~4.9:1 trên nền trắng */

    --wr-ok:#16a34a;   --wr-ok-bg:#e9f8ef;   --wr-ok-bd:#bce7cd;   --wr-ok-fg:#116534;
    --wr-warn:#d97706; --wr-warn-bg:#fdf4e3; --wr-warn-bd:#f3dca6; --wr-warn-fg:#8a5a08;
    --wr-danger:#dc2626; --wr-err-bg:#fdecec; --wr-err-bd:#f4c4c4; --wr-err-fg:#a51f1f;
    --wr-grey:#94a3b8;

    --wr-radius:14px;
    --wr-radius-md:10px;
    --wr-radius-sm:8px;
    --wr-field-h:44px;
    --wr-gap:16px;
    --wr-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    --wr-shadow:0 1px 2px rgba(16,24,40,.06),0 10px 30px -12px rgba(16,24,40,.18);
    --wr-shadow-sm:0 1px 2px rgba(16,24,40,.08);

    /* Neutralize inherited theme styling on the root itself */
    box-sizing:border-box;
    font-family:var(--wr-font);
    font-size:15px;
    line-height:1.55;
    color:var(--wr-text);
    text-align:left;
    -webkit-text-size-adjust:100%;
    -webkit-font-smoothing:antialiased;
}

/* ---- 2. RESET PERIMETER -------------------------------------------------- */
.wr-app *,
.wr-app *::before,
.wr-app *::after{ box-sizing:border-box; }

.wr-app h1,.wr-app h2,.wr-app h3,.wr-app h4,.wr-app h5,.wr-app h6,
.wr-app p,.wr-app label,.wr-app strong,.wr-app span,.wr-app div,.wr-app a{
    font-family:var(--wr-font);
}
.wr-app h3,.wr-app h4,.wr-app p{ margin:0; padding:0; }
.wr-app strong{ font-weight:700; }
.wr-app svg{ display:block; }

/* ---- 3. LAYOUT ----------------------------------------------------------- */
.wr-wrap{
    max-width:1180px;
    margin:0 auto;
    padding:0 15px 44px;
}
.wr-grid{ display:block; }

@media (min-width:768px){
    /* CSS Grid chu KHONG phai flex.
       Ban cu: flex-wrap:wrap + col-form 58% + col-info 42% + gap 28px
       -> 58% + 42% = dung 100%, cong them 28px gap la VUOT container.
       Flex khi vuot thi DAY XUONG DONG truoc roi moi co lai, nen cot lien he
       luon roi xuong duoi du man hinh rat rong.
       Grid tinh 58fr/42fr TREN phan con lai SAU khi da tru gap -> khong bao gio tran. */
    .wr-grid{
        display:grid;
        grid-template-columns:58fr 42fr;
        align-items:start;
        gap:28px;
    }
    .wr-col-form,
    .wr-col-info{ min-width:0; }   /* cho phep noi dung dai co lai thay vi lam vo lop luoi */
}

/* ---- 4. BREADCRUMB ------------------------------------------------------- */
.wr-breadcrumb{
    background:var(--wr-canvas);
    border-bottom:1px solid var(--wr-border);
    padding:14px 0;
    margin-bottom:28px;
    font-size:14px;
}
.wr-breadcrumb-inner{
    max-width:1180px;
    margin:0 auto;
    padding:0 15px;
}
.wr-app .wr-breadcrumb a{
    color:var(--wr-accent) !important;
    text-decoration:none !important;
    background:none !important;
}
.wr-app .wr-breadcrumb a:hover{ text-decoration:underline !important; }
.wr-breadcrumb span{ margin:0 8px; color:var(--wr-border-strong); }
.wr-app .wr-breadcrumb strong{ color:var(--wr-heading) !important; font-weight:600; }

/* ---- 5. CARD SURFACES ---------------------------------------------------- */
.wr-box,
.wr-contact-card{
    background:var(--wr-surface);
    border:1px solid var(--wr-border);
    border-radius:var(--wr-radius);
    box-shadow:var(--wr-shadow);
    padding:26px 26px 28px;
}
@media (max-width:520px){ .wr-box{ padding:20px 16px 24px; } }
@media (max-width:767px){ .wr-contact-card{ margin-top:24px; } }
@media (min-width:768px){ .wr-col-info .wr-contact-card{ position:sticky; top:20px; } }

.wr-app .wr-title{
    font-size:19px !important;
    font-weight:700 !important;
    line-height:1.3 !important;
    color:var(--wr-heading) !important;
    text-transform:none !important;
    letter-spacing:0 !important;
    margin:0 0 6px !important;
    padding:0 !important;
}
.wr-app .wr-hint{
    color:var(--wr-text-soft) !important;
    font-size:13.5px !important;
    line-height:1.55 !important;
    margin:0 0 20px !important;
}

/* Ghi chú do CHỦ SHOP tự soạn trong admin, hiện ngay dưới ô nhập số seri.
   - pre-line: giữ xuống dòng chủ shop gõ trong textarea, nhưng KHÔNG giữ
     khoảng trắng thừa (pre-wrap sẽ giữ cả thụt đầu dòng do copy-paste).
   - Nội dung là chữ người dùng nhập, đã HTML-encode ở view; không dựng
     thẻ nào từ đó nên không có đường chèn mã. */
.wr-app .wr-shopnote{
    margin:8px 0 0 !important;
    padding:9px 12px !important;
    background:var(--wr-note-bg, rgba(0,0,0,.035)) !important;
    border-left:3px solid var(--wr-accent, #c9a227) !important;
    border-radius:4px !important;
    color:var(--wr-text-soft) !important;
    font-size:13px !important;
    line-height:1.6 !important;
    white-space:pre-line !important;
    word-break:break-word !important;
}

/* Ảnh tình trạng sản phẩm trong kết quả tra cứu — cửa hàng chụp lúc giao máy. */
.wr-app .wr-card-imgs-label{ margin-top:10px !important; }
.wr-app .wr-card-imgs{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px !important;
    margin-top:6px !important;
}
.wr-app .wr-card-imgs a{
    display:block !important;
    width:84px !important;
    height:84px !important;
    border:1px solid var(--wr-border) !important;
    border-radius:6px !important;
    overflow:hidden !important;
    background:#f4f6f8 !important;
}
.wr-app .wr-card-imgs img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    display:block !important;
    transition:transform .18s ease !important;
}
.wr-app .wr-card-imgs a:hover img{ transform:scale(1.06) !important; }


/* ---- 6. TABS ------------------------------------------------------------- */
.wr-tabs{
    display:flex;
    gap:6px;
    margin-bottom:22px;
    border-bottom:2px solid var(--wr-border);
}
/* .wr-x.wr-x = specificity floor (0,3,0) chống rule 2-class của theme */
.wr-app .wr-tab-btn.wr-tab-btn{
    -webkit-appearance:none !important;
    appearance:none !important;
    display:inline-block !important;
    box-sizing:border-box !important;
    margin:0 0 -2px 0 !important;
    padding:11px 18px !important;
    border:none !important;
    border-bottom:3px solid transparent !important;
    border-radius:0 !important;
    background:none !important;
    box-shadow:none !important;
    font-family:var(--wr-font) !important;
    font-size:15px !important;
    font-weight:600 !important;
    line-height:1.2 !important;
    letter-spacing:0 !important;
    text-transform:none !important;
    color:var(--wr-text-soft) !important;
    cursor:pointer !important;
    transition:color .15s,border-color .15s;
    width:auto !important;
    height:auto !important;
    min-width:0 !important;
}
.wr-app .wr-tab-btn.wr-tab-btn:hover{ color:var(--wr-heading) !important; }
.wr-app .wr-tab-btn.wr-tab-btn:focus-visible{
    outline:2px solid var(--wr-accent) !important;
    outline-offset:2px !important;
}
.wr-app .wr-tab-btn.wr-tab-btn.active{
    color:var(--wr-accent) !important;
    border-bottom-color:var(--wr-accent) !important;
}

/* Ẩn/hiện pane chỉ do CSS (JS chỉ bật/tắt class .active). Scope + !important để
   theme không thể lộ cả 2 pane; .active có specificity cao hơn nên luôn thắng. */
.wr-app .wr-tab-pane{ display:none !important; }
.wr-app .wr-tab-pane.active{ display:block !important; animation:wr-fade .22s ease; }
@keyframes wr-fade{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }

/* ---- 7. FIELDS + CONTROLS (fortified reset, floor 0,3,0) ----------------- */
.wr-field{ margin-bottom:var(--wr-gap); }
.wr-field-serial{ position:relative; }

.wr-app .wr-input.wr-input,
.wr-app .wr-textarea.wr-textarea{
    -webkit-appearance:none !important;
    -moz-appearance:none !important;
    appearance:none !important;
    display:block !important;
    box-sizing:border-box !important;
    width:100% !important;
    margin:0 !important;
    font-family:var(--wr-font) !important;
    font-size:15px !important;
    font-weight:400 !important;
    color:var(--wr-text) !important;
    background:var(--wr-field-bg) !important;
    background-image:none !important;
    border:1px solid var(--wr-border) !important;
    border-radius:var(--wr-radius-sm) !important;
    box-shadow:none !important;
    text-transform:none !important;
    letter-spacing:0 !important;
    outline:none !important;
    transition:border-color .15s,box-shadow .15s;
}
.wr-app .wr-input.wr-input{
    height:var(--wr-field-h) !important;
    line-height:normal !important;
    padding:0 14px !important;
}
.wr-app .wr-textarea.wr-textarea{
    min-height:96px !important;
    line-height:1.5 !important;
    padding:11px 14px !important;
    resize:vertical !important;
}
.wr-app .wr-input.wr-input-qr{ padding-right:48px !important; }

.wr-app .wr-input.wr-input::placeholder,
.wr-app .wr-textarea.wr-textarea::placeholder{ color:var(--wr-placeholder) !important; opacity:1 !important; }

.wr-app .wr-input.wr-input:hover,
.wr-app .wr-textarea.wr-textarea:hover{ border-color:var(--wr-border-strong) !important; }

.wr-app .wr-input.wr-input:focus,
.wr-app .wr-textarea.wr-textarea:focus{
    border-color:var(--wr-accent) !important;
    box-shadow:0 0 0 3px var(--wr-ring) !important;
}

/* Chrome autofill không ép nền vàng */
.wr-app .wr-input.wr-input:-webkit-autofill{
    -webkit-text-fill-color:var(--wr-text) !important;
    box-shadow:0 0 0 1000px var(--wr-field-bg) inset !important;
}

/* ---- 8. QR SCAN BUTTON + READER (button canh giữa theo input 44px) ------- */
.wr-app .wr-qr-btn.wr-qr-btn{
    -webkit-appearance:none !important;
    appearance:none !important;
    position:absolute !important;
    top:0 !important;
    right:6px !important;
    height:var(--wr-field-h) !important;
    width:38px !important;
    margin:0 !important;
    padding:0 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    border:none !important;
    border-radius:var(--wr-radius-sm) !important;
    background:none !important;
    box-shadow:none !important;
    color:var(--wr-accent) !important;
    cursor:pointer !important;
    line-height:1 !important;
    transition:color .15s,background .15s;
}
.wr-app .wr-qr-btn.wr-qr-btn:hover{ color:var(--wr-accent-dark) !important; background:var(--wr-accent-soft) !important; }
.wr-app .wr-qr-btn.wr-qr-btn:focus-visible{
    outline:2px solid var(--wr-accent) !important;
    outline-offset:2px !important;
}
.wr-app .wr-qr-btn.wr-qr-btn svg{ width:22px !important; height:22px !important; display:block !important; }
/* Khoá nét vẽ QR (outline) để theme `svg path{fill:…}` không bôi đặc glyph */
.wr-app .wr-qr-btn svg,
.wr-app .wr-qr-btn svg *{ fill:none !important; stroke:currentColor !important; }

.wr-reader{ margin-top:10px; }
.wr-reader:empty{ margin-top:0; }
.wr-app .wr-reader video,
.wr-app .wr-reader canvas,
.wr-app .wr-reader img{
    max-width:100% !important;
    border-radius:var(--wr-radius-sm) !important;
}

/* ---- 9. SERIAL INFO + INLINE STATE --------------------------------------- */
.wr-serial-info{ margin-top:8px; font-size:13.5px; line-height:1.4; }
.wr-serial-info:empty{ margin-top:0; }
.wr-app .wr-ok{ color:var(--wr-ok) !important; font-weight:600 !important; }
.wr-app .wr-err{ color:var(--wr-danger) !important; font-weight:600 !important; }

/* ---- 10. ERROR HINT (hidden by default; jQuery .show() reveals) ---------- */
.wr-app .wr-err-ct{
    display:none;                 /* BẮT BUỘC: JS dùng $(id).show()/.hide() — KHÔNG !important */
    margin-top:7px !important;
    color:var(--wr-danger) !important;
    font-size:13px !important;
    font-style:normal !important;
    font-weight:600 !important;
    line-height:1.4 !important;
}

/* ---- 11. ACTIONS ROW (fix: button KHÔNG dính input) ---------------------- */
.wr-actions{
    margin-top:26px;
    padding-top:20px;
    border-top:1px solid var(--wr-border);
    display:flex;
    justify-content:flex-end;
}
.wr-recaptcha{ margin-top:6px; }
.wr-recaptcha:empty{ display:none; }

.wr-app .wr-btn.wr-btn{
    -webkit-appearance:none !important;
    appearance:none !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    box-sizing:border-box !important;
    width:100% !important;                 /* mobile: full-width */
    min-height:48px !important;
    margin:0 !important;
    padding:0 28px !important;
    border:none !important;
    border-radius:var(--wr-radius-md) !important;
    background:var(--wr-accent) !important;
    background-image:none !important;
    color:#fff !important;
    font-family:var(--wr-font) !important;
    font-size:15px !important;
    font-weight:600 !important;
    line-height:1.2 !important;
    letter-spacing:.01em !important;
    text-transform:none !important;
    text-decoration:none !important;
    text-shadow:none !important;
    box-shadow:0 10px 22px -10px var(--wr-ring),var(--wr-shadow-sm) !important;
    cursor:pointer !important;
    transition:background-color .15s,box-shadow .15s,transform .05s;
}
.wr-app .wr-btn.wr-btn:hover{ background:var(--wr-accent-dark) !important; box-shadow:0 12px 26px -10px var(--wr-ring) !important; }
.wr-app .wr-btn.wr-btn:active{ background:var(--wr-accent-active) !important; transform:translateY(1px); }
.wr-app .wr-btn.wr-btn:focus-visible{ outline:2px solid var(--wr-accent-dark) !important; outline-offset:2px !important; }
.wr-app .wr-btn.wr-btn:disabled{ opacity:.6 !important; cursor:default !important; box-shadow:none !important; transform:none !important; }

@media (min-width:520px){
    .wr-app .wr-btn.wr-btn{ width:auto !important; min-width:190px !important; }  /* desktop: auto, canh phải */
}

/* ---- 12. RESULT: CARDS (JS innerHTML — khách đọc kết quả bảo hành ở đây) -- */
.wr-app #lk-result:empty,.wr-app #rg-result:empty{ display:none; }
.wr-app #lk-result,.wr-app #rg-result{ margin-top:22px; }

.wr-app .wr-card{
    border:1px solid var(--wr-border) !important;
    border-left:4px solid var(--wr-accent) !important;
    border-radius:var(--wr-radius-md) !important;
    padding:16px 18px !important;
    margin-bottom:14px !important;
    background:var(--wr-surface) !important;
    box-shadow:var(--wr-shadow-sm) !important;
}
.wr-app .wr-card:last-child{ margin-bottom:0 !important; }
.wr-app .wr-card-head{
    display:flex !important;
    align-items:center !important;
    flex-wrap:wrap !important;
    gap:10px !important;
    font-size:16px !important;
    font-weight:700 !important;
    color:var(--wr-heading) !important;
    margin-bottom:10px !important;
}
.wr-app .wr-card-head strong{ font-weight:700 !important; color:var(--wr-heading) !important; }
.wr-app .wr-card-row{
    font-size:14px !important;
    color:var(--wr-text) !important;
    padding:4px 0 !important;
    line-height:1.5 !important;
    display:flex !important;
    gap:8px !important;
    overflow-wrap:anywhere;               /* serial dài không tràn ngang ở 320px */
    min-width:0;
}
.wr-app .wr-card-row span{
    display:inline-block !important;
    min-width:104px !important;
    color:var(--wr-text-soft) !important;
    flex:0 0 auto !important;
}

/* ---- 13. BADGES (JS innerHTML) ------------------------------------------- */
.wr-app .wr-badge{
    display:inline-block !important;
    font-size:12px !important;
    font-weight:700 !important;
    line-height:1.4 !important;
    padding:3px 11px !important;
    border-radius:999px !important;
    color:#fff !important;
    white-space:nowrap !important;
}
.wr-app .wr-badge-ok{ background:var(--wr-ok) !important; }
.wr-app .wr-badge-warn{ background:var(--wr-warn) !important; }
.wr-app .wr-badge-grey{ background:var(--wr-grey) !important; }

/* ---- 14. ALERTS (JS innerHTML) ------------------------------------------- */
.wr-app .wr-alert{
    border-radius:var(--wr-radius-md) !important;
    padding:13px 16px !important;
    margin-top:16px !important;
    font-size:14px !important;
    line-height:1.55 !important;
    border:1px solid transparent !important;
}
.wr-app .wr-alert:first-child{ margin-top:0 !important; }
.wr-app .wr-alert strong{ font-weight:700 !important; }
.wr-app .wr-alert-ok{   background:var(--wr-ok-bg) !important;   border-color:var(--wr-ok-bd) !important;   color:var(--wr-ok-fg) !important; }
.wr-app .wr-alert-warn{ background:var(--wr-warn-bg) !important; border-color:var(--wr-warn-bd) !important; color:var(--wr-warn-fg) !important; }
.wr-app .wr-alert-err{  background:var(--wr-err-bg) !important;  border-color:var(--wr-err-bd) !important;  color:var(--wr-err-fg) !important; }

/* ---- 15. CONTACT COLUMN (icon-chip layout) ------------------------------- */
.wr-app .wr-contact-title{
    font-size:16px !important;
    font-weight:700 !important;
    text-transform:uppercase !important;
    letter-spacing:.06em !important;
    color:var(--wr-heading) !important;
    margin:0 0 6px !important;
    padding:0 0 14px !important;
    border-bottom:1px solid var(--wr-border);
}
.wr-contact-item{
    display:flex;
    align-items:flex-start;
    gap:14px;
    padding:16px 0;
    border-bottom:1px solid var(--wr-border);
}
.wr-contact-item:last-child{ border-bottom:none; padding-bottom:2px; }
.wr-contact-icon{
    flex:0 0 auto;
    width:42px;
    height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    background:var(--wr-accent-soft);
    color:var(--wr-accent);
}
.wr-app .wr-contact-icon svg{ width:20px !important; height:20px !important; }
/* Khoá màu icon liên hệ để theme `svg path{fill:…}` không đổi màu/đổ nét */
.wr-app .wr-contact-icon svg,
.wr-app .wr-contact-icon svg *{ fill:currentColor !important; stroke:none !important; }
.wr-contact-body{ min-width:0; flex:1 1 auto; }
.wr-app .wr-contact-body h4{
    font-size:12px !important;
    font-weight:700 !important;
    text-transform:uppercase !important;
    letter-spacing:.05em !important;
    color:var(--wr-text-soft) !important;
    margin:0 0 4px !important;
    padding:0 !important;
}
.wr-app .wr-contact-body p{
    font-size:14.5px !important;
    line-height:1.55 !important;
    color:var(--wr-text) !important;
    margin:0 !important;
    word-break:break-word;
}
.wr-app .wr-contact-body a{
    color:var(--wr-accent) !important;
    text-decoration:none !important;
    background:none !important;
    font-size:14.5px !important;
}
.wr-app .wr-contact-body a:hover{ text-decoration:underline !important; }
.wr-app .wr-contact-body .wr-phone-sep{ color:var(--wr-text-soft) !important; }

/* ---- 16. OVERLAY + SPINNER (scope .wr-app #overlay để thắng theme #overlay) */
.wr-app #overlay{
    position:fixed;
    top:0; left:0;
    z-index:100000;
    width:100%;
    height:100%;
    display:none;                 /* jQuery .show()/.hide() đặt inline — KHÔNG !important */
    background:rgba(17,24,39,.55);
    -webkit-backdrop-filter:blur(2px);
    backdrop-filter:blur(2px);
}
.wr-app #overlay .wr-cv-spinner{
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
}
.wr-app #overlay .wr-spinner{
    width:44px;
    height:44px;
    border:4px solid rgba(255,255,255,.35);
    border-top-color:#ffffff;
    border-radius:50%;
    animation:wr-sp-anime .8s infinite linear;
}
@keyframes wr-sp-anime{ 100%{ transform:rotate(360deg); } }

/* ---- 17. REDUCED MOTION + FORCED COLORS ---------------------------------- */
@media (prefers-reduced-motion:reduce){
    .wr-app *,.wr-app *::before,.wr-app *::after{ transition:none !important; animation:none !important; }
    .wr-app #overlay .wr-spinner{ animation-duration:1.6s !important; }
}
@media (forced-colors: active){
    .wr-app .wr-input.wr-input:focus,
    .wr-app .wr-textarea.wr-textarea:focus{
        outline:2px solid Highlight !important;
        outline-offset:1px !important;
    }
}