/* main.css */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Noto+Sans+TC:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

@font-face {
    font-family: "TradeGothicLTPro";
    src: url("./assets/fonts/TradeGothicLTPro.woff2")format("woff2");
}

@font-face {
    font-family: "GaramondPremierPro";
    src: url("./assets/fonts/GaramondPremrPro.woff2")format("woff2");
}

@font-face {
  font-family: "TradeGothicLTStdExtended";
  src: url("./assets/fonts/TradeGothicLTStdExtended.otf") format("opentype");
}

@font-face {
  font-family: "NeueHaasGrotDisp-65Medium";
  src: url("./assets/fonts/NeueHaasGrotDisp-65Medium.otf") format("opentype");
}


html,
body {
  font-family: "Noto Sans TC", sans-serif;
  letter-spacing: 0.06em;
  text-rendering: geometricPrecision;
}



h1 {
  font-size: 28px !important;
  font-weight: 500 !important; 
  line-height: 36px !important;
}

h2 {
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 28px !important;
}

h3 {
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 22px !important;
}

h4 {
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 22px !important;
}

p {
  /* @apply ; */
}

.text-lg {
  font-size: var(--ds-ref-font-size-15) !important;
}

.text-def {
  font-size: var(--ds-ref-font-size-14) !important;
}

.text-sm {
  font-size: var(--ds-ref-font-size-13) !important;
}

.text-xs {
  font-size: var(--ds-ref-font-size-11) !important;
}

.line-height-lg {
  line-height: var(--ds-ref-font-line-height-36) !important;
}

.line-height-md {
  line-height: var(--ds-ref-font-line-height-28) !important;
}

.line-height-def {
  line-height: var(--ds-ref-font-line-height-22) !important;
}

.line-height-sm {
  line-height: var(--ds-ref-font-line-height-20) !important;
}

.line-height-xs {
  line-height: var(--ds-ref-font-line-height-15) !important;
}

.body-lg {
  font-size: 15px;
  font-weight: 400; 
  line-height: 22px;
}
.body-lg-b {
  font-size: 15px;
  font-weight: 700; 
  line-height: 22px;
}
.body-def {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}
.body-def-b {
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
}
.body-sm {
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
}
.body-sm-b {
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
}

.body-xs {
  font-size: 11px !important;
  font-weight: 400;
  line-height: 15px;
}

.body-xs-b {
  font-size: 11px !important;
  font-weight: 700;
  line-height: 15px;
}

.link-lg {
  font-size: 15px;
  font-weight: 400;
  line-height: 22px;
  text-decoration: underline;
  text-decoration-style: solid;
}
.link-def {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-decoration: underline;
  text-decoration-style: solid;
}
.link-sm {
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  text-decoration: underline;
  text-decoration-style: solid;
}
.link-sm-b {
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
  text-decoration: underline;
  text-decoration-style: solid;
}
.floatlabel-placeholder {
  font-size: 15px;
  font-weight: 400;
  line-height: 22px;
}
.floatlabel-def {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}
.floatlabel-elevated {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.08em; 
  line-height: 15px;
}
.price-def {
  font-family: "TradeGothicLTPro", sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 20px;
}
.price-original {
  font-family: "TradeGothicLTPro", sans-serif; 
  font-weight: 400;
  font-size: 13px;
  line-height: 20px;
  text-decoration: line-through;
}


/* Define components */
/* .btn-outline {
  @apply cursor-pointer p-[20px] border-[1px] text-center border-[var(--ds-sys-color-outline-white)] inline-block text-surface-primary-inverse hover:bg-white hover:text-[var(--ds-sys-color-surface-primary)] transition-colors duration-300;
}

.btn-primary {
  @apply cursor-pointer p-[20px] border-[1px] text-center border-[var(--ds-sys-color-outline-primary)] inline-block text-[var(--ds-sys-color-surface-primary-inverse)] bg-[var(--ds-sys-color-surface-primary)] hover:bg-[#1a2731] hover:text-[var(--ds-sys-color-surface-primary-inverse)] transition-colors duration-300;
} */
.btn-primary.btn-disable {
  background-color: rgb(168,175,181) !important;
  border: rgb(168,175,181) !important;
}

/* .btn-secondary {
  @apply cursor-pointer p-[20px] border-[1px] text-center border-[var(--ds-sys-color-outline-primary)] inline-block text-surface-primary hover:bg-surface-primary hover:text-[var(--ds-sys-color-surface-primary-inverse)] transition-colors duration-300;
}

.btn-secondary.active {
  @apply cursor-pointer p-[20px] border-[1px] text-center border-[var(--ds-sys-color-outline-primary)] inline-block bg-surface-primary text-[var(--ds-sys-color-surface-primary-inverse)] transition-colors duration-300;
} */

/* .btn-secondary-light {
  @apply cursor-pointer p-[20px] border-[1px] text-center border-[var(--ds-sys-color-outline-def)] inline-block text-surface-primary hover:bg-surface-primary hover:text-[var(--ds-sys-color-surface-primary-inverse)] transition-colors duration-300;
} */

/* New button system */
.btn-outline-lg-tonal {
    cursor: pointer;
    padding: 20px;
    display: inline-block;
    text-align: center;
    border-width: 1px;
    border-style: solid;
    border-color: var(--ds-sys-color-outline-light);
    color: var(--ds-sys-color-surface-primary);
    transition: color 300ms, background-color 300ms, border-color 300ms;
}

.btn-outline-lg-tonal:hover {
    border-color: var(--ds-sys-color-outline-primary);
    background-color: var(--ds-sys-color-surface-primary);
    color: white;
}

/* Nút mới thêm */
.btn-filled-lg {
  height: 60px;
  position: relative;
  overflow: hidden; 
  color: var(--ds-sys-color-surface-on-cta);
  background-color: var(--ds-sys-color-surface-cta);
  flex: 1 1 0%;
  text-align: center;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: var(--ds-sys-size-font-line-height-def);
}
.btn-filled-lg::after {
  content: '';
  position: absolute;
  inset: 0; 
  background-color: rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.btn-filled-lg:hover::after {
  opacity: 1;
}
.btn-filled-lg > span {
  position: relative;
  user-select: none;
  z-index: 1;
  width: 100%;
  padding-left: var(--ds-sys-size-spacing-md);
  padding-right: var(--ds-sys-size-spacing-md);
}
.btn-filled-lg.btn-disable {
  cursor: not-allowed;
}
.btn-filled-lg.btn-disable::after {
  background-color: rgba(255, 255, 255, 0.8) !important;
  opacity: 1; 
}
.btn-filled-lg.btn-disable:hover::after {
  opacity: 1; /* Vẫn giữ opacity là 1 */
}

.overlay-on-hover::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.3); /* #000000 @ 30% */
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.overlay-on-hover:hover::after {
  opacity: 1;
}

.btn-secondary-sm {
  cursor: pointer;
  padding: 15px;
  border-width: 1px;
  border-style: solid;
  text-align: center;
  border-color: var(--ds-sys-color-outline-primary);
  display: inline-block;
  color: var(--ds-sys-color-surface-primary); /* text-surface-primary */
  transition: color 300ms, background-color 300ms, border-color 300ms;
}
.btn-secondary-sm:hover {
  background-color: var(--ds-sys-color-surface-primary);
  color: var(--ds-sys-color-surface-primary-inverse);
}

.btn-primary-sm {
  cursor: pointer; 
  padding: 15px; 
  border-width: 1px; 
  text-align: center; 
  border-color: var(--ds-sys-color-outline-primary);
  border-style: solid;
  display: inline-block; 
  color: var(--ds-sys-color-surface-primary-inverse); 
  background-color: var(--ds-sys-color-surface-primary); 
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary-sm:hover {
  background-color: #1a2731; 
  color: var(--ds-sys-color-surface-primary-inverse); 
}


/*  */

.lity {
  background: rgba(0, 0, 0, 0.6) !important;
}

button.lity-close {
  display: none !important;
}

img {
  user-select: none;
  -webkit-user-select: none;
}

.swiper-slide {
  @apply cursor-pointer;
}

.preloader {
  @apply fixed inset-0 w-screen h-screen flex items-center justify-center bg-[var(--ds-sys-color-surface-tonal)] z-50;

  .preloader-inner {
    @apply flex flex-col items-center justify-center gap-5;

    .preloader-logo {
      @apply w-auto;
    }
  }
}

li {
  list-style-type: "• ";
}

/* Additional tailwind replacment */
@media (max-width: 824px) {
  .max-824px-hidden {
    display: none; 
  }
}


@media (min-width: 824px) {
  .min-824px-hidden {
    display: none; 
  }
}

/* Disable outline on clicking of this theme */
img {
  border-radius: 0px;
}

/* Fix username password color  */
.woocommerce-form-login label {
    color: var(--ds-sys-color-text-primary);
}

/* Weird css temporary fix  */
button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover, .button:hover, .widget a.button:hover {
  background-color: transparent;
}

/* WPadminbar fixed content */

body.wp-admin-bar .navbar-header-additional {
    margin-top: 32px !important;
}

html.lity-active {
  overflow: hidden !important;
  height: 100% !important;
}


/* Styling cho input */
input.af-input-group {
    color: var(--ds-sys-color-text-primary);
    height: 60px;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px; 
    padding-top: 20px;
    padding-bottom: 4px;
    transition: background-color 0.3s, border-color 0.3s;
    border: none;
    border-radius: 0; 
    outline: none;
    background-color: var(--ds-sys-color-surface-primary-inverse);
    background-image: linear-gradient(var(--ds-sys-color-outline-light), var(--ds-sys-color-outline-light));
    background-repeat: no-repeat;
    background-position: 15px bottom; 
    background-size: calc(100% - 30px) 1px;
}

input.af-input-group:focus {
    background-color: var(--ds-sys-color-surface-primary-inverse);
    z-index: 50;
    /* Không tô đậm gach chân */
    /* background-image: linear-gradient(var(--ds-sys-color-outline-primary), var(--ds-sys-color-outline-primary)); */
}

input.af-input-group:focus + span,
input.af-input-group:not(:placeholder-shown) + span {
    top: 4px;
    left: 20px;
    font-size: 12px;
    color: var(--ds-sys-color-outline-primary);
}
div > label:last-child .af-input-group {
    background-position: 0 bottom; 
    background-size: 100% 1px;
}

/* Styling input select */
select.af-input-group {
    color: var(--ds-sys-color-text-primary);
    height: 60px;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px; 
    padding-top: 20px;
    padding-bottom: 4px;
    transition: background-color 0.3s, border-color 0.3s;
    border: none;
    border-radius: 0; 
    outline: none;
    background-color: var(--ds-sys-color-surface-primary-inverse);
    background-image: linear-gradient(var(--ds-sys-color-outline-light), var(--ds-sys-color-outline-light));
    background-repeat: no-repeat;
    background-position: 15px bottom; 
    background-size: calc(100% - 30px) 1px;
    
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}


select.af-input-group:focus {
    background-color: var(--ds-sys-color-surface-primary-inverse);
    z-index: 50;
}

div > label:last-child select.af-input-group {
    background-position: 0 bottom; 
    background-size: 100% 1px;
}

select.af-input-group:focus + span,
select.af-input-group:not(.empty) + span {
    top: 4px;
    left: 20px;
    font-size: 12px;
    color: var(--ds-sys-color-outline-primary);
}

select.af-input-group.empty {
    color: transparent;
}
select.af-input-group:focus,
select.af-input-group:not(.empty) {
    color: var(--ds-sys-color-text-primary);
}

/* Custom checkbox */
/* Usage: <label class="custom-checkbox"><input type="checkbox" class="custom-checkbox__input"><span class="custom-checkbox__icon"></span></label> */
.custom-checkbox {
  display: block; 
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  gap: 10px; 
  margin: 0px;
}

.custom-checkbox__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.custom-checkbox__icon {
  display: inline-block;
  width: 25px;
  height: 25px;
  
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 25px 25px;
  transition: background-image 0.1s ease;
  background-image: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='0.5' width='24' height='24' fill='white'/%3E%3Crect x='0.5' y='0.5' width='24' height='24' stroke='%23253746'/%3E%3C/svg%3E");
}
.custom-checkbox__input:not(:disabled):not(:checked):hover + .custom-checkbox__icon {
  background-image: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='0.5' width='24' height='24' fill='white'/%3E%3Crect x='0.5' y='0.5' width='24' height='24' stroke='%23253746'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19.75 8.19571L10.5537 18.1497C10.4949 18.2133 10.4134 18.2496 10.3281 18.25C10.2428 18.2504 10.161 18.215 10.1016 18.1519L5.5 13.2674L5.94998 12.8171L10.3244 17.4605L19.2958 7.75L19.75 8.19571Z' fill='%23C6C6C6'/%3E%3C/svg%3E");
}
.custom-checkbox__input:disabled:not(:checked) + .custom-checkbox__icon {
  background-image: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='0.4'%3E%3Crect x='0.5' y='0.5' width='24' height='24' fill='white'/%3E%3Crect x='0.5' y='0.5' width='24' height='24' stroke='%23253746'/%3E%3C/g%3E%3C/svg%3E");
}
.custom-checkbox__input:checked + .custom-checkbox__icon {
  background-image: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='25' height='25' fill='%23253746'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19.75 8.19571L10.5537 18.1497C10.4949 18.2133 10.4134 18.2496 10.3281 18.25C10.2428 18.2504 10.161 18.215 10.1016 18.1519L5.5 13.2674L5.94998 12.8171L10.3244 17.4605L19.2958 7.75L19.75 8.19571Z' fill='white'/%3E%3C/svg%3E");
}
.custom-checkbox__input:checked:not(:disabled):hover + .custom-checkbox__icon {
  background-image: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='25' height='25' fill='%231E2C38'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19.75 8.19571L10.5537 18.1497C10.4949 18.2133 10.4134 18.2496 10.3281 18.25C10.2428 18.2504 10.161 18.215 10.1016 18.1519L5.5 13.2674L5.94998 12.8171L10.3244 17.4605L19.2958 7.75L19.75 8.19571Z' fill='white'/%3E%3C/svg%3E");
}
.custom-checkbox__input:checked:disabled + .custom-checkbox__icon {
  background-image: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='0.4'%3E%3Crect width='25' height='25' fill='%23253746'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19.75 8.19571L10.5537 18.1497C10.4949 18.2133 10.4134 18.2496 10.3281 18.25C10.2428 18.2504 10.161 18.215 10.1016 18.1519L5.5 13.2674L5.94998 12.8171L10.3244 17.4605L19.2958 7.75L19.75 8.19571Z' fill='white'/%3E%3C/g%3E%3C/svg%3E");
}
.custom-checkbox.has-error .custom-checkbox__icon {
  background-image: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.75' y='0.75' width='23.5' height='23.5' fill='white'/%3E%3Crect x='0.75' y='0.75' width='23.5' height='23.5' stroke='%23981420' stroke-width='1.5'/%3E%3C/svg%3E");
}
.custom-checkbox__label {
  color: #253746;
  user-select: none; 
}
.custom-checkbox__input:disabled ~ .custom-checkbox__label {
  opacity: 0.5;
  cursor: not-allowed;
}
.custom-checkbox__input:disabled + .custom-checkbox__icon {
  cursor: not-allowed;
}