/*
 * Element gốc của Flatsome (Row/Col, Slider, Banner, Image Box, Icon Box, Title, Tabs, Products, Product Categories,
 * Blog Posts, Accordion, Menu, Image, Text) mặc giao diện thiết kế: số đo lấy từ CSS bản classic, chỉ nhắm
 * class hto-* mà bộ dựng giao diện gắn cho element, nên element Flatsome chủ shop tự thêm vẫn giữ kiểu Flatsome.
 * CSS của Flatsome nằm trong lớp cascade (inc/flatsome/layout.php) nên các luật ở đây thắng mà không cần !important;
 * !important chỉ dùng để thắng kích thước Flatsome ghi thẳng theo ID (ô Width của Image / Icon Box).
 */
:root{--hto-i-chev:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M9%206l6%206-6%206'%2F%3E%3C%2Fsvg%3E");--hto-i-chev-left:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M15%206l-6%206%206%206'%2F%3E%3C%2Fsvg%3E");--hto-i-chev-down:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M6%209l6%206%206-6'%2F%3E%3C%2Fsvg%3E");--hto-i-grid:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M4%204h7v7H4zM13%204h7v7h-7zM4%2013h7v7H4zM13%2013h7v7h-7z'%2F%3E%3C%2Fsvg%3E")}

/* ========== Element Flatsome bất kỳ (kể cả chủ shop tự thêm) ========== */
/* Luật a{color} của thiết kế không thuộc lớp nào nên đè màu chữ của nút Flatsome (chữ trùng màu nền): trả về màu Flatsome. */
a.button,a.button:hover,a.button:focus{color:revert-layer}
/* Ảnh phủ kín khung của Flatsome (nền Banner/Section, ảnh bài viết, ảnh lưới): luật img{height:auto;max-width:100%}
 * của thiết kế đè chiều cao 100% của Flatsome. */
.banner-bg :is(img,picture,video),.section-bg :is(img,picture,video),.image-cover img,.has-equal-box-heights .box-image img,
.has-format img,img.back-image,.grid-col .box-image img,.grid-col .image-cover img,.instagram-image-container a>img{height:revert-layer;max-width:revert-layer}
/* Icon nét viền (thư viện biểu tượng của theme): Flatsome tô kín mọi path trong Icon Box. */
.icon-box-img svg[fill="none"],.icon-box-img svg[fill="none"] *{fill:none}

/* ========== Khung chung: mỗi hàng trang chủ = khung 1280px (.sb-container) của bản classic ========== */
.row.hto-row{width:100%;max-width:calc(var(--container) + var(--gutter)*2);margin-left:auto;margin-right:auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.row.hto-row>.col{padding:0}
/* Hàng xếp theo lưới: phần tử clearfix của .row thành một ô lưới thừa (thêm một khoảng hở dưới hàng). */
.row.hto-row::before,.row.hto-row::after{content:none}
.row.hto-sec{padding-top:var(--section)}
.hto-row .col-inner>:last-child{margin-bottom:0}
/* Tiêu đề đứng một mình trong cột (các thẻ nằm ở cột kế bên dưới) vẫn giữ khoảng cách với thẻ. */
.hto-row .col-inner>.hto-title.section-title-container:last-child{margin-bottom:20px}

/* Nút (element Button): kích thước, chữ theo thiết kế; màu theo ô Color của nút (Primary = màu chính). */
.button.hto-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;min-height:0;margin:0;padding:0 24px;border-radius:var(--r-md);font-family:var(--font-ui);font-size:15px;font-weight:600;line-height:1;letter-spacing:0;text-transform:none;white-space:nowrap;transition:background .15s}
.button.hto-btn:not(.is-outline){border-width:0}
.button.hto-btn>span{line-height:1}
.button.hto-btn>i{margin:0;font-size:1.1em;top:0;opacity:1}
.button.hto-btn.is-outline{border-width:1.5px;background-color:var(--surface)}
.button.hto-btn.is-outline:hover{background-color:var(--tint);color:var(--primary);border-color:var(--primary)}
.button.hto-btn--lg{height:52px;padding:0 32px;font-size:16px;margin-top:8px}
.button.hto-btn--sm{height:36px;padding:0 14px;font-size:13px;border-radius:var(--r-sm);margin-top:8px}

/* Tiêu đề khối + link "Xem tất cả" (element Title). */
.hto-title.section-title-container{max-width:none;margin:0 0 20px;padding:0}
.hto-title .section-title{display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px;margin:0;padding:0;border:0;font:700 24px/1.3 var(--font-ui);letter-spacing:0;text-transform:none;color:var(--text)}
.hto-title .section-title b{display:none}
.hto-title .section-title-main{margin:0;padding:0;border:0;text-transform:none}
.hto-title .section-title a{margin-left:auto;padding:0;display:inline-flex;align-items:center;gap:2px;min-height:44px;font-size:14px;font-weight:600;line-height:1.55;color:var(--primary)}
.hto-title .section-title a>i{display:none}
.hto-title .section-title a::after{content:"";width:18px;height:18px;flex:none;background:currentColor;-webkit-mask:var(--hto-i-chev) center/contain no-repeat;mask:var(--hto-i-chev) center/contain no-repeat}

/* ========== Hero: menu danh mục | slider | 2 ô quảng cáo ========== */
.row.hto-hero{display:grid;grid-template-columns:256px minmax(0,1fr) 320px;gap:16px;padding-top:24px}
.row.hto-hero>.col{max-width:none;min-width:0}
.hto-hero>.col>.col-inner{height:100%}

.hto-catmenu.ux-menu{display:block;height:100%;padding:8px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg)}
.hto-catmenu .ux-menu-title{display:flex;align-items:center;gap:8px;margin:0;padding:10px 12px 8px;font-size:12px;font-weight:700;line-height:1.55;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2)}
.hto-catmenu .ux-menu-title::before{content:"";width:18px;height:18px;flex:none;background:currentColor;-webkit-mask:var(--hto-i-grid) center/contain no-repeat;mask:var(--hto-i-grid) center/contain no-repeat}
.hto-catmenu .ux-menu-link{margin:0;padding:0;border:0}
.hto-catmenu .ux-menu-link__link{display:flex;align-items:center;gap:12px;min-height:46px;padding:0 12px;border:0;border-radius:var(--r-sm);color:var(--text);font-size:14px;font-weight:500;line-height:1.55}
.hto-catmenu .ux-menu-link__link:hover{background:var(--tint);color:var(--primary)}
.hto-catmenu .ux-menu-link__link::after{content:"";width:18px;height:18px;flex:none;margin-left:auto;background:var(--text-2);-webkit-mask:var(--hto-i-chev) center/contain no-repeat;mask:var(--hto-i-chev) center/contain no-repeat}
.hto-catmenu .ux-menu-link__text{padding:0}
.hto-catmenu .ux-menu-link__icon{display:none}
.hto-catmenu .sb-thumb img{width:100%;height:100%;object-fit:cover;display:block}

/* Slider + Banner */
.hto-slider.slider-wrapper{height:100%;border-radius:var(--r-lg);overflow:hidden;background:var(--tint)}
.hto-slider .banner.hto-slide{background-color:var(--tint)}
.hto-slide .banner-bg img.bg{object-fit:cover}
.hto-slide .banner-layers{max-width:none;margin:0;padding:0}
.hto-slide__body.text-box{max-width:520px}
.hto-slide__body .text-inner{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:44px 16px 72px 48px}
.hto-slide__body .text-inner>:not(.button){margin:0}
.hto-slide .sb-slide__title{font-size:40px}
.hto-slide .sb-slide__text{max-width:74%}
.hto-slider .flickity-page-dots{position:absolute;left:40px;right:auto;bottom:16px;z-index:3;display:flex;width:auto;margin:0;padding:0;line-height:1}
.hto-slider .flickity-page-dots .dot{display:grid;place-items:center;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:0;background:transparent;opacity:1;cursor:pointer}
.hto-slider .flickity-page-dots .dot::before{content:"";width:8px;height:8px;border-radius:999px;background:var(--text-2);opacity:.45;transition:width .2s,background .2s}
.hto-slider .flickity-page-dots .dot.is-selected::before{width:24px;background:var(--primary);opacity:1}
.hto-slider .flickity-prev-next-button{top:auto;bottom:16px;z-index:3;display:grid;place-items:center;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:50%;background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm);opacity:1;transform:none}
.hto-slider .flickity-prev-next-button.previous{left:auto;right:68px}
.hto-slider .flickity-prev-next-button.next{right:16px}
.hto-slider .flickity-prev-next-button svg{display:none}
.hto-slider .flickity-prev-next-button::before{content:"";width:22px;height:22px;background:currentColor;-webkit-mask:var(--hto-i-chev) center/contain no-repeat;mask:var(--hto-i-chev) center/contain no-repeat}
.hto-slider .flickity-prev-next-button.previous::before{-webkit-mask-image:var(--hto-i-chev-left);mask-image:var(--hto-i-chev-left)}

/* Ô quảng cáo (Image Box): ảnh phủ kín ô, cả ô bấm được như link của ảnh. */
.hto-hero__promos>.col-inner{display:grid;grid-template-rows:1fr 1fr;gap:16px}
.box.hto-promo{position:relative;display:grid;grid-template-columns:minmax(0,1fr);min-height:200px;height:100%;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:var(--secondary);color:var(--text)}
.hto-promo .box-image{position:absolute;inset:0;width:auto;margin:0}
.hto-promo .box-image>a,.hto-promo .box-image>a>div,.hto-promo .box-image>div{display:block;height:100%}
/* Ảnh ô quảng cáo: sản phẩm nằm góc phải dưới của ảnh (như bản classic). */
.hto-promo .box-image img{width:100%;height:100%;object-fit:cover;object-position:100% 100%}
.hto-promo .box-text{position:relative;z-index:2;max-width:60%;padding:20px;text-align:left;font-size:inherit;pointer-events:none}
.hto-promo .box-text-inner{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.hto-promo .box-text-inner>:not(.button){margin:0}
.hto-promo .button{pointer-events:auto}
.hto-promo .sb-promo__title{margin:0}

/* ========== 4 cam kết (Icon Box) ========== */
.row.hto-usp-row{margin-top:16px;padding-left:calc(var(--gutter) - 6px);padding-right:calc(var(--gutter) - 6px)}
.row.hto-usp-row>.col{padding:0 6px}
.hto-usp-row .col-inner,.hto-usp-row .col-inner>a{height:100%}
.hto-usp-row .col-inner>a{display:block;color:var(--text)}
.icon-box.hto-usp{display:flex;align-items:center;gap:14px;height:100%;margin:0;padding:16px 16px 16px 18px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);color:var(--text);transition:border-color .15s,box-shadow .15s}
a:hover>.icon-box.hto-usp{border-color:var(--primary);box-shadow:var(--shadow-md)}
a>.icon-box.hto-usp::after{content:"";width:18px;height:18px;flex:none;background:var(--text-2);-webkit-mask:var(--hto-i-chev) center/contain no-repeat;mask:var(--hto-i-chev) center/contain no-repeat;transition:transform .15s,background .15s}
a:hover>.icon-box.hto-usp::after{background:var(--primary);transform:translateX(3px)}
.hto-usp .icon-box-img{flex:none;display:grid;place-items:center;height:48px;margin:0;border-radius:var(--r-md);background:var(--primary);color:var(--on-primary)}
.hto-usp .icon-box-img .icon,.hto-usp .icon-box-img .icon-inner{display:grid;place-items:center;width:auto;height:auto;margin:0;padding:0;line-height:0}
.hto-usp .icon-box-img svg,.hto-usp .icon-box-img img{display:block;width:22px;height:22px;margin:0;padding:0}
.hto-usp .icon-box-text{flex:1;min-width:0;padding:0}
.hto-usp__title{margin:0;font-family:var(--font-ui);font-size:15px;font-weight:700;line-height:1.3;letter-spacing:0;text-transform:none;color:var(--text)}
.hto-usp__text{margin:2px 0 0;font-size:13px;line-height:1.35;color:var(--text-2)}

/* ========== Danh mục ô tròn (Product Categories) ========== */
.row.hto-cats{width:auto;max-width:none;margin:0 -8px;row-gap:16px}
.row.hto-cats>.col{padding:0 8px}
.hto-cats .col-inner>a{display:block;color:var(--text)}
.hto-cats .box-category{display:flex;flex-direction:column;align-items:center;gap:12px}
.hto-cats .box-image{position:relative;width:100%;margin:0;aspect-ratio:1;border:1px solid var(--border);border-radius:50%;overflow:hidden;background:var(--secondary);transition:border-color .2s}
.hto-cats .col-inner>a:hover .box-image{border-color:var(--primary)}
.hto-cats .box-image>div{position:absolute;inset:0}
.hto-cats .box-image img{display:block;width:100%;height:100%;object-fit:cover}
.hto-cats .box-text{width:100%;padding:0;text-align:center}
.hto-cats .header-title{margin:0;font-family:var(--font-ui);font-size:14px;font-weight:500;line-height:1.3;letter-spacing:0;text-transform:none;color:var(--text)}
.hto-cats .count{display:none}

/* ========== Có sẵn · giao trong ngày: Col nền màu + đồng hồ chốt đơn + Products trượt ngang ========== */
.row.hto-deal-row{padding-top:var(--section)}
.hto-deal>.col-inner{padding:24px;border-radius:var(--r-lg)}

/* Products: thẻ sản phẩm của thiết kế trong khung cột của Flatsome. */
.hto-pcol>.col-inner{height:100%}
.woocommerce .hto-pcol ul.products{display:block;height:100%;margin:0;padding:0}
/* Flatsome thụt lề mọi <li> trong cột (.col-inner ul li): thẻ sản phẩm bị co 20px. */
.woocommerce .hto-pcol ul.products li.product{height:100%;margin:0}
.row.hto-rail{flex-wrap:nowrap;gap:16px;width:auto;max-width:none;margin:0;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none}
.row.hto-rail::-webkit-scrollbar{display:none}
.row.hto-rail>.col{flex:0 0 calc((100% - 64px)/5);max-width:none;padding:0;scroll-snap-align:start}
.row.hto-grid{width:auto;max-width:none;margin:0 -8px;row-gap:16px}
.row.hto-grid>.col{padding:0 8px}
.hto-grid--best>.col{flex:0 0 20%;max-width:20%}
.hto-grid--best>.col:nth-child(n+6){display:none}
.hto-grid--coll>.col{flex:0 0 33.3333%;max-width:33.3333%}

/* ========== Được đặt nhiều: Title + Tabs (pills) cùng một hàng như bản classic ========== */
.hto-best>.col-inner{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:24px}
.hto-best .hto-title.section-title-container,.hto-best .hto-title .section-title,.hto-best .tabbed-content{display:contents}
.hto-best .section-title-main{grid-column:1;grid-row:1}
.hto-best .hto-title .section-title a{grid-column:3;grid-row:1}
.hto-best .tabbed-content>.nav{grid-column:2;grid-row:1;justify-self:start;min-width:0;max-width:100%}
.hto-best .tab-panels{grid-column:1/-1;grid-row:2;margin:20px 0 0;padding:0;border:0}
.hto-tabs>.nav{display:flex;flex-wrap:nowrap;gap:8px;margin:0;padding:0;overflow-x:auto;scrollbar-width:none;letter-spacing:0;text-transform:none}
.hto-tabs>.nav::-webkit-scrollbar{display:none}
.hto-tabs>.nav>li{flex:none;margin:0}
.hto-tabs>.nav>li>a{display:inline-flex;align-items:center;gap:6px;height:44px;margin:0;padding:0 16px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text);font-family:var(--font-ui);font-size:14px;font-weight:500;line-height:1;letter-spacing:0;text-transform:none;white-space:nowrap}
.hto-tabs>.nav>li>a:hover{border-color:var(--primary);color:var(--primary)}
.hto-tabs>.nav>li.active>a{border-color:var(--primary);background:var(--surface);color:var(--primary);font-weight:700}
.hto-tabs>.nav>li.active>a::before{content:"";width:16px;height:16px;background:currentColor;-webkit-mask:var(--i-check) center/contain no-repeat;mask:var(--i-check) center/contain no-repeat}
.hto-tabs .tab-panels .panel{padding:0}

/* ========== Bộ sưu tập: Image Box + 3 sản phẩm ========== */
.row.hto-collection{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,3fr);gap:16px}
.row.hto-collection>.col{max-width:none;min-width:0}
.hto-collection__banner>.col-inner,.hto-collection__products>.col-inner,.hto-collection__products .row.hto-grid{height:100%}
.box.hto-coll{display:flex;flex-direction:column;height:100%;border-radius:var(--r-lg);overflow:hidden;background:var(--tint)}
.hto-coll .box-image{position:relative;flex:1;width:100%;min-height:200px;margin:0;background:var(--secondary)}
.hto-coll .box-image>div,.hto-coll .box-image>a{position:absolute;inset:0}
.hto-coll .box-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hto-coll .box-text{padding:24px 28px 28px;text-align:left;font-size:inherit}
.hto-coll .box-text-inner{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.hto-coll .box-text-inner>:not(.button){margin:0}
.hto-coll .sb-display{font-size:28px}
.hto-box__text{margin:0;color:var(--text-2)}

/* ========== Chiến dịch (Image Box: ảnh nền, chữ bên trái) ========== */
.box.hto-campaign{position:relative;display:grid;grid-template-columns:minmax(0,1fr);min-height:260px;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:var(--secondary)}
.hto-campaign .box-image{position:absolute;inset:0;width:auto;margin:0;background:var(--tint)}
.hto-campaign .box-image>div,.hto-campaign .box-image>a{display:block;height:100%}
.hto-campaign .box-image img{width:100%;height:100%;object-fit:cover;object-position:100% 55%}
.hto-campaign .box-text{position:relative;z-index:2;align-self:center;max-width:min(62%,640px);padding:40px 48px;text-align:left;font-size:inherit}
.hto-campaign .box-text-inner{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.hto-campaign .box-text-inner>:not(.button){flex:0 0 100%;margin:0}
.hto-campaign .box-text-inner>.button{margin-top:8px}
.hto-campaign .sb-display{font-size:32px}
.hto-campaign .hto-box__text{font-size:16px}

/* ========== Tin tức (Blog Posts) ========== */
.row.hto-posts{width:auto;max-width:none;margin:0 -8px}
.row.hto-posts>.col{padding:0 8px}
.hto-posts .col-inner{height:100%}
.hto-posts .box-blog-post{display:flex;flex-direction:column;gap:10px}
.hto-posts .box-image{width:100%;margin:0;border-radius:var(--r-md);overflow:hidden;background:var(--secondary)}
.hto-posts .box-text{padding:0;text-align:left;font-size:inherit}
.hto-posts .box-text-inner{display:flex;flex-direction:column;gap:10px}
.hto-post-meta{font-size:12px;font-weight:500;line-height:1.55;color:var(--primary)}
.hto-posts .post-title{margin:0;font-family:var(--font-ui);font-size:16px;font-weight:600;line-height:1.4;letter-spacing:0;text-transform:none;text-wrap:balance}
.hto-posts .post-title a{color:var(--text);line-height:inherit;margin:0}
.hto-posts .is-divider{display:none}

/* ========== Chân trang (UX Block: Section + Row + Accordion + Menu + Image + Text) ========== */
/* Nền kem (màu nền của Section trong UX Block), chữ tối. */
.section.hto-footer{--footer-text:var(--text-2);margin-top:64px;padding:0;color:var(--footer-text);font-size:14px;line-height:1.55}
/* Flatsome tô chữ đoạn văn theo màu chữ chung: giữ màu chữ chân trang. */
.hto-footer p,.hto-footer li{color:inherit}
.hto-footer a{color:var(--footer-text)}
.hto-footer a:hover{color:var(--primary)}
.hto-footer .sb-branding{color:var(--text)}
.hto-footer .sb-branding__mark{background:var(--primary);color:var(--on-primary)}
.hto-footer .sb-branding__logo{max-width:180px}
.row.hto-footer__grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(4,minmax(0,1fr));gap:32px;padding-top:48px;padding-bottom:32px}
.row.hto-footer__grid>.col{max-width:none;min-width:0}
.hto-faccordion.accordion{margin:0}
.hto-faccordion .accordion-item{border:0}
.hto-faccordion .accordion-title{display:flex;align-items:center;justify-content:space-between;margin:0 0 10px;padding:0;border:0;background:none;color:var(--text);font-size:14px;font-weight:700;line-height:1.55;letter-spacing:.04em;text-transform:uppercase}
.hto-faccordion .accordion-title .toggle{display:none}
.hto-faccordion .accordion-inner{padding:0}
.hto-fmenu.ux-menu{display:block}
.hto-fmenu .ux-menu-link{margin:0;padding:0;border:0}
.hto-fmenu .ux-menu-link__link{display:flex;align-items:center;min-height:34px;padding:0;border:0;color:var(--footer-text);font-size:14px;line-height:1.55}
.hto-fmenu .ux-menu-link__link:hover{color:var(--primary)}
.hto-fmenu .ux-menu-link__text{padding:0}
.row.hto-footer__pay,.row.hto-footer__legal{position:relative}
.row.hto-footer__pay::before,.row.hto-footer__legal::before{content:"";position:absolute;top:0;left:var(--gutter);right:var(--gutter);border-top:1px solid rgba(34,32,30,.12)}
/* Đường kẻ trên (1px) tính vào chiều cao hàng như border-top của bản classic. */
.row.hto-footer__pay{display:grid;grid-template-columns:1fr 1fr;gap:32px;padding-top:25px;padding-bottom:24px}
.row.hto-footer__pay>.col{max-width:none;min-width:0}
.hto-footer__logos>.col-inner{display:flex;flex-wrap:wrap;gap:8px}
.hto-footer__label{flex:0 0 100%;margin:0 0 2px;font-family:var(--font-ui);font-size:13px;font-weight:600;line-height:1.55;letter-spacing:0;text-transform:none;color:var(--footer-text)}
.img.hto-paylogo{width:60px!important;margin:0}
.hto-paylogo .img-inner{border-radius:var(--r-sm);overflow:hidden}
.hto-paylogo img{display:block;width:100%;height:auto}
.row.hto-footer__legal{padding-top:21px;padding-bottom:28px;font-size:12px;line-height:1.6}
.hto-footer__legal p{margin:0}
/* Mạng xã hội ở chân trang: ô trắng bo góc, hình đen một màu (mask theo currentColor nên đổi màu khi rê). */
.hto-footer .sb-social{width:40px;height:40px;border-radius:var(--r-sm);background:#fff;color:var(--text);transition:color .15s,box-shadow .15s}
.hto-footer .sb-social:hover{background:#fff;color:var(--primary);box-shadow:var(--shadow-sm)}
.hto-footer .sb-social span{width:20px;height:20px;background:currentColor;-webkit-mask:var(--hto-social) center/contain no-repeat;mask:var(--hto-social) center/contain no-repeat}
.hto-footer .sb-social--facebook{--hto-social:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M13.5%2022v-8.1h2.7l.4-3.2h-3.1V8.7c0-.9.3-1.6%201.6-1.6h1.7V4.3c-.3%200-1.3-.1-2.5-.1-2.5%200-4.1%201.5-4.1%204.2v2.3H7.4v3.2h2.8V22z'/%3E%3C/svg%3E")}
.hto-footer .sb-social--zalo{--hto-social:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill-rule='evenodd'%20d='M12%202.5C6.5%202.5%202%206.3%202%2011c0%202.5%201.3%204.8%203.4%206.4L4.6%2021l4.1-2c1%20.3%202.1.5%203.3.5%205.5%200%2010-3.8%2010-8.5s-4.5-8.5-10-8.5zM8%207.6h8v1.6l-5.3%205.6H16v1.6H8v-1.6l5.3-5.6H8z'/%3E%3C/svg%3E")}
.hto-footer .sb-social--tiktok{--hto-social:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M16.6%202h-3.3v13.3a2.8%202.8%200%201%201-2.8-2.8c.3%200%20.6%200%20.8.1V9.2a6.2%206.2%200%201%200%205.3%206.1V8.6a7.8%207.8%200%200%200%204.4%201.3V6.6a4.4%204.4%200%200%201-4.4-4.6z'/%3E%3C/svg%3E")}
.hto-footer .sb-social--youtube{--hto-social:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill-rule='evenodd'%20d='M22.5%207.2a2.8%202.8%200%200%200-2-2C18.7%204.7%2012%204.7%2012%204.7s-6.7%200-8.5.5a2.8%202.8%200%200%200-2%202A29%2029%200%200%200%201%2012a29%2029%200%200%200%20.5%204.8%202.8%202.8%200%200%200%202%202c1.8.5%208.5.5%208.5.5s6.7%200%208.5-.5a2.8%202.8%200%200%200%202-2A29%2029%200%200%200%2023%2012a29%2029%200%200%200-.5-4.8zM9.8%2015.1V8.9l5.4%203.1z'/%3E%3C/svg%3E")}

/* ========== Màn ≤ 1365 / 1279 / 1023 / 767 (theo bản classic) ========== */
@media (max-width:1365px){
	.hto-slide .sb-slide__title{font-size:36px}
}

@media (max-width:1279px){
	.row.hto-hero{grid-template-columns:minmax(0,1fr) 300px}
	.hto-hero__menu{display:none}
	.row.hto-cats{margin:0 -6px}
	.row.hto-cats>.col{padding:0 6px}
	.row.hto-rail>.col{flex-basis:232px}
	.hto-grid--best>.col{flex-basis:25%;max-width:25%}
	.hto-grid--best>.col:nth-child(n+5){display:none}
}

@media (max-width:1023px){
	.row.hto-hero{grid-template-columns:minmax(0,1fr);padding-top:20px}
	.hto-hero__promos>.col-inner{grid-template-columns:1fr 1fr;grid-template-rows:auto}
	.box.hto-promo{min-height:160px}
	.hto-slide .sb-slide__title{font-size:32px}
	.row.hto-usp-row>.col{flex-basis:50%;max-width:50%}
	.row.hto-usp-row{row-gap:12px}
	.row.hto-cats{flex-wrap:nowrap;margin:0 calc(var(--gutter)*-1);padding:0 calc(var(--gutter) - 6px);overflow-x:auto;scrollbar-width:none}
	.row.hto-cats>.col{flex:0 0 124px;max-width:none}
	.hto-deal>.col-inner{padding:20px}
	.hto-grid--best>.col{flex-basis:33.3333%;max-width:33.3333%}
	.hto-grid--best>.col:nth-child(n+5){display:block}
	.hto-best>.col-inner{grid-template-columns:minmax(0,1fr) auto}
	.hto-best .hto-title .section-title a{grid-column:2}
	.hto-best .tabbed-content>.nav{grid-column:1/-1;grid-row:2;margin-top:12px}
	.hto-best .tab-panels{grid-row:3}
	.row.hto-collection{grid-template-columns:minmax(0,1fr)}
	.box.hto-coll{display:grid;grid-template-columns:1fr 1fr}
	.hto-coll .box-text{padding:24px}
	.hto-coll .sb-display{font-size:24px}
	.hto-campaign .box-text{padding:32px}
	.hto-campaign .sb-display{font-size:28px}
	.row.hto-posts{row-gap:20px}
	.row.hto-posts>.col{flex-basis:50%;max-width:50%}
	.row.hto-footer__grid{grid-template-columns:1fr 1fr;gap:28px 32px}
	.hto-footer__about{grid-column:1/-1}
	.row.hto-footer__pay{grid-template-columns:1fr}
}

@media (min-width:768px){
	/* Máy tính, máy tính bảng: cột link luôn mở (bấm tiêu đề cột cũng không thu lại). */
	.hto-faccordion .accordion-inner{display:block!important}
	.hto-faccordion .accordion-title{cursor:default}
}

@media (max-width:767px){
	.row.hto-hero{padding-top:12px;gap:12px}
	.hto-hero__promos>.col-inner{display:flex;gap:12px;margin:0 -16px;padding:0 16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:16px;scrollbar-width:none}
	.box.hto-promo{flex:0 0 280px;grid-template-columns:72px 1fr;align-items:center;gap:12px;min-height:0;padding:12px;scroll-snap-align:start}
	.hto-promo .box-image{position:relative;inset:auto;width:72px;height:72px;border-radius:var(--r-md);overflow:hidden}
	.hto-promo .box-image img{object-position:88% 82%;transform:scale(1.9);transform-origin:88% 82%}
	.hto-promo .box-text{max-width:none;padding:0}
	.hto-promo .box-text-inner{gap:2px;justify-content:center}
	.hto-promo .sb-promo__title{font-size:18px}
	.hto-promo .button{display:none}
	.hto-slide__body.text-box{max-width:76%}
	.hto-slide__body .text-inner{gap:6px;padding:14px 12px 40px 16px}
	.hto-slide .sb-slide__title{font-size:20px;line-height:1.2}
	.hto-slide .sb-slide__text{display:none}
	.hto-slide .button.hto-btn--lg{height:40px;margin-top:6px;padding:0 16px;font-size:14px}
	.hto-slider .flickity-page-dots{left:0;right:0;bottom:8px;justify-content:center}
	.hto-slider .flickity-prev-next-button{display:none}

	.row.hto-usp-row{width:auto;margin:12px var(--gutter) 0;padding:0;row-gap:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
	.row.hto-usp-row>.col{min-width:0;padding:0}
	.hto-usp-row>.col:nth-child(2n+1){border-right:1px solid var(--border)}
	.hto-usp-row>.col:nth-child(-n+2){border-bottom:1px solid var(--border)}
	.icon-box.hto-usp{align-items:flex-start;gap:8px;padding:12px 10px;border:0;border-radius:0;background:transparent;box-shadow:none}
	a:hover>.icon-box.hto-usp{box-shadow:none}
	a>.icon-box.hto-usp::after{display:none}
	.hto-usp .icon-box-img{width:28px!important;height:28px;border-radius:50%;background:var(--tint);color:var(--primary)}
	.hto-usp .icon-box-img svg,.hto-usp .icon-box-img img{width:16px;height:16px}
	.hto-usp__title{font-size:13px;line-height:1.3}
	.hto-usp__text{font-size:11.5px;line-height:1.35}

	.hto-title.section-title-container{margin-bottom:12px}
	.hto-title .section-title{flex-wrap:nowrap;font-size:18px}
	.hto-title .section-title-main{min-width:0}
	.hto-title .section-title a{flex:none}

	.row.hto-cats{flex-wrap:wrap;margin:0 -6px;padding:0;overflow:visible}
	.row.hto-cats>.col{flex:0 0 25%;max-width:25%}
	.hto-cats .box-category{gap:8px}
	.hto-cats .header-title{font-size:12px}

	.row.hto-deal-row{padding-left:0;padding-right:0}
	.hto-deal>.col-inner{padding:16px 0;border-radius:0}
	.row.hto-rail{gap:10px;padding:0 16px;scroll-padding-inline:16px}
	.row.hto-rail>.col{flex-basis:164px}
	.row.hto-grid{margin:0 -6px;row-gap:12px}
	.row.hto-grid>.col{padding:0 6px}
	.hto-grid--best>.col{flex-basis:50%;max-width:50%}
	.hto-grid--best>.col:nth-child(n+5){display:none}
	.row.hto-grid.hto-grid--coll{flex-wrap:nowrap;gap:10px;margin:0 -16px;padding:0 16px;overflow-x:auto;scrollbar-width:none}
	.row.hto-grid.hto-grid--coll>.col{flex:0 0 164px;max-width:none;padding:0}
	/* Thẻ sản phẩm gọn theo từng khối như bản classic (.sb-deal, .sb-grid--best, .sb-collection). */
	.hto-rail .sb-rating,.hto-rail .sb-badges{display:none}
	.hto-grid--coll .sb-rating{display:none}
	.hto-best .tabbed-content>.nav{margin:12px -16px 0;padding:0 16px}
	.hto-best .tab-panels{margin-top:24px}

	.box.hto-coll{display:flex}
	.hto-coll .box-image{flex:none;aspect-ratio:16/9;min-height:0}
	.hto-coll .box-text{padding:16px}
	.hto-coll .box-text-inner{gap:8px}
	.hto-coll .sb-display{font-size:22px}
	.hto-coll .button{display:none}

	.box.hto-campaign{min-height:0}
	.hto-campaign .box-image{position:relative;inset:auto;order:-1;aspect-ratio:2/1}
	.hto-campaign .box-text{max-width:none;padding:16px}
	.hto-campaign .box-text-inner{gap:8px}
	.hto-campaign .box-text-inner>.button{flex:0 0 100%}
	.hto-campaign .box-text-inner>.button+.button{margin-top:4px}
	.hto-campaign .sb-display{font-size:22px}
	.hto-campaign .hto-box__text{font-size:14px}

	.row.hto-posts{margin:0;row-gap:0}
	.row.hto-posts>.col{flex-basis:100%;max-width:100%;padding:12px 0;border-bottom:1px solid var(--border)}
	.row.hto-posts>.col:first-child{padding-top:0;padding-bottom:14px}
	.row.hto-posts>.col:last-child{padding-bottom:0;border-bottom:0}
	.hto-posts .box-blog-post{display:grid;grid-template-columns:88px minmax(0,1fr);column-gap:12px;row-gap:4px;align-items:center}
	.hto-posts .box-image{grid-column:1;grid-row:1/3;width:88px;height:66px;border:1px solid var(--border)}
	/* Ảnh nhỏ 88×66, ảnh bài đầu 16:9 như bản classic (ô Image height của Blog Posts ghi thẳng tỉ lệ vào thẻ). */
	.hto-posts .box-image .image-cover{height:100%;padding-top:0!important}
	.row.hto-posts>.col:first-child .box-image{width:100%;height:auto;aspect-ratio:16/9}
	.hto-posts .box-text,.hto-posts .box-text-inner{display:contents}
	.hto-post-meta{grid-column:2;grid-row:2;align-self:start;color:var(--text-2);font-weight:400}
	.hto-posts .post-title{grid-column:2;grid-row:1;align-self:end;font-size:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
	.row.hto-posts>.col:first-child .box-blog-post{display:flex;flex-direction:column;gap:8px}
	.row.hto-posts>.col:first-child .post-title{order:1;align-self:stretch;font-size:17px;-webkit-line-clamp:3}
	.row.hto-posts>.col:first-child .hto-post-meta{order:2;align-self:stretch}

	.section.hto-footer{margin-top:32px}
	.hto-footer>.section-content{padding-bottom:calc(92px + env(safe-area-inset-bottom))}
	.row.hto-footer__grid{grid-template-columns:minmax(0,1fr);gap:0;padding-top:24px;padding-bottom:8px}
	.hto-footer__about{margin-bottom:12px}
	.hto-faccordion.accordion{border-top:1px solid rgba(34,32,30,.12)}
	.hto-faccordion .accordion-title{min-height:52px;margin:0;font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;cursor:pointer}
	.hto-faccordion .accordion-title .toggle{display:grid;place-items:center;order:2;position:static;width:18px;height:18px;min-width:0;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:none;color:inherit;opacity:1;line-height:1;transform-origin:50% 50%;transition:transform .2s}
	.hto-faccordion .accordion-title .toggle i{display:none}
	.hto-faccordion .accordion-title .toggle::before{content:"";width:18px;height:18px;background:currentColor;-webkit-mask:var(--hto-i-chev-down) center/contain no-repeat;mask:var(--hto-i-chev-down) center/contain no-repeat}
	.hto-faccordion .accordion-title.active .toggle{transform:rotate(180deg)}
	.hto-fmenu.ux-menu{padding-bottom:10px}
	.hto-fmenu .ux-menu-link__link{min-height:40px}
	.row.hto-footer__pay{gap:16px}
	.hto-footer__logos>.col-inner{display:grid;grid-template-columns:repeat(6,minmax(0,52px));gap:6px}
	.hto-footer__label{grid-column:1/-1;margin-bottom:4px}
	.img.hto-paylogo{width:100%!important}
	.hto-paylogo img{aspect-ratio:52/33}
	.row.hto-footer__legal{flex-direction:column;gap:10px}
}

@media (max-width:379px){
	.icon-box.hto-usp{gap:6px;padding:10px 8px}
	.hto-usp .icon-box-img{width:24px!important;height:24px}
	.hto-usp__title{font-size:12.5px}
}

/* ========== Trang Giới thiệu, Liên hệ (UX Builder trong khung có đường dẫn, template-parts/pages/builder.php) ========== */
.row.hto-about-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;padding-top:16px}
.row.hto-about-hero>.col{max-width:none;min-width:0}
.hto-about-hero__text>.col-inner{display:flex;flex-wrap:wrap;align-items:center;column-gap:12px}
.hto-about-hero__text>.col-inner>:not(.button){flex:0 0 100%}
/* Dòng nhỏ: <span class="sb-eyebrow"> trong một đoạn cỡ chữ nền, như khối chữ của bản classic. */
.hto-about-hero__text .hto-eyebrow-line{margin:0;font-size:inherit;line-height:inherit;color:inherit}
.hto-about-hero__text .sb-display{margin:10px 0 16px;font-size:36px}
.hto-about-hero__text p:not(.hto-eyebrow-line){margin:0 0 12px;font-size:16px;color:var(--text-2);text-wrap:pretty}
/* Bản classic: lề dưới đoạn văn (12px) gộp với lề trên hàng nút (20px); trong khung flex hai lề cộng dồn. */
.hto-about-hero__text .button{margin-top:8px}
.img.hto-about-img{width:100%!important;margin:0}
.hto-about-img .img-inner{aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;background:var(--secondary)}
.hto-about-img img{display:block;width:100%;height:100%;object-fit:cover}

.row.hto-values{padding-left:calc(var(--gutter) - 8px);padding-right:calc(var(--gutter) - 8px)}
.row.hto-values>.col{padding:0 8px}
.hto-values__col>.col-inner{height:100%}
.icon-box.hto-value{display:flex;flex-direction:column;gap:10px;height:100%;margin:0;padding:24px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);color:var(--text)}
.hto-value .icon-box-img{display:grid;place-items:center;height:48px;margin:0;border-radius:var(--r-md);background:var(--primary);color:var(--on-primary)}
.hto-value .icon-box-img .icon,.hto-value .icon-box-img .icon-inner{display:grid;place-items:center;width:auto;height:auto;margin:0;padding:0;line-height:0}
.hto-value .icon-box-img svg,.hto-value .icon-box-img img{display:block;width:22px;height:22px;margin:0;padding:0}
.hto-value .icon-box-text{display:flex;flex-direction:column;gap:10px;padding:0}
.hto-value__title{margin:0;font-family:var(--font-ui);font-size:18px;font-weight:700;line-height:1.55;letter-spacing:0;text-transform:none;color:var(--text)}
.hto-value__text{margin:0;font-size:14px;color:var(--text-2)}

.row.hto-contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:24px;align-items:start}
.row.hto-contact>.col{max-width:none;min-width:0}
.hto-contact__side>.col-inner{display:flex;flex-direction:column;gap:16px}
.hto-builder-page .sb-map iframe{display:block;width:100%;height:100%;border:0}

@media (max-width:1023px){
	.row.hto-about-hero{grid-template-columns:minmax(0,1fr);gap:24px}
	.hto-about-hero__text .sb-display{font-size:32px}
	.row.hto-contact{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:767px){
	.hto-about-hero__text .sb-display{font-size:24px}
	.hto-about-hero__text p:not(.hto-eyebrow-line){font-size:15px}
	.row.hto-values>.hto-values__col+.hto-values__col{margin-top:16px}
	.hto-row .col-inner>.hto-title.section-title-container:last-child{margin-bottom:12px}
	.row.hto-values>.col{flex-basis:100%;max-width:100%}
	.hto-value .icon-box-img{width:28px!important;height:28px;border-radius:50%;background:var(--tint);color:var(--primary)}
	.hto-value .icon-box-img svg,.hto-value .icon-box-img img{width:16px;height:16px}
}

@media (max-width:379px){
	.hto-value .icon-box-img{width:24px!important;height:24px}
}

/* ========== Thẻ tin tức có khung (trang chủ, Tin tức / chuyên mục / tìm bài, bài viết liên quan) ==========
 * Cùng khung với bài nổi bật của trang Tin tức (.sb-feature): viền --border, bo --r-lg, nền --surface, ảnh bo --r-md. */
.hto-posts .box-blog-post,.sb-post-list .sb-post,.sb-post-list .sb-post:last-child,.sb-posts--related .sb-post{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;transition:border-color .15s,box-shadow .15s}
.hto-posts .box-blog-post:hover,.sb-post-list .sb-post:hover,.sb-posts--related .sb-post:hover{border-color:var(--border-strong);box-shadow:var(--shadow-sm)}
.hto-posts .box-blog-post{height:100%;padding:12px}
.sb-posts--related .sb-post a{height:100%;padding:12px}
.sb-post-list{gap:12px}
.sb-post-list .sb-post a{padding:16px}

/* Bài viết liên quan: 4 bài một hàng trên máy tính (kể cả khi chỉ có 3 bài). */
@media (min-width:1024px){
	.sb-posts.sb-posts--related,.sb-posts.sb-posts--related:has(> :nth-child(3):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}
}

@media (max-width:767px){
	.row.hto-posts{row-gap:12px}
	.row.hto-posts>.col,.row.hto-posts>.col:first-child,.row.hto-posts>.col:last-child{padding:0;border-bottom:0}
	.hto-posts .box-image{border:0}
	.sb-post-list .sb-post a{padding:12px}
	/* Lưới .sb-posts trên điện thoại là danh sách có vạch ngăn (wp.css): bài liên quan thành thẻ rời. */
	.sb-posts.sb-posts--related{gap:12px}
	.sb-posts--related .sb-post,.sb-posts--related .sb-post:first-child,.sb-posts--related .sb-post:last-child{padding:0;border:1px solid var(--border)}
	.sb-posts--related .sb-post:hover{border-color:var(--border-strong)}
	.sb-posts--related .sb-post .sb-media{border:0}
}

/* Sao đánh giá: 5 sao viền, phần tô vàng theo điểm (--r 4.5 → bốn sao rưỡi). Mỗi sao là một ô vuông --s, mask lặp ngang;
   sao tô có cùng nét viền với sao rỗng để phủ kín, không lộ vệt viền xám quanh sao vàng. */
.hto-stars{--s:18px;position:relative;display:block;flex:none;width:calc(var(--s)*5);height:var(--s)}
.hto-stars--xs{--s:16px}
/* Ô điểm chung ở tab Đánh giá: dải sao đứng giữa, riêng một dòng dưới điểm (điện thoại: cùng hàng với điểm). */
.sb-rv-score .hto-stars{margin:8px auto 4px}
@media (max-width:767px){ .sb-rv-score .hto-stars{margin:0} }
/* Tên sản phẩm ở thẻ là h3 nên nhận text-wrap:balance chung của h1–h3: hai dòng bị cân bằng, dòng đầu ngắt sớm để trống
   nhiều bên phải. pretty lấp đầy dòng đầu mà vẫn tránh để một chữ lẻ ở dòng cuối. */
.woocommerce-loop-product__title{text-wrap:pretty}
/* Thẻ sản phẩm chèn trong bài: tên sản phẩm dùng kiểu chữ của thẻ, không nhận kiểu tiêu đề mục (h3) của bài viết. */
.sb-prose li.product .woocommerce-loop-product__title{margin:0;font:500 14px/1.4 var(--font-ui)}
/* Thẻ sản phẩm 2 cột trên điện thoại hẹp: sao nhỏ lại để dải sao + điểm + lượt đánh giá vừa một hàng. */
@media (max-width:389px){ .sb-product__body .hto-stars--xs{--s:14px} }
.hto-stars::before,.hto-stars::after{content:"";position:absolute;top:0;left:0;height:100%;-webkit-mask:var(--m) 0 0/var(--s) var(--s) repeat-x;mask:var(--m) 0 0/var(--s) var(--s) repeat-x}
.hto-stars::before{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1L3.2 9.5l6.1-.9L12 3z'/%3E%3C/svg%3E");width:100%;background:var(--border-strong)}
.hto-stars::after{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1L3.2 9.5l6.1-.9L12 3z'/%3E%3C/svg%3E");width:calc(var(--r)*20%);background:#D69E00}

/* Quà tặng kèm ở trang sản phẩm: ảnh nhỏ của sản phẩm quà trước tên, để khách nhìn là biết món gì. */
.sb-addons .sb-check{min-height:56px;padding:6px 14px 6px 12px}
.sb-addons .sb-addon__img{flex:none;width:44px;height:44px;border-radius:var(--r-sm);object-fit:cover;background:var(--secondary)}

/* Bảng trong bài dạng khối (figure.wp-block-table) giữ kiểu bảng của thiết kế: CSS lõi của khối kẻ vạch đậm 3px dưới hàng tiêu đề. */
.sb-prose .wp-block-table thead,.sb-prose .wp-block-table tfoot{border:0}

/* Hộp chọn khu vực giao hàng: phần đầu (tiêu đề, ô tìm, khu vực đang chọn) đứng yên, chỉ danh sách cuộn; chiều cao cố định
   để hộp không co giật khi gõ tìm. Thành phố lớn xếp ô đều cột, tỉnh thành xếp danh sách, tỉnh đang chọn có dấu check.
   Điện thoại: hộp bám đáy màn hình, trượt lên như bảng chọn của ứng dụng. */
.sb-location-dialog{height:min(600px,calc(100dvh - 64px));max-height:none;overflow:hidden}
.sb-location-dialog__panel{height:100%;gap:0;padding:0}
.sb-location-dialog__top{display:flex;flex-direction:column;gap:12px;padding:12px 20px 16px;border-bottom:1px solid var(--border)}
.sb-location-dialog__head{margin-right:-10px}
.sb-location-dialog__search{position:relative;display:block}
.sb-location-dialog__search>.sb-ic{position:absolute;top:50%;left:14px;color:var(--text-2);transform:translateY(-50%);pointer-events:none}
.sb-location-dialog__search .sb-input{padding-left:44px}
.sb-location-dialog__now{display:flex;align-items:center;gap:6px;margin:0;font-size:13px;color:var(--text-2)}
.sb-location-dialog__now .sb-ic{color:var(--primary)}
.sb-location-dialog__now b{color:var(--text);font-weight:600}
.sb-location-dialog__body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px 20px 20px}
.sb-location-dialog__group{margin-top:16px}
.sb-location-dialog__label{margin:0 0 8px;font-size:12px;font-weight:600;line-height:1.4;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2)}
.sb-location-dialog__list{display:grid;gap:8px;margin:0;padding:0;list-style:none;overflow:visible}
.sb-location-dialog__list--city{grid-template-columns:repeat(3,minmax(0,1fr))}
/* Hàng tỉnh có lề trong 12px cho nền khi rê chuột / đang chọn: kéo ra ngoài 12px để chữ thẳng mép với nhãn nhóm và ô thành phố. */
.sb-location-dialog__list--province{grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 16px;margin:0 -12px}
.sb-location-opt{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:44px;padding:0 12px;border:1px solid transparent;border-radius:var(--r-md);background:transparent;color:var(--text);font:400 14px/1.3 var(--font-ui);text-align:left;cursor:pointer;transition:background .15s,border-color .15s}
.sb-location-opt .sb-ic{color:var(--primary);visibility:hidden}
.sb-location-opt:hover{background:var(--secondary)}
.sb-location-opt[aria-pressed="true"]{background:var(--tint);color:var(--primary);font-weight:600}
.sb-location-opt[aria-pressed="true"] .sb-ic{visibility:visible}
.sb-location-dialog__list--city .sb-location-opt{justify-content:center;gap:4px;padding:0 6px;border-color:var(--border);background:var(--surface);text-align:center}
.sb-location-dialog__list--city .sb-location-opt:hover{border-color:var(--border-strong);background:var(--surface)}
.sb-location-dialog__list--city .sb-location-opt[aria-pressed="true"]{border-color:var(--primary);background:var(--tint)}
.sb-location-dialog__list--city .sb-location-opt .sb-ic{display:none}
.sb-location-dialog__list--city .sb-location-opt[aria-pressed="true"] .sb-ic{display:inline-block}
.sb-location-dialog__empty{margin:32px 0 0;font-size:14px;text-align:center;color:var(--text-2)}
@media (max-width:767px){
	.sb-location-dialog{width:100%;max-width:100%;height:min(88dvh,720px);margin:auto 0 0;border-radius:var(--r-lg) var(--r-lg) 0 0}
	.sb-location-dialog__top{padding:8px 16px 12px}
	.sb-location-dialog__body{padding:0 16px calc(16px + env(safe-area-inset-bottom))}
	.sb-location-dialog__list--city .sb-location-opt{padding:0 4px;font-size:13px}
	.sb-location-dialog__list--province{grid-template-columns:1fr;gap:0;margin:0 -16px}
	.sb-location-dialog__list--province li:not(:last-child){border-bottom:1px solid var(--border)}
	.sb-location-dialog__list--province .sb-location-opt{padding:0 16px;border-radius:0}
}
@media (max-width:767px) and (prefers-reduced-motion:no-preference){
	.sb-location-dialog[open]{animation:hto-sheet-up .25s ease-out}
	@keyframes hto-sheet-up{from{transform:translateY(100%)}}
}

/* Đầu trang trôi đi theo trang khi cuộn (không dính). theme.js thấy header không còn sticky nên đặt --header-h = 0:
   bộ lọc, ảnh sản phẩm, mục lục… dính sát mép trên; không thu gọn header. */
.sb-header,.admin-bar .sb-header,.hto-header{position:relative;top:auto}

/* ========== Chuyển động ========== */
/* Thẻ sản phẩm: ảnh thứ hai trượt từ trái vào, hiện dần đè lên ảnh chính khi rê chuột. Máy không có chuột thì ẩn hẳn
   (display:none) để trình duyệt không tải ảnh lười này. */
.sb-product__thumb{overflow:hidden}
.sb-product__alt{display:none}
@media (hover:hover) and (pointer:fine){
	.sb-product__alt{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:translateX(-100px);transition:opacity .5s,transform .5s;pointer-events:none}
	.woocommerce ul.products li.product:hover .sb-product__alt{opacity:1;transform:none}
	/* Ảnh bài viết ở trang Tin tức, bài liên quan: phóng nhẹ như "Image hover: Zoom" của Flatsome ở trang chủ. */
	.sb-post .sb-media>img{transition:transform .6s}
	.sb-post:hover .sb-media>img{transform:scale(1.1)}
}

/* "Fade In Up" (ô Animate của Flatsome): trượt 32px thay vì 70px, nhanh hơn mặc định 1,6 giây. Chỉ đặt lúc chưa hiện
   xong: sau đó quy tắc của Flatsome ([data-animated=true]) đưa khối về chỗ. */
[data-animate=fadeInUp][data-animate-transform]:not([data-animated=true]){transform:translate3d(0,32px,0)}
[data-animate=fadeInUp][data-animate-transition]{transition:transform .8s cubic-bezier(.22,.61,.36,1),opacity .6s ease-out}

/* Phản hồi khi bấm: trái tim đập khi thêm vào yêu thích, biểu tượng giỏ nảy khi thêm sản phẩm (lớp do theme.js gắn). */
@keyframes hto-pop{0%{transform:scale(1)}35%{transform:scale(1.25)}70%{transform:scale(.94)}100%{transform:scale(1)}}
@keyframes hto-bump{0%,100%{transform:none}30%{transform:translateY(-5px) scale(1.12)}60%{transform:translateY(1px) scale(.97)}}
[data-wish].hto-pop .sb-wish__c{animation:hto-pop .45s ease-out}
.sb-util__icon.hto-bump{animation:hto-bump .5s ease-out}
.sb-util__icon.hto-bump .sb-cart-count{animation:hto-pop .5s ease-out .1s}

/* Chuyển trang: trang mới hiện dần thay vì nháy trắng (trình duyệt hỗ trợ View Transitions giữa hai trang). */
@media (prefers-reduced-motion:no-preference){
	@view-transition{navigation:auto}
	::view-transition-old(root),::view-transition-new(root){animation-duration:.2s}
}
@media (prefers-reduced-motion:reduce){
	.sb-product__alt{transform:none;transition:opacity .2s}
	.sb-post .sb-media>img,.sb-post:hover .sb-media>img{transform:none}
}