/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/* =========================================================
 * QUY ƯỚC CSS TOÀN BỘ THEME
 * ---------------------------------------------------------
 * - CSS thuần. Không dùng biến CSS, không clamp, không var.
 * - Kích thước luôn dùng px. Đổi cỡ theo màn hình bằng media query.
 * - Font khai báo DUY NHẤT ở khối FONT ngay dưới đây.
 *   Không viết font-family ở bất kỳ chỗ nào khác.
 * - Thụt lề 2 dấu cách, mỗi thuộc tính một dòng.
 * - Không để dòng trống bên trong một khối rule.
 * - Một dòng trống giữa hai rule.
 *
 * File này chỉ chứa phần dùng chung cho mọi trang:
 * font, reset, nền section, hệ tiêu đề .musk-title,
 * hệ nút .musk-btn.
 *
 * CSS riêng của từng element nằm trong ux-builder/elements/.
 * CSS header nằm ở assets/css/header.css.
 * ========================================================= */

/* =========================================================
 * FONT - BE VIETNAM PRO
 * ---------------------------------------------------------
 * File nằm ở assets/fonts/, subset latin + vietnamese,
 * định dạng woff2.
 *
 * Chỉ có 3 độ đậm: 400 / 500 / 700.
 * Dự án còn dùng cả 600 - không có file cho nó nên trình duyệt
 * tự lấy 700 thay thế (luật font matching: thiếu độ đậm nào
 * thì lấy độ đậm lớn hơn gần nhất). Chữ 600 sẽ đậm bằng 700.
 *
 * font-display: swap - chữ hiện ngay bằng font hệ thống rồi
 * đổi sang Be Vietnam Pro, thay vì để trống chờ tải xong.
 * ========================================================= */

@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/be-vietnam-pro-v12-latin_vietnamese-regular.woff2")
    format("woff2");
}

@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/be-vietnam-pro-v12-latin_vietnamese-500.woff2")
    format("woff2");
}

@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/be-vietnam-pro-v12-latin_vietnamese-700.woff2")
    format("woff2");
}

/* ---------------------------------------------------------
 * ÁP FONT CHO TOÀN TRANG
 *
 * Flatsome in typography vào thẻ <style> trong <head> nên phải
 * liệt kê cả các thẻ form: chúng không thừa hưởng font từ body.
 * --------------------------------------------------------- */

body,
button,
input,
select,
optgroup,
textarea,
h1,
h2,
h3,
h4,
h5,
h6,
.heading-font,
.nav > li > a,
.button,
.musk-title__heading {
  font-family:
    "Be Vietnam Pro",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif;
}

/* =========================================================
 * RESET & GHI ĐÈ FLATSOME
 * ========================================================= */

.pb-0 {
  padding-bottom: 0 !important;
}

/* Kéo banner chui xuống dưới header trong suốt.
   Phải bằng đúng tổng chiều cao header desktop:
   --musk-h (66px) + 2 x 12px đệm của wrapper = 90px. */

.section-banner {
  margin-top: -90px;
}

@media (max-width: 767px) {
  .section-banner {
    margin-top: -75px;
  }
}

/* CSS header nằm ở assets/css/header.css. */

/* =========================================================
 * NỀN SECTION DÙNG CHUNG
 * ---------------------------------------------------------
 * Mọi element đều nằm trong Section > Row > Column của Flatsome.
 * Element không tự tạo container và không tự giới hạn chiều rộng.
 *
 * Markup do musk_section_layers() sinh ra:
 *
 *   <div class="musk-ten-element musk-section musk-section--full">
 *     <div class="musk-section__bg" style="background-color: #ffffff"></div>
 *     <div class="musk-top__shape navy"></div>
 *     ... nội dung ...
 *   </div>
 *
 * Hai kiểu nền:
 *   musk-section--full  dải màu tràn hết chiều ngang màn hình
 *   musk-section--row   dải màu bó trong Row/Column của Flatsome
 *
 * Màu nền đặt bằng inline style trên .musk-section__bg, lấy từ
 * ô chọn màu trong UX Builder. Mặc định #ffffff.
 * ========================================================= */

.musk-section {
  position: relative;
  z-index: 0;
  width: 100%;
}

.musk-section__bg {
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  pointer-events: none;
}

.musk-section--full .musk-section__bg {
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
}

.musk-section--row .musk-section__bg {
  left: 0;
  width: 100%;
}

/* =========================================================
 * SHAPE VÁT GÓC TRÊN ĐẦU SECTION
 *
 * Markup: <div class="musk-top__shape navy" aria-hidden="true"></div>
 * Màu: white / navy / blue
 * ========================================================= */

.musk-top__shape {
  position: absolute;
  top: -2px;
  left: 50%;
  z-index: 1;
  width: 92vw;
  height: 40px;
  margin-left: -46vw;
  clip-path: polygon(0 0, 100% 0, calc(100% - 34px) 100%, 34px 100%);
  pointer-events: none;
}

.musk-top__shape.white {
  background: #ffffff;
}

.musk-top__shape.navy {
  background: #020842;
}

.musk-top__shape.blue {
  background: #e3f0ff;
}

@media (max-width: 767px) {
  .musk-top__shape {
    display: none !important;
  }
}

/* =========================================================
 * MUSK TITLE
 * ---------------------------------------------------------
 * Hệ tiêu đề dùng chung.
 *
 * Markup:
 *   <div class="musk-title musk-title--center">
 *     <div class="musk-title__count">25+</div>
 *     <h2 class="musk-title__heading">TIÊU ĐỀ</h2>
 *     <img class="musk-title__line" src="..." alt="">
 *   </div>
 *
 * Căn lề: musk-title--center / musk-title--left
 * Nền tối: element tự đặt lại màu chữ trong file CSS của mình.
 * ========================================================= */

.musk-title {
  display: block;
  min-width: 0;
  max-width: 100%;
}

.musk-title__count {
  margin: 0 0 7px;
  color: #063fd4;
  font-size: 31px;
  font-weight: 700;
  line-height: 1;
}

.musk-title__count::after {
  content: "+";
}

.musk-title__heading {
  margin: 0;
  color: #080b12;
  font-size: 35px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: capitalize;
}

.musk-title__line {
  display: block;
  width: 150px;
  height: 25px;
  margin: 0 -30px 0 auto;
  object-fit: contain;
  object-position: right center;
  pointer-events: none;
  user-select: none;
}

/* ---------------------------------------------------------
 * CANH GIỮA
 * --------------------------------------------------------- */

.musk-title--center {
  width: fit-content;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.musk-title--center .musk-title__line {
  object-position: center;
}

/* ---------------------------------------------------------
 * CANH TRÁI
 * --------------------------------------------------------- */

.musk-title--left {
  width: fit-content;
  margin-right: auto;
  margin-left: 0;
  text-align: left;
}

/* ---------------------------------------------------------
 * CUSTOM RIÊNG 
 * --------------------------------------------------------- */

.musk-commitments .musk-title__heading {
  color: white;
}

.loiich-tuvan .musk-commitments .musk-title__heading {
  color: #080b12;
}

.loiich-tuvan .musk-commitments .musk-commitments__description p {
  color: #29394f;
}

.dahscd .musk-title__heading {
  color: #080b12;
}

.dahscd .musk-featured-projects__description p {
  color: #29394f;
}

.dahscd  .musk-featured-projects__arrow {
  border: 1px solid rgb(0 0 0 / 32%) !important;
  color: #000000 !important;
}

.dahscd  .musk-featured-projects__dot.is-active {
  background: #080b12 !important;
}

.dahscd  .musk-featured-projects__dot {
  background: rgb(136 136 136 / 24%) !important;
}

.musk-service-slider__header .musk-title__heading,
.musk-service-slider__header .musk-service-slider__description {
  color: white;
}
/* ---------------------------------------------------------
 * TABLET
 * --------------------------------------------------------- */

@media (max-width: 1024px) {
  .musk-title__heading {
    font-size: 36px;
  }

  .musk-title__line {
    width: 135px;
    height: 23px;
  }
}

/* ---------------------------------------------------------
 * MOBILE
 * --------------------------------------------------------- */

@media (max-width: 767px) {
  .musk-title__heading {
    font-size: 27px;
    line-height: 1.25;
    letter-spacing: -1px;
  }

  .musk-title__line {
    display: none !important;
  }
}

/* =========================================================
 * MUSK BUTTON
 * ---------------------------------------------------------
 * Nút CTA dùng chung.
 *
 * Markup:
 *   <a class="musk-btn musk-btn--light musk-btn--md" href="#">
 *     <span class="musk-btn__icon" aria-hidden="true"><svg></svg></span>
 *     <span class="musk-btn__label">NHẬN TƯ VẤN</span>
 *   </a>
 *
 * Biến thể màu:
 *   musk-btn--light  nền trắng, tròn xanh (đặt trên nền tối)
 *   musk-btn--blue   nền xanh, tròn trắng (đặt trên nền sáng)
 *
 * Cỡ: musk-btn--xs / --sm / --md / --lg
 * Không ghi class cỡ thì nút chạy theo cỡ md.
 *
 * Hover: khối tròn loang phủ kín nút, mũi tên xoay 45 độ,
 * chữ đổi sang màu ngược lại.
 * ========================================================= */

.musk-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 5px 20px 5px 5px;
  overflow: hidden;
  border: 1px solid #ffffff;
  border-radius: 999px;
  background: #ffffff;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.45s ease,
    box-shadow 0.45s ease;
}

.musk-btn::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 1;
  width: 38px;
  height: calc(100% - 10px);
  border-radius: 999px;
  background: linear-gradient(90deg, #063b94, #0d55c8);
  transition: width 0.45s ease;
}

.musk-btn__icon {
  position: relative;
  z-index: 2;
  display: inline-flex;
  flex: 0 0 38px;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-right: 12px;
}

.musk-btn__icon svg {
  display: block;
  width: 17px;
  height: 17px;
  transition: transform 0.45s ease;
}

.musk-btn__label {
  position: relative;
  z-index: 2;
  min-width: 0;
  color: #0b1020;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: color 0.45s ease;
}

/* ---------------------------------------------------------
 * HOVER / FOCUS
 * --------------------------------------------------------- */

.musk-btn:hover,
.musk-btn:focus-visible {
  color: #ffffff;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
}

.musk-btn:hover::before,
.musk-btn:focus-visible::before {
  width: calc(100% - 10px);
}

.musk-btn:hover .musk-btn__icon svg,
.musk-btn:focus-visible .musk-btn__icon svg {
  transform: rotate(45deg);
}

.musk-btn:hover .musk-btn__label,
.musk-btn:focus-visible .musk-btn__label {
  color: #ffffff;
}

.musk-btn:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.45);
  outline-offset: 3px;
}

/* ---------------------------------------------------------
 * BIẾN THỂ MÀU: NỀN TRẮNG, TRÒN XANH
 * --------------------------------------------------------- */

.musk-btn--light {
  border-color: #ffffff;
  background: #ffffff;
  color: #ffffff;
}

.musk-btn--light::before {
  background: linear-gradient(90deg, #063b94, #0d55c8);
}

.musk-btn--light .musk-btn__label {
  text-transform: capitalize;
  color: #0b1020;
}

.musk-btn--light:hover,
.musk-btn--light:focus-visible {
  color: #ffffff;
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
}

.musk-btn--light:hover .musk-btn__label,
.musk-btn--light:focus-visible .musk-btn__label {
  color: #ffffff;
}

.musk-btn--light:focus-visible {
  outline-color: rgba(255, 255, 255, 0.45);
}

/* ---------------------------------------------------------
 * BIẾN THỂ MÀU: NỀN XANH, TRÒN TRẮNG
 * --------------------------------------------------------- */

.musk-btn--blue {
  border-color: transparent;
  background: linear-gradient(90deg, #063b94, #0d55c8);
  color: #063b94;
}

.musk-btn--blue::before {
  background: #ffffff;
}

.musk-btn--blue .musk-btn__label {
  text-transform: capitalize;
  color: #ffffff;
}

.musk-btn--blue:hover,
.musk-btn--blue:focus-visible {
  color: #063b94;
  box-shadow: 0 12px 25px rgba(6, 59, 148, 0.25);
}

.musk-btn--blue:hover .musk-btn__label,
.musk-btn--blue:focus-visible .musk-btn__label {
  color: #063b94;
}

.musk-btn--blue:focus-visible {
  outline-color: rgba(13, 85, 200, 0.35);
}

/* ---------------------------------------------------------
 * CỠ XS
 * --------------------------------------------------------- */

.musk-btn--xs {
  padding: 4px 15px 4px 4px;
  font-size: 14px;
  letter-spacing: 0.035em;
}

.musk-btn--xs::before {
  top: 4px;
  left: 4px;
  width: 30px;
  height: calc(100% - 8px);
}

.musk-btn--xs:hover::before,
.musk-btn--xs:focus-visible::before {
  width: calc(100% - 8px);
}

.musk-btn--xs .musk-btn__icon {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  margin-right: 8px;
}

.musk-btn--xs .musk-btn__icon svg {
  width: 20px;
  height: 20px;
}

.musk-btn--xs .musk-btn__label {
  font-size: 14px;
  letter-spacing: 0.035em;
}

/* ---------------------------------------------------------
 * CỠ SM
 * --------------------------------------------------------- */

.musk-btn--sm {
  padding: 4px 18px 4px 4px;
  font-size: 11px;
  letter-spacing: 0.025em;
}

.musk-btn--sm::before {
  top: 4px;
  left: 4px;
  width: 32px;
  height: calc(100% - 8px);
}

.musk-btn--sm:hover::before,
.musk-btn--sm:focus-visible::before {
  width: calc(100% - 8px);
}

.musk-btn--sm .musk-btn__icon {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  margin-right: 10px;
}

.musk-btn--sm .musk-btn__icon svg {
  width: 15px;
  height: 15px;
}

.musk-btn--sm .musk-btn__label {
  font-size: 14px;
  letter-spacing: 0.025em;
}

/* ---------------------------------------------------------
 * CỠ MD
 * --------------------------------------------------------- */

.musk-btn--md {
  padding: 5px 20px 5px 5px;
  font-size: 12px;
  letter-spacing: 0.02em;
}

.musk-btn--md::before {
  top: 5px;
  left: 5px;
  width: 38px;
  height: calc(100% - 10px);
}

.musk-btn--md:hover::before,
.musk-btn--md:focus-visible::before {
  width: calc(100% - 10px);
}

.musk-btn--md .musk-btn__icon {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  margin-right: 12px;
}

.musk-btn--md .musk-btn__icon svg {
  width: 17px;
  height: 17px;
}

.musk-btn--md .musk-btn__label {
  font-size: 14px;
  letter-spacing: 0.02em;
}

/* ---------------------------------------------------------
 * CỠ LG
 * --------------------------------------------------------- */

.musk-btn--lg {
  padding: 6px 24px 6px 6px;
  font-size: 16px;
  letter-spacing: 0;
}

.musk-btn--lg::before {
  top: 6px;
  left: 6px;
  width: 46px;
  height: calc(100% - 12px);
}

.musk-btn--lg:hover::before,
.musk-btn--lg:focus-visible::before {
  width: calc(100% - 12px);
}

.musk-btn--lg .musk-btn__icon {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  margin-right: 14px;
}

.musk-btn--lg .musk-btn__icon svg {
  width: 20px;
  height: 20px;
}

.musk-btn--lg .musk-btn__label {
  font-size: 16px;
  letter-spacing: 0;
}

/* ---------------------------------------------------------
 * MOBILE
 * --------------------------------------------------------- */

@media (max-width: 767px) {
  .musk-btn--sm {
    padding: 4px 16px 4px 4px;
    font-size: 10px;
  }

  .musk-btn--sm::before {
    width: 30px;
  }

  .musk-btn--sm .musk-btn__icon {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    margin-right: 9px;
  }

  .musk-btn--sm .musk-btn__icon svg {
    width: 14px;
    height: 14px;
  }

  .musk-btn--md {
    padding: 5px 17px 5px 5px;
    font-size: 11px;
  }

  .musk-btn--md::before {
    width: 34px;
  }

  .musk-btn--md .musk-btn__icon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    margin-right: 10px;
  }

  .musk-btn--md .musk-btn__icon svg {
    width: 15px;
    height: 15px;
  }

  .musk-btn--lg {
    padding: 6px 18px 6px 6px;
    font-size: 14px;
  }

  .musk-btn--lg::before {
    width: 42px;
  }

  .musk-btn--lg .musk-btn__icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    margin-right: 10px;
  }

  .musk-btn--lg .musk-btn__icon svg {
    width: 18px;
    height: 18px;
  }
}

/* ---------------------------------------------------------
 * MOBILE NHỎ
 * --------------------------------------------------------- */

@media (max-width: 420px) {
  .musk-btn--lg .musk-btn__label {
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ---------------------------------------------------------
 * GIẢM CHUYỂN ĐỘNG
 * --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .musk-btn,
  .musk-btn::before,
  .musk-btn__icon svg,
  .musk-btn__label {
    transition: none !important;
  }

  .musk-btn:hover,
  .musk-btn:focus-visible {
    transform: none;
  }
}

/* Scrollbar styles */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 10px white;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgb(2, 8, 66);
}

::-webkit-scrollbar-thumb:hover {
  background: #0640d44c;
}
