:host{display:block;}
/* t4-google-fonts-css */












/* t4-google-fonts-icon-css */



.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
}

/* flatsome-style-css */
/*
Theme Name:   4T — Tiếp Thị Tử Tế (demo1, Flatsome UX Builder)
Theme URI:    https://demo1.tiepthitute.com
Description:  Child theme của Flatsome cho demo1 — KHÁC kiến trúc với bản demo.tiepthitute.com (flatsome-child gốc): header dùng Flatsome Header Builder, footer là UX Block, không ghi đè header.php/footer.php. Từ 1.6.0 file này KHÔNG còn chứa luật CSS nào (III.4.1) — mọi luật nằm trong css/, đăng ký ở functions.php.
Author:       Tiếp Thị Tử Tế
Author URI:   https://tiepthitute.com
Template:     flatsome
Version:      1.9.320
Text Domain:  flatsome-child
*/

/* ==========================================================================
   ⛔ FILE NÀY CHỈ CÒN PHẦN KHAI BÁO THEME — KHÔNG ĐƯỢC THÊM LUẬT CSS VÀO ĐÂY.

   Luật III.4.1 của BO-LUAT-FLATSOME-TONG-HOP.md: "style.css chỉ chứa header
   khai báo theme, KHÔNG chứa rule". Trước 1.6.0 file này gộp 5.198 dòng của
   mọi trang — sửa một trang phải dò trong cả cục, và không ai lần ra được
   luật nào phục vụ cái gì.

   ── BẢN ĐỒ MÔ-ĐUN (thứ tự nạp = thứ tự trong danh sách này) ────────────────

   css/00-tokens.css      biến màu · phông · khoảng cách. CHỈ biến, không rule.
   css/10-base.css        typography nền toàn site.
   css/20-header.css      header · mega menu · thanh nút đáy mobile.
   css/21-footer.css      footer UX Block "Footer 4T" · follow · hàng liên hệ.
   css/30-components.css  khối dùng lại: nhãn section, nền gradient, thẻ trắng,
                          nút dự phòng, widget chat, tiện ích chung.
   css/31-nhom-ggm.css    ba trang Google Marketing con (#5 #6 #7) — dùng chung
                          cho MỘT NHÓM trang nên không đặt tên 40-page-*.
   css/40-page-<slug>.css luật đặc thù đúng một trang.

   ── HAI ĐIỀU PHẢI NHỚ ─────────────────────────────────────────────────────

   1. Thêm file css mới thì PHẢI thêm tên vào mảng `$mo_dun` trong
      functions.php. File không đăng ký = mồ côi = vi phạm III.4.2, và nó sẽ
      im lặng không chạy chứ không báo lỗi gì.
   2. Version ở trên vẫn phải TĂNG mỗi lần sửa bất kỳ file css nào — Chặng 0
      của đường ống niêm phong theo số này, và `main.js` cũng dùng chung nó.
      (Bản thân từng mô-đun đã có `filemtime` riêng để chống đệm trình duyệt.)
   ========================================================================== */

/* flatsome-main-css */
@charset "utf-8";:host{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;font-family:sans-serif}:host{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:none}b,strong{font-weight:inherit;font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{display:inline-block;font-size:80%}img{border-style:none}svg:not(:host){overflow:hidden}button,input,select,textarea{font:inherit}optgroup{font-weight:700}button,input,select{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{cursor:pointer}[disabled]{cursor:default}[type=reset],[type=submit],button,:host [type=button]{-webkit-appearance:button}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}button:-moz-focusring,input:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}*,:after,:before,:host{box-sizing:border-box}:host{-webkit-tap-highlight-color:rgba(0,0,0,0);background-attachment:fixed}:host{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#777}.xdebug-var-dump{position:relative;z-index:1000}hr{border-width:0;border-top:1px solid;margin:15px 0;opacity:.1}img{display:inline-block;height:auto;max-width:100%;vertical-align:middle}figure{margin:0}pre{background-color:#f1f1f1;border:1px solid #ddd;overflow-x:auto;padding:20px;width:100%}p:empty{display:none}a,button,input{touch-action:manipulation}ins{text-decoration:none}embed,iframe,object{max-width:100%}.col,.columns,.gallery-item{margin:0;padding:0 15px 30px;position:relative;width:100%}.col-fit{flex:1}.col-first{order:-1}.col-last{order:1}.col-inner{background-position:50% 50%;background-repeat:no-repeat;background-size:cover;flex:1 0 auto;margin-left:auto;margin-right:auto;position:relative;width:100%}.col-has-radius{overflow:hidden}@media screen and (min-width:850px){.col:first-child .col-inner{margin-left:auto;margin-right:0}.col+.col .col-inner{margin-left:0;margin-right:auto}}@media screen and (max-width:549px){.small-col-first{order:-1}}@media screen and (min-width:850px){.large-col-first{order:-1}}@media screen and (max-width:849px){.medium-col-first{order:-1}.col{padding-bottom:30px}}@media screen and (min-width:850px){.row-divided>.col+.col:not(.large-12){border-left:1px solid #ececec}.row-divided.row-reverse>.col+.col:not(.large-12){border-left:0;border-right:1px solid #ececec}.col-divided{border-right:1px solid #ececec;padding-right:30px}.col.col-divided:not(.col-first):last-child{border-left:1px solid #ececec;border-right:0;padding-left:30px;padding-right:0}.col-border{border-right:1px solid #ececec;padding-right:0}.col-border+.col,.col-divided+.col{padding-left:30px}}.dark .col-divided{border-color:hsla(0,0%,100%,.2)}.align-equal>.col{display:flex}.align-middle{align-items:center!important;align-self:center!important;vertical-align:middle!important}.align-bottom{align-items:flex-end!important;align-self:flex-end!important;justify-content:flex-end!important;vertical-align:bottom!important}.align-top{align-items:flex-start!important;align-self:flex-start!important;justify-content:flex-start!important;vertical-align:top!important}.align-center{justify-content:center!important}.align-right{justify-content:flex-end!important}.small-1{flex-basis:8.3333333333%;max-width:8.3333333333%}.small-2{flex-basis:16.6666666667%;max-width:16.6666666667%}.small-3{flex-basis:25%;max-width:25%}.small-4{flex-basis:33.3333333333%;max-width:33.3333333333%}.small-5{flex-basis:41.6666666667%;max-width:41.6666666667%}.small-6{flex-basis:50%;max-width:50%}.small-7{flex-basis:58.3333333333%;max-width:58.3333333333%}.small-8{flex-basis:66.6666666667%;max-width:66.6666666667%}.small-9{flex-basis:75%;max-width:75%}.small-10{flex-basis:83.3333333333%;max-width:83.3333333333%}.small-11{flex-basis:91.6666666667%;max-width:91.6666666667%}.small-12,.small-columns-1 .flickity-slider>.col,.small-columns-1>.col{flex-basis:100%;max-width:100%}.small-columns-2 .flickity-slider>.col,.small-columns-2>.col{flex-basis:50%;max-width:50%}.small-columns-3 .flickity-slider>.col,.small-columns-3>.col{flex-basis:33.3333333333%;max-width:33.3333333333%}.small-columns-4 .flickity-slider>.col,.small-columns-4>.col{flex-basis:25%;max-width:25%}.small-columns-5 .flickity-slider>.col,.small-columns-5>.col{flex-basis:20%;max-width:20%}.small-columns-6 .flickity-slider>.col,.small-columns-6>.col{flex-basis:16.6666666667%;max-width:16.6666666667%}.small-columns-7 .flickity-slider>.col,.small-columns-7>.col{flex-basis:14.2857142857%;max-width:14.2857142857%}.small-columns-8 .flickity-slider>.col,.small-columns-8>.col{flex-basis:12.5%;max-width:12.5%}@media screen and (min-width:550px){.medium-1{flex-basis:8.3333333333%;max-width:8.3333333333%}.medium-2{flex-basis:16.6666666667%;max-width:16.6666666667%}.medium-3{flex-basis:25%;max-width:25%}.medium-4{flex-basis:33.3333333333%;max-width:33.3333333333%}.medium-5{flex-basis:41.6666666667%;max-width:41.6666666667%}.medium-6{flex-basis:50%;max-width:50%}.medium-7{flex-basis:58.3333333333%;max-width:58.3333333333%}.medium-8{flex-basis:66.6666666667%;max-width:66.6666666667%}.medium-9{flex-basis:75%;max-width:75%}.medium-10{flex-basis:83.3333333333%;max-width:83.3333333333%}.medium-11{flex-basis:91.6666666667%;max-width:91.6666666667%}.medium-12,.medium-columns-1 .flickity-slider>.col,.medium-columns-1>.col{flex-basis:100%;max-width:100%}.medium-columns-2 .flickity-slider>.col,.medium-columns-2>.col{flex-basis:50%;max-width:50%}.medium-columns-3 .flickity-slider>.col,.medium-columns-3>.col{flex-basis:33.3333333333%;max-width:33.3333333333%}.medium-columns-4 .flickity-slider>.col,.medium-columns-4>.col{flex-basis:25%;max-width:25%}.medium-columns-5 .flickity-slider>.col,.medium-columns-5>.col{flex-basis:20%;max-width:20%}.medium-columns-6 .flickity-slider>.col,.medium-columns-6>.col{flex-basis:16.6666666667%;max-width:16.6666666667%}.medium-columns-7 .flickity-slider>.col,.medium-columns-7>.col{flex-basis:14.2857142857%;max-width:14.2857142857%}.medium-columns-8 .flickity-slider>.col,.medium-columns-8>.col{flex-basis:12.5%;max-width:12.5%}}@media screen and (min-width:850px){.large-1{flex-basis:8.3333333333%;max-width:8.3333333333%}.large-2{flex-basis:16.6666666667%;max-width:16.6666666667%}.large-3{flex-basis:25%;max-width:25%}.large-4{flex-basis:33.3333333333%;max-width:33.3333333333%}.large-5{flex-basis:41.6666666667%;max-width:41.6666666667%}.large-6{flex-basis:50%;max-width:50%}.large-7{flex-basis:58.3333333333%;max-width:58.3333333333%}.large-8{flex-basis:66.6666666667%;max-width:66.6666666667%}.large-9{flex-basis:75%;max-width:75%}.large-10{flex-basis:83.3333333333%;max-width:83.3333333333%}.large-11{flex-basis:91.6666666667%;max-width:91.6666666667%}.gallery-columns-1 .gallery-item,.large-12,.large-columns-1 .flickity-slider>.col,.large-columns-1>.col{flex-basis:100%;max-width:100%}.gallery-columns-2 .gallery-item,.large-columns-2 .flickity-slider>.col,.large-columns-2>.col{flex-basis:50%;max-width:50%}.gallery-columns-3 .gallery-item,.large-columns-3 .flickity-slider>.col,.large-columns-3>.col{flex-basis:33.3333333333%;max-width:33.3333333333%}.gallery-columns-4 .gallery-item,.large-columns-4 .flickity-slider>.col,.large-columns-4>.col{flex-basis:25%;max-width:25%}.gallery-columns-5 .gallery-item,.large-columns-5 .flickity-slider>.col,.large-columns-5>.col{flex-basis:20%;max-width:20%}.gallery-columns-6 .gallery-item,.large-columns-6 .flickity-slider>.col,.large-columns-6>.col{flex-basis:16.6666666667%;max-width:16.6666666667%}.gallery-columns-7 .gallery-item,.large-columns-7 .flickity-slider>.col,.large-columns-7>.col{flex-basis:14.2857142857%;max-width:14.2857142857%}.gallery-columns-8 .gallery-item,.large-columns-8 .flickity-slider>.col,.large-columns-8>.col{flex-basis:12.5%;max-width:12.5%}}.has-shadow>.col>.col-inner{background-color:#fff}.col-hover-blur .col-inner,.col-hover-fade .col-inner,.col-hover-focus .col-inner{transition:all,.2s}.col-hover-fade .col-inner{opacity:.6}.col-hover-fade:hover .col-inner{opacity:1}.col-hover-blur .col-inner{filter:blur(3px)}.col-hover-blur:hover .col-inner{filter:blur(0)}.col-hover-focus:hover .col-inner{opacity:1}.row:hover .col-hover-focus .col:not(:hover){opacity:.6}.container,.container-width,.full-width .ubermenu-nav,.row,:host.boxed,:host.framed{margin-left:auto;margin-right:auto;width:100%}.container{padding-left:15px;padding-right:15px}.container,.container-width,.full-width .ubermenu-nav,.row{max-width:1080px}.row.row-collapse{max-width:1050px}.row.row-small{max-width:1065px}.row.row-large{max-width:1110px}:host.boxed,:host.boxed .header-wrapper,:host.boxed .is-sticky-section,:host.boxed header,:host.framed,:host.framed .header-wrapper,:host.framed header{max-width:1170px}@media screen and (min-width:850px){:host.framed{margin:30px auto}}.flex-row{align-items:center;display:flex;flex-flow:row nowrap;justify-content:space-between;width:100%}.flex-row-start{justify-content:flex-start}.flex-row-center{justify-content:center}.flex-row-col{display:flex;flex-direction:column;justify-content:flex-start}.text-center .flex-row{justify-content:center}.header .flex-row{height:100%}.flex-col{max-height:100%}.flex-grow{-ms-flex-negative:1;-ms-flex-preferred-size:auto!important;flex:1}.flex-center{margin:0 auto}.flex-left{margin-right:auto}.flex-right{margin-left:auto}.flex-wrap{flex-wrap:wrap}.flex-has-center>.flex-col:not(.flex-center),.flex-has-center>.flex-row>.flex-col:not(.flex-center),.flex-has-center>.nav-row>.flex-col:not(.flex-center){flex:1}@media(max-width:849px){.medium-flex-wrap{flex-flow:column wrap}.medium-flex-wrap .flex-col{flex-grow:0;padding-bottom:5px;padding-top:5px;width:100%}}@media(max-width:549px){.small-flex-wrap{flex-flow:column wrap}.small-flex-wrap .flex-col{flex-grow:0;width:100%}}@media(min-width:850px){.col2-set,.u-columns{display:flex}.col2-set>div+div,.u-columns>div+div{padding-left:30px}}.row-grid .box .image-cover{height:100%;padding:0}.grid-col>.col-inner{height:100%}.grid-col .banner,.grid-col .box,.grid-col .box-image,.grid-col .box-image img,.grid-col .col-inner>.img,.grid-col .flickity-slider>.img,.grid-col .image-cover,.grid-col .image-cover img,.grid-col .slider,.grid-col .slider-wrapper,.grid-col .slider:not(.flickity-enabled),.grid-col .slider>.img,.grid-col>.col-inner>.img,.grid-col>.col-inner>.img .img-inner>img,.grid-col>.col-inner>.img div{bottom:0;height:100%;-o-object-fit:cover;object-fit:cover;padding:0!important;position:absolute!important;top:0;width:100%}.grid-col .box-image img{font-family:"object-fit: cover;"}.grid-col .flickity-viewport{height:100%!important}.grid-col .box:not(.box-shade):not(.box-overlay):not(.box-badge) .box-text{background-color:hsla(0,0%,100%,.95);bottom:0;padding-left:1.5em;padding-right:1.5em;position:absolute}@media(prefers-reduced-motion){.grid-col{transition:none!important}}@media (-ms-high-contrast:none){.payment-icon svg{max-width:50px}.slider-nav-circle .flickity-prev-next-button svg{height:36px!important}.nav>li>a>i{top:-1px}}.gallery,.row{display:flex;flex-flow:row wrap;width:100%}.row>div:not(.col):not([class^=col-]):not([class*=" col-"]){width:100%!important}.row.row-grid,.row.row-masonry{display:block}.row.row-grid>.col,.row.row-masonry>.col{float:left}.container .row:not(.row-collapse),.lightbox-content .row:not(.row-collapse),.row .gallery,.row .row:not(.row-collapse){margin-left:-15px;margin-right:-15px;padding-left:0;padding-right:0;width:auto}.row .container{padding-left:0;padding-right:0}.banner+.row:not(.row-collapse),.banner-grid-wrapper+.row:not(.row-collapse),.section+.row:not(.row-collapse),.slider-wrapper+.row:not(.row-collapse){margin-top:30px}.row-full-width{max-width:100%!important}.row-isotope{transition:height .3s}.row-reverse{flex-direction:row-reverse}@media screen and (max-width:549px){.small-row-reverse{flex-direction:column-reverse}}@media screen and (max-width:849px){.medium-row-reverse{flex-direction:row-reverse}}.row-collapse{padding:0}.row-collapse>.col,.row-collapse>.flickity-viewport>.flickity-slider>.col{padding:0!important}.row-collapse>.col .container{max-width:100%}.container .row-small:not(.row-collapse),.row .row-small:not(.row-collapse){margin-bottom:0;margin-left:-10px;margin-right:-10px}.row-small>.col,.row-small>.flickity-viewport>.flickity-slider>.col{margin-bottom:0;padding:0 9.8px 19.6px}.container .row-xsmall:not(.row-collapse),.row .row-xsmall:not(.row-collapse){margin-bottom:0;margin-left:-2px;margin-right:-2px}.row-xsmall>.col,.row-xsmall>.flickity-viewport>.flickity-slider>.col{margin-bottom:0;padding:0 2px 3px}@media screen and (min-width:850px){.row-large{padding-left:0;padding-right:0}.container .row-large:not(.row-collapse),.row .row-large:not(.row-collapse){margin-bottom:0;margin-left:-30px;margin-right:-30px}.row-large>.col,.row-large>.flickity-viewport>.flickity-slider>.col{margin-bottom:0;padding:0 30px 30px}}.row-dashed,.row-solid{overflow:hidden}.row-dashed .col,.row-solid .col{padding:0;position:relative}.row-dashed .col-inner,.row-solid .col-inner{padding:15px}.row-dashed .col:before,.row-solid .col:before{border-left:1px dashed #ddd;content:" ";height:100%;left:-1px;position:absolute;top:0}.row-dashed .col:after,.row-solid .col:after{border-bottom:1px dashed #ddd;bottom:-1px;content:" ";height:0;left:0;position:absolute;top:auto;width:100%}.row-solid .col:before{border-left-style:solid}.row-solid .col:after{border-bottom-style:solid}.dark .row-dashed .col:after,.dark .row-dashed .col:before,.dark .row-solid .col:after,.dark .row-solid .col:before{border-color:hsla(0,0%,100%,.2)}.block-html-after-header .row .col{padding-bottom:0}.wpb-js-composer .row:before{display:block!important}.section{align-items:center;display:flex;flex-flow:row;min-height:auto;padding:30px 0;position:relative;width:100%}.section.dark{background-color:#666}.section-bg{overflow:hidden}.section-bg,.section-content{width:100%}.section-content{z-index:1}.has-parallax{overflow:hidden}.container .section,.row .section{padding-left:30px;padding-right:30px}.section-bg :is(img,picture,video){height:100%;left:0;-o-object-fit:cover;object-fit:cover;-o-object-position:50% 50%;object-position:50% 50%;position:absolute;top:0;width:100%}.is-sticky-section+.sticky-section-helper{background-color:#000;min-height:100vh!important}.sticky-section-helper+div{background-color:#fff;box-shadow:15px 15px 15px 15px rgba(0,0,0,.1);position:relative}.sticky-section{background-color:#fff;height:100%!important;height:100vh!important;left:0;margin:0 auto;overflow:hidden;padding:0!important;position:sticky!important;right:0;top:0;width:100%!important}.is-sticky-section{position:fixed!important}.nav-dropdown{background-color:#fff;color:#777;display:table;left:-99999px;margin:0;max-height:0;min-width:260px;opacity:0;padding:20px 0;position:absolute;text-align:left;transition:opacity .25s,visibility .25s;visibility:hidden;z-index:9}.dark.nav-dropdown{color:#f1f1f1}.nav-dropdown:after{clear:both;content:"";display:block;height:0;visibility:hidden}.nav-dropdown li{display:block;margin:0;vertical-align:top}.nav-dropdown li ul{margin:0;padding:0}.nav-dropdown>li.html{min-width:260px}.next-prev-thumbs li.has-dropdown:hover>.nav-dropdown,.no-js li.has-dropdown:hover>.nav-dropdown,li.current-dropdown>.nav-dropdown{left:-15px;max-height:inherit;opacity:1;visibility:visible}.nav-right li.current-dropdown:last-child>.nav-dropdown,.nav-right li.has-dropdown:hover:last-child>.nav-dropdown{left:auto;right:-15px}.nav-column li>a,.nav-dropdown>li>a{display:block;line-height:1.3;padding:10px 20px;width:auto}.nav-column>li:last-child:not(.nav-dropdown-col)>a,.nav-dropdown>li:last-child:not(.nav-dropdown-col)>a{border-bottom:0!important}.dropdown-uppercase.nav-dropdown .nav-column>li>a,.nav-dropdown.dropdown-uppercase>li>a{font-size:.85em;text-transform:uppercase}.nav-dropdown>li.image-column,.nav-dropdown>li.nav-dropdown-col{display:table-cell;min-width:160px;text-align:left;white-space:nowrap;width:160px}.nav-dropdown>li.image-column:not(:last-child),.nav-dropdown>li.nav-dropdown-col:not(:last-child){border-right:1px solid transparent}.nav-dropdown .menu-item-has-children>a,.nav-dropdown .nav-dropdown-col>a,.nav-dropdown .title>a{color:#000;font-size:.8em;font-weight:bolder;text-transform:uppercase}.nav-dropdown .nav-dropdown-col .menu-item-has-children{margin-top:5px}.nav-dropdown li.image-column{border:0!important;margin:0!important;padding:0!important}.nav-dropdown li.image-column>a{font-size:0!important;line-height:0!important;margin:-20px 0!important;padding:0!important}.nav-dropdown li.image-column>a img{display:block;margin:0;width:100%}.nav-dropdown li.image-column>a:hover{opacity:.8}.nav-dropdown-default li.image-column:first-child>a{margin-left:-20px!important;margin-right:20px!important}.nav-dropdown-default li.image-column:last-child>a{margin-right:-20px!important}.nav-dropdown.nav-dropdown-bold>li.nav-dropdown-col,.nav-dropdown.nav-dropdown-simple>li.nav-dropdown-col{border-color:#f1f1f1}.nav-dropdown-default .nav-column li>a,.nav-dropdown.nav-dropdown-default>li>a{border-bottom:1px solid #ececec;margin:0 10px;padding-left:0;padding-right:0}.nav-dropdown-default{padding:20px}.nav-dropdown-bold .nav-column li>a,.nav-dropdown.nav-dropdown-bold>li>a{border-radius:10px;margin:0 10px;padding-left:10px;padding-right:5px}.nav-dropdown-bold .nav-column li>a:hover,.nav-dropdown-bold.dark .nav-column li>a:hover,.nav-dropdown.nav-dropdown-bold.dark>li>a:hover,.nav-dropdown.nav-dropdown-bold>li>a:hover{background-color:var(--fs-color-primary);color:#fff!important}.nav-dropdown-simple .nav-column li>a:hover,.nav-dropdown.nav-dropdown-simple>li>a:hover{background-color:rgba(0,0,0,.03)}.nav-dropdown.nav-dropdown-bold li.html,.nav-dropdown.nav-dropdown-simple li.html{padding:0 20px 10px}.menu-item-has-block .nav-dropdown{padding:0}.menu-item-has-block .nav-dropdown .col-inner ul:not(.nav.nav-vertical) li:not(.tab):not([class^=bullet-]){display:list-item;margin-left:1.3em!important}li.current-dropdown>.nav-dropdown-full,li.has-dropdown:hover>.nav-dropdown-full{display:flex;flex-wrap:wrap;left:50%!important;margin-left:0!important;margin-right:0!important;max-width:1150px!important;position:fixed;right:auto;transform:translateX(-50%);transition:opacity .3s!important;width:100%}.nav-dropdown-full>li.nav-dropdown-col{white-space:normal}.nav-dropdown-has-arrow li.has-dropdown:after,.nav-dropdown-has-arrow li.has-dropdown:before{border:solid transparent;bottom:-2px;content:"";height:0;left:50%;opacity:0;pointer-events:none;position:absolute;width:0;z-index:10}.nav-dropdown-has-arrow li.has-dropdown:after{border-color:hsla(0,0%,87%,0) hsla(0,0%,87%,0) #fff;border-width:8px;margin-left:-8px}.nav-dropdown-has-arrow li.has-dropdown:before{border-width:11px;margin-left:-11px;z-index:-999}.nav-dropdown-has-arrow .ux-nav-vertical-menu .menu-item-design-custom-size:after,.nav-dropdown-has-arrow .ux-nav-vertical-menu .menu-item-design-custom-size:before,.nav-dropdown-has-arrow .ux-nav-vertical-menu .menu-item-design-default:after,.nav-dropdown-has-arrow .ux-nav-vertical-menu .menu-item-design-default:before,.nav-dropdown-has-arrow li.has-dropdown.menu-item-design-container-width:after,.nav-dropdown-has-arrow li.has-dropdown.menu-item-design-container-width:before,.nav-dropdown-has-arrow li.has-dropdown.menu-item-design-full-width:after,.nav-dropdown-has-arrow li.has-dropdown.menu-item-design-full-width:before{display:none}.nav-dropdown-has-shadow .nav-dropdown{box-shadow:1px 1px 15px rgba(0,0,0,.15)}.nav-dropdown-has-arrow.nav-dropdown-has-border li.has-dropdown:before{border-bottom-color:#ddd}.nav-dropdown-has-border .nav-dropdown{border:2px solid #ddd}.nav-dropdown-has-arrow li.current-dropdown.has-dropdown:after,.nav-dropdown-has-arrow li.current-dropdown.has-dropdown:before{opacity:1;transition:opacity .25s}.label-hot.menu-item>a:after,.label-new.menu-item>a:after,.label-popular.menu-item>a:after,.label-sale.menu-item>a:after{background-color:#000;border-radius:2px;color:#fff;content:"";display:inline-block;font-size:9px;font-weight:bolder;letter-spacing:-.1px;line-height:9px;margin-left:4px;padding:2px 3px 3px;position:relative;text-transform:uppercase;top:-2px}.label-new.menu-item>a:after{background-color:var(--fs-color-primary)}.label-sale.menu-item>a:after{background-color:var(--fs-color-secondary)}.label-popular.menu-item>a:after{background-color:var(--fs-color-success)}.label-hot.menu-item>a:after{background-color:var(--fs-color-alert)}.nav p{margin:0;padding-bottom:0}.nav,.nav ul:not(.nav-dropdown){margin:0;padding:0}.nav>li>a.button,.nav>li>button{margin-bottom:0}.nav{align-items:center;display:flex;flex-flow:row wrap;width:100%}.nav,.nav>li{position:relative}.nav>li{display:inline-block;list-style:none;margin:0 7px;padding:0;transition:background-color .3s}.nav>li>a{align-items:center;display:inline-flex;flex-wrap:wrap;padding:10px 0}.html .nav>li>a{padding-bottom:0;padding-top:0}.nav-small .nav>li>a,.nav.nav-small>li>a{font-weight:400;padding-bottom:5px;padding-top:5px;vertical-align:top}.nav-small.nav>li.html{font-size:.75em}.nav-center{justify-content:center}.nav-fill{justify-content:space-between}.nav-left{justify-content:flex-start}.nav-right{justify-content:flex-end}@media(max-width:849px){.medium-nav-center{justify-content:center}}@media(max-width:549px){.small-nav-center{justify-content:center}}.nav-column>li>a,.nav-dropdown>li>a,.nav-vertical-fly-out>li>a,.nav>li>a{color:hsla(0,0%,40%,.85);transition:all .2s}.nav-column>li>a,.nav-dropdown>li>a{display:block}.nav-column li.active>a,.nav-column li>a:hover,.nav-dropdown li.active>a,.nav-dropdown>li>a:hover,.nav-vertical-fly-out>li>a:hover,.nav>li.active>a,.nav>li.current>a,.nav>li>a.active,.nav>li>a.current,.nav>li>a:hover{color:hsla(0,0%,7%,.85)}.nav li:first-child{margin-left:0!important}.nav li:last-child{margin-right:0!important}.nav-uppercase>li>a{font-weight:bolder;letter-spacing:.02em;text-transform:uppercase}.nav-thin>li>a{font-weight:thin!important}@media(min-width:850px){.nav-divided>li{margin:0 .7em}.nav-divided>li+li>a:after{border-left:1px solid rgba(0,0,0,.1);content:"";height:15px;left:-1em;margin-top:-7px;position:absolute;top:50%;width:1px}.nav-divided>li+li.icon-top>a:after{height:50px;margin-top:-25px}}li.html .row,li.html form,li.html input,li.html select{margin:0}li.html>.button{margin-bottom:0}li.hide-title>a{display:none!important}.nav-pagination>li>a,.nav-pagination>li>span{border:2px solid;border-radius:99px;display:block;font-size:1.1em;font-weight:bolder;height:2.25em;line-height:2em;min-width:2.25em;padding:0 7px;text-align:center;transition:all .3s;vertical-align:top;width:auto}.nav-pagination>li i{font-size:1.2em;top:-1px;vertical-align:middle}.nav-pagination>li>.current,.nav-pagination>li>a:hover,.nav-pagination>li>span:hover{background-color:var(--fs-color-primary);border-color:var(--fs-color-primary);color:#fff}.off-canvas .mobile-sidebar-slide{bottom:0;overflow:hidden;position:fixed;top:0;width:100%}.off-canvas .mobile-sidebar-slide .sidebar-menu{height:100%;padding-bottom:0;padding-top:0;transform:translateX(0);transition:transform .3s;will-change:transform}.mobile-sidebar-levels-1 .nav-slide>li>.sub-menu,.mobile-sidebar-levels-1 .nav-slide>li>ul.children{-webkit-overflow-scrolling:touch;bottom:0;display:none;left:100%;opacity:1;overflow:visible;overflow-y:auto;padding-bottom:20px;padding-right:0;padding-top:20px;position:fixed;top:0;transform:none;width:100%}.mobile-sidebar-levels-1 .nav-slide>li>.sub-menu>li,.mobile-sidebar-levels-1 .nav-slide>li>ul.children>li{align-items:center;display:flex;flex-flow:row wrap}.mobile-sidebar-levels-1 .nav-slide>li>.sub-menu.is-current-slide,.mobile-sidebar-levels-1 .nav-slide>li>ul.children.is-current-slide{display:block}.mobile-sidebar-levels-1 .nav-slide>li>.sub-menu.is-current-parent,.mobile-sidebar-levels-1 .nav-slide>li>ul.children.is-current-parent{overflow-y:hidden;padding-right:100%;width:200%}.mobile-sidebar-levels-2 .nav-slide>li>.sub-menu>li:not(.nav-slide-header),.mobile-sidebar-levels-2 .nav-slide>li>ul.children>li:not(.nav-slide-header){border-top:1px solid #ececec;margin-bottom:0;margin-top:0;transition:background-color .3s}.mobile-sidebar-levels-2 .nav-slide>li>.sub-menu>li:not(.nav-slide-header)>a,.mobile-sidebar-levels-2 .nav-slide>li>ul.children>li:not(.nav-slide-header)>a{color:hsla(0,0%,40%,.85);font-size:.8em;letter-spacing:.02em;padding-bottom:15px;padding-left:20px;padding-top:15px;text-transform:uppercase}.mobile-sidebar-levels-2 .nav-slide>li>.sub-menu>li:not(.nav-slide-header).active,.mobile-sidebar-levels-2 .nav-slide>li>.sub-menu>li:not(.nav-slide-header):hover,.mobile-sidebar-levels-2 .nav-slide>li>ul.children>li:not(.nav-slide-header).active,.mobile-sidebar-levels-2 .nav-slide>li>ul.children>li:not(.nav-slide-header):hover{background-color:rgba(0,0,0,.05)}.mobile-sidebar-levels-2 .nav-slide>li>.sub-menu>li:not(.nav-slide-header)>.sub-menu,.mobile-sidebar-levels-2 .nav-slide>li>.sub-menu>li:not(.nav-slide-header)>ul.children,.mobile-sidebar-levels-2 .nav-slide>li>ul.children>li:not(.nav-slide-header)>.sub-menu,.mobile-sidebar-levels-2 .nav-slide>li>ul.children>li:not(.nav-slide-header)>ul.children{-webkit-overflow-scrolling:touch;bottom:0;display:none;left:200%;opacity:1;overflow:visible;overflow-y:auto;padding-bottom:20px;padding-right:0;padding-top:20px;position:fixed;top:0;transform:none;width:100%}.mobile-sidebar-levels-2 .nav-slide>li>.sub-menu>li:not(.nav-slide-header)>.sub-menu>li,.mobile-sidebar-levels-2 .nav-slide>li>.sub-menu>li:not(.nav-slide-header)>ul.children>li,.mobile-sidebar-levels-2 .nav-slide>li>ul.children>li:not(.nav-slide-header)>.sub-menu>li,.mobile-sidebar-levels-2 .nav-slide>li>ul.children>li:not(.nav-slide-header)>ul.children>li{align-items:center;display:flex;flex-flow:row wrap}.mobile-sidebar-levels-2 .nav-slide>li>.sub-menu>li:not(.nav-slide-header)>.sub-menu.is-current-slide,.mobile-sidebar-levels-2 .nav-slide>li>.sub-menu>li:not(.nav-slide-header)>ul.children.is-current-slide,.mobile-sidebar-levels-2 .nav-slide>li>ul.children>li:not(.nav-slide-header)>.sub-menu.is-current-slide,.mobile-sidebar-levels-2 .nav-slide>li>ul.children>li:not(.nav-slide-header)>ul.children.is-current-slide{display:block}.mobile-sidebar-levels-2 .nav-slide>li>.sub-menu>li:not(.nav-slide-header)>.sub-menu.is-current-parent,.mobile-sidebar-levels-2 .nav-slide>li>.sub-menu>li:not(.nav-slide-header)>ul.children.is-current-parent,.mobile-sidebar-levels-2 .nav-slide>li>ul.children>li:not(.nav-slide-header)>.sub-menu.is-current-parent,.mobile-sidebar-levels-2 .nav-slide>li>ul.children>li:not(.nav-slide-header)>ul.children.is-current-parent{overflow-y:hidden;padding-right:100%;width:200%}.nav-slide{-webkit-overflow-scrolling:auto;height:100%;overflow:visible;overflow-y:auto;padding-top:20px}.nav-slide .active>.toggle{transform:none}.nav-slide>li{flex-shrink:0}.nav-slide-header .toggle{margin-left:0!important;padding-left:5px;position:relative!important;text-align:left;top:0!important;width:100%}.nav-slide-header .toggle i{font-size:1.4em;margin-right:2px}.text-center .nav-slide-header .toggle{margin-left:auto!important;margin-right:auto!important;width:auto}.nav-line-bottom>li>a:before,.nav-line-grow>li>a:before,.nav-line>li>a:before{background-color:var(--fs-color-primary);content:" ";height:3px;left:50%;opacity:0;position:absolute;top:0;transform:translateX(-50%);transition:all .3s;width:100%}.nav-line-bottom>li.active>a:before,.nav-line-bottom>li:hover>a:before,.nav-line-grow>li.active>a:before,.nav-line-grow>li:hover>a:before,.nav-line>li.active>a:before,.nav-line>li:hover>a:before{opacity:1}.nav:hover>li:not(:hover)>a:before{opacity:0}.tabbed-content .nav-line-bottom:before{bottom:0;top:auto}.nav-line-grow>li>a:before{width:0}.nav-line-grow>li.active>a:before,.nav-line-grow>li:hover>a:before{width:100%}.nav-line-bottom>li:after,.nav-line-bottom>li:before{display:none}.nav-line-bottom>li>a:before{bottom:0;top:auto}.nav-box>li.active>a,.nav-pills>li.active>a{background-color:var(--fs-color-primary);color:#fff;opacity:1}.nav-tabs>li.active>a{background-color:#fff}.nav-dark .nav.nav-tabs>li.active>a{color:#000}.nav-outline>li.active>a{border-color:currentColor;color:var(--fs-color-primary)}.tabbed-content{display:flex;flex-flow:row wrap}.tabbed-content .nav,.tabbed-content .tab-panels{width:100%}.tab-panels{padding-top:1em}.tab-panels .entry-content{padding:0}.tab-panels .panel:not(.active){display:block;height:0;opacity:0;overflow:hidden;padding:0;visibility:hidden}.tab-panels .panel.active{display:block!important}.nav-box>li,.nav-outline>li,.nav-pills>li,.nav-tabs>li{margin:0}.nav-box>li>a,.nav-pills>li>a{line-height:2.5em;padding:0 .75em}.nav-pills>li>a{border-radius:99px}.nav-tabs>li>a{background-color:rgba(0,0,0,.04);border-left:1px solid #ddd;border-right:1px solid #ddd;border-top:2px solid #ddd;padding-left:15px;padding-right:15px}.nav-tabs>li.active>a{border-top-color:var(--fs-color-primary)}.nav-dark .nav-tabs>li:not(.active)>a{background-color:hsla(0,0%,100%,.1);border-color:transparent}.tabbed-content .nav-tabs>li{margin:0 .1em -1px}.nav-tabs+.tab-panels{background-color:#fff;border:1px solid #ddd;padding:30px}.nav-outline>li>a{border:2px solid transparent;border-radius:32px;line-height:2.4em;padding:0 .75em;position:relative;z-index:10}@media(min-width:850px){.tabbed-content .nav-vertical{padding-top:0;width:25%}.nav-vertical+.tab-panels{border-left:1px solid #ddd;flex:1;margin-top:0!important;padding:0 30px 30px}.tabbed-content .nav-vertical.nav-outline{padding-right:15px}}@media(max-width:549px){.small-nav-collapse>li{margin:0!important;width:100%}.small-nav-collapse>li a{display:block;width:100%}.small-nav-touch{-webkit-overflow-scrolling:touch;flex-flow:nowrap;overflow-x:auto;overflow-y:hidden;white-space:nowrap}.small-nav-touch>li{display:inline-block}}.sidebar-menu-tabs__tab{background-color:rgba(0,0,0,.02);flex:1 0 50%;list-style-type:none;max-width:50%;text-align:center}.sidebar-menu-tabs__tab.active{background-color:rgba(0,0,0,.05)}.sidebar-menu-tabs__tab-text{flex:1 1 auto}.sidebar-menu-tabs.nav>li{margin:0}.sidebar-menu-tabs.nav>li>a{display:flex;padding:15px 10px}.toggle{box-shadow:none!important;color:currentColor;height:auto;line-height:1;margin:0 5px 0 0;opacity:.6;padding:0;width:45px}.toggle i{font-size:1.8em;transition:all .3s}.toggle:focus{color:currentColor}.toggle:hover{cursor:pointer;opacity:1}.active>.toggle{transform:rotate(-180deg)}.active>ul.children,.active>ul.sub-menu:not(.nav-dropdown){display:block!important}.widget .toggle{margin:0 0 0 5px;min-height:1em;width:1em}.widget .toggle i{font-size:1.2em;top:1px}@media(prefers-reduced-motion){.toggle{transition:none}}.nav.nav-vertical{flex-flow:column}.nav.nav-vertical li{list-style:none;margin:0;width:100%}.nav-vertical li li{font-size:1em;padding-left:.5em}.nav-vertical .image-column{display:none!important}.nav-vertical>li{align-items:center;display:flex;flex-flow:row wrap}.nav-vertical>li ul{width:100%}.nav-vertical li li.menu-item-has-children{margin-bottom:1em}.nav-vertical li li.menu-item-has-children:not(:first-child){margin-top:1em}.nav-vertical>li>a,.nav-vertical>li>ul>li a{align-items:center;display:flex;flex-grow:1;width:auto}.nav-vertical li li.menu-item-has-children>a{color:#000;font-size:.8em;font-weight:bolder;text-transform:uppercase}.nav-vertical>li.html{padding-bottom:1em;padding-top:1em}.nav-vertical>li>ul li a{color:#666;transition:color .2s}.nav-vertical>li>ul li a:hover{color:#111;opacity:1}.nav-vertical>li>ul{margin:0 0 2em;padding-left:1em}.nav .children{left:-99999px;opacity:0;position:fixed;transform:translateX(-10px);transition:background-color .6s,transform .3s,opacity .3s}@media(prefers-reduced-motion){.nav .children{opacity:1;transform:none}}.nav:not(.nav-slide) .active>.children{left:auto;opacity:1;padding-bottom:30px;position:inherit;transform:translateX(0)}.nav-sidebar.nav-vertical>li.menu-item.active,.nav-sidebar.nav-vertical>li.menu-item:hover{background-color:rgba(0,0,0,.05)}.nav-sidebar.nav-vertical>li+li{border-top:1px solid #ececec}.dark .nav-sidebar.nav-vertical>li+li,.dark .nav-vertical-fly-out>li+li{border-color:hsla(0,0%,100%,.2)}.nav-vertical>li+li{border-top:1px solid #ececec}.nav-vertical-fly-out>li+li{border-color:#ececec}.nav-vertical.nav-line>li>a:before{height:100%;left:auto;right:-2px;width:3px;z-index:1}.nav-vertical.nav-tabs>li>a{border:0}.nav-vertical.nav-tabs>li.active>a{border-left:3px solid var(--fs-color-primary)}.text-center .toggle{margin-left:-35px}.text-center .nav-vertical li{border:0}.text-center .nav-vertical li li,.text-center.nav-vertical li li{padding-left:0}@media screen and (max-width:549px){.small-nav-vertical{flex-flow:column;margin-bottom:20px}.small-nav-vertical>li{border-bottom:1px solid #ececec;list-style:none;margin:0!important;width:100%}}.nav-vertical .mega-menu-item{width:100%}.nav-vertical .header-button,.nav-vertical .social-icons{display:block;width:100%}@media screen and (min-width:849px){.col-divided>.col-inner>.nav-wrapper>.nav-vertical{width:calc(100% + 31px)}}.header-vertical-menu__opener{align-items:center;background-color:var(--fs-color-primary);display:flex;flex-direction:row;font-size:.9em;font-weight:600;height:50px;justify-content:space-between;padding:12px 15px;width:250px}.header-vertical-menu__opener .icon-menu{font-size:1.7em;margin-right:10px}.header-vertical-menu__tagline{display:block;font-size:.9em;font-weight:400;line-height:1.3}.header-vertical-menu__title{flex:1 1 auto}.header-vertical-menu__fly-out{background-color:#fff;opacity:0;position:absolute;visibility:hidden;width:250px;z-index:9}.header-vertical-menu__fly-out .nav-vertical-fly-out{align-items:stretch;display:flex;flex-direction:column}.header-vertical-menu__fly-out .nav-vertical-fly-out>li.menu-item{list-style:none;margin:0;position:static}.header-vertical-menu__fly-out .nav-vertical-fly-out>li.menu-item[class*=" label-"]>a:after,.header-vertical-menu__fly-out .nav-vertical-fly-out>li.menu-item[class^=label-]>a:after{order:2;top:0}.header-vertical-menu__fly-out .nav-vertical-fly-out>li.menu-item>a>i.icon-angle-down{margin-left:auto;margin-right:-.1em;order:3;transform:rotate(-90deg)}.header-vertical-menu__fly-out .nav-vertical-fly-out>li.menu-item>a{align-items:center;display:flex;padding:10px 15px}.header-vertical-menu__fly-out .nav-vertical-fly-out li.has-icon-left>a>i,.header-vertical-menu__fly-out .nav-vertical-fly-out li.has-icon-left>a>img,.header-vertical-menu__fly-out .nav-vertical-fly-out li.has-icon-left>a>svg{margin-right:10px}.header-vertical-menu__fly-out .nav-top-link{font-size:.9em;order:1}.header-vertical-menu__fly-out .current-dropdown .nav-dropdown{left:100%!important;top:0}.header-vertical-menu__fly-out .current-dropdown.menu-item .nav-dropdown{min-height:100%}.header-vertical-menu__fly-out--open{opacity:1;visibility:visible}.sticky-hide-on-scroll--active .header-vertical-menu__fly-out,.stuck .header-vertical-menu__fly-out{opacity:0;visibility:hidden}.header-wrapper:not(.stuck) .header-vertical-menu__fly-out{transition:opacity .25s,visibility .25s}.header-vertical-menu__fly-out.has-shadow{box-shadow:1px 1px 15px rgba(0,0,0,.15)}.header-vertical-menu:hover .header-vertical-menu__fly-out{opacity:1;visibility:visible}.badge-container{margin:30px 0 0}.badge{backface-visibility:hidden;display:table;height:2.8em;pointer-events:none;width:2.8em;z-index:20}.badge.top{left:0}.badge-inner{background-color:var(--fs-color-primary);color:#fff;display:table-cell;font-weight:bolder;height:100%;line-height:.85;padding:2px;text-align:center;transition:background-color .3s,color .3s,border .3s;vertical-align:middle;white-space:nowrap;width:100%}.badge-small{height:2.3em;width:2.3em}.badge-small .badge-inner{line-height:.7}.badge+.badge{height:2.5em;opacity:.9;width:2.5em}.badge+.badge+.badge{opacity:.8}.badge-frame .badge-inner,.badge-outline .badge-inner{background-color:#fff;border:2px solid;color:var(--fs-color-primary)}.has-hover:hover .badge-outline .badge-inner{background-color:var(--fs-color-primary);border-color:var(--fs-color-primary);color:#fff}.badge-circle,.badge-outline{margin-left:-.4em}.badge-circle-inside{margin-left:1em}.badge-circle+.badge{margin-left:-.4em;margin-top:-.4em}.badge-circle .badge-inner,.badge-circle-inside .badge-inner{border-radius:999px}.badge-frame .badge-inner,.widget .badge-outline .badge-inner{background-color:transparent}.badge-frame{height:2em;margin-left:-4px}.widget .badge{margin:0!important}.dark .widget .badge-outline .badge-inner{color:#fff;opacity:.7}.row-collapse .badge-circle{margin-left:15px}.banner{background-color:var(--fs-color-primary);min-height:30px;position:relative;width:100%}.banner-bg{overflow:hidden}.banner-layers{height:100%;max-height:100%;position:relative}@media(max-width:549px){.banner-layers{-webkit-overflow-scrolling:touch;overflow:auto}}.banner-layers>*{position:absolute!important}.dark .banner a{color:#fff}.banner-bg :is(img,picture,video){height:100%;left:0;-o-object-fit:cover;object-fit:cover;-o-object-position:50% 50%;object-position:50% 50%;position:absolute;top:0;width:100%}@media(min-width:549px){.has-video .bg{display:none}}.box{margin:0 auto;position:relative;width:100%}.box>a{display:block;width:100%}.box a{display:inline-block}.box,.box-image,.box-text{transition:opacity .3s,transform .3s,background-color .3s}.box-image>a,.box-image>div>a{display:block}.box-image>a:focus-visible,.box-image>div>a:focus-visible{outline-offset:-2px}.box-text{font-size:.9em;padding-bottom:1.4em;padding-top:.7em;position:relative;width:100%}.has-shadow .box-text{padding-left:1.2em;padding-right:1.2em}@media(max-width:549px){.box-text{font-size:85%}}.box-image{height:auto;margin:0 auto;overflow:hidden;position:relative}.box-image[style*=-radius]{-webkit-mask-image:-webkit-radial-gradient(#fff,#000)}.box-image-inner{overflow:hidden;position:relative;z-index:0}.box-text.text-center{padding-left:10px;padding-right:10px}.box-image img{margin:0 auto;max-width:100%;width:100%}.box-label{overflow:hidden}.box-label .box-text.text-center{left:50%;margin:10% 0;transform:translateX(-50%)}.box-label .box-text.text-right{left:auto;right:0}.box-label .box-text{background-color:#fff;bottom:0;box-shadow:1px 1px 3px 0 rgba(0,0,0,.1);margin:10%;opacity:.95;padding:.5em 1.5em .55em;position:absolute;width:auto}.box-label:hover .box-text{opacity:1}.box-badge{overflow:hidden}.box-badge .box-text{background-color:hsla(0,0%,100%,.95);bottom:15%;padding:.8em 1em 1em;position:absolute;transition:background .3s;z-index:1}.dark .box-badge .box-text{background-color:rgba(0,0,0,.95)}.box-badge:hover .box-text{background-color:var(--fs-color-primary)}.box-bounce .box-text{padding:15px 15px 20px;z-index:1}.box-bounce:hover .box-text{background-color:#fff;transform:translateY(-15px)}.dark .box-bounce:hover .box-text{background-color:#222}.box-bounce:hover .box-image{transform:translateY(-5px)}.box-push .box-text{background-color:hsla(0,0%,100%,.95);margin:-15% auto 0;max-width:85%;padding:15px 20px}.box-overlay .box-text,.box-shade .box-text{bottom:0;max-height:100%;padding-left:1.5em;padding-right:1.5em;position:absolute;width:100%}.box-overlay.dark .box-text,.box-shade.dark .box-text{text-shadow:1px 1px 1px rgba(0,0,0,.5)}.box-none .box-text{display:none!important}.has-post-icon:hover .box-overlay .box-text,.has-post-icon:hover .box-shade .box-text{opacity:0!important}.box-text-middle.box-overlay .box-text,.box-text-middle.box-shade .box-text{bottom:auto!important;left:0;position:absolute;right:0;top:50%;transform:translateY(-50%);z-index:16}.box-text-top.box-overlay .box-text,.box-text-top.box-shade .box-text{bottom:auto!important;left:0;position:absolute;right:0;top:0;z-index:16}.box-vertical .box-text-middle .box-text{bottom:auto;position:relative;top:auto;transform:translateY(0)}.has-box-vertical .col{max-width:100%!important;width:100%!important}@media screen and (max-width:549px){.box-vertical .box-image{width:100%!important}}@media screen and (min-width:550px){.box-list-view .col{flex-basis:100%!important;max-width:100%!important}.box-list-view .box,.box-vertical{display:table;width:100%}.box-list-view .box .image-right,.box-vertical .image-right{direction:rtl}.box-list-view .box .box-image,.box-list-view .box .box-text,.box-vertical .box-image,.box-vertical .box-text{direction:ltr;display:table-cell;vertical-align:middle}.box-list-view .box .box-text,.box-vertical .box-text{padding-left:1.5em;padding-right:1.5em}.box-list-view .box .box-image,.box-vertical .box-image{width:50%}.box-list-view .box.align-top .box-text,.box-vertical.align-top .box-text{vertical-align:top}}.button,button,input[type=button],input[type=reset],input[type=submit]{background-color:transparent;border:1px solid transparent;border-radius:0;box-sizing:border-box;color:currentColor;cursor:pointer;display:inline-block;font-size:.97em;font-weight:bolder;letter-spacing:.03em;line-height:2.4em;margin-right:1em;margin-top:0;max-width:100%;min-height:2.5em;padding:0 1.2em;position:relative;text-align:center;text-decoration:none;text-rendering:optimizeLegibility;text-shadow:none;text-transform:uppercase;transition:transform .3s,border .3s,background .3s,box-shadow .3s,opacity .3s,color .3s;vertical-align:middle}.button span{display:inline-block;line-height:1.6}.button.is-outline{line-height:2.19em}.nav>li>a.button,.nav>li>a.button:hover{padding-bottom:0;padding-top:0}.nav>li>a.button:hover{color:#fff}.button,input[type=button].button,input[type=reset].button,input[type=submit],input[type=submit].button{background-color:var(--fs-color-primary);border-color:rgba(0,0,0,.05);color:#fff}.button.is-outline,input[type=button].is-outline,input[type=reset].is-outline,input[type=submit].is-outline{background-color:transparent;border:2px solid}.button:hover,.dark .button.is-form:hover,input[type=button]:hover,input[type=reset]:hover,input[type=submit]:hover{box-shadow:inset 0 0 0 100px rgba(0,0,0,.2);color:#fff;opacity:1;outline:none}.button.is-link,.button.is-underline{background-color:transparent!important;border-color:transparent!important;padding-left:.15em;padding-right:.15em}.button.is-underline:before{background-color:currentColor;bottom:0;content:"";height:2px;left:20%;opacity:.3;position:absolute;transition:all .3s;width:60%}.button.is-underline:hover:before{left:0;opacity:1;width:100%}.is-link,.is-underline{color:#666}.dark .button.is-link:hover,.dark .button.is-underline:hover{color:#fff;opacity:.8}.button.is-link:hover,.button.is-underline:hover{box-shadow:none;color:#333}.is-form,button.is-form,button[type=submit].is-form,input[type=button].is-form,input[type=reset].is-form,input[type=submit].is-form{background-color:#f9f9f9;border:1px solid #ddd;color:#666;font-weight:400;overflow:hidden;position:relative;text-shadow:1px 1px 1px #fff;text-transform:none}.button.is-form:hover{background-color:#f1f1f1;color:#000}.dark .button,.dark input[type=button],.dark input[type=reset],.dark input[type=submit]{color:#fff}.dark .button.is-form,.dark input[type=button].is-form,.dark input[type=reset].is-form,.dark input[type=submit].is-form{color:#000}.is-round{border-radius:99px}.is-bevel,.is-gloss,.is-shade{overflow:hidden}.is-bevel:after,.is-gloss:after,.is-shade:after{box-shadow:inset 0 1.2em 0 0 hsla(0,0%,100%,.1);content:"";height:100%;left:-25%;position:absolute;top:0;width:150%}.is-shade:after{box-shadow:inset 1px 1px 0 0 hsla(0,0%,100%,.1),inset 0 2em 15px 0 hsla(0,0%,100%,.2)}.is-bevel:after{box-shadow:inset -.01em -.1em 0 0 rgba(0,0,0,.15);left:0;width:100%}.is-outline{color:silver}.is-outline:hover{box-shadow:none!important}.primary,input[type=submit],input[type=submit].button{background-color:var(--fs-color-primary)}.primary.is-link,.primary.is-outline,.primary.is-underline{color:var(--fs-color-primary)}.is-outline:hover,.primary.is-outline:hover{background-color:var(--fs-color-primary);border-color:var(--fs-color-primary);color:#fff}.success{background-color:var(--fs-color-success)}.success.is-link,.success.is-outline,.success.is-underline{color:var(--fs-color-success)}.success.is-outline:hover{background-color:var(--fs-color-success);border-color:var(--fs-color-success);color:#fff}.white{background-color:#fff!important;color:#666!important}.white.button.is-outline{background-color:transparent;color:currentColor!important}.white.is-link,.white.is-outline,.white.is-underline{background-color:transparent!important;color:#fff!important}.white.is-outline:hover{background-color:#fff!important;border-color:#fff;color:#666!important}.button.alt,.button.checkout,.checkout-button,.secondary{background-color:var(--fs-color-secondary)}.secondary.is-link,.secondary.is-outline,.secondary.is-underline{color:var(--fs-color-secondary)}.secondary.is-outline:hover{background-color:var(--fs-color-secondary);border-color:var(--fs-color-secondary);color:#fff}a.primary:not(.button),a.secondary:not(.button){background-color:transparent}.alert{background-color:var(--fs-color-alert)}.alert.is-link,.alert.is-outline,.alert.is-underline{color:var(--fs-color-alert)}.alert.is-outline:hover{background-color:var(--fs-color-alert);border-color:var(--fs-color-alert);color:#fff}.text-center .button:first-of-type{margin-left:0!important}.text-center .button:last-of-type,.text-right .button:last-of-type{margin-right:0!important}.button.disabled,.button[disabled],button.disabled,button[disabled]{opacity:.6}.header-buttons .button{margin-bottom:0;margin-right:.65em}.header-button{display:inline-block}.header-button .plain.is-outline:not(:hover){color:#999}.nav-dark .header-button .plain.is-outline:not(:hover){color:#fff}.header-button .button{margin:0}.scroll-for-more{margin-left:0!important}.scroll-for-more:not(:hover){opacity:.7}.flex-col .button,.flex-col button,.flex-col input{margin-bottom:0}code{background:#f1f1f1;border:1px solid #e1e1e1;border-radius:4px;font-size:.9em;margin:0 .2rem;padding:.2rem .5rem}pre>code{display:block;padding:1rem 1.5rem;white-space:pre}.dark code{background-color:rgba(0,0,0,.5);border-color:#000}.is-divider{background-color:rgba(0,0,0,.1);display:block;height:3px;margin:1em 0;max-width:30px;width:100%}.widget .is-divider{margin-top:.66em}.dark .is-divider{background-color:hsla(0,0%,100%,.3)}form{margin-bottom:0}.select-resize-ghost,.select2-container .select2-choice,.select2-container .select2-selection,input[type=date],input[type=email],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url],select,textarea{background-color:#fff;border:1px solid #ddd;border-radius:0;box-shadow:inset 0 1px 2px rgba(0,0,0,.1);box-sizing:border-box;color:#333;font-size:.97em;height:2.507em;max-width:100%;padding:0 .75em;transition:color .3s,border .3s,background .3s,opacity .3s;vertical-align:middle;width:100%}@media(max-width:849px){.select-resize-ghost,.select2-container .select2-choice,.select2-container .select2-selection,input[type=date],input[type=email],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url],select,textarea{font-size:1rem}}input:hover,select:hover,textarea:hover{box-shadow:inset 0 -1.8em 1em 0 transparent}input[type=email],input[type=number],input[type=search],input[type=tel],input[type=text],input[type=url],textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none}textarea{min-height:120px;padding-top:.7em}input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,select:focus,textarea:focus{background-color:#fff;box-shadow:0 0 5px #ccc;color:#333;opacity:1!important;outline:0}label,legend{display:block;font-size:.9em;font-weight:700;margin-bottom:.4em}legend{border-bottom:1px solid #f1f1f1;font-size:1em;font-weight:700;margin:30px 0 15px;padding-bottom:10px;text-transform:uppercase;width:100%}fieldset{border-width:0;padding:0}input[type=checkbox],input[type=radio]{display:inline;font-size:16px;margin-right:10px}label>.label-body{display:inline-block;font-weight:400;margin-left:.5em}abbr[title=required]{color:var(--fs-color-alert)}input[type=checkbox]+label,input[type=radio]+label{display:inline}.select-resize-ghost,.select2-container .select2-choice,.select2-container .select2-selection,select{-webkit-appearance:none;-moz-appearance:none;background-color:#fff;background-image:url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-position:right .45em top 50%;background-repeat:no-repeat;background-size:auto 16px;border-radius:0;box-shadow:inset 0 -1.4em 1em 0 rgba(0,0,0,.02);display:block;padding-right:1.4em}.select-resize-ghost{display:inline-block;opacity:0;position:absolute;width:auto}select.resize-select{width:55px}.select2-selection__arrow b{border-color:transparent!important}.select2-container .selection .select2-selection--multiple{background-image:none;height:auto;line-height:1.7em;padding:10px}.select2-container .selection .select2-selection--multiple .select2-selection__choice{padding:5px}@media (-ms-high-contrast:none),screen and (-ms-high-contrast:active){select::-ms-expand{display:none}select:focus::-ms-value{background:transparent;color:currentColor}}.form-flat input:not([type=submit]),.form-flat select,.form-flat textarea{background-color:rgba(0,0,0,.03);border-color:rgba(0,0,0,.09);border-radius:99px;box-shadow:none;color:currentColor!important}.form-flat button,.form-flat input{border-radius:99px}.form-flat textarea{border-radius:15px}.flex-row.form-flat .flex-col,.form-flat .flex-row .flex-col{padding-right:4px}.dark .form-flat input:not([type=submit]),.dark .form-flat select,.dark .form-flat textarea,.nav-dark .form-flat input:not([type=submit]),.nav-dark .form-flat select,.nav-dark .form-flat textarea{background-color:hsla(0,0%,100%,.2)!important;border-color:hsla(0,0%,100%,.09);color:#fff}.dark .form-flat select option{color:#333}.dark .form-flat select,.nav-dark .form-flat select{background-image:url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E")}.dark .form-flat input::-webkit-input-placeholder,.nav-dark .form-flat input::-webkit-input-placeholder{color:#fff}.form-flat .button.icon{background-color:transparent!important;border-color:transparent!important;box-shadow:none;color:currentColor!important}.form-minimal input:not([type=submit]),.form-minimal select,.form-minimal textarea{background-color:transparent;box-shadow:none}.form-minimal.quantity .qty{border-left:0;border-right:0;max-width:2em}.dark .form-minimal.quantity .qty{color:#fff}.woocommerce-invalid input,input.wpcf7-not-valid{border-color:var(--fs-color-alert);color:var(--fs-color-alert)}.woocommerce-invalid select{border-color:var(--fs-color-alert)}.woocommerce-invalid input.input-checkbox{outline:1px solid var(--fs-color-alert);outline-offset:1px}.select2-container{text-align:left}.form-row .select2-container{margin-bottom:1em}.select2-search__field{margin-bottom:0}.select2-container--default .select2-selection--single .select2-selection__arrow{width:30px}.select2-container .select2-choice>.select2-chosen,.select2-container .select2-selection--single .select2-selection__rendered,.select2-selection{line-height:2.507em;padding:0}.select2-container--default .select2-selection--single .select2-selection__arrow{height:2.507em}.fl-wrap{position:relative}.loading-site .fl-labels label[for]:first-child{display:none}.fl-labels .fl-wrap label[for]:first-child{font-size:12px;font-weight:400;left:1.1em;line-height:1;opacity:0;pointer-events:none;position:absolute;top:.5em;transition:all .3s;white-space:nowrap}.dark .fl-wrap label{color:#000}.fl-wrap.fl-is-active>label[for]:first-child{opacity:.8;z-index:1}.fl-labels .form-row input:not([type=checkbox]),.fl-labels .form-row select,.fl-labels .form-row textarea{height:3.0084em;transition:padding .3s}.form-row .fl-is-active input,.form-row .fl-is-active textarea{padding-bottom:.5em;padding-top:1.1em}.form-row .fl-is-active select{padding-bottom:.4em;padding-top:1.1em}.icon-box .icon-box-img{margin-bottom:1em;max-width:100%;position:relative}.flickity-slider>.icon-box,.slider>.icon-box{padding-left:3%!important;padding-right:3%!important}.icon-box-img img,.icon-box-img svg{padding-top:.2em;width:100%}.icon-box-img svg{fill:currentColor;height:100%;transition:all .3s;width:100%}.icon-box-img svg path{fill:currentColor}.icon-box:hover .has-icon-bg i,.icon-box:hover .has-icon-bg svg,.icon-box:hover .has-icon-bg svg path{fill:#fff}.has-icon-bg .icon{height:0;overflow:hidden;padding-top:100%;position:relative}.has-icon-bg .icon .icon-inner{border:2px solid;border-radius:100%;color:var(--fs-color-primary);height:100%;position:absolute;top:0;transition:all .3s;width:100%}.icon-box:hover .has-icon-bg .icon .icon-inner{background-color:currentColor}.has-icon-bg .icon i,.has-icon-bg .icon img,.has-icon-bg .icon svg{left:0;margin:0 20%;-o-object-fit:cover;object-fit:cover;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:60%}.icon-box-left .has-icon-bg .icon{position:absolute;width:100%}.icon-box-left,.icon-box-right{display:flex;flex-flow:row wrap;width:100%}.icon-box-left .icon-box-img,.icon-box-right .icon-box-img{flex:0 0 auto;margin-bottom:0;max-width:200px}.icon-box-left .icon-box-text,.icon-box-right .icon-box-text{flex:1 1 0px}.icon-box-right .icon-box-text{order:-1}.icon-box-left .icon-box-img+.icon-box-text{padding-left:1em}.icon-box-right .icon-box-img+.icon-box-text{padding-right:1em}.icon-box-center .icon-box-img{margin:0 auto 1em}.links>li>a:before,i[class*=" icon-"],i[class^=icon-]{speak:none!important;display:inline-block;font-display:block;font-family:fl-icons!important;font-style:normal!important;font-variant:normal!important;font-weight:400!important;line-height:1.2;margin:0;padding:0;position:relative;text-transform:none!important}.widget-title i{margin-right:4px;opacity:.35}.button i,button i{top:-1.5px;vertical-align:middle}.button.open-video i{top:-.027em}a.icon-remove,a.remove{border:2px solid;border-radius:100%;color:#ccc;display:block;font-size:15px!important;font-weight:700;height:24px;line-height:19px!important;text-align:center;width:24px}a.icon:not(.button),button.icon:not(.button){font-family:sans-serif;font-size:1.2em;margin-left:.25em;margin-right:.25em}.header a.icon:not(.button){margin-left:.3em;margin-right:.3em}.header .nav-small a.icon:not(.button){font-size:1em}.button.icon{display:inline-block;margin-left:.12em;margin-right:.12em;min-width:2.5em;padding-left:.6em;padding-right:.6em}.button.icon i{font-size:1.2em}.button.icon i+span{padding-right:.5em}.button.icon.is-small{border-width:1px}.button.icon.is-small i{top:-1px}.button.icon.circle,.button.icon.round{padding-left:0;padding-right:0}.button.icon.circle>span,.button.icon.round>span{margin:0 8px}.button.icon.circle>span+i,.button.icon.round>span+i{margin-left:-4px}.button.icon.circle>i,.button.icon.round>i{margin:0 8px}.button.icon.circle>i+span,.button.icon.round>i+span{margin-left:-4px}.button.icon.circle>i:only-child,.button.icon.round>i:only-child{margin:0}.nav>li>a>i{font-size:20px;transition:color .3s;vertical-align:middle}.nav>li>a>i+span{margin-left:5px}.nav li.has-icon-left>a>i,.nav li.has-icon-left>a>img,.nav li.has-icon-left>a>svg{margin-right:5px}.nav>li>a>span+i{margin-left:5px}.nav-small>li>a>i{font-size:1em}.nav>li>a>i.icon-search{font-size:1.2em}.nav>li>a>i.icon-menu{font-size:1.9em}.nav>li.has-icon>a>i{min-width:1em}.nav-vertical>li>a>i{font-size:16px;opacity:.6}.header-button a.icon:not(.button){display:inline-block;padding:6px 0}.header-button a.icon:not(.button) i{font-size:24px}.header-button a.icon:not(.button) i.icon-search{font-size:16px}.nav-small .header-button a.icon:not(.button){padding:3px 0}.button:not(.icon)>i{margin-left:-.15em;margin-right:.4em}.button:not(.icon)>span+i{margin-left:.4em;margin-right:-.15em}.has-dropdown .icon-angle-down{font-size:16px;margin-left:.2em;opacity:.6}.overlay-icon{background-color:rgba(0,0,0,.2);border:2px solid #fff;border-radius:100%;color:#fff;height:3em;line-height:2.8em;opacity:.8;text-align:center;transition:transform .2s,opacity .2s;width:3em}.overlay-icon i{font-size:1.3em;top:3px;transition:color .3s}.has-hover:hover .overlay-icon{opacity:1;transform:scale(1.15)}.box-overlay .overlay-icon,.box-shade .overlay-icon{opacity:0}.image-icon{display:inline-block;height:auto;position:relative;vertical-align:middle}span+.image-icon{margin-left:10px}.image-icon img{max-width:32px;min-width:100%}.nav-small .image-icon{height:16px;margin:0 5px;width:16px}.nav-small .image-icon img{vertical-align:top}[data-icon-label]{position:relative}[data-icon-label="0"]:after{display:none}[data-icon-label]:after{background-color:var(--fs-color-secondary);border-radius:99px;box-shadow:1px 1px 3px 0 rgba(0,0,0,.3);color:#fff;content:attr(data-icon-label);font-family:Arial,Sans-serif!important;font-size:11px;font-style:normal;font-weight:bolder;height:17px;letter-spacing:-.5px;line-height:17px;min-width:17px;opacity:.9;padding-left:2px;padding-right:2px;position:absolute;right:-10px;text-align:center;top:-10px;transition:transform .2s;z-index:1}.nav-small [data-icon-label]:after{font-size:10px;height:13px;line-height:13px;min-width:13px;right:-10px;top:-4px}.button [data-icon-label]:after{right:-12px;top:-12px}.reveal-icon i{width:1em}.reveal-icon i,.reveal-icon span{display:inline-block;transition:opacity .3s,transform .3s}.reveal-icon span{transform:translateX(.75em)}.reveal-icon i+span{transform:translateX(-.75em)}.reveal-icon:hover>span{transform:translateX(0)}.reveal-icon:not(:hover) i{opacity:0}img{opacity:1;transition:opacity 1s}.col-inner>.img:not(:last-child),.col>.img:not(:last-child){margin-bottom:1em}.img,.img .img-inner{position:relative}.img .img-inner{overflow:hidden}.img,.img img{width:100%}.overlay{background-color:rgba(0,0,0,.15);height:100%;left:-1px;pointer-events:none;right:-1px;top:0;transition:transform .3s,opacity .6s}.img .caption,.overlay{bottom:0;position:absolute}.img .caption{background-color:rgba(0,0,0,.3);color:#fff;font-size:14px;max-height:100%!important;overflow-y:auto;padding:4px 10px;transform:translateY(100%);transition:transform .5s;width:100%}.img .caption-show,.img:hover .caption{transform:translateY(0)}.lazy-load{background-color:rgba(0,0,0,.03)}.has-format,.image-cover,.video-fit{background-position:50% 50%;background-size:cover;height:auto;overflow:hidden;padding-top:100%;position:relative}.video-fit{padding-top:56.5%}.has-equal-box-heights .box-image img,.has-format img,.image-cover img,.video-fit iframe,.video-fit video,img.back-image{bottom:0;font-family:"object-fit: cover;";height:100%;left:0;-o-object-fit:cover;object-fit:cover;-o-object-position:50% 50%;object-position:50% 50%;position:absolute;right:0;top:0;width:100%}.has-equal-box-heights .box-image{padding-top:100%}.video-fit iframe{-o-object-fit:fill;object-fit:fill}.image-tools{padding:10px;position:absolute}.image-tools a:last-child{margin-bottom:0}.image-tools a.button{display:block}.image-tools.bottom.left{padding-right:0;padding-top:0}.image-tools.top.right{padding-bottom:0;padding-left:0}.image-tools .cart-icon{bottom:100%;left:10px;margin:5px;position:absolute}.image-tools .wishlist-button:hover{background-color:var(--fs-color-alert);border-color:var(--fs-color-alert)}@media only screen and (max-device-width:1024px){.image-tools{opacity:1!important;padding:5px}}.overlay-tools{margin-top:10px}.overlay-tools a{background-color:rgba(0,0,0,.4);border-radius:99px;display:inline-block;font-size:.8em;margin-right:5px;padding:2px 10px 3px;text-shadow:none;transition:all .3s}.overlay-tools a:hover{background-color:#fff;color:#000!important}.tag-label{background-color:rgba(0,0,0,.4);border-radius:2px;color:#fff;display:inline-block;font-size:.65em;font-weight:700;letter-spacing:1.1px;line-height:1;padding:2px 5px;text-transform:uppercase;transition:background-color .3s,opacity .3s}.has-hover:hover .tag-label{background-color:var(--fs-color-secondary);opacity:1}.lightbox-content{background-color:#fff;box-shadow:3px 3px 20px 0 rgba(0,0,0,.15);margin:0 auto;max-width:875px;position:relative}.lightbox-content .lightbox-inner{padding:30px 20px}.pswp__bg{background-color:rgba(0,0,0,.6)}@media(min-width:549px){.pswp__top-bar{background-color:transparent!important}}.pswp__item{opacity:0;transition:opacity .5s}.pswp--visible .pswp__item{opacity:1}.pswp__caption__center{text-align:center}.mfp-bg{background:#0b0b0b;height:100%;left:0;opacity:0;overflow:hidden;position:fixed;top:0;transition:opacity .25s;width:100%;z-index:1042}.mfp-bg.mfp-ready{opacity:.6}.mfp-bg.mfp-removing{opacity:0!important}.mfp-wrap{-webkit-backface-visibility:hidden;outline:none!important;position:fixed;z-index:1043}.mfp-container,.mfp-wrap{height:100%;left:0;top:0;width:100%}.mfp-container{box-sizing:border-box;padding:30px;position:absolute;text-align:center}.mfp-container:before{content:"";display:inline-block;height:100%;vertical-align:middle}.mfp-image-holder{padding:40px 6.66%}.mfp-align-top .mfp-container:before{display:none}.mfp-content{display:inline-block;margin:0 auto;max-width:100%;opacity:0;position:relative;text-align:left;transform:translateY(-30px);transition:transform .5s,opacity .3s;vertical-align:middle;z-index:1045}.mfp-content-inner{box-shadow:1px 1px 5px 0 rgba(0,0,0,.2)}.mfp-ready .mfp-content{opacity:1;transform:translateY(0)}.mfp-ready.mfp-removing .mfp-content{opacity:0}.mfp-ajax-holder .mfp-content,.mfp-inline-holder .mfp-content{cursor:auto;width:100%}.mfp-ajax-cur{cursor:progress}.mfp-zoom-out-cur,.mfp-zoom-out-cur .mfp-image-holder .mfp-close{cursor:zoom-out}.mfp-zoom{cursor:pointer;cursor:zoom-in}.mfp-auto-cursor .mfp-content{cursor:auto}.mfp-arrow,.mfp-close,.mfp-counter,.mfp-preloader{-webkit-user-select:none;-moz-user-select:none;user-select:none}.mfp-loading.mfp-figure{display:none}.mfp-hide{display:none!important}.mfp-preloader{color:#ccc;left:8px;margin-top:-.8em;position:absolute;right:8px;text-align:center;top:50%;width:auto;z-index:1044}.mfp-preloader a{color:#ccc}.mfp-preloader a:hover{color:#fff}.mfp-s-error .mfp-content,.mfp-s-ready .mfp-preloader{display:none}.mfp-close{-webkit-backface-visibility:hidden;box-shadow:none;color:#fff;cursor:pointer;font-family:Arial,monospace;font-size:40px;font-style:normal;font-weight:300;height:40px;line-height:40px;margin:0!important;min-height:0;mix-blend-mode:difference;opacity:0;outline:none;padding:0;position:fixed;right:0;text-align:center;text-decoration:none;top:0;transition:opacity .6s,transform .3s;transition-delay:.15s;width:40px;z-index:1046}.mfp-close svg{pointer-events:none}.mfp-content .mfp-close{position:absolute}.mfp-ready .mfp-close{opacity:.6}.mfp-removing .mfp-close{display:none!important}.mfp-close:hover{opacity:1}.mfp-close-btn-in .mfp-close{color:currentColor;top:0!important}.mfp-counter{color:#ccc;font-size:12px;line-height:18px;position:absolute;right:0;top:0}.mfp-arrow{color:#fff;height:50px;margin:0;mix-blend-mode:difference;opacity:.6;position:fixed;text-align:center;top:50%;width:50px;z-index:1046}.mfp-arrow i{font-size:42px!important;pointer-events:none}.mfp-arrow:hover{opacity:1}.mfp-arrow:active{top:50.1%}.mfp-arrow-left{left:0;transform:translateX(100%)}.mfp-arrow-right{right:0;transform:translateX(-100%)}.mfp-ready .mfp-arrow-left,.mfp-ready .mfp-arrow-right{transform:translateX(0)}.mfp-iframe-holder{padding-bottom:40px;padding-top:40px}.mfp-iframe-holder .mfp-content,.mfp-inline-holder .ux-mfp-inline-content--video{line-height:0;max-width:900px;width:100%}.mfp-iframe-holder .mfp-close{top:-40px}.mfp-iframe-scaler{height:0;overflow:hidden;padding-top:56.25%;width:100%}.mfp-iframe-scaler iframe{display:block;height:100%;left:0;position:absolute;top:0;width:100%}.mfp-iframe-scaler iframe,.mfp-inline-holder .ux-mfp-inline-content--video{background:#000;box-shadow:0 0 8px rgba(0,0,0,.6)}.mfp-inline-holder .ux-mfp-inline-content,img.mfp-img{margin:0 auto}img.mfp-img{backface-visibility:hidden;display:block;height:auto;max-height:calc(100vh - 80px);max-width:100%;padding:0 0 40px;width:auto}.mfp-figure,img.mfp-img{line-height:0}.mfp-figure:after{background:#444;bottom:40px;box-shadow:0 0 8px rgba(0,0,0,.6);content:"";display:block;height:auto;left:0;position:absolute;right:0;top:0;width:auto;z-index:-1}.mfp-figure small{color:#bdbdbd;display:block;font-size:12px;line-height:14px}.mfp-figure figure{margin:0}.mfp-bottom-bar{cursor:auto;left:0;margin-top:-36px;position:absolute;top:100%;width:100%}.mfp-title{word-wrap:break-word;color:#f3f3f3;font-size:11px;line-height:18px;padding-right:36px;text-align:left}.mfp-title a{color:#f3f3f3;text-decoration:underline}.mfp-title a:hover{color:#f3f3f3;opacity:.8;text-decoration:none}.mfp-image-holder .mfp-content{max-width:100%}.mfp-gallery .mfp-image-holder .mfp-figure{cursor:pointer}@media screen and (max-height:300px),screen and (max-width:800px)and (orientation:landscape){.mfp-img-mobile .mfp-image-holder{padding-left:0;padding-right:0}.mfp-img-mobile img.mfp-img{padding:0}.mfp-img-mobile .mfp-figure:after{bottom:0;top:0}.mfp-img-mobile .mfp-figure small{display:inline;margin-left:5px}.mfp-img-mobile .mfp-bottom-bar{background:rgba(0,0,0,.6);bottom:0;box-sizing:border-box;margin:0;padding:3px 5px;position:fixed;top:auto}.mfp-img-mobile .mfp-bottom-bar:empty{padding:0}.mfp-img-mobile .mfp-counter{right:5px;top:3px}}@media(max-width:849px){:host.body-scroll-lock--active .mfp-wrap{overflow:auto;position:fixed!important}}@media(prefers-reduced-motion){.mfp-bg,.mfp-close,.mfp-content{transition:opacity .3s}}.loading-spin,.processing{position:relative}.loading-spin,.processing:before{animation:spin .6s linear infinite;border-bottom:3px solid rgba(0,0,0,.1)!important;border-left:3px solid var(--fs-color-primary);border-radius:50%;border-right:3px solid rgba(0,0,0,.1)!important;border-top:3px solid rgba(0,0,0,.1)!important;content:"";font-size:10px;height:30px;margin:0 auto;opacity:.8;pointer-events:none;text-indent:-9999em;width:30px}.box-image.processing:before,.dark .loading-spin,.dark .processing:before,.dark.loading-spin,.dark.processing:before{border:3px solid rgba(0,0,0,.1)!important;border-left-color:#fff!important}.box-image.processing:after{background-color:#000;bottom:0;content:"";left:0;opacity:.1;position:absolute;right:0;top:0}.box-image.processing .image-tools{opacity:0!important}.woocommerce-checkout.processing:before{position:fixed}.loading-spin.centered,.processing:before{left:50%;margin-left:-15px;margin-top:-15px;position:absolute;top:50%;z-index:99}.loading-spin{border-radius:50%;height:30px;width:30px}.button.loading{color:hsla(0,0%,100%,.05);opacity:1!important;pointer-events:none!important;position:relative}.button.loading:after{animation:spin .5s linear infinite;border:2px solid #fff;border-radius:32px;border-right-color:transparent!important;border-top-color:transparent!important;content:"";display:block;height:16px;left:50%;margin-left:-8px;margin-top:-8px;position:absolute;top:50%;width:16px}.is-outline .button.loading:after{border-color:var(--fs-color-primary)}.ux-loader{z-index:1000}.ux-loader__inner{left:50%;position:absolute;z-index:1000}.ux-loader--style-normal .ux-loader__inner,.ux-loader--style-spotlight .ux-loader__inner{top:50%}.ux-loader--style-spotlight .ux-loader__inner{background-color:#fff;border-radius:50%;box-shadow:0 0 8px rgba(0,0,0,.2);height:3.8rem;transform:translate(-50%,-50%);width:3.8rem}.ux-loader--style-spotlight .dark .ux-loader__inner{background-color:#333}.ux-loader--position-sticky{position:sticky;top:calc(var(--flatsome-scroll-padding-top) + 30px)}.ux-loader--position-sticky .ux-loader__inner{top:10rem}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.ux-menu-link{align-items:center}.ux-menu-link--active .ux-menu-link__link,.ux-menu-link:hover .ux-menu-link__link{color:hsla(0,0%,7%,.85)}.dark .ux-menu-link__link{border-bottom-color:hsla(0,0%,100%,.2)}.dark .ux-menu-link--active .ux-menu-link__link,.dark .ux-menu-link:hover .ux-menu-link__link{color:hsla(0,0%,100%,.85)}.ux-menu.ux-menu--divider-solid .ux-menu-link:not(:last-of-type) .ux-menu-link__link{border-bottom-style:solid}.ux-menu-link__link{align-items:baseline;border-bottom-color:#ececec;border-bottom-width:1px;color:currentColor;flex:1;min-height:2.5em;padding-bottom:.3em;padding-top:.3em;transition:all .2s}.ux-menu-link__icon{flex-shrink:0;vertical-align:middle;width:16px}.ux-menu-link__icon+.ux-menu-link__text{padding-left:.5em}.ux-menu-title{align-items:center;color:#000;font-size:.8em;font-weight:bolder;margin-top:5px;min-height:3.125em;padding-bottom:.3em;padding-top:.3em;text-transform:uppercase}.ux-menu-link+.ux-menu-title{margin-top:5px!important}.dark .ux-menu-title{color:currentColor}.off-canvas .mfp-content{-ms-scrollbar-base-color:#000;-ms-scrollbar-arrow-color:#000;-ms-overflow-style:-ms-autohiding-scrollbar}.off-canvas .nav-vertical>li>a{padding-bottom:15px;padding-top:15px}.off-canvas .nav-vertical li li>a{padding-bottom:5px;padding-top:5px}.off-canvas .hide-for-off-canvas{display:none!important}.off-canvas-left .mfp-content,.off-canvas-right .mfp-content{-webkit-overflow-scrolling:touch;background-color:hsla(0,0%,100%,.95);bottom:0;box-shadow:0 0 10px 0 rgba(0,0,0,.5);left:0;overflow-x:hidden;overflow-y:auto;position:fixed;top:0;transform:translateX(calc(var(--drawer-width)*-1));transition:transform .2s;width:var(--drawer-width)}.off-canvas-left.dark .mfp-content,.off-canvas-right.dark .mfp-content{background-color:rgba(0,0,0,.95)}.off-canvas-right .mfp-content{left:auto;right:0;transform:translateX(var(--drawer-width))}.off-canvas-center .nav-vertical>li>a,.off-canvas-center .nav-vertical>li>ul>li a{justify-content:center}.off-canvas-center .nav-vertical>li>a{font-size:1.5em}.off-canvas-center .mfp-container{padding:0}.off-canvas-center .mfp-content{-webkit-overflow-scrolling:touch;max-width:700px;overflow-x:hidden;overflow-y:auto;padding-top:50px}.off-canvas-center .mfp-content .searchform{margin:0 auto;max-width:260px}.off-canvas-center.mfp-bg.mfp-ready{opacity:.85}.mfp-bg.off-canvas-center:not(.dark){background-color:#fff;opacity:.95}.off-canvas-center .nav-sidebar.nav-vertical>li{border:0}.off-canvas-center .nav-sidebar.nav-vertical>li>a{padding-left:30px;padding-right:30px}.off-canvas-center .nav-sidebar.nav-vertical>li .toggle{position:absolute;right:0;top:15px}.off-canvas-center:not(.dark) .mfp-close{color:currentColor}.off-canvas.mfp-removing .mfp-content{opacity:0!important}.off-canvas-left.mfp-ready .mfp-content,.off-canvas-right.mfp-ready .mfp-content{opacity:1;transform:translate(0)}.has-off-canvas .off-canvas-blur{filter:blur(5px)}.has-off-canvas .off-canvas-zoom{transform:scale(.98)}.off-canvas .sidebar-menu{padding:30px 0}.off-canvas .sidebar-inner{padding:30px 20px}.off-canvas:not(.off-canvas-center) .nav-vertical li>a{padding-left:20px}.off-canvas:not(.off-canvas-center) li.html{padding:20px}@media(prefers-reduced-motion){.off-canvas-left .mfp-content,.off-canvas-right .mfp-content{transition:opacity .2s}}.ux-relay__nav-button{line-height:unset;margin:0;max-height:unset;padding:0}.ux-relay__nav-button svg{fill:currentColor;width:25px}.ux-relay__nav-button:not([disabled]):hover svg{fill:var(--fs-color-primary)}.stack{--stack-gap:0;display:flex}.stack>.text>:first-child{margin-top:0}.stack>.text>:last-child{margin-bottom:0}.stack-row{flex-direction:row}.stack-row>*{margin:0!important}.stack-row>*~*{margin-left:var(--stack-gap)!important}.stack-col{flex-direction:column}.stack-col>*{margin:0!important}.stack-col>*~*{margin-top:var(--stack-gap)!important}.items-stretch{align-items:stretch}.items-start{align-items:flex-start}.items-center{align-items:center}.items-end{align-items:flex-end}.items-baseline{align-items:baseline}.justify-start{justify-content:flex-start}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}@media(max-width:849px){.md\:stack-row{flex-direction:row}.md\:stack-row>*{margin:0!important}.md\:stack-row>*~*{margin-left:var(--stack-gap)!important}.md\:stack-col{flex-direction:column}.md\:stack-col>*{margin:0!important}.md\:stack-col>*~*{margin-top:var(--stack-gap)!important}.md\:items-stretch{align-items:stretch}.md\:items-start{align-items:flex-start}.md\:items-center{align-items:center}.md\:items-end{align-items:flex-end}.md\:items-baseline{align-items:baseline}.md\:justify-start{justify-content:flex-start}.md\:justify-center{justify-content:center}.md\:justify-end{justify-content:flex-end}.md\:justify-between{justify-content:space-between}.md\:justify-around{justify-content:space-around}}@media(max-width:549px){.sm\:stack-row{flex-direction:row}.sm\:stack-row>*{margin:0!important}.sm\:stack-row>*~*{margin-left:var(--stack-gap)!important}.sm\:stack-col{flex-direction:column}.sm\:stack-col>*{margin:0!important}.sm\:stack-col>*~*{margin-top:var(--stack-gap)!important}.sm\:items-stretch{align-items:stretch}.sm\:items-start{align-items:flex-start}.sm\:items-center{align-items:center}.sm\:items-end{align-items:flex-end}.sm\:items-baseline{align-items:baseline}.sm\:justify-start{justify-content:flex-start}.sm\:justify-center{justify-content:center}.sm\:justify-end{justify-content:flex-end}.sm\:justify-between{justify-content:space-between}.sm\:justify-around{justify-content:space-around}}table{border-color:#ececec;border-spacing:0;margin-bottom:1em;width:100%}td,th{border-bottom:1px solid #ececec;font-size:.9em;line-height:1.3;padding:.5em;text-align:left}td{color:#666}td:first-child,th:first-child{padding-left:0}td:last-child,th:last-child{padding-right:0}.dark td,.dark th{border-color:hsla(0,0%,100%,.08)}td .label,td dl,td form,td input,td label,td p,td select{margin:.5em 0}label{color:#222}.table{display:table}.table-cell{display:table-cell;vertical-align:middle}@media(max-width:849px){.touch-scroll-table{box-shadow:inset -2px 0 18px -5px rgba(0,0,0,.5);margin-left:-15px;overflow-x:scroll;overflow-y:hidden;padding:15px;position:relative;width:calc(100% + 30px)}.touch-scroll-table table{width:100%}}.text-box{max-height:100%}.text-box .text-box-content{backface-visibility:hidden;position:relative;z-index:10}.text-box-circle .text-box-content,.text-box-square .text-box-content{background-color:rgba(0,0,0,.9);height:0;padding:100% 0 0!important}.text-box-circle .text-inner,.text-box-square .text-inner{left:0;position:absolute;right:0;top:50%;transform:translateY(-50%)}.text-box-circle .border,.text-box-circle .text-box-content{border-radius:100%!important}.slider-wrapper{position:relative}.flickity-slider>.img,.slider-wrapper:last-child,.slider>.img{margin-bottom:0}.row-slider,.slider{position:relative;scrollbar-width:none}.slider-full .flickity-slider>.col{padding:0!important}.slider-load-first{max-height:999px;transition:max-height 2s}.slider-load-first:not(.flickity-enabled){max-height:500px}.slider-load-first:not(.flickity-enabled)>div{opacity:0}.slider:not(.flickity-enabled){-ms-overflow-style:-ms-autohiding-scrollbar;overflow-x:scroll;overflow-y:hidden;white-space:nowrap;width:auto}.row-slider::-webkit-scrollbar,.slider::-webkit-scrollbar{height:0!important;width:0!important}.row.row-slider:not(.flickity-enabled){display:block}.slider:not(.flickity-enabled)>*{display:inline-block!important;vertical-align:top;white-space:normal!important}.slider:not(.flickity-enabled)>a,.slider>a,.slider>a>img,.slider>div:not(.col),.slider>img,.slider>p{width:100%}.flickity-slider>a,.flickity-slider>a>img,.flickity-slider>div:not(.col),.flickity-slider>figure,.flickity-slider>img,.flickity-slider>p{margin:0;padding:0;transition:transform .6s,opacity .6s,box-shadow .6s;width:100%!important}.flickity-slider>.row:not(.is-selected){opacity:0}.flickity-enabled{display:block;position:relative}.flickity-enabled:focus{outline:none}.flickity-viewport{height:100%;overflow:hidden;position:relative;width:100%}.flickity-slider{height:100%;position:absolute;width:100%}.slider-has-parallax .bg{transition:opacity .3s!important}.is-dragging .flickity-viewport .flickity-slider{pointer-events:none}.flickity-enabled.is-draggable{-webkit-tap-highlight-color:rgba(0,0,0,0);tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;user-select:none}.flickity-enabled.is-draggable .flickity-viewport{cursor:move;cursor:grab}.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down{cursor:grabbing}.flickity-prev-next-button{background-color:transparent;border:none;bottom:40%;color:#111;cursor:pointer;margin:0;opacity:0;padding:0;position:absolute;top:40%;transition:transform .3s,opacity .3s,background .3s,box-shadow .3s;width:36px}.flickity-prev-next-button.next{right:2%;transform:translateX(-20%)}.flickity-prev-next-button.previous{left:2%;transform:translateX(20%)}.slider-show-nav .flickity-prev-next-button,.slider:hover .flickity-prev-next-button{opacity:.7;transform:translateX(0)!important}.slider .flickity-prev-next-button:hover{box-shadow:none;opacity:1}.slider .flickity-prev-next-button:hover .arrow,.slider .flickity-prev-next-button:hover svg{fill:var(--fs-color-primary)}@media(min-width:850px){.slider-nav-outside .flickity-prev-next-button.next{left:100%;right:auto}.slider-nav-outside .flickity-prev-next-button.previous{left:auto;right:100%}}.flickity-prev-next-button:disabled,button.flickity-prev-next-button[disabled]{background:none!important;box-shadow:none!important;cursor:auto;opacity:0!important;pointer-events:none}.flickity-prev-next-button svg{height:auto;left:50%;max-height:100%;max-width:100%;padding:20%;position:absolute;top:50%;transform:translate(-50%,-50%);transition:all .3s;width:100%}.slider-nav-push:not(.slider-nav-reveal) .flickity-prev-next-button{margin-top:-10%}.slider-nav-push.slider-nav-reveal .flickity-prev-next-button svg{margin-top:-40px}.flickity-prev-next-button .arrow,.flickity-prev-next-button svg{fill:currentColor;border-color:currentColor;transition:all .3s}.animate-height,.slider-auto-height{transition:height .2s}.flickity-prev-next-button.no-svg{color:#111;font-size:26px}.slider-no-arrows .flickity-prev-next-button{display:none!important}.slider-type-fade .flickity-slider{transform:none!important}.slider-type-fade .flickity-slider>*{left:0!important;opacity:0;z-index:1}.slider-type-fade .flickity-slider>.is-selected{opacity:1;z-index:2}.slider-type-fade .flickity-page-dots,.slider-type-fade .flickity-prev-next-button{z-index:3}@media screen and (min-width:850px){.slider-type-fade.product-gallery-stacked .flickity-slider>*{opacity:unset}}@media(prefers-reduced-motion){.flickity-prev-next-button.next,.flickity-prev-next-button.previous{transform:none!important}}.flickity-page-dots{bottom:15px;left:20%;line-height:1;list-style:none;margin:0;padding:0;position:absolute;right:20%;text-align:center}.row-slider .flickity-page-dots{bottom:0}.flickity-rtl .flickity-page-dots{direction:rtl}.flickity-page-dots .dot{border:3px solid #111;border-radius:50%;cursor:pointer;display:inline-block;height:12px;margin:0 5px;opacity:.4;transition:opacity .3s;width:12px}.nav-dots-small .flickity-page-dots .dot,.row-slider .flickity-page-dots .dot{background-color:#111;border:0;height:10px;opacity:.2;width:10px}.flickity-page-dots .dot:hover{opacity:.7}.flickity-page-dots .dot:first-child:last-child{display:none}.flickity-page-dots .dot.is-selected{background-color:#111;opacity:1!important}.slider-nav-dots-dashes .flickity-page-dots .dot{border-radius:0;height:4px;margin:0;width:40px}.slider-nav-dots-dashes-spaced .flickity-page-dots .dot{border-radius:0;height:4px;width:40px}.slider-nav-dots-simple .flickity-page-dots .dot{background-color:#111}.slider-nav-dots-square .flickity-page-dots .dot{border-radius:0}.slider-nav-circle .flickity-prev-next-button .arrow,.slider-nav-circle .flickity-prev-next-button svg{border:2px solid;border-radius:100%}.slider-nav-circle .flickity-prev-next-button:hover .arrow,.slider-nav-circle .flickity-prev-next-button:hover svg{fill:#fff!important;background-color:var(--fs-color-primary);border-color:var(--fs-color-primary)}.slider-nav-outside.slider-nav-circle .next{margin-left:10px}.slider-nav-outside.slider-nav-circle .previous{margin-right:10px}.slider-nav-reveal{overflow:hidden;padding-top:0}.slider-nav-reveal .flickity-prev-next-button,.slider-nav-reveal .flickity-prev-next-button:hover{background-color:#fff;bottom:0;box-shadow:0 -150px 15px 0 rgba(0,0,0,.3);height:100%;margin:0!important;top:-2px;width:30px}.dark .slider-nav-reveal .flickity-prev-next-button{background-color:rgba(0,0,0,.3);border-radius:99px;color:#fff}.slider-nav-reveal .flickity-prev-next-button.next{left:auto!important;right:-1px!important;transform:translateX(10%)}.slider-nav-reveal .flickity-prev-next-button.previous{left:-1px!important;right:auto!important;transform:translateX(-10%)}.slider-nav-light .flickity-prev-next-button{color:#fff}.slider-nav-light .flickity-prev-next-button .arrow,.slider-nav-light .flickity-prev-next-button svg{fill:#fff}.slider-nav-light .flickity-page-dots .dot{border-color:#fff}.slider-nav-light .flickity-page-dots .dot.is-selected,.slider-nav-light.slider-nav-dots-simple .flickity-page-dots .dot{background-color:#fff}.slider-style-container .flickity-slider>*,.slider-style-focus .flickity-slider>*,.slider-style-shadow .flickity-slider>*{margin:0 auto;max-width:1080px}.slider-style-container:not(.flickity-enabled) .ux_banner,.slider-style-focus:not(.flickity-enabled) .ux_banner,.slider-style-shadow:not(.flickity-enabled) .ux_banner{opacity:0!important}.slider-style-container .ux_banner,.slider-style-focus .ux_banner,.slider-style-shadow .ux_banner{opacity:1}.slider-style-container .flickity-slider>:not(.is-selected),.slider-style-focus .flickity-slider>:not(.is-selected),.slider-style-shadow .flickity-slider>:not(.is-selected){opacity:.5}.slider-style-shadow{padding:15px 0 25px}.slider-style-shadow .flickity-slider>:before{background-image:url(https://tiepthitute.com/wp-content/themes/flatsome/assets/img/shadow@2x.png);background-size:100% 100%;bottom:-6px;content:"";height:100px;left:-10%;position:absolute;right:-10%;z-index:-2}.slider-style-shadow .flickity-slider>:not(.is-selected){opacity:1;transform:scale(.9);z-index:-1}.slider-style-shadow .flickity-slider>:not(.is-selected):before{height:200px;opacity:.5}.slider-style-shadow .flickity-slider>.is-selected{transform:scale(.95)}.slider-style-focus{background-color:transparent;padding:30px 0}.slider-style-focus .flickity-page-dots{bottom:6px}.slider-style-focus .flickity-slider>*{max-width:1050px}.slider-style-focus .flickity-slider>:not(.is-selected){transform:scale(.93)}@media screen and (max-width:549px){.slider-wrapper .flickity-prev-next-button{display:none}.row-slider .flickity-prev-next-button{background-color:transparent!important;box-shadow:none!important;opacity:.8;transform:translateX(0)!important;width:20px!important}.row-slider .flickity-prev-next-button svg{border:0!important;padding:3px!important}.flickity-page-dots{pointer-events:none}.flickity-slider .banner-layers{overflow:hidden}}a{color:var(--fs-experimental-link-color);text-decoration:none}.button:focus:not(:focus-visible),a:focus:not(:focus-visible),button:focus:not(:focus-visible),input:focus:not(:focus-visible){outline:none}.button:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid currentColor;outline-offset:2px}a.plain{color:currentColor;transition:color .3s,opacity .3s,transform .3s}.nav-dark a.plain:hover{opacity:.7}a.icon-circle:hover,a.remove:hover,a:hover{color:var(--fs-experimental-link-color-hover)}.primary:focus-visible,.submit-button:focus-visible,button[type=submit]:focus-visible{outline-color:var(--fs-color-primary)}.secondary:focus-visible{outline-color:var(--fs-color-secondary)}.alt:focus-visible{outline-color:var(--fs-color-secondary)}.dark .widget a,.dark a{color:currentColor}.dark .widget a:hover,.dark a:hover{color:#fff}ul.links{font-size:.85em;margin:5px 0}ul.links li{display:inline-block;margin:0 .4em}ul.links li a{color:currentColor}ul.links li:before{display:inline-block;font-family:fl-icons;margin-right:5px}ul.links li:first-child{margin-left:0}ul.links li:last-child{margin-right:0}.next-prev-nav .flex-col{padding:.7em 0}.next-prev-nav i{font-size:2em;margin:0 10px!important;top:-1px;vertical-align:middle}.next-prev-nav .flex-col+.flex-col{border-left:1px solid #ececec}ul{list-style:disc}ol{list-style:decimal}ol,ul{margin-top:0;padding:0}ol ol,ol ul,ul ol,ul ul{margin:1.5em 0 1.5em 3em}li{margin-bottom:.6em}dl dd,dl dt{display:inline-block;margin:0 5px 0 0}dl dd p,dl dt p{margin:0;padding:0}dl{font-size:.85em;opacity:.8;text-transform:uppercase}ul.ul-reset,ul.ul-reset>li{margin:0;padding:0}ul.ul-reset>li{list-style:none}.col-inner ol li,.col-inner ul li,.entry-content ol li,.entry-content ul li,.entry-summary ol li,.entry-summary ul li{margin-left:1.3em}.col-inner ol li.tab,.col-inner ul li.tab,.entry-content ol li.tab,.entry-content ul li.tab,.entry-summary ol li.tab,.entry-summary ul li.tab{margin-left:0}ul li.bullet-arrow,ul li.bullet-checkmark,ul li.bullet-cross,ul li.bullet-star{border-bottom:1px solid #ececec;list-style:none;margin:0;padding:7px 0 7px 25px;position:relative}.dark ul li.bullet-arrow,.dark ul li.bullet-checkmark,.dark ul li.bullet-cross,.dark ul li.bullet-star{border-color:hsla(0,0%,100%,.2)}ul li.bullet-arrow:before,ul li.bullet-checkmark:before,ul li.bullet-star:before{color:var(--fs-color-success);font-family:fl-icons;font-size:16px;left:0;position:absolute}ul li.bullet-cross:before{color:var(--fs-color-alert);font-family:fl-icons;font-size:16px;left:0;position:absolute}ul li.bullet-checkmark:before{content:""!important}ul li.bullet-cross:before{content:""!important}ul li.bullet-arrow:before{content:""!important}ul li.bullet-star:before{content:""!important}.button,button,fieldset,input,select,textarea{margin-bottom:1em}blockquote,dl,figure,form,ol,p,pre,ul{margin-bottom:1.3em}form p{margin-bottom:.5em}:host{line-height:1.6}h1,h2,h3,h4,h5,h6{color:#555;margin-bottom:.5em;margin-top:0;text-rendering:optimizeSpeed;width:100%}.h1,h1{font-size:1.7em}.h1,.h2,h1,h2{line-height:1.3}.h2,h2{font-size:1.6em}.h3,h3{font-size:1.25em}.h4,h4{font-size:1.125em}.h5,h5{font-size:1em}.h6,h6{font-size:.85em;opacity:.8}h1.entry-title.mb{margin-bottom:30px}@media(max-width:549px){h1{font-size:1.4em}h2{font-size:1.2em}h3{font-size:1em}}h6 span{font-weight:400;font-weight:500}h3 label{display:inline-block;margin-right:10px}p{margin-top:0}h1>span,h2>span,h3>span,h4>span,h5>span,h6>span,p.headline>span{-webkit-box-decoration-break:clone;box-decoration-break:clone}a.lead,p.lead{font-size:1.3em}.uppercase,h6,span.widget-title,th{letter-spacing:.05em;line-height:1.05;text-transform:uppercase}.lowercase{text-transform:none!important}span.widget-title{font-size:1em;font-weight:600}.is-normal{font-weight:400}.is-bold{font-weight:700}.is-thin,.thin-font{font-weight:300!important}.is-thin strong,.thin-font strong{font-weight:700!important}.is-italic{font-style:italic!important}.is-uppercase,.uppercase{line-height:1.2;text-transform:uppercase}.alt-font,.is-alt-font{font-family:Georgia}.is-xxxlarge{font-size:2.5em}.is-xxlarge{font-size:2em}.is-xlarge{font-size:1.5em}.is-larger{font-size:1.3em}.is-large{font-size:1.15em}.is-small,.is-small.button{font-size:.8em}.is-smaller{font-size:.75em}.is-xsmall{font-size:.7em}.is-xxsmall{font-size:.6em}@media(max-width:549px){.is-xxlarge{font-size:2.5em}.is-xlarge{font-size:1.8em}.is-larger{font-size:1.2em}.is-large{font-size:1em}}.box-text a:not(.button),.box-text h1,.box-text h2,.box-text h3,.box-text h4,.box-text h5,.box-text h6{line-height:1.3;margin-bottom:.1em;margin-top:.1em}.box-text p{margin-bottom:.1em;margin-top:.1em}.box-text .button{margin-top:1em}.banner .button{margin-bottom:.5em;margin-top:.5em}.banner .is-divider,.banner .text-center .is-divider{margin-bottom:1em;margin-top:1em}.banner h1{font-size:3.5em}.banner h2{font-size:2.9em}.banner h3{font-size:2em}.banner h1,.banner h2,.banner h3{font-weight:400;line-height:1;margin-bottom:.2em;margin-top:.2em;padding:0}.banner h4{font-size:1.5em;margin-bottom:.6em;margin-top:.6em;padding:0}.banner h5,.banner h6,.banner p{margin-bottom:1em;margin-top:1em;padding:0}.line-height-small{line-height:1.4em}[data-line-height=xs]{line-height:.85!important}[data-line-height=s]{line-height:1!important}[data-line-height=m]{line-height:1.2!important}[data-line-height=l]{line-height:1.4!important}[data-line-height=xl]{line-height:1.6!important}.nav>li>a{font-size:.8em}.nav>li.html{font-size:.85em}.nav-size-xsmall>li>a{font-size:.65em}.nav-size-small>li>a{font-size:.7em}.nav-size-medium>li>a{font-size:.9em}.nav-size-large>li>a{font-size:1em}.nav-size-xlarge>li>a{font-size:1.1em}.nav-spacing-xsmall>li{margin:0}.nav-spacing-small>li{margin:0 5px}.nav-spacing-medium>li{margin:0 9px}.nav-spacing-large>li{margin:0 11px}.nav-spacing-xlarge>li{margin:0 13px}.fancy-underline{position:relative}.fancy-underline:after{background:url(https://tiepthitute.com/wp-content/themes/flatsome/assets/img/underline.png) 50% top no-repeat;background-size:100% 9px;border-radius:999px;color:green;content:"";height:9px;image-rendering:-webkit-optimize-contrast;left:0;position:absolute;right:0;top:100%}span.count-up{opacity:0;transition:opacity 2s}span.count-up.active{opacity:1}[data-text-color=primary]{color:var(--fs-color-primary)!important}[data-text-color=secondary]{color:var(--fs-color-secondary)!important}[data-text-color=alert]{color:var(--fs-color-alert)!important}[data-text-color=success]{color:var(--fs-color-success)!important}[data-text-bg=primary]{background-color:var(--fs-color-primary)}[data-text-bg=secondary]{background-color:var(--fs-color-secondary)}[data-text-bg=alert]{background-color:var(--fs-color-alert)}[data-text-bg=success]{background-color:var(--fs-color-success)}.text-bordered-dark,.text-bordered-primary,.text-bordered-white{border:2px solid #fff;display:inline-block;padding:5px}.text-bordered-dark{border-color:#000}h1.text-bordered-dark,h1.text-bordered-primary,h1.text-bordered-white{padding:15px}.text-boarder-top-bottom-dark,.text-boarder-top-bottom-white{border-bottom:3px solid #fff;border-top:3px solid #fff;display:inline-block;padding-bottom:15px;padding-top:15px}.text-boarder-top-bottom-dark{border-color:#000}blockquote{border-left:2px solid var(--fs-color-primary);color:#333;font-size:1.2em;font-style:italic;margin:0 0 1.25em;padding:0 1.25em 0 1.875em;position:relative}.dark blockquote{color:#fff}.clear:after,.clearfix:after,.container:after,.row:after{clear:both;content:"";display:table}@media(max-width:549px){.hide-for-small,[data-show=hide-for-small]{display:none!important}.small-text-center{float:none!important;text-align:center!important;width:100%!important}}@media(min-width:550px){.show-for-small,[data-show=show-for-small]{display:none!important}}@media(min-width:850px){.show-for-medium,[data-show=show-for-medium]{display:none!important}}@media(max-width:849px){.hide-for-medium,[data-show=hide-for-medium]{display:none!important}.medium-text-center .pull-left,.medium-text-center .pull-right{float:none}.medium-text-center .ml{margin-left:auto}.medium-text-center .mr{margin-right:auto}.medium-text-center{float:none!important;text-align:center!important;width:100%!important}}@media(min-width:850px){.hide-for-large,[data-show=hide-for-large]{display:none!important}}.expand,.full-width{display:block;max-width:100%!important;padding-left:0!important;padding-right:0!important;width:100%!important}.pull-right{margin-right:0!important}.pull-left{margin-left:0!important}.mb{margin-bottom:30px}.mt{margin-top:30px}.mr{margin-right:30px}.ml{margin-left:30px}.mb-0{margin-bottom:0!important}.ml-0{margin-left:0!important}.mr-0{margin-right:0!important}.mt-0{margin-top:0!important}.mb-half{margin-bottom:15px}.mt-half{margin-top:15px}.mr-half{margin-right:15px}.ml-half{margin-left:15px}.mb-half:last-child,.mb:last-child{margin-bottom:0}.pb{padding-bottom:30px}.pt{padding-top:30px}.pb-half{padding-bottom:15px}.pt-half{padding-top:15px}.pb-0{padding-bottom:0!important}.pt-0{padding-top:0!important}.no-margin{margin:0!important}.no-padding{padding:0!important}.inner-padding{padding:30px}.first-reset :first-child{margin-top:0}.last-reset :last-child{margin-bottom:0}.no-select{-webkit-user-select:none!important;-moz-user-select:none!important;user-select:none!important}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-center .is-divider,.text-center .is-star-rating,.text-center .star-rating,.text-center>div,.text-center>div>div{margin-left:auto;margin-right:auto}.text-center .pull-left,.text-center .pull-right{float:none}.text-left .is-divider,.text-left .is-star-rating,.text-left .star-rating{margin-left:0;margin-right:auto}.text-right .is-divider,.text-right .is-star-rating,.text-right .star-rating,.text-right>div,.text-right>div>div{margin-left:auto;margin-right:0}.relative{position:relative!important}.absolute{position:absolute!important}.fixed{position:fixed!important;z-index:12}.top{top:0}.right{right:0}.left{left:0}.bottom,.fill{bottom:0}.fill{height:100%;left:0;margin:0!important;padding:0!important;position:absolute;right:0;top:0}.v-center{bottom:auto;top:50%;transform:translateY(-50%)}.h-center{left:50%;transform:translateX(-50%)}.h-center.v-center{bottom:auto!important;left:auto!important;right:50%;top:50%;transform:translate(50%,-50%)}.pull-right{float:right}.pull-left{float:left}.is-full-height{height:100%;height:100vh;min-height:550px;padding-bottom:0!important;padding-top:0!important}.bg-fill{background-position:50% 50%;background-repeat:no-repeat!important;background-size:cover!important}.bg-top{background-position:top;-o-object-position:top;object-position:top}.circle,.circle img{border-radius:999px!important;-o-object-fit:cover;object-fit:cover}.round{border-radius:5px}.has-border{border:2px solid var(--fs-color-primary);padding:30px}.dashed-border{border-style:dashed}.success-border{border-color:var(--fs-color-success)}.bt{border-top:1px solid #ececec}.bb{border-bottom:1px solid #ececec}.bl{border-left:1px solid #ececec}.br{border-right:1px solid #ececec}.hidden{display:none!important;visibility:hidden!important}.is-invisible{opacity:0;visibility:hidden}.z-1{z-index:21}.z-2{z-index:22}.z-3{z-index:23}.z-4{z-index:24}.z-5{z-index:25}.z-top{z-index:9995}.z-top-2{z-index:9996}.z-top-3{z-index:9997}.no-click{pointer-events:none}.no-wrap{white-space:nowrap}.primary-color{color:var(--fs-color-primary)}.secondary-color{color:var(--fs-color-secondary)}.success-color{color:var(--fs-color-success)}.alert-color{color:var(--fs-color-alert)}.bg-primary-color{background-color:var(--fs-color-primary)}.bg-secondary-color{background-color:var(--fs-color-secondary)}.bg-success-color{background-color:var(--fs-color-success)}.bg-alert-color{background-color:var(--fs-color-alert)}.is-transparent{background-color:transparent!important}.inline{display:inline}.block{display:block}.flex{display:flex}@media(max-width:549px){.small-block{display:block}}.inline-block{display:inline-block}.inline-images img,img.inline{display:inline-block!important}.is-well{background-color:rgba(0,0,0,.02);box-shadow:1px 1px 3px 0 rgba(0,0,0,.2),0 1px 0 rgba(0,0,0,.07),inset 0 0 0 1px rgba(0,0,0,.05);padding:30px}.no-overflow{overflow:hidden}.no-text-overflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strong{font-weight:700}.op-4{opacity:.4}.op-5{opacity:.5}.op-6{opacity:.6}.op-7{opacity:.7}.op-8{opacity:.8}@media(max-width:549px){.sm-touch-scroll{-webkit-overflow-scrolling:touch;overflow-x:auto;overflow-y:none}}.no-scrollbar{-ms-overflow-style:-ms-autohiding-scrollbar;scrollbar-width:none}.no-scrollbar::-webkit-scrollbar{height:0!important;width:0!important}.screen-reader-text{clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;position:absolute!important;width:1px}.screen-reader-text:focus{clip:auto!important;background-color:#f1f1f1;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);color:#21759b;display:block;font-size:14px;font-size:.875rem;font-weight:700;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}@media screen and (max-width:549px){.x5{left:5%}.x15{left:15%}.x25{left:25%}.x35{left:35%}.x45{left:45%}.x55{right:45%}.x65{right:35%}.x75{right:25%}.x85{right:15%}.x95{right:5%}.x0{left:0}.x10{left:10%}.x20{left:20%}.x30{left:30%}.x40{left:40%}.x60{right:40%}.x70{right:30%}.x80{right:20%}.x90{right:10%}.x100{right:0}.y0{top:0}.y10{top:10%}.y20{top:20%}.y30{top:30%}.y40{top:40%}.y60{bottom:40%}.y70{bottom:30%}.y80{bottom:20%}.y90{bottom:10%}.y100{bottom:0}.y5{top:5%}.y15{top:15%}.y25{top:25%}.y35{top:35%}.y45{top:45%}.y55{bottom:45%}.y65{bottom:35%}.y75{bottom:25%}.y85{bottom:15%}.y95{bottom:5%}.x50{left:50%;transform:translateX(-50%)}.y50{top:50.3%;transform:translateY(-50%)}.y50.x50{transform:translate(-50%,-50%)}}@media screen and (min-width:550px)and (max-width:849px){.md-x5{left:5%}.md-x15{left:15%}.md-x25{left:25%}.md-x35{left:35%}.md-x45{left:45%}.md-x55{right:45%}.md-x65{right:35%}.md-x75{right:25%}.md-x85{right:15%}.md-x95{right:5%}.md-y5{top:5%}.md-y15{top:15%}.md-y25{top:25%}.md-y35{top:35%}.md-y45{top:45%}.md-y55{bottom:45%}.md-y65{bottom:35%}.md-y75{bottom:25%}.md-y85{bottom:15%}.md-y95{bottom:5%}.md-x0{left:0}.md-x10{left:10%}.md-x20{left:20%}.md-x30{left:30%}.md-x40{left:40%}.md-x60{right:40%}.md-x70{right:30%}.md-x80{right:20%}.md-x90{right:10%}.md-x100{right:0}.md-y0{top:0}.md-y10{top:10%}.md-y20{top:20%}.md-y30{top:30%}.md-y40{top:40%}.md-y60{bottom:40%}.md-y70{bottom:30%}.md-y80{bottom:20%}.md-y90{bottom:10%}.md-y100{bottom:0}.md-x50{left:50%;transform:translateX(-50%)!important}.md-y50{top:50%;transform:translateY(-50%)!important}.md-x50.md-y50{transform:translate(-50%,-50%)!important}}@media screen and (min-width:850px){.lg-x5{left:5%}.lg-x15{left:15%}.lg-x25{left:25%}.lg-x35{left:35%}.lg-x45{left:45%}.lg-x55{right:45%}.lg-x65{right:35%}.lg-x75{right:25%}.lg-x85{right:15%}.lg-x95{right:5%}.lg-y5{top:5%}.lg-y15{top:15%}.lg-y25{top:25%}.lg-y35{top:35%}.lg-y45{top:45%}.lg-y55{bottom:45%}.lg-y65{bottom:35%}.lg-y75{bottom:25%}.lg-y85{bottom:15%}.lg-y95{bottom:5%}.lg-x0{left:0}.lg-x10{left:10%}.lg-x20{left:20%}.lg-x30{left:30%}.lg-x40{left:40%}.lg-x60{right:40%}.lg-x70{right:30%}.lg-x80{right:20%}.lg-x90{right:10%}.lg-x100{right:0}.lg-y0{top:0}.lg-y10{top:10%}.lg-y20{top:20%}.lg-y30{top:30%}.lg-y40{top:40%}.lg-y60{bottom:40%}.lg-y70{bottom:30%}.lg-y80{bottom:20%}.lg-y90{bottom:10%}.lg-y100{bottom:0}.lg-x50{left:50%;transform:translateX(-50%)!important}.lg-y50{top:50%;transform:translateY(-50%)!important}.lg-x50.lg-y50{transform:translate(-50%,-50%)!important}}.res-text{font-size:11px}.small-1 .res-text,.small-2 .res-text,.small-3 .res-text,.widget-area .res-text{font-size:8px}.small-1 .res-text h6,.small-2 .res-text h6,.small-3 .res-text h6{font-size:10px}.small-1 .res-text p.lead,.small-2 .res-text p.lead,.small-3 .res-text p.lead{font-size:16px}.small-4 .res-text{font-size:8.5px}.small-5 .res-text{font-size:9px}.small-6 .res-text{font-size:10px}.small-7 .res-text{font-size:11px}.small-8 .res-text{font-size:12px}.small-9 .res-text{font-size:13px}.small-10 .res-text{font-size:14px}.small-11 .res-text{font-size:15px}@media screen and (min-width:550px){.medium-1 .res-text,.medium-2 .res-text,.medium-3 .res-text,.medium-4 .res-text,.medium-5 .res-text,.medium-6 .res-text,.medium-7 .res-text{font-size:.8vw}.medium-8 .res-text{font-size:.9vw}.medium-9 .res-text{font-size:1.15vw}.medium-10 .res-text{font-size:1.3vw}.medium-11 .res-text{font-size:1.5vw}.res-text{font-size:1.8vw}}@media screen and (min-width:850px){.res-text{font-size:16px}.large-1 .res-text,.large-2 .res-text,.large-3 .res-text,.widget-area .res-text{font-size:8px}.large-1 .res-text h6,.large-2 .res-text h6,.large-3 .res-text h6{font-size:10px}.large-1 .res-text p.lead,.large-2 .res-text p.lead,.large-3 .res-text p.lead{font-size:16px}.large-4 .res-text{font-size:8.5px}.large-5 .res-text{font-size:9px}.large-6 .res-text{font-size:10px}.large-7 .res-text{font-size:11px}.large-8 .res-text{font-size:12px}.large-9 .res-text{font-size:13px}.large-10 .res-text{font-size:14px}.large-11 .res-text{font-size:15px}}@media(prefers-reduced-motion:no-preference){.slider [data-animate],[data-animate]{animation-fill-mode:forwards;-webkit-backface-visibility:hidden;opacity:0!important;transition:filter 1.3s,transform 1.6s,opacity .7s ease-in;will-change:filter,transform,opacity}.slider [data-animate]:not([data-animate-transform]),[data-animate]:not([data-animate-transform]){transform:none!important}.slider [data-animate]:not([data-animate-transition]),[data-animate]:not([data-animate-transition]){transition:none!important}.slider [data-animate=bounceInDown],.slider [data-animate=bounceInLeft],.slider [data-animate=bounceInRight],.slider [data-animate=bounceInUp],[data-animate=bounceInDown],[data-animate=bounceInLeft],[data-animate=bounceInRight],[data-animate=bounceInUp]{transition:transform .8s cubic-bezier(0,.195,0,1.465),opacity .5s ease-in}.slider [data-animate=bounceInLeft],[data-animate=bounceInLeft]{transform:translate3d(-300px,0,0)}.slider [data-animate=blurIn],[data-animate=blurIn]{filter:blur(15px)}.slider [data-animate=fadeInLeft],[data-animate=fadeInLeft]{transform:translate3d(-70px,0,0)}.slider [data-animate=fadeInRight],[data-animate=fadeInRight]{transform:translate3d(70px,0,0)}.slider [data-animate=bounceInUp],.slider [data-animate=fadeInUp],[data-animate=bounceInUp],[data-animate=fadeInUp]{transform:translate3d(0,70px,0)}.slider [data-animate=bounceInRight],[data-animate=bounceInRight]{transform:translate3d(300px,0,0)}.slider [data-animate=bounceIn],[data-animate=bounceIn]{transform:scale(1.3)}.slider [data-animate=bounceInDown],.slider [data-animate=fadeInDown],[data-animate=bounceInDown],[data-animate=fadeInDown]{transform:translate3d(0,-70px,0)}.slider [data-animate=flipInY],[data-animate=flipInY]{backface-visibility:visible;transform:perspective(400px) rotateY(-90deg) translate3d(15px,0,0)}.slider [data-animate=flipInX],[data-animate=flipInX]{backface-visibility:visible;transform:perspective(400px) rotateX(90deg) translate3d(0,-15px,0)}.row-slider.slider [data-animated=true],.slider .is-selected [data-animated=true],[data-animated=true]{animation-delay:.1s;opacity:1!important;transform:translateZ(0) scale(1)}.flickity-slider>:not(.is-selected) [data-animated=true]{transition:transform .7s,opacity .3s!important}.slider [data-animate=none],[data-animate=none]{opacity:1!important}.slider [data-animate=blurIn][data-animated=true],[data-animated=true][data-animate=blurIn]{filter:blur(0)}[data-animated=false]{transition:none!important}.has-shadow [data-animate],[data-animate]:hover{transition-delay:0s!important}[data-animate-delay="100"]{transition-delay:.1s}.nav-anim>li{opacity:0;transform:translateY(-15px);transition:transform .3s,opacity .3s}.active .nav-anim>li,.mfp-ready .nav-anim>li,.nav-anim.active>li{opacity:1;transform:none}.col+.col [data-animate],.nav-anim>li,[data-animate-delay="200"],[data-animate]+[data-animate]{transition-delay:.2s}.nav-anim>li+li,[data-animate-delay="300"]{transition-delay:.3s}.col+.col+.col [data-animate],.nav-anim>li+li+li,[data-animate-delay="400"],[data-animate]+[data-animate]+[data-animate]{transition-delay:.4s}.nav-anim>li+li+li+li,[data-animate-delay="500"]{transition-delay:.5s}.col+.col+.col+.col [data-animate],.nav-anim>li+li+li+li+li,[data-animate-delay="600"],[data-animate]+[data-animate]+[data-animate]+[data-animate]{transition-delay:.6s}.nav-anim>li+li+li+li+li+li,[data-animate-delay="700"]{transition-delay:.7s}.col+.col+.col+.col+.col [data-animate],.nav-anim>li+li+li+li+li+li+li,[data-animate-delay="800"],[data-animate]+[data-animate]+[data-animate]+[data-animate]+[data-animate]{transition-delay:.8s}.col+.col+.col+.col+.col+.col [data-animate],.nav-anim>li+li+li+li+li+li+li+li,[data-animate-delay="900"]{transition-delay:.9s}.col+.col+.col+.col+.col+.col+.col [data-animate],.nav-anim>li+li+li+li+li+li+li+li+li,[data-animate-delay="1000"]{transition-delay:1s}.slider-type-fade .flickity-slider>:not(.is-selected) [data-animate]{opacity:0!important;transition:none!important}}@keyframes stuckMoveDown{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes stuckMoveUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes stuckFadeIn{0%{opacity:0}to{opacity:1}}.ux-stagger{--stagger-init-delay:0s;--stagger-delay:.05s;--stagger-easing:cubic-bezier(0.4,0,0.2,1);--stagger-duration:.5s;--stagger-from-translate-x:0;--stagger-from-translate-y:15px;--stagger-from-scale:1;--stagger-from-opacity:0;--stagger-from-clip-path:0% 0% 0% 0%;--stagger-to-translate-x:0;--stagger-to-translate-y:0;--stagger-to-scale:1;--stagger-to-opacity:1;--stagger-to-clip-path:0% 0% 0% 0%}.ux-stagger>*{animation:ux-animate var(--stagger-duration) var(--stagger-easing) backwards}.ux-stagger>:first-child{animation-delay:calc(var(--stagger-delay)*1 + var(--stagger-init-delay))}.ux-stagger>:nth-child(2){animation-delay:calc(var(--stagger-delay)*2 + var(--stagger-init-delay))}.ux-stagger>:nth-child(3){animation-delay:calc(var(--stagger-delay)*3 + var(--stagger-init-delay))}.ux-stagger>:nth-child(4){animation-delay:calc(var(--stagger-delay)*4 + var(--stagger-init-delay))}.ux-stagger>:nth-child(5){animation-delay:calc(var(--stagger-delay)*5 + var(--stagger-init-delay))}.ux-stagger>:nth-child(6){animation-delay:calc(var(--stagger-delay)*6 + var(--stagger-init-delay))}.ux-stagger>:nth-child(7){animation-delay:calc(var(--stagger-delay)*7 + var(--stagger-init-delay))}.ux-stagger>:nth-child(8){animation-delay:calc(var(--stagger-delay)*8 + var(--stagger-init-delay))}.ux-stagger>:nth-child(9){animation-delay:calc(var(--stagger-delay)*9 + var(--stagger-init-delay))}.ux-stagger>:nth-child(10){animation-delay:calc(var(--stagger-delay)*10 + var(--stagger-init-delay))}.ux-stagger>:nth-child(11){animation-delay:calc(var(--stagger-delay)*11 + var(--stagger-init-delay))}.ux-stagger>:nth-child(12){animation-delay:calc(var(--stagger-delay)*12 + var(--stagger-init-delay))}.ux-stagger>:nth-child(13){animation-delay:calc(var(--stagger-delay)*13 + var(--stagger-init-delay))}.ux-stagger>:nth-child(14){animation-delay:calc(var(--stagger-delay)*14 + var(--stagger-init-delay))}.ux-stagger>:nth-child(15){animation-delay:calc(var(--stagger-delay)*15 + var(--stagger-init-delay))}.ux-stagger>:nth-child(16){animation-delay:calc(var(--stagger-delay)*16 + var(--stagger-init-delay))}.ux-stagger>:nth-child(17){animation-delay:calc(var(--stagger-delay)*17 + var(--stagger-init-delay))}.ux-stagger>:nth-child(18){animation-delay:calc(var(--stagger-delay)*18 + var(--stagger-init-delay))}.ux-stagger>:nth-child(19){animation-delay:calc(var(--stagger-delay)*19 + var(--stagger-init-delay))}.ux-stagger>:nth-child(20){animation-delay:calc(var(--stagger-delay)*20 + var(--stagger-init-delay))}@keyframes ux-animate{0%{-webkit-clip-path:inset(var(--stagger-from-clip-path));clip-path:inset(var(--stagger-from-clip-path));opacity:var(--stagger-from-opacity,0);transform:translateX(var(--stagger-from-translate-x)) translateY(var(--stagger-from-translate-y)) scale(var(--stagger-from-scale))}to{-webkit-clip-path:inset(var(--stagger-to-clip-path));clip-path:inset(var(--stagger-to-clip-path));opacity:var(--stagger-to-opacity,1);transform:translateX(var(--stagger-to-translate-x)) translateY(var(--stagger-to-translate-y)) scale(var(--stagger-to-scale))}}.is-border{border:1px solid #ececec;border-radius:0;bottom:0;left:0;margin:0;pointer-events:none;position:absolute;right:0;top:0}.is-dashed{border-style:dashed}.is-dotted{border-style:dotted}.has-shadow .box:not(.box-overlay):not(.box-shade),.has-shadow.box:not(.box-overlay):not(.box-shade){background-color:#fff}.dark .has-shadow .box:not(.box-overlay):not(.box-shade),.dark .has-shadow.box:not(.box-overlay):not(.box-shade){background-color:#333}.box-shadow-1,.box-shadow-1-hover,.box-shadow-2,.box-shadow-2-hover,.box-shadow-3,.box-shadow-3-hover,.box-shadow-4,.box-shadow-4-hover,.box-shadow-5,.box-shadow-5-hover,.row-box-shadow-1 .col-inner,.row-box-shadow-1-hover .col-inner,.row-box-shadow-2 .col-inner,.row-box-shadow-2-hover .col-inner,.row-box-shadow-3 .col-inner,.row-box-shadow-3-hover .col-inner,.row-box-shadow-4 .col-inner,.row-box-shadow-4-hover .col-inner,.row-box-shadow-5 .col-inner,.row-box-shadow-5-hover .col-inner{transition:transform .3s,box-shadow .3s,background-color .3s,color .3s,opacity .3s}.box-shadow-1,.box-shadow-1-hover:hover,.row-box-shadow-1 .col-inner,.row-box-shadow-1-hover .col-inner:hover{box-shadow:0 1px 3px -2px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)}.box-shadow,.box-shadow-2,.box-shadow-2-hover:hover,.row-box-shadow-2 .col-inner,.row-box-shadow-2-hover .col-inner:hover{box-shadow:0 3px 6px -4px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23)}.box-shadow-3,.box-shadow-3-hover:hover,.row-box-shadow-3 .col-inner,.row-box-shadow-3-hover .col-inner:hover{box-shadow:0 10px 20px rgba(0,0,0,.19),0 6px 6px rgba(0,0,0,.22)}.box-shadow-4,.box-shadow-4-hover:hover,.row-box-shadow-4 .col-inner,.row-box-shadow-4-hover .col-inner:hover{box-shadow:0 14px 28px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.1)}.box-shadow-5,.box-shadow-5-hover:hover,.row-box-shadow-5 .col-inner,.row-box-shadow-5-hover .col-inner:hover{box-shadow:0 30px 40px 0 rgba(0,0,0,.2)}.box-shadow-4-hover:hover,.box-shadow-5-hover:hover,.row-box-shadow-4-hover .col-inner:hover,.row-box-shadow-5-hover .col-inner:hover{transform:translateY(-6px)}.text-shadow,.text-shadow-1{text-shadow:1px 1px 1px rgba(0,0,0,.3)}.text-shadow-2{text-shadow:2px 2px 5px rgba(0,0,0,.4)}.text-shadow-3{text-shadow:3px 3px 8px rgba(0,0,0,.4)}.text-shadow-4{text-shadow:3px 3px 12px rgba(0,0,0,.5)}.text-shadow-5{text-shadow:5px 5px 16px rgba(0,0,0,.6)}a.hotspot{background-color:#000;border-radius:99px;color:#fff;display:block;font-weight:bolder;height:1.5em;line-height:1.5em;opacity:.8;padding:0;text-align:center;transition:all .3s;width:1.5em}a.hotspot i{font-size:.8em}a.hotspot:hover{background-color:#fff!important;color:#000!important;opacity:1}.has-hover .bg,.has-hover [class*=image-] img{transition:filter .6s,opacity .6s,transform .6s,box-shadow .3s}.has-hover .has-image-zoom img{transition:unset}.bg-color .bg,.bg-grayscale:hover .bg,.has-hover .image-color img,.has-hover:hover .image-grayscale img{filter:grayscale(100%)}.bg-color:hover .bg,.has-hover:hover .image-color img{filter:grayscale(0)}.bg-zoom:hover .bg,.has-hover:hover .image-zoom img{transform:scale(1.1)}.bg-zoom-long .bg,.has-hover .image-zoom-long img{transition:transform 5s!important}.bg-zoom-long:hover .bg,.has-hover:hover .image-zoom-long img{transform:scale(1.3)}.bg-zoom-fade:hover .bg,.has-hover:hover .image-zoom-fade img{opacity:.7;transform:scale(1.1)}.bg-glow:hover .bg,.has-hover:hover .image-glow img{filter:brightness(1.1)}.bg-fade-out:hover .bg,.has-hover:hover .image-fade-out img{opacity:.7}.has-hover:hover .image-fade img,.image-fade:hover .bg{opacity:.6}.bg-fade-in .bg,.image-fade-in img{opacity:.7}.bg-fade-in:hover .bg,.has-hover:hover .image-fade-in img{opacity:1}.bg-blur:hover .bg,.has-hover:hover .image-blur img{filter:blur(5px)}.bg-overlay-add:not(:hover) .overlay,.bg-overlay-remove:hover .overlay,.has-hover:hover .image-overlay-remove .overlay,.has-hover:not(:hover) .image-overlay-add .overlay{opacity:0}.bg-overlay-add-50:not(:hover) .overlay,.bg-overlay-remove-50:hover .overlay,.has-hover:hover .image-overlay-remove-50 .overlay,.has-hover:not(:hover) .image-overlay-add-50 .overlay{opacity:.5}.has-mask{overflow:hidden;transform:translateZ(0)}.mask-circle{-webkit-clip-path:circle(50% at center);clip-path:circle(50% at center)}.mask-angled{-webkit-clip-path:polygon(0 30px,100% 0,100% 100%,0 100%);clip-path:polygon(0 30px,100% 0,100% 100%,0 100%)}.mask-angled-right{-webkit-clip-path:polygon(0 0,100% 30px,100% 100%,0 100%);clip-path:polygon(0 0,100% 30px,100% 100%,0 100%)}.mask-arrow{-webkit-clip-path:polygon(0 0,calc(50% - 30px) 0,50% 30px,calc(50% + 30px) 0,100% 0,100% 100%,0 100%);clip-path:polygon(0 0,calc(50% - 30px) 0,50% 30px,calc(50% + 30px) 0,100% 0,100% 100%,0 100%)}.mask-angled-large{-webkit-clip-path:polygon(0 60px,100% 0,100% 100%,0 100%);clip-path:polygon(0 60px,100% 0,100% 100%,0 100%)}.mask-angled-right-large{-webkit-clip-path:polygon(0 0,100% 0,100% calc(100% - 60px),0 100%);clip-path:polygon(0 0,100% 0,100% calc(100% - 60px),0 100%)}.mask-arrow-large{-webkit-clip-path:polygon(0 0,calc(50% - 60px) 0,50% 60px,calc(50% + 60px) 0,100% 0,100% 100%,0 100%);clip-path:polygon(0 0,calc(50% - 60px) 0,50% 60px,calc(50% + 60px) 0,100% 0,100% 100%,0 100%)}.mask-angled,.mask-angled-right,.mask-arrow{margin-top:-30px}.mask-angled-large,.mask-angled-right-large,.mask-arrow-large{margin-top:-60px}[data-parallax-container]{overflow:hidden}@media(prefers-reduced-motion:no-preference){[data-parallax]{will-change:transform!important}[data-parallax]:not(.parallax-active),[data-parallax]:not(.parallax-active) .bg{opacity:0}}.shade{backface-visibility:hidden;background:rgba(0,0,0,.2);background:linear-gradient(0deg,#323232 0,rgba(50,50,50,0) 33%);bottom:0;content:" ";left:0;opacity:.3;pointer-events:none;position:absolute;right:0;top:0;transition:opacity .3s}.shade-top{background:rgba(0,0,0,.2);background:linear-gradient(180deg,#000 0,transparent 70%);opacity:.4}.box:hover .shade{opacity:.5}.box-shade:not(.dark) .shade{background:hsla(0,0%,100%,.2);background:linear-gradient(0deg,#fff 0,hsla(0,0%,100%,0) 33%);opacity:.8}.hover-slide,.hover-slide-in,.hover-zoom,.hover-zoom-in,.show-on-hover{filter:blur(0);opacity:0;pointer-events:none;transition:opacity .5s,transform .3s,max-height .6s,filter .6s}.hover-slide{transform:translateY(15%) translateZ(0)}.hover-slide-in{transform:translateY(100%) translateZ(0)}.box-text-middle .box-text.hover-slide{transform:translateY(-40%) translateZ(0)}.hover-fade-in{opacity:0;transition:opacity .3s}.has-hover:hover .hover-fade-in{opacity:1}.hover-fade-out{transition:opacity .3s}.has-hover:hover .hover-fade-out{opacity:0}.hover-invert{filter:invert(0);opacity:1!important}.has-hover:hover .hover-invert{filter:invert(100%)}.hover-reveal{max-height:0;opacity:0;transform:translateY(15%) translateZ(0);transition:all .6s}.has-hover:hover .hover-reveal{max-height:150px;opacity:1}.has-hover:hover .hover-reveal.reveal-small{max-height:30px}.hover-blur{filter:blur(10px);opacity:0;transition:filter .3s,opacity .3s}.has-hover:hover .hover-blur{filter:blur(0)!important;opacity:1}.hover-zoom{transform:scale(1.1) translateZ(0)}.box-text-middle .box-text.hover-zoom{transform:scale(1.1) translateZ(0) translateY(-50%)}.hover-zoom-in{transform:scale(.9) translateZ(0)}.box-text-middle .box-text.hover-zoom-in{transform:scale(.9) translateZ(0) translateY(-50%)}.hover-bounce{opacity:1!important;transform:scale(1) translateZ(0) translateY(10px)!important;transition:transform .3s}.has-hover:hover .hover-bounce{transform:scale(1) translateZ(0) translateY(0)!important}.box-text-middle .hover-bounce{transform:scale(1) translateZ(0) translateY(-40%)!important}.box-text-middle:hover .box-text.hover-bounce{transform:scale(1) translateZ(0) translateY(-50%)!important}.has-hover:hover img.show-on-hover{opacity:1}.has-hover .box-image:focus-within .show-on-hover,.has-hover:hover .hover-slide,.has-hover:hover .hover-slide-in,.has-hover:hover .hover-zoom,.has-hover:hover .hover-zoom-in,.has-hover:hover .show-on-hover{opacity:1;pointer-events:inherit;transform:scale(1) translateZ(0) translateY(0)!important}.box-text-middle:hover .show-on-hover.box-text,.has-hover:hover .show-on-hover.center{transform:scale(1) translateZ(0) translateY(-50%)!important}@media(prefers-reduced-motion){.box-text-middle .box-text.hover-slide,.box-text-middle:hover .show-on-hover.box-text,.has-hover:hover .hover-bounce,.has-hover:hover .hover-slide,.has-hover:hover .hover-slide-in,.has-hover:hover .hover-zoom,.has-hover:hover .hover-zoom-in,.has-hover:hover .show-on-hover,.has-hover:hover .show-on-hover.center,.hover-bounce,.hover-reveal,.hover-slide,.hover-slide-in,.hover-zoom,.hover-zoom-in{transform:translateZ(0)}}.slider .has-slide-effect{background-color:transparent!important;overflow:hidden}.slider .has-slide-effect .bg{opacity:0;transition:opacity 1s}.slide-zoom-in .bg,.slide-zoom-in-fast .bg{transform:scale(1)}.slide-zoom-out .bg,.slide-zoom-out-fast .bg{transform:scale(1.2)}.has-slide-effect.is-selected .bg{opacity:1;transform:scale(1);transition:opacity 1s,transform 20s ease-out}.slide-fade-in.is-selected .bg{transition:opacity 3.5s}.slide-fade-in-fast.is-selected .bg{transition:opacity 1.5s}.slide-zoom-in-fast.is-selected .bg,.slide-zoom-in.is-selected .bg{transform:scale(1.2)}.slide-zoom-out-fast.is-selected .bg{transition:opacity 1s,transform 5s ease-out}.tooltipster-base{display:flex;pointer-events:none;position:absolute}.tooltipster-box{flex:1 1 auto}.tooltipster-content{box-sizing:border-box;font-family:Arial,sans-serif;font-size:14px;line-height:16px;max-height:100%;max-width:100%;overflow:auto;padding:8px 10px}.tooltipster-ruler{bottom:0;left:0;overflow:hidden;position:fixed;right:0;top:0;visibility:hidden}.tooltipster-fade{opacity:0;transition-property:opacity}.tooltipster-fade.tooltipster-show{opacity:1}.tooltipster-sidetip.tooltipster-default .tooltipster-box{background:var(--tooltip-bg-color);border:2px solid var(--tooltip-bg-color);border-radius:4px}.tooltipster-sidetip.tooltipster-default.tooltipster-bottom .tooltipster-box{margin-top:8px}.tooltipster-sidetip.tooltipster-default.tooltipster-left .tooltipster-box{margin-right:8px}.tooltipster-sidetip.tooltipster-default.tooltipster-right .tooltipster-box{margin-left:8px}.tooltipster-sidetip.tooltipster-default.tooltipster-top .tooltipster-box{margin-bottom:8px}.tooltipster-sidetip.tooltipster-default .tooltipster-content{color:var(--tooltip-color);padding:6px 8px}.tooltipster-sidetip.tooltipster-default .tooltipster-arrow{overflow:hidden;position:absolute}.tooltipster-sidetip.tooltipster-default.tooltipster-bottom .tooltipster-arrow{height:8px;margin-left:-8px;top:0;width:16px}.tooltipster-sidetip.tooltipster-default.tooltipster-left .tooltipster-arrow{height:16px;margin-top:-8px;right:0;top:0;width:8px}.tooltipster-sidetip.tooltipster-default.tooltipster-right .tooltipster-arrow{height:16px;left:0;margin-top:-8px;top:0;width:8px}.tooltipster-sidetip.tooltipster-default.tooltipster-top .tooltipster-arrow{bottom:0;height:8px;margin-left:-8px;width:16px}.tooltipster-sidetip.tooltipster-default .tooltipster-arrow-background,.tooltipster-sidetip.tooltipster-default .tooltipster-arrow-border{height:0;position:absolute;width:0}.tooltipster-sidetip.tooltipster-default .tooltipster-arrow-background{border:8px solid transparent}.tooltipster-sidetip.tooltipster-default.tooltipster-bottom .tooltipster-arrow-background{border-bottom-color:var(--tooltip-bg-color);left:0;top:3px}.tooltipster-sidetip.tooltipster-default.tooltipster-left .tooltipster-arrow-background{border-left-color:var(--tooltip-bg-color);left:-3px;top:0}.tooltipster-sidetip.tooltipster-default.tooltipster-right .tooltipster-arrow-background{border-right-color:var(--tooltip-bg-color);left:3px;top:0}.tooltipster-sidetip.tooltipster-default.tooltipster-top .tooltipster-arrow-background{border-top-color:var(--tooltip-bg-color);left:0;top:-3px}.tooltipster-sidetip.tooltipster-default .tooltipster-arrow-border{border:8px solid transparent;left:0;top:0}.tooltipster-sidetip.tooltipster-default.tooltipster-bottom .tooltipster-arrow-border{border-bottom-color:var(--tooltip-bg-color)}.tooltipster-sidetip.tooltipster-default.tooltipster-left .tooltipster-arrow-border{border-left-color:var(--tooltip-bg-color)}.tooltipster-sidetip.tooltipster-default.tooltipster-right .tooltipster-arrow-border{border-right-color:var(--tooltip-bg-color)}.tooltipster-sidetip.tooltipster-default.tooltipster-top .tooltipster-arrow-border{border-top-color:var(--tooltip-bg-color)}.tooltipster-sidetip.tooltipster-default .tooltipster-arrow-uncropped{position:relative}.tooltipster-sidetip.tooltipster-default.tooltipster-bottom .tooltipster-arrow-uncropped{top:-8px}.tooltipster-sidetip.tooltipster-default.tooltipster-right .tooltipster-arrow-uncropped{left:-8px}.dark,.dark p,.dark td{color:#f1f1f1}.dark .heading-font,.dark a.lead,.dark h1,.dark h2,.dark h3,.dark h4,.dark h5,.dark h6,.dark label,.hover-dark:hover a,.hover-dark:hover h1,.hover-dark:hover h2,.hover-dark:hover h3,.hover-dark:hover h4,.hover-dark:hover h5,.hover-dark:hover h6,.hover-dark:hover p{color:#fff}.dark .product-footer .woocommerce-tabs,.dark .product-section,.dark .stars a+a{border-color:hsla(0,0%,100%,.2)}.dark .nav-vertical li li.menu-item-has-children>a,.dark .nav-vertical-fly-out>li>a,.dark .nav-vertical>li>ul li a,.dark .nav>li.html,.dark .nav>li>a,.nav-dark .is-outline,.nav-dark .nav>li>a,.nav-dark .nav>li>button,.nav-dropdown.dark .nav-column>li>a,.nav-dropdown.dark>li>a{color:hsla(0,0%,100%,.8)}.dark .nav-vertical-fly-out>li>a:hover,.dark .nav>li.active>a,.dark .nav>li>a.active,.dark .nav>li>a:hover,.nav-dark .nav>li.active>a,.nav-dark .nav>li.current>a,.nav-dark .nav>li>a.active,.nav-dark .nav>li>a:hover,.nav-dark a.plain:hover,.nav-dropdown.dark .nav-column>li>a:hover,.nav-dropdown.dark>li>a:hover{color:#fff}.dark.nav-dropdown.nav-dropdown-bold>li.nav-dropdown-col,.dark.nav-dropdown.nav-dropdown-simple>li.nav-dropdown-col,.nav-dark .header-divider:after,.nav-dark .nav-divided>li+li>a:after,.nav-dark .nav>li.header-divider,.nav-dropdown.dark .nav-column>li>a,.nav-dropdown.dark>li>a{border-color:hsla(0,0%,100%,.2)}.dark .nav-vertical li li.menu-item-has-children>a,.nav-dark .header-button,.nav-dark .nav-vertical li li.menu-item-has-children>a,.nav-dark .nav>li.html{color:#fff}.nav-box a:hover span.amount,.nav-dark span.amount{color:currentColor}:host{--flatsome-scroll-padding-top:calc(var(--flatsome--header--sticky-height, 0px) + var(--wp-admin--admin-bar--height, 0px))}:host{overflow-x:hidden;scroll-padding-top:var(--flatsome-scroll-padding-top)}@supports(overflow:clip){:host{overflow-x:clip}}#main,#wrapper{background-color:#fff;position:relative}#main.dark{background-color:#333}.page-wrapper{padding-bottom:30px;padding-top:30px}.page-wrapper-full{padding-top:0}.is-sticky-column__inner{display:flow-root}@media(min-width:850px){.is-sticky-column{position:sticky}.is-sticky-column[data-sticky-mode]{transform:translateZ(0);will-change:transform}.is-sticky-column:not([data-sticky-mode]){top:calc(var(--flatsome-scroll-padding-top) + 30px);transition:top .6s}}.ux-body-overlay{background-color:rgba(0,0,0,.3);bottom:0;display:block;height:100%;left:0;opacity:0;position:fixed;right:0;top:0;transition:visibility .3s,opacity .3s ease-in-out;visibility:hidden;width:100%;z-index:29}.ux-body-overlay--click-active,.ux-body-overlay--hover-active{opacity:1;visibility:visible}.header,.header-wrapper{background-position:50% 0;background-size:cover;position:relative;transition:background-color .3s,opacity .3s;width:100%;z-index:1001}.header-bg-color{background-color:hsla(0,0%,100%,.9)}.header-bottom,.header-top{align-items:center;display:flex;flex-wrap:no-wrap}.header.has-transparent,.header.show-on-scroll,.header.transparent{position:absolute}.header.show-on-scroll:not(.stuck),.header.transparent:not(.stuck){left:auto;right:auto}.header.show-on-scroll .header-wrapper{opacity:0;transition:opacity .3s;visibility:hidden}.header.show-on-scroll .header-wrapper.stuck{opacity:1;visibility:visible}.header.transparent .header-bg-color,.header.transparent .header-bg-image,.header.transparent .header-bottom,.header.transparent .header-wrapper{background-color:transparent;background-image:none!important;box-shadow:none}.header-bg-color,.header-bg-image{background-position:50% 0;transition:background .4s}.header-top{background-color:var(--fs-color-primary);min-height:20px;position:relative;z-index:11}.header-main{position:relative;z-index:10}.header-bottom{min-height:35px;position:relative;z-index:9}.top-divider{border-top:1px solid;margin-bottom:-1px;opacity:.1}.nav-dark .top-divider{display:none}.stuck{left:0;margin:0 auto;position:fixed;right:0;top:0}.sticky-jump .stuck:not(.ux-no-animation){animation:stuckMoveDown .6s}.sticky-fade .stuck:not(.ux-no-animation){animation:stuckFadeIn .6s}.sticky-shrink .stuck .header-main{transition:height .8s}.stuck .header-inner,.stuck .logo,.stuck .logo img{margin-top:0;padding-top:0}.header-wrapper:not(.stuck) .logo img{transition:max-height .5s}.header.show-on-scroll .hide-for-sticky,.stuck .hide-for-sticky{display:none}.header-shadow .header-wrapper,.header-wrapper.stuck,.layout-shadow #wrapper{box-shadow:1px 1px 10px rgba(0,0,0,.15)}.nav>li.header-divider{border-left:1px solid rgba(0,0,0,.1);height:30px;margin:0 7.5px;position:relative;vertical-align:middle}.nav-dark .nav>li.header-divider{border-color:hsla(0,0%,100%,.1)}.header-block{min-height:15px;width:100%}.header-full-width .container{max-width:100%!important}@media(prefers-reduced-motion){.sticky-jump .stuck{animation-name:stuckFadeIn}}@media(max-width:549px){.nav-mobile>li>a:not(.button){line-height:5em}}.post{margin:0 0 30px}.masonery .post{margin-bottom:0}.entry-header-text{padding:1.5em 0}.entry-header-text.text-center{padding-left:1.5em;padding-right:1.5em}.entry-header-text-top{padding-top:0}.entry-header-text-bottom{padding-bottom:0}.entry-content{padding-bottom:1.5em;padding-top:1.5em}.masonery .article-inner .box{margin-bottom:1.5em}.article-inner{transition:opacity .3s,box-shadow .5s,transform .3s}.blog-featured-title+#main .post-sidebar{padding-top:30px}.from_the_blog_comments{opacity:.8;padding-top:7px}.article-inner.has-shadow{background-color:#fff}.article-inner.has-shadow .author-box,.article-inner.has-shadow .entry-content,.article-inner.has-shadow .entry-header-text,.article-inner.has-shadow footer.entry-meta{padding-left:1.5em;padding-right:1.5em}.article-inner.has-shadow .entry-header-text-top{padding-top:1.5em}.entry-author{padding:2em 0}.banner h2.entry-title{font-size:2em}.badge.post-date{top:7%}.entry-image img{width:100%}.entry-image-float{position:relative}@media(min-width:850px){.entry-image-float{float:left;margin-right:2em;max-width:50%}.entry-image-float+.entry-content{padding-top:0}}.post .entry-summary p:last-of-type{margin-bottom:0}footer.entry-meta{border-bottom:2px solid #ececec;border-top:1px solid #ececec;font-size:.8em;padding:.5em 0 .6em}li.recentcomments{padding:7px 0}li.recentcomments a{display:inline!important}.box-blog-post .is-divider{height:2px;margin-bottom:.5em;margin-top:.5em}.bypostauthor{display:block}.more-link{margin-top:1.5em}.updated:not(.published){display:none}@media(min-width:850px){.alignleft{display:inline;float:left;margin-right:1.5em}.alignright{display:inline;float:right;margin-left:1.5em}.aligncenter{clear:both;display:block;margin:0 auto}}.wp-caption{margin-bottom:2em;max-width:100%}.wp-caption .wp-caption-text{background:rgba(0,0,0,.05);font-size:.9em;font-style:italic;padding:.4em}.wp-caption-text{text-align:center}img.size-full.alignnone{margin-bottom:2em}.row .entry-content .gallery{padding:0}.gallery-caption{display:block}.comment-content .wp-smiley,.entry-content .wp-smiley,.page-content .wp-smiley{border:none;margin-bottom:0;margin-top:0;padding:0}.widget{margin-bottom:1.5em}.widget ul{margin:0}.widget li{list-style:none}.widgets-boxed .widget,.widgets-framed .widget{background-color:#fff;border:1px solid #ddd;box-shadow:2px 2px 10px 0 rgba(0,0,0,.05);padding:15px 20px}.widgets-boxed .widget h3{background-color:var(--fs-color-primary);color:#fff;margin-left:-21px;margin-top:-16px;padding:10px 20px;width:calc(100% + 42px)}.widgets-boxed h3+.is-divider{display:none}.widget>ul>li,ul.menu>li{list-style:none;margin:0;text-align:left}.widget>ul>li li,ul.menu>li li{list-style:none}.widget>ul>li>a,.widget>ul>li>span:first-child,ul.menu>li>a,ul.menu>li>span:first-child{display:inline-block;flex:1;padding:6px 0}.widget>ul>li:before,ul.menu>li:before{display:inline-block;font-family:fl-icons;margin-right:6px;opacity:.6}.widget>ul>li li>a,ul.menu>li li>a{display:inline-block;font-size:.9em;padding:3px 0}.widget>ul>li+li,ul.menu>li+li{border-top:1px solid #ececec}.dark .widget>ul>li+li,.dark ul.menu>li+li{border-color:hsla(0,0%,100%,.08)}.widget>ul>li ul,ul.menu>li ul{border-left:1px solid #ddd;display:none;margin:0 0 10px 3px;padding-left:15px;width:100%}.widget>ul>li ul li,ul.menu>li ul li{border:0;margin:0}.dark .widget>ul>li ul,.dark ul.menu>li ul{border-color:hsla(0,0%,100%,.08)}.dark .widget>ul>li.active>a,.dark .widget>ul>li.current-cat>a,.dark .widget>ul>li>a:hover,.dark ul.menu>li.active>a,.dark ul.menu>li.current-cat>a,.dark ul.menu>li>a:hover{color:#fff}.widget>ul>li.has-child,ul.menu>li.has-child{align-items:center;display:flex;flex-flow:row wrap}.widget>ul>li .count{font-size:.7em;line-height:3em;opacity:.5}.widget .current-cat-parent>ul,.widget .current>ul{display:block}.widget .current-cat>a{color:#000;font-weight:bolder}.recent-blog-posts{padding:10px 0}.recent-blog-posts a{display:block;line-height:1.2;margin-bottom:6px}.widget .instagram-pics:after{clear:both;content:"";display:table}.widget .instagram-pics>li{border:0;float:left;list-style:none;margin:0;padding:0;width:33.333333%}.widget .instagram-pics>li a{display:block;margin:0;padding:0}.widget .instagram-pics>li img{display:block;width:100%}.widget_layered_nav li{align-items:center;display:flex}.widget_display-latest-tweets li{font-size:.9em;font-style:italic}.widget_display-latest-tweets a{display:inline!important}.widget_display-latest-tweets span{display:block;font-weight:bolder}.wpcf7{color:#333;position:relative}.wpcf7 .ajax-loader{display:none!important}.dark .wpcf7{color:#fff}.wpcf7 p{margin:0;padding:0}.wpcf7 br{display:none}.wpcf7 label{display:inline-block;width:100%}.wpcf7 span.wpcf7-list-item{margin-left:0;margin-right:1.2em}.wpcf7 .wpcf7-form-control-wrap{display:block}.wpcf7 .ajax-loader{background-color:#fff;border-radius:99px;position:absolute;right:0}.wpcf7 .wpcf7-not-valid-tip{background-color:#f1f1f1;border-radius:3px;color:var(--fs-color-alert);line-height:1.2em;margin-top:-10px;opacity:.8;padding:5px 8px;position:relative}.wpcf7 .wpcf7-not-valid-tip:after{border:10px solid rgba(136,183,213,0);border-bottom-color:#f1f1f1;bottom:100%;content:" ";height:0;left:30px;margin-left:-10px;pointer-events:none;position:absolute;width:0}.wpcf7 .wpcf7-validation-errors{display:none!important}.wpcf7 .flex-col .wpcf7-not-valid-tip{margin-top:5px;position:absolute;width:100%;z-index:99}.wpcf7 .wpcf7-response-output{border-radius:10px;margin:5px 0 0}.wpcf7-form .processing *{opacity:.8}.password-required form.post-password-form{margin:0 auto;max-width:620px;padding:30px 15px}.portfolio-inner img{width:100%}.portfolio-bottom{margin-bottom:-1px}.row+.portfolio-related .portfolio-element-wrapper{margin-top:30px}.accordion-inner{display:none;padding:1em 2.3em}.accordion-title{border-top:1px solid #ddd;display:block;font-size:110%;padding:.6em 2.3em;position:relative;transition:border .2s ease-out,background-color .3s}.dark .accordion-title{border-color:hsla(0,0%,100%,.2)}.accordion-title.active{background-color:rgba(0,0,0,.03);border-color:var(--fs-color-primary);color:var(--fs-color-primary);font-weight:700}.dark .accordion-title.active{color:#fff}.accordion .toggle{border-radius:999px;height:1.5em;left:0;margin-right:5px;position:absolute;top:.3em;transform-origin:50% 47%;width:2.3em}.accordion .active .toggle{color:currentColor;opacity:1}.breadcrumbs{color:#222;font-weight:700;letter-spacing:0;padding:0}.product-info .breadcrumbs{font-size:.85em;margin:0 0 .5em}.breadcrumbs .divider,.breadcrumbs .separator{font-weight:300;margin:0 .3em;opacity:.35;position:relative;top:0}.dark .breadcrumbs{color:#fff}.breadcrumbs a{color:hsla(0,0%,40%,.7);font-weight:400}.breadcrumbs a:first-of-type{margin-left:0}.breadcrumbs a.current,.breadcrumbs a:hover{color:#111}.dark .breadcrumbs a{color:#fff}.checkout-breadcrumbs{padding:15px 0}.checkout-breadcrumbs a{align-items:center;color:#ccc;display:inline-flex}.checkout-breadcrumbs .divider{margin:0 .5em;top:2px}.breadcrumb-step{background-color:#ccc;border-radius:99px;color:#fff;display:inline-block;font-size:.7em;font-weight:bolder;height:1.5em;line-height:1.5em;margin:0 .5em;position:relative;text-align:center;width:1.5em}.current .breadcrumb-step{background-color:var(--fs-color-secondary)}@media(min-width:850px){.comment-form{display:flex;flex-flow:row wrap;margin-left:-15px;margin-right:-15px}.comment-form>div,.comment-form>p{padding:0 15px;width:100%}.comment-form p.comment-form-author,.comment-form p.comment-form-email,.comment-form p.comment-form-url{flex:1}}.comment-inner:target{background-color:#f1f1f1;border-radius:10px;padding:15px}.comment-list li,.commentlist li{list-style:none;padding:1em 0 0}.comment-list li .meta,.commentlist li .meta{margin-bottom:0}.comment-list li .avatar,.commentlist li .avatar{border-radius:100%}.comment-list li .description,.commentlist li .description{font-style:italic}.comment-list li .comment-text,.commentlist li .comment-text{padding:0 1.5em}.comment-list>li:not(:first-child),.commentlist>li:not(:first-child){border-top:1px dashed #ddd}#comments .comment-respond{background-color:rgba(0,0,0,.05);margin-top:15px;padding:15px 25px 0}#comments .comment-respond .comment-reply-title{font-size:1.2em}#comments .comment-respond small{font-size:.6em;margin-left:10px;text-transform:uppercase}.footer-wrapper{position:relative;width:100%}.footer{padding:30px 0 0}.footer-1{background-color:#fff}.footer-2{background-color:#777}.footer-1,.footer-2{border-top:1px solid rgba(0,0,0,.05)}.footer-secondary{padding:7.5px 0}.absolute-footer,:host{background-color:#5b5b5b}.footer ul{margin:0}.absolute-footer{color:rgba(0,0,0,.5);font-size:.9em;padding:10px 0 15px}.absolute-footer.dark{color:hsla(0,0%,100%,.5)}.absolute-footer.fixed{background-color:transparent;bottom:0;color:#fff;left:0;padding:7.5px 15px;right:0;text-shadow:1px 1px 1px rgba(0,0,0,.7);z-index:101}.absolute-footer ul{border-bottom:1px solid #ddd;opacity:.8;padding-bottom:5px}.absolute-footer.dark ul{border-color:hsla(0,0%,100%,.08)}.absolute-footer.text-center ul{border:0;padding-top:5px}.reveal-footer{box-shadow:0 0 20px 0 rgba(0,0,0,.5);margin-bottom:100px;position:relative;z-index:1}.reveal-footer+.footer-wrapper{bottom:0;position:fixed;z-index:0}.back-to-top{bottom:20px;margin:0;opacity:0;pointer-events:none;right:20px;transform:translateY(30%)}.back-to-top.left{left:20px;right:unset}.back-to-top.active{opacity:1;pointer-events:inherit;transform:translateY(0)}.instagram-image-container{display:block;padding-bottom:100%}.instagram-image-container a>img{font-family:"object-fit: cover;";height:100%;left:0;-o-object-fit:cover;object-fit:cover;position:absolute;width:100%}.instagram-image-type--placeholder img{background-color:rgba(0,0,0,.03)}.logo{line-height:1;margin:0}.logo-tagline{font-size:.9em;font-style:italic;line-height:1;margin:.85em 0}.logo a{color:var(--fs-color-primary);display:block;font-size:32px;font-weight:bolder;margin:0;text-decoration:none;text-transform:uppercase}.logo img{display:block;width:auto}.header-logo-dark,.header-logo-sticky,.nav-dark .header-logo,.sticky .dark .header-logo-dark,.sticky .has-sticky-logo .header-logo{display:none!important}.nav-dark .header-logo-dark,.stuck .header-logo-sticky{display:block!important}.stuck .header-logo-sticky+img,.stuck .header-logo-sticky+img+img{display:none!important}.nav-dark .logo a,.nav-dark .logo-tagline{color:#fff}.logo-left .logo{margin-left:0;margin-right:30px}.logo-center .flex-left{flex:1 1 0;order:1}.logo-center .logo{margin:0 30px;order:2;text-align:center}.logo-center .logo img{margin:0 auto}.logo-center .flex-right{flex:1 1 0;order:3}@media screen and (max-width:849px){.header-inner .nav{flex-wrap:nowrap}.medium-logo-left .logo{margin-left:0;margin-right:15px;order:1}.medium-logo-left .flex-left{flex:1 1 0;order:2}.medium-logo-left .flex-right{flex:1 1 0;order:3}.medium-logo-center .flex-left{flex:1 1 0;order:1}.medium-logo-center .logo{margin:0 15px;order:2;text-align:center}.medium-logo-center .logo img{margin:0 auto}.medium-logo-center .flex-right{flex:1 1 0;order:3}}.ux-lottie{height:300px}.map-height{height:400px}.map-inner{background-color:#fff;background-color:hsla(0,0%,100%,.9);padding:20px}.google-map .gm-style button{max-width:none!important;min-height:auto!important}.google-map .gm-style .gm-style-mtc li{margin:0}.message-box{background-color:#f1f1f1;padding-left:30px;padding-right:30px}.message-box.dark{background-color:#333}.message-box .col,.message-box .col-inner,.message-box .row{padding-bottom:0!important;padding-top:0!important}.next-prev-thumbs li{display:inline-block;margin:0 1px!important;position:relative}.next-prev-thumbs li .button{margin-bottom:0}.next-prev-thumbs .nav-dropdown{min-width:90px;padding:2px;width:90px}.page-title{position:relative}.page-title .widget{margin:0 .3em;vertical-align:middle}.page-title-bg{overflow:hidden}.title-bg{transition:opacity .6s}.title-overlay{background-color:rgba(0,0,0,.25)}.page-title-inner{min-height:60px;padding-top:20px;position:relative}.page-title-inner button,.page-title-inner form,.page-title-inner p,.page-title-inner select,.page-title-inner ul{margin-bottom:0;margin-top:0}.normal-title{background-color:#f7f7f7;border-bottom:1px solid #ececec;border-top:1px solid #ececec}.normal-title .page-title-inner{padding-bottom:15px;padding-top:15px}.featured-title{background-color:var(--fs-color-primary);text-shadow:1px 1px 1px rgba(0,0,0,.2)}.featured-title .page-title-inner{padding-bottom:20px}.featured-title .page-title-bg{box-shadow:inset 0 0 30px 0 rgba(0,0,0,.1)}.featured-title .overlay{background-color:rgba(0,0,0,.4)}.payment-icons .payment-icon{background-color:rgba(0,0,0,.1);border-radius:5px;display:inline-block;margin:3px 3px 0;opacity:.6;padding:3px 5px 5px;transition:opacity .3s}.payment-icons .payment-icon svg{height:20px;vertical-align:middle;width:auto!important}.payment-icons .payment-icon:hover{opacity:1}.dark .payment-icons .payment-icon{background-color:hsla(0,0%,100%,.1)}.dark .payment-icons .payment-icon svg{fill:#fff}.pricing-table{background-color:#fff;border:1px solid #ececec;overflow:hidden;padding-bottom:15px}.dark .pricing-table{border-color:hsla(0,0%,100%,.2)}.pricing-table .title{border-bottom:1px solid #ececec;padding:.5em 15%}.dark .pricing-table .title{border-color:hsla(0,0%,100%,.2)}.pricing-table .price{color:#000;font-weight:300;padding:.6em 15% 0}.pricing-table .description{padding:15px 15px 0}.pricing-table .items{padding:10px 15%}.pricing-table .is-disabled{opacity:.6;text-decoration:line-through}.pricing-table .items .button:last-child{margin:30px 0 0}.pricing-table .bullet-more-info{font-size:14px;margin-left:10px}.pricing-table .items>div{border-bottom:1px solid #ececec;padding:7.5px 0}.dark .pricing-table .items>div{border-color:hsla(0,0%,100%,.08)}.dark .pricing-table{background-color:#333}.pricing-table .title{background-color:rgba(0,0,0,.02)}.featured-table{border-color:var(--fs-color-primary);border-width:2px;margin-top:-15px}.featured-table .title{background-color:var(--fs-color-primary);border-color:var(--fs-color-primary);color:#fff}.scroll-to{width:100%}.scroll-to-bullets{max-height:100vh;overflow:hidden;position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:999}.scroll-to-bullets a{background-color:var(--fs-color-primary);border:3px solid transparent;border-radius:30px;box-shadow:1px 1px 1px rgba(0,0,0,.3);display:block;height:15px;margin:10px 15px;transition:all .3s;width:15px}.scroll-to-bullets a.active,.scroll-to-bullets a:hover{background-color:#fff;opacity:1}.scroll-to-bullets a.active{border-color:var(--fs-color-primary)}.sidebar-menu .search-form{display:block!important}.searchform-wrapper form{margin-bottom:0}.mobile-nav>.search-form,.sidebar-menu .search-form{padding:5px 0;width:100%}.form-flat .search-form-categories{padding-right:5px}.searchform-wrapper:not(.form-flat) .submit-button,.widget_search .submit-button{border-bottom-left-radius:0!important;border-top-left-radius:0!important}.searchform{position:relative}.searchform .button.icon{margin:0}.searchform .button.icon i{font-size:1.2em}.searchform-wrapper{width:100%}.searchform-wrapper.form-flat .submit-button.loading .icon-search{opacity:0}.searchform-wrapper.form-flat .submit-button.loading:after{border-color:currentColor}.searchform-wrapper.form-flat .flex-col:last-of-type{margin-left:-2.9em}@media(max-width:849px){.searchform-wrapper{font-size:1rem}}.searchform-wrapper .autocomplete-suggestions{-webkit-overflow-scrolling:touch;max-height:50vh;overflow-y:scroll;overflow-y:auto}.header .search-form .autocomplete-suggestions,.header-block .autocomplete-suggestions{max-height:80vh}.col .live-search-results,.header .search-form .live-search-results,.header-block .live-search-results{background-color:hsla(0,0%,100%,.95);box-shadow:0 0 10px 0 rgba(0,0,0,.1);color:#111;left:0;position:absolute;right:0;text-align:left;top:105%}.header li .html .live-search-results{background-color:transparent;box-shadow:none;position:relative;top:0}.autocomplete-suggestion{align-items:center;border-bottom:1px solid rgba(0,0,0,.05);cursor:default;display:flex;padding:10px .75em}.autocomplete-suggestion .search-name{flex:1}.autocomplete-suggestion img{border-radius:99px;display:inline-block;height:40px;margin-right:10px;width:40px}.autocomplete-suggestion img+.search-name{margin-top:-.15em;padding-left:.5em}.autocomplete-suggestion .search-price{font-size:.8em;margin-left:5px;padding-top:3px}.autocomplete-suggestion:last-child{border-bottom:none}.autocomplete-selected{background-color:rgba(0,0,0,.05)}#search-lightbox{font-size:1.5em;margin:0 auto;max-width:600px}.section-title-container{margin-bottom:1.5em}.banner+.section-title-container,.row-collapse+.section-title-container,.slider-wrapper+.section-title-container{margin-top:30px}.section-title{align-items:center;display:flex;flex-flow:row wrap;justify-content:space-between;position:relative;width:100%}.section-title i{margin-right:.5em;opacity:.6}.section-title i.icon-angle-right{margin-left:10px;margin-right:0}.section-title span{text-transform:uppercase}.section-title small{font-size:1em;font-weight:400;opacity:.7;padding-left:15px;text-transform:none}.section-title b{background-color:currentColor;display:block;flex:1;height:2px;opacity:.1}.section-title a{display:block;font-size:.8em;margin-left:auto;padding-left:15px}.section-title-normal{border-bottom:2px solid #ececec}.section-title-normal span{border-bottom:2px solid rgba(0,0,0,.1);margin-bottom:-2px;margin-right:15px;padding-bottom:7.5px}.dark .section-title-normal,.dark .section-title-normal span{border-color:hsla(0,0%,100%,.2)}.section-title-normal b{display:none}.section-title-center span{margin:0 15px}.section-title-bold-center span,.section-title-center span{text-align:center}.section-title-bold-center small,.section-title-center small{display:block;padding:0 15px}.section-title-bold span,.section-title-bold-center span{border:2px solid rgba(0,0,0,.1);padding:.3em .8em}.section-title-bold b:first-of-type{display:none}.flatsome-cookies{background-color:#fff;bottom:0;box-shadow:0 0 9px rgba(0,0,0,.14);left:0;padding:15px 30px;position:fixed;right:0;top:auto;transform:translate3d(0,100%,0);transition:transform .35s ease;z-index:999}.flatsome-cookies__inner{align-items:center;display:flex;justify-content:space-between}.flatsome-cookies__text{flex:1 1 auto;padding-right:30px}.flatsome-cookies__buttons{flex:0 0 auto}.flatsome-cookies__buttons>a{margin-bottom:0;margin-right:20px}.flatsome-cookies__buttons>a:last-child{margin-right:0}.flatsome-cookies--inactive{transform:translate3d(0,100%,0)}.flatsome-cookies--active{transform:none}@media(max-width:849px){.flatsome-cookies__inner{align-items:stretch;flex-direction:column;font-size:.9em;text-align:center}.flatsome-cookies__buttons{margin-top:15px}.flatsome-cookies__text{padding-right:0}}.icon-lock:before{content:""}.icon-user-o:before{content:""}.icon-chat:before,.icon-line:before{content:""}.icon-user:before{content:""}.icon-shopping-cart:before{content:""}.icon-tumblr:before{content:""}.icon-gift:before{content:""}.icon-phone:before{content:""}.icon-play:before{content:""}.icon-menu:before{content:""}.icon-equalizer:before{content:""}.icon-shopping-basket:before{content:""}.icon-shopping-bag:before{content:""}.icon-google-plus:before{content:""}.icon-heart-o:before{content:""}.icon-heart:before{content:""}.icon-500px:before{content:""}.icon-vk:before{content:""}.icon-angle-left:before{content:""}.icon-angle-right:before{content:""}.icon-angle-up:before{content:""}.icon-angle-down:before{content:""}.icon-x:before{content:""}.icon-twitter:before{content:""}.icon-envelop:before{content:""}.icon-tag:before{content:""}.icon-star:before{content:""}.icon-star-o:before{content:""}.icon-facebook:before{content:""}.icon-feed:before{content:""}.icon-checkmark:before{content:""}.icon-plus:before{content:""}.icon-cross:before{content:""}.icon-instagram:before{content:""}.icon-tiktok:before{content:""}.icon-pinterest:before{content:""}.icon-search:before{content:""}.icon-skype:before{content:""}.icon-dribbble:before{content:""}.icon-certificate:before{content:""}.icon-expand:before{content:""}.icon-linkedin:before{content:""}.icon-map-pin-fill:before{content:""}.icon-pen-alt-fill:before{content:""}.icon-youtube:before{content:""}.icon-flickr:before{content:""}.icon-clock:before{content:""}.icon-snapchat:before{content:""}.icon-whatsapp:before{content:""}.icon-telegram:before{content:""}.icon-twitch:before{content:""}.icon-discord:before{content:""}.icon-threads:before{content:""}.ux-shop-ajax-filters .widget_price_filter .price_slider_amount .button{display:none}.ux-shape-divider{--divider-top-width:100%;--divider-width:100%;left:0;line-height:0;overflow:hidden;position:absolute;width:100%}.ux-shape-divider svg{display:block;height:150px;left:50%;position:relative;transform:translateX(-50%)}.ux-shape-divider--top{top:-1px;transform:rotate(180deg)}.ux-shape-divider--top svg{width:calc(var(--divider-top-width) + 2px)}.ux-shape-divider--bottom{bottom:-1px}.ux-shape-divider--bottom svg{width:calc(var(--divider-width) + 2px)}.ux-shape-divider--flip svg{transform:translateX(-50%) rotateY(180deg)}.ux-shape-divider--to-front{z-index:2}.ux-shape-divider .ux-shape-fill{fill:#fff}.text-center .social-icons{margin-left:auto;margin-right:auto}.social-icons{color:#999;display:inline-block;font-size:.85em;vertical-align:middle}.html .social-icons{font-size:1em}.html .social-icons .button{margin-bottom:0}.social-icons span{font-weight:700;padding-right:10px}.social-icons i{min-width:1em}.dark .social-icons,.nav-dark .social-icons{color:#fff}.dark .social-icons .button.is-outline,.nav-dark .social-icons .button.is-outline{border-color:hsla(0,0%,100%,.5)}.social-button,.social-icons .button.icon:hover,.social-icons .button.icon:not(.is-outline){background-color:currentColor!important;border-color:currentColor!important}.social-button>i,.social-button>span,.social-icons .button.icon:hover>i,.social-icons .button.icon:hover>span,.social-icons .button.icon:not(.is-outline)>i,.social-icons .button.icon:not(.is-outline)>span{color:#fff!important}.button.facebook:hover,.button.facebook:not(.is-outline){color:#3a589d!important}.button.instagram:hover,.button.instagram:not(.is-outline){color:#3b6994!important}.button.whatsapp:hover,.button.whatsapp:not(.is-outline){color:#51cb5a!important}.button.x:hover,.button.x:not(.is-outline){color:#111!important}.button.twitter:hover,.button.twitter:not(.is-outline){color:#2478ba!important}.button.email:hover,.button.email:not(.is-outline),.button.threads:hover,.button.threads:not(.is-outline),.button.tiktok:hover,.button.tiktok:not(.is-outline){color:#111!important}.button.phone:hover,.button.phone:not(.is-outline){color:#51cb5a!important}.button.pinterest:hover,.button.pinterest:not(.is-outline){color:#cb2320!important}.button.rss:hover,.button.rss:not(.is-outline){color:#fc7600!important}.button.tumblr:hover,.button.tumblr:not(.is-outline){color:#36455d!important}.button.vk:hover,.button.vk:not(.is-outline){color:#527498!important}.button.google-plus:hover,.button.google-plus:not(.is-outline){color:#dd4e31!important}.button.linkedin:hover,.button.linkedin:not(.is-outline){color:#0072b7!important}.button.youtube:hover,.button.youtube:not(.is-outline){color:#c33223!important}.button.flickr:hover,.button.flickr:not(.is-outline){color:#e5086f!important}.button.snapchat:hover,.button.snapchat:not(.is-outline){color:#fff600!important}.button.snapchat:hover i,.button.snapchat:not(.is-outline) i{text-shadow:0 0 6px rgba(0,0,0,.4)}.button.px500:hover,.button.px500:not(.is-outline){color:#0099e5!important}.button.telegram:hover,.button.telegram:not(.is-outline){color:#54a9ea!important}.button.twitch:hover,.button.twitch:not(.is-outline){color:#9146fe!important}.button.discord:hover,.button.discord:not(.is-outline){color:#7189d9!important}.woocommerce-product-rating{position:relative;visibility:visible}.star-rating{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:block;font-family:fl-icons!important;font-size:16px;font-weight:400!important;height:1em;letter-spacing:0;line-height:1em;margin:.5em 0;overflow:hidden;position:relative;text-align:left;width:5.06em}.star-rating:before,.woocommerce-page .star-rating:before{color:var(--fs-color-secondary);content:"";float:left;left:0;position:absolute;top:0}.star-rating span{float:left;font-family:fl-icons!important;font-weight:400!important;height:10px;left:0;overflow:hidden;padding-top:1.5em;position:absolute;top:0;width:10px}.star-rating span:before{color:var(--fs-color-secondary);content:"";left:0;position:absolute;top:0}.star-rating--inline{display:inline-block;height:18px;vertical-align:middle}.woocommerce-review-link{font-size:90%}li.wc-layered-nav-rating{font-size:.8em}li.wc-layered-nav-rating .star-rating{display:inline-block;margin-bottom:0}.stars a{color:transparent!important;display:inline-block;font-family:fl-icons;font-size:16px;margin-left:-10px;overflow:hidden}.stars a+a{border-left:1px solid #ececec;margin-left:.3em}.stars a.active:after,.stars a:hover:after{color:var(--fs-color-secondary)}.stars a:after{color:#ddd;content:""}.stars a.star-2:after{content:""}.stars a.star-3:after{content:""}.stars a.star-4:after{content:""}.stars a.star-5:after{content:""}

/* t4-00-tokens-css */
/* ==========================================================================
   00-tokens.css — tách từ style.css ngày 17/08/2026 theo III.4.1.
   Nội dung bên dưới là NGUYÊN VĂN các mục §1 token màu/phông của bản gộp;
   không sửa một luật nào trong lần tách này.
   ========================================================================== */


/* ── §1 token màu/phông (dòng 32–64 của style.css cũ) ──────────────────── */

/* --------------------------------------------------------------------------
   1. TOKEN — bảng màu "4T Color Pallete" (đã xác minh từ Figma, xem style.css
      gốc của demo.tiepthitute.com — flatsome-child/style.css mục 1)
   -------------------------------------------------------------------------- */
:host {
  --t4-dark-moss:    #155446; /* Dark Moss Green — footer đậm, chữ nhấn      */
  --t4-leaf:         #458763; /* Leaf Green — nền header, chip nhãn section  */
  --t4-camel:        #CF9156; /* Camel Brown — nút chính                     */
  --t4-camel-dark:   #B77537; /* Dark Camel — hover nút chính                */
  --t4-camel-border: #AF6928; /* viền + chữ nút trắng                        */

  --t4-light: #FCFBF6; /* nền trang                                          */
  --t4-cream: #EFE8DA; /* kem — điểm đậm nhất của 2 gradient section         */

  --t4-text:  #1F1F1F;
  --t4-gray:  #3B3B3B;
  --t4-ink:   #252930;
  --t4-muted: #5E5E5E;
  --t4-white: #FFFFFF;

  /* ── BỔ SUNG 17/08/2026 sau khi quét toàn file Figma (III.4.0) ───────────
     Bốn Color Style dưới đây ĐANG ĐƯỢC DÙNG THẬT trong thiết kế mà token
     chưa hề có. Số liệu từ 'uxb/kho-style-chung.md'.

     ⚠ Thêm biến KHÔNG đổi kết xuất — chưa luật nào tham chiếu tới chúng.
     Việc thay các mã màu gõ tay rải rác bằng biến này là bước SAU, và mỗi
     lần thay phải đo lại (I.4).                                             */

  /* Figma "4T Color Pallete/Black" — 5 khung · 137 lớp.                     */
  --t4-black: #000000;

  /* ⛔ Figma có ĐÚNG HAI Color Style CÙNG TÊN "4T Color Pallete/Gray":
        #777777 — 35 khung · 273 lớp   ← bản dùng nhiều gấp ~12 lần
        #3B3B3B —  3 khung ·   7 lớp   ← đang là '--t4-gray' ở trên
     Tức '--t4-gray' hiện trỏ vào bản ÍT DÙNG. Không đổi ngay: đổi là lật
     màu ở mọi chỗ đang gọi '--t4-gray', phải đo lại từng trang. Đặt tên
     riêng cho bản kia và ghi mâu thuẫn vào 'qa/phan-hoi-figma.md'.          */
  --t4-gray-mid: #777777;

  /* Gradient xanh của Figma "Gradient 2" — 22 khung · 62 lớp.
     ⚠ Chỉ ghi CHẶN MÀU, KHÔNG ghi góc: góc phải suy từ
     'gradientHandlePositions' của từng chỗ dùng, đoán một góc chung rồi áp
     cho 22 khung là kiểu sai không ai soi ra. Nơi nào dùng thì khai góc tại
     đó và tham chiếu hai biến này.                                          */
  --t4-grad-leaf-1: #458763;
  --t4-grad-leaf-2: #155446;

  --t4-font-head: 'Playfair Display', Georgia, serif;
  --t4-font-body: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --t4-font-logo: 'Poltawski Nowy', Georgia, serif; /* riêng số "4" của logo */

  /* Figma vẽ trên khổ 1900px, nội dung thật rộng 1080px */
  --t4-container: 1080px;
  --t4-header-h: 76px;

  --t4-radius-card: 16px;
  --t4-radius-btn: 8px;
  --t4-shadow-card: 3px 3px 4px rgba(0, 0, 0, 0.25);

  /* ══ WAVE 4 · H — BIẾN THỂ DỄ ĐỌC, ĐẶT TÊN THEO VAI TRÒ ════════════════
     ⭐ VÌ SAO CÓ KHỐI NÀY — QUYẾT ĐỊNH CỦA CHỦ SẢN PHẨM, WAVE 4
     Wave 2 (Learning) và Wave 3 (Reporting) đều gặp cùng một chỗ hụt:
     `#FFFFFF` trên `#AF6928` = **4,31:1**, thiếu 0,19 so với 4,5 của chữ
     thường. Cả hai đợt chữa bằng cách NÂNG CỠ CHỮ lên 19px/700 để nhãn nút
     lọt vào diện "chữ lớn" (ngưỡng 3:1). Chủ sản phẩm đã bác cách đó ở
     Wave 4: **đây là workaround, không phải thiết kế** — nó bắt mọi nút
     hành động to bất thường chỉ vì một con số tương phản.

     ⇒ Cách đúng: giữ cỡ chữ theo thiết kế, hạ NỀN tối hơn một chút.

     ⛔ KHÔNG đổi màu thương hiệu gốc. Ba token dưới đây là BIẾN THỂ mới,
        ⛔ KHÔNG ghi đè `--t4-camel` / `--t4-camel-dark` / `--t4-camel-border`
        — ba màu đó giữ nguyên giá trị và nguyên vai trò (logo, viền, mảng
        trang trí, nét biểu đồ). Ai cần màu thương hiệu thì vẫn gọi đúng
        token cũ.

     ⭐ TÊN ĐẶT THEO VAI TRÒ, KHÔNG THEO MÀU — cùng luật mà
        `4t-reporting/resources/css/00-tokens.css` đã ghi: đặt tên theo màu
        (`--t4-camel-toi-hon`) là khoá cứng một sắc vào một chỗ dùng, đổi sắc
        là tên thành nói dối. "Hành động" thì mãi là hành động.

     Số đo (công thức độ sáng tương đối WCAG 2.x, 2 chữ số):
       #FFFFFF / #A66426 = **4,70 : 1**   ✅ đạt 4,5 ở MỌI cỡ chữ
       #FFFFFF / #85501E = **6,64 : 1**   ✅ trạng thái nhấn
       tỉ số giữa HAI NỀN (nghỉ ↔ nhấn) = **1,41 : 1** — CAO HƠN bậc cũ
       (#AF6928 → #8C5A2B = 1,35) nên bước hover không hề mờ đi.
     ⚠ `#A66426` chỉ tối hơn `#AF6928` **2 nấc L** trong HSL (L42 → L40), giữ
       nguyên sắc H≈29 và độ bão hoà — mắt đọc vẫn là đúng sắc camel của 4T.

     ⛔ ĐỪNG đổi một nửa: nền nghỉ và nền nhấn phải đổi CÙNG NHAU, nếu không
        hai trạng thái sẽ bằng nhau hoặc đảo bậc. Đổi thì TÍNH LẠI cả hai.
     Ca biên giữ token này khỏi trôi: `qa/w3-d/nguong-wcag.mjs` (mục CA_TOKEN)
     và `qa/lms/tu-kiem-tuong-phan.mjs`. Cả hai ĐỌC THẲNG tệp này. */
  --t4-hanh-dong-nen:      #A66426; /* nền nút hành động chính — trắng 4,70:1 */
  --t4-hanh-dong-nen-nhan: #85501E; /* hover · focus-visible · active — 6,64:1 */
  --t4-hanh-dong-chu:      #FFFFFF; /* chữ trên hai nền trên                  */

  /* ══ WAVE 5 · E — BA CẶP MÀU TRƯỢT AA, CHỮA TẠI TOKEN ══════════════════
     Wave 4 đo trên trang WordPress THẬT và gom 70 khối chữ trượt về ĐÚNG BA
     cặp màu. Ba token dưới đây là toàn bộ chỗ chữa — ⛔ KHÔNG sửa 70 bộ chọn.

       ① trắng trên Camel `#CF9156`          = 2,68 : 1   (cần 4,5)
       ② `#CF9156` làm CHỮ trên nền sáng     = 2,59 : 1   (cần 4,5)
       ③ trắng trên Lá `#458763`             = 4,29 : 1   (cần 4,5)

     ⭐ TÍNH LẠI BẰNG CÔNG THỨC WCAG 2.x (độ sáng tương đối), ⛔ không chép
        chú thích cũ. Số hai chữ số dưới đây là số tự tính trong Wave 5:

       ①  NỀN NÚT mang chữ trắng → `--t4-hanh-dong-nen` **#A66426**, GIỮ
           NGUYÊN mã Learning và Reporting đang dùng — ⛔ hai sản phẩm không
           được trôi khỏi nhau. `#FFFFFF / #A66426` = **4,70**  ✅
           Trạng thái nhấn: `--t4-hanh-dong-nen-nhan` **#85501E** = 6,64  ✅

       ②  CHỮ camel trên nền sáng → **#9E5F24**
                   #9E5F24 / #FFFFFF = **5,10**  ✅
                   #9E5F24 / #FCFBF6 = **4,92**  ✅  nền trang
                   #9E5F24 / #F8F5EE = **4,69**  ✅  các mảng kem nhạt
                   #9E5F24 / #EFE8DA = **4,19**  — chỉ gặp ở chữ LỚN (32/700,
                                                   ngưỡng 3) nên vẫn đạt
           ⚠ VÌ SAO KHÔNG DÙNG THẲNG #A66426 CHO CHỮ: `#A66426` chỉ đạt
             **4,31** trên `#F8F5EE` — và `.hl-camel` nằm trên đúng mảng đó ở
             33 khối chữ (xu-ly-loi-sai · google-merchant-center ·
             tracking-do-luong · google-map-local-seo). Nền nút và chữ là HAI
             VAI TRÒ; chênh nhau 2 nấc L thì mắt không tách được, mà phép đo
             thì tách được.

       ③  LÁ, cả nền lẫn chữ → **#3E7959** (một mã cho hai vai trò: nút viền
           lá và nút tô lá đứng cạnh nhau, lệch sắc là thấy ngay)
                   #FFFFFF / #3E7959 = **5,14**  ✅
                   #FCFBF6 / #3E7959 = **4,96**  ✅  chữ kem trên mảng lá
                   #3E7959 / #FFFFFF = **5,14**  ✅
                   #3E7959 / #F8F5EE = **4,72**  ✅
                   #3E7959 / #F0F0F0 = **4,51**  ✅  chip xám "Video"

     ⭐ DELTA NHỎ NHẤT ĐO ĐƯỢC, KHÔNG PHẢI ĐOÁN — giữ NGUYÊN sắc (H) và độ
        bão hoà (S) trong HSL, chỉ hạ ĐỘ SÁNG, và dừng ở nấc ĐẦU TIÊN vượt
        4,5 trên MỌI mặt nền mà màu đó thật sự rơi lên (đo trên 25 trang):
          #458763 = H147,3 · S32,4 · L40  →  #3E7959 = H147,5 · S32,2 · L36
          #A66426 = H29,1  · S62,7 · L40  →  #9E5F24 = H29,1  · S62,7 · L38
        Mắt vẫn đọc ra đúng xanh lá / camel của 4T; không bước nhảy tông.

     ⛔ KHÔNG đổi `--t4-camel` / `--t4-camel-dark` / `--t4-camel-border` —
        ba mã đó là BẢN SẮC GỐC, còn nguyên vai trò logo · viền trang trí ·
        chấm tròn · nét biểu đồ · fill SVG. Ai cần màu thương hiệu vẫn gọi
        token cũ. Ba token dưới đây chỉ dành cho CHỮ và cho NỀN MANG CHỮ.

     ⛔ KHÔNG đổi `--t4-leaf` bằng cách ghi đè giá trị của nó: `--t4-leaf`
        còn làm chặn gradient, nét đứt, vành focus, fill SVG — những chỗ
        KHÔNG cần 4,5 và không nên đổi chỉ vì một phép đo chữ.

     ⛔ KHÔNG phóng cỡ chữ để lách ngưỡng — chủ sở hữu đã bác cách đó ở
        Wave 4 (xem khối ngay trên). Mọi cỡ chữ giữ nguyên theo thiết kế. */
  --t4-nhan-manh-chu: #9E5F24; /* camel làm CHỮ/VIỀN trên nền sáng          */
  --t4-mang-la-nen:   #3E7959; /* lá làm NỀN mang chữ trắng/kem             */
  --t4-mang-la-chu:   #3E7959; /* lá làm CHỮ trên nền sáng — CÙNG mã với nền */
}

/* ══════════════════════════════════════════════════════════════════════════
   WAVE 5 · E — BIÊN BẢN ĐỐI CHIẾU NHẬN DIỆN SAU KHI ĐỔI MÀU
   ⭐ Để ở ĐÂY chứ không ở `qa/`: người sau sửa ba token trên sẽ đọc dòng này
      TRƯỚC khi sửa, chứ không ai đi lục biên bản.
   ══════════════════════════════════════════════════════════════════════════

   PHÉP ĐO: nạp HTML THẬT của tiepthitute.com, tráo `flatsome-child/css/` bằng
   hai bộ — bản HEAD trước Wave 5 và bản này — rồi so TỪNG phần tử: hộp bao
   (left/top/width/height), `font-size`, `font-weight`, `color`,
   `background-color`, `border-top-color`.
   8 trang × 2 khổ (375 · 1024) = **6.357 phần tử**.

     HÌNH HỌC LỆCH            0   (ngoài nhiễu của widget Google Translate
                                   nằm ngoài khung nhìn, toạ độ ≈ −973)
     CỠ CHỮ / CÂN CHỮ LỆCH    0   ⇒ ⛔ KHÔNG hề phóng cỡ chữ để lách ngưỡng
     MÀU ĐỔI                322   — và CHỈ gồm đúng NĂM phép đổi dưới đây:

       120 nền   #458763 → #3E7959      (mảng lá mang chữ trắng)
       111 viền  #458763 → #3E7959
        85 chữ   #458763 → #3E7959
       111 chữ   #CF9156 → #9E5F24      (camel làm chữ)
       111 viền  #CF9156 → #9E5F24
        29 nền   #CF9156 → #A66426      (nút hành động mang chữ trắng)
         2 viền  #CF9156 → #A66426
         5 chữ   #B77537 → #9E5F24
         5 viền  #B77537 → #9E5F24

   ⇒ Không một màu lạ nào lọt vào, không một hộp nào dời chỗ, không một cỡ
     chữ nào đổi. Logo là tệp ảnh/SVG — CSS không chạm tới, giữ nguyên bản sắc.
     Fill SVG trang trí, chấm tròn, dấu tích, nét biểu đồ vẫn gọi `--t4-camel`
     gốc `#CF9156`.

   KẾT QUẢ TƯƠNG PHẢN, 25 trang × 2 khổ (375 · 1024), 5.783 khối chữ:
     trước (CSS máy chủ)  **1.018** khối trượt thuộc ba nhóm
     sau   (CSS ở đây)    **1**     — và khối đó là CHỮ LỚN (26px/700, ngưỡng
                                      3) nằm trên ẢNH nền tối ở hero mobile
                                      `/ve-chung-toi/`; xem ghi chú tại
                                      `46-page-ve-chung-toi.css` §16.34.
     ⇒ vi phạm AA **chữ thường** thuộc ba nhóm đã biết: **0**
   ══════════════════════════════════════════════════════════════════════════ */


/* t4-10-base-css */
/* ==========================================================================
   10-base.css — tách từ style.css ngày 17/08/2026 theo III.4.1.
   Nội dung bên dưới là NGUYÊN VĂN các mục §2 nền & chữ toàn site của bản gộp;
   không sửa một luật nào trong lần tách này.
   ========================================================================== */


/* ── §2 nền & chữ toàn site (dòng 65–119 của style.css cũ) ──────────────────── */

/* --------------------------------------------------------------------------
   2. NỀN & CHỮ TOÀN SITE
   -------------------------------------------------------------------------- */
:host.t4 {
  background-color: var(--t4-light);
  font-family: var(--t4-font-body);
  font-size: 16px;
  line-height: 26px;
  color: var(--t4-text);
  margin: 0;
}

.t4 h1, .t4 h2, .t4 h3, .t4 h4, .t4 h5, .t4 h6 {
  font-family: var(--t4-font-head);
  color: var(--t4-text);
  margin: 0 0 16px;
}

.t4 h1, .t4-h1 { font-size: 50px; line-height: 60px; font-weight: 500; }
.t4 h2, .t4-h2 { font-size: 40px; line-height: 53px; font-weight: 600; color: var(--t4-dark-moss); }
.t4 h3, .t4-h3 { font-size: 24px; line-height: 32px; font-weight: 500; }

.t4 p { margin: 0 0 16px; }
.t4 a { color: inherit; }

.t4-lede { font-size: 20px; line-height: 35px; color: #252930; }

/* [phục vụ] dòng kicker chữ hoa đầu section | [trang] toàn site
   [figma] Text Style "Headline 20" — Manrope 800 20/35, giãn −0.2, 40 khung
   [lý do vượt panel] panel Text không có letter-spacing lẫn text-transform

   ⚠ 'letter-spacing' thêm 17/08/2026 khi quét kho style chung (III.4.0).
   Figma khai −0.2 ngay từ đầu; bộ đo KHÔNG hề kêu vì ngưỡng letter-spacing
   là 0,5px (I.2) nên −0,2 lúc nào cũng "đạt". Đây đúng kiểu sai cộng dồn đã
   ghi ở bàn giao: một dòng 30 ký tự lệch ~6px bề rộng mà bảng vẫn xanh. */
.t4-kicker {
  font-family: var(--t4-font-body);
  font-weight: 800;
  font-size: 20px;
  line-height: 35px;
  letter-spacing: -0.2px;
  text-transform: uppercase;
  color: var(--t4-gray);
  margin: 0;
}

.t4-italic { font-style: italic; font-weight: 400; }

.t4-hero-h1-mb strong,
#hanh-trinh h2 strong { font-weight: 700; }

.t4 .material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 250, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

@media (max-width: 849px) {
  .t4 h1, .t4-h1 { font-size: 32px; line-height: 42px; }
  .t4 h2, .t4-h2 { font-size: 32px; line-height: 43px; }
  .t4 h3, .t4-h3 { font-size: 20px; line-height: 28px; }
  .t4-lede   { font-size: 16px; line-height: 26px; }
  .t4-kicker { font-size: 15px; line-height: 26px; }
}



/* ══ DỜI TỪ '40-page-xu-ly-loi-sai-google-ads.css' (20/08/2026) ═══════════
   Gỡ khung mặc định của Flatsome quanh nội dung. Áp cho MỌI trang — khớp ở
   cả 8 trang thử khi đo bằng CSSOM, dù trước nay nằm trong mô-đun mang tên
   trang #4. Sau khi gỡ: '.section' rộng hết khung nhìn, bề rộng nội dung do
   '.row' quyết định (Figma dùng khung 1080). */
.t4 #content.page-wrapper > .row-main { max-width: none; margin: 0; }
.t4 #content.page-wrapper > .row-main > .col { padding: 0; }


/* ══ B1 · DẢI TRẮNG 30px TRÊN ĐẦU MỌI TRANG (20/08/2026) ═════════════════
   [phục vụ] cả 25 trang — Flatsome khai '.page-wrapper { padding-top: 30px }'
   nên phần tử đầu của mọi trang bị đẩy xuống 30px so với Figma.

   Đo trên Figma trước khi sửa, khe header → phần tử đầu:
     trang chủ  header 163:7688 đáy y=642    · hero 1208:7757 y=642    ⇒ 0
     trang #4   header 163:7757 đáy y=12658  · crumb 1015:14115 y=12658 ⇒ 0
     blog       header đáy y=13694 · breadcrumb 1015:14354 y=13694      ⇒ 0
   Quy luật đúng cho toàn file: mọi 'Frame 12' (khung nội dung của một trang)
   bắt đầu ĐÚNG tại đáy header.

   ⚠ Đã kiểm riêng ba trang KHÔNG mở bằng hero (blog · chính sách · bài viết
   mẫu) như tài liệu chia việc dặn — chúng mở bằng breadcrumb cao 70, và
   breadcrumb cũng dính header. Không trang nào muốn giữ 30px. */
.t4 #content.page-wrapper { padding-top: 0; }


/* ══ DỜI TỪ '44-nhom-ggm.css' (20/08/2026) ═══════════════════════════════
   Đo bằng CSSOM: luật này khớp ở 19 trang NGOÀI nhóm GGM, tức là luật nền
   toàn site nằm nhầm trong mô-đun nhóm. Chú thích gốc giữ nguyên bên dưới.

   19.1 NỀN TOÀN TRANG BỊ FLATSOME PHỦ TRẮNG
   <:host> đã đúng #FCFBF6, nhưng Flatsome đặt #wrapper và #main nền TRẮNG ĐẶC
   che sạch lên trên. Mọi section Figma tô #FCFBF6 vì thế đang hiện TRẮNG.
   Đo tại chỗ: site rgb(255,255,255) ↔ Figma rgb(252,251,246).
   Không section nào có nền trắng trong Figma (hero là #FCFCFA), nên bỏ trắng
   ở hai tầng bọc là an toàn — thẻ trắng vẫn tự khai nền riêng. */
.t4 #wrapper,
.t4 #main { background-color: transparent; }


/* ══ DỜI TỪ '40-page-xu-ly-loi-sai-google-ads.css' (20/08/2026) ═══════════
   [phục vụ] khung nội dung mobile của MỌI section | [trang] toàn site
   [figma] khung 352 tại x=25 trong khổ 402
   [lý do vượt panel] panel không đặt được bề rộng khung theo breakpoint

   ⛔ ĐÂY LÀ LUẬT NỀN TOÀN SITE, không phải luật của trang #4. Nó nằm nhầm
   trong mô-đun mang tên trang #4 suốt từ lần tách, và các mô-đun nạp SAU đã
   viết cả chú thích tham chiếu tới nó ('50-nhom-noi-dung.css:379' ghi rõ
   "'width' thắng"). Linter mục (8) bắt đúng chỗ này.

   ⚠ BA KHỐI, GIỮ NGUYÊN THỨ TỰ. Chúng khai chồng nhau có chủ đích: khối sau
   ghim chặt hơn khối trước (382 → 352 → width 352). Đảo thứ tự là đổi kết
   quả. Ở tệp cũ chúng nằm rải rác ba chỗ; gộp về đây nhưng KHÔNG hợp nhất,
   vì hợp nhất là tự ý quyết định luật nào thắng.

   [figma] Container 352 khổ Mobile '1093:8882'. 382 = 352 + 30 đệm cột
   của Flatsome — 382 KHÔNG có trong Figma (0/127.233 node). Xem khối
   "GIA ĐÌNH SỐ KHUNG" đầu '30-components.css'.                          */
@media (max-width: 849px) {
  /* Lề mobile 25px mỗi bên (Figma: khung nội dung 352 trong 402). */
  .t4 .section-content > .row { max-width: 382px; }
  .t4 .section-content > .row.row-collapse { max-width: 352px; }
}
@media (max-width: 849px) {
  /* Khung nội dung mobile: 352 tại x=25 — ghim đủ độ ưu tiên, và bỏ đệm cột */
  .t4 .section-content > .row,
  .t4 .section-content > .row.row-collapse { max-width: 352px; margin-left: auto; }
  .t4 .section-content > .row > .col { padding-left: 0; padding-right: 0; }
}
@media (max-width: 849px) {
  /* Ghim WIDTH chứ không chỉ max-width */
  /* ⭐ WAVE 4 · H — `352px` → `min(352px, 100%)`.
     Khung 352 dịch từ khổ Figma 402 (352 + 25×2). Trên máy THẬT hẹp nhất là
     375 ⇒ lòng chỉ còn 325, mà khung vẫn đòi 352 ⇒ **tràn +2px** ở CẢ HAI
     trang đã đo (trình duyệt tự đặt `margin-right: -27px` để chữa — 352−325).
     `min()` giữ NGUYÊN 352 ở mọi khổ ≥ 402 (tức toàn bộ dải Figma đã nghiệm
     thu) và chỉ co ở dải 375–401 nơi 352 vốn không vừa.
     ⛔ Không đụng `max-width: 352px` của hai khối trên — chúng ghim trần,
        `min()` ở đây ghim sàn động; bỏ một trong hai là đổi luật thắng. */
  .t4 .section-content > .row,
  .t4 .section-content > .row.row-collapse { width: min(352px, 100%); max-width: 352px; }
}

/* t4-20-header-css */
/* ==========================================================================
   20-header.css — tách từ style.css ngày 17/08/2026 theo III.4.1.
   Nội dung bên dưới là NGUYÊN VĂN các mục §7 thanh nút đáy mobile của bản gộp;
   không sửa một luật nào trong lần tách này.
   ========================================================================== */


/* ── §7 thanh nút đáy mobile (dòng 706–903 của style.css cũ) ──────────────────── */

/* --------------------------------------------------------------------------
   7. THANH NÚT CỐ ĐỊNH ĐÁY (node 1015:20413) — chỉ mobile, dùng chung mọi trang
   -------------------------------------------------------------------------- */
/* ⚠ Node đúng là "Menu bar_Mobile" trong component set 1015:21020, biến thể
   THANH TRẦN là 1015:21017 — KHÔNG phải 1015:20413 như sitemap ghi (node đó
   tên "bx:support", chỉ là một icon lẻ 402×60 nền #155446, không phải thanh).
   Nhầm node này làm bản dựng đầu sai cả chiều cao lẫn màu nền.

   Số đo thật: 402×70 · nền #458763 · 5 nút mỗi nút 80,4px (402÷5, không có
   khoảng hở) · padding dọc 8px · icon 20px · nhãn Manrope 700 8px/lh 10,928
   trắng, cách icon 5px. */
.t4-bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 800;
  display: none;
  background: var(--t4-mang-la-nen);
}

.t4-bottom-bar { height: 70px; }   /* Figma: khung 402×70 cố định */

.t4-bottom-bar a,
.t4-bottom-bar button {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;              /* Figma itemSpacing của nút */
  height: 70px;          /* nút cao trọn thanh; Figma căn giữa khối icon+nhãn
                            trong 70px (icon y=17, nhãn y=42 → chừa 17px hai đầu),
                            nên KHÔNG dùng padding 8px như auto-layout khai báo */
  padding: 0;
  border: 0;
  cursor: pointer;
  /* Figma khai màu nền cho TỪNG nút chứ không để nút trong suốt ăn theo thanh.
     Để transparent thì nhìn y hệt (thanh cũng #458763) nhưng sai khai báo, và
     mọi hiệu ứng đổi nền sau này sẽ phải chống lại nền của lớp cha. */
  background: var(--t4-mang-la-nen);
  font-family: var(--t4-font-body);
  font-weight: 700;
  font-size: 8px;
  line-height: 10.928px; /* Figma lineHeightPx — số lẻ, lấy đúng */
  letter-spacing: 0;
  text-align: center;
  color: var(--t4-white);
  text-decoration: none;
}
/* Nút thứ 5 là thẻ <button>, mà Flatsome tạo kiểu cho CẢ thẻ button trần:
   text-transform:uppercase · margin:0 1em 1em 0 · min-height:2.5em.
   Ba thứ đó làm nút 5 thấp hơn, hẹp hơn và VIẾT HOA so với bốn nút kia. */
.t4-bottom-bar button {
  margin: 0;
  min-height: 0;
  text-transform: none;
}
.t4-bottom-bar .material-symbols-outlined {
  font-size: 20px;       /* Figma: khung icon 20×20 */
  line-height: 20px;
  font-variation-settings: 'wght' 300;
}
/* Trạng thái ĐANG Ở — Figma tô nền camel cho nút của mục hiện tại. Nút
   "Tuỳ chọn khác" mang sẵn class này vì camel ở cả 5/5 biến thể. */
.t4-bottom-bar .dang-o { background: var(--t4-hanh-dong-nen); }
/* ⛔ ĐÚNG MỘT nút camel tại một thời điểm. Cả năm biến thể của bộ 1015:21020
   chỉ tô nền '#cf9156' cho MỘT nút. Nhưng nút của trang ĐANG XEM đã mang sẵn
   `dang-o` do PHP in ra, nên mở bảng ngay tại trang chủ là có HAI nút camel
   cùng lúc — bắt được bằng ẢNH CHỤP, không mốc số nào hỏi tới.
   `:host.t4-khoa-cuon` chỉ tồn tại khi ĐANG CÓ một bảng mở (main.js đặt), nên
   dùng nó làm điều kiện: lúc đó trả nút trang-đang-xem về nền xanh, còn nút
   vừa bấm giữ camel nhờ `aria-expanded="true"`.
   ⚠ Làm bằng CSS chứ KHÔNG gỡ class trong JS: gỡ class thì lúc chuyển từ bảng
   này sang bảng kia sẽ mất luôn trạng thái "đang ở trang này", và không còn
   gì để trả lại. */
:host.t4-khoa-cuon .t4-bottom-bar .dang-o:not([aria-expanded="true"]) {
  background: var(--t4-mang-la-nen);
}
.t4-bottom-bar a:hover,
.t4-bottom-bar button:hover { background: var(--t4-hanh-dong-nen-nhan); }

@media (max-width: 849px) {
  .t4-bottom-bar { display: flex; }
  :host.t4 { padding-bottom: 70px; } /* chừa chỗ cho thanh đáy cao 70px */
}

/* --------------------------------------------------------------------------
   7b. BẢNG "DỊCH VỤ" MOBILE — DỰNG LẠI 24/08/2026
   [figma] 1276:10625 (hàng 1 ĐÓNG) · 1276:9485 (hàng 1 MỞ), lồng trong biến
   thể 1015:21019 của bộ 1015:21020. Node 1015:20521 dùng ở bản trước là BẢN
   CŨ (thanh tab + lưới thẻ) — xem qa/menu-mobile-chenh-lech-2026-08-24.md.

   [số] Panel 402×744 nền trắng, mở từ nút "Dịch vụ" ở thanh đáy
   (thanh + panel = 402×814). Bốn HÀNG xếp dọc, khe giữa hàng 10:

     hàng        402×60 · đệm 16 trên/dưới · 24 trái/phải
     tiêu đề     Manrope 700 14/28 '#1f1f1f' tại x=24
     chevron     khung 18×18 tại x=360 (⇒ mép phải 402−360−18 = 24 ✓)
                 hàng gập ĐÓNG  ▼ 12,87×7,07 '#1f1f1f'
                 hàng gập MỞ    ▲ trắng, nền hàng '#cf9156'
                 hàng liên kết  ❯ 7,07×12,87 '#3b3b3b' @50% (chevron xoay −90°)
     kẻ          hàng gập: trên+dưới 1px '#000' @10% (strokeAlign INSIDE)
                 hàng liên kết: dưới 1px '#000' @15%
     ruột        402×461 · đệm 8 trên/dưới · 25 trái/phải
     mục con     352 rộng · đệm 24 trên/dưới · ngang gap 8
                 icon 23–24×30 '#b77537' → khối 320/321
                 khối: tên 14/20/700 → gap 8 → mô tả 12/21/400

   [lý do vượt panel] thanh đáy + bảng mobile là khối child theme ngoài UX
   Builder (danh mục vĩnh viễn III.3b) — không có panel Flatsome nào chỉnh.

   ⚠ Figma TỰ MÂU THUẪN, đã ghi qa/phan-hoi-figma.md: khung hàng 1 ở bản ĐÓNG
     khai cao 60 trong khi ruột cao 461 (clipsContent:false) ⇒ ruột ĐÈ lên ba
     hàng dưới; bản MỞ khai khung 521 mới đúng. Dựng theo bản MỞ. Và khe giữa
     hàng 1 với nhóm hàng 2–4 ở bản MỞ là 23px trong khi mọi khe khác là 10 ⇒
     dùng 10 thống nhất.

   ⚠ Mô tả mục con: Figma khai "Figma ipsum" — 4T CẤM chữ giả trên live, nên
     mô tả thật (rút gọn từ trang đích) nạp qua trường Mô tả của trình đơn WP.
     Vì chữ thật dài hơn chữ giả nên KHÔNG chốt cứng chiều cao mục (85/105 của
     Figma đo trên chữ giả một dòng); mốc `cao` của mục con được miễn trừ.
   -------------------------------------------------------------------------- */
.t4-panel-dichvu {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 70px;            /* ngồi ngay trên thanh đáy */
  z-index: 799;            /* dưới thanh đáy (800) để thanh đáy luôn bấm được */
  display: none;
  height: 744px;
  /* [số] 60 (header) + 744 (bảng) + 70 (thanh đáy) = 874 — đúng chiều cao
     khung thiết bị mà Figma dựng. Vì vậy trần của bảng phải chừa CẢ header,
     không chỉ chừa thanh đáy: máy nào màn thấp hơn 874 thì bảng co lại và
     header vẫn nhìn thấy. ⛔ Để `- 70px` như bản trước thì trên khung 780
     bảng cao 710 trùm lên header (header z-index 1001 > bảng 799) — hàng
     đầu của bảng KHÔNG BẤM ĐƯỢC, cú bấm rơi vào logo. Đã bắt được bằng
     Playwright: 'subtree intercepts pointer events'. */
  max-height: calc(100vh - 130px);
  max-height: calc(100dvh - 130px);   /* dvh: trừ luôn thanh URL của trình duyệt di động */
  overflow-y: auto;
  background: var(--t4-white);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, .12);
}
@media (max-width: 849px) {
  .t4-panel-dichvu { display: block; }
  .t4-panel-dichvu[hidden] { display: none; }
}
:host.t4-khoa-cuon, :host.t4-khoa-cuon :host { overflow: hidden; }

/* ── HÀNG (chung cho hàng gập và hàng liên kết) ─────────────────────────────
   [số] 402×60 · đệm 16/24 · khe giữa hai hàng 10 · tiêu đề 14/28/700 x=24 */
.t4-dv-hang + .t4-dv-hang { margin-top: 10px; }

.t4-dv-dau,
.t4-dv-hang--link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 60px;
  padding: 16px 24px;
  box-sizing: border-box;   /* kẻ của Figma là strokeAlign INSIDE ⇒ nằm TRONG 60px */
  margin: 0;
  min-height: 0;            /* Flatsome đặt min-height 2.5em cho mọi <button> trần */
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, .15);
  background: var(--t4-white);
  text-align: left;
  text-transform: none;     /* Flatsome viết hoa mọi <button> trần */
  text-decoration: none;
  cursor: pointer;
}
/* ⛔ KẺ TRÊN chỉ dành cho hàng ĐẦU BẢNG, KHÔNG phải cho mọi hàng gập.
   Luật cũ khai '.t4-dv-hang--gap .t4-dv-dau { border-top … }' — hồi đó đúng,
   vì bảng chỉ có MỘT hàng gập và nó nằm trên cùng. Từ khi «Thiết kế & Vận
   hành WEB» có mục con (Khai báo Bộ Công Thương) thì nó cũng thành hàng gập,
   và kẻ TRÊN của nó đứng cách kẻ DƯỚI của hàng «Truyền thông thương hiệu»
   đúng 10px ⇒ nhìn ra HAI đường kẻ song song với một dải trắng ở giữa. Đó
   chính là «thừa 1 line và khoảng cách quá xa» trong tài liệu lỗi 10/09/2026.
   [figma] 'I1017:21320;1276:9933': mỗi hàng chỉ MỘT nét — 'Text_Menu bar 4'
   (hàng đầu) mực 10%, các hàng sau 15%; không hàng nào có nét trên. */
.t4-panel-dichvu > .t4-dv-hang:first-child .t4-dv-dau {
  border-top: 1px solid rgba(0, 0, 0, .1);
  border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.t4-dv-ten {
  font-family: var(--t4-font-body);
  font-weight: 700;
  font-size: 14px;
  line-height: 28px;
  letter-spacing: 0;
  color: var(--t4-text);    /* Figma '#1f1f1f' */
}

/* ── CHEVRON ────────────────────────────────────────────────────────────────
   [số] khung 18×18; nét vẽ 12,87×7,07. Vẽ bằng mask nên đổi màu bằng
   'background-color' — không nhúng màu vào tệp SVG, và không cần thêm ảnh.
   Hàng liên kết dùng ĐÚNG hình đó xoay −90° (Figma cũng xoay, không vẽ hình
   khác: 'Button → SVG' mang rotation −1,5708 rad). */
.t4-dv-chev {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  background-color: var(--t4-text);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 8'><path d='M1 1l5.5 5.5L12 1' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 12.87px 7.07px no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 8'><path d='M1 1l5.5 5.5L12 1' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 12.87px 7.07px no-repeat;
  transition: transform .3s ease-out;
}
.t4-dv-chev--phai {
  transform: rotate(-90deg);
  background-color: rgba(59, 59, 59, .5);   /* Figma '#3b3b3b' @50% */
}
.t4-dv-dau[aria-expanded="true"] {
  background: var(--t4-hanh-dong-nen);              /* Figma 'var(--t4-hanh-dong-nen)' khi hàng đang MỞ */
}
.t4-dv-dau[aria-expanded="true"] .t4-dv-ten { color: var(--t4-white); }
.t4-dv-dau[aria-expanded="true"] .t4-dv-chev {
  transform: rotate(180deg);                /* ▼ thành ▲ */
  background-color: var(--t4-white);
}

/* ── RUỘT hàng gập ──────────────────────────────────────────────────────────
   [số] đệm 8 trên/dưới · 25 trái/phải; các mục dính nhau, KHÔNG có khe.
   'height' do JS đặt để chạy chuyển động 300 ms EASE_OUT — đúng transition
   SMART_ANIMATE mà Figma khai cho ON_CLICK của hàng này. */
.t4-dv-ruot {
  overflow: hidden;
  padding: 0 25px;
  transition: height .3s ease-out;
}
.t4-dv-ruot.t4-dv-mo { padding: 8px 25px; }
.t4-dv-muc {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 24px 0;
  text-decoration: none;
  color: var(--t4-text);
}
.t4-dv-ic {
  flex: 0 0 auto;
  width: 24px;
  height: 30px;             /* Figma: khung icon cao 30, glyph tự canh giữa */
  font-size: 24px;
  line-height: 30px;
  color: var(--t4-nhan-manh-chu);  /* Figma '#b77537' */
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}
.t4-dv-khoi {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;             /* cho phép chữ dài tự xuống dòng thay vì tràn ngang */
  flex: 1 1 auto;
}
.t4-dv-muc-ten {
  font-family: var(--t4-font-body);
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0;
  /* Figma ngắt dòng THỦ CÔNG ở "Google Merchant \n Center (GMC)". Không ép
     được chỗ ngắt bằng CSS, nhưng cân hai dòng cho đều thì ra đúng chỗ đó —
     và không ghi cứng gì, 4T đổi tên mục vẫn tự cân lại. */
  text-wrap: balance;
}
.t4-dv-muc-mota {
  font-family: var(--t4-font-body);
  font-weight: 400;
  font-size: 12px;
  line-height: 21px;
  letter-spacing: 0;
}

/* Chuyển động mở bảng — Figma khai SMART_ANIMATE · EASE_OUT · 300 ms cho
   ON_CLICK của cả năm nút thanh đáy. Chỉ chạy KHI MỞ (không tự chạy, không
   lặp); đóng thì tắt ngay để không giữ lớp phủ trên màn. */
@keyframes t4-panel-len {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.t4-panel:not([hidden]) { animation: t4-panel-len .3s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .t4-panel:not([hidden]) { animation: none; }
  .t4-dv-ruot, .t4-dv-chev { transition: none; }
}


/* ══ BẢNG "TUỲ CHỌN KHÁC" (khổ 402) — Figma node '1015:21015' ═════════════
   Biến thể thứ 5 của bộ 'Component 1': thanh đáy + panel = 402×814, panel
   402×744 nền trắng ngồi ngay trên thanh đáy 70px.

   Mốc Figma (tính từ mép trên panel):
     logo dọc     (25,   0) 352×83
     đường kẻ     (25,  98) 352×1
     mục 1        y=113 · mục 2 y=217 · mục 3 y=321 · mục 4 y=425  (bước 104)
       trong mục: pt18 → hàng «icon + tên» cao 30 → gap 8 → mô tả 12/21 → pb18
       icon x=25 (mục 1 rộng 28, ba mục còn lại 25), cao 30
       tên  x=61 (mục 1) / x=54 (còn lại) · Manrope 700 14/28 '#1f1f1f'
       mô tả x=25 rộng 352 · Manrope 400 12/21 '#1f1f1f'
       [figma] Container 352 khổ Mobile '1093:8882'

   ⚠ BỐN mục, không phải năm: 'Frame 11' («Hỗ trợ khách hàng») và
     'Rectangle 4' trong Figma đều 'visible: false'. Đọc JSON mà bỏ cờ
     'visible' là dựng thừa một mục và một khối nền kem.
   -------------------------------------------------------------------------- */
.t4-panel-tck {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 70px;
  z-index: 799;
  display: none;
  height: 744px;
  /* [số] 60 (header) + 744 (bảng) + 70 (thanh đáy) = 874 — đúng chiều cao
     khung thiết bị mà Figma dựng. Vì vậy trần của bảng phải chừa CẢ header,
     không chỉ chừa thanh đáy: máy nào màn thấp hơn 874 thì bảng co lại và
     header vẫn nhìn thấy. ⛔ Để `- 70px` như bản trước thì trên khung 780
     bảng cao 710 trùm lên header (header z-index 1001 > bảng 799) — hàng
     đầu của bảng KHÔNG BẤM ĐƯỢC, cú bấm rơi vào logo. Đã bắt được bằng
     Playwright: 'subtree intercepts pointer events'. */
  max-height: calc(100vh - 130px);
  max-height: calc(100dvh - 130px);   /* dvh: trừ luôn thanh URL của trình duyệt di động */
  overflow-y: auto;
  background: var(--t4-white);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, .12);
}
@media (max-width: 849px) {
  .t4-panel-tck { display: block; }
  .t4-panel-tck[hidden] { display: none; }
}
.t4-tck-logo {
  display: block;
  width: 352px;
  height: 83px;
  margin: 0 25px;
}
/* [số] Đường kẻ ở y=98: khối logo cao 83 ⇒ chừa thêm 15. */
.t4-tck-ke {
  height: 1px;
  margin: 15px 25px 0;
  background: rgba(0, 0, 0, .1);
}
/* [số] Mục đầu ở y=113 = 98 + 15. */
/* [số] Mục đầu ở y=113 = 98 (kẻ) + 15. Đo thật cho thấy chữ rơi thấp hơn
   Figma đúng 2px ở CẢ BỐN mục (bước 104 đã khớp tuyệt đối), nên bù ở đây
   chứ không đụng vào bước. */
.t4-tck-ds { margin: 13px 25px 0; }
.t4-tck-muc {
  display: block;
  box-sizing: border-box;
  /* ⛔ CHIỀU CAO CHỐT 104, KHÔNG để chữ đẩy. Figma khai hộp mô tả 352×30 —
     tức MỘT dòng — nhưng chữ thật dài 2 dòng (21×2 = 42) và TRÀN ra khỏi hộp.
     Đây là mô-típ đã gặp ở trang #9 (§30): hộp chữ Figma nhỏ hơn chữ nó vẽ.
     Để mục tự cao theo chữ thì bước nhảy thành ~115 và tới mục thứ tư đã lệch
     hơn 30px. Tràn 12px xuống phần đệm dưới 18px là đúng như Figma vẽ, không
     đụng mục kế tiếp. */
  height: 104px;
  padding: 18px 0;          /* 18 + 30 + 8 + 30 + 18 = 104 */
  color: var(--t4-text);
  text-decoration: none;
}
.t4-tck-dau {
  display: flex;
  align-items: center;
  gap: 8px;                 /* mục 1: icon 28 + 8 = tên ở x=61 ✓ */
  height: 30px;
}
.t4-tck-muc + .t4-tck-muc .t4-tck-dau { gap: 4px; }  /* icon 25 + 4 = x=54 ✓ */
.t4-tck-ic { display: block; height: 30px; flex: 0 0 auto; }
.t4-tck-ten {
  font-family: var(--t4-font-body);
  font-size: 14px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--t4-text);
}
.t4-tck-mota {
  display: block;
  height: 30px;             /* hộp Figma 352×30; chữ 2 dòng tràn ra ngoài */
  margin-top: 8px;
  font-family: var(--t4-font-body);
  font-size: 12px;
  line-height: 21px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--t4-text);
}

/* ══ BẢNG "GIÁO DỤC" / "HỆ SINH THÁI KIẾN THỨC" (khổ 402) ═════════════════
   Figma: nội dung mobile lồng trong chính biến thể của nút thanh đáy —
   `1015:21016` (Giáo dục) và `1015:21018` (Kiến thức) của bộ `Component 1`
   (1015:21020). Panel gốc `1015:20605` / `1015:20707`, tên lớp "Menu_Dịch vụ"
   giữ nguyên từ khuôn Dịch vụ (KHÔNG phải panel Dịch vụ — xem chú thích đầu
   `template-parts/mobile-panel-giaoduc.php` để biết vì sao cửa sổ trước bỏ
   sót hai submenu này).

   Mốc Figma (tính từ mép trên panel, GIỐNG NHAU giữa hai bảng):
     khối tiêu đề   y=0→135, VERTICAL gap8, canh giữa dọc trong 135px:
       tiêu đề y=24  (14/28/700 '#458763')
       mô tả   y=60  (12/21/400 '#1f1f1f')
     đường kẻ 1px '#e3e3e3'  y=150 (135 + gap15 của panel)
     danh sách mục  y=165 (150 + gap15)

   Giáo dục (`.t4-gdkt-ds--doc`) — BA mục XẾP DỌC, mỗi mục cao 161, icon NẰM
   TRÊN tên (không phải bên cạnh): pt18 → icon 30 (rộng 20-23 tuỳ icon) →
   gap8 → tên 14/28/700 → mô tả 12/21/400 → pb18. Ba mục liền kề, không có
   khe hở giữa (161×3 = 483 = đúng chiều cao khối danh sách).

   Kiến thức (`.t4-gdkt-ds--ngang`) — HAI mục xếp NGANG: icon (23×30) bên
   trái, khối tên+mô tả bên phải RỘNG 321 (KHÔNG tràn hết 352 như panel Tuỳ
   chọn khác — Figma thụt lề bằng đúng icon + gap8), mỗi mục cao 123
   (pt18 + khối 87 + pb18), hai mục cách nhau 16.

   ⛔ Khối nền trang trí `Rectangle 4` (183×142 · '#efe8da' · bo góc 10) KHÔNG
   được dựng — node Figma của nó khai `visible: false` ở CẢ HAI bảng (đo lại
   22/08/2026, xem `uxb/mobile-panel-gdkt-figma-spec.md`). Bản dựng trước
   từng vẽ nó bằng '::before' trên '.t4-gdkt-noibat' — đã GỠ.
   -------------------------------------------------------------------------- */
.t4-panel-gdkt {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 70px;
  z-index: 799;
  display: none;
  height: 744px;
  /* [số] 60 (header) + 744 (bảng) + 70 (thanh đáy) = 874 — đúng chiều cao
     khung thiết bị mà Figma dựng. Vì vậy trần của bảng phải chừa CẢ header,
     không chỉ chừa thanh đáy: máy nào màn thấp hơn 874 thì bảng co lại và
     header vẫn nhìn thấy. ⛔ Để `- 70px` như bản trước thì trên khung 780
     bảng cao 710 trùm lên header (header z-index 1001 > bảng 799) — hàng
     đầu của bảng KHÔNG BẤM ĐƯỢC, cú bấm rơi vào logo. Đã bắt được bằng
     Playwright: 'subtree intercepts pointer events'. */
  max-height: calc(100vh - 130px);
  max-height: calc(100dvh - 130px);   /* dvh: trừ luôn thanh URL của trình duyệt di động */
  overflow-y: auto;
  background: var(--t4-white);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, .12);
}
@media (max-width: 849px) {
  .t4-panel-gdkt { display: block; }
  .t4-panel-gdkt[hidden] { display: none; }
}

.t4-gdkt-dau {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  height: 135px;
  margin: 0 25px;
  box-sizing: border-box;
}
.t4-gdkt-tieude {
  font-family: var(--t4-font-body);
  font-size: 14px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--t4-mang-la-chu);       /* Figma '#458763' */
}
/* [số] Figma khai hộp mô tả cao 51 (352 rộng, 12/21) cho CHỮ IPSUM PLACEHOLDER
   — chữ thật đo được luôn xuống 3 dòng thật (63px) ở đúng font/cỡ đó, tràn
   12px ra ngoài hộp. Cùng mô-típ đã gặp ở panel "Tuỳ chọn khác"
   (mota 352×30 khai 1 dòng, chữ thật 2 dòng) — CHỐT cao theo Figma, để chữ
   TRÀN xuống dưới thay vì để hộp tự giãn: '.t4-gdkt-dau' canh giữa theo chiều
   cao 135 cố định, giãn hộp mô tả sẽ đẩy tiêu đề lệch pt24 → pt18 (đã đo lệch
   thật 6px trước khi chốt dòng height dưới đây). */
.t4-gdkt-mota {
  display: block;
  width: 100%;
  height: 51px;
  font-family: var(--t4-font-body);
  font-size: 12px;
  line-height: 21px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--t4-text);
}
/* [số] đường kẻ ở y=150 = 135 (khối tiêu đề) + gap15 của panel. */
.t4-gdkt-ke {
  height: 1px;
  margin: 15px 25px 0;
  background: #e3e3e3;
}
/* [số] danh sách bắt đầu ở y=165 = 150 + gap15. */
.t4-gdkt-ds { margin: 15px 25px 0; position: relative; }

/* — Giáo dục: icon TRÊN tên, ba mục liền kề, mỗi mục 161px — */
.t4-gdkt-muc--doc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  height: 161px;
  padding: 18px 0;      /* 18 + 30(icon) + 8 + 87(tên+mô tả) + 18 = 161 */
  box-sizing: border-box;
  color: var(--t4-text);
  text-decoration: none;
}
.t4-gdkt-muc--doc .t4-gdkt-ic { height: 30px; }  /* khung icon Figma cao 30, glyph tự canh giữa */

/* [phục vụ] mục VÔ HIỆU của bảng Giáo dục | [figma] 1015:20605
   [lý do vượt panel] khối child theme, không có panel Flatsome nào chỉnh.
   ⛔ 4T chốt 24/08/2026: «Ebook, Template & Tool» và «Cộng đồng» ở trạng thái
   vô hiệu — khớp Figma, nơi hai mục này KHÔNG có `interactions` ON_CLICK nào.
   Dựng bằng thẻ <span aria-disabled="true"> chứ KHÔNG phải <a href="#">:
   4T đã yêu cầu bỏ hẳn href rỗng, và `kiem-seo-toc-do.js` báo ❌ cho href="#". */
.t4-gdkt-muc--tat {
  opacity: .45;
  cursor: default;
  pointer-events: none;
}

/* — Kiến thức: icon TRÁI + khối tên/mô tả PHẢI (thụt lề = icon + gap), hai
   mục cách nhau 16 — */
.t4-gdkt-muc--ngang {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  height: 123px;         /* chốt theo Figma — không set thì đo thật ra 135px
                             (chữ mô tả thật 3 dòng thay vì 2,x dòng Figma) */
  padding: 18px 0;      /* 18 + 87(khối tên+mô tả, cũng là chiều cao icon-block) + 18 = 123 */
  box-sizing: border-box;
  color: var(--t4-text);
  text-decoration: none;
}
.t4-gdkt-muc--ngang + .t4-gdkt-muc--ngang { margin-top: 16px; }
.t4-gdkt-muc--ngang .t4-gdkt-ic { height: 30px; flex: 0 0 auto; margin-top: 0; }
.t4-gdkt-khoi {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 321px;          /* Figma: KHÔNG tràn hết 352, thụt lề theo icon+gap */
}

.t4-gdkt-ic { display: block; flex: 0 0 auto; }
.t4-gdkt-ten {
  font-family: var(--t4-font-body);
  font-size: 14px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--t4-text);
}
.t4-gdkt-mota-muc {
  display: block;
  height: 51px;           /* chốt theo Figma, cùng lý do ở '.t4-gdkt-mota' —
                              chữ thật 3 dòng (63px) tràn 12px xuống pb18. */
  font-family: var(--t4-font-body);
  font-size: 12px;
  line-height: 21px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--t4-text);
}

/* ⛔ ĐÃ GỠ khối nền kem 'Rectangle 4' (22/08/2026, rà soát ảnh nhiệt). Node
   Figma của khối này — '1015:20612' (Giáo dục) và '1015:20713' (Kiến thức) —
   khai 'visible: false' trong file gốc (kiểm bằng `tools/figma.py json
   <node>`, đọc thẳng absoluteBoundingBox+visible; `dump-figma-spec.py` tự cắt
   nhánh ẩn nên không lộ ra khi dump). Bản kết xuất THẬT của Figma KHÔNG hiện
   khối này — đúng bẫy đã ghi ở `qa/thieu-panel-tuy-chon-khac.md` mục 5 cho
   panel "Tuỳ chọn khác" (ở đó 'Frame 11'/'Rectangle 4' cũng ẩn và đã KHÔNG
   dựng). Bản dựng trước đó của panel Giáo dục/Kiến thức đã dựng NHẦM khối
   này. Xem chi tiết + toạ độ gốc: `uxb/mobile-panel-gdkt-figma-spec.md`.
   Lớp '.t4-gdkt-noibat' đã GỠ NỐT KHỎI :host ngày 24/08/2026 — giữ một lớp
   không ai dùng chỉ mời người sau dựng lại đúng khối đã bị loại. */

/* ══ BIỂU TƯỢNG TÌM KIẾM — header khổ 402 ═════════════════════════════════
   Figma '1017:21317' (Group 1171274955): kính lúp NÉT TRẮNG '#ffffff',
   vòng 16×16 tại (360 · 19,75) + cán 4×4 tại (373 · 33,75) ⇒ khối 17×18.

   ⛔ Trước 19/08/2026 biểu tượng này CHƯA CÓ MỘT LUẬT NÀO — nó ăn nguyên màu
   mặc định của Flatsome 'rgba(102,102,102,.85)', tức XÁM ĐẬM trên nền xanh
   rêu. 4T nhìn ra ngay, còn mọi phép đo đều im: bản đồ chỉ khai 'w' và 'h'
   (15,4×18,4 so với 17×18 — lọt dung sai 2px), ảnh nhiệt thì khối chỉ 306px²,
   thua xa ngưỡng 6000px² của "vùng đỏ liền khối". Đã bổ sung 'mau_net' vào
   bản đồ cùng bản vá này. */
#header li.header-search > a,
#header li.header-search > a > i { color: var(--t4-white); }

/* [phục vụ] phần tử: nút icon tìm kiếm mobile ('a.is-small' do Flatsome sinh,
   trong 'li.header-search') | khối: header mobile
   [figma] không đổi — vẫn đúng khung 17×18 đã khai ở '1017:21317' phía trên
   [lý do vượt panel] vùng chạm là hành vi WCAG 2.5.8, panel Flatsome không có
   tuỳ chọn "kích thước vùng chạm" tách khỏi kích thước icon.
   ⛔ Kiểm tương tác (`kiem-tuong-tac.js`) báo 'A.is-small' 17,0×38,0 — dưới
   ngưỡng chạm 24×24. Icon vẫn giữ nguyên 17×18 hiển thị (đừng phóng to icon
   thị giác — đó là vi phạm Luật 1); chỉ NỚI VÙNG CHẠM bằng '::after' tuyệt
   đối, nới ra ngoài theo inset ÂM để bộ đo nhận diện đúng là lớp phủ vùng bấm
   (nó chỉ tính '::after' khi cả 4 cạnh đều khai và đều ≤0 — xem bình luận
   'hopBam' trong script). Chiều cao 38px đã đủ 24px.
   ⚠ SỬA 22/08/2026: nới đều 5px hai bên (bản đầu) làm cạnh TRÁI của icon
   ĐÈ lên logo — mép trái icon nằm SÁT logo (khoảng cách 0px), kiểm tương
   tác báo "hai vùng bấm chồng nhau" dt=147 (logo × icon tìm kiếm). Đổi
   sang nới KHÔNG ĐỐI XỨNG: 0px bên trái (logo không có chỗ nhường), 9px
   bên phải (còn khoảng trắng tới mép màn hình) — bề rộng 17+9=26 ≥24. */
#header li.header-search > a.is-small { position: relative; }
#header li.header-search > a.is-small::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: -9px;
}

/* [số] Glyph 'icon-search' của phông 'fl-icons' KHÁC HÌNH Figma: vòng nhỏ hơn,
   nét dày hơn, cán ngắn hơn. Thay bằng chính vector Figma '1017:21317'
   (18×19, hai nét 'stroke-width: 2') qua 'mask', màu vẫn do CSS quyết.
   ⛔ Hai bẫy data URI đã trả giá ở footer: dấu '#' phải thành '%23', và nháy
   kép trong SVG phải đổi sang nháy đơn — thiếu một là mask không tải được và
   'background-color' tô KÍN cả ô, ra một hình chữ nhật đặc. */
#header li.header-search > a > i::before { content: none; }
#header li.header-search > a > i {
  display: block;
  position: relative;
  top: -1.25px;             /* Figma y=19,75 · dòng chảy Flatsome cho 21 */
  width: 17px;
  height: 18px;
  background-color: var(--t4-white);
  -webkit-mask: url("data:image/svg+xml,<svg width='18' height='19' viewBox='0 0 18 19' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M8.12529 1.01566C12.0518 1.01566 15.2349 4.19875 15.2349 8.12529C15.2349 12.0518 12.0518 15.2349 8.12529 15.2349C4.19875 15.2349 1.01566 12.0518 1.01566 8.12529C1.01566 4.19875 4.19875 1.01566 8.12529 1.01566Z' stroke='white' stroke-width='2'/> <path d='M13.2036 14.2193L17.2662 18.2819' stroke='white' stroke-width='2.03132'/> </svg>") no-repeat center / 17px 18px;
  mask: url("data:image/svg+xml,<svg width='18' height='19' viewBox='0 0 18 19' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M8.12529 1.01566C12.0518 1.01566 15.2349 4.19875 15.2349 8.12529C15.2349 12.0518 12.0518 15.2349 8.12529 15.2349C4.19875 15.2349 1.01566 12.0518 1.01566 8.12529C1.01566 4.19875 4.19875 1.01566 8.12529 1.01566Z' stroke='white' stroke-width='2'/> <path d='M13.2036 14.2193L17.2662 18.2819' stroke='white' stroke-width='2.03132'/> </svg>") no-repeat center / 17px 18px;
}

/* [figma] luật dùng chung — lớp rộng 23px có ở 3 trang; đại diện: trang25:'804:37460' · trang5:'1113:12146' · trang8:'1036:46300'
   (tệp này phục vụ nhiều trang nên không có MỘT node duy nhất) */
/* ══ NĂM BIỂU TƯỢNG MEGA MENU — thay glyph Material bằng vector Figma ══════
   ⛔ Phông 'material-symbols-outlined' VẼ KHÁC bộ icon Figma, không chỉ khác
   độ dày: 'school' của Figma CÓ DÂY TUA còn glyph thì không; 'group' của Figma
   là BA người còn glyph chỉ hai. Sai HÌNH, không phải sai nét.

   ⛔ Vì sao mọi phép đo im: bản đồ chỉ so hộp 'x·y·w·h' của '<span>' (23×28,
   khớp trong 2px) và ảnh nhiệt thì mỗi icon ~600px², thua xa ngưỡng 6000px²
   của "vùng đỏ liền khối". 4T nhìn ra icon tìm kiếm trước, soi tiếp mới lộ
   nốt năm cái này — cùng một lớp lỗi.

   ⛔ KÍCH THƯỚC MASK PHẢI LÀ KHỔ CỦA CHÍNH TỆP SVG (23×30 — khung 'Asset 1 x'
   của Figma), KHÔNG phải khổ phần hình vẽ bên trong (23×20…). Đặt theo phần
   vẽ là ép cả tệp 23×30 vào 23×20, hình co còn ~65 % — đã đo: school
   14,5×12,5 thay vì 22,5×19,5. Phần chừa trong tệp chính là thứ đặt hình
   đúng chỗ Figma vẽ.

   Hai bẫy data URI (đã trả giá ở footer): '#' phải thành '%23', nháy kép
   trong SVG phải đổi sang nháy đơn — thiếu một là mask không tải và
   'background-color' tô KÍN cả ô. */
.t4-mega-the .material-symbols-outlined.t4-ic,
#header .nav-dropdown .material-symbols-outlined.t4-ic {
  display: block;
  width: 23px;
  height: 30px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: top left;
  mask-position: top left;
  -webkit-mask-size: 23px 30px;
  mask-size: 23px 30px;
}
.t4-ic::before { content: none; }

/* Khoá học — mũ tốt nghiệp CÓ dây tua */
.t4-ic-school {
  -webkit-mask-image: url("data:image/svg+xml,<svg width='23' height='30' viewBox='0 0 23 30' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M6.8105 22.8921C4.98456 22.7261 3.43851 21.1899 3.22759 19.4138L3.21889 14.5384C3.17536 14.4098 1.13181 13.4015 0.825145 13.1946C-0.317824 12.4222 -0.256892 10.9829 0.905495 10.2732L9.94078 5.35289C11.0349 4.85862 12.0734 4.89091 13.1521 5.40363C16.1638 6.83635 19.0805 8.79563 22.0876 10.2732C23.3618 11.122 23.2768 12.5165 21.9872 13.3126C21.2861 13.7455 20.4498 14.0665 19.7749 14.5384L19.7662 19.3644C19.5499 21.2637 17.9958 22.7326 16.0634 22.8974C16.0192 23.3429 16.1096 23.8471 16.0447 24.2853C15.9502 24.9219 15.2231 25.2363 14.7028 24.7928C14.6426 24.7414 14.4537 24.4982 14.4537 24.4461V22.8921H6.8105ZM11.3355 6.57735C10.9826 6.61031 10.7175 6.75068 10.4108 6.90028C7.49347 8.32442 4.6799 10.1644 1.75653 11.6031C1.62998 11.6637 1.55298 11.8041 1.7043 11.8851L10.2923 16.5536C11.6783 17.5046 12.895 16.4113 14.1015 15.7635L10.8219 12.5303C10.3552 11.7283 11.2773 10.9539 12.0225 11.497L15.5806 14.9878L21.3671 11.8113L21.2366 11.6037C18.3373 10.1671 15.5445 8.35606 12.6499 6.93323C12.2113 6.71773 11.8464 6.53056 11.3342 6.57801L11.3355 6.57735ZM14.4537 17.4163C13.7915 17.6964 13.1983 18.1814 12.4992 18.3785C11.7587 18.5874 10.9518 18.5406 10.23 18.2928L4.83056 15.3931V19.3644C4.83056 20.169 6.10142 21.3131 6.91027 21.3131H14.4531V17.4163H14.4537ZM16.058 21.3131C16.8294 21.1839 17.513 20.7648 17.888 20.0807C17.9529 19.9628 18.1625 19.4646 18.1625 19.3644V15.3931L16.0574 16.5523V21.3125L16.058 21.3131Z' fill='%23458763'/> </svg>");
  mask-image: url("data:image/svg+xml,<svg width='23' height='30' viewBox='0 0 23 30' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M6.8105 22.8921C4.98456 22.7261 3.43851 21.1899 3.22759 19.4138L3.21889 14.5384C3.17536 14.4098 1.13181 13.4015 0.825145 13.1946C-0.317824 12.4222 -0.256892 10.9829 0.905495 10.2732L9.94078 5.35289C11.0349 4.85862 12.0734 4.89091 13.1521 5.40363C16.1638 6.83635 19.0805 8.79563 22.0876 10.2732C23.3618 11.122 23.2768 12.5165 21.9872 13.3126C21.2861 13.7455 20.4498 14.0665 19.7749 14.5384L19.7662 19.3644C19.5499 21.2637 17.9958 22.7326 16.0634 22.8974C16.0192 23.3429 16.1096 23.8471 16.0447 24.2853C15.9502 24.9219 15.2231 25.2363 14.7028 24.7928C14.6426 24.7414 14.4537 24.4982 14.4537 24.4461V22.8921H6.8105ZM11.3355 6.57735C10.9826 6.61031 10.7175 6.75068 10.4108 6.90028C7.49347 8.32442 4.6799 10.1644 1.75653 11.6031C1.62998 11.6637 1.55298 11.8041 1.7043 11.8851L10.2923 16.5536C11.6783 17.5046 12.895 16.4113 14.1015 15.7635L10.8219 12.5303C10.3552 11.7283 11.2773 10.9539 12.0225 11.497L15.5806 14.9878L21.3671 11.8113L21.2366 11.6037C18.3373 10.1671 15.5445 8.35606 12.6499 6.93323C12.2113 6.71773 11.8464 6.53056 11.3342 6.57801L11.3355 6.57735ZM14.4537 17.4163C13.7915 17.6964 13.1983 18.1814 12.4992 18.3785C11.7587 18.5874 10.9518 18.5406 10.23 18.2928L4.83056 15.3931V19.3644C4.83056 20.169 6.10142 21.3131 6.91027 21.3131H14.4531V17.4163H14.4537ZM16.058 21.3131C16.8294 21.1839 17.513 20.7648 17.888 20.0807C17.9529 19.9628 18.1625 19.4646 18.1625 19.3644V15.3931L16.0574 16.5523V21.3125L16.058 21.3131Z' fill='%23458763'/> </svg>");
}

/* Ebook · Template & Tool — bốn ô bo góc */
.t4-ic-dashboard {
  -webkit-mask-image: url("data:image/svg+xml,<svg width='23' height='30' viewBox='0 0 23 30' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M14.558 4.56528C16.255 4.36595 18.3027 4.68867 20.0375 4.56528C21.0424 4.69816 21.8482 5.51445 21.9335 6.53007C22.1326 9.06437 21.7819 11.8739 21.9335 14.4367C21.8198 15.4618 20.995 16.2876 19.9617 16.373C18.2553 16.5059 16.3687 16.2686 14.6433 16.373C13.6195 16.2591 12.7947 15.4333 12.7094 14.3987C12.5103 11.8455 12.8611 9.02641 12.7094 6.45414C12.8232 5.50496 13.6005 4.68867 14.558 4.57477V4.56528ZM14.6907 5.98904C14.3874 6.05548 14.1504 6.30227 14.1219 6.62499V14.2659C14.1219 14.6265 14.4063 14.9208 14.7666 14.9493C16.3972 14.8449 18.2173 15.0916 19.829 14.9493C20.2176 14.9113 20.4926 14.655 20.521 14.2564V6.66296C20.502 6.31176 20.2271 5.99853 19.8764 5.97955H14.7002L14.6907 5.98904Z' fill='%23458763'/> <path d='M3.91154 12.6522C5.60847 12.4529 7.65617 12.7756 9.39103 12.6522C10.3959 12.7851 11.2017 13.6014 11.287 14.617C11.4861 17.1513 11.1354 19.9608 11.287 22.5236C11.1733 23.5487 10.3485 24.3745 9.31519 24.4599C7.60877 24.5928 5.72223 24.3555 3.99686 24.4599C2.97301 24.346 2.14824 23.5203 2.06292 22.4857C1.86384 19.9324 2.2146 17.1133 2.06292 14.5411C2.17668 13.5919 2.95405 12.7756 3.91154 12.6617V12.6522ZM4.04426 14.0665C3.74089 14.1329 3.50389 14.3797 3.47545 14.7024V22.3433C3.47545 22.704 3.75985 22.9982 4.1201 23.0267C5.75067 22.9223 7.57085 23.1691 9.18247 23.0267C9.58063 22.9887 9.83659 22.7324 9.87451 22.3338V14.7404C9.86503 14.3797 9.59011 14.0854 9.22987 14.057H4.04426V14.0665Z' fill='%23458763'/> <path d='M3.91188 4.5652C5.65622 4.66012 7.62808 4.39435 9.35346 4.55571C10.2067 4.63165 10.984 5.29607 11.2116 6.12185C11.3632 6.71034 11.3443 8.88396 11.2779 9.54838C11.1736 10.6399 10.292 11.4088 9.22073 11.4847C7.56172 11.6081 5.75102 11.3898 4.07304 11.4847C3.18191 11.4278 2.3287 10.7633 2.12014 9.89008C1.98742 9.28261 1.9969 7.11849 2.07274 6.44457C2.16754 5.4954 2.97335 4.69809 3.91188 4.5652ZM4.0446 5.98897C3.73176 6.05541 3.51372 6.3022 3.4758 6.62492C3.40944 7.2229 3.40944 8.81751 3.4758 9.42499C3.5232 9.82364 3.82656 10.0325 4.20576 10.0704C5.76998 10.2128 7.54276 9.95653 9.13541 10.0704C9.50514 10.0514 9.81798 9.79517 9.86538 9.42499C9.93174 8.85548 9.93174 7.20392 9.86538 6.62492C9.82746 6.25474 9.54306 6.00795 9.18281 5.97948C7.55224 5.8371 5.70362 6.08389 4.0446 5.98897Z' fill='%23458763'/> <path d='M14.6532 17.5309C16.3217 17.3601 18.2272 17.6353 19.9147 17.5214C20.8058 17.5784 21.659 18.2428 21.8676 19.1161C22.0193 19.7235 21.9908 21.8307 21.934 22.5141C21.8392 23.5297 20.9765 24.365 19.9621 24.4504C18.2557 24.5833 16.3691 24.346 14.6438 24.4504C13.6673 24.346 12.8236 23.5392 12.7193 22.5616C12.6529 21.8877 12.634 19.771 12.7667 19.1635C12.9658 18.2808 13.7716 17.6353 14.6532 17.5404V17.5309ZM14.7386 18.9547C14.4162 19.0306 14.1698 19.2489 14.1318 19.5906C14.2172 20.4734 14.0181 21.5649 14.1318 22.4287C14.1792 22.7799 14.4636 23.0077 14.8144 23.0362C16.426 23.1785 18.2367 22.9223 19.8768 23.0362C20.2465 22.9982 20.4835 22.7134 20.5214 22.3527C20.5783 21.7358 20.5973 20.1981 20.5214 19.6001C20.474 19.211 20.1612 18.9927 19.7915 18.9547C18.1893 18.8123 16.3691 19.0591 14.748 18.9642L14.7386 18.9547Z' fill='%23458763'/> </svg>");
  mask-image: url("data:image/svg+xml,<svg width='23' height='30' viewBox='0 0 23 30' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M14.558 4.56528C16.255 4.36595 18.3027 4.68867 20.0375 4.56528C21.0424 4.69816 21.8482 5.51445 21.9335 6.53007C22.1326 9.06437 21.7819 11.8739 21.9335 14.4367C21.8198 15.4618 20.995 16.2876 19.9617 16.373C18.2553 16.5059 16.3687 16.2686 14.6433 16.373C13.6195 16.2591 12.7947 15.4333 12.7094 14.3987C12.5103 11.8455 12.8611 9.02641 12.7094 6.45414C12.8232 5.50496 13.6005 4.68867 14.558 4.57477V4.56528ZM14.6907 5.98904C14.3874 6.05548 14.1504 6.30227 14.1219 6.62499V14.2659C14.1219 14.6265 14.4063 14.9208 14.7666 14.9493C16.3972 14.8449 18.2173 15.0916 19.829 14.9493C20.2176 14.9113 20.4926 14.655 20.521 14.2564V6.66296C20.502 6.31176 20.2271 5.99853 19.8764 5.97955H14.7002L14.6907 5.98904Z' fill='%23458763'/> <path d='M3.91154 12.6522C5.60847 12.4529 7.65617 12.7756 9.39103 12.6522C10.3959 12.7851 11.2017 13.6014 11.287 14.617C11.4861 17.1513 11.1354 19.9608 11.287 22.5236C11.1733 23.5487 10.3485 24.3745 9.31519 24.4599C7.60877 24.5928 5.72223 24.3555 3.99686 24.4599C2.97301 24.346 2.14824 23.5203 2.06292 22.4857C1.86384 19.9324 2.2146 17.1133 2.06292 14.5411C2.17668 13.5919 2.95405 12.7756 3.91154 12.6617V12.6522ZM4.04426 14.0665C3.74089 14.1329 3.50389 14.3797 3.47545 14.7024V22.3433C3.47545 22.704 3.75985 22.9982 4.1201 23.0267C5.75067 22.9223 7.57085 23.1691 9.18247 23.0267C9.58063 22.9887 9.83659 22.7324 9.87451 22.3338V14.7404C9.86503 14.3797 9.59011 14.0854 9.22987 14.057H4.04426V14.0665Z' fill='%23458763'/> <path d='M3.91188 4.5652C5.65622 4.66012 7.62808 4.39435 9.35346 4.55571C10.2067 4.63165 10.984 5.29607 11.2116 6.12185C11.3632 6.71034 11.3443 8.88396 11.2779 9.54838C11.1736 10.6399 10.292 11.4088 9.22073 11.4847C7.56172 11.6081 5.75102 11.3898 4.07304 11.4847C3.18191 11.4278 2.3287 10.7633 2.12014 9.89008C1.98742 9.28261 1.9969 7.11849 2.07274 6.44457C2.16754 5.4954 2.97335 4.69809 3.91188 4.5652ZM4.0446 5.98897C3.73176 6.05541 3.51372 6.3022 3.4758 6.62492C3.40944 7.2229 3.40944 8.81751 3.4758 9.42499C3.5232 9.82364 3.82656 10.0325 4.20576 10.0704C5.76998 10.2128 7.54276 9.95653 9.13541 10.0704C9.50514 10.0514 9.81798 9.79517 9.86538 9.42499C9.93174 8.85548 9.93174 7.20392 9.86538 6.62492C9.82746 6.25474 9.54306 6.00795 9.18281 5.97948C7.55224 5.8371 5.70362 6.08389 4.0446 5.98897Z' fill='%23458763'/> <path d='M14.6532 17.5309C16.3217 17.3601 18.2272 17.6353 19.9147 17.5214C20.8058 17.5784 21.659 18.2428 21.8676 19.1161C22.0193 19.7235 21.9908 21.8307 21.934 22.5141C21.8392 23.5297 20.9765 24.365 19.9621 24.4504C18.2557 24.5833 16.3691 24.346 14.6438 24.4504C13.6673 24.346 12.8236 23.5392 12.7193 22.5616C12.6529 21.8877 12.634 19.771 12.7667 19.1635C12.9658 18.2808 13.7716 17.6353 14.6532 17.5404V17.5309ZM14.7386 18.9547C14.4162 19.0306 14.1698 19.2489 14.1318 19.5906C14.2172 20.4734 14.0181 21.5649 14.1318 22.4287C14.1792 22.7799 14.4636 23.0077 14.8144 23.0362C16.426 23.1785 18.2367 22.9223 19.8768 23.0362C20.2465 22.9982 20.4835 22.7134 20.5214 22.3527C20.5783 21.7358 20.5973 20.1981 20.5214 19.6001C20.474 19.211 20.1612 18.9927 19.7915 18.9547C18.1893 18.8123 16.3691 19.0591 14.748 18.9642L14.7386 18.9547Z' fill='%23458763'/> </svg>");
}

/* Cộng đồng — BA người, không phải hai */
.t4-ic-group {
  -webkit-mask-image: url("data:image/svg+xml,<svg width='23' height='30' viewBox='0 0 23 30' fill='none' xmlns='http://www.w3.org/2000/svg'> <g clip-path='url(https://tiepthitute.com/wp-content/themes/flatsome-child/css/%23clip0_0_23)'> <path d='M19.2828 12.5037C19.6643 12.8133 20.0999 13.0332 20.4835 13.3442C22.5473 15.0161 23.1504 17.4074 22.9706 20.029C22.8864 21.2527 21.9496 22.2977 20.7406 22.4112C20.3625 22.4469 18.2242 22.3481 18.1128 22.4196C18.0389 22.6941 18.043 22.9477 17.9541 23.2272C17.6471 24.1916 16.7615 24.857 15.7789 24.9313C13.0013 24.7611 9.97609 25.1519 7.22717 24.9313C6.25 24.8528 5.38908 24.2168 5.06495 23.2664C4.96512 22.9736 4.96649 22.7109 4.89263 22.4203C3.35269 22.2963 1.60692 22.8706 0.527866 21.4124C-0.0848293 20.5838 -0.0246538 19.1955 0.0368892 18.1918C0.153821 16.2993 1.10022 14.4824 2.5499 13.3211C2.92189 13.0227 3.33491 12.8028 3.72195 12.5289C1.64727 10.9054 1.33066 7.77168 3.00737 5.71525C4.85981 3.44238 8.31853 3.44168 10.1703 5.71525C10.3303 5.91136 10.5594 6.38485 10.6811 6.50252C10.8418 6.65871 10.984 6.52773 11.168 6.52353C11.5379 6.51583 11.9031 6.54875 12.271 6.55295C12.9343 5.38325 13.9873 4.46289 15.2907 4.14C18.947 3.23436 22.1007 6.87374 20.7687 10.4851C20.4849 11.2549 19.9481 12.0505 19.2828 12.503V12.5037ZM6.89552 11.8733V10.6413C6.89552 10.49 7.05485 9.93808 7.11229 9.76298C7.4706 8.67172 8.21322 7.79479 9.14389 7.17562C7.96432 5.03584 4.79417 5.25997 3.83136 7.50272C2.86855 9.74546 4.5815 12.0625 6.89552 11.8733ZM16.1598 11.874C18.536 12.04 20.2045 9.53114 19.0865 7.32972C18.0218 5.23406 15.0698 5.12199 13.8663 7.12939C15.4445 8.1373 16.4005 9.94999 16.1598 11.8733V11.874ZM14.5549 11.2969C14.5549 9.58787 13.2023 8.20244 11.5338 8.20244C9.86531 8.20244 8.51273 9.58787 8.51273 11.2969C8.51273 13.0059 9.86531 14.3914 11.5338 14.3914C13.2023 14.3914 14.5549 13.0059 14.5549 11.2969ZM4.95076 20.7344C5.03282 18.2899 6.53788 16.1291 8.63513 15.0455C8.14484 14.6463 7.76874 14.1455 7.42547 13.6118C4.87486 13.2027 2.39809 14.8627 1.81206 17.4403C1.65821 18.1176 1.5994 19.2845 1.6753 19.9744C1.71701 20.3561 1.99533 20.6776 2.37074 20.7302C3.15575 20.8394 4.14386 20.658 4.95144 20.7351L4.95076 20.7344ZM18.054 20.7344C18.8608 20.6573 19.8496 20.8387 20.6347 20.7295C21.0101 20.6769 21.2884 20.3561 21.3301 19.9737C21.4053 19.2838 21.3472 18.1176 21.1933 17.4396C20.6141 14.8943 18.1599 13.2069 15.6312 13.6118C15.4124 13.9102 15.225 14.2401 14.9816 14.5195C14.8277 14.696 14.5918 14.8487 14.4694 14.9916C14.4304 15.0371 14.4031 15.0497 14.4195 15.1233C16.5188 16.0941 17.9637 18.3809 18.0533 20.7344H18.054ZM11.0825 16.0836C7.88773 16.3735 6.23154 19.2936 6.53788 22.3852C6.58849 22.8938 6.87637 23.2068 7.37966 23.2531L15.8432 23.2152C16.6357 23.0205 16.5038 21.7885 16.4689 21.1259C16.3143 18.1729 14.0564 15.8146 11.0818 16.0843L11.0825 16.0836Z' fill='%23458763'/> </g> <defs> <clipPath id='clip0_0_23'> <rect width='23' height='21' fill='white' transform='translate(0 4)'/> </clipPath> </defs> </svg>");
  mask-image: url("data:image/svg+xml,<svg width='23' height='30' viewBox='0 0 23 30' fill='none' xmlns='http://www.w3.org/2000/svg'> <g clip-path='url(https://tiepthitute.com/wp-content/themes/flatsome-child/css/%23clip0_0_23)'> <path d='M19.2828 12.5037C19.6643 12.8133 20.0999 13.0332 20.4835 13.3442C22.5473 15.0161 23.1504 17.4074 22.9706 20.029C22.8864 21.2527 21.9496 22.2977 20.7406 22.4112C20.3625 22.4469 18.2242 22.3481 18.1128 22.4196C18.0389 22.6941 18.043 22.9477 17.9541 23.2272C17.6471 24.1916 16.7615 24.857 15.7789 24.9313C13.0013 24.7611 9.97609 25.1519 7.22717 24.9313C6.25 24.8528 5.38908 24.2168 5.06495 23.2664C4.96512 22.9736 4.96649 22.7109 4.89263 22.4203C3.35269 22.2963 1.60692 22.8706 0.527866 21.4124C-0.0848293 20.5838 -0.0246538 19.1955 0.0368892 18.1918C0.153821 16.2993 1.10022 14.4824 2.5499 13.3211C2.92189 13.0227 3.33491 12.8028 3.72195 12.5289C1.64727 10.9054 1.33066 7.77168 3.00737 5.71525C4.85981 3.44238 8.31853 3.44168 10.1703 5.71525C10.3303 5.91136 10.5594 6.38485 10.6811 6.50252C10.8418 6.65871 10.984 6.52773 11.168 6.52353C11.5379 6.51583 11.9031 6.54875 12.271 6.55295C12.9343 5.38325 13.9873 4.46289 15.2907 4.14C18.947 3.23436 22.1007 6.87374 20.7687 10.4851C20.4849 11.2549 19.9481 12.0505 19.2828 12.503V12.5037ZM6.89552 11.8733V10.6413C6.89552 10.49 7.05485 9.93808 7.11229 9.76298C7.4706 8.67172 8.21322 7.79479 9.14389 7.17562C7.96432 5.03584 4.79417 5.25997 3.83136 7.50272C2.86855 9.74546 4.5815 12.0625 6.89552 11.8733ZM16.1598 11.874C18.536 12.04 20.2045 9.53114 19.0865 7.32972C18.0218 5.23406 15.0698 5.12199 13.8663 7.12939C15.4445 8.1373 16.4005 9.94999 16.1598 11.8733V11.874ZM14.5549 11.2969C14.5549 9.58787 13.2023 8.20244 11.5338 8.20244C9.86531 8.20244 8.51273 9.58787 8.51273 11.2969C8.51273 13.0059 9.86531 14.3914 11.5338 14.3914C13.2023 14.3914 14.5549 13.0059 14.5549 11.2969ZM4.95076 20.7344C5.03282 18.2899 6.53788 16.1291 8.63513 15.0455C8.14484 14.6463 7.76874 14.1455 7.42547 13.6118C4.87486 13.2027 2.39809 14.8627 1.81206 17.4403C1.65821 18.1176 1.5994 19.2845 1.6753 19.9744C1.71701 20.3561 1.99533 20.6776 2.37074 20.7302C3.15575 20.8394 4.14386 20.658 4.95144 20.7351L4.95076 20.7344ZM18.054 20.7344C18.8608 20.6573 19.8496 20.8387 20.6347 20.7295C21.0101 20.6769 21.2884 20.3561 21.3301 19.9737C21.4053 19.2838 21.3472 18.1176 21.1933 17.4396C20.6141 14.8943 18.1599 13.2069 15.6312 13.6118C15.4124 13.9102 15.225 14.2401 14.9816 14.5195C14.8277 14.696 14.5918 14.8487 14.4694 14.9916C14.4304 15.0371 14.4031 15.0497 14.4195 15.1233C16.5188 16.0941 17.9637 18.3809 18.0533 20.7344H18.054ZM11.0825 16.0836C7.88773 16.3735 6.23154 19.2936 6.53788 22.3852C6.58849 22.8938 6.87637 23.2068 7.37966 23.2531L15.8432 23.2152C16.6357 23.0205 16.5038 21.7885 16.4689 21.1259C16.3143 18.1729 14.0564 15.8146 11.0818 16.0843L11.0825 16.0836Z' fill='%23458763'/> </g> <defs> <clipPath id='clip0_0_23'> <rect width='23' height='21' fill='white' transform='translate(0 4)'/> </clipPath> </defs> </svg>");
}

/* Blog — bút và khung */
.t4-ic-edit_square {
  -webkit-mask-image: url("data:image/svg+xml,<svg width='23' height='30' viewBox='0 0 23 30' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M0.000600177 10.2852C0.307891 8.07039 2.05141 6.43951 4.33388 6.30547C6.85523 6.15726 9.52542 6.41943 12.0624 6.30783C13.1235 6.41293 13.2423 7.78932 12.2316 8.06448L4.3807 8.0757C2.99068 8.17844 1.90736 9.197 1.79513 10.5704L1.82754 21.5916C1.96018 22.0226 2.3533 22.2612 2.80763 22.2187C3.55785 22.1478 4.49593 20.5677 5.32838 20.4555L15.1635 20.452C16.4353 20.3398 17.4958 19.2952 17.6098 18.0411C17.6758 17.3107 17.5036 16.3576 17.6212 15.6656C17.7725 14.7758 19.1103 14.6813 19.3647 15.5646C19.4788 15.9608 19.4403 17.5575 19.4097 18.044C19.2717 20.2459 17.4976 22.0592 15.2541 22.221L5.77371 22.2198C4.68078 23.0861 3.99178 24.1235 2.40191 23.9883C1.23276 23.8891 0.139841 22.8333 0 21.6884V10.2852H0.000600177Z' fill='%23458763'/> <path d='M19.9368 3.93272C22.3081 3.66819 23.8169 6.12987 22.526 8.07133C20.1264 10.3222 17.8572 12.9894 15.388 15.1481C14.2765 16.12 12.7112 16.831 11.2108 16.9166C10.553 16.9544 9.77338 16.8812 9.75358 16.048C9.70976 14.2353 10.5578 12.4987 11.7696 11.1896C13.8546 8.93755 16.3027 6.88626 18.4189 4.64897C18.8469 4.28346 19.3636 3.9965 19.9368 3.93272ZM11.6807 15.0584C12.5438 14.9125 13.3342 14.5027 14.0172 13.976L20.9811 7.12599C21.6815 6.29343 20.6204 5.2353 19.7447 5.86534L12.8925 12.6044C12.2899 13.3 11.817 14.1437 11.6807 15.0584Z' fill='%23458763'/> <path d='M4.39282 11.623C4.9972 11.538 6.53665 11.5563 7.16804 11.61C8.35639 11.7104 8.35819 13.2397 7.34209 13.3755C6.87215 13.4387 4.69711 13.447 4.26618 13.3596C3.32631 13.1694 3.39653 11.7629 4.39282 11.6224V11.623Z' fill='%23458763'/> <path d='M4.39282 15.1586C4.9972 15.0736 6.53665 15.0919 7.16804 15.1457C8.35639 15.246 8.35819 16.7754 7.34209 16.9112C6.87215 16.9743 4.69711 16.9826 4.26618 16.8952C3.32631 16.7051 3.39653 15.2986 4.39282 15.1581V15.1586Z' fill='%23458763'/> </svg>");
  mask-image: url("data:image/svg+xml,<svg width='23' height='30' viewBox='0 0 23 30' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M0.000600177 10.2852C0.307891 8.07039 2.05141 6.43951 4.33388 6.30547C6.85523 6.15726 9.52542 6.41943 12.0624 6.30783C13.1235 6.41293 13.2423 7.78932 12.2316 8.06448L4.3807 8.0757C2.99068 8.17844 1.90736 9.197 1.79513 10.5704L1.82754 21.5916C1.96018 22.0226 2.3533 22.2612 2.80763 22.2187C3.55785 22.1478 4.49593 20.5677 5.32838 20.4555L15.1635 20.452C16.4353 20.3398 17.4958 19.2952 17.6098 18.0411C17.6758 17.3107 17.5036 16.3576 17.6212 15.6656C17.7725 14.7758 19.1103 14.6813 19.3647 15.5646C19.4788 15.9608 19.4403 17.5575 19.4097 18.044C19.2717 20.2459 17.4976 22.0592 15.2541 22.221L5.77371 22.2198C4.68078 23.0861 3.99178 24.1235 2.40191 23.9883C1.23276 23.8891 0.139841 22.8333 0 21.6884V10.2852H0.000600177Z' fill='%23458763'/> <path d='M19.9368 3.93272C22.3081 3.66819 23.8169 6.12987 22.526 8.07133C20.1264 10.3222 17.8572 12.9894 15.388 15.1481C14.2765 16.12 12.7112 16.831 11.2108 16.9166C10.553 16.9544 9.77338 16.8812 9.75358 16.048C9.70976 14.2353 10.5578 12.4987 11.7696 11.1896C13.8546 8.93755 16.3027 6.88626 18.4189 4.64897C18.8469 4.28346 19.3636 3.9965 19.9368 3.93272ZM11.6807 15.0584C12.5438 14.9125 13.3342 14.5027 14.0172 13.976L20.9811 7.12599C21.6815 6.29343 20.6204 5.2353 19.7447 5.86534L12.8925 12.6044C12.2899 13.3 11.817 14.1437 11.6807 15.0584Z' fill='%23458763'/> <path d='M4.39282 11.623C4.9972 11.538 6.53665 11.5563 7.16804 11.61C8.35639 11.7104 8.35819 13.2397 7.34209 13.3755C6.87215 13.4387 4.69711 13.447 4.26618 13.3596C3.32631 13.1694 3.39653 11.7629 4.39282 11.6224V11.623Z' fill='%23458763'/> <path d='M4.39282 15.1586C4.9972 15.0736 6.53665 15.0919 7.16804 15.1457C8.35639 15.246 8.35819 16.7754 7.34209 16.9112C6.87215 16.9743 4.69711 16.9826 4.26618 16.8952C3.32631 16.7051 3.39653 15.2986 4.39282 15.1581V15.1586Z' fill='%23458763'/> </svg>");
}

/* Dự án — trang tài liệu */
.t4-ic-description {
  -webkit-mask-image: url("data:image/svg+xml,<svg width='23' height='30' viewBox='0 0 23 30' fill='none' xmlns='http://www.w3.org/2000/svg'> <g clip-path='url(https://tiepthitute.com/wp-content/themes/flatsome-child/css/%23clip0_0_16)'> <path d='M4.53565 4.01208L18.3181 4C19.6035 4.15027 20.6585 5.09486 20.9086 6.35676C21.0292 11.1803 21.0326 16.0515 20.9072 20.8737C20.8334 21.1574 20.7134 21.3775 20.5264 21.6016C19.077 23.3391 16.9636 24.8955 15.4545 26.6237C15.1794 26.8189 14.8623 26.9732 14.5167 27.0007L4.67591 26.998C3.39592 26.843 2.32937 25.9038 2.08543 24.6413C1.91603 18.7356 2.05901 12.8025 2.01293 6.88741C2.11931 5.39943 3.05034 4.29652 4.53565 4.01208ZM13.9313 25.392V21.6505C13.9313 21.0857 14.8467 20.0686 15.4274 20.0686H19.2823L19.3582 19.9935V6.83643C19.3582 6.29504 18.7355 5.61277 18.1656 5.60673L4.8758 5.60404C4.13044 5.66711 3.70287 6.22862 3.63308 6.93505V24.063C3.60733 24.5701 4.19752 25.392 4.72538 25.392H13.9313ZM18.1412 21.6754H15.7317C15.6788 21.6754 15.5542 21.7988 15.5542 21.8511V24.2367L18.1412 21.6754Z' fill='%23458763'/> <path d='M7.07105 9.00738L15.8799 9C16.7405 9.11606 16.9132 10.1995 16.1401 10.5551L7.0121 10.5987C6.11699 10.4135 6.159 9.159 7.07037 9.00805L7.07105 9.00738Z' fill='%23458763'/> <path d='M6.96759 14.439L12.7333 14.4316C13.6535 14.6369 13.5783 15.9022 12.6317 16.0296H7.11192C6.18699 15.9049 6.08671 14.6886 6.96692 14.439H6.96759Z' fill='%23458763'/> <path d='M7.0215 19.8633H11.1054C11.9965 20.0498 11.9578 21.3332 11.0627 21.4539C9.8471 21.6176 8.27439 21.3506 7.0215 21.4465C6.14942 21.2258 6.14875 20.0847 7.0215 19.864V19.8633Z' fill='%23458763'/> </g> <defs> <clipPath id='clip0_0_16'> <rect width='19' height='24' fill='white' transform='translate(2 3)'/> </clipPath> </defs> </svg>");
  mask-image: url("data:image/svg+xml,<svg width='23' height='30' viewBox='0 0 23 30' fill='none' xmlns='http://www.w3.org/2000/svg'> <g clip-path='url(https://tiepthitute.com/wp-content/themes/flatsome-child/css/%23clip0_0_16)'> <path d='M4.53565 4.01208L18.3181 4C19.6035 4.15027 20.6585 5.09486 20.9086 6.35676C21.0292 11.1803 21.0326 16.0515 20.9072 20.8737C20.8334 21.1574 20.7134 21.3775 20.5264 21.6016C19.077 23.3391 16.9636 24.8955 15.4545 26.6237C15.1794 26.8189 14.8623 26.9732 14.5167 27.0007L4.67591 26.998C3.39592 26.843 2.32937 25.9038 2.08543 24.6413C1.91603 18.7356 2.05901 12.8025 2.01293 6.88741C2.11931 5.39943 3.05034 4.29652 4.53565 4.01208ZM13.9313 25.392V21.6505C13.9313 21.0857 14.8467 20.0686 15.4274 20.0686H19.2823L19.3582 19.9935V6.83643C19.3582 6.29504 18.7355 5.61277 18.1656 5.60673L4.8758 5.60404C4.13044 5.66711 3.70287 6.22862 3.63308 6.93505V24.063C3.60733 24.5701 4.19752 25.392 4.72538 25.392H13.9313ZM18.1412 21.6754H15.7317C15.6788 21.6754 15.5542 21.7988 15.5542 21.8511V24.2367L18.1412 21.6754Z' fill='%23458763'/> <path d='M7.07105 9.00738L15.8799 9C16.7405 9.11606 16.9132 10.1995 16.1401 10.5551L7.0121 10.5987C6.11699 10.4135 6.159 9.159 7.07037 9.00805L7.07105 9.00738Z' fill='%23458763'/> <path d='M6.96759 14.439L12.7333 14.4316C13.6535 14.6369 13.5783 15.9022 12.6317 16.0296H7.11192C6.18699 15.9049 6.08671 14.6886 6.96692 14.439H6.96759Z' fill='%23458763'/> <path d='M7.0215 19.8633H11.1054C11.9965 20.0498 11.9578 21.3332 11.0627 21.4539C9.8471 21.6176 8.27439 21.3506 7.0215 21.4465C6.14942 21.2258 6.14875 20.0847 7.0215 19.864V19.8633Z' fill='%23458763'/> </g> <defs> <clipPath id='clip0_0_16'> <rect width='19' height='24' fill='white' transform='translate(2 3)'/> </clipPath> </defs> </svg>");
}


/* ══ DỜI TỪ '40-page-xu-ly-loi-sai-google-ads.css' (20/08/2026) ══════════
   Luật hover mục menu — áp cho MỌI trang, không riêng trang #4. Đo bằng
   CSSOM: khớp ở cả 8 trang thử. Xem 'qa/soat-css.md'. */
/* ⛔ MỤC MENU ĐẦU TRANG KHÔNG ĐỔI GÌ KHI RÊ CHUỘT.
   Flatsome mờ đi 'opacity: .85' khi hover, còn Figma khai component set
   "Text Menu" (163:4547) có HAI biến thể GIỐNG HỆT NHAU từng thuộc tính —
   tức thiết kế cố ý không có trạng thái hover cho mục menu (chỗ nào designer
   muốn đổi thì họ có khai: tiêu đề cột trong mega menu đổi màu).
   Bộ kiểm trạng thái T4 tìm ra 17/08/2026. */
.t4 #header .header-main .nav > li > a:hover,
.t4 #header .header-main .nav > li:hover > a { opacity: 1; }


/* ══════════════════════════════════════════════════════════════════════
   BỘ CHỌN NGÔN NGỮ GỌN — thay giao diện to của GTranslate (28/08/2026)
   ──────────────────────────────────────────────────────────────────────
   [phục vụ] phần tử: element-lang-switch.php (li#t4-lang-switch)
   [figma] không có node — đây là component MỚI, dựng theo ảnh mockup 4T gửi
   (không phải một phần của 25 trang Figma gốc), nên KHÔNG chạy qua đường ống
   nghiệm-thu-tong.py/diff-giao-dien.py của các trang nội dung.
   [lý do vượt panel] Header Builder của Flatsome không có tuỳ chọn nào cho
   khối này — toàn bộ style tự viết theo số đo 4T chốt trong yêu cầu.

   Widget GỐC của GTranslate (`.gtranslate_wrapper`, nổi position:fixed do
   gtranslate_display_floating() ở wp_footer) bị ẩn ngay dưới đây — KHÔNG xoá
   khỏi DOM, vì bên trong nó còn <div id="google_translate_element2"> mà cơ
   chế dịch cookie-based cần để khởi tạo Google Translate. Ẩn thị giác thôi.
   ═══════════════════════════════════════════════════════════════════════ */

/* ẩn hẳn widget nổi gốc của GTranslate — giữ trong DOM cho engine dịch chạy */
.gtranslate_wrapper .gt_switcher_wrapper { display: none !important; }

/* --- nút đóng: [globe] VI [chevron] -------------------------------------- */
#header .t4-lang-switch { display: flex; align-items: center; }

#header .t4-lang-btn {
  display: inline-flex;
  flex-wrap: nowrap; /* Flatsome .nav > li > a { flex-wrap: wrap } lam ket xuong dong */
  align-items: center;
  gap: 7px;
  height: 42px;
  padding: 0 13px;
  background: #fff;
  border: 1px solid #E4E7E2; /* không có token --t4-line sẵn có, dùng thẳng mã màu */
  border-radius: 9px;
  color: var(--t4-dark-moss);
  font-family: var(--t4-font-body, inherit);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease;
}
#header .t4-lang-btn:hover,
#header .t4-lang-btn:focus-visible {
  background: #F5F7F5;
  border-color: #D8DED6;
}
#header .t4-lang-btn:focus-visible { outline: 2px solid var(--t4-leaf); outline-offset: 2px; }

#header .t4-lang-ic {
  font-size: 19px;
  line-height: 1;
  color: var(--t4-dark-moss);
  user-select: none;
}
#header .t4-lang-chevron {
  font-size: 18px;
  transition: transform .18s ease;
}
/* Flatsome thêm `.is-open`/đảo `aria-expanded` khi mở — xoay mũi tên theo
   đúng trạng thái ARIA thay vì thêm class riêng. */
#header .t4-lang-switch.is-open .t4-lang-chevron,
#header .t4-lang-btn[aria-expanded="true"] .t4-lang-chevron { transform: rotate(180deg); }

/* --- dropdown ------------------------------------------------------------ */

/* VỊ TRÍ: sát mép DƯỚI HEADER, căn giữa theo nút (4T chốt 29/08/2026).
   ──────────────────────────────────────────────────────────────────────
   Mặc định Flatsome đặt `top: -31px` cho .nav-dropdown, tức dropdown NHÔ
   NGƯỢC LÊN và đè lên nút "Gọi ngay" — đó là lỗi 4T báo, đã đo tận nơi
   (dropdown y = −14 trong khi header chỉ cao 76).

   ⛔ CHỈ đè vị trí khi ĐANG MỞ (`.current-dropdown`). Flatsome giấu
   dropdown lúc đóng bằng `left: -99999px`; đè `left` vô điều kiện là nó
   KHÔNG BAO GIỜ ẩn được nữa, dropdown treo lơ lửng vĩnh viễn.

   `--t4-ls-day` = khoảng hở từ đáy NÚT xuống đáy HEADER, đúng bằng
   (chiều cao header − chiều cao nút) / 2 vì nút được căn giữa dọc.
   ⚠ KHÔNG tính được bằng `var(--t4-header-h)`: token đó báo 76px ở MỌI
   khổ, trong khi header thật ở điện thoại chỉ 60px — đã đo, không đoán.
   Ba giá trị dưới đây lấy từ số đo thật, mốc 550px là breakpoint "small"
   của chính Flatsome:
       ≤549px  header 60 − nút 40 → 10px
       550–849 header 76 − nút 40 → 18px
       ≥850px  header 76 − nút 42 → 17px
   Đổi chiều cao nút ở bất kỳ dải nào thì phải sửa lại số tương ứng. */
#header .t4-lang-switch { --t4-ls-day: 17px; }

#header li.t4-lang-switch.current-dropdown > .t4-lang-dropdown.nav-dropdown {
  top: calc(100% + var(--t4-ls-day));
  left: 50%;
  right: auto;
  /* ⚠ `!important` ở đây là BẮT BUỘC, không phải cho tiện: flatsome.js tự
     GHI THẲNG `style="margin-left: -71.33px"` lên phần tử khi mở dropdown
     (bộ chống-tràn-màn-hình của nó, tính theo vị trí nút). Inline style
     luôn thắng CSS thường, nên thiếu dòng này thì dropdown lệch trái đúng
     bằng con số Flatsome tự tính — đã đo, lệch 71px. Bỏ phần chống tràn
     của Flatsome ở đây là an toàn: căn giữa đã được kiểm ở 375/390/430/
     768/1024/1440px, mép phải dropdown đều còn cách mép nội dung. */
  margin-left: 0 !important;
  transform: translateX(-50%);
}

#header .t4-lang-dropdown.nav-dropdown {
  min-width: 178px;
  width: max-content;
  padding: 6px 0;
  background: #fff;
  border: 0;
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(21, 84, 70, .16), 0 2px 8px rgba(0, 0, 0, .06);
  z-index: 9500; /* nổi trên banner/hero, dưới lightbox nếu có */
}
#header .t4-lang-dropdown.nav-dropdown li { padding: 0; margin: 0; }

#header .t4-lang-item {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 14px;
  color: #263238;
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s ease;
}
#header .t4-lang-item:hover,
#header .t4-lang-item:focus-visible { background: #EEF6F1; }

#header .t4-lang-flag { font-size: 21px; line-height: 1; }
#header .t4-lang-ten { flex: 1 1 auto; }

#header .t4-lang-check {
  font-size: 18px;
  color: var(--t4-mang-la-chu);
  opacity: 0;
  visibility: hidden;
}
#header .t4-lang-item.is-active .t4-lang-check { opacity: 1; visibility: visible; }

/* --- điện thoại (khớp ranh giới Flatsome hide-for-medium/show-for-medium
   849px đã dùng xuyên suốt tệp này, KHÔNG dùng 767px như bản nháp — dưới
   849px header đã chuyển sang tập phần tử mobile) --------------------------- */
@media (max-width: 849px) {
  #header .t4-lang-btn {
    height: 40px;
    padding: 0 10px;
    font-size: 14px;
    gap: 6px;
  }
  #header .t4-lang-ic { font-size: 18px; }
  #header .t4-lang-chevron { font-size: 16px; }

  /* cụm ngôn ngữ đứng ngay trước icon tìm kiếm, không xuống dòng */
  #header .mobile-nav.nav-right { flex-wrap: nowrap; align-items: center; gap: 11px; }
  #header .t4-lang-switch { flex: 0 0 auto; }

  /* Căn giữa theo nút (giống desktop) — đã đo ở 375/390/430/768px, mép
     phải của dropdown đều còn cách mép nội dung 18px, không tràn. */
  #header .t4-lang-switch { --t4-ls-day: 18px; }
}

/* Dưới 550px header co lại còn 60px (breakpoint "small" của Flatsome),
   nên khoảng hở xuống đáy header cũng nhỏ đi theo. */
@media (max-width: 549px) {
  #header .t4-lang-switch { --t4-ls-day: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  #header .t4-lang-btn,
  #header .t4-lang-chevron,
  #header .t4-lang-item { transition: none; }
}

/* --- màn hình desktop HẸP (850–1279px): thu gọn tối đa nút đóng ---------
   [phát hiện 28/08/2026] Ở dải này, menu + hai nút CTA sẵn có ("Nhận tư vấn"
   · "Gọi ngay") đã gần hết chỗ của #header — đo được TRÀN ~8px ngay cả
   TRƯỚC KHI thêm nút này (không phải lỗi do khối này gây ra). Không được
   phép thu nhỏ menu/nút CTA (nằm trong danh sách cấm chạm của yêu cầu), nên
   đây là mức thu gọn tối đa còn lại trong phạm vi được giao: bỏ chữ "VI",
   chỉ giữ icon quả địa cầu, để giảm phần đóng góp của khối này vào tổng
   chiều rộng. Xem quả bàn giao cuối — 4T cần biết dải 1024px vẫn còn tràn
   nhẹ do hai nút CTA, việc đó ngoài phạm vi khối này. */
@media (min-width: 850px) and (max-width: 1279px) {
  #header .t4-lang-btn { gap: 0; padding: 0 9px; }
  #header .t4-lang-code { display: none; }
}

/* --- "Gọi ngay" ĐÃ BỎ HẲN KHỎI HEADER DESKTOP (4T chốt 29/08/2026) ------
   Không còn ẩn bằng CSS nữa: nút được gỡ thẳng khỏi cấu hình Header Builder
   (`header_elements_right`: ["button-1","button-2","lang-switch"] →
   ["button-1","lang-switch"]), nên nó KHÔNG còn trong DOM chứ không phải
   chỉ khuất mắt. "Nhận tư vấn" tự dồn sang phải chiếm đúng chỗ cũ của nó,
   vì cụm nav-right căn phải.

   ⚠ CHỈ desktop. Header mobile dùng `header_mobile_elements_right`
   (["lang-switch","search"]) — vốn không có nút CTA nào, không đụng tới.
   ⚠ Số điện thoại không mất: vẫn còn ở nút gọi NỔI cố định bên phải màn hình.
   Muốn khôi phục: thêm lại "button-2" vào `header_elements_right`; bản sao
   lưu giá trị cũ ở ~/chuyen-doi/header_elements_right.truoc-20260829.json */

/* ── Xoá đường kẻ thừa ngay dưới thanh menu (danh sách lỗi 4T 09/09/2026, mục 1.2)
   `.top-divider` là đường kẻ 1px Flatsome tự chèn giữa header và nội dung. Figma
   không có nó; trên nền xanh của header nó hiện thành một vạch mảnh trông như lỗi.
   ⚠ Xuất hiện đúng MỘT lần trên mọi trang (đã đếm: 6/6 trang) nên ẩn ở đây là
     ẩn toàn site, không cần lặp ở từng tệp trang. */
.t4 .top-divider { display: none; }

/* t4-21-footer-css */
/* ==========================================================================
   21-footer.css — tách từ style.css ngày 17/08/2026 theo III.4.1.
   Nội dung bên dưới là NGUYÊN VĂN các mục §10 footer UX Block của bản gộp;
   không sửa một luật nào trong lần tách này.
   ========================================================================== */


/* ── §10 footer UX Block (dòng 1033–1458 của style.css cũ) ──────────────────── */

/* --------------------------------------------------------------------------
   10. FOOTER UX BLOCK "Footer 4T" — cấu trúc row/col Flatsome
   -------------------------------------------------------------------------- */
/* Figma 320:1858 KHÔNG dùng strokeWeight chung mà dùng
   individualStrokeWeights {top:0, right:0, bottom:20, left:0} — tức CHỈ có
   viền đáy 20px camel. Và strokeAlign=INSIDE nên 20px đó nằm TRONG chiều cao
   650, không cộng thêm. Với box-sizing:border-box của Flatsome thì
   padding-bottom + border-bottom phải bằng đúng khoảng trống Figma (44px). */
.t4fx-footer {
  background: linear-gradient(180deg, var(--t4-mang-la-nen) 0%, var(--t4-dark-moss) 100%);
  border-bottom: 20px solid var(--t4-camel);
  color: var(--t4-white);
  padding: 61px 0 24px;
}

/* Figma "Logo_Vertical" cao ĐÚNG 45px (rộng 189,15). Shortcode [ux_image]
   đặt bề rộng theo PHẦN TRĂM cột (57%) nên logo ra 205px ở desktop và 201px
   ở mobile — hai con số khác nhau, cả hai đều sai. Khoá theo CHIỀU CAO chứ
   không theo bề rộng: chiều cao là thứ Figma quy định và cũng là thứ đẩy
   lệch mọi khối bên dưới; bề rộng suy ra từ tỉ lệ tệp SVG (≈190,3px, lệch
   1,1px so với Figma — dưới ngưỡng 2px). */
.t4fx-footer .t4fx-hang-logo .img img {
  width: auto !important;
  height: 45px !important;
}
.t4fx-footer a { color: var(--t4-white); text-decoration: none; }
/* Không gạch chân khi rê chuột (4T chốt 29/08/2026) — trước đây luật này
   là `text-decoration: underline`. Vẫn giữ MỘT phản hồi hover bằng độ mờ,
   để người dùng biết chữ đó bấm được; bỏ hẳn phản hồi thì link trông như
   chữ thường. Muốn bỏ nốt thì xoá cả dòng dưới. */
.t4fx-footer a:hover { text-decoration: none; opacity: .75; }
.t4fx-footer ul { list-style: none; margin: 0; padding: 0; }

/* ⛔ GỐC CỦA NHIỀU LỖI LỆCH VỊ TRÍ: [text_box] của Flatsome luôn kèm class
   "banner-layer x50 y50", vốn dành cho chữ đặt đè lên banner —
   left:50% + transform:translate(-50%,-50%). Dùng ngoài banner (như trong
   footer) thì khối bị kéo lệch sang trái/lên trên, đo được
   transform: matrix(1,0,0,1,-345,-18). Trả về dòng chảy bình thường cho
   MỌI text_box trong footer. */
.t4fx-footer .text-box.banner-layer {
  position: static !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
}

/* Figma "Frame 155": khối chữ rộng ĐÚNG 432px, đặt sát mép PHẢI của khung
   1080, nhưng chữ BÊN TRONG căn TRÁI (textAlignHorizontal=LEFT) và giãn
   dòng 28px. Trước đây set text-align:right cho cả khối rộng 600px — sai
   cả 3 thông số. */
.t4fx-footer .t4fx-hang-logo > .col {
  padding: 0; /* Figma: logo x=410, khối ĐKKD x=1058 (sát mép phải 1490).
     Padding ngang 15px của Flatsome đẩy logo sang phải 15px và khối ĐKKD
     sang trái 15px; padding-bottom 30px làm hàng cao 86 thay vì 55, kéo
     đường kẻ xuống y=206 thay vì 175. */
}

/* [phục vụ] dòng đăng ký kinh doanh ở footer | [trang] toàn site
   [figma] "Công Ty TNHH DATAWA Đăng k…" '349:2744' 432×55, trong
   '4T Footer ▸ Frame 155'. Không cộng 30: đây là '.text-inner', không
   phải '.col' (xem GIA ĐÌNH SỐ KHUNG đầu '30-components.css').       */
.t4fx-dkkd { margin: 0; }
.t4fx-dkkd .text-inner {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  text-align: center !important;
}
/* Figma "Frame 155": logo + dòng ĐKKD canh GIỮA theo chiều dọc trong cùng
   hàng (counterAxisAlignItems=CENTER) — [row] mặc định của Flatsome không
   tự làm việc này khi text 2 dòng cao hơn logo. */
.t4fx-hang-logo { align-items: center; }

/* Figma: đường kẻ ngang 1px chạy hết khung nội dung, NGAY DƯỚI hàng
   logo + ĐKKD (node "Horizontal Divider" trong 4T Footer). Shortcode
   không có phần tử này — dựng bằng ::after trên chính hàng đó, không
   phải thêm khối mới vào UX Block. */
.t4fx-footer .t4fx-hang-logo::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, .4); /* Figma: stroke trắng @40% */
  margin-top: 58px;                    /* hàng logo kết thúc y=117 → đường kẻ đúng y=175 */
}

/* Khoảng cách dọc giữa các khối — [gap] trong shortcode đang để 65/40/42px,
   đo lại theo Figma thì lệch tới +113px tổng chiều cao (763 so với 650).
   Chỉnh bằng CSS, KHÔNG sửa shortcode. Thứ tự con trong .section-content:
   1 hàng logo · 2 gap · 3 hàng 4 cột · 4 gap · 5 hàng icon MXH · 6 gap ·
   7 hàng liên hệ · 8 copyright. */
.t4fx-footer .section-content > .gap-element:nth-child(2) { padding-top: 35px !important; } /* Figma: đường kẻ y=176 → hàng cột y=208 */
.t4fx-footer .section-content > .gap-element:nth-child(4) { padding-top: 18px !important; }
.t4fx-footer .section-content > .gap-element:nth-child(6) { padding-top: 10px !important; }
/* [text_box] của UX Builder tự đặt "font-size:100%" trên .text-box-content
   rồi chữ thật nằm trong .text-inner lồng bên trong — ép trực tiếp ở đây,
   đặt trên .t4fx-dkkd không đủ vì bị style scoped theo ID của chính khối đè. */
/* 4T chốt 29/08/2026: dòng đăng ký kinh doanh chuyển xuống NGAY DƯỚI hàng
   chứng nhận, và lấy ĐÚNG kiểu chữ của dòng địa chỉ "173 Trung Kính…"
   (`.t4fx-lienhe`) — đo trên trang thật: Manrope 12px/400, lh 16px,
   màu rgba(255,255,255,.62). Trước đây là 14px/600, lh 28, #fcfbf6.
   ⚠ NGOẠI LỆ CÓ CHỦ ĐÍCH so với Figma `349:2744` (432×55, 14/600, nằm cạnh
   logo). Người quyết, không phải đo sai — đừng "sửa lại cho khớp Figma". */
.t4fx-dkkd .text-inner {
  font-family: var(--t4-font-body) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 16px !important;
  color: rgba(255, 255, 255, .62) !important;
}
/* 4T yêu cầu CHỈ MỘT HÀNG chữ. Chỉ ép ở desktop: đo được chuỗi dài ~685px
   trong khung rộng 1050px nên thừa chỗ. ⛔ KHÔNG ép ở mobile — khung chỉ
   352px, `nowrap` ở đó là tràn ngang cả trang. */
@media (min-width: 850px) {
  .t4fx-dkkd .text-inner { white-space: nowrap; }
}

.t4fx-col-title {
  margin: 0 0 24px;
}
/* [title tag_name="h4"] của Flatsome bọc chữ trong
   <h4 class="section-title"><span class="section-title-main"> — lớp
   .t4fx-col-title chỉ nằm trên <div> ngoài cùng, không chạm được chữ thật.
   Cùng loại lỗi với .t4fx-dkkd (mục 10), sửa bằng cách ép trực tiếp vào
   .section-title-main. */
.t4fx-col-title .section-title-main {
  font-family: var(--t4-font-body) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 22px !important;
  color: #f8f5ee !important;
  text-transform: none !important;
  border-bottom: 0 !important; /* Flatsome vẽ gạch chân ở ĐÂY (2px rgba(0,0,0,.1)) */
  padding-bottom: 0 !important;
  white-space: nowrap; /* Figma: mọi tiêu đề cột nằm 1 dòng. Chữ render trên
     web rộng hơn số đo Figma vài px nên "Hệ sinh thái kiến thức" và "Hỗ trợ
     khách hàng" bị bẻ đôi, đẩy cả danh sách bên dưới xuống. */
  /* ⛔ Flatsome đặt sẵn margin "0 15px -2px 0" lên chính <span> này. Cái
     margin-bottom ÂM 2px là thủ phạm thật của 15 mốc lệch mobile: <h4> là
     flex container nên chiều cao nó = hộp margin của span = 19-2 = 17px,
     tức khoảng cách tiêu đề → mục đầu bị hụt đúng 2px ở MỌI cột. Nhìn số
     line-height thì vẫn thấy 19px và tưởng đã đúng. */
  margin: 0 !important;
}
/* Flatsome "section-title" vẽ gạch chân ở HAI nơi độc lập: border-bottom
   của chính <h4> và của <span class="section-title-main"> bên trong, cộng
   2 thẻ <b> rỗng hai bên làm đường kẻ kéo dài. Figma KHÔNG có gạch chân
   nào dưới tiêu đề cột — phải tắt cả ba. */
.t4fx-col-title .section-title {
  border-bottom: 0 !important;
  /* Figma: tiêu đề kết thúc y=233, mục đầu y=257 → cách 24px. Mục đầu có
     sẵn 3px đệm trong .ux-menu-link nên đặt 21 để chữ rơi đúng 257.
     ⚠ 22 → 20 khi gỡ margin-bottom âm 2px của .section-title-main ở trên:
     <h4> cao thêm đúng 2px nên phải trả lại 2px ở đây, tổng khối tiêu đề
     giữ nguyên 42px. Gỡ một mà quên cái kia là cả 4 cột desktop tụt 2px. */
  margin-bottom: 20px !important;
}
.t4fx-col-title .section-title b { display: none !important; }
.t4fx-col-title.section-title-container { margin-bottom: 0 !important; }
/* ⛔ [ux_menu] render <div class="ux-menu-link">, KHÔNG phải <li> — mọi quy
   tắc ".t4fx-col-list li" trước đây không hề có tác dụng. Mỗi mục cao sẵn
   40px; Figma là 39px (chữ 15 + khoảng cách 24). */
.t4fx-col-list .ux-menu-link { height: 39px; }
/* [ux_menu_link] render <a class="ux-menu-link__link"><span class="ux-menu-link__text">
   — chữ thật nằm trong span này, không phải trực tiếp trong <li>/<a>. */
.t4fx-col-list .ux-menu-link__text {
  font-family: var(--t4-font-body) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 15px !important;
  color: rgba(255, 255, 255, .62) !important; /* Figma #ffffff @62% — KHÔNG phải trắng đặc */
  white-space: nowrap; /* Figma mọi mục nằm 1 dòng; cột hẹp làm "Tư vấn chiến lược…" bị bẻ 2 dòng */
}

/* Figma "Frame 180": 4 cột KHÔNG chia đều 25%, mà rộng theo nội dung rồi
   dàn SPACE_BETWEEN trong khung 1080 (x = 410 · 787 · 1059 · 1351).
   Flatsome chia đều 25% + padding 15px mỗi bên → vừa sai vị trí, vừa làm
   cột 1 hẹp hơn nội dung nên chữ bị bẻ dòng. Chỉ áp desktop; mobile giữ
   nguyên quy tắc xếp dọc ở media query cuối file. */
@media (min-width: 850px) {
  .t4fx-footer .row:has(> .col .t4fx-col-title) {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    padding-left: 0;
    padding-right: 0;
  }
  /* ⛔ .row của Flatsome có ::after clearfix (content:"" display:table).
     Trong flex-container nó thành PHẦN TỬ THỨ 5 và ăn mất một khoảng của
     space-between: khoảng cách ra 385/4=96px thay vì 385/3=128px, cột cuối
     hụt 97px so với Figma. Tắt clearfix cho đúng 4 phần tử.
     (Đã loại trừ giả thuyết "nút văn bản khoảng trắng" bằng thí nghiệm
     dựng flex thật trên trình duyệt — khoảng trắng KHÔNG gây lệch.) */
  .t4fx-footer .row:has(> .col .t4fx-col-title)::after,
  .t4fx-footer .row:has(> .col .t4fx-col-title)::before { content: none; }
  .t4fx-footer .row:has(> .col .t4fx-col-title) > .col {
    max-width: none;
    flex: 0 0 auto;
    padding-left: 0;
    padding-right: 0;
  }
  /* Bề rộng ĐÚNG từng cột theo Figma (Section w=249/143/164/139). Cộng lại
     695, khung 1080 → 3 khoảng cách 128,33px, cho ra x = 410 · 787 · 1059 ·
     1351 khớp tuyệt đối bản thiết kế. */
  .t4fx-footer .row:has(> .col .t4fx-col-title) > .col:nth-child(1) { width: 249px; }
  .t4fx-footer .row:has(> .col .t4fx-col-title) > .col:nth-child(2) { width: 143px; }
  .t4fx-footer .row:has(> .col .t4fx-col-title) > .col:nth-child(3) { width: 164px; }
  .t4fx-footer .row:has(> .col .t4fx-col-title) > .col:nth-child(4) { width: 139px; }
}

.t4fx-mxh {
  display: flex;
  align-items: center;
  gap: 24px;
}
.t4fx-mxh-ke { flex: 1 1 auto; height: 1px; background: rgba(255,255,255,.35); }

/* Dải icon mạng xã hội Footer — Figma node 320:1858 → Section: đường kẻ
   422px + dải icon (Frame 152, 4 icon 26×23 gap 16, KHÔNG khung/nền tròn) +
   đường kẻ 422px, cách nhau 32px, căn giữa cả hàng. [follow] chỉ render 4
   icon nên 2 đường kẻ dựng bằng ::before/::after ngay trên chính container
   — genGap 16px (khớp icon-icon), cộng thêm margin 16px ở cạnh trong của
   đường kẻ để đạt đúng 32px đường kẻ↔icon như Figma. */
.t4fx-mxh-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  /* Figma "Section" của dải MXH rộng 1060 đặt tại x=420 — HẸP HƠN khung
     1080 của các hàng khác đúng 10px mỗi bên, y hệt hàng liên hệ. Để
     width:100% thì nó ăn theo cột (1080 − padding 30 = 1050 tại x=425),
     sai cả vị trí lẫn bề rộng, kéo theo hai đường kẻ hai bên sai luôn.
     ⚠ Phải !important: shortcode [follow] gắn sẵn class "full-width" của
     Flatsome, vốn là 'width: 100% !important'. Đặt width thường thì im lặng
     không ăn — bảng đo báo 1080px tại x=410 thay vì 1060 tại x=420. */
  width: 1060px !important;
  max-width: 100%;
  margin: 0 auto !important;
}
.t4fx-footer .row:has(> .col .t4fx-mxh-list) > .col {
  padding-left: 0;
  padding-right: 0;
}
.t4fx-mxh-list::before,
.t4fx-mxh-list::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: rgba(255, 255, 255, .35);
  max-width: 422px;
}
.t4fx-mxh-list::before { margin-right: 16px; }
.t4fx-mxh-list::after { margin-left: 16px; }
/* ⛔ `.t4fx-mxh-nut` LÀ <span>, KHÔNG PHẢI <a> — CỐ Ý.
   Figma (`Frame 152`, 4 nút `cl-icon-facebook/youtube/linkedin/tiktok`) KHÔNG
   khai `interactions` cho nút nào, và trên toàn site không có URL mạng xã hội
   thật nào: `wp theme mod get follow_facebook|youtube|linkedin|tiktok` đều
   RỖNG, trang Liên hệ cũng không có. Vì vậy dựng nút không-liên-kết thay vì
   bịa URL hay để `href="#"` (luật đã chốt ở đợt RELEASE UNBLOCK).
   Khi 4T đưa 4 URL thật: đổi `<span class="t4fx-mxh-nut">` thành `<a href=…>`
   trong `docs/uxb/footer-4t.txt` — mọi luật dưới đây đã phủ sẵn cả hai thẻ,
   không phải sửa CSS. */
.t4fx-mxh-list a,
.t4fx-mxh-list .t4fx-mxh-nut {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px !important;
  height: 23px !important;
  margin: 0 !important; /* Flatsome ".icon" tự có margin 0 4px, cộng dồn vào gap:16px làm dư ~8px */
  flex: 0 0 auto;
  position: relative;
}
.t4fx-mxh-list a:hover { opacity: .75; }
.t4fx-mxh-list .t4fx-mxh-nut { cursor: default; }
.t4fx-mxh-list a i,
.t4fx-mxh-list .t4fx-mxh-nut i { font-size: 20px; line-height: 1; color: var(--t4-white); }
/* [phục vụ] phần tử: Follow (4 icon MXH 'a.icon plain … tooltip') | khối:
   dải MXH footer, TOÀN SITE | [figma] icon vẫn giữ 26×23 đúng thiết kế
   [lý do vượt panel] kích thước vùng chạm không tách khỏi kích thước icon
   trong panel Follow của Flatsome.
   ⛔ Kiểm tương tác báo 26,0×23,0 — thiếu 1px chiều cao so ngưỡng 24. Nới
   '::after' âm đều 3px mỗi cạnh (26→32 · 23→29); khe giữa hai icon liền kề
   là 16px nên còn dư 10px không chạm nhau (cùng cách đã dùng cho icon tìm
   kiếm mobile phía trên và breadcrumb ở 30-components.css). */
.t4fx-mxh-list a::after,
.t4fx-mxh-list .t4fx-mxh-nut::after {
  content: '';
  position: absolute;
  top: -3px; bottom: -3px;
  left: -3px; right: -3px;
}

/* Figma "Frame 153": khung 1060px (hẹp hơn 1080 của các hàng khác, thụt vào
   10px mỗi bên), 5 mục dàn SPACE_BETWEEN.
   [figma] Container 1060 '532:4139'; khung 1080 để so là '532:4123'.  */
.t4fx-lienhe {
  display: flex !important;
  flex-direction: row !important; /* [ux_menu] của Flatsome hardcode "stack-col" = column */
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 0;
  list-style: none;
  margin: 0 auto !important; /* căn giữa khung 1060 trong cột 1080 → x=420 */
  padding: 0;
  width: 1060px;
  max-width: 100%;
}
/* Cột chứa hàng liên hệ có padding ngang 15px làm khung chỉ còn 1050 và
   lệch sang phải 8px — bỏ padding để khung đúng 1060 đặt giữa 1080. */
.t4fx-footer .row:has(> .col .t4fx-lienhe) > .col {
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 42px; /* Figma: hàng liên hệ kết thúc y=544, copyright y=586 */
}

/* "Absolute Footer" của Flatsome đã dọn trắng chữ nhưng vẫn chiếm 25px ở
   đáy, đẩy tổng chiều cao footer từ 648 lên 673 (Figma 650). */
.footer-wrapper .absolute-footer { display: none; }
.t4fx-lienhe li {
  display: flex;
  align-items: center;
  gap: 15px; /* Figma Container pl=15 giữa icon và chữ */
  margin: 0 !important; /* Flatsome đặt sẵn margin 0 0 9.6px 20.8px cho <li>;
     20.8px này đẩy mục đầu lệch phải 21px và bóp méo space-between.
     Phải có !important vì quy tắc gốc của Flatsome đặc hiệu hơn. */
}
.t4fx-lienhe li a { color: var(--t4-white); text-decoration: none; }
/* [phục vụ] phần tử: 5 dòng liên hệ footer ('.t4fx-lienhe li a') | khối:
   Frame 153 footer, TOÀN SITE
   [lý do vượt panel] khối dựng bằng <ul>/<li> thuần, không có panel Flatsome.
   ⛔ Kiểm tương tác báo cả 5 mục cao 16px — dưới ngưỡng chạm 24px, vì line-
   height 16px !important ở dưới (đúng Figma, giữ nguyên). Đo bằng devtools:
   'li' bao ngoài đã cao ĐÚNG 24px (khớp icon 24px), 'a' chỉ 16px và nằm giữa
   'li' với đúng 4px thừa trên + 4px thừa dưới — nới '::after' âm 4px mỗi
   chiều dọc là khít đúng bằng khung 'li' đang có sẵn, KHÔNG lấn sang hàng kế
   (khoảng cách hàng ≥8px ở khổ 402, xem 'gap: 12px 0'). Bề rộng đã đạt ngưỡng
   ở mọi mục (74,5–173,2px) nên không cần nới ngang — khai 0 hai cạnh trái/
   phải để hàm đo (hopBam) nhận diện đủ 4 cạnh mà không đổi bề ngang. */
.t4fx-lienhe li a {
  position: relative;
}
.t4fx-lienhe li a::after {
  content: '';
  position: absolute;
  top: -4px; bottom: -4px;
  left: 0; right: 0;
}
/* Figma: icon liên hệ màu CAMEL (#CF9156), không phải trắng như chữ.
   Cỡ 24px, nét mảnh 300 — cùng bộ Material Symbols với bản gốc. */
.t4fx-lienhe .material-symbols-outlined {
  font-size: 24px;
  font-variation-settings: 'wght' 300;
  flex: 0 0 auto;
  color: var(--t4-nhan-manh-chu);
}
/* Khối liên hệ dựng bằng <ul>/<li> thuần (icon Material Symbols không có
   trong bộ icon Flatsome) — Figma 12px/lh24, cả 5 mục nằm VỪA MỘT HÀNG
   trong khung 1060px. */
.t4fx-lienhe li a,
.t4fx-lienhe .ux-menu-link__text {
  font-family: var(--t4-font-body) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 16px !important; /* Figma lh=16.39, không phải 24 */
  /* ⚠ Figma đặt độ mờ 62% trên CHÍNH NODE chữ (opacity), không nằm trong
     màu fill — fill vẫn là #ffffff đặc. Đọc mỗi fill sẽ ra trắng 100% và
     chữ hiện đậm hơn hẳn bản thiết kế. */
  color: rgba(255, 255, 255, .62) !important;
  white-space: nowrap; /* không cho tên miền/email tự bẻ dòng giữa chừng */
}

.t4fx-copyright { margin: 0; }
/* Chữ thật nằm trong .text-inner (giống .t4fx-dkkd); phần lệch vị trí do
   "banner-layer x50 y50" đã xử lý ở khối .t4fx-footer .text-box.banner-layer
   phía trên. */
.t4fx-copyright .text-inner {
  font-family: var(--t4-font-body) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 15px !important; /* Figma lh=15.026, không phải 20 */
  min-height: 20px; /* Figma: khối chữ cao 20 dù dòng chỉ 15.026 */
  /* Figma CĂN GIỮA dòng 15px trong hộp 20px (tâm chữ ở +10); trình duyệt đặt
     dòng SÁT MÉP TRÊN (tâm chữ ở +7,5) → chữ cao hơn thiết kế 2,5px ở CẢ hai
     khổ. Đệm 2,5px thay vì đổi line-height: 15+2,5 = 17,5 < min-height 20 nên
     chiều cao hộp KHÔNG đổi, tổng chiều cao footer giữ nguyên. */
  padding-top: 2.5px;
  color: rgba(255, 255, 255, .25) !important; /* Figma #ffffff @25% — mờ hơn hẳn, không phải 62% */
  text-align: center !important;
}

@media (max-width: 849px) {
  /* Figma node 1093:9271 "4T Footer_Mobile" — khung 402×989:
     padding 25px hai bên · 40px trên/dưới. Trước đây dùng lề mặc định của
     Flatsome (15px) nên chữ sát mép hơn hẳn thiết kế. */
  /* Viền đáy mobile cũng là 20px camel như desktop (Figma 1093:9271 khai
     individualStrokeWeights.bottom = 20), KHÔNG phải 12px. Trước đây tưởng
     mobile mỏng hơn vì công cụ chỉ đọc strokeWeight chung (=1) rồi đoán.
     Đổi 12 → 20 thì phải hạ padding-bottom 28 → 20 để tổng khoảng trống đáy
     giữ nguyên 40px, nếu không footer cao thêm 8px. */
  .t4fx-footer { padding: 40px 25px 20px !important; border-bottom-width: 20px; }
  .t4fx-footer .row { padding-left: 0; padding-right: 0; }
  .t4fx-footer .row > .col { padding-left: 0 !important; padding-right: 0 !important; }

  /* [phục vụ] hàng logo + ĐKKD (Frame 155) | [khối] .t4fx-dkkd
     [figma] node 1093:9271 — Figma chỉ có 2 khổ (402 và 1900); "mobile áp
     qua mốc 849px" (III.4.3-3). Cột logo mang class Flatsome
     "medium-4 small-12 large-4", cột ĐKKD "medium-8 small-12 large-8" —
     "small-12" tự xếp dọc 100% ở ≤549px, nhưng Flatsome CHUYỂN sang
     medium-4/medium-8 (33%/67%, NẰM NGANG) ở mốc riêng của chính nó
     (550px) — khác mốc 849px của dự án. Dò được bằng đo thật: viewport
     430 → hai cột XẾP DỌC (cao 179px); viewport 550 → hai cột XẾP NGANG
     (cao 138px), dù cả hai đều ≤849 và đều phải là bản mobile theo luật.
     Không phải "vỡ" theo 4 dấu hiệu kiem-vo.js (không tràn, không đè),
     nhưng sai bố cục so với Figma (logo phải luôn Ở TRÊN ĐKKD, không bao
     giờ cạnh nhau, trong toàn dải ≤849px) — ép lại giống hệt cách đã làm
     cho '.col.small-6' bên dưới. [lý do vượt panel] không có panel nào
     buộc cột theo breakpoint tự đặt của dự án thay vì breakpoint gốc
     Flatsome. */
  .t4fx-footer .t4fx-hang-logo > .col {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
  }

  /* Căn giữa theo vị trí mới (dưới hàng chứng nhận), không còn canh trái
     dưới logo như bố cục cũ. */
  .t4fx-dkkd { text-align: center; }

  /* Figma mobile: tiêu đề cột 14px/lh19.12 (desktop 16/21.86);
     mục danh sách lh18 cách nhau 30px (desktop lh15 cách 39px). */
  .t4fx-col-title .section-title-main { font-size: 14px !important; line-height: 19px !important; }
  .t4fx-col-title .section-title { margin-bottom: 16px !important; }
  .t4fx-col-list .ux-menu-link { height: 30px; }
  .t4fx-col-list .ux-menu-link__text { line-height: 18px !important; }
  /* [phục vụ] phần tử: Menu (ux_menu_link → 'a.ux-menu-link__link') | khối:
     4 cột link footer '.t4fx-col-list' | [figma] mục cách nhau 30px (dòng
     comment trên: "mục danh sách lh18 cách nhau 30px")
     [lý do vượt panel] chiều cao/đệm của [ux_menu_link] không có tuỳ chọn
     panel, đây là mảnh CSS con của Flatsome ('.ux-menu-link__link') đè lên.
     ⛔ Kiểm tương tác báo 'hai vùng bấm chồng nhau' 7 cặp liên tiếp trong cột
     footer — dt=3520 (352px rộng × 10px chồng) ở MỌI cặp, tức lỗi HỆ THỐNG
     chứ không phải từng mục riêng lẻ. Đo bằng devtools: dòng trên đặt
     '.ux-menu-link' (khung ngoài) = 30px, nhưng '.ux-menu-link__link' (thẻ
     <a> bên trong) vẫn giữ 'min-height: 40px' + 'padding: 4,8px 0' mặc định
     của Flatsome — thẻ <a> TRÀN ra ngoài khung cha 5px trên + 5px dưới, đè
     lên mục liền kề đúng 10px. Ép thẻ <a> về cùng 30px với cha, canh giữa
     chữ bằng align-items thay vì padding. */
  .t4fx-col-list .ux-menu-link__link {
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    align-items: center;
  }
  /* Figma: mép trên mỗi "Section" cách hộp tiêu đề 3px (244 → 247). Dùng
     PADDING chứ không dùng margin — margin-top của con đầu tiên co lại
     (margin collapsing) qua .col-inner vì khối này không có viền/đệm, và
     khi đó 3px biến mất mà không có gì báo. */
  .t4fx-col-title.section-title-container { padding-top: 3px; }
  /* ⛔ Mục CUỐI mỗi danh sách vẫn chiếm đủ 30px, trong khi Figma chỉ chừa
     3px sau dòng chữ 18px. Dôi 9px mỗi cột, CỘNG DỒN qua 4 cột thành 27px —
     đó là lý do cột 1 cao hơn thiết kế còn cột 4 tụt tận 9px.
     ⚠ Cắt bằng 'height: 21px' là SAI dù số học đúng: chữ được CĂN GIỮA trong
     hộp .ux-menu-link, nên hộp thấp đi 9px thì chữ tự nhảy lên 4,5px. Bảng đo
     bắt được ngay — mục cuối của cả 4 cột lệch −3,2px trong khi các mục khác
     đạt. Dùng margin ÂM: chữ đứng yên, chỉ phần bên dưới bị kéo lên.
     ⛔ BẮT BUỘC !important: [ux_menu] gắn class "stack stack-col", mà
     Flatsome có '.stack-col > * { margin: 0 !important }'. Thiếu !important
     thì quy tắc im lặng không ăn — nằm đúng media query, selector vẫn khớp
     phần tử, chỉ riêng computed value ra 0. */
  .t4fx-col-list .ux-menu-link:last-child { margin-bottom: -9px !important; }

  /* Figma mobile "Frame 153": 5 mục liên hệ xếp 2 CỘT (địa chỉ chiếm
     nguyên hàng đầu), không phải dàn đều một hàng như desktop. */
  .t4fx-lienhe {
    width: 100% !important;
    justify-content: flex-start;
    gap: 8px 0;
  }
  /* Figma: hàng 2 và 3 dàn SPACE_BETWEEN trong 352px — mục trái ở x=25,
     mục phải căn sát mép phải (x=211), không phải chia đôi 50/50. */
  .t4fx-lienhe { justify-content: space-between; }
  .t4fx-lienhe li { width: auto; }
  .t4fx-lienhe li:first-child { width: 100%; }
  /* Figma: ô bên phải của hàng 2 và 3 đều rộng 166px nên icon của chúng
     cùng nằm ở x=211. Không ràng buộc thì mục cuối co lại còn 140 và icon
     trôi sang 237. */
  .t4fx-lienhe li:nth-child(3),
  .t4fx-lienhe li:nth-child(5) { min-width: 166px; }
  .t4fx-lienhe li a, .t4fx-lienhe .ux-menu-link__text { white-space: normal; }

  /* Figma mobile: hai đường kẻ hai bên dải icon chỉ 68px (desktop 422px). */
  .t4fx-mxh-list::before,
  .t4fx-mxh-list::after { max-width: 68px; }

  /* Khoảng cách dọc riêng cho mobile (Figma 1093:9271):
     ĐKKD hết y=193 → đường kẻ y=217 (24) → 4 cột y=244 (26) →
     cột hết y=738 → icon MXH y=762 (24) → liên hệ y=809 (24) →
     copyright y=929. Bốn cột xếp dọc cách nhau 8px, không phải 30px. */
  .t4fx-footer .t4fx-hang-logo::after { margin-top: 1px; }
  /* Hàng icon MXH cũng là .row nên dính padding-bottom 30px mặc định của
     Flatsome — đặt về 0 rồi mới khai riêng từng hàng bên dưới. */
  .t4fx-footer .row > .col { padding-bottom: 0 !important; }
  /* Mỗi hàng cần một khoảng khác nhau — đặt chung một giá trị là sai:
     hàng logo cách ĐKKD 24 · 4 cột xếp dọc cách nhau 8 · hàng liên hệ
     cách copyright 32. */
  /* 22 → 24 vì logo nay cao đúng 45px (trước là 47,44px do đặt theo %):
     Figma cho logo hết ở y=85 và ĐKKD bắt đầu y=109, đúng 24px. */
  .t4fx-footer .t4fx-hang-logo > .col     { padding-bottom: 24px !important; }
  .t4fx-footer .row:has(> .col .t4fx-col-title) > .col { padding-bottom: 8px !important; }
  .t4fx-footer .row:has(> .col .t4fx-lienhe) > .col   { padding-bottom: 32px !important; }
  /* 27 → 25: gỡ margin âm của .section-title-main làm <h4> cao thêm 2px, và
     2px đó nằm TRÊN chữ (h4 là flex align-items:center, trước đây span cao
     hơn hộp nên tràn lên 1px mỗi phía). Cả khối 4 cột — và mọi thứ bên dưới
     — vì thế tụt đúng 2px. Trả lại ở đây, một chỗ, thay vì chữa từng cột. */
  .t4fx-footer .section-content > .gap-element:nth-child(2) { padding-top: 25px !important; }
  /* 24 → 40: bốn cột nay thấp hơn 16px (mỗi cột bớt 9px ở mục cuối, thêm
     5px ở khối tiêu đề). Trả lại đúng 16px vào đây để dải icon MXH vẫn rơi
     đúng y=762 của Figma. */
  .t4fx-footer .section-content > .gap-element:nth-child(4) { padding-top: 40px !important; }
  .t4fx-footer .section-content > .gap-element:nth-child(6) { padding-top: 24px !important; }
  /* Figma mobile (1093:9271): 4 cột Footer xếp DỌC MỘT CỘT, không phải lưới
     2×2. Shortcode UX Builder giữ nguyên span__sm="6" (không sửa cấu trúc
     UX) — ép full-width bằng CSS trên đúng class Flatsome tự sinh
     ("small-6" = breakpoint mobile của Flatsome). */
  .t4fx-footer .row .col.small-6 {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important; /* Flatsome dùng flexbox, riêng width không đủ */
  }
}


/* ─── Biểu tượng mạng xã hội: ĐỘ MỜ 62 % và LinkedIn nét rỗng (19/08/2026) ──
   Figma 'footer.json' khai rõ cả bốn 'Vector' của dải MXH là
   '#ffffff' **alpha 0,62**, và LinkedIn là chữ "in" NÉT RỖNG. Bản dựng dùng
   phông 'fl-icons' của Flatsome: trắng đặc, và glyph 'icon-linkedin' là ô
   vuông TRẮNG ĐẶC khoét chữ — khác hẳn hình.

   ⛔ Vì sao bảng dày báo 0 ❌ suốt: 'scripts/map-footer.json' chỉ khai
   'x · y · w · h' cho bốn icon, KHÔNG có 'mau', KHÔNG có 'mo'. Đây là điểm mù
   lớp phi-chữ (đã trả giá ở trang #9) — chỉ SO ẢNH mới bắt được. Đã bổ sung
   'mau' + 'mo' vào bản đồ cùng lúc với bản vá này. */
.t4fx-mxh-list a { color: rgba(255, 255, 255, .62); }

/* LinkedIn: thay glyph phông bằng chính vector Figma (node
   'I320:1858;192:2155') qua 'mask', nhờ vậy màu vẫn do CSS quyết định nên
   giữ đúng alpha 0,62 như ba icon kia.

   ⛔ HAI thứ phải xử lý trong data URI, thiếu MỘT là mask không tải được và
   'background-color' tô KÍN cả ô — ra một hình chữ nhật đặc, trông y như
   "chưa sửa gì" chứ không hề báo lỗi. Đã dính cả hai trong ngày 19/08:
     1. dấu '#' (ở 'clip-path="url(#clip0_0_59)"') phải thành '%23', nếu
        không URI bị cắt ngay tại đó;
     2. dấu nháy kép trong SVG ('xmlns="…"') phải đổi sang nháy đơn, nếu
        không nó ĐÓNG SỚM chuỗi CSS 'url("https://tiepthitute.com/wp-content/themes/flatsome-child/css/…")'. */
.t4fx-mxh-list a.linkedin i::before { content: none; }
.t4fx-mxh-list a.linkedin i {
  display: block;
  width: 26px;
  height: 23px;
  background-color: rgba(255, 255, 255, .62);
  -webkit-mask: url("data:image/svg+xml,<svg width='26' height='23' viewBox='0 0 26 23' fill='black' xmlns='http://www.w3.org/2000/svg'> <g clip-path='url(https://tiepthitute.com/wp-content/themes/flatsome-child/css/%23clip0_0_59)'> <path fill-rule='evenodd' clip-rule='evenodd' d='M6.72005 23.7226H1.99244V8.38667H6.73543V23.761L6.72005 23.7226ZM4.32166 6.38032C3.76153 6.38488 3.21265 6.22305 2.74459 5.91534C2.27653 5.60763 1.91036 5.16788 1.69248 4.65184C1.47461 4.1358 1.41484 3.5667 1.52076 3.01665C1.62667 2.4666 1.89349 1.96038 2.28742 1.56215C2.68134 1.16391 3.18462 0.891582 3.73348 0.77968C4.28234 0.667779 4.85206 0.72134 5.37044 0.933576C5.88883 1.14581 6.33254 1.50717 6.64533 1.97185C6.95813 2.43653 7.12593 2.98361 7.12747 3.54375C7.12953 4.29137 6.83555 5.0094 6.30979 5.54092C5.78404 6.07244 5.06925 6.37423 4.32166 6.38032ZM24.5312 23.7226H19.7882V15.6664C19.7882 13.4602 18.9503 12.2226 17.2053 12.2226C15.2989 12.2226 14.315 13.5063 14.315 15.6664V23.7226H9.75648V8.38667H14.3073V10.4468C14.7972 9.66865 15.4784 9.02901 16.2859 8.58895C17.0933 8.14889 18.0001 7.9231 18.9196 7.93312C22.1636 7.93312 24.4928 9.91641 24.4928 14.029L24.5312 23.7226Z' fill='white' fill-opacity='0.62'/> </g> <defs> <clipPath id='clip0_0_59'> <rect width='26' height='23' fill='white'/> </clipPath> </defs> </svg>") no-repeat center / 26px 23px;
  mask: url("data:image/svg+xml,<svg width='26' height='23' viewBox='0 0 26 23' fill='black' xmlns='http://www.w3.org/2000/svg'> <g clip-path='url(https://tiepthitute.com/wp-content/themes/flatsome-child/css/%23clip0_0_59)'> <path fill-rule='evenodd' clip-rule='evenodd' d='M6.72005 23.7226H1.99244V8.38667H6.73543V23.761L6.72005 23.7226ZM4.32166 6.38032C3.76153 6.38488 3.21265 6.22305 2.74459 5.91534C2.27653 5.60763 1.91036 5.16788 1.69248 4.65184C1.47461 4.1358 1.41484 3.5667 1.52076 3.01665C1.62667 2.4666 1.89349 1.96038 2.28742 1.56215C2.68134 1.16391 3.18462 0.891582 3.73348 0.77968C4.28234 0.667779 4.85206 0.72134 5.37044 0.933576C5.88883 1.14581 6.33254 1.50717 6.64533 1.97185C6.95813 2.43653 7.12593 2.98361 7.12747 3.54375C7.12953 4.29137 6.83555 5.0094 6.30979 5.54092C5.78404 6.07244 5.06925 6.37423 4.32166 6.38032ZM24.5312 23.7226H19.7882V15.6664C19.7882 13.4602 18.9503 12.2226 17.2053 12.2226C15.2989 12.2226 14.315 13.5063 14.315 15.6664V23.7226H9.75648V8.38667H14.3073V10.4468C14.7972 9.66865 15.4784 9.02901 16.2859 8.58895C17.0933 8.14889 18.0001 7.9231 18.9196 7.93312C22.1636 7.93312 24.4928 9.91641 24.4928 14.029L24.5312 23.7226Z' fill='white' fill-opacity='0.62'/> </g> <defs> <clipPath id='clip0_0_59'> <rect width='26' height='23' fill='white'/> </clipPath> </defs> </svg>") no-repeat center / 26px 23px;
}

/* ── Badge «Google Partner» ở footer (lô MOBILE-P3-FIX, 23/08/2026) ────────
   [figma] I607:10565;349:2735 'Frame 154' 163×40 — icon Google 40×40 + chữ
   'Google Partner', nằm trong hàng badge ngay sau đoạn đăng ký kinh doanh.
   Dựng bằng '[ux_image]' (media 3209, ảnh xuất 1× nên 163×40 đúng tự nhiên).

   ⚠ Flatsome cho '.img img { width: 100% }' nên badge bị GIÃN theo bề rộng
   cột — đo được 183×45 thay vì 163×40. Chốt cỡ thật ở đây. Class này chỉ
   badge đó dùng, không phần tử nào khác, nên luật không đụng gì sẵn có. */
/* ⛔ ĐÃ GỠ (29/08/2026): luật khoá cỡ badge Google Partner ở hàng trên.
   Badge không còn nằm cạnh khối đăng ký kinh doanh nữa — nó đã chuyển xuống
   hàng chứng nhận (xem `.t4fx-cn-gp` bên dưới), nên luật cũ thành mã chết. */

/* ⛔ ẨN HUY HIỆU GOOGLE PARTNER — CHỈ DESKTOP, và chỉ ở FOOTER.
   Figma `547:4448` CÓ khối đó (`Frame 156` = tiêu đề «Chứng nhận» + `Frame
   181`) nhưng đặt `visible: false` — tức thiết kế đã bỏ nó khỏi footer
   desktop. Đọc JSON mà quên xét cờ `visible` là dựng thừa nguyên một khối
   (cùng cái bẫy đã ghi ở `mobile-panel-tuychonkhac.php`).
   ⚠ `display: none` chứ KHÔNG xoá khỏi UX Block: footer MOBILE đã nghiệm thu
   và vẫn hiện huy hiệu này. Xoá trong shortcode là mất cả hai. */
/* ⛔ NGOẠI LỆ CÓ CHỦ ĐÍCH SO VỚI FIGMA — 4T chốt 25/08/2026.
   Figma `547:4448` đặt khối chứng nhận `visible: false`, và bản nghiệm thu
   trước đó đã ẩn huy hiệu Google Partner ở desktop theo đúng thiết kế. Nay
   4T yêu cầu ĐƯA LẠI cả ba chứng nhận. Vì vậy luật `display: none` cũ đã bỏ.
   → ĐỪNG "sửa lại cho khớp Figma": lệch chỗ này là do người quyết, không
     phải do đo sai. Ba chứng nhận và đường dẫn lấy nguyên từ tiepthitute.com,
     đã kiểm 25/08 cả ảnh lẫn trang đích đều HTTP 200. */

/* ⛔ ĐÃ GỠ (29/08/2026): khối xếp hàng ngang [badge][ĐKKD] ở hàng logo.
   Badge Google Partner đã xuống hàng chứng nhận, và dòng đăng ký kinh doanh
   cũng đã chuyển xuống dưới hàng đó — hàng logo nay chỉ còn mỗi logo, nên
   luật flex và `flex: 0 0 432px` thành mã chết. */

/* Cụm chứng nhận dưới — Bộ Công Thương (117×44) + DMCA (120×35), ảnh đã
   mirror về media demo1 (id 3216 · 3217) nên không phụ thuộc host ngoài. */
.t4fx-chungnhan {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  margin: 0 auto;
}
.t4fx-chungnhan .t4fx-cn-o { display: inline-flex; align-items: center; }
.t4fx-chungnhan .t4fx-cn-o:hover { opacity: .8; text-decoration: none; }
/* ⚠ Flatsome đặt `.img img { width: 100% }` và footer còn luật khoá chiều cao
   45px cho hàng logo — chốt cỡ thật ở đây kẻo ảnh bị giãn (cùng cái bẫy đã
   ghi cho `.t4fx-partner-badge`). `width: auto` để tỉ lệ theo chiều cao. */
.t4fx-chungnhan img { width: auto !important; max-width: 100%; display: block; }
/* Chốt cỡ thật của TỪNG chứng nhận bằng CLASS RIÊNG, không dùng nth-child.
   ⛔ Bản trước khoá theo THỨ TỰ (`:nth-child(1)` = 44px, `:nth-child(2)` =
   35px). Nó chạy đúng cho tới 29/08/2026, khi 4T yêu cầu đưa Google Partner
   vào GIỮA — đổi chỗ một cái là hai cái kia lãnh nhầm chiều cao của nhau,
   mà nhìn lướt không nhận ra vì cả ba đều là ảnh badge na ná nhau.
   Nay mỗi badge một class, đổi thứ tự trong shortcode bao nhiêu lần cũng
   không ảnh hưởng. Thêm chứng nhận mới thì thêm class + một dòng ở đây. */
.t4fx-chungnhan .t4fx-cn-bct  img { height: 44px !important; }
.t4fx-chungnhan .t4fx-cn-gp   img { height: 40px !important; }
.t4fx-chungnhan .t4fx-cn-dmca img { height: 35px !important; }

/* ── CHỈ MOBILE: xếp lại cụm chứng nhận (4T chốt 29/08/2026) ──────────────
   Mong muốn: Google Partner đứng RIÊNG một hàng ở TRÊN, căn giữa; hàng dưới
   là Bộ Công Thương + DMCA; rồi dòng tên công ty cách ra một chút.

   ⛔ KHÔNG đổi thứ tự trong shortcode để làm việc này — desktop đang đúng ý
   4T (BCT · Google Partner · DMCA) và phải giữ nguyên. Ở đây chỉ đổi THỨ TỰ
   HIỂN THỊ bằng `order` của flexbox, DOM giữ nguyên. Nhờ vậy desktop không
   bị đụng một chút nào.

   `flex: 0 0 100%` ép Google Partner chiếm trọn bề ngang nên hai badge kia
   bị đẩy xuống hàng sau — đó là cách tạo ngắt dòng mà không cần thêm phần
   tử. Đo được: BCT 117 + DMCA 120 + gap 24 = 261px, vừa trong khung 352px.

   ⚠ Bọc trong `max-width: 849px` — đúng mốc mobile của dự án. Desktop
   (≥850px) không thấy luật này. */
@media (max-width: 849px) {
  .t4fx-chungnhan .t4fx-cn-gp   { order: 1; flex: 0 0 100%; justify-content: center; }
  .t4fx-chungnhan .t4fx-cn-bct  { order: 2; }
  .t4fx-chungnhan .t4fx-cn-dmca { order: 3; }

  /* Dòng tên công ty + MST cách cụm huy hiệu ra một chút — trước đó dính
     sát 0px (đo trên trang thật). 24px cho bằng đúng `gap` của cụm huy
     hiệu, để khoảng cách trong khối nhìn đều nhau. */
  .t4fx-dkkd { margin-top: 24px; }
}

/* ⛔ HAI THỨ MỚI CỦA FOOTER DESKTOP PHẢI TẮT Ở MOBILE.
   Chúng nằm trong UX Block dùng CHUNG hai khổ, nên vừa thêm cho desktop là
   chúng hiện luôn ở 402 — hồi quy ngoài phạm vi, khác bản mobile 4T đã
   nghiệm thu (4T phát hiện 25/08 bằng ảnh chụp live).
   ⚠ Ngược chiều với huy hiệu Google Partner ngay trên: cái đó ẩn ở DESKTOP,
   hai cái này ẩn ở MOBILE. Cùng một UX Block, ba lớp phủ hai chiều — đổi
   mốc breakpoint của một luật mà quên luật kia là lộ ngay ở khổ 850. */
@media (max-width: 849px) {
  .t4fx-footer .t4fx-col-list-them { display: none; }
  /* ⛔ ẨN 4 NÚT, KHÔNG ẨN CẢ HÀNG. Bản mobile đã nghiệm thu VẪN CÓ hai dải kẻ
     ngắn: `[follow]` khi đó render RỖNG (theme_mod trống) nhưng container vẫn
     tồn tại, và `.t4fx-mxh-list::before/::after { max-width: 68px }` ở ngay
     trên vẫn vẽ. Ẩn cả hàng thì mất luôn hai dải kẻ đó và footer mobile hụt
     thêm — vẫn là hồi quy, chỉ theo chiều ngược lại. */
  .t4fx-footer .t4fx-mxh-list .t4fx-mxh-nut { display: none; }
}

/* Mục danh sách KHÔNG có liên kết — dùng cho «Chính sách thanh toán» khi
   `/chinh-sach-thanh-toan/` chưa tồn tại (kiểm 25/08: HTTP 404, không có
   trang nào ở `wp post list`). Không bịa URL, không `href="#"`, không dựng
   trang rỗng. Hình thức khớp `.ux-menu-link` để hàng không nhảy.
   → Có URL thật thì đổi `<span class="t4fx-muc-tat">` thành `<a href=…>`
   trong `docs/uxb/footer-4t.txt`. */
/* ⚠ Phải gỡ đệm ở CẢ <ul> LẪN <li>, VÀ phải đủ ưu tiên. Gỡ mỗi <ul> thì chữ
   vẫn thụt 21px (đo 1372 vs 1351 của «Chính sách bảo mật»): phần thụt nằm ở
   `margin-left: 20.8px` trên chính <li>. Viết `.t4fx-col-list-them li` (0,2,0)
   vẫn THUA luật sẵn có `.t4fx-footer ul li` (0,2,1) — im lặng không ăn. Phải
   kèm `.t4fx-footer` để lên (0,3,0). */
.t4fx-footer .t4fx-col-list-them,
.t4fx-footer .t4fx-col-list-them li {
  margin: 0; padding: 0; list-style: none; text-indent: 0;
}
.t4fx-muc-tat {
  display: block;
  font-family: var(--t4-font-body);
  font-size: 11px;
  font-weight: 500;
  line-height: 15px;
  color: rgba(255, 255, 255, .55);
  cursor: default;
}

/* t4-30-components-css */
/* ==========================================================================
   30-components.css — tách từ style.css ngày 17/08/2026 theo III.4.1.
   Nội dung bên dưới là NGUYÊN VĂN các mục §3-6 mô-típ dùng lại · §8 widget chat · §9 tiện ích dùng lại của bản gộp;
   không sửa một luật nào trong lần tách này.
   ========================================================================== */


/* ══ GIA ĐÌNH SỐ KHUNG — tra ngược mọi bề rộng px về node Figma ═══════════
   [phục vụ] mọi luật khai bề rộng cố định trong toàn bộ css/ | [trang] toàn site

   ⛔ NĂM CON SỐ HAY GẶP NHẤT TRONG TỆP NÀY KHÔNG HỀ CÓ TRONG FIGMA.
   Đã tra cả 127.233 node của 'figma-cache/file.json' (chỉ mục ở
   'qa/_figma-chi-muc-kich-thuoc.json'): 1110 · 1090 · 548 · 541 · 382 đều ra
   **0 node**. Ai đi tìm khung 1110 trong Figma sẽ tìm cả buổi không thấy.

   Lý do: '.col' của Flatsome có đệm ngang 15px MỖI BÊN. Muốn LÒNG cột rộng
   đúng số Figma thì bề rộng khai phải cộng 30. Trừ 30 ra là số Figma thật:

     CSS 1110 → Figma 1080  Container   '532:4123'   (1.347 node cùng khổ)
     CSS 1090 → Figma 1060  Container   '532:4139'   (219 node)
     CSS  548 → Figma  518  Frame 1707479569 '712:20335' 518×355
     CSS  541 → Figma  511  Container   '772:7343'   511×110
     CSS  382 → Figma  352  Container   '1093:8882'  (khổ Mobile)

   '.row-collapse' gỡ đệm cột nên dùng THẲNG số Figma, không cộng 30 — đó là
   lý do mọi cặp luật trong tệp này luôn đi đôi 1110/1080 và 382/352.

   ⚠ Quy luật này CHỈ đúng cho '.row'/'.col'. Luật khai bề rộng cho phần tử
   thường (ảnh, nút, thẻ) dùng thẳng số Figma — ví dụ '.t4fx-cs-anh' 503px.

   ── Cộng dồn đã kiểm, dùng để tự soi khi sửa ─────────────────────────────
     518 × 2 + khe 24  = 1060   hai thẻ giai đoạn
     528 × 2 + khe 24  = 1080   hai cột mô tả dịch vụ
     503 + 471 + khe 40 = 1014  ảnh + chữ của casestudy
   Số nào cộng không ra khung mẹ thì hoặc khe khác, hoặc đã chép sai.

   ── Tra một con số bất kỳ ────────────────────────────────────────────────
     python3 tools/truy-node-be-rong.py 518 --cao 355
     python3 tools/truy-node-be-rong.py 1080 --khung HomePage
   Công cụ KHÔNG đoán: nó liệt kê mọi node đúng khổ để người viết tự chọn.
   Nhiều kết quả thì thu hẹp bằng '--cao', đừng lấy bừa cái đầu tiên.
   ══════════════════════════════════════════════════════════════════════ */


/* ── §3-6 mô-típ dùng lại (dòng 120–705 của style.css cũ) ──────────────────── */

/* --------------------------------------------------------------------------
   3. MÔ-TÍP (a) — NHÃN SECTION: chip xanh + kẻ đứt nét chạy hết hàng
   -------------------------------------------------------------------------- */
.t4-label {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  margin-bottom: 32px;
}

/* [phuc vu] chip nhan section | [trang] trang chu + 4 trang dich vu
   [figma] mo-tip (a) | [ly do vuot panel] panel khong co chip nen bo goc

   ✅ 17/08/2026 — DA BO nhanh '> span', gia do chuyen tiep het han.
   III.2 chi cho <span> mang dung 3 lop da duyet (hl-camel/hl-green/accent),
   nen chip viet '<span>Slogan</span>' la vi pham: no bien mot nhan CHU THUAN
   thanh mot the :host go tay. Nay ca 25 chip cua 5 trang deu la '<p>' — thu
   trinh soan thao UX Builder tu sinh.

   Da doi TUNG TRANG va do lai tung trang (III.7-3 cam doi ca 5 trong mot
   nhip vi 4 trang kia da do xong): #4 1816 ✅/0 ❌ · #5 1235 ✅/0 ❌ ·
   #6 va #7 giu nguyen 27 ❌ co san. Va soi tren SITE THAT truoc khi don bo
   chon: 5 trang × (>span = 0, >p = 5). */
.t4-label > p {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 4px;
  background: var(--t4-mang-la-nen);
  color: var(--t4-white);
  font-size: 14px;
  line-height: 19px;
  font-weight: 500;
  white-space: nowrap;
  /* '.t4 p' cua 10-base cho moi doan 'margin: 0 0 16px' — khong go thi chip
     tu day ke dut net xuong 16px. */
  margin: 0;
}

.t4-label::after {
  content: "";
  flex: 1 1 auto;
  border-top: 1px dashed var(--t4-leaf);
  opacity: .5;
}

@media (max-width: 849px) {
  .t4-label { gap: 12px; margin-bottom: 20px; }
  .t4-label > p { font-size: 13px; }
}

/* --------------------------------------------------------------------------
   4. MÔ-TÍP (b) — HAI NỀN GRADIENT SECTION
   -------------------------------------------------------------------------- */
.t4-bg-fade-down {
  background-color: var(--t4-light);
  background-image: linear-gradient(180deg, #EFE8DA 0%, rgba(239,232,218,.4) 49%, rgba(239,232,218,0) 100%);
}

.t4-bg-fade-mid {
  background-color: var(--t4-light);
  background-image: linear-gradient(180deg, rgba(239,232,218,0) 0%, #EFE8DA 51%, rgba(239,232,218,0) 100%);
}

.t4-bg-light { background-color: var(--t4-light); }
.t4-bg-cream { background-color: var(--t4-cream); }

/* --------------------------------------------------------------------------
   5. MÔ-TÍP (c) — THẺ TRẮNG bo 16px, đổ bóng
   -------------------------------------------------------------------------- */
.t4-card {
  background: var(--t4-white);
  border-radius: var(--t4-radius-card);
  box-shadow: var(--t4-shadow-card);
  padding: 30px;
  height: 100%;
}

.t4-card-tag {
  display: inline-block;
  padding: 2px 16px;
  border-radius: 8px;
  background: var(--t4-mang-la-nen);
  color: var(--t4-light);
  font-size: 16px;
  line-height: 28px;
  font-weight: 600;
}

.t4-sep { height: 1px; background: rgba(31,31,31,.15); border: 0; margin: 18px 0; }

@media (max-width: 849px) {
  .t4-card { padding: 20px; border-radius: 12px; }
}

/* --------------------------------------------------------------------------
   6. MÔ-TÍP (d) — NÚT (dự phòng cho [ux_html] hãn hữu; nút UX Builder chuẩn
      dùng style Flatsome gốc, xem "Buttons" trong Style panel Customizer)
   -------------------------------------------------------------------------- */
.t4-btn,
.t4-btn-ghost,
.t4-btn-on-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 24px;
  border-radius: var(--t4-radius-btn);
  font-family: var(--t4-font-body);
  font-weight: 700;
  font-size: 14px;
  line-height: 22px;
  text-align: center;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.t4-btn { background: var(--t4-hanh-dong-nen); color: var(--t4-white); }
.t4-btn:hover, .t4-btn:focus { background: var(--t4-hanh-dong-nen-nhan); color: var(--t4-white); }

.t4-btn-ghost {
  background: var(--t4-light);
  color: var(--t4-camel-border);
  border-color: var(--t4-nhan-manh-chu);
}
.t4-btn-ghost:hover, .t4-btn-ghost:focus { background: var(--t4-hanh-dong-nen-nhan); color: var(--t4-white); }

.t4-btn-on-dark { background: transparent; color: var(--t4-white); border-color: var(--t4-white); }
.t4-btn-on-dark:hover { background: var(--t4-white); color: var(--t4-dark-moss); }

/* [figma] trang6 · section quytrinh_mb — 2 lớp rộng 180px: '1113:15332' · '1113:15333'
   (nhiều lớp cùng khổ nên KHÔNG ghim một node; mở spec trang 6 để chọn) */
.t4-btn-lg { min-height: 56px; min-width: 180px; font-size: 16px; }

/* --------------------------------------------------------------------------
   6a. KHUNG HEADER — bóng đổ.
   Figma đặt DROP_SHADOW ở node GỐC của header (163:7688 desktop @25%,
   1017:21271 mobile @30%), không phải ở lớp nền bên trong. Flatsome không
   có ô "bóng đổ" cho header nên đây là mức 2.
   Đặt trên .header-main (đúng hộp cao 76/60px) chứ không phải .header-wrapper:
   khi cuộn, Flatsome nhân bản .header-main thành thanh dính — để ở đây thì
   bản dính cũng có bóng, để ở lớp ngoài thì không.
   -------------------------------------------------------------------------- */
#header .header-main { box-shadow: 0 2px 2px rgba(0, 0, 0, .25); }
@media (max-width: 849px) {
  #header .header-main { box-shadow: 0 2px 2px rgba(0, 0, 0, .3); }
}
/* Khi cuộn, Flatsome gắn .stuck lên .header-wrapper KÈM bóng riêng của nó
   (rgba(0,0,0,.15) 1px 1px 10px) — cộng với bóng ở trên thành HAI lớp bóng,
   đậm hơn hẳn thiết kế. Figma chỉ có một bóng duy nhất cho header. */
#header .header-wrapper.stuck { box-shadow: none; }
/* Flatsome tự THU header dính từ 76px xuống 70px (biến --sticky-height của
   nó). Figma 163:7688 chỉ quy định MỘT chiều cao là 76 và không mô tả trạng
   thái dính, nên giữ 76 cho mọi trạng thái mới là bám thiết kế. Đặt qua biến
   của chính Flatsome để không phải đè từng phần tử con. */
#header.has-sticky .header-wrapper.stuck,
#header.has-sticky .header-wrapper.stuck .header-main {
  --sticky-height: 76px;
  height: 76px;
}

/* --------------------------------------------------------------------------
   6b. NÚT CTA HEADER (Header Builder) — Flatsome mặc định gán class
       "button primary" cho CẢ HAI nút, ra màu xanh navy #446084 mặc định
       của theme, không phải token thương hiệu. Ép lại đúng theo Figma
       node 163:7688: "Nhận tư vấn" = nền #cf9156/chữ trắng (Link 163:5466),
       "Gọi ngay" = nền trắng/viền+chữ #155446 (Link 163:5468). Khoá theo
       href vì Header Builder không có ô "custom class" cho từng nút.
   -------------------------------------------------------------------------- */
#header .header-button a[href$="/lien-he/"].button {
  background-color: var(--t4-hanh-dong-nen) !important;
  /* Figma "Link" 163:5466 có stroke 2px nhưng alpha 0 → dày thật, VÔ HÌNH.
     Flatsome mặc định 1px rgba(0,0,0,.11) — mờ nhưng vẫn thấy trên nền camel. */
  border-color: transparent !important;
  color: var(--t4-white) !important;
}
#header .header-button a[href$="/lien-he/"].button:hover {
  background-color: var(--t4-hanh-dong-nen-nhan) !important;
}
#header .header-button a[href^="tel:"].button {
  background-color: var(--t4-white) !important;
  border-color: var(--t4-dark-moss) !important;
  color: var(--t4-dark-moss) !important;
}
#header .header-button a[href^="tel:"].button:hover {
  background-color: var(--t4-dark-moss) !important;
  color: var(--t4-white) !important;
}
/* Figma "Frame 62" itemSpacing=14 giữa 2 nút. Flatsome đã tự có sẵn margin
   0 7px trên li.header-button-2 (đo được qua computed style) — cộng thêm
   7px ở nút đầu để tổng khoảng cách đúng 14px, KHÔNG phải 14px (sẽ dư 7px). */
li.header-button-1 { margin-right: 7px !important; }
li.header-button-2 { margin-left: 7px !important; margin-right: 0 !important; }
/* Figma "List": 4 mục menu nằm SÁT NHAU, gap 0 (598+118=716, 716+119=835,
   835+129=964, 964+217=1181). Flatsome thêm margin 7px mỗi bên → cộng dồn
   42px làm cả dải menu rộng ra và lệch vị trí. */
#header ul.header-nav-main > li.menu-item {
  margin-left: 0 !important;
  margin-right: 0 !important;
  flex-shrink: 0; /* nowrap khiến flex co mục xuống dưới bề rộng chữ → "Về
                     chúng tôi" bị bẻ hai dòng và mũi tên rơi xuống */
}
#header ul.header-nav-main > li > a.nav-top-link { white-space: nowrap; }
/* Khoảng 41px giữa menu và cụm nút (Figma: menu hết ở 1181, nút bắt đầu
   1222). Dùng padding chứ không dùng margin-left — margin-left của
   li.header-button-1 bị quy tắc khác của Flatsome ghi đè về 0. */
#header ul.header-nav-main > li.header-button-1 { padding-left: 41px; }
/* Figma "Primary Navigation" dàn SPACE_BETWEEN: logo(147) · menu(583) ·
   nút(268) trong 1080 → hai khoảng trống 41px. Menu và nút nằm chung một
   <ul> căn phải nên khoảng 41px phải đặt bằng margin-left của nút đầu.
   margin-right 7px mặc định của nút cuối đẩy cả cụm lệch trái 7px. */
#header .header-button a.button {
  font-family: var(--t4-font-body) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 22px !important; /* Figma: TEXT "Nhận tư vấn"/"Gọi ngay" lh 22 */
  /* Figma ls=0. Flatsome đặt .03em cho MỌI .button → 0,42px mỗi ký tự; nhìn
     từng ký tự thì dưới ngưỡng 0,5px nên dễ lọt, nhưng "Nhận tư vấn" 11 ký
     tự là dôi hơn 4px bề rộng chữ. */
  letter-spacing: 0;
  /* Figma cả hai nút stroke 2px (163:5466 alpha 0 · 163:5468 #155446).
     Flatsome mặc định 1px. box-sizing:border-box nên 130×42 không đổi. */
  border-width: 2px;
}
/* Viết hoa của nút do Header Builder lo (header_button_*_letter_case =
   "lowercase" → class .lowercase), KHÔNG cần text-transform ở đây nữa. */

/* 6c. MENU CHÍNH HEADER (Header Builder) — Flatsome gán class ".nav-top-link"
   không kèm font riêng, ra mặc định "Lato" xám nhạt của theme thay vì
   Manrope trắng đậm của Figma (163:5462/163:5463 vv — Bold 14/28, #ffffff).
   Đây là lỗi lớn nhất từng bỏ sót — chỉ soát ĐÚNG CHỮ, chưa soát ĐÚNG KIỂU.

   Từ 16/08/2026 phần font đã chuyển sang MỨC 1: Customizer → Type → Nav đặt
   "type_nav" = Manrope/700, và "nav_uppercase" = 0 để bỏ class ".nav-uppercase"
   (class đó kéo theo BA thứ cùng lúc: text-transform:uppercase, font-weight:
   bolder và letter-spacing:.02em — chính .02em là thứ làm mỗi mục menu dôi
   3-4px và đẩy lệch cả hàng, mà so từng ký tự thì chỉ 0,28px nên rất dễ bỏ qua).
   Ở đây chỉ còn cỡ chữ/giãn dòng/màu — những thứ Header Builder không có ô. */
#header .header-nav-main a.nav-top-link {
  font-size: 14px !important;
  line-height: 28px !important;
  color: var(--t4-white) !important;
}
#header .header-nav-main a.nav-top-link:hover { opacity: .85; }

/* 6d. BỐ CỤC HEADER DESKTOP — số đo Figma 163:7688 (khung 1080):
   logo x=410 · menu x=598 · nút x=1222 · header cao 76.
   Ba lỗi đo được: (1) .header-inner có padding 0 15px đẩy logo sang x=425;
   (2) mục menu KHÔNG có padding ngang, Figma 24px (mục đầu 17px);
   (3) Flatsome chèn <li class="header-divider"> không có trong thiết kế
       → nay ĐÃ GỠ Ở MỨC 1 (Header Builder bỏ phần tử "divider" khỏi ô bên
       phải), không còn phải giấu bằng display:none. */
@media (min-width: 850px) {
  #header .header-inner { padding-left: 0; padding-right: 0; }

  /* Cột logo bị Flatsome ấn định 200px trong khi logo thật 148px (Figma 147).
     Thừa 52px làm cụm menu + nút không đủ chỗ trong khung 1080 và mục
     "Hệ sinh thái Kiến thức" BỊ ĐẨY XUỐNG DÒNG THỨ HAI. */
  #header .flex-col.logo { width: auto !important; flex: 0 0 auto; }
  #header ul.header-nav-main { flex-wrap: nowrap; }

  /* Figma "Primary Navigation" là auto-layout SPACE_BETWEEN trong khung 1080:
     logo 147 + menu 583 + nút 268 = 998 → dôi 82 chia đôi thành HAI khoảng
     40,94px. Flatsome để .logo margin-right 30px nên khoảng bên trái hụt 11px
     và toàn bộ hàng menu lệch trái đúng chừng ấy.
     Cột menu có flex-grow nên nó nuốt hết phần dôi → chỉ cần đặt đúng khoảng
     BÊN TRÁI, khoảng bên phải tự bằng theo. */
  #header .flex-col.logo { margin-right: 41px; }

  #header .header-nav-main > li > a.nav-top-link {
    padding-left: 24px !important;
    padding-right: 24px !important;
    /* Figma "Frame 1"/"Text Menu" pt=pb=24, chữ lh 28 → mục menu cao đúng
       76px = trọn chiều cao header. Mặc định Flatsome 10px nên mục chỉ cao
       48px: nhìn thì y hệt (nền trong suốt) nhưng VÙNG BẤM/HOVER hụt 28px
       và dropdown bật lên cao hơn mép header. */
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
  #header .header-nav-main > li:first-child > a.nav-top-link {
    padding-left: 17px !important;
    padding-right: 17px !important;
  }
  /* Figma: mũi tên 18×18, cách chữ 3px. Flatsome để 16px nên mỗi mục
     hụt ~2px, cộng dồn làm cả dải menu lệch. */
  #header .header-nav-main a.nav-top-link i.icon-angle-down {
    margin-left: 3px;
    font-size: 18px;
    width: 18px;
    /* Figma khung icon vuông 18×18. Để nguyên line-height thừa kế thì hộp
       icon cao 21,6px — tâm vẫn đúng nên mắt không thấy, chỉ lộ khi đo. */
    height: 18px;
    line-height: 18px;
    vertical-align: middle;
  }

/* [figma] luật dùng chung — lớp rộng 130px có ở 3 trang; đại diện: trang3:'359:1605' · trang4:'1113:9309' · trang7:'1211:18852'
   (tệp này phục vụ nhiều trang nên không có MỘT node duy nhất) */
  /* Nút: Figma "Nhận tư vấn" 130×42, "Gọi ngay" 124×42, cách nhau 14px.
     Flatsome tự tính theo padding chữ nên ra 121×35 và 97×35. */
  #header .header-button a.button {
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
  #header .header-button a[href$="/lien-he/"].button { width: 130px !important; }
  #header .header-button a[href^="tel:"].button      { width: 124px !important; }
}

/* --------------------------------------------------------------------------
   6d-ter. MỤC THỨ NĂM "BÁO CÁO KHÁCH HÀNG" (17/09/2026 — 4T yêu cầu)
   [phục vụ] phần tử: mục menu có class 't4-menu-bao-cao' (menu 67, trỏ
   /baocaokhachhang/) | [figma] KHÔNG có node — Figma chỉ vẽ 4 mục.
   [số] Khung 1080 = logo 147 + menu + nút 130 + 14 + chọn ngôn ngữ 92.
   Bốn mục cũ (chữ 404px) + "Báo cáo khách hàng" (chữ 134px) = 538px chữ;
   với đệm 24/mục và hai khoảng 41 như Figma thì thiếu ~110px ⇒ mục thứ năm
   đè lên nút "Nhận tư vấn". Đo bằng Playwright (chromium + webkit):
   đệm 10/mục + hai khoảng 27/24 vừa khít, còn dư ~7px.
   ⛔ CHỈ áp khi mục này CÓ MẶT (':has') — gỡ mục khỏi menu là header tự
   trở về đúng số đo Figma, không phải sửa CSS. Chỉ khổ >= 850px; khổ mobile
   không có menu ngang (dùng thanh đáy + bảng "Tuỳ chọn khác").
   -------------------------------------------------------------------------- */
@media (min-width: 850px) {
  #header .header-inner:has(li.t4-menu-bao-cao) .flex-col.logo { margin-right: 27px; }
  #header ul.header-nav-main:has(> li.t4-menu-bao-cao) > li > a.nav-top-link {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  #header .header-inner:has(li.t4-menu-bao-cao) ul.header-nav-main > li.header-button-1 { padding-left: 24px; }
}

/* --------------------------------------------------------------------------
   6d-quater. HEADER DESKTOP KHỔ HẸP 850–1099px — CHỐNG TRÀN (17/09/2026)
   [phục vụ] phần tử: header desktop (logo · 5 mục menu · "Nhận tư vấn" ·
   chọn ngôn ngữ) | [figma] KHÔNG có khung 850–1099, Figma chỉ vẽ 1900/402.
   [số đo trước khi sửa] Khung '.header-inner' là 'max-width: 1080' nên dưới
   1080 nó CO theo màn, nhưng menu 'flex-shrink: 0' không co ⇒ cụm nút bị đẩy
   ra ngoài: 1000px nút "Nhận tư vấn" (799) đè mục cuối (hết ở 813); 850px cụm
   phải ở 750–975, chọn ngôn ngữ bị cắt mất.
   Nhu cầu tối thiểu = logo 148 + chữ menu 538 + nút 130 + 14 + ngôn ngữ 57
   (dưới 1280 nút ngôn ngữ chỉ còn icon) = 887px + các khoảng ⇒ không thể
   giữ nhãn đầy đủ ở 850. Hai bậc:
     ① 1000–1099: giữ NHÃN ĐẦY ĐỦ, đệm mục 6px, hai khoảng 16px (979px).
     ② 850–999:   RÚT GỌN NHÃN "Hệ sinh thái Kiến thức" → "Kiến thức" (đúng
        nhãn của thanh đáy mobile) và "Báo cáo khách hàng" → "Báo cáo"; đệm
        8px, hai khoảng 16px (~811px). Phần bị ẩn là <span class="t4-nhan-dai">
        nằm trong TIÊU ĐỀ mục menu (menu 67, mục 2347 và 4304).
   ⛔ Khổ >= 1100 và khổ mobile < 850 KHÔNG đổi gì.
   -------------------------------------------------------------------------- */
@media (min-width: 850px) and (max-width: 1099px) {
  #header .header-inner:has(li.t4-menu-bao-cao) .flex-col.logo { margin-right: 16px; }
  #header ul.header-nav-main:has(> li.t4-menu-bao-cao) > li > a.nav-top-link {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
  #header .header-inner:has(li.t4-menu-bao-cao) ul.header-nav-main > li.header-button-1 { padding-left: 16px; }
}
@media (min-width: 850px) and (max-width: 999px) {
  #header ul.header-nav-main:has(> li.t4-menu-bao-cao) > li > a.nav-top-link {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  #header .header-nav-main .t4-nhan-dai { display: none; }
}

/* --------------------------------------------------------------------------
   6d-quinquies. NÚT ĐĂNG NHẬP TRÊN HEADER (17/09/2026 — 4T yêu cầu)
   [phục vụ] phần tử: template-parts/header/partials/element-dang-nhap.php
   (li.header-dang-nhap, key 'dang-nhap' trong header_elements_right và
   header_mobile_elements_right).
   [figma] KHÔNG có node — header 163:7688 / 1017:21271 không vẽ nút đăng
   nhập. Làm theo hệ nút có sẵn: nền trắng, viền #E4E7E2, bo 8px (nút phụ
   "Gọi ngay" của Figma), icon Dark Moss Green — cao bằng nút chọn ngôn ngữ
   đứng cạnh (42px desktop · 40px mobile).
   [số đo trước khi sửa] Chỗ dư giữa mục menu cuối và cụm nút phải:
   ≥1280: 7px · 1100: 42 · 1024: 45 · 1000: 21 · 900: 65 · 850: 15.
   Nút icon cần 42 + khe 14 = 56px ⇒ phải nhường chỗ theo từng dải (dưới).
   ⛔ Mọi luật nhường chỗ gắn ':has(li.header-dang-nhap)' — gỡ key khỏi
   Header Builder là header tự về đúng số đo cũ, không phải sửa CSS.
   -------------------------------------------------------------------------- */
#header .t4-dn-nut {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 42px;
  height: 42px;
  padding: 0;
  background: #fff;
  border: 1px solid #E4E7E2;
  border-radius: 8px;
  color: var(--t4-dark-moss);
  text-decoration: none;
  transition: background-color .18s ease, border-color .18s ease;
}
#header .t4-dn-nut:hover,
#header .t4-dn-nut:focus-visible { background: #F5F7F5; border-color: #D8DED6; }
#header .t4-dn-nut:focus-visible { outline: 2px solid var(--t4-leaf); outline-offset: 2px; }
#header .t4-dn-ic { font-size: 26px; line-height: 1; color: var(--t4-dark-moss); user-select: none; }
/* chữ chỉ cho trình đọc màn hình — nhãn nhìn thấy là bong bóng ::after */
#header .t4-dn-chu {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (min-width: 850px) {
  /* Bong bóng nhãn khi rê chuột / focus bàn phím. Neo MÉP PHẢI của nút
     (không căn giữa) vì nút nằm sát mép phải màn hình ở 850–1079px —
     căn giữa là bong bóng lòi ra ngoài, sinh thanh cuộn ngang. */
  #header .t4-dn-nut::after {
    content: attr(data-nhan);
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    padding: 6px 10px;
    background: var(--t4-dark-moss);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    border-radius: 6px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .15s ease;
    z-index: 9600;
  }
  #header .t4-dn-nut:hover::after,
  #header .t4-dn-nut:focus-visible::after { opacity: 1; visibility: visible; }

  /* ≥1100: dùng lại đúng bộ số của dải 1000–1099 (đã kiểm) — đệm mục 6,
     logo 16, "Nhận tư vấn" 16 ⇒ nhả thêm 59px. */
  #header .header-inner:has(li.header-dang-nhap):has(li.t4-menu-bao-cao) .flex-col.logo { margin-right: 16px; }
  #header .header-inner:has(li.header-dang-nhap) ul.header-nav-main:has(> li.t4-menu-bao-cao) > li > a.nav-top-link {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
  #header .header-inner:has(li.header-dang-nhap):has(li.t4-menu-bao-cao) ul.header-nav-main > li.header-button-1 { padding-left: 16px; }
}
/* 1000–1049: nhãn đầy đủ không đủ chỗ (dư 21–45px) ⇒ rút gọn nhãn như dải
   850–999 ("Kiến thức", "Báo cáo"). */
@media (min-width: 1000px) and (max-width: 1049px) {
  #header .header-inner:has(li.header-dang-nhap) ul.header-nav-main:has(> li.t4-menu-bao-cao) > li > a.nav-top-link {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  #header .header-inner:has(li.header-dang-nhap) .header-nav-main .t4-nhan-dai { display: none; }
}
/* 850–899: nhãn đã rút gọn mà vẫn chỉ dư 15–64px ⇒ đệm mục 4, logo 10,
   "Nhận tư vấn" 10. */
@media (min-width: 850px) and (max-width: 899px) {
  #header .header-inner:has(li.header-dang-nhap):has(li.t4-menu-bao-cao) .flex-col.logo { margin-right: 10px; }
  #header .header-inner:has(li.header-dang-nhap) ul.header-nav-main:has(> li.t4-menu-bao-cao) > li > a.nav-top-link {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
  #header .header-inner:has(li.header-dang-nhap):has(li.t4-menu-bao-cao) ul.header-nav-main > li.header-button-1 { padding-left: 10px; }
}

@media (max-width: 849px) {
  /* nằm giữa chọn ngôn ngữ và icon tìm kiếm (giữ icon tìm kiếm ở mép phải
     như Figma 1017:21271) */
  #header .mobile-nav > li.header-dang-nhap { margin-left: 0; margin-right: 0; }
  #header .t4-dn-nut { width: 40px; height: 40px; }
  #header .t4-dn-ic { font-size: 25px; }
  /* vùng bấm 46×46 (≥ 44) dù nút nhìn thấy 40×40 */
  #header .t4-dn-nut::before { content: ""; position: absolute; inset: -3px; }
}
/* Màn hẹp: nhường chỗ bằng cách bỏ chữ "VI" (giữ icon + mũi tên, giống
   desktop 850–1279px). */
@media (max-width: 374px) {
  #header .header-inner:has(li.header-dang-nhap) .t4-lang-code { display: none; }
  #header .header-inner:has(li.header-dang-nhap) .t4-lang-btn { gap: 2px; }
}
@media (max-width: 359px) {
  #header .header-inner:has(li.header-dang-nhap) { padding-left: 16px; padding-right: 16px; }
  #header .header-inner:has(li.header-dang-nhap) .mobile-nav.nav-right { gap: 6px; }
}

/* --------------------------------------------------------------------------
   6d-bis. MEGA MENU "DỊCH VỤ" — Figma node 678:5111 "Menu_Dịch vụ"
   Khung 1280×380, nền trắng, bo góc DƯỚI 5px, KHÔNG có bóng đổ.
   Bốn cột: Google Ads (270) · Truyền thông thương hiệu (246) ·
   Thiết kế & Vận hành WEB (223) · Tư vấn chiến lược (258), cách nhau ~27px,
   nội dung bắt đầu ở x=100 trong khung.

   Cấu trúc do Header Builder + trình đơn WordPress lo (mục "Dịch vụ" đặt
   '_menu_item_design = custom-size', rộng 1280; mục cấp 2 có con được Flatsome
   tự gắn class '.nav-dropdown-col'). Ở đây CHỈ chỉnh kiểu dáng.

   ⚠ 678:5111 mới là bản hoàn chỉnh. Hai bản khác trong file KHÔNG dùng:
     · 710:5700 (1280×400) và các biến thể 163:6034/163:6253/547:2008 của
       component "Menu white_Short" đều còn nguyên chữ giữ chỗ "Figma ipsum".
   -------------------------------------------------------------------------- */
@media (min-width: 850px) {
  /* Neo bảng vào .header-inner (khung 1080 đã căn giữa) thay vì vào <li>:
     bảng rộng 1280 > 1080 nên phải tràn đều hai bên. 1080 tại x=410, lùi
     100px là x=310, cộng 640 ra đúng tâm màn 1900. Chỉ đổi mục có mega menu
     nên các dropdown khác giữ nguyên cách định vị của Flatsome. */
  #header .header-inner { position: relative; }
  /* Phải hạ CẢ ba lớp bọc xuống static, không chỉ <li>: cột menu và <ul> của
     Flatsome cũng position:relative, nên left:50% bám vào cột menu (tâm 890)
     thay vì vào .header-inner (tâm 950) và bảng lệch trái 60px.
     Các mục menu khác vẫn giữ position:relative nên dropdown thường của chúng
     không đổi chỗ. */
  #header .header-inner > .flex-col.flex-left,
  #header .header-inner ul.header-nav-main,
  #header li.menu-item-design-custom-size { position: static; }

  #header li.menu-item-design-custom-size > ul.nav-dropdown {
    /* Căn giữa theo màn hình: .header-inner luôn nằm giữa nên lấy nó làm mốc
       là ra đúng tâm màn ở mọi khổ. Ở 1900px cho x=310, cộng 640 ra tâm 950 —
       khớp cả node 678:5111 lẫn biến thể toàn khổ 163:6034 (nội dung x=410). */
    left: 50%;
    transform: translateX(-50%);
    width: min(1280px, 100vw) !important; /* Flatsome ghi width bằng style nội
                                 tuyến từ ô "Width" của trình đơn — chỉ
                                 !important mới đè được.
                                 min(...) vì Figma chỉ vẽ khổ 1900: để 1280px
                                 cứng thì từ 1440px trở xuống bảng bị cắt mất
                                 bên phải (ở 1100px mất 190px, tức mất hẳn
                                 cột 4) mà trang KHÔNG hề tràn ngang nên không
                                 có dấu hiệu gì báo. */
    max-width: none;
    display: flex;
    gap: 27px;
    padding: 0 100px 92px;    /* Figma: nội dung x=100; đáy 92px là chỗ trống
                                 của 6 mục cột 3 đang bị ẩn trong thiết kế */
    border: 0;                /* Flatsome viền 2px → bảng cao 384 thay vì 380 */
    border-radius: 0 0 5px 5px;
    box-shadow: none;         /* Figma không đặt hiệu ứng nào cho bảng này */
    background: var(--t4-white);
  }

  /* Flatsome ép mỗi cột thành display:table-cell rộng cứng 160px — cột Figma
     rộng theo chữ (270/246/223/258).
     Dùng min-width chứ không phải width: khớp Figma khi chữ ngắn hơn, mà 4T
     đổi sang nhãn dài hơn thì cột vẫn nở ra chứ không tràn. */
  #header li.menu-item-design-custom-size > ul.nav-dropdown > li.nav-dropdown-col,
  #header li.menu-item-design-custom-size > ul.nav-dropdown > li {
    display: block;
    width: auto;
    min-width: 0;
    border-right: 0;
    white-space: nowrap;
  }
  /* ⚙ 18/09/2026 — 4T thêm mục con dài (vd. "Nghiên cứu thị trường & đánh
     giá hiện trạng Marketing doanh nghiệp") vào cột 2 và 4, nội dung Figma
     gốc (270/246/223/258, đo cho nhãn NGẮN) chưa từng tính tới. Đổi bốn cột
     về MỘT bề rộng đều nhau (250px, vẫn vừa khít bảng 1280 sẵn có: 4×250 +
     3×27 + 200 đệm = 1280) để nhìn cân đối, thay vì lệch cột chữ dài/ngắn.
     Mục con dài xuống dòng (xem white-space bên dưới) thay vì tràn. */
  #header li.menu-item-design-custom-size > ul.nav-dropdown > li:nth-child(1),
  #header li.menu-item-design-custom-size > ul.nav-dropdown > li:nth-child(2),
  #header li.menu-item-design-custom-size > ul.nav-dropdown > li:nth-child(3),
  #header li.menu-item-design-custom-size > ul.nav-dropdown > li:nth-child(4) {
    min-width: 250px;
  }

  /* Flatsome để margin 0 10px trên MỌI liên kết trong dropdown → cả bốn cột
     thụt vào 10px và rộng thêm 20px. Figma không có lề nào. */
  #header li.menu-item-design-custom-size > ul.nav-dropdown a { margin: 0; }

  /* Tiêu đề cột — Figma: Manrope 700 14/28 #1f1f1f, KHÔNG viết hoa,
     pt 24, mục con đầu bắt đầu ở y=68 → đệm dưới 16px. */
  #header li.menu-item-design-custom-size > ul.nav-dropdown > li > a {
    font-family: var(--t4-font-body);
    font-size: 14px;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: 0;
    color: var(--t4-text);
    text-transform: none;
    padding: 24px 0 16px;
    border-bottom: 0;
  }

  /* Mục con — Figma: Manrope 400 14/28 #1f1f1f, hàng cao 44 (đệm dọc 8).
     ⚙ 18/09/2026 — Figma chỉ vẽ nhãn ngắn nên khai `nowrap` ở <li> cha đủ
     dùng. Nhãn dài 4T thêm sau không có trong Figma; ép `normal` ở ĐÚNG thẻ
     <a> mục con (không đụng tiêu đề cột — tiêu đề vẫn nowrap một dòng như
     cũ) để chữ dài tự xuống dòng gọn trong cột, không tràn ra ngoài. */
  #header li.menu-item-design-custom-size > ul.nav-dropdown ul li a {
    font-family: var(--t4-font-body);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0;
    color: var(--t4-text);
    text-transform: none;
    padding: 12px 0;
    border-bottom: 0;
    white-space: normal;
    display: block;
  }
  #header li.menu-item-design-custom-size > ul.nav-dropdown ul li a:hover {
    color: var(--t4-mang-la-chu);
  }
  /* Trạng thái của TIÊU ĐỀ CỘT — Figma có định nghĩa hẳn hoi: component set
     "Text_Menu bar 2" (195:3493) có hai biến thể, Default chữ #1f1f1f và
     Variant2 chữ #458763. Đây là chỗ DUY NHẤT trong cả header mà Figma mô tả
     trạng thái bằng màu; mục menu đầu trang ("Text Menu" 163:4547) thì hai
     biến thể giống hệt nhau từng thuộc tính. */
  #header li.menu-item-design-custom-size > ul.nav-dropdown > li > a:hover,
  #header li.menu-item-design-custom-size > ul.nav-dropdown > li:hover > a {
    color: var(--t4-mang-la-chu);
  }

  /* ------------------------------------------------------------------------
     BẢNG MEGA DẠNG THẺ — "Giáo dục" (163:6253) · "Hệ sinh thái Kiến thức"
     (547:2008). Cùng khung 1280×460 tại x=310 như bảng "Dịch vụ", nhưng bố
     cục khác hẳn: một KHỐI TIÊU ĐỀ chiếm trọn hàng → đường kẻ #e3e3e3 →
     một hàng THẺ (icon 23px + tên + mô tả), thẻ rộng 300px cách nhau 80px.

     Phân biệt hai kiểu bảng bằng class 't4-mega-the' đặt ở ô "CSS Classes"
     của mục trình đơn — 4T nhìn thấy và đổi được trong wp-admin.

     Mốc dọc lấy thẳng từ Figma (toạ độ tính từ mép trên bảng):
       khối tiêu đề 0→114 · đường kẻ 122 · hàng thẻ 130→253 · đáy bảng 460
     Khoảng trống 207px dưới hàng thẻ là CÓ THẬT trong thiết kế — đã đối chiếu
     bằng ảnh render của chính Figma, không phải lỗi dựng.
     ------------------------------------------------------------------------ */
  #header li.t4-mega-the > ul.nav-dropdown {
    flex-wrap: wrap;
    gap: 0 80px;              /* Figma: thẻ cách nhau 80px */
    padding-bottom: 207px;
  }

  /* ⚠ HỘP CHỮ TRONG FIGMA NHỎ HƠN CHỮ NÓ VẼ RA: mô tả tiêu đề khai cao 30px
     nhưng render 2 dòng lh21 = 42px; mô tả thẻ khai 51px mà render 3 dòng =
     63px. Vậy KHÔNG được suy chiều cao khối từ chiều cao hộp chữ — bám MỐC
     CHỮ Figma vẽ ra, còn chiều cao khối thì lấy đúng khung Figma khai.
     Mốc tính từ mép trên bảng: tiêu đề 24 · mô tả 60 · kẻ 122 · hàng thẻ 130 ·
     tên thẻ 148 · mô tả thẻ 184 · đáy bảng 460. */
  #header li.t4-mega-the > ul.nav-dropdown > li.t4-mega-dau {
    flex: 0 0 100%;
    min-width: 0;
    height: 114px;          /* Figma "Frame 1" */
    padding: 24px 0 0;
    margin-bottom: 16px;    /* 8px xuống đường kẻ + 8px từ kẻ xuống hàng thẻ */
    position: relative;
    white-space: normal;
  }
  /* Đường kẻ là một VECTOR riêng ở y=122 — LỌT GIỮA khối tiêu đề và hàng thẻ,
     không dính mép khối nào. Vẽ bằng ::after thả nổi; dùng border-bottom thì
     nó dính mép 114 và lệch 8px. */
  #header li.t4-mega-the > ul.nav-dropdown > li.t4-mega-dau::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -8px;
    height: 1px;
    background: #e3e3e3;
  }
  #header li.t4-mega-the > ul.nav-dropdown > li.t4-mega-dau > a {
    display: block;
    padding: 0;
  }

/* [figma] trang7 · section mota_mb/quytrinh_mb — 3 lớp rộng 300px: '1113:17734' · '1113:17984' · '1113:17985'
   (nhiều lớp cùng khổ nên KHÔNG ghim một node; mở spec trang 7 để chọn) */
  /* Thẻ: icon và tên cùng hàng, mô tả xuống dòng thụt vào đúng bằng
     bề rộng icon + khoảng hở (23 + 8 = 31px). */
  #header li.t4-mega-the > ul.nav-dropdown > li:not(.t4-mega-dau) {
    flex: 0 0 300px;
    min-width: 0;
    height: 123px;          /* Figma "Frame 3/4/5" */
    padding: 18px 0 0;
    white-space: normal;
  }
  /* Hàng thẻ thụt vào 8px so với khối tiêu đề: Figma lồng "Frame 56" (1064)
     vào giữa "Frame 58" (1080) → dôi 8px mỗi bên. Chỉ cần đẩy thẻ ĐẦU, các
     thẻ sau tự theo vì khoảng cách 80px tính từ thẻ liền trước. */
  #header li.t4-mega-the > ul.nav-dropdown > li.t4-mega-dau + li { margin-left: 8px; }

  #header li.t4-mega-the > ul.nav-dropdown > li:not(.t4-mega-dau) > a {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: 8px;
    /* Figma khai khoảng hở tên→mô tả là 8px, NHƯNG hộp mô tả của nó chỉ cao
       51px trong khi chữ render 63px; Figma căn giữa nên chữ tràn lên trên
       6px. Muốn khớp cái MẮT NHÌN THẤY thì khoảng hở thật là 8 − 6 = 2px.
       Bám chữ Figma vẽ ra, không bám con số Figma khai. */
    row-gap: 2px;
    padding: 0;
  }
  #header li.t4-mega-the > ul.nav-dropdown > li > a .material-symbols-outlined {
    flex: 0 0 23px;
    font-size: 20px;
    line-height: 28px;
    color: var(--t4-mang-la-chu);   /* Figma: mọi icon trong bảng này đều #458763 */
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  }
  /* Mô tả — Figma 12/21, cùng màu chữ với tiêu đề, xuống dòng riêng và thụt
     vào bằng bề rộng icon.
     ⚠ flex-basis 100% CỘNG margin-left 31px là tràn ra ngoài thẻ đúng 31px —
     bảng số đo không bắt được (nó so vị trí và kiểu chữ, không so bề rộng
     khối mô tả), chỉ ẢNH CHỤP mới lộ ra. Phải trừ thẳng vào flex-basis:
     Figma cho khối chữ rộng 269 = 300 − 31. */
  #header li.t4-mega-the .t4-mega-mo-ta {
    flex: 0 0 calc(100% - 31px);
    display: block;
    margin-left: 31px;
    font-size: 12px;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: 0;
    color: var(--t4-text);
  }
  #header li.t4-mega-the > ul.nav-dropdown > li.t4-mega-dau .t4-mega-mo-ta {
    margin-left: 0;
    max-width: 631px;        /* Figma: khối mô tả tiêu đề rộng 631px */
    margin-top: 2px;         /* 8 khai − 6 tràn, cùng lý do như mô tả thẻ */
  }
}

/* Dưới 1300px không còn đủ chỗ cho lề 100px của Figma; dưới ~1180px thì bốn
   cột (tổng 1078px kể cả khoảng cách) cũng không nằm vừa một hàng. Cho xuống
   hàng thay vì để cột 4 bị cắt mất. Figma không vẽ khổ này. */
@media (min-width: 850px) and (max-width: 1300px) {
  #header li.menu-item-design-custom-size > ul.nav-dropdown {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 24px;
    flex-wrap: wrap;
  }
}

/* 6e. HEADER MOBILE — Figma node 1017:21271 "Frame Menu Mobile":
   khung 402×60, nền #458763, padding 25px hai bên,
   LOGO 124×29 bên TRÁI (x=25) · ICON TÌM KIẾM 17×18 bên PHẢI (x=360).
   Cấu hình slot (logo trái, bỏ hamburger, thêm search phải) đặt trong
   Header Builder qua theme_mod; phần căn lề/kích thước xử lý ở đây.
   Menu vẫn mở được từ nút "Tuỳ chọn khác" ở thanh đáy mobile. */
@media (max-width: 849px) {
  #header .header-inner {
    padding-left: 25px;
    padding-right: 25px;
  }
  /* Flatsome căn giữa logo trên mobile (cột .logo rộng 200px, ảnh ở x=127).
     Figma đặt logo sát mép trái. */
  #header .flex-col.logo {
    margin: 0 !important;
    text-align: left !important;
    width: auto !important;
    flex: 1 1 auto;
  }
  #header #logo,
  #header #logo a { justify-content: flex-start; text-align: left; }
  #header #logo img {
    width: 124px !important;
    height: auto !important;
    max-height: none !important;
    margin-left: 0 !important;  /* Flatsome căn giữa logo bằng margin:0 auto
                                   (đo được 0 106.3px) — ép về sát trái */
    margin-right: 0 !important;
  }
  #header .flex-col.flex-right { flex: 0 0 auto; }
  /* Slot trái của header mobile nay TRỐNG (đã bỏ hamburger) nhưng Flatsome
     vẫn để flex:1 1 0 nên nó chiếm 106px và đẩy logo vào giữa. */
  #header .header-inner > .flex-col.show-for-medium.flex-left {
    flex: 0 0 0 !important;
    width: 0 !important;
    overflow: hidden;
  }
}
/* Mega-dropdown + menu mobile off-canvas dùng chung ".nav-uppercase" của
   Flatsome — cùng lỗi viết hoa, sửa luôn một thể. */
#header .header-nav-main .sub-menu a,
#main-menu a {
  text-transform: none !important;
}

/* Menu off-canvas mobile dựng lại CÙNG MỘT cây trình đơn với desktop, nên nó
   lôi theo hai thứ chỉ dành cho bảng mega desktop:
     · đoạn mô tả 12px của mỗi thẻ — nhồi vào danh sách dọc thì rối mù;
     · mục tiêu đề (.t4-mega-dau) — lặp lại đúng tên mục cha ngay bên trên.
   Figma vẽ menu mobile thành node RIÊNG (1015:20521), không có hai thứ này.
   Ẩn bằng CSS chứ KHÔNG xoá khỏi trình đơn — bản desktop vẫn cần chúng. */
#main-menu .t4-mega-mo-ta,
#main-menu li.t4-mega-dau {
  display: none;
}


/* ── §8 widget chat (dòng 904–990 của style.css cũ) ──────────────────── */

/* --------------------------------------------------------------------------
   8. WIDGET CHAT NỔI GÓC PHẢI (desktop 163:7441 · mobile 1093:9543)
   --------------------------------------------------------------------------
   ⚠ Node Figma này là ẢNH CHỤP một widget HubSpot dán vào bản thiết kế — tên
   lớp còn nguyên "Iframe", "Html → Body", "Button - Close welcome page →", và
   chữ trong bong bóng là "👋 Want to chat about HubSpot? I'm an AI chatbot…".
   Theo luật 0 (bàn giao 16/08): dựng ĐÚNG hình học và màu của Figma, nhưng
   GIỮ nội dung tiếng Việt thật của 4T thay vì chép chữ HubSpot. Hai thứ cố ý
   KHÔNG theo Figma, đã ghi vào qa/danh-sach-danh-doi.md:
     · chữ trong bong bóng (chữ giữ chỗ của HubSpot)
     · chiều cao bong bóng 177px (ảnh chụp còn phần giao diện HubSpot phía
       dưới; bong bóng của ta cao theo nội dung thật)
   -------------------------------------------------------------------------- */
/* ⛔ ĐỔI 29/08/2026 — thay 2 nút chung chung bằng 6 icon liên hệ THẬT (Bản
 * đồ · Messenger · Zalo · Hotline · YouTube · TikTok) lấy nguyên từ web
 * tiepthitute.com cũ. Vị trí khung giữ nguyên mốc Figma gốc (phải 85px, đáy
 * 36px desktop); layout bên trong đổi hẳn sang XẾP DỌC cho cả hai khổ — 6
 * icon nằm ngang sẽ tràn quá rộng, nên không còn khớp Figma 1093:12989 nữa
 * (thiết kế đó chỉ tính cho 2 nút). */
.t4-chat { position: fixed; right: 85px; bottom: 36px; z-index: 700; }

.t4-chat-buttons {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

/* Icon đã có sẵn nền tròn + màu thương hiệu NGAY TRONG file ảnh (SVG/PNG
   kéo nguyên từ web cũ) — nút ở đây chỉ là vùng bấm trong suốt, KHÔNG vẽ
   thêm nền/màu riêng (khác bản 2-nút cũ dùng biểu tượng đơn sắc + nền tô). */
.t4-chat-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
  text-decoration: none;
  transition: transform .2s ease;
  flex: 0 0 auto;
  overflow: hidden;
}
.t4-chat-btn:hover { transform: scale(1.08); }
.t4-chat-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }

.t4-chat-bubble {
  position: relative;
  width: 250px;
  background: #efe8da;          /* Figma #EFE8DA — kem, KHÔNG phải trắng */
  border-radius: 8px;           /* Figma 8, không phải 12 */
  box-shadow: 1px 1px 10px rgba(0, 0, 0, .28);
  padding: 16px;
  margin-bottom: 8px;           /* Figma: đáy bong bóng 176,8 → nút 184,8 */
  font-size: 14px;
  line-height: 24px;            /* Figma lh=24, không phải 22 */
  color: #141414;
}

.t4-chat-bubble button {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  border: 0;
  background: none;
  color: var(--t4-muted);
  cursor: pointer;
  line-height: 1;
}

.t4-chat.is-collapsed .t4-chat-bubble { display: none; }

@media (max-width: 849px) {
  /* Giữ mốc Figma mobile cho VỊ TRÍ KHUNG (phải 17px, đáy 91px — chừa chỗ
     thanh nút đáy cao 70). Kích thước icon giảm nhẹ cho vừa màn hình hẹp,
     bong bóng chào vẫn ẩn ở mobile như bản cũ. */
  .t4-chat { right: 17px; bottom: 91px; }
  .t4-chat-bubble { display: none; }
  .t4-chat-buttons { flex-direction: column; align-items: flex-end; gap: 9px; }
  .t4-chat-btn { width: 40px; height: 40px; }

  /* Khu học `/hoc/*`: cụm 6 nút nổi (cao ~285px) ĐÈ lên ô nhập của form đăng nhập
     và lên video bài học (đo 17/09/2026, iPhone SE 375px). Học viên đã có thanh
     nút đáy ⇒ ẩn cụm nổi ở khu học. ⛔ Chỉ khổ ≤849; desktop và trang bán hàng
     giữ nguyên. */
  .t4-khu-hoc .t4-chat { display: none; }
}

/* Khu học ở khổ desktop HẸP: đo 17/09/2026 — cụm nút (right 85px) đè ô nhập của
   form đăng nhập ở 850–1049px, và đè cột mục lục bài học (752 + 24 + 304 = 1080,
   canh giữa) tới ~1299px. ≥1300 nút nằm ngoài vùng nội dung ⇒ giữ. ⛔ Không đụng
   khối ≤849 ở trên và ⛔ không đụng trang bán hàng. */
@media (min-width: 850px) and (max-width: 1299px) {
  .t4-khu-hoc .t4-chat { display: none; }
}


/* ── §9 tiện ích dùng lại (dòng 991–1032 của style.css cũ) ──────────────────── */

/* --------------------------------------------------------------------------
   9. TIỆN ÍCH DÙNG LẠI
   -------------------------------------------------------------------------- */
.t4-container {
  max-width: var(--t4-container);
  margin: 0 auto;
  padding: 0 15px;
}

.t4-section { padding: 100px 0; }

@media (max-width: 849px) {
  .t4-section { padding: 48px 0; }
  .t4-container { padding: 0 30px; }
}

.t4-scroll-x { display: grid; gap: 24px; }

@media (max-width: 849px) {
  .t4-scroll-x {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    margin-right: -15px;
  }
  .t4-scroll-x > * { flex: 0 0 82%; scroll-snap-align: start; }
  .t4-scroll-x::-webkit-scrollbar { display: none; }
}

.t4-only-desktop { display: block; }
.t4-only-mobile { display: none; }

@media (max-width: 849px) {
  .t4-only-desktop { display: none; }
  .t4-only-mobile { display: block; }
}

.t4-img { max-width: 100%; height: auto; display: block; }


/* --------------------------------------------------------------------------
   BA LỚP TÔ NHẤN TRONG CHỮ — mô-típ dùng chung (III.4.0)
   [phục vụ] <span> bên trong phần tử Text | [trang] toàn site
   [figma] Color Style "Camel Brown" #CF9156 · "Leaf Green" #458763
   [lý do vượt panel] panel Text không đổi màu được một CỤM giữa câu

   ⛔ III.2 chỉ cho <span> mang ĐÚNG BA lớp này, nên đây là danh sách ĐÓNG:
   thêm lớp thứ tư là sửa bộ luật chứ không phải sửa CSS. Trước đây mỗi khối
   tự đặt tên riêng ('t4h-fw-cam', 't4h-dv-cam'…) và bộ kiểm T0 bắt hết.

   'accent' cố ý KHÔNG khai kiểu ở đây: nó là lớp "nhấn theo NGỮ CẢNH", mỗi
   khối tự định nghĩa nhấn cái gì — chữ "4" của logo dùng phông Poltawski,
   chữ "V" của VISION phóng to 26px. Khai một kiểu chung cho nó là đoán bừa.
   -------------------------------------------------------------------------- */
.t4 .hl-camel { color: var(--t4-nhan-manh-chu); }
.t4 .hl-green { color: var(--t4-mang-la-chu); }


/* ══════════════════════════════════════════════════════════════════════════
   BREADCRUMB — DỜI TỪ '40-page-xu-ly-loi-sai-google-ads.css' (20/08/2026)

   Breadcrumb là component TOÀN SITE: đo bằng CSSOM trên 8 trang khác nhau thì
   16 luật này khớp ở mọi trang, dù chúng nằm trong một mô-đun mang tên trang
   #4. Đây là một trong 151 luật của mô-đun 40 rò ra ngoài phạm vi — nguyên
   nhân gốc khiến 'functions.php' chưa nạp CSS theo trang được (xem
   'qa/soat-css.md').

   ⚠ Dời sang đây là dời SỚM hơn trong tầng bậc (30 nạp trước 40–51). Đã kiểm:
   sau dòng cuối cùng của ba khối này, mô-đun 40 KHÔNG còn luật nào chạm
   't4fx-crumb', nên không có cặp nào đổi thắng thua. Các mô-đun 41–51 vốn đã
   nạp SAU 40 nên quan hệ với chúng không đổi.

   Giữ NGUYÊN thứ tự ba khối A → B → C: '.t4fx-crumb li' và '.t4fx-crumb ol'
   được khai HAI LẦN (khối A rồi khối B đè lên), đảo là đổi kết quả.
   ══════════════════════════════════════════════════════════════════════════ */
/* --------------------------------------------------------------------------
   11.1 BREADCRUMB (Figma 1015:14115 · mobile 1113:23113)
   Nền kem, khung trong 1060 tại x=420 — KHÁC 1080@410 của các section khác,
   giữ đúng như Figma vẽ. Cao 70 = 24 đệm trên + 22 nội dung + 24 đệm dưới.
   -------------------------------------------------------------------------- */
.t4fx-crumb { background: var(--t4-cream); }
.t4fx-crumb-in { max-width: 1060px; margin: 0 auto; padding: 24px 0; }
.t4fx-crumb ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; flex-wrap: wrap;
  font-family: var(--t4-font-body);
  font-size: 13.9px; line-height: 22px; font-weight: 600;
}
/* Ghim chiều cao mục: icon chevron cao 14px nhưng ô chứa nó cao 22 — để flex
   tự tính là hàng cao 30px và breadcrumb dôi 8px. */
.t4fx-crumb li { display: flex; align-items: center; height: 22px; }
.t4fx-crumb a { color: var(--t4-text); text-decoration: none; }
.t4fx-crumb a:hover { color: var(--t4-mang-la-chu); }
.t4fx-crumb [aria-current] { color: #000; }

/* [phục vụ] phần tử: breadcrumb child theme ('.t4fx-crumb a') | khối: mọi
   mục Home / chặng giữa của breadcrumb, TOÀN SITE (component dùng chung)
   [lý do vượt panel] breadcrumb do child theme in ra ('t4_html_duong_dan()'
   trong functions.php), không có phần tử builder / panel Flatsome nào.
   ⛔ Kiểm tương tác báo mọi mục breadcrumb 19–22px cao — dưới ngưỡng chạm
   24×24 (WCAG 2.5.8). Chữ/kích thước hiển thị GIỮ NGUYÊN đúng Figma (13,9px
   desktop / 10px mobile, cao dòng 22px) — chỉ NỚI VÙNG CHẠM bằng '::after'
   tuyệt đối, nới đều ra ngoài bằng inset ÂM để `kiem-tuong-tac.js` nhận đúng
   là lớp phủ vùng bấm (chỉ tính khi phần tử CÓ ĐỊNH VỊ và cả 4 cạnh pseudo
   đều khai, đều ≤0 — xem hàm 'hopBam'). 6px trên/dưới đủ đưa 22px → 34px,
   4px hai bên vẫn nằm gọn trong khe 20–32px của mũi tên phân cách, không
   chồng sang mục liền kề (cùng bẫy đã sửa ở footer '.ux-menu-link__link'). */
.t4fx-crumb a {
  position: relative;
}
.t4fx-crumb a::after {
  content: '';
  position: absolute;
  top: -6px; bottom: -6px;
  left: -4px; right: -4px;
}

.t4fx-crumb li + li::before {
  content: ""; flex: 0 0 auto; width: 32px; height: 14px;
  background: no-repeat center/6px 10px
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='10' viewBox='0 0 6 10'%3E%3Cpath d='M1 1l4 4-4 4' fill='none' stroke='%23292929' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@media (max-width: 849px) {
  .t4fx-crumb-in { max-width: 352px; padding: 18px 0; }
  /* Figma mobile của TRANG NÀY là 10px (node 1113:23113), không phải 13px —
     13px là số của breadcrumb trang khác, đừng chép sang. */
  .t4fx-crumb ol { font-size: 10px; }
  .t4fx-crumb li + li::before { width: 20px; }
}

/* Breadcrumb: gỡ margin-left 20.8px của <li>, ghim cao 22, màu đúng Figma */
.t4fx-crumb li { margin-left: 0; }
.t4fx-crumb ol { height: 22px; }
.t4fx-crumb a,
.t4fx-crumb [aria-current] { color: rgba(0, 0, 0, .62); }
.t4fx-crumb li:first-child a { color: var(--t4-text); }


/* Breadcrumb nằm NGOÀI mọi [section] nên quy tắc gỡ margin <li> ở 11.14
   (bám '.section-content') không với tới — phải khai riêng. */
.t4 .t4fx-crumb li { margin-left: 0; list-style: none; }


/* ════════════════════════════════════════════════════════════════════════
   DỜI TỪ '40-page-xu-ly-loi-sai-google-ads.css' (20/08/2026)

   255 luật. Chúng nằm trong một mô-đun mang tên trang #4 nhưng KHỚP Ở NHIỀU
   TRANG KHÁC — đo bằng CSSOM trên 8 trang, kết quả ở 'qa/_luat-40-an-toan.json'.

   ⛔ THỨ TỰ TRONG KHỐI NÀY LÀ THỨ TỰ NGUỒN CỦA MÔ-ĐUN 40, ĐỬhNG SẮP LẠI.
   Nhiều bộ chọn được khai HAI–BA LẦN ('.t4fx-tabs', '.t4 .section-content >
   .row', '#casestudy .t4fx-head-2col > .col:first-child') và lần sau đè lần
   trước — đảo là đổi kết xuất mà không có gì báo.

   ⚠ Chú thích đi kèm được MANG THEO. Nếu một chú thích còn giải thích cả luật
   ở lại bên 40 thì nó xuất hiện ở CẢ HAI nơi — cố ý, thà lặp còn hơn mất.
   ════════════════════════════════════════════════════════════════════════ */

/* ==========================================================================
   40-page-xu-ly-loi-sai-google-ads.css — tách từ style.css ngày 17/08/2026 theo III.4.1.
   Nội dung bên dưới là NGUYÊN VĂN các mục §11 trang #4 của bản gộp;
   không sửa một luật nào trong lần tách này.
   ========================================================================== *//* ── §11 trang #4 (dòng 1459–2597 của style.css cũ) ──────────────────── *//* ==========================================================================
   11. GIAI ĐOẠN D — TRANG "XỬ LÝ LỖI & VI PHẠM GOOGLE"

   ⛔ FOOTER CŨNG LÀ [section]/[row]/[col] — phải loại nó ra khỏi các quy tắc
   khung chung bên dưới, và loại bằng ':where(:not(.t4fx-footer))' chứ KHÔNG
   phải ':not(...)' trần.

   Vì sao bắt buộc là ':where()': ':not(.t4fx-footer)' CỘNG thêm độ ưu tiên
   của đối số, đẩy quy tắc chung từ (0,3,0) lên (0,4,0) — thế là nó quay ra
   thắng hàng loạt quy tắc riêng của từng khối, và trang nội dung từ 0 mốc
   lệch vọt lên 134. ':where()' có độ ưu tiên BẰNG KHÔNG nên lọc được footer
   mà giữ nguyên y hệt trật tự cascade cũ. Đã thử cả hai, số liệu ở bàn giao.

   Footer của demo1
   cũng là một UX Block gồm [section]/[row]/[col],
nên '.t4 .section-content
   > .row { max-width: 1110px }' viết cho trang nội dung sẽ kéo luôn footer
   sang 1110 và '.col { padding-bottom: 0 }' cắt mất 60px chiều cao của nó.
   Đã trả giá: footer đang 543/543 tụt xuống 508/543 mà trang nội dung vẫn
   báo 0 lệch — chỉ bộ gác cổng chạy CẢ header lẫn footer mới bắt được.
   Figma 711:16106 (desktop 1900) · 1113:8613 (mobile 402). Thêm 16/08/2026.

   Mọi con số dưới đây LẤY TỪ figma-spec/trang4.json, không ước lượng theo
   ảnh chụp. Kiểm lại bằng:
       python3 tools/dump-figma-spec.py trang4
       node scripts/do-thuc-te.js scripts/map-trang4.json qa/_do-trang4.json
       python3 tools/diff-giao-dien.py trang4
   ========================================================================== *//* --------------------------------------------------------------------------
   11.0 KHUNG TRANG NỘI DUNG — áp cho MỌI trang của Giai đoạn D

   ⛔ Flatsome bọc nội dung trang trong '.row-main' (max-width 1050px), nên
   [section] chỉ rộng 1050 và mọi nền section — ảnh hero, dải kem quy trình,
   nền kem CTA — bị cắt cụt thay vì tràn hết bề ngang như Figma. Gỡ bó ở đây
   MỘT LẦN cho cả 25 trang.

   Sau khi gỡ: .section rộng hết khung nhìn, còn bề rộng nội dung do .row
   quyết định. Figma dùng khung 1080; .row thường có đệm cột 15px mỗi bên nên
   max-width phải là 1110 để LÒNG cột đúng 1080. .row-collapse bỏ đệm cột nên
   dùng thẳng 1080.

   [figma] Container 1080 '532:4123' — xem "GIA ĐÌNH SỐ KHUNG" đầu tệp.
   -------------------------------------------------------------------------- *//* ⬆ Hai luật '#content.page-wrapper > .row-main' đã DỜI sang '10-base.css'
   (20/08/2026): chúng gỡ khung mặc định của Flatsome cho MỌI trang, không
   riêng trang #4. Chú thích gốc ở ngay trên vẫn giữ vì nó giải thích cả các
   luật '.t4 .section:where(...)' phía dưới — phần đó KHÔNG dời. */
.t4 .section:where(:not(.t4fx-footer)) .section-content > .row {
  max-width: 1110px;
  margin-left: auto;
  margin-right: auto;
}
.t4 .section:where(:not(.t4fx-footer)) .section-content > .row.row-collapse { max-width: 1080px; }

/* Cột Flatsome mang sẵn 'padding: 0 15px 30px' — 30px đáy đó là khoảng cách
   không có trong Figma, cộng dồn qua 22 hàng thì lệch cả trăm px. */
.t4 .section:where(:not(.t4fx-footer)) .section-content .col { padding-bottom: 0; }

/* [ux_text] render thành .text; bỏ khoảng cách mặc định, từng khối tự khai. */
.t4 .section:where(:not(.t4fx-footer)) .section-content .text { margin: 0; }

/* [ux_image] render .img > .img-inner > img */
.t4 .section:where(:not(.t4fx-footer)) .section-content .img img { display: block; width: 100%; height: auto; }

/* ⛔ ẨN/HIỆN THEO BREAKPOINT KHI GHÉP VÀO .row — đã trả giá 16/08/2026.
   Mục 9 khai '.t4-only-desktop { display: block }'. Đặt lớp đó lên một .row
   là ép .row từ FLEX xuống BLOCK ⇒ các cột thôi nằm ngang, xếp dọc hết, và
   section cao gấp đôi. Bản demo đã dính đúng bẫy này một lần (ghi ở mục 17
   style.css của demo) nhưng ở đó chỉ hỏng chiều ẩn; bên Flatsome hỏng cả
   chiều hiện. Vì vậy phải khai LẠI display cho đúng loại phần tử.
   -------------------------------------------------------------------------- */
.t4 .section-content > .row.t4-only-desktop { display: flex; }
.t4 .section-content > .row.t4-only-mobile { display: none; }

@media (max-width: 849px) {
  .t4 .section-content > .row.t4-only-desktop { display: none; }
  .t4 .section-content > .row.t4-only-mobile { display: flex; }

}

/* --------------------------------------------------------------------------
   11.2 HERO (Figma 711:16145 · mobile 1113:8634)
   Cao 480 desktop / 650 mobile, ảnh nền phủ đen 25%.
   Khối chữ desktop: eyebrow y=146, H1 y=179, hàng nút y=279 (cao 56).
   -------------------------------------------------------------------------- */
.t4fx-hero .section-content { width: 100%; }
.t4fx-hero .t4fx-hero-eyebrow p {
  font-family: var(--t4-font-body);
  font-size: 24px; line-height: 32.784px; font-weight: 500;
  color: var(--t4-light); text-transform: none; margin: 0;
}
.t4 .t4fx-hero h1 {
  font-family: var(--t4-font-head);
  font-size: 40px; line-height: 53px; font-weight: 600;
  color: var(--t4-light); margin: 0;
}

/* Hai nút: Figma 185×56 và 265×56, bo 5, viền 2px.
   ⚠ Nút camel khai viền #000000 nhưng ĐỘ MỜ 0 — tức KHÔNG có viền. Dựng viền
   đen theo mã màu là vẽ ra một đường kẻ Figma không hề hiển thị. *//* ⛔ 'display: flex' ở đây và '.t4-only-mobile { display: none }' của
   30-components CÙNG độ cụ thể (0,1,0), mà 30 nạp TRƯỚC 40 ⇒ luật này thắng
   và ô dành cho điện thoại vẫn hiện trên desktop. Phải khai riêng cho từng
   ô, không khai chung cho lớp '.t4fx-hero-nut'. *//* ⛔ Giữ 'display: flex' MẶC ĐỊNH: ba trang GGM dùng cùng lớp này nhưng
   KHÔNG tách theo khổ, bỏ flex đi là nút của chúng xếp sai ngay. Chỉ hai ô
   mang 't4-only-*' mới cần ẩn/hiện. */
.t4fx-hero-nut { margin-top: 47px; display: flex; justify-content: center; gap: 16px; }
.t4fx-hero-nut.t4-only-mobile { display: none; }

@media (max-width: 849px) {
  .t4fx-hero-nut.t4-only-desktop { display: none; }
  .t4fx-hero-nut.t4-only-mobile { display: flex; }

/* [figma] luật dùng chung — lớp rộng 185px có ở 4 trang; đại diện: trang4:'711:16160' · trang5:'712:20837' · trang6:'715:23139' · trang7:'715:24012'
   (tệp này phục vụ nhiều trang nên không có MỘT node duy nhất) */
}
.t4 .t4fx-nut {
  display: inline-flex; align-items: center; justify-content: center;
  height: 56px; border-radius: 5px; border: 2px solid transparent;
  font-family: var(--t4-font-body);
  font-size: 18px; line-height: 32px; font-weight: 700;
  text-decoration: none; transition: opacity .2s ease;
}
.t4 .t4fx-nut--trang {
  width: 185px; background: var(--t4-white);
  border-color: var(--t4-nhan-manh-chu); color: var(--t4-nhan-manh-chu);
}
.t4 .t4fx-nut--vien { width: 265px; background: var(--t4-hanh-dong-nen); color: var(--t4-white); }
.t4 .t4fx-nut:hover { opacity: .88; }

@media (max-width: 849px) {
  .t4 .t4fx-hero h1 { font-size: 32px; line-height: 43px; }

/* [figma] trang4 · section hero_mb — 2 lớp rộng 271px: '1113:8650' · '1113:8652'
   (nhiều lớp cùng khổ nên KHÔNG ghim một node; mở spec trang 4 để chọn) */
/* Figma mobile: hai nút 271×44 xếp DỌC cách nhau 16px, bắt đầu y=458 trong
     section cao 650 (H1 kết thúc y=201). */
  .t4fx-hero-nut { flex-direction: column; align-items: center; gap: 16px; margin-top: 257px; }
  .t4 .t4fx-nut { width: 271px; height: 44px; font-size: 14px; line-height: 32px; }

}

/* --------------------------------------------------------------------------
   11.3 NHÃN SECTION — dùng lại mô-típ .t4-label (mục 3), chỉ chỉnh khoảng cách
   -------------------------------------------------------------------------- */
.t4fx-nhan { margin-bottom: 0; }
.t4fx-nhan > span,
.t4fx-nhan > p { line-height: 19.124px; }
.t4 .t4fx-h2-moss { color: var(--t4-dark-moss); }

/* --------------------------------------------------------------------------
   11.4 HAI CỘT CHỮ | MINH HOẠ

   Bề rộng cột ghim thẳng theo Figma chứ KHÔNG dùng tỉ lệ 5/12–7/12: 5/12 của
   1080 ra 450, Figma cần 528. Cột Flatsome có đệm 15px mỗi bên nên bề rộng
   cột = bề rộng nội dung + 30; 'space-between' lo phần khe còn lại.
   -------------------------------------------------------------------------- */
.t4fx-split { justify-content: space-between; }

/* Mô tả dịch vụ: chữ 528 | minh hoạ 506, khe 46 (Figma 715:25409) */
#mo-ta-dich-vu .t4fx-split > .col:first-child { flex: 0 0 558px; max-width: 558px; }
#mo-ta-dich-vu .t4fx-split > .col:last-child { flex: 0 0 536px; max-width: 536px; }

/* Quy trình: chữ 495 | minh hoạ 506 (Figma 711:16416) */
.t4fx-qt-dai .t4fx-split > .col:first-child { flex: 0 0 525px; max-width: 525px; }
.t4fx-qt-dai .t4fx-split > .col:last-child { flex: 0 0 536px; max-width: 536px; }

/* Lý do: minh hoạ 506 BÊN TRÁI | chữ 520 (Figma 711:16429) — khác trang #3,
   ở đó minh hoạ luôn bên phải. */
#ly-do .t4fx-split > .col:first-child { flex: 0 0 536px; max-width: 536px; }
#ly-do .t4fx-split > .col:last-child { flex: 0 0 550px; max-width: 550px; }

/* --------------------------------------------------------------------------
   11.5 MÔ TẢ DỊCH VỤ (Figma 715:25409 · mobile 1113:8655)
   Thân bài giãn dòng 30 — KHÁC 26 của phần còn lại site.
   -------------------------------------------------------------------------- */
#mo-ta-dich-vu .t4fx-split { margin-top: 80px; }
#mo-ta-dich-vu .t4fx-split .text + .text { margin-top: 24px; }
#mo-ta-dich-vu .t4fx-chu p { font-size: 16px; line-height: 30px; margin: 0 0 24px; }
#mo-ta-dich-vu .t4fx-chu p:last-child { margin-bottom: 0; }

/* Đoạn kết: Figma tô đậm + xanh đậm (ghi đè ký tự trên node 715:25541) */
#mo-ta-dich-vu .t4fx-chu p.t4fx-nhan-manh { font-weight: 700; color: var(--t4-dark-moss); }

@media (max-width: 849px) {

/* Bản mobile là NỘI DUNG KHÁC: ảnh 270×200 canh giữa, rồi H2, rồi 4 đoạn */
  #mo-ta-dich-vu .t4-only-mobile { margin-top: 80px; }
  .t4fx-mota-anh-mb { margin: 0 auto; width: 270px; }
  .t4 .t4fx-mota-mb-h2 { margin: 24px 0 0; }
  #mo-ta-dich-vu .t4-only-mobile .text + .text { margin-top: 24px; }

}

/* --------------------------------------------------------------------------
   11.6 ĐẦU SECTION HAI CỘT (tiêu đề trái | mô tả phải)
   Gói dịch vụ: 397 | 511. Casestudy: 316 | 511.
   [figma] Heading 2 397 '277:2541' · Container 511 '772:7343' ·
           Heading 2 316 '532:4680' ("Remarkable res…")
   ⚠ 427 = 397+30 và 541 = 511+30 — đệm cột, không phải số Figma.
   -------------------------------------------------------------------------- */
.t4fx-head-2col { margin-top: 32px; justify-content: space-between; }
.t4fx-head-2col .t4fx-chu p { margin: 0; }
#goi-dich-vu .t4fx-head-2col > .col:first-child { flex: 0 0 427px; max-width: 427px; }
#goi-dich-vu .t4fx-head-2col > .col:last-child { flex: 0 0 541px; max-width: 541px; }
#casestudy .t4fx-head-2col > .col:first-child { flex: 0 0 346px; max-width: 346px; }
#casestudy .t4fx-head-2col > .col:last-child { flex: 0 0 541px; max-width: 541px; }
.t4fx-goi .col-inner {
  height: 100%; background: var(--t4-white); padding-bottom: 26px;
  border: 1px solid rgba(0, 0, 0, .11); border-radius: 16px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}

/* ⛔ Ảnh KHÔNG nằm trong dải cao cố định, và tiêu đề KHÔNG bám ngay dưới ảnh.
   Đọc lại Figma từng thẻ mới ra cơ chế thật:

     ảnh   — mép trên đúng bằng padding của thẻ, cao TỰ NHIÊN (mỗi thẻ khác)
     nút   — neo đáy thẻ
     tiêu đề — CĂN GIỮA khoảng trống còn lại giữa ảnh và nút

   Kiểm chứng trên thẻ 2·3·4 ở cả hai khổ, khớp tuyệt đối:
     desktop  ảnh đáy 193/189/191 → tiêu đề 234/232/233 (giữa của 193..331)
     mobile   ảnh đáy 144/140/142 → tiêu đề 182/180/181 (giữa của 144..268)

   Bản trước dùng dải ảnh cao 158px và 'margin-top: 19px' cho tiêu đề, nên
   tiêu đề bám đỉnh thay vì căn giữa — sai 6px ở desktop và 12px ở mobile.
   Thẻ 1 vẫn lệch ~8px vì Figma đặt tay lệch riêng thẻ đó (xem qa/…). */
.t4fx-goi-hinh { display: flex; align-items: center; justify-content: center; width: 100%; }
.t4fx-goi-hinh img { max-width: 100%; }

/* ⚠ 'margin: auto' phải đặt trên PHẦN TỬ CON CỦA FLEX, không phải trên thẻ
   chữ bên trong. UX Builder bọc [ux_text] trong một <div class="text">, nên
   con của .col-inner là div đó chứ không phải <h3>. Đặt nhầm chỗ thì margin
   auto không phân phối gì cả — đã dính, thẻ 2·3·4 lệch lên 29px. */
.t4 #goi-dich-vu .t4fx-goi .col-inner > .text { margin: auto 0 !important; }

/* Rule cũ ở mục 12 cộng thêm 11px trên tiêu đề; giữ lại thì khối chữ cao 67px
   thay vì 56px và phép căn giữa lệch đi đúng 11px. Gỡ trong phạm vi thẻ gói. */
.t4 #goi-dich-vu .t4fx-goi-ten { margin-top: 0 !important; }

/* ⚠ THẺ 1 KHÔNG theo quy tắc căn giữa — Figma đặt tay lệch riêng thẻ này.
   Ba thẻ kia: tiêu đề đúng giữa khoảng ảnh↔nút (đã khớp 0,0px ở desktop).
   Thẻ 1 thì Figma đặt tiêu đề CAO HƠN tâm 8px (desktop) và 12px (mobile).
   Vì mục tiêu là giống Figma 100% nên ép đúng số của Figma, không "sửa lại
   cho hợp quy tắc". Ai đọc sau đừng gộp bốn thẻ về một công thức.

   desktop: khoảng trống 325−(158+84+44)=39 → trên 11,5 / dưới 27,5
   mobile : khoảng trống 265−(120+72+36)=37 → trên  6,5 / dưới 30,5 *//* Lề DƯỚI để 'auto' chứ không phải số cố định: có vậy nút mới neo đáy thẻ
   như ba thẻ kia, còn tiêu đề vẫn giữ đúng khoảng cách Figma tính từ ảnh. */
.t4 #goi-dich-vu .t4fx-goi-row > .col.t4fx-goi:nth-child(1) .col-inner > .text {
  margin: 10.5px 0 auto !important;
}

@media (max-width: 849px) {
  .t4 #goi-dich-vu .t4fx-goi-row > .col.t4fx-goi:nth-child(1) .col-inner > .text {
    margin: 5.5px 0 auto !important;
  }

}
.t4 .t4fx-goi-ten {
  font-family: var(--t4-font-body); font-weight: 600;
  font-size: 22px; line-height: 28px; color: var(--t4-text); margin: 0;
}
.t4fx-goi .button.t4fx-nut-xanh { margin: 0; width: 100%; }

/* Nút xanh lá đặc — Figma 226×44, bo 5, nền #458763, chữ Manrope 16/24 w600 */
.t4 .button.t4fx-nut-xanh {
  min-height: 44px; border-radius: 5px; box-shadow: none;
  background-color: var(--t4-mang-la-nen); border-color: var(--t4-mang-la-nen);
  color: var(--t4-white);
  font-family: var(--t4-font-body); font-weight: 600;
  font-size: 16px; line-height: 24px; text-transform: none; letter-spacing: 0;
}
.t4 .button.t4fx-nut-xanh:hover,
.t4 .button.t4fx-nut-xanh:focus {
  background-color: var(--t4-dark-moss); border-color: var(--t4-dark-moss);
  color: var(--t4-white);
}
.t4 .button.t4fx-nut-xanh span { line-height: 24px; }

@media (max-width: 849px) {
  .t4fx-goi-row::-webkit-scrollbar { display: none; }
  .t4fx-goi-row > .col.t4fx-goi {
    flex: 0 0 258px !important; max-width: 258px; width: 258px;
    scroll-snap-align: start; padding-left: 0; padding-right: 16px;
  }
  .t4 .t4fx-goi-ten { font-size: 18px; line-height: 24px; }
  .t4 .button.t4fx-nut-xanh { font-size: 14px; }

}
.t4fx-qt-kicker p {
  font-family: var(--t4-font-body); font-weight: 700;
  font-size: 25px; line-height: 34.15px; color: #213343; margin: 0;
}
.t4fx-qt-dai .t4fx-split { margin-top: 39px; }
.t4fx-qt-dai .t4fx-split .text + .text { margin-top: 16px; }
.t4fx-qt-dai .t4fx-chu p { color: #213343; margin: 0; }

/* Nửa dưới: hai thẻ giai đoạn 518×355 bo 10 + hộp lưu ý 1060×185 bo 10
   [figma] thẻ 518×355 '712:20335' + '712:20336', cùng nằm trong khung
   1060×564 '712:20375'. Cộng dồn: 518×2 + khe 24 = 1060 ✓
   1090 dưới đây = 1060 + 30 đệm cột (GIA ĐÌNH SỐ KHUNG đầu tệp).       */
.t4fx-qt-duoi .section-content > .row { max-width: 1090px; }

/* 1060+30 — Container '532:4139', xem GIA ĐÌNH SỐ KHUNG đầu tệp *//* ⛔ 60px, KHÔNG phải 100. Figma trang #4: khối giai đoạn kết thúc
   y=1100, khung 1160 ⇒ đáy đúng 60. Con số 100 cũ làm khối Quy trình
   thừa 41px — bảng dày không thấy vì dưới thẻ cuối không còn mốc nào
   (đúng lỗ hổng II.K-1). Nhóm GGM đã tự khai 60 ở 44-nhom-ggm. */
.t4fx-qt-duoi { padding-bottom: 60px !important; }
.t4fx-qt-duoi .t4fx-gd-luoi { margin-top: 48px; justify-content: space-between; }
.t4fx-qt-duoi .t4fx-gd-luoi > .col { flex: 0 0 548px; max-width: 548px; }
.t4fx-gd,
.t4fx-luu-y {
  border: 1px solid rgba(0, 0, 0, .11); border-radius: 10px; padding: 24px 28px;
}
.t4 .t4fx-gd h3 {
  font-family: var(--t4-font-body); font-weight: 700;
  font-size: 16px; line-height: 26px; color: var(--t4-dark-moss); margin: 0;
}
.t4fx-gd p,
.t4fx-luu-y p { font-size: 14px; line-height: 22px; color: #000; margin: 0; }

@media (max-width: 849px) {
  .t4fx-qt-dai .t4fx-split { margin-top: 0; }

}

/* --------------------------------------------------------------------------
   11.9 LÝ DO ĐỒNG HÀNH (Figma 711:16429 · mobile 1113:9461)
   Danh sách 11 mục xếp 2 cột 498, khe 48, dòng cách 16. Kẻ ngang ở y=572.
   -------------------------------------------------------------------------- */
#ly-do .t4fx-split { margin-top: 80px; padding-bottom: 32px; }
#ly-do .t4fx-split .text + .text { margin-top: 24px; }
#ly-do .t4fx-chu p { margin: 0; }
#ly-do .t4fx-split + .row { border-top: 1px solid rgba(0, 0, 0, .11); }

@media (max-width: 849px) {
  #ly-do .t4fx-split { margin-top: 85px; padding-bottom: 0; }
  #ly-do .t4fx-split + .row { border-top: 0; }

}

/* --------------------------------------------------------------------------
   11.10 CASESTUDY (Figma 712:20493 · mobile 1113:9698)

   ⚠ QUYẾT ĐỊNH (luật 0 — ghi ở qa/danh-sach-danh-doi.md): ruột bảng tab
   trong Figma là NỘI DUNG MẪU CỦA HUBSPOT — tiếng Anh, tên "Adam Jones",
   ảnh Unipart-1.png, số liệu "12 months / 5 point increase". Dựng nguyên văn
   là đưa lời chứng thực GIẢ bằng tiếng Anh lên site khách Việt. Nên dựng
   ĐÚNG KHUNG (thanh tab 54px, bảng trắng 1080×492 bo 10 viền 1px .11) và GIỮ
   chữ giữ chỗ tiếng Việt của 4T — y như đã quyết cho widget chat ở phiên 8.
   -------------------------------------------------------------------------- */
.t4fx-nhan-hang a.button.t4fx-xem-tat-ca,
.t4fx-nhan-hang .t4fx-xem-tat-ca {
  display: inline-flex; align-items: center; justify-content: center;
  height: 35px; padding: 0 30px; border-radius: 5px;
  border: 1px solid var(--t4-dark-moss);
  font-family: var(--t4-font-body); font-weight: 700;
  font-size: 14px; line-height: 19.124px;
  color: var(--t4-dark-moss); text-decoration: none;
}
.t4fx-nhan-hang a.button.t4fx-xem-tat-ca:hover,
.t4fx-nhan-hang .t4fx-xem-tat-ca:hover { background: var(--t4-dark-moss); color: var(--t4-white); }
.t4fx-nhan-hang > .col:last-child .col-inner { text-align: right; }

/* Thanh tab: 4 tab liền nhau canh giữa, gạch dưới 4px camel cho tab đang mở */
.t4fx-tabs { margin-top: 32px; border-top: 1px solid rgba(0, 0, 0, .11); padding-top: 32px; }
.t4 .t4fx-tabs .nav-line { justify-content: center; margin: 0; border: 0; }
.t4 .t4fx-tabs .nav-line > li { margin: 0; }
.t4 .t4fx-tabs .nav-line > li > a {
  height: 54px; padding: 12px 16px; margin: 0;
  border: 0; border-bottom: 4px solid transparent;
  font-family: var(--t4-font-body); font-weight: 500;
  font-size: 16px; line-height: 30px; text-transform: none;
  letter-spacing: 0; color: var(--t4-text); opacity: 1;
}
.t4 .t4fx-tabs .nav-line > li.active > a {
  color: var(--t4-dark-moss); border-bottom-color: var(--t4-nhan-manh-chu);
}
.t4 .t4fx-tabs .nav-line > li > a::before { display: none; }

/* ⚠ Không có quy tắc ẩn bảng chưa mở thì CẢ BỐN bảng cùng hiện và section
   cao gấp gần ba lần Figma. Đừng bỏ hai dòng dưới. */
.t4 .t4fx-tabs .tab-panels > .panel { display: none; }
.t4 .t4fx-tabs .tab-panels > .panel.active { display: block; }
.t4 .t4fx-tabs .tab-panels {
  background: var(--t4-white);
  border: 1px solid rgba(0, 0, 0, .11); border-radius: 10px;
  min-height: 492px; margin-top: 24px; padding: 32px;
}
.t4fx-case-cho h3 { margin: 0 0 8px; }
.t4fx-case-cho p { color: var(--t4-muted); margin: 0; }

/* [phục vụ] khối casestudy placeholder SAU khi tách làm hai ô văn bản (T0).
   ⛔ Khe 8px trước đây do 'h3 { margin-bottom: 8px }' giữ. Tách ra thì '<h3>'
   thành con CUỐI của ô và Flatsome triệt lề dưới của con cuối trong '.text' —
   đo được khe tụt 8 → 0, panel 66 → 58. Phải trả lại bằng lề TRÊN của ô mô tả.
   Chỉ trang đã tách mới có hai lớp này nên ba trang còn lại không đổi gì. *//* ⛔ Phải đủ (0,5,0): nền '.t4 .section:where(:not(.t4fx-footer))
   .section-content .text { margin: 0 }' là (0,4,0) — ':where()' đếm 0 nhưng
   bốn lớp kia thì không. Bản đầu viết '.t4 .t4fx-cc-mo' (0,2,0) và **không
   đổi một pixel nào**, y như chưa đẩy CSS. */
.t4 .section .section-content .text.t4fx-cc-mo { margin-top: 8px; }

@media (max-width: 849px) {
  .t4fx-tabs { margin-top: 32px; padding-top: 24px; }
  .t4 .t4fx-tabs .nav-line { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; }
  .t4 .t4fx-tabs .nav-line > li > a { font-size: 14px; padding: 12px; white-space: nowrap; }
  .t4 .t4fx-tabs .tab-panels { min-height: 456px; padding: 20px; }

}
.t4fx-cta-the .col-inner { border-radius: 10px; }
.t4fx-cta-the .text + .text { margin-top: 17px; }
.t4fx-cta-the .t4fx-chu p { margin: 0; }
.t4fx-cta-the .button.t4fx-nut-xanh {
  margin: 41px 0 0; float: right; min-height: 46px; padding: 0 40px;
}
.t4fx-cta-the .button.t4fx-nut-xanh span { font-size: 16px; line-height: 21.856px; font-weight: 700; }
.t4fx-cta-the .col-inner::after { content: ""; display: table; clear: both; }

/* [figma] luật dùng chung — lớp rộng 224px có ở 2 trang; đại diện: trang3:'268:4578' · trang4:'1113:9760'
   (tệp này phục vụ nhiều trang nên không có MỘT node duy nhất) */
@media (max-width: 849px) {
  .t4fx-cta-the .button.t4fx-nut-xanh {
    float: none; display: block; margin-top: 53px; width: 224px; margin-left: auto; margin-right: auto;
  }
  .t4fx-cta-the .button.t4fx-nut-xanh span { font-size: 14px; line-height: 19.124px; }

}

/* --------------------------------------------------------------------------
   11.12 VÁ SAU VÒNG ĐO THỨ NHẤT (16/08/2026) — 229 mốc lệch → xem
   qa/trang4-diff.md. Bốn nhóm nguyên nhân, ghi lại để đừng lặp:

   (a) ĐỆM CỘT 15px CỦA FLATSOME cộng vào mọi bề rộng ghim theo Figma. Khối
       nào cần bám đúng số đo Figma thì cho cột 'padding-left/right: 0' rồi
       ghim bề rộng bằng ĐÚNG số của Figma — đừng cộng trừ 30 cho mỗi khối.
   (b) '.t4 .section-content .text { margin: 0 }' ở 11.0 có độ ưu tiên (0,
3,
0),
ĂN ĐỨT mọi '.t4fx-* { margin-top }' một-class. Đúng bẫy "độ ưu tiên CSS"
       đã ghi ba lần ở CLAUDE.md — lần này nạn nhân là khoảng cách hero.
   (c) '<li>' của Flatsome có sẵn 'margin-left: 20.8px' (bẫy 5 của
       QUY-TRINH-GIONG-FIGMA). Danh sách nào tự vẽ chấm đầu dòng đều phải gỡ.
   (d) [tabgroup] KHÔNG nằm trong [row] nên nó rộng hết section, không phải
       1080 — phải tự ghim khung.
   -------------------------------------------------------------------------- *//* (b) khoảng cách hero — nâng đủ độ ưu tiên để thắng quy tắc gộp ở 11.0 */
.t4 .section-content .text.t4fx-hero-nut { margin-top: 47px; }

@media (max-width: 849px) {
  .t4 .section-content .text.t4fx-hero-nut { margin-top: 257px; }

}

/* Chip nhãn nằm giữa ô cao 45 (Figma: chip 29 trong Container 45) */
.t4fx-nhan { height: 45px; }

/* Tiêu đề H2 Playfair 40px của Figma có giãn chữ -1,2px */
.t4 .section-content h2 { letter-spacing: -1.2px; }
.t4 .section-content .t4fx-goi-ten,
.t4 .section-content h3,
.t4 .section-content h4 { letter-spacing: 0; }

/* Giãn dòng/màu phải đặt trên CHÍNH khối .text — bộ đo lấy computed style của
   phần tử được ánh xạ, không phải của <p> con. */
#mo-ta-dich-vu .t4fx-chu,
#mo-ta-dich-vu .t4fx-chu p { line-height: 30px; }
#quy-trinh .t4fx-chu,
#quy-trinh .t4fx-chu p { color: #213343; }
.t4fx-goi-row > .col.t4fx-goi {
  flex: 0 0 258px; max-width: 258px; padding-left: 0; padding-right: 0;
}
.t4fx-goi .col-inner { min-height: 400px; }

/* (a) ĐẦU SECTION HAI CỘT — Figma: gói 397|511, casestudy 316|511
   [figma] khung 1080 '532:4123' · Heading 2 397 '277:2541' ·
   Container 511 '772:7343' · Heading 2 316 '532:4680'               */
.t4fx-head-2col { max-width: 1080px; justify-content: space-between; }
.t4fx-head-2col > .col { padding-left: 0; padding-right: 0; }
#goi-dich-vu .t4fx-head-2col > .col:first-child { flex: 0 0 397px; max-width: 397px; }
#goi-dich-vu .t4fx-head-2col > .col:last-child { flex: 0 0 511px; max-width: 511px; }
#casestudy .t4fx-head-2col > .col:first-child { flex: 0 0 316px; max-width: 316px; }
#casestudy .t4fx-head-2col > .col:last-child { flex: 0 0 511px; max-width: 511px; }

/* (a) HAI CỘT CHỮ | MINH HOẠ — ghim đúng số Figma, cột hết đệm
   [figma] cột 528 '803:35058' (528×80, trong Frame 150) · khung nhóm
   quy trình 1056×355 '712:19369'. Cộng dồn: 528×2 + khe 24 = 1080 ✓  */
.t4fx-split { max-width: 1080px; }
.t4fx-split > .col { padding-left: 0; padding-right: 0; }
#mo-ta-dich-vu .t4fx-split > .col:first-child { flex: 0 0 528px; max-width: 528px; }
#mo-ta-dich-vu .t4fx-split > .col:last-child { flex: 0 0 506px; max-width: 506px; }
.t4fx-qt-dai .t4fx-split { max-width: 1056px; }
.t4fx-qt-dai .t4fx-split > .col:first-child { flex: 0 0 495px; max-width: 495px; }
.t4fx-qt-dai .t4fx-split > .col:last-child { flex: 0 0 506px; max-width: 506px; }
#ly-do .t4fx-split > .col:first-child { flex: 0 0 506px; max-width: 506px; }
#ly-do .t4fx-split > .col:last-child { flex: 0 0 520px; max-width: 520px; }
.t4fx-qt-dai .section-content > .row > .col { padding-left: 0; padding-right: 0; }

/* (a) HAI THẺ GIAI ĐOẠN — 518px, khe 24, khung 1060
   [figma] '712:20335' · '712:20336' (518×355) trong '712:20375' (1060) */
.t4fx-qt-duoi .section-content > .row { max-width: 1060px; }
.t4fx-qt-duoi .section-content > .row > .col { padding-left: 0; padding-right: 0; }
.t4fx-qt-duoi .t4fx-gd-luoi > .col { flex: 0 0 518px; max-width: 518px; }
.t4fx-gd { min-height: 355px; }

/* (d) [tabgroup] nằm ngoài [row] nên rộng hết section — tự ghim khung 1080
   [figma] Container 1080 '532:4123'. Không cộng 30: '.t4fx-tabs' không
   phải '.col' nên không có đệm ngang.                                */
.t4fx-tabs { max-width: 1080px; margin-left: auto; margin-right: auto; }

/* Figma: tab ĐANG MỞ là tab 3, chữ #155446; ba tab kia #1f1f1f. Bên site tab 1
   mở sẵn — chỉ so KIỂU chữ của tab, không so tab nào đang mở. *//* (a) THẺ CTA — Figma đặt ở x=420 rộng 1079 (lệch phải 9,5px so với tâm) */
.t4fx-cta-hop .section-content > .row > .col { padding-left: 0; padding-right: 0; }

@media (max-width: 849px) {
  .t4fx-gd,
.t4fx-luu-y { min-height: 0; }

}

/* --------------------------------------------------------------------------
   11.13 VÁ SAU VÒNG ĐO THỨ HAI (16/08/2026) — 200 → xem qa/trang4-diff.md

   ⛔ BÀI HỌC LỚN NHẤT CỦA VÒNG NÀY: quy tắc khung ở 11.0 viết là
   '.t4 .section-content > .row' — độ ưu tiên (0,
3,
0). Mọi '.t4fx-* { max-width }'
   một-class (0,1,0) đặt sau nó đều THUA và im lặng không có tác dụng, nên
   hàng loạt khối vẫn rộng 1110 thay vì 1080 và lệch đúng 15px. Đây là lần
   thứ TƯ dự án dính bẫy độ ưu tiên CSS (CLAUDE.md bài học 19). Muốn ghi đè
   khung thì PHẢI viết đủ '.t4 .section-content > .row.<lớp>'.
   -------------------------------------------------------------------------- *//* Khung 1080 cho các hàng ghim theo Figma — đủ độ ưu tiên để thắng 11.0 */
.t4 .section-content > .row.t4fx-split,
.t4 .section-content > .row.t4fx-head-2col,
.t4 .section-content > .row.t4fx-goi-row,
.t4 .section-content > .row.t4fx-gd-luoi { max-width: 1080px; }
.t4 .section-content > .row.t4fx-nhan-hang { max-width: 1080px; }
.t4fx-qt-dai .section-content > .row.t4fx-split { max-width: 1056px; }
.t4 .t4fx-qt-duoi .section-content > .row.t4fx-gd-luoi { max-width: 1060px; }
.t4 .t4fx-qt-duoi .section-content > .row { max-width: 1060px; }
.t4 .t4fx-cta-hop .section-content > .row { max-width: 1079px; margin-left: 420px; }

/* Khối nhãn cao 61 (Figma: chip 29, cách mép trên 8, cách khối sau 24) */
.t4 .section-content .text.t4fx-nhan {
  height: 29px; margin-top: 8px; margin-bottom: 24px;
}

/* Hai thẻ giai đoạn + hộp lưu ý: Figma KHÔNG có nền, KHÔNG có viền — chỉ là
   khung bố cục bo 10. Vẽ viền vào là thêm một đường kẻ thiết kế không có. */
.t4fx-gd,
.t4fx-luu-y { border: 0; }

@media (max-width: 849px) {
  .t4fx-goi .col-inner {
    border-radius: 10px; min-height: 320px;
    box-shadow: 3px 3px 8px rgba(0, 0, 0, .25);
  }
  .t4fx-goi-row > .col.t4fx-goi { padding-right: 16px; }
  .t4 .button.t4fx-nut-xanh { min-height: 36px; }
  .t4 .section-content > .row.t4fx-goi-row { max-width: none; }

}

/* --------------------------------------------------------------------------
   11.14 VÁ SAU VÒNG ĐO THỨ BA (16/08/2026)

   Ba nhóm còn lại, đều là "ghim số nhưng chưa đủ mạnh":
   (a) 'flex: 0 0 <px>' KHÔNG thắng được 'max-width: %' mà Flatsome đặt cho
       .medium-* / .large-* — phải khai thêm 'width' thì cột mới đúng bề rộng.
   (b) Khoảng cách SAU khối nhãn KHÁC NHAU theo từng section (Figma: 80 ở Mô
       tả/Lý do, 32 ở Quy trình/Casestudy, 16 ở Gói dịch vụ) — không có một
       con số dùng chung.
   (c) 'letter-spacing: -1.2px' CHỈ đúng cho H2 của Mô tả và Lý do; các H2
       khác Figma để 0. Áp cho mọi h2 là sai 6 chỗ.
   -------------------------------------------------------------------------- *//* (c) giãn chữ H2 — chỉ hai section có, phần còn lại về 0 *//* ⛔ LUẬT NÀY ĐANG BỊ TẮT CÓ CHỦ Ý — 17/08/2026. Đừng bỏ dấu chú thích.

   Nó ĐÃ CHẾT SUỐT từ lúc được viết mà không ai biết. Ngay phía trên, dòng
   nói về '.medium-*' và '.large-*' viết hai lớp đó liền nhau bằng một dấu
   gạch chéo, và cặp ký tự đó ĐÓNG SỚM khối chú thích đang mở. Mấy dòng văn
   xuôi tiếp theo thành CSS sống, trình duyệt bỏ qua cho tới khi đồng bộ lại
   được — và luật ngay dưới đây là thứ bị nuốt.

   Đã hỏi thẳng trình duyệt bằng CSSOM chứ không suy đoán: bản gộp CHƯA vá
   chú thích cho 1.276 luật, bản ĐÃ vá cho 1.278. Đúng hai luật sống lại, và
   đây là một trong hai.

   ⚠ Trang #4 được căn chỉnh tới 1816 ✅ / 0 ❌ TRONG LÚC luật này đang chết.
   Bật lên là bản mobile dôi 908px và bảng đo nhảy lên 32 ❌ — các vòng vá
   4→8 về sau đã bù trừ cho đúng chỗ nó bỏ trống. Bước tách mô-đun này vì
   vậy giữ nguyên trạng thái chết (III.7-3: "render không được lệch pixel"),
   chỉ đổi từ CHẾT DO TAI NẠN sang CHẾT CÓ KHAI BÁO.

   → Việc còn nợ: xét lại có thật cần letter-spacing 0 cho mọi h2 không.
     Muốn bật lại thì phải đo lại trang #4 và gỡ phần bù trừ của các vòng sau.

.t4 .section-content h2 { letter-spacing: 0; }
*/
#mo-ta-dich-vu .t4fx-h2-moss,
#ly-do .t4fx-h2-moss { letter-spacing: -1.2px; }

/* (b) khoảng cách sau khối nhãn, theo đúng từng section */
#mo-ta-dich-vu .text.t4fx-nhan,
#ly-do .text.t4fx-nhan { margin-bottom: 24px; }
#goi-dich-vu .text.t4fx-nhan { margin-bottom: 8px; }
#casestudy .text.t4fx-nhan { margin-bottom: 24px; }
#quy-trinh .text.t4fx-nhan { margin-bottom: 24px; }
#goi-dich-vu .t4fx-head-2col { margin-top: 8px; }
#casestudy .t4fx-nhan-hang { margin-bottom: 0; }

/* (a) ghim bề rộng cột bằng cả flex LẪN width */
.t4 .section-content > .row.t4fx-goi-row > .col.t4fx-goi { width: 258px; }
#mo-ta-dich-vu .t4fx-split > .col:first-child { width: 528px; }
#mo-ta-dich-vu .t4fx-split > .col:last-child { width: 506px; }
.t4fx-qt-dai .t4fx-split > .col:first-child { width: 495px; }
.t4fx-qt-dai .t4fx-split > .col:last-child { width: 506px; }
#ly-do .t4fx-split > .col:first-child { width: 506px; }
#ly-do .t4fx-split > .col:last-child { width: 520px; }
#goi-dich-vu .t4fx-head-2col > .col:first-child { width: 397px; }
#goi-dich-vu .t4fx-head-2col > .col:last-child { width: 511px; }
#casestudy .t4fx-head-2col > .col:first-child { width: 316px; }
#casestudy .t4fx-head-2col > .col:last-child { width: 511px; }
.t4fx-qt-duoi .t4fx-gd-luoi > .col { width: 518px; }

/* Thẻ CTA: bỏ đệm cột để thẻ đúng 1079 tại x=420 */
.t4 .t4fx-cta-hop .section-content > .row > .col { padding-left: 0; padding-right: 0; }

@media (max-width: 849px) {
  .t4 .section-content > .row.t4fx-goi-row { width: auto; max-width: none; }

/* Thẻ gói mobile: bo 10, cao 320, khe 16 */
  .t4 .section-content > .row.t4fx-goi-row > .col.t4fx-goi { width: 258px; }
  .t4fx-goi .col-inner { border-radius: 10px; }

/* Dải kem Quy trình mobile bắt đầu ở y=60 chứ không phải 0 */
  .t4fx-qt-dai { margin-top: 60px; }
  #quy-trinh .text.t4fx-nhan { margin-bottom: 24px; }

}

/* --------------------------------------------------------------------------
   11.15 ⛔ BẪY SỐ 4 CỦA QUY-TRINH-GIONG-FIGMA — '.row::after' CLEARFIX

   Flatsome gắn '.row::after { content: "" }' để clear float. Trong một hàng
   'display: flex' cái pseudo đó trở thành PHẦN TỬ FLEX THỨ N+1, nên
   'space-between' chia khoảng cho N+1 phần tử thay vì N.

   Đo được: hàng 4 thẻ gói rộng 1080, thẻ 258 → khe đúng phải là
   (1080−4×258)/3 = 16, nhưng ra 12 = 48/4. Hàng đầu section hai cột lệch
   đúng 86px = 172/2 thay vì 172/1. Không lỗi, không cảnh báo — chỉ sai số.

   Quy trình đã ghi bẫy này từ Giai đoạn C mà vẫn dính lại, vì lần trước nó
   biểu hiện ở 'space-between' của footer, lần này ở hàng thẻ.
   -------------------------------------------------------------------------- */
.t4 .section-content > .row.t4fx-goi-row::after,
.t4 .section-content > .row.t4fx-head-2col::after,
.t4 .section-content > .row.t4fx-split::after,
.t4 .section-content > .row.t4fx-gd-luoi::after,
.t4 .section-content > .row.t4fx-nhan-hang::after { display: none; }

@media (max-width: 849px) {
  .t4 #content .section { padding-left: 0; padding-right: 0; }

}

/* --------------------------------------------------------------------------
   11.17 VÁ VÒNG BỐN — bốn nguyên nhân, đều đo được chứ không đoán

   (a) '.section' của Flatsome có 'padding: 30px' ở MỌI khổ, không riêng
       mobile. Ở desktop nó đẩy '.section-content' sang x=30, nên thẻ CTA
       (căn bằng 'margin-left: 420px') rơi vào 450. Gỡ đệm ngang ở cả hai khổ.
   (b) Chip nhãn của Figma có 'letter-spacing: 0.14px'. Nhỏ tới mức nhìn
       không thấy, nhưng nhân với số ký tự thì chip "Lý do bạn nên đồng hành
       cùng 4T" hụt đúng 4,2px. Bốn chip hụt 1,7 / 3,4 / 4,0 / 4,75 — khớp
       chính xác với độ dài từng chuỗi. Đúng bẫy đã ghi ở mục 7 của
       'docs/BAN-GIAO-PHIEN-MOI.md'.
   (c) '.t4-label > span' bị mục 3 hạ xuống 13px ở mobile; Figma là 14px ở
       CẢ HAI khổ.
   (d) '[col bg_radius=]' sinh CSS theo **ID** ('#col-123 .col-inner') — độ
       ưu tiên (1,1,0), CSS class của ta không tài nào ghi đè. Vì vậy thẻ gói
       vẫn bo 16 ở mobile dù đã khai 10. Đã bỏ tham số đó khỏi shortcode và
       chuyển hẳn sang CSS.
   -------------------------------------------------------------------------- */
.t4 #content .section { padding-left: 0; padding-right: 0; }
.t4 .t4fx-nhan > span,
.t4 .t4fx-nhan > p { letter-spacing: 0.14px; font-size: 14px; }

/* (d) nền/bo/đệm thẻ gói nay do CSS lo hết */
.t4fx-goi .col-inner {
  background: var(--t4-white);
  border: 1px solid rgba(0, 0, 0, .11);
  border-radius: 16px;
  padding: 40px 16px 32px;
  min-height: 400px;
}
.t4fx-cta-the .col-inner {
  background: var(--t4-white); border-radius: 10px; padding: 40px;
}

/* Khoảng cách theo Figma: nhãn → đầu section 16, dải kem → khối chữ 28 */
#goi-dich-vu .text.t4fx-nhan { margin-bottom: 24px; }
#goi-dich-vu .t4fx-head-2col { margin-top: 16px; }
.t4fx-qt-dai .t4fx-split { margin-top: 28px; }

@media (max-width: 849px) {
  .t4fx-goi .col-inner {
    border-radius: 10px; min-height: 320px; padding: 24px 12px 20px;
    box-shadow: 3px 3px 8px rgba(0, 0, 0, .25);
  }
  .t4fx-cta-the .col-inner { padding: 24px 20px; }

/* Băng thẻ trượt ngang: mép trái đúng 25, khe giữa thẻ đúng 16 */
  .t4 .section-content > .row.t4fx-goi-row { padding-left: 25px; }
  .t4 .section-content > .row.t4fx-goi-row > .col.t4fx-goi { padding-right: 16px; }

/* Dải kem "Quy trình" bắt đầu ở y=60 chứ không phải mép trên section */
  .t4fx-qt-dai .section-bg { top: 60px; }

}

/* --------------------------------------------------------------------------
   11.18 VÁ VÒNG NĂM — chốt phần mobile

   ⛔ Bài học chi phối cả mục này: quy tắc mobile viết bằng CLASS
   ('.t4 .section-content > .row.t4fx-head-2col > .col', độ ưu tiên 0,4,0)
   KHÔNG thắng nổi quy tắc desktop viết bằng ID ('#goi-dich-vu .t4fx-head-2col
   > .col:last-child', 1,2,0) — vì @media KHÔNG cộng thêm độ ưu tiên. Muốn gỡ
   bề rộng ghim của desktop ở mobile thì bản mobile cũng phải mang ID.
   -------------------------------------------------------------------------- *//* Casestudy: Figma chừa 150px dưới bảng tab, không phải 100 như section khác */
#casestudy { padding-bottom: 150px; }

/* Nút "Xem tất cả" canh theo MÉP TRÊN khối nhãn, cao hơn chip 3px (Figma
   chip y=108, nút y=105) — để 'v_align middle' tự căn thì nó tụt 8px. */
.t4fx-nhan-hang > .col:last-child { align-self: flex-start; }
.t4fx-nhan-hang > .col:last-child .col-inner { margin-top: 5px; }

@media (max-width: 849px) {
  .t4fx-hero .section-content { padding-top: 82px; }
  .t4 .section-content .text.t4fx-hero-nut { margin-top: 257px; }

/* Ảnh minh hoạ mobile: ghim đúng số Figma, không dùng % */
  .t4fx-mota-anh-mb { width: 270px; margin: 0 auto; }

/* [figma] luật dùng chung — lớp rộng 274px có ở 2 trang; đại diện: trang5:'1211:13046' · trang7:'1113:18046'
   (tệp này phục vụ nhiều trang nên không có MỘT node duy nhất) */
/* Băng thẻ gói: cột 274 (thẻ 258 + khe 16), thẻ đo được đúng 258 */
  .t4 .section-content > .row.t4fx-goi-row > .col.t4fx-goi {
    flex: 0 0 274px; max-width: 274px; width: 274px; padding-right: 16px;
  }

/* Quy trình mobile: Figma chừa 32px giữa khối nhãn và kicker */
  #quy-trinh .text.t4fx-nhan { margin-bottom: 56px; }

/* Thẻ CTA mobile: Figma đệm 40 trên/dưới, 32 hai bên (chữ bắt đầu x=57) */
  .t4fx-cta-the .col-inner { padding: 40px 32px; }
  .t4fx-cta-the .button.t4fx-nut-xanh { margin-top: 65px; }

}

/* --------------------------------------------------------------------------
   11.19 VÁ VÒNG SÁU — ba nguồn ghi đè mà CSS class không với tới

   (a) Flatsome sinh CSS theo **ID** ngay trong trang: '#section_x { padding }'
       từ tham số [section],
'#image_x { width }' từ [ux_image]. Thẻ <style>
       đó nằm SAU tệp style.css nên với cùng độ ưu tiên (1,
0,
0) nó luôn thắng.
       → hoặc đặt giá trị bằng THAM SỐ shortcode (đúng tinh thần UX Builder),
hoặc viết selector mạnh hơn ('.t4 #casestudy' = 1,
1,
0).
   (b) Một '!important' cũ của chính mình ở 11.13 ghim 'flex-basis' thẻ gói,
khiến mọi lần chỉnh sau đó im lặng không có tác dụng.
   (c) '.t4 .section-content .text { margin: 0 }' (0,3,0) ăn mọi margin đặt
       lên khối '.text' — hộp "Lưu ý" mất nguyên 24px cách trên.
   -------------------------------------------------------------------------- *//* (a) giãn chữ H2: nâng một bậc để chắc chắn thắng quy tắc -1,2px ở 11.12 */
.t4 .section-content .text h2 { letter-spacing: 0; }
#mo-ta-dich-vu .text h2,
#ly-do .text h2 { letter-spacing: -1.2px; }

/* (a) Figma chừa 150px dưới bảng tab Casestudy, không phải 100 */
.t4 #casestudy { padding-bottom: 150px; }

/* Ruột thẻ gói theo đúng Figma: ảnh cách mép trên 50, tiêu đề cách ảnh 11,
   nút cách đáy 25 (712:22286 → 712:22289 → 714:23063) */
.t4fx-goi .col-inner { padding: 50px 16px 25px; }
.t4 .t4fx-goi-ten { margin-top: 11px; }

/* Tab đóng: Figma dùng #000000 @62%, không phải màu chữ thân bài */
.t4 .t4fx-tabs .nav-line > li:not(.active) > a { color: rgba(0, 0, 0, .62); }

/* ⚠ Figma trang #4 vẽ BA màu chứ không phải hai: tab đang mở #155446, tab
   ĐẦU TIÊN #1f1f1f (đen đặc), hai tab còn lại đen 62%. Đã soi ảnh Figma xuất
   ra để chắc, không phải đọc nhầm mã màu. Bám Figma. */
#casestudy .t4fx-tabs .nav-line > li:first-child:not(.active) > a { color: var(--t4-text); }

/* Nút CTA desktop: Figma 263×46 */
.t4fx-cta-the .button.t4fx-nut-xanh { padding: 0 39px; }

@media (max-width: 849px) {
  .t4fx-hero .section-content { padding-top: 0; padding-bottom: 6px; }

/* [figma] luật dùng chung — lớp rộng 274px có ở 2 trang; đại diện: trang5:'1211:13046' · trang7:'1113:18046'
   (tệp này phục vụ nhiều trang nên không có MỘT node duy nhất) */
/* (b) gỡ !important cũ: cột 274 = thẻ 258 + khe 16 */
  .t4 .section-content > .row.t4fx-goi-row > .col.t4fx-goi {
    flex: 0 0 274px !important; max-width: 274px !important; width: 274px !important;
    padding-right: 16px;
  }
  .t4 .section-content > .row.t4fx-goi-row > .col.t4fx-goi:first-child { margin-left: 25px; }
  .t4 .section-content > .row.t4fx-goi-row { padding-left: 0; }

/* Thẻ gói mobile: Figma 258×320, ảnh cách mép trên 35 *//* Đáy 17px chứ không phải 20px: Figma đặt nút cách đáy thẻ 16px, đo trên
     bảng thật thì 20px cho ra 19px và nút cao hơn Figma 3px. Con số này đến
     từ ĐO, không từ tính toán padding + viền — hai cái lệch nhau 2px do cách
     Flatsome dựng hộp. */
  .t4fx-goi .col-inner { padding: 35px 16px 15px; }
  .t4fx-cta-the .button.t4fx-nut-xanh { margin-top: 41px; }

}

/* --------------------------------------------------------------------------
   11.20 VÁ VÒNG BẢY — bốn chỗ cuối, đều đo ra con số chứ không ước lượng

   (a) KHOẢNG CÁCH GIỮA ĐOẠN: Figma gộp nhiều đoạn vào MỘT lớp chữ, nên phần
       "cách đoạn" nằm trong thuộc tính paragraphSpacing chứ không phải margin.
       Đo ngược: khối Mô tả có 3 đoạn cao 90+150+120 = 360, Figma khai 370 →
       cách đoạn đúng **5px**, không phải 24px như ta tự đặt.
   (b) '.img' của Flatsome mang sẵn 'margin-bottom' — ảnh trong thẻ gói đẩy
       tiêu đề xuống thêm 16px so với Figma.
   (c) Lưới 2 cột 'display: grid' mặc định 'align-items: stretch', nên mục
       ngắn bị kéo cao bằng mục dài cùng hàng (mục "Là Google Partner từ năm
       2022" cao 52 thay vì 26). Vị trí hàng vẫn đúng, chỉ chiều cao ô sai.
   (d) Bề rộng đo là HỘP VIỀN: thêm 'padding-right' không làm hộp hẹp đi —
       phải ghim 'width'.
   -------------------------------------------------------------------------- *//* (a) cách đoạn 5px, đúng bằng paragraphSpacing của Figma */
#mo-ta-dich-vu .t4fx-chu p { margin-bottom: 5px; }
#mo-ta-dich-vu .t4fx-chu p:last-child { margin-bottom: 0; }

/* (b) gỡ margin mặc định của ảnh trong thẻ gói; Figma: ảnh → tiêu đề cách 11 */
.t4fx-goi .col-inner > .img { margin: 0; }

@media (max-width: 849px) {

/* (b) Figma mobile: ảnh → tiêu đề cách 6 */
  .t4 .t4fx-goi-ten { margin-top: 6px; }

/* Lý do mobile: Figma đặt minh hoạ ngay dưới khối nhãn (y=145), ô ảnh
     352×258 — ảnh gốc tỉ lệ khác nên cho nó lấp đầy ô và cắt theo khung. */
  #ly-do .t4fx-split { margin-top: 24px; }

/* (a) băng thẻ gói: lề trái 25 và điểm neo cuộn cũng lùi 25 */
  .t4 .section-content > .row.t4fx-goi-row {
    padding-left: 25px; scroll-padding-left: 25px;
  }
  .t4 .section-content > .row.t4fx-goi-row > .col.t4fx-goi:first-child { margin-left: 0; }

/* (c) cách đoạn bản mobile của khối Mô tả dịch vụ */
  #mo-ta-dich-vu .t4-only-mobile .t4fx-chu p { margin-bottom: 16px; }
  #mo-ta-dich-vu .t4-only-mobile .t4fx-chu p:last-child { margin-bottom: 0; }

}

/* --------------------------------------------------------------------------
   11.22 BỐN MỐC CUỐI
   -------------------------------------------------------------------------- *//* Hộp mô tả bên phải khối "Các gói dịch vụ": Figma khai hộp cao 60 cho 2 dòng
   26px và CĂN GIỮA chữ trong đó — nên chữ nằm thấp hơn mép hộp 4px. Để hộp co
   theo chữ là lệch đúng 4px, thấy rõ khi đặt cạnh cột tiêu đề. *//* ⚠ Ghim hộp 60 + căn giữa lên chính thẻ <p>, KHÔNG lên .text bọc ngoài.
   Đặt ở .text thì hộp của <p> co theo chữ (52) và nằm thấp hơn mép hộp 4px —
   trang vẽ ĐÚNG nhưng mốc đo của <p> lệch 4px so với lớp Figma. */
#goi-dich-vu .t4fx-head-2col .t4fx-chu p {
  min-height: 60px; display: flex; flex-direction: column; justify-content: center;
}

/* --------------------------------------------------------------------------
   11.23 HAI CHỖ CUỐI SAU KHI LỌC FOOTER

   Việc thêm ':where(:not(.t4fx-footer))' giữ NGUYÊN độ ưu tiên, nhưng hai
   quy tắc riêng dưới đây vốn đã thua sẵn quy tắc chung từ trước — trước đó
   chúng tình cờ thắng nhờ một vòng nâng độ ưu tiên khác. Khai lại cho đủ
   mạnh, không dựa vào may rủi của thứ tự.
   -------------------------------------------------------------------------- *//* Dải kem Quy trình: khung 1056 tại x=420 (thắng .row.row-collapse chung) */
.t4 .t4fx-qt-dai .section-content > .row.row-collapse,
.t4 .t4fx-qt-dai .section-content > .row { max-width: 1056px; }

/* Thẻ CTA: Figma cách tiêu đề → thân bài 17px */
.t4 .section-content .t4fx-cta-the .text + .text { margin-top: 17px; }

@media (max-width: 849px) {

/* !important vì Flatsome sinh CSS nền theo ID section (#section_…) — một
     id thắng mọi số lượng class. */
  .t4 .section.t4fx-qt-dai { background-color: #FCFBF6 !important; }

}
.t4 .t4fx-gd-luoi:not(.t4fx-gd-don) .section-content .text.t4fx-gd-td,
.t4 .section .section-content .t4fx-gd-luoi .text.t4fx-gd-td { margin: 0; }

/* Danh sách Lý do dựng bằng ô văn bản trong lưới (T0) ----------------------
   Figma trang #4: hai cột 498 tại x=440 và x=986 ⇒ khe 48; mục cách nhau 16
   (mục 1 đáy 657 → mục 3 y=673). Lề trên khối 33px như bản <ul> cũ.
   ⛔ Lưới đặt trên '.col-inner', không trên '.col' — Flatsome cho '.col' đệm
   ngang riêng, biến nó thành grid là cột phải rơi khỏi mốc Figma 986.
   ⛔ Thụt 30px nằm TRONG <p>: Figma khai lớp chữ rộng đúng 498, mà bảng đo
   trỏ vào <p>; để thụt trên ô thì cả 11 mục hụt 30px. */
/* ⭐ WAVE 5 · P — `498px 498px` → `repeat(2, minmax(0, 498px))`.
   498 + 48 + 498 = **1044**; ở khổ **1024** lòng `.col-inner` chỉ còn 994 ⇒
   rãnh PHẢI thò **+35px** — ĐO ĐƯỢC ở /xu-ly-loi-sai-google-ads/.
   `minmax(0, 498px)` giữ TRẦN 498 nên mọi khổ đủ chỗ cho 1044 ⛔ không đổi một
   điểm ảnh; hẹp hơn thì hai rãnh chia đều chỗ còn lại thay vì lòi ra.
   ⛔ Giữ nguyên `justify-content: start` (lý do đã ghi ngay trên).
   ⛔ Không `overflow-x: hidden` / `clip`. */
.t4 #ly-do .col.t4fx-lydo-o > .col-inner {
  display: grid; grid-template-columns: repeat(2, minmax(0, 498px));
  justify-content: start; align-items: start; gap: 16px 48px;
  margin-top: 33px;
}
.t4 #ly-do .section-content .text.t4fx-lydo-m {
  position: relative; margin: 0; padding-left: 0;
  font-size: 16px; line-height: 26px; color: var(--t4-text);
}
.t4 #ly-do .text.t4fx-lydo-m > p { margin: 0; padding-left: 30px; font: inherit; color: inherit; }
.t4 #ly-do .text.t4fx-lydo-m::before {
  content: ""; position: absolute; left: 8px; top: 10px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--t4-camel);
}

@media (max-width: 849px) {
  .t4 #ly-do .col.t4fx-lydo-o > .col-inner {
    grid-template-columns: 1fr; gap: 16px; margin-top: 65px;
  }
  .t4 #ly-do .section-content .text.t4fx-lydo-m { font-size: 14px; line-height: 22px; }
  .t4 #ly-do .text.t4fx-lydo-m > p { padding-left: 26px; }
  .t4 #ly-do .text.t4fx-lydo-m::before { top: 8px; }

}

/* BẢNG CASESTUDY DỰNG BẰNG PHẦN TỬ FLATSOME (T0) --------------------------
   Cùng toạ độ Figma đã ghi ở 44-nhom-ggm mục 20.3, chỉ đổi vật mang: trước là
   <div> lồng nhau trong [ux_html], nay là [row]/[col] + [ux_image].
     Frame129 y=446 cao 330 — ảnh 503×330 (bo 4), cột chữ rộng 470,98
     hàng số Frame132 y=791 cao 83 — ô 1 rộng 416,34 · ô 2 rộng 314,73
   [figma] Frame 129 '798:16821' (1013,98 rộng) · ảnh Unipart-1.png
     '798:16822' · cột chữ Container '1230:9070' (470,98).
     ⚠ Bản trong khung trang cao 360; bản component '547:4913' cao 330 —
     CSS lấy 330 theo component. Cộng dồn 503 + 471 + khe 40 = 1014 ✓
   ⛔ '.row' của Flatsome mặc định 'flex-wrap: wrap' và '.col' có đệm ngang:
   không khai lại thì hai cột xuống dòng và section phồng hơn 500px. */
.t4 .row.t4fx-cs-tren,
.t4 .row.t4fx-cs-so {
  display: flex; flex-wrap: nowrap; max-width: none; width: 100%; margin: 0;
}
.t4 .row.t4fx-cs-tren { gap: 40px; align-items: flex-start; }
.t4 .row.t4fx-cs-tren > .col,
.t4 .row.t4fx-cs-so > .col { padding: 0; }
.t4 .row.t4fx-cs-tren > .col.t4fx-cs-anh-o { flex: 0 0 503px; max-width: 503px; }
.t4 .row.t4fx-cs-tren > .col.t4fx-cs-loi { flex: 0 0 471px; max-width: 471px; }
/* ⭐ WAVE 5 · P — hai cột trên khai `flex-shrink: 0` và cộng lại đúng 1014
   (503 + 40 khe + 471); bảng tab chỉ rộng **958** ⇒ tràn **+23px**. Cho cột CO
   — `flex-shrink` là luật VÔ HIỆU khi hàng đã vừa, nên mọi khổ đủ 1014 giữ
   NGUYÊN từng điểm ảnh. ⛔ Chỉ gọi đích danh hai cột đã ĐO ĐƯỢC là tràn. */
.t4 .row.t4fx-cs-tren > .col.t4fx-cs-anh-o,
.t4 .row.t4fx-cs-tren > .col.t4fx-cs-loi,
.t4 .row.t4fx-cs-so > .col.t4fx-cs-o1,
.t4 .row.t4fx-cs-so > .col.t4fx-cs-o2 { flex-shrink: 1; min-width: 0; }
/* ⛔ VÁ 22/08/2026 — khoá thêm '#casestudy' để thắng đặc hiệu.
   '.t4 .section:where(:not(.t4fx-footer)) .section-content .img img'
   (cũng trong tệp này) có đặc hiệu (0,4,1) — 4 lớp — trong khi '.t4
   .t4fx-cs-anh img' chỉ (0,2,1). Luật kia THẮNG dù nạp trước, khiến ảnh rơi
   về 'height:auto' và giãn theo tỉ lệ gốc của tệp — đo được: ảnh
   'dvgm-casestudy-marketing-strategy.jpg' 1044×800 (tỉ lệ 0,766) render ra
   503×385,4 thay vì đúng 503×330 Figma khai (node 'Unipart-1.png',
   'I1211:11259;547:4967'), đẩy hàng số liệu bên dưới lệch ~55px — đúng cặp
   vùng ❌ '503×64@(443,1977)' và '178×77@(584,1757)'. Thêm ID '#casestudy'
   (mọi trang GGM #3–#7 đều dùng chung id này, xem 'docs/uxb/*.txt') nâng
   đặc hiệu lên (1,2,1) — ID luôn thắng bất kể số lớp — không cần đổi luật
   mobile dòng ~1504 (đã tự thắng nhờ '#casestudy' sẵn có ở đó). */
#casestudy .t4fx-cs-anh img {
  width: 503px; height: 330px; object-fit: cover; display: block;
  border-radius: 4px; /* Figma khai bo góc 4 */
}
.t4 .t4fx-cs-anh { margin: 0; }

/* ⛔ Hàng số phải rộng ĐÚNG 1014 như Frame129 '798:16821' ở trên: để 'width: 100%' thì nó
   lấy trọn bề ngang panel và phép căn giữa đẩy hai ô lệch trái 74px. */
/* ⭐ WAVE 5 · P — `1014px` → `min(1014px, 100%)`. 1014 là bề rộng Frame129 của
   Figma; bảng tab chỉ rộng **958** ⇒ hàng thò **+23px** (dấu vân tay:
   `margin-right: -56px` do trình duyệt tự đặt). `min()` giữ NGUYÊN 1014 ở mọi
   khổ ≥ 1014 — phép căn giữa hai ô vẫn y nguyên vì nó tính theo bề rộng THẬT.
   ⛔ Không `overflow-x: hidden` / `clip`. */
.t4 .row.t4fx-cs-so {
  justify-content: center; gap: 149px; margin: 15px auto 0; width: min(1014px, 100%);
}

/* [figma] hàng số Frame 132 '547:4920' (1014×83); hai ô trong nó là
   Frame 131 '547:4921' (416,34×83) và Frame 130 '547:4924' (314,73×83).
   Cộng dồn 416,34 + 314,73 + khe 149 ≈ 880 < 1014 — phần dư là lề hai
   bên do 'justify-content: center', không phải sai số.

   ⛔ '.row::after' (clearfix của Flatsome) trở thành FLEX ITEM và được tính
   vào phép căn giữa — ô đầu bị đẩy sang trái 7,5px, đúng nửa chiều rộng nó
   chiếm. Bẫy này đã ghi trong bộ luật; gặp lại ở hàng số casestudy. */
.t4 .row.t4fx-cs-so::after,
.t4 .row.t4fx-cs-tren::after { display: none; }
.t4 .row.t4fx-cs-so > .col.t4fx-cs-o1 { flex: 0 0 416.34px; max-width: 416.34px; }
.t4 .row.t4fx-cs-so > .col.t4fx-cs-o2 { flex: 0 0 314.73px; max-width: 314.73px; }

/* Ô văn bản mới bọc quanh các <p> cũ — dồn kiểu về đúng thẻ bên trong. */
.t4 .text.t4fx-cs-trich p,
.t4 .text.t4fx-cs-ten p,
.t4 .text.t4fx-cs-chuc p,
.t4 .text.t4fx-cs-xem p,
.t4 .text.t4fx-cs-lon p,
.t4 .text.t4fx-cs-mo p { margin: 0; font: inherit; color: inherit; text-align: inherit; }
.t4 .section .section-content .text.t4fx-cs-ten { margin-top: 28px; }

/* ⛔ Đệm 28,5px của hộp trích dẫn phải nằm TRONG <p>, không trên ô: hộp Figma
   cao 187 mà chữ chỉ 130 ('tu_co_gian: NONE' + 'can_doc: CENTER'), và bảng đo
   trỏ vào <p>. Để đệm trên ô thì <p> tụt xuống 28,5 và mọi khoảng cách tính
   từ nó hụt đúng ngần ấy. */
.t4 .section .section-content .text.t4fx-cs-trich { padding: 0; }
.t4 .text.t4fx-cs-trich p { padding: 28.5px 0; }

/* Ảnh dải kem Quy trình của RIÊNG trang #4 — Figma 711:16416 khai 496×355,
   lệch 8×4 so với ô. Luật này trước nằm ở 44-nhom-ggm và dùng chung; từ
   19/08/2026 nhóm GGM có số riêng (561 / 497,6×297) nên tách ra. */
.t4 #quy-trinh .t4fx-split > .col:last-child .img,
.t4 #quy-trinh .t4fx-split > .col:last-child .img-inner,
.t4 #quy-trinh .t4fx-split > .col:last-child img {
  width: 496px; height: 355px;
}
.t4 #quy-trinh .t4fx-split > .col:last-child .img {
  margin-left: 8px; margin-top: 4px;
}


/* ════════════════════════════════════════════════════════════════════════
   DỜI TỪ '44-nhom-ggm.css' (20/08/2026)

   2 luật. Chúng nằm trong một mô-đun mang tên trang #4 nhưng KHỚP Ở NHIỀU
   TRANG KHÁC — đo bằng CSSOM trên 8 trang, kết quả ở 'qa/_luat-44-sang-30.json'.

   ⛔ THỨ TỰ TRONG KHỐI NÀY LÀ THỨ TỰ NGUỒN CỦA MÔ-ĐUN 40, ĐỬhNG SẮP LẠI.
   Nhiều bộ chọn được khai HAI–BA LẦN ('.t4fx-tabs', '.t4 .section-content >
   .row', '#casestudy .t4fx-head-2col > .col:first-child') và lần sau đè lần
   trước — đảo là đổi kết xuất mà không có gì báo.

   ⚠ Chú thích đi kèm được MANG THEO. Nếu một chú thích còn giải thích cả luật
   ở lại bên 40 thì nó xuất hiện ở CẢ HAI nơi — cố ý, thà lặp còn hơn mất.
   ════════════════════════════════════════════════════════════════════════ */

/* --- 18. TRANG #4 — vá theo bảng đo dày (16/08) ---------------------------
   Mọi con số dưới đây lấy TRỰC TIẾP từ lớp Figma, không ước lượng.
   -------------------------------------------------------------------------- *//* 18.1 Breadcrumb: Figma gạch chân riêng mục "Home" (lớp gach=UNDERLINE),
   hai mục sau thì không.
   ⚠ '.t4fx-crumb' CHÍNH LÀ thẻ <nav>, không phải khối bọc nó — viết
   '.t4fx-crumb nav' là không trúng gì cả. */
.t4 nav.t4fx-crumb ol li:first-child a { text-decoration: underline; }

@media (max-width: 849px) {
  .t4 nav.t4fx-crumb ol li:last-child,
  .t4 nav.t4fx-crumb ol li:last-child * { line-height: 13px; }

}


/* ══ III.4.0 ĐỢT C · GỘP 7 SELECTOR TỪNG KHAI Ở HAI MÔ-ĐUN (20/08/2026) ═══
   Linter mục (4) cấm một selector khai ở hai mô-đun: đọc mô-đun này không
   biết được luật cuối cùng là gì, phải mở cả tệp kia mới biết ai thắng.

   Bảy luật dưới đây trước nằm ở '40-page-xu-ly-loi-sai-google-ads.css' và
   '44-nhom-ggm.css' — nhưng KHÔNG phải luật riêng của trang/nhóm đó: mọi
   mô-đun đều nạp trên MỌI trang (functions.php nạp cả 17, không nạp theo
   điều kiện), nên chúng vốn đã áp cho toàn site. Chỗ đứng cũ chỉ là dấu
   vết của việc dựng trang nào trước, không phải phạm vi thật.

   ⛔ ĐẶT Ở CUỐI TỆP, KHÔNG gộp ngược lên khối cùng selector phía trên.
   Hai tệp cũ nạp SAU toàn bộ tệp này, nên luật của chúng đang thắng mọi
   luật trong đây. Kéo lên giữa tệp là đổi người thắng — ví dụ đã kiểm:
   '.t4fx-luu-y { min-height: 185px }' mà đặt trước dòng 1338 thì @849
   'min-height: 0' sẽ lật ngược nó và hộp Lưu ý tụt chiều cao trên mobile.
   Đứng cuối tệp là giữ NGUYÊN thứ tự thác đổ như trước khi dời.

   ⚠ KHÔNG thu hẹp bằng '.t4:where(.t4-trang-…)' như đợt B. Đợt B thu hẹp
   được vì các luật đó neo theo '#id' của section chỉ có trên nhóm ấy; bảy
   luật này neo theo LỚP dùng ở 4–7 trang ('.t4fx-nut-xanh' có cả ở
   lien-he và tuyen-dung), thu hẹp là gỡ mất kiểu ở những trang ngoài nhóm.

   ⚠ BẢN GỐC CỦA KHỐI NÀY: 'qa/manh/dot-C-30-components.css'. Ngày 20/08
   một cửa sổ khác ghi đè '30-components.css' và xoá sạch khối này chỉ vài
   phút sau khi nối — site mất 7 luật mà linter vẫn im (nó chỉ soi trùng,
   không soi thiếu). Mất lần nữa thì nối lại từ tệp mảnh đó.               */

/* ⤴ từ 44-nhom-ggm 19.4: '.button' của Flatsome là display:block nên <span>
   nằm sát mép trên; Figma cho nút cao 44, chữ 24, đệm 10 → phải căn giữa. */
.t4 .button.t4fx-nut-xanh { display: flex; align-items: center; justify-content: center; }

/* ⤴ từ 44-nhom-ggm 18.6 rồi 19.13: khe dưới tiêu đề thẻ giai đoạn 5px → 7px.
   Gộp hai lần khai thành một; giá trị cuối cùng vẫn là 7px.                */
.t4 .t4fx-gd h3 { margin-bottom: 0; padding-bottom: 7px; }

/* ⤴ từ 44-nhom-ggm: ảnh case study — Figma khai bo góc 4
   [figma] Unipart-1.png '547:4913' 503×330 (component); bản trong trang
   '798:16822' cao 360. Không cộng 30: đây là <img>, không phải '.col'. */
.t4 .t4fx-cs-anh {
  width: 503px; height: 330px; object-fit: cover; display: block; border-radius: 4px;
}

/* ⤴ từ 40-page-xu-ly (ba chỗ rời): hộp "Lưu ý" — Figma đệm trên 28 (thẻ
   giai đoạn là 24), khung cao 185, cách khối trên 24.                      */
.t4fx-luu-y { margin-top: 24px; min-height: 185px; padding-top: 28px; }

/* ⤴ từ 40-page-xu-ly: [button] mang sẵn nền/bóng/lề của Flatsome — gỡ hết */
.t4fx-nhan-hang a.button.t4fx-xem-tat-ca {
  background: none; box-shadow: none; margin: 0; min-height: 0;
  text-transform: none; letter-spacing: 0;
}

@media (max-width: 849px) {
  /* ⤴ hai luật khung mobile 352 tách ra từ hai danh sách selector ở 40-page
     [figma] Container 352 khổ Mobile '1093:8882' */
  .t4fx-tabs { max-width: 352px; }
  .t4fx-qt-dai .t4fx-split { max-width: 352px; }
}

/* ⤴ từ 44-nhom-ggm 19.3 (dời 20/08/2026): Flatsome vẽ lớp bóng 'is-shade' ở
   '::after', Figma không có. Soi computed style của chính phần tử KHÔNG thấy
   gì — lớp bóng nằm ở pseudo, mất buổi ở đây nếu chỉ đọc computed style.
   Không gỡ class 'is-shade' khỏi shortcode: luật giữ nguyên cấu trúc UXB.

   [đối chiếu] không mô-đun nào nạp sau khai '.t4fx-nut-xanh::after', nên dời
   lên sớm hơn trong thác đổ không đổi người thắng — đã kiểm bằng grep toàn
   'css/' và đo lại '::after' trên 5 trang có nút này.                      */
.t4 .button.t4fx-nut-xanh::after { display: none; }


/* ══ DỜI VỀ ĐÂY 21/08/2026 (4T duyệt) — hai luật DÙNG CHUNG nằm nhầm tệp ═══
   Phát hiện bằng `tools/kiem-vung-mu-3b.py`: nó hỏi TRÌNH DUYỆT xem mô-đun nào
   có luật khớp thật vào phần tử của trang, thay vì đoán theo tên tệp.

   ⛔ CẢ HAI ĐỀU KHÔNG ĐƯỢC BỌC PHẠM VI TRANG. Phản xạ đầu tiên khi thấy luật
   của tệp trang chạm trang khác là bọc `body.t4-trang-…` lại cho "đúng luật
   linter (8)". Ở đây bọc là GỠ KIỂU khỏi những trang đang ĐẠT — chúng không
   rò rỉ, chúng vốn dùng chung. Đo mới phân biệt được hai ca đó, đọc tên tệp
   thì không.

   Chuyển về `30-components` được hai thứ cùng lúc: hết phá luật (8), VÀ hết
   vùng mù của cổng 3b — mô-đun dùng chung luôn nằm trong dấu băm, nên sửa nó
   sẽ làm hết hạn phiếu của đúng những trang bị ảnh hưởng.

   ⚠ Đặt ở CUỐI TỆP, không chèn cạnh luật anh em ở trên. Hai tệp nguồn nạp SAU
   toàn bộ tệp này; đứng cuối là giữ nguyên thứ tự thác đổ (cùng lý do đã ghi
   ở khối ĐỢT C). Đã soi trước: không luật nào ở mô-đun 40–51 nhắm cùng phần
   tử — chúng nhắm `.text`, không nhắm con cuối của nó; còn luật `#content`
   mang id nên không selector một-lớp nào vượt được.
   ══════════════════════════════════════════════════════════════════════ */

/* ⤴ từ 51-page-dich-vu-google-marketing.css (CS3 đo và bàn giao).
   [phục vụ] chip nhãn section | [trang] 7 trang: dich-vu-google-marketing ·
   google-map-local-seo · google-merchant-center · tracking-do-luong ·
   trang-chu · ve-chung-toi · xu-ly-loi-sai-google-ads
   [đo] gỡ khỏi CSSOM thì nhãn CẢ BẢY tụt về 16px/26 · w400 · #1f1f1f · normal */
#content .t4-label.t4fx-nhan {
  font-family: var(--t4fx3-than); font-size: 14px; line-height: 19.124px;
  font-weight: 500; color: #fff; letter-spacing: 0.14px;
}

/* ⤴ từ 40-page-xu-ly-loi-sai-google-ads.css dòng 2 — nửa kia của cùng một
   phép dọn khoảng cách, mà nửa đầu (`.text { margin: 0 }`) vốn đã nằm ở tệp
   này. Hai nửa ở hai tệp thì người sau sửa một nửa rồi tưởng xong.
   [trang] khớp ở 24 trang. [đo] gỡ khỏi CSSOM trên `ve-chung-toi` (đang ĐẠT):
   một phần tử đổi 0px → 16px. Trên `lien-he`/`tuyen-dung`/`blog` thì 0 đổi —
   ở đó luật khác đã cho margin-bottom 0 sẵn, nhưng KHÔNG vì thế mà bỏ được.

   ⚠ Trình duyệt lưu bộ chọn này là `… .text > :last-child`, KHÔNG có dấu `*`.
   Dò bằng `selectorText === '… > *:last-child'` sẽ gỡ 0 luật và phép thử báo
   "không trang nào đổi" — tôi đã dính, và suýt kết luận ngược. */
.t4 .section:where(:not(.t4fx-footer)) .section-content .text > *:last-child { margin-bottom: 0; }


/* ============================================================================
 * ⭐ W5 · TÍCH HỢP — TOOLTIP BÁO LỖI BIỂU MẪU PHẢI ĐỌC ĐƯỢC
 * ============================================================================
 *
 * `a.element-error.tooltip` do THEME MẸ Flatsome chèn khi biểu mẫu không hợp lệ.
 * Đo được: #7D7C7C trên nền kem #FCFBF6 = **4,02 : 1** — trượt AA chữ thường.
 * Đây là chữ báo lỗi cho người đang điền biểu mẫu, tức đúng lúc họ cần đọc
 * được nhất.
 *
 * ⇒ #6F6E6E = **4,91 : 1** (tự tính bằng công thức WCAG).
 *   ⛔ KHÔNG lấy #747373 = 4,56 — mỏng quá; làm tròn một nấc ở bất kỳ khâu nào
 *   là trượt trở lại.
 *
 * 🔴 VÌ SAO Ở TỆP NÀY, ⛔ KHÔNG Ở `55-lms.css`:
 *   `55-lms.css` chỉ được `Router::nap_tai_nguyen()` nạp trên route `/hoc/`.
 *   Tooltip thì xuất hiện ở trang chủ, trang bán, liên hệ… Đặt luật ở tệp LMS
 *   là luật KHÔNG BAO GIỜ CHẠY — và bộ quét vẫn đỏ, còn người sửa thì tưởng đã
 *   sửa xong. Bản đầu của W5 đã mắc đúng lỗi đó, đo ra mới biết.
 *
 * ⛔ KHÔNG bọc `.t4`: tooltip không phải lúc nào cũng nằm trong bọc ấy.
 */
a.element-error.tooltip,
.element-error.tooltip { color: #6F6E6E; }



/*# sourceURL=flatsome-main-inline-css */

:host {--primary-color: #446084;--fs-color-primary: #446084;--fs-color-secondary: #d26e4b;--fs-color-success: #7a9c59;--fs-color-alert: #b20000;--fs-experimental-link-color: #334862;--fs-experimental-link-color-hover: #111;}.tooltipster-base {--tooltip-color: #fff;--tooltip-bg-color: #000;}.off-canvas-right .mfp-content, .off-canvas-left .mfp-content {--drawer-width: 300px;}.header-main{height: 76px}#logo img{max-height: 76px}#logo{width:200px;}.header-top{min-height: 30px}.transparent .header-main{height: 90px}.transparent #logo img{max-height: 90px}.has-transparent + .page-title:first-of-type,.has-transparent + #main > .page-title,.has-transparent + #main > div > .page-title,.has-transparent + #main .page-header-wrapper:first-of-type .page-title{padding-top: 90px;}.header.show-on-scroll,.stuck .header-main{height:70px!important}.stuck #logo img{max-height: 70px!important}.header-bg-color {background-color: #458763}.header-bottom {background-color: #f1f1f1}@media (max-width: 549px) {.header-main{height: 60px}#logo img{max-height: 60px}}:host{font-family: Lato, sans-serif;}:host {font-weight: 400;font-style: normal;}.nav > li > a {font-family: Manrope, sans-serif;}.mobile-sidebar-levels-2 .nav > li > ul > li > a {font-family: Manrope, sans-serif;}.nav > li > a,.mobile-sidebar-levels-2 .nav > li > ul > li > a {font-weight: 700;font-style: normal;}h1,h2,h3,h4,h5,h6,.heading-font, .off-canvas-center .nav-sidebar.nav-vertical > li > a{font-family: Lato, sans-serif;}h1,h2,h3,h4,h5,h6,.heading-font,.banner h1,.banner h2 {font-weight: 700;font-style: normal;}.alt-font{font-family: "Dancing Script", sans-serif;}.alt-font {font-weight: 400!important;font-style: normal!important;}.nav-vertical-fly-out > li + li {border-top-width: 1px; border-top-style: solid;}.label-new.menu-item > a:after{content:"Mới";}.label-hot.menu-item > a:after{content:"Thịnh hành";}.label-sale.menu-item > a:after{content:"Giảm giá";}.label-popular.menu-item > a:after{content:"Phổ biến";}
/* latin-ext */

/* latin */

/* latin-ext */

/* latin */
/* cyrillic-ext */

/* cyrillic */

/* greek */

/* vietnamese */

/* latin-ext */

/* latin */
/* vietnamese */

/* latin-ext */

/* latin */