/* ==========================================================================
   layout.css — nền tảng: biến, reset, container, lưới 12 cột, section, helper.
   Lưới theo kiểu mobile-first: .small-* áp dụng mọi khổ, .medium-* từ 550px,
   .large-* từ 850px. Nội dung trang được import đang dùng đúng bộ class này.
   ========================================================================== */

:root {
  --bk-primary: #38308c;
  --bk-secondary: #d26e4b;
  --bk-alert: #b20000;    /* màu nút "GỌI NGAY" — dùng qua lớp .alert */
  --bk-link: #334862;
  --bk-link-hover: #111;
  --bk-body: #777;
  --bk-heading: #2b2b2b;
  --bk-border: #ececec;
  --bk-container: 1270px;
  --bk-gutter: 15px;
  --bk-font: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --bk-font-script: "Dancing Script", cursive;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--bk-font);
  font-size: 15px;
  line-height: 1.6;
  color: var(--bk-body);
  background: #fff;
  overflow-x: hidden;
}

img,
video { max-width: 100%; height: auto; }

img { border: 0; vertical-align: middle; }

a {
  color: var(--bk-link);
  text-decoration: none;
  transition: color .2s ease;
}
a:hover { color: var(--bk-link-hover); }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .5em;
  color: var(--bk-heading);
  font-weight: 700;
  line-height: 1.3;
}
h1 { font-size: 1.7em; }
h2 { font-size: 1.6em; }
h3 { font-size: 1.25em; }
h4 { font-size: 1.125em; }
h5 { font-size: 1em; }
h6 { font-size: .85em; }

p { margin: 0 0 1.3em; }

ul, ol { margin: 0 0 1.3em; padding-left: 1.3em; }
li { margin-bottom: .4em; }

strong, b { font-weight: 700; }

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.3em;
}
th, td {
  padding: .6em .8em;
  border: 1px solid var(--bk-border);
  text-align: left;
}
th { background: #f7f7f7; color: var(--bk-heading); font-weight: 700; }

iframe { max-width: 100%; border: 0; }

/* --------------------------------------------------------------- container */

.container,
.container-width,
.row {
  width: 100%;
  max-width: var(--bk-container);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--bk-gutter);
  padding-right: var(--bk-gutter);
}

.container { position: relative; }

/* .row bù lại padding của .col nên không tự thêm padding ngang */
.row {
  display: flex;
  flex-flow: row wrap;
  padding-left: 0;
  padding-right: 0;
  margin-left: auto;
  margin-right: auto;
}

.row.row-full-width,
.row-full-width { max-width: 100% !important; }

.row.row-collapse > .col { padding: 0; }
.row.row-small > .col { padding: 0 10px 20px; }

/* ------------------------------------------------------------------- cột */

.col {
  position: relative;
  width: 100%;
  flex: 0 0 100%;
  max-width: 100%;
  padding: 0 var(--bk-gutter) 30px;
}

/* Dùng min-height chứ KHÔNG dùng height.

   Các cột trong một hàng được kéo cao bằng nhau (flex stretch). Nếu đặt
   height: 100% thì ô con bị ghì đúng bằng chiều cao đó — nội dung dài hơn sẽ
   tràn ra ngoài, chữ nằm lọt xuống dưới viền và bóng đổ của ô. Lỗi này rõ nhất
   trên điện thoại, nơi cột hẹp nên chữ chiếm nhiều dòng hơn.

   min-height: 100% vẫn cho các ô cao bằng nhau, nhưng ô nào nội dung dài hơn
   thì tự cao thêm thay vì cắt cụt. */
.col-inner {
  position: relative;
  width: 100%;
  min-height: 100%;
}

/* Mobile-first: small-* áp dụng ngay từ 0px */
.small-1  { flex-basis: 8.3333%;  max-width: 8.3333%; }
.small-2  { flex-basis: 16.6667%; max-width: 16.6667%; }
.small-3  { flex-basis: 25%;      max-width: 25%; }
.small-4  { flex-basis: 33.3333%; max-width: 33.3333%; }
.small-5  { flex-basis: 41.6667%; max-width: 41.6667%; }
.small-6  { flex-basis: 50%;      max-width: 50%; }
.small-7  { flex-basis: 58.3333%; max-width: 58.3333%; }
.small-8  { flex-basis: 66.6667%; max-width: 66.6667%; }
.small-9  { flex-basis: 75%;      max-width: 75%; }
.small-10 { flex-basis: 83.3333%; max-width: 83.3333%; }
.small-11 { flex-basis: 91.6667%; max-width: 91.6667%; }
.small-12 { flex-basis: 100%;     max-width: 100%; }

@media (min-width: 550px) {
  .medium-1  { flex-basis: 8.3333%;  max-width: 8.3333%; }
  .medium-2  { flex-basis: 16.6667%; max-width: 16.6667%; }
  .medium-3  { flex-basis: 25%;      max-width: 25%; }
  .medium-4  { flex-basis: 33.3333%; max-width: 33.3333%; }
  .medium-5  { flex-basis: 41.6667%; max-width: 41.6667%; }
  .medium-6  { flex-basis: 50%;      max-width: 50%; }
  .medium-7  { flex-basis: 58.3333%; max-width: 58.3333%; }
  .medium-8  { flex-basis: 66.6667%; max-width: 66.6667%; }
  .medium-9  { flex-basis: 75%;      max-width: 75%; }
  .medium-10 { flex-basis: 83.3333%; max-width: 83.3333%; }
  .medium-11 { flex-basis: 91.6667%; max-width: 91.6667%; }
  .medium-12 { flex-basis: 100%;     max-width: 100%; }
}

@media (min-width: 850px) {
  .large-1  { flex-basis: 8.3333%;  max-width: 8.3333%; }
  .large-2  { flex-basis: 16.6667%; max-width: 16.6667%; }
  .large-3  { flex-basis: 25%;      max-width: 25%; }
  .large-4  { flex-basis: 33.3333%; max-width: 33.3333%; }
  .large-5  { flex-basis: 41.6667%; max-width: 41.6667%; }
  .large-6  { flex-basis: 50%;      max-width: 50%; }
  .large-7  { flex-basis: 58.3333%; max-width: 58.3333%; }
  .large-8  { flex-basis: 66.6667%; max-width: 66.6667%; }
  .large-9  { flex-basis: 75%;      max-width: 75%; }
  .large-10 { flex-basis: 83.3333%; max-width: 83.3333%; }
  .large-11 { flex-basis: 91.6667%; max-width: 91.6667%; }
  .large-12 { flex-basis: 100%;     max-width: 100%; }
}

/* Căn hàng ngang/dọc do UX Builder sinh ra */
.align-center  { justify-content: center; }
.align-left    { justify-content: flex-start; }
.align-right   { justify-content: flex-end; }
.align-middle  { align-items: center; }
.align-top     { align-items: flex-start; }
.align-bottom  { align-items: flex-end; }
.align-equal   { align-items: stretch; }

.flex-row  { display: flex; flex-flow: row wrap; align-items: center; }
.flex-col  { max-height: 100%; }
.flex-grow { flex: 1 1 0; }
.flex-left  { margin-right: auto; }
.flex-right { margin-left: auto; }
.flex-center { margin-left: auto; margin-right: auto; }

/* ---------------------------------------------------------------- section */

.section {
  position: relative;
  padding: 30px 0;
  width: 100%;
}

.section-content {
  position: relative;
  z-index: 1;
  width: 100%;
}

.section-bg,
.bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.fill {
  position: absolute;
  inset: 0;
  padding: 0 !important;
}

.bg-fill {
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

.bg-loaded { opacity: 1; }

.section-bg-overlay {
  position: absolute;
  inset: 0;
}

/* --------------------------------------------------------------- helpers */

.relative { position: relative; }
.absolute { position: absolute; }

.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

.uppercase {
  text-transform: uppercase;
  letter-spacing: .05em;
}
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }

.italic, .is-italic { font-style: italic; }
.bold { font-weight: 700; }

.line-height-small { line-height: 1.3; }

.op-1 { opacity: .1; } .op-2 { opacity: .2; } .op-3 { opacity: .3; }
.op-4 { opacity: .4; } .op-5 { opacity: .5; } .op-6 { opacity: .6; }
.op-7 { opacity: .7; } .op-8 { opacity: .8; } .op-9 { opacity: .9; }

.circle { border-radius: 999px; overflow: hidden; }
.round  { border-radius: 5px; }

.clearfix::after { content: ""; display: table; clear: both; }

/* Spacer do UX Builder chèn — chiều cao đến từ style nội tuyến */
.gap-element {
  display: block;
  width: 100%;
}

.pt-half { padding-top: .5em; }
.pt-0 { padding-top: 0; } .pb-0 { padding-bottom: 0; }
.mb-0 { margin-bottom: 0; } .mt-0 { margin-top: 0; }

/* Reset lề của phần tử đầu/cuối để box không bị dư khoảng trắng */
.first-reset > *:first-child { margin-top: 0; }
.last-reset  > *:last-child  { margin-bottom: 0; }
.p-last-0 p:last-child { margin-bottom: 0; }

.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignleft   { float: left; margin: 0 1.5em 1em 0; }
.alignright  { float: right; margin: 0 0 1em 1.5em; }
.alignnone   { display: block; }

/* Vùng chữ trên nền tối */
.dark,
.dark p,
.dark li,
.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 { color: #fff; }
.dark a { color: #fff; }
.dark a:hover { color: rgba(255, 255, 255, .8); }

/* ------------------------------------------------------- hiện/ẩn theo khổ */

/* small = dưới 550px, medium = dưới 850px (theo quy ước của nội dung gốc) */
@media (max-width: 549px) {
  .hide-for-small { display: none !important; }
}
@media (min-width: 550px) {
  .show-for-small { display: none !important; }
}
@media (max-width: 849px) {
  .hide-for-medium { display: none !important; }
}
@media (min-width: 850px) {
  .show-for-medium { display: none !important; }
}

.screen-reader-text,
.screen-reader-response {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* ------------------------------------------------------------ đổ bóng */

.box-shadow-1 { box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.box-shadow-2 { box-shadow: 0 3px 8px rgba(0, 0, 0, .12); }
.box-shadow-3 { box-shadow: 0 5px 15px rgba(0, 0, 0, .14); }
.box-shadow-4 { box-shadow: 0 8px 25px rgba(0, 0, 0, .16); }
.box-shadow-5 { box-shadow: 0 12px 35px rgba(0, 0, 0, .2); }

.box-shadow-1-hover:hover { box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.box-shadow-2-hover:hover { box-shadow: 0 3px 8px rgba(0, 0, 0, .12); }
.box-shadow-3-hover:hover { box-shadow: 0 5px 15px rgba(0, 0, 0, .14); }
.box-shadow-4-hover:hover { box-shadow: 0 8px 25px rgba(0, 0, 0, .16); }
.box-shadow-5-hover:hover { box-shadow: 0 12px 35px rgba(0, 0, 0, .2); }

/* Trên khổ nhỏ, cột full width thì bỏ bớt padding đáy cho đỡ rỗng */
@media (max-width: 549px) {
  .col { padding-bottom: 20px; }
}