/* ============================================================================
   Trang đăng ký /dang-ky — bố cục hero trái + thẻ form phải (theo mockup 09/2026).
   Chỉ nạp ở Views/Account/Register.cshtml. Tiền tố .reg- để không đụng CSS khác.
   ========================================================================== */
.reg-page{min-height:calc(100vh - 72px);padding:2.75rem 0 3.5rem;position:relative;overflow:hidden;
  background:#fbf8f8;
  background-image:radial-gradient(60% 55% at 12% 8%,rgba(161,29,33,.07),transparent 60%),
                   radial-gradient(45% 45% at 100% 100%,rgba(161,29,33,.09),transparent 60%);}
.reg-wrap{max-width:1380px;margin:0 auto;padding:0 1.5rem;display:grid;grid-template-columns:minmax(0,1fr) 530px;gap:2rem;align-items:start;}

/* ── Hero trái ── */
.reg-hero{position:relative;min-height:640px;display:flex;flex-direction:column;justify-content:flex-start;z-index:1;padding:.75rem 0 .5rem;}
.reg-badge{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:999px;background:#fdecec;color:#A11D21;font-weight:800;font-size:.74rem;letter-spacing:.6px;text-transform:uppercase;width:max-content;margin-bottom:1.6rem;}
.reg-title{font-size:3.4rem;font-weight:900;line-height:1.05;letter-spacing:-1px;color:#0f172a;margin:0 0 1rem;white-space:nowrap;}
.reg-title span{color:#A11D21;display:block;}
.reg-sub{font-size:1.06rem;color:#475569;line-height:1.55;max-width:520px;margin:0 0 1.8rem;}
.reg-feats{list-style:none;padding:0;margin:0 0 2rem;display:flex;flex-direction:column;gap:.9rem;}
.reg-feat{display:flex;align-items:center;gap:1rem;}
.reg-feat-ico{width:54px;height:54px;border-radius:50%;background:#fde3e3;color:#A11D21;display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0;}
.reg-feat b{display:block;font-size:1.02rem;color:#0f172a;font-weight:800;line-height:1.25;}
.reg-feat small{font-size:.86rem;color:#64748b;}
.reg-stats{display:flex;gap:1.5rem;align-items:flex-start;flex-wrap:nowrap;}
.reg-stat{position:relative;padding-right:1.5rem;white-space:nowrap;}
.reg-stat:last-child{padding-right:0;}
.reg-stat + .reg-stat::before{content:'';position:absolute;left:-.75rem;top:6px;bottom:6px;width:1px;background:#e2c9c9;}
.reg-stat b{display:block;font-size:1.55rem;font-weight:900;color:#A11D21;line-height:1.1;}
.reg-stat small{font-size:.78rem;color:#64748b;}

/* Khối minh hoạ bên phải hero. Chữ chiếm ~56% bên trái; ảnh neo góc phải-dưới, được phép tràn
   một chút sang khe giữa hero và thẻ form (thẻ có z-index cao hơn nên không bị che). */
.reg-hero > .reg-badge, .reg-hero > .reg-title, .reg-hero > .reg-sub, .reg-hero > .reg-feats{max-width:58%;position:relative;z-index:2;}
.reg-hero > .reg-stats{position:relative;z-index:2;}
.reg-art{position:absolute;right:0;bottom:0;width:56%;min-width:340px;pointer-events:none;z-index:1;}
.reg-art.has-photo{display:flex;align-items:flex-end;justify-content:flex-end;}
.reg-photo{display:block;width:100%;height:auto;max-height:720px;object-fit:contain;object-position:right bottom;filter:drop-shadow(0 18px 28px rgba(15,23,42,.18));}
/* Không có ảnh: dựng blob đỏ + chip nổi bằng CSS */
.reg-art.no-photo{height:520px;}
.reg-blob{position:absolute;left:10%;right:4%;top:10%;bottom:6%;border-radius:48% 52% 40% 60% / 55% 45% 55% 45%;
  background:linear-gradient(160deg,#c9262b 0%,#A11D21 45%,#7a1215 100%);opacity:.92;box-shadow:0 30px 60px rgba(161,29,33,.25);}
.reg-blob::after{content:'';position:absolute;inset:14px;border-radius:inherit;border:1.5px dashed rgba(255,255,255,.35);}
.reg-plane{position:absolute;left:4%;top:6%;color:#A11D21;font-size:2rem;transform:rotate(-20deg);opacity:.85;}
.reg-chip{position:absolute;background:#fff;border-radius:16px;padding:12px 16px;box-shadow:0 12px 30px rgba(15,23,42,.14);display:flex;align-items:center;gap:10px;font-size:.84rem;font-weight:700;color:#0f172a;line-height:1.3;max-width:230px;}
.reg-chip i{color:#A11D21;font-size:1.05rem;flex-shrink:0;}
.reg-chip-1{top:18%;right:2%;}
.reg-chip-2{bottom:20%;left:-4%;}
.reg-chip-2 small{display:block;font-weight:600;color:#475569;font-size:.78rem;}
.reg-mark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:150px;opacity:.95;}
.reg-mark img{width:100%;filter:brightness(0) invert(1);opacity:.9;}

/* ── Thẻ form phải ── */
.reg-card{background:#fff;border-radius:24px;padding:2.1rem 2.4rem 1.8rem;box-shadow:0 24px 70px rgba(15,23,42,.09);border:1px solid #f3e4e4;position:relative;z-index:2;animation:regUp .45s cubic-bezier(.4,0,.2,1) both;}
@keyframes regUp{from{opacity:0;transform:translateY(14px)}}
.reg-card h1{font-size:1.55rem;font-weight:800;color:#0f172a;margin:0 0 .35rem;letter-spacing:-.3px;}
.reg-card h1 span{color:#A11D21;}
.reg-card-sub{font-size:.88rem;color:#64748b;line-height:1.5;margin:0 0 1.35rem;}

.reg-roles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:1.2rem;}
.reg-role{cursor:pointer;border:1.5px solid #e5e7eb;border-radius:14px;padding:12px 14px;display:flex;align-items:center;gap:12px;background:#f8fafc;transition:all .18s;user-select:none;margin:0;}
.reg-role:hover{border-color:#fca5a5;background:#fff;}
.reg-role-ico{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0;transition:all .18s;}
.reg-role-ico.c{background:#fde3e3;color:#A11D21;}
.reg-role-ico.e{background:#dcfce7;color:#15803d;}
.reg-role b{display:block;font-size:.9rem;color:#1f2937;font-weight:800;line-height:1.2;}
.reg-role small{font-size:.72rem;color:#6b7280;}
.btn-check:checked+.reg-role{border-color:#A11D21;background:#fff5f5;box-shadow:0 0 0 3px rgba(161,29,33,.08);}
.btn-check:checked+.reg-role b{color:#A11D21;}
.btn-check:checked+.reg-role .reg-role-ico.c{background:#A11D21;color:#fff;}
.btn-check:checked+.reg-role .reg-role-ico.e{background:#15803d;color:#fff;}

.rf{margin-bottom:.9rem;position:relative;}
.rf-label{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
.rf label{font-size:.84rem;font-weight:600;color:#374151;margin:0;display:block;}
.rf label .req{color:#ef4444;}
.rf-switch{background:none;border:none;padding:0;font-size:.72rem;font-weight:700;color:#A11D21;cursor:pointer;}
.rf-switch:hover{text-decoration:underline;}
.rf-wrap{position:relative;}
.rf-wrap .fi{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#b0b5bf;font-size:.82rem;pointer-events:none;transition:color .2s;z-index:2;}
.rf-wrap .form-control{padding:.72rem .9rem .72rem 2.5rem;border:1.5px solid #e2e8f0;border-radius:11px;font-size:.9rem;background:#fff;color:#111827;transition:border-color .15s,box-shadow .15s;}
.rf-wrap .form-control::placeholder{color:#b8bec8;}
.rf-wrap .form-control:focus{border-color:#A11D21;box-shadow:0 0 0 3px rgba(161,29,33,.08);outline:none;}
.rf-wrap:focus-within .fi{color:#A11D21;}
.pw-t{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;color:#9ca3af;cursor:pointer;padding:4px 7px;border-radius:8px;transition:all .15s;z-index:2;font-size:.85rem;}
.pw-t:hover{color:#A11D21;background:#fff0f0;}
.rf-wrap .form-control.pw-in{padding-right:2.6rem;}
.pw-str{height:3px;border-radius:2px;background:#e5e7eb;margin-top:5px;overflow:hidden;}
.pw-str-fill{height:100%;border-radius:2px;width:0;transition:all .35s;}
.pw-str-fill.w{width:25%;background:#ef4444;}
.pw-str-fill.m{width:60%;background:#f59e0b;}
.pw-str-fill.s{width:100%;background:#22c55e;}
.rf-hint{font-size:.72rem;color:#9ca3af;margin-top:4px;}
.rf .text-danger{font-size:.72rem;display:block;margin-top:3px;}

.rt{display:flex;align-items:flex-start;gap:8px;margin:.2rem 0 1.1rem;}
.rt input{accent-color:#A11D21;width:16px;height:16px;margin-top:2px;flex-shrink:0;cursor:pointer;}
.rt label{font-size:.78rem;color:#4b5563;line-height:1.5;cursor:pointer;}
.rt a{color:#A11D21;font-weight:700;text-decoration:none;}
.rt a:hover{text-decoration:underline;}

.btn-reg-main{width:100%;border:none;color:#fff;font-weight:800;font-size:1rem;padding:.9rem 1rem;border-radius:13px;
  background:linear-gradient(90deg,#b3232a 0%,#A11D21 55%,#8a1418 100%);display:flex;align-items:center;justify-content:center;gap:12px;
  box-shadow:0 10px 24px rgba(161,29,33,.28);transition:transform .15s,box-shadow .15s;}
.btn-reg-main:hover{color:#fff;transform:translateY(-1px);box-shadow:0 14px 30px rgba(161,29,33,.36);}
.btn-reg-main i{font-size:.95rem;}

.reg-div{position:relative;text-align:center;margin:1.1rem 0 .95rem;}
.reg-div::before{content:'';position:absolute;top:50%;left:0;right:0;height:1px;background:#e5e7eb;}
.reg-div span{position:relative;background:#fff;padding:0 .9rem;font-size:.8rem;color:#9ca3af;}
.reg-social{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:1rem;}
.reg-social a{display:flex;align-items:center;justify-content:center;gap:9px;padding:.7rem;border-radius:12px;border:1.5px solid #e2e8f0;background:#fff;text-decoration:none;font-size:.9rem;font-weight:700;color:#1f2937;transition:all .18s;}
.reg-social a:hover{border-color:#cbd5e1;box-shadow:0 6px 16px rgba(15,23,42,.08);transform:translateY(-1px);color:#1f2937;}
.reg-social .fb{color:#1877F2;}
.reg-social .fb i{font-size:1.15rem;}
.reg-notice{background:#fffbeb;border:1px solid #fde68a;border-radius:12px;padding:12px 14px;display:flex;align-items:flex-start;gap:10px;margin-top:.2rem;}
.reg-notice i{color:#d97706;margin-top:2px;flex-shrink:0;}
.reg-notice div{font-size:.78rem;color:#92400e;line-height:1.5;}
.reg-login{text-align:center;font-size:.86rem;color:#4b5563;margin:.4rem 0 0;}
.reg-login a{color:#A11D21;font-weight:800;text-decoration:none;margin-left:4px;}
.reg-help{text-align:center;margin-top:1rem;padding-top:.9rem;border-top:1px solid #f1f5f9;font-size:.74rem;color:#6b7280;line-height:1.6;}
.reg-help a{color:#A11D21;font-weight:800;text-decoration:none;}

/* Hero rút gọn cho màn nhỏ (hero đầy đủ ẩn) */
.reg-hero-mini{display:none;text-align:center;margin-bottom:1.2rem;}
.reg-hero-mini .reg-badge{margin:0 auto .8rem;}
.reg-hero-mini .reg-title{font-size:2rem;margin-bottom:.4rem;}
.reg-hero-mini .reg-title span{display:inline;}
.reg-hero-mini .reg-sub{font-size:.9rem;margin:0 auto;}

@media(max-width:1399.98px){.reg-wrap{grid-template-columns:minmax(0,1fr) 490px;gap:1.5rem;}.reg-title{font-size:2.9rem;}.reg-art{width:52%;right:0;}.reg-feat b{font-size:.95rem;}.reg-stat b{font-size:1.4rem;}}
@media(max-width:1199.98px){.reg-art{display:none;}.reg-hero > .reg-badge, .reg-hero > .reg-title, .reg-hero > .reg-sub, .reg-hero > .reg-feats{max-width:none;}.reg-wrap{grid-template-columns:minmax(0,1fr) 470px;}.reg-title{font-size:2.7rem;white-space:normal;}.reg-stats{flex-wrap:wrap;}.reg-stat{white-space:normal;}}
@media(max-width:991.98px){
  .reg-page{padding:1.5rem 0 2.5rem;}
  .reg-wrap{grid-template-columns:1fr;max-width:560px;gap:0;}
  .reg-hero{display:none;}
  .reg-hero-mini{display:block;}
  .reg-card{padding:1.6rem 1.4rem 1.4rem;border-radius:18px;}
}
@media(max-width:575.98px){
  .reg-page{padding:1rem 0 2rem;}
  .reg-wrap{padding:0 .9rem;}
  .reg-card{padding:1.3rem 1.05rem 1.2rem;}
  .reg-card h1{font-size:1.3rem;}
  .reg-roles{gap:8px;}
  .reg-role{padding:10px;gap:8px;}
  .reg-role-ico{width:34px;height:34px;}
  .reg-social{grid-template-columns:1fr 1fr;gap:8px;}
  .reg-hero-mini .reg-title{font-size:1.7rem;}
}