/* === Akzidenz Grotesk VIP === */
@font-face {
  font-family: "Akzidenz Grotesk VIP";
  src: url("./fonts/1FTV-VIP-Akzidenz-Grotesk-black.ttf") format("truetype");
  font-weight: 900;      /* Black */
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Akzidenz Grotesk VIP";
  src: url("./fonts/1FTVVIPAkzidenzGrotesk-Italic.ttf") format("truetype");
  font-weight: 400;     
  font-style: italic;
  font-display: swap;
}

:root {
  /* Tỉ lệ 1440x680 => 0.472222... */
  --bc-ratio-w: 1440;
  --bc-ratio-h: 680;
  --bc-min-h-mobile: 320px;   /* tuỳ chỉnh theo thiết kế */
  --bc-min-h-tablet: 380px;
  --bc-min-h-desktop: 420px;
  --bc-max-h: 90dvh;          /* tránh chiếm hết màn ở desktop lớn */
  --font-brand: "Akzidenz Grotesk VIP", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-ui: "Roboto", sans-serif;
}

*,
:after,
:before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
html {
    line-height: 1.425;;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  line-height:1.425;
  font-size:16px;
  color:var(--textColor);
  font-weight: 400;
  position:relative;
  font-family: var(--font-ui);
  background:#f6ffeb;
}
.sr {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
a{
    text-decoration:none;
}
p{
    margin-top:0;
    margin-bottom:10px;
}
video{
    max-width:100%;
}
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1rem;
}
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}
button,
input {
  overflow: visible;
}
button,
select {
  text-transform: none;
}
[type="button"],
[type="reset"],
[type="submit"],
button {
  -webkit-appearance: button;
}
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner,
button::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring,
button:-moz-focusring {
  outline: 1px dotted ButtonText;
}
fieldset {
  padding: 0.35em 0.75em 0.625em;
}
legend {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}
progress {
  vertical-align: baseline;
}
textarea {
  overflow: auto;
}
[type="checkbox"],
[type="radio"] {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}
button{
    border:none;
    background:none;
}
button:focus{
    outline:none;
    box-shadow:none;
}
table {
  text-align: left;
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  margin: 0;
  border: 1px solid #e9e9e9;
}
table td,
table th {
  padding: 1rem;
  border-bottom: 1px solid #e9e9e9;
  border-right: 1px solid #e9e9e9;
}
table tr:nth-child(2n) {
  background-color: #f6f8fa;
}
details,
main {
  display: block;
}
a {
  transition: all .5s;
}
.b,
.strong,
b,
strong {
  font-weight: 700;
}
.em,
em {
  font-style: italic;
}
/*hr {*/
/*  -webkit-box-sizing: content-box;*/
/*  box-sizing: content-box;*/
/*  height: 0;*/
/*  overflow: visible;*/
/*  border-top: 1px solid rgba(255, 255, 255, 0.2);;*/
/*}*/
abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}
.small,
small {
  font-size: 0.8125rem;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
img {
  border: 0 none;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}
[hidden],
template {
  display: none;
}
.btn{
    padding:0 16px;
    height:40px;
    display:inline-flex;
    align-items:center;
    background:var(--mainColor);
    color:#fff;
    border-radius:6px;
    min-width: 130px;
    justify-content: center;
    cursor:pointer;
}
.btn:hover{
    background:#fff;
    color:var(--mainColor);
    border:1px solid var(--mainColor);
}
@media (max-width:991px){
    .btn{
        min-width:80px;
        font-size:14px;
        height:30px;
    }
}
@media (max-width:767px){
    .btn{
        font-size:12px;
    }
}
.ellipsis-1 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.ellipsis-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.ellipsis-3 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.ellipsis-4 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}
.ellipsis-5 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0.5rem 0;
  font-weight:600;
}
.h1,
h1,h2,.h2{
  font-size: 32px;
  line-height: 38px;
}
.h3,
h3 {
  font-size: 20px;
  line-height: 26px;
}
.h4,
h4 {
  font-size: 18px;
  line-height: 24px;
}
.h5,
h5 {
  font-size: 16px;
  line-height: 22px;
}
.h6,
h6 {
  font-size: 14px;
  line-height: 20px;
}
a:hover,a:focus{
    text-decoration: none;
}
header ul,
footer ul {
  list-style: none;
  padding:0;
  margin:0;
}
/* ========== Text alignment ========== */
.text-left   { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right  { text-align: right !important; }

/* Responsive breakpoints */
/* Small ≥576px */
@media (min-width: 576px) {
  .text-sm-left   { text-align: left !important; }
  .text-sm-center { text-align: center !important; }
  .text-sm-right  { text-align: right !important; }
}

/* Medium ≥768px */
@media (min-width: 768px) {
  .text-md-left   { text-align: left !important; }
  .text-md-center { text-align: center !important; }
  .text-md-right  { text-align: right !important; }
}

/* Large ≥992px */
@media (min-width: 992px) {
  .text-lg-left   { text-align: left !important; }
  .text-lg-center { text-align: center !important; }
  .text-lg-right  { text-align: right !important; }
}

/* Extra large ≥1200px */
@media (min-width: 1200px) {
  .text-xl-left   { text-align: left !important; }
  .text-xl-center { text-align: center !important; }
  .text-xl-right  { text-align: right !important; }
}

/* ========== Text transform ========== */
.text-lowercase  { text-transform: lowercase !important; }
.text-uppercase  { text-transform: uppercase !important; }
.text-capitalize { text-transform: capitalize !important; }

/* ========== Font weight & style ========== */
.font-weight-light   { font-weight: 300 !important; }
.font-weight-normal  { font-weight: 400 !important; }
.font-weight-bold    { font-weight: 700 !important; }
.font-italic         { font-style: italic !important; }

/* ========== Monospace ========== */
.text-monospace { font-family: monospace, monospace !important; }

/* ========== Text wrapping & truncation ========== */
.text-nowrap   { white-space: nowrap !important; }
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ========== Text colors (theming mẫu) ========== */
.text-primary   { color: #007bff !important; }
.text-secondary { color: #6c757d !important; }
.text-success   { color: #28a745 !important; }
.text-danger    { color: #dc3545 !important; }
.text-warning   { color: #ffc107 !important; }
.text-info      { color: #17a2b8 !important; }
.text-light     { color: #f8f9fa !important; }
.text-dark      { color: #343a40 !important; }
.text-muted     { color: #6c757d !important; }
.text-white     { color: #fff !important; }
/* Margin utilities */
/* Margin all sides */
.m-0  { margin: 0 !important; }
.m-1  { margin: 0.25rem !important; }
.m-2  { margin: 0.5rem !important; }
.m-3  { margin: 1rem !important; }
.m-4  { margin: 1.5rem !important; }
.m-5  { margin: 3rem !important; }

/* Margin top */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }

/* Margin right */
.mr-0 { margin-right: 0 !important; }
.mr-1 { margin-right: 0.25rem !important; }
.mr-2 { margin-right: 0.5rem !important; }
.mr-3 { margin-right: 1rem !important; }
.mr-4 { margin-right: 1.5rem !important; }
.mr-5 { margin-right: 3rem !important; }

/* Margin bottom */
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }

/* Margin left */
.ml-0 { margin-left: 0 !important; }
.ml-1 { margin-left: 0.25rem !important; }
.ml-2 { margin-left: 0.5rem !important; }
.ml-3 { margin-left: 1rem !important; }
.ml-4 { margin-left: 1.5rem !important; }
.ml-5 { margin-left: 3rem !important; }

/* Margin X (left & right) */
.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-1 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; }
.mx-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; }
.mx-3 { margin-left: 1rem !important; margin-right: 1rem !important; }
.mx-4 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
.mx-5 { margin-left: 3rem !important; margin-right: 3rem !important; }

/* Margin Y (top & bottom) */
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
.my-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
.my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
.my-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; }

/* Auto margins */
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.ml-auto { margin-left: auto !important; }
.mr-auto { margin-right: auto !important; }


.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.ml-auto { margin-left: auto !important; }
.mr-auto { margin-right: auto !important; }

/* Padding utilities */
/* Padding all sides */
.p-0  { padding: 0 !important; }
.p-1  { padding: 0.25rem !important; }
.p-2  { padding: 0.5rem !important; }
.p-3  { padding: 1rem !important; }
.p-4  { padding: 1.5rem !important; }
.p-5  { padding: 3rem !important; }

/* Padding top */
.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: 0.25rem !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pt-4 { padding-top: 1.5rem !important; }
.pt-5 { padding-top: 3rem !important; }

/* Padding right */
.pr-0 { padding-right: 0 !important; }
.pr-1 { padding-right: 0.25rem !important; }
.pr-2 { padding-right: 0.5rem !important; }
.pr-3 { padding-right: 1rem !important; }
.pr-4 { padding-right: 1.5rem !important; }
.pr-5 { padding-right: 3rem !important; }

/* Padding bottom */
.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: 0.25rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.pb-4 { padding-bottom: 1.5rem !important; }
.pb-5 { padding-bottom: 3rem !important; }

/* Padding left */
.pl-0 { padding-left: 0 !important; }
.pl-1 { padding-left: 0.25rem !important; }
.pl-2 { padding-left: 0.5rem !important; }
.pl-3 { padding-left: 1rem !important; }
.pl-4 { padding-left: 1.5rem !important; }
.pl-5 { padding-left: 3rem !important; }

/* Padding X (left & right) */
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
.px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
.px-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
.px-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.px-5 { padding-left: 3rem !important; padding-right: 3rem !important; }

/* Padding Y (top & bottom) */
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
/* Base (xs) */
.flex-row            { flex-direction: row !important; }
.flex-row-reverse    { flex-direction: row-reverse !important; }
.flex-column         { flex-direction: column !important; }
.flex-column-reverse { flex-direction: column-reverse !important; }

/* Small ≥576px */
@media (min-width: 576px) {
  .flex-sm-row            { flex-direction: row !important; }
  .flex-sm-row-reverse    { flex-direction: row-reverse !important; }
  .flex-sm-column         { flex-direction: column !important; }
  .flex-sm-column-reverse { flex-direction: column-reverse !important; }
}

/* Medium ≥768px */
@media (min-width: 768px) {
  .flex-md-row            { flex-direction: row !important; }
  .flex-md-row-reverse    { flex-direction: row-reverse !important; }
  .flex-md-column         { flex-direction: column !important; }
  .flex-md-column-reverse { flex-direction: column-reverse !important; }
}

/* Large ≥992px */
@media (min-width: 992px) {
  .flex-lg-row            { flex-direction: row !important; }
  .flex-lg-row-reverse    { flex-direction: row-reverse !important; }
  .flex-lg-column         { flex-direction: column !important; }
  .flex-lg-column-reverse { flex-direction: column-reverse !important; }
}

/* Extra large ≥1200px */
@media (min-width: 1200px) {
  .flex-xl-row            { flex-direction: row !important; }
  .flex-xl-row-reverse    { flex-direction: row-reverse !important; }
  .flex-xl-column         { flex-direction: column !important; }
  .flex-xl-column-reverse { flex-direction: column-reverse !important; }
}
/* ===== Order utilities – Base (xs) ===== */
.order-first { order: -1 !important; }
.order-last  { order: 13 !important; }

.order-0  { order: 0 !important; }
.order-1  { order: 1 !important; }
.order-2  { order: 2 !important; }
.order-3  { order: 3 !important; }
.order-4  { order: 4 !important; }
.order-5  { order: 5 !important; }
.order-6  { order: 6 !important; }
.order-7  { order: 7 !important; }
.order-8  { order: 8 !important; }
.order-9  { order: 9 !important; }
.order-10 { order: 10 !important; }
.order-11 { order: 11 !important; }
.order-12 { order: 12 !important; }

/* ===== ≥576px (sm) ===== */
@media (min-width: 576px) {
  .order-sm-first { order: -1 !important; }
  .order-sm-last  { order: 13 !important; }

  .order-sm-0  { order: 0 !important; }
  .order-sm-1  { order: 1 !important; }
  .order-sm-2  { order: 2 !important; }
  .order-sm-3  { order: 3 !important; }
  .order-sm-4  { order: 4 !important; }
  .order-sm-5  { order: 5 !important; }
  .order-sm-6  { order: 6 !important; }
  .order-sm-7  { order: 7 !important; }
  .order-sm-8  { order: 8 !important; }
  .order-sm-9  { order: 9 !important; }
  .order-sm-10 { order: 10 !important; }
  .order-sm-11 { order: 11 !important; }
  .order-sm-12 { order: 12 !important; }
}

/* ===== ≥768px (md) ===== */
@media (min-width: 768px) {
  .order-md-first { order: -1 !important; }
  .order-md-last  { order: 13 !important; }

  .order-md-0  { order: 0 !important; }
  .order-md-1  { order: 1 !important; }
  .order-md-2  { order: 2 !important; }
  .order-md-3  { order: 3 !important; }
  .order-md-4  { order: 4 !important; }
  .order-md-5  { order: 5 !important; }
  .order-md-6  { order: 6 !important; }
  .order-md-7  { order: 7 !important; }
  .order-md-8  { order: 8 !important; }
  .order-md-9  { order: 9 !important; }
  .order-md-10 { order: 10 !important; }
  .order-md-11 { order: 11 !important; }
  .order-md-12 { order: 12 !important; }
}

/* ===== ≥992px (lg) ===== */
@media (min-width: 992px) {
  .order-lg-first { order: -1 !important; }
  .order-lg-last  { order: 13 !important; }

  .order-lg-0  { order: 0 !important; }
  .order-lg-1  { order: 1 !important; }
  .order-lg-2  { order: 2 !important; }
  .order-lg-3  { order: 3 !important; }
  .order-lg-4  { order: 4 !important; }
  .order-lg-5  { order: 5 !important; }
  .order-lg-6  { order: 6 !important; }
  .order-lg-7  { order: 7 !important; }
  .order-lg-8  { order: 8 !important; }
  .order-lg-9  { order: 9 !important; }
  .order-lg-10 { order: 10 !important; }
  .order-lg-11 { order: 11 !important; }
  .order-lg-12 { order: 12 !important; }
}

/* ===== ≥1200px (xl) ===== */
@media (min-width: 1200px) {
  .order-xl-first { order: -1 !important; }
  .order-xl-last  { order: 13 !important; }

  .order-xl-0  { order: 0 !important; }
  .order-xl-1  { order: 1 !important; }
  .order-xl-2  { order: 2 !important; }
  .order-xl-3  { order: 3 !important; }
  .order-xl-4  { order: 4 !important; }
  .order-xl-5  { order: 5 !important; }
  .order-xl-6  { order: 6 !important; }
  .order-xl-7  { order: 7 !important; }
  .order-xl-8  { order: 8 !important; }
  .order-xl-9  { order: 9 !important; }
  .order-xl-10 { order: 10 !important; }
  .order-xl-11 { order: 11 !important; }
  .order-xl-12 { order: 12 !important; }
}