:root {
  /* Doi moi lan sua file nay va doi luon ?v= trong .liquid.
     JS doc bien nay de biet trinh duyet dang dung dung ban CSS hay khong. */
  --vx-css-version: "20260813-13";
  --vx-font: "Be Vietnam Pro", "Be Vietnam", sans-serif;
  --vx-bg: #000000;
  --vx-footer-bg: #171717;
  --vx-white: #ffffff;
  --vx-text-muted: rgba(255, 255, 255, 0.5);
  --vx-text-dim: rgba(255, 255, 255, 0.3);
  --vx-gold: #fdda7a;
  --vx-gold-soft: #ffe372;
  --vx-gold-deep: #be8a35;
  --vx-gold-mid: #ffb73c;
  --vx-gold-cream: #fbfae0;
  --vx-brown: #491010;
  --vx-duotone: #7e869e;
  --vx-input-bg: rgba(255, 255, 255, 0.15);
  --vx-input-border: rgba(255, 255, 255, 0.2);
  --vx-panel-bg: rgba(255, 255, 255, 0.1);
  --vx-panel-border: rgba(255, 255, 255, 0.15);
  --vx-sidebar-active: rgba(255, 0, 0, 0.3);
  --vx-fs-12: 12px;
  --vx-fs-14: 14px;
  --vx-fs-16: 16px;
  --vx-fs-18: 18px;
  --vx-fs-20: 20px;
  --vx-fs-32: 32px;
  --vx-fs-60: 60px;
  --vx-lh: 1.4;
  --vx-content: 1276px;
  --vx-gold-btn: linear-gradient(
    83.4deg,
    #fdda7a 4.26%,
    #fbfae0 24.83%,
    #fdda7a 51.49%,
    #be8a35 74.27%,
    #fdda7a 103.75%
  );
  --vx-gold-tab: linear-gradient(
    265.19deg,
    #fdda7a 35.82%,
    #fbfae0 3.33%,
    #fdda7a 28.09%,
    #be8a35 77.57%,
    #fdda7a 113.17%
  );
  --vx-gold-check: linear-gradient(
    100.83deg,
    #ffb73c 7.06%,
    #ffdc6c 51.79%,
    #ffc955 95.38%
  );
  --vx-underline: linear-gradient(
    1.84deg,
    #ffb73c 12.8%,
    rgba(255, 201, 85, 0) 71.98%
  );
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--vx-font);
  font-size: var(--vx-fs-14);
  line-height: var(--vx-lh);
  color: var(--vx-white);
  background: var(--vx-bg);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--vx-gold-soft);
}

a:hover {
  color: var(--vx-gold);
}

/* ---------- Page ---------- */

.vx-page {
  position: relative;
  min-height: 100vh;
  padding: 48px 0 80px;
  overflow: hidden;
  background: var(--vx-bg);
}

.vx-bg-deco {
  position: absolute;
  top: -40px;
  right: -80px;
  width: 786px;
  height: 1051px;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.vx-bg-glow {
  position: absolute;
  left: 50%;
  top: 55%;
  width: 525px;
  height: 860px;
  transform: translate(-60%, -50%) rotate(89deg);
  mix-blend-mode: plus-lighter;
  opacity: 0.9;
  object-fit: contain;
}

.vx-bg-cup {
  position: absolute;
  left: -120px;
  top: 0;
  width: 992px;
  height: 1748px;
  max-width: none;
  opacity: 0.5;
  mix-blend-mode: color-dodge;
  object-fit: cover;
  object-position: center top;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0) 56%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0) 56%);
}

.vx-container {
  position: relative;
  z-index: 1;
  max-width: var(--vx-content);
  padding-left: 16px;
  padding-right: 16px;
}

@media (min-width: 1300px) {
  .vx-container {
    padding-left: 0;
    padding-right: 0;
  }
}

/* ---------- Stepper ---------- */

.vx-stepper {
  margin-bottom: 48px;
}

.vx-stepper-track {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  max-width: 1099px;
  margin: 0 auto;
  position: relative;
  padding-top: 0;
}

.vx-stepper-line {
  position: absolute;
  left: 38px;
  right: 38px;
  top: 37px;
  width: calc(100% - 76px);
  height: 3px;
  pointer-events: none;
  z-index: 0;
}

.vx-stepper-line-base,
.vx-stepper-line-progress {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 999px;
}

.vx-stepper-line-base {
  width: 100%;
  background-image: linear-gradient(
    90deg,
    #ffb73c 6%,
    #ffdc6c 36%,
    #fff8b0 50%,
    #ffc955 76%
  );
  opacity: 0.35;
}

.vx-stepper-line-progress {
  width: 0%;
  background-image: linear-gradient(
    90deg,
    #ffb73c 6%,
    #ffdc6c 36%,
    #fff8b0 50%,
    #ffc955 76%
  );
  box-shadow: 0 0 6px rgba(255, 201, 85, 0.35);
  transition: width 0.35s ease;
}

.vx-stepper-track[data-progress="1"] .vx-stepper-line-progress {
  width: 0%;
}

.vx-stepper-track[data-progress="2"] .vx-stepper-line-progress {
  width: 33.333%;
}

.vx-stepper-track[data-progress="3"] .vx-stepper-line-progress {
  width: 66.666%;
}

.vx-stepper-track[data-progress="4"] .vx-stepper-line-progress {
  width: 100%;
}

.vx-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 160px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.vx-step-icon {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: transparent;
  border: none;
}

.vx-step-icon > img {
  width: 76px;
  height: 76px;
  display: block;
  object-fit: contain;
}

.vx-step-icon-stack {
  position: relative;
}

.vx-step-icon-stack .vx-step-circle {
  width: 76px;
  height: 76px;
  display: block;
}

.vx-step-icon-stack .vx-step-glyph {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 38px;
  height: 38px;
  transform: translate(-50%, -50%);
  object-fit: contain;
}

.vx-step-label {
  margin-top: 12px;
  font-size: var(--vx-fs-14);
  font-weight: 700;
  line-height: 1.3;
  color: var(--vx-text-muted);
}

.vx-step.is-active .vx-step-label,
.vx-step.is-done .vx-step-label {
  color: var(--vx-white);
}

/* ---------- Notice ---------- */

.vx-notice {
  position: relative;
  max-width: 1060px;
  margin: 0 auto 48px;
  padding: 24px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  gap: 16px;
  display: flex;
  flex-direction: column;
}

.vx-notice-intro {
  margin: 0;
  font-size: var(--vx-fs-16);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.16px;
  color: var(--vx-gold-soft);
}

.vx-notice-box {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vx-notice-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vx-notice-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--vx-fs-14);
  font-weight: 400;
  line-height: var(--vx-lh);
  color: var(--vx-white);
}

.vx-check {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.vx-check img,
.vx-check svg {
  width: 16px;
  height: 16px;
  display: block;
}

.vx-link {
  color: var(--vx-gold-soft);
  text-decoration: underline;
}

/* ---------- Page title ---------- */

.vx-page-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  margin-bottom: 60px;
  padding: 20px 90px;
}

.vx-page-title h1 {
  margin: 0;
  font-size: var(--vx-fs-60);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.6px;
  color: var(--vx-white);
  text-align: center;
  white-space: nowrap;
}

.vx-wing {
  width: 133px;
  height: 45px;
  flex-shrink: 0;
  display: block;
  object-fit: contain;
}

.vx-wing-left {
  transform: rotate(-12deg);
}

.vx-wing-right {
  transform: scaleY(-1) rotate(168deg);
}

/* ---------- Sections ---------- */

.vx-form {
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.vx-section {
  margin: 0;
}

.vx-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 40px;
  max-width: 393px;
}

.vx-section-cup {
  width: 42px;
  height: 74px;
  object-fit: contain;
  object-position: center bottom;
  flex-shrink: 0;
}

.vx-section-title-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.vx-section-title {
  margin: 0;
  font-size: var(--vx-fs-32);
  font-weight: 700;
  letter-spacing: -0.32px;
  line-height: normal;
  color: var(--vx-white);
}

.vx-section-underline {
  height: 2px;
  width: 100%;
  background-image: var(--vx-underline);
}

.vx-fields {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.vx-field-row {
  display: flex;
  gap: 20px;
  width: 100%;
}

.vx-field-row > .vx-field {
  flex: 1 1 0;
  min-width: 0;
}

.vx-field-row-lg {
  gap: 30px;
}

.vx-field-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.vx-field-stack > label,
.vx-field-stack .vx-label-block > label {
  margin-bottom: 0;
}

.vx-label-block {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}

.vx-label-block-date {
  gap: 4px;
  margin-bottom: 20px;
}

.vx-label-block-date > label,
.vx-label-block-date .vx-label {
  margin-bottom: 0;
}

.vx-hint-white {
  color: var(--vx-white);
  margin: 0;
}

/* ---------- Fields ---------- */

.vx-field {
  margin: 0;
}

.vx-field > label,
.vx-label {
  display: block;
  margin-bottom: 11px;
  font-size: var(--vx-fs-18);
  font-weight: 700;
  line-height: var(--vx-lh);
  letter-spacing: -0.16px;
  color: var(--vx-white);
}

.vx-label-hint {
  font-weight: 400;
  font-size: var(--vx-fs-14);
  color: var(--vx-text-muted);
  margin-left: 4px;
}

.vx-label-sub {
  font-weight: 400;
  font-size: var(--vx-fs-16);
  color: var(--vx-text-muted);
  letter-spacing: -0.16px;
  margin-left: 4px;
}

.vx-required {
  color: var(--vx-gold-soft);
  font-weight: 400;
}

.vx-hint {
  margin: 0;
  font-size: var(--vx-fs-14);
  font-weight: 400;
  color: var(--vx-text-muted);
  line-height: var(--vx-lh);
}

.vx-hint-tight {
  margin: 4px 0 0;
}

.vx-input,
.vx-textarea {
  width: 100%;
  background: var(--vx-input-bg);
  border: 1px solid var(--vx-input-border);
  border-radius: 4px;
  color: var(--vx-white);
  font-family: var(--vx-font);
  font-size: var(--vx-fs-14);
  font-weight: 400;
  line-height: var(--vx-lh);
  padding: 8px 16px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.vx-input {
  height: 50px;
}

.vx-input::placeholder,
.vx-textarea::placeholder {
  color: var(--vx-text-muted);
}

.vx-input:focus,
.vx-textarea:focus {
  border-color: var(--vx-gold);
  box-shadow: 0 0 0 2px rgba(253, 218, 122, 0.15);
}

.vx-textarea {
  height: 150px;
  resize: vertical;
  min-height: 150px;
}

/* ---------- Award tabs ---------- */

.vx-award-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin-top: 20px;
  margin-bottom: 20px;
  width: 100%;
}

.vx-award-tab {
  min-width: 180px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 17px;
  padding: 16px 32px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--vx-text-dim);
  font-family: var(--vx-font);
  font-size: var(--vx-fs-18);
  font-weight: 700;
  line-height: var(--vx-lh);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.vx-award-tab img {
  width: 26px;
  height: 46px;
  object-fit: contain;
  object-position: center bottom;
  flex-shrink: 0;
  opacity: 0.45;
}

.vx-award-tab:hover {
  border-color: rgba(253, 218, 122, 0.5);
  color: rgba(255, 255, 255, 0.7);
}

.vx-award-tab.is-active {
  border-color: var(--vx-gold);
  color: var(--vx-brown);
  text-shadow: 0.825px 0.825px 1.65px #fffade;
  box-shadow: inset 0 4px 4px rgba(60, 9, 9, 0.31);
}

.vx-award-tab.is-active::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: var(--vx-gold-tab);
  z-index: -1;
}

.vx-award-tab.is-active img {
  opacity: 1;
}

/* ---------- Category panel ---------- */

.vx-category-panel {
  display: flex;
  align-items: stretch;
  background: var(--vx-panel-bg);
  border: 1px solid var(--vx-panel-border);
  border-radius: 8px;
  padding: 20px;
  overflow: hidden;
  min-height: 349px;
}

/* Be ngang CO DINH. Truoc day la min-width + nowrap nen ten dai (vi du "Quang cao
   tren bao dien tu & nen tang mang xa hoi", 49 ky tu) keo cot rong ra, doi tab giai
   thuong la cot thut tho theo. Gio ten dai tu xuong hang trong khung co dinh. */
.vx-category-sidebar {
  flex: 0 0 260px;
  width: 260px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 20px;
  border-right: 1px solid rgba(255, 255, 255, 0.5);
}

.vx-cat-tab {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px;
  border: none;
  border-left: 2px solid transparent;
  background: transparent;
  color: var(--vx-white);
  font-family: var(--vx-font);
  font-size: var(--vx-fs-16);
  font-weight: 700;
  letter-spacing: -0.16px;
  line-height: 1.2;
  cursor: pointer;
  white-space: normal;
  overflow-wrap: break-word;
  transition: background 0.2s ease;
}

.vx-cat-tab:hover {
  background: rgba(255, 255, 255, 0.06);
}

.vx-cat-tab.is-active {
  background: var(--vx-sidebar-active);
  border-left-color: var(--vx-gold-mid);
}

.vx-category-body {
  flex: 1;
  padding: 8px 0 0 0;
  min-width: 0;
}

.vx-cat-pane {
  display: none;
  animation: vxFadeIn 0.25s ease;
}

.vx-cat-pane.is-active {
  display: block;
}

.vx-cat-grid {
  display: flex;
  gap: 64px;
  justify-content: center;
  padding: 0 24px;
}

.vx-cat-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 417px;
}

@keyframes vxFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Checkbox ---------- */

.vx-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  cursor: pointer;
  user-select: none;
}
.vx-preview-check-col .vx-checkbox {
  align-items: self-start;
}
/* O tich chi co o vuong (ten hang muc da la tieu de ben canh) */
.vx-checkbox-bare { gap: 0; flex: 0 0 auto; }

.vx-checkbox input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.vx-checkbox-box {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 4px 6px;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.vx-checkbox-box img,
.vx-checkbox-box svg {
  width: 12px;
  height: 9px;
  display: block;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.vx-checkbox input:checked + .vx-checkbox-box {
  background-image: var(--vx-gold-check);
  border-color: transparent;
}

.vx-checkbox input:checked + .vx-checkbox-box img,
.vx-checkbox input:checked + .vx-checkbox-box svg,
.vx-checkbox-box.is-checked img,
.vx-checkbox-box.is-checked svg {
  opacity: 1;
}

.vx-checkbox-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.vx-checkbox-text strong {
  font-size: var(--vx-fs-14);
  font-weight: 400;
  color: var(--vx-white);
  line-height: var(--vx-lh);
}

.vx-checkbox-text em {
  font-style: normal;
  font-size: var(--vx-fs-12);
  font-weight: 400;
  color: var(--vx-text-muted);
  letter-spacing: -0.12px;
  line-height: 1.2;
}

.vx-checkbox-inline {
  align-items: center;
}

.vx-checkbox-inline .vx-checkbox-text span,
.vx-checkbox-inline .vx-checkbox-text strong {
  white-space: nowrap;
  font-size: var(--vx-fs-14);
  font-weight: 400;
  color: var(--vx-white);
  line-height: var(--vx-lh);
}

/* ---------- Date row ---------- */

.vx-date-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
}

.vx-date-left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px 117px;
}

.vx-date-group {
  display: flex;
  align-items: center;
  gap: 26px;
}

.vx-date-label {
  font-size: var(--vx-fs-14);
  font-weight: 500;
  line-height: 1.3;
  color: var(--vx-white);
  white-space: nowrap;
  min-width: 30px;
}

.vx-date-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--vx-input-bg);
  border: 1px solid var(--vx-input-border);
  border-radius: 8px;
  padding: 10px 16px;
  min-width: 200px;
}

.vx-date-input-wrap img,
.vx-date-input-wrap svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: block;
}

.vx-date-input-wrap .vx-input {
  height: auto;
  padding: 0;
  border: none;
  background: transparent;
  font-size: var(--vx-fs-16);
  letter-spacing: -0.16px;
  box-shadow: none;
}

.vx-date-input-wrap .vx-input:focus {
  box-shadow: none;
}

.vx-date-input-wrap.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* ---------- Actions ---------- */

.vx-actions {
  display: flex;
  justify-content: flex-end;
}

.vx-btn-next {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 150px;
  padding: 10px 24px;
  border: none;
  border-radius: 9999px;
  background-image: var(--vx-gold-btn);
  color: var(--vx-brown);
  font-family: var(--vx-font);
  font-size: var(--vx-fs-14);
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 1px 3px #f6d846, inset 0 1px 0 #fff7be;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.vx-btn-next:hover {
  color: var(--vx-brown);
  text-decoration: none;
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.vx-btn-next:active {
  transform: translateY(0);
}

.vx-btn-next img {
  width: 24px;
  height: 24px;
  transform: rotate(90deg);
}

.vx-actions-between {
  justify-content: space-between;
  width: 100%;
}

.vx-btn-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 150px;
  padding: 10px 24px;
  border: 0.5px solid var(--vx-white);
  border-radius: 9999px;
  background: transparent;
  backdrop-filter: blur(2.85px);
  -webkit-backdrop-filter: blur(2.85px);
  color: var(--vx-white);
  font-family: var(--vx-font);
  font-size: var(--vx-fs-14);
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
}

.vx-btn-back:hover {
  color: var(--vx-white);
  text-decoration: none;
  filter: brightness(1.08);
}

.vx-btn-back img {
  width: 24px;
  height: 24px;
  transform: rotate(-90deg);
}

/* ---------- Step 2: Hồ sơ đính kèm ---------- */

.vx-form-step2 {
  gap: clamp(2rem, 4.2vw, 3.75rem);
  width: 100%;
}

.vx-attach-block {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3.1vw, 2.5rem);
  width: 100%;
}

.vx-attach-head {
  width: 100%;
}

.vx-attach-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.vx-attach-head-stack {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  align-items: flex-start;
}

.vx-attach-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  width: min(30.8%, 24.5rem);
  max-width: 100%;
  flex-shrink: 0;
  overflow: visible;
}

.vx-attach-title-wrap-wide {
  width: auto;
  max-width: 100%;
}

.vx-attach-title {
  margin: 0;
  font-size: clamp(1.25rem, 2.2vw, var(--vx-fs-32));
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: normal;
  color: var(--vx-white);
  white-space: nowrap;
}

.vx-attach-title .vx-required {
  font-weight: 400;
  margin-left: 0;
}

.vx-attach-meta {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.625rem;
  flex-wrap: wrap;
  opacity: 0.7;
  font-size: clamp(0.875rem, 1.1vw, var(--vx-fs-16));
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--vx-white);
  line-height: 1.4;
  flex: 1 1 auto;
  min-width: 0;
}

.vx-attach-meta img,
.vx-attach-meta svg {
  width: 0.375rem;
  height: 0.375rem;
  flex-shrink: 0;
}

.vx-attach-meta strong {
  font-weight: 700;
  letter-spacing: -0.01em;
}

.vx-attach-desc {
  margin: 0;
  font-size: clamp(0.875rem, 1.1vw, var(--vx-fs-16));
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--vx-white);
  line-height: 1.4;
  white-space: nowrap;
}

.vx-thumb-panel {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 1rem;
  overflow: hidden;
}

.vx-thumb-upload {
  position: relative;
  flex: 0 0 57.68%;
  width: 57.68%;
  aspect-ratio: 16 / 9;
  margin: 0;
  background: #292929;
  border-radius: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.vx-thumb-deco {
  position: absolute;
  pointer-events: none;
  opacity: 1;
}

.vx-thumb-deco-1 {
  left: 0;
  top: 27.05%;
  width: 64.33%;
  height: 72.9%;
}

.vx-thumb-deco-2 {
  left: 50.75%;
  top: 43.43%;
  width: 49.25%;
  height: 56.52%;
}

.vx-thumb-deco-3 {
  left: 54.89%;
  top: 21.5%;
  width: 10.6%;
  height: auto;
  aspect-ratio: 1;
  transform: rotate(-45deg);
}

.vx-upload-cta {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55em;
  width: auto;
  min-width: 5.125rem;
}

.vx-plus-btn {
  width: clamp(2.75rem, 4.7vw, 3.75rem);
  height: clamp(2.75rem, 4.7vw, 3.75rem);
  border-radius: 50%;
  background-image: linear-gradient(
    150.73deg,
    #fdda7a 13.49%,
    #fbfae0 8.61%,
    #fdda7a 29.8%,
    #be8a35 68.85%,
    #fdda7a 92.67%
  );
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
}

.vx-plus-btn img,
.vx-plus-btn svg {
  width: 44%;
  height: 44%;
  max-width: 1.656rem;
  max-height: 1.656rem;
  display: block;
  object-fit: contain;
}

.vx-plus-btn-sm {
  width: clamp(2rem, 3.25vw, 2.6rem);
  height: clamp(2rem, 3.25vw, 2.6rem);
  border-radius: 50%;
  padding: 0;
}

.vx-plus-btn-sm img,
.vx-plus-btn-sm svg {
  width: 44%;
  height: 44%;
  max-width: 1.125rem;
  max-height: 1.125rem;
}

.vx-upload-cta-text {
  font-size: clamp(0.875rem, 1.1vw, var(--vx-fs-16));
  letter-spacing: -0.01em;
  color: var(--vx-white);
  text-align: center;
  line-height: 1.4;
  white-space: nowrap;
}

.vx-thumb-specs {
  list-style: none;
  flex: 0 0 auto;
  align-self: center;
  width: 19.9%;
  margin: 0 0 0 10.2%;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.35em;
  font-size: clamp(0.875rem, 1.1vw, var(--vx-fs-16));
  letter-spacing: -0.01em;
  color: var(--vx-white);
  line-height: 1.4;
}

.vx-gallery-row {
  display: flex;
  gap: 1.57%;
  width: 100%;
}

.vx-gallery-slot {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  aspect-ratio: 239 / 179;
  height: auto;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4.1%;
  background: #292929;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6%;
  cursor: pointer;
  overflow: hidden;
  position: relative;
}

.vx-gallery-slot.is-upload {
  background: transparent;
}

.vx-gallery-upload-text {
  font-size: clamp(0.875rem, 1.25vw, var(--vx-fs-18));
  font-weight: 500;
  color: var(--vx-white);
  text-align: center;
  line-height: 1.4;
}

.vx-gallery-empty {
  width: 20.5%;
  height: auto;
  aspect-ratio: 49 / 38;
  object-fit: contain;
  opacity: 0.85;
  z-index: 1;
}

.vx-link-panel,
.vx-drive-panel {
  width: 100%;
  padding: clamp(1.25rem, 2.35vw, 1.875rem);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.vx-link-panel {
  gap: clamp(1.25rem, 2.35vw, 1.875rem);
}

.vx-link-label {
  display: flex;
  align-items: center;
  gap: 0.7em;
  font-size: clamp(1rem, 1.25vw, var(--vx-fs-18));
  font-weight: 700;
  color: var(--vx-white);
  line-height: 1.4;
}

.vx-link-label img,
.vx-link-label svg {
  width: 2.625em;
  height: auto;
  aspect-ratio: 42 / 25;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}

.vx-link-label em {
  font-style: normal;
  font-size: 0.89em;
  font-weight: 700;
  color: var(--vx-text-muted);
  letter-spacing: -0.01em;
}

.vx-drive-icon {
  width: 1.625em !important;
  height: auto !important;
  aspect-ratio: 26 / 24;
}

.vx-input-dark {
  background: rgba(0, 0, 0, 0.15);
}

.vx-pdf-row {
  display: flex;
  gap: 1.57%;
  width: 100%;
}

.vx-pdf-card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding: clamp(1.25rem, 2.35vw, 1.875rem);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.vx-pdf-card-title {
  margin: 0;
  font-size: clamp(1rem, 1.25vw, var(--vx-fs-18));
  font-weight: 700;
  color: var(--vx-white);
  line-height: 1.4;
}

.vx-pdf-card-title span {
  color: var(--vx-text-muted);
}

.vx-pdf-card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
}

.vx-pdf-icon {
  position: absolute;
  left: 4.6%;
  top: 42%;
  width: 7.5%;
  max-width: 2.94rem;
  height: auto;
  aspect-ratio: 47 / 66;
  object-fit: contain;
  pointer-events: none;
}

.vx-pdf-card-copy {
  text-align: center;
  color: var(--vx-white);
}

.vx-pdf-card-main {
  margin: 0;
  font-size: clamp(1rem, 1.25vw, var(--vx-fs-18));
  font-weight: 400;
  line-height: 1.4;
}

.vx-pdf-card-sub {
  margin: 0.125em 0 0;
  font-size: clamp(0.8125rem, 1vw, var(--vx-fs-14));
  font-weight: 400;
  line-height: 1.4;
}

.vx-btn-file {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 7.375rem;
  margin: 0;
  padding: 0.625rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid var(--vx-gold);
  background: rgba(255, 255, 255, 0.1);
  cursor: pointer;
}

.vx-btn-file span {
  font-size: clamp(0.8125rem, 1vw, var(--vx-fs-14));
  font-weight: 400;
  line-height: 1.4;
  background-image: var(--vx-gold-btn);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
}

.vx-btn-file-wide {
  min-width: 0;
  flex-shrink: 0;
  /* Khong bi bop lai lam chu tran ra ngoai vien */
  width: auto;
  white-space: nowrap;
}

.vx-drive-checklist {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  width: 100%;
}

.vx-drive-checklist-title {
  margin: 0;
  font-size: clamp(1rem, 1.25vw, var(--vx-fs-18));
  font-weight: 700;
  color: var(--vx-white);
  line-height: 1.4;
}

.vx-drive-grid {
  display: flex;
  gap: 5%;
  padding-top: 0.5rem;
  width: 100%;
}

.vx-drive-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.vx-drive-col .vx-checkbox-text span {
  font-size: clamp(0.8125rem, 1vw, var(--vx-fs-14));
  font-weight: 400;
  color: var(--vx-white);
  line-height: 1.4;
}

.vx-license-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.vx-license-hint {
  font-size: clamp(0.8125rem, 1vw, var(--vx-fs-14));
  color: var(--vx-text-muted);
  line-height: 1.4;
  white-space: nowrap;
}

/* ---------- Step 3: Cam kết tham gia cuộc thi ---------- */

.vx-form-step3 {
  gap: clamp(2rem, 4.2vw, 3.75rem);
  width: 100%;
}

.vx-commit-layout {
  display: flex;
  align-items: flex-start;
  gap: 1.57%;
  width: 100%;
}

.vx-commit-main {
  flex: 1 1 0;
  min-width: 0;
  width: 66.14%;
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 2.35vw, 2.5rem);
}

.vx-commit-aside {
  flex: 0 0 32.29%;
  width: 32.29%;
  margin-top: clamp(3.5rem, 5.5vw, 4.75rem);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.vx-commit-panel {
  display: flex;
  gap: clamp(1rem, 2.5vw, 2rem);
  width: 100%;
  padding: clamp(1.25rem, 2.35vw, 1.875rem);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.vx-commit-download {
  flex: 0 1 47%;
  max-width: 23.4rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}

.vx-commit-group {
  background: rgba(255, 255, 255, 0.05);
  display: block;
  width: 100%;
  padding: 20px;
  border-radius: 0.5rem;
}

.vx-commit-lead {
  margin: 0;
  font-size: clamp(0.875rem, 1.1vw, var(--vx-fs-16));
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--vx-white);
  line-height: 1.4;
}

.vx-btn-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 0.625rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid var(--vx-gold);
  background-image: var(--vx-gold-btn);
  text-decoration: none;
  color: var(--vx-brown);
}

.vx-btn-download:hover {
  color: var(--vx-brown);
  text-decoration: none;
  filter: brightness(1.05);
}

.vx-btn-download img,
.vx-btn-download svg {
  width: 1.5rem;
  height: 1.5rem;
  display: block;
  object-fit: contain;
  flex-shrink: 0;
}

.vx-btn-download span {
  font-size: clamp(0.8125rem, 1vw, var(--vx-fs-14));
  font-weight: 700;
  line-height: 1.3;
  color: var(--vx-brown);
  text-shadow: 0.825px 0.825px 1.65px #fffade;
  white-space: nowrap;
}

.vx-commit-upload {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  padding: clamp(1.25rem, 2.35vw, 1.875rem);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
}

.vx-commit-upload > div {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 1rem;
  cursor: pointer;
}

.vx-commit-cloud {
  width: clamp(2.75rem, 4.5vw, 3.6rem);
  height: auto;
  aspect-ratio: 58 / 46;
  object-fit: contain;
  display: block;
}

.vx-commit-upload-text {
  font-size: clamp(0.875rem, 1.1vw, var(--vx-fs-16));
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--vx-white);
  text-align: center;
  line-height: 1.4;
}

/* Truoc day ep width: 12rem, ma chu ben trong co white-space: nowrap
   -> "Chon file de tai len" dai hon 12rem se tran ra ngoai vien.
   Gio de o tu gian theo chu, chi giu be ngang TOI THIEU. */
.vx-commit-upload .vx-btn-file {
  width: auto;
  min-width: 12rem;
  max-width: 100%;
  padding: 0.625rem 1.25rem;
  pointer-events: none;
}

/* Khung hep hon be ngang cua chu -> cho xuong hang thay vi tran ra ngoai */
.vx-commit-upload .vx-btn-file span {
  white-space: normal;
  text-align: center;
  overflow-wrap: break-word;
}

.vx-commit-guide-block {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.25rem 1rem;
  width: 100%;
}

.vx-commit-guide-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.vx-commit-guide-icon {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.vx-commit-guide-icon img,
.vx-commit-guide-icon svg {
  width: 73%;
  height: auto;
  max-height: 78%;
  object-fit: contain;
  display: block;
}

.vx-commit-guide-head h3 {
  margin: 0;
  font-size: clamp(1rem, 1.25vw, var(--vx-fs-18));
  font-weight: 700;
  color: var(--vx-gold-soft);
  line-height: 1.4;
  white-space: nowrap;
}

.vx-commit-list {
  margin: 0;
  padding: 0 0 0 1.3rem;
  list-style: disc;
  color: var(--vx-white);
  font-size: clamp(0.8125rem, 1vw, var(--vx-fs-14));
  font-weight: 400;
  line-height: 2.4;
}

.vx-commit-list li + li {
  margin-top: 0;
}

/* ---------- Step 4: Preview ---------- */

.vx-preview {
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 4.7vw, 3.75rem);
  width: 100%;
}

.vx-preview-block {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4.7vw, 3.75rem);
  width: 100%;
}

.vx-preview-block .vx-page-title {
  margin-bottom: 0;
}

.vx-preview-body {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 2.35vw, 1.875rem);
  width: 100%;
}

.vx-preview-section-head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: min(30.8%, 24.5rem);
  max-width: 100%;
}

.vx-preview-cup {
  width: 2.625rem;
  height: auto;
  aspect-ratio: 42 / 74;
  object-fit: contain;
  flex-shrink: 0;
}

.vx-preview-section-head .vx-attach-title-wrap {
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
}

.vx-preview-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem clamp(2rem, 24.9vw, 19.875rem);
  width: 100%;
}

.vx-preview-meta-row-tight {
  justify-content: flex-start;
  gap: 1rem clamp(2rem, 24.9vw, 19.875rem);
}

.vx-preview-meta {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: clamp(1rem, 1.25vw, var(--vx-fs-18));
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.8);
}

.vx-preview-meta strong {
  font-weight: 700;
  color: var(--vx-white);
}

.vx-preview-meta-lg strong,
.vx-preview-meta-lg span {
  font-size: clamp(1rem, 1.25vw, var(--vx-fs-18));
}

.vx-preview-meta-lg strong {
  line-height: 1.4;
}

.vx-preview-criteria {
  width: 100%;
  padding: clamp(1.25rem, 2.35vw, 1.875rem) clamp(1rem, 1.55vw, 1.25rem);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 2.35vw, 1.875rem);
}

.vx-preview-criteria-top,
.vx-preview-criteria-list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.vx-preview-criteria h3 {
  margin: 0;
  font-size: clamp(1rem, 1.25vw, var(--vx-fs-18));
  font-weight: 700;
  color: var(--vx-gold-soft);
  line-height: 1.4;
}

.vx-preview-criteria-top .vx-preview-meta strong {
  font-size: clamp(0.875rem, 1.1vw, var(--vx-fs-16));
  line-height: 1.2;
}

.vx-preview-criteria-top .vx-preview-meta span {
  font-size: clamp(0.875rem, 1.1vw, var(--vx-fs-16));
}

.vx-preview-check-grid {
  display: flex;
  gap: 5%;
  padding-top: 0.5rem;
  width: 100%;
  max-width: 82.8%;
}

.vx-preview-check-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.vx-checkbox-readonly {
  cursor: default;
  pointer-events: none;
}

.vx-checkbox-box.is-checked {
  background-image: var(--vx-gold-check);
  border-color: transparent;
}

.vx-checkbox-box.is-checked img,
.vx-checkbox-box.is-checked svg {
  opacity: 1;
  visibility: visible;
}

.vx-preview-desc-stack {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: 100%;
}

.vx-preview-desc {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
}

.vx-preview-desc h3 {
  margin: 0;
  font-size: clamp(1rem, 1.25vw, var(--vx-fs-18));
  font-weight: 700;
  color: var(--vx-white);
  line-height: 1.4;
}

.vx-preview-desc p {
  margin: 0;
  font-size: clamp(0.875rem, 1.1vw, var(--vx-fs-16));
  font-weight: 400;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.4;
}

.vx-preview-dates {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  color: var(--vx-white) !important;
}

.vx-preview-dates strong {
  font-weight: 700;
  letter-spacing: -0.01em;
}

.vx-preview-attach {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3.1vw, 2.5rem);
  width: 100%;
}

.vx-preview-attach-item {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 2.35vw, 1.875rem);
  width: 100%;
}

.vx-preview-attach-thumb {
  width: 57.68%;
  max-width: 100%;
}

.vx-preview-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 1rem;
  overflow: hidden;
}

.vx-preview-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vx-preview-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 1.57%;
  width: 100%;
}

.vx-preview-gallery img {
  flex: 1 1 0;
  width: 18.7%;
  min-width: 0;
  aspect-ratio: 239 / 179;
  height: auto;
  border-radius: 0.5rem;
  object-fit: cover;
  display: block;
}

.vx-preview-input {
  width: 100%;
  min-height: 3.125rem;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  font-size: clamp(0.8125rem, 1vw, var(--vx-fs-14));
  color: var(--vx-text-muted);
  line-height: 1.4;
}

.vx-preview-file-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: min(100%, 79%);
}

.vx-preview-confirm {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 2.35vw, 1.875rem);
  width: min(100%, 79%);
}

.vx-btn-submit {
  min-width: 11.5rem;
  white-space: nowrap;
}

.vx-preview .vx-link-label img,
.vx-preview .vx-link-label svg {
  width: 2.15rem;
  height: auto;
  aspect-ratio: 35 / 24;
}

/* ---------- Confirm submit modal ---------- */

.vx-confirm-modal .modal-dialog {
  max-width: min(700px, 92vw);
  margin: 1.75rem auto;
}

.vx-confirm-dialog {
  position: relative;
  width: 100%;
  /* Truoc day co min-height: 290px co dinh, nen popup luon cao bang nhau du
     noi dung dai ngan khac nhau - popup "Nop bai thanh cong" chi co mot dong
     chu ma van cao gan gap doi, thua han mot khoang trong o duoi.
     Gio de chieu cao chay theo noi dung, chi giu mot muc toi thieu vua phai. */
  min-height: 210px;
  display: flex;
  flex-direction: column;
  border: none;
  border-radius: 1rem;
  background-image: linear-gradient(127.9deg, #240303 12.93%, #cd1818 154.28%);
  overflow: hidden;
  box-shadow: none;
}

.vx-confirm-deco {
  position: absolute;
  right: -8%;
  bottom: -18%;
  width: 72%;
  height: auto;
  opacity: 0.2;
  pointer-events: none;
  transform: rotate(-7.22deg);
  object-fit: contain;
}

.vx-confirm-close {
  position: absolute;
  top: 1.4rem;
  right: 1.4rem;
  z-index: 2;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.vx-confirm-close img,
.vx-confirm-close svg {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.vx-confirm-body {
  position: relative;
  z-index: 1;
  /* Chiem het chieu cao con lai de day nut xuong day popup */
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.125rem;
  /* Truoc day chi 460px trong khi popup rong 560px - chu bi ep xuong dong
     du hai ben van con cho trong. Noi ra sat me popup, chi chua le hai ben. */
  width: min(100%, 520px);
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 2.75rem) 1.25rem clamp(1.5rem, 3vw, 2rem);
  text-align: center;
}

.vx-confirm-title {
  margin: 0 0 0.25rem;
  text-wrap: balance;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: normal;
  color: var(--vx-gold-soft);
}

.vx-confirm-text {
  margin: 0;
  /* Chia deu cac dong thay vi de dong cuoi tro tro mot hai chu */
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: normal;
  font-size: clamp(0.875rem, 1.1vw, var(--vx-fs-16));
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.4;
  color: var(--vx-white);
}

.vx-confirm-actions {
  /* margin-top: auto day hang nut xuong DAY popup thay vi de no troi ngay
     duoi doan chu, chua lung chung giua khoang trong */
  margin-top: auto;
  padding-top: 0.75rem;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 1.25rem;
}

.vx-confirm-btn {
  margin: 0;
  /* To hon mot chut cho can voi khoi chu ben tren, va de bam tren dien thoai */
  min-width: 160px;
  padding: 0.875rem 1.75rem;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 9999px;
  background: transparent;
  color: var(--vx-white);
  font-family: var(--vx-font);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.vx-confirm-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.8);
  color: var(--vx-white);
}

.vx-confirm-modal .modal-backdrop.show {
  opacity: 0.7;
}

.vx-account-body {
  width: auto;
  max-width: 100%;
  padding-top: clamp(3.5rem, 6vw, 4.5rem);
  gap: clamp(1.5rem, 3vw, 2.25rem);
}

.vx-account-bird {
  position: absolute;
  left: -8%;
  top: -10%;
  width: 55%;
  height: auto;
  opacity: 0.2;
  pointer-events: none;
  transform: rotate(-7.22deg);
  object-fit: contain;
  z-index: 0;
}

.vx-account-cup {
  position: absolute;
  right: -15%;
  top: 6%;
  width: 70%;
  height: auto;
  max-height: 110%;
  opacity: 0.2;
  pointer-events: none;
  object-fit: cover;
  object-position: center top;
  z-index: 0;
}

/* ---------- Contact info popup ---------- */

.vx-page-popup-only {
  min-height: 100vh;
  background: var(--vx-bg);
}
.vx-contact-dialog {
  position: relative;
  width: 100%;
  border: 1px solid var(--vx-gold);
  border-radius: 16px;
  background: #000000;
  overflow: hidden;
  box-shadow: none;
}

.vx-contact-deco {
  position: absolute;
  right: 0;
  top: 0;
  width: 72%;
  height: auto;
  max-height: 105%;
  opacity: 0.8;
  pointer-events: none;
  object-fit: contain;
  object-position: right top;
  z-index: 0;
}

.vx-contact-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  padding: 30px 48px;
}

.vx-contact-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  width: 100%;
}

.vx-contact-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: 100%;
  margin: 0;
  padding: 40px 24px;
}

.vx-contact-title h2 {
  margin: 0;
  font-size: clamp(22px, 2.4vw, var(--vx-fs-32));
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: normal;
  color: var(--vx-white);
  white-space: nowrap;
}

.vx-contact-title .vx-wing {
  width: clamp(72px, 12vw, 133px);
  height: auto;
  aspect-ratio: 133 / 45;
}

.vx-contact-lead {
  margin: 0;
  /* width: 100% de doan van dan trai het be ngang; thieu no thi flex long nhau
     tinh be ngang theo noi dung va doan van bi bop lai giua hai khoang trong lon. */
  width: 100%;
  max-width: 632px;
  font-size: var(--vx-fs-14);
  font-weight: 400;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
}

.vx-contact-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

.vx-contact-form .vx-field-row {
  gap: 16px;
}

.vx-contact-form .vx-field-stack {
  gap: 11px;
}

.vx-contact-form .vx-field > label,
.vx-contact-form .vx-field-stack > label {
  margin-bottom: 0;
}

.vx-contact-select-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 50px;
  border: 1px solid var(--vx-input-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
}

.vx-contact-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 10px 44px 10px 14px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--vx-white);
  font-family: var(--vx-font);
  font-size: var(--vx-fs-14);
  font-weight: 500;
  line-height: 1.3;
  outline: none;
  cursor: pointer;
}

.vx-contact-select option {
  color: #111;
  background: #fff;
}

.vx-contact-select-arrow {
  position: absolute;
  right: 12px;
  top: 50%;
  width: 24px;
  height: 24px;
  transform: translateY(-50%);
  pointer-events: none;
}

.vx-contact-actions {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 4px;
}

/* ---------- Flatpickr ---------- */

.flatpickr-calendar {
  background: #171717 !important;
  border: 1px solid var(--vx-input-border) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5) !important;
  font-family: var(--vx-font) !important;
}

.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year,
.flatpickr-weekdays,
span.flatpickr-weekday,
.flatpickr-day {
  background: transparent !important;
  color: var(--vx-white) !important;
  fill: var(--vx-white) !important;
}

.flatpickr-day:hover,
.flatpickr-day:focus {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: transparent !important;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: var(--vx-gold) !important;
  border-color: var(--vx-gold) !important;
  color: var(--vx-brown) !important;
}

.flatpickr-day.today {
  border-color: var(--vx-gold) !important;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  fill: var(--vx-gold) !important;
  color: var(--vx-gold) !important;
}

/* ---------- Responsive ---------- */

@media (max-width: 1199.98px) {
  .vx-page-title {
    padding: 12px 16px;
    gap: 16px;
  }

  .vx-page-title h1 {
    font-size: 36px;
    white-space: normal;
  }

  .vx-wing {
    width: 80px;
    height: 28px;
  }

  .vx-award-tabs {
    gap: 16px;
  }

  .vx-cat-grid {
    gap: 32px;
    padding: 0 12px;
  }
}

@media (max-width: 991.98px) {
  .vx-field-row,
  .vx-field-row-lg {
    flex-direction: column;
    gap: 24px;
  }

  .vx-category-panel {
    flex-direction: column;
  }

  .vx-category-sidebar {
    flex: 1 1 auto;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    padding-right: 0;
    padding-bottom: 16px;
    margin-bottom: 16px;
    gap: 6px;
  }

  .vx-cat-tab {
    width: auto;
    border-radius: 6px;
    border-left-width: 0;
    border-bottom: 2px solid transparent;
  }

  .vx-cat-tab.is-active {
    border-left-color: transparent;
    border-bottom-color: var(--vx-gold-mid);
  }

  .vx-cat-grid {
    flex-direction: column;
    gap: 20px;
  }

  .vx-cat-col {
    max-width: none;
  }
}

@media (max-width: 767.98px) {
  .vx-bg-deco {
    opacity: 0.45;
    width: 420px;
    height: 560px;
    right: -120px;
  }

  .vx-page {
    padding: 24px 0 60px;
  }

  .vx-step {
    width: 72px;
  }

  .vx-step-icon {
    width: 48px;
    height: 48px;
  }

  .vx-step-icon > img,
  .vx-step-icon-stack .vx-step-circle {
    width: 48px;
    height: 48px;
  }

  .vx-step-icon-stack .vx-step-glyph {
    width: 24px;
    height: 24px;
  }

  .vx-stepper-line {
    top: 23px;
    left: 24px;
    right: 24px;
    width: calc(100% - 48px);
  }

  .vx-step-label {
    font-size: 11px;
  }

  .vx-page-title h1 {
    font-size: 24px;
  }

  .vx-wing {
    display: none;
  }

  .vx-section-title {
    font-size: 24px;
  }

  .vx-award-tab {
    flex: 1 1 calc(50% - 8px);
    min-width: 0;
    padding: 12px 14px;
    font-size: 14px;
    gap: 10px;
  }

  .vx-award-tab img {
    width: 18px;
    height: 32px;
  }

  .vx-date-left {
    gap: 16px;
    width: 100%;
  }

  .vx-date-group {
    width: 100%;
  }

  .vx-date-input-wrap {
    flex: 1;
  }

  .vx-date-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .vx-actions {
    justify-content: stretch;
  }

  .vx-btn-next {
    width: 100%;
  }

  .vx-actions-between {
    flex-direction: column-reverse;
    gap: 12px;
  }

  .vx-btn-back {
    width: 100%;
  }

  .vx-attach-head-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .vx-attach-title-wrap {
    width: 100%;
  }

  .vx-attach-title {
    white-space: normal;
  }

  .vx-attach-desc {
    white-space: normal;
  }

  .vx-attach-meta {
    justify-content: flex-start;
  }

  .vx-thumb-panel {
    flex-direction: column;
  }

  .vx-thumb-upload {
    flex: none;
    width: 100%;
    aspect-ratio: 16 / 9;
  }

  .vx-thumb-specs {
    width: 100%;
    margin: 0;
    padding: 1.5rem;
  }

  .vx-gallery-row {
    flex-wrap: wrap;
    gap: 3%;
    row-gap: 0.75rem;
  }

  .vx-gallery-slot {
    flex: 1 1 calc(50% - 2%);
    aspect-ratio: 4 / 3;
  }

  .vx-pdf-row,
  .vx-drive-grid {
    flex-direction: column;
    gap: 1.25rem;
  }

  .vx-pdf-icon {
    left: 1.25rem;
    width: 2.5rem;
    top: 4.5rem;
  }

  .vx-license-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .vx-license-hint {
    white-space: normal;
  }

  .vx-attach-title {
    font-size: 1.5rem;
  }

  .vx-commit-layout {
    flex-direction: column;
    gap: 1.5rem;
  }

  .vx-commit-main,
  .vx-commit-aside {
    width: 100%;
    flex: none;
  }

  .vx-commit-aside {
    margin-top: 0;
  }

  .vx-commit-panel {
    flex-direction: column;
    align-items: stretch;
  }

  .vx-commit-download {
    flex: none;
    max-width: none;
    width: 100%;
  }

  .vx-commit-upload {
    width: 100%;
  }

  .vx-commit-guide-head h3 {
    white-space: normal;
  }

  .vx-btn-download {
    width: 100%;
  }

  .vx-btn-download span {
    white-space: normal;
    text-align: center;
  }

  .vx-preview-meta-row,
  .vx-preview-file-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .vx-preview-check-grid {
    flex-direction: column;
    max-width: none;
    gap: 1.25rem;
  }

  .vx-preview-attach-thumb,
  .vx-preview-file-row,
  .vx-preview-confirm {
    width: 100%;
  }

  .vx-preview-gallery {
    gap: 3%;
    row-gap: 0.75rem;
  }

  .vx-preview-gallery img {
    flex: 1 1 calc(50% - 2%);
    width: calc(50% - 2%);
  }

  .vx-preview-section-head {
    width: 100%;
  }

  .vx-btn-submit {
    width: 100%;
  }

  .vx-confirm-actions {
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
  }

  .vx-confirm-btn {
    width: 100%;
    white-space: normal;
  }

  .vx-contact-body {
    padding: 24px 20px 28px;
  }

  .vx-contact-title {
    padding: 0;
    gap: 6px;
  }

  .vx-contact-form .vx-field-row,
  .vx-contact-row-role {
    flex-direction: column;
  }

  .vx-contact-actions .vx-confirm-btn {
    width: auto;
    min-width: 192px;
  }
}

/* =========================================================================
   BRIDGE toi thieu — chi de gop 4 trang demo thanh 1 trang 4 buoc
   va style cho cac thanh phan chuc nang khong co trong demo.
   KHONG ghi de bat ky thong so nao cua thiet ke.
   ========================================================================= */

/* Gop 4 trang thanh 4 panel trong cung 1 trang */
.vx-step-panel { display: none; }
.vx-step-panel.is-active { display: block; animation: vxFadeIn 0.25s ease; }

/* Container tu canh giua (demo dung .container-fluid cua Bootstrap) */
.vx-container { margin-left: auto; margin-right: auto; }

/* Stepper co the bam de quay lai buoc truoc */
.vx-step.is-clickable { cursor: pointer; }
.vx-step.is-complete .vx-step-label { color: var(--vx-white); }

/* Toast thong bao (theme den - vang) */
/* Doi tu top xuong BOTTOM: header cua theme cao 120px nen thong bao o tren bi che mat.
   O duoi thi khong phu thuoc chieu cao header, va khong che phan dau trang. */
.vx-alert {
  /* Truoc day chi 380px nen nhung cau dai (vi du khoang thoi gian chien dich)
     bi be lam 3-4 dong, dong cuoi con troi lai vai chu.
     Noi rong ra va tru le hai ben de man hep khong bi tran. */
  position: fixed; bottom: 24px; right: 24px; z-index: 1200;
  max-width: min(560px, calc(100vw - 48px));
  /* Khong cat doi tu; uu tien chia dong sao cho dong cuoi khong cut lut */
  overflow-wrap: normal;
  word-break: normal;
  text-wrap: pretty;
  padding: 14px 18px 14px 20px; border-radius: 12px; overflow: hidden;
  border: 1px solid rgba(253, 218, 122, 0.35); background: rgba(20, 16, 12, 0.94);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.55);
  font-family: var(--vx-font); font-size: var(--vx-fs-14); font-weight: 500; color: var(--vx-white);
}
.vx-alert::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background-image: var(--vx-gold-check); }
.vx-alert.is-success { border-color: rgba(253,218,122,0.6); background: rgba(24,19,10,0.95); color: var(--vx-gold-cream); }
.vx-alert.is-error { border-color: rgba(255,138,138,0.45); background: rgba(73,16,16,0.95); color: #ffe9e9; }
.vx-alert.is-error::before { background-image: linear-gradient(180deg,#ff8f6b,#d8453f); }
.vx-alert[hidden] { display: none; }
/* Man hep: trai het be ngang, tru le hai ben */
@media (max-width: 560px) {
  .vx-alert { left: 16px; right: 16px; bottom: 16px; max-width: none; }
}

/* Anh da upload de len o chon anh (demo khong co trang thai nay) */
.vx-thumb-upload .vx-thumb-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; z-index: 2; }
.vx-thumb-upload.is-filled .vx-thumb-deco { display: none; }
.vx-thumb-upload.is-filled .vx-upload-cta {
  position: relative; z-index: 3; opacity: 0; transition: opacity .2s ease;
  padding: 14px 18px; border-radius: 12px; background: rgba(0,0,0,.55);
}
.vx-thumb-upload.is-filled:hover .vx-upload-cta { opacity: 1; }
.vx-gallery-slot.is-filled { padding: 0; overflow: hidden; }
.vx-gallery-slot.is-filled img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.vx-gallery-slot.is-filled .vx-gallery-empty { display: none; }

/* --- Keo tha doi thu tu anh (VxSortable) --- */
/* Chi o DA CO ANH moi keo duoc; o trong van la nut tai anh len binh thuong */
.vx-gallery-slot.is-filled { cursor: grab; }
.vx-gallery-slot.is-filled:active { cursor: grabbing; }

/* --- Nut xoa tren tung o anh --- */
/*
 * Nut nam TRONG mot <label for="vxGalleryInput">, nen no phai nhan duoc con tro
 * (pointer-events: auto) trong khi so thu tu ben canh thi khong - neu khong,
 * bam vao no chi mo hop chon file.
 *
 * Luon HIEN tren cam ung: khong co :hover tren dien thoai, an nut di la khong
 * ai xoa duoc anh. Tren may co chuot thi mo di cho do roi, ro khi ro chuot vao.
 */
.vx-gallery-remove {
  position: absolute; top: 6px; right: 6px; z-index: 3;
  width: 24px; height: 24px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 999px;
  background: rgba(0,0,0,.65); color: #fff;
  cursor: pointer; opacity: .55; transition: opacity .15s, background .15s;
}
.vx-gallery-remove svg { width: 14px; height: 14px; }
.vx-gallery-slot.is-filled:hover .vx-gallery-remove { opacity: 1; }
.vx-gallery-remove:hover { background: #b3261e; opacity: 1; }
.vx-gallery-remove:focus-visible { outline: 2px solid var(--vx-gold); outline-offset: 2px; opacity: 1; }

@media (hover: none) {
  .vx-gallery-remove { opacity: 1; }
}

/* Bo dem "3/5 hinh anh". Chuyen vang khi con thieu - de thi sinh biet TRUOC
   khi bam sang buoc 3, khong phai luc bi chan lai. */
.vx-gallery-count {
  margin: 10px 0 0;
  font-size: var(--vx-fs-12);
  color: rgba(255,255,255,.75);
}
.vx-gallery-count.is-warning { color: var(--vx-gold); font-weight: 600; }

/* So thu tu = thu tu anh se duoc luu, khong phai chi de trang tri */
.vx-gallery-order {
  position: absolute; top: 6px; left: 6px; z-index: 2;
  min-width: 20px; height: 20px; padding: 0 6px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px; background: rgba(0,0,0,.65);
  color: var(--vx-gold); font-size: var(--vx-fs-12); font-weight: 700;
  pointer-events: none;
}

/* O dang duoc keo */
.vx-gallery-slot.vx-sortable-dragging {
  opacity: .45;
  transform: scale(.97);
}
/* O dang bi keo de len - se doi cho voi o dang keo */
.vx-gallery-slot.vx-sortable-over {
  outline: 2px dashed var(--vx-gold);
  outline-offset: -3px;
}
/* Dang keo thi khong bi bong hinh anh cua trinh duyet chen ngang */
.vx-gallery-slot.is-filled img { -webkit-user-drag: none; user-select: none; }
/* Truoc day o day la mot dong chu "Dang tai anh len..." nam im.
   Gio thay bang thanh tien do that (.vx-upload-progress) do JS chen vao. */
.vx-upload-progress {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  z-index: 4; min-width: 148px; padding: 8px 14px; border-radius: 12px;
  background: rgba(0,0,0,.78); color: var(--vx-gold); font-size: var(--vx-fs-12);
  display: flex; flex-direction: column; gap: 6px; align-items: center;
  pointer-events: none;   /* khong chan cu bam vao o phia duoi */
}
.vx-upload-progress-text { font-weight: 700; white-space: nowrap; }
.vx-upload-progress-bar {
  width: 100%; height: 4px; border-radius: 999px; overflow: hidden;
  background: rgba(255,255,255,.25);
}
.vx-upload-progress-bar i {
  display: block; height: 100%; width: 0;
  background: var(--vx-gold); border-radius: inherit;
  transition: width .18s ease-out;   /* chay muot, khong giat tung nac */
}
.vx-gallery-row { position: relative; }

/* Ten file sau khi upload */
[data-vx-pdf-result] { display: block; margin-top: 8px; font-style: normal; color: var(--vx-gold); font-size: var(--vx-fs-14); word-break: break-word; }
[data-vx-pdf-result]:empty { display: none; }

/* ============================================================
   Thong tin lien he — mot muc binh thuong trong trang, khong phai popup
   Style ben trong (.vx-contact-dialog, .vx-contact-body, ...) lay tu design
   o muc "Contact info popup", KHONG ghi de o day.
   ============================================================ */
.vx-contact-section {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0 0 30px;
}
.vx-contact-section[hidden] { display: none; }
.vx-contact-section > .vx-contact-dialog { max-width: 700px; }

/* Dong bao ket qua — khong co trong ban thiet ke */
.vx-contact-message { width: 100%; padding: 10px 14px; border-radius: 8px; font-size: var(--vx-fs-14); }
.vx-contact-message.is-error { background: rgba(73,16,16,.9); border: 1px solid rgba(255,138,138,.45); color: #ffe9e9; }
.vx-contact-message.is-success { background: rgba(24,19,10,.9); border: 1px solid rgba(253,218,122,.5); color: var(--vx-gold-cream); }

/* Nut vang bo tron dung o vai noi ngoai 4 buoc */
.vx-btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 34px;
  border: none; border-radius: 999px; cursor: pointer; background-image: var(--vx-gold-btn);
  color: var(--vx-brown); font-family: var(--vx-font); font-size: var(--vx-fs-16); font-weight: 700;
}
.vx-btn-primary[disabled], .vx-btn-next[disabled], .vx-btn-back[disabled] { opacity: .55; cursor: not-allowed; }

/* 3 class co trong markup thiet ke nhung chua co style rieng */
.vx-commit-group-title { margin: 0 0 12px; font-size: clamp(0.875rem, 1.1vw, var(--vx-fs-16)); font-weight: 700; color: var(--vx-white); line-height: var(--vx-lh); }
.vx-meta-dot { width: 6px; height: 6px; flex-shrink: 0; }
.vx-datepicker, .vx-datepicker-alt { cursor: pointer; }

/* Khu hinh anh: luoi 5 o/hang, qua 5 thi xuong hang moi va giu nguyen kich thuoc o
   (thay cho flex cua ban demo lam o co nho khi nhieu anh) */
.vx-gallery-row,
.vx-preview-gallery {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.57%;
  row-gap: 1.57%;
  width: 100%;
}
.vx-gallery-row .vx-gallery-slot,
.vx-preview-gallery img {
  flex: none !important;
  width: 100% !important;
  min-width: 0;
}
.vx-preview-gallery img {
  aspect-ratio: 239 / 179;
  height: auto;
  border-radius: 0.5rem;
  object-fit: cover;
  display: block;
}

@media (max-width: 900px) {
  .vx-gallery-row, .vx-preview-gallery { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .vx-gallery-row, .vx-preview-gallery { grid-template-columns: repeat(2, 1fr); }
}

/* Checkbox cam ket cuoi (nam duoi khoi preview do JS render) */
.vx-preview-final-accept { margin-top: 24px; }
.vx-preview-final-accept .vx-checkbox { align-items: flex-start; gap: 12px; }

/* Popup xac nhan nop bai (thiet ke dung Bootstrap modal, day dung hook rieng) */
.vx-confirm-modal { position: fixed; inset: 0; z-index: 1300; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,.65); }
.vx-confirm-modal[hidden] { display: none; }
.vx-confirm-modal .modal-dialog { width: 100%; max-width: 600px; margin: 0; }

/* Khoi preview: nut nam trong .vx-preview de huong dung khoang cach cua thiet ke */
[data-vx-preview] { display: flex; flex-direction: column; gap: clamp(2.5rem, 4.7vw, 3.75rem); }

/* Popup ket qua khi nop bai loi */
.vx-confirm-modal.is-error .vx-confirm-title { color: #ffb4b4; }

/* Giai thuong 1 cap (vd. Grand Prix): hien mo ta thay cho o chon hang muc cap 2/3.
   Bo cuc 2 cot: ten giai thuong + gach vang ben trai, mo ta ben phai.
   Giu min-height tuong duong vung chon hang muc de layout khong nhay khi doi tab. */
/* Xep tu tren xuong: [o tich + ten giai thuong] -> gach vang -> mo ta.
   Truoc day la hai cot dan ra hai ben (ten trai, mo ta phai). */
.vx-award-single {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 20px;
  min-height: 349px;
  padding: 32px 24px;
}
.vx-award-single-head {
  flex: 0 0 auto;
  width: 100%;
  align-self: stretch;
}
/* O tich nam ngay truoc tieu de, cung mot hang */
.vx-award-single-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.vx-award-single-title-row .vx-attach-title { margin: 0; }
.vx-award-single .vx-attach-title {
  white-space: normal;
  color: var(--vx-white);
}
.vx-award-single-desc {
  flex: 0 1 auto;
  width: 100%;
  min-width: 0;
  font-size: clamp(15px, 1.2vw, var(--vx-fs-18));
  color: var(--vx-white);
  line-height: 1.6;
}

/* Da dang ky: chi to sang vien panel (khong dung badge) */
.vx-award-single.is-selected { border-color: rgba(253, 218, 122, 0.55); }

@media (max-width: 900px) {
  .vx-award-single { min-height: 0; padding: 24px 20px; }
}

/* Ten file thay cho placeholder ben trai sau khi tai len (giay phep kinh doanh) */
.vx-license-hint.is-filled { color: var(--vx-gold); font-weight: 500; }

/* ============================================================
   Popup chan trang khi chua dang nhap Haravan
   Khong the dong: khong nut X, khong bam nen, khong Esc.
   ============================================================ */
[data-vx-auth-gate] {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.vx-auth-gate-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.72); backdrop-filter: blur(2px); }
.vx-auth-gate-dialog {
  position: relative; z-index: 1; overflow: hidden;
  width: 100%; max-width: 660px; padding: 56px 32px;
  border: 1px solid var(--vx-gold-deep); border-radius: 20px;
  background: radial-gradient(120% 140% at 50% 0%, #5a0f14 0%, #3a0a0e 55%, #24060a 100%);
  box-shadow: 0 24px 64px rgba(0,0,0,.55);
  text-align: center;
}
.vx-auth-gate-deco {
  position: absolute; right: -10px; bottom: -20px; width: 200px; max-width: 40%;
  opacity: .85; pointer-events: none; user-select: none;
}
.vx-auth-gate-title {
  position: relative; z-index: 1; margin: 0 0 28px;
  color: var(--vx-gold); font-family: var(--vx-font); font-size: var(--vx-fs-32); font-weight: 700; line-height: 1.3;
}
.vx-auth-gate-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.vx-auth-gate-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 190px; padding: 13px 32px;
  border: 1px solid rgba(255,255,255,.85); border-radius: 999px;
  background: transparent; color: var(--vx-white); text-decoration: none;
  font-family: var(--vx-font); font-size: var(--vx-fs-16); font-weight: 600; cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.vx-auth-gate-btn:hover, .vx-auth-gate-btn:focus-visible {
  background: var(--vx-gold); border-color: var(--vx-gold); color: var(--vx-brown);
}

/* Khoa cuon trang phia sau popup (dung cho ca popup chan dang nhap va popup thong tin lien he) */
body.vx-no-scroll { overflow: hidden; }

@media (max-width: 560px) {
  .vx-auth-gate-dialog { padding: 44px 20px; }
  .vx-auth-gate-title { font-size: 24px; margin-bottom: 22px; }
  .vx-auth-gate-btn { min-width: 100%; }
  .vx-auth-gate-deco { width: 130px; opacity: .55; }
}

/* Loi nhac cua BTC khi yeu cau thi sinh cap nhat lai thong tin lien he */
.vx-contact-notice {
  width: 100%;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid rgba(253, 218, 122, 0.55);
  border-radius: 8px;
  background: rgba(253, 218, 122, 0.1);
  color: var(--vx-gold-cream);
  font-size: var(--vx-fs-14);
  line-height: 1.5;
  text-align: left;
}
.vx-contact-notice[hidden] { display: none; }
.vx-contact-notice strong { color: var(--vx-gold); }

/* Hai nut trong phan thong tin lien he: xep ngang, xuong hang khi hep */
.vx-contact-actions { flex-wrap: wrap; gap: 12px; }
.vx-contact-actions [data-vx-contact-cancel][hidden] { display: none; }

/* So ky tu da dung cua o mo ta */
.vx-char-count {
  margin: 6px 0 0;
  font-size: var(--vx-fs-14);
  color: var(--vx-text-muted);
  text-align: right;
}
.vx-char-count.is-full { color: var(--vx-gold); font-weight: 500; }

/* Ghi chu canh tieu de "Ho so drive bao gom" */
.vx-drive-checklist-note { font-weight: 400; color: var(--vx-text-muted); }

/* ---------- Dau lich: o chon THANG va o chon NAM ----------
   Hai o dung chung mot bo gia tri, sua mot lan la ca hai cung doi. */
.flatpickr-calendar .flatpickr-monthDropdown-months,
.flatpickr-calendar .vx-fp-year {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;

  height: 30px;
  margin: 0 3px !important;
  /* Chua cho mui ten ben phai, khong de chu de len */
  padding: 0 26px 0 10px !important;

  border: 1px solid var(--vx-input-border) !important;
  border-radius: 8px !important;
  background-color: rgba(255, 255, 255, 0.08) !important;

  /* Mui ten ve bang hai nua hinh tam giac, khong dung anh ngoai */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--vx-gold) 50%),
    linear-gradient(135deg, var(--vx-gold) 50%, transparent 50%) !important;
  background-position: calc(100% - 14px) calc(50% + 1px), calc(100% - 9px) calc(50% + 1px) !important;
  background-size: 5px 5px, 5px 5px !important;
  background-repeat: no-repeat !important;

  color: var(--vx-white) !important;
  font-family: var(--vx-font) !important;
  font-size: var(--vx-fs-14) !important;
  font-weight: 600 !important;
  line-height: 28px !important;
  text-align: left;
  cursor: pointer;
  outline: none;
  transition: border-color .15s ease, background-color .15s ease;
}

.flatpickr-calendar .flatpickr-monthDropdown-months:hover,
.flatpickr-calendar .vx-fp-year:hover {
  background-color: rgba(255, 255, 255, 0.14) !important;
}

.flatpickr-calendar .flatpickr-monthDropdown-months:focus,
.flatpickr-calendar .vx-fp-year:focus {
  border-color: var(--vx-gold) !important;
}

/* Danh sach xo xuong do he dieu hanh ve - phai de nen sang, chu toi,
   neu khong tren nen toi cua lich se thanh chu trang tren nen trang */
.flatpickr-calendar .flatpickr-monthDropdown-months option,
.flatpickr-calendar .vx-fp-year option {
  color: #111;
  background: #fff;
  font-weight: 500;
}

/* ---------- Cho o chon NAM nam CUNG HANG voi o chon thang ----------
   NGUYEN NHAN o chon nam "bien mat" sau khi doi nam:
   flatpickr dat .flatpickr-current-month cao co dinh 34px, rong 75%, con
   .flatpickr-months thi cat het phan tran ra ngoai. Nhet them mot the <select>
   nua vao day la no bi day xuong hang duoi roi bi cat - trong nhu mat han,
   thuc ra van con trong DOM.
   Chuyen sang flex de o thang va o nam xep ngang, can giua. */
.flatpickr-calendar.vx-has-year-select .flatpickr-current-month {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0;
  height: 34px;
}

/* O go so nam mac dinh cua flatpickr: an di vi da co the <select> thay the.
   An bang CSS chu KHONG bang inline style - inline style bay mat moi lan
   flatpickr ve lai dau lich, o go so hien lai lam chat hang va day o chon nam
   ra ngoai. Class .vx-has-year-select do JS gan len khung lich, nen neu JS
   khong chay duoc thi o go so goc van hien binh thuong, khong bi an oan. */
.flatpickr-calendar.vx-has-year-select .numInputWrapper {
  display: none !important;
}

/* ---------- Thuoc tinh hidden phai thang moi display do CSS dat ----------
   Trinh duyet chi dat [hidden] { display: none } o muc bang mac dinh (UA),
   nen BAT KY quy tac cua ta co display: flex/block/grid deu de len no va
   phan tu van hien du da co thuoc tinh hidden.

   Da vuong dung loi nay o o "Giay phep kinh doanh": khoi do mang class
   .vx-field-stack (display: flex), nen JS dat block.hidden = true ma khoi
   van hien - chon "Ca nhan" cung thay o tai giay phep.

   Truoc day moi lan gap thi lai them mot quy tac rieng le
   (.vx-alert[hidden], .vx-contact-section[hidden]...). Quy tac chung nay dong
   han loai loi do, khong phai va tung cho nua. */
.vx-page [hidden] {
  display: none !important;
}

/* ---------- Buoc 4: cay hang muc da chon ----------
   Cap 1 = Nhom giai, cap 2 = Danh muc, cap 3 = Giai thuong (muc tich chon).
   Nut la co o tick, nut cha chi la nhan duong dan. */
.vx-preview-tree {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Cap ngoai cung: tren desktop xep thanh luoi 4 cot cho do dai dong.
   Cac cap ben trong van xep doc binh thuong. */
.vx-preview-tree-lv0 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px 3%;
  padding-top: 0.5rem;
  width: 100%;
}

/* Cac cap trong: thut vao va ke mot vach doc mo lam truc cua nhanh */
.vx-preview-tree-lv1,
.vx-preview-tree-lv2,
.vx-preview-tree-lv3 {
  margin-left: 11px;
  padding-left: 16px;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.vx-preview-tree-item {
  margin: 8px 0 0;
  min-width: 0;
}
.vx-preview-tree-lv0 > .vx-preview-tree-item {
  margin-top: 0;
}

/* CAN THANG HANG: o tick rong 24px, cach chu 10px.
   Nhan duong dan khong co o tick nen phai chua san 34px, neu khong
   "Van Xuan Stars" se thut vao so voi "Grand Prix" ngay ben canh. */
.vx-preview-tree-label {
  display: block;
  padding: 2px 0 2px 34px;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* --- Phan biet cac cap bang co chu va mau --- */

/* Cap 1 - Nhom giai: trang, to nhat va dam nhat */
.vx-preview-tree-lv0 > .vx-preview-tree-item > .vx-preview-tree-label,
.vx-preview-tree-lv0 > .vx-preview-tree-item > .vx-checkbox .vx-checkbox-text {
  color: var(--vx-white);
  font-size: var(--vx-fs-18);
  font-weight: 700;
}

/* Cap 2 - Danh muc: nho hon mot bac, trang diu bot.
   Cap 1 da lay mau trang nen cap 2 phai nhat hon mot chut, neu de trang tinh
   nhu cu thi hai cap gan nhu giong het nhau. */
.vx-preview-tree-lv1 > .vx-preview-tree-item > .vx-preview-tree-label,
.vx-preview-tree-lv1 > .vx-preview-tree-item > .vx-checkbox .vx-checkbox-text {
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--vx-fs-16);
  font-weight: 600;
}

/* Cap 3 - Giai thuong: co chu thuong, mau diu de khoi lan voi hai cap tren */
.vx-preview-tree-lv2 > .vx-preview-tree-item > .vx-checkbox .vx-checkbox-text,
.vx-preview-tree-lv2 > .vx-preview-tree-item > .vx-preview-tree-label {
  color: var(--vx-text-muted);
  font-size: var(--vx-fs-14);
  font-weight: 400;
}

/* Man hinh hep dan: bot cot roi ve mot cot.
   Dat SAU cac quy tac tren de de len duoc. */
@media (max-width: 1399.98px) {
  .vx-preview-tree-lv0 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 991.98px) {
  .vx-preview-tree-lv0 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .vx-preview-tree-lv0 {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
}