/* =====================================================================
   Bayer QR Verification — tái tạo CHÍNH XÁC giao diện chính hãng
   (tnt.bayer.com.vn/.../verification.css).

   Kỹ thuật (giống hãng, chạy tốt cả Safari lẫn webview Zalo/Facebook):
   dùng CSS responsive gốc của hãng + <meta viewport content="width=980">.
   Trình duyệt tự dựng canvas 980px rồi scale vừa bề rộng màn hình — KHÔNG
   phụ thuộc JS đo clientWidth (điểm yếu gây vỡ giao diện trên Zalo).

   Bảng màu chuẩn hãng: header/viền #339800 · glow #339700 ·
   nhãn #037aa5 · giá trị #315600 · lỗi = đỏ.
   ===================================================================== */

/* Hãng dùng box model mặc định (content-box) — KHÔNG đặt border-box,
   nếu không thẻ card / cột nhãn / footer sẽ hẹp hơn hãng. */

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    background: #339800;
    font-family: "Neue Helvetica W01", Arial, Roboto, sans-serif;
    -webkit-text-size-adjust: 100%;
}

.scVFContainer {
    max-width: 650px;
    margin: auto;
    height: 100%;
    position: relative;
    overflow: hidden;
    background: #339800;
}

.scVFFullHTWD { width: 100%; height: 100%; }

.scVFOverflow { overflow: hidden auto; }

.scVFCenterXY {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ------------------------------ Header xanh + logo tròn ------------- */
.scVFHeaderBox {
    width: 100%;
    height: 34%;
    position: relative;
    background: #339800;
}

.scVFHeaderBox img {
    width: auto;
    height: 65%;
    border: 1px solid #ffffff;
    border-radius: 50%;
    background: #ffffff;
}

/* ------------------------------ Card trắng ------------------------- */
.scVFBodyBox {
    width: calc(100% - 40px);
    height: calc(66% - 100px);
    position: relative;
    background: #ffffff;
    margin: 10px auto 0;
    border-width: 0 20px 20px;
    border-style: none solid solid;
    border-color: #339700;
    padding-top: 70px;
    display: none;
}

.scVFValid .scVFValidBox { display: block; }
.scVFInvalid .scVFInvalidBox { display: block; }

.scVFMessageBox {
    flex-direction: column;
    margin-bottom: 54px;
}

.scVFItem {
    font-size: 18px;
    padding: 10px;
    text-align: center;
    margin: 10px 0;
    width: 100%;
}

.scVFItemLabel {
    text-align: left;
    padding-left: 16px;
    color: #037aa5;
    min-width: 180px;
}

.scVFItemValue {
    width: calc(100% - 180px);
    padding: 0 16px;
    text-align: left;
    color: #315600;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

/* Link giữ mặc định trình duyệt (xanh + gạch chân) — giống hãng */

/* ------------------------------ Footer (đáy màn) ------------------- */
.scVFFooter {
    box-shadow: 0 0 20px #339700;
    padding: 20px;
    width: calc(100% - 80px);
    position: absolute;
    bottom: 20px;
    left: 20px;
    font-size: 18px;
    text-align: center;
    background: #ffffff;
    display: none;
    font-weight: 600;
}

.scVFInvalidFooter { box-shadow: 0 0 20px red; }

/* ------------------------------ Trạng thái LỖI (đỏ) ---------------- */
.scVFInvalid.scVFContainer { background: red; }
.scVFInvalid > .scVFHeaderBox { background: red; }
.scVFInvalid > .scVFBodyBox { border-color: red; }

/* Không có mã trên URL: giữ tông xanh hãng, không tô đỏ như lỗi thật */
.scVFNoCode.scVFContainer { background: #339800; }
.scVFNoCode > .scVFHeaderBox { background: #339800; }
.scVFNoCode .scVFInvalidFooter {
    box-shadow: 0 0 20px #339700;
    color: #315600;
}
/* Không có mã: giữ sóng xanh (không dùng err_pattern đỏ) */
.scVFNoCode.scVFContainer .scVFWave,
.scVFNoCode.scVFContainer .scVFWave::before,
.scVFNoCode.scVFContainer .scVFWave::after {
    background: url(pattern.svg);
}

/* ------------------------------ Sóng (pattern.svg động) ------------ */
.scVFWave,
.scVFWave::before,
.scVFWave::after {
    position: absolute;
    width: 100%;
    height: 104px;
    left: 0;
    background: url(pattern.svg);
}

.scVFInvalid .scVFWave,
.scVFInvalid .scVFWave::before,
.scVFInvalid .scVFWave::after {
    background: url(err_pattern.svg);
}

.scVFWave {
    bottom: -80px;
    z-index: 1;
    transform: rotate(180deg);
    animation: waves 10s linear infinite;
}

.scVFWave::before {
    content: "";
    top: 0;
    opacity: 0.4;
    animation: waves-reverse 10s linear infinite;
}

.scVFWave::after {
    content: "";
    top: 0;
    opacity: 0.6;
    animation: waves 20s linear infinite;
}

@keyframes waves {
    0%   { background-position: 0; }
    100% { background-position: 1600px; }
}

@keyframes waves-reverse {
    0%   { background-position: 1600px; }
    100% { background-position: 0; }
}

/* ---------- Màn hình <= 1200px (điện thoại: canvas 980 luôn rơi vào đây) ---------- */
@media only screen and (max-width: 1200px) {
    .scVFMessageBox { margin-bottom: 238px; }
    /* KHOÁ tỉ lệ canvas 980x2120: header/card KHÔNG phụ thuộc chiều cao
       viewport (tránh lỗi Zalo kéo cao làm card trống hụt). Trình duyệt
       tự zoom canvas 980 vừa bề rộng màn hình (viewport width=980). */
    .scVFContainer { max-width: 1200px; height: 100vh; height: 100svh; }
    .scVFItemLabel { min-width: 280px; }
    .scVFItemValue { width: calc(100% - 280px); }
    .scVFItem { font-size: 34px; padding: 20px; }
    .scVFFooter { font-size: 44px; padding: 40px 20px; }
    .scVFWave,
    .scVFWave::before,
    .scVFWave::after { height: 140px; }
}

/* ------------------------------ Lớp Loading ------------------------ */
#loadingLayer {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.96);
    font-family: "Neue Helvetica W01", Arial, Roboto, sans-serif;
    font-size: 1.05rem;
    color: #339800;
}

.spinner {
    width: 42px;
    height: 42px;
    border: 4px solid #e6f2dc;
    border-top-color: #339800;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }