@charset "UTF-8";
.btn-row {
  display: flex;
  flex-direction: column;
  gap: 8px; }

.btn-group {
  display: flex;
  flex-direction: column;
  gap: 40px; }

/* wrapper */
.btn-wrap {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  padding: 20px; }
  .btn-wrap.white {
    background: #fff; }
  .btn-wrap.is-dark {
    background: var(--dark-green); }

.form-wrap-group {
  display: flex;
  flex-direction: column;
  gap: 40px; }

.form-wrap {
  padding: 20px; }
  .form-wrap.white {
    background: #fff; }
  .form-wrap.is-dark {
    background: var(--dark-green); }

.select-mini {
  position: relative;
  width: 49px;
  height: 24px;
  /* ===== FOCUS STATE ===== */ }
  .select-mini.gift-item {
    cursor: none;
    pointer-events: none; }
    .select-mini.gift-item:before {
      display: none; }
    .select-mini.gift-item:after {
      display: none; }
    .select-mini.gift-item select {
      text-align: center;
      padding-right: 8px;
      background: #f0f0f0; }
  .select-mini select {
    appearance: none;
    width: 100%;
    height: 100%;
    padding-left: 8px;
    padding-right: 24px;
    font-size: 12px !important;
    line-height: 17px !important;
    color: var(--dark-green);
    border: 1px solid var(--grey-100);
    background: #fff;
    cursor: pointer;
    outline: none; }
  .select-mini::before {
    content: '';
    position: absolute;
    right: 24px;
    top: 0;
    width: 1px;
    height: 100%;
    background: var(--grey-100); }
  .select-mini::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 24px;
    height: 24px;
    background-color: #082415;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='9' viewBox='0 0 10 9'><path d='M4.56989 7.13009L0.0698856 2.78949L1.03599 1.86987L3.89616 4.62873L4.56989 5.33013L5.24361 4.62873L8.10378 1.86987L9.06989 2.78949L4.56989 7.13009Z' fill='black'/></svg>") center no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='9' viewBox='0 0 10 9'><path d='M4.56989 7.13009L0.0698856 2.78949L1.03599 1.86987L3.89616 4.62873L4.56989 5.33013L5.24361 4.62873L8.10378 1.86987L9.06989 2.78949L4.56989 7.13009Z' fill='black'/></svg>") center no-repeat;
    pointer-events: none; }
  .select-mini:focus-within select {
    border-color: var(--dark-green);
    background: var(--grey-100);
    color: var(--dark-green); }
  .select-mini:focus-within::before {
    background: var(--dark-green); }
  .select-mini:focus-within::after {
    background-color: var(--dark-green); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  padding: 0 20px;
  font-size: 12px;
  line-height: 17px;
  border-radius: 0;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.25s ease;
  opacity: 1 !important;
  text-transform: uppercase;
  /* ================= BLACK ================= */
  /* ================= PRIMARY ================= */
  /* ================= SECONDARY ================= */
  /* ================= TERTIARY ================= */
  /* ================= CONVERSION ================= */
  /* ================= MOBILE ================= */ }
  .btn .icon {
    width: 24px;
    height: 24px;
    background: currentColor; }
  .btn.btn-black {
    background: #000;
    color: #fff;
    border-color: #000;
    outline: none;
    box-shadow: none; }
    .btn.btn-black:hover {
      background: var(--dark-green-hover);
      border-color: var(--dark-green-hover); }
  .btn.btn-primary-new {
    background: var(--dark-green);
    color: #fff;
    /* DARK VERSION */ }
    .btn.btn-primary-new:hover {
      background: var(--dark-green-hover);
      border-color: var(--dark-green-hover); }
    .btn.btn-primary-new:focus-visible, .btn.btn-primary-new:focus {
      outline: none;
      box-shadow: inset 0 0 0 2px var(--focus);
      border-color: var(--focus);
      background: var(--dark-green); }
    .btn.btn-primary-new.disabled, .btn.btn-primary-new[disabled] {
      border-color: var(--grey-200);
      background: var(--grey-200);
      color: #fff;
      cursor: not-allowed; }
      .btn.btn-primary-new.disabled .icon, .btn.btn-primary-new[disabled] .icon {
        opacity: 0.3; }
    .btn.btn-primary-new.dark {
      background: #fff;
      color: var(--dark-green);
      border-color: #fff; }
      .btn.btn-primary-new.dark:hover {
        background: var(--grey-300);
        border-color: var(--grey-300); }
      .btn.btn-primary-new.dark:focus-visible, .btn.btn-primary-new.dark:focus {
        background: #fff;
        box-shadow: inset 0 0 0 2px var(--focus);
        border-color: var(--focus); }
      .btn.btn-primary-new.dark.disabled, .btn.btn-primary-new.dark[disabled] {
        border-color: var(--grey-800);
        background: var(--grey-800);
        color: var(--grey-400); }
  .btn.btn-secondary-new {
    background: #fff;
    border-color: var(--dark-green);
    color: var(--dark-green);
    /* DARK VERSION */ }
    .btn.btn-secondary-new:hover {
      background: var(--grey-200);
      border-color: var(--dark-green); }
    .btn.btn-secondary-new:focus-visible, .btn.btn-secondary-new:focus, .btn.btn-secondary-new:active {
      outline: none;
      box-shadow: inset 0 0 0 2px var(--focus);
      border-color: var(--focus);
      background: #fff; }
    .btn.btn-secondary-new.disabled, .btn.btn-secondary-new[disabled] {
      border-color: var(--grey-300);
      color: var(--grey-300);
      cursor: not-allowed; }
    .btn.btn-secondary-new.dark {
      border-color: #fff;
      color: #fff; }
      .btn.btn-secondary-new.dark:hover {
        background: #09371f;
        color: #fff; }
      .btn.btn-secondary-new.dark:focus-visible, .btn.btn-secondary-new.dark:focus {
        box-shadow: inset 0 0 0 2px var(--focus);
        border-color: var(--focus);
        color: #fff; }
      .btn.btn-secondary-new.dark.disabled, .btn.btn-secondary-new.dark[disabled] {
        border-color: var(--grey-800);
        color: #fff; }
  .btn.btn-tertiary {
    background: transparent;
    border: none;
    color: var(--grey-800);
    /* DARK VERSION */ }
    .btn.btn-tertiary:hover {
      color: var(--dark-green); }
    .btn.btn-tertiary:focus-visible, .btn.btn-tertiary:focus {
      outline: none;
      box-shadow: 0 0 0 2px var(--focus); }
    .btn.btn-tertiary.disabled, .btn.btn-tertiary[disabled] {
      color: var(--grey-400);
      cursor: not-allowed; }
    .btn.btn-tertiary.dark {
      color: #fff; }
      .btn.btn-tertiary.dark:hover {
        color: #fff; }
      .btn.btn-tertiary.dark:focus-visible, .btn.btn-tertiary.dark:focus {
        box-shadow: 0 0 0 2px var(--focus); }
      .btn.btn-tertiary.dark.disabled, .btn.btn-tertiary.dark[disabled] {
        color: var(--grey-600); }
  .btn.btn-conversion-new {
    background: #1b4c28;
    color: #fff;
    border: 1px solid var(--dark-green);
    /* DARK VERSION */ }
    .btn.btn-conversion-new.btn-hs-border-tb {
      border-left: none;
      border-right: none; }
    .btn.btn-conversion-new:hover {
      background: var(--dark-green-hover);
      border-color: var(--dark-green-hover); }
    .btn.btn-conversion-new:focus-visible, .btn.btn-conversion-new:focus {
      outline: none;
      box-shadow: inset 0 0 0 2px var(--focus);
      border-color: var(--focus);
      background: var(--dark-green); }
    .btn.btn-conversion-new.disabled, .btn.btn-conversion-new[disabled] {
      border-color: var(--grey-200);
      background: var(--grey-200);
      color: #fff;
      cursor: not-allowed; }
      .btn.btn-conversion-new.disabled.btn-white, .btn.btn-conversion-new[disabled].btn-white {
        background: #fff;
        color: #99a8a1; }
        .btn.btn-conversion-new.disabled.btn-white.btn-hs-border-tb, .btn.btn-conversion-new[disabled].btn-white.btn-hs-border-tb {
          border-color: #cfd8d4; }
      .btn.btn-conversion-new.disabled .icon, .btn.btn-conversion-new[disabled] .icon {
        opacity: 0.3; }
    .btn.btn-conversion-new.dark {
      background: #fff;
      color: var(--dark-green);
      border-color: #fff; }
      .btn.btn-conversion-new.dark:hover {
        background: var(--grey-300);
        border-color: var(--grey-300); }
      .btn.btn-conversion-new.dark:focus-visible, .btn.btn-conversion-new.dark:focus {
        background: #fff;
        box-shadow: inset 0 0 0 2px var(--focus);
        border-color: var(--focus); }
      .btn.btn-conversion-new.dark.disabled, .btn.btn-conversion-new.dark[disabled] {
        border-color: var(--grey-800);
        background: var(--grey-800);
        color: var(--grey-400); }
  @media (max-width: 991px) {
    .btn {
      width: 100%; } }

/* Input */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 32px; }

.form-radio {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px; }

input {
  background-clip: padding-box; }
  input.form-control::-webkit-outer-spin-button, input.form-control::-webkit-inner-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none; }
  input[type='radio'] {
    margin-top: 0;
    vertical-align: top;
    width: 24px;
    height: 24px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
    cursor: pointer;
    outline: none !important;
    border: none !important; }
    input[type='radio'].dark:after {
      background: var(--dark-green);
      border-color: var(--grey-400); }
    input[type='radio'].dark:hover:after {
      border-color: #fff; }
    input[type='radio'].dark:checked:before {
      background: #fff; }
    input[type='radio'].dark:checked:after {
      border-color: #fff; }
    input[type='radio']:before {
      -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
      -moz-transition: -moz-transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
      transition: transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
      -webkit-transform: scale(0, 0);
      -moz-transform: scale(0, 0);
      -ms-transform: scale(0, 0);
      -o-transform: scale(0, 0);
      transform: scale(0, 0);
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      margin: auto;
      z-index: 1;
      width: 4.5px;
      height: 4.5px;
      background: var(--dark-green);
      border-radius: 50%; }
    input[type='radio']:after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      margin: auto;
      width: 20px;
      height: 20px;
      background: #fff;
      border: 1px solid var(--grey-300);
      border-radius: 50%; }
    input[type='radio']:checked:before {
      -webkit-transform: scale(1, 1);
      -moz-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      -o-transform: scale(1, 1);
      transform: scale(1, 1); }
    input[type='radio']:checked:after {
      border: 1px solid var(--dark-green); }
    input[type='radio']:hover:after {
      border-color: var(--dark-green); }
  input[type='checkbox'] {
    margin-top: 0;
    vertical-align: top;
    width: 24px;
    height: 24px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
    cursor: pointer;
    outline: none !important;
    border: none !important;
    display: flex;
    align-items: center;
    justify-content: center; }
    input[type='checkbox']:before {
      -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
      -moz-transition: -moz-transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
      transition: transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
      -webkit-transform: rotate(-45deg) scale(0, 0);
      -moz-transform: rotate(-45deg) scale(0, 0);
      -ms-transform: rotate(-45deg) scale(0, 0);
      -o-transform: rotate(-45deg) scale(0, 0);
      transform: rotate(-45deg) scale(0, 0);
      content: '';
      position: absolute;
      margin: auto;
      top: 7px;
      margin: auto;
      z-index: 1;
      width: 10px;
      height: 6px;
      border: 1px solid var(--grey-300);
      border-top-style: none;
      border-right-style: none; }
    input[type='checkbox']:checked:before {
      -webkit-transform: rotate(-45deg) scale(1, 1);
      -moz-transform: rotate(-45deg) scale(1, 1);
      -ms-transform: rotate(-45deg) scale(1, 1);
      -o-transform: rotate(-45deg) scale(1, 1);
      transform: rotate(-45deg) scale(1, 1); }
    input[type='checkbox']:after {
      content: '';
      position: absolute;
      margin: auto;
      width: 20px;
      height: 20px;
      background: #fff;
      border: 1px solid var(--grey-300);
      cursor: pointer; }
    input[type='checkbox']:checked:before {
      border-color: var(--dark-green); }
    input[type='checkbox']:checked:after {
      border-color: var(--dark-green); }
    input[type='checkbox']:hover:after {
      border-color: var(--dark-green); }
    input[type='checkbox'].dark:before {
      border-color: #fff; }
    input[type='checkbox'].dark:after {
      background: var(--dark-green); }
    input[type='checkbox'].dark:hover:after {
      border-color: #fff; }
    input[type='checkbox'].dark:checked:before {
      border-color: #fff; }
    input[type='checkbox'].dark:checked:after {
      border-color: #fff; }
  input[type='number'] {
    appearance: textfield; }
  input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0; }

.form-field {
  position: relative;
  display: flex;
  flex-direction: column;
  /* FLOAT LABEL */
  /* ICON */
  /* trạng thái show password */
  /* error đổi màu icon */
  /* HELP */
  /* TEXTAREA BOTTOM */
  /* ERROR */ }
  .form-field.dark input,
  .form-field.dark textarea {
    color: #fff;
    border-bottom: 1px solid var(--grey-400); }
    .form-field.dark input::placeholder,
    .form-field.dark textarea::placeholder {
      color: var(--grey-400); }
    .form-field.dark input:focus,
    .form-field.dark textarea:focus {
      border-bottom: 1px solid var(--grey-100); }
  .form-field.dark label {
    color: var(--grey-400); }
  .form-field.dark .help {
    color: var(--grey-400); }
  .form-field.dark .bottom .help {
    color: var(--grey-400); }
  .form-field.dark.is-error input:focus,
  .form-field.dark.is-error textarea:focus {
    border-bottom: 1px solid var(--error); }
  .form-field.dark input:focus ~ .icon-eye svg path,
  .form-field.dark input:not(:placeholder-shown) ~ .icon-eye svg path {
    fill: var(--grey-100); }
  .form-field select {
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--grey-100);
    padding: 0;
    font-size: 16px !important;
    line-height: 22px !important;
    outline: none;
    background: transparent;
    color: var(--dark-green);
    appearance: none;
    background: url(https://cdn.hstatic.net/files/200000870593/file/down-arrow.svg) no-repeat right center;
    background-size: 16px;
    padding-right: 16px; }
    .form-field select:focus {
      border-bottom: 1px solid var(--dark-green); }
  .form-field input,
  .form-field textarea {
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--grey-100);
    padding: 0;
    font-size: 16px !important;
    line-height: 22px !important;
    outline: none;
    background: transparent;
    color: var(--dark-green); }
    .form-field input::placeholder,
    .form-field textarea::placeholder {
      color: var(--grey-300); }
    .form-field input:focus,
    .form-field textarea:focus {
      border-bottom: 1px solid var(--dark-green); }
  .form-field label {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 16px !important;
    line-height: 22px !important;
    color: var(--grey-300);
    pointer-events: none;
    transition: all 0.2s ease; }
  .form-field input:focus + label,
  .form-field textarea:focus + label,
  .form-field input:not(:placeholder-shown) + label,
  .form-field textarea:not(:placeholder-shown) + label,
  .form-field select:focus + label,
  .form-field select:not(:placeholder-shown) + label {
    top: -13px;
    font-size: 13px !important;
    line-height: 100% !important;
    color: var(--grey-600); }
  .form-field input:focus ~ .icon-eye svg path,
  .form-field input:not(:placeholder-shown) ~ .icon-eye svg path {
    fill: var(--dark-green); }
  .form-field .icon-eye {
    position: absolute;
    right: 0;
    top: 8px;
    width: 24px;
    height: 24px;
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center; }
    .form-field .icon-eye svg {
      width: 20px;
      height: 20px; }
      .form-field .icon-eye svg path {
        fill: var(--grey-300); }
    .form-field .icon-eye .eye-close {
      display: none; }
  .form-field.is-show .eye-open {
    display: none; }
  .form-field.is-show .eye-close {
    display: block; }
  .form-field.is-error .icon-eye svg path {
    fill: var(--error); }
  .form-field .help {
    font-size: 12px;
    color: #aaa;
    margin-top: 6px; }
  .form-field .bottom {
    display: flex;
    justify-content: space-between;
    margin-top: 6px; }
    .form-field .bottom .count {
      font-size: 12px;
      color: #aaa; }
  .form-field.is-error input,
  .form-field.is-error textarea {
    border-bottom: 1px solid var(--error);
    color: var(--error); }
  .form-field.is-error label {
    color: var(--error); }
  .form-field.is-error .error {
    font-size: 12px !important;
    line-height: 17px !important;
    color: var(--error);
    margin-top: 6px; }
  .form-field.is-error .icon-eye {
    color: var(--error); }
  .form-field.is-success .error {
    font-size: 12px !important;
    line-height: 17px !important;
    color: var(--success);
    margin-top: 6px; }

/* Select */
.select-mini {
  position: relative;
  width: 49px;
  height: 24px;
  /* ===== FOCUS STATE ===== */ }
  .select-mini select {
    appearance: none;
    width: 100%;
    height: 100%;
    padding-left: 8px;
    padding-right: 24px;
    font-size: 12px !important;
    line-height: 17px !important;
    color: var(--dark-green);
    border: 1px solid var(--grey-100);
    background: #fff;
    cursor: pointer;
    outline: none; }
  .select-mini::before {
    content: '';
    position: absolute;
    right: 24px;
    top: 0;
    width: 1px;
    height: 100%;
    background: var(--grey-100); }
  .select-mini::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 24px;
    height: 24px;
    background-color: #082415;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='9' viewBox='0 0 10 9'><path d='M4.56989 7.13009L0.0698856 2.78949L1.03599 1.86987L3.89616 4.62873L4.56989 5.33013L5.24361 4.62873L8.10378 1.86987L9.06989 2.78949L4.56989 7.13009Z' fill='black'/></svg>") center no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='9' viewBox='0 0 10 9'><path d='M4.56989 7.13009L0.0698856 2.78949L1.03599 1.86987L3.89616 4.62873L4.56989 5.33013L5.24361 4.62873L8.10378 1.86987L9.06989 2.78949L4.56989 7.13009Z' fill='black'/></svg>") center no-repeat;
    pointer-events: none; }
  .select-mini:focus-within select {
    border-color: var(--dark-green);
    background: var(--grey-100);
    color: var(--dark-green); }
  .select-mini:focus-within::before {
    background: var(--dark-green); }
  .select-mini:focus-within::after {
    background-color: var(--dark-green); }