/* =========================================================================
   Trang đăng nhập SSO — Thanh tra Chính phủ
   Dựng theo thiết kế TTCP: cột nội dung lệch trái, logo và tên cơ quan nằm
   NGOÀI thẻ, nút "Trở về" ở góc trên thẻ, logo VNeID bên phải chữ.
   ========================================================================= */

:root{
  --navy:#152C5B;
  --navy-deep:#0F2148;
  --primary:#1B5FCB;
  --primary-700:#154CA5;
  --slate:#4B5563;
  --muted:#8A93A3;
  --line:#DFE4EC;
  --field-line:#D8DEE8;
  --surface:#FFFFFF;
  --canvas:#EAF1FB;
  --danger:#B42318;
  --danger-bg:#FEF3F2;
  --danger-line:#FDA29B;
  --radius:14px;
  --radius-sm:9px;
  --focus:0 0 0 3px rgba(27,95,203,.28);
  --font:"Inter","Roboto","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,p,figure,dl,dd{margin:0}
img{max-width:100%;height:auto;display:block}
button,input{font:inherit;color:inherit}

/* ---------- Nền ---------- */
body{
  min-height:100svh;
  font-family:var(--font);
  font-size:16px;
  line-height:1.5;
  color:var(--slate);
  background-color:var(--canvas);
  background-image:url("ttcp-bg.jpg");
  background-repeat:no-repeat;
  background-position:center right;
  background-size:cover;
  background-attachment:fixed;
  display:grid;
  grid-template-rows:1fr;
}
@supports (background-image: image-set(url("ttcp-bg.webp") type("image/webp"))){
  body{
    background-image:image-set(
      url("ttcp-bg.webp") type("image/webp"),
      url("ttcp-bg.jpg")  type("image/jpeg"));
  }
}
@media (max-width:600px){
  body{background-image:none;background-color:var(--canvas)}
}

/* Hoa văn trống đồng — góc trên bên trái, thuần trang trí */
.watermark{
  position:fixed;
  inset-block-start:-14vw;
  inset-inline-start:-13vw;
  inline-size:min(48vw,560px);
  opacity:.16;
  pointer-events:none;
  z-index:0;
}
@media (max-width:900px){.watermark{display:none}}

/* ---------- Cột nội dung: lệch trái trên màn rộng ---------- */
.page{
  position:relative;
  z-index:1;
  min-height:100svh;
  display:grid;
  align-content:center;
  justify-items:center;
  padding:clamp(1.5rem,4vw,2.5rem) clamp(1rem,4vw,2rem);
}
@media (min-width:992px){
  .page{
    justify-items:start;
    padding-inline-start:clamp(3rem,13vw,13rem);
  }
}
.stack{inline-size:min(100%,364px)}

/* ---------- Logo và tên cơ quan — NGOÀI thẻ ---------- */
.brand{text-align:center;margin-block-end:clamp(.85rem,1.8vw,1.15rem)}
.brand__logo{inline-size:clamp(48px,5vw,58px);margin-inline:auto;margin-block-end:.55rem}
.brand__name{
  font-size:clamp(.88rem,.82rem + .2vw,1rem);
  font-weight:700;color:var(--navy);
  text-transform:uppercase;letter-spacing:.02em;
}
.brand__system{
  margin-block-start:.2rem;
  font-size:clamp(.7rem,.66rem + .14vw,.78rem);
  font-weight:600;color:var(--navy);
  text-transform:uppercase;letter-spacing:.01em;line-height:1.45;
  text-wrap:balance;
}

/* ---------- Thẻ ---------- */
.card{
  background:var(--surface);
  border-radius:var(--radius);
  box-shadow:0 12px 34px rgba(15,33,72,.12),0 2px 6px rgba(15,33,72,.05);
  padding:.9rem 1.25rem 1.2rem;
}

/* Nút "Trở về" ở góc trên thẻ */
.back{
  display:inline-flex;align-items:center;gap:.35rem;
  font-size:.72rem;font-weight:600;color:var(--primary);
  text-decoration:none;
  border:1px solid var(--line);border-radius:99px;
  padding:.3rem .72rem .3rem .58rem;
  margin-block-end:.75rem;
}
.back:hover{border-color:var(--primary);background:#F5F8FE}
.back:focus-visible{outline:none;box-shadow:var(--focus)}
.back svg{flex:none}

.greeting{text-align:center;margin-block-end:.95rem}
.greeting__title{
  font-size:clamp(.9rem,.85rem + .16vw,.98rem);
  font-weight:700;color:var(--navy);
  text-transform:uppercase;letter-spacing:.01em;text-wrap:balance;
}
.greeting__hint{margin-block-start:.25rem;font-size:.78rem;color:var(--muted)}

/* ---------- Thông báo lỗi ---------- */
.alert{
  display:flex;gap:.5rem;align-items:flex-start;
  margin-block-end:1rem;padding:.6rem .7rem;
  font-size:.78rem;color:var(--danger);
  background:var(--danger-bg);border:1px solid var(--danger-line);
  border-radius:var(--radius-sm);
}
.alert svg{flex:none;margin-block-start:.12rem}
.alert[hidden]{display:none}

/* ---------- Ô nhập ---------- */
.field{margin-block-end:.72rem}
.field__label{
  display:block;margin-block-end:.32rem;
  font-size:.78rem;font-weight:600;color:var(--navy);
}
.control{position:relative;display:flex;align-items:center}
.control input{
  inline-size:100%;min-block-size:40px;
  padding:.5rem .8rem;
  font-size:.84rem;color:var(--navy);
  background:#fff;border:1px solid var(--field-line);
  border-radius:var(--radius-sm);
  transition:border-color .15s,box-shadow .15s;
}
.control:has(.toggle-pw) input{padding-inline-end:2.5rem}
.control input::placeholder{color:var(--muted)}
.control input:hover{border-color:#C3CCDA}
.control input:focus-visible{outline:none;border-color:var(--primary);box-shadow:var(--focus)}

.toggle-pw{
  position:absolute;inset-inline-end:.35rem;
  display:flex;align-items:center;justify-content:center;
  inline-size:30px;block-size:30px;padding:0;
  color:var(--muted);background:none;border:0;border-radius:7px;cursor:pointer;
}
.toggle-pw:hover{color:var(--navy);background:#F2F5FA}
.toggle-pw:focus-visible{outline:none;box-shadow:var(--focus)}
.toggle-pw .icon-hide{display:none}
.toggle-pw[aria-pressed="true"] .icon-hide{display:block}
.toggle-pw[aria-pressed="true"] .icon-show{display:none}

.row-between{display:flex;align-items:center;margin-block:.6rem .85rem}
.checkbox{display:flex;gap:.45rem;align-items:center;font-size:.76rem;color:var(--slate);cursor:pointer}
.checkbox input{
  inline-size:15px;block-size:15px;margin:0;
  accent-color:var(--primary);border-radius:50%;cursor:pointer;
}
.checkbox input:focus-visible{outline:none;box-shadow:var(--focus)}

/* ---------- Nút ---------- */
.btn{
  display:flex;gap:.5rem;align-items:center;justify-content:center;
  inline-size:100%;min-block-size:42px;
  padding:.55rem 1rem;
  font-size:.86rem;font-weight:600;
  text-decoration:none;border:1px solid transparent;border-radius:var(--radius-sm);
  cursor:pointer;transition:background-color .15s,border-color .15s,color .15s;
}
.btn:focus-visible{outline:none;box-shadow:var(--focus)}
.btn--primary{color:#fff;background:var(--primary)}
.btn--primary:hover{background:var(--primary-700)}
.btn--outline{color:var(--primary);background:#fff;border-color:var(--field-line)}
.btn--outline:hover{border-color:var(--primary);background:#F5F8FE}
/* Logo VNeID nằm BÊN PHẢI chữ */
.btn__logo{inline-size:22px;block-size:auto;border-radius:4px;order:2}
.btn + .btn,form + .btn,form + form .btn{margin-block-start:.6rem}
form.stacked{margin-block-start:.6rem}

/* ---------- Hỗ trợ ---------- */
.support{margin-block-start:.9rem;text-align:center;font-size:.75rem;color:var(--slate)}
.support a{color:var(--primary);font-weight:600;text-decoration:underline}
.support a:focus-visible{outline:none;box-shadow:var(--focus);border-radius:3px}

/* ---------- Chân trang — ngoài thẻ ---------- */
.site-footer{
  margin-block-start:clamp(1rem,2.2vw,1.5rem);
  text-align:center;font-size:.72rem;color:var(--navy);
}
/* Địa chỉ dài hơn bề ngang thẻ. Trên màn rộng cho tràn đều hai bên để nằm
   gọn một dòng như thiết kế; trên điện thoại giữ trong cột, xuống dòng
   bình thường — nới ở đó sẽ làm tràn ngang cả trang. */
@media (min-width:992px){
  .site-footer{inline-size:476px;margin-inline:-56px}
}
.site-footer p{margin:0}
.site-footer__addr{opacity:.9}
.site-footer__copy{margin-block-start:.15rem;font-weight:600}

.visually-hidden{
  position:absolute;inline-size:1px;block-size:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}
@media (forced-colors:active){.card,.control input,.btn{border:1px solid CanvasText}.watermark{display:none}}
@media print{body{background:#fff}.watermark,.btn,.toggle-pw{display:none}.card{box-shadow:none;border:1px solid #000}}