/* HOÀN login V1.1 — approved 2026-10-09. Isolated login screen CSS. */
.hoan-login{min-height:100svh;width:100%;max-width:1120px;margin:0 auto;display:flex;flex-direction:column;padding:0 clamp(20px,4vw,52px)}
    .hl-header{display:flex;justify-content:space-between;align-items:center;min-height:86px;gap:16px}
    .hl-brand{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;text-decoration:none;color:inherit}
    .hl-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--accent);color:#fff;box-shadow:0 4px 10px #9a4d3715}
    .hl-brand-name{font-size:25px;font-weight:750;letter-spacing:-1.6px;line-height:1}
    .hl-brand-name i{color:var(--accent);font-style:normal}
    .hl-preview{font-size:11px;letter-spacing:.11em;font-weight:750;color:#875841;background:#EDE4DC;border:1px solid #E7D9CF;padding:6px 9px;border-radius:99px;white-space:nowrap}
    .hl-grid{display:grid;grid-template-columns:minmax(0,1.09fr) minmax(355px,.91fr);gap:clamp(32px,5.5vw,90px);align-items:center;flex:1;padding:24px 0 50px}
    .hl-eyebrow{display:flex;align-items:center;gap:9px;letter-spacing:.145em;color:var(--accent);font-weight:750;font-size:11px;text-transform:uppercase;margin:0 0 16px}
    .hl-eyebrow::before{content:'';width:22px;height:1px;background:var(--accent)}
    .hl-title{font-family:var(--serif);font-weight:400;font-size:clamp(38px,4.45vw,62px);letter-spacing:-2.5px;line-height:1.17;margin:0}
    .hl-title em{display:block;color:var(--accent);font-weight:400;font-style:normal}
    .hl-subtitle{font-size:15px;color:var(--muted);line-height:1.8;margin:20px 0 0;max-width:445px}
    .hl-graphic{position:relative;height:268px;margin-top:34px;overflow:hidden;background:#EEE8DC;border-radius:23px;border:1px solid #E6DCCB;isolation:isolate}
    .hl-graphic:before{content:'';position:absolute;width:390px;height:390px;top:-240px;right:-80px;border:1px solid #D7C8B4;border-radius:50%;box-shadow:0 0 0 38px #ffffff22,0 0 0 82px #ffffff24}
    .hl-graphic:after{content:'';position:absolute;width:290px;height:290px;bottom:-228px;left:-40px;border:1px solid #D6C4AA;border-radius:50%}
    .hl-card-one{position:absolute;left:8.5%;top:21%;width:62%;height:159px;transform:rotate(-6deg);background:#FFFEFB;border:1px solid #E5DCD0;border-radius:17px;box-shadow:0 16px 33px #493b301a;display:flex;flex-direction:column;padding:18px 20px}
    .hl-card-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
    .hl-card-head span{font-size:10px;font-weight:750;letter-spacing:.13em;color:#887C6E}
    .hl-mini-check{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:var(--green-soft);color:var(--green)}
    .hl-card-line{height:9px;background:#EDE9E2;border-radius:10px;margin-top:13px}
    .hl-card-line.wide{width:75%;height:11px;margin-top:21px;background:#D9CFC1}
    .hl-card-line.short{width:46%;margin-top:9px}
    .hl-card-footer{border-top:1px dashed #DFD7CC;padding-top:11px;margin-top:auto;color:var(--green);font-size:11px;font-weight:700}
    .hl-card-two{position:absolute;right:7.5%;top:14%;width:42%;min-width:160px;background:#9A4D37;border-radius:17px;padding:16px 17px;color:white;box-shadow:0 15px 34px #69352135;transform:rotate(7deg)}
    .hl-card-two .hl-mini-symbol{display:grid;place-items:center;width:40px;height:40px;background:#FFFFFF2A;border:1px solid #FFFFFF30;border-radius:13px;margin-bottom:12px}
    .hl-card-two strong{display:block;font-weight:700;font-size:17px;letter-spacing:-.4px;line-height:1.35}
    .hl-card-two p{margin:7px 0 0;font-size:11px;color:#FBE7DF;line-height:1.5}
    .hl-dot{position:absolute;right:17%;bottom:24px;width:8px;height:8px;border-radius:50%;background:#A47B50;box-shadow:17px 0 0 #D1B99D,34px 0 0 #E4D5C1}
    .hl-auth{background:var(--surface);border:1px solid #E8E3DB;border-radius:27px;box-shadow:0 25px 58px #4035260A,0 2px 8px #40352605;padding:clamp(25px,3vw,42px);align-self:center;width:100%}
    .hl-auth-kicker{font-size:12px;font-weight:730;color:var(--accent);margin-bottom:13px;letter-spacing:.025em}
    .hl-auth-title{font-size:29px;line-height:1.25;letter-spacing:-1px;margin:0 0 11px;font-weight:680}
    .hl-auth-sub{font-size:14px;line-height:1.7;color:var(--muted);margin:0 0 30px}
    .hl-google-btn{width:100%;min-height:56px;display:flex;justify-content:center;align-items:center;gap:13px;padding:12px 18px;border:1.5px solid #C8C0B5;background:#fff;border-radius:13px;box-shadow:0 1px 2px #3C31240A;font-size:14px;font-weight:730;color:var(--ink);transition:background .15s,border-color .15s,transform .15s}
    .hl-google-btn:hover{background:#F7F5F1;border-color:var(--accent)}.hl-google-btn:active{transform:scale(.992)}
    .hl-google-g{width:22px;height:22px;flex:none}
    .hl-auth-helper{display:flex;align-items:center;gap:8px;justify-content:center;margin:15px 0 0;color:#797167;font-size:12px;line-height:1.5}
    .hl-auth-helper svg{width:14px;height:14px;flex:none}
    .hl-terms{font-size:11px;color:var(--muted);text-align:center;line-height:1.8;margin:28px 0 0}
    .hl-text-button{display:inline;padding:0;background:none;color:var(--accent);border:0;font-size:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
    .hl-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:17px 0 25px;border-top:1px solid var(--line);color:#77716A;font-size:11px}
    .hl-footer-label{display:flex;align-items:center;gap:8px}
    .hl-footer .circle{width:7px;height:7px;background:var(--green);border-radius:50%}
    .hl-note{position:fixed;z-index:20;left:20px;right:20px;bottom:calc(22px + env(safe-area-inset-bottom));max-width:440px;margin:auto;display:none;padding:13px 16px;border:1px solid #DBD3C6;background:#292722;color:#fff;border-radius:12px;box-shadow:0 12px 25px #0002;font-size:13px;line-height:1.6;text-align:left}
    .hl-note[data-show="true"]{display:block}
    @media(max-width:760px){
      .hoan-login{max-width:540px;padding:0 22px}
      .hl-header{min-height:76px}
      .hl-grid{grid-template-columns:1fr;gap:22px;padding:14px 0 20px;align-items:start}
      .hl-title{font-size:clamp(35px,8.7vw,49px);letter-spacing:-1.6px}
      .hl-eyebrow{margin-bottom:11px}
      .hl-subtitle{margin-top:13px;font-size:13px;line-height:1.65}
      .hl-graphic{height:167px;margin-top:22px;border-radius:17px}
      .hl-card-one{top:18%;height:113px;padding:12px 13px;border-radius:12px}
      .hl-card-head span{font-size:8px}.hl-card-line.wide{margin-top:12px}.hl-card-line{margin-top:8px;height:7px}.hl-card-footer{padding-top:6px;font-size:9px}
      .hl-card-two{top:12%;padding:11px 12px;border-radius:13px;min-width:139px}.hl-card-two .hl-mini-symbol{width:29px;height:29px;border-radius:9px;margin-bottom:6px}.hl-card-two strong{font-size:13px}.hl-card-two p{font-size:9px;margin-top:4px}
      .hl-auth{border-radius:18px;padding:22px 21px 20px}
      .hl-auth-kicker{font-size:11px;margin-bottom:8px}
      .hl-auth-title{font-size:23px;margin-bottom:7px}
      .hl-auth-sub{font-size:13px;margin-bottom:17px}
      .hl-google-btn{min-height:53px}.hl-auth-helper{margin:11px 0 0;font-size:11px}
      .hl-terms{font-size:10.5px;margin-top:20px}.hl-footer{margin-top:6px;padding:12px 0 18px;font-size:10.5px}
    }
    @media(max-width:355px){.hoan-login{padding:0 16px}.hl-graphic{height:146px;margin-top:18px}.hl-auth{padding:18px}.hl-title{font-size:34px}}