:root {
  --primary: #457bff;
  --bg-light-primary: #e7f1fb;
}

.text-primary {
  color: var(--primary) !important;
}

.bg-primary {
  background-color: var(--primary) !important;
}

.bg-light-primary {
  background-color: var(--bg-light-primary) !important;
}

@font-face {
  font-family: "PlusJakartaSans BoldItalic";
  src: url("assets/fonts/PlusJakartaSans-BoldItalic.ttf") format("truetype");
}

@font-face {
  font-family: "PlusJakartaSans ExtraBoldItalic";
  src: url("assets/fonts/PlusJakartaSans-ExtraBoldItalic.ttf")
    format("truetype");
}

@font-face {
  font-family: "PlusJakartaSans Italic";
  src: url("assets/fonts/PlusJakartaSans-Italic.ttf") format("truetype");
}

@font-face {
  font-family: "PlusJakartaSans LightItalic";
  src: url("assets/fonts/PlusJakartaSans-LightItalic.ttf") format("truetype");
}

@font-face {
  font-family: "PlusJakartaSans Medium";
  src: url("assets/fonts/PlusJakartaSans-Medium.ttf") format("truetype");
}

@font-face {
  font-family: "PlusJakartaSans SemiBoldItalic";
  src: url("assets/fonts/PlusJakartaSans-SemiBoldItalic.ttf") format("truetype");
}

@font-face {
  font-family: "PlusJakartaSans Bold";
  src: url("assets/fonts/PlusJakartaSans-Bold.ttf") format("truetype");
}

@font-face {
  font-family: "PlusJakartaSans ExtraBold";
  src: url("assets/fonts/PlusJakartaSans-ExtraBold.ttf") format("truetype");
}

@font-face {
  font-family: "PlusJakartaSans ExtraLight";
  src: url("assets/fonts/PlusJakartaSans-ExtraLight.ttf") format("truetype");
}

@font-face {
  font-family: "PlusJakartaSans ExtraLightItalic";
  src: url("assets/fonts/PlusJakartaSans-ExtraLightItalic.ttf")
    format("truetype");
}

@font-face {
  font-family: "PlusJakartaSans Light";
  src: url("assets/fonts/PlusJakartaSans-Light.ttf") format("truetype");
}

@font-face {
  font-family: "PlusJakartaSans MediumItalic";
  src: url("assets/fonts/PlusJakartaSans-MediumItalic.ttf") format("truetype");
}

@font-face {
  font-family: "PlusJakartaSans Regular";
  src: url("assets/fonts/PlusJakartaSans-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "PlusJakartaSans SemiBold";
  src: url("assets/fonts/PlusJakartaSans-SemiBold.ttf") format("truetype");
}

html,
body,
*,
button,
input,
select,
textarea {
  font-family: "PlusJakartaSans Regular", sans-serif !important;
}

/* Class tiện ích */
.font-pj-extralight {
  font-family: "PlusJakartaSans ExtraLight", sans-serif !important;
}
.font-pj-extralight-italic {
  font-family: "PlusJakartaSans ExtraLightItalic", sans-serif !important;
}
.font-pj-light {
  font-family: "PlusJakartaSans Light", sans-serif !important;
}
.font-pj-light-italic {
  font-family: "PlusJakartaSans LightItalic", sans-serif !important;
}
.font-pj-regular {
  font-family: "PlusJakartaSans Regular", sans-serif !important;
}
.font-pj-italic {
  font-family: "PlusJakartaSans Italic", sans-serif !important;
}
.font-pj-medium {
  font-family: "PlusJakartaSans Medium", sans-serif !important;
}
.font-pj-medium-italic {
  font-family: "PlusJakartaSans MediumItalic", sans-serif !important;
}
.font-pj-semibold {
  font-family: "PlusJakartaSans SemiBold", sans-serif !important;
}
.font-pj-semibold-italic {
  font-family: "PlusJakartaSans SemiBoldItalic", sans-serif !important;
}
.font-pj-bold {
  font-family: "PlusJakartaSans Bold", sans-serif !important;
}
.font-pj-bold-italic {
  font-family: "PlusJakartaSans BoldItalic", sans-serif !important;
}
.font-pj-extrabold {
  font-family: "PlusJakartaSans ExtraBold", sans-serif !important;
}
.font-pj-extrabold-italic {
  font-family: "PlusJakartaSans ExtraBoldItalic", sans-serif !important;
}

/* Custom Bootstrap Spacing: 6 = 4rem (64px), 7 = 5rem (80px), 8 = 6rem (96px), 9 = 7rem (112px), 10 = 8rem (128px) */

/* ==========================================================================
   FLUID RESPONSIVE SPACING (Tự động co giãn theo viewport từ Mobile -> Desktop)
   - 6 : Min 2rem (32px)  -> Max 4rem (64px)
   - 7 : Min 2.5rem (40px)-> Max 5rem (80px)
   - 8 : Min 3rem (48px)  -> Max 6rem (96px)
   - 9 : Min 3.5rem (56px)-> Max 7rem (112px)
   - 10: Min 4rem (64px)  -> Max 8rem (128px)
   ========================================================================== */

/* MARGIN BASE */
.mt-6 {
  margin-top: clamp(2rem, 4vw, 4rem) !important;
}
.mt-7 {
  margin-top: clamp(2.5rem, 5vw, 5rem) !important;
}
.mt-8 {
  margin-top: clamp(3rem, 6vw, 6rem) !important;
}
.mt-9 {
  margin-top: clamp(3.5rem, 7vw, 7rem) !important;
}
.mt-10 {
  margin-top: clamp(4rem, 8vw, 8rem) !important;
}

.mb-6 {
  margin-bottom: clamp(2rem, 4vw, 4rem) !important;
}
.mb-7 {
  margin-bottom: clamp(2.5rem, 5vw, 5rem) !important;
}
.mb-8 {
  margin-bottom: clamp(3rem, 6vw, 6rem) !important;
}
.mb-9 {
  margin-bottom: clamp(3.5rem, 7vw, 7rem) !important;
}
.mb-10 {
  margin-bottom: clamp(4rem, 8vw, 8rem) !important;
}

.ms-6 {
  margin-left: clamp(2rem, 4vw, 4rem) !important;
}
.ms-7 {
  margin-left: clamp(2.5rem, 5vw, 5rem) !important;
}
.ms-8 {
  margin-left: clamp(3rem, 6vw, 6rem) !important;
}
.ms-9 {
  margin-left: clamp(3.5rem, 7vw, 7rem) !important;
}
.ms-10 {
  margin-left: clamp(4rem, 8vw, 8rem) !important;
}

.me-6 {
  margin-right: clamp(2rem, 4vw, 4rem) !important;
}
.me-7 {
  margin-right: clamp(2.5rem, 5vw, 5rem) !important;
}
.me-8 {
  margin-right: clamp(3rem, 6vw, 6rem) !important;
}
.me-9 {
  margin-right: clamp(3.5rem, 7vw, 7rem) !important;
}
.me-10 {
  margin-right: clamp(4rem, 8vw, 8rem) !important;
}

.mx-6 {
  margin-left: clamp(2rem, 4vw, 4rem) !important;
  margin-right: clamp(2rem, 4vw, 4rem) !important;
}
.mx-7 {
  margin-left: clamp(2.5rem, 5vw, 5rem) !important;
  margin-right: clamp(2.5rem, 5vw, 5rem) !important;
}
.mx-8 {
  margin-left: clamp(3rem, 6vw, 6rem) !important;
  margin-right: clamp(3rem, 6vw, 6rem) !important;
}
.mx-9 {
  margin-left: clamp(3.5rem, 7vw, 7rem) !important;
  margin-right: clamp(3.5rem, 7vw, 7rem) !important;
}
.mx-10 {
  margin-left: clamp(4rem, 8vw, 8rem) !important;
  margin-right: clamp(4rem, 8vw, 8rem) !important;
}

.my-6 {
  margin-top: clamp(2rem, 4vw, 4rem) !important;
  margin-bottom: clamp(2rem, 4vw, 4rem) !important;
}
.my-7 {
  margin-top: clamp(2.5rem, 5vw, 5rem) !important;
  margin-bottom: clamp(2.5rem, 5vw, 5rem) !important;
}
.my-8 {
  margin-top: clamp(3rem, 6vw, 6rem) !important;
  margin-bottom: clamp(3rem, 6vw, 6rem) !important;
}
.my-9 {
  margin-top: clamp(3.5rem, 7vw, 7rem) !important;
  margin-bottom: clamp(3.5rem, 7vw, 7rem) !important;
}
.my-10 {
  margin-top: clamp(4rem, 8vw, 8rem) !important;
  margin-bottom: clamp(4rem, 8vw, 8rem) !important;
}

/* PADDING BASE */
.pt-6 {
  padding-top: clamp(2rem, 4vw, 4rem) !important;
}
.pt-7 {
  padding-top: clamp(2.5rem, 5vw, 5rem) !important;
}
.pt-8 {
  padding-top: clamp(3rem, 6vw, 6rem) !important;
}
.pt-9 {
  padding-top: clamp(3.5rem, 7vw, 7rem) !important;
}
.pt-10 {
  padding-top: clamp(4rem, 8vw, 8rem) !important;
}

.pb-6 {
  padding-bottom: clamp(2rem, 4vw, 4rem) !important;
}
.pb-7 {
  padding-bottom: clamp(2.5rem, 5vw, 5rem) !important;
}
.pb-8 {
  padding-bottom: clamp(3rem, 6vw, 6rem) !important;
}
.pb-9 {
  padding-bottom: clamp(3.5rem, 7vw, 7rem) !important;
}
.pb-10 {
  padding-bottom: clamp(4rem, 8vw, 8rem) !important;
}

.ps-6 {
  padding-left: clamp(2rem, 4vw, 4rem) !important;
}
.ps-7 {
  padding-left: clamp(2.5rem, 5vw, 5rem) !important;
}
.ps-8 {
  padding-left: clamp(3rem, 6vw, 6rem) !important;
}
.ps-9 {
  padding-left: clamp(3.5rem, 7vw, 7rem) !important;
}
.ps-10 {
  padding-left: clamp(4rem, 8vw, 8rem) !important;
}

.pe-6 {
  padding-right: clamp(2rem, 4vw, 4rem) !important;
}
.pe-7 {
  padding-right: clamp(2.5rem, 5vw, 5rem) !important;
}
.pe-8 {
  padding-right: clamp(3rem, 6vw, 6rem) !important;
}
.pe-9 {
  padding-right: clamp(3.5rem, 7vw, 7rem) !important;
}
.pe-10 {
  padding-right: clamp(4rem, 8vw, 8rem) !important;
}

.px-6 {
  padding-left: clamp(2rem, 4vw, 4rem) !important;
  padding-right: clamp(2rem, 4vw, 4rem) !important;
}
.px-7 {
  padding-left: clamp(2.5rem, 5vw, 5rem) !important;
  padding-right: clamp(2.5rem, 5vw, 5rem) !important;
}
.px-8 {
  padding-left: clamp(3rem, 6vw, 6rem) !important;
  padding-right: clamp(3rem, 6vw, 6rem) !important;
}
.px-9 {
  padding-left: clamp(3.5rem, 7vw, 7rem) !important;
  padding-right: clamp(3.5rem, 7vw, 7rem) !important;
}
.px-10 {
  padding-left: clamp(4rem, 8vw, 8rem) !important;
  padding-right: clamp(4rem, 8vw, 8rem) !important;
}

.py-6 {
  padding-top: clamp(2rem, 4vw, 4rem) !important;
  padding-bottom: clamp(2rem, 4vw, 4rem) !important;
}
.py-7 {
  padding-top: clamp(2.5rem, 5vw, 5rem) !important;
  padding-bottom: clamp(2.5rem, 5vw, 5rem) !important;
}
.py-8 {
  padding-top: clamp(3rem, 6vw, 6rem) !important;
  padding-bottom: clamp(3rem, 6vw, 6rem) !important;
}
.py-9 {
  padding-top: clamp(3.5rem, 7vw, 7rem) !important;
  padding-bottom: clamp(3.5rem, 7vw, 7rem) !important;
}
.py-10 {
  padding-top: clamp(4rem, 8vw, 8rem) !important;
  padding-bottom: clamp(4rem, 8vw, 8rem) !important;
}

/* ==========================================================================
   FONT SIZE UTILITIES (.font0 -> .font100)
   Màn nhỏ: Co lại theo tỉ lệ an toàn (Min = Size * 0.6)
   Màn lớn: Giới hạn tối đa đúng số px tương ứng với class name
   ========================================================================== */

.font0 {
  font-size: 0px !important;
}
.font1 {
  font-size: clamp(1px, 0.08vw, 1px) !important;
}
.font2 {
  font-size: clamp(2px, 0.16vw, 2px) !important;
}
.font3 {
  font-size: clamp(3px, 0.23vw, 3px) !important;
}
.font4 {
  font-size: clamp(4px, 0.31vw, 4px) !important;
}
.font5 {
  font-size: clamp(5px, 0.39vw, 5px) !important;
}
.font6 {
  font-size: clamp(6px, 0.47vw, 6px) !important;
}
.font7 {
  font-size: clamp(7px, 0.55vw, 7px) !important;
}
.font8 {
  font-size: clamp(8px, 0.63vw, 8px) !important;
}
.font9 {
  font-size: clamp(9px, 0.7vw, 9px) !important;
}
.font10 {
  font-size: clamp(8px, 0.78vw, 10px) !important;
}
.font11 {
  font-size: clamp(8px, 0.86vw, 11px) !important;
}
.font12 {
  font-size: clamp(9px, 0.94vw, 12px) !important;
}
.font13 {
  font-size: clamp(10px, 1.02vw, 13px) !important;
}
.font14 {
  font-size: clamp(10px, 1.09vw, 14px) !important;
}
.font15 {
  font-size: clamp(11px, 1.17vw, 15px) !important;
}
.font16 {
  font-size: clamp(12px, 1.25vw, 16px) !important;
}
.font17 {
  font-size: clamp(12px, 1.33vw, 17px) !important;
}
.font18 {
  font-size: clamp(13px, 1.41vw, 18px) !important;
}
.font19 {
  font-size: clamp(14px, 1.48vw, 19px) !important;
}
.font20 {
  font-size: clamp(14px, 1.56vw, 20px) !important;
}
.font21 {
  font-size: clamp(15px, 1.64vw, 21px) !important;
}
.font22 {
  font-size: clamp(15px, 1.72vw, 22px) !important;
}
.font23 {
  font-size: clamp(16px, 1.8vw, 23px) !important;
}
.font24 {
  font-size: clamp(17px, 1.88vw, 24px) !important;
}
.font25 {
  font-size: clamp(18px, 1.95vw, 25px) !important;
}
.font26 {
  font-size: clamp(18px, 2.03vw, 26px) !important;
}
.font27 {
  font-size: clamp(19px, 2.11vw, 27px) !important;
}
.font28 {
  font-size: clamp(20px, 2.19vw, 28px) !important;
}
.font29 {
  font-size: clamp(20px, 2.27vw, 29px) !important;
}
.font30 {
  font-size: clamp(21px, 2.34vw, 30px) !important;
}
.font31 {
  font-size: clamp(22px, 2.42vw, 31px) !important;
}
.font32 {
  font-size: clamp(22px, 2.5vw, 32px) !important;
}
.font33 {
  font-size: clamp(23px, 2.58vw, 33px) !important;
}
.font34 {
  font-size: clamp(24px, 2.66vw, 34px) !important;
}
.font35 {
  font-size: clamp(25px, 2.73vw, 35px) !important;
}
.font36 {
  font-size: clamp(25px, 2.81vw, 36px) !important;
}
.font37 {
  font-size: clamp(26px, 2.89vw, 37px) !important;
}
.font38 {
  font-size: clamp(27px, 2.97vw, 38px) !important;
}
.font39 {
  font-size: clamp(27px, 3.05vw, 39px) !important;
}
.font40 {
  font-size: clamp(28px, 3.13vw, 40px) !important;
}
.font41 {
  font-size: clamp(28px, 3.2vw, 41px) !important;
}
.font42 {
  font-size: clamp(29px, 3.28vw, 42px) !important;
}
.font43 {
  font-size: clamp(30px, 3.36vw, 43px) !important;
}
.font44 {
  font-size: clamp(31px, 3.44vw, 44px) !important;
}
.font45 {
  font-size: clamp(32px, 3.52vw, 45px) !important;
}
.font46 {
  font-size: clamp(32px, 3.59vw, 46px) !important;
}
.font47 {
  font-size: clamp(33px, 3.67vw, 47px) !important;
}
.font48 {
  font-size: clamp(34px, 3.75vw, 48px) !important;
}
.font49 {
  font-size: clamp(34px, 3.83vw, 49px) !important;
}
.font50 {
  font-size: clamp(35px, 3.91vw, 50px) !important;
}
.font51 {
  font-size: clamp(36px, 3.98vw, 51px) !important;
}
.font52 {
  font-size: clamp(36px, 4.06vw, 52px) !important;
}
.font53 {
  font-size: clamp(37px, 4.14vw, 53px) !important;
}
.font54 {
  font-size: clamp(38px, 4.22vw, 54px) !important;
}
.font55 {
  font-size: clamp(39px, 4.3vw, 55px) !important;
}
.font56 {
  font-size: clamp(39px, 4.38vw, 56px) !important;
}
.font57 {
  font-size: clamp(40px, 4.45vw, 57px) !important;
}
.font58 {
  font-size: clamp(41px, 4.53vw, 58px) !important;
}
.font59 {
  font-size: clamp(41px, 4.61vw, 59px) !important;
}
.font60 {
  font-size: clamp(42px, 4.69vw, 60px) !important;
}
.font61 {
  font-size: clamp(43px, 4.77vw, 61px) !important;
}
.font62 {
  font-size: clamp(43px, 4.84vw, 62px) !important;
}
.font63 {
  font-size: clamp(44px, 4.92vw, 63px) !important;
}
.font64 {
  font-size: clamp(45px, 5vw, 64px) !important;
}
.font65 {
  font-size: clamp(46px, 5.08vw, 65px) !important;
}
.font66 {
  font-size: clamp(46px, 5.16vw, 66px) !important;
}
.font67 {
  font-size: clamp(47px, 5.23vw, 67px) !important;
}
.font68 {
  font-size: clamp(48px, 5.31vw, 68px) !important;
}
.font69 {
  font-size: clamp(48px, 5.39vw, 69px) !important;
}
.font70 {
  font-size: clamp(49px, 5.47vw, 70px) !important;
}
.font71 {
  font-size: clamp(50px, 5.55vw, 71px) !important;
}
.font72 {
  font-size: clamp(50px, 5.63vw, 72px) !important;
}
.font73 {
  font-size: clamp(51px, 5.7vw, 73px) !important;
}
.font74 {
  font-size: clamp(52px, 5.78vw, 74px) !important;
}
.font75 {
  font-size: clamp(53px, 5.86vw, 75px) !important;
}
.font76 {
  font-size: clamp(53px, 5.94vw, 76px) !important;
}
.font77 {
  font-size: clamp(54px, 6.02vw, 77px) !important;
}
.font78 {
  font-size: clamp(55px, 6.09vw, 78px) !important;
}
.font79 {
  font-size: clamp(55px, 6.17vw, 79px) !important;
}
.font80 {
  font-size: clamp(56px, 6.25vw, 80px) !important;
}
.font81 {
  font-size: clamp(57px, 6.33vw, 81px) !important;
}
.font82 {
  font-size: clamp(57px, 6.41vw, 82px) !important;
}
.font83 {
  font-size: clamp(58px, 6.48vw, 83px) !important;
}
.font84 {
  font-size: clamp(59px, 6.56vw, 84px) !important;
}
.font85 {
  font-size: clamp(60px, 6.64vw, 85px) !important;
}
.font86 {
  font-size: clamp(60px, 6.72vw, 86px) !important;
}
.font87 {
  font-size: clamp(61px, 6.8vw, 87px) !important;
}
.font88 {
  font-size: clamp(62px, 6.88vw, 88px) !important;
}
.font89 {
  font-size: clamp(62px, 6.95vw, 89px) !important;
}
.font90 {
  font-size: clamp(63px, 7.03vw, 90px) !important;
}
.font91 {
  font-size: clamp(64px, 7.11vw, 91px) !important;
}
.font92 {
  font-size: clamp(64px, 7.19vw, 92px) !important;
}
.font93 {
  font-size: clamp(65px, 7.27vw, 93px) !important;
}
.font94 {
  font-size: clamp(66px, 7.34vw, 94px) !important;
}
.font95 {
  font-size: clamp(67px, 7.42vw, 95px) !important;
}
.font96 {
  font-size: clamp(67px, 7.5vw, 96px) !important;
}
.font97 {
  font-size: clamp(68px, 7.58vw, 97px) !important;
}
.font98 {
  font-size: clamp(69px, 7.66vw, 98px) !important;
}
.font99 {
  font-size: clamp(69px, 7.73vw, 99px) !important;
}
.font100 {
  font-size: clamp(70px, 7.81vw, 100px) !important;
}

.lh-1-0 {
  line-height: 1 !important;
}
.lh-1-1 {
  line-height: 1.1 !important;
}
.lh-1-2 {
  line-height: 1.2 !important;
}
.lh-1-3 {
  line-height: 1.3 !important;
}
.lh-1-4 {
  line-height: 1.4 !important;
}
.lh-1-5 {
  line-height: 1.5 !important;
}
.lh-1-6 {
  line-height: 1.6 !important;
}
.lh-1-7 {
  line-height: 1.7 !important;
}
.lh-1-8 {
  line-height: 1.8 !important;
}
.lh-1-9 {
  line-height: 1.9 !important;
}
.lh-2-0 {
  line-height: 2 !important;
}
.lh-2-1 {
  line-height: 2.1 !important;
}
.lh-2-2 {
  line-height: 2.2 !important;
}
.lh-2-3 {
  line-height: 2.3 !important;
}
.lh-2-4 {
  line-height: 2.4 !important;
}
.lh-2-5 {
  line-height: 2.5 !important;
}
.lh-2-6 {
  line-height: 2.6 !important;
}
.lh-2-7 {
  line-height: 2.7 !important;
}
.lh-2-8 {
  line-height: 2.8 !important;
}
.lh-2-9 {
  line-height: 2.9 !important;
}
.lh-3-0 {
  line-height: 3 !important;
}

.rounded-12 {
  border-radius: 12px !important;
}
.rounded-16 {
  border-radius: 16px !important;
}
.rounded-20 {
  border-radius: 20px !important;
}
.rounded-24 {
  border-radius: 24px !important;
}
.rounded-27 {
  border-radius: 27px !important;
}
.rounded-30 {
  border-radius: 30px !important;
}

.border-1 {
  border: 1px solid #f8f9fa !important;
}

.py-12 {
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}

.text-primary-deep {
  color: #6e42fb !important;
}

.bg-black {
  background: #000000;
}
.z-10 {
  z-index: 10 !important;
}
/* Styling Tiêu đề Menu (Bold & 24px) */
.footer-links .footer-title {
  font-family: "PlusJakartaSans Bold", sans-serif !important;
  font-size: 24px !important;
  line-height: 1.2;
}

/* Styling Các Item Liên Kết (Light & 16px) */
.footer-links a,
.footer-links .footer-item {
  font-family: "PlusJakartaSans Light", sans-serif !important;
  font-size: 16px !important;
  color: #6c757d;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-links a:hover,
.footer-links .footer-item:hover {
  color: #0d6efd;
}

/* Đường phân cách cột responsive */
@media (min-width: 992px) {
  .border-start-lg {
    border-left: 1px solid #dee2e6 !important;
  }
  .border-end-lg {
    border-right: 1px solid #dee2e6 !important;
  }
}