@charset "UTF-8";
/*
 * Nối khung Flatsome (Header Builder, UX Block chân trang, trang UX Builder) với giao diện thiết kế.
 * CSS của Flatsome nằm trong lớp cascade "flatsome" nên tệp này chỉ cần nói phần khác, không cần !important.
 */

/* ========== Bỏ kiểu nền của Flatsome trong khối thiết kế ==========
 * Bên trong mọi khối .sb-* (đầu trang, nội dung, chân trang, ngăn kéo…) phần tử chỉ mang kiểu của thiết kế:
 * kiểu Flatsome đặt cho thẻ (nút viết hoa, ô nhập đổ bóng, nhãn đậm, li cách dòng, …) được trả về mặc định
 * trình duyệt như ở bản classic. Độ ưu tiên 0 nên mọi quy tắc của thiết kế vẫn thắng. Không tính <html>, <body>: theme gắn
 * class sb-* lên đó (sb-has-paybar, sb-dd-lock) nên cả trang, kể cả element Flatsome, sẽ bị trả về mặc định. Vùng .hto-fs
 * (element Flatsome đặt trong khuôn của theme, vd hàng sản phẩm gợi ý ở giỏ hàng, trang 404) giữ kiểu Flatsome. */
:where([class^="sb-"]:not(html,body),[class*=" sb-"]:not(html,body),[class^="sb-"]:not(html,body) *,[class*=" sb-"]:not(html,body) *):where(:not(svg,svg *,img,video,iframe,canvas,table,td,th,[class*="uxb"],[class*="uxb"] *,.hto-fs,.hto-fs *)){all:revert;box-sizing:border-box}
/* Ảnh, bảng giữ thuộc tính width/height/cellspacing của HTML (all:revert sẽ bỏ cả các thuộc tính này): chỉ trả từng kiểu
 * Flatsome đặt cho thẻ. */
:where([class^="sb-"]:not(html,body) *,[class*=" sb-"]:not(html,body) *,[class^="sb-"]:not(html,body),[class*=" sb-"]:not(html,body)):where(img:not(.hto-fs *)){vertical-align:baseline}
:where([class^="sb-"]:not(html,body) *,[class*=" sb-"]:not(html,body) *):where(table){width:auto;margin:0;border-color:currentcolor;border-spacing:2px}
:where([class^="sb-"]:not(html,body) *,[class*=" sb-"]:not(html,body) *):where(td,th){padding:1px;border:0;text-align:revert;line-height:inherit;font-size:inherit;letter-spacing:normal;text-transform:none;color:inherit;vertical-align:inherit}

/* ========== Đầu trang (Header Builder) ==========
 * Khung cột/danh sách của Flatsome được "làm phẳng" (display:contents) để các khối của thiết kế là con trực tiếp
 * của hàng, xếp lại theo cỡ màn đúng như .sb-header__main của bản classic. */
.hto-header{top:calc(-1 * var(--hto-topbar, 36px));width:auto}
.hto-header .header-wrapper{position:static}
.hto-header .header-bg-container{display:none}
/* .container::after (clearfix) của Flatsome thành một ô flex rỗng, ăn thêm một khoảng gap. */
.hto-header .flex-row::before,.hto-header .flex-row::after{content:none}
.hto-header .flex-col,.hto-header .nav,.hto-header .nav>li.html,.hto-header #logo{display:contents}
.hto-header .nav>li.html{font-size:inherit;line-height:inherit;letter-spacing:normal;text-transform:none;color:inherit;margin:0;padding:0}
.hto-header #top-bar>.flex-row,.hto-header #masthead>.header-inner,.hto-header #wide-nav>.flex-row{width:auto;max-width:calc(var(--container) + var(--gutter) * 2);height:auto;margin:0 auto;padding:0 var(--gutter)}
.hto-header #top-bar{min-height:0;background:var(--primary);color:var(--on-primary);font-size:13px;font-weight:500}
.hto-header #top-bar>.flex-row{display:flex;justify-content:center;align-items:center;gap:16px;min-height:36px;text-align:center}
.hto-header #masthead{height:auto;background:none}
.hto-header #masthead>.header-inner{display:flex;flex-wrap:nowrap;justify-content:flex-start;align-items:center;gap:24px;padding-block:14px}
.hto-header .sb-menu-toggle{order:-1}
.hto-header #wide-nav{min-height:0;border-top:1px solid var(--border);background:none}
.hto-header #wide-nav>.flex-row{display:block}
.hto-header .sb-nav{border-top:0}
.sb-header.is-compact #wide-nav{display:none}
@media (max-width:1023px){
	.hto-header #masthead>.header-inner{flex-wrap:wrap;gap:12px}
	.hto-header #wide-nav{border-top:0}
}
@media (max-width:767px){
	/* Điện thoại: đầu trang không dính (bản classic đặt position:relative), bỏ độ dời của thanh trên cùng. */
	.hto-header{top:auto}
	.hto-header #top-bar{font-size:12px}
	.hto-header #top-bar li.html>span:first-child{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
	.hto-header #masthead>.header-inner{gap:4px 4px;padding-block:8px 10px}
}

@media (max-width:399px){
	.hto-header #top-bar{font-size:11.5px}
}