* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  margin: 0;
  color: #12366d;
  background: #eef9ff
}

.container {
  width: min(1180px, calc(100% - 24px));
  margin: auto
}

header {
  height: 70px;
  background: #fff;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 15px rgba(19, 92, 163, .11);
  position: sticky;
  top: 0;
  z-index: 20
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px
}

.logo {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 20px;
  font-weight: 900;
  color: #0758b8;
  text-decoration: none
}

.logoicon i {
  font-size: 28px;
  color: #0875db
}

.logo small {
  display: block;
  font-size: 10px;
  color: #23406c
}

.hotline {
  background: linear-gradient(90deg, #0873dc, #37aaf2);
  color: #fff;
  padding: 11px 18px;
  border-radius: 28px;
  text-decoration: none;
  font-weight: 900
}

.hotline i {
  margin-right: 5px
}

.hero {
  padding: 24px 0 44px;
  background: #eefaff
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 60% 40%;
  gap: 0;
  align-items: start;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 16px 45px rgba(17, 90, 150, .13)
}

.scratch-bg {
	background: url("../images/lap-trinh-scratch-co-ban.png") top center/100% auto no-repeat;
}

.thtn-bg {
	background: url("../images/thtn-bg.png") top center/100% auto no-repeat;
}

.thvp-bg {
	background: url("../images/thvp-bg.png") top center/100% auto no-repeat;
}


.hero-left {
  position: relative;
  min-width: 0;
  padding: 30px 45px 50px;
  z-index: 2
}

.hero-content {
  max-width: 620px
}

.hero-badge {
  display: inline-block;
  font-size: 24px;
  font-weight: 900;
  color: #073d83;
  margin-bottom: 5px
}

.hero-content h1 {
  margin: 0;
  font-size: clamp(52px, 5vw, 78px);
  line-height: .95;
  color: #0875d1;
  font-weight: 900;
  letter-spacing: -2px
}

.hero-content h1 span {
  display: block;
  color: #ff7917
}

.hero-slogan {
  display: inline-block;
  margin-top: 20px;
  padding: 10px 22px;
  background: #2998e8;
  color: #fff;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 800
}

.hero-description {
  max-width: 500px;
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: #365878
}

.hero-course h2 {
  margin: 0 0 14px;
  font-size: 20px;
  color: #0758b8
}

.hero-course h2 i {
  margin-right: 7px
}

.hero-course-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px
}

.hero-course-item {
  min-height: 125px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 15px 10px;
  background: rgba(255, 255, 255, .93);
  border-radius: 18px;
  box-shadow: 0 8px 25px rgba(0, 80, 150, .10)
}

.hero-course-item > i {
  margin-bottom: 10px;
  font-size: 30px;
  color: #0875d1
}

.hero-course-item:nth-child(1) > i {
  color: #f4a000
}

.hero-course-item:nth-child(2) > i {
  color: #0875db
}

.hero-course-item:nth-child(3) > i {
  color: #20a464
}

.hero-course-item span {
  font-size: 13px;
  line-height: 1.4;
  font-weight: 700;
  color: #073d83
}

.hero-tuition {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 18px;
  padding: 18px 22px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(255, 247, 218, .96));
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 80, 150, .10)
}

.tuition-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  flex: 0 0 58px;
  border-radius: 50%;
  background: #fff1c2;
  color: #ff8a00;
  font-size: 25px
}

.tuition-info small {
  display: block;
  font-size: 12px;
  font-weight: 900;
  color: #e55c20
}

.tuition-info strong {
  display: block;
  font-size: 30px;
  color: #f05b2a
}

.tuition-info strong span {
  font-size: 15px;
  color: #6b7280
}

.tuition-info p {
  margin: 3px 0 0;
  font-size: 12px;
  color: #526579
}

.tuition-info p i {
  margin-right: 4px;
  color: #0875d1
}

.hero-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 18px
}

.hero-features > div {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px;
  background: rgba(255, 255, 255, .9);
  border-radius: 14px
}

.hero-features > div > i {
  font-size: 22px;
  color: #0875d1
}

.hero-features span,
.hero-features b,
.hero-features small {
  display: block
}

.hero-features b {
  font-size: 12px
}

.hero-features small {
  font-size: 10px;
  color: #667c99;
  margin-top: 2px
}

.form-card {
  grid-column: 2;
  width: calc(100% - 30px);
  margin: 20px 15px 0 0;
  background: rgba(255, 255, 255, .985);
  border: 9px solid rgba(255, 255, 255, .75);
  border-radius: 24px;
  box-shadow: 0 15px 40px rgba(10, 96, 149, .22);
  overflow: hidden;
  z-index: 5
}

.form-title {
  background: linear-gradient(135deg, #0875db, #0052bb);
  color: #fff;
  padding: 22px;
  text-align: center;
  font-size: 23px;
  font-weight: 900
}

.form-title small {
  display: block;
  font-size: 12px;
  margin-top: 5px;
  font-weight: 500
}

.form-title i {
  margin-right: 7px
}

form {
  padding: 18px
}

form h3 {
  font-size: 15px;
  color: #0b55ae;
  margin: 14px 0 8px
}

form h3 small {
  font-weight: 400;
  color: #3d72ad
}

.section-icon {
  width: 22px;
  text-align: center;
  color: #0b55ae;
  margin-right: 4px
}

form label {
  display: block;
  font-size: 13px;
  color: #222;
  margin: 8px 0
}

form i {
  font-style: normal
}

form input:not([type=checkbox]),
form select {
  width: 100%;
  height: 43px;
  border: 1px solid #cfddeb;
  border-radius: 8px;
  padding: 0 11px;
  margin-top: 5px;
  background: #fff
}

.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px
}

.schedule {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 12px
}

.schedule label {
  padding: 4px
}

.schedule input {
  accent-color: #0875db
}

button {
  width: 100%;
  height: 52px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(90deg, #ff7d08, #ffb20c);
  color: #fff;
  font-size: 17px;
  font-weight: 900;
  margin-top: 12px;
  cursor: pointer
}

button:disabled {
  opacity: .65;
  cursor: not-allowed
}

.privacy {
  text-align: center;
  color: #7c8998;
  font-size: 11px
}

.privacy i {
  color: #64748b;
  margin-right: 3px
}

.hp {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0
}

.err {
  color: #c22;
  font-size: 12px
}

#formMessage.success,
#formMessage.error {
  padding: 10px;
  border-radius: 8px;
  margin-top: 10px
}

#formMessage.success {
  background: #e8f8ed;
  color: #176b38
}

#formMessage.error {
  background: #fff0f0;
  color: #9f2626
}

footer {
  background: #0758a9;
  color: #fff;
  padding: 24px;
  text-align: center
}

footer a {
  color: #fff
}

.footer-sep {
  margin: 0 10px
}

@media(max-width:900px) {
  header {
    height: 64px
  }

  .logo {
    font-size: 16px
  }

  .logo small {
    display: none
  }

  .hotline {
    font-size: 12px;
    padding: 9px 12px
  }

  .hero {
    padding: 12px 0 28px
  }

  .hero-grid {
    display: block;
    width: min(600px, calc(100% - 16px));
    min-height: auto;
    background-image: url("../images/template-reference-mobile.png");
    background-size: 100% auto;
    background-position: top center;
    border-radius: 18px
  }
  
  .scratch-bg {
	background-image: url("../images/lap-trinh-scratch-co-ban-mobile.png");
  }

  .thtn-bg {
	background-image: url("../images/thtn-bg-mobile.png");
  }

  .hero-left {
    padding: 40px 20px 25px
  }

  .hero-content {
    max-width: none
  }

  .hero-content h1 {
    font-size: clamp(42px, 12vw, 62px)
  }

  .hero-slogan {
    font-size: 14px
  }

  .hero-description {
    font-size: 14px
  }

  .hero-course {
    margin-top: 500px
  }

  .form-card {
    width: calc(100% - 24px);
    margin: 20px 12px 30px;
    border-width: 6px
  }
}

@media(max-width:520px) {
  .container {
    width: min(100% - 16px, 1180px)
  }

  .hero-left {
    padding: 30px 15px 20px
  }

  .hero-course {
    margin-top: 390px
  }

  .hero-course-grid {
    grid-template-columns: 1fr
  }

  .hero-course-item {
    min-height: 82px;
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    gap: 14px;
    padding: 13px 16px
  }

  .hero-course-item > i {
    width: 35px;
    margin: 0;
    text-align: center
  }

  .hero-tuition {
    padding: 15px
  }

  .tuition-info strong {
    font-size: 25px
  }

  .hero-features {
    grid-template-columns: 1fr
  }

  .hero-features > div {
    padding: 10px 14px
  }

  .form-card {
    width: calc(100% - 16px);
    margin: 20px 8px 25px;
    border-width: 4px
  }

  .form-title {
    font-size: 20px;
    padding: 18px 12px
  }

  form {
    padding: 14px
  }

  .two,
  .schedule {
    grid-template-columns: 1fr 1fr
  }

  .footer-sep {
    display: block;
    height: 8px
  }
}

.hero-highlight-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 400px;
  background: rgba(255, 255, 255, .95);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 80, 150, .10);
}

.hero-highlight-item {
  min-width: 0;
  min-height: 155px;
  padding: 16px 8px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  border-right: 1px solid #e2edf6;
}

.hero-highlight-item:last-child {
  border-right: 0
}

.highlight-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  margin-bottom: 10px;
  color: #fff;
  font-size: 26px;
  box-shadow: 0 5px 13px rgba(0, 0, 0, .08);
}

.highlight-icon.green {
  background: #16b864
}

.highlight-icon.orange {
  background: #ff8708
}

.highlight-icon.purple {
  background: linear-gradient(135deg, #6c36df, #9a55ee)
}

.highlight-icon.pink {
  background: linear-gradient(135deg, #ff2462, #ee4b79)
}

.hero-highlight-item strong {
  display: block;
  color: #073d83;
  font-size: 13px;
  line-height: 1.25;
}

.hero-highlight-item small {
  display: block;
  margin-top: 5px;
  color: #526f96;
  font-size: 10.5px;
  line-height: 1.3;
}

.hero-highlight-grid + .hero-course {
  margin-top: 22px
}

@media(max-width:900px) {
  .hero-highlight-grid {
    margin-top: 500px
  }

  .hero-highlight-grid + .hero-course {
    margin-top: 22px
  }
}

@media(max-width:520px) {
  .hero-highlight-grid {
    margin-top: 250px;
    grid-template-columns: repeat(2, 1fr);
    border-radius: 16px;
  }

  .hero-highlight-item {
    min-height: 135px;
    border-right: 1px solid #e2edf6;
    border-bottom: 1px solid #e2edf6;
  }

  .hero-highlight-item:nth-child(2n) {
    border-right: 0
  }

  .hero-highlight-item:nth-last-child(-n+2) {
    border-bottom: 0
  }

  .highlight-icon {
    width: 48px;
    height: 48px;
    font-size: 23px
  }

  .hero-highlight-item strong {
    font-size: 12px
  }

  .hero-highlight-item small {
    font-size: 10px
  }
}

.tuition-section {
  position: relative;
  overflow: hidden;
  padding: 32px 0 42px;
  background: linear-gradient(135deg, #f7fcff 0%, #edf9ff 55%, #e6f5ff 100%);
}

.tuition-showcase {
  display: grid;
  grid-template-columns: 1.35fr .72fr 1fr;
  min-height: 190px;
  overflow: hidden;
  border-radius: 24px 24px 0 0;
  background: #fff;
  box-shadow: 0 14px 35px rgba(16, 82, 139, .10);
}

.tuition-main {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 25px;
  background: linear-gradient(110deg, #fff2f6, #fff8fb);
}

.tuition-girl {
  width: 115px;
  height: 135px;
  flex: 0 0 115px;
  display: grid;
  place-items: center;
  align-self: end;
  font-size: 82px;
  color: #e95482;
  background: linear-gradient(180deg, #ffe6ef, #fff);
  border-radius: 60px 60px 20px 20px;
}

.tuition-price > span {
  display: block;
  font-size: 21px;
  font-weight: 900;
  color: #b62550
}

.tuition-price > strong {
  display: block;
  margin: 5px 0;
  color: #f13e69;
  font-size: 39px;
  line-height: 1
}

.tuition-price > strong small {
  font-size: 22px
}

.tuition-price p {
  margin: 13px 0 0;
  font-size: 14px;
  font-weight: 800;
  color: #12366d
}

.tuition-note {
  position: relative;
  padding: 28px 22px;
  background: linear-gradient(135deg, #fff8b9, #ffef8a);
  transform: rotate(-1deg);
  color: #173c67;
}

.tuition-note > i:first-child {
  position: absolute;
  left: -13px;
  top: 13px;
  font-size: 30px;
  color: #ff4f78;
  transform: rotate(-15deg)
}

.tuition-note p {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  font-weight: 700
}

.tuition-note p strong {
  color: #16864e
}

.note-smile {
  position: absolute;
  right: 18px;
  bottom: 14px;
  font-size: 32px;
  color: #e8a500
}

.tuition-quote {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 25px;
  text-align: center;
  background: linear-gradient(135deg, #f5fcff, #e4f6ff);
  color: #1458a0;
}

.tuition-quote p {
  margin: 0;
  font-size: 18px;
  line-height: 1.55;
  font-style: italic;
  transform: rotate(-4deg)
}

.tuition-quote p strong {
  font-weight: 800
}

.tuition-quote > i:first-child {
  margin-right: 10px;
  color: #168be0
}

.tuition-quote > i:last-child {
  margin-left: 8px;
  color: #ff4f78
}

.learning-values {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  background: rgba(255, 255, 255, .96);
  border-radius: 0 0 24px 24px;
  box-shadow: 0 14px 35px rgba(16, 82, 139, .10);
}

.value-item {
  min-height: 140px;
  padding: 17px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-right: 1px solid #e5eef6;
}

.value-item:last-child {
  border-right: 0
}

.value-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  margin-bottom: 10px;
  border-radius: 14px;
  font-size: 27px;
  background: #eef8ff;
}

.value-icon.blue {
  color: #238de3
}

.value-icon.yellow {
  color: #f5b400
}

.value-icon.green {
  color: #1ebc69
}

.value-icon.gold {
  color: #f5b82e
}

.value-item strong {
  font-size: 13px;
  color: #12366d
}

.value-item small {
  margin-top: 3px;
  font-size: 12px;
  color: #31587e
}

.learning-decor {
  position: absolute;
  right: 6%;
  bottom: 24px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  font-size: 55px;
  color: #1684d2;
  opacity: .88;
}

.learning-decor i:nth-child(2) {
  font-size: 70px
}

.learning-decor i:last-child {
  font-size: 80px;
  color: #35a967;
  margin-left: 8px
}

@media(max-width:900px) {
  .tuition-showcase {
    grid-template-columns: 1fr 1fr
  }

  .tuition-main {
    grid-column: 1/-1
  }

  .tuition-note,
  .tuition-quote {
    min-height: 170px
  }

  .learning-values {
    width: 100%;
    grid-template-columns: repeat(2, 1fr)
  }

  .learning-decor {
    display: none
  }
}

@media(max-width:520px) {
  .tuition-section {
    padding: 20px 0 30px
  }

  .tuition-showcase {
    display: block;
    border-radius: 18px 18px 0 0
  }

  .tuition-main {
    padding: 18px 14px;
    gap: 12px
  }

  .tuition-girl {
    width: 78px;
    height: 100px;
    flex-basis: 78px;
    font-size: 56px
  }

  .tuition-price > span {
    font-size: 16px
  }

  .tuition-price > strong {
    font-size: 28px
  }

  .tuition-price > strong small {
    font-size: 16px
  }

  .tuition-price p {
    font-size: 11px
  }

  .tuition-note,
  .tuition-quote {
    min-height: auto;
    padding: 22px 18px
  }

  .tuition-note p,
  .tuition-quote p {
    font-size: 14px
  }

  .learning-values {
    grid-template-columns: repeat(2, 1fr);
    border-radius: 0 0 18px 18px
  }

  .value-item {
    min-height: 125px
  }

  .value-item:nth-child(2) {
    border-right: 0
  }

  .value-item:nth-child(-n+2) {
    border-bottom: 1px solid #e5eef6
  }
}

.site-header {
  height: 82px;
  background: #fff;
  border-top: 4px solid #0099FF;
  box-shadow: 0 3px 18px rgba(19, 92, 163, .10);
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-header .nav {
  height: 100%;
  display: grid;
  grid-template-columns: 250px 1fr auto;
  align-items: center;
  gap: 22px;
}

.brand-logo {
  display: flex;
  align-items: center;
  min-width: 0
}

.brand-logo img {
  display: block;
  width: 235px;
  max-width: 100%;
  height: 60px;
  object-fit: contain;
  object-position: left center;
}

.main-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 26px;
  min-width: 0;
}

.main-menu a {
  position: relative;
  color: #173b72;
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  padding: 29px 0 25px;
}

.main-menu a::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 17px;
  height: 3px;
  border-radius: 3px;
  background: #0875db;
  transition: .2s ease;
}

.main-menu a:hover::after {
  left: 0;
  right: 0
}

.site-header .hotline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  padding: 12px 18px;
  font-size: 15px;
}

.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  margin: 0;
  border: 0;
  border-radius: 10px;
  background: #0875db;
  color: #fff;
  font-size: 20px;
}

.tuition-section {
  position: relative;
  isolation: isolate;
  background-image:

    url("../images/tuition-background.png");
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: cover;
}

.tuition-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(255, 255, 255, .30), rgba(229, 247, 255, .16));
}

.tuition-showcase,
.learning-values {
  backdrop-filter: blur(2px);
}

.tuition-showcase {
  background: rgba(255, 255, 255, .88)
}

.learning-values {
  background: rgba(255, 255, 255, .90)
}

@media(max-width:1100px) {
  .site-header .nav {
    grid-template-columns: 210px 1fr auto;
    gap: 14px
  }

  .brand-logo img {
    width: 205px;
    height: 54px
  }

  .main-menu {
    gap: 15px
  }

  .main-menu a {
    font-size: 12px
  }

  .site-header .hotline {
    font-size: 13px;
    padding: 11px 14px
  }
}

@media(max-width:900px) {
  .site-header {
    height: 70px
  }

  .site-header .nav {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 10px;
  }

  .brand-logo img {
    width: 190px;
    height: 50px
  }

  .menu-toggle {
    display: grid;
    place-items: center
  }

  .main-menu {
    display: none;
    position: absolute;
    top: 70px;
    left: 12px;
    right: 12px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px;
    background: #fff;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 16px 35px rgba(14, 70, 125, .18);
  }

  .main-menu.open {
    display: flex
  }

  .main-menu a {
    padding: 13px 15px;
    border-bottom: 1px solid #edf3f8;
    font-size: 14px;
  }

  .main-menu a:last-child {
    border-bottom: 0
  }

  .main-menu a::after {
    display: none
  }

  .site-header .hotline {
    font-size: 12px;
    padding: 10px 12px
  }

  .tuition-section {
    background-image:
      linear-gradient(rgba(241, 250, 255, .88), rgba(241, 250, 255, .88)),
      url("../images/tuition-background-mobile.jpg");
    background-position: center top;
  }
}

@media(max-width:520px) {
  .site-header {
    height: 64px
  }

  .site-header .nav {
    grid-template-columns: 1fr auto
  }

  .brand-logo img {
    width: 175px;
    height: 46px
  }

  .site-header .hotline {
    display: none
  }

  .main-menu {
    top: 64px;
    left: 8px;
    right: 8px
  }

  .menu-toggle {
    width: 40px;
    height: 40px
  }
}

/* Trang chủ V2: Image slider */
.home-slider {
  position: relative;
  overflow: hidden;
  background: #eaf7ff
}

.slider-track {
  position: relative;
  width:100%;
  height:auto;
  aspect-ratio:1520 / 430;
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .55s ease;
  pointer-events: none
}

.slide.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto
}

.slide picture,
.slide picture img {
  display: block;
  width: 100%;
  height: 100%
}

.slide picture img {
  object-fit: cover;
  object-position: center
}

.slide-overlay {
  position: absolute;
  inset: 0;
  
}

.slide-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  color: #fff;
  padding-right: 50%
}

.slide-content > span {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1px;
  color: #bce6ff
}

.slide-content h2 {
  margin: 8px 0 12px;
  font-size: clamp(36px, 4.3vw, 58px);
  line-height: 1.05
}

.slide-content p {
  max-width: 580px;
  margin: 0 0 22px;
  font-size: 16px;
  line-height: 1.6;
  color: #eef8ff
}

.slide-content a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 18px;
  border-radius: 11px;
  background: #ff8612;
  color: #fff;
  text-decoration: none;
  font-weight: 900;
  font-size: 13px
}

.slider-arrow {
  position: absolute;
  z-index: 5;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: #0875db;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .15);
  cursor: pointer
}

.slider-arrow.prev {
  left: 18px
}

.slider-arrow.next {
  right: 18px
}

.slider-dots {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px
}

.slider-dots button {
  width: 10px;
  height: 10px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  cursor: pointer
}

.slider-dots button.active {
  width: 28px;
  border-radius: 8px;
  background: #fff
}

@media(max-width:900px) {
  .slider-track {
    height:auto;

        /* Giữ nguyên tỷ lệ desktop */
        aspect-ratio:1520 / 430;
  }

  .slide-content {
    padding-right: 34%
  }

  .slide-content p {
    font-size: 14px
  }

  .slider-arrow {
    width: 40px;
    height: 40px
  }
}

@media(max-width:600px) {
  .slider-track {
    height:auto;

        /* Giữ nguyên tỷ lệ desktop */
        aspect-ratio:1520 / 430;
  }

  .slide picture img {
    object-position: center
  }

  .slide-overlay {

  }

  .slide-content {
    justify-content: flex-end;
    padding: 0 24px 58px
  }

  .slide-content h2 {
    font-size: 34px
  }

  .slide-content p {
    font-size: 14px
  }

  .slider-arrow {
    display: none
  }

  .slider-dots {
    bottom: 18px
  }
}

/* HOME HIGHLIGHTS */

.home-highlights{
  padding:22px 0 26px;
  background:#fff;
}

.highlight-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}

.highlight-card{
  min-height:125px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  padding:18px 12px;

  text-align:center;

  background:linear-gradient(
    135deg,
    #f5fbff 0%,
    #edf8ff 100%
  );

  border:1px solid #e5f2fb;
  border-radius:16px;

  box-shadow:
    0 5px 18px rgba(23,100,160,.05);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.highlight-icon{
  width:52px;
  height:52px;

  display:flex;
  align-items:center;
  justify-content:center;

  margin-bottom:10px;

  border-radius:13px;

  font-size:27px;
}

.highlight-icon.green{
  color:#14aa62;
  background:#dcf8e9;
}

.highlight-icon.orange{
  color:#ff7c19;
  background:#fff0df;
}

.highlight-icon.purple{
  color:#8555e8;
  background:#eee7ff;
}

.highlight-icon.blue{
  color:#1687e8;
  background:#e1f2ff;
}

.highlight-content strong{
  display:block;

  color:#073d83;

  font-size:14px;
  font-weight:800;
  line-height:1.35;
}

.highlight-content small{
  display:block;

  margin-top:5px;

  color:#315d91;

  font-size:11px;
  font-weight:500;
  line-height:1.4;
}

@media (hover:hover){
  .highlight-card:hover{
    transform:translateY(-4px);

    box-shadow:
      0 10px 25px rgba(23,100,160,.11);
  }
}

/* KHÓA HỌC NỔI BẬT */

.featured-courses{
  padding:55px 0 65px;
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f8fcff 50%,
      #f1f9ff 100%
    );
}

.featured-heading{
  max-width:850px;
  margin:0 auto 32px;
  text-align:center;
}

.featured-label{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:13px;

  margin-bottom:10px;
}

.featured-label span{
  width:38px;
  height:2px;
  background:#2998e8;
  border-radius:2px;
}

.featured-label strong{
  color:#1684dd;
  font-size:12px;
  font-weight:900;
  letter-spacing:.5px;
}

.featured-heading h2{
  margin:0;

  color:#073d83;

  font-size:clamp(26px,3vw,36px);
  font-weight:900;
  line-height:1.2;
}

.featured-heading p{
  margin:10px auto 0;

  color:#617b99;

  font-size:14px;
  line-height:1.6;
}

.featured-course-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}

.featured-course-card{
  min-width:0;

  display:flex;
  flex-direction:column;

  overflow:hidden;

  background:#fff;

  border:1px solid #e2edf6;
  border-radius:17px;

  box-shadow:
    0 8px 24px rgba(15,85,145,.09);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.course-image{
  position:relative;

  width:100%;
  aspect-ratio:16 / 9;

  overflow:hidden;

  background:#eaf6ff;
}

.course-image img{
  display:block;

  width:100%;
  height:100%;

  object-fit:cover;

  transition:transform .35s ease;
}

.course-body{
  flex:1;

  display:flex;
  flex-direction:column;

  padding:18px 17px 17px;
}

.course-body h3{
  min-height:48px;

  margin:0 0 12px;

  color:#073d83;

  font-size:17px;
  font-weight:900;
  line-height:1.35;
}

.course-body ul{
  flex:1;

  list-style:none;

  margin:0 0 18px;
  padding:0;
}

.course-body li{
  display:flex;
  align-items:flex-start;
  gap:7px;

  margin-bottom:9px;

  color:#365878;

  font-size:12px;
  line-height:1.4;
}

.course-body li i{
  flex:0 0 auto;

  margin-top:2px;

  color:#18b663;

  font-size:12px;
}

.course-button{
  width:100%;
  min-height:43px;

  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;

  margin-top:auto;

  border-radius:22px;

  color:#fff;
  text-decoration:none;

  font-size:12px;
  font-weight:900;

  box-shadow:
    0 6px 15px rgba(0,100,190,.13);

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.course-kids .course-button{
  background:
    linear-gradient(90deg,#0875db,#00a2ff);
}

.course-scratch .course-button{
  background:
    linear-gradient(90deg,#ff7917,#ffa51c);
}

.course-office .course-button{
  background:
    linear-gradient(90deg,#0fa95a,#20c675);
}

.course-custom .course-button{
  background:
    linear-gradient(90deg,#7b36dd,#a63bea);
}

.course-custom .course-body li i{
  color:#8a43df;
}

@media (hover:hover) and (pointer:fine){
  .featured-course-card:hover{
    transform:translateY(-6px);

    box-shadow:
      0 16px 34px rgba(15,85,145,.14);
  }

  .featured-course-card:hover .course-image img{
    transform:scale(1.04);
  }

  .course-button:hover{
    transform:translateY(-2px);

    box-shadow:
      0 9px 20px rgba(0,100,190,.20);
  }
}

@media(max-width:900px){
  .featured-courses{
    padding:45px 0 55px;
  }

  .featured-course-grid{
    grid-template-columns:repeat(2,1fr);
    gap:16px;
  }

  .course-body h3{
    min-height:auto;
  }
}

@media(max-width:520px){
  .featured-courses{
    padding:38px 0 45px;
  }

  .featured-heading{
    margin-bottom:24px;
  }

  .featured-label{
    gap:9px;
  }

  .featured-label span{
    width:25px;
  }

  .featured-label strong{
    font-size:10px;
  }

  .featured-heading h2{
    font-size:25px;
  }

  .featured-heading p{
    padding:0 8px;
    font-size:12px;
  }

  .featured-course-grid{
    grid-template-columns:1fr;
    gap:16px;
  }

  .course-image{
    aspect-ratio:16 / 8;
  }

  .course-body{
    padding:17px;
  }

  .course-body h3{
    font-size:18px;
  }

  .course-body li{
    font-size:12px;
  }

  .course-button{
    min-height:45px;
    font-size:13px;
  }
}

/* VÌ SAO CHỌN TIN HỌC PHAN THIẾT */

.why-choose-section{
  position:relative;
  overflow:hidden;

  padding:52px 0 60px;

  background-image:

    url("../images/tuition-background.png");
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: cover;
}

  
  
/* HEADING */

.why-heading{
  text-align:center;
  margin-bottom:28px;
}

.why-label{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:13px;
}

.why-label span{
  width:38px;
  height:2px;

  background:#2998e8;
  border-radius:2px;
}

.why-label strong{
  color:#1684dd;

  font-size:12px;
  font-weight:900;
  letter-spacing:.5px;
}

.why-heading h2{
  margin:8px 0 0;

  color:#073d83;

  font-size:clamp(27px,3vw,37px);
  font-weight:900;
}

/* SHOWCASE */

.why-showcase{
  display:grid;
  grid-template-columns:minmax(0,3fr) minmax(230px,1fr);

  align-items:stretch;

  background:rgba(255,255,255,.75);

  border-radius:22px;

  box-shadow:
    0 10px 30px rgba(15,85,145,.07);

  overflow:hidden;
}

/* BENEFITS */

.why-benefits{
  display:grid;
  grid-template-columns:repeat(5,1fr);

  align-items:center;

  padding:25px 20px;
}

.why-benefit{
  min-width:0;

  display:flex;
  flex-direction:column;
  align-items:center;

  padding:8px;

  text-align:center;
}

.why-icon{
  width:68px;
  height:68px;

  display:grid;
  place-items:center;

  margin-bottom:11px;

  border-radius:50%;

  font-size:30px;
}

.why-icon.blue{
  color:#1687e8;
  background:#e1f3ff;
}

.why-icon.green{
  color:#29ad42;
  background:#e3f8df;
}

.why-icon.dark-blue{
  color:#1474dc;
  background:#e3efff;
}

.why-icon.pink{
  color:#f04468;
  background:#ffe4ea;
}

.why-icon.sky{
  color:#208edc;
  background:#dff4ff;
}

.why-benefit strong{
  display:block;

  color:#073d83;

  font-size:12px;
  font-weight:900;

  line-height:1.35;
}

.why-benefit small{
  display:block;

  margin-top:3px;

  color:#315d91;

  font-size:10.5px;
  line-height:1.4;
}

/* MESSAGE */

.why-message{
  position:relative;

  min-height:180px;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;

  padding:18px 20px;

  background:
    radial-gradient(
      circle at center,
      rgba(255,255,255,.9),
      rgba(230,247,255,.65)
    );
}

.why-message-text{
  position:relative;

  text-align:center;

  transform:rotate(-5deg);
}

.why-message-text > i:first-child{
  color:#42a6ed;
  font-size:17px;
}

.why-message-text p{
  margin:4px 0;

  color:#1684d2;

  font-size:17px;
  line-height:1.45;

  font-style:italic;
}

.why-message-text strong{
  color:#0758a9;
}

.why-message-text .heart{
  position:absolute;

  right:-17px;
  top:23px;

  color:#f04468;

  font-size:21px;
}

.why-books{
  display:flex;
  align-items:flex-end;
  justify-content:center;

  gap:12px;

  margin-top:9px;
}

.why-books .fa-book{
  color:#1684d2;
  font-size:49px;
}

.why-books .fa-seedling{
  color:#25a65a;
  font-size:46px;
}

/* STATISTICS */

.why-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);

  margin-top:20px;

  padding:18px 20px;

  background:rgba(255,255,255,.94);

  border:1px solid #e4f0f8;

  border-radius:18px;

  box-shadow:
    0 8px 25px rgba(15,85,145,.07);
}

.why-stat{
  min-width:0;

  display:flex;
  align-items:center;
  justify-content:center;

  gap:13px;

  padding:7px 15px;

  border-right:1px solid #e5eef6;
}

.why-stat:last-child{
  border-right:0;
}

.stat-icon{
  width:46px;
  height:46px;

  display:grid;
  place-items:center;

  flex:0 0 46px;

  font-size:27px;
}

.stat-icon.blue{
  color:#1687e8;
}

.stat-icon.yellow{
  color:#f7bd13;
}

.stat-icon.orange{
  color:#f5a400;
}

.why-stat strong{
  display:block;

  color:#0758a9;

  font-size:27px;
  font-weight:900;

  line-height:1;
}

.why-stat small{
  display:block;

  margin-top:5px;

  color:#42658b;

  font-size:10px;
  line-height:1.3;
}

@media(max-width:900px){
  .why-showcase{
    grid-template-columns:1fr;
  }

  .why-benefits{
    grid-template-columns:repeat(3,1fr);
    gap:20px 5px;
  }

  .why-message{
    min-height:150px;
  }

  .why-stats{
    grid-template-columns:repeat(2,1fr);
    gap:0;
  }

  .why-stat{
    justify-content:flex-start;
    min-height:80px;
  }

  .why-stat:nth-child(2){
    border-right:0;
  }

  .why-stat:nth-child(-n+2){
    border-bottom:1px solid #e5eef6;
  }
}

@media(max-width:520px){
  .why-choose-section{
    padding:40px 0 45px;
  }

  .why-heading{
    margin-bottom:22px;
  }

  .why-label{
    gap:8px;
  }

  .why-label span{
    width:22px;
  }

  .why-label strong{
    font-size:10px;
  }

  .why-heading h2{
    font-size:25px;
  }

  .why-benefits{
    grid-template-columns:repeat(2,1fr);

    padding:20px 10px;

    gap:20px 5px;
  }

  .why-benefit:last-child{
    grid-column:1 / -1;
  }

  .why-icon{
    width:58px;
    height:58px;

    font-size:25px;
  }

  .why-stats{
    grid-template-columns:1fr 1fr;

    padding:10px;
  }

  .why-stat{
    padding:12px 8px;
    gap:8px;
  }

  .stat-icon{
    width:36px;
    flex-basis:36px;

    font-size:22px;
  }

  .why-stat strong{
    font-size:20px;
  }

  .why-stat small{
    font-size:9px;
  }
}

/* HÌNH ẢNH LỚP HỌC */

.class-gallery-section{
  padding:55px 0 65px;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f6fbff 100%
    );

  overflow:hidden;
}

/* HEADING */

.gallery-heading{
  text-align:center;
  margin-bottom:27px;
}

.gallery-label{
  display:flex;
  justify-content:center;
  align-items:center;

  gap:13px;
}

.gallery-label span{
  width:38px;
  height:2px;

  background:#2998e8;

  border-radius:2px;
}

.gallery-label strong{
  color:#1684dd;

  font-size:12px;
  font-weight:900;

  letter-spacing:.5px;
}

.gallery-heading h2{
  margin:8px 0 0;

  color:#073d83;

  font-size:clamp(27px,3vw,36px);
  font-weight:900;

  line-height:1.25;
}

/* SLIDER */

.class-gallery-slider{
  position:relative;
}

.gallery-viewport{
  overflow:hidden;

  border-radius:17px;
}

.gallery-track{
  display:flex;

  gap:12px;

  transition:transform .45s ease;

  will-change:transform;
}

.gallery-item{
  flex:0 0 calc((100% - 36px) / 4);

  aspect-ratio:1.45 / 1;

  overflow:hidden;

  border-radius:14px;

  background:#eaf4fb;

  box-shadow:
    0 5px 15px rgba(10,75,130,.09);
}

.gallery-item img{
  display:block;

  width:100%;
  height:100%;

  object-fit:cover;

  transition:transform .35s ease;
}

@media (hover:hover) and (pointer:fine){
  .gallery-item:hover img{
    transform:scale(1.05);
  }
}

/* ARROWS */

.gallery-arrow{
  position:absolute;

  top:50%;

  width:42px;
  height:42px;

  display:grid;
  place-items:center;

  margin:0;
  padding:0;

  transform:translateY(-50%);

  border:3px solid #fff;
  border-radius:50%;

  background:#0758b8;

  color:#fff;

  font-size:15px;

  box-shadow:
    0 5px 15px rgba(0,70,140,.20);

  cursor:pointer;

  z-index:5;

  transition:
    background .2s ease,
    transform .2s ease;
}

.gallery-prev{
  left:-19px;
}

.gallery-next{
  right:-19px;
}

.gallery-arrow:hover{
  background:#0875db;

  transform:
    translateY(-50%)
    scale(1.08);
}

/* DOTS */

.gallery-dots{
  display:flex;
  align-items:center;
  justify-content:center;

  gap:7px;

  margin-top:17px;
}

.gallery-dot{
  width:9px;
  height:9px;

  margin:0;
  padding:0;

  border:0;
  border-radius:50%;

  background:#b9d9f3;

  cursor:pointer;

  transition:.2s ease;
}

.gallery-dot.active{
  width:11px;
  height:11px;

  background:#0875db;
}

@media(max-width:900px){
  .class-gallery-section{
    padding:45px 0 55px;
  }

  .gallery-item{
    flex-basis:calc((100% - 12px) / 2);
  }

  .gallery-prev{
    left:8px;
  }

  .gallery-next{
    right:8px;
  }
}

@media(max-width:520px){
  .class-gallery-section{
    padding:40px 0 45px;
  }

  .gallery-heading{
    margin-bottom:22px;
  }

  .gallery-label{
    gap:8px;
  }

  .gallery-label span{
    width:25px;
  }

  .gallery-label strong{
    font-size:10px;
  }

  .gallery-heading h2{
    font-size:25px;
  }

  .gallery-item{
    flex-basis:100%;

    aspect-ratio:16 / 10;
  }

  .gallery-arrow{
    width:38px;
    height:38px;

    border-width:2px;
  }

  .gallery-prev{
    left:7px;
  }

  .gallery-next{
    right:7px;
  }
}

/* TESTIMONIALS */

.testimonial-section{
  padding:55px 0 65px;

  background:
    linear-gradient(
      180deg,
      #f7fcff 0%,
      #edf8ff 100%
    );
}

/* HEADING */

.testimonial-heading{
  text-align:center;

  margin-bottom:28px;
}

.testimonial-label{
  display:flex;
  justify-content:center;
  align-items:center;

  gap:13px;
}

.testimonial-label span{
  width:38px;
  height:2px;

  background:#2998e8;

  border-radius:2px;
}

.testimonial-label strong{
  color:#1684dd;

  font-size:12px;
  font-weight:900;

  letter-spacing:.5px;
}

.testimonial-heading h2{
  margin:8px 0 0;

  color:#073d83;

  font-size:clamp(27px,3vw,36px);
  font-weight:900;

  line-height:1.25;
}

/* TESTIMONIAL GRID */

.testimonial-grid{
  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:24px;
}

/* CARD */

.testimonial-card{
  position:relative;

  min-width:0;
  min-height:225px;

  display:flex;
  flex-direction:column;

  padding:22px 24px 20px;

  background:#fff;

  border:1px solid #e5f0f8;
  border-radius:16px;

  box-shadow:
    0 8px 25px rgba(15,85,145,.08);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

/* USER */

.testimonial-user{
  display:flex;
  align-items:center;

  gap:12px;

  margin-bottom:15px;
}

.testimonial-avatar{
  width:54px;
  height:54px;

  flex:0 0 54px;

  overflow:hidden;

  padding:3px;

  background:#e9f6ff;

  border:1px solid #d8ebf8;
  border-radius:50%;
}

.testimonial-avatar img{
  display:block;

  width:100%;
  height:100%;

  object-fit:cover;

  border-radius:50%;
}

.testimonial-info strong{
  display:block;

  color:#073d83;

  font-size:14px;
  font-weight:900;
}

.testimonial-info span{
  display:block;

  margin-top:3px;

  color:#68819b;

  font-size:11px;
}

/* COMMENT */

.testimonial-card blockquote{
  flex:1;

  margin:0;
  padding:0;

  color:#365878;

  font-size:13px;
  font-weight:500;

  line-height:1.7;
}

/* STARS */

.testimonial-stars{
  display:flex;

  gap:4px;

  margin-top:16px;

  color:#ffb000;

  font-size:16px;
}

@media (hover:hover) and (pointer:fine){
  .testimonial-card:hover{
    transform:translateY(-5px);

    box-shadow:
      0 15px 35px rgba(15,85,145,.13);
  }
}

@media(max-width:900px){
  .testimonial-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .testimonial-card:last-child{
    grid-column:1 / -1;
  }
}

@media(max-width:520px){
  .testimonial-section{
    padding:40px 0 45px;
  }

  .testimonial-heading{
    margin-bottom:22px;
  }

  .testimonial-label{
    gap:8px;
  }

  .testimonial-label span{
    width:22px;
  }

  .testimonial-label strong{
    font-size:9px;
  }

  .testimonial-heading h2{
    font-size:25px;
  }

  .testimonial-grid{
    grid-template-columns:1fr;

    gap:14px;
  }

  .testimonial-card,
  .testimonial-card:last-child{
    grid-column:auto;
  }

  .testimonial-card{
    min-height:auto;

    padding:18px;
  }

  .testimonial-avatar{
    width:48px;
    height:48px;

    flex-basis:48px;
  }

  .testimonial-info strong{
    font-size:13px;
  }

  .testimonial-card blockquote{
    font-size:12px;

    line-height:1.65;
  }
}

/* CONTACT CTA */

.home-contact-cta{
  padding:20px 0 0;

  background:#f5fbff;
}

.contact-cta-box{
  min-height:155px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:40px;

  padding:30px 65px;

  overflow:hidden;

  background:
    linear-gradient(
      110deg,
      #0875db 0%,
      #22a6ee 55%,
      #0796ef 100%
    );

  border-radius:20px 20px 0 0;

  box-shadow:
    0 10px 30px rgba(0,105,190,.13);
}

/* TEXT */

.contact-cta-content{
  flex:1;
}

.contact-cta-content h2{
  margin:0;

  color:#fff;

  font-size:21px;
  font-weight:900;

  line-height:1.35;
}

.contact-cta-content p{
  margin:9px 0 0;

  color:rgba(255,255,255,.87);

  font-size:12px;
  line-height:1.5;
}

/* ACTIONS */

.contact-cta-actions{
  display:flex;
  align-items:center;

  gap:16px;

  flex-shrink:0;
}

.cta-contact-btn{
  min-width:190px;
  height:50px;

  display:flex;
  align-items:center;
  justify-content:center;

  gap:10px;

  padding:0 22px;

  border-radius:28px;

  text-decoration:none;

  font-size:13px;
  font-weight:900;

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

/* PHONE */

.cta-phone{
  color:#fff;

  background:
    linear-gradient(
      90deg,
      #ff8613,
      #ffa32a
    );

  box-shadow:
    0 7px 18px rgba(210,100,0,.20);
}

.cta-phone i{
  font-size:17px;
}

/* ZALO */

.cta-zalo{
  color:#1687e8;

  background:#fff;

  border:1px solid rgba(255,255,255,.7);

  box-shadow:
    0 7px 18px rgba(0,80,150,.12);
}

.zalo-icon{
  width:24px;
  height:24px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:#168fe5;

  color:#fff;

  font-size:11px;
  font-weight:900;
}

/* HOVER */

@media (hover:hover) and (pointer:fine){
  .cta-contact-btn:hover{
    transform:translateY(-3px);
  }

  .cta-phone:hover{
    box-shadow:
      0 10px 24px rgba(210,100,0,.30);
  }

  .cta-zalo:hover{
    box-shadow:
      0 10px 24px rgba(0,80,150,.20);
  }
}

@media(max-width:900px){
  .contact-cta-box{
    padding:28px 35px;

    gap:25px;
  }

  .contact-cta-content h2{
    font-size:19px;
  }

  .contact-cta-actions{
    gap:10px;
  }

  .cta-contact-btn{
    min-width:165px;

    padding:0 16px;

    font-size:12px;
  }
}

@media(max-width:650px){
  .home-contact-cta{
    padding-top:10px;
  }

  .contact-cta-box{
    min-height:auto;

    flex-direction:column;

    align-items:stretch;

    gap:22px;

    padding:28px 20px;

    border-radius:18px 18px 0 0;

    text-align:center;
  }

  .contact-cta-content h2{
    font-size:20px;
  }

  .contact-cta-content p{
    max-width:320px;

    margin:
      10px auto 0;

    font-size:11px;
  }

  .contact-cta-actions{
    width:100%;

    flex-direction:column;

    gap:10px;
  }

  .cta-contact-btn{
    width:100%;
    min-width:0;

    height:48px;
  }
}

/* FOOTER */

.site-footer{
  background:#fff;
  color:#365878;
}

/* FOOTER CONTENT */

.footer-content{
  display:grid;

  grid-template-columns:
    1.35fr
    .75fr
    1.05fr
    1fr;

  gap:45px;

  align-items:start;

  padding:40px 0 38px;
}

/* BRAND */

.footer-logo{
  display:inline-block;
}

.footer-logo img{
  display:block;

  width:235px;
  max-width:100%;

  height:auto;
}

.footer-brand p{
  max-width:310px;

  margin:15px 0 18px;

  color:#52708e;

  font-size:12px;
  line-height:1.7;
}

/* SOCIAL */

.footer-social{
  display:flex;
  align-items:center;

  gap:9px;
}

.footer-social a{
  width:36px;
  height:36px;

  display:grid;
  place-items:center;

  border-radius:50%;

  text-decoration:none;

  font-size:17px;

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.social-facebook{
  color:#fff;

  background:#1877f2;
}

.social-youtube{
  color:#fff;

  background:#ff1d1d;
}

.social-zalo{
  color:#1687e8;

  background:#fff;

  border:2px solid #1687e8;
}

.social-zalo span{
  font-size:9px;
  font-weight:900;
}

@media (hover:hover){
  .footer-social a:hover{
    transform:translateY(-3px);

    box-shadow:
      0 6px 15px rgba(0,70,130,.16);
  }
}

.footer-content h3{
  position:relative;

  margin:5px 0 17px;

  color:#073d83;

  font-size:14px;
  font-weight:900;
}

.footer-content h3::after{
  content:"";

  position:absolute;

  left:0;
  bottom:-7px;

  width:28px;
  height:2px;

  border-radius:2px;

  background:#1687e8;
}

/* QUICK LINKS */

.footer-links nav{
  display:flex;
  flex-direction:column;

  align-items:flex-start;

  gap:10px;
}

.footer-links a{
  position:relative;

  color:#315d91;

  font-size:12px;
  font-weight:600;

  text-decoration:none;

  transition:
    color .2s ease,
    padding-left .2s ease;
}

.footer-links a::before{
  content:"";

  position:absolute;

  left:0;
  top:50%;

  width:0;
  height:2px;

  transform:translateY(-50%);

  background:#1687e8;

  transition:.2s ease;
}

.footer-links a:hover{
  padding-left:12px;

  color:#0875db;
}

.footer-links a:hover::before{
  width:7px;
}

/* CONTACT */

.footer-contact{
  min-width:0;
}

.footer-contact-item{
  display:flex;
  align-items:flex-start;

  gap:9px;

  margin-bottom:11px;

  color:#42658b;

  text-decoration:none;

  font-size:11.5px;
  line-height:1.5;
}

.footer-contact-item i{
  width:17px;

  flex:0 0 17px;

  margin-top:2px;

  color:#0875db;

  font-size:14px;

  text-align:center;
}

a.footer-contact-item:hover span{
  color:#0875db;
}

/* MAP */

.footer-map{
    width:100%;
    height:160px;

    overflow:hidden;

    border:1px solid #dcebf6;
    border-radius:13px;

    background:#edf6fc;

    box-shadow:
        0 5px 18px rgba(20,80,130,.07);
}

.footer-map iframe{
    display:block;

    width:100%;
    height:100%;

    border:0;
}

@media(max-width:520px){
    .footer-map{
        height:220px;
    }
}

/* FOOTER BOTTOM */

.footer-bottom{
  background:#064aa3;

  color:#dceeff;
}

.footer-bottom-inner{
  min-height:48px;

  display:flex;
  justify-content:space-between;
  align-items:center;

  gap:20px;

  font-size:10px;
}

.footer-bottom-inner .fa-heart{
  margin-left:3px;

  color:#ff4c67;
}

@media(max-width:900px){
  .footer-content{
    grid-template-columns:1fr 1fr;

    gap:35px 40px;
  }

  .footer-brand p{
    max-width:380px;
  }

  .footer-map img{
    height:170px;
  }
}

@media(max-width:520px){
  .footer-content{
    grid-template-columns:1fr;

    gap:28px;

    padding:32px 5px;
  }

  .footer-brand{
    text-align:center;
  }

  .footer-logo img{
    width:220px;

    margin:auto;
  }

  .footer-brand p{
    max-width:330px;

    margin:
      14px auto
      17px;
  }

  .footer-social{
    justify-content:center;
  }

  .footer-contact{
    order:2;
  }

  .footer-links{
    order:3;
  }

  .footer-map{
    order:4;
  }

  .footer-map img{
    height:180px;
  }

  .footer-bottom-inner{
    min-height:auto;

    flex-direction:column;

    justify-content:center;

    gap:5px;

    padding:13px 0;

    text-align:center;
  }
}



/* =========================================
   NỘI DUNG KHÓA HỌC TIN HỌC VĂN PHÒNG
   ========================================= */

.office-course{
    margin-top:22px;
}


/* ---------- Tiêu đề ---------- */

.course-heading{
    display:flex;
    align-items:center;
    gap:10px;

    margin-bottom:15px;
}

.course-heading > i{
    color:#087bd8;
    font-size:22px;
}

.course-heading h2{
    margin:0;

    color:#0753a6;

    font-size:18px;
    font-weight:800;
}

.course-heading p{
    margin:3px 0 0;

    color:#70879b;

    font-size:10px;
}


/* ---------- Grid ---------- */

.office-course-grid{
    display:grid;

    grid-template-columns:
        repeat(4, minmax(0,1fr));

    gap:12px;
}


/* ---------- Card ---------- */

.office-course-card{
    min-width:0;

    padding:15px 13px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f5fbff
        );

    border:1px solid #dceefa;

    border-radius:13px;

    box-shadow:
        0 5px 16px
        rgba(23,104,165,.08);
}


/* ---------- Header card ---------- */

.course-card-title{
    display:flex;

    align-items:center;

    gap:9px;

    margin-bottom:12px;
}

.course-card-title strong{
    color:#0753a6;

    font-size:13px;

    line-height:1.25;
}


/* ---------- Icon ---------- */

.app-icon{
    flex:0 0 38px;

    width:38px;
    height:38px;

    display:grid;

    place-items:center;

    border-radius:9px;

    font-size:23px;

    color:#fff;
}


/* Windows */

.windows .app-icon{
    background:#1689e8;
}

.windows .course-card-title strong{
    color:#0877cc;
}


/* Word */

.word .app-icon{
    background:#1769d2;
}

.word .course-card-title strong{
    color:#1769d2;
}


/* Excel */

.excel .app-icon{
    background:#129653;
}

.excel .course-card-title strong{
    color:#13854d;
}


/* PowerPoint */

.powerpoint .app-icon{
    background:#e65a35;
}

.powerpoint .course-card-title strong{
    color:#dc542f;
}


/* ---------- Danh sách ---------- */

.office-course-card ul{
    margin:0;
    padding:0;

    list-style:none;
}

.office-course-card li{
    position:relative;

    margin:7px 0;

    padding-left:17px;

    color:#425f79;

    font-size:10px;

    line-height:1.4;
}

.office-course-card li::before{
    content:"✓";

    position:absolute;

    left:0;
    top:0;

    width:12px;
    height:12px;

    display:grid;

    place-items:center;

    border-radius:50%;

    background:#168be3;

    color:#fff;

    font-size:8px;
    font-weight:900;
}


/* =========================================
   TABLET
   ========================================= */

@media(max-width:900px){

    .office-course-grid{
        grid-template-columns:
            repeat(2,1fr);
    }

}


/* =========================================
   MOBILE
   ========================================= */

@media(max-width:600px){

    .office-course-grid{
        grid-template-columns:1fr;

        gap:10px;
    }

    .office-course-card{
        padding:14px;
    }

    .course-card-title strong{
        font-size:14px;
    }

    .office-course-card li{
        font-size:11px;
    }

}