/* ===== LỚP 1: Flatsome rò vào markup design (chỉ trên trang design: body.th-design) =====
   Specificity: :where(.th-design) X = đúng bằng rule Flatsome (nạp sau ⇒ thắng) nhưng THUA mọi rule class của design. */

/* 1. Nền html của Flatsome (#4d4d4d) + background-attachment */
html:has(body.th-design) { background-color: #fff; }

/* 2. Font: Flatsome bơm inline font Lato CUỐI wp_head cho body + heading ⇒ ép lại đúng font design */
body.th-design { font-family: 'Google Sans Flex','Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color: var(--ink); background: var(--bg); line-height: 1.6; }
.th-design :is(h1,h2,h3,h4,h5,h6,p,a,li,span,input,select,textarea,blockquote,figcaption,td,th,label,small,div,dt,dd,b,strong) { font-family: inherit; }

/* 3. Heading: Flatsome đặt color #555, margin-bottom .5em, width 100%, font-size em, line-height 1.3 */
:where(.th-design) :is(h1,h2,h3,h4,h5,h6) { color: inherit; margin: 0; width: auto; font-size: inherit; line-height: inherit; text-rendering: auto; }
:where(.th-design) h1 { font-size: 2em; }  /* trả về mặc định trình duyệt (design không reset) */
:where(.th-design) h2 { font-size: 1.5em; }
:where(.th-design) h3 { font-size: 1.17em; }

/* 4. p/ul/li… Flatsome margin-bottom 1.3em / .6em; ul list-style disc */
:where(.th-design) :is(p,ul,ol,dl,figure,form,blockquote,pre) { margin: 0; }
:where(.th-design) li { margin: 0; }
:where(.th-design) ul { list-style: none; }
:where(.th-design) small { display: inline; font-size: smaller; }
:where(.th-design) a { color: inherit; }
:where(.th-design) img { vertical-align: baseline; height: auto; transition: none; }

/* 5. button: Flatsome ép uppercase/padding/min-height/margin-bottom/line-height 2.4em */
/*    font: revert = về font mặc định trình duyệt như design (design không đặt font cho <button>, vd cột số .sc-index) */
:where(.th-design) button { font: revert; text-transform: none; letter-spacing: normal; min-height: 0; margin: 0; padding: 0; min-width: 0; border-radius: 0; max-width: none; vertical-align: baseline; text-shadow: none; display: revert; }

/* 6. Clearfix ::after của Flatsome trên .row/.container ⇒ thành flex/grid item ăn 1 khe gap */
.th-design .row::after, .th-design .row::before, .th-design .container::after, .th-design .container::before { content: none; }

/* 7. Trùng tên class Flatsome ↔ design (đã quét bằng script: section-title, nav, lead, logo, footer, container…) */
.th-design .section-title { display: block; position: static; flex-flow: initial; justify-content: normal; align-items: normal; }
.th-design .section-title span { text-transform: none; }
.th-design .site-header .nav { flex-wrap: nowrap; width: auto; }

/* 8. Flatsome thụt lề list trong cột: .col-inner ul li{margin-left:1.3em} */
.th-design .col-inner :is(ul,ol) li { margin-left: 0; }