/* ==========================================================================
   TRANG ĐĂNG NHẬP — bản tách đôi (views/ecommerce/customers/login.blade.php)

   Để thành file riêng chứ không nhét vào hl-pages.css vì hai lẽ:
   - chỉ trang đăng nhập cần, các trang khác không phải tải thêm;
   - trang đăng ký vẫn dùng khối .hl-auth cũ trong hl-pages.css — tách lớp .hl-signin
     ra thì sửa trang này không thể làm vỡ trang kia.
   View nạp file này bằng thẻ <link> đặt ngay đầu nội dung, tức là SAU mọi CSS trong
   <head>, nên thứ tự luôn thắng mà không phải !important.

   Chú ý: theme.css gốc của Ninico có style cho p, ul, li, h1 trần (margin, line-height,
   font-family) — mọi phần tử chữ ở đây đều khai báo lại margin/line-height rõ ràng.
   ========================================================================== */

/* min-width:0 — khung trang bao ngoài là flex/grid: thiếu dòng này thì bất kỳ phần tử nào bên
   trong có bề rộng tối thiểu lớn sẽ đẩy cả trang tràn ngang trên điện thoại. Đã dính: hàng
   "+84 | ô số điện thoại | Lấy mã" làm trang rộng hơn 390px ở chế độ đăng nhập bằng SĐT. */
.hl-signin { max-width: 1120px; min-width: 0; margin: 0 auto; }

/* display:flex/grid ở các lớp bên dưới mạnh hơn luật [hidden] mặc định của trình
   duyệt — thiếu dòng này thì ô SĐT, khối mã OTP… không bao giờ ẩn được. */
.hl-signin [hidden] { display: none !important; }

.hl-signin__card {
    display: flex; flex-wrap: wrap;
    background: var(--hl-surface); border-radius: 32px; overflow: hidden;
    box-shadow: 0 20px 54px rgba(163, 124, 32, .14);
}

/* ---------- nửa trái: lời chào ---------- */

.hl-signin__hero {
    flex: 1 1 400px; min-width: 0; position: relative; overflow: hidden; isolation: isolate;
    background: linear-gradient(150deg, #FFE3A0 0%, #FFC65C 48%, #F5AE2E 100%);
    padding: 44px 44px 40px; display: flex; flex-direction: column; gap: 28px;
}
.hl-signin__hero::before,
.hl-signin__hero::after {
    content: ""; position: absolute; border-radius: 999px; pointer-events: none; z-index: -1;
}
.hl-signin__hero::before {
    right: -100px; top: -130px; width: 340px; height: 340px;
    background: radial-gradient(circle, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 68%);
}
.hl-signin__hero::after {
    left: -80px; bottom: -140px; width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 70%);
}

.hl-signin__brand { display: flex; align-items: center; gap: 13px; color: #4A3208; text-decoration: none; }
.hl-signin__brand:hover { color: #4A3208; }
.hl-signin__logo {
    width: 54px; height: 54px; flex: 0 0 54px; border-radius: 18px; background: #fff;
    display: grid; place-items: center; padding: 7px; box-shadow: 0 8px 20px rgba(140, 96, 10, .18);
    font-size: 17px; font-weight: 800; color: var(--hl-link);
}
.hl-signin__logo img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.hl-signin__name { display: block; font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: #4A3208; }
.hl-signin__domain { display: block; font-size: 12px; font-weight: 600; line-height: 1.4; color: #7A5510; padding-top: 2px; }

.hl-signin__hi {
    margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -.03em; line-height: 1.15;
    color: var(--hl-ink-strong); text-wrap: pretty;
}
.hl-signin__lead { margin: 9px 0 0; max-width: 330px; font-size: 14.5px; font-weight: 500; line-height: 1.6; color: #6B4405; }

.hl-signin__perks { list-style: none; margin: auto 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.hl-signin__perks li {
    display: flex; align-items: center; gap: 11px; margin: 0; padding: 13px 16px; border-radius: 18px;
    background: rgba(255, 255, 255, .58); font-size: 13.5px; font-weight: 600; line-height: 1.45; color: #5C3F04;
}
.hl-signin__perk-ic {
    width: 34px; height: 34px; flex: 0 0 34px; border-radius: 12px; background: #fff;
    display: grid; place-items: center; color: var(--hl-link);
}

/* ---------- nửa phải: các cách đăng nhập ---------- */

.hl-signin__main { flex: 1 1 440px; min-width: 0; padding: 44px 46px 40px; display: flex; flex-direction: column; gap: 20px; }
.hl-signin__h { margin: 0; font-size: 27px; font-weight: 800; letter-spacing: -.025em; line-height: 1.2; color: var(--hl-ink); }
.hl-signin__sub { margin: 5px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--hl-muted); }

.hl-signin__quick { display: flex; gap: 9px; flex-wrap: wrap; }
.hl-signin__qbtn {
    flex: 1 1 190px; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 13px 16px; border-radius: 16px; background: #fff; border: 1.5px solid #EDE4D2;
    font-size: 14px; font-weight: 700; line-height: 1.3; color: #3A3327; text-decoration: none; cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.hl-signin__qbtn:hover,
.hl-signin__qbtn:focus-visible { border-color: #F0C75A; background: #FFFDF8; color: #3A3327; }
.hl-signin__qbtn.is-on { border-color: var(--hl-gold-2); background: var(--hl-gold-soft); }
.hl-signin__qbtn svg { flex: 0 0 19px; }

.hl-signin__or { display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 600; line-height: 1; color: #A79C86; }
.hl-signin__or::before,
.hl-signin__or::after { content: ""; flex: 1; height: 1px; background: var(--hl-line); }

/* ---- form email/mật khẩu: markup do plugin ecommerce sinh ra, chỉnh cho khớp thiết kế ---- */
.hl-signin .hl-formwrap .mb-3 { margin-bottom: 16px; }
.hl-signin .hl-formwrap .form-label { font-size: 13px; color: #3A3327; margin-bottom: 7px; }
.hl-signin .hl-formwrap input[type="email"],
.hl-signin .hl-formwrap input[type="password"],
.hl-signin .hl-formwrap input[type="tel"],
.hl-signin .hl-formwrap input[type="text"] {
    background: #FBF7EC; border: 1.5px solid var(--hl-line); border-radius: 16px;
    padding: 14px 15px; font-size: 14.5px; font-weight: 500; color: var(--hl-ink);
}
.hl-signin .hl-formwrap .auth-card .ps-5 { padding-inline-start: 45px !important; }
.hl-signin .hl-formwrap .auth-card form .auth-input-icon {
    inset-inline-start: 15px; color: #A29886; background: transparent; border: 0;
}
.hl-signin .hl-formwrap .auth-card form .auth-input-icon svg { width: 18px; height: 18px; }
/* Nút con mắt hiện/ẩn mật khẩu — JS trong login.blade.php chèn vào khung .position-relative của ô mật khẩu.
   Chừa lề phải cho chữ khỏi chạy dưới nút; Edge có sẵn con mắt riêng (::-ms-reveal) thì ẩn đi để khỏi 2 nút. */
.hl-signin .hl-formwrap .hl-signin__pw input { padding-inline-end: 52px; }
.hl-signin .hl-formwrap input::-ms-reveal,
.hl-signin .hl-formwrap input::-ms-clear { display: none; }
.hl-signin__eye {
    position: absolute; top: 50%; inset-inline-end: 8px; z-index: 5; transform: translateY(-50%);
    display: grid; place-items: center; width: 38px; height: 38px; margin: 0; padding: 0;
    border: 0; border-radius: 12px; background: none; box-shadow: none; color: #A29886; cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.hl-signin__eye:hover,
.hl-signin__eye[aria-pressed="true"] { background: #FFF3D6; color: #8A4E06; }
.hl-signin__eye:focus-visible { outline: 2px solid var(--hl-gold-2); outline-offset: 1px; }
.hl-signin__eye svg { display: block; width: 19px; height: 19px; }
.hl-signin .hl-formwrap .row.g-0 { margin: 2px 0 18px; }
.hl-signin .hl-formwrap .form-check-label { font-size: 13.5px; font-weight: 500; color: #5C564B; }
.hl-signin .hl-formwrap .text-end a { font-size: 13.5px; text-decoration: none; }
.hl-signin .hl-formwrap button[type="submit"],
.hl-signin .hl-formwrap .tptrack__submition {
    border-radius: 17px; padding: 15px 20px; font-size: 15.5px; box-shadow: 0 10px 24px rgba(196, 145, 20, .3);
}
/* Plugin Social Login tự chèn nút xuống cuối form. Trang này đã đưa các nút đó lên
   đầu thẻ theo thiết kế, nên ẩn bản ở dưới — chỉ ẩn, KHÔNG gỡ khỏi form, để nếu có
   plugin khác cũng chèn thứ gì vào cùng chỗ đó (captcha…) thì vẫn còn nguyên. */
.hl-signin .hl-formwrap .hl-oauth { display: none; }

/* ---- đăng nhập bằng số điện thoại + OTP ---- */
.hl-signin__pane { display: flex; flex-direction: column; gap: 16px; }
.hl-signin__back {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 7px;
    padding: 0; border: 0; background: none; font-size: 13px; font-weight: 700; color: var(--hl-link); cursor: pointer;
}
.hl-signin__label { display: block; margin: 0 0 7px; font-size: 13px; font-weight: 700; line-height: 1.4; color: #3A3327; }

.hl-signin__field {
    display: flex; align-items: center; gap: 10px; padding: 0 8px 0 15px;
    background: #FBF7EC; border: 1.5px solid var(--hl-line); border-radius: 16px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.hl-signin__field:focus-within { border-color: var(--hl-gold-2); box-shadow: 0 0 0 3px rgba(240, 162, 2, .15); }
.hl-signin__cc {
    flex: 0 0 auto; display: flex; align-items: center; gap: 7px; padding-right: 11px;
    border-right: 1px solid #EDE4D2; font-size: 14.5px; font-weight: 700; color: #5C564B;
}
.hl-signin__flag {
    width: 20px; height: 14px; border-radius: 3px; background: #DA251D; color: #FFCD00;
    display: grid; place-items: center; font-size: 9px; line-height: 1;
}
/* width:100% thay cho bề rộng mặc định của ô nhập (~20 ký tự): độ rộng theo phần trăm được
   coi là co được, nên không cộng vào bề rộng tối thiểu của cả hàng — đây mới là thứ gây tràn. */
.hl-signin__field input {
    flex: 1; min-width: 0; width: 100%; margin: 0; padding: 14px 0; border: 0; outline: none; box-shadow: none;
    background: transparent; font-size: 14.5px; font-weight: 500; color: var(--hl-ink);
    font-variant-numeric: tabular-nums;
}
.hl-signin__get {
    flex: 0 0 auto; padding: 8px 16px; border: 0; border-radius: 12px; background: var(--hl-grad);
    color: var(--hl-ink-strong); font-size: 12.5px; font-weight: 800; white-space: nowrap; cursor: pointer;
}
.hl-signin__get:disabled { background: #F0E7D5; color: var(--hl-muted); cursor: default; }

.hl-signin__idle {
    display: flex; align-items: center; gap: 10px; margin: 0; padding: 14px 16px; border-radius: 16px;
    background: #FBF7EC; font-size: 12.5px; line-height: 1.55; color: var(--hl-muted);
}
.hl-signin__idle svg { flex: 0 0 18px; }
.hl-signin__idle b { color: #5C564B; }

/* ---- chọn kênh nhận mã (SMS / Zalo) — cùng kiểu thẻ với trang đăng ký (hl-signup.css), lớp riêng để
   hai trang không phụ thuộc CSS của nhau ---- */
.hl-signin__chbox { background: #FBF7EC; border-radius: 20px; padding: 14px 16px 16px; }
.hl-signin__ch-h { margin: 0; font-size: 13px; font-weight: 800; line-height: 1.4; color: var(--hl-ink); }
.hl-signin__ch-list { position: relative; display: flex; gap: 9px; margin-top: 11px; }
/* Radio thật: ẩn thị giác nhưng vẫn nhận Tab/mũi tên và được trình đọc màn hình đọc. */
.hl-signin__radio {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.hl-signin__ch {
    position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 11px; margin: 0;
    padding: 11px 13px; border-radius: 16px; border: 1.5px solid #EDE4D2; background: transparent; cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.hl-signin__ch:hover { border-color: #F0C75A; }
.hl-signin__ch-ic {
    width: 40px; height: 40px; flex: 0 0 40px; border-radius: 14px; display: grid; place-items: center;
    background: #F3EEE2; opacity: .5; transition: opacity .15s ease, background-color .15s ease;
}
.hl-signin__ch-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.hl-signin__ch-name { display: block; font-size: 14px; font-weight: 700; line-height: 1.3; color: #6E6455; }
.hl-signin__ch-note { display: block; font-size: 11.5px; line-height: 1.35; color: var(--hl-muted); }
.hl-signin__radio:checked + .hl-signin__ch { background: #fff; border-color: #F0A202; box-shadow: 0 6px 16px rgba(196, 145, 20, .2); }
.hl-signin__radio:checked + .hl-signin__ch .hl-signin__ch-ic { opacity: 1; }
.hl-signin__radio:checked + .hl-signin__ch--sms .hl-signin__ch-ic { background: #FFF3D6; }
.hl-signin__radio:checked + .hl-signin__ch--zalo .hl-signin__ch-ic { background: #E8F1FC; }
.hl-signin__radio:checked + .hl-signin__ch .hl-signin__ch-name { color: #2B2418; }
.hl-signin__radio:focus-visible + .hl-signin__ch { outline: 2px solid var(--hl-link); outline-offset: 2px; }
/* Kênh chưa dùng được: vẫn hiện đủ thẻ, nhưng mờ, không chọn được, có nhãn "Sắp có". */
.hl-signin__ch.is-off { cursor: not-allowed; opacity: .55; }
.hl-signin__ch.is-off:hover { border-color: #EDE4D2; }
.hl-signin__ch-soon {
    position: absolute; top: -8px; right: 10px; padding: 1px 7px; border-radius: 999px;
    background: #F3EEE2; border: 1px solid #EDE4D2; color: #76684F;
    font-size: 10px; font-weight: 800; line-height: 1.4; white-space: nowrap;
}
@media (max-width: 767px) {
    .hl-signin__chbox { padding: 12px 12px 14px; }
    .hl-signin__ch { gap: 8px; padding: 10px 10px; }
    .hl-signin__ch-ic { width: 34px; height: 34px; flex-basis: 34px; border-radius: 12px; }
    .hl-signin__ch-soon { right: 8px; font-size: 9.5px; }
    /* như trang đăng ký: điện thoại chỉ còn biểu tượng + tên kênh, bỏ dòng chú thích cho thẻ khỏi cao 3 dòng */
    .hl-signin__ch-list { gap: 8px; margin-top: 10px; }
    .hl-signin__ch-name { font-size: 13px; }
    .hl-signin__ch-note { display: none; }
}

.hl-signin__otphead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.hl-signin__otphead .hl-signin__label { margin: 0; }
.hl-signin__link {
    padding: 0; border: 0; background: none; font-size: 12.5px; font-weight: 700; color: var(--hl-link);
    white-space: nowrap; cursor: pointer;
}
.hl-signin__link:disabled { color: var(--hl-muted-2); cursor: default; }

/* 6 ô chỉ để HIỂN THỊ; chỗ gõ thật là một ô nhập trong suốt phủ lên trên. Làm vậy
   để dán cả mã một lần và để điện thoại tự điền mã từ tin nhắn (one-time-code) vẫn
   chạy — tách 6 ô nhập riêng thì mất cả hai. */
.hl-signin__otp { position: relative; display: flex; gap: 9px; }
.hl-signin__otp-box {
    flex: 1 1 0; min-width: 0; height: 54px; border-radius: 14px; background: #FBF7EC;
    border: 1.5px solid var(--hl-line); display: grid; place-items: center;
    font-size: 20px; font-weight: 800; color: var(--hl-ink); font-variant-numeric: tabular-nums;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.hl-signin__otp-box.is-filled { border-color: #F0C75A; }
.hl-signin__otp-box.is-active { border-color: var(--hl-gold-2); box-shadow: 0 0 0 3px rgba(240, 162, 2, .15); }
.hl-signin__otp-input {
    position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0;
    opacity: 0; background: transparent; color: transparent; caret-color: transparent;
    font-size: 16px; /* dưới 16px thì iOS phóng to cả trang khi chạm vào */
    cursor: text;
}
.hl-signin__status { display: flex; align-items: center; gap: 7px; margin: 9px 0 0; font-size: 12px; line-height: 1.5; color: var(--hl-ink-3); }
.hl-signin__status svg { flex: 0 0 15px; }

.hl-signin__row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.hl-signin__check { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 13.5px; font-weight: 500; line-height: 1.4; color: #5C564B; cursor: pointer; }
.hl-signin__check input { width: 18px; height: 18px; margin: 0; accent-color: var(--hl-gold-2); }

.hl-signin__submit {
    width: 100%; padding: 15px; border: 0; border-radius: 17px; background: var(--hl-grad);
    color: var(--hl-ink-strong); font-size: 15.5px; font-weight: 800; cursor: pointer;
    box-shadow: 0 10px 24px rgba(196, 145, 20, .3);
}
.hl-signin__submit:disabled { opacity: .65; cursor: default; }

.hl-signin__msg { margin: 0; font-size: 13px; line-height: 1.5; color: var(--hl-green); }
.hl-signin__msg.is-error { color: var(--hl-price); }

/* ---- khách mới: bảng điền thông tin sau khi xác minh số (data-hl-pane="profile") ---- */
.hl-signin.is-profile .hl-signin__quick,
.hl-signin.is-profile .hl-signin__or,
.hl-signin.is-profile .hl-signin__alt { display: none; }
.hl-signin__verified {
    display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 13px 15px; border-radius: 16px;
    background: #EEF7F1; font-size: 13px; line-height: 1.55; color: #2E5E47;
}
.hl-signin__verified svg { flex: 0 0 18px; margin-top: 1px; color: var(--hl-green); }
.hl-signin__verified b { font-weight: 800; color: #1F4D38; white-space: nowrap; }
.hl-signin__field--plain { padding: 0 15px; }
/* chữ gợi ý phải nhạt hẳn — đậm như chữ thật thì khách tưởng ô đã có sẵn tên */
.hl-signin__field input::placeholder { color: #A29886; opacity: 1; font-weight: 500; }
.hl-signin__req { color: var(--hl-price); }
.hl-signin__opt { font-weight: 500; color: var(--hl-muted); }
.hl-signin__restart { align-self: center; }

/* ---------- chân thẻ ---------- */
.hl-signin__alt {
    margin: 0; padding-top: 20px; border-top: 1px solid var(--hl-line);
    font-size: 13.5px; line-height: 1.5; color: var(--hl-muted); text-align: center;
}
.hl-signin__alt a { font-weight: 800; color: var(--hl-link); }
.hl-signin__help {
    display: flex; align-items: center; gap: 11px; margin-top: auto; padding: 14px 16px;
    border-radius: 17px; background: #FBF7EC; font-size: 13px; line-height: 1.55; color: var(--hl-ink-3);
}
.hl-signin__help b { font-weight: 800; color: var(--hl-ink); white-space: nowrap; }
.hl-signin__help-ic {
    width: 38px; height: 38px; flex: 0 0 38px; border-radius: 13px; background: var(--hl-gold-soft);
    display: grid; place-items: center; color: var(--hl-link);
}

/* ---------- điện thoại: nửa vàng thành dải đầu, thẻ trắng trồi lên đè mép dưới ---------- */
@media (max-width: 767px) {
    .hl-signin__card { border-radius: 24px; }
    .hl-signin__hero { flex-basis: 100%; padding: 22px 20px 34px; gap: 16px; }
    .hl-signin__logo { width: 46px; height: 46px; flex-basis: 46px; border-radius: 16px; padding: 6px; }
    .hl-signin__name { font-size: 17px; }
    .hl-signin__hi { font-size: 24px; letter-spacing: -.025em; line-height: 1.2; }
    .hl-signin__hi br { display: none; }
    .hl-signin__lead { margin-top: 5px; font-size: 12.5px; line-height: 1.55; }
    .hl-signin__perks { display: none; }
    .hl-signin__main {
        flex-basis: 100%; position: relative; margin-top: -16px; padding: 22px 16px 20px; gap: 16px;
        background: var(--hl-surface); border-radius: 24px 24px 0 0;
    }
    .hl-signin__h { font-size: 22px; }
    .hl-signin__otp { gap: 7px; }
    .hl-signin__otp-box { height: 48px; font-size: 18px; border-radius: 13px; }
    .hl-signin__help { font-size: 12px; }
}
@media (max-width: 767px), (pointer: coarse) {
    .hl-signin__field input { font-size: 16px; }
}

/* Khung reCAPTCHA của Firebase (badge dạng inline). Để trống thì kéo ngược khoảng gap của
   .hl-signin__pane lại — không được ẩn bằng display:none vì reCAPTCHA không dựng được trong phần tử bị ẩn. */
.hl-signin__captcha { display: flex; justify-content: center; }
.hl-signin__captcha:empty { margin-top: -16px; }