@font-face {
  font-family: "Anuphan";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/anuphan/anuphan-thai-400-normal.woff2) format("woff2");
  unicode-range:
    U+02D7,
    U+0303,
    U+0331,
    U+0E01-0E5B,
    U+200C-200D,
    U+25CC;
}
@font-face {
  font-family: "Anuphan";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/anuphan/anuphan-thai-500-normal.woff2) format("woff2");
  unicode-range:
    U+02D7,
    U+0303,
    U+0331,
    U+0E01-0E5B,
    U+200C-200D,
    U+25CC;
}
@font-face {
  font-family: "Anuphan";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/anuphan/anuphan-thai-700-normal.woff2) format("woff2");
  unicode-range:
    U+02D7,
    U+0303,
    U+0331,
    U+0E01-0E5B,
    U+200C-200D,
    U+25CC;
}
@font-face {
  font-family: "Anuphan";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/anuphan/anuphan-vietnamese-400-normal.woff2) format("woff2");
  unicode-range:
    U+0102-0103,
    U+0110-0111,
    U+0128-0129,
    U+0168-0169,
    U+01A0-01A1,
    U+01AF-01B0,
    U+0300-0301,
    U+0303-0304,
    U+0308-0309,
    U+0323,
    U+0329,
    U+1EA0-1EF9,
    U+20AB;
}
@font-face {
  font-family: "Anuphan";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/anuphan/anuphan-vietnamese-500-normal.woff2) format("woff2");
  unicode-range:
    U+0102-0103,
    U+0110-0111,
    U+0128-0129,
    U+0168-0169,
    U+01A0-01A1,
    U+01AF-01B0,
    U+0300-0301,
    U+0303-0304,
    U+0308-0309,
    U+0323,
    U+0329,
    U+1EA0-1EF9,
    U+20AB;
}
@font-face {
  font-family: "Anuphan";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/anuphan/anuphan-vietnamese-700-normal.woff2) format("woff2");
  unicode-range:
    U+0102-0103,
    U+0110-0111,
    U+0128-0129,
    U+0168-0169,
    U+01A0-01A1,
    U+01AF-01B0,
    U+0300-0301,
    U+0303-0304,
    U+0308-0309,
    U+0323,
    U+0329,
    U+1EA0-1EF9,
    U+20AB;
}
@font-face {
  font-family: "Anuphan";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/anuphan/anuphan-latin-ext-400-normal.woff2) format("woff2");
  unicode-range:
    U+0100-02BA,
    U+02BD-02C5,
    U+02C7-02CC,
    U+02CE-02D7,
    U+02DD-02FF,
    U+0304,
    U+0308,
    U+0329,
    U+1D00-1DBF,
    U+1E00-1E9F,
    U+1EF2-1EFF,
    U+2020,
    U+20A0-20AB,
    U+20AD-20C0,
    U+2113,
    U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: "Anuphan";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/anuphan/anuphan-latin-ext-500-normal.woff2) format("woff2");
  unicode-range:
    U+0100-02BA,
    U+02BD-02C5,
    U+02C7-02CC,
    U+02CE-02D7,
    U+02DD-02FF,
    U+0304,
    U+0308,
    U+0329,
    U+1D00-1DBF,
    U+1E00-1E9F,
    U+1EF2-1EFF,
    U+2020,
    U+20A0-20AB,
    U+20AD-20C0,
    U+2113,
    U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: "Anuphan";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/anuphan/anuphan-latin-ext-700-normal.woff2) format("woff2");
  unicode-range:
    U+0100-02BA,
    U+02BD-02C5,
    U+02C7-02CC,
    U+02CE-02D7,
    U+02DD-02FF,
    U+0304,
    U+0308,
    U+0329,
    U+1D00-1DBF,
    U+1E00-1E9F,
    U+1EF2-1EFF,
    U+2020,
    U+20A0-20AB,
    U+20AD-20C0,
    U+2113,
    U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: "Anuphan";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/anuphan/anuphan-latin-400-normal.woff2) format("woff2");
  unicode-range:
    U+0000-00FF,
    U+0131,
    U+0152-0153,
    U+02BB-02BC,
    U+02C6,
    U+02DA,
    U+02DC,
    U+0304,
    U+0308,
    U+0329,
    U+2000-206F,
    U+20AC,
    U+2122,
    U+2191,
    U+2193,
    U+2212,
    U+2215,
    U+FEFF,
    U+FFFD;
}
@font-face {
  font-family: "Anuphan";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/anuphan/anuphan-latin-500-normal.woff2) format("woff2");
  unicode-range:
    U+0000-00FF,
    U+0131,
    U+0152-0153,
    U+02BB-02BC,
    U+02C6,
    U+02DA,
    U+02DC,
    U+0304,
    U+0308,
    U+0329,
    U+2000-206F,
    U+20AC,
    U+2122,
    U+2191,
    U+2193,
    U+2212,
    U+2215,
    U+FEFF,
    U+FFFD;
}
@font-face {
  font-family: "Anuphan";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/anuphan/anuphan-latin-700-normal.woff2) format("woff2");
  unicode-range:
    U+0000-00FF,
    U+0131,
    U+0152-0153,
    U+02BB-02BC,
    U+02C6,
    U+02DA,
    U+02DC,
    U+0304,
    U+0308,
    U+0329,
    U+2000-206F,
    U+20AC,
    U+2122,
    U+2191,
    U+2193,
    U+2212,
    U+2215,
    U+FEFF,
    U+FFFD;
}
:root {
  --troi-tren: #28497D;
  --troi-giua: #60819B;
  --troi-duoi: #C2D2E6;
  --troi-am: #E4EBFB;
  --giay: #FFFFFF;
  --giay-dam: #F2F6FC;
  --giay-tham: #E2EAF5;
  --kim: #3E6FA8;
  --kim-sang: #A9C6E4;
  --kim-tham: #1D3760;
  --vien: #DCE5F0;
  --vien-dam: #A9C0DA;
  --cam-sang: #4E86C4;
  --cam: #2B5B95;
  --cam-tham: #17375F;
  --luc-sang: #92D96C;
  --luc: #56A63C;
  --luc-tham: #3E7F2A;
  --luc-nhat: #ECF7E3;
  --do: #1D3760;
  --do-tham: #112742;
  --do-sang: #3467A5;
  --chu: #16283F;
  --chu-mo: #536E8C;
  --chu-nhat: #7E93AC;
  --chu-sang: #EEF3F9;
  --ok: #2E9E5B;
  --ok-nhat: #E7F6ED;
  --loi: #DC4437;
  --loi-nhat: #FDECEA;
  --lam: #3A86C8;
  --lam-nhat: #E6F1FA;
  --bo-goc: 18px;
  --bo-goc-nho: 12px;
  --bong: 0 8px 24px rgba(52, 74, 96, .16);
  --bong-nho: 0 2px 8px rgba(52, 74, 96, .12);
  --bong-vang: 0 3px 0 var(--cam-tham), 0 8px 18px rgba(23, 55, 95, .38);
  --font:
    "Anuphan",
    "Segoe UI",
    system-ui,
    -apple-system,
    "Noto Sans",
    "Noto Sans Thai",
    "Noto Sans KR",
    "Helvetica Neue",
    Arial,
    sans-serif;
  --rong: 520px;
}
* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--chu);
  -webkit-text-size-adjust: 100%;
  background:
    radial-gradient(
      120% 60% at 18% 8%,
      rgba(255, 255, 255, .85),
      rgba(255, 255, 255, 0) 60%),
    radial-gradient(
      100% 50% at 82% 2%,
      rgba(255, 255, 255, .65),
      rgba(255, 255, 255, 0) 55%),
    linear-gradient(
      180deg,
      var(--troi-tren) 0%,
      var(--troi-giua) 32%,
      var(--troi-duoi) 62%,
      var(--troi-am) 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}
.wrap {
  width: 100%;
  max-width: var(--rong);
  margin: 0 auto;
  padding: 0 14px;
}
.main {
  padding: 14px 0 96px;
  min-height: 60vh;
}
@media (min-width: 1024px) {
  .main > .wrap.rong {
    max-width: 1040px;
  }
}
.grid-2 > .card {
  align-self: start;
}
.foot {
  padding: 18px 0 96px;
  text-align: center;
  font-size: 12px;
  line-height: 1.7;
  color: #5C7A8C;
}
h1,
h2,
h3 {
  margin: 0;
  font-weight: 800;
  letter-spacing: .01em;
}
h1 {
  font-size: 21px;
}
h2 {
  font-size: 16px;
}
h3 {
  font-size: 15px;
}
a {
  color: var(--do);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
.small {
  font-size: 12.5px;
  line-height: 1.6;
}
.muted {
  color: var(--chu-mo);
}
.center {
  text-align: center;
}
.mt-8 {
  margin-top: 8px;
}
.mt-16 {
  margin-top: 16px;
}
.mt-24 {
  margin-top: 24px;
}
.mb-0 {
  margin-bottom: 0;
}
.row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.topbar-spacer {
  flex: 1;
}
.stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.grid {
  display: grid;
  gap: 10px;
}
.grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
}
.grid-auto {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
}
.num,
.money,
.data {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.money {
  font-weight: 800;
}
.gain,
.plus {
  color: var(--ok);
  font-weight: 700;
}
.minus {
  color: var(--loi);
  font-weight: 700;
}
.was {
  color: var(--chu-nhat);
  text-decoration: line-through;
}
.org {
  color: var(--do);
  font-weight: 700;
}
.w3 {
  min-width: 3ch;
  display: inline-block;
}
.who {
  font-weight: 700;
}
.k {
  color: var(--chu-mo);
}
.v {
  font-weight: 700;
}
.sub {
  color: var(--chu-mo);
  font-size: 12.5px;
  font-weight: 600;
}
.hint {
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--chu-mo);
}
.empty {
  padding: 26px 14px;
  text-align: center;
  color: var(--chu-mo);
  font-size: 13.5px;
}
.card {
  position: relative;
  margin-bottom: 14px;
  background: var(--giay);
  border: 2px solid var(--vien-dam);
  border-radius: var(--bo-goc);
  box-shadow: var(--bong);
  overflow: hidden;
}
.card::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: calc(var(--bo-goc) - 5px);
  pointer-events: none;
}
.card-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 15px;
  background:
    linear-gradient(
      180deg,
      var(--giay-tham),
      var(--giay-dam));
  border-bottom: 1px solid var(--vien);
}
.card-head h2 {
  color: var(--do);
  font-size: 15px;
}
.card-head h2::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 15px;
  margin-right: 8px;
  vertical-align: -2px;
  border-radius: 2px;
  background:
    linear-gradient(
      180deg,
      var(--kim),
      var(--kim-tham));
}
.card-body {
  padding: 15px;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--chu);
  background: var(--giay-dam);
  cursor: pointer;
  transition:
    transform .06s ease,
    filter .15s ease,
    box-shadow .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active {
  transform: translateY(2px);
}
.btn:disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}
.btn-block {
  display: flex;
  width: 100%;
}
.btn-sm {
  padding: 8px 14px;
  font-size: 13px;
}
.btn-primary {
  color: #fff;
  background:
    linear-gradient(
      180deg,
      var(--cam-sang) 0%,
      var(--cam) 55%,
      var(--cam-tham) 100%);
  box-shadow: var(--bong-vang);
  text-shadow: 0 1px 2px rgba(39, 70, 111, .5);
}
.btn-primary:hover:not(:disabled) {
  filter: brightness(1.05);
}
.btn-primary:active:not(:disabled) {
  box-shadow: 0 1px 0 var(--cam-tham), 0 4px 10px rgba(70, 113, 170, .3);
}
.btn-green,
.btn-ok {
  color: #fff;
  background:
    linear-gradient(
      180deg,
      var(--luc-sang),
      var(--luc) 60%,
      var(--luc-tham));
  box-shadow: 0 3px 0 var(--luc-tham), 0 8px 18px rgba(62, 127, 42, .3);
  text-shadow: 0 1px 2px rgba(30, 80, 20, .5);
}
.btn-red {
  color: #fff;
  background:
    linear-gradient(
      180deg,
      #F0675B,
      var(--loi) 55%,
      #A9281E);
  box-shadow: 0 3px 0 #8A2018, 0 8px 18px rgba(169, 40, 30, .3);
  text-shadow: 0 1px 2px rgba(90, 15, 10, .5);
}
.btn-green:hover:not(:disabled),
.btn-red:hover:not(:disabled) {
  filter: brightness(1.05);
}
.btn-ghost {
  color: var(--do);
  background: rgba(255, 255, 255, .85);
  border: 1.5px solid var(--vien-dam);
  box-shadow: var(--bong-nho);
}
.field {
  margin-bottom: 14px;
}
.field label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--chu-mo);
}
.picks .pick,
.denoms .denom,
.pays .pay {
  display: flex;
}
.input,
select.input,
textarea.input {
  display: block;
  width: 100%;
  padding: 13px 14px;
  font-family: inherit;
  font-size: 15px;
  color: var(--chu);
  background: var(--giay-dam);
  border: 1.5px solid var(--vien);
  border-radius: var(--bo-goc-nho);
  outline: none;
  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    background .15s ease;
}
.input::placeholder {
  color: var(--chu-nhat);
}
.input:focus {
  background: #fff;
  border-color: var(--kim);
  box-shadow: 0 0 0 3px rgba(127, 160, 203, .3);
}
.input.err {
  border-color: var(--loi);
  background: var(--loi-nhat);
}
.err-msg {
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--loi);
}
.field-icon {
  position: relative;
}
.field-icon .input {
  padding-left: 44px;
}
.field-icon > svg {
  position: absolute;
  left: 14px;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  color: var(--chu-nhat);
  pointer-events: none;
}
.eye {
  position: absolute;
  right: 8px;
  top: 50%;
  width: 34px;
  height: 34px;
  margin-top: -17px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  color: var(--chu-nhat);
  cursor: pointer;
}
.eye svg {
  width: 19px;
  height: 19px;
}
.check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--chu-mo);
  cursor: pointer;
  user-select: none;
}
.check input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.check .box {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  border: 1.5px solid var(--vien-dam);
  border-radius: 5px;
  background: #fff;
  position: relative;
}
.check input:checked + .box {
  background:
    linear-gradient(
      180deg,
      var(--cam-sang),
      var(--cam));
  border-color: var(--cam-tham);
}
.check input:checked + .box::after {
  content: "";
  position: absolute;
  left: 5.5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.check input:focus-visible + .box {
  box-shadow: 0 0 0 3px rgba(127, 160, 203, .4);
}
.captcha-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.captcha-row .input {
  flex: 1;
}
.captcha-img {
  height: 48px;
  border: 1.5px solid var(--vien);
  border-radius: var(--bo-goc-nho);
  background: #fff;
  cursor: pointer;
}
.alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  padding: 12px 14px;
  border: 1.5px solid;
  border-radius: var(--bo-goc-nho);
  font-size: 13.5px;
  line-height: 1.6;
  box-shadow: var(--bong-nho);
}
.alert svg {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  margin-top: 1px;
}
.alert-success {
  color: #1D6E3E;
  background: var(--ok-nhat);
  border-color: #A6DCBB;
}
.alert-error {
  color: #9A2A20;
  background: var(--loi-nhat);
  border-color: #F0B4AE;
}
.alert-info {
  color: #23577F;
  background: var(--lam-nhat);
  border-color: #A9CDE9;
}
.alert-warn {
  color: #7A5410;
  background: #FFF6DF;
  border-color: #EBCB82;
}
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, .96),
      rgba(243, 246, 250, .92));
  backdrop-filter: blur(8px);
  border-bottom: 1.5px solid var(--vien-dam);
  box-shadow: 0 2px 10px rgba(52, 74, 96, .1);
}
.topbar-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  color: inherit;
}
.brand:hover {
  text-decoration: none;
}
.brand-seal,
.seal {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 900;
  color: #203A5C;
  background:
    linear-gradient(
      160deg,
      var(--kim-sang),
      var(--kim) 55%,
      var(--kim-tham));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 2px 6px rgba(78, 123, 182, .45);
}
.brand-text b {
  display: block;
  font-size: 14px;
  line-height: 1.2;
  color: var(--do);
  white-space: nowrap;
}
.brand-text span {
  display: block;
  font-size: 11px;
  color: var(--chu-mo);
  white-space: nowrap;
}
.nav {
  display: none;
  gap: 4px;
}
.nav a {
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--chu-mo);
}
.nav a:hover {
  background: var(--giay-dam);
  text-decoration: none;
}
.nav a.on {
  color: #fff;
  background:
    linear-gradient(
      180deg,
      var(--cam-sang),
      var(--cam));
}
@media (min-width: 640px) {
  .nav {
    display: flex;
  }
}
.lang {
  position: relative;
}
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  color: var(--chu);
  background: rgba(255, 255, 255, .9);
  border: 1.5px solid var(--vien-dam);
  border-radius: 999px;
  cursor: pointer;
  box-shadow: var(--bong-nho);
}
.lang-menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 168px;
  padding: 6px;
  background: #fff;
  border: 1.5px solid var(--vien-dam);
  border-radius: var(--bo-goc-nho);
  box-shadow: var(--bong);
  z-index: 40;
}
.lang.open .lang-menu,
.lang-menu.open {
  display: block;
}
.lang-menu a {
  display: block;
  padding: 9px 11px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--chu);
}
.lang-menu a:hover {
  background: var(--giay-dam);
  text-decoration: none;
}
.lang-menu a.on {
  color: #fff;
  background:
    linear-gradient(
      180deg,
      var(--cam-sang),
      var(--cam));
}
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 35;
  display: flex;
  justify-content: center;
  gap: 2px;
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
  background:
    linear-gradient(
      180deg,
      #F9FAFC,
      #E6EDF5);
  border-top: 2px solid var(--vien-dam);
  box-shadow: 0 -4px 18px rgba(52, 74, 96, .14);
}
.tabbar a {
  flex: 1 1 0;
  max-width: 104px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 2px 4px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  color: var(--chu-mo);
  text-align: center;
}
.tabbar a:hover {
  text-decoration: none;
}
.tabbar a svg {
  width: 22px;
  height: 22px;
}
.tabbar a.on {
  color: var(--cam-tham);
  background:
    linear-gradient(
      180deg,
      #DFE7F2,
      #CBD8E8);
}
.tabbar a.on svg {
  transform: translateY(-1px) scale(1.08);
  filter: drop-shadow(0 2px 3px rgba(70, 113, 170, .45));
}
.gate {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 14px 40px;
}
.gate-card {
  width: 100%;
  max-width: var(--rong);
}
.hero {
  position: relative;
  height: 210px;
  margin: 0 -14px 0;
  background-position: center bottom;
  background-size: auto 100%;
  background-repeat: no-repeat;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      38% 30% at 20% 74%,
      rgba(255, 255, 255, .95),
      rgba(255, 255, 255, 0) 70%),
    radial-gradient(
      30% 24% at 76% 82%,
      rgba(255, 255, 255, .9),
      rgba(255, 255, 255, 0) 70%),
    radial-gradient(
      46% 26% at 50% 96%,
      rgba(255, 255, 255, .98),
      rgba(255, 255, 255, 0) 72%);
}
.logo {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  text-align: center;
}
.logo b {
  display: block;
  font-size: 34px;
  font-weight: 900;
  letter-spacing: .06em;
  line-height: 1;
  background:
    linear-gradient(
      180deg,
      #DDE6F1 0%,
      #90ACD1 45%,
      #4875B0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(1px 0 0 #244268) drop-shadow(-1px 0 0 #244268) drop-shadow(0 1px 0 #244268) drop-shadow(0 -1px 0 #244268) drop-shadow(0 3px 3px rgba(26, 47, 74, .45));
}
.logo span {
  display: inline-block;
  margin-top: 7px;
  padding: 3px 14px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  color: #203A5C;
  background:
    linear-gradient(
      180deg,
      var(--kim-sang),
      var(--kim));
  border-radius: 999px;
  box-shadow: 0 2px 5px rgba(78, 123, 182, .5);
}
.gate-top {
  padding: 4px 0 14px;
  text-align: center;
}
.gate-top h1 {
  color: var(--do);
  font-size: 20px;
}
.gate-top p {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--chu-mo);
}
.title-gach {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 16px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .08em;
  color: var(--do);
  text-transform: uppercase;
}
.title-gach::before,
.title-gach::after {
  content: "";
  width: 34px;
  height: 2px;
  border-radius: 2px;
  background:
    linear-gradient(
      90deg,
      transparent,
      var(--kim-tham));
}
.title-gach::after {
  background:
    linear-gradient(
      270deg,
      transparent,
      var(--kim-tham));
}
.tat {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 14px;
  padding: 12px 10px;
  background: rgba(255, 255, 255, .82);
  border: 1.5px solid var(--vien-dam);
  border-radius: var(--bo-goc);
  box-shadow: var(--bong-nho);
}
.tat a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--chu-mo);
  text-align: center;
}
.tat a:hover {
  text-decoration: none;
  color: var(--do);
}
.tat svg {
  width: 26px;
  height: 26px;
  color: var(--cam);
}
.purse {
  position: relative;
  align-self: start;
  padding: 16px 18px;
  color: var(--chu-sang);
  background:
    linear-gradient(
      135deg,
      #C2532E 0%,
      #A63C1E 55%,
      #86290F 100%);
  border: 2px solid var(--kim-tham);
  border-radius: var(--bo-goc);
  box-shadow: var(--bong);
  overflow: hidden;
}
.purse::after {
  content: "";
  position: absolute;
  right: -26px;
  top: -26px;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 34% 34%,
      rgba(189, 205, 226, .5),
      rgba(189, 205, 226, 0) 68%);
}
.purse .label {
  font-size: 12px;
  opacity: .9;
  font-weight: 600;
}
.purse .value {
  margin-top: 3px;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .28);
}
.purse .value small {
  font-size: 14px;
  font-weight: 700;
  opacity: .9;
}
.kv {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--vien);
  font-size: 14px;
}
.kv:last-child {
  border-bottom: 0;
}
.kv > span:first-child {
  color: var(--chu-mo);
}
.kv b {
  font-weight: 800;
}
.kv .v {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-left: auto;
  overflow-wrap: anywhere;
  text-align: right;
}
.kv .v .sua {
  flex: 0 0 auto;
}
.pill {
  display: inline-block;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--chu-mo);
  background: var(--giay-tham);
  border: 1px solid var(--vien);
}
.pill-gold {
  color: #203A5C;
  background:
    linear-gradient(
      180deg,
      var(--kim-sang),
      var(--kim));
  border-color: var(--kim-tham);
}
.pill-green {
  color: #1D6E3E;
  background: var(--ok-nhat);
  border-color: #A6DCBB;
}
.pill-red {
  color: #9A2A20;
  background: var(--loi-nhat);
  border-color: #F0B4AE;
}
.pill-grey {
  color: var(--chu-nhat);
  background: #E2E9F3;
  border-color: #C4D2E5;
}
.copy-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--giay-dam);
  border: 1.5px dashed var(--vien-dam);
  border-radius: var(--bo-goc-nho);
}
.copy-line .v {
  flex: 1;
  font-family:
    ui-monospace,
    "SFMono-Regular",
    Consolas,
    monospace;
  font-size: 14px;
  letter-spacing: .04em;
  word-break: break-all;
}
.copy-btn {
  padding: 6px 12px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  background:
    linear-gradient(
      180deg,
      var(--cam-sang),
      var(--cam));
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
.countdown {
  font-weight: 800;
  color: var(--do);
  font-variant-numeric: tabular-nums;
}
.qr-box {
  display: block;
  width: 100%;
  max-width: 320px;
  margin: 0 auto 14px;
  padding: 12px;
  background: #fff;
  border: 2px solid var(--vien-dam);
  border-radius: var(--bo-goc-nho);
  box-shadow: var(--bong-nho);
}
.qr-box img {
  display: block;
  width: 100%;
  height: auto;
}
@media (min-width: 720px) {
  .qr-box {
    max-width: 420px;
  }
}
.bang {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
  color: #fff;
  background:
    linear-gradient(
      120deg,
      #E8623B 0%,
      #C93E22 55%,
      #A82C14 100%);
  border: 2px solid var(--kim);
  border-radius: var(--bo-goc);
  box-shadow: var(--bong);
  overflow: hidden;
  position: relative;
}
.bang b {
  display: block;
  font-size: 15px;
  font-weight: 900;
  text-shadow: 0 2px 3px rgba(0, 0, 0, .3);
}
.bang span {
  display: block;
  font-size: 12.5px;
  opacity: .95;
}
.bang::after {
  content: "";
  position: absolute;
  right: -18px;
  bottom: -30px;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 40% 40%,
      rgba(169, 189, 216, .55),
      rgba(169, 189, 216, 0) 70%);
}
.buoc-nhan {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 10px;
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: .04em;
  color: var(--do);
  text-transform: uppercase;
}
.buoc-nhan i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  border-radius: 50%;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  color: #fff;
  background:
    linear-gradient(
      180deg,
      var(--cam-sang),
      var(--cam));
}
.denoms {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}
.denom {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 12px 6px 10px;
  background: var(--giay-dam);
  border: 2px solid var(--vien);
  border-radius: var(--bo-goc-nho);
  color: var(--chu);
  cursor: pointer;
  text-align: center;
  transition:
    border-color .15s ease,
    background .15s ease,
    transform .06s ease;
}
.denom:hover {
  text-decoration: none;
  border-color: var(--kim);
}
.denom:active {
  transform: translateY(1px);
}
.denom.on {
  background:
    linear-gradient(
      180deg,
      #E8EEF6,
      #D1DCEA);
  border-color: var(--cam);
  box-shadow: 0 0 0 3px rgba(100, 139, 191, .22);
}
.denom .gia {
  font-size: 13px;
  font-weight: 800;
}
.denom .coin {
  font-size: 12px;
  font-weight: 800;
  color: var(--cam-tham);
}
.denom svg {
  width: 44px;
  height: 30px;
}
.denom .tag {
  position: absolute;
  top: -7px;
  right: -4px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .04em;
  color: #fff;
  background:
    linear-gradient(
      180deg,
      #FF7A5C,
      #E23B1E);
  box-shadow: 0 2px 5px rgba(226, 59, 30, .45);
}
.denom .tag.best {
  background:
    linear-gradient(
      180deg,
      #81A1CB,
      #4C7AB6);
}
.pays {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.pay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 4px;
  min-height: 58px;
  background: #fff;
  border: 2px solid var(--vien);
  border-radius: var(--bo-goc-nho);
  font-size: 10.5px;
  font-weight: 800;
  color: var(--chu-mo);
  text-align: center;
  cursor: pointer;
}
.pay:hover {
  text-decoration: none;
  border-color: var(--kim);
}
.pay.on {
  color: var(--cam-tham);
  background:
    linear-gradient(
      180deg,
      #E8EEF6,
      #D1DCEA);
  border-color: var(--cam);
}
.pay svg {
  width: 22px;
  height: 22px;
}
.ways {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.way {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 14px;
  background: var(--giay-dam);
  border: 1.5px solid var(--vien);
  border-radius: var(--bo-goc-nho);
  color: var(--chu);
  transition: border-color .15s ease, transform .06s ease;
}
.way:hover {
  text-decoration: none;
  border-color: var(--kim);
}
.way:active {
  transform: translateY(1px);
}
.way-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  font-size: 21px;
  background: #fff;
  border: 1.5px solid var(--vien);
  border-radius: 12px;
}
.way-txt b {
  display: block;
  font-size: 14.5px;
  font-weight: 800;
}
.way-txt span {
  display: block;
  font-size: 12px;
  color: var(--chu-mo);
}
.tong {
  margin: 14px 0;
  padding: 12px 14px;
  background:
    linear-gradient(
      180deg,
      var(--giay-tham),
      var(--giay-dam));
  border: 1.5px solid var(--vien-dam);
  border-radius: var(--bo-goc-nho);
}
.tong .kv {
  border-bottom: 1px dashed var(--vien);
  padding: 8px 0;
}
.tong .kv:last-child {
  border-bottom: 0;
}
.tong .kv b {
  font-size: 16px;
  color: var(--cam-tham);
}
.picks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}
.pick {
  padding: 11px 8px;
  text-align: center;
  font-weight: 800;
  background: var(--giay-dam);
  border: 2px solid var(--vien);
  border-radius: var(--bo-goc-nho);
  color: var(--chu);
  cursor: pointer;
}
.pick:hover {
  text-decoration: none;
  border-color: var(--kim);
}
.pick.on {
  background:
    linear-gradient(
      180deg,
      #E8EEF6,
      #D1DCEA);
  border-color: var(--cam);
}
.pick input,
.denom input,
.pay input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.pick:has(input:checked),
.denom:has(input:checked) {
  background:
    linear-gradient(
      180deg,
      #E8EEF6,
      #D1DCEA);
  border-color: var(--cam);
  box-shadow: 0 0 0 3px rgba(100, 139, 191, .22);
}
.pay:has(input:checked) {
  color: var(--cam-tham);
  background:
    linear-gradient(
      180deg,
      #E8EEF6,
      #D1DCEA);
  border-color: var(--cam);
}
.pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  position: relative;
}
.pick .money {
  font-size: 13px;
  font-weight: 800;
}
.pick .gain {
  font-size: 12px;
  font-weight: 800;
  color: var(--cam-tham);
}
.pick .was {
  font-size: 10.5px;
}
.pick svg {
  width: 44px;
  height: 30px;
}
.pick .money,
.pick .gain,
.pick .was,
.denom .gia,
.denom .coin {
  overflow-wrap: anywhere;
}
.tabs {
  display: flex;
  gap: 7px;
  margin-bottom: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tabs::-webkit-scrollbar {
  display: none;
}
.tabs a {
  flex: 0 0 auto;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  color: var(--chu-mo);
  background: rgba(255, 255, 255, .9);
  border: 1.5px solid var(--vien-dam);
  white-space: nowrap;
}
.tabs a:hover {
  text-decoration: none;
}
.tabs a.on {
  color: #1D4F8C;
  background: #DCEBFA;
  border-color: #4E86C4;
  box-shadow: 0 2px 6px rgba(78, 134, 196, .25);
}
.hist {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--vien);
}
.hist:last-child {
  border-bottom: 0;
}
.hist-main {
  flex: 1;
  min-width: 0;
}
.hist-time {
  font-size: 12px;
  color: var(--chu-mo);
}
.hist-name {
  font-size: 14px;
  font-weight: 700;
}
.hist-right {
  text-align: right;
  white-space: nowrap;
}
.hist-amount {
  font-size: 14.5px;
  font-weight: 900;
  color: var(--cam-tham);
}
.hist-state {
  font-size: 12px;
  font-weight: 700;
}
.hist-state.ok {
  color: var(--ok);
}
.hist-state.bad {
  color: var(--loi);
}
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
th,
td {
  padding: 10px 8px;
  text-align: left;
  border-bottom: 1px solid var(--vien);
}
th {
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--chu-mo);
  background: var(--giay-dam);
}
.pager {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.pager a,
.pager span {
  min-width: 36px;
  padding: 7px 10px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--chu);
  background: rgba(255, 255, 255, .9);
  border: 1.5px solid var(--vien-dam);
  border-radius: 10px;
}
.pager a:hover {
  text-decoration: none;
  border-color: var(--kim);
}
.pager .on {
  color: #fff;
  background:
    linear-gradient(
      180deg,
      var(--cam-sang),
      var(--cam));
  border-color: var(--cam-tham);
}
.pager .disabled {
  opacity: .45;
}
.modal-bg {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(30, 42, 54, .55);
  backdrop-filter: blur(3px);
}
.modal-bg.open {
  display: flex;
}
.modal {
  width: 100%;
  max-width: 420px;
  max-height: 86vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--giay);
  border: 2px solid var(--vien-dam);
  border-radius: var(--bo-goc);
  box-shadow: 0 18px 46px rgba(20, 32, 44, .4);
}
@media (min-width: 720px) {
  .modal {
    max-width: 520px;
  }
}
@media (min-width: 820px) {
  .modal-qr {
    max-width: 800px;
  }
  .modal-qr .card-body {
    display: grid;
    grid-template-columns: 370px minmax(0, 1fr);
    column-gap: 20px;
    align-content: start;
  }
  .modal-qr .card-body > .alert {
    grid-column: 1 / -1;
  }
  .modal-qr .qr-box {
    grid-column: 1;
    align-self: start;
    max-width: 370px;
    margin: 0;
  }
  .modal-qr .qr-info {
    grid-column: 2;
  }
}
.spin {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: quay .7s linear infinite;
}
@keyframes quay {
  to {
    transform: rotate(360deg);
  }
}
.steps {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin-bottom: 18px;
}
.steps .st {
  flex: 1 1 0;
  max-width: 116px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  position: relative;
  font-size: 11px;
  font-weight: 700;
  color: var(--chu-nhat);
  text-align: center;
}
.steps .st i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  font-size: 12.5px;
  font-style: normal;
  font-weight: 900;
  color: var(--chu-nhat);
  background: #fff;
  border: 2px solid var(--vien-dam);
}
.steps .st::after {
  content: "";
  position: absolute;
  top: 13px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--vien-dam);
}
.steps .st:last-child::after {
  display: none;
}
.steps .st i {
  position: relative;
  z-index: 1;
}
.steps .st.on {
  color: var(--cam-tham);
}
.steps .st.on i {
  color: #fff;
  background:
    linear-gradient(
      180deg,
      var(--cam-sang),
      var(--cam));
  border-color: var(--cam-tham);
}
.steps .st.xong {
  color: var(--ok);
}
.steps .st.xong i {
  color: #fff;
  background: var(--ok);
  border-color: var(--ok);
}
.steps .st.xong::after {
  background: var(--ok);
}
.otp {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 4px 0 12px;
}
.otp input {
  width: 46px;
  height: 54px;
  padding: 0;
  font-family: inherit;
  font-size: 22px;
  font-weight: 900;
  text-align: center;
  color: var(--chu);
  background: var(--giay-dam);
  border: 2px solid var(--vien-dam);
  border-radius: var(--bo-goc-nho);
  outline: none;
  font-variant-numeric: tabular-nums;
}
.otp input:focus {
  background: #fff;
  border-color: var(--cam);
  box-shadow: 0 0 0 3px rgba(100, 139, 191, .25);
}
@media (max-width: 380px) {
  .otp {
    gap: 6px;
  }
  .otp input {
    width: 40px;
    height: 48px;
    font-size: 19px;
  }
}
.faq {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.faq details {
  background: var(--giay-dam);
  border: 1.5px solid var(--vien);
  border-radius: var(--bo-goc-nho);
  overflow: hidden;
}
.faq summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "+";
  margin-left: auto;
  font-size: 19px;
  font-weight: 900;
  line-height: 1;
  color: var(--cam);
}
.faq details[open] summary::after {
  content: "−";
}
.faq details[open] summary {
  background:
    linear-gradient(
      180deg,
      #E8EEF6,
      #DCE5F1);
}
.faq details[open] {
  border-color: var(--kim);
}
.faq .tra {
  padding: 0 14px 13px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--chu-mo);
}
.contact {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  background: var(--giay-dam);
  border: 1.5px solid var(--vien);
  border-radius: var(--bo-goc-nho);
  color: var(--chu);
}
.contact-item:hover {
  text-decoration: none;
  border-color: var(--kim);
}
.contact-item .ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 11px;
  color: #fff;
  background:
    linear-gradient(
      180deg,
      var(--cam-sang),
      var(--cam));
}
.contact-item .ico svg {
  width: 20px;
  height: 20px;
}
.contact-item b {
  display: block;
  font-size: 13.5px;
  font-weight: 800;
}
.contact-item span {
  display: block;
  font-size: 12px;
  color: var(--chu-mo);
}
.langgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
}
@media (min-width: 420px) {
  .langgrid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.langgrid a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 12px;
  background: var(--giay-dam);
  border: 1.5px solid var(--vien);
  border-radius: var(--bo-goc-nho);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--chu);
}
.langgrid a:hover {
  text-decoration: none;
  border-color: var(--kim);
}
.langgrid a.on {
  background:
    linear-gradient(
      180deg,
      #E8EEF6,
      #D1DCEA);
  border-color: var(--cam);
  color: var(--cam-tham);
}
.co {
  display: block;
  width: 26px;
  height: 18px;
  flex: 0 0 26px;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, .18);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .14);
  background-size: cover;
  background-position: center;
}
.sr-nhan {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 430px) {
  .brand-text span {
    display: none;
  }
  .brand-text b {
    font-size: 13.5px;
    white-space: nowrap;
  }
  .topbar-inner {
    gap: 7px;
  }
  .lang-btn {
    padding: 6px 9px;
    font-size: 12px;
  }
  .btn-sm {
    padding: 7px 11px;
    font-size: 12px;
  }
}
.tat svg {
  width: 30px;
  height: 26px;
}
.sua {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-left: 4px;
  vertical-align: -7px;
  border-radius: 8px;
  color: var(--cam-tham);
  background: var(--giay-tham);
  border: 1px solid var(--vien);
}
.sua:hover {
  text-decoration: none;
  border-color: var(--kim);
  background: #DFE7F2;
}
.sua svg {
  width: 14px;
  height: 14px;
}
@media (min-width: 640px) and (max-width: 820px) {
  .nav a {
    padding: 6px 9px;
    font-size: 12.5px;
  }
}
@media (min-width: 640px) {
  body {
    font-size: 15.5px;
  }
  .topbar .wrap {
    max-width: 900px;
  }
  .main {
    padding-bottom: 40px;
  }
  .foot {
    padding-bottom: 40px;
  }
  .tabbar {
    display: none;
  }
  .denoms {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }
  .picks {
    gap: 12px;
  }
  .hero {
    height: 250px;
  }
}
@media (min-width: 1024px) {
  .topbar .wrap {
    max-width: 1040px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}
@media print {
  .topbar,
  .tabbar,
  .modal-bg,
  .tat {
    display: none !important;
  }
  body {
    background: #fff;
  }
}
.lang-btn .co {
  width: 20px;
  height: 14px;
  flex: 0 0 20px;
}
.lang-menu a {
  display: flex;
  align-items: center;
  gap: 9px;
}
.lang-menu .co {
  width: 22px;
  height: 15px;
  flex: 0 0 22px;
}
.gate-lang {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
}
.gate-card {
  position: relative;
}
.co-vn {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'><rect width='30' height='20' fill='%23DA251D'/><path d='M15 4.4l1.6 4.9h5.2l-4.2 3 1.6 4.9-4.2-3-4.2 3 1.6-4.9-4.2-3h5.2z' fill='%23FFFF00'/></svg>");
}
.co-th {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'><rect width='30' height='20' fill='%23ffffff'/><rect width='30' height='3.34' fill='%23A51931'/><rect y='16.66' width='30' height='3.34' fill='%23A51931'/><rect y='6.67' width='30' height='6.66' fill='%232D2A4A'/></svg>");
}
.co-gb {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'><rect width='30' height='20' fill='%23012169'/><path d='M0 0l30 20M30 0L0 20' stroke='%23ffffff' stroke-width='4'/><path d='M0 0l30 20M30 0L0 20' stroke='%23C8102E' stroke-width='2'/><path d='M15 0v20M0 10h30' stroke='%23ffffff' stroke-width='6'/><path d='M15 0v20M0 10h30' stroke='%23C8102E' stroke-width='3.4'/></svg>");
}
.co-id {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'><rect width='30' height='10' fill='%23CE1126'/><rect y='10' width='30' height='10' fill='%23ffffff'/></svg>");
}
.co-kr {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'><rect width='30' height='20' fill='%23ffffff'/><circle cx='15' cy='10' r='4.6' fill='%23CD2E3A'/><path d='M10.4 10a4.6 4.6 0 009.2 0z' fill='%230047A0'/><g stroke='%23000000' stroke-width='1' stroke-linecap='butt'><path d='M4.6 5.0l2.4 1.7M3.7 6.3l2.4 1.7M2.8 7.6l2.4 1.7'/><path d='M25.4 15.0l-2.4-1.7M26.3 13.7l-2.4-1.7M27.2 12.4l-2.4-1.7'/></g></svg>");
}
.ico {
  display: inline-block;
  flex: 0 0 auto;
  object-fit: contain;
  vertical-align: middle;
  user-select: none;
}
body {
  background-color: #1f6fc0;
  background-image: url(../img/bg/bg-sea.jpg);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
}
.hero {
  position: relative;
  height: 360px;
  margin-bottom: -18px;
  background: none;
  overflow: visible;
}
.hero-nv {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero-nv img {
  position: absolute;
  bottom: 86px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 10px rgba(20, 42, 66, .28));
}
.nv-giua {
  left: 50%;
  width: 45%;
  max-width: 176px;
  transform: translateX(-50%);
  z-index: 2;
}
.nv-trai {
  left: 3%;
  width: 34%;
  max-width: 132px;
  bottom: 116px;
  z-index: 1;
}
.nv-phai {
  right: 3%;
  width: 34%;
  max-width: 132px;
  bottom: 116px;
  z-index: 1;
}
.hero .logo {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  z-index: 3;
}
.hero .logo span {
  display: inline-block;
  padding: 7px 34px 9px;
  background: url(../img/badges/ribbon-title.png) no-repeat center;
  background-size: 100% 100%;
  color: #CEDAE9;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
  letter-spacing: 1.2px;
}
@media (min-width: 640px) {
  .hero {
    height: 420px;
  }
  .hero-nv img {
    bottom: 100px;
  }
  .nv-giua {
    max-width: 208px;
  }
  .nv-trai,
  .nv-phai {
    max-width: 156px;
    bottom: 134px;
  }
}
.tat img.ico {
  width: 34px;
  height: 34px;
}
.tabbar a img.ico {
  width: 24px;
  height: 24px;
}
.tabbar a.on img.ico {
  width: 26px;
  height: 26px;
  padding: 6px;
  margin-top: -14px;
  border-radius: 50%;
  background:
    linear-gradient(
      180deg,
      var(--cam-nhat, #99B1D1),
      var(--cam));
  box-shadow: 0 3px 8px rgba(67, 110, 165, .45);
}
.co {
  display: inline-block;
  flex: 0 0 auto;
  width: 26px;
  height: 19px;
  border-radius: 3px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  box-shadow: 0 0 0 1px rgba(29, 51, 81, .18);
}
.co-vn {
  background-image: url(../img/flags/vn.png);
}
.co-gb {
  background-image: url(../img/flags/gb.png);
}
.co-th {
  background-image: url(../img/flags/th.png);
}
.co-id {
  background-image: url(../img/flags/id.png);
}
.langgrid .co {
  width: 34px;
  height: 25px;
}
.vang-anh {
  width: 46px;
  height: 46px;
  object-fit: contain;
}
.pick .vang-anh,
.denom .vang-anh {
  margin-bottom: 2px;
}
.nhan-goc {
  position: absolute;
  top: -9px;
  right: -6px;
  z-index: 2;
  padding: 2px 9px 3px;
  border-radius: 9px 9px 9px 2px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .4px;
  color: #fff;
  background:
    linear-gradient(
      180deg,
      #FF7A5C,
      #E8402A);
  box-shadow: 0 2px 5px rgba(190, 50, 30, .4);
}
.nhan-goc.best {
  background:
    linear-gradient(
      180deg,
      #81A1CB,
      #4B79B6);
}
.steps .st i {
  background: url(../img/badges/step-circle-idle.png) no-repeat center;
  background-size: 100% 100%;
  border: 0;
  color: #527EB8;
}
.steps .st.on i {
  background: url(../img/badges/step-circle.png) no-repeat center;
  background-size: 100% 100%;
  border: 0;
  color: #223D60;
}
.steps .st.xong i {
  background: url(../img/badges/step-circle-done.png) no-repeat center;
  background-size: 100% 100%;
  border: 0;
  font-size: 0;
  color: transparent;
}
.steps .st.xong i svg {
  display: none;
}
.field-icon img.ico {
  position: absolute;
  left: 12px;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  opacity: .85;
  pointer-events: none;
}
.eye img.ico {
  width: 20px;
  height: 20px;
}
.check .box {
  background: url(../img/icons/ui/checkbox-off.png) no-repeat center;
  background-size: 100% 100%;
  border: 0;
  box-shadow: none;
}
.check input:checked + .box {
  background: url(../img/icons/ui/checkbox-on.png) no-repeat center;
  background-size: 100% 100%;
}
.check input:checked + .box::after {
  display: none;
}
.mxh-nhan {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 14px;
  font-size: 12.5px;
  color: var(--chu-mo);
}
.mxh-nhan::before,
.mxh-nhan::after {
  content: "";
  flex: 1;
  height: 1px;
  background:
    linear-gradient(
      90deg,
      transparent,
      var(--vien-dam),
      transparent);
}
.mxh {
  display: flex;
  justify-content: center;
  gap: 22px;
}
.mxh a {
  display: block;
  line-height: 0;
  border-radius: 50%;
  transition: transform .12s ease;
}
.mxh a:hover {
  transform: translateY(-2px);
}
.mxh img.ico {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  box-shadow: 0 3px 7px rgba(30, 42, 54, .22);
}
.minhhoa {
  display: block;
  width: 190px;
  max-width: 62%;
  height: auto;
  margin: 4px auto 12px;
}
.empty img.ico {
  display: block;
  width: 96px;
  height: 96px;
  margin: 0 auto 10px;
  opacity: .9;
}
.nv-goc {
  position: absolute;
  right: 6px;
  bottom: 0;
  width: 128px;
  pointer-events: none;
  filter: drop-shadow(0 5px 9px rgba(20, 42, 66, .25));
}
.way-icon img.ico,
.pay img.ico {
  width: 30px;
  height: 30px;
}
.contact .ico-anh {
  width: 22px;
  height: 22px;
}
.nv-goc {
  display: none;
}
@media (min-width: 900px) {
  .main {
    position: relative;
  }
  .nv-goc {
    display: block;
    right: -18px;
    bottom: 40px;
  }
}
.phaply .card-body p {
  margin: 0 0 10px;
  line-height: 1.7;
}
.phaply .card-body p:last-child {
  margin-bottom: 0;
}
.ds-phaply {
  list-style: disc;
  margin: 6px 0 12px;
  padding-left: 22px;
}
.ds-phaply li {
  margin-bottom: 7px;
  line-height: 1.65;
}
.ds-phaply li:last-child {
  margin-bottom: 0;
}
.phaply .kv .v {
  overflow-wrap: anywhere;
}
:root {
  --may: 430px;
}
.may {
  width: 100%;
  max-width: var(--may);
  margin: 0 auto;
  min-height: 100vh;
  background:
    linear-gradient(
      180deg,
      #F9FBFD 0%,
      #F2F5F9 100%);
  box-shadow: 0 0 0 1px rgba(52, 74, 96, .10), 0 12px 48px rgba(30, 52, 74, .28);
}
@media (min-width: 640px) {
  .may {
    border-radius: 20px 20px 0 0;
    margin-top: 14px;
    min-height: calc(100vh - 14px);
  }
}
.topbar .wrap {
  max-width: none;
}
.main > .wrap.rong {
  max-width: none;
}
.grid-2 {
  grid-template-columns: minmax(0, 1fr);
}
.nav {
  display: none;
}
.tabbar {
  display: flex;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--may);
  border-radius: 16px 16px 0 0;
}
.main {
  padding-bottom: 20px;
}
.foot {
  padding-bottom: 96px;
}
.nv-goc {
  display: none;
}
.modal,
.modal-qr {
  max-width: min(var(--may), calc(100vw - 24px));
}
.modal-qr .card-body {
  display: block;
}
.modal-qr .qr-box {
  max-width: none;
  margin: 0 auto;
}
.langgrid {
  grid-template-columns: repeat(2, 1fr);
}
table.data {
  border-collapse: separate;
  border-spacing: 0 8px;
  font-size: 13.5px;
}
table.data thead {
  display: none;
}
table.data tbody {
  display: block;
}
table.data tr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 12px;
  padding: 10px 12px;
  background: var(--giay-dam);
  border: 1px solid var(--vien);
  border-radius: var(--bo-goc-nho);
}
table.data td {
  display: block;
  grid-column: 1;
  padding: 0;
  border: 0;
  line-height: 1.5;
}
table.data td:first-child {
  grid-row: 1;
}
table.data td.num {
  grid-column: 2;
  text-align: right;
}
table.data td.num.plus,
table.data td.num.minus {
  grid-row: 1;
  font-size: 15px;
  font-weight: 900;
}
table.data td.num.muted {
  font-size: 12.5px;
  font-weight: 700;
  align-self: end;
}
.gate-card.khong-tranh {
  padding-top: 58px;
}
.hero {
  height: auto;
  min-height: 0;
  margin: 0 -14px;
  padding: 22px 14px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero .logo {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
}
.logo-app {
  display: block;
  width: clamp(96px, 34vw, 132px);
  height: auto;
  margin: 0 auto 10px;
  filter: drop-shadow(0 6px 12px rgba(20, 42, 66, .32));
}
.hero .logo span {
  max-width: 100%;
}
@media (min-width: 640px) {
  .logo-app {
    width: 150px;
  }
}
.hero.co-nv {
  display: block;
  min-height: 0;
  height: 360px;
  padding: 0;
  margin-bottom: -18px;
}
.hero.co-nv .logo {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
}
@media (min-width: 640px) {
  .hero.co-nv {
    height: 420px;
  }
}
.nut-hang {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.nut-hang > .btn {
  flex: 1 1 130px;
  padding-left: 12px;
  padding-right: 12px;
}
.nut-hang > .btn-primary,
.nut-hang > .btn-green {
  flex-grow: 1.5;
}
.gate {
  padding-bottom: calc(40px + env(safe-area-inset-bottom));
}
.brand-seal.seal-anh {
  padding: 0;
  overflow: hidden;
  background: none;
  box-shadow: none;
  border-radius: 0;
}
.brand-seal.seal-anh img {
  display: block;
  width: 34px;
  height: 34px;
  object-fit: contain;
}
.may-troi {
  background-color: #1f6fc0;
  background-image: url(../img/bg/bg-sea.jpg);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}
.may-troi .gate {
  min-height: 0;
}
.may-troi .gate-card {
  max-width: none;
}
body {
  background-color: #1f6fc0;
  background-image:
    linear-gradient(rgba(8, 36, 70, .38), rgba(8, 36, 70, .38)),
    url(../img/bg/bg-sea.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
}
.may-troi {
  position: relative;
  display: flex;
  flex-direction: column;
}
.may-troi .gate {
  flex: 1;
  padding-top: 58px;
}
.may-troi .gate-card {
  margin-top: auto;
  margin-bottom: auto;
}
.may-troi > .gate-lang {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
}
@font-face {
  font-family: "FA6 Solid";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url(../fonts/fa-solid-subset.woff2) format("woff2");
}
.fa-solid {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  font-weight: 900;
  line-height: 1;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}
.fa-solid {
  font-family: "FA6 Solid";
}
.fa-solid::before {
  content: var(--fa);
}
.fa-user {
  --fa:"";
}
.fa-lock {
  --fa:"";
}
.fa-eye {
  --fa:"";
}
.fa-eye-slash {
  --fa:"";
}
.fa-circle-info {
  --fa:"";
}
.fa-triangle-exclamation {
  --fa:"";
}
.fa-circle-check {
  --fa:"";
}
.fa-circle-exclamation {
  --fa:"";
}
.fa-shield-halved {
  --fa:"";
}
.fa-paper-plane {
  --fa:"";
}
.fa-star {
  --fa:"";
}
.fa-comments {
  --fa:"";
}
.fa-coins {
  --fa:"";
}
.fa-clock-rotate-left {
  --fa:"";
}
.fa-headset {
  --fa:"";
}
.fa-credit-card {
  --fa:"";
}
.fa-language {
  --fa:"";
}
.fa-envelope {
  --fa:"";
}
.fa-phone {
  --fa:"";
}
.fa-check {
  --fa:"";
}
.fa-chevron-down {
  --fa:"";
}
.fa-chevron-right {
  --fa:"";
}
.fa-chevron-left {
  --fa:"";
}
.fa-pen {
  --fa:"";
}
.fa-clock {
  --fa:"";
}
.fa-wallet {
  --fa:"";
}
.fa-qrcode {
  --fa:"";
}
.fa-right-from-bracket {
  --fa:"";
}
.fa-thumbs-up {
  --fa:"";
}
.fa-gift {
  --fa:"";
}
.fa-xmark {
  --fa:"";
}
.fa-copy {
  --fa:"";
}
.fa-rotate {
  --fa:"";
}
.fa-arrow-left {
  --fa:"";
}
.fa-arrow-right {
  --fa:"";
}
.fa-circle-question {
  --fa:"";
}
.fa-ticket {
  --fa:"";
}
.fa-money-bill-wave {
  --fa:"";
}
.fa-building-columns {
  --fa:"";
}
.fa-sack-dollar {
  --fa:"";
}
.fa-bolt {
  --fa:"";
}
.fa-key {
  --fa:"";
}
.fa-mobile-screen-button {
  --fa:"";
}
.fa-spinner {
  --fa:"";
}
.ico {
  font-size: var(--co, 22px);
  flex: 0 0 auto;
  vertical-align: middle;
  user-select: none;
}
.alert .ico {
  font-size: 19px;
  margin-top: 1px;
}
.field-icon > .ico {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: var(--chu-nhat);
  opacity: .85;
  pointer-events: none;
  z-index: 1;
}
.eye .ico {
  font-size: 18px;
}
.tabbar a .ico {
  font-size: 24px;
}
.tabbar a.on .ico {
  font-size: 26px;
}
.tat .ico {
  font-size: 30px;
}
.way-icon .ico,
.pay .ico {
  font-size: 30px;
}
.denom .ico,
.pick .ico {
  font-size: 30px;
}
.empty .ico {
  font-size: 34px;
  opacity: .35;
}
.contact-item .ico {
  font-size: 20px;
}
.sua .ico {
  font-size: 14px;
}
.steps .st i .ico {
  font-size: 13px;
}
.lang-btn .ico {
  font-size: 11px;
}
.check .box {
  background: #fff;
  border: 1.5px solid var(--vien-dam);
  box-shadow: none;
}
.check input:checked + .box {
  background:
    linear-gradient(
      180deg,
      var(--cam-sang),
      var(--cam));
  border-color: var(--cam-tham);
}
.check input:checked + .box::after {
  display: block;
}
.steps .st i {
  background: #fff;
  background-size: auto;
  border: 2px solid var(--vien-dam);
  color: var(--chu-nhat);
  font-size: 12.5px;
}
.steps .st.on i {
  background:
    linear-gradient(
      180deg,
      var(--cam-sang),
      var(--cam));
  border-color: var(--cam-tham);
  color: #fff;
}
.steps .st.xong i {
  background: var(--ok);
  background-size: auto;
  border-color: var(--ok);
  color: #fff;
  font-size: 12.5px;
}
.steps .st.xong i .ico {
  display: inline-block;
  font-size: 13px;
}
.purse {
  background:
    linear-gradient(
      135deg,
      #2F5789 0%,
      #1D3760 55%,
      #122544 100%);
  border-color: var(--kim);
}
.purse::after {
  content: "";
  font-family: "FA6 Solid";
  font-weight: 900;
  line-height: 1;
  right: -14px;
  top: -10px;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  font-size: 104px;
  color: #FFFFFF;
  opacity: .10;
  transform: rotate(-12deg);
  pointer-events: none;
}
.purse .btn-primary {
  background: #fff;
  color: var(--do);
  text-shadow: none;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .18), 0 6px 14px rgba(0, 0, 0, .22);
}
.purse .btn-primary:hover:not(:disabled) {
  filter: brightness(.96);
}
.gc-ds {
  display: grid;
  gap: 10px;
  padding: 12px;
}
.gc-the {
  background: var(--giay);
  border: 1px solid var(--vien-dam);
  border-radius: var(--bo-goc-nho);
  box-shadow: var(--bong-nho);
  overflow: hidden;
}
.gc-dau {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: var(--giay-dam);
  border-bottom: 1px solid var(--vien);
}
.gc-ma-khoi {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.gc-nhan-nho {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--chu-nhat);
}
.gc-ma {
  font-family:
    ui-monospace,
    "Cascadia Mono",
    Consolas,
    monospace;
  font-size: 18px;
  font-weight: 800;
  color: var(--kim-tham);
  letter-spacing: .06em;
  word-break: break-all;
}
.gc-dau .pill {
  flex: 0 0 auto;
}
.gc-bang {
  display: grid;
  grid-template-columns: minmax(110px, max-content) 1fr;
  gap: 7px 14px;
  margin: 0;
  padding: 12px 14px;
  font-size: 13.5px;
}
.gc-bang dt {
  color: var(--chu-mo);
}
.gc-bang dd {
  margin: 0;
  color: var(--chu);
  font-weight: 600;
  min-width: 0;
  word-break: break-word;
}
.gc-bang dd.muted {
  font-weight: 400;
  color: var(--chu-mo);
}
.gc-qua-ds {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.gc-qua {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--kim-sang);
  background: var(--lam-nhat);
  color: var(--kim-tham);
  font-size: 12.5px;
  font-weight: 600;
}
.gc-qua b {
  color: var(--cam);
}
.don-menh-gia {
  font-size: 18px;
  font-weight: 800;
  color: var(--kim-tham);
}
.don-menh-gia small {
  font-size: 13px;
  font-weight: 700;
  margin-left: 2px;
  color: var(--chu-mo);
}
.don-coin {
  color: var(--luc-tham);
  font-weight: 800;
}
.don-so {
  font-family:
    ui-monospace,
    "Cascadia Mono",
    Consolas,
    monospace;
  font-size: 12.5px;
  word-break: break-all;
}
.don-ghi-chu {
  margin: 0 14px 12px;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
}
.don-ghi-chu.loi {
  background: var(--loi-nhat);
  color: #9A2A20;
  border: 1px solid #F0B4AE;
}
.don-ghi-chu.cho {
  background: var(--lam-nhat);
  color: var(--kim-tham);
  border: 1px solid var(--kim-sang);
}
.tn-tong {
  margin-top: 12px;
}
.tn-thanh {
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .35);
  overflow: hidden;
  margin-bottom: 6px;
}
.tn-thanh > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(
      90deg,
      var(--luc-sang),
      var(--luc));
  transition: width .4s ease;
}
.tn-qua {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 8px;
  margin: 10px 0 4px;
}
.tn-mon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.tn-anh {
  position: relative;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 2px solid var(--vien-dam);
  background: var(--giay-dam);
  overflow: hidden;
}
.tn-anh img {
  max-width: 88%;
  max-height: 88%;
  display: block;
}
.tn-so {
  position: absolute;
  right: 2px;
  bottom: 1px;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .8), 0 0 2px rgba(0, 0, 0, .8);
}
.tn-ten {
  font-size: 11px;
  line-height: 1.25;
  text-align: center;
  color: var(--chu-mo);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.tn-anh.pham-2 {
  border-color: #3E9B4F;
}
.tn-anh.pham-3 {
  border-color: #3B7DD8;
}
.tn-anh.pham-4 {
  border-color: #9B51E0;
}
.tn-anh.pham-5 {
  border-color: #E08B1F;
}
.tn-anh.pham-6 {
  border-color: #D6373A;
}
.gate-logo {
  text-align: center;
  margin: 0 0 10px;
}
.gate-logo img {
  display: inline-block;
  width: 78%;
  max-width: 300px;
  height: auto;
  filter: drop-shadow(0 4px 10px rgba(60, 0, 0, .35));
}
.alert .km-logo {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  align-self: center;
}
.btn,
.btn.btn-primary,
.btn.btn-green,
.btn.btn-ok,
.btn.btn-red,
.btn.btn-ghost,
.purse .btn,
.purse .btn-primary {
  color: #fff;
  border: 0;
  box-shadow: none;
  text-shadow: none;
}
.btn.btn-green,
.btn.btn-ok,
.purse .btn-green {
  background: #3F9B4B;
}
.btn.btn-primary,
.purse .btn-primary {
  background: #2F6FB5;
}
.btn.btn-red {
  background: #C0574D;
}
.btn.btn-green:hover:not(:disabled),
.btn.btn-ok:hover:not(:disabled) {
  background: #34853F;
  filter: none;
}
.btn.btn-primary:hover:not(:disabled),
.purse .btn-primary:hover:not(:disabled) {
  background: #255C99;
  filter: none;
}
.btn.btn-red:hover:not(:disabled) {
  background: #AD4A41;
  filter: none;
}
.btn:active:not(:disabled) {
  filter: brightness(.92);
}
.btn,
.btn-sm {
  border-radius: 8px;
}
.btn .ico {
  font-size: 1.1em;
  margin: 0;
  color: inherit;
}
.topbar-inner .brand {
  flex: 0 1 auto;
  min-width: 0;
}
.topbar-inner .brand-text {
  min-width: 0;
}
.topbar-inner .brand-text b {
  white-space: normal;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.topbar-inner .lang,
.topbar-inner form,
.topbar-inner > .btn {
  flex: 0 0 auto;
}
.topbar-inner .btn-sm {
  padding: 7px 11px;
  font-size: 12.5px;
}
.lang-btn {
  border-radius: 8px;
}
.lang-menu {
  border-radius: 8px;
}
.ac-user,
.ac-tiles,
.ac-details {
  margin-bottom: 14px;
}
.ac-user {
  padding: 16px;
}
.ac-who {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ac-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 50%;
  color: var(--cam);
  background: var(--giay-tham);
}
.ac-name {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--chu);
  overflow-wrap: anywhere;
}
.ac-sub {
  font-size: 12.5px;
  color: var(--chu-mo);
}
.ac-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 9px 12px;
  font-size: 13.5px;
  color: var(--chu-mo);
  background: var(--lam-nhat);
  border: 1px dashed #A9CDE9;
  border-radius: 8px;
}
.ac-strip b {
  margin-left: auto;
  font-size: 16px;
  color: var(--chu);
}
.ac-balance {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--vien);
}
.ac-balance > div {
  flex: 1 1 auto;
  min-width: 0;
}
.ac-balance .btn {
  flex: 0 0 auto;
}
.ac-money {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--do);
}
.ac-tiles {
  display: grid;
  grid-template-columns: repeat(var(--so-o, 4), 1fr);
  gap: 10px;
  padding: 14px;
}
.ac-tile {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 10px;
  color: #fff;
  text-decoration: none;
  background: var(--giay-tham);
  box-shadow: var(--bong-nho);
}
.ac-tile:hover {
  text-decoration: none;
  filter: brightness(1.06);
}
.ac-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ac-tile span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 5px 2px;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, .2),
      rgba(0, 0, 0, .6));
}
.ac-details .card-body {
  padding-top: 4px;
}
.ac-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--vien);
}
.ac-row:last-of-type {
  border-bottom: 0;
}
.ac-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 50%;
  color: var(--cam);
  background: var(--giay-tham);
}
.ac-txt {
  flex: 1 1 auto;
  min-width: 0;
}
.ac-k {
  font-size: 12.5px;
  color: var(--chu-mo);
}
.ac-v {
  font-size: 16px;
  font-weight: 700;
  color: var(--chu);
  overflow-wrap: anywhere;
}
.ac-row .btn {
  flex: 0 0 auto;
}
.topbar {
  background:
    linear-gradient(
      180deg,
      #2B5B95,
      #1D3760);
  border-bottom: 0;
  box-shadow: 0 2px 10px rgba(17, 39, 66, .35);
  backdrop-filter: none;
}
.topbar .brand-text b {
  color: #fff;
}
.topbar .brand-text span {
  color: #A9C6E4;
}
.tabbar {
  background:
    linear-gradient(
      180deg,
      #2B5B95,
      #1D3760);
  border-top: 0;
  box-shadow: 0 -4px 18px rgba(17, 39, 66, .35);
}
.tabbar a {
  color: #A9C6E4;
}
.tabbar a.on {
  color: #fff;
  background: rgba(255, 255, 255, .16);
}
.tabbar a.on svg,
.tabbar a.on .ico {
  filter: none;
}
.ac-banner {
  position: relative;
  margin: 0 0 14px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--bong-nho);
  touch-action: pan-y;
}
.ac-track {
  display: flex;
  transition: transform .5s ease;
  will-change: transform;
}
.ac-slide {
  flex: 0 0 100%;
  min-width: 0;
}
.ac-slide a,
.ac-slide img {
  display: block;
  width: 100%;
  height: auto;
}
.ac-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(17, 39, 66, .45);
  cursor: pointer;
}
.ac-nav:hover {
  background: rgba(17, 39, 66, .7);
}
.ac-nav.prev {
  left: 8px;
}
.ac-nav.next {
  right: 8px;
}
.ac-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 7px;
  display: flex;
  justify-content: center;
  gap: 6px;
}
.ac-dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: rgba(255, 255, 255, .55);
  cursor: pointer;
  transition: width .2s ease, background .2s ease;
}
.ac-dots button.on {
  width: 20px;
  background: #fff;
}
@media (prefers-reduced-motion: reduce) {
  .ac-track {
    transition: none;
  }
}
.ac-ribbon {
  position: absolute;
  top: 9px;
  left: -24px;
  width: 86px;
  padding: 2px 0;
  transform: rotate(-45deg);
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: #fff;
  background: #C0574D;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  pointer-events: none;
}
.flip {
  transform: rotate(180deg);
}
.tp .card-body {
  padding: 16px 14px;
}
.tp-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tp-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 50%;
  color: var(--cam);
  background: var(--giay-tham);
  border: 1px solid var(--vien-dam);
}
.tp-back:hover {
  text-decoration: none;
  filter: brightness(.96);
}
.tp-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1 1 auto;
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  color: var(--do);
}
.tp-top-end {
  flex: 0 0 38px;
}
.tp-sub {
  margin: 4px 0 14px;
  text-align: center;
  font-size: 13.5px;
  font-style: italic;
  color: var(--chu-mo);
}
.tp-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  padding: 8px;
  overflow-x: auto;
  background: var(--giay-dam);
  border: 1px solid var(--vien-dam);
  border-radius: 12px;
}
.tp-tab {
  flex: 1 0 84px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  border: 2px solid transparent;
  border-radius: 10px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  color: var(--chu-mo);
}
.tp-tab:hover {
  text-decoration: none;
  background: rgba(255, 255, 255, .6);
}
.tp-tab img {
  width: 52px;
  height: 40px;
  object-fit: contain;
}
.tp-tab.on {
  color: var(--do);
  background: #fff;
  border-color: var(--cam);
  box-shadow: var(--bong-nho);
}
.pkgs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.pkg {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  cursor: pointer;
  background: #fff;
  border: 2px solid var(--vien);
  border-radius: 10px;
  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    transform .06s ease;
}
.pkg input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.pkg:active {
  transform: scale(.98);
}
.pkg:has(input:checked) {
  border-color: var(--cam);
  box-shadow: 0 0 0 2px rgba(43, 91, 149, .25), var(--bong-nho);
}
.pkg:has(input:focus-visible) {
  outline: 2px solid var(--cam);
  outline-offset: 2px;
}
.pkg-img {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #4a3a96;
}
.pkg-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pkg-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 1;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  background: rgba(40, 30, 20, .78);
}
.pkg-coin,
.pkg-price {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
}
.pkg-coin {
  font-size: 14px;
  color: var(--chu);
  border-bottom: 1px solid var(--vien);
}
.pkg-coin img {
  flex: 0 0 auto;
}
.pkg-coin b {
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}
.pkg-coin {
  gap: 5px;
  padding-inline: 6px;
}
.pkg-price {
  font-size: 13px;
  font-weight: 700;
  color: var(--chu-mo);
}
.pkg-price .ico {
  color: var(--chu-nhat);
}
.tp-bar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(84px + env(safe-area-inset-bottom));
  z-index: 34;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: var(--may);
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  color: #7A4B00;
  background: #FBE8B8;
  border-top: 2px solid #E0B24C;
}
.tp-bar > span {
  flex: 1 1 auto;
  min-width: 0;
}
.tp-bar .btn {
  flex: 0 0 auto;
}
.tp-bar .ico {
  color: #C0574D;
}
body:has(.tp-bar) .foot {
  padding-bottom: 150px;
}
.sheet-bg {
  align-items: flex-end;
  padding: 0;
}
.sheet {
  max-width: var(--may);
  max-height: 78vh;
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  animation: sheetUp .28s ease-out;
}
.sheet-grip {
  width: 44px;
  height: 5px;
  margin: 8px auto 0;
  border-radius: 99px;
  background: var(--vien-dam);
}
@keyframes sheetUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sheet {
    animation: none;
  }
}
.tp-steps {
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--chu);
}
.tp-steps li {
  margin-bottom: 8px;
}
.copy-btn {
  white-space: nowrap;
  flex: 0 0 auto;
}
.sheet {
  max-height: 88vh;
}
.sheet-head {
  justify-content: center;
  text-align: center;
}
.sheet-head h2 {
  flex: 1 1 auto;
  text-align: center;
  font-size: 20px;
  color: var(--do);
}
.sheet-head .topbar-spacer {
  display: none;
}
.sheet-head .copy-btn {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
}
.sheet-pick {
  display: flex;
  justify-content: center;
  padding: 0 14px 12px;
  border-bottom: 1px solid var(--vien);
}
.pkg-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 14px;
  border-radius: 99px;
  font-size: 16px;
  font-weight: 800;
  color: var(--do);
  background: var(--lam-nhat);
  border: 1px solid #A9CDE9;
}
.sheet .card-body {
  padding: 14px;
}
.tp-pay {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 14px;
  color: var(--chu-mo);
}
.tp-pay b {
  font-size: 24px;
  font-weight: 800;
  color: var(--do);
}
.sheet .buoc-nhan {
  margin-top: 0;
}
.sheet .buoc-nhan.mt-24 {
  margin-top: 22px;
}
.tp-qr {
  display: flex;
  justify-content: center;
  margin: 4px 0 12px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--vien-dam);
  border-radius: 12px;
}
.tp-qr img {
  display: block;
  width: 100%;
  max-width: 220px;
  height: auto;
}
.tp-chip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 12px;
  margin-bottom: 12px;
  padding: 9px 12px;
  font-size: 13px;
  color: var(--chu-mo);
  background: var(--lam-nhat);
  border: 1px solid #A9CDE9;
  border-radius: 8px;
}
.tp-chip b {
  color: var(--do);
  font-size: 13.5px;
}
.tp-addr {
  padding: 10px 12px;
  background: var(--giay-dam);
  border: 1px dashed var(--vien-dam);
  border-radius: 8px;
}
.tp-addr-k {
  margin-bottom: 6px;
  font-size: 12.5px;
  color: var(--chu-mo);
}
.tp-addr-v {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tp-addr-v code {
  flex: 1 1 auto;
  min-width: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--chu);
  word-break: break-all;
}
.tp-rows {
  border: 1px solid var(--vien);
  border-radius: 10px;
  overflow: hidden;
}
.tp-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--vien);
}
.tp-row:last-child {
  border-bottom: 0;
}
.tp-row .k {
  flex: 0 0 38%;
  font-size: 12.5px;
  color: var(--chu-mo);
}
.tp-row .v {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--chu);
  word-break: break-word;
}
.tp-row .copy-btn {
  flex: 0 0 auto;
}
.pkg-coin {
  flex-wrap: wrap;
  row-gap: 0;
}
.pkg-bonus {
  font-style: normal;
  font-size: 12.5px;
  font-weight: 800;
  color: #2E9E5B;
  white-space: nowrap;
}
.pkg-price {
  margin-top: auto;
}
.tp-pay-line {
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  font-size: 15px;
  line-height: 1.5;
}
.tp-pay-line b {
  font-size: 20px;
}
.tp-coin-ico {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-left: 2px;
  vertical-align: middle;
}
.tp-buy {
  margin-bottom: 16px;
  padding: 12px;
  background: var(--lam-nhat);
  border: 1px solid #A9CDE9;
  border-radius: 10px;
}
.tp-buy p {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--chu-mo);
}
.tp-buy[hidden] {
  display: none;
}
.tp-bank {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding: 10px 12px;
  background: var(--giay-dam);
  border: 1px solid var(--vien-dam);
  border-radius: 12px;
}
.tp-bank img {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  object-fit: contain;
}
.tp-bank b {
  display: block;
  font-size: 15px;
  color: var(--do);
}
.tp-bank span {
  display: block;
  font-size: 12.5px;
  color: var(--chu-mo);
}
.pkg-price {
  white-space: nowrap;
  font-size: 12.5px;
  gap: 4px;
  padding-inline: 7px;
}
.tp-support {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin-top: 16px;
  padding: 12px;
  background: var(--lam-nhat);
  border: 1px solid #A9CDE9;
  border-radius: 10px;
}
.tp-support > .ico {
  flex: 0 0 auto;
  color: var(--cam);
}
.tp-support p {
  flex: 1 1 160px;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--chu-mo);
}
.tp-fb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1 1 auto;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 800;
  color: #fff;
  background: #1877F2;
  text-decoration: none;
}
.tp-fb:hover {
  text-decoration: none;
  background: #1468D8;
}
@media (max-width: 400px) {
  .tp-fb {
    flex: 1 1 100%;
  }
}
.tp-dev {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: -4px 0 10px;
  padding: 6px 8px;
  font-size: 11.5px;
  color: #7A4B00;
  background: #FFF4D6;
  border: 1px dashed #E0B24C;
  border-radius: 8px;
}
.tp-dev a {
  padding: 2px 8px;
  border-radius: 99px;
  color: #7A4B00;
  background: #fff;
  border: 1px solid #E0B24C;
  text-decoration: none;
}
.tp-dev a.on {
  color: #fff;
  background: #C0574D;
  border-color: #C0574D;
}

@media (max-width: 900px) {
  body { background-attachment: scroll; background-size: auto 100vh; }
}
.gate-links {
  color: #fff;
  text-shadow: 0 1px 3px rgba(4, 24, 48, .85);
}
.gate-links a {
  color: #fff;
  font-weight: 600;
}

/* 29/10/2026: ghi chú tài khoản web = tài khoản game (2 dòng, đỏ, đậm) và nền trắng cho dải liên kết dưới form. */
.note-same-account {
  text-align: center;
  color: #D32F2F;
  font-weight: 800;
  line-height: 1.45;
}
.gate-links {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 8px 14px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(17, 39, 66, .18);
  color: #2B3A4A;
  text-shadow: none;
}
.gate-links a,
.may-troi .gate-links a {
  color: #1F5FA8;
  font-weight: 700;
  text-shadow: none;
}