.wpcf7 .screen-reader-response{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);height:1px;width:1px;margin:-1px;padding:0;border:0;word-wrap:normal !important;word-break:normal !important;} .wpcf7 .hidden-fields-container{display:none;} .wpcf7 form .wpcf7-response-output{margin:2em 0.5em 1em;padding:0.2em 1em;border:2px solid #00a0d2;/* Blue */} .wpcf7 form.init .wpcf7-response-output, .wpcf7 form.resetting .wpcf7-response-output, .wpcf7 form.submitting .wpcf7-response-output{display:none;} .wpcf7 form.sent .wpcf7-response-output{border-color:#46b450;/* Green */} .wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.aborted .wpcf7-response-output{border-color:#dc3232;/* Red */} .wpcf7 form.spam .wpcf7-response-output{border-color:#f56e28;/* Orange */} .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output{border-color:#ffb900;/* Yellow */} .wpcf7-form-control-wrap{position:relative;} .wpcf7-not-valid-tip{color:#dc3232;/* Red */ font-size:1em;font-weight:normal;display:block;} .use-floating-validation-tip .wpcf7-not-valid-tip{position:relative;top:-2ex;left:1em;z-index:100;border:1px solid #dc3232;background:#fff;padding:.2em .8em;width:24em;} .wpcf7-list-item{display:inline-block;margin:0 0 0 1em;} .wpcf7-list-item-label::before, .wpcf7-list-item-label::after{content:" ";} .wpcf7-spinner{visibility:hidden;display:inline-block;background-color:#23282d;/* Dark Gray 800 */ opacity:0.75;width:24px;height:24px;border:none;border-radius:100%;padding:0;margin:0 24px;position:relative;} form.submitting .wpcf7-spinner{visibility:visible;} .wpcf7-spinner::before{content:'';position:absolute;background-color:#fbfbfc;/* Light Gray 100 */ top:4px;left:4px;width:6px;height:6px;border:none;border-radius:100%;transform-origin:8px 8px;animation-name:spin;animation-duration:1000ms;animation-timing-function:linear;animation-iteration-count:infinite;} @media (prefers-reduced-motion: reduce) { .wpcf7-spinner::before{animation-name:blink;animation-duration:2000ms;} } @keyframes spin { from{transform:rotate(0deg);} to{transform:rotate(360deg);} } @keyframes blink { from{opacity:0;} 50%{opacity:1;} to{opacity:0;} } .wpcf7 [inert]{opacity:0.5;} .wpcf7 input[type="file"]{cursor:pointer;} .wpcf7 input[type="file"]:disabled{cursor:default;} .wpcf7 .wpcf7-submit:disabled{cursor:not-allowed;} .wpcf7 input[type="url"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"]{direction:ltr;} .wpcf7-reflection > output{display:list-item;list-style:none;} .wpcf7-reflection > output[hidden]{display:none;} .devvn-comments-area, .devvn-comments-area *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;} #comments-title{font-size:18px;font-weight:700;margin:0 0 15px 0;} .devvn-comments-area form#commentform textarea, .devvn-comments-area form#commentform input[type=text], .devvn-comments-area form#commentform input[type=email], .devvn-comments-area form#commentform input[type=url], .devvn-comments-area form#commentform input[type=password], .devvn-comments-area form#commentform input[type=search], .devvn-comments-area form#commentform input[type=tel], .devvn-comments-area form#commentform input[type=number], .devvn-comments-area form#commentform select{color:#666;background-color:#fff;font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:14px;border:1px solid #ccc;padding:2px 10px;height:32px;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;width:100%;margin:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} .devvn-comments-area form#commentform textarea{height:130px;border-color:#ddd;border-radius:0;border-top-left-radius:5px;border-top-right-radius:5px;background-color:#fafafa;padding:10px;box-shadow:none;} .devvn_row_post_comment{-js-display:flex;display:-ms-flexbox;display:flex;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-align:baseline;align-items:baseline;-ms-flex-pack:justify;justify-content:space-between;width:100% !important;padding:10px 5px !important;border:1px solid #ddd;border-top:unset;border-bottom-right-radius:5px;border-bottom-left-radius:5px;background-color:#fff;} .devvn-comments-area p.comment-form-comment{margin-bottom:0;} .devvn-comments-area p.comment-form-comment textarea{display:block;} .devvn-comments-area #commentform p{margin:0;padding:0;} .devvn-comments-area #commentform p.form-submit{margin-left:auto;} .devvn-comments-area #commentform p.logged-in-as{margin-bottom:10px;} .devvn_row_post_comment > p{padding:0 5px !important;} .devvn-comments-area .form-submit input#submit{color:#fff;background-color:var(--primary-color, #092143);border:0;height:32px;padding:0 10px;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:14px !important;margin:0;min-height:auto;} .devvn-comments-area form#commentform{margin:0 0 20px;} .devvn-comments-area ol.commentlist, .devvn-comments-area ol.commentlist ul{list-style:none;} .devvn-comments-area .comment-author.vcard img{box-shadow:none;border-radius:0;width:25px;height:25px;margin:0 7px 0 0;display:inline-block;vertical-align:middle;} .devvn-comments-area .comment-author.vcard .fn, .devvn-comments-area .comment-author.vcard a{color:#333;font-size:14px;} .devvn-comments-area .comment-author.vcard .fn{vertical-align:middle;} .devvn-comments-area footer.comment-meta{overflow:hidden;} .devvn-comments-area .comment-content{margin:0 0 5px 35px;display:block;font-size:14px;color:#4a4a4a;line-height:22px;} .devvn-comments-area .comment-content p:last-child{margin-bottom:0;} .devvn-comments-area .comment-tool{font-size:12px;} .devvn-comments-area .comment-tool a{color:#4a90e2;} .devvn-comments-area b.dot{display:inline;font-size:8px;vertical-align:middle;margin:2px 5px;color:#babbb8;float:left;} .devvn-comments-area .comment-tool > div, .devvn-comments-area .comment-tool > b, .devvn-comments-area .comment-tool > a{display:inline-block;float:left;} .devvn-comments-area .comment-tool{margin-left:35px;} .devvn-comments-area .comment-awaiting-moderation{margin-left:35px;color:red;font-style:normal;} .devvn-comments-area article.comment-body{margin-bottom:10px;overflow:hidden;} .devvn-comments-area ol.commentlist > li > ul.children{margin:0 0 10px 35px;position:relative;background:#f1f1f1;border:1px solid #e7e7e7;padding:15px 10px 5px 10px;font-size:14px;color:#333;} .devvn-comments-area ol.commentlist > li > ul.children:after, .devvn-comments-area ol.commentlist > li > ul.children:before{bottom:100%;left:20px;border:solid transparent;content:"";height:0;width:0;position:absolute;pointer-events:none;} .devvn-comments-area ol.commentlist > li > ul.children:after{border-color:rgba(241, 241, 241, 0);border-bottom-color:#f1f1f1;border-width:10px;margin-left:-10px;} .devvn-comments-area ol.commentlist > li > ul.children:before{border-color:rgba(231, 231, 231, 0);border-bottom-color:#e7e7e7;border-width:11px;margin-left:-11px;} .devvn-comments-area nav.woocommerce-pagination ul{display:block;border:0;white-space:inherit;margin:0;list-style:none;} .devvn-comments-area nav.woocommerce-pagination ul li a, .devvn-comments-area nav.woocommerce-pagination ul li span{float:left;padding:7px 10px;background:#eee;border-radius:3px;text-align:center;color:#333;margin-right:4px;font-size:12px;cursor:pointer;display:block;line-height:1;border:0;min-width:auto;} .devvn-comments-area .woocommerce-pagination ul.page-numbers li, .devvn-comments-area .woocommerce-pagination ul.page-numbers li{border:0;} .devvn-comments-area nav.woocommerce-pagination ul li span.current{background:#ccc;} .devvn-comments-area nav.woocommerce-pagination{margin:10px 0 30px;} .devvn-comments-area .commentlist span#reply-title{font-weight:700;margin:0 0 5px 0;display:inline-block;font-size:14px;} .devvn-comments-area .commentlist div#respond{border:1px solid #e4e1e3;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;padding:10px;background:#fff;margin-bottom:10px;position:relative;} .devvn-comments-area span#reply-title a#cancel-comment-reply-link{position:absolute;top:5px;right:10px;font-weight:400;background:red;color:#fff;width:20px;height:20px;text-align:center;line-height:17px;font-size:14px;border-radius:50%;-moz-border-radius:50%;-webkit-border-radius:50%;overflow:hidden;} .devvn-comments-area form#commentform div.error{font-size:12px;color:red;margin:2px 0 0 0;} .devvn-comments-area form#commentform .comment-form-comment{position:relative;} .devvn-comments-area form#commentform .comment-form-comment #comment-error{position:absolute;bottom:3px;left:5px;} .comment-author.vcard span.review_qtv{vertical-align:middle;text-transform:uppercase;margin:0 10px;color:#000;font-weight:normal;font-size:10px;background:#eebc49;padding:2px 6px;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;line-height:18px;height:18px;} #comments .devvn-comments-area .comment-respond{background:transparent;padding:0;margin:0;} .devvn-comments-area ol.commentlist li{padding-top:0;border:0;margin:0;} #comments .devvn-comments-area > .comment-respond > span#reply-title{display:none !important;} .devvn-comments-area p.comment-form-cookies-consent{border:1px solid #ddd;border-top:0;padding:10px!important;} .devvn-comments-area p.comment-form-cookies-consent input#wp-comment-cookies-consent{margin:0 10px 6px 0;} .comment-body.no-avatar em.comment-awaiting-moderation, .comment-body.no-avatar .comment-tool, .comment-body.no-avatar .comment-content{margin-left:0 !important;} @media(max-width:767px){ .devvn_row_post_comment{display:block;} .devvn_row_post_comment p{margin-bottom:5px !important;} } /* reCAPTCHA styles */ .devvn-recaptcha-wrap{clear:both;} .devvn-recaptcha-wrap .g-recaptcha{transform-origin:left top;} @media(max-width:400px){ .devvn-recaptcha-wrap .g-recaptcha{transform:scale(0.85);} } /* reCAPTCHA V3 notice */ .devvn-recaptcha-v3-notice{margin:10px 0;padding:8px 12px;background-color:#f8f9fa;border-left:3px solid #4285f4;font-size:12px;color:#666;} .devvn-recaptcha-v3-notice a{color:#4285f4;text-decoration:none;} .devvn-recaptcha-v3-notice a:hover{text-decoration:underline;} /* Hide reCAPTCHA badge when position is inline */ .devvn-recaptcha-wrap[data-recaptcha-type="v3"] .grecaptcha-badge, .devvn-recaptcha-wrap[data-recaptcha-type="v2_invisible"] .g-recaptcha[data-badge="inline"] + .grecaptcha-badge { visibility: hidden !important; }.header-search-form .search-field,.header-search-form input[type="search"],.header-search-form input[name="s"],.header-search-form .header-search input,.header-search-form .header-search .search-field,.header-search-form form.searchform input[type="search"],.header-search-form .searchform input.search-field,.header-search-form #searchform input,.header-search-form .nav-search input{border-radius:10px !important;border:1px solid #e0e0e0 !important;background:#ffffff !important;color:#333333 !important;padding:8px 15px !important;font-size:14px !important;transition:border-color 0.1s ease !important;box-shadow:0 2px 4px rgba(0,0,0,0.1) !important}.search-field:focus,input[type="search"]:focus,input[name="s"]:focus,.header-search input:focus,form.searchform input[type="search"]:focus,.searchform input.search-field:focus,#searchform input:focus,.nav-search input:focus{border-color:#446084 !important;box-shadow:0 0 0 2px rgba(68,96,132,0.1) !important;outline:none !important}.searchform,.header-search-form,[data-live-search]{position:relative}.td-search-results,.searchform .td-search-results,.header-search-form .td-search-results,[data-live-search] .td-search-results{position:absolute !important;top:calc(100% + 5px) !important;left:0 !important;right:0 !important;z-index:999999 !important;background:#ffffff !important;color:#333333 !important;border:1px solid #e0e0e0 !important;border-radius:10px !important;box-shadow:0 4px 12px rgba(0,0,0,0.15) !important;max-height:500px !important;overflow-y:auto !important;display:none;margin:0 !important;padding:0 !important}.header-search-form .hungphat-badge{display:none}.td-search-loading,.td-search-no-results,.td-search-error{padding:15px 20px !important;text-align:center !important;color:#666666 !important;font-size:14px !important;background:#ffffff !important;display:flex !important;align-items:center !important;justify-content:center !important;gap:10px !important;border:none !important;margin:0 !important;min-height:50px !important}.td-search-loading::before{content:'';display:inline-block;width:16px;height:16px;border:2px solid #f3f3f3;border-top:2px solid #446084;border-radius:50%;animation:tdSearchSpin 0.6s linear infinite}@keyframes tdSearchSpin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.td-search-items{max-height:400px;overflow-y:auto}.td-search-results::-webkit-scrollbar,.td-search-items::-webkit-scrollbar{width:6px}.td-search-results::-webkit-scrollbar-track,.td-search-items::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px}.td-search-results::-webkit-scrollbar-thumb,.td-search-items::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:10px}.td-search-results::-webkit-scrollbar-thumb:hover,.td-search-items::-webkit-scrollbar-thumb:hover{background:#a8a8a8}.td-search-results,.td-search-items{scrollbar-width:thin;scrollbar-color:#c1c1c1 #f1f1f1}.td-search-item{display:flex;align-items:center;padding:12px 15px;border-bottom:1px solid #f0f0f0;cursor:pointer;transition:background-color 0.1s ease;text-decoration:none;color:#333 !important;background-color:#ffffff !important}.td-search-item:hover{background-color:#f9f9f9}.td-search-item:last-child{border-bottom:none}.td-item-link{display:flex;align-items:center;width:100%;text-decoration:none !important;color:inherit !important}.td-item-link:hover,.td-item-link:focus,.td-item-link:active{text-decoration:none !important;color:inherit !important}.td-item-image{flex-shrink:0;width:60px;height:60px;margin-right:15px;border-radius:4px;overflow:hidden;background:#ffffff}.td-item-image img{width:100%;height:100%;object-fit:cover;transition:transform 0.2s ease}.td-search-item:hover .td-item-image img{transform:scale(1.05)}.td-item-content{flex:1;min-width:0}.td-item-title{font-size:14px;font-weight:500;color:#333;margin-bottom:5px;line-height:1.4;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;text-overflow:ellipsis}.td-item-spec{font-size:12px;color:#6b7280;line-height:1.35;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.td-item-spec .td-search-highlight{color:#111827;font-weight:600;background:transparent;padding:0}.td-item-price{font-size:14px;font-weight:600;color:#dd3333}.td-item-price .woocommerce-Price-amount.amount{font-size:1.1em !important}.td-item-price del{text-decoration:line-through;color:#999;font-weight:normal}.td-item-price ins{text-decoration:none;color:#dd3333;font-weight:700}.td-item-price .td-item-price-prefix{color:#333;font-weight:400}.td-item-price-row{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%}.td-item-variations{display:none;padding:3px 12px;font-size:11px;font-weight:500;color:#4a5568;background:#ffffff;border:1px solid #cbd5e0;border-radius:12px;box-shadow:0 1px 2px rgba(0,0,0,0.04);white-space:nowrap;flex-shrink:0;letter-spacing:0.2px;line-height:1.5}@media(min-width:600px){.td-item-variations{display:inline-block}}.td-item-sku{font-size:12px;color:#999;margin-bottom:3px}.td-search-no-results{padding:15px 20px;text-align:center;color:#666;font-size:14px}.td-search-no-results::before{content:"🔍";display:block;font-size:24px;margin-bottom:8px;opacity:0.5}.td-search-error{padding:15px 20px;text-align:center;color:#d32f2f;font-size:14px;background:#ffffff}.td-search-more{padding:12px 15px;border-top:1px solid #f0f0f0;background:#ffffff}.td-search-more a{display:block;text-align:center;color:#446084;text-decoration:none;font-weight:600;font-size:13px;transition:color 0.2s ease}.td-search-more a:hover{color:#2c3e50}@media(max-width:1024px) and (min-width:769px){.td-search-results{max-height:450px}.td-search-item{padding:14px 16px}}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){.td-item-image img{image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges}}body.td-search-active{overflow:hidden}.td-search-results *{box-sizing:border-box}.td-search-item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.td-search-items{scroll-behavior:smooth}.td-search-item:focus{outline:2px solid #2563eb;outline-offset:-2px;background-color:#f8f9fa}.td-search-highlight{background-color:#fff3cd !important;color:#333333 !important;font-weight:700 !important;padding:1px 2px !important;border-radius:2px !important;border:1px solid #ffeaa7 !important;display:inline !important;line-height:inherit !important}.td-item-title .td-search-highlight{background-color:#fff3cd !important;color:#2c3e50 !important;font-weight:700 !important}.td-item-sku .td-search-highlight{background-color:#fff3cd !important;color:#495057 !important;font-weight:600 !important}.td-search-item:hover .td-search-highlight{background-color:#ffecb3 !important;border-color:#ffc107 !important}.td-search-highlight{white-space:nowrap !important;word-break:keep-all !important}@media(max-width:768px){.td-search-highlight{padding:0px 1px !important;font-size:inherit !important}}.livesearch-form .td-search-results .td-search-item,.livesearch-form .td-search-results .td-search-items .td-search-item,body .td-search-results .td-search-item,body .td-search-results .td-search-items .td-search-item,html body .td-search-results .td-search-item{background-color:#ffffff !important;color:#333333 !important}.livesearch-form .td-search-results .td-search-item:hover,.livesearch-form .td-search-results .td-search-items .td-search-item:hover,body .td-search-results .td-search-item:hover,body .td-search-results .td-search-items .td-search-item:hover,html body .td-search-results .td-search-item:hover{background-color:#f9f9f9 !important;color:#333333 !important}.livesearch-form .td-search-results .td-search-items,body .td-search-results .td-search-items,html body .td-search-results .td-search-items{background-color:#ffffff !important}@media(max-width:768px){.td-search-results{max-height:300px !important;border-radius:8px !important}.td-search-items{max-height:250px !important}.td-search-item{padding:10px 12px !important}.td-item-image{width:50px !important;height:50px !important;margin-right:12px !important;border-radius:6px !important}.td-item-title{font-size:13px !important;line-height:1.3 !important;margin-bottom:3px !important}.td-item-sku{font-size:11px !important;margin-bottom:2px !important}.td-item-spec{font-size:11px !important;margin-bottom:2px !important}.td-item-price{font-size:12px !important}.search-field,input[type="search"],input[name="s"]{font-size:16px !important;padding:12px 15px !important}.td-search-loading,.td-search-no-results,.td-search-error{padding:12px 15px !important;font-size:13px !important}.td-search-more{padding:10px 12px !important}.td-search-more a{font-size:12px !important}}@media screen and (max-width:849px){.mfp-wrap.off-canvas.mfp-ready{align-items:flex-start !important;padding-top:0 !important}.mfp-wrap.off-canvas.mfp-ready .mfp-container{padding-top:0 !important;padding-right:10px !important;padding-left:10px !important;margin-top:0 !important}.mfp-wrap.off-canvas.mfp-ready #search-lightbox{position:relative !important;width:100% !important;max-width:100% !important;margin:0 !important;border-radius:0 !important;background:transparent !important;min-height:auto !important;max-height:none !important}.mfp-wrap.off-canvas.mfp-ready #search-lightbox .searchform{position:relative !important;padding:20px 10px 10px !important;background:rgba(0,0,0,0.40) !important;backdrop-filter:blur(10px) !important;-webkit-backdrop-filter:blur(10px) !important;border-radius:20px !important;margin-bottom:15px !important}.mfp-wrap.off-canvas.mfp-ready #search-lightbox .search-field,.mfp-wrap.off-canvas.mfp-ready #search-lightbox input[type="search"]{background:#ffffff !important;border:none !important;border-radius:25px !important;padding:12px 50px 12px 20px !important;font-size:16px !important;color:#333333 !important;box-shadow:0 2px 10px rgba(0,0,0,0.1) !important}.mfp-wrap.off-canvas.mfp-ready #search-lightbox .search-submit,.mfp-wrap.off-canvas.mfp-ready #search-lightbox button[type="submit"]{border-radius:0 25px 25px 0 !important;background:#0066cc !important;border:none !important;padding:3px 16px !important}.mfp-wrap.off-canvas.mfp-ready #search-lightbox .td-search-results{position:relative !important;overflow-y:auto !important;background:rgba(255,255,255,0.95) !important;backdrop-filter:blur(20px) !important;-webkit-backdrop-filter:blur(20px) !important;border-radius:15px !important;border:none !important;max-height:calc(100vh - 200px) !important;margin:0 6px !important;box-shadow:0 4px 20px rgba(0,0,0,0.15) !important}.mfp-wrap.off-canvas.mfp-ready #search-lightbox .td-search-items{max-height:calc(100vh - 250px) !important}.mfp-wrap.off-canvas.mfp-ready #search-lightbox .td-search-item{padding:12px 15px !important;background:rgba(255,255,255,0.9) !important}.mfp-wrap.off-canvas.mfp-ready #search-lightbox .td-search-item:hover{background:rgba(249,249,249,0.95) !important}.mfp-wrap.off-canvas.mfp-ready #search-lightbox .td-item-image{width:50px !important;height:50px !important;margin-right:12px !important;border-radius:8px !important}.mfp-wrap.off-canvas.mfp-ready #search-lightbox .td-item-title{font-size:14px !important;color:#333333 !important;font-weight:500 !important;text-align:left !important}.mfp-wrap.off-canvas.mfp-ready #search-lightbox .td-item-price,.mfp-wrap.off-canvas.mfp-ready #search-lightbox span.woocommerce-Price-amount.amount{font-size:14px !important;color:#dd3333 !important;text-align:left !important}.mfp-wrap.off-canvas.mfp-ready #search-lightbox ins span.woocommerce-Price-amount.amount{color:#dd3333 !important}.mfp-wrap.off-canvas.mfp-ready #search-lightbox .td-search-loading,.mfp-wrap.off-canvas.mfp-ready #search-lightbox .td-search-no-results,.mfp-wrap.off-canvas.mfp-ready #search-lightbox .td-search-error{background:rgba(255,255,255,0.9) !important;color:#666666 !important;padding:20px !important;margin:0 !important}.mfp-wrap.off-canvas.mfp-ready .mfp-close{position:absolute !important;top:15px !important;right:20px !important;width:44px !important;height:44px !important;opacity:1 !important;background:rgba(255,255,255,0.2) !important;border-radius:50% !important;z-index:10 !important;display:flex !important;align-items:center !important;justify-content:center !important}.mfp-wrap.off-canvas.mfp-ready .mfp-close:before{font-size:24px !important;color:#ffffff !important;line-height:1 !important}.mfp-wrap.off-canvas.mfp-ready .mfp-close svg{width:20px !important;height:20px !important;stroke:#ffffff !important;stroke-width:3 !important}}.header-search-form .search-field::placeholder,.header-search-form input[type="search"]::placeholder,.header-search-form input[name="s"]::placeholder,.header-search-form .header-search input::placeholder,.header-search-form .header-search .search-field::placeholder,.header-search-form form.searchform input[type="search"]::placeholder,.header-search-form .searchform input.search-field::placeholder,.header-search-form #searchform input::placeholder,.header-search-form .nav-search input::placeholder,.search-field::placeholder,input[type="search"]::placeholder,input[name="s"]::placeholder{color:#999999 !important;opacity:1 !important;font-style:italic !important}.header-search-form .search-field::-moz-placeholder,.header-search-form input[type="search"]::-moz-placeholder,.header-search-form input[name="s"]::-moz-placeholder,.search-field::-moz-placeholder,input[type="search"]::-moz-placeholder,input[name="s"]::-moz-placeholder{color:#999999 !important;opacity:1 !important;font-style:italic !important}.header-search-form .search-field::-webkit-input-placeholder,.header-search-form input[type="search"]::-webkit-input-placeholder,.header-search-form input[name="s"]::-webkit-input-placeholder,.search-field::-webkit-input-placeholder,input[type="search"]::-webkit-input-placeholder,input[name="s"]::-webkit-input-placeholder{color:#999999 !important;opacity:1 !important;font-style:italic !important} [data-theme="dark"] .td-search-results,[data-theme="dark"] .searchform .td-search-results,[data-theme="dark"] .header-search-form .td-search-results,[data-theme="dark"] [data-live-search] .td-search-results,[data-theme="dark"] html body .td-search-results,[data-theme="dark"] body .td-search-results{background:var(--bg-2,#161b27) !important;border-color:var(--line,#2c3548) !important;color:var(--ink,#f0f2f7) !important;box-shadow:0 4px 12px rgba(0,0,0,0.5) !important}[data-theme="dark"] body .td-search-results .td-search-items,[data-theme="dark"] html body .td-search-results .td-search-items,[data-theme="dark"] .td-search-items{background:var(--bg-2,#161b27) !important}[data-theme="dark"] .td-search-item,[data-theme="dark"] body .td-search-results .td-search-item,[data-theme="dark"] html body .td-search-results .td-search-item,[data-theme="dark"] .livesearch-form .td-search-results .td-search-item,[data-theme="dark"] body .td-search-results .td-search-items .td-search-item,[data-theme="dark"] html body .td-search-results .td-search-items .td-search-item,[data-theme="dark"] .livesearch-form .td-search-results .td-search-items .td-search-item{background-color:var(--bg-2,#161b27) !important;color:var(--ink,#f0f2f7) !important;border-bottom-color:var(--line,#2c3548) !important}[data-theme="dark"] .td-search-item:hover,[data-theme="dark"] body .td-search-results .td-search-item:hover,[data-theme="dark"] html body .td-search-results .td-search-item:hover,[data-theme="dark"] .livesearch-form .td-search-results .td-search-item:hover,[data-theme="dark"] body .td-search-results .td-search-items .td-search-item:hover,[data-theme="dark"] html body .td-search-results .td-search-items .td-search-item:hover{background-color:var(--bg-3,#1d2536) !important;color:var(--ink,#f0f2f7) !important}[data-theme="dark"] .td-item-title{color:var(--ink,#f0f2f7) !important}[data-theme="dark"] .td-item-spec{color:var(--muted,#8b95a9) !important}[data-theme="dark"] .td-item-spec .td-search-highlight{color:var(--ink,#f0f2f7) !important}[data-theme="dark"] .td-item-price .td-item-price-prefix{color:var(--muted,#8b95a9) !important}[data-theme="dark"] .td-item-price del{color:var(--muted,#8b95a9) !important}[data-theme="dark"] .td-item-sku{color:var(--muted,#8b95a9) !important}[data-theme="dark"] .td-item-variations{background:var(--bg-3,#1d2536) !important;color:var(--ink,#f0f2f7) !important;border-color:var(--line,#2c3548) !important}[data-theme="dark"] .td-search-highlight{background-color:rgba(255,200,0,0.18) !important;color:var(--ink,#f0f2f7) !important;border-color:rgba(255,200,0,0.3) !important}[data-theme="dark"] .td-item-title .td-search-highlight{color:#fff !important}[data-theme="dark"] .td-search-item:hover .td-search-highlight{background-color:rgba(255,200,0,0.25) !important}[data-theme="dark"] .td-search-more{background:var(--bg-3,#1d2536) !important;border-top-color:var(--line,#2c3548) !important}[data-theme="dark"] .td-search-more a{color:#7ba7d4 !important}[data-theme="dark"] .td-search-more a:hover{color:#aac8e8 !important}[data-theme="dark"] .td-search-loading,[data-theme="dark"] .td-search-no-results,[data-theme="dark"] .td-search-error{background:var(--bg-2,#161b27) !important;color:var(--muted,#8b95a9) !important}[data-theme="dark"] .td-search-error{color:#f87171 !important}[data-theme="dark"] .td-search-results::-webkit-scrollbar-track,[data-theme="dark"] .td-search-items::-webkit-scrollbar-track{background:var(--bg-3,#1d2536) !important}[data-theme="dark"] .td-search-results::-webkit-scrollbar-thumb,[data-theme="dark"] .td-search-items::-webkit-scrollbar-thumb{background:var(--line,#2c3548) !important}[data-theme="dark"] .td-item-image{background:var(--bg-3,#1d2536) !important}[data-theme="dark"] .td-search-results .td-search-items .td-search-item .td-item-price,[data-theme="dark"] .td-search-results .td-search-items .td-search-item .td-item-price *,[data-theme="dark"] .td-search-results .td-search-items .td-search-item .td-item-price ins,[data-theme="dark"] .td-search-results .td-search-items .td-search-item .td-item-price ins *,[data-theme="dark"] .td-search-results .td-search-items .td-search-item .td-item-price .woocommerce-Price-amount,[data-theme="dark"] .td-search-results .td-search-items .td-search-item .td-item-price .woocommerce-Price-amount *{color:#dd3333 !important}[data-theme="dark"] .td-search-results .td-search-items .td-search-item .td-item-price .td-item-price-prefix{color:var(--muted,#8b95a9) !important}[data-theme="dark"] .td-search-results .td-search-items .td-search-item .td-item-price del,[data-theme="dark"] .td-search-results .td-search-items .td-search-item .td-item-price del *{color:var(--muted,#8b95a9) !important}/* ============ LAPTOP STORE — modern VN tech-retail ============ */ /* color-scheme bám theo toggle site (data-theme), KHÔNG theo OS — tránh input/checkbox không-style bị OS dark mode làm tối khi site đang light (vd filter). */ html{color-scheme:light;} html[data-theme="dark"]{color-scheme:dark;}:root{--red:#d42626;--red-600:#c42828;--red-50:#fff0f0;--red-ink:#d42626;/* đỏ CHỮ trên nền trang (contrast) */ --red-10:rgba(212,38,38,.08);/* nền tint đỏ nhạt */ --ink:#0f1419;--ink-2:#2b3139;--muted:#6b7280;--muted-2:#9ca3af;--line:#e5e7eb;--line-2:#f1f3f5;--bg:#ffffff;--bg-2:#f7f8fa;--bg-3:#eef0f3;--surface:#ffffff;/* Card/panel background — LUÔN dùng var(--surface) thay cho #fff hardcode */ --ok:#12a150;--warn:#f5a524;--yellow:#ffd60a;--radius:10px;--radius-sm:6px;--radius-lg:16px;--shadow-sm:0 1px 2px rgba(15, 20, 25, .05);--shadow:0 2px 8px rgba(15, 20, 25, .06), 0 1px 2px rgba(15, 20, 25, .04);--shadow-lg:0 12px 32px -8px rgba(15, 20, 25, .16);--container:1320px;--header-h:128px;} [data-theme="dark"]{--ink:#f5f7fa;--ink-2:#d1d5db;--muted:#9ca3af;--muted-2:#6b7280;--line:#2a2f36;--line-2:#1c2025;--bg:#0d1117;--bg-2:#151a21;--bg-3:#1c222b;--surface:#0d1117;/* = var(--bg) — cards tối hơn body (#151a21) để tạo depth */ --red-50:#2a0f0f;--red-ink:#ff5050;/* đỏ chữ SÁNG cho nền tối (contrast AA) */ --red-10:rgba(255,80,80,.14);/* Remap WP preset vars → dark-mode aware, fix heading color trên policy/block pages */ --wp--preset--color--ink:var(--ink);--wp--preset--color--ink-soft:var(--ink-2);--wp--preset--color--bg:var(--bg);--wp--preset--color--bg-soft:var(--bg-2);--wp--preset--color--muted:var(--muted);--wp--preset--color--line:var(--line);} /* Chuyển trang mượt (View Transitions API) — Chromium; trình khác bỏ qua an toàn */ @view-transition{navigation:auto;}::view-transition-old(root), ::view-transition-new(root){animation-duration:.16s;} *{box-sizing:border-box;} html, body{margin:0;padding:0;} html{overflow-x:hidden;} body { background: var(--bg-2); color: var(--ink); font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; } a{color:inherit;text-decoration:none;} button{font-family:inherit;cursor:pointer;} img{max-width:100%;display:block;} .container{max-width:var(--container);margin:0 auto;padding:0;} .mono{font-family:'JetBrains Mono', ui-monospace, monospace;} /* ============ TOP UTILITY BAR ============ */ .topbar{background:var(--ink);color:#fff;font-size:12.5px;} .topbar-inner{display:flex;justify-content:space-between;align-items:center;height:36px;} .topbar-inner a{opacity:.85;} .topbar-inner a:hover{opacity:1;color:#fff;} .topbar-left, .topbar-right{display:flex;gap:20px;align-items:center;} .topbar .sep{opacity:.3;} .topbar .live-dot{width:6px;height:6px;border-radius:50%;background:#22c55e;display:inline-block;animation:pulse 1.6s infinite;} @keyframes pulse { 0%, 100%{opacity:1;} 50%{opacity:.4;} } /* ============ HEADER ============ */ .header{background:#fff;color:var(--ink);position:sticky;top:0;z-index:50;border-bottom:1px solid var(--line);box-shadow:0 1px 3px rgba(0,0,0,.04);} /* Header dùng container 1320px (giống meganav) để search align với menu nav. Dark-mode toggle floating absolute ra ngoài, sát mép phải viewport. Sticky đã tạo containing block cho .hp-theme-toggle absolute child — không cần relative. */ .header > .container{max-width:1280px;} .header-inner{display:grid;/* Col 1 = 234px (logo, căn trái với "Trang chủ" trong nav), Col 2 = 1fr (search co dãn, kết thúc tại "Bảo hành"), Col 3 = 284px (header-actions justify-self:end, align phải container). */ grid-template-columns:234px minmax(0, 1fr) auto;align-items:center;gap:20px;padding:14px 0;} .header-inner > .header-actions{justify-self:end;min-width:max-content;} /* Theme toggle giờ nằm trong .header-actions — không còn absolute floating sát mép viewport. Hiển thị ở mọi breakpoint. */ .header-actions > .hp-theme-toggle, .header-actions > .hp-lang-toggle{flex-shrink:0;width:34px;height:34px;} .logo{display:flex;align-items:baseline;gap:2px;cursor:pointer;} .logo .l-img{height:44px;width:auto;} /* Logo light/dark — hiện theo [data-theme] (set trước paint), không JS swap → không flash */ .hp-logo--dark{display:none;} [data-theme="dark"] .hp-logo--light{display:none;} [data-theme="dark"] .hp-logo--dark{display:block;} /* Card clickable → con trỏ bàn tay (news-card có onclick toàn card; product .card có link ảnh+tên) */ .news-card, .card.card{cursor:pointer;} form.search{position:relative;background:#fff;border-radius:10px;height:48px;display:flex;align-items:center;padding:0 8px 0 18px;border:1.5px solid var(--line);transition:border-color .15s, box-shadow .15s;box-shadow:0 1px 3px rgba(0,0,0,.03);} form.search:hover{border-color:var(--muted-2);box-shadow:0 2px 8px rgba(0,0,0,.06);} form.search:focus-within{border-color:var(--red);box-shadow:0 0 0 4px rgba(221, 51, 51, .12), 0 2px 8px rgba(0,0,0,.06);} [data-theme="dark"] .search{background:var(--bg-2);border-color:var(--line);} form.search input{flex:1;border:0;outline:0;font:inherit;font-size:14.5px;color:var(--ink);background:transparent;padding:0 10px;box-shadow:none !important;} /* Override plugin instant-search-v2-r3.css force border-color #446084 + box-shadow khi focus */ form.search input, form.searchform input, form.search input[type="search"], form.searchform input[type="search"], form.search input[name="s"], form.searchform input[name="s"], form.search input[type="search"]:focus, form.searchform input[type="search"]:focus, form.search input[name="s"]:focus, form.searchform input[name="s"]:focus, form.search input:focus, form.searchform input:focus, form.search input:focus-visible, form.searchform input:focus-visible{background:transparent !important;border:0 !important;border-radius:0 !important;outline:0 !important;box-shadow:none !important;} form.search input::placeholder{color:var(--muted);} /* Khi plugin instant-search active → ẩn fallback hints của theme */ body.hungphat-instant-search-active .search-hints{display:none !important;} /* Position dropdown td-search-results của plugin theo form */ form.search .td-search-results{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-lg);z-index:1000;} /* Plugin tự control display via JS — chỉ chắc chắn ẩn khi chưa khởi tạo */ form.search .td-search-results:empty{display:none !important;} form.search .s-btn{background:var(--red);color:#fff;border:0;height:32px;padding:0 16px;border-radius:7px;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:6px;} form.search .s-btn:hover{background:var(--red-600);} form.search .s-icon{color:var(--muted);} .search-hints{position:absolute;top:46px;left:0;right:0;background:var(--bg);color:var(--ink);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:8px 0;display:none;border:1px solid var(--line);} [data-theme="dark"] .search-hints{background:var(--bg-2);border-color:var(--line-2);} form.search:focus-within .search-hints{display:block;} .search-hints .ttl{padding:8px 16px;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600;} .search-hints a{display:flex;justify-content:space-between;padding:8px 16px;font-size:13.5px;color:var(--ink);} .search-hints a:hover{background:var(--bg-2);} [data-theme="dark"] .search-hints a:hover{background:var(--bg);} .search-hints a .tag{background:var(--red-50);color:var(--red-ink);font-size:10px;padding:2px 6px;border-radius:4px;font-weight:600;} .header-actions{display:flex;align-items:center;gap:8px;} .hp-search-toggle{display:none;} .ha{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:8px;cursor:pointer;color:var(--ink);transition:background .15s;font-size:13px;position:relative;border:none;background:transparent;-webkit-appearance:none;appearance:none;text-decoration:none;} .ha > svg, .ha .s-icon{color:var(--red-ink);width:20px;height:20px;flex-shrink:0;} .ha:hover{background:var(--bg-2);} .ha .ha-label{display:flex;flex-direction:column;line-height:1.15;font-size:10.5px;color:var(--muted);white-space:nowrap;} .ha .ha-label strong{font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap;} .ha .badge{position:absolute;top:2px;right:2px;background:var(--yellow);color:var(--ink);font-size:10px;font-weight:700;min-width:16px;height:16px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;} @media(max-width:1080px){ .header-actions .ha.ha-hide-md{display:none;} /* Ham-btn là child đầu tiên → cần 4 cột */ .header-inner{grid-template-columns:40px 128px minmax(0, 1fr) auto;gap:14px;padding:12px 0;} .header-inner > .logo{margin-left:2px;min-width:128px;} .meganav{display:none !important;} /* Tablet: thêm padding 2 bên để nội dung không bị ép sát màn hình */ .container, .hp-container, .topbar > .container, .header > .container{padding-left:16px;padding-right:16px;} /* Logo nhỏ lại ở tablet */ .logo .l-img{height:36px;} .header-actions{gap:6px;} .header-actions .ha-label{display:none;} /* Search giới hạn chiều cao + padding compact */ .header-inner > form.search{max-width:none;width:100%;min-width:0;height:40px;margin-left:4px;} .header-inner > form.search input{font-size:13px;} } @media(max-width:860px){ .ha .ha-label{display:none;} } /* ============ MEGA NAV ============ */ .meganav{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:76px;z-index:40;} [data-theme="dark"] .meganav{background:var(--bg);} .meganav-inner{display:flex;align-items:stretch;height:52px;gap:4px;padding:0 15px;} .meganav a{display:inline-flex;align-items:center;gap:6px;padding:0 14px;font-size:13.5px;white-space:nowrap;color:var(--ink-2);position:relative;font-weight:500;} .meganav a:hover{color:var(--red-ink);} .meganav a.active{color:var(--red-ink);font-weight:600;} .meganav a.active::after{content:"";position:absolute;bottom:-1px;left:14px;right:14px;height:2px;background:var(--red);} .meganav .cat-btn{background:linear-gradient(135deg, var(--red), #b82525);color:#fff;padding:0 22px;font-weight:700;margin:6px 12px 6px 0;display:inline-flex;align-items:center;gap:12px;border:0;cursor:pointer;font:inherit;height:40px;border-radius:10px;white-space:nowrap;transition:all .18s;box-shadow:0 6px 16px -4px rgba(221,51,51,.45), inset 0 1px 0 rgba(255,255,255,.18);letter-spacing:.01em;} .meganav .cat-btn:hover{color:#fff;background:linear-gradient(135deg, #c42828, #8e1a1a);transform:translateY(-1px);box-shadow:0 10px 22px -4px rgba(221,51,51,.55), inset 0 1px 0 rgba(255,255,255,.22);} .meganav .cat-btn .cat-btn__menu{font-size:13px;} .meganav .cat-btn .cat-btn__chev{font-size:11px;transition:transform .2s;} .meganav .cat-btn svg{width:14px;height:14px;} .meganav .cat-btn.is-open{background:linear-gradient(135deg, #c42828, #8e1a1a);transform:translateY(-1px);box-shadow:0 10px 22px -4px rgba(221,51,51,.55), inset 0 1px 0 rgba(255,255,255,.22);} .meganav .cat-btn.is-open .cat-btn__chev{transform:rotate(180deg);} .meganav .hot{color:var(--red-ink);} /* ============ MEGA MENU PANEL ============ */ /* Backdrop ẩn — panel đứng độc lập, không overlay tối toàn trang */ .hp-megamenu__backdrop{display:none !important;} .hp-megamenu{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%) translateY(-6px);width:min(1280px, calc(100vw - 40px));background:#fff;border-radius:12px;box-shadow:0 24px 48px rgba(0,0,0,.18), 0 4px 12px rgba(0,0,0,.08);z-index:41;opacity:0;transition:opacity .2s, transform .2s;pointer-events:none;overflow:hidden;border:1px solid var(--line);} .hp-megamenu.is-show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto;} [data-theme="dark"] .hp-megamenu{background:var(--bg);border-color:var(--line);} .hp-megamenu__inner{display:grid;grid-template-columns:256px 1fr;min-height:480px;} /* Filter "Danh mục" (shop) — list cao hơn, override plugin (mặc định max-height:150px ~5 mục) */ /* Sidebar (cột trái) */ .hp-megamenu__sidebar{background:#f2f7fc;padding:20px 20px;border-right:1px solid var(--line);} [data-theme="dark"] .hp-megamenu__sidebar{background:var(--bg-2);} .mm-side-group + .mm-side-group{margin-top:16px;padding-top:14px;border-top:1px solid rgba(0,0,0,.06);} .mm-side-group__heading{margin:0 0 8px;font-size:13px;font-weight:700;color:var(--ink);letter-spacing:.02em;padding-bottom:6px;border-bottom:1px solid rgba(221,51,51,.18);} .mm-side-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0;} .hp-megamenu__sidebar .mm-side-link{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:6px;color:var(--ink);font-size:13px;font-weight:500;transition:all .12s;line-height:1.5;} .hp-megamenu__sidebar .mm-side-link:hover{background:var(--red);color:#fff !important;padding-left:14px;} .hp-megamenu__sidebar .mm-side-link:hover .mm-icon{color:#fff !important;} .hp-megamenu__sidebar .mm-side-link .mm-icon{width:16px;text-align:center;color:var(--red-ink) !important;flex-shrink:0;font-size:15px;} /* Cột content */ .hp-megamenu__cols{position:relative;display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:24px;padding:22px 24px;} .mm-col{display:flex;flex-direction:column;gap:18px;min-width:0;} .mm-block__heading{margin:0 0 10px;font-size:13px;font-weight:700;color:var(--red-ink);letter-spacing:.02em;padding-bottom:8px;border-bottom:2px solid var(--red);} .mm-block__heading a{color:inherit;} .mm-block__heading a:hover{color:var(--red-600);} .mm-block__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;} .mm-block__link{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:13.5px;color:var(--ink-2);transition:color .12s, transform .12s;} .mm-block__link:hover{color:var(--red-ink);transform:translateX(2px);} .mm-block__link .mm-chev{font-size:9px;color:var(--muted);width:10px;text-align:center;flex-shrink:0;} .mm-block__link:hover .mm-chev{color:var(--red-ink);} /* Promo box — đặt ở ĐẦU cột cuối (in-flow, không absolute) */ .mm-promo{background:var(--ink);color:#fff;padding:14px 18px;border-radius:10px;display:flex;flex-direction:column;gap:2px;text-decoration:none;box-shadow:0 6px 16px rgba(0,0,0,.18);margin-bottom:4px;} .mm-promo__kicker{font-size:10.5px;font-weight:700;letter-spacing:.8px;color:var(--yellow);text-transform:uppercase;} .mm-promo__title{font-size:15px;font-weight:700;color:#fff;line-height:1.25;} .mm-promo__sub{font-size:12px;color:rgba(255,255,255,.7);} a.mm-promo:hover{box-shadow:0 8px 22px rgba(0,0,0,.25);transform:translateY(-1px);transition:transform .15s, box-shadow .15s;} /* KHÔNG khoá scroll bằng overflow:hidden khi mở mega — nó phá position:sticky của .header/.meganav (header biến mất khi rê vào danh mục). Mega là dropdown absolute dưới nav, không có backdrop → không cần khoá scroll. */ /* Responsive: tablet trở xuống → ẩn (mobile sẽ làm drawer riêng sau) */ @media(max-width:1080px){ .hp-megamenu{display:none !important;} .hp-megamenu__backdrop{display:none !important;} } /* ============ BUTTONS ============ */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 20px;border-radius:var(--radius-sm);border:0;background:var(--red);color:#fff;font-size:13.5px;font-weight:600;transition:background .15s, transform .1s;} .btn:hover{background:var(--red-600);} .btn:active{transform:scale(.98);} .btn.ghost{background:transparent;color:var(--red-ink);border:1px solid var(--red);} .btn.ghost:hover{background:var(--red-50);} .btn.dark{background:var(--ink);color:#fff;} .btn.dark:hover{background:#000;} .btn.white{background:#fff;color:var(--red-ink);} .btn.white:hover{background:var(--bg-2);} .btn.large{padding:14px 28px;font-size:15px;} /* ============ HERO ============ */ .hero{padding:0;} .hero-grid{display:grid;grid-template-columns:240px 1fr 300px;gap:16px;min-height:380px;/* khớp critical.css (min-height, không phải height cố định) → tránh CLS khi main async load */} .hero-sidebar{background:#fff;border-radius:var(--radius);padding:6px;box-shadow:var(--shadow-sm);overflow:hidden;border:1px solid var(--line);display:flex;flex-direction:column;} [data-theme="dark"] .hero-sidebar{background:var(--bg);} .hero-main{background:linear-gradient(135deg, #dd3333 0%, #a01c1c 100%);border-radius:var(--radius-lg);color:#fff;position:relative;overflow:hidden;padding:40px 48px;display:flex;flex-direction:column;justify-content:space-between;} .hero-main::before{content:"";position:absolute;right:-80px;top:-80px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle, rgba(255,255,255,.12) 0%, transparent 70%);} .hero-main::after{content:"";position:absolute;right:40px;bottom:30px;width:360px;height:240px;background:repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 16px, transparent 16px 32px);border:1px dashed rgba(255,255,255,.3);border-radius:8px;} .hero-main .hm-kicker{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.18);backdrop-filter:blur(4px);padding:6px 12px;border-radius:99px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;align-self:flex-start;position:relative;z-index:2;} .hero-main h1{font-size:54px;line-height:1.02;font-weight:700;letter-spacing:-0.025em;margin:18px 0 8px;max-width:9ch;position:relative;z-index:2;} .hero-main .hm-sub{font-size:15px;opacity:.9;max-width:32ch;position:relative;z-index:2;} .hero-main .hm-cta{display:flex;gap:10px;position:relative;z-index:2;} .hero-main .hm-price{display:flex;align-items:baseline;gap:10px;margin-bottom:16px;position:relative;z-index:2;} .hero-main .hm-price .now{font-size:28px;font-weight:700;color:var(--yellow);} /* ===== Hero SLIDER (banner lớn) — PSI: aspect-ratio cố định chống CLS ===== */ .hero-main--slider{padding:0;background:var(--bg-2);display:block;} /* Bỏ vòng tròn + sọc placeholder của .hero-main text banner khi là slider */ .hero-main--slider::before, .hero-main--slider::after{content:none;display:none;} /* viewport giữ tỷ lệ 728:380 → có chiều cao ngay cả khi slide absolute → KHÔNG CLS */ .hero-slider__viewport{position:relative;width:100%;border-radius:inherit;overflow:hidden;aspect-ratio:1400 / 800;min-height:380px;} /* no-JS: slide 1 luôn hiện (PSI/no-JS an toàn). */ /* Khi JS chạy → thêm .hero-slider--js: chỉ slide .is-active hiện. */ .hero-slider__img{width:100%;height:100%;object-fit:cover;display:block;} /* Nút = vùng chạm 24×24 (a11y touch target), chấm nhỏ vẽ bằng ::before */ .hero-side{display:grid;grid-template-rows:1fr 1fr;gap:16px;} /* Banner nhỏ = ảnh 19:10 (ảnh gốc 760×400) → khung khớp tỷ lệ, object-fit contain để hiện TRỌN ảnh không cắt, không dư khoảng trắng (khung = tỷ lệ ảnh). */ .hero-banner--img{padding:0;} .hero-banner{border-radius:var(--radius);overflow:hidden;position:relative;padding:18px 20px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;font-weight:600;} .hero-banner.b1{background:linear-gradient(135deg, #0f1419, #2b3139);} .hero-banner.b2{background:linear-gradient(135deg, #1e40af, #0ea5e9);} /* ============ BENEFIT BAR ============ */ .benefits{margin-top:18px;background:#fff;border-radius:var(--radius);padding:16px 10px;display:grid;grid-template-columns:repeat(4, 1fr);gap:4px;box-shadow:var(--shadow-sm);margin-bottom:0;} [data-theme="dark"] .benefits{background:var(--bg);} .benefits .b{display:flex;align-items:center;gap:14px;padding:8px 16px;border-right:1px solid var(--line);} .benefits .b:last-child{border-right:0;} .benefits .b-ico{width:40px;height:40px;border-radius:50%;background:var(--red-50);color:var(--red-ink);display:flex;align-items:center;justify-content:center;flex-shrink:0;} .benefits .b-t{font-weight:700;font-size:13px;} .benefits .b-s{font-size:12px;color:var(--muted);} /* ============ SECTION SHELL ============ */ .sect{background:#fff;border-radius:var(--radius-lg);padding:24px;margin-bottom:20px;box-shadow:var(--shadow-sm);} [data-theme="dark"] .sect{background:var(--bg);} /* ============ CATEGORY BANNERS ============ */ .cat-banner-row{display:grid;grid-template-columns:repeat(4, 1fr);gap:14px;width:100%;max-width:none;margin:24px 0;padding:0;} .cat-bn{position:relative;border-radius:var(--radius-lg);padding:22px 22px 20px;color:#fff;cursor:pointer;overflow:hidden;min-height:140px;display:flex;flex-direction:column;justify-content:flex-end;transition:transform .25s, box-shadow .25s;box-shadow:0 6px 18px rgba(0,0,0,.08);} /* Ảnh banner danh mục dạng thật (LCP) — phủ kín, dưới overlay + text */ /* Overlay tối CHỈ khi có ảnh (banner gradient-only không cần, tránh bị tối thêm) */ .cat-bn:has(> .cat-bn__bg)::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(135deg, rgba(0,0,0,.55), rgba(0,0,0,.2));} .cat-bn > span{position:relative;z-index:2;} .cat-bn::after{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse at top right, rgba(255,255,255,.25), transparent 60%);pointer-events:none;} .cat-bn:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.18);} .cat-bn .cb-k{font-size:22px;font-weight:700;letter-spacing:-0.01em;line-height:1.1;} .cat-bn .cb-s{font-size:13px;opacity:.88;margin-top:4px;} .cat-bn .cb-go{margin-top:14px;font-size:12px;font-weight:600;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:rgba(255,255,255,.2);border-radius:99px;backdrop-filter:blur(4px);align-self:flex-start;transition:background .2s;} .cat-bn:hover .cb-go{background:rgba(255,255,255,.3);} /* iPad Air landscape (1180px): 3 cột (8 items → 3+3+2) */ @media(max-width:1180px){ .cat-banner-row{grid-template-columns:repeat(3, 1fr);} } @media(max-width:900px){ .cat-banner-row{grid-template-columns:repeat(2, 1fr);} } /* ============ FLASH SALE ============ */ /* Countdown--full: số + label compact 2 dòng TRONG box (giữ .flash padding cân đối top/bottom, không cần padding-bottom extra). */ /* ============ PRODUCT CARD ============ */ /* minmax(0,1fr) CHỐNG grid blowout: track 1fr mặc định = minmax(auto,1fr) không co dưới min-content; card có .sp-v white-space:nowrap → min-content = cả chuỗi spec dài → cột đó phình rộng ("sản phẩm giữa to hơn"). minmax(0,...) + .card min-width:0 ép đều. */ .grid-5{display:grid;grid-template-columns:repeat(5, minmax(0, 1fr));gap:16px;} .grid-4{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:16px;} .grid-3{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:16px;} .card{min-width:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:10px;cursor:pointer;transition:transform .2s, box-shadow .2s, border-color .2s;display:flex;flex-direction:column;position:relative;overflow:hidden;} [data-theme="dark"] .card{background:var(--bg);} [data-theme="dark"] .card .media{background:var(--bg-2) !important;} .card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--red);} .card .media{position:relative;background:#fff;border-radius:8px;margin-bottom:12px;overflow:hidden;aspect-ratio:1 / 1;/* khung vuông đồng đều — tránh card cao thấp khác nhau do ảnh khác tỉ lệ */} .card .card-img{display:block;width:100%;height:100%;object-fit:contain;background:#fff;transition:transform .3s;} /* --- Card hết hàng / ngừng kinh doanh: mờ ảnh (grayscale) + nhãn GIỮA ảnh ------ * Anh Phát: nhãn to, nằm giữa hình. Slate=hết hàng, cam=ngừng KD (đều đạt AA với chữ trắng). */ /* không phóng ảnh SP không mua được */ @media(max-width:560px){/* card 2 cột mobile hẹp → thu nhỏ cho vừa 1 hàng */} .card:hover .card-img{transform:scale(1.06);} /* .discount-pill (bottom-left) đã bỏ — badge sale gộp vào .badge-t.sale ở top-left. Giữ rule rỗng để legacy markup không break layout. */ .card .name{font-size:14.5px;font-weight:600;line-height:1.3;margin-bottom:6px;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:38px;text-align:center;} .card .chips{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:8px;} .card .specs{display:flex;flex-direction:column;gap:3px;padding:8px 10px;background:var(--bg-2);border-radius:6px;margin-bottom:10px;font-size:11.5px;line-height:1.35;} .card .spec{display:flex;gap:8px;min-width:0;align-items:baseline;} .card .spec .sp-k{color:var(--muted);font-weight:600;font-size:10px;letter-spacing:0.3px;flex-shrink:0;width:26px;} .card .spec .sp-v{color:var(--ink);font-weight:500;overflow:visible;white-space:normal;/* cho wrap để KHÔNG cắt spec ở màn hẹp (an toàn nhờ minmax(0,1fr)+card min-width:0) */ overflow-wrap:anywhere;min-width:0;flex:1;} .card .chip{background:var(--bg-2);font-size:10.5px;font-weight:500;padding:2px 7px;border-radius:4px;color:var(--ink-2);} /* CSS stars — replaces 5 inline SVGs per card (DOM reduction) */ /* placeholder */ .ph{width:100%;height:100%;background:linear-gradient(135deg, var(--bg-2) 0%, var(--bg-3) 100%);display:flex;align-items:center;justify-content:center;color:var(--muted-2);font-family:'JetBrains Mono', monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;position:relative;overflow:hidden;} .ph::before{content:"";position:absolute;inset:8%;border:1px dashed var(--muted-2);opacity:.4;border-radius:4px;} .ph span{position:relative;z-index:1;background:rgba(255,255,255,.7);padding:2px 8px;border-radius:3px;backdrop-filter:blur(2px);} [data-theme="dark"] .ph span{background:rgba(15,20,25,.8);} /* ============ BRAND STRIP ============ */ [data-theme="dark"] .brand-pill{background:var(--bg);} /* ============ PROMO BANNER ROW ============ */ /* ============ BLOG TEASER ============ */ .post{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:transform .2s, box-shadow .2s;} [data-theme="dark"] .post{background:var(--bg);} .post:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);} /* ============ LISTING PAGE ============ */ [data-theme="dark"] .filters-box{background:var(--bg);} [data-theme="dark"] .listing-top{background:var(--bg);} /* ============ PRODUCT DETAIL ============ */ [data-theme="dark"] .pdp-card{background:var(--bg);} [data-theme="dark"] .pdp-price-box{background:linear-gradient(135deg, #2a0f0f, #1a0808);border-color:#3a1818;} .opts{display:flex;gap:8px;flex-wrap:wrap;} [data-theme="dark"] .opt{background:var(--bg);} .qty{display:inline-flex;border:1.5px solid var(--line);border-radius:6px;overflow:hidden;} .qty button{width:36px;height:40px;background:#fff;border:0;font-size:16px;color:var(--ink);} .qty input{width:48px;border:0;text-align:center;font:inherit;font-size:14px;font-weight:600;border-left:1.5px solid var(--line);border-right:1.5px solid var(--line);background:#fff;color:var(--ink);} [data-theme="dark"] .qty button, [data-theme="dark"] .qty input{background:var(--bg);} .qty input:focus{outline:0;} [data-theme="dark"] .promo-card{background:var(--bg);} /* ============ CART + CHECKOUT ============ */ [data-theme="dark"] .cart-drawer{background:var(--bg);} [data-theme="dark"] .mini-qty button{background:var(--bg);} .checkout{padding:20px 0 40px;} [data-theme="dark"] .ck-block{background:var(--bg);} [data-theme="dark"] .field input, [data-theme="dark"] .field select{background:var(--bg-3);} [data-theme="dark"] .order-summary{background:var(--bg);} /* ============ FOOTER ============ */ footer{background:var(--ink);color:#fff;} footer .top{padding:40px 0 32px;} footer .grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:32px;} footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;font-size:13px;} footer ul a{color:rgba(255,255,255,.75);} footer ul a:hover{color:#fff;} footer .bottom{padding:16px 0;border-top:1px solid rgba(255,255,255,.08);font-size:12px;color:rgba(255,255,255,.5);display:flex;justify-content:space-between;} /* ============ TOAST ============ */ .toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%) translateY(30px);background:var(--ink);color:#fff;padding:12px 20px;font-size:13.5px;border-radius:8px;z-index:200;opacity:0;pointer-events:none;transition:all .25s;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:10px;} .toast.show{opacity:1;transform:translateX(-50%) translateY(0);} /* ============ RESPONSIVE ============ */ /* iPad Pro 11"/12.9" landscape (1024-1366px): grid 5 → 4 cols, grid 4 giữ 4 */ @media(max-width:1366px){ .grid-5{grid-template-columns:repeat(4, minmax(0, 1fr));} .cat-banner-row{grid-template-columns:repeat(4, 1fr);} } /* Tablet: 768 – 1160px (iPad Air landscape & smaller) */ @media(max-width:1160px){ .grid-5{grid-template-columns:repeat(3, minmax(0, 1fr));} .grid-4{grid-template-columns:repeat(3, minmax(0, 1fr));} /* Hero giữ 3 cột (sidebar nhỏ + main + side banners) thay vì hide hero-side */ .hero-grid{grid-template-columns:200px 1fr 220px;gap:6px;height:auto;} .hero-main{padding:28px 24px;min-height:320px;} .hero-main h1{font-size:36px !important;} .hero-side{gap:12px;} .hero-banner{padding:14px 16px;} /* Promo row giữ 3 cards (không hide cái thứ 3) */ footer .grid{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:24px;} footer .grid > *:nth-child(5){display:none;} /* Section spacing thoáng hơn tablet */ .sect{padding:28px 0;} } /* iPad Pro dọc & tablet (≤1080px = lúc hamburger xuất hiện, meganav ẩn): TẮT menu dọc desktop ở hero để không trùng với menu mobile + tránh bóp méo banner. */ @media(max-width:1080px){ .hero-sidebar{display:none;} /* Giữ cột banner dọc = 300px như desktop để 2 banner nhỏ KHÔNG bị bóp/cắt chữ. */ .hero-grid{grid-template-columns:minmax(0, 1fr) 300px;} } @media(max-width:960px){ .grid-5{grid-template-columns:repeat(2, minmax(0, 1fr));} .grid-4{grid-template-columns:repeat(2, minmax(0, 1fr));} .grid-3{grid-template-columns:repeat(2, minmax(0, 1fr));} .hero-grid{grid-template-columns:1fr;} .hero-sidebar{display:none;} .hero-main{padding:28px 24px;min-height:280px;} .hero-main h1{font-size:34px !important;} /* Mobile: bỏ min-height ép khung slider (380px) → để aspect-ratio 1.9 khớp ảnh 1520×800, không còn cắt 2 bên. Banner nhỏ theo tỷ lệ ảnh 760×460 (1.65) → fit. */ .hero-main.hero-main--slider{min-height:0;} .hero-slider__viewport{min-height:0;} .hero-banner{min-height:0;} /* 2 banner nhỏ nằm 1 HÀNG (2 cột) trên mobile; khung 3:2 khớp ảnh 600×400 */ .hero-side{grid-template-columns:1fr 1fr;grid-template-rows:auto;} .hero-banner--img{aspect-ratio:600 / 400;} .meganav-inner{overflow-x:auto;white-space:nowrap;} .meganav-inner::-webkit-scrollbar{display:none;} .benefits{grid-template-columns:1fr 1fr;gap:10px;} .benefits .b{border-right:0;} .cat-banner-row{grid-template-columns:repeat(2, 1fr);} footer .grid{grid-template-columns:1fr 1fr;gap:28px;} } @media(min-width:768px) and (max-width:1080px){ /* Hero giữ nguyên layout từ breakpoint 960px/1160px — không override ở đây */ /* Tablet nhỏ (768–899px): 3 cột. iPad Pro (≥900px): 4 cột — xem block dưới. */ .cat-banner-row{grid-template-columns:repeat(3, 1fr);gap:18px;} .cat-bn{/* BỎ ép aspect-ratio:card cao THEO NỘI DUNG → không tràn/đè hàng dưới (vd "Dell Pro" series xuống 2 dòng). Grid tự căn đều chiều cao mỗi hàng. */ min-height:0;aspect-ratio:auto;padding:16px 16px 14px;} .cat-bn .cb-k{font-size:16px;} .cat-bn .cb-s{font-size:12px;} /* Card 4 cột hẹp (240px): ẩn logo hãng — không đủ chỗ cho tên+series+nút+logo, logo sẽ đè tên/nút. Tên hãng đã rõ nên bỏ logo cho gọn. */ /* DEAL HOT (flash sale): SLIDER ngang thay vì lưới 4+1 lệch. */ } /* iPad Pro (≥900px, ≤1080px): lưới thương hiệu 4 cột (4+4). Dưới 900px giữ 3 cột để card đủ rộng, không chật. */ @media(min-width:900px) and (max-width:1080px){ .cat-banner-row{grid-template-columns:repeat(4, 1fr);gap:20px;} } /* Tablet/iPad: dropdown kết quả live search KHÔNG bó theo khung search (hẹp → cắt giá/badge cấu hình). Bung rộng ~780px (cap theo viewport), canh trái. Prefix `body` để thắng specificity CSS plugin (đã !important). */ @media(min-width:769px) and (max-width:1199px){ body .searchform .td-search-results{right:auto !important;width:min(780px, calc(100vw - 48px)) !important;max-width:none !important;} } /* Mobile: < 768px */ @media(max-width:767px){ .container, .hp-container{padding:0;} .topbar > .container, .header > .container{padding-left:0;padding-right:0;} .topbar{display:none;} /* Mobile header: flex — ham LEFT | logo CENTERED (absolute) | icons RIGHT */ .header-inner{display:flex;justify-content:space-between;align-items:center;position:relative;gap:10px;padding:14px 0;} .meganav-inner{padding:0 15px;} .header-inner > .logo{position:absolute;left:50%;transform:translateX(-50%);z-index:1;width:96px;max-width:96px;min-width:0;overflow:hidden;} .header-inner > form.search{display:none;} .hp-search-toggle{display:flex;} .logo .l-img, .header-inner > .logo .custom-logo{height:34px;width:auto;max-width:100%;} .header-actions{gap:6px;margin-right:8px;} .header-actions > .hp-theme-toggle{position:absolute;left:calc(50% - 106px);top:50%;transform:translateY(-50%);z-index:2;background:transparent;border-color:var(--red);color:var(--red-ink);box-shadow:none;} .header-actions > .hp-lang-toggle{position:absolute;left:calc(50% - 142px);top:50%;transform:translateY(-50%);z-index:2;width:34px;min-width:34px;height:34px;padding:0 4px;background:transparent;border-color:var(--red);color:var(--red-ink);box-shadow:none;} .header-actions > .hp-theme-toggle:hover, .header-actions > .hp-lang-toggle:hover{background:rgba(221, 51, 51, .08);border-color:var(--red);color:var(--red-ink);} .header-actions > .hp-theme-toggle, .header-actions > .hp-lang-toggle, .header-actions .ha, .hp-ham-btn{border-radius:8px;} .header-actions > .hp-theme-toggle, .header-actions > .hp-lang-toggle, .header-actions .ha{width:34px;min-width:34px;height:34px;padding:0;justify-content:center;} .header-actions .ha{border:1px solid var(--red);color:var(--red-ink);background:transparent;} .header-actions .ha:hover{background:rgba(221, 51, 51, .08);} .ha{padding:6px 7px;} form.search{height:40px;padding:0 10px;} form.search input{font-size:13px;padding:0 8px;} form.search .s-btn{padding:0 10px;font-size:12px;} form.search .s-btn span, form.search .s-btn svg + *{display:none;} .meganav{top:60px;} .meganav-inner{height:44px;gap:2px;} .meganav a{padding:0 10px;font-size:12.5px;} .meganav .cat-btn{padding:0 12px;} .meganav .cat-btn span{display:none;} .hero{padding:12px 0 20px;} .hero-main{padding:22px 18px;min-height:220px;border-radius:10px;} .hero-main h1{font-size:26px !important;line-height:1.15;} .hero-main .hm-sub{font-size:12.5px;} .hero-main .hm-cta{flex-wrap:wrap;gap:8px;} .hero-main .hm-cta .btn{font-size:12.5px;padding:10px 14px;} .grid-5, .grid-4, .grid-3{grid-template-columns:repeat(2, minmax(0, 1fr));gap:10px;} .card{padding:8px;} .card .name{font-size:12.5px;} .card .specs{padding:6px 8px;font-size:10.5px;} .card .spec .sp-k{width:22px;font-size:9px;} .sect{padding:20px 0;} .benefits{grid-template-columns:1fr 1fr;padding:12px 8px;gap:8px;} .benefits .b{padding:6px 8px;gap:8px;} .benefits .b-ico{width:32px;height:32px;} .benefits .b-ico svg{width:16px;height:16px;} .benefits .b-t{font-size:12px;} .benefits .b-s{font-size:10.5px;} .cat-banner-row{grid-template-columns:1fr 1fr;gap:10px;} .cat-bn{padding:16px;min-height:100px;} .cat-bn .cb-k{font-size:15px;} .cat-bn .cb-s{font-size:11px;} footer .top{padding:24px 0 20px;} footer .grid{grid-template-columns:1fr;gap:22px;} footer .bottom{flex-direction:column;gap:6px;text-align:center;padding:14px 0;} /* Flash sale section: column layout + reset margin-left:auto on viewall btn */ } @media(max-width:420px){ .header-inner > .logo{min-width:0;width:84px;max-width:84px;} .logo .l-img, .header-inner > .logo .custom-logo{height:30px;width:auto;max-width:100%;} .header-actions{gap:4px;margin-right:6px;} .header-actions > .hp-theme-toggle{left:calc(50% - 100px);width:34px;height:34px;} .header-actions > .hp-lang-toggle{left:calc(50% - 136px);width:34px;min-width:34px;height:34px;padding:0 4px;} .header-actions .hp-search-toggle{display:none;} .ha{width:34px;min-width:34px;height:34px;padding:0;} } @media(max-width:480px){ .sect{padding:16px 5px;} .header-actions > .hp-theme-toggle{left:calc(50% - 106px);width:34px;height:34px;} .header-actions > .hp-lang-toggle{left:calc(50% - 142px);width:34px;min-width:34px;height:34px;padding:0 4px;} .grid-5, .grid-4, .grid-3{grid-template-columns:1fr 1fr;gap:8px;} .ha{padding:6px 8px;} .ha > svg{width:18px;height:18px;} /* Flash sale compact on small phones */ } /* ============================================================ */ /* ============ HUNG PHAT WP THEME EXTENSIONS ================ */ /* ============================================================ */ /* WP core utility classes */ .screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal !important;} .screen-reader-text:focus{background-color:#f1f1f1;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto !important;-webkit-clip-path:none;clip-path:none;color:#21759b;display:block;font-size:14px;font-weight:700;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000;} /* Skip link */ .hp-skip-link:focus{background:var(--red);color:#fff;padding:12px 16px;border-radius:6px;position:fixed;top:12px;left:12px;z-index:999999;} /* Container alias */ .hp-container{max-width:var(--container);margin:16px auto 0;padding:0 10px;} .hp-site{background:var(--bg-2);min-height:100vh;min-height:100svh;} .hp-main{padding:0 0 32px;} /* Theme toggle */ .hp-theme-toggle{background:transparent;border:1px solid var(--line);color:var(--ink);width:34px;height:34px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s, border-color .15s, color .15s, box-shadow .15s;} .hp-theme-toggle:hover{background:var(--bg-2);border-color:var(--muted-2);} .hp-theme-toggle .hp-theme-toggle__icon{display:none;} [data-theme-pref="system"] .hp-theme-toggle .hp-theme-toggle__icon--system{display:block;} [data-theme-pref="light"] .hp-theme-toggle .hp-theme-toggle__icon--light{display:block;} [data-theme-pref="dark"] .hp-theme-toggle .hp-theme-toggle__icon--dark{display:block;} .hp-lang-toggle{background:transparent;border:1px solid var(--red);color:var(--red-ink);min-width:38px;height:34px;padding:0 8px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font:inherit;font-size:10.5px;font-weight:700;line-height:1;letter-spacing:.04em;text-transform:uppercase;transition:background .15s, border-color .15s, color .15s, box-shadow .15s;} .hp-lang-toggle:hover{background:rgba(221, 51, 51, .08);} .hp-lang-toggle__label{display:block;} /* Breadcrumb — bar nhẹ, kích thước lớn hơn, ngăn cách bằng chevron */ .hp-breadcrumb{font-size:14px;color:var(--muted);margin-top:16px;padding:8px 12px;background:linear-gradient(180deg, #fff, #f8f9fb);border:1px solid var(--line);border-radius:10px;box-shadow:0 1px 2px rgba(0,0,0,.03);margin-bottom:16px;} .hp-breadcrumb .rank-math-breadcrumb p{margin:0;display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;} .hp-breadcrumb .rank-math-breadcrumb a{color:var(--ink-2);text-decoration:none;font-weight:500;padding:4px 10px;border-radius:6px;transition:background .15s, color .15s;} .hp-breadcrumb .rank-math-breadcrumb a:hover{background:var(--red-50);color:var(--red-ink);text-decoration:none;} .hp-breadcrumb .rank-math-breadcrumb .last{color:var(--ink);font-weight:700;padding:4px 10px;background:var(--red-50);border-radius:6px;} /* Pagination */ [data-theme="dark"] .hp-pagination li a, [data-theme="dark"] .hp-pagination li span{background:var(--bg);} /* Skeleton loader — PHẢI khớp critical.css: dùng reserve động --lz/--lzd theo từng section (tính ở inc/lazy-sections.php), KHÔNG flat 260px. Nếu để 260px, main.css (load async) đè critical → section co về 260 rồi content nhảy lại → CLS bất ổn (0 ↔ 0.9 tuỳ tốc độ main.css tải). */ .hp-lazy-section{min-height:var(--lz, 400px);} @media(min-width:769px){ .hp-lazy-section{min-height:var(--lzd, 400px);} } .hp-lazy-section.is-loaded{min-height:0;} @keyframes hp-shimmer { 0%{background-position:200% 0;} 100%{background-position:-200% 0;} } /* Toast */ .hp-toast-wrap{position:fixed;top:20px;right:20px;z-index:99999;display:flex;flex-direction:column;gap:8px;pointer-events:none;} .hp-toast{background:var(--ink);color:#fff;padding:12px 18px;border-radius:10px;box-shadow:var(--shadow-lg);font-size:13.5px;display:flex;align-items:center;gap:10px;pointer-events:auto;min-width:220px;max-width:360px;opacity:0;transform:translateY(-8px);transition:opacity .2s, transform .2s;} .hp-toast.is-show{opacity:1;transform:translateY(0);} /* Cart drawer — slide-in từ phải, không bị admin bar đè */ .hp-cart-drawer-overlay{position:fixed;inset:0;background:rgba(15, 23, 42, .55);backdrop-filter:blur(2px);display:none;opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:100000;} .hp-cart-drawer-overlay.is-open{display:block;opacity:1;pointer-events:auto;} .hp-cart-drawer{position:fixed;top:0;right:0;bottom:0;width:420px;max-width:100%;background:#fff;display:none;transform:translateX(100%);transition:transform .3s cubic-bezier(.4, 0, .2, 1);z-index:100001;flex-direction:column;box-shadow:-12px 0 48px rgba(0, 0, 0, .18);} /* Đẩy drawer xuống dưới admin bar (32px desktop, 46px ≤782px) */ [data-theme="dark"] .hp-cart-drawer{background:var(--bg);} .hp-cart-drawer.is-open{display:flex;transform:translateX(0);} /* Head */ .hp-cart-drawer__head{padding:18px 22px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);background:linear-gradient(180deg, #fff, #fafafa);} .hp-cart-drawer__head > span:first-child{font-size:16px;font-weight:700;letter-spacing:-.01em;display:inline-flex;align-items:center;gap:8px;color:var(--ink);} .hp-cart-drawer__head > span:first-child::before{content:"";display:inline-block;width:20px;height:20px;background:url("data:image/svg+xml;utf8,") no-repeat center/contain;} .hp-cart-drawer__close{background:var(--bg-2);border:0;width:32px;height:32px;border-radius:50%;font-size:22px;cursor:pointer;color:var(--ink);line-height:1;display:flex;align-items:center;justify-content:center;transition:background .15s, color .15s, transform .15s;} .hp-cart-drawer__close:hover{background:var(--red);color:#fff;transform:rotate(90deg);} /* Body */ .hp-cart-drawer-body{flex:1;overflow-y:auto;padding:8px 20px;scrollbar-width:thin;} .hp-cart-drawer-body::-webkit-scrollbar{width:6px;} .hp-cart-drawer-body::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px;} .hp-cart-drawer__qty{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;} .hp-cart-drawer__qty button{width:26px;height:26px;border:1px solid var(--line);background:#fff;border-radius:6px;cursor:pointer;color:var(--ink);font-size:14px;line-height:1;transition:background .15s, border-color .15s;} .hp-cart-drawer__qty button:hover{background:var(--red-50);border-color:var(--red);color:var(--red-ink);} .hp-cart-drawer__qty > span{min-width:28px;text-align:center;font-variant-numeric:tabular-nums;color:var(--ink);} /* Footer */ .hp-cart-drawer-footer{padding:16px 20px;border-top:1px solid var(--line);background:linear-gradient(0deg, #fafafa, #fff);display:flex;flex-direction:column;gap:10px;} .hp-cart-drawer-footer .hp-btn{height:46px;padding:0 18px;font-size:14px;font-weight:700;border-radius:10px;letter-spacing:0.02em;} .hp-cart-drawer-footer .hp-btn:not(.hp-btn--primary){background:transparent;color:var(--ink) !important;border:1.5px solid var(--line);} .hp-cart-drawer-footer .hp-btn:not(.hp-btn--primary):hover{background:var(--ink);color:#fff !important;border-color:var(--ink);} /* Empty state */ .hp-cart-drawer-body .hp-empty-note{text-align:center;padding:60px 20px;color:var(--muted);font-size:14px;display:flex;flex-direction:column;align-items:center;gap:12px;} .hp-cart-drawer-body .hp-empty-note::before{content:"";display:block;width:64px;height:64px;background:url("data:image/svg+xml;utf8,") no-repeat center/contain;opacity:.5;} /* Generic empty/note */ .hp-empty-note{color:var(--muted);font-size:13px;padding:12px 0;} /* Section title (theme version) */ /* Filter (sidebar wrapper khi không có widget plugin) */ [data-theme="dark"] .hp-filter{background:var(--bg);} /* Widget area generic */ [data-theme="dark"] .hp-widget{background:var(--bg);} /* Buttons (.hp-btn fallback alias) */ .hp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 20px;border-radius:var(--radius-sm);border:0;background:var(--red);color:#fff;font-size:13.5px;font-weight:600;cursor:pointer;text-decoration:none;} .hp-btn:hover{background:var(--red-600);color:#fff;} .hp-btn--ghost{background:transparent;color:var(--red-ink);border:1px solid var(--red);} .hp-btn--dark{background:var(--ink);color:#fff;} /* Product card extra slots */ /* Cart count badge */ .hp-cart-count{display:inline-block;min-width:18px;padding:0 5px;height:18px;line-height:18px;border-radius:9px;background:var(--red);color:#fff;font-size:11px;font-weight:700;text-align:center;} .hp-cart-count[data-cart-count="0"]{display:none;} /* Sticky mobile footer */ @media(max-width:767px){ [data-theme="dark"] .hp-sticky-mobile{background:var(--bg);} body.hp-body{padding-bottom:60px;} } /* Print stylesheet partial — fallback */ @media print { .hp-cart-drawer, .hp-toast-wrap, .topbar, .meganav, footer{display:none !important;} .header{position:static !important;box-shadow:none !important;} body{background:#fff !important;color:#000 !important;} } /* ============ POST CARD (blog) ============ */ [data-theme="dark"] .hp-post-card{background:var(--bg);} /* padding + margin bù để vùng chạm ≥24px cao (target-size WCAG) mà layout không đổi. */ /* ============ PROMO ROW ============ */ [data-theme="dark"] .promo{background:var(--bg);} /* ============ HTML block + spacer ============ */ /* ============ Layout helper grids cho ACF ============ */ /* ============ Post detail (single.php) ============ */ [data-theme="dark"] .hp-post{background:var(--bg);} /* Bảng nội dung — TRANG (.hp-post-content) + BÀI VIẾT (.article-content) + MÔ TẢ SP (.desc-main__inner). Bo góc: dùng border-collapse:separate + overflow:hidden (collapse KHÔNG cho border-radius). Viền trong = bottom/right từng ô. */ .article-content table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:6px;overflow:hidden;margin:16px 0;font-size:14px;} .article-content th, .article-content td{padding:10px 12px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);text-align:left;vertical-align:top;line-height:1.55;} /* Bỏ viền phải cột cuối + viền dưới hàng cuối (đã có viền ngoài của table). */ .article-content tr th:last-child, .article-content tr td:last-child{border-right:0;} .article-content tr:last-child td{border-bottom:0;} /* Header row */ .article-content thead th, .article-content thead td, .article-content tr:first-child th{background:var(--bg-2);font-weight:700;color:var(--ink);} /* Zebra */ .article-content tbody tr:nth-child(even) td{background:color-mix(in srgb, var(--bg-2) 45%, transparent);} /* Dark mode overrides for table inline-styles from WordPress editor */ [data-theme="dark"] .hp-post-content table, [data-theme="dark"] .desc-main__inner table, [data-theme="dark"] .article-content table{background:transparent !important;border-color:var(--line) !important;} [data-theme="dark"] .hp-post-content table tr, [data-theme="dark"] .desc-main__inner table tr, [data-theme="dark"] .article-content table tr{background:transparent !important;} [data-theme="dark"] .hp-post-content table th, [data-theme="dark"] .desc-main__inner table th, [data-theme="dark"] .article-content table th{background-color:var(--bg-3) !important;color:var(--ink) !important;border-color:var(--line) !important;} [data-theme="dark"] .hp-post-content table td, [data-theme="dark"] .desc-main__inner table td, [data-theme="dark"] .article-content table td{background-color:transparent !important;color:var(--ink-2) !important;border-color:var(--line) !important;} [data-theme="dark"] .hp-post-content tbody tr:nth-child(even) td, [data-theme="dark"] .desc-main__inner tbody tr:nth-child(even) td, [data-theme="dark"] .article-content tbody tr:nth-child(even) td{background-color:var(--bg-2) !important;} /* Mobile: scroll ngang (mất bo góc khi scroll — chấp nhận). */ @media(max-width:768px){ .article-content table{display:block;overflow-x:auto;max-width:100%;} } /* Code & pre trong bài viết (.article-content) + mô tả SP (.desc-main__inner). */ .article-content :not(pre) > code{background:var(--bg-2);border:1px solid var(--line);padding:2px 7px;border-radius:6px;font-family:'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;font-size:.9em;color:var(--red, #dc2626);word-break:break-word;} .article-content pre{position:relative;background:#0f172a;color:#e2e8f0;border:1px solid #1e293b;border-radius:12px;padding:18px 20px;margin:18px 0;overflow-x:auto;font-family:'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;font-size:13.5px;line-height:1.65;tab-size:2;box-shadow:0 2px 12px rgba(15,23,42,.18);} .article-content pre code{background:none;border:0;padding:0;color:inherit;font-size:inherit;white-space:pre;} /* Dải màu nhẹ trên đầu pre (kiểu code editor). */ .article-content pre::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg, #1b64f2, #7c3aed, #dc2626);border-radius:12px 12px 0 0;} [data-theme="dark"] .article-content :not(pre) > code, [data-theme="dark"] .desc-main__inner :not(pre) > code{background:var(--bg-3);color:#fca5a5;} /* Mục lục (ToC) — box collapse (mặc định ĐÓNG, click header để mở). */ .hp-toc__head i.fa-list-ul{color:var(--ink);} /* offset khi cuộn tới heading (tránh bị sticky header che) */ /* FAB ToC nổi — hiện khi cuộn qua box; click mở panel mục lục (desktop + mobile). */ /* tránh đè dock liên hệ mobile */ /* FAB mục lục PDP hiện CẢ desktop (2026-08-13): phần mô tả cuộn mất, không có sidebar sticky → observer (content-enhance.php) tự hiện/ẩn theo vị trí mục lục + ẩn khi ở tab khác. */ .hp-code-block__copy{position:absolute;top:10px;right:10px;z-index:2;display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.08);color:#e2e8f0;border:1px solid rgba(255,255,255,.18);padding:5px 11px;border-radius:7px;font-size:11.5px;font-weight:600;cursor:pointer;backdrop-filter:blur(4px);transition:background .15s, color .15s, border-color .15s;} .hp-code-block__copy::before{content:"\f0c5";font-family:"Font Awesome 6 Free";font-weight:900;font-size:11px;} .hp-code-block__copy:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3);} .hp-code-block__copy.is-copied{background:#16a34a;color:#fff;border-color:#16a34a;} .hp-code-block__copy.is-copied::before{content:"\f00c";} /* ============ Policy / static pages decoration ============ */ [data-theme="dark"] .pg-sh-ic{background:var(--bg-3);} [data-theme="dark"] .pg-table thead tr{background:var(--bg-3);} [data-theme="dark"] .pg-contact-item .pg-ci-ic{background:var(--bg-3);} /* ============ Author + 404 ============ */ [data-theme="dark"] .hp-author{background:var(--bg);} /* ============ Search + Empty ============ */ /* ============ Footer styles ============ */ /* ============ FOOTER (theo design Lumen Laptop Store) ============ */ .footer{background:var(--ink);color:#fff;} .footer, .footer *{color:#fff;} .footer a{color:rgba(255,255,255,.72);text-decoration:none !important;} .footer a:hover{color:#fff;} .footer-top{padding:44px 0 36px;} /* Desktop: cột co theo nội dung, space-between phân phối gap đều giữa các cột */ .footer-grid--4{display:flex;justify-content:space-between;align-items:start;} .footer-grid--4 > .footer-col{flex:0 0 auto;padding:0 28px;} .footer-grid--4 > .footer-col:first-child{padding-left:0;} .footer-grid--4 > .footer-col:last-child{padding-right:0;} .footer-grid--4 > .footer-col:not(:first-child){border-left:1px solid rgba(255,255,255,.08);} .footer-col__title{font-size:13px;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.05em;margin:0 0 16px;padding-bottom:9px;border-bottom:2px solid var(--red);display:inline-block;} .footer-col__menu{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;} .footer-col__menu li{margin:0;} .footer-col__menu a{color:rgba(255,255,255,.7);font-size:13.5px;display:inline-block;transition:color .15s ease, padding-left .15s ease;} .footer-col__menu a:hover{color:#fff;transform:translateX(4px);} /* Liên hệ */ .footer-contact{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:10px;} .footer-contact li{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.72);} .footer-contact li > svg, .footer-contact li > i{flex-shrink:0;margin-top:2px;width:15px;font-size:14px;color:var(--red-ink);} .footer-contact strong{color:rgba(255,255,255,.92);font-weight:600;} .footer-contact a:hover{color:#fff;} /* Socials */ .footer-social{display:flex;gap:8px;} .footer-social__link{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.1);display:inline-flex;align-items:center;justify-content:center;color:#fff !important;transition:background .2s ease, transform .2s ease;} .footer-social__link:hover{background:var(--red);color:#fff !important;transform:translateY(-1px);} .footer-social__link svg{width:18px;height:18px;} /* Giờ hoạt động */ .footer-hours{display:flex;flex-direction:column;gap:12px;} .footer-hours__block{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:8px;padding:10px 13px;} .footer-hours__h{font-size:12.5px;font-weight:700;color:#fff;margin-bottom:7px;display:flex;align-items:center;gap:7px;} .footer-hours__h i{color:var(--red-ink);} .footer-hours__h span{font-weight:400;color:rgba(255,255,255,.5);font-size:11.5px;} .footer-hours__row{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;color:rgba(255,255,255,.62);padding:1px 0;} .footer-hours__row b{color:rgba(255,255,255,.9);font-weight:600;} /* Dải pháp lý + badge */ .footer-legal{border-top:1px solid rgba(255,255,255,.08);padding:20px 0;} .footer-legal-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;} .footer-legal__info{font-size:12.5px;line-height:1.7;color:rgba(255,255,255,.58);} .footer-legal__info p{margin:0 0 2px;} .footer-legal__company{font-weight:700;color:rgba(255,255,255,.85) !important;font-size:13px;} .footer-legal__info strong{color:rgba(255,255,255,.8);font-weight:600;} .footer-legal__sep{margin:0 6px;opacity:.4;} .footer-legal__badges{display:flex;align-items:center;gap:14px;flex-shrink:0;} .footer-legal__badges img{display:block;height:auto;border-radius:4px;} /* Bottom bar: copyright trái, logo SVG phải */ .footer-bottom{padding:16px 0;border-top:1px solid rgba(255,255,255,.08);} .footer-bottom-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;} .footer-copyright{color:rgba(255,255,255,.5);font-size:12.5px;} /* Logo SVG trong cột Liên hệ — dưới tiêu đề (block, dùng bản -dark.svg) */ .footer-logo-link{display:block;margin:4px 0 16px;} /* width + height ĐỀU tường minh: hộp không phụ thuộc kích thước nội tại của SVG, nên ảnh tải xong (lazy) cũng không đổi layout. Trước đây width:auto khiến Lighthouse báo "Media element lacking an explicit size" và quy là thủ phạm CLS. */ .footer-logo-svg{display:block;width:190px;height:66px;opacity:.95;transition:opacity .15s ease;object-fit:contain;} .footer-logo-link:hover .footer-logo-svg{opacity:1;} /* Chip thanh toán ở footer-bottom (chỗ logo cũ) */ .footer-pay{display:flex;gap:8px;flex-wrap:wrap;align-items:center;} .footer-pay__chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);font-size:11.5px;font-weight:600;color:rgba(255,255,255,.75);} .footer-pay__chip i{color:var(--red-ink);font-size:12px;} /* Responsive */ @media(max-width:1080px){ /* 2 cột: bỏ kẻ dọc full, dùng gap + kẻ dọc giữa 2 cột mỗi hàng + kẻ ngang hàng 2 */ .footer-grid--4{display:grid;grid-template-columns:1fr 1fr;gap:28px 32px;align-items:start;} .footer-grid--4 > .footer-col{padding:0;border-left:0 !important;} } @media(max-width:768px){ .footer-top{padding:32px 12px 24px;} .footer-legal{padding:20px 12px;} .footer-bottom{padding:16px 12px;} .footer-legal-inner{flex-direction:column;align-items:flex-start;gap:16px;} .footer-bottom-inner{flex-direction:column-reverse;gap:12px;text-align:center;} } @media(max-width:480px){ /* Liên hệ + Giờ full width; Chính sách + Hỗ trợ 2 cột song song */ .footer-grid--4{grid-template-columns:1fr 1fr;gap:26px 20px;} .footer-grid--4 > .footer-col:nth-child(1), .footer-grid--4 > .footer-col:nth-child(2){grid-column:1 / -1;} .footer-col__title{font-size:12.5px;} } /* ============ Hero edge cases ============ */ .hero-banner > *{position:relative;z-index:1;} /* ============ HERO REFINE (override design max-width 9ch) ============ */ .hero-main h1{max-width:18ch;font-size:44px;line-height:1.05;} @media(max-width:1200px){ .hero-main h1{font-size:36px;max-width:22ch;} } @media(max-width:768px){ .hero-main h1{font-size:28px;max-width:none;} } .hero-main .hm-sub{margin:0 0 14px;} .hero-main .hm-cta .btn.large{padding:12px 22px;font-size:14px;} .hero-main .hm-cta .btn.white{background:#fff;color:var(--red-ink);} .hero-main .hm-cta .btn.white:hover{background:var(--bg-2);} .hero-main .hm-kicker{margin-bottom:4px;} /* Liên hệ price */ /* Hero side banner default (khi không có ảnh) — 182px khớp critical.css để tránh CLS: critical reserve 182, nếu main async đè 110 → banner co 72px. */ .hero-banner{min-height:182px;} .hero-banner > div{position:relative;z-index:1;} .hero-banner.b1{background:linear-gradient(135deg, #0f1419 0%, #2b3139 60%, #dd3333 140%);} .hero-banner.b2{background:linear-gradient(135deg, #1e40af 0%, #0ea5e9 100%);} /* Card price contact */ /* ============ CAT BANNERS COMPACT (8 items) ============ */ /* ============ BRAND SLIDE (marquee infinite) ============ */ @keyframes hp-brand-marquee { from{transform:translateX(0);} to{transform:translateX(-50%);} } /* Logo brand thiết kế cho nền SÁNG (đen/màu) → giữ chip trắng cả ở dark mode, nếu không logo đen/màu sẽ chìm vào nền tối. */ [data-theme="dark"] .hp-brand-slide__item{background:#fff;border-color:rgba(255,255,255,.14);} /* Logo rất rộng (vd 1130x200) → ép vừa CHIỀU RỘNG để hiện trọn, không bị cắt ngang. width/height auto + object-fit contain; max-width < bề rộng content của item. */ /* ============ PRODUCT GRID 5-col override ============ */ .grid-5{grid-template-columns:repeat(5, minmax(0, 1fr));} @media(max-width:1200px){ .grid-5{grid-template-columns:repeat(4, minmax(0, 1fr));} } @media(max-width:900px){ .grid-5{grid-template-columns:repeat(3, minmax(0, 1fr));} } @media(max-width:640px){ .grid-5{grid-template-columns:repeat(2, minmax(0, 1fr));} } /* ============ FORCE NO UNDERLINE FOR THEME LINKS ============ */ /* Plugin internal-links-premium tự inject underline. Override hard. */ .hero-sidebar a, .hero-sidebar a:hover, .hero-sidebar a:visited, .cat-bn, .cat-bn:hover, .cat-bn:visited, .cat-bn *, .hero-banner, .hero-banner:hover, .hero-banner:visited, .hero-banner *, .card a, .card .name a, .footer-col__menu a, .topbar a, .topbar a:hover, .meganav a, .meganav a:hover, .ha, .ha *, .logo, .logo *, .cb-k, .cb-s, .cb-go{text-decoration:none !important;} /* border-bottom: 0 chỉ apply cho thẻ bị plugin internal-links-premium inject * underline-as-border. KHÔNG bao gồm .brand-tag / .brand-pill / .cat-bn / * .hero-banner / .hp-brand-slide__item / .cat-bn vì chúng tự có border 4 cạnh thật. * Dùng :not(.brand-tag):not(.brand-pill):not(...) cho .hero-sidebar a. */ .hero-sidebar a:not(.brand-tag):not(.brand-pill), .card .name a, .card a:not(.card-img-link), .footer-col__menu a, .topbar a, .meganav a, .ha a, .logo a{border-bottom:0 !important;} /* Global anchor reset cho theme content */ .hp-site a, .hp-site a:hover, .hp-site a:focus, .hp-site a:visited{text-decoration:none;} /* Chỉ underline trong content bài viết (hp-post-content) */ /* ============ SECTION HEADER (override design — to + đẹp hơn) ============ */ .sect{padding:28px 16px 24px;} [data-theme="dark"] .sect-head{border-bottom-color:var(--line-2);} @media(max-width:768px){ .sect{padding:20px 16px 20px 16px;} .card .name{-webkit-line-clamp:3;min-height:49px;} } /* ============ CARD PRICE REFINE ============ */ /* Giá từ */ /* =========================================================== */ /* === BƯỚC 4: TEXT CONTRAST FIX — dark covers force white === */ /* =========================================================== */ /* Mọi element trên background gradient/dark đều phải có text trắng. * Plugin internal-links-premium có thể inject inline color, dùng !important đè. */ /* Loại biến thể .cat-bn--paper (nền trắng) — nó tự quản màu chữ mực đen. */ .cat-bn:not(.cat-bn--paper), .cat-bn:not(.cat-bn--paper):hover, .cat-bn:not(.cat-bn--paper):focus, .cat-bn:not(.cat-bn--paper):active, .cat-bn:not(.cat-bn--paper):visited, .cat-bn:not(.cat-bn--paper) *, .cat-bn:not(.cat-bn--paper) .cb-k, .cat-bn:not(.cat-bn--paper) .cb-s, .cat-bn:not(.cat-bn--paper) .cb-go, .hero-banner, .hero-banner:hover, .hero-banner:focus, .hero-banner:active, .hero-banner:visited, .hero-banner *, .hero-main, .hero-main *, .hero-main .hm-kicker, .hero-main .hm-sub, .hero-main p, .hero-main h1:not(.yellow), .footer, .footer:hover, .footer *, .footer a, .footer-bottom, .footer-bottom *, .footer-col__menu a, .footer-col__title, .footer-social__link, .topbar, .topbar *, .topbar a, .topbar a:hover, .topbar .sep, .topbar .live-dot, .hp-btn--dark, .btn.dark, .btn:not(.ghost):not(.white), .cat-btn, .cat-btn:hover, .hp-cart-drawer-overlay{color:#fff !important;} /* Discount pill = white bg + RED text — phải khác */ /* Sale stock progress bar text */ /* Restore màu đặc biệt (vàng/yellow trong hero) */ .hero-main .hm-price .now{color:var(--yellow) !important;} /* Restore old price strikethrough opacity */ /* Brand-tag KHÔNG phải dark cover → giữ màu mặc định + ép border 4 cạnh * (plugin internal-links-premium hay reset border-bottom của thẻ ) */ /* Tương tự cho brand-pill marquee + hp-brand-slide__item */ /* Hero sidebar cat-item KHÔNG phải dark → giữ ink */ /* Card vẫn light bg → text dark, plugin override không apply */ .card .name, .card .name a, .card .specs, .card .specs *{color:inherit !important;} /* Ngoại lệ (fix 2026-07-02): sao rating giữ màu riêng — rule `.card .rating *` inherit ở trên nuốt màu sao → 5 sao xám đậm nhìn như "đầy" bất kể điểm. */ .card .name a{color:var(--ink) !important;} .card .name a:hover{color:var(--red-ink) !important;} .card .sp-k{color:var(--muted) !important;} .card .sp-v{color:var(--ink) !important;} /* Dark mode: card + base content vẫn theo theme */ [data-theme="dark"] .card .name a{color:var(--ink) !important;} [data-theme="dark"] .card .sp-v{color:var(--ink) !important;} /* =========================================================== */ /* === CARD PRICE FIX — del strike + ins no-underline === */ /* =========================================================== */ /* WC `get_price_html()` trả về {old} {new} khi sale. * Force = strikethrough nhỏ muted, = red không underline. */ /* Giá từ — eyebrow xám nhỏ + price đỏ */ /* Liên hệ */ /* Bỏ price-old dòng riêng (em render duplicate trong card.php — disable) */ /* Mobile: gọn hơn nữa */ /* === FINAL CARD PRICE OVERRIDE — sized smaller === */ /* =========================================================== */ /* === CARD PRICE & RATING — PIXEL-PERFECT theo design === */ /* =========================================================== */ /* Override TẤT CẢ rule trước đó — về đúng design styles.css line 583-590 */ /* "Giá từ" label inline trước price */ /* "Liên hệ" */ /* Mobile: nhỏ hơn chút nữa */ /* Rating — đúng design line 587-590 */ /* outline xám */ /* Bỏ ALL override price-now column trước đó (chính file này có rule "display:flex column !important") */ /* =========================================================== */ /* === FIXES THEO YÊU CẦU anh Phát 2026-05-20 === */ /* =========================================================== */ /* 1. Brand slide — fix border bottom bị cắt do overflow:hidden cha + transform translateY(-1px) */ /* 2. Card price — 16.5px (theo yêu cầu anh Phát) */ /* 3. Configs-pill — dời sát đáy hình (sát mép trong border-radius) */ /* 4. Rating + Price — căn giữa hàng */ /* 5. Card image — fill 1:1 media container */ /* 0. WP admin bar — đẩy sticky header xuống khi user đăng nhập (admin-bar 32px desktop / 46px mobile) */ /* 32 + 76 (header height) */ /* 32 + 148 */ /* 6. Card border — fix border-bottom bị clip bởi overflow:hidden. * Bỏ overflow:hidden trên .card / .hp-post-card / .press-card (giữ trên child media để clip ảnh). */ .card, .press-card{overflow:visible !important;} .card .media{overflow:hidden !important;border-radius:8px !important;} .press-card__img{overflow:hidden !important;} /* 5. Blog grid 4 cột × 2 hàng (Bản tin công nghệ 8 bài) */ /* =========================================================== */ /* === TRUYỀN THÔNG (Báo chí nói về Hưng Phát) === */ /* =========================================================== */ [data-theme="dark"] .press-headline{background:var(--surface);border-color:rgba(255,255,255,.08);} [data-theme="dark"] .press-sub{color:rgba(255,255,255,.78);} .press-row{display:grid;grid-template-columns:repeat(3, 1fr);gap:16px;max-width:1280px;margin:0 auto;padding:0 20px;} @media(max-width:1080px){ .press-row{grid-template-columns:repeat(2, 1fr);} } @media(max-width:600px){ .press-row{grid-template-columns:1fr;} } .press-card{display:flex;background:#fff;border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.06);border:1px solid var(--line);transition:transform .25s ease, box-shadow .25s ease;text-decoration:none !important;color:inherit;min-height:130px;aspect-ratio:16 / 9;} .press-card:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(0,0,0,.12);border-color:rgba(0,0,0,.08);} .press-card__img{width:45%;min-width:130px;flex:0 0 auto;overflow:hidden;background:var(--bg-2);border-radius:var(--radius-lg) 0 0 var(--radius-lg);} .press-card__img img{width:100%;height:100%;object-fit:cover;display:block;} .press-card__body{flex:1;padding:14px 16px;display:flex;flex-direction:column;justify-content:space-between;gap:8px;min-width:0;} .press-card__title{font-size:13.5px;line-height:1.4;font-weight:700;color:var(--ink) !important;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;} .press-card__logo{max-width:100px;max-height:32px;width:auto;height:auto;object-fit:contain;align-self:flex-start;} [data-theme="dark"] .press-card{background:var(--surface);border-color:rgba(255,255,255,.08);} [data-theme="dark"] .press-card__title{color:#fff !important;} [data-theme="dark"] .press-card__logo{filter:brightness(0.95) invert(0.05);} @media(max-width:600px){ .press-card{aspect-ratio:auto;min-height:120px;} .press-card__title{font-size:13px;-webkit-line-clamp:3;} } /* ============================================================ DARK MODE: GLOBAL FIXES (var(--ink) flips to white in dark) ============================================================ */ /* Flash countdown box — background: var(--ink) thành #f5f7fa trong dark mode */ [data-theme="dark"] .flash .countdown .box{background:#0f1419;} /* Section title explicit color */ [data-theme="dark"] .sect-title{color:var(--ink);} /* Footer — background: var(--ink) → #f5f7fa (trắng) trong dark mode */ [data-theme="dark"] footer, [data-theme="dark"] .footer{background:#0f1419 !important;} /* Topbar — same issue */ [data-theme="dark"] .topbar{background:#0f1419;} /* Benefits bar text */ [data-theme="dark"] .benefits .b-t{color:var(--ink);} /* Breadcrumb */ [data-theme="dark"] .hp-breadcrumb{background:var(--bg-2);border-color:var(--line);} /* Cart drawer header — hardcoded gradient #fff/#fafafa */ [data-theme="dark"] .hp-cart-drawer__head{background:var(--bg-2);} /* Cart drawer footer — hardcoded #fafafa/#fff */ [data-theme="dark"] .hp-cart-drawer-footer{background:var(--bg-2);} /* Cart drawer qty buttons — hardcoded #fff */ [data-theme="dark"] .hp-cart-drawer__qty button{background:var(--bg-3) !important;color:var(--ink) !important;border-color:var(--line) !important;} /* Cart drawer "Xem giỏ hàng" ghost button hover — var(--ink) flips white */ [data-theme="dark"] .hp-cart-drawer-footer .hp-btn:not(.hp-btn--primary):hover{background:var(--bg-3);color:var(--ink) !important;border-color:var(--line);} /* Cart drawer giá gạch — dark mode dùng --muted-2 (#6b7280) thay vì --muted (#9ca3af) quá sáng */ [data-theme="dark"] .hp-cart-drawer__was{color:var(--muted-2) !important;} /* hp-btn--dark — background: var(--ink) flips to #f5f7fa (trắng) trong dark mode */ [data-theme="dark"] .hp-btn--dark{background:var(--bg-3);color:var(--ink) !important;border:1px solid var(--line);} [data-theme="dark"] .hp-btn--dark:hover{background:var(--line);} /* ================================================================ DARK MODE — BAREM (quy tắc bắt buộc khi tạo component mới) ================================================================ TOKEN SYSTEM: ┌──────────────┬───────────────┬───────────────────────────────────┐ │ Token │ Light │ Dark │ ├──────────────┼───────────────┼───────────────────────────────────┤ │ --surface │ #ffffff │ #0d1117 (card / panel) │ │ --bg │ #ffffff │ #0d1117 (page background layer 1)│ │ --bg-2 │ #f7f8fa │ #151a21 (body / page background) │ │ --bg-3 │ #eef0f3 │ #1c222b (inset / input) │ │ --ink │ #0f1419 │ #f5f7fa (text primary) │ │ --ink-2 │ #2b3139 │ #d1d5db (text secondary) │ │ --muted │ #6b7280 │ #9ca3af (text muted) │ │ --line │ #e5e7eb │ #2a2f36 (border) │ │ --red-50 │ #fff0f0 │ #2a0f0f (red tint background) │ └──────────────┴───────────────┴───────────────────────────────────┘ QUYẾT ĐỊNH NÀO DÙNG GÌ: ─ Card / panel / modal đặt trên body → background: var(--surface) ─ Input / textarea / select → background: var(--bg-3); color: var(--ink) ─ Inset / nested card → background: var(--bg-2) ─ Text chính → color: var(--ink) ─ Text phụ → color: var(--ink-2) hoặc var(--muted) ─ Border → border-color: var(--line) ─ Red-tint background → background: var(--red-50) TUYỆT ĐỐI KHÔNG LÀM: ✗ background: #fff → Dùng var(--surface) hoặc var(--bg) ✗ background: #f7f8fa → Dùng var(--bg-2) ✗ color: #333 / #000 → Dùng var(--ink) hoặc var(--ink-2) ✗ border-color: #e5e7eb → Dùng var(--line) ĐƯỢC PHÉP HARDCODE: ✓ color: #fff trên dark cover (gradient đỏ/đen làm nền) ✓ background: #ffb800 màu brand cụ thể (sao vàng, badge...) ✓ background: #1877f2 màu social brand (Facebook, YouTube...) ✓ background: linear-gradient(135deg, var(--red), ...) — gradient đỏ luôn đúng ✓ background: rgba(255,255,255,.08) — overlay mờ trên dark cover PATTERN MẪU KHI VIẾT COMPONENT MỚI: ───────────────────────────────────── .my-card{background:var(--surface);← KHÔNG dùng #fff border:1px solid var(--line);color:var(--ink);} .my-input{background:var(--bg-3);← KHÔNG dùng #fff color:var(--ink);border:1px solid var(--line);} ───────────────────────────────────── KHÔNG cần viết [data-theme="dark"] riêng nếu dùng đúng token. Chỉ viết [data-theme="dark"] khi cần thay đổi màu KHÁC BIỆT hoàn toàn (vd: gradient khác, shadow khác, pseudo-element khác). ================================================================ */ /* ═══════════════════════════════════════════════════════════════════ MOBILE NAVIGATION DRAWER ═══════════════════════════════════════════════════════════════════ */ /* Hamburger button — ẩn desktop, hiện trên <= 1080px */ .hp-ham-btn{display:none;align-items:center;justify-content:center;width:40px;height:40px;border:none;background:var(--red);color:#fff;cursor:pointer;border-radius:10px;flex-shrink:0;padding:0;transition:background .18s, box-shadow .18s, transform .15s;box-shadow:0 2px 8px rgba(220,38,38,.35);position:relative;} .hp-ham-btn:hover{background:#b91c1c;box-shadow:0 4px 14px rgba(220,38,38,.5);transform:translateY(-1px);} .hp-ham-btn:active{transform:scale(.93);} .hp-ham-btn svg{width:20px;height:20px;transition:opacity .18s, transform .18s;} /* Khi nav mở: icon xoay 90° + fade nhẹ */ .hp-ham-btn[aria-expanded="true"] svg{transform:rotate(90deg);opacity:.85;} /* Search toggle — ẩn desktop, hiện ≤768px */ @media(min-width:769px){ .hp-search-toggle{display:none;} } .hp-search-toggle svg{width:20px;height:20px;} /* Mobile search bar — overlay centered */ .hp-search-bar{position:fixed;inset:0;z-index:100015;display:none;align-items:flex-start;justify-content:center;padding:72px 16px 0;width:auto;max-width:100vw;box-sizing:border-box;overflow:hidden;visibility:hidden;opacity:0;pointer-events:none;transition:opacity .2s ease, visibility 0s .2s;} .hp-search-bar.is-open{display:flex;visibility:visible;opacity:1;pointer-events:auto;transition:opacity .2s ease, visibility 0s;} .hp-search-bar__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);cursor:pointer;} .hp-search-bar__card{position:relative;z-index:1;background:var(--bg);border-radius:14px;box-shadow:0 8px 40px rgba(0,0,0,.25);display:flex;align-items:center;gap:6px;padding:8px 8px 8px 14px;width:100%;max-width:540px;transform:translateY(-10px);transition:transform .22s cubic-bezier(.4,0,.2,1);} .hp-search-bar.is-open .hp-search-bar__card{transform:translateY(0);} .hp-search-bar__card .search{flex:1;height:44px;background:transparent;border:none;box-shadow:none;} .hp-search-bar__card .search:hover, .hp-search-bar__card .search:focus-within{border:none;box-shadow:none;} .hp-search-bar__close{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border:none;background:transparent;color:var(--muted);cursor:pointer;border-radius:10px;flex-shrink:0;padding:0;transition:background .15s, color .15s;} .hp-search-bar__close:hover{background:var(--bg-2);color:var(--ink);} .hp-search-bar__close svg{width:20px;height:20px;} @media(max-width:1080px){ .hp-ham-btn{display:flex;margin-left:10px;} } /* Drawer panel */ .hp-mnav{position:fixed;top:0;left:0;bottom:0;width:min(300px, 88vw);background:var(--bg);border-right:1px solid var(--line);box-shadow:4px 0 24px rgba(0,0,0,.12);transform:translateX(-100%);transition:transform .28s cubic-bezier(.4,0,.2,1);z-index:100010;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;display:flex;flex-direction:column;} body.hp-mnav--open .hp-mnav{transform:translateX(0);} /* Admin bar offset */ /* Overlay backdrop */ .hp-mnav__overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;z-index:100009;transition:opacity .28s;} body.hp-mnav--open .hp-mnav__overlay{opacity:1;pointer-events:auto;} /* Scroll lock via JS position:fixed để drawer touch-scroll hoạt động trên iOS */ /* Drawer head */ .hp-mnav__head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:1;flex-shrink:0;} .hp-mnav__logo{display:flex;align-items:center;} .hp-mnav__logo img, .hp-mnav__logo .custom-logo{height:32px;width:auto;} .hp-mnav__close{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;background:var(--bg-2);color:var(--ink-2);border-radius:50%;cursor:pointer;flex-shrink:0;transition:background .15s, color .15s;padding:0;} .hp-mnav__close:hover{background:var(--red-10);color:var(--red-ink);} .hp-mnav__close svg{width:18px;height:18px;} /* Drawer search */ /* Drawer body */ .hp-mnav__body{flex:1;padding:4px 0 16px;} .hp-mnav__section{padding:6px 0;border-bottom:1px solid var(--line);} .hp-mnav__section:last-child{border-bottom:0;} /* Pages section không có group-head → list luôn hiện */ .hp-mnav__link{display:flex;align-items:center;gap:10px;padding:9px 16px;font-size:14px;color:var(--ink);text-decoration:none;transition:background .12s, color .12s;line-height:1.3;} .hp-mnav__link:hover, .hp-mnav__link:focus-visible{background:var(--bg-2);color:var(--red-ink);outline:none;} .hp-mnav__icon{width:16px;text-align:center;color:var(--red-ink);font-size:13px;flex-shrink:0;} .hp-mnav__section--pages .hp-mnav__link{font-weight:500;} /* Drawer footer */ /* ═══════════════════════════════════════════════════════════════════ RESPONSIVE — Phase 4 (main.css polish) ═══════════════════════════════════════════════════════════════════ */ /* ------------------------------------------------------------------- 4a. ≤ 480px — sect-links scroll ngang, meganav ẩn, hero compact ------------------------------------------------------------------- */ @media(max-width:480px){ /* Meganav: drawer + sticky footer đủ navigation → giải phóng space */ .meganav{display:none !important;} /* Sect links: scroll ngang thay vì wrap */ /* Hero banner compact */ .hero-main{min-height:180px;padding:18px 14px;border-radius:8px;} .hero-main h1{font-size:22px !important;} .hero-main .hm-sub{font-size:12px;} /* Benefits 1 cột khi rất nhỏ */ .benefits{grid-template-columns:1fr 1fr;} /* Cat banner text nhỏ hơn */ .cat-bn .cb-k{font-size:14px;} /* Section header */ .sect{padding:16px 5px;} /* Flash sale */ /* Brands 2-col: giữ nguyên, đã có rule 480px */ } /* ------------------------------------------------------------------- 4b. ≤ 360px — header compact, grid font ------------------------------------------------------------------- */ @media(max-width:360px){ .logo .l-img{height:28px;} .header-inner{gap:6px;} form.search{height:36px;padding:0 8px;} form.search input{font-size:12px;} .hp-ham-btn{width:36px;height:36px;} .hp-ham-btn svg{width:20px;height:20px;} .card .name{font-size:12px;} .benefits{grid-template-columns:1fr;} .benefits .b{border-right:0;border-bottom:1px solid var(--line);padding:8px 12px;} .benefits .b:last-child{border-bottom:0;} .container, .hp-container{padding:0;} } /* ------------------------------------------------------------------- 4c. Listing page — filter sidebar dễ dùng trên mobile ------------------------------------------------------------------- */ @media(max-width:960px){/* Filters không sticky trên mobile, chỉ scroll bình thường */} @media(max-width:480px){/* Filter groups collapse để tiết kiệm space */} /* ═══════════════════════════════════════════════════════════════════ RESPONSIVE — Phase 5a: Fold / narrow phones ~344px ═══════════════════════════════════════════════════════════════════ */ @media(max-width:380px){ form.search{display:none !important;} .container, .hp-container{padding:0;} .header-inner{display:grid;grid-template-columns:38px minmax(0, 1fr) auto;align-items:center;gap:10px;padding:12px 0 14px;min-height:52px;} .header-inner > .logo{position:static;left:auto;transform:none;justify-self:center;margin:0 auto;min-width:0;width:84px;max-width:84px;overflow:hidden;} .logo .l-img, .header-inner > .logo .custom-logo{height:30px;width:auto;max-width:100%;} .header-actions{gap:4px;margin-right:4px;} .header-actions > .hp-theme-toggle{position:absolute;left:calc(50% - 96px);top:50%;transform:translateY(-50%);z-index:2;background:transparent;border-color:var(--red);color:var(--red-ink);box-shadow:none;} .header-actions > .hp-lang-toggle{position:absolute;left:calc(50% - 132px);top:50%;transform:translateY(-50%);z-index:2;width:34px;min-width:34px;height:34px;padding:0 4px;background:transparent;border-color:var(--red);color:var(--red-ink);box-shadow:none;} .header-actions .hp-search-toggle{display:none;} .ha-label{display:none !important;} .ha{width:34px;min-width:34px;height:34px;padding:0;} .ha > svg{width:16px;height:16px;} .header-actions > .hp-theme-toggle, .hp-ham-btn{width:34px;height:34px;} .header-actions > .hp-lang-toggle{width:34px;height:34px;} .hp-ham-btn svg{width:18px;height:18px;} .sect{padding:16px 5px;overflow-x:clip;} .grid-5, .grid-4, .grid-3{grid-template-columns:repeat(2, minmax(0, 1fr)) !important;gap:8px !important;width:100%;max-width:100%;align-items:stretch;overflow:hidden;} .grid-5 > *, .grid-4 > *, .grid-3 > *{min-width:0;width:auto !important;max-width:none !important;} .card{width:auto;min-width:0;max-width:none;padding:8px;} .card .media{display:block;width:100%;} .card .media{margin-bottom:10px;border-radius:8px;aspect-ratio:1 / 1;} .card .card-img{width:100%;height:100%;object-fit:contain;} .card .name{font-size:11.5px;min-height:50px;margin-bottom:6px;} .card .specs{padding:7px 8px;margin-bottom:8px;min-height:78px;} .card .spec{gap:6px;} .card .spec .sp-k{width:24px;font-size:8.5px;} .card .spec .sp-v{font-size:10px;} } /* ═══════════════════════════════════════════════════════════════════ RESPONSIVE — Phase 5: Z Fold 280px ═══════════════════════════════════════════════════════════════════ */ @media(max-width:320px){ /* Header — ẩn search (drawer thay thế), simplify grid */ form.search{display:none !important;} .header-inner{display:grid;grid-template-columns:34px minmax(0, 1fr) auto;align-items:center;gap:8px;padding:10px 0 12px;min-height:44px;} .header-inner > .logo{position:static;left:auto;transform:none;justify-self:center;margin:0 auto;min-width:0;width:76px;max-width:76px;overflow:hidden;} .logo .l-img, .header-inner > .logo .custom-logo{height:26px;width:auto;max-width:100%;} .header-actions{gap:4px;} .header-actions > .hp-theme-toggle{position:absolute;left:calc(50% - 66px);top:50%;transform:translateY(-50%);z-index:2;background:transparent;border-color:var(--red);color:var(--red-ink);box-shadow:none;} .header-actions > .hp-lang-toggle{position:absolute;left:calc(50% - 96px);top:50%;transform:translateY(-50%);z-index:2;width:26px;min-width:26px;height:30px;padding:0 4px;background:transparent;border-color:var(--red);color:var(--red-ink);box-shadow:none;} .header-actions .hp-search-toggle{display:none;} /* Force hide display name nếu chưa ẩn */ .ha-label{display:none !important;} .ha{padding:5px 6px;} .ha > svg{width:16px;height:16px;} .header-actions > .hp-theme-toggle, .header-actions > .hp-theme-toggle{width:30px;height:30px;} .header-actions > .hp-lang-toggle{width:26px;height:30px;} .hp-ham-btn{width:34px;height:34px;} .hp-ham-btn svg{width:18px;height:18px;} /* Container */ .container, .hp-container{padding:0;} /* Section header */ .sect{padding:16px 5px;overflow-x:clip;} /* Product cards */ .grid-5, .grid-4, .grid-3{grid-template-columns:repeat(2, minmax(0, calc((100% - 8px) / 2))) !important;gap:8px !important;width:100%;max-width:100%;overflow:hidden;} .grid-5 > *, .grid-4 > *, .grid-3 > *{min-width:0;} .card{width:100%;min-width:0;padding:6px;} .card .media{border-radius:6px;aspect-ratio:1 / 1;} .card .card-img{width:100%;height:100%;object-fit:contain;} .card .name{font-size:11px;min-height:44px;margin-bottom:5px;} .card .specs{padding:6px 7px;margin-bottom:8px;min-height:74px;} .card .spec{gap:6px;} .card .spec .sp-k{width:24px;font-size:8.5px;} .card .spec .sp-v{font-size:10px;} /* Benefits — 1 cột */ .benefits{grid-template-columns:1fr;padding:10px;} .benefits .b{border-right:0;border-bottom:1px solid var(--line);padding:8px 10px;gap:8px;} .benefits .b:last-child{border-bottom:0;} /* Hero */ .hero-main{padding:14px 12px;min-height:160px;} .hero-main h1{font-size:19px !important;} .hero-main .hm-cta .btn{font-size:12px;padding:8px 12px;} /* Sect */ .sect{padding:16px 5px;} /* Footer */ footer .top{padding:20px 0 16px;} /* Sticky mobile nav */ /* Drawer width maxes out at 88vw = ~246px — no change needed */ } /* ============================================================ * Dark mode: override WP Customizer CSS "h1-h6 { color: black }" * và "body { color: black }" hardcode — must use !important để * beat Customizer inline style được load trước main.css. * ============================================================ */ [data-theme="dark"] body { background: var(--bg) !important; color: var(--ink) !important; } [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: var(--ink) !important; } /* Ngoại lệ: woocommerce-tabs dùng gradient webkit-text-fill-color — giữ nguyên */ [data-theme="dark"] .woocommerce-tabs h2, [data-theme="dark"] .woocommerce-tabs h3, [data-theme="dark"] .woocommerce-tabs h4 { color: inherit !important; } /* Ngoại lệ: topbar, header, buttons — đã có màu riêng */ [data-theme="dark"] .topbar h1, [data-theme="dark"] .topbar h2, [data-theme="dark"] .hero-main h1 { color: #fff !important; } /* ============================================================ * Customizer CSS: ".woocommerce-cart-form a { color: black }" * Cart form có cả class woocommerce-cart-form lẫn cart-list. * ============================================================ */ [data-theme="dark"] .woocommerce-cart-form a { color: var(--ink) !important; } /* ============================================================ * Toast (HP.toast với type='') — background: var(--ink) → trắng trong dark mode * ============================================================ */ [data-theme="dark"] .hp-toast { background: var(--bg-3) !important; color: var(--ink) !important; } [data-theme="dark"] .hp-toast--ok { background: var(--ok) !important; color: #fff !important; } [data-theme="dark"] .hp-toast--err { background: var(--red) !important; color: #fff !important; } /* ============================================================ * Mega menu promo card — background: var(--ink) → trắng trong dark mode * ============================================================ */ [data-theme="dark"] .mm-promo { background: var(--bg-3) !important; color: var(--ink) !important; } [data-theme="dark"] .mm-promo__title { color: var(--ink) !important; } [data-theme="dark"] .mm-promo__sub { color: var(--ink-2) !important; } /* ============================================================ * Search dropdown — plugin instant-search: background: #ffffff !important * ============================================================ */ [data-theme="dark"] .td-search-results, [data-theme="dark"] .search .td-search-results, [data-theme="dark"] .search-hints { background: var(--bg) !important; color: var(--ink) !important; border: 1px solid var(--line) !important; } [data-theme="dark"] .td-search-results *:not(.td-item-price):not(.woocommerce-Price-amount):not(ins):not(del) { color: var(--ink) !important; } [data-theme="dark"] .td-search-results [class*="item"]:hover, [data-theme="dark"] .td-search-results a:hover { background: var(--bg-2) !important; } [data-theme="dark"] .td-search-results mark { background: rgba(255,220,0,.25) !important; color: var(--ink) !important; } /* ============================================================ * Float contact dock (#hp-support-dock) — inline style rgba(210,210,210,0.6) * ============================================================ */ [data-theme="dark"] #hp-support-dock { background: rgba(20, 25, 38, 0.88) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important; } /* Dock peek từ mép phải ở desktop nhỏ — tránh đè lên cột nội dung */ @media(min-width:1200px) and (max-width:1499px){ #hp-support-dock { right: -22px !important; border-radius: 24px 0 0 24px !important; padding: 18px 10px 18px 14px !important; gap: 14px !important; } #hp-support-dock:hover { right: 10px !important; border-radius: 24px !important; padding: 18px 14px !important; } #hp-support-dock img { width: 42px !important; height: auto !important; } } /* ============================================================ * Order summary quantity badge (.qb) — background: var(--ink) → trắng * ============================================================ */ [data-theme="dark"] .os-mini .thumb .qb { background: var(--red) !important; color: #fff !important; border-color: var(--bg) !important; } /* Logo dark mode swap: handle by JS via [data-hp-logo-light/dark] attrs (xem hp_logo_render() + swapLogos() trong inc/dark-mode.php). CSS `content: url` cũ đã xoá vì không cover được .hp-mnav__logo trong drawer. */ /* GTranslate flag: đặt width/height rõ ràng để browser reserve space trước khi JS inject, tránh CLS khi Lighthouse không thấy HTML attribute từ JS-rendered widget. */ /* GTranslate float widget cũ được thay bằng nút header custom */ #gt_float_wrapper, #gt_float_wrapper .gt_float_switcher { display: none !important; } body.hp-mnav--open #gt_float_wrapper { opacity: 0 !important; pointer-events: none !important; } /* ============================================================ * Dark mode: red TEXT contrast fix * #d42626 trên --bg (#0d1117) chỉ ~3.3:1 — fail WCAG AA. * Targeted override sang #ff5050 (5.3:1 trên #0d1117, 4.7:1 trên #151a21). * KHÔNG đổi --red global để không phá vỡ button/badge bg dùng color:#fff. * ============================================================ */ [data-theme="dark"] .hp-lang-toggle { color: var(--red-ink); border-color: var(--red-ink); } /* .card .price-now ins * { color: var(--red-ink) !important } là direct rule → beat inheritance. Phải add direct dark-mode rule với [data-theme] để override cả ins wrapper. */ [data-theme="dark"] .card .price-now, [data-theme="dark"] .card .price-now ins, [data-theme="dark"] .card .price-now ins *, [data-theme="dark"] .card .woocommerce-Price-amount { color: var(--red-ink) !important; } /* ============================================================ * Content headings — blog post + product long description * H2/H3/H4 có thứ bậc rõ ràng (trước đây description dùng default browser). * Dùng var(--ink) → tự đúng cả dark mode. * ============================================================ */ /* Hover: thụt accent vào nhẹ (dùng padding để không đụng transform của reveal) */ /* Dark mode: chữ + accent đỏ sáng cho nền tối */ [data-theme="dark"] .desc-main__inner h2 { color: var(--red-ink); border-left-color: var(--red-ink); } /* Blog post H2 — màu KHÁC sản phẩm (anh Phát chọn: xanh dương) */ [data-theme="dark"] .hp-post .hp-post-content h2 { color: #6ea8fe; } /* ── Entrance reveal nhỏ (fade-up) khi cuộn tới ── * Chỉ bật khi JS thêm body.hp-anim-ready → no-JS vẫn hiện đầy đủ (an toàn). * Tôn trọng prefers-reduced-motion. */ @media (prefers-reduced-motion: no-preference) { /* Accent bar trượt vào nhẹ */ [data-theme="dark"] body.hp-anim-ready .desc-main__inner h2.hp-in { border-left-color: var(--red-ink); } } /* ============================================================ * FAQ Accordion — shortcode [accordion]/[accordion-item] (Flatsome-compat) * Dùng
/ native: không cần JS, accessible, SEO-friendly. * ============================================================ */ /* Dark mode: màu đỏ active phải sáng để đạt WCAG AA trên nền tối */ [data-theme="dark"] .hp-accordion__item[open] > .hp-accordion__head, [data-theme="dark"] .hp-accordion__item[open] > .hp-accordion__head .hp-accordion__chevron { color: var(--red-ink); } /* Lightbox ảnh nội dung (.hp-lb) — copy vào main.css để load TRÊN MỌI TRANG (trước chỉ có trong woocommerce.css → blog post click ảnh hiện dưới footer). */ @keyframes lb-spin { to { transform: rotate(360deg); } } /* ---- Trang tra cứu đơn hàng /kiem-tra-don-hang/ (2026-07-02) ---- */ [data-theme="dark"] .hp-track__head{background:var(--bg)} [data-theme="dark"] .hp-track__panel,[data-theme="dark"] .hp-track__aside{background:var(--bg)} /* Form WC order tracking (trang này không nạp woocommerce.css → style tự chứa) */ /* Kicker dùng chung (tag bài viết + tag sản phẩm) 2026-07-02 */ /* Fix số bước 1-2-3 trang tra cứu: .hp-track__steps span (desc xám) đè màu số → ép trắng (2026-07-02) */ /* ---- Header danh mục premium (redesign 2026-07-02) ---- */ [data-theme="dark"] .hp-cat-hero{background:linear-gradient(120deg,var(--bg) 52%,#2a1416 100%)} /* ---- Menu ngang: giãn + icon đỏ + ngăn cách "|" (2026-07-02) ---- */ .meganav-inner > a{padding:0 19px} .meganav-inner > a > i{color: var(--red-ink);font-size:12px;margin-right:2px} .meganav-inner > a + a{position:relative} .meganav-inner > a + a::before{content:"|";position:absolute;left:-2px;top:50%;transform:translateY(-50%);color:var(--line);font-size:12px;pointer-events:none} /* ---- QA 2026-07-02: pagination blog archive (hp-pagination chưa từng có CSS màn hình) ---- */ [data-theme="dark"] ul.hp-pagination .page-numbers{background:var(--bg-2)} [data-theme="dark"] ul.hp-pagination .page-numbers.current{background:var(--red);color:#fff} /* ---- QA: nút disabled (vd "Cập nhật giỏ") chữ trắng trên nền nhạt → contrast rõ ---- */ .btn:disabled,.btn[disabled],button.btn[disabled]{background:var(--bg-3);color:var(--muted);border-color:var(--line);cursor:not-allowed;box-shadow:none} /* ===== Selector sao form viết đánh giá (WC p.stars) — 5 sao NGANG (hết xổ dọc 1-2-3-4-5), ★ Unicode + !important để thắng rule plugin review devvn (#review_form) ===== */ /* Sao read-only (.star-rating) — WC hiển thị rating bằng star font; theme dequeue woocommerce.css nên nó tụt về text "Được xếp hạng 5 5 sao". Vẽ lại bằng ★ Unicode, auto-size theo font để width % (span) cắt đúng số sao (vd 80% = 4 sao). Dùng ở review list + card + gần tên SP. */ /* giấu cả plugin devvn tô màu riêng */ [data-theme="dark"] .star-rating::before { color: #3a4048; } @media(max-width:480px){ .hp-container { margin: 0px auto 0 !important; padding: 0 10px; } } /* === Mobile fixes: header (giống TD) + cat banner + list sản phẩm === */ .hp-grid-more { display: none; } @media(max-width:767px){ /* Mục lục section: khoảng cách tiêu đề ↔ nội dung gọn hơn trên mobile. */ /* Header CÂN 2 BÊN (giống TD): hamburger + theme + VI (trái) | logo giữa | search+account+cart (phải). theme+VI absolute ngay sau hamburger; search/account/cart flow ở header-actions (phải). */ .header-inner { position: relative; } .header-inner .header-actions .hp-search-toggle { display: flex; } /* Icon top 40px (thay 34px) */ .hp-ham-btn, .header-inner .header-actions > .hp-theme-toggle, .header-inner .header-actions > .hp-lang-toggle, .header-inner .header-actions > .hp-search-toggle, .header-inner .header-actions .ha { width: 40px; min-width: 40px; height: 40px; padding: 0; } .hp-ham-btn svg, .header-inner .header-actions .ha > svg { width: 20px; height: 20px; } /* Canh lại cho 40px: hamburger(10-50) · theme(60-100) · VI(105-145) | logo giữa | search+account+cart phải */ .header-inner .header-actions > .hp-theme-toggle { position: absolute; left: 56px; top: 50%; transform: translateY(-50%); margin: 0; } .header-inner .header-actions > .hp-lang-toggle { position: absolute; left: 101px; top: 50%; transform: translateY(-50%); margin: 0; } .header-actions { gap: 5px; } .header-inner > .logo { position: absolute; left: 50%; transform: translateX(-50%); width: 84px; max-width: 84px; min-width: 0; margin-left: 0; z-index: 1; } .benefits { margin-top: 0; } /* Cat banner: bỏ chữ "Xem bộ sưu tập", chỉ còn mũi tên */ /* List sản phẩm: chỉ 4 (2x2), còn lại ẩn tới khi bấm "Xem thêm" */ .grid-5:not(.is-expanded) > *:nth-child(n+5), .grid-4:not(.is-expanded) > *:nth-child(n+5), .grid-3:not(.is-expanded) > *:nth-child(n+5) { display: none; } .hp-grid-more { display: block; width: fit-content; margin: 18px auto 0; padding: 10px 28px; background: var(--bg); color: var(--red-ink); border: 1.5px solid var(--red); border-radius: 99px; font-size: 13.5px; font-weight: 700; cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; } .hp-grid-more::after { content: "\25be"; margin-left: 7px; font-size: 11px; } .hp-grid-more:hover, .hp-grid-more:active { background: var(--red); color: #fff; box-shadow: 0 8px 20px -6px rgba(221,51,51,.45); } [data-theme="dark"] .hp-grid-more { background: transparent; } } @media(max-width:960px){ .hero-side .hero-banner--img { min-height: 0; } } /* ========================================================================== Logo SVG: khai TỈ LỆ ngay trong CSS (natural 300×98). Các file logo là SVG, mỗi cái là một document con — trace Lighthouse cho thấy chúng tải xong SAU first paint ở ~50% lần chạy. Với width:auto, trình duyệt phải CHỜ tải xong mới biết bề rộng => layout đổi => CLS toàn trang (đo được 0.9466 trên trang search). aspect-ratio cho trình duyệt biết tỉ lệ NGAY từ CSS, không phụ thuộc thời điểm ảnh về. ========================================================================== */ .hp-logo-img { aspect-ratio: 300 / 98; } /* ═══ Mobile nav — DRILL-IN đẹp (1.7.97) ═══════════════════════════════ */ .hp-mnav { overflow: hidden; } .hp-mnav__viewport { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: var(--bg); } .hp-mnav__panel { width: 100%; } .hp-mnav__panel--sub { display: none; } .hp-mnav__panel--sub.is-active { display: block; animation: hpMnavSlide .28s cubic-bezier(.4, 0, .2, 1); } .hp-mnav__viewport.has-sub .hp-mnav__panel--root { display: none; } @keyframes hpMnavSlide { from { transform: translateX(32px); opacity: .3; } to { transform: none; opacity: 1; } } .hp-mnav__section { padding: 0; border: 0; } /* Drill rows (root) */ .hp-mnav__drill { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 14px 18px; background: transparent; border: 0; border-bottom: 1px solid var(--line); font-family: inherit; font-size: 15px; font-weight: 600; color: var(--ink); text-align: left; cursor: pointer; position: relative; transition: background .15s, color .15s, padding-left .15s; } .hp-mnav__drill::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 0; background: var(--red); border-radius: 0 3px 3px 0; transition: height .18s ease; } .hp-mnav__drill:hover, .hp-mnav__drill:focus-visible { background: var(--red-10); color: var(--red-ink); outline: none; padding-left: 22px; } .hp-mnav__drill:hover::before, .hp-mnav__drill:focus-visible::before { height: 58%; } .hp-mnav__drill-label { flex: 1; min-width: 0; letter-spacing: .01em; } .hp-mnav__caret { flex-shrink: 0; width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: var(--bg-2); color: var(--muted); transition: transform .15s, color .15s, background .15s; } .hp-mnav__drill:hover .hp-mnav__caret, .hp-mnav__drill:focus-visible .hp-mnav__caret { color: var(--red-ink); background: var(--bg); transform: translateX(2px); } /* Back header (sub) */ .hp-mnav__back { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 12px 18px; background: var(--red-10); border: 0; border-bottom: 1px solid var(--line); font-family: inherit; font-size: 15px; font-weight: 700; color: var(--ink); cursor: pointer; position: sticky; top: 0; z-index: 2; text-align: left; } .hp-mnav__back svg { flex-shrink: 0; width: 28px; height: 28px; padding: 5px; border-radius: 50%; background: var(--red); color: #fff; stroke: #fff; } .hp-mnav__back:hover { color: var(--red-ink); } /* Sub list */ .hp-mnav__sublist { list-style: none; margin: 0; padding: 6px 0 16px; } .hp-mnav__link--all { font-weight: 700; color: var(--red-ink); } /* Page buttons */ .hp-mnav__section--pages { border-top: 8px solid var(--bg-2); margin-top: 4px; padding: 4px 0 8px; } .hp-mnav__pages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 14px 16px; } .hp-mnav__pagebtn { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--bg); color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; text-align: center; line-height: 1.2; transition: border-color .15s, color .15s, background .15s, box-shadow .15s, transform .1s; } .hp-mnav__pagebtn i { color: var(--red-ink); font-size: 15px; flex-shrink: 0; transition: color .15s; } .hp-mnav__pagebtn:hover, .hp-mnav__pagebtn:focus-visible { border-color: var(--red); color: var(--red-ink); background: var(--red-10); outline: none; box-shadow: 0 4px 14px -6px var(--red); } .hp-mnav__pagebtn:active { transform: translateY(1px); } /* Nút cuối lẻ → full width */ .hp-mnav__pagebtn:last-child:nth-child(odd) { grid-column: 1 / -1; background: var(--red); border-color: var(--red); color: #fff; } .hp-mnav__pagebtn:last-child:nth-child(odd) i { color: #fff; } .hp-mnav__pagebtn:last-child:nth-child(odd):hover { background: var(--red-600); box-shadow: 0 6px 18px -6px var(--red); } /* ═══ /Mobile nav drill-in ═════════════════════════════════════════════ */ /* ── Nhu cầu sử dụng: NÚT trực tiếp trên root (không drill/trượt ngang) ── */ .hp-mnav__grouptitle { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); padding: 14px 16px 8px; } .hp-mnav__needs { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 0 16px 14px; } .hp-mnav__needbtn { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 14px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--bg); color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.25; text-decoration: none; transition: border-color .15s, background .15s, color .15s, box-shadow .15s, transform .1s; } .hp-mnav__needbtn span { min-width: 0; flex: 1 1 auto; } .hp-mnav__needbtn i { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 15px; color: var(--red-ink); background: var(--red-10); border-radius: 10px; } .hp-mnav__needbtn:hover, .hp-mnav__needbtn:focus-visible { border-color: var(--red); background: var(--red-10); color: var(--red-ink); outline: none; box-shadow: 0 4px 14px -6px var(--red); } .hp-mnav__needbtn:active { transform: translateY(1px); } /* ── Item panel con: TO hơn + dạng nút + chevron (dễ bấm, rõ luồng) ── */ .hp-mnav__sublist .hp-mnav__link { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 13px 16px; font-size: 15px; font-weight: 500; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); transition: background .12s, color .12s; } .hp-mnav__sublist li:last-child .hp-mnav__link { border-bottom: 0; } .hp-mnav__sublist .hp-mnav__link > span { flex: 1 1 auto; min-width: 0; } /* Reset "viên tròn xám" của drill caret → mũi tên phẳng (item con là link cuối, không phải drill). */ .hp-mnav__sublist .hp-mnav__link .hp-mnav__caret { width: 18px; height: 18px; padding: 0; background: none; border-radius: 0; color: var(--muted); flex-shrink: 0; opacity: .5; transition: opacity .15s, color .15s, transform .15s; } .hp-mnav__sublist .hp-mnav__link:hover .hp-mnav__caret, .hp-mnav__sublist .hp-mnav__link:focus-visible .hp-mnav__caret { opacity: 1; color: var(--red-ink); } .hp-mnav__sublist .hp-mnav__link--all { font-size: 14px; } /* ═══ Responsive media trong nội dung (fix ảnh/iframe width cứng tràn — Z Fold/narrow, 1.7.99) ═══ */ .article-content img { max-width: 100%; height: auto; } .article-content figure { width: auto !important; max-width: 100%; margin-left: auto; margin-right: auto; } .article-content iframe, .article-content video, .article-content embed, .article-content object { max-width: 100%; } .article-content [style*="width"] { max-width: 100%; } /* ═══ /Responsive media ═══ */ /* ═══ Fix header overlap ở màn hẹp (≤370px) — theme/lang vào drawer, logo về trái (1.8.2) ═══ */ /* Ẩn mặc định: header ngoài đã có theme/lang toggle → trong drawer thừa. Chỉ hiện ≤370px (lúc header giấu 2 nút). */ .hp-mnav__utils { display: none; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); align-items: center; } .hp-mnav__utils .hp-theme-toggle, .hp-mnav__utils .hp-lang-toggle { position: static !important; transform: none !important; left: auto !important; top: auto !important; margin: 0 !important; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); color: var(--ink); } .hp-mnav__utils .hp-lang-toggle { font-weight: 700; text-decoration: none; } @media(max-width:370px){ .header-inner .header-actions > .hp-theme-toggle, .header-inner .header-actions > .hp-lang-toggle { display: none !important; } .hp-mnav__utils { display: flex; } /* header giấu 2 nút → drawer hiện lại */ .header-inner > .logo { position: static !important; transform: none !important; left: auto !important; margin: 0 auto 0 6px !important; width: auto; max-width: 120px; } } /* ═══ /Fix header overlap ═══ */ /* ═══ ≤370px drawer utils: icon ĐỎ + chữ rõ nghĩa (theme trạng thái / ngôn ngữ) — 2026-08-13 ═══ */ .hp-util-text { display: none; } /* ẩn mặc định (header nút gọn); chỉ hiện trong drawer ≤370px */ @media(max-width:370px){ .hp-mnav__utils { flex-direction: column; align-items: stretch; } .hp-mnav__utils .hp-theme-toggle, .hp-mnav__utils .hp-lang-toggle { width: 100%; min-width: 0; height: auto; min-height: 48px; justify-content: flex-start; gap: 10px; padding: 10px 14px; font-size: 14px; font-weight: 600; text-decoration: none; } .hp-mnav__utils .hp-theme-toggle .hp-theme-toggle__icon { color: var(--red-ink); } /* icon đỏ */ .hp-mnav__utils .hp-lang-toggle::before { content: "\f1ab"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 18px; line-height: 1; color: var(--red-ink); flex-shrink: 0; } .hp-mnav__utils .hp-lang-toggle__label { font-weight: 700; } .hp-mnav__utils .hp-lang-toggle__text { display: inline; } [data-theme-pref="light"] .hp-mnav__utils .hp-theme-toggle__text--light { display: inline; } [data-theme-pref="dark"] .hp-mnav__utils .hp-theme-toggle__text--dark { display: inline; } [data-theme-pref="system"] .hp-mnav__utils .hp-theme-toggle__text--system { display: inline; } } /* ═══ /drawer utils icon+text ═══ */ /* ═══ Header refine mobile/tablet: logo canh giữa + tách gap + nút đồng đều + placeholder gọn (2026-08-13) ═══ */ @media(max-width:370px){ /* ≤370px (theme/lang ẩn vào drawer): logo canh GIỮA khoảng trống giữa hamburger và cụm nút phải. KHÔNG áp >370px: ở đó ☀/VI đặt absolute bên trái (left:56/101) → canh giữa sẽ đè lên nút VI. */ .header-inner > .logo { position: static !important; left: auto !important; transform: none !important; justify-self: center !important; margin: 0 !important; } } @media(min-width:561px) and (max-width:1080px){ /* iPad (search bar inline): tách logo khỏi hamburger cho thoáng */ .header-inner { column-gap: 18px !important; } .header-inner > .logo { margin-left: 6px !important; } } /* Nút header đồng đều, gọn, hợp header — CHỈ ≤1080px (nút icon-only). Desktop >1080px các nút .ha có label chữ ("Tài khoản"/"Giỏ hàng") → KHÔNG ép width kẻo tràn. */ .header-actions { gap: 8px; } @media(max-width:1080px){ .header-actions > .ha, .header-actions > .hp-theme-toggle, .header-actions > .hp-lang-toggle { width: 36px !important; min-width: 36px !important; height: 36px !important; border-radius: 10px !important; } } /* Placeholder search nhỏ & subtle hơn nút "Tìm" (đang bằng cỡ, italic nhìn to) */ .header-inner .searchform input::placeholder, .header-inner form.search input::placeholder { font-size: 12px !important; font-style: normal !important; opacity: .65 !important; } /* ═══ /Header refine ═══ */ /* ═══ Content gallery [gallery] (mô tả SP / bài viết) → LƯỚI đúng số cột. WP core xuất .gallery-columns-N nhưng theme thiếu CSS → item full-width xếp dọc. (2026-08-13) ═══ */ .article-content .gallery { display: grid; gap: 12px; margin: 18px 0; } .article-content .gallery-columns-2 { grid-template-columns: repeat(2, 1fr); } .article-content .gallery-columns-3 { grid-template-columns: repeat(3, 1fr); } .article-content .gallery-columns-4 { grid-template-columns: repeat(4, 1fr); } .article-content .gallery-columns-5 { grid-template-columns: repeat(5, 1fr); } .article-content .gallery-item { width: auto !important; margin: 0 !important; } .article-content .gallery-icon { margin: 0; } .article-content .gallery-item img { width: 100%; height: auto; display: block; border-radius: 8px; } @media(max-width:600px){ .article-content .gallery-columns-3, .article-content .gallery-columns-4, .article-content .gallery-columns-5 { grid-template-columns: repeat(2, 1fr); } } /* ═══ /Content gallery grid ═══ */ /* FAQ accordion: bỏ
rỗng wpautop chèn giữa các câu hỏi → khoảng cách đều (2026-08-13) */ /* ========================================================================== A11Y contrast fix (2026-08-14): legacy wp_extra CSS forces .woocommerce-Price-amount.amount to #dd3333 (contrast 4.3 on card bg #f7f8fa, fails WCAG AA). Pin card prices to accessible tones in both themes. ========================================================================== */ [data-theme="dark"] .card .price-old .woocommerce-Price-amount.amount { color: var(--muted) !important; }/* FA 6.5.2 subset — only icons used in hungphat-laptop theme */ /* Generated automatically — do not edit manually */ /* 2026-08-13: +fa-house(\f015) +fa-users(\f0c0) cho nút Trang chủ / Về chúng tôi (mobile-nav) — font subset rebuild 89→91 glyph */ /* Font local đã subset (chỉ ~92 glyph dùng) — 153KB→7KB. Generated: pyftsubset theo codepoint fa-subset.css */ @font-face{font-family:"Font Awesome 6 Brands";font-style:normal;font-weight:400;font-display:swap;src:url(//hungphatlaptop.com/wp-content/themes/hungphat-laptop/assets/webfonts/fa-brands-400.woff2) format("woff2")} @font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:400;font-display:swap;src:url(//hungphatlaptop.com/wp-content/themes/hungphat-laptop/assets/webfonts/fa-regular-400.woff2) format("woff2")} @font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:900;font-display:swap;src:url(//hungphatlaptop.com/wp-content/themes/hungphat-laptop/assets/webfonts/fa-solid-900.woff2?v=653) format("woff2")} .fa-brands,.fa-classic,.fa-regular,.fa-sharp,.fa-solid,.fab,.far,.fas{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:var(--fa-display,inline-block);font-style:normal;font-variant:normal;line-height:1;text-rendering:auto} .fa-classic,.fa-regular,.fa-solid,.far,.fas{font-family:"Font Awesome 6 Free"} .fa-brands,.fab{font-family:"Font Awesome 6 Brands"} .fa-brands,.fab{font-weight:400} .fa-regular,.far{font-weight:400} .fa-solid,.fas{font-weight:900} .fa-arrow-left:before{content:"\f060"} .fa-arrow-right:before{content:"\f061"} .fa-bag-shopping:before,.fa-shopping-bag:before{content:"\f290"} .fa-bars:before,.fa-navicon:before{content:"\f0c9"} .fa-battery-5:before,.fa-battery-full:before,.fa-battery:before{content:"\f240"} .fa-bolt:before,.fa-zap:before{content:"\f0e7"} .fa-book:before{content:"\f02d"} .fa-briefcase:before{content:"\f0b1"} .fa-broadcast-tower:before,.fa-tower-broadcast:before{content:"\f519"} .fa-building:before{content:"\f1ad"} .fa-camera-alt:before,.fa-camera:before{content:"\f030"} .fa-certificate:before{content:"\f0a3"} .fa-check-circle:before,.fa-circle-check:before{content:"\f058"} .fa-chevron-down:before{content:"\f078"} .fa-chevron-right:before{content:"\f054"} .fa-circle-dot:before,.fa-dot-circle:before{content:"\f192"} .fa-circle-info:before,.fa-info-circle:before{content:"\f05a"} .fa-circle-notch:before{content:"\f1ce"} .fa-circle-question:before,.fa-question-circle:before{content:"\f059"} .fa-circle:before{content:"\f111"} .fa-clock-four:before,.fa-clock:before{content:"\f017"} .fa-close:before,.fa-multiply:before,.fa-remove:before,.fa-times:before,.fa-xmark:before{content:"\f00d"} .fa-comment-dots:before,.fa-commenting:before{content:"\f4ad"} .fa-comments:before{content:"\f086"} .fa-computer-mouse:before,.fa-mouse:before{content:"\f8cc"} .fa-credit-card-alt:before,.fa-credit-card:before{content:"\f09d"} .fa-crosshairs:before{content:"\f05b"} .fa-display:before{content:"\e163"} .fa-edit:before,.fa-pen-to-square:before{content:"\f044"} .fa-envelope-open-text:before{content:"\f658"} .fa-envelope:before{content:"\f0e0"} .fa-exclamation-triangle:before,.fa-triangle-exclamation:before,.fa-warning:before{content:"\f071"} .fa-facebook-f:before{content:"\f39e"} .fa-fan:before{content:"\f863"} .fa-file-invoice-dollar:before{content:"\f571"} .fa-gauge-high:before,.fa-tachometer-alt-fast:before,.fa-tachometer-alt:before{content:"\f625"} .fa-gift:before{content:"\f06b"} .fa-hand-paper:before,.fa-hand:before{content:"\f256"} .fa-hard-drive:before,.fa-hdd:before{content:"\f0a0"} .fa-headphones:before{content:"\f025"} .fa-headset:before{content:"\f590"} .fa-heart:before{content:"\f004"} .fa-keyboard:before{content:"\f11c"} .fa-laptop:before{content:"\f109"} .fa-layer-group:before{content:"\f5fd"} .fa-location-dot:before,.fa-map-marker-alt:before{content:"\f3c5"} .fa-lock:before{content:"\f023"} .fa-magnifying-glass:before,.fa-search:before{content:"\f002"} .fa-map-location-dot:before,.fa-map-marked-alt:before{content:"\f5a0"} .fa-memory:before{content:"\f538"} .fa-microchip:before{content:"\f2db"} .fa-newspaper:before{content:"\f1ea"} .fa-palette:before{content:"\f53f"} .fa-pen-ruler:before,.fa-pencil-ruler:before{content:"\f5ae"} .fa-phone:before{content:"\f095"} .fa-plug:before{content:"\f1e6"} .fa-receipt:before{content:"\f543"} .fa-right-to-bracket:before,.fa-sign-in-alt:before{content:"\f2f6"} .fa-rocket:before{content:"\f135"} .fa-ruler-combined:before{content:"\f546"} .fa-server:before{content:"\f233"} .fa-share-alt:before,.fa-share-nodes:before{content:"\f1e0"} .fa-shield-alt:before,.fa-shield-halved:before{content:"\f3ed"} .fa-shipping-fast:before,.fa-truck-fast:before{content:"\f48b"} .fa-star:before{content:"\f005"} .fa-stopwatch:before{content:"\f2f2"} .fa-store:before{content:"\f54e"} .fa-terminal:before{content:"\f120"} .fa-tiktok:before{content:"\e07b"} .fa-toggle-on:before{content:"\f205"} .fa-user-plus:before{content:"\f234"} .fa-user:before{content:"\f007"} .fa-weight-hanging:before{content:"\f5cd"} .fa-wifi-3:before,.fa-wifi-strong:before,.fa-wifi:before{content:"\f1eb"} .fa-wrench:before{content:"\f0ad"} .fa-youtube:before{content:"\f167"}.fa-list:before{content:"\f03a"} .fa-list-ul:before{content:"\f0ca"} .fa-sliders:before{content:"\f1de"} .fa-gear:before{content:"\f013"} .fa-cog:before{content:"\f013"} .fa-language:before{content:"\f1ab"} .fa-images:before{content:"\f302"} .fa-file-lines:before{content:"\f15c"} .fa-grip-vertical:before{content:"\f58e"} .fa-rotate:before{content:"\f2f1"} .fa-plus:before{content:"\f067"} .fa-check:before{content:"\f00c"} .fa-trash:before{content:"\f1f8"} .fa-arrow-right-long:before{content:"\f178"} .fa-circle-xmark:before{content:"\f057"} .fa-table-cells:before{content:"\f00a"} .fa-paintbrush:before{content:"\f1fc"} .fa-house:before{content:"\f015"} .fa-users:before{content:"\f0c0"}