/* ═══════════════════════════════════════════════════════════════
   LOGO + DẢI "NÔNG TRẠI • THÀNH PHỐ • CUỘC SỐNG" — đúng theo mockup
   Ảnh cắt thẳng từ mockup (assets/ui/brand/*): logo_*, ribbon_*_l / _m (lặp ngang) / _r, chữ là HTML để dịch được.
   Bố cục desktop bám khung mockup 1703×924: brand.js đặt --hu (tỉ lệ), --hx/--hy (lề canh giữa), --card-s (co thẻ đăng nhập).
   Nạp SAU skin.css.
   ═══════════════════════════════════════════════════════════════ */
:root{--hu:.94;--hx:0px;--hy:0px;--card-s:1}

/* ── khối logo + dải chữ (đơn vị = px của ảnh gốc × --k) ── */
.ht-brand{--src:710;--rh:100;--ro:-8;--rx:4;--fz:24.2;--ls:.15;--gap:9;
  --bw:min(88vw,440px);--k:calc(var(--bw) / var(--src));
  position:relative;width:var(--bw);display:flex;flex-direction:column;align-items:center;pointer-events:none;user-select:none;-webkit-user-select:none}
.ht-brand--load{--src:765;--rh:90;--ro:-8;--rx:-7.5;--fz:27.4;--ls:.25;--gap:10.5}
.ht-logo{display:block;width:100%;height:auto;filter:drop-shadow(0 calc(var(--k) * 10) calc(var(--k) * 14) rgba(40,22,6,.32))}
.ht-ribbon{position:relative;z-index:1;display:flex;align-items:stretch;height:calc(var(--k) * var(--rh));
  margin-top:calc(var(--k) * var(--ro));transform:translateX(calc(var(--k) * var(--rx)));
  filter:drop-shadow(0 calc(var(--k) * 6) calc(var(--k) * 8) rgba(40,22,6,.28))}
.ht-ribbon .rb-cap{display:block;height:100%;width:auto;flex:none}
.ht-ribbon .rb-mid{display:flex;align-items:center;justify-content:center;gap:calc(var(--k) * var(--gap));height:100%;margin:0 -1px;
  padding-top:calc(var(--k) * 1.5);background:url(../assets/ui/brand/ribbon_auth_m.webp) repeat-x 0 0 / auto 100%;
  font-family:'Baloo 2','Nunito',system-ui,sans-serif;font-weight:800;font-size:calc(var(--k) * var(--fz));line-height:1;
  letter-spacing:calc(var(--k) * var(--ls));color:#774413;text-transform:uppercase;white-space:nowrap}
.ht-brand--load .rb-mid{background-image:url(../assets/ui/brand/ribbon_load_m.webp)}
.ht-ribbon .rb-mid b{font-weight:900;font-size:.86em;line-height:1;transform:translateY(-.03em)}

/* ═══ MÀN ĐĂNG NHẬP — logo trái, thẻ phải (mockup 1) ═══ */
#screen-auth .brand-lead,#screen-auth .auth-brand>.plank,#screen-auth .auth-brand>.logo-mark{display:none!important}
#screen-auth .auth-brand{align-items:center}
@media (orientation:landscape) and (min-width:960px) and (min-height:520px){
  #screen-auth{overflow:hidden}
  #screen-auth .auth-wrap{display:block!important;position:absolute;inset:0;width:auto!important;min-height:0!important;height:auto;margin:0!important;padding:0!important}
  #screen-auth .auth-brand{position:absolute!important;left:calc(var(--hx) + 120px * var(--hu));top:calc(var(--hy) + 57px * var(--hu));
    margin:0!important;padding:0!important;max-width:none!important;display:block!important}
  #screen-auth .ht-brand--auth{--bw:calc(710px * var(--hu))}
  #screen-auth .auth-card{position:absolute!important;right:calc(var(--hx) + 63px * var(--hu));top:calc(var(--hy) + 58px * var(--hu));
    margin:0!important;width:458px!important;max-width:none!important;zoom:1!important;transform-origin:top right;transform:scale(var(--card-s));transition:transform .2s ease}
}

/* ═══ MÀN TẢI — logo giữa trên, thẻ tải dưới (mockup 2) ═══ */
#screen-loading .load-center>.logo-mark,#screen-loading .load-center>.logo-sub{display:none!important}
#screen-loading .ht-brand--load{--bw:min(92vw,470px)}
@media (orientation:landscape) and (min-width:900px) and (min-height:480px){
  #screen-loading .load-center{position:absolute;inset:0;padding:0!important;display:block}
  #screen-loading .ht-brand--load{position:absolute;left:calc(var(--hx) + 470px * var(--hu));top:calc(var(--hy) + 32px * var(--hu));--bw:calc(765px * var(--hu))}
  #screen-loading .load-card{position:absolute;left:50%;bottom:auto!important;top:calc(var(--hy) + 722px * var(--hu));transform:translateX(-50%);
    width:calc(626px * var(--hu))!important;font-size:calc(17px * var(--hu));padding:1.05em 1.55em .95em!important;border-radius:1.5em!important}
  #screen-loading .load-footer{left:0;right:0;justify-content:center;bottom:auto!important;top:calc(var(--hy) + 880px * var(--hu));font-size:calc(15px * var(--hu))}
  /* nút cài đặt góc trái + MXH/kho ứng dụng góc phải theo đúng cỡ mockup */
  #screen-loading .corner-tl{left:calc(var(--hx) + 22px * var(--hu))!important;top:calc(15px * var(--hu))!important;width:calc(76px * var(--hu))!important;height:calc(78px * var(--hu))!important}
  #screen-loading .corner-tl i{width:48%;height:48%}
  #screen-loading .top-links{top:calc(20px * var(--hu))!important;right:calc(var(--hx) + 18px * var(--hu))!important;transform-origin:top right;transform:scale(calc(var(--hu) * 1.205))}
}
/* thẻ tải: kem viền nâu nhạt, chữ nâu đậm, thanh xanh lá */
#screen-loading .load-card{background:linear-gradient(180deg,#fffdf7,#fbefd9)!important;border:.17em solid #dcbf92!important;
  box-shadow:0 .55em 1.5em rgba(40,22,6,.28),inset 0 0 0 .13em #fff9ec!important}
#screen-loading .load-row{margin-bottom:.6em;align-items:center}
#screen-loading .load-left{display:inline-flex;align-items:center;gap:.4em}
#screen-loading .load-left i{width:1.3em;height:1.3em;color:#4fae3b}
#screen-loading .load-label,#screen-loading .load-pct{color:#5b3412!important;font-weight:900!important;font-size:1.13em!important}
#screen-loading .progress{height:1.25em!important;border-radius:1em!important;background:#ecdfc6!important;border:.13em solid #fff!important;
  box-shadow:inset 0 .13em .28em rgba(90,55,20,.28)!important;overflow:hidden}
#screen-loading .progress-fill{background:linear-gradient(180deg,#9be46b 0%,#5cc046 55%,#43a834 100%)!important;border-radius:1em!important}
#screen-loading .load-tip{color:#6b4a22!important;font-weight:700!important;font-size:.9em!important;justify-content:center;margin-top:.65em;gap:.35em}
#screen-loading .tip-bulb{font-size:1.15em;line-height:1}

/* logo mới (16/9): khẩu hiệu nằm sẵn trong ảnh → ẩn dải ruy băng chữ, thu nhỏ khung vì logo cao hơn */
.ht-brand .ht-ribbon{display:none}
#screen-loading .ht-brand--load,#screen-auth .ht-brand--auth{width:calc(var(--bw) * .78)}
@media (orientation:landscape) and (min-width:900px) and (min-height:480px){ #screen-loading .ht-brand--load{margin-left:calc(var(--bw) * .11)} }
@media (orientation:landscape) and (min-width:960px) and (min-height:520px){ #screen-auth .ht-brand--auth{margin-left:calc(var(--bw) * .11)} }
@media (orientation:portrait){ #screen-loading .ht-brand--load{margin-top:64px} #screen-auth .ht-brand--auth{margin-top:34px} }