/* ============================================================
   Thuan Viet Group - Webmail login skin (2 cot)
   Ap cho Zimbra 8.8.x login.jsp. Chi CSS override, khong dung logic.
   ============================================================ */
:root{
  --tv-navy:#0d1b2a; --tv-navy2:#12283f; --tv-blue:#16324e;
  --tv-gold:#c8a24a; --tv-gold2:#e6c877; --tv-ink:#0d1b2a;
}
html,body,.LoginScreen{background:var(--tv-navy)!important;margin:0!important;}
.LoginScreen{position:fixed!important;inset:0!important;width:100%!important;height:100%!important;overflow:hidden!important;}

/* ---------- COT TRAI: branding ---------- */
#tv-left{position:fixed;top:0;left:0;width:50%;height:100%;box-sizing:border-box;z-index:5;
  background:radial-gradient(120% 120% at 22% 12%,var(--tv-blue) 0%,var(--tv-navy2) 48%,var(--tv-navy) 100%);
  display:flex;flex-direction:column;justify-content:center;padding:0 7%;color:#fff;overflow:hidden;}
#tv-left .grid{position:absolute;inset:0;opacity:.09;
  background-image:linear-gradient(var(--tv-gold2) 1px,transparent 1px),linear-gradient(90deg,var(--tv-gold2) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(120% 90% at 28% 42%,#000 25%,transparent 78%);
  mask-image:radial-gradient(120% 90% at 28% 42%,#000 25%,transparent 78%);}
#tv-left .glow{position:absolute;right:-100px;bottom:-100px;width:360px;height:360px;border-radius:50%;
  background:radial-gradient(circle at 42% 42%,rgba(200,162,74,.28),transparent 66%);}
.tv-wm{position:relative;z-index:2}
.tv-name{font-family:'Segoe UI',Arial,sans-serif;font-weight:800;letter-spacing:.06em;
  font-size:clamp(28px,4vw,46px);line-height:1.04;white-space:nowrap;
  background:linear-gradient(90deg,var(--tv-gold2),var(--tv-gold));-webkit-background-clip:text;background-clip:text;color:transparent;}
.tv-sub{font-weight:600;letter-spacing:.4em;font-size:clamp(11px,1.2vw,15px);color:#cfe0f0;margin-top:8px}
.tv-rule{width:64px;margin:26px 0 22px;border-radius:2px;position:relative;z-index:2}
.tv-slogan{position:relative;z-index:2;font-size:clamp(17px,1.8vw,23px);font-weight:300;font-style:italic;color:#eaf1f8;max-width:440px;line-height:1.5}
.tv-foot{position:absolute;left:7%;bottom:32px;z-index:2;font-size:12px;letter-spacing:.06em;color:#8ba3bd}

/* ---------- COT PHAI: khung dang nhap ---------- */
#tv-right{position:fixed!important;top:0;right:0;width:50%;height:100%;display:flex!important;
  align-items:center;justify-content:center;z-index:6;box-sizing:border-box;padding:24px;}
.center{position:static!important;transform:none!important;top:auto!important;left:auto!important;
  margin:0!important;width:100%!important;max-width:400px!important;min-width:0!important;height:auto!important;}
.contentBox{background:#fff!important;border-radius:16px!important;padding:44px 40px 36px!important;
  box-shadow:0 26px 64px rgba(0,0,0,.5)!important;box-sizing:border-box;}
.center h1{display:none!important}
#ZLoginAppName{display:none!important}
#tv-heading{font-family:'Segoe UI',Arial,sans-serif;color:var(--tv-ink);margin:0 0 26px}
#tv-heading b{display:block;font-size:24px;font-weight:700}
#tv-heading span{display:block;font-size:13px;color:#6b7f95;margin-top:5px;letter-spacing:.02em}

/* form: stack label tren input */
table.form{width:100%!important;border-collapse:collapse!important}
table.form td{display:block!important;width:100%!important;box-sizing:border-box!important;text-align:left!important;
  padding:0!important;color:#33475b!important;font-size:12.5px!important;font-weight:600!important}
table.form tr td:first-child{margin-top:14px!important;letter-spacing:.02em;text-transform:uppercase;color:#6b7f95!important;font-size:11.5px!important}
#username,#password{width:100%!important;height:44px!important;box-sizing:border-box!important;margin-top:6px!important;
  padding:0 14px!important;border:1.5px solid #d7dee6!important;border-radius:10px!important;background:#f7f9fb!important;
  font-size:14px!important;color:#12283f!important;outline:none!important}
#username:focus,#password:focus{border-color:var(--tv-gold)!important;background:#fff!important;box-shadow:0 0 0 3px rgba(200,162,74,.18)!important}
td.submitTD{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;margin-top:22px!important;flex-wrap:wrap}
td.submitTD label{font-weight:500!important;color:#4a6076!important;font-size:12.5px!important}
#remember{width:16px;height:16px;accent-color:var(--tv-gold);vertical-align:middle}
.ZLoginButton{background:linear-gradient(180deg,var(--tv-blue),var(--tv-navy))!important;color:#fff!important;border:0!important;
  border-radius:10px!important;padding:0 26px!important;height:44px!important;font-size:14px!important;font-weight:700!important;
  letter-spacing:.03em;cursor:pointer!important;box-shadow:0 6px 16px rgba(13,27,42,.28)!important;transition:.15s}
.ZLoginButton:hover{filter:brightness(1.12)}
#client{margin-top:6px!important;height:38px!important;border:1.5px solid #d7dee6!important;border-radius:9px!important;
  padding:0 8px!important;background:#f7f9fb!important;color:#12283f!important;font-size:13px!important}

/* footer trademark Zimbra: nho, gon duoi cot phai */
.LoginScreen .Footer,.LoginScreen .decor2,.decor1{background:none!important;border:0!important;box-shadow:none!important;}
.LoginScreen .Footer{position:fixed!important;bottom:14px!important;left:50%!important;width:50%!important;box-sizing:border-box;
  text-align:center!important;font-size:10.5px!important;color:#7f93a8!important;z-index:7;padding:0 20px}
.LoginScreen .Footer a{color:#9db3c7!important}



/* ---------- Logo chinh: chuan hoa theo CHIEU CAO ----------
   Moi logo (ti le khac nhau) deu cao bang nhau -> can thi giac dong deu.
   Nen chip trang vi cac logo deu la PNG trong suot, chu mau toi. */
.tv-wm{position:relative;z-index:2;display:inline-block}
.tv-logo{display:block;height:clamp(46px,5.2vw,62px);width:auto;
  max-width:min(300px,78%);object-fit:contain;
  transition:opacity .18s ease}

/* ---------- Responsive: man hep / dien thoai => xep 1 cot ----------
   Da kiem chung o 360 / 375 / 390 / 780 px, khong tran ngang.
   Ba diem BAT BUOC, thieu mot cai la hong:
   1) Base dung 'position:fixed!important' -> o day PHAI co !important moi de len duoc.
      Thieu -> khung form phu kin len cot logo, logo bien mat.
   2) Flex item mac dinh min-width:auto nen khong co duoc duoi min-content;
      input size="40" day min-content len ~400px -> phai dat min-width:0.
   3) Zimbra dat cung .contentBox{width:400px} -> phai ep ve 100%,
      neu khong the se tran ra ngoai man hinh 360px.                        */
@media (max-width:860px){
  html,body{height:auto!important;overflow-y:auto!important}
  .LoginScreen{position:static!important;inset:auto!important;height:auto!important;
    min-height:100%!important;overflow:visible!important;display:block!important}

  /* --- cot branding, nay nam tren cung --- */
  #tv-left{position:relative!important;top:auto!important;left:auto!important;
    width:100%!important;height:auto!important;min-height:200px;padding:34px 22px!important}
  #tv-left .glow{width:220px;height:220px;right:-70px;bottom:-70px}
  .tv-logo{height:clamp(40px,9vw,52px);padding:14px 18px}
  .tv-slogan{font-size:17px!important;max-width:100%!important}
  .tv-rule{margin:18px 0 14px!important}
  .tv-foot{display:none!important}

  /* --- khung dang nhap --- */
  #tv-right{position:relative!important;top:auto!important;right:auto!important;
    width:100%!important;height:auto!important;min-width:0!important;
    padding:20px 16px 6px!important}
  .center{min-width:0!important;width:100%!important;max-width:420px!important;margin:0 auto!important}
  .contentBox{width:100%!important;max-width:100%!important;min-width:0!important;
    box-sizing:border-box!important;padding:30px 22px 26px!important;border-radius:14px!important}
  #tv-heading b{font-size:22px!important}

  table.form{width:100%!important;table-layout:fixed!important}
  table.form td{min-width:0!important;overflow-wrap:break-word}
  /* font < 16px lam iOS Safari tu phong to trang khi cham vao o nhap */
  #username,#password{font-size:16px!important;height:48px!important;
    min-width:0!important;max-width:100%!important}
  .ZLoginButton{height:48px!important;font-size:15px!important;padding:0 22px!important}
  td.submitTD{gap:14px!important;margin-top:20px!important;flex-wrap:wrap!important}
  #client{height:42px!important;font-size:15px!important}

  .LoginScreen .Footer{position:static!important;left:auto!important;bottom:auto!important;
    width:100%!important;padding:16px 18px 24px!important;text-align:center!important}
}

/* Dien thoai xoay ngang: man rat thap -> thu nho khoi branding
   de o nhap va nut Dang nhap len cao, do phai cuon nhieu. */
@media (max-width:860px) and (max-height:500px){
  #tv-left{min-height:0!important;padding:18px 22px!important}
  .tv-logo{height:38px!important;padding:10px 14px!important}
  .tv-rule{margin:12px 0 8px!important}
  .tv-slogan{font-size:15px!important}
  #tv-right{padding:14px 16px 4px!important}
  .contentBox{padding:22px 20px 20px!important}
}