/* * Giao diện theo Claude Design 18/10 (inc/ly-design.php). * Bên trong #ly-h / #ly-f / #ly-m: bỏ mọi style của Flatsome, trả về mặc định trình duyệt như môi trường của design; * style chính nằm inline trong markup (giống design). Rule theo class bên dưới viết kèm :is(#ly-h,#ly-f,#ly-m) để thắng phần reset. * SVG không reset (revert sẽ xoá thuộc tính fill/stroke viết trên thẻ). */ :is(#ly-h,#ly-f,#ly-m,#ly-x,#ly-cd) :not(svg,svg *):not(:where(.ly-keep,.ly-keep *)){all:revert} :is(#ly-h,#ly-f,#ly-m,#ly-x,#ly-cd) [hidden][hidden]:not(#ly-z){display:none !important} /* Thuộc tính kế thừa từ body của Flatsome (line-height 1.6, cỡ chữ…) → về mặc định trình duyệt ở phần tử gốc */ :is(#ly-h,#ly-f,#ly-m,#ly-x,#ly-cd){line-height:normal;font-size:16px;font-weight:400;letter-spacing:normal;word-spacing:normal;text-align:start;text-transform:none;font-style:normal;white-space:normal;text-rendering:auto;-webkit-font-smoothing:auto} :is(#ly-h,#ly-f,#ly-m,#ly-x,#ly-cd) :is(input,button,select,textarea){font-family:inherit} :is(#ly-h,#ly-f,#ly-m,#ly-x,#ly-cd) img{max-width:none} #wrapper,#main{background:transparent} body.ly-on{margin:0} /* ---------- Header ---------- */ @keyframes ly-ann{from{transform:translateX(0)}to{transform:translateX(-50%)}} #ly-h .ly-ann-track{animation:ly-ann 30s linear infinite} #ly-h .ly-ann:hover .ly-ann-track{animation-play-state:paused} #ly-h .ly-navlink{position:relative;transition:color .2s} #ly-h .ly-navlink::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;background:#34C759;transform:scaleX(0);transition:transform .25s ease;transform-origin:left} #ly-h .ly-navlink:hover{color:#34C759 !important} #ly-h .ly-navlink:hover::after{transform:scaleX(1)} #ly-h .ly-icon-btn{transition:background .2s} #ly-h .ly-icon-btn:hover{background:rgba(255,255,255,.16)} #ly-h .ly-search-box{transition:box-shadow .2s} #ly-h .ly-search-box:focus-within{box-shadow:0 0 0 4px rgba(255,225,77,.55)} #ly-h .ly-cat-btn:hover{filter:brightness(.95)} #ly-h .ly-cat-btn[aria-expanded=true] .ly-chev{transform:rotate(180deg)} #ly-h .ly-strip-wrap{transition:max-height .3s ease, opacity .3s ease} /* Design: Trang chủ / danh mục / sản phẩm – header dính trên cùng (desktop); cuộn > 60px thì thu dải thông báo + đổ bóng */ @media (min-width: 961px){ body:is(.home,.tax-product_cat,.post-type-archive-product,.single-product,.search-results.woocommerce) #ly-h{position:sticky !important;top:0;z-index:100 !important;transition:box-shadow .3s ease} body:is(.home,.tax-product_cat,.post-type-archive-product,.single-product,.search-results.woocommerce) #ly-h.is-compact{box-shadow:0 6px 18px rgba(0,0,0,0.12) !important} body:is(.home,.tax-product_cat,.post-type-archive-product,.single-product,.search-results.woocommerce) #ly-h.is-compact .ly-strip-wrap{max-height:0 !important;opacity:0 !important;border-bottom-width:0 !important} } @media (max-width: 1280px){#ly-h .ly-nav2{gap:20px !important}} @media (max-width: 1200px){#ly-h .ly-free{background:#EAF9EE;border-radius:8px;padding:6px 10px}#ly-h .ly-free-text{display:none}#ly-h .ly-free-short{display:inline !important}} #ly-h .ly-mob{display:none !important} @media (max-width: 960px){ #ly-h .ly-strip-wrap > div{padding:0 12px !important;height:30px !important;font-size:12px !important} #ly-h .ly-ann{-webkit-mask-image:none !important;mask-image:none !important} #ly-h .ly-hide-sm{display:none !important} #ly-h .ly-desk{display:none !important} #ly-h .ly-mob{display:block !important} } @media (prefers-reduced-motion: reduce){#ly-h .ly-ann-track{animation:none}} /* ---------- Mega menu ---------- */ #ly-h .ly-mlink{transition:color .15s, padding-left .2s} #ly-h .ly-mlink:hover{color:#34C759 !important;padding-left:4px} #ly-h .ly-quick{transition:background .2s, border-color .2s} #ly-h .ly-quick:hover{background:#EAF9EE !important;border-color:#34C759 !important} @media (max-width: 1100px){#ly-h .ly-groups{grid-template-columns:repeat(2,minmax(0,max-content)) !important;justify-content:start !important;column-gap:48px !important}} @media (max-width: 960px){ #ly-h .ly-mega{grid-template-columns:1fr !important;padding:20px !important} #ly-h .ly-groups{grid-template-columns:1fr 1fr !important} #ly-h .ly-mega-side{border-right:none !important;padding-right:0 !important} #ly-h .ly-mega-img{display:none !important} } .lc-m-subbar{display:none !important} /* ---------- Footer ---------- */ #ly-f .ly-flink{transition:color .15s} #ly-f .ly-flink:hover{color:#34C759 !important} #ly-f .ly-fsoc{transition:transform .2s} #ly-f .ly-fsoc:hover{transform:translateY(-2px)} #ly-f .ly-fcta{transition:filter .2s} #ly-f .ly-fcta:hover{filter:brightness(.95)} @media (max-width: 1100px){ #ly-f .ly-fcols{grid-template-columns:repeat(4,max-content) !important;row-gap:28px !important} #ly-f .ly-fbrand{grid-column:1 / -1;flex-direction:row !important;flex-wrap:wrap;align-items:center !important;gap:16px 40px !important;padding-bottom:24px;border-bottom:1px solid #E6EEE0} #ly-f .ly-fbrand p{flex:1 1 260px;max-width:360px !important} #ly-f .ly-fsocwrap{margin-top:0 !important} } @media (max-width: 900px){ #ly-f .ly-fsupport{grid-template-columns:1fr !important} #ly-f .ly-fperks{display:flex !important;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -24px;padding:0 24px 4px;scrollbar-width:none} #ly-f .ly-fperks::-webkit-scrollbar{display:none} #ly-f .ly-fperks > *{flex:0 0 auto;scroll-snap-align:start;white-space:nowrap} } @media (max-width: 720px){#ly-f .ly-fcols{grid-template-columns:repeat(2,minmax(0,1fr)) !important;column-gap:24px !important}} @media (max-width: 480px){#ly-f .ly-fbrand{flex-direction:column !important;align-items:flex-start !important}} @media (max-width: 480px){#ly-f .ly-fbrand p{flex:0 0 auto !important;max-width:none !important}#ly-f .ly-fbrand{gap:12px !important}#ly-f .ly-fcols nav{font-size:13px !important}#ly-f .ly-fcols nav a{white-space:nowrap}#ly-f .ly-fcols{column-gap:16px !important}} /* ---------- Trang chủ + danh mục (Main.dc.html, Category.dc.html dùng chung) ---------- */ #ly-m:is(.ly-home,.ly-cat) a{color:#34C759} #ly-m:is(.ly-home,.ly-cat) a:hover{color:#28A84A} @media (max-width: 900px){#ly-m:is(.ly-home,.ly-cat) .ly-zalobadge{display:none !important}} #ly-m:is(.ly-home,.ly-cat) .ly-logos{flex-wrap:nowrap !important} @media (max-width: 900px){#ly-m:is(.ly-home,.ly-cat) .ly-logos{justify-content:flex-start !important;overflow-x:auto;scrollbar-width:none;max-width:100%;padding:4px 24px;margin:0 -24px;gap:28px !important} #ly-m:is(.ly-home,.ly-cat) .ly-logos::-webkit-scrollbar{display:none} #ly-m:is(.ly-home,.ly-cat) .ly-logos img{height:42px !important;flex-shrink:0}} @media (max-width: 900px){#ly-m:is(.ly-home,.ly-cat) .ly-hscroll{display:flex !important;grid-template-columns:none !important;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px !important;max-width:none !important;margin:0 -24px !important;padding:4px 24px 12px !important;scrollbar-width:none} #ly-m:is(.ly-home,.ly-cat) .ly-hscroll::-webkit-scrollbar{display:none} #ly-m:is(.ly-home,.ly-cat) .ly-step-arrow{} #ly-m:is(.ly-home,.ly-cat) .ly-hscroll > *{flex:0 0 46% !important;max-width:none !important;scroll-snap-align:start;min-width:0} #ly-m:is(.ly-home,.ly-cat) .ly-news > div{display:contents !important} #ly-m:is(.ly-home,.ly-cat) .ly-news-row{flex-direction:column !important;min-height:0 !important} #ly-m:is(.ly-home,.ly-cat) .ly-news-row > div:first-child{flex:0 0 auto !important;aspect-ratio:16 / 9}} @media (max-width: 560px){#ly-m:is(.ly-home,.ly-cat) .ly-hscroll > *{flex-basis:80% !important}} @media (max-width: 900px){#ly-m:is(.ly-home,.ly-cat) .ly-gv.ly-hscroll{margin:0 -16px !important;padding:2px 16px 8px !important} #ly-m:is(.ly-home,.ly-cat) .ly-gv.ly-hscroll > *{flex-basis:300px !important}} @media (max-width: 900px){#ly-m:is(.ly-home,.ly-cat) .ly-ttrack{transform:none !important;overflow-x:auto;scroll-snap-type:x mandatory} #ly-m:is(.ly-home,.ly-cat) .ly-tcard{flex-basis:calc((100% - 16px) / 2) !important;scroll-snap-align:start} #ly-m:is(.ly-home,.ly-cat) .ly-tnav{display:none !important}} @media (max-width: 560px){#ly-m:is(.ly-home,.ly-cat) .ly-tcard{flex-basis:88% !important}} #ly-m:is(.ly-home,.ly-cat) .ly-trust{transition:background .2s} #ly-m:is(.ly-home,.ly-cat) .ly-trust:hover{background:#F6FBF2} #ly-m:is(.ly-home,.ly-cat) .ly-trust + .ly-trust{border-left:1px solid #EEF2E8} @media (max-width: 900px){#ly-m:is(.ly-home,.ly-cat) .ly-trustbar{display:flex !important;overflow-x:auto;scroll-snap-type:x mandatory;background:transparent !important;border:none !important;box-shadow:none !important;gap:10px;margin:0 -24px !important;padding:2px 24px 6px;scrollbar-width:none} #ly-m:is(.ly-home,.ly-cat) .ly-trustbar::-webkit-scrollbar{display:none} #ly-m:is(.ly-home,.ly-cat) .ly-trust{flex:0 0 44%;scroll-snap-align:start;background:#ffffff;border:1px solid #EEF2E8 !important;border-radius:8px;padding:12px 14px !important}} @media (max-width: 560px){#ly-m:is(.ly-home,.ly-cat) .ly-trust{flex-basis:76%}} #ly-m:is(.ly-home,.ly-cat) .ly-hero-nav{opacity:0;transition:opacity .25s, background .2s} #ly-m:is(.ly-home,.ly-cat) .ly-hero:hover .ly-hero-nav{opacity:1} #ly-m:is(.ly-home,.ly-cat) .ly-hero-nav:hover{background:#ffffff !important} @media (max-width: 760px){#ly-m:is(.ly-home,.ly-cat) .ly-hero-nav{display:none !important}} #ly-m:is(.ly-home,.ly-cat) .ly-logo-award{filter:grayscale(1);opacity:.6;transition:filter .3s, opacity .3s} #ly-m:is(.ly-home,.ly-cat) .ly-logo-award:hover{filter:none;opacity:1} #ly-m:is(.ly-home,.ly-cat) .ly-pillar img{transition:transform .5s ease} #ly-m:is(.ly-home,.ly-cat) .ly-pillar:hover img{transform:scale(1.05)} #ly-m:is(.ly-home,.ly-cat) .ly-step{transition:transform .25s ease, box-shadow .25s ease} #ly-m:is(.ly-home,.ly-cat) .ly-step img{transition:transform .5s ease} #ly-m:is(.ly-home,.ly-cat) .ly-step:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(20,60,30,.14) !important} #ly-m:is(.ly-home,.ly-cat) .ly-step:hover img{transform:scale(1.04)} @media (min-width: 901px) and (max-width: 1100px){#ly-m:is(.ly-home,.ly-cat) .ly-steps{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px !important}} @media (max-width: 1100px){#ly-m:is(.ly-home,.ly-cat) .ly-step-arrow{display:none !important}} #ly-m:is(.ly-home,.ly-cat) .ly-news-row img{transition:transform .4s ease} #ly-m:is(.ly-home,.ly-cat) .ly-card:hover .ly-news-row img{transform:none} @media (max-width: 520px){#ly-m:is(.ly-home,.ly-cat) .ly-news-row{flex-direction:column !important} #ly-m:is(.ly-home,.ly-cat) .ly-news-row > div:first-child{flex-basis:auto !important;aspect-ratio:16/9}} #ly-m:is(.ly-home,.ly-cat) .ly-g3q{grid-template-columns:repeat(3,minmax(0,1fr)) !important} #ly-m:is(.ly-home,.ly-cat) .ly-g4{grid-template-columns:repeat(4,minmax(0,1fr)) !important} #ly-m:is(.ly-home,.ly-cat) .ly-gv{grid-template-columns:repeat(3,minmax(0,1fr)) !important} #ly-m:is(.ly-home,.ly-cat) .ly-ticket{transition:transform .2s ease, box-shadow .2s ease} #ly-m:is(.ly-home,.ly-cat) .ly-ticket:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(20,60,30,.14) !important} @media (max-width: 900px){#ly-m:is(.ly-home,.ly-cat) .ly-g4{grid-template-columns:repeat(2,minmax(0,1fr)) !important}} #ly-m:is(.ly-home,.ly-cat) .ly-tab{transition:background .2s, color .2s, box-shadow .2s} #ly-m:is(.ly-home,.ly-cat) .ly-btab{transition:background .2s, color .2s, padding .2s} #ly-m:is(.ly-home,.ly-cat) .ly-btab[aria-selected="false"]:hover{background:rgba(14,58,28,0.92) !important} #ly-m:is(.ly-home,.ly-cat) .ly-btab:focus:not(:focus-visible){outline:none} @media (max-width: 760px){#ly-m:is(.ly-home,.ly-cat) .ly-btabs{position:static !important;justify-content:flex-start !important;overflow-x:auto;padding:8px 0 0 !important} #ly-m:is(.ly-home,.ly-cat) .ly-btab{border-radius:999px !important}} #ly-m:is(.ly-home,.ly-cat) .ly-card{transition:transform .25s ease, box-shadow .25s ease} #ly-m:is(.ly-home,.ly-cat) .ly-card:hover{transform:translateY(-4px);box-shadow:0 12px 26px rgba(0,0,0,.12) !important} #ly-m:is(.ly-home,.ly-cat) .ly-card img{transition:transform .35s ease} #ly-m:is(.ly-home,.ly-cat) .ly-card:hover img{transform:scale(1.03)} #ly-m:is(.ly-home,.ly-cat) .ly-btn{transition:filter .2s ease, transform .1s ease} #ly-m:is(.ly-home,.ly-cat) .ly-btn:hover{filter:brightness(.94)} #ly-m:is(.ly-home,.ly-cat) .ly-btn:active{transform:scale(.97)} #ly-m:is(.ly-home,.ly-cat) a:focus-visible,#ly-m:is(.ly-home,.ly-cat) button:focus-visible,#ly-m:is(.ly-home,.ly-cat) input:focus-visible{outline:3px solid #FFB020;outline-offset:2px} #ly-m:is(.ly-home,.ly-cat) .ly-fab{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.2);text-decoration:none;transition:transform .2s} #ly-m:is(.ly-home,.ly-cat) .ly-fab:hover{transform:scale(1.08)} @keyframes ly-pulse{0%{box-shadow:0 0 0 0 rgba(52,199,89,.55)}70%{box-shadow:0 0 0 14px rgba(52,199,89,0)}100%{box-shadow:0 0 0 0 rgba(52,199,89,0)}} #ly-m:is(.ly-home,.ly-cat) .ly-fab-call{animation:ly-pulse 2s infinite} @media (prefers-reduced-motion: reduce){#ly-m:is(.ly-home,.ly-cat) .ly-card,#ly-m:is(.ly-home,.ly-cat) .ly-card img,#ly-m:is(.ly-home,.ly-cat) .ly-btn{transition:none} #ly-m:is(.ly-home,.ly-cat) .ly-fab-call{animation:none}} @keyframes ly-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} #ly-m:is(.ly-home,.ly-cat) .ly-marquee-track{animation:ly-marquee 28s linear infinite} #ly-m:is(.ly-home,.ly-cat) .ly-marquee-wrap:hover .ly-marquee-track{animation-play-state:paused} @media (prefers-reduced-motion: reduce){#ly-m:is(.ly-home,.ly-cat) .ly-marquee-track{animation:none}} @media (max-width: 760px){#ly-m:is(.ly-home,.ly-cat) .ly-hero{aspect-ratio:4 / 5 !important} #ly-m:is(.ly-home,.ly-cat) .ly-hero-d{display:none !important} #ly-m:is(.ly-home,.ly-cat) .ly-hero-m{display:block !important} #ly-m:is(.ly-home,.ly-cat) .ly-trust{flex-basis:calc(50% - 5px) !important;border:1px solid #EEF2E8 !important;background:#ffffff !important;padding:10px !important;gap:8px !important;min-width:0} #ly-m:is(.ly-home,.ly-cat) .ly-trust > span:last-child{min-width:0} #ly-m:is(.ly-home,.ly-cat) .ly-trust strong,#ly-m:is(.ly-home,.ly-cat) .ly-trust > span:last-child > span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block} #ly-m:is(.ly-home,.ly-cat) .ly-trust > span:first-child{width:32px !important;height:32px !important} #ly-m:is(.ly-home,.ly-cat) .ly-trust > span:first-child svg{width:20px;height:20px} #ly-m:is(.ly-home,.ly-cat) .ly-trust strong{font-size:13px !important} #ly-m:is(.ly-home,.ly-cat) .ly-trust > span:last-child > span{font-size:11px !important} #ly-m:is(.ly-home,.ly-cat) .ly-about{flex-wrap:nowrap !important;align-items:flex-start !important;gap:14px !important;padding:24px 16px 20px !important} #ly-m:is(.ly-home,.ly-cat) .ly-awards{display:none !important} #ly-m:is(.ly-home,.ly-cat) .ly-about-m{display:block !important;flex-shrink:0} #ly-m:is(.ly-home,.ly-cat) .ly-about-t{align-items:flex-start !important;text-align:left !important;gap:8px !important;flex:1 1 auto !important} #ly-m:is(.ly-home,.ly-cat) .ly-about-t h2{font-family:'Oswald',sans-serif !important;font-weight:500 !important;font-size:20px !important;letter-spacing:.3px} #ly-m:is(.ly-home,.ly-cat) .ly-about-t p{font-size:14px !important;line-height:1.5 !important;max-width:none !important} #ly-m:is(.ly-home,.ly-cat) .ly-about-t a{display:none !important} #ly-m:is(.ly-home,.ly-cat) .ly-about{align-items:center !important} #ly-m:is(.ly-home,.ly-cat) .ly-pricerow{flex-wrap:nowrap !important;gap:6px !important} #ly-m:is(.ly-home,.ly-cat) .ly-pricerow > span:first-child{font-size:18px !important} #ly-m:is(.ly-home,.ly-cat) .ly-pricerow > span:last-child{font-size:12px !important} #ly-m:is(.ly-home,.ly-cat) .ly-timer > span:nth-child(2){display:none}} @media (max-width: 760px){#ly-m:is(.ly-home,.ly-cat) > section{padding-left:12px !important;padding-right:12px !important} #ly-m:is(.ly-home,.ly-cat) .ly-hscroll,#ly-m:is(.ly-home,.ly-cat) .ly-trustbar{margin-left:-12px !important;margin-right:-12px !important;padding-left:12px !important;padding-right:12px !important} #ly-m:is(.ly-home,.ly-cat) .ly-flash{padding-left:0 !important;padding-right:0 !important} #ly-m:is(.ly-home,.ly-cat) .ly-flash > div{border-radius:0 !important;padding:12px !important} #ly-m:is(.ly-home,.ly-cat) .ly-g4,#ly-m:is(.ly-home,.ly-cat) .ly-g3{gap:8px !important} #ly-m:is(.ly-home,.ly-cat) .ly-chips{flex-direction:column !important;align-items:flex-start !important;flex-wrap:nowrap !important;gap:4px !important} #ly-m:is(.ly-home,.ly-cat) .ly-chips > span{white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis} #ly-m:is(.ly-home,.ly-cat) .ly-rate{white-space:nowrap;font-size:11px !important;gap:4px} #ly-m:is(.ly-home,.ly-cat) .ly-awd{left:6px !important;bottom:6px !important;gap:4px !important} #ly-m:is(.ly-home,.ly-cat) .ly-awd span{padding:2px 3px !important;border-radius:5px !important} #ly-m:is(.ly-home,.ly-cat) .ly-awd img{height:18px !important} #ly-m:is(.ly-home,.ly-cat) .ly-ftag{height:18px !important;top:14px !important;right:12px !important} #ly-m:is(.ly-home,.ly-cat) .ly-off{font-size:10px !important;padding:2px 6px !important;top:14px !important;left:14px !important} #ly-m:is(.ly-home,.ly-cat) .ly-cb-d{display:none !important} #ly-m:is(.ly-home,.ly-cat) .ly-cb-m{display:block !important}} @media (max-width: 900px){#ly-m:is(.ly-home,.ly-cat) .ly-news .ly-news-row{flex:0 0 46% !important;scroll-snap-align:start;min-height:0 !important} #ly-m:is(.ly-home,.ly-cat) .ly-news > a{min-height:0}} @media (max-width: 560px){#ly-m:is(.ly-home,.ly-cat) .ly-news .ly-news-row,#ly-m:is(.ly-home,.ly-cat) .ly-news > a{flex-basis:82% !important} #ly-m:is(.ly-home,.ly-cat) .ly-news p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:14px !important} #ly-m:is(.ly-home,.ly-cat) .ly-news h3{font-size:18px !important} #ly-m:is(.ly-home,.ly-cat) .ly-news > a > div:last-child,#ly-m:is(.ly-home,.ly-cat) .ly-news-row > div:last-child{padding:14px 16px 16px !important} #ly-m:is(.ly-home,.ly-cat) .ly-tt{font-size:26px !important}} @media (max-width: 760px){#ly-m:is(.ly-home,.ly-cat) .ly-inner{padding-left:0 !important;padding-right:0 !important} #ly-m:is(.ly-home,.ly-cat) .ly-about{flex-direction:column !important;flex-wrap:nowrap !important;align-items:stretch !important;padding:28px 0 20px !important;gap:16px !important} #ly-m:is(.ly-home,.ly-cat) .ly-about-m{display:none !important} #ly-m:is(.ly-home,.ly-cat) .ly-about-t{order:1;align-items:flex-start !important;text-align:left !important;gap:10px !important} #ly-m:is(.ly-home,.ly-cat) .ly-about-t h2{font-size:24px !important} #ly-m:is(.ly-home,.ly-cat) .ly-about-t p{font-size:15px !important;line-height:1.6 !important} #ly-m:is(.ly-home,.ly-cat) .ly-about-t a{display:inline-flex !important;font-size:14px !important} #ly-m:is(.ly-home,.ly-cat) .ly-about-strip{order:2;display:flex !important;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -12px;padding:4px 12px 8px;scrollbar-width:none} #ly-m:is(.ly-home,.ly-cat) .ly-about-strip::-webkit-scrollbar{display:none} #ly-m:is(.ly-home,.ly-cat) > .ly-flash > div{padding:12px !important}} @media (max-width: 760px){#ly-m:is(.ly-home,.ly-cat) .ly-about-strip{display:none !important} #ly-m:is(.ly-home,.ly-cat) .ly-about-cf{order:0;display:block !important;width:100%} #ly-m:is(.ly-home,.ly-cat) .ly-about-t{align-items:center !important;text-align:center !important} #ly-m:is(.ly-home,.ly-cat) .ly-about{padding:24px 0 8px !important} #ly-m:is(.ly-home,.ly-cat) .ly-vwrap{padding-bottom:20px !important}} @media (max-width: 760px){#ly-m:is(.ly-home,.ly-cat) .ly-mcart{display:flex !important} #ly-m:is(.ly-home,.ly-cat) .ly-fabs{bottom:170px !important} #ly-m:is(.ly-home,.ly-cat){padding-bottom:160px}} @keyframes ly-sheet{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}} @media (min-width: 761px){#ly-m:is(.ly-home,.ly-cat) .ly-qv-panel{border-radius:16px !important;margin-bottom:5vh;max-height:85vh !important}} @media (max-width: 760px){#ly-m:is(.ly-home,.ly-cat) .ly-qv-grid{grid-template-columns:1fr !important;padding:4px 14px 14px !important;gap:14px !important} #ly-m:is(.ly-home,.ly-cat) .ly-qv-grid > img{width:60% !important;margin:0 auto}} #ly-m:is(.ly-home,.ly-cat) .ly-mob-only{} @media (min-width: 761px){#ly-m:is(.ly-home,.ly-cat) .ly-mob-only{display:none !important}} #ly-m:is(.ly-home,.ly-cat) .ly-t-m{display:none} @media (max-width: 760px){#ly-m:is(.ly-home,.ly-cat) .ly-trustbar{display:flex !important;grid-template-columns:none !important;gap:8px !important;overflow:hidden !important;margin:0 !important;padding:0 !important} #ly-m:is(.ly-home,.ly-cat) .ly-trust{flex:0 0 calc(50% - 4px) !important;flex-direction:row !important;align-items:center !important;text-align:left;padding:9px 10px !important;gap:8px !important;min-width:0;transform:translateX(calc(var(--tp, 0) * -1 * (200% + 16px)));transition:transform .6s cubic-bezier(.4,0,.2,1)} #ly-m:is(.ly-home,.ly-cat) .ly-trust > span:first-child{width:30px !important;height:30px !important;flex-shrink:0;border-radius:6px !important} #ly-m:is(.ly-home,.ly-cat) .ly-trust > span:first-child svg{width:18px !important;height:18px !important} #ly-m:is(.ly-home,.ly-cat) .ly-trust > span:last-child{align-items:flex-start;min-width:0;gap:1px !important} #ly-m:is(.ly-home,.ly-cat) .ly-trust strong,#ly-m:is(.ly-home,.ly-cat) .ly-trust > span:last-child > span{white-space:normal !important;overflow:visible !important;text-overflow:clip !important;display:block !important} #ly-m:is(.ly-home,.ly-cat) .ly-trust strong{font-size:12px !important;line-height:1.3 !important} #ly-m:is(.ly-home,.ly-cat) .ly-trust > span:last-child > span{font-size:11px !important;line-height:1.3 !important} #ly-m:is(.ly-home,.ly-cat) .ly-t-d{display:none !important} #ly-m:is(.ly-home,.ly-cat) .ly-t-m{display:inline !important}} @media (max-width: 760px){#ly-m:is(.ly-home,.ly-cat) .ly-trustbar{gap:8px !important} #ly-m:is(.ly-home,.ly-cat) .ly-trust{padding:8px !important;gap:6px !important;min-height:54px;box-sizing:border-box} #ly-m:is(.ly-home,.ly-cat) .ly-trust > span:first-child{width:28px !important;height:28px !important} #ly-m:is(.ly-home,.ly-cat) .ly-trust > span:first-child svg{width:16px !important;height:16px !important} #ly-m:is(.ly-home,.ly-cat) .ly-trust > span:last-child{flex:1 1 auto;min-width:0;overflow:visible !important} #ly-m:is(.ly-home,.ly-cat) .ly-trust strong{font-size:11.5px !important;line-height:1.25 !important;white-space:normal !important;overflow:visible !important;word-break:keep-all} #ly-m:is(.ly-home,.ly-cat) .ly-trust > span:last-child > span{font-size:10.5px !important;line-height:1.25 !important;white-space:normal !important;overflow:visible !important}} @media (max-width: 760px){#ly-m:is(.ly-home,.ly-cat) .ly-btabs{display:flex !important;width:100%;box-sizing:border-box;gap:6px !important;padding:5px !important;margin-top:10px;background:rgba(0,0,0,0.14);border-radius:12px;overflow-x:auto !important;scroll-snap-type:x mandatory;scrollbar-width:none} #ly-m:is(.ly-home,.ly-cat) .ly-btabs::-webkit-scrollbar{display:none} #ly-m:is(.ly-home,.ly-cat) .ly-btab{flex:0 0 auto !important;min-width:42%;box-sizing:border-box;scroll-snap-align:start;justify-content:center !important;gap:8px !important;height:46px;padding:0 14px !important;border-radius:9px !important;font-size:14px !important;font-weight:700 !important;box-shadow:none !important;white-space:nowrap;min-width:0} #ly-m:is(.ly-home,.ly-cat) .ly-btab[aria-selected="false"]{background:transparent !important;color:#ffffff !important} #ly-m:is(.ly-home,.ly-cat) .ly-btab[aria-selected="true"]{box-shadow:0 2px 8px rgba(0,0,0,0.15) !important} #ly-m:is(.ly-home,.ly-cat) .ly-btab > span:first-child{width:24px !important;height:24px !important} #ly-m:is(.ly-home,.ly-cat) .ly-btab > span:first-child svg{width:13px;height:13px} #ly-m:is(.ly-home,.ly-cat) .ly-btab[aria-selected="false"] > span:first-child{background:rgba(255,255,255,0.2) !important}} @media (max-width: 760px){#ly-m:is(.ly-home,.ly-cat) .ly-btabs{overflow-y:hidden !important;align-items:center !important} #ly-m:is(.ly-home,.ly-cat) .ly-btab{height:42px !important;margin:0 !important;outline-offset:-3px !important} #ly-m:is(.ly-home,.ly-cat) .ly-btab:focus,#ly-m:is(.ly-home,.ly-cat) .ly-btab:focus-visible{outline:2px solid rgba(255,255,255,0.7) !important;outline-offset:-4px !important} #ly-m:is(.ly-home,.ly-cat) .ly-btab[aria-selected="true"]{box-shadow:0 1px 4px rgba(0,0,0,0.12) !important}} @media (max-width: 760px){#ly-m:is(.ly-home,.ly-cat) .ly-note{-webkit-line-clamp:3 !important;font-size:12px !important;line-height:1.45 !important;padding:6px 8px !important;min-height:calc(3 * 1.45em + 12px) !important;max-height:calc(3 * 1.45em + 12px);display:-webkit-box !important;-webkit-box-orient:vertical;overflow:hidden !important}} @media (min-width: 901px){#ly-m:is(.ly-home,.ly-cat) .ly-news{grid-template-columns:repeat(3,minmax(0,1fr)) !important;align-items:stretch} #ly-m:is(.ly-home,.ly-cat) .ly-news > div{display:contents !important} #ly-m:is(.ly-home,.ly-cat) .ly-news-row{flex-direction:column !important;min-height:0 !important} #ly-m:is(.ly-home,.ly-cat) .ly-news-row > div:first-child{flex:0 0 auto !important;aspect-ratio:16 / 9;height:auto !important} #ly-m:is(.ly-home,.ly-cat) .ly-news-row img{height:100% !important} #ly-m:is(.ly-home,.ly-cat) .ly-news h3{font-size:18px !important;line-height:1.35 !important} #ly-m:is(.ly-home,.ly-cat) .ly-news p{font-size:14px !important;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} #ly-m:is(.ly-home,.ly-cat) .ly-news > a > div:last-child,#ly-m:is(.ly-home,.ly-cat) .ly-news-row > div:last-child{padding:18px 20px 20px !important}} #ly-m:is(.ly-home,.ly-cat) .ly-hero{box-sizing:border-box !important;padding:0 !important;width:100% !important;max-width:none !important;margin:0 !important;border-radius:0 !important;overflow:hidden !important;box-shadow:none !important} @media (max-width: 760px){#ly-m:is(.ly-home,.ly-cat) > .ly-hero{padding:0 !important;box-sizing:border-box !important;width:calc(100% - 24px) !important;margin:12px auto 0 !important;border-radius:16px !important;overflow:hidden !important;box-shadow:0 6px 18px rgba(20,60,30,0.10)} #ly-m:is(.ly-home,.ly-cat) > .ly-flash{padding-left:12px !important;padding-right:12px !important} #ly-m:is(.ly-home,.ly-cat) > .ly-flash > div{border-radius:16px !important}} @media (max-width: 760px){#ly-m:is(.ly-home,.ly-cat) > section > .ly-trustbar,#ly-m:is(.ly-home,.ly-cat) .ly-trustbar{background:#EFFFD1 !important;border:1px solid #D4F09C !important;border-radius:10px !important;padding:0 6px !important;margin:0 !important;gap:8px !important;box-shadow:none !important} #ly-m:is(.ly-home,.ly-cat) .ly-trust{background:transparent !important;border:none !important;padding:9px 4px !important;gap:6px !important;min-height:0 !important;justify-content:center !important;align-items:center !important;text-align:center !important} #ly-m:is(.ly-home,.ly-cat) .ly-trust > span:last-child{flex:0 1 auto !important;align-items:center !important} #ly-m:is(.ly-home,.ly-cat) .ly-trust > span:first-child{width:20px !important;height:20px !important;background:transparent !important;border-radius:0 !important} #ly-m:is(.ly-home,.ly-cat) .ly-trust > span:first-child svg{width:18px !important;height:18px !important} #ly-m:is(.ly-home,.ly-cat) .ly-trust strong{font-size:11px !important;font-weight:700 !important;text-transform:uppercase;letter-spacing:0.2px;white-space:nowrap !important;line-height:1.2 !important;color:#14803A} #ly-m:is(.ly-home,.ly-cat) .ly-trust > span:last-child > span{display:none !important}} @media (max-width: 760px){#ly-m:is(.ly-home,.ly-cat) > .ly-trustsec{display:none !important} #ly-m:is(.ly-home,.ly-cat) .ly-hdots{bottom:6px !important;gap:6px !important;padding:5px 9px;border-radius:999px;background:rgba(20,40,25,0.35)} #ly-m:is(.ly-home,.ly-cat) .ly-hdots button{height:6px !important;box-shadow:none !important} #ly-m:is(.ly-home,.ly-cat) .ly-marquee-wrap{margin-top:16px !important}} /* ---------- Danh mục (Category.dc.html) ---------- */ #ly-m.ly-cat .ly-sortrow::-webkit-scrollbar{display:none} #ly-m.ly-cat .ly-sortbtn{transition:background .15s, border-color .15s} #ly-m.ly-cat .ly-sortbtn[aria-pressed="false"]:hover{border-color:#34C759 !important} #ly-m.ly-cat .ly-fopt:hover{background:#F6FBF2 !important} #ly-m.ly-cat .ly-fopt[aria-disabled="true"]{cursor:default} @media (max-width: 760px){#ly-m.ly-cat .ly-filter{position:fixed !important;top:0;bottom:0;left:0;z-index:200;width:86% !important;max-width:340px;border-radius:0 !important;overflow-y:auto;transform:translateX(-105%);transition:transform .3s ease;box-shadow:8px 0 30px rgba(0,0,0,.18)} #ly-m.ly-cat .ly-filter[data-open="true"]{transform:none} #ly-m.ly-cat .ly-fopen,#ly-m.ly-cat .ly-fclose{display:flex !important} #ly-m.ly-cat .ly-fapply{display:block !important}} #ly-m.ly-cat .ly-g3{grid-template-columns:repeat(3,minmax(0,1fr)) !important} @media (max-width: 900px){#ly-m.ly-cat .ly-g3{grid-template-columns:repeat(2,minmax(0,1fr)) !important}} /* ---------- Chi tiết sản phẩm (Product.dc.html) ---------- */ #ly-m.ly-pdp a{color:#34C759} #ly-m.ly-pdp a:hover{color:#28A84A} @keyframes ly-pop{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}} #ly-m.ly-pdp .ly-saveline{animation:ly-pop .25s ease} #ly-m.ly-pdp .ly-logos{flex-wrap:nowrap !important} @media (max-width: 900px){#ly-m.ly-pdp .ly-logos{justify-content:flex-start !important;overflow-x:auto;scrollbar-width:none;max-width:100%;padding:4px 24px;margin:0 -24px;gap:28px !important} #ly-m.ly-pdp .ly-logos::-webkit-scrollbar{display:none} #ly-m.ly-pdp .ly-logos img{height:42px !important;flex-shrink:0}} @media (max-width: 900px){#ly-m.ly-pdp .ly-hscroll{display:flex !important;grid-template-columns:none !important;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px !important;max-width:none !important;margin:0 -24px !important;padding:4px 24px 12px !important;scrollbar-width:none} #ly-m.ly-pdp .ly-hscroll::-webkit-scrollbar{display:none} #ly-m.ly-pdp .ly-hscroll > *{flex:0 0 46% !important;max-width:none !important;scroll-snap-align:start;min-width:0} #ly-m.ly-pdp .ly-news > div{display:contents !important} #ly-m.ly-pdp .ly-news-row{flex-direction:column !important;min-height:0 !important} #ly-m.ly-pdp .ly-news-row > div:first-child{flex:0 0 auto !important;aspect-ratio:16 / 9}} @media (max-width: 560px){#ly-m.ly-pdp .ly-hscroll > *{flex-basis:80% !important}} @media (max-width: 980px){#ly-m.ly-pdp .ly-pwrap{flex-direction:column !important;flex-wrap:nowrap !important;gap:28px !important} #ly-m.ly-pdp .ly-colL,#ly-m.ly-pdp .ly-colR{display:contents !important} #ly-m.ly-pdp .ly-o-gal{order:1} #ly-m.ly-pdp .ly-o-buy{order:2} #ly-m.ly-pdp .ly-o-info{order:3} #ly-m.ly-pdp .ly-o-vid{order:4} #ly-m.ly-pdp .ly-o-rev{order:5} #ly-m.ly-pdp .ly-o-rel{order:6} #ly-m.ly-pdp .ly-o-docs{order:7} #ly-m.ly-pdp .ly-o-faq{order:8} #ly-m.ly-pdp .ly-o-gal,#ly-m.ly-pdp .ly-o-buy,#ly-m.ly-pdp .ly-o-info,#ly-m.ly-pdp .ly-o-vid,#ly-m.ly-pdp .ly-o-rev,#ly-m.ly-pdp .ly-o-rel,#ly-m.ly-pdp .ly-o-docs,#ly-m.ly-pdp .ly-o-faq{width:100%;max-width:680px;margin-left:auto;margin-right:auto} #ly-m.ly-pdp .ly-o-rev > section,#ly-m.ly-pdp .ly-o-docs > section,#ly-m.ly-pdp .ly-o-info > div{margin-top:0 !important}} @media (max-width: 900px){#ly-m.ly-pdp .ly-vids > *{flex-basis:38% !important}} @media (max-width: 560px){#ly-m.ly-pdp .ly-vids > *{flex-basis:62% !important}} #ly-m.ly-pdp .ly-doc strong{transition:color .15s} #ly-m.ly-pdp .ly-doc:hover strong{color:#14803A} #ly-m.ly-pdp .ly-gnav{opacity:0;transition:opacity .2s} #ly-m.ly-pdp .ly-mainimg:hover .ly-gnav{opacity:1} #ly-m.ly-pdp .ly-thumb{transition:opacity .2s, border-color .2s} #ly-m.ly-pdp .ly-thumb:hover{opacity:1 !important} @media (max-width: 760px){#ly-m.ly-pdp .ly-thumbs-sep{width:1px !important;height:auto !important;align-self:stretch;margin:0 2px !important} #ly-m.ly-pdp .ly-thumbs > :is(.ly-thumb,.ly-thumb-empty){flex:1 1 0 !important;width:auto !important;height:auto !important;aspect-ratio:1 / 1;min-width:0;max-width:76px} #ly-m.ly-pdp .ly-thumb > span{font-size:9px !important;letter-spacing:-0.1px}} @media (max-width: 760px){#ly-m.ly-pdp .ly-gallery{flex-direction:column-reverse !important;align-items:stretch !important} #ly-m.ly-pdp .ly-mainimg{width:100% !important;flex:0 0 auto !important} #ly-m.ly-pdp .ly-thumbs{flex-direction:row !important;flex-basis:auto !important;overflow-x:auto;width:100%} #ly-m.ly-pdp .ly-gnav{opacity:1}} #ly-m.ly-pdp .ly-opt{transition:border-color .15s, background .15s} #ly-m.ly-pdp .ly-opt[aria-checked="false"]:hover{border-color:#9FDDB0 !important} @keyframes ly-fadein{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} #ly-m.ly-pdp .ly-gift{animation:ly-fadein .3s ease} #ly-m.ly-pdp .ly-logo-award{filter:grayscale(1);opacity:.6;transition:filter .3s, opacity .3s} #ly-m.ly-pdp .ly-logo-award:hover{filter:none;opacity:1} #ly-m.ly-pdp .ly-pillar img{transition:transform .5s ease} #ly-m.ly-pdp .ly-pillar:hover img{transform:scale(1.05)} #ly-m.ly-pdp .ly-g3q{grid-template-columns:repeat(3,minmax(0,1fr)) !important} #ly-m.ly-pdp .ly-card{transition:transform .25s ease, box-shadow .25s ease} #ly-m.ly-pdp .ly-card:hover{transform:translateY(-4px);box-shadow:0 12px 26px rgba(0,0,0,.12) !important} #ly-m.ly-pdp .ly-card img{transition:transform .35s ease} #ly-m.ly-pdp .ly-card:hover img{transform:scale(1.03)} #ly-m.ly-pdp .ly-btn{transition:filter .2s ease, transform .1s ease} #ly-m.ly-pdp .ly-btn:hover{filter:brightness(.94)} #ly-m.ly-pdp .ly-btn:active{transform:scale(.97)} #ly-m.ly-pdp a:focus-visible,#ly-m.ly-pdp button:focus-visible,#ly-m.ly-pdp input:focus-visible{outline:3px solid #FFB020;outline-offset:2px} #ly-m.ly-pdp .ly-fab{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.2);text-decoration:none;transition:transform .2s} #ly-m.ly-pdp .ly-fab:hover{transform:scale(1.08)} @keyframes ly-pulse{0%{box-shadow:0 0 0 0 rgba(52,199,89,.55)}70%{box-shadow:0 0 0 14px rgba(52,199,89,0)}100%{box-shadow:0 0 0 0 rgba(52,199,89,0)}} #ly-m.ly-pdp .ly-fab-call{animation:ly-pulse 2s infinite} #ly-m.ly-pdp .ly-mbar{display:none !important} @keyframes ly-toast-in{from{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%,0)}} @media (max-width: 760px){#ly-m.ly-pdp .ly-mbar{display:flex !important} #ly-m.ly-pdp .ly-fabs{bottom:190px !important} #ly-m.ly-pdp{padding-bottom:180px}} @media (prefers-reduced-motion: reduce){#ly-m.ly-pdp .ly-card,#ly-m.ly-pdp .ly-card img,#ly-m.ly-pdp .ly-btn{transition:none} #ly-m.ly-pdp .ly-fab-call{animation:none}} @keyframes ly-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} #ly-m.ly-pdp .ly-marquee-track{animation:ly-marquee 28s linear infinite} #ly-m.ly-pdp .ly-marquee-wrap:hover .ly-marquee-track{animation-play-state:paused} @media (prefers-reduced-motion: reduce){#ly-m.ly-pdp .ly-marquee-track{animation:none}} @media (max-width: 560px){#ly-m.ly-pdp .ly-chips{flex-wrap:nowrap !important;overflow:hidden} #ly-m.ly-pdp .ly-chips > span{flex-shrink:0;padding-left:6px !important;padding-right:6px !important} #ly-m.ly-pdp .ly-chips > span:last-child{flex-shrink:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #ly-m.ly-pdp .ly-fs-t{display:none}} @media (max-width: 900px){#ly-m.ly-pdp .ly-rel > *{flex-basis:calc(50% - 6px) !important}} @media (max-width: 560px){#ly-m.ly-pdp .ly-rel > *{flex-basis:calc(50% - 6px) !important} #ly-m.ly-pdp .ly-vch{padding:8px 10px !important;gap:8px !important} #ly-m.ly-pdp .ly-vch > span:first-child{min-width:36px !important;width:auto !important;height:32px !important;font-size:11px !important} #ly-m.ly-pdp .ly-vch strong{font-size:13px !important} #ly-m.ly-pdp .ly-vch > span:last-child > span{white-space:normal !important;font-size:11px !important}} #ly-m.ly-pdp .ly-mob-only{} @media (min-width: 761px){#ly-m.ly-pdp .ly-mob-only{display:none !important}} @keyframes ly-sheet{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}} /* ---------- Bổ sung ngoài design: giữ bố cục ổn định với dữ liệu thật ---------- */ /* Điều kiện voucher: giữ chỗ 2 dòng ở mobile (design có thêm HSD nên luôn 2 dòng) để các thẻ cao bằng nhau */ @media (max-width: 900px){#ly-m.ly-home .ly-vcond{display:block;min-height:2lh}} /* Nhãn Freeship + độ tuổi xếp dọc ở mobile: giữ chỗ 2 nhãn khi sản phẩm chưa khai báo độ tuổi */ @media (max-width: 760px){#ly-m:is(.ly-home,.ly-cat,.ly-about) .ly-chips{min-height:44px;box-sizing:border-box}} /* Khoảng trống cho thanh giỏ hàng / thanh mua mobile nằm SAU chân trang (root của design chứa cả footer) */ body:has(#ly-m:is(.ly-home,.ly-cat,.ly-pdp)){background:#FFFFFB} @media (max-width: 760px){ #ly-m:is(.ly-home,.ly-cat,.ly-pdp){padding-bottom:0 !important} body:has(#ly-m:is(.ly-home,.ly-cat)) #ly-f{padding-bottom:160px;background:#FFFFFB} body:has(#ly-m.ly-pdp) #ly-f{padding-bottom:180px;background:#FFFFFB} } /* Mô tả danh mục / sản phẩm ("Xem tiếp") và phân trang */ #ly-m .ly-more-body p{margin:0} #ly-m .ly-more-body p + p{margin-top:.8em} #ly-m .ly-pager a,#ly-m .ly-pager span{min-width:36px;height:36px;padding:0 10px;box-sizing:border-box;border:1px solid #DDE7D8;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#1C2A1E;text-decoration:none;font-size:14px;font-weight:600} #ly-m .ly-pager .current{background:#34C759;border-color:#34C759;color:#ffffff} /* Tin tức dạng cuộn ngang (≤ 900px): tiêu đề 2 dòng, tóm tắt 3 dòng cố định → các thẻ cao bằng nhau dù tiêu đề dài/ngắn */ @media (max-width: 900px){ #ly-m .ly-news h3{min-height:2lh;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} #ly-m .ly-news p{min-height:3lh;line-height:1.55 !important} #ly-m .ly-news h3{line-height:1.35 !important} #ly-m .ly-news > a > div:last-child{gap:8px !important} #ly-m .ly-news > a > div:last-child > span:last-child{padding-top:0 !important} } /* Cột thumbnail desktop: cao bằng ảnh chính, nhiều ảnh thì cuộn (design: max-height 100%) */ @media (min-width: 761px){#ly-m.ly-pdp .ly-thumbs-wrap > .ly-thumbs{position:absolute;inset:0;max-height:none !important}} @media (max-width: 760px){#ly-m.ly-pdp .ly-thumbs-wrap{flex-basis:auto !important;align-self:auto !important}} #ly-m.ly-pdp .ly-vch-msg:empty{display:none} /* ---------- Về Lạc Yên (About.dc.html) ---------- */ #ly-m.ly-about a:focus-visible,#ly-m.ly-about button:focus-visible,#ly-m.ly-about input:focus-visible,#ly-m.ly-about select:focus-visible,#ly-m.ly-about textarea:focus-visible{outline:3px solid #FFB020;outline-offset:2px} #ly-m.ly-about .ly-btn{transition:filter .2s, transform .2s} #ly-m.ly-about .ly-btn:hover{filter:brightness(.95)} #ly-m.ly-about .ly-lift{transition:transform .25s, box-shadow .25s} #ly-m.ly-about .ly-lift:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(20,60,30,0.12)} #ly-m.ly-about .ly-lift img{transition:transform .5s} #ly-m.ly-about .ly-lift:hover img{transform:scale(1.04)} #ly-m.ly-about .ly-labs{-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)} #ly-m.ly-about .ly-labs-track{animation:ly-labs 18s linear infinite !important;will-change:transform} @keyframes ly-labs{from{transform:translateX(0)}to{transform:translateX(-50%)}} #ly-m.ly-about .ly-labslot{opacity:.75;filter:grayscale(1);transition:opacity .3s, filter .3s} #ly-m.ly-about .ly-labslot:hover{opacity:1;filter:none} @media (max-width: 1000px){#ly-m.ly-about .ab-2col{grid-template-columns:1fr !important;gap:36px !important} #ly-m.ly-about .ab-scroll{display:flex !important;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -24px;padding:4px 24px 12px} #ly-m.ly-about .ab-scroll::-webkit-scrollbar{display:none} #ly-m.ly-about .ab-scroll > *{flex:0 0 44%;scroll-snap-align:start;min-width:0} #ly-m.ly-about .ab-awards{grid-template-columns:repeat(2,minmax(0,1fr)) !important} #ly-m.ly-about .ab-cap{left:12px !important;bottom:12px !important}} @media (max-width: 760px){#ly-m.ly-about .ab-sec{padding-left:16px !important;padding-right:16px !important;padding-top:56px !important;padding-bottom:56px !important} #ly-m.ly-about .ab-hero{min-height:380px !important} #ly-m.ly-about .ab-hero > div:last-child{width:calc(100% - 32px) !important;padding-bottom:36px !important} #ly-m.ly-about .ab-h1{font-size:40px !important} #ly-m.ly-about .ab-hero p{font-size:16px !important} #ly-m.ly-about .ab-h2{font-size:28px !important} #ly-m.ly-about .ab-scroll{margin:0 -16px;padding:4px 16px 12px} #ly-m.ly-about .ab-scroll > *{flex-basis:78%} #ly-m.ly-about .ab-steps > *{flex-basis:62%} #ly-m.ly-about .ab-cap{min-width:0 !important;max-width:calc(100% - 24px) !important;padding:12px 14px !important} #ly-m.ly-about .ab-cap strong{font-size:16px !important} #ly-m.ly-about .ab-feathead{flex-direction:column !important;align-items:flex-start !important} #ly-m.ly-about .ab-kn{padding:32px 16px 28px !important;border-radius:16px !important} #ly-m.ly-about .ab-teampad{padding:24px !important} #ly-m.ly-about .ab-cta{flex-direction:column !important;align-items:flex-start !important;padding:28px 20px !important} #ly-m.ly-about .ab-cta > div:last-child{flex-direction:column;width:100%} #ly-m.ly-about .ab-cta a{justify-content:center} #ly-m.ly-about .ab-awards{gap:12px !important} #ly-m.ly-about .ly-labslot{width:150px !important;height:76px !important}} @media (max-width: 760px){#ly-m.ly-about .ab-feat{gap:10px !important} #ly-m.ly-about .ab-feat > *{flex:0 0 calc(50% - 5px) !important} #ly-m.ly-about .ab-awards{display:flex !important;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:4px 16px 12px;gap:10px !important;scrollbar-width:none} #ly-m.ly-about .ab-awards::-webkit-scrollbar{display:none} #ly-m.ly-about .ab-awards > *{flex:0 0 calc(50% - 5px) !important;width:calc(50% - 5px) !important;min-width:0 !important;max-width:calc(50% - 5px) !important;height:auto !important;aspect-ratio:310 / 421;object-fit:cover;scroll-snap-align:start}} #ly-m.ly-about .ly-card{transition:transform .25s ease, box-shadow .25s ease} #ly-m.ly-about .ly-card:hover{transform:translateY(-4px);box-shadow:0 12px 26px rgba(0,0,0,.12) !important} #ly-m.ly-about .ly-card img{transition:transform .35s ease} #ly-m.ly-about .ly-card:hover img{transform:scale(1.03)} @media (max-width: 760px){#ly-m.ly-about .ly-chips{flex-direction:column !important;align-items:flex-start !important;flex-wrap:nowrap !important;gap:4px !important} #ly-m.ly-about .ly-chips > span{white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis} #ly-m.ly-about .ly-rate{white-space:nowrap;font-size:11px !important;gap:4px} #ly-m.ly-about .ly-awd{left:6px !important;bottom:6px !important;gap:4px !important} #ly-m.ly-about .ly-awd span{padding:2px 3px !important;border-radius:5px !important} #ly-m.ly-about .ly-awd img{height:18px !important} #ly-m.ly-about .ly-note{-webkit-line-clamp:3 !important;font-size:12px !important;line-height:1.45 !important;padding:6px 8px !important;min-height:calc(3 * 1.45em + 12px) !important;max-height:calc(3 * 1.45em + 12px);display:-webkit-box !important;-webkit-box-orient:vertical;overflow:hidden !important}} /* ---------- Tuyển dụng (Careers.dc.html) ---------- */ #ly-m.ly-careers a:focus-visible,#ly-m.ly-careers button:focus-visible,#ly-m.ly-careers input:focus-visible,#ly-m.ly-careers select:focus-visible,#ly-m.ly-careers textarea:focus-visible{outline:3px solid #FFB020;outline-offset:2px} #ly-m.ly-careers .ly-btn{transition:filter .2s, transform .2s} #ly-m.ly-careers .ly-btn:hover{filter:brightness(.95)} #ly-m.ly-careers .ly-lift{transition:transform .25s, box-shadow .25s} #ly-m.ly-careers .ly-lift:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(20,60,30,0.12)} #ly-m.ly-careers .ly-lift img{transition:transform .5s} #ly-m.ly-careers .ly-lift:hover img{transform:scale(1.04)} #ly-m.ly-careers details > summary{padding-right:8px} #ly-m.ly-careers details > summary::marker{color:#34C759} @media (max-width: 1000px){#ly-m.ly-careers .cr-1col{grid-template-columns:minmax(0, 1fr) !important;gap:36px !important} #ly-m.ly-careers .cr-1col > *{min-width:0} #ly-m.ly-careers .cr-form input,#ly-m.ly-careers .cr-form select,#ly-m.ly-careers .cr-form textarea{width:100%;max-width:100%;box-sizing:border-box;min-width:0} #ly-m.ly-careers .cr-form input[type="file"]{font-size:13px !important;width:100%} #ly-m.ly-careers .cr-form label > span{min-width:0} #ly-m.ly-careers details > summary{white-space:normal;line-height:1.45} #ly-m.ly-careers .cr-ben{grid-template-columns:repeat(2,minmax(0,1fr)) !important} #ly-m.ly-careers .cr-badge{right:12px !important;bottom:-16px !important}} @media (max-width: 760px){#ly-m.ly-careers .cr-sec{padding-left:16px !important;padding-right:16px !important;padding-top:56px !important;padding-bottom:56px !important} #ly-m.ly-careers .cr-h1{font-size:38px !important} #ly-m.ly-careers .cr-h2{font-size:28px !important} #ly-m.ly-careers .cr-btns{flex-direction:column} #ly-m.ly-careers .cr-btns a{justify-content:center} #ly-m.ly-careers .cr-ben{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:10px !important} #ly-m.ly-careers .cr-ben > *{padding:14px !important;gap:8px !important;border-radius:6px !important} #ly-m.ly-careers .cr-ben > * > span:first-child{width:36px !important;height:36px !important;border-radius:6px !important} #ly-m.ly-careers .cr-ben > * > span:first-child svg{width:18px;height:18px} #ly-m.ly-careers .cr-ben > * > strong{font-size:14px !important;line-height:1.3} #ly-m.ly-careers .cr-ben > * > span:last-child{font-size:12px !important;line-height:1.5 !important} #ly-m.ly-careers .cr-proc{grid-template-columns:repeat(2,minmax(0,1fr)) !important;row-gap:28px !important} #ly-m.ly-careers .cr-line{display:none} #ly-m.ly-careers .cr-jd{grid-template-columns:1fr !important;gap:18px !important;padding:16px 16px 18px !important} #ly-m.ly-careers .cr-jhead{padding:16px !important} #ly-m.ly-careers .cr-jhead strong{font-size:16px !important} #ly-m.ly-careers .cr-f2{grid-template-columns:1fr !important} #ly-m.ly-careers .cr-form{padding:20px 16px !important}} #ly-m.ly-careers details > summary{list-style:none !important;display:flex !important;align-items:flex-start;justify-content:space-between;gap:16px;padding-right:0 !important;cursor:pointer} #ly-m.ly-careers details > summary::-webkit-details-marker{display:none} #ly-m.ly-careers details > summary::marker{content:''} #ly-m.ly-careers details > summary::after{content:'+';flex-shrink:0;width:26px;height:26px;border-radius:50%;background:#EAF9EE;color:#14803A;font-size:18px;font-weight:700;line-height:26px;text-align:center;margin-top:-2px} #ly-m.ly-careers details[open] > summary::after{content:'−'} #ly-m.ly-careers details > p{padding-right:42px} @media (max-width: 760px){#ly-m.ly-careers .cr-deps{display:none !important} #ly-m.ly-careers .cr-depbar{display:flex !important}} /* Ô đồng ý lưu hồ sơ (bắt buộc theo form CF7, design chưa vẽ) + thông báo gửi form */ #ly-m.ly-careers .cr-form .cr-consent input{width:auto !important;flex:none;height:auto} #ly-m.ly-careers .cr-msg.is-ok{color:#14803A}#ly-m.ly-careers .cr-msg.is-err{color:#C62828} #ly-m.ly-careers .cr-form .is-bad{border-color:#E53935 !important} /* Bù chiều cao ô đồng ý (20px + khoảng cách 16px): ô lời nhắn thấp hơn 36px, kéo giãn được → các ô khác giữ đúng vị trí design */ #ly-m.ly-careers .cr-form textarea{box-sizing:border-box;height:47.5px;min-height:46px} /* ---------- Tin tức (News.dc.html) ---------- */ #ly-m.ly-news a:focus-visible,#ly-m.ly-news button:focus-visible,#ly-m.ly-news input:focus-visible,#ly-m.ly-news select:focus-visible,#ly-m.ly-news textarea:focus-visible{outline:3px solid #FFB020;outline-offset:2px} #ly-m.ly-news .ly-btn{transition:filter .2s, transform .2s} #ly-m.ly-news .ly-btn:hover{filter:brightness(.95)} #ly-m.ly-news .ly-lift{transition:transform .25s, box-shadow .25s} #ly-m.ly-news .ly-lift:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(20,60,30,0.12)} #ly-m.ly-news .ly-lift img{transition:transform .5s} #ly-m.ly-news .ly-lift:hover img{transform:scale(1.04)} @media (max-width: 900px){#ly-m.ly-news .nw-main{grid-template-columns:minmax(0,1fr) !important;gap:32px !important} #ly-m.ly-news .nw-side{position:static !important} #ly-m.ly-news .nw-feat{grid-template-columns:minmax(0,1fr) !important} #ly-m.ly-news .nw-featimg{min-height:0 !important;aspect-ratio:16 / 9 !important;height:auto !important}} @media (max-width: 760px){#ly-m.ly-news .nw-sec{padding-left:16px !important;padding-right:16px !important} #ly-m.ly-news .nw-tabsec{padding:0 8px !important} #ly-m.ly-news .nw-hero{flex-direction:column !important;align-items:stretch !important;gap:16px !important} #ly-m.ly-news .nw-h1{font-size:32px !important} #ly-m.ly-news .nw-search{flex:0 0 auto !important;height:44px !important} #ly-m.ly-news .nw-posts{grid-template-columns:minmax(0,1fr) !important;gap:16px !important} #ly-m.ly-news .nw-featbody{padding:18px !important;gap:10px !important} #ly-m.ly-news .nw-featbody h2{font-size:20px !important} #ly-m.ly-news .nw-posts h3{font-size:17px !important}} /* ---------- Bài viết (Article.dc.html) ---------- */ #ly-m.ly-article a:focus-visible,#ly-m.ly-article button:focus-visible,#ly-m.ly-article input:focus-visible,#ly-m.ly-article select:focus-visible,#ly-m.ly-article textarea:focus-visible{outline:3px solid #FFB020;outline-offset:2px} #ly-m.ly-article .ly-btn{transition:filter .2s, transform .2s} #ly-m.ly-article .ly-btn:hover{filter:brightness(.95)} #ly-m.ly-article .ly-lift{transition:transform .25s, box-shadow .25s} #ly-m.ly-article .ly-lift:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(20,60,30,0.12)} #ly-m.ly-article .ly-lift img{transition:transform .5s} #ly-m.ly-article .ly-lift:hover img{transform:scale(1.04)} @media (max-width: 900px){#ly-m.ly-article .ar-main{grid-template-columns:minmax(0,1fr) !important;gap:24px !important} #ly-m.ly-article .ar-side{position:static !important;order:-1}} @media (max-width: 760px){#ly-m.ly-article .ar-sec{padding-left:16px !important;padding-right:16px !important} #ly-m.ly-article .ar-sec:first-of-type{padding-top:20px !important} #ly-m.ly-article .ar-h1{font-size:28px !important;line-height:1.3 !important} #ly-m.ly-article .ar-hero{aspect-ratio:16 / 9 !important;border-radius:12px !important} #ly-m.ly-article .ar-main p,#ly-m.ly-article .ar-main li{font-size:16px !important;line-height:1.75 !important} #ly-m.ly-article .ar-main h2{font-size:22px !important;margin-top:28px !important} #ly-m.ly-article .ar-main h3{font-size:18px !important} #ly-m.ly-article .ar-main blockquote{font-size:16px !important;padding:14px 16px !important} #ly-m.ly-article .ar-prods,#ly-m.ly-article .ar-rel{display:flex !important;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:10px !important} #ly-m.ly-article .ar-prods{margin:0 -18px;padding:0 18px 6px} #ly-m.ly-article .ar-rel{margin:0 -16px;padding:4px 16px 12px} #ly-m.ly-article .ar-prods::-webkit-scrollbar,#ly-m.ly-article .ar-rel::-webkit-scrollbar{display:none} #ly-m.ly-article .ar-prods > *{flex:0 0 calc(50% - 5px) !important;scroll-snap-align:start;min-width:0} #ly-m.ly-article .ar-rel > *{flex:0 0 78% !important;scroll-snap-align:start;min-width:0}} #ly-m.ly-article .ly-card{transition:transform .25s ease, box-shadow .25s ease} #ly-m.ly-article .ly-card:hover{transform:translateY(-4px);box-shadow:0 12px 26px rgba(0,0,0,.12) !important} #ly-m.ly-article .ly-card img{transition:transform .35s ease} #ly-m.ly-article .ly-card:hover img{transform:scale(1.03)} @media (max-width: 760px){#ly-m.ly-article .ly-chips{flex-direction:column !important;align-items:flex-start !important;flex-wrap:nowrap !important;gap:4px !important} #ly-m.ly-article .ly-chips > span{white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis} #ly-m.ly-article .ly-rate{white-space:nowrap;font-size:11px !important;gap:4px} #ly-m.ly-article .ly-awd{left:6px !important;bottom:6px !important;gap:4px !important} #ly-m.ly-article .ly-awd span{padding:2px 3px !important;border-radius:5px !important} #ly-m.ly-article .ly-awd img{height:18px !important} #ly-m.ly-article .ly-note{-webkit-line-clamp:3 !important;font-size:12px !important;line-height:1.45 !important;padding:6px 8px !important;min-height:calc(3 * 1.45em + 12px) !important;max-height:calc(3 * 1.45em + 12px);display:-webkit-box !important;-webkit-box-orient:vertical;overflow:hidden !important}} /* Nội dung bài viết từ trình soạn thảo → kiểu chữ theo design */ #ly-m.ly-article .ar-body > p,#ly-m.ly-article .ar-body > div > p:not([style]){margin:0 0 18px;font-size:17px;line-height:1.8;color:#2F3E31} #ly-m.ly-article .ar-body > p.ar-sapo{margin:0 0 22px;font-size:19px;line-height:1.75;font-weight:600;color:#1C2A1E} #ly-m.ly-article .ar-body > h2{margin:36px 0 14px;font-size:26px;line-height:1.35;font-weight:800;scroll-margin-top:90px} #ly-m.ly-article .ar-body > h3{margin:24px 0 10px;font-size:20px;line-height:1.4;font-weight:800} #ly-m.ly-article .ar-body > h4{margin:20px 0 8px;font-size:18px;line-height:1.4;font-weight:800} #ly-m.ly-article .ar-body > :is(ul,ol){margin:0 0 18px;padding-left:22px;font-size:17px;line-height:1.8;color:#2F3E31} #ly-m.ly-article .ar-body > :is(figure,.wp-caption){margin:8px 0 22px;width:auto !important;max-width:100%} #ly-m.ly-article .ar-body img{max-width:100%;height:auto;border-radius:12px;display:block} #ly-m.ly-article .ar-body img.aligncenter{margin:0 auto 18px} #ly-m.ly-article .ar-body figure.ly-169 img{width:100%;aspect-ratio:16 / 9;object-fit:cover} #ly-m.ly-article .ar-body :is(figcaption,.wp-caption-text){margin-top:8px;font-size:13px;color:#8A958B} #ly-m.ly-article .ar-body > blockquote{margin:8px 0 24px;padding:18px 22px;border-left:4px solid #34C759;background:#F2FAEC;border-radius:0 12px 12px 0;font-size:18px;line-height:1.7;font-style:italic;color:#1C2A1E} #ly-m.ly-article .ar-body > blockquote p{margin:0;font-size:inherit !important;line-height:inherit !important} #ly-m.ly-article .ar-body > .ar-warn{margin:0 0 18px;padding:16px 18px;border-radius:12px;background:#FFF9EE;border-left:4px solid #E0A23A;font-size:15px;line-height:1.7;color:#4A4335} #ly-m.ly-article .ar-body > details{border-bottom:1px solid #EEF2E8;padding:16px 0} #ly-m.ly-article .ar-body > details > summary{cursor:pointer;font-size:16px;font-weight:700} #ly-m.ly-article .ar-body > details > p{margin:10px 0 0;font-size:16px;line-height:1.75;color:#3F5242} #ly-m.ly-article .ar-body a:not([class]){color:#14803A} #ly-m.ly-article .ar-body table{border-collapse:collapse;width:100%;margin:0 0 18px;font-size:15px} #ly-m.ly-article .ar-body :is(td,th){border:1px solid #E4EBE0;padding:8px 10px} #ly-m.ly-article .ar-toc a.is-on{border-left-color:#34C759 !important;color:#14803A !important;font-weight:700} @media (max-width: 760px){#ly-m.ly-article .ar-body > details > p{font-size:16px}} @media (max-width: 760px){#ly-m.ly-article .ar-upd{display:block}#ly-m.ly-article .ar-dot{display:none}} /* ---------- Giỏ hàng (Cart.dc.html) ---------- */ body.woocommerce-cart{background:#F4F6F2} body.woocommerce-cart #wrapper,body.woocommerce-cart #main{background:#F4F6F2} body.woocommerce-cart .page-wrapper{padding:0} body.woocommerce-cart .cart-container{max-width:none;padding:0} body.woocommerce-cart .cart-container > .woocommerce{max-width:none;padding:0;margin:0} body.woocommerce-cart :is(.page-title,.checkout-page-title,.woocommerce-notices-wrapper:empty){display:none} #ly-m.ly-cart{padding-bottom:236px} #ly-m.ly-cart .ly-ci-sel[aria-checked=false] svg{visibility:hidden} #ly-m.ly-cart .ly-ci.is-busy{opacity:.55;pointer-events:none} #ly-m.ly-cart .ly-ci button:disabled{color:#C9D3C6;cursor:default} #ly-m.ly-cart .ly-ct-buy[aria-disabled=true]{pointer-events:none;box-shadow:none} #ly-m.ly-cart .ly-up-opt[aria-pressed=true]{border-color:#34C759 !important;background:#F2FAEC !important;box-shadow:0 4px 12px rgba(52,199,89,0.22) !important} #ly-m.ly-cart .ly-up-opt[aria-pressed=true] .ly-up-rb{border-color:#34C759 !important;background:#34C759 !important} #ly-m.ly-cart .ly-tap{transition:filter .15s, transform .1s} #ly-m.ly-cart .ly-tap:active{transform:scale(.97)} @media (max-width: 849px){body.woocommerce-cart #ly-f{display:none !important}} @media (min-width: 850px){ #ly-m:is(.ly-cart,.ly-voucher) .ly-ct-wrap{width:100%;max-width:640px;margin:24px auto 0} #ly-m.ly-cart .ly-ct-top{position:relative;border-radius:12px 12px 0 0} #ly-m:is(.ly-cart,.ly-voucher) .ly-ct-bar{left:50% !important;right:auto !important;width:640px;transform:translateX(-50%);border-radius:12px 12px 0 0;box-sizing:border-box} } #ly-x,#ly-cd{} @keyframes ly-drawer{from{transform:translateY(-10px);opacity:0}to{transform:none;opacity:1}} #ly-cd .ly-ci.is-busy{opacity:.55;pointer-events:none} #ly-cd .ly-up-opt[aria-pressed=true]{border-color:#34C759 !important;background:#F2FAEC !important} #ly-cd .ly-up-opt[aria-pressed=true] .ly-up-rb{border-color:#34C759 !important;background:#34C759 !important} #ly-cd button:disabled{cursor:default} html:has(body.woocommerce-cart),html:has(body.woocommerce-checkout){background:#F4F6F2} /* Thanh giỏ hàng cũ (bond-lb) đã thay bằng .ly-mcart của design → ẩn để không chồng 2 thanh */ #bond-lb{display:none !important} body.bond-lb-on{padding-bottom:0 !important} #ly-mup .ly-up-opt[aria-pressed=true]{border-color:#34C759 !important;background:#F2FAEC !important;box-shadow:0 4px 12px rgba(52,199,89,0.22) !important} #ly-mup .ly-up-opt[aria-pressed=true] .ly-up-rb{border-color:#34C759 !important;background:#34C759 !important} /* Design: popup mua kèm trượt lên (ly-sheet); nút ĐẶT HÀNG mobile nhấn co nhẹ như .ly-tap */ #ly-mup:not([hidden]) > [role=dialog]{animation:ly-sheet .28s ease} @media (max-width: 849px){.woocommerce-checkout #place_order{transition:filter .15s, transform .1s}.woocommerce-checkout #place_order:active{transform:scale(.97)}} @media (prefers-reduced-motion: reduce){#ly-mup:not([hidden]) > [role=dialog]{animation:none}} /* Thông báo "Đã thêm vào giỏ" (lyToast) đã có nút Xem giỏ hàng → ẩn link WooCommerce tự chèn cạnh nút thêm nhanh (vỡ thẻ sản phẩm). */ #ly-m a.added_to_cart.wc-forward{display:none !important} /* Nút nổi gộp "Liên hệ" (22/10/2026): menu Zalo / Gọi mở khi bấm; lên đầu trang chỉ hiện khi đã cuộn. */ #ly-m .ly-fabs .ly-fab[hidden],#ly-m .ly-fab-menu[hidden]{display:none !important} #ly-m .ly-fabs .ly-fab-contact[aria-expanded="true"]{animation:none;background:#1C2A1E !important} #ly-m .ly-fabs .ly-fab-contact[aria-expanded="true"] .ly-fab-ic-open{display:none} #ly-m .ly-fabs .ly-fab-contact[aria-expanded="true"] .ly-fab-ic-close{display:block !important} @media (max-width: 760px){#ly-m .ly-fabs{right:12px !important} #ly-m .ly-fabs .ly-fab{width:44px !important;height:44px !important} #ly-m .ly-fabs .ly-fab-top{display:none !important}} #ly-m .ly-fabs{transition:opacity .2s} /* Menu chính desktop hẹp (961–1120px): ẩn nhãn Freeship, thu khoảng cách để mục cuối không bị cắt (22/10/2026). */ @media (max-width: 1120px){#ly-h .ly-free{display:none !important}#ly-h .ly-nav2{gap:20px !important}} /* ===================================================================== * Feedback 23/10/2026 – bản mobile (số mục theo checklist). * Markup giữ style inline như design → các rule dưới đây dùng !important + selector đủ mạnh để thắng rule mobile cũ ở trên. * ===================================================================== */ @media (max-width: 760px){ /* 1.1 Hệ cỡ chữ: tiêu đề mục 26 · mô tả mục 14 · tên thẻ 16 (tin tức 19) · mô tả trong thẻ 13 */ html body :is(#ly-m,#ly-f) .ly-st.ly-st,html body #ly-m .cr-h2.cr-h2,html body #ly-m .ab-h2.ab-h2{font-size:26px !important;line-height:1.2 !important} html body :is(#ly-m,#ly-f) .ly-sd.ly-sd{font-size:14px !important} html body #ly-m .ly-ct.ly-ct{font-size:16px !important} html body #ly-m .ly-nt.ly-nt{font-size:19px !important} html body #ly-m .ly-cdx.ly-cdx{font-size:13px !important} /* 1.2 Thẻ sản phẩm: tên 13 · giá 17 · ô công dụng 11 · chip 10px cao 18 · đánh giá/đã bán 10.5 */ html body #ly-m .ly-cn.ly-cn{font-size:13px !important;min-height:2.8em !important} html body #ly-m .ly-cp.ly-cp.ly-cp{font-size:17px !important} html body #ly-m .ly-note.ly-note,html body #ly-m .ly-note2.ly-note2{font-size:11px !important} html body #ly-m .ly-chips.ly-chips > span{font-size:10px !important;height:18px !important;box-sizing:border-box} html body #ly-m .ly-chips.ly-chips{min-height:40px} html body #ly-m .ly-rate.ly-rate{font-size:10.5px !important} /* 1.3 Bo góc vuông hơn (card, nút, khung): radius inline đọc biến --ly-r; desktop không định nghĩa → giữ nguyên */ :is(#ly-h,#ly-f,#ly-m,#ly-x,#ly-cd,#ly-mup){--ly-r:6px} html body #ly-m:is(.ly-home,.ly-cat) > .ly-hero,html body #ly-m:is(.ly-home,.ly-cat) > .ly-flash > div{border-radius:6px !important} /* 1.6 + 4.1 Breadcrumb: chữ mảnh, màu nhạt, bỏ cấp "Sản phẩm" (và tên sản phẩm ở trang chi tiết), thẳng lề với khối bên dưới */ html body #ly-m .ly-bc{font-size:11.5px !important;font-weight:400 !important;color:#A3ADA4;padding-top:10px !important;padding-bottom:10px !important} html body #ly-m .ly-bc a{color:#A3ADA4 !important;font-weight:400} html body #ly-m .ly-bc .ly-bc-x{display:none} html body #ly-m.ly-cat .ly-bc{padding-left:12px !important;padding-right:12px !important} } /* 1.4 Ẩn thanh cuộn xám dưới các dải tab / thẻ cuộn ngang (vẫn vuốt được) */ :is(#ly-m,#ly-f) :is([style*="overflow-x: auto"],[style*="overflow-x:auto"],.ly-hscroll,.ly-btabs,.ly-sortrow){scrollbar-width:none} :is(#ly-m,#ly-f) :is([style*="overflow-x: auto"],[style*="overflow-x:auto"],.ly-hscroll,.ly-btabs,.ly-sortrow)::-webkit-scrollbar{display:none} /* 1.5 Slider Hành trình / Chất lượng / Tin tức / Đặc quyền: thẻ đầu cách mép (snap start cũ kéo thẻ đầu dính mép), vuốt dừng giữa màn hình */ @media (max-width: 900px){ html body #ly-m :is(.ly-steps,.ly-g3q,.ly-news).ly-hscroll{scroll-padding-inline:16px;padding-left:16px !important;padding-right:16px !important} html body #ly-m :is(.ly-steps,.ly-g3q).ly-hscroll > *,html body #ly-m .ly-news.ly-hscroll > a,html body #ly-m .ly-news.ly-hscroll .ly-news-row{scroll-snap-align:center !important} html body #ly-f .ly-fperks.ly-fperks{scroll-padding-inline:24px} html body #ly-f .ly-fperks.ly-fperks > *{scroll-snap-align:center} } @media (max-width: 760px){ html body #ly-m:is(.ly-home,.ly-cat) :is(.ly-steps,.ly-g3q,.ly-news).ly-hscroll{margin-left:-12px !important;margin-right:-12px !important} html body #ly-m .ly-g3q.ly-hscroll{width:auto !important;align-self:stretch} } /* 3.1 Thanh "Xem giỏ hàng / Mua kèm" dưới đáy (trang chủ, danh mục): chỉ hiện khi giỏ đã có hàng (data-on do PHP + JS cập nhật) */ @media (max-width: 760px){ html body #ly-m .ly-mcart.ly-mcart:not([data-on="1"]){display:none !important} html body #ly-m:is(.ly-home,.ly-cat):not(:has(.ly-mcart[data-on="1"])) .ly-fabs{bottom:20px !important} body:has(#ly-m:is(.ly-home,.ly-cat)):not(:has(.ly-mcart[data-on="1"])) #ly-f{padding-bottom:0} } /* 3.3 Ô voucher đủ chỗ cho 3 ký tự ("10K"): trang chủ (khối GIẢM) rộng 120px; mobile giữ phần mã đọc được */ @media (max-width: 900px){html body #ly-m.ly-home .ly-gv.ly-hscroll > *{flex-basis:320px !important}} /* 5.1 Trang sản phẩm (mobile): chữ nhỏ lại để khách cuộn ít hơn */ @media (max-width: 760px){ html body #ly-m.ly-pdp .ly-pt.ly-pt{font-size:20px !important} html body #ly-m.ly-pdp .ly-price.ly-price{font-size:24px !important} html body #ly-m.ly-pdp .ly-price-old.ly-price-old{font-size:15px !important} html body #ly-m.ly-pdp .ly-st.ly-st.ly-st{font-size:24px !important} html body #ly-m.ly-pdp .ly-rnum.ly-rnum{font-size:32px !important} html body #ly-m.ly-pdp :is(.ly-bt,.ly-ct).ly-bt,html body #ly-m.ly-pdp .ly-ct.ly-ct.ly-ct{font-size:17px !important} html body #ly-m.ly-pdp .ly-mkp.ly-mkp{font-size:18px !important} html body #ly-m.ly-pdp .ly-buynow.ly-buynow,html body #ly-m.ly-pdp .ly-pnt.ly-pnt{font-size:15px !important} html body #ly-m.ly-pdp .ly-it.ly-it{font-size:14px !important} html body #ly-m.ly-pdp .ly-b14.ly-b14{font-size:14px !important} html body #ly-m.ly-pdp .ly-b13.ly-b13,html body #ly-m.ly-pdp .ly-b13.ly-b13 *{font-size:13px !important} } /* 5.3 Trang sản phẩm (mobile): lề 12px như trang chủ/danh mục → ảnh lớn rộng hơn, breadcrumb – ảnh – ô ảnh nhỏ – nội dung thẳng một lề */ @media (max-width: 760px){ html body #ly-m.ly-pdp > section{padding-left:12px !important;padding-right:12px !important} html body #ly-m.ly-pdp > nav.ly-bc{padding-left:12px !important;padding-right:12px !important} html body #ly-m.ly-pdp .ly-hscroll.ly-hscroll{margin-left:-12px !important;margin-right:-12px !important;padding-left:12px !important;padding-right:12px !important;scroll-padding-inline:12px} html body #ly-m.ly-pdp .ly-g3q.ly-hscroll{padding-left:16px !important;padding-right:16px !important} html body #ly-m.ly-pdp .ly-logos{margin:0 -12px !important;padding:4px 12px !important} html body #ly-m.ly-pdp .ly-thumbs{gap:6px !important} html body #ly-m.ly-pdp .ly-mainimg{border-radius:6px !important} } /* 5.4 Badge giải thưởng cạnh tên sản phẩm (mobile): gọn 1 hàng */ @media (max-width: 760px){ html body #ly-m.ly-pdp .ly-awrow{flex-wrap:nowrap !important;gap:6px !important} html body #ly-m.ly-pdp .ly-awrow > span{padding:4px 8px 4px 4px !important;gap:6px !important;min-width:0} html body #ly-m.ly-pdp .ly-awrow img{height:26px !important} html body #ly-m.ly-pdp .ly-awrow strong{font-size:12px !important;white-space:nowrap} html body #ly-m.ly-pdp .ly-awrow strong + span{font-size:10.5px !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html body #ly-m.ly-pdp .ly-awrow > span > span{min-width:0} } /* 5.7 Danh sách chính sách (mobile): chữ 12.5px, icon nhỏ, chữ canh giữa theo icon → ít xuống dòng */ @media (max-width: 760px){ html body #ly-m.ly-pdp .ly-pol{gap:10px !important} html body #ly-m.ly-pdp .ly-pol > span:first-child{width:28px !important;height:28px !important} html body #ly-m.ly-pdp .ly-pol > span:first-child svg{width:16px;height:16px} html body #ly-m.ly-pdp .ly-pol .ly-b13.ly-b13,html body #ly-m.ly-pdp .ly-pol .ly-b13.ly-b13 *{font-size:12.5px !important;line-height:1.4 !important} html body #ly-m.ly-pdp .ly-pol:first-child{margin-top:0} html body #ly-m.ly-pdp div:has(> .ly-pol){padding:12px !important;gap:10px !important} } /* Trang sản phẩm mobile dùng thanh mua #bond-pb (tóm tắt lựa chọn + MUA NGAY) → ẩn thanh .ly-mbar cũ, tránh lộ dòng "Chọn mã ưu đãi" phía sau */ @media (max-width: 760px){body:has(#bond-pb) #ly-m.ly-pdp .ly-mbar{display:none !important}} /* 5.10 "Có thể bạn cũng thích" (trang sản phẩm, sau tin tức): thẻ sản phẩm như trang danh mục, mobile 2 cột */ #ly-m.ly-pdp .ly-like-g > [hidden]{display:none !important} @media (max-width: 760px){ html body #ly-m.ly-pdp > .ly-like{padding-left:12px !important;padding-right:12px !important} html body #ly-m.ly-pdp .ly-like-g{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:8px !important} #ly-m.ly-pdp .ly-like .ly-chips{flex-direction:column !important;align-items:flex-start !important;flex-wrap:nowrap !important;gap:4px !important} #ly-m.ly-pdp .ly-like .ly-chips > span{white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis} #ly-m.ly-pdp .ly-like .ly-rate{white-space:nowrap;gap:4px} #ly-m.ly-pdp .ly-like .ly-note{-webkit-line-clamp:3 !important;line-height:1.45 !important;padding:6px 8px !important;min-height:calc(3 * 1.45em + 12px) !important;max-height:calc(3 * 1.45em + 12px);display:-webkit-box !important;-webkit-box-orient:vertical;overflow:hidden !important} } @media (max-width: 760px){html body #ly-m.ly-pdp .ly-like .ly-fs-t{display:inline !important}html body #ly-m.ly-pdp .ly-like .ly-chips > span:last-child{flex-shrink:0}} /* 6.1 Mua kèm giá sốc (tấm chọn size ở thanh giỏ, trang giỏ hàng, ngăn giỏ): 1 hàng, mỗi ô rộng cố định, kéo ngang */ :is(#ly-mup,#ly-m.ly-cart,#ly-cd) div:has(> .ly-up-opt){display:flex !important;flex-wrap:nowrap !important;gap:8px !important;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;grid-template-columns:none !important} :is(#ly-mup,#ly-m.ly-cart,#ly-cd) div:has(> .ly-up-opt)::-webkit-scrollbar{display:none} :is(#ly-mup,#ly-m.ly-cart,#ly-cd) .ly-up-opt{flex:0 0 104px !important;width:104px !important;scroll-snap-align:start} /* 7.3 Dòng sản phẩm trong popup giỏ hàng (và trang giỏ): tên + phân loại + số lượng căn giữa theo chiều dọc với hình */ :is(#ly-cd,#ly-m.ly-cart) .ly-ci > div:first-child{align-items:center !important} :is(#ly-cd,#ly-m.ly-cart) .ly-ci > div:first-child > div:last-child{justify-content:center;min-height:76px} /* 8.1 Về Lạc Yên Foods (mobile): cỡ chữ theo hệ 1.1 (tiêu đề mục 26 · mô tả 14 · tên thẻ 16 · mô tả thẻ 13), banner đầu trang thấp lại */ @media (max-width: 760px){ html body #ly-m.ly-about .ab-hero.ab-hero{min-height:260px !important} html body #ly-m.ly-about .ab-hero > div:last-child{padding-bottom:24px !important} html body #ly-m.ly-about .ab-h1.ab-h1{font-size:32px !important} html body #ly-m.ly-about .ab-lead.ab-lead{font-size:14px !important;line-height:1.5 !important} html body #ly-m.ly-about .ab-stat.ab-stat{font-size:28px !important} html body #ly-m.ly-about .ab-sec.ab-sec{padding-top:44px !important;padding-bottom:44px !important} } /* 5.7 (slide S29): chính sách giao/đổi trả – dòng 1 đậm (quyền lợi), dòng 2 nhạt hơn (điều kiện); mọi màn hình */ html body #ly-m.ly-pdp .ly-pol .ly-b13.ly-b13{color:#5A6B5C !important} html body #ly-m.ly-pdp .ly-pol .ly-b13.ly-b13 strong{color:#1C2A1E !important;font-weight:700 !important} /* 3.2 (slide S7): giải thưởng trên mobile – dải 4 thẻ (có OCOP) chạy vòng, thẻ giữa to hơn, tự chuyển + vuốt tay */ html body #ly-m .ly-about-cf .ly-cf-row.ly-cf-row{display:flex !important;align-items:center !important;gap:10px !important;overflow-x:auto !important;scroll-snap-type:x mandatory !important;padding:14px calc(50% - 62px) 18px !important;margin:0 !important;scrollbar-width:none !important;-webkit-overflow-scrolling:touch} html body #ly-m .ly-about-cf .ly-cf-row.ly-cf-row::-webkit-scrollbar{display:none !important} html body #ly-m .ly-about-cf .ly-cf-i.ly-cf-i{flex:0 0 124px !important;width:124px !important;height:auto !important;aspect-ratio:310/421;object-fit:cover !important;display:block !important;scroll-snap-align:center !important;border-radius:6px !important;opacity:.8;transform:scale(.88);transition:transform .35s ease,opacity .35s ease,box-shadow .35s ease;box-shadow:0 4px 12px rgba(20,60,30,.08)} html body #ly-m .ly-about-cf .ly-cf-i.ly-cf-i.is-on{opacity:1;transform:scale(1.06);box-shadow:0 10px 26px rgba(20,60,30,.18)} /* 1.3 (23/10, đợt 2): các góc còn bo > 6px trên mobile → 6px (tab banner, khối About, Tuyển dụng, ô nhập checkout, thanh mua dưới đáy, ảnh bài viết) */ @media (max-width: 760px){ html body #ly-m .ly-btabs.ly-btabs,html body #ly-m .ly-btab.ly-btab,html body #ly-m .ab-kn.ab-kn, html body #ly-m .cr-ben .ly-lift.ly-lift,html body #ly-m .cr-ben .ly-lift > span, html body #ly-m .ar-body img,html body #ly-m .ar-hero.ar-hero{border-radius:6px !important} html body .bond-pb.bond-pb{border-radius:6px 6px 0 0 !important} html body .woocommerce-checkout .woocommerce-input-wrapper :is(input,select,textarea),html body .woocommerce-checkout .lc-option > label, html body .woocommerce-checkout .wc_payment_method,html body .woocommerce-checkout .lc-mobile-order,html body .woocommerce-checkout .lc-m-item img{border-radius:6px !important} } /* 1.6 (23/10, đợt 2): breadcrumb mọi trang trên mobile – nhỏ và mờ hơn (Trang chủ / Sản phẩm / …) */ @media (max-width: 760px){ html body :is(#ly-m,.lc-news) nav[aria-label="Breadcrumb"]:not(.ly-bc){font-size:11.5px !important;font-weight:400 !important;opacity:.75} html body :is(#ly-m,.lc-news) nav[aria-label="Breadcrumb"]:not(.ly-bc) a{font-weight:400 !important} } /* 1.4 (23/10, đợt 2): ẩn mọi thanh cuộn ngang/dọc của các hàng trượt trên mobile – kể cả trình duyệt máy tính thu hẹp (thanh cuộn thật, không phải dạng nổi) */ @media (max-width: 900px){ :is(#ly-h,#ly-m,#ly-f,#ly-cd,#bond-up,.bond-pb) *{scrollbar-width:none !important} :is(#ly-h,#ly-m,#ly-f,#ly-cd,#bond-up,.bond-pb) *::-webkit-scrollbar{display:none !important;width:0 !important;height:0 !important} } /* 1.5 (23/10, đợt 2): mọi hàng trượt trên mobile – thẻ dừng ở giữa màn hình (thẻ đầu vẫn cách mép 16px, thẻ cuối có khoảng trống phía sau để vào được giữa – JS) */ @media (max-width: 760px){ html body #ly-m :is(.ly-hscroll,.ab-scroll,.ab-awards,.ly-ttrack) > *{scroll-snap-align:center !important} html body #ly-m .ly-news > [style*='contents'] > *{scroll-snap-align:center !important} html body #ly-m .ly-endpad::after{content:'';display:block;flex:0 0 var(--ly-endpad,0px);width:var(--ly-endpad,0px);height:1px} }