/* =========================================================
   FLATSOME NATIVE — map layout design Tấn Tài AM lên wrapper
   element gốc Flatsome ([section]/[row]/[col]/[ux_text]/[ux_image]/[gap]).
   Section/row giữ class design (.hero, .about__grid, .grid-products…)
   nên CSS design vẫn ăn; file này chỉ nối phần wrapper Flatsome.
   ========================================================= */

/* ---- Khung chung: .section-content đóng vai .container của design ---- */
.page .section .section-content{
  width:min(var(--container,1240px),100% - 48px);
  margin-inline:auto;padding:0;
}
.page .col{padding-bottom:0;}
.page .ux-text{margin:0;}
.page .col-inner>.text{margin:0;}
.page .col .img{margin-bottom:0;}
.tt-anchor{display:block;position:relative;top:-90px;}

/* Text chỉ chứa 1 pill/link inline-flex: line-box block thêm ~0.5px descent so
   với flex-item trong design (.section-head/.contact__info là flex column)
   → trả wrapper về flex. Trừ .pill--solid (hero): design đặt trong block. */
.page .text:has(>span.pill:only-child):not(:has(>.pill--solid)),
.page .text:has(>a.link-more:only-child){display:flex;}

/* design .checklist{margin-top:4px} — bị reset ul của adapt đè, trả lại */
.page ul.checklist{margin-top:4px;}

/* ---- Nav overlay: design đặt nav trong hero (ảnh nền phía sau, nav in-flow
        margin-top 24 + cao 90) → header absolute + section hero bù padding ---- */
.site-nav{position:absolute;top:0;left:0;right:0;z-index:60;}
.site-nav .container{width:min(var(--container,1240px),100% - 48px);margin-inline:auto;}

/* ---- Section chuẩn (padding 88px desktop qua attr → rule #section_x):
        design thu về 64px ở ≤900px — rule ID thắng media class nên phải ép ---- */
@media (max-width:900px){
  .page section.section.tt-sec{padding-top:64px!important;padding-bottom:64px!important;}
}

/* ---- Helper row: tt-block = row 1 cột dạng block ----
   Chỉ zero left/right/bottom — KHÔNG đụng padding-top để class design
   trên col (vd .hero__content{padding-top:152px}) còn ăn */
.page .row.tt-block{display:block;margin:0;width:100%;max-width:none;}
.page .row.tt-block>.col{padding-left:0;padding-right:0;padding-bottom:0;width:100%;max-width:none;margin:0;}

/* ---- Helper row: tt-grid = row nhận layout từ class design
        (about__grid, contact__grid, grid-products, grid-commit, grid-news,
        section-head--row) — trung hoà flex/gutter/clearfix Flatsome ---- */
.page .row.tt-grid{margin-left:0;margin-right:0;width:100%;max-width:none;}
.page .row.tt-grid::before,.page .row.tt-grid::after{content:none;display:none;}
.page .row.tt-grid>.col{padding-left:0;padding-right:0;padding-bottom:0;width:auto;max-width:none;margin:0;min-width:0;flex:0 1 auto;}

/* =========================================================
   HERO (section.hero.tt-hero)
   ========================================================= */
/* scrim design .hero::after / .contact::after thay bằng overlay Flatsome */
.page section.hero::after,.page section.contact::after{content:none;}
.tt-hero .section-bg-overlay{
  background:linear-gradient(180deg,rgba(62,36,16,.86) 0%,rgba(62,36,16,.55) 55%,rgba(62,36,16,.35) 100%)!important;
}
/* bù không gian nav in-flow của design: margin 24 + nav cao 90 = 114px
   (specificity phải thắng rule .page .section .section-content{padding:0}) */
.page .section.tt-hero .section-content{padding-top:114px;}
@media (max-width:640px){
  .page .section.tt-hero .section-content{padding-top:90px;} /* logo mobile 64 + border 2 + margin 24 */
}

/* =========================================================
   GIỚI THIỆU (section.tt-about — row.about__grid)
   ========================================================= */
/* ảnh cột phải: design .about__img{aspect 587/502, cover, bo 16} */
.img.tt-aboutimg{margin:0;}
.tt-aboutimg .img-inner{border-radius:var(--r-lg,16px);overflow:hidden;}
.tt-aboutimg img{width:100%;aspect-ratio:587/502;object-fit:cover;border-radius:var(--r-lg,16px);}

/* =========================================================
   HÀNG TIÊU ĐỀ section-head--row (pill+h2 | link "Xem tất cả")
   ========================================================= */
/* cột phải tự đẩy xuống đáy nhờ align-items:flex-end của design */

/* =========================================================
   LƯỚI THẺ SẢN PHẨM (row.grid-products) — design: flex wrap,
   thẻ rộng calc((100% - 72px)/4)
   ========================================================= */
.page .row.grid-products>.col{width:calc((100% - 72px)/4);}
.grid-products .col-inner,.grid-products .col-inner>.text,.grid-products .card{height:100%;}
@media (max-width:1100px){ .page .row.grid-products>.col{width:calc((100% - 48px)/3);} }
@media (max-width:900px){ .page .row.grid-products>.col{width:calc((100% - 24px)/2);} }
@media (max-width:640px){ .page .row.grid-products>.col{width:100%;} }

/* =========================================================
   LƯỚI CAM KẾT (row.grid-commit) + TIN TỨC (row.grid-news)
   — display:grid từ class design; chain height cho card đều nhau
   ========================================================= */
.grid-commit .col-inner,.grid-commit .col-inner>.text,.grid-commit .commit{height:100%;}
.grid-news .col-inner,.grid-news .col-inner>.text,.grid-news .card{height:100%;}
.grid-news .card{display:flex;flex-direction:column;}

/* =========================================================
   SỐ LIỆU (section.stats) — 1 Text chứa .stats__row (dải gắn kết)
   ========================================================= */

/* =========================================================
   LIÊN HỆ (section.contact.tt-contact — row.contact__grid)
   ========================================================= */
.tt-contact .section-bg-overlay{background:rgba(104,59,20,.86)!important;}
/* cột form: giữ chain để .form nhận width cột 520px của grid design */
.tt-contact-form .col-inner,.tt-contact-form .col-inner>.text{width:100%;}

/* =========================================================
   TRANG CON — PAGE BANNER (section.page-banner.tt-banner)
   ========================================================= */
/* scrim design .page-banner::after thay bằng overlay Flatsome (banner ảnh) */
.page section.page-banner::after{content:none;}
.tt-banner .section-bg-overlay{
  background:linear-gradient(180deg,rgba(62,36,16,.9) 0%,rgba(62,36,16,.66) 100%)!important;
}
/* bù không gian nav in-flow của design (margin 24 + nav 90) */
.page .section.tt-banner .section-content{padding-top:114px;}
@media (max-width:640px){
  .page .section.tt-banner .section-content{padding-top:90px;}
}
/* .page-banner__content là flex col gap 12 — chuyển xuống col-inner */
.tt-banner .col.page-banner__content .col-inner{display:flex;flex-direction:column;gap:12px;}
.tt-banner .col.page-banner__content .col-inner>.text{margin:0;}
/* padding content banner: rule tt-block>.col (0,3,0) đè class design (0,1,0)
   → map lại đúng số đo design (200/56, slim 150/40; mobile 130/40, slim 120/32) */
.page .row.tt-block>.col.page-banner__content{padding:200px 0 56px;}
.page .page-banner--slim .row.tt-block>.col.page-banner__content{padding:150px 0 40px;}
@media (max-width:900px){
  .page .row.tt-block>.col.page-banner__content{padding:130px 0 40px;}
  .page .page-banner--slim .row.tt-block>.col.page-banner__content{padding:120px 0 32px;}
}

/* =========================================================
   TRANG CON — CTA BAND (section.cta-band.tt-ctaband)
   ========================================================= */
.page section.cta-band::after{content:none;}
.tt-ctaband .section-bg-overlay{background:rgba(104,59,20,.88)!important;}
.tt-ctaband .col-inner{display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center;}

/* =========================================================
   GIỚI THIỆU — story (row.story__grid) + gallery (row.gallery)
   ========================================================= */
.img.tt-storyimg{margin:0;}
.tt-storyimg .img-inner{border-radius:var(--r-lg,16px);overflow:hidden;}
.tt-storyimg img{width:100%;aspect-ratio:520/600;object-fit:cover;border-radius:var(--r-lg,16px);}
/* cột phải .story__text là flex col gap 20 — chuyển xuống col-inner */
.page .col.story__text .col-inner{display:flex;flex-direction:column;gap:20px;}

/* =========================================================
   SẢN PHẨM CHI TIẾT (row.pd-grid) — cột info flex gap 18
   ========================================================= */
.page .col.pd-info .col-inner{display:flex;flex-direction:column;gap:18px;}
/* design spec-table dùng class "row" trùng Flatsome — trung hoà gutter/clearfix */
.page .spec-table .row{margin:0;width:100%;max-width:none;padding:14px 18px;flex-wrap:nowrap;}
.page .spec-table .row::before,.page .spec-table .row::after{content:none;display:none;}

/* =========================================================
   LƯỚI 3 CỘT grid-3 (đặc điểm / liên quan / bài viết khác)
   ========================================================= */
.grid-3 .col-inner,.grid-3 .col-inner>.text,.grid-3 .commit,.grid-3 .card{height:100%;}
.grid-3 .card{display:flex;flex-direction:column;}

/* =========================================================
   LIÊN HỆ (trang) — info-cards + contact-light + map-col
   ========================================================= */
/* section 4 thẻ: design style="padding-bottom:0" (importance thắng rule ID) */
.page section.section.tt-lhcards{padding-bottom:0!important;}
@media (max-width:900px){
  .page section.section.tt-lhcards{padding-top:64px!important;padding-bottom:0!important;}
}
.info-cards .col-inner,.info-cards .col-inner>.text,.info-cards .info-card{height:100%;}
/* contact-light: design padding-top 72 (desktop) — ID rule attr=88 nên phải ép */
@media (min-width:901px){
  .page section.section.tt-lhcontact{padding-top:72px!important;}
}
/* cột bản đồ .map-col là flex col gap 20 — chuyển xuống col-inner */
.page .col.map-col .col-inner{display:flex;flex-direction:column;gap:20px;}

/* =========================================================
   BÀI VIẾT (col.article) — flex col gap 28, khối 820 giữa trang
   ========================================================= */
/* thắng tt-block (margin:0 + max-width:none) để khối 820 canh giữa */
.page .row.tt-block>.col.article{margin-inline:auto;max-width:820px;}
.page .col.article .col-inner{display:flex;flex-direction:column;gap:28px;}
.img.tt-arthero{margin:0;}
.tt-arthero .img-inner{border-radius:var(--r-lg,16px);overflow:hidden;}
.tt-arthero img{width:100%;aspect-ratio:820/440;object-fit:cover;border-radius:var(--r-lg,16px);}