/* ==========================================================================
   Hop dang nhap — MODULE RIENG
   (.dialog-container.wrap-login · iframe.frame-signin · .form-login2)

   [2026-08-20] Bóc khỏi Content/Styles/mobile-v2.css. Cấu kiện này có đầu có
   đuôi — hộp giữa màn, nút Google/Facebook, ô email → mã — nên nó là một
   module, không phải một luật của hệ thiết kế chung.

   Trong file cũ nó nằm RẢI HAI VÙNG, cách nhau hơn trăm dòng: phần hộp/khung ở
   mục 3b, phần làm lại 2026-07-21 ở gần cuối. Hai vùng giữ NGUYÊN THỨ TỰ dưới
   đây, vì vùng sau cố ý đè vùng trước ở vài chỗ cùng độ mạnh.

   NAP O HAI NOI: Template/Site.master (hộp bật lên) và Template/Blank.Master
   (chính cái form bên trong iframe). Thiếu nơi thứ hai là form trần trụi.
   ========================================================================== */

/* --------------------------------------------------------------------------
   3b. HOP DANG NHAP  (dialog + form ben trong iframe)
   Cau truc: .dialog-container.wrap-login > .dialog-box > .dialog-header
                                                        > .dialog-content
                                                          > .dialog-main > iframe.frame-signin
   Form ben trong iframe dung Blank.master - phai NAP file css nay o do nua
   thi cac luat .form-login2 ben duoi moi an (xem Template/Blank.Master).
   -------------------------------------------------------------------------- */

/* Nen mo phia sau - dong tong voi thanh loc / footer */
.dialog-container.wrap-login {
    background: rgba(15, 25, 35, .55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.wrap-login .dialog-box {
    border: 0;
    border-radius: 24px;
    box-shadow: 0 24px 64px rgba(15, 25, 35, .32);
    overflow: hidden;
}


/* Thanh tieu de: bo mau xanh la cu, dung nen trang chu dam */
.wrap-login .dialog-header {
    display: flex;
    align-items: center;
    height: 56px;
    padding: 0 20px;
    background: var(--cq-surface);
    border-bottom: 1px solid rgba(18, 56, 91, .07);
    color: var(--cq-text);
    font-size: 15px;
    font-weight: 600;
}

.wrap-login .dialog-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: #8b98a5;
    font-size: 12px;
    transition: background-color .16s ease, color .16s ease;
}

.wrap-login .dialog-close:hover {
    background: var(--cq-light);
    color: var(--cq-text);
}

.wrap-login .dialog-content,
.wrap-login .dialog-main {
    background: var(--cq-surface);
}


/* Khung nhung KHONG tu co gian theo noi dung -> phai dat so cung.
   Lich su: 328x325 (cat mat hang Google/FB) -> 360x450.
   [2026-07-21] Len 380x560 vi bo cuc moi cao hon: hai nut dang nhap nhanh
   dung THANH HANG DOC (moi nut 46px) thay vi nam ngang canh nhau.
   ⚠ Doi bo cuc form thi PHAI do lai chieu cao that va sua so nay, neu khong
     se cat mat phan duoi ma khong co thanh cuon bao. */
.wrap-login .frame-signin,
.frame-signin {
    /* Kich thuoc lay tu token trong Theme.css — xem Site.css. */
    width: var(--cq-signin-w, 380px);
    height: var(--cq-signin-h, 278px);
    border: 0;
}


/* ===== Form ben trong iframe =====
   Trang dung Blank.master deo class .cq-blank. Phai tra nen ve TRANG vi luat
   chung o tren dat body mau xam (var(--cq-light)) - trong iframe se thanh nen xam. */
body.cq-blank {
    background: var(--cq-surface);
    padding: 0;
}

.form-login2 {
    padding: 4px 2px;
}

.form-login2 th {
    padding-bottom: 6px;
    color: #6b7a89;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-align: left;
    text-transform: uppercase;
}


/* O nhap: tu gach chan tro trui -> thanh o co vien, bo goc, co cho tho */
.form-login2 input[type="text"],
.form-login2 input[type="password"],
.form-login2 input:not([type="submit"]):not([type="button"]) {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--cq-border);
    border-radius: 12px;
    background: var(--cq-surface);
    box-shadow: none;
    color: var(--cq-text);
    font-size: 14px;
    transition: border-color .16s ease, box-shadow .16s ease;
}

.form-login2 input:focus {
    border-color: var(--cq-green);
    box-shadow: 0 0 0 3px rgba(95, 140, 58, .14);
    outline: none;
}


/* Nut dang nhap: to, tran chieu ngang, mau dam dong bo tab dang mo */
.form-login2 .Button,
.form-login2 input[type="submit"],
.form-login2 button:not(.hide) {
    width: 100%;
    height: 46px;
    margin: 0;
    padding: 0 18px;
    border: 0;
    border-radius: 12px;
    background: var(--cq-dark);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .02em;
    cursor: pointer;
    transition: background-color .18s ease;
}

.form-login2 .Button:hover,
.form-login2 input[type="submit"]:hover,
.form-login2 button:not(.hide):hover {
    background: var(--cq-dark);
}


/* Link "Tao tai khoan" / "Quen mat khau" */
.form-login2 a {
    color: #6b7a89;
    font-size: 12.5px;
    text-decoration: none;
}

.form-login2 a:hover {
    color: var(--cq-text);
    text-decoration: underline;
}


/* Hang dang nhap bang Facebook / Google */
.form-login2 .sign-in-line {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(18, 56, 91, .08);
}

.form-login2 .sign-in-line .text {
    color: #8b98a5;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    line-height: 28px;
    text-transform: uppercase;
}


/* Bao loi.
   ⚠ KHONG dung :not(:empty) de ve khung nen do - the nay luon chua san
   khoang trang/xuong dong ("\n\t\t") nen :empty KHONG khop, ket qua la
   hien mot vet hong ngay ca khi khong co loi. Chi to mau chu la du. */
.form-login2 .lbError {
    color: #b3402f;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.5;
}


/* ==========================================================================
   HOP DANG NHAP - LAM LAI 2026-07-21
   --------------------------------------------------------------------------
   YEU CAU CHU WEB:
     1. Hop phai nam GIUA man hinh (truoc day dinh sat tren, cach tren 30px
        ma cach duoi 338px).
     2. UU TIEN dang nhap bang tai khoan Google / Facebook - dua len TREN.
     3. Dang nhap bang MAT KHAU xuong duoi, lam nhat di. Sau nay se bo han.

   ⚠ CACH LAM: chi dung CSS (thu tu flex + trang tri), KHONG sua markup trong
     Signin.aspx. Ly do: cac o nhap la dieu khien may chu (asd:TextBox,
     asd:Button) - doi thu tu trong markup de lam hong lien ket su kien.
     Dung "order" thi doi duoc cho hien thi ma khong dong vao chung.

   ⚠ Form dang nhap nam trong KHUNG NHUNG (iframe) dung Blank.master. Khung do
     KHONG nap FontAwesome, nen bieu tuong Google/Facebook phai ve bang SVG
     nhung thang vao CSS.
   ========================================================================== */

/* ---------- 1. DUA HOP RA GIUA MAN HINH ---------- */
.dialog-container.wrap-login {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
    box-sizing: border-box;
}

/* ⚠ PHAI la margin:0.
   Utils-min.css dat san  .dialog-box { margin: 30px auto }. Da thu ghi de
   thanh "margin: auto" (cach thuong dung de can giua trong flex) nhung KHONG
   an: do duoc le tren = 0, le duoi = 218px -> hop van dinh sat tren.
   Dat thang margin:0 roi de align-items:center lo viec can giua thi dung:
   do lai ra 129px / 129px, lech 0. */
.wrap-login .dialog-box {
    margin: 0;
}

/* Man hinh THAP (dien thoai nam ngang, cua so nho): hop co the cao hon man
   hinh. Luc do can giua se cat mat PHAN DAU va khong cuon len xem duoc.
   Nen doi sang can TREN, de khung nen tu cuon binh thuong. */
@media (max-height: 700px) {
    .dialog-container.wrap-login {
        align-items: flex-start;
    }
}


/* ---------- 2. BEN TRONG KHUNG NHUNG: DAO THU TU ---------- */
.form-login2 {
    display: flex;
    flex-direction: column;
}

.form-login2 > .lbError { order: 0; }
.form-login2 > .cq-ml { order: 1; }        /* o email = cua chinh */
.form-login2 > .sign-in-line { order: 2; } /* nut Google = loi tat */
.form-login2 > .hide { order: 9; }


/* ---------- 3. KHOI DANG NHAP NHANH (len tren cung) ---------- */
.form-login2 .sign-in-line {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 4px;
    padding: 0;
    border: 0;
    background: none;
}

.form-login2 .sign-in-line .text {
    float: none;
    margin: 0 0 2px;
    color: #6b7a89;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.form-login2 .sign-in-line .fr {
    display: flex;
    flex-direction: column;
    gap: 10px;
    float: none;
    width: 100%;
}

.form-login2 .sign-in-line .clear { display: none; }

/* [2026-08-15] NUT GOOGLE THAT do Google Identity Services (GIS) ve vao #gsiBtn.
   DA XOA HAN cac luat nut gia .g-signin2 / .facebook-signin cu:
     - Google tat thu vien platform.js -> nut gia (phu chu bang ::after, nut that
       trong suot de len) khong con chay duoc, GIS chi nhan click tren nut that.
     - Facebook: chu web bo han cach dang nhap nay.
   Nut GIS la CHUAN thiet ke: moi thu khac (o nhap, nut Dang nhap) an theo no. */
.form-login2 .cq-gsi-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
}

.form-login2 .cq-gsi-btn * { opacity: 1 !important; }

/* [2026-08-19] Nut Google cao 40px do Google tu quy dinh (API chi cho 'large'),
   trong khi CA WEB dung 44px (--cq-tap). Lech 4px + bo goc 20 vs pill -> nhin
   nhu 2 bo. Ep no theo token chung. Chon [role="button"] chu KHONG theo class
   cua Google (class do bi doi ten moi ban phat hanh). */
.form-login2 .cq-gsi-btn [role="button"] {
    height: var(--cq-tap, 44px) !important;
    border-radius: 999px !important;
}

/* ---------- 3c. CAN CA FORM THEO NUT GOOGLE [2026-08-15] ----------
   Nut Google (GIS) la CHUAN: pill, ~300px. Moi thu khac an theo NO:
     - cung be rong (cot giua 300px)
     - cung bo goc pill
     - khoang cach hang DEU nhau (12px) — da bo het padding-top le te trong markup.
   [2026-08-19] Bang mat khau da bi go khoi trang -> cac luat cho <table> cung
   xoa theo; gio chi con o email (.cq-ml) + nut Google. */
.form-login2 {
    /* [2026-08-19] Truoc: max-width 300px cung -> khung 380 con thua 40px moi
       ben, nut Google bi bop chu. Nay CO THEO khung, le lay tu token
       --cq-signin-pad (Theme.css). Man nho khung rong 100% cung dung duoc. */
    max-width: calc(100% - var(--cq-signin-pad, 18px) * 2);
    margin: 0 auto;
}

/* Bo goc PILL + CHIEU CAO 44px — dong bo voi nut Google (o nhap cung 44px) */
.form-login2 input:not([type="submit"]):not([type="button"]),
.form-login2 .Button,
.form-login2 input[type="submit"],
.form-login2 button:not(.hide) {
    border-radius: 999px;
    height: 44px;
}

/* [2026-08-19] XOA khoi CSS cua "dang nhap bang mat khau": cua do da bo
   (Signin.aspx gio la 1 o email -> ma). Vach ngan "hoac dang nhap bang mat
   khau" thanh mo coi -> go han theo luat 2 (xoa, khong an). */