#auth-gate {
  --av-vang: #e4c172;
  --av-vang-sang: #f6e2a4;
  --av-vang-toi: #9a6f2c;
  --av-ngoc: #9fd9bb;
  --av-chu: #efe3c4;
  --av-chu-mo: rgba(231, 218, 184, 0.72);
  position: absolute; inset: 0;
  z-index: 600;
  overflow: hidden;
  isolation: isolate;
  color: var(--av-chu);
  background: radial-gradient(ellipse at 50% 42%, #1c2b21 0%, #0b100c 68%, #070a08 100%);
}
#auth-gate.hidden { display: none; }
#auth-gate.busy { pointer-events: none; }
#auth-gate.busy .auth-box { opacity: 0.82; filter: saturate(0.85); }
#auth-scenery {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.auth-canh {
  position: absolute; inset: -3%;
  opacity: 0;
  transition: opacity 1400ms ease-in-out;
  will-change: opacity, transform;
  backface-visibility: hidden;
}
.auth-canh.is-on { opacity: 1; }
.auth-canh img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  -webkit-user-select: none; user-select: none; -webkit-user-drag: none;
}
#auth-scenery::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(rgba(4, 6, 5, 0.16), rgba(4, 6, 5, 0.16)),
    radial-gradient(ellipse 34% 58% at 50% 50%, rgba(4, 6, 5, 0.42), transparent 72%),
    linear-gradient(180deg, rgba(4, 6, 5, 0.55) 0%, transparent 22%, transparent 68%, rgba(4, 6, 5, 0.72) 100%),
    radial-gradient(ellipse at center, rgba(4, 6, 5, 0.12) 40%, rgba(4, 6, 5, 0.62) 100%);
}
.auth-suong {
  position: absolute; left: -20%; right: -20%; bottom: -8%; height: 52%;
  background:
    radial-gradient(38% 60% at 28% 82%, rgba(214, 226, 216, 0.12), transparent 70%),
    radial-gradient(34% 52% at 74% 88%, rgba(214, 226, 216, 0.10), transparent 70%),
    radial-gradient(26% 40% at 52% 96%, rgba(240, 222, 176, 0.07), transparent 70%);
  animation: auth-suong-troi 24s ease-in-out infinite alternate;
}
@keyframes auth-suong-troi {
  from { transform: translate3d(-5%, 0, 0); }
  to   { transform: translate3d(5%, -3%, 0); }
}
.auth-linh-khi i {
  position: absolute; bottom: -14px; left: var(--x);
  width: var(--s); height: var(--s);
  border-radius: 50%;
  background: radial-gradient(circle, #fffbe6 0%, rgba(246, 226, 164, 0.95) 32%, rgba(228, 193, 114, 0) 72%);
  opacity: 0;
  animation: auth-bay var(--d) linear var(--tre) infinite;
}
.auth-linh-khi i.ngoc {
  background: radial-gradient(circle, #f2fff8 0%, rgba(159, 227, 195, 0.95) 32%, rgba(122, 200, 160, 0) 72%);
}
@keyframes auth-bay {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  12%  { opacity: var(--o); }
  78%  { opacity: var(--o); }
  100% { transform: translate3d(var(--lech), -82vh, 0); opacity: 0; }
}
.auth-canh-ten {
  position: absolute; z-index: 1;
  left: max(28px, env(safe-area-inset-left));
  bottom: max(24px, env(safe-area-inset-bottom));
  margin: 0;
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-serif); font-size: 13px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(244, 228, 186, 0.88);
  text-shadow: 0 1px 2px #000, 0 0 14px rgba(0, 0, 0, 0.85);
  pointer-events: none;
  transition: opacity 500ms ease, transform 500ms ease;
}
.auth-canh-ten::before {
  content: "";
  width: 34px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--av-vang));
}
.auth-canh-ten.doi { opacity: 0; transform: translateY(5px); }
.auth-canh-ten:empty { display: none; }
.auth-khung {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  gap: 14px;
  overflow-x: hidden; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding:
    calc(max(18px, env(safe-area-inset-top)) + 52px)
    max(16px, env(safe-area-inset-right))
    max(18px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
}
.auth-khung > * { flex: none; }
.auth-box {
  position: relative;
  width: min(420px, 100%);
  margin-top: auto;
  padding: 62px 30px 24px;
  text-align: center;
  background:
    radial-gradient(120% 46% at 50% 0%, rgba(228, 193, 114, 0.14), transparent 62%),
    radial-gradient(90% 40% at 50% 100%, rgba(122, 200, 160, 0.07), transparent 70%),
    linear-gradient(180deg, rgba(26, 21, 14, 0.9), rgba(11, 9, 7, 0.93));
  border: 1px solid rgba(228, 193, 114, 0.55);
  border-radius: 14px;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.62),
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 0 46px rgba(228, 193, 114, 0.08),
    inset 0 0 0 5px rgba(8, 6, 4, 0.5),
    inset 0 0 0 6px rgba(228, 193, 114, 0.16),
    inset 0 1px 0 rgba(255, 240, 200, 0.1);
  -webkit-backdrop-filter: blur(7px) saturate(1.1);
  backdrop-filter: blur(7px) saturate(1.1);
  animation: auth-hien 700ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  transition: opacity 200ms ease, filter 200ms ease;
}
@keyframes auth-hien {
  from { opacity: 0; transform: translateY(16px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
.auth-goc {
  position: absolute; width: 30px; height: 30px;
  pointer-events: none;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='none'%3E%3Cpath d='M1.5 29V10Q1.5 1.5 10 1.5H29' stroke='%23e4c172' stroke-width='1.4'/%3E%3Cpath d='M6 29V13Q6 6 13 6H29' stroke='%23e4c172' stroke-opacity='.4'/%3E%3Cpath d='M10.5 6.8l3.7 3.7-3.7 3.7-3.7-3.7z' fill='%23f0d48a'/%3E%3C/svg%3E");
}
.auth-goc-tl { top: -1px; left: -1px; }
.auth-goc-tr { top: -1px; right: -1px; transform: scaleX(-1); }
.auth-goc-bl { bottom: -1px; left: -1px; transform: scaleY(-1); }
.auth-goc-br { bottom: -1px; right: -1px; transform: scale(-1, -1); }
.auth-an {
  position: absolute; left: 50%; top: -52px;
  width: 104px; height: 104px;
  transform: translateX(-50%);
  filter: drop-shadow(0 0 18px rgba(228, 193, 114, 0.38)) drop-shadow(0 8px 12px rgba(0, 0, 0, 0.65));
  pointer-events: none;
}
.auth-an svg { display: block; width: 100%; height: 100%; overflow: visible; }
.auth-an-quay {
  transform-box: fill-box; transform-origin: center;
  animation: auth-quay 80s linear infinite;
}
.auth-an-kiem { animation: auth-kiem-tho 4.2s ease-in-out infinite; }
@keyframes auth-quay { to { transform: rotate(360deg); } }
@keyframes auth-kiem-tho {
  0%, 100% { opacity: 0.88; }
  50%      { opacity: 1; filter: drop-shadow(0 0 3px rgba(255, 240, 196, 0.9)); }
}
#auth-title,
.auth-quen-tieu {
  margin: 0 0 6px;
  font-family: var(--font-serif); font-weight: 700;
  line-height: 1.12; letter-spacing: 0.04em;
  color: transparent;
  background-image:
    linear-gradient(105deg, transparent 42%, rgba(255, 252, 236, 0.9) 50%, transparent 58%),
    linear-gradient(180deg, #fff4cf 0%, #f0d48a 42%, #c49543 78%, #8f6627 100%);
  background-size: 300% 100%, 100% 100%;
  background-position: 100% 0, 0 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.8)) drop-shadow(0 0 16px rgba(228, 193, 114, 0.22));
}
#auth-title {
  font-size: clamp(27px, 6.6vw, 35px);
  animation: auth-chu-loe 7s ease-in-out 1.4s infinite;
}
.auth-quen-tieu { font-size: clamp(22px, 5.6vw, 27px); }
@keyframes auth-chu-loe {
  0%, 68% { background-position: 100% 0, 0 0; }
  100%    { background-position: 0% 0, 0 0; }
}
.auth-sub {
  margin: 0;
  color: var(--av-ngoc);
  font-size: 13px; line-height: 1.5; letter-spacing: 0.05em;
  text-wrap: balance;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}
.auth-hoa-van {
  display: flex; align-items: center; gap: 10px;
  width: 72%; margin: 14px auto 18px;
}
.auth-hoa-van::before,
.auth-hoa-van::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(228, 193, 114, 0.75));
}
.auth-hoa-van::after { transform: scaleX(-1); }
.auth-hoa-van i {
  flex: none; width: 7px; height: 7px;
  transform: rotate(45deg);
  background: var(--av-vang);
  box-shadow: 0 0 8px rgba(228, 193, 114, 0.75), 0 0 0 3px rgba(228, 193, 114, 0.14);
}
.auth-mat { animation: auth-lat 380ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes auth-lat {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: none; }
}
.auth-field { margin: 0 0 13px; text-align: left; }
.auth-nhan-hang {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.auth-nhan {
  display: inline-block; margin: 0 0 6px;
  color: #dcc89c;
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
}
.auth-o { position: relative; }
.auth-o-icon {
  position: absolute; left: 14px; top: 50%;
  width: 18px; height: 18px;
  transform: translateY(-50%);
  fill: none; stroke: var(--av-vang); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0.72;
  pointer-events: none;
  transition: opacity 180ms ease, stroke 180ms ease;
}
.auth-o input,
#auth-gate .auth-captcha-row input {
  display: block; width: 100%; box-sizing: border-box;
  min-height: 48px; padding: 12px 14px 12px 43px;
  font-family: var(--font-ui); font-size: 15px;
  color: #f4e9cd; caret-color: var(--av-vang-sang);
  background: rgba(5, 4, 3, 0.7);
  border: 1px solid rgba(228, 193, 114, 0.3);
  border-radius: 8px;
  outline: none;
  box-shadow: inset 0 2px 7px rgba(0, 0, 0, 0.5);
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
#auth-gate .auth-captcha-row input { padding-left: 14px; }
.auth-o-mat-khau input { padding-right: 48px; }
.auth-o input::placeholder,
#auth-gate .auth-captcha-row input::placeholder { color: rgba(217, 207, 183, 0.4); }
.auth-o input:hover { border-color: rgba(228, 193, 114, 0.5); }
.auth-o input:focus,
#auth-gate .auth-captcha-row input:focus {
  border-color: var(--av-vang);
  background: rgba(5, 4, 3, 0.86);
  box-shadow: inset 0 2px 7px rgba(0, 0, 0, 0.5), 0 0 0 3px rgba(228, 193, 114, 0.15), 0 0 20px rgba(228, 193, 114, 0.12);
}
.auth-o:focus-within .auth-o-icon { opacity: 1; stroke: var(--av-vang-sang); }
#auth-gate input:-webkit-autofill,
#auth-gate input:-webkit-autofill:hover,
#auth-gate input:-webkit-autofill:focus {
  -webkit-text-fill-color: #f4e9cd;
  -webkit-box-shadow: inset 0 0 0 100px #0b0906;
  transition: background-color 9999s ease-out 0s;
}
.auth-xem {
  position: absolute; right: 5px; top: 50%;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  transform: translateY(-50%);
  padding: 0; margin: 0;
  color: rgba(228, 193, 114, 0.75);
  background: none; border: 0; border-radius: 6px;
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease;
}
.auth-xem svg {
  width: 19px; height: 19px;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.auth-xem .gach { display: none; }
.auth-xem[aria-pressed="true"] .gach { display: inline; }
.auth-xem:hover { color: var(--av-vang-sang); background: rgba(228, 193, 114, 0.08); }
.auth-xem:focus-visible { outline: 2px solid var(--av-vang); outline-offset: -2px; }
.auth-quen-mo {
  margin: 0 0 6px; padding: 2px 0;
  font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
  color: #d6b467;
  background: none; border: 0;
  cursor: pointer;
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}
.auth-quen-mo:hover { color: var(--av-vang-sang); text-decoration-color: currentColor; }
.auth-quen-mo:focus-visible { outline: 2px solid var(--av-vang); outline-offset: 2px; border-radius: 3px; }
#auth-gate.dang-ky .auth-quen-mo { visibility: hidden; }
#auth-gate .auth-captcha-anh { border-radius: 8px; }
.auth-terms-check {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 4px 0 6px;
  text-align: left;
  color: var(--av-chu-mo);
  font-size: 11.5px; line-height: 1.5;
  cursor: pointer;
}
.auth-terms-check input {
  -webkit-appearance: none; appearance: none;
  flex: none;
  display: grid; place-items: center;
  width: 18px; height: 18px; margin: 1px 0 0;
  background: rgba(5, 4, 3, 0.72);
  border: 1px solid rgba(228, 193, 114, 0.62);
  border-radius: 4px;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.auth-terms-check input::after {
  content: "";
  width: 9px; height: 5px; margin-top: -2px;
  border-left: 2px solid #20160a; border-bottom: 2px solid #20160a;
  transform: rotate(-45deg) scale(0);
  transition: transform 140ms ease;
}
.auth-terms-check input:checked {
  background: linear-gradient(180deg, var(--av-vang-sang), #c49543);
  border-color: var(--av-vang-sang);
  box-shadow: 0 0 10px rgba(228, 193, 114, 0.35);
}
.auth-terms-check input:checked::after { transform: rotate(-45deg) scale(1); }
.auth-terms-check input:focus-visible { outline: 2px solid var(--av-vang); outline-offset: 2px; }
.auth-terms-check a { color: var(--av-vang); text-underline-offset: 2px; }
.auth-terms-details {
  margin: 0 0 10px; padding-left: 28px;
  text-align: left;
  color: rgba(231, 218, 184, 0.62);
  font-size: 10.5px; line-height: 1.5;
}
.auth-terms-details summary {
  color: #cdb88c;
  cursor: pointer;
  width: fit-content;
}
.auth-terms-details summary:hover { color: var(--av-vang-sang); }
.auth-terms-details p { margin: 6px 0 0; }
.auth-msg {
  min-height: 18px;
  margin: 2px 0 10px;
  font-size: 12.5px; line-height: 1.45;
  color: var(--av-ngoc);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}
.auth-msg.warn { color: #f2a873; }
.auth-msg.ok { color: #a8f0cb; }
.auth-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.auth-btn {
  position: relative; overflow: hidden;
  width: 100%;
  min-height: 50px; padding: 11px 8px;
  font-family: var(--font-serif); font-size: 15px; font-weight: 700; letter-spacing: 0.1em;
  color: #e6d3a3;
  background: linear-gradient(180deg, rgba(38, 31, 21, 0.92), rgba(15, 12, 8, 0.92));
  border: 1px solid rgba(228, 193, 114, 0.42);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 240, 200, 0.06), 0 4px 12px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: transform 160ms ease, filter 180ms ease, background 180ms ease,
    color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.auth-btn.is-active {
  color: #23170a;
  background: linear-gradient(180deg, #f8e6ad 0%, #e3c16f 46%, #b98a3c 100%);
  border-color: #f6dd99;
  text-shadow: 0 1px 0 rgba(255, 244, 210, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 252, 230, 0.75),
    inset 0 -2px 0 rgba(120, 80, 25, 0.45),
    0 6px 20px rgba(228, 193, 114, 0.26);
}
.auth-btn.is-active::after {
  content: "";
  position: absolute; top: 0; bottom: 0; left: -60%;
  width: 42%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  transform: skewX(-20deg);
  animation: auth-loe 4.8s ease-in-out 1s infinite;
  pointer-events: none;
}
@keyframes auth-loe {
  0%, 62% { left: -60%; }
  100%    { left: 130%; }
}
.auth-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.auth-btn:not(.is-active):hover { color: var(--av-vang-sang); border-color: var(--av-vang); }
.auth-btn:active { transform: translateY(1px); }
.auth-btn:focus-visible { outline: 2px solid var(--av-vang); outline-offset: 3px; }
.auth-btn:disabled { opacity: 0.5; filter: saturate(0.55); cursor: not-allowed; transform: none; }
.auth-btn:disabled::after { display: none; }
.auth-btn-rong { margin-top: 4px; }
.auth-hoac {
  display: flex; align-items: center; gap: 12px;
  margin: 14px 0 0;
  color: rgba(231, 218, 184, 0.5);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
}
.auth-hoac::before,
.auth-hoac::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(228, 193, 114, 0.3));
}
.auth-hoac::after { transform: scaleX(-1); }
.auth-guest {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; min-height: 46px;
  margin: 12px 0 0; padding: 10px 14px;
  font-family: var(--font-ui); font-size: 14px; font-weight: 600; letter-spacing: 0.04em;
  color: #cdeedd;
  background: linear-gradient(180deg, rgba(26, 58, 44, 0.82), rgba(10, 28, 21, 0.86));
  border: 1px solid rgba(122, 200, 160, 0.5);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(200, 255, 225, 0.1), 0 4px 14px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: filter 180ms ease, border-color 180ms ease, transform 160ms ease, box-shadow 180ms ease;
}
.auth-guest::before {
  content: "";
  flex: none; width: 17px; height: 17px;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fe3c3' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M13 2.5L4.5 13.5h6.5l-1 8 8.5-11h-6.5z'/%3E%3C/svg%3E");
}
.auth-guest:hover {
  filter: brightness(1.12);
  border-color: #9fe3c3;
  box-shadow: inset 0 1px 0 rgba(200, 255, 225, 0.14), 0 0 18px rgba(122, 200, 160, 0.22);
  transform: translateY(-1px);
}
.auth-guest:active { transform: translateY(1px); }
.auth-guest:focus-visible { outline: 2px solid #9fe3c3; outline-offset: 3px; }
.auth-guest:disabled { opacity: 0.55; cursor: wait; }
.auth-guest-note {
  margin: 8px 0 0;
  color: rgba(231, 218, 184, 0.6);
  font-size: 11px; line-height: 1.45; letter-spacing: 0.02em;
}
#auth-gate.gmt .auth-mat-vao > .auth-cot { display: none; }
#auth-gate.gmt .auth-box { width: min(440px, 100%); }
.auth-gmt {
  width: min(360px, 100%);
  margin: 0 auto;
  text-align: left;
}
.auth-gmt .auth-msg { text-align: center; margin: 0 0 10px; }
.auth-gmt-nut {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 14px;
  width: 100%; min-height: 62px;
  padding: 10px 40px 10px 12px;
  text-align: left;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 160ms ease, filter 180ms ease, box-shadow 180ms ease;
}
.auth-gmt-nut::after {
  content: "";
  position: absolute; right: 16px; top: 50%;
  width: 8px; height: 8px;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
  opacity: 0.7;
  transition: right 180ms ease, opacity 180ms ease;
}
.auth-gmt-nut:hover { transform: translateY(-1px); filter: brightness(1.08); }
.auth-gmt-nut:hover::after { right: 13px; opacity: 1; }
.auth-gmt-nut:active { transform: translateY(1px); }
.auth-gmt-nut:disabled { cursor: wait; filter: saturate(0.6) brightness(0.85); transform: none; }
.auth-gmt-icon {
  flex: none;
  display: grid; place-items: center;
  width: 40px; height: 40px;
}
.auth-gmt-icon svg { display: block; width: 100%; height: 100%; }
.auth-gmt-chu { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.auth-gmt-chu b {
  font-family: var(--font-serif); font-size: 16px; font-weight: 700; letter-spacing: 0.05em;
  line-height: 1.2;
}
.auth-gmt-chu small {
  font-family: var(--font-ui); font-size: 11.5px; font-weight: 500; line-height: 1.35;
  opacity: 0.78;
  text-wrap: balance;
}
.auth-gmt-chinh {
  color: #23170a;
  background: linear-gradient(180deg, #f8e6ad 0%, #e3c16f 46%, #b98a3c 100%);
  border: 1px solid #f6dd99;
  box-shadow:
    inset 0 1px 0 rgba(255, 252, 230, 0.75),
    inset 0 -2px 0 rgba(120, 80, 25, 0.45),
    0 8px 24px rgba(228, 193, 114, 0.28);
}
.auth-gmt-chinh .auth-gmt-chu b { text-shadow: 0 1px 0 rgba(255, 244, 210, 0.55); }
.auth-gmt-chinh .auth-gmt-icon {
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #3a2b14, #1a1208);
  box-shadow: inset 0 0 0 1px rgba(255, 236, 180, 0.45), 0 2px 6px rgba(60, 38, 8, 0.45);
}
.auth-gmt-chinh .auth-gmt-icon svg {
  width: 20px; height: 20px;
  fill: none; stroke: #f3d98f; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.auth-gmt-chinh::before {
  content: "";
  position: absolute; top: 0; bottom: 0; left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-20deg);
  animation: auth-loe 4.8s ease-in-out 1s infinite;
  pointer-events: none;
}
.auth-gmt-chinh:focus-visible { outline: 2px solid var(--av-vang-sang); outline-offset: 3px; }
.auth-gmt-gig {
  color: #f2f6ff;
  background:
    linear-gradient(180deg, #11131b, #05060a) padding-box,
    linear-gradient(110deg, #00F5A0, #00D9F5 35%, #4A6BFF 65%, #7A5CFF) border-box;
  border: 1px solid transparent;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.5);
}
.auth-gmt-gig .auth-gmt-icon { border-radius: 10px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08); }
.auth-gmt-gig .auth-gmt-chu small { color: #a9c6dd; opacity: 1; }
.auth-gmt-gig:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45), 0 0 22px rgba(0, 217, 245, 0.28);
}
.auth-gmt-gig:focus-visible { outline: 2px solid #00D9F5; outline-offset: 3px; }
.auth-gmt .auth-hoac { margin: 14px 0; }
.auth-gmt .auth-terms-check { margin: 16px 0 4px; }
.auth-gmt .auth-terms-details { margin-bottom: 0; }
.auth-ve {
  position: absolute; left: 16px; top: 16px;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 10px 6px 6px;
  font-family: var(--font-ui); font-size: 12.5px; font-weight: 600;
  color: #d6b467;
  background: rgba(5, 4, 3, 0.5);
  border: 1px solid rgba(228, 193, 114, 0.3);
  border-radius: 999px;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}
.auth-ve svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.auth-ve:hover { color: var(--av-vang-sang); border-color: var(--av-vang); background: rgba(228, 193, 114, 0.08); }
.auth-ve:focus-visible { outline: 2px solid var(--av-vang); outline-offset: 2px; }
.auth-quen-captcha {
  display: flex; justify-content: center;
  margin: 0;
}
.auth-quen-captcha.co { min-height: 65px; margin: 2px 0 12px; }
.auth-lien {
  display: inline-block;
  margin: 12px auto 0; padding: 4px 6px;
  font-family: var(--font-ui); font-size: 12.5px; font-weight: 600;
  color: #d6b467;
  background: none; border: 0;
  cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.auth-lien:hover { color: var(--av-vang-sang); }
.auth-lien:focus-visible { outline: 2px solid var(--av-vang); outline-offset: 2px; border-radius: 3px; }
.auth-mat-quen .auth-msg { margin: 12px 0 0; }
.auth-duoi {
  display: flex; gap: 10px;
  width: min(420px, 100%);
}
.auth-duoi > nav { flex: 1 1 0; min-width: 0; display: flex; }
.auth-tai.hidden { display: none; }
.auth-tai-nut {
  position: relative;
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 8px 12px; box-sizing: border-box;
  font-family: var(--font-ui); font-size: 14px; font-weight: 600;
  color: #e7dabb; text-decoration: none;
  background: rgba(10, 8, 6, 0.72);
  border: 1px solid rgba(228, 193, 114, 0.32); border-radius: 8px;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: transform 160ms ease, border-color 180ms ease, background 180ms ease, color 180ms ease;
}
.auth-tai-nut svg {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: var(--av-vang); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.auth-zalo-nut svg { stroke: #75b8ef; }
.auth-tai-nut:hover { color: #fff3d8; border-color: var(--av-vang); background: rgba(38, 29, 20, 0.88); transform: translateY(-1px); }
.auth-zalo-nut:hover { border-color: #75b8ef; }
.auth-zalo { position: relative; flex: 1; display: flex; }
.auth-zalo > summary { list-style: none; cursor: pointer; user-select: none; }
.auth-zalo > summary::-webkit-details-marker { display: none; }
.auth-zalo[open] > summary { border-color: #75b8ef; }
.auth-zalo-ds {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 5;
  display: flex; flex-direction: column; gap: 4px; padding: 6px;
  background: rgba(10, 8, 6, 0.94);
  border: 1px solid rgba(117, 184, 239, 0.45); border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}
.auth-zalo-ds a {
  display: flex; align-items: center; justify-content: center;
  min-height: 40px; border-radius: 6px;
  font-family: var(--font-ui); font-size: 14px; font-weight: 600;
  color: #e7dabb; text-decoration: none;
  background: rgba(117, 184, 239, 0.08);
}
.auth-zalo-ds a:hover { color: #fff3d8; background: rgba(117, 184, 239, 0.22); }
.auth-zalo-ds a:focus-visible { outline: 2px solid #75b8ef; outline-offset: 1px; }
.auth-tai-nut:focus-visible { outline: 2px solid var(--av-vang); outline-offset: 3px; }
.auth-tai-nut[aria-disabled="true"] { opacity: 0.5; cursor: default; pointer-events: none; }
.auth-tai-nut small {
  position: absolute; top: -8px; right: 8px; padding: 1px 6px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--ink); background: var(--parchment-2); border-radius: 8px;
}
#auth-gate .auth-legal { margin-bottom: auto; gap: 2px 18px; }
#auth-gate .auth-legal a { color: rgba(236, 224, 196, 0.72); text-shadow: 0 1px 2px #000; }
#auth-gate .auth-legal a:hover { color: #fff3d8; }
@media (max-width: 899px), (max-height: 600px) {
  .auth-canh-ten { display: none; }
}
@media (max-width: 420px) {
  .auth-khung { padding-top: calc(max(16px, env(safe-area-inset-top)) + 46px); }
  .auth-box { padding: 54px 18px 20px; }
  .auth-an { width: 92px; height: 92px; top: -46px; }
  .auth-ve { left: 12px; top: 12px; }
  .auth-actions { gap: 8px; }
  .auth-tai-nut { font-size: 13px; gap: 6px; }
  .auth-goc { width: 24px; height: 24px; }
  .auth-gmt-nut { gap: 11px; padding-right: 30px; }
  .auth-gmt-nut::after { right: 13px; }
  .auth-gmt-icon { width: 36px; height: 36px; }
  .auth-gmt-chu b { font-size: 15px; letter-spacing: 0.03em; text-wrap: balance; }
  .auth-gmt-chu small { font-size: 11px; }
}
@media (max-height: 860px) {
  .auth-khung { gap: 10px; padding-top: calc(max(14px, env(safe-area-inset-top)) + 44px); }
  .auth-box { padding: 50px 28px 18px; }
  .auth-an { width: 88px; height: 88px; top: -44px; }
  #auth-title { font-size: clamp(26px, 6.4vw, 31px); }
  .auth-hoa-van { margin: 10px auto 14px; }
  .auth-field { margin-bottom: 10px; }
  .auth-o input,
  #auth-gate .auth-captcha-row input { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
  .auth-terms-details { margin-bottom: 8px; }
  .auth-msg { min-height: 16px; margin-bottom: 8px; }
  .auth-btn { min-height: 46px; padding-block: 9px; }
  .auth-hoac { margin-top: 10px; }
  .auth-guest { min-height: 42px; margin-top: 10px; padding-block: 8px; }
  .auth-guest-note { margin-top: 6px; }
  .auth-tai-nut { min-height: 40px; }
}
@media (orientation: landscape) and (max-height: 760px) {
  .auth-khung { padding-top: calc(max(14px, env(safe-area-inset-top)) + 36px); }
  .auth-box { width: min(780px, 100%); padding: 42px 30px 16px; }
  .auth-an { width: 72px; height: 72px; top: -36px; }
  .auth-mat-vao {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 30px;
    align-items: start;
  }
  .auth-mat-vao > h1,
  .auth-mat-vao > .auth-sub,
  .auth-mat-vao > .auth-hoa-van { grid-column: 1 / -1; }
  .auth-mat-vao > .auth-cot:last-child { display: flex; flex-direction: column; padding-top: 22px; }
  .auth-mat-vao > .auth-cot:last-child .auth-msg { order: 9; margin: 8px 0 0; }
  .auth-mat-quen { width: min(420px, 100%); margin: 0 auto; }
  .auth-duoi { width: min(780px, 100%); }
  #auth-gate.gmt .auth-box { width: min(680px, 100%); }
  #auth-gate.gmt .auth-mat-vao { display: block; }
  #auth-gate.gmt .auth-duoi { width: min(680px, 100%); }
  .auth-gmt {
    width: 100%;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 12px;
  }
  .auth-gmt > :not(.auth-gmt-nut) { grid-column: 1 / -1; }
  .auth-gmt > .auth-hoac { display: none; }
  .auth-gmt .auth-terms-check { margin-top: 12px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .auth-khung {
    gap: 8px;
    padding-top: calc(max(8px, env(safe-area-inset-top)) + 26px);
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
  .auth-box { width: min(760px, 100%); padding: 30px 24px 12px; }
  .auth-an { width: 56px; height: 56px; top: -28px; }
  .auth-goc { width: 22px; height: 22px; }
  #auth-title { font-size: 22px; margin-bottom: 2px; }
  .auth-quen-tieu { font-size: 20px; margin-bottom: 2px; }
  .auth-sub { font-size: 12px; }
  .auth-hoa-van { margin: 6px auto 10px; }
  .auth-field { margin-bottom: 8px; }
  .auth-nhan { margin-bottom: 4px; }
  .auth-quen-mo { margin-bottom: 4px; }
  .auth-o input,
  #auth-gate .auth-captcha-row input { min-height: 40px; padding-top: 8px; padding-bottom: 8px; }
  .auth-terms-details { margin-bottom: 4px; }
  .auth-mat-vao > .auth-cot:last-child { padding-top: 20px; }
  .auth-btn { min-height: 42px; padding-block: 8px; }
  .auth-hoac { margin-top: 8px; }
  .auth-guest { min-height: 40px; margin-top: 8px; padding-block: 8px; }
  .auth-guest-note { margin-top: 5px; }
  .auth-ve { top: 10px; left: 12px; }
  .auth-duoi { width: min(760px, 100%); }
  .auth-tai-nut { min-height: 38px; }
  #auth-gate .auth-legal a { padding: 3px 2px; }
  .auth-gmt-nut { min-height: 52px; padding-block: 7px; gap: 10px; }
  .auth-gmt-icon { width: 34px; height: 34px; }
  .auth-gmt .auth-terms-check { margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-linh-khi, .auth-suong { display: none; }
  .auth-an-quay, .auth-an-kiem, #auth-title, .auth-btn.is-active::after,
  .auth-gmt-chinh::before, .auth-box, .auth-mat { animation: none; }
}