/* ===== Theme variables ===== */
:root {
/* Brand palette */
--color-navy: #0f1328;
--color-dark-ink: #0a0e18;
--color-gold: #fec935;
--color-gold-deep: #d7a126;
--color-red: #e60012;
--color-red-soft: #ffe7ea;
--color-amber: #f5b700;
--color-pink: #f48fb1;
--color-teal: #00787d;
--color-cyan: #00c4cc;
--color-green: #4caf50;
/* Neutrals */
--color-black: #000;
--color-text-main: #111;
--color-gray-700: #444;
--color-gray-600: #666;
--color-gray-500: #777;
--color-gray-300: #e5e5e5;
--color-gray-275: #efefef;
--color-gray-250: #f2f2f2;
--color-gray-225: #f3f3f3;
--color-white: #fff;
/* Legacy aliases */
--header-navy: var(--color-navy);
--header-gold: var(--color-gold);
--header-gray: var(--color-gray-250);
--text-main: var(--color-text-main);
}
/* ===== Base elements ===== */
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
overflow-x: hidden;
margin: 0;
font-family: 'Mulish', system-ui, -apple-system, sans-serif;
font-weight: 400;
color: var(--text-main);
background: #fff;
font-size: 16px;
line-height: 1.5;
}
/* Rating display used by pw_show_star() */
.pw-rating { display: inline-flex; align-items: center; gap: 0.5rem; }
.pw-rating__stars { position: relative; display: inline-block; line-height: 1; letter-spacing: 2px; font-size: 18px; }
.pw-rating__stars--bg { color: #ddd; display: inline-block; }
.pw-rating__stars--fg { color: #f3c623; position: absolute; left: 0; top: 0; overflow: hidden; display: inline-block; }
.pw-rating__text { font-weight: 600; color: #111; }
a {
color: inherit;
text-decoration: none;
}
img {
max-width: 100%;
height: auto;
display: block;
}
.container {
max-width: min(1320px, 100%);
padding: 0 1rem;
margin: 2rem auto;
}
.wp-caption {
max-width: 100%;
margin: 1rem auto;
}
.wp-caption-text {
background: var(--color-gray-300);
text-align: center;
padding: .25rem 1rem;
font-size: .9rem;
}
/* ===== Home page sections ===== */
/* Home Statics Section */
.home-statics {
background: var(--header-navy);
}
.home-statics .container {
margin-bottom: 0;
}
.home-statics .banners-list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
margin-top: 2rem;
padding-top: 1rem;
}
.home-statics .banner-item {
display: flex;
align-items: center;
color: var(--color-gold);
font-size: .9rem;
}
.home-statics .banner-item img {
filter: brightness(0) saturate(100%) invert(78%)
sepia(64%) saturate(748%) hue-rotate(340deg)
brightness(104%) contrast(101%);
width: 32px;
height: 32px;
box-sizing: content-box;
}
.home-statics .banner-item img:not(:last-child) {
margin-right: 1rem;
padding-right: 1rem;
border-right: 1px solid var(--color-gold);
}
.home-statics .banner-item strong {
font-size: 1.5rem;
color: #fff;
}
@media (max-width: 767px) {
.home-statics .banners-list {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
}
/* Home Gallery Section */
.home-gallery p {
margin: 0;
}
.home-gallery .container {
max-width: 100%;
padding: 0;
margin-top: 0;
}
.home-gallery .banners-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.home-gallery .banner-item {
position: relative;
}
.home-gallery .banner-item img {
aspect-ratio: 16/9;
width: 100%;
height: auto;
display: block;
object-fit: cover;
}
.home-gallery .banner-item .banner-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgb(10 14 24 / 60%);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
color: #fff;
padding: .25rem 1rem;
text-align: center;
}
/* Home Story Section */
.home-story .banner-item {
display: grid;
grid-template-columns: 1fr 1fr;
}
.home-story .banner-item .banner-image {
position: absolute;
height: 100%;
width: 50%;
right: 0;
object-fit: cover;
order: 1;
}
.home-story .banner-item .banner-caption {
display: flex;
align-items: center;
font-style: italic;
font-size: 1.25rem;
padding: 1rem 2.5rem;
background: #f5f5f5;
text-align: justify;
}
@media (max-width: 767px) {
.home-story .banner-item {
grid-template-columns: 100%;
}
.home-story .banner-item .banner-image {
position: static;
width: 100%;
aspect-ratio: 16/9;
}
.home-story .banner-item .banner-caption {
padding: 0 1rem;
font-size: 1.2rem;
}
}
/* Home Partner Section */
.home-partners .banner-item {
display: flex;
justify-content: center;
border: 1px solid var(--color-dark-ink);
padding: .5rem;
}
.home-partners .banner-item .banner-image {
height: 45px;
width: auto;
object-fit: contain;
}
.home-partners .swiper-scrollbar {
display: none;
}
@media (max-width: 767px) {
.swiper-button-prev,
.swiper-button-next {
display: none;
}
}
/* Home Blog Section */
.home-blog .posts-list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
}
.home-blog .post-item img {
aspect-ratio: 4/3;
object-fit: cover;
}
/* ===== Buttons & inputs ===== */
button, .btn,
input[type="button"], input[type="submit"],
button[type="button"], button[type="submit"] {
background: var(--color-gold);
border: none;
color: #000;
font-size: .9rem;
font-weight: 700;
border-radius: 999px;
padding: 0 1rem;
line-height: 2;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
button:hover, .btn:hover,
input[type="button"]:hover, input[type="submit"]:hover,
button[type="button"]:hover, button[type="submit"]:hover {
background: var(--color-gold-deep);
color: #000;
}
input {
border: 2px solid var(--header-gold);
border-radius: 999px;
padding: 0 .5rem;
font-size: .9rem;
line-height: 2;
background: #f3f3f3;
color: #111;
outline: none;
max-width: 100%;
}
.wpcf7-form .cf7-field {
margin-bottom: .5rem;
}
.wpcf7-form .cf7-row {
display: flex;
gap: .5rem;
}
.wpcf7-form .cf7-field input {
width: 100%;
}
.wpcf7-form .cf7-field.half {
width: calc(50% - 0.25rem);
}
.wpcf7-form span[data-name="san-pham"],
.wpcf7-form span[data-name="ho-ten"],
.wpcf7-form span[data-name="phone"] {
display: flex;
width: 100%;
}
.wpcf7-form span[data-name="san-pham"] input,
.wpcf7-form span[data-name="ho-ten"] input,
.wpcf7-form span[data-name="phone"] input {
padding-left: 2rem;
}
.wpcf7-form span[data-name="san-pham"]::before,
.wpcf7-form span[data-name="ho-ten"]::before,
.wpcf7-form span[data-name="phone"]::before {
content: '';
position: absolute;
top: 50%;
left: .5rem;
transform: translateY(-50%);
width: 1.5rem;
height: 1.5rem;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: 0.9;
}
.wpcf7-form span[data-name="san-pham"]::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23111'%3E%3Cpath d='M7 18h10v2H7zM6 2h12a2 2 0 0 1 2 2v12H4V4a2 2 0 0 1 2-2zm0 2v10h12V4zM8 6h8v2H8zm0 4h5v2H8z'/%3E%3C/svg%3E") ;
}
.wpcf7-form span[data-name="ho-ten"]::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23111'%3E%3Cpath d='M12 12a4 4 0 1 0-4-4 4 4 0 0 0 4 4zm0 2c-4 0-8 2-8 4v2h16v-2c0-2-4-4-8-4z'/%3E%3C/svg%3E");
}
.wpcf7-form span[data-name="phone"]::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23111'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1-.24 11.36 11.36 0 0 0 3.57.57 1 1 0 0 1 1 1V21a1 1 0 0 1-1 1A18 18 0 0 1 3 5a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1 11.36 11.36 0 0 0 .57 3.57 a1 1 0 0 1-.24 1z'/%3E%3C/svg%3E");
}
.wpcf7-form .cd-upload-btn {
display: inline-flex;
background: var(--header-gold);
border-radius: 999px;
padding: 0 .5rem;
line-height: 2;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
color: #111;
}
.wpcf7-form .codedropz-upload-handler {
border: 2px solid var(--header-gold);
padding: .5rem;
position: relative;
background: #f3f3f3;
border-radius: 1rem;
}
.wpcf7-form .codedropz-upload-container {
padding: 0;
}
.wpcf7-form .codedropz-upload-inner {
position: relative;
font-size: 14px;
display: flex;
flex-direction: column;
gap: 1rem;
line-height: 1rem;
}
.wpcf7-form .dnd-upload-counter {
right: 10px;
}
.wpcf7-form .cf7-upload.is-dragover {
box-shadow: 0 0 0 3px rgba(215, 161, 38, 0.3);
}
.wpcf7-form .cf7-upload.has-file .upload-text,
.wpcf7-form .cf7-upload.has-file .upload-btn {
display: none;
}
.wpcf7-form .cf7-upload-info {
width: 100%;
margin-top: 8px;
}
.wpcf7-form .cf7-upload-info:empty {
display: none;
}
.wpcf7-form .cf7-upload-row {
display: flex;
align-items: center;
gap: 10px;
}
.wpcf7-form .cf7-upload-thumb {
width: 40px;
height: 40px;
object-fit: cover;
border-radius: 8px;
flex: 0 0 auto;
}
.wpcf7-form .cf7-upload-name {
font-weight: 700;
color: #111;
flex: 0 0 auto;
max-width: 45%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wpcf7-form .cf7-upload-remove {
border: none;
background: #efefef;
color: #444;
padding: 6px 10px;
border-radius: 8px;
}
/* Two-column cart + embedded checkout layout */
.pw-cart-layout {
display: flex;
gap: 2rem;
align-items: flex-start;
}
.pw-cart-left {
flex: 0 0 350px;
max-width: 350px;
}
/* Notifications (toast) */
.pw-notify-container {
position: fixed;
right: 16px;
top: 16px;
z-index: 100002;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
pointer-events: none; /* let clicks pass through container, but individual toasts can receive pointer-events */
}
.pw-notify {
pointer-events: auto;
min-width: 220px;
max-width: min(100%, 360px);
background: rgba(17,17,17,0.95);
color: #fff;
padding: 12px 14px;
border-radius: 10px;
box-shadow: 0 6px 24px rgba(11,13,23,0.45);
font-weight: 600;
font-size: 14px;
line-height: 1.2;
opacity: 0;
transform: translateY(-6px) scale(0.995);
transition: opacity 220ms cubic-bezier(.2,.9,.2,1), transform 220ms cubic-bezier(.2,.9,.2,1);
}
.pw-notify.is-visible {
opacity: 1;
transform: translateY(0) scale(1);
}
.pw-notify--success { background: linear-gradient(180deg, #1b7a3a 0%, #14904a 100%); }
.pw-notify--error { background: linear-gradient(180deg, #b71c1c 0%, #e53935 100%); }
.pw-notify--info { background: linear-gradient(180deg, #2b6fb3 0%, #1e88e5 100%); }
@media (max-width: 640px) {
.pw-notify-container { right: 10px; left: 10px; top: 10px; align-items: center; }
.pw-notify { max-width: 100%; width: auto; }
}
.pw-cart-right {
flex: 1 1 auto;
min-width: 0; /* allow overflow hidden behaviors */
}
.pw-cart-left .woocommerce-billing-fields,
.pw-cart-left #payment {
background: #fff;
border: 1px solid var(--color-gray-225);
padding: 1rem;
border-radius: 8px;
}
@media (max-width: 900px) {
.pw-cart-layout { display: block; }
.pw-cart-left, .pw-cart-right { max-width: 100%; width: 100%; }
.pw-cart-left { margin-bottom: 1.5rem; }
}
/* ===== Checkout / Billing (theme overrides) ===== */
.woocommerce-billing-fields {
background: #fff;
border: 1px solid var(--color-gray-250);
padding: 1rem;
border-radius: 12px;
margin-bottom: 1rem;
}
.woocommerce-billing-fields h3 {
margin: 0 0 .75rem;
font-size: 1.125rem;
color: var(--color-dark-ink);
font-weight: 700;
}
.woocommerce-billing-fields__field-wrapper .form-row,
.woocommerce-billing-fields__field-wrapper .form-row-wide {
display: block;
margin-bottom: .75rem;
}
.woocommerce-billing-fields__field-wrapper label {
display: block;
margin-bottom: .35rem;
font-weight: 600;
color: var(--color-gray-700);
}
.woocommerce-billing-fields__field-wrapper input[type="text"],
.woocommerce-billing-fields__field-wrapper input[type="tel"],
.woocommerce-billing-fields__field-wrapper input[type="email"],
.woocommerce-billing-fields__field-wrapper textarea,
.woocommerce-billing-fields__field-wrapper select {
width: 100%;
padding: .6rem .75rem;
border-radius: 8px;
border: 1px solid var(--color-gray-300);
background: #fff;
font-size: 1rem;
line-height: 1.4;
color: var(--color-text-main);
box-shadow: none;
}
.woocommerce-billing-fields__field-wrapper textarea {
min-height: 100px;
resize: vertical;
}
/* Specific IDs from our theme override */
#billing_full_name,
#billing_phone,
#billing_address_1,
#order_comments {
box-sizing: border-box;
}
.woocommerce-checkout .form-row .required {
color: var(--color-red);
}
/* Payment area (compact, aligned) */
.woocommerce-checkout .woocommerce-checkout-payment {
margin-top: 1rem;
padding: 1rem;
border-radius: 12px;
border: 1px solid var(--color-gray-250);
background: #fff;
}
.woocommerce-checkout .payment_methods {
display: flex;
flex-direction: column;
gap: .5rem;
}
@media (min-width: 900px) {
.woocommerce-billing-fields { padding: 1.25rem; }
.woocommerce-checkout .woocommerce-checkout-payment { padding: 1.25rem; }
}
@media (max-width: 600px) {
.woocommerce-billing-fields { padding: .75rem; }
.woocommerce-billing-fields__field-wrapper .form-row-half { width: 100%; }
}
.wpcf7-form .cf7-upload input[type="file"] {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
}
.wpcf7-form .upload-text {
flex: 1 1 auto;
text-align: center;
font-size: 15px;
font-weight: 700;
color: #111;
}
/* ===== Layout ===== */
.container.layout:has(.sidebar) {
display: grid;
gap: .75rem;
align-items: start;
}
.container.layout:has(.sidebar--left) {
grid-template-columns: 300px 1fr;
}
.container.layout:has(.sidebar--right) {
grid-template-columns: 1fr 300px;
}
.container.layout .container {
padding: 0;
}
.container.layout section .container{
max-width: 100%;
width: 100%;
margin: 1.5rem 0;
}
@media (max-width: 1100px) {
.container.layout {
grid-template-columns: minmax(0, 1fr);
}
.container.layout .sidebar {
width: 100%;
}
}
/* ===== Footer ===== */
footer.site-footer {
background: var(--header-navy);
padding: 2rem 0;
color: #fff;
font-size: 14px;
}
.footer-top img {
margin: 0 auto;
height: 80px;
width: auto;
}
.footer-main .container {
display: grid;
grid-template-columns: 300px repeat(3, auto) 230px;
justify-content: space-between;
gap: 2rem;
margin-top: 1.5rem;
}
.footer-main .title {
color: var(--header-gold);
font-size: 1rem;
margin-bottom: .5rem;
}
@media (max-width: 900px) {
.footer-main .container {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.footer-main .container > .block {
min-width: 0;
}
}
@media (max-width: 640px) {
.footer-top img {
height: 64px;
}
.footer-main .container {
grid-template-columns: 1fr;
gap: 1.25rem;
margin-top: 1rem;
}
.footer-main .title,
.block-footer-business .description,
.block-footer-business .content {
text-align: center;
}
.block-footer-menu .content ul {
padding-left: 0;
}
}
/* ===== Contact Form 7 ===== */
.wpcf7-response-output,
.wpcf7-not-valid-tip,
.wpcf7-spinner {
display: none !important;
}
#wpcf7-f63-o1 {
margin: 0 auto;
}
/* === WRAPPER === */
#wpcf7-f63-o1 .cf7-wrap {
padding: .75rem;
background: #fff;
color: #111;
background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23fec935' stroke-width='3' stroke-dasharray='11' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
}
/* === COUNTDOWN === */
#wpcf7-f63-o1 .cf7-countdown {
display: flex;
justify-content: space-around;
gap: 12px;
margin-bottom: 16px;
}
/* === Contact form: Product quote (ID 431) === */
#wpcf7-f431-o1 .cf7-wrap {
border: 2px dashed #f6c33a;
padding: 0.75rem;
background: #fffdf4;
border-radius: .5rem;
}
#wpcf7-f431-o1 button[type="submit"] {
display: flex;
width: 100%;
line-height: 1.2;
padding: .5rem;
border-radius: .5rem;
}
#wpcf7-f431-o1 .codedropz-upload-handler {
padding: 0.25rem;
}
#wpcf7-f431-o1 .codedropz-upload-inner {
flex-direction: row;
align-items: center;
justify-content: center;
}
@media (max-width: 768px) {
#wpcf7-f431-o1 .cf7-row {
grid-template-columns: 1fr;
}
}
#wpcf7-f63-o1 .cf7-countdown div {
width: 55px;
height: 55px;
border-radius: 50%;
background: #fff;
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
line-height: 1;
}
#wpcf7-f63-o1 .cf7-countdown strong {
display: block;
font-size: 1.2rem;
margin-bottom: 2px;
}
#wpcf7-f63-o1 .cf7-countdown span {
font-size: 13px;
}
/* === CAPTCHA === */
#wpcf7-f63-o1 .cf7-captcha {
margin: 6px 0 12px;
display: flex;
justify-content: center;
}
/* === SUBMIT === */
#wpcf7-f63-o1 .cf7-submit input[type="submit"] {
line-height: 3;
display: flex;
margin: auto;
min-width: 220px;
}
/* === RESPONSIVE === */
@media (max-width: 767px) {
#wpcf7-f63-o1 .cf7-row {
flex-direction: column;
}
#wpcf7-f63-o1 .cf7-countdown {
flex-wrap: wrap;
}
}
/* ===== WooCommerce blocks ===== */
/* ===== WooCommerce: Cart styles ===== */
.woocommerce { color: var(--text-main); }
.woocommerce .woocommerce-cart-form {
background: #fff;
border: 1px solid var(--color-gray-300);
border-radius: 18px;
padding: 1.25rem;
box-shadow: 0 10px 30px rgba(10, 14, 24, 0.04);
}
.shop_table { width: 100%; border-collapse: collapse; }
.shop_table thead th {
background: var(--color-gray-225);
color: var(--color-gray-700);
font-weight: 700;
font-size: 1rem;
padding: 1rem .75rem;
text-align: center;
border-bottom: 1px solid var(--color-gray-275);
}
.shop_table thead th.product-remove { width: 56px; }
.shop_table thead th.product-thumbnail { width: 110px; }
.shop_table thead th.product-name { text-align: left; }
.shop_table thead th.product-price,
.shop_table thead th.product-quantity,
.shop_table thead th.product-subtotal { text-align: center; }
.shop_table tbody tr { border-bottom: 1px solid var(--color-gray-275); }
.shop_table td { padding: .85rem .75rem; vertical-align: middle; }
.product-remove { text-align: center; }
.product-remove .remove { color: var(--color-gray-600); font-size: 1.25rem; padding: .25rem .5rem; border-radius: 8px; }
.product-thumbnail img { width: 88px; height: 88px; object-fit: cover; border-radius: 8px; display: block; }
.product-name a { color: var(--color-navy); font-weight: 700; display: inline-block; }
.product-name { text-align: left; }
.product-price, .product-subtotal { font-weight: 700; color: var(--color-navy); text-align: right; }
.product-quantity { text-align: center; min-width: 140px; }
.product-quantity .pw-qty-buttons {
display: inline-flex;
align-items: center;
gap: 0;
border-radius: 999px;
overflow: hidden;
box-sizing: border-box;
border: 2px solid var(--header-gold);
background: #fff;
}
/* Clustered single-pill appearance: left button, number, right button */
.pw-qty-btn {
width: 24px;
height: 24px;
border: 0;
border-radius: 0;
background: transparent;
color: var(--color-navy);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 0.65rem;
font-weight: 700;
}
.pw-qty-btn:first-child { border-right: 1px solid rgba(0,0,0,0.06); }
.pw-qty-btn:last-child { border-left: 1px solid rgba(0,0,0,0.06); }
.pw-qty-btn:hover, .pw-qty-btn:focus { background: var(--header-gold); color: #000; }
.pw-qty-buttons input[type="number"] {
width: 38px;
height: 24px;
box-sizing: border-box;
border: 0;
padding: 0 .35rem;
text-align: center;
font-weight: 700;
background: transparent;
color: var(--color-navy);
}
.actions { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.actions .coupon { display:flex; gap:.5rem; align-items:center; }
.actions .coupon input.input-text { border-radius: 999px; padding: .5rem .75rem; border: 2px solid var(--header-gold); background: #fff; }
.actions .coupon .button { margin-left:0; }
.actions .button[name="update_cart"] { background: var(--color-gold); color:#000; border-radius: 999px; padding: .6rem 1rem; font-weight:700; }
.cart-collaterals .cart_totals { border: 1px solid var(--color-gray-300); background: #fff; padding: 1.25rem; border-radius: 18px; box-shadow: 0 10px 30px rgba(10, 14, 24, 0.03); margin-top: 1rem; }
.cart-collaterals .cart_totals h2 { margin-top: 0; font-size: 1.2rem; }
.cart-collaterals .shop_table { margin: 0; }
.cart-collaterals .shop_table th { padding: .75rem .5rem; font-weight:700; color:var(--color-gray-600); width: 40%; text-align:left; }
.cart-collaterals .shop_table td { text-align:right; padding: .75rem .5rem; }
.cart-collaterals .shop_table tr:not(.order-total) td { color: var(--color-gray-700); }
.cart-collaterals .order-total strong { font-size: 1.35rem; color: var(--color-navy); }
.wc-proceed-to-checkout .checkout-button { background: var(--color-gold); border-radius: 999px; padding: .9rem 1.25rem; color: #000; font-weight: 700; display: inline-block; }
@media (max-width: 768px) {
.shop_table thead { display: none; }
.shop_table tbody td { display: block; padding: .6rem 0; border-bottom: 1px solid var(--color-gray-275); }
.shop_table tbody td[data-title]::before { content: attr(data-title) ": "; font-weight:700; color:var(--color-gray-700); display:inline-block; width:110px; }
.product-thumbnail { margin-bottom: .5rem; }
.cart-collaterals { margin-top: 1rem; }
.cart-collaterals .shop_table th, .cart-collaterals .shop_table td { text-align: left; }
.wc-proceed-to-checkout .checkout-button { width: 100%; text-align:center; }
}
/* End: WooCommerce: Cart styles */
/* Checkout injected on cart page: make it visually consistent with cart/collaterals */
.cart-checkout-wrapper { margin-top: 1rem; }
.cart-checkout-wrapper .woocommerce-checkout,
.cart-checkout-wrapper .woocommerce {
background: #fff;
border: 1px solid var(--color-gray-300);
border-radius: 18px;
padding: 1.25rem;
box-shadow: 0 10px 30px rgba(10, 14, 24, 0.03);
}
/* Grid layout for cart + checkout on the same page */
.pw-cart-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
.pw-cart-left, .pw-cart-right {
width: 100%;
}
/* Hide checkout's internal order review when rendered in left column to avoid duplicate */
.pw-cart-left .woocommerce-checkout #order_review,
.pw-cart-left .woocommerce-checkout .woocommerce-checkout-review-order,
.pw-cart-left .woocommerce-checkout .order_review {
display: none !important;
}
@media (min-width: 992px) {
.pw-cart-grid { grid-template-columns: 1fr 460px; align-items:start; }
.pw-cart-left { order: 1; }
.pw-cart-right { order: 2; }
}
/* Form field visuals inside checkout */
.cart-checkout-wrapper .woocommerce form .input-text,
.cart-checkout-wrapper .woocommerce form input[type="text"],
.cart-checkout-wrapper .woocommerce form input[type="email"],
.cart-checkout-wrapper .woocommerce form input[type="tel"],
.cart-checkout-wrapper .woocommerce form input[type="number"],
.cart-checkout-wrapper .woocommerce form select,
.cart-checkout-wrapper .woocommerce form textarea {
width: 100%;
padding: .6rem .8rem;
border: 1px solid var(--color-gray-300);
border-radius: 10px;
background: #fff;
font-size: 1rem;
color: var(--text-main);
box-shadow: none;
}
.cart-checkout-wrapper .woocommerce form .form-row { margin-bottom: .75rem; }
.cart-checkout-wrapper .woocommerce .button, .cart-checkout-wrapper .woocommerce input.button {
background: var(--color-gold);
color: #000;
border-radius: 999px;
padding: .7rem 1rem;
font-weight: 700;
}
@media (min-width: 992px) {
/* Stack cart above checkout: cart is full width, checkout sits below and centers */
.cart-checkout-wrapper { width: 100%; float: none; margin: 1rem 0 0 0; }
.woocommerce .woocommerce-cart-form { margin-right: 0; }
.cart-checkout-wrapper .woocommerce-checkout { max-width: 760px; margin: 0 auto; }
}
/* Cart item attributes styling */
.pw-cart-attributes,
.pw-cart-default-attributes {
list-style: none;
margin: .5rem 0 0;
padding: 0;
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.pw-cart-attributes li,
.pw-cart-default-attributes li {
color: var(--color-gray-700);
font-size: .95rem;
}
.pw-cart-default-attributes li small { color: var(--color-gray-600); }
/* Custom attributes (popup) formatting */
.pw-cart-attrs-wrap { margin-top: .5rem; }
/* Hide the title for compact attributes display */
.pw-cart-attrs-title { display: none; }
.pw-cart-attributes--custom { display: flex; gap: .4rem; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.pw-cart-attributes--custom li { display: inline-flex; align-items: center; gap: .35rem; background: var(--color-gray-225); padding: .25rem .5rem; border-radius: 999px; border: 1px solid var(--color-gray-275); font-size: .85rem; color: var(--color-gray-700); }
.pw-attr-key { font-weight: 700; color: var(--color-navy); }
.pw-attr-sep { color: var(--color-gray-500); margin: 0 .1rem; }
.pw-attr-value { color: var(--color-gray-700); }
/* Cart totals column styling */
.cart-totals-summary { padding: 1rem; }
.cart-totals-title { margin: 0 0 .75rem; font-size: 1.1rem; }
.cart-totals-mini { width: 100%; border-collapse: collapse; }
.cart-totals-mini th { text-align: left; font-weight: 700; padding: .25rem 0; width: 40%; color: var(--color-gray-700); }
.cart-totals-mini td { text-align: right; padding: .25rem 0; color: var(--color-gray-700); }
.cart-totals-cta { margin-top: .75rem; }
.cart-totals-cell { vertical-align: top; padding: 1rem; text-align: right; }
.cart-totals-amount { display: inline-block; font-weight: 800; font-size: 1.25rem; color: var(--color-navy); }
@media (max-width: 768px) {
.cart-totals-cell { text-align: left; padding-top: .75rem; }
.cart-totals-summary { padding: .75rem 0; }
}
/* ===== WooCommerce: Product description ===== */
.block--product-details {
background: #fff;
border: 1px solid var(--color-gray-300);
border-radius: 18px;
overflow: hidden;
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
}
.block--product-details .head .title {
display: block;
background: var(--color-gold);
color: #111;
text-align: center;
font-weight: 700;
font-size: 16px;
line-height: 2;
letter-spacing: 0.3px;
}
.block--product-details .content {
--pw-description-max-height: 1990px;
position: relative;
padding: 1rem;
max-height: var(--pw-description-max-height);
overflow: hidden;
}
.block--product-details .content p {
margin: 0 0 1rem;
}
/* Make view-more buttons consistent across templates */
.view-more {
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 60%, #fff 100%);
height: 160px;
display: flex;
align-items: end;
justify-content: center;
cursor: s-resize;
}
.view-more:hover {
background-color: unset;
color: var(--color-gold-deep);
}
.view-more input {
display: none;
}
.view-more::after {
content: 'XEM THÊM \25BC';
}
.view-more:has(input:checked) {
position: static;
cursor: n-resize;
background: none;
height: 50px;
}
.view-more:has(input:checked)::after {
content: 'RÚT GỌN \25B2';
}
*:has(.view-more input:checked) {
max-height: none;
}
.block--product-details.is-expanded .content {
max-height: none;
}
.block--product-details.is-expanded .content::after {
display: none;
}
/* ===== WooCommerce: Product specs ===== */
.block--product-specs {
border: 2px solid #f6c33a;
border-top-left-radius: 1.5rem;
border-top-right-radius: 1.5rem;
overflow: hidden;
background: #fff;
}
.block--product-specs .head .title {
display: block;
background: var(--color-gold);
color: #111;
text-align: center;
font-weight: 700;
font-size: 16px;
line-height: 2;
letter-spacing: 0.3px;
}
.block--product-specs .content {
padding: 0;
background: #fff;
}
#pw-product-specs {
display: grid;
grid-template-columns: auto 1fr;
border-left: 1px solid var(--color-gold);
border-right: 1px solid var(--color-gold);
max-height: 180px;
overflow-y: scroll;
transition: all 0.3s ease;
/* Track */
&::-webkit-scrollbar {
width: .5rem;
box-sizing: border-box;
}
/* Nền phía sau */
&::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Thanh kéo */
&::-webkit-scrollbar-thumb {
background: var(--color-gold);
border: 1.5px solid #f1f1f1;
}
/* Hover */
&::-webkit-scrollbar-thumb:hover {
background: var(--color-gold-deep); /* màu bạn muốn */
}
}
#pw-product-specs.is-open {
max-height: 100vh;
overflow-y: auto;
border-width: 2px;
}
#pw-product-specs div:nth-child(4n+1),
#pw-product-specs div:nth-child(4n+2) {
background-color: #f5f5f5;
}
.pw-product-specs__label {
padding: 0.5rem;
font-weight: 500;
border: 1px solid var(--color-gold);
}
.pw-product-specs__value {
padding: 0.5rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
border: 1px solid var(--color-gold);
}
.pw-product-specs__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border: 2px solid #111;
border-radius: 50%;
font-weight: 700;
font-size: 14px;
flex: 0 0 auto;
cursor: help;
}
.pw-product-summary .pw-product-specs__toggle {
display: flex;
width: 100%;
border-radius: 0 0 .5rem .5rem;
cursor: pointer;
}
.pw-product-summary .pw-product-specs__toggle::before {
content: "▼";
font-size: .5rem;
line-height: 2;
}
.pw-product-summary .pw-product-specs__toggle[aria-expanded="true"]::before {
content: "▲";
}
@media (max-width: 768px) {
.pw-product-specs__row {
grid-template-columns: minmax(0, 1fr);
}
.pw-product-specs__label {
border-right: 0;
border-bottom: 2px solid #f6c33a;
}
.pw-product-specs__value {
justify-content: flex-start;
}
}
/* ===== WooCommerce: Product gallery (Swiper) ===== */
.pw-product-gallery {
display: grid;
align-self: start;
width: 100%;
max-width: 100%;
gap: 12px;
}
.pw-product-gallery__main {
border-radius: 18px;
overflow: hidden;
background: #f4f4f4;
aspect-ratio: 1 / 1;
width: 100%;
max-width: 100%;
}
.pw-product-gallery__main .swiper-slide {
display: flex;
align-items: center;
justify-content: center;
background: #f4f4f4;
width: 100% !important;
}
.pw-product-gallery__image {
width: 100%;
height: 100%;
object-fit: contain;
}
.pw-product-gallery__thumbs {
padding: 4px 6px;
width: 100%;
max-width: 100%;
}
.pw-product-gallery__thumbs .swiper-slide {
border-radius: 12px;
overflow: hidden;
border: 1px solid rgba(0, 0, 0, 0.08);
opacity: 0.7;
cursor: pointer;
aspect-ratio: 1 / 1;
}
.pw-product-gallery__thumbs .swiper-slide-thumb-active {
opacity: 1;
border-color: var(--color-gold);
}
.pw-product-gallery__thumb {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
@media (max-width: 640px) {
.pw-product-gallery__thumbs {
padding: 0;
}
}
/* ===== WooCommerce: Product summary ===== */
.pw-product-summary {
position: relative;
}
.pw-product-summary .content {
display: grid;
gap: .5rem;
justify-content: space-between;
height: 100%;
}
.pw-product-summary .product-title {
font-size: 1.5rem;
line-height: 1.15;
margin: 0;
font-weight: 700;
color: #111;
}
.pw-product-summary .product-price {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
}
.pw-product-summary .product-price .pw-unit {
color: #111;
font-weight: 500;
}
.pw-product-summary .product-price del {
color: #8c8c8c;
font-weight: 500;
font-size: 1.2rem;
order: 2;
}
.pw-product-summary .product-price ins {
text-decoration: none;
color: #e60012;
font-weight: 700;
font-size: 1.8rem;
order: 1;
}
.pw-product-summary .product-price ins .woocommerce-Price-currencySymbol {
font-size: 1.2rem;
color: #111;
font-weight: 500;
margin-left: 0.1rem;
}
.pw-product-summary .product-price del .woocommerce-Price-amount {
text-decoration: line-through;
text-decoration-thickness: 2px;
}
.pw-product-summary .product-price del .woocommerce-Price-currencySymbol,
.pw-product-summary .product-price del .pw-unit {
color: #8c8c8c;
font-weight: 500;
}
.pw-product-summary .woocommerce-product-rating {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0;
}
.pw-product-summary .star-rating::before {
color: #f3c623;
}
.pw-product-summary .star-rating span::before {
color: #f3c623;
}
.pw-product-summary .woocommerce-product-details__short-description {
color: var(--color-gray-600);
font-size: 1.05rem;
margin: 0;
}
.pw-product-summary .woocommerce-product-details__short-description p {
margin: 0 0 0.5rem;
}
.pw-product-summary .product_meta {
display: grid;
gap: 0.5rem;
font-size: 1.05rem;
}
.pw-product-summary .product_meta > span {
display: flex;
align-items: center;
gap: 0.5rem;
font-weight: 700;
}
.pw-product-summary .product_meta > span span,
.pw-product-summary .product_meta > span a {
font-weight: 500;
color: #111;
}
.pw-product-summary .pw-cart {
display: grid;
gap: 0.75rem;
}
.pw-cart__row {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.pw-cart__label {
font-weight: 700;
}
.pw-cart__actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
align-items: center;
}
.pw-buy-now,
.pw-custom-print {
border: 2px solid var(--color-gold);
font-size: 1.1rem;
border-radius: 999px;
font-weight: 700;
gap: .5rem;
}
.pw-buy-now img,
.pw-custom-print img {
width: 20px;
height: 20px;
}
.pw-custom-print {
color: #000;
font-weight: 700;
border-radius: 999px;
padding: 0 1rem;
line-height: 2;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.pw-custom-print:hover {
background: var(--color-gold-deep);
}
/* Ensure buy-now anchor matches button appearance */
.pw-buy-now,
.button.pw-buy-now {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 1rem;
line-height: 2;
text-decoration: none;
color: inherit;
background: var(--color-gold);
border-color: var(--color-gold);
cursor: pointer;
}
.pw-buy-now:hover,
.button.pw-buy-now:hover {
background: var(--color-gold-deep);
}
/* ===== Product promotion section (admin HTML blocks) ===== */
.product-promotion .container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.product-promotion .block {
min-width: 0;
}
.product-promotion .pp-deal {
border: 1px solid #e5e5e5;
background: #fff;
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
padding: 1rem;
}
.product-promotion .pp-deal .head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 0.75rem;
}
.product-promotion .pp-deal .head .title {
font-size: 1.2rem;
font-weight: 700;
color: #e02121;
transform: scaleY(1.5);
}
.product-promotion .pp-deal .head .description {
margin: 0;
}
.product-promotion .pp-deal .head .description p {
margin: 0;
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-weight: 700;
color: #fff;
}
.product-promotion .pp-deal .head .description p span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: #e02121;
border-radius: 0.5rem;
font-size: 22px;
}
.product-promotion .pp-deal .content .banners-list {
display: grid;
gap: 1rem;
}
.product-promotion .pp-deal .banner-item {
display: grid;
grid-template-columns: 140px minmax(0, 1fr);
gap: 1rem;
align-items: center;
}
.product-promotion .pp-deal .banner-image {
width: 140px;
height: auto;
border-radius: 12px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
}
.product-promotion .pp-deal .banner-caption {
font-weight: 700;
color: #111;
font-size: 1rem;
}
.product-promotion .pp-deal .banner-caption strong {
color: #e02121;
font-size: 2rem;
}
.product-promotion .pp-deal .foot .btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 2rem;
line-height: 2;
border-radius: 999px;
background: #f7c52f;
font-weight: 700;
color: #111;
}
.product-promotion .pp-benefits {
border: 2px solid var(--header-gold);
border-radius: .5rem;
background: #fff;
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
padding: .5rem;
}
.product-promotion .pp-benefits .head .title {
display: inline-flex;
align-items: center;
gap: 0.6rem;
background: var(--color-gold);
padding: 0.4rem 0.75rem;
font-weight: 700;
font-size: 1.1rem;
margin-bottom: 0.6rem;
}
.product-promotion .pp-benefits .head .title::before {
content: "🎁";
font-size: 1.1rem;
line-height: 1;
}
.product-promotion .pp-benefits .content ul {
list-style: none;
margin: 0;
padding: 0;
}
.product-promotion .pp-benefits .content li::before {
content: "☒";
margin-right: 0.5rem;
}
@media (max-width: 900px) {
.product-promotion .pp-deal .head {
flex-direction: column;
align-items: flex-start;
}
.product-promotion .pp-deal .banner-item {
grid-template-columns: minmax(0, 1fr);
}
}
.pw-product-summary .product-description {
height: 230px;
z-index: 1;
}
.pw-product-summary .product-description__body {
position: relative;
border-radius: .5rem;
background: #fff;
}
.pw-product-summary .product-description__body:has(.is-open) {
box-shadow: -5px 5px 5px 0px #11111130;
}
.pw-product-summary .product-description .title {
padding: 0 .5rem;
line-height: 2;
border-radius: .5rem .5rem 0 0;
background: var(--color-gold);
text-align: center;
font-weight: 700;
}
.pw-product-summary__deal-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: .5rem;
margin-bottom: .5rem;
}
.pw-product-summary__deal-title {
font-size: 1rem;
font-weight: 700;
color: #e02121;
transform: scaleY(1.8);
letter-spacing: .5px;
}
.pw-product-summary__deal-timer {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-weight: 700;
color: #fff;
}
.pw-product-summary__deal-timer span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
background: #e02121;
border-radius: .5rem;
font-size: 1.2rem;
}
.pw-product-summary__deal-timer span:nth-child(2n) {
width: auto;
height: auto;
background: transparent;
color: #e02121;
font-size: 1.2rem;
}
.pw-product-summary__deal-body {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 1rem;
align-items: center;
}
.pw-product-summary__deal-icons {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: .5rem;
}
.pw-product-summary__deal-card {
width: 40px;
height: 88px;
border-radius: .5rem;
background: #f9cc1a;
display: grid;
place-items: center;
font-size: 2rem;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
}
.pw-product-summary__deal-card.is-green {
background: #0d8a61;
color: #fff;
}
.pw-product-summary__deal-plus {
position: absolute;
left: 50%;
top: 50%;
width: 20px;
height: 20px;
font-weight: 700;
border-radius: 50%;
background: #fff;
border: 2px solid #5dbb5f;
color: #1e7a35;
transform: translate(-50%, -50%);
z-index: 1;
display: grid;
place-content: center;
}
.pw-product-summary__deal-text {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
.pw-product-summary__deal-subtitle {
font-size: 1rem;
font-weight: 700;
color: #111;
}
.pw-product-summary__deal-discount {
font-size: 1.2rem;
font-weight: 700;
color: #e02121;
}
.pw-product-summary__deal-button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0rem 2rem;
line-height: 2;
border-radius: 999px;
background: #f7c52f;
font-weight: 700;
}
@media (max-width: 900px) {
.pw-product-summary__deal-head {
flex-direction: column;
align-items: flex-start;
}
.pw-product-summary__deal-body {
grid-template-columns: minmax(0, 1fr);
}
}
/* ===== WooCommerce: Product head layout (section/block) ===== */
.pw-product-head .container {
display: grid;
grid-template-columns: minmax(0, 550px) minmax(0, 1fr) minmax(0, 250px);
gap: 1rem;
align-items: stretch;
}
.pw-product-head .block {
min-width: 0;
}
.pw-product-head .pw-product-gallery {
max-width: 100%;
}
.pw-product-summary .wpcf7,
.pw-product-summary .cf7-wrap,
.pw-product-summary .codedropz-upload-handler,
.pw-product-summary .cf7-field,
.pw-product-summary .cf7-row,
.pw-product-summary .cf7-submit {
max-width: 100%;
box-sizing: border-box;
}
.pw-product-summary .wpcf7 {
width: 100%;
overflow: hidden;
}
.pw-product-summary .cf7-row {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pw-product-summary .cf7-field input,
.pw-product-summary .cf7-field textarea {
max-width: 100%;
box-sizing: border-box;
}
.pw-product-head .pw-product-info {
margin: 0;
}
.pw-product-head .pw-product-gallery__main,
.pw-product-head .pw-product-gallery__thumbs .swiper-slide,
.pw-product-head .pw-product-info__card,
.pw-product-head .pw-product-info__card--dashed,
.pw-product-head .pw-product-summary .single_add_to_cart_button {
border-radius: 0.5rem;
}
@media (max-width: 1100px) {
.pw-product-head .container {
grid-template-columns: minmax(0, 1fr);
}
}
/* ===== WooCommerce: Product info blocks ===== */
.pw-product-info__card {
background: #fff4c7;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
margin-bottom: 1rem;
}
.pw-product-info__card--dashed {
background: #fffdf4;
border: 2px dashed #f2c33a;
box-shadow: none;
}
.pw-product-info__head {
background: #f6c33a;
color: #111;
font-weight: 700;
font-size: 1.1rem;
line-height: 2rem;
text-align: center;
}
.pw-product-info__list {
list-style: none;
margin: 0;
padding: .5rem;
display: grid;
gap: .5rem;
}
.pw-product-info__list li {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.45rem;
align-items: center;
font-weight: 500;
color: #111;
}
.pw-product-info__icon {
font-size: 1.1rem;
}
.pw-product-info__content {
padding: 0.85rem 1rem 1.1rem;
}
.pw-product-info__hotline {
font-weight: 700;
font-size: 14px;
margin: 0 0 0.6rem;
}
.pw-product-info__links {
list-style: none;
margin: 0;
padding: 0;
}
.pw-product-info__links li::before {
content: ">";
margin-right: 0.5rem;
font-weight: 700;
}
/* ===== Contact box (floating) ===== */
.contact-box {
position: fixed;
left: 24px;
bottom: 24px;
z-index: 1000;
}
.contact-box > .container {
padding: 0;
margin: 0;
}
.contact-box .block--banner .content {
max-height: 0;
opacity: 0;
transform: translateY(6px);
overflow: hidden;
pointer-events: none;
visibility: hidden;
background: #fff;
border-radius: 16px;
padding: 0;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
border: 1px solid rgba(0, 0, 0, 0.08);
transition:
max-height 0.28s ease,
opacity 0.2s ease,
transform 0.28s ease,
padding 0.28s ease,
visibility 0s linear 0.28s;
}
.contact-box.is-open .block--banner .content {
max-height: 600px;
opacity: 1;
transform: translateY(0);
padding: .5rem;
pointer-events: auto;
visibility: visible;
transition-delay: 0s;
}
.contact-box.is-open {
bottom: auto;
top: 50%;
transform: translateY(-50%);
}
.contact-box .banners-list {
display: grid;
gap: 12px;
}
.contact-box .banner-item {
display: flex;
justify-content: center;
}
.contact-box .banner-link {
display: grid;
justify-items: center;
gap: 6px;
color: #444;
font-weight: 700;
font-size: 12px;
}
.contact-box .banner-image {
width: 32px;
height: 32px;
object-fit: contain;
}
.contact-box .foot {
display: flex;
justify-content: center;
margin-top: 12px;
}
.contact-box .foot .btn {
width: 58px;
height: 58px;
border-radius: 50%;
background: #d7262b;
font-size: 18px;
line-height: 1;
border: 0;
box-shadow: none;
position: relative;
text-indent: -9999px;
}
.contact-box .foot .btn::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 45px;
height: 45px;
transform: translate(-50%, -50%);
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23e3e3e3'%3E%3Cpath d='M440-120v-80h320v-284q0-117-81.5-198.5T480-764q-117 0-198.5 81.5T200-484v244h-40q-33 0-56.5-23.5T80-320v-80q0-21 10.5-39.5T120-469l3-53q8-68 39.5-126t79-101q47.5-43 109-67T480-840q68 0 129 24t109 66.5Q766-707 797-649t40 126l3 52q19 9 29.5 27t10.5 38v92q0 20-10.5 38T840-249v49q0 33-23.5 56.5T760-120H440Zm-80-280q-17 0-28.5-11.5T320-440q0-17 11.5-28.5T360-480q17 0 28.5 11.5T400-440q0 17-11.5 28.5T360-400Zm240 0q-17 0-28.5-11.5T560-440q0-17 11.5-28.5T600-480q17 0 28.5 11.5T640-440q0 17-11.5 28.5T600-400Zm-359-62q-7-106 64-182t177-76q89 0 156.5 56.5T720-519q-91-1-167.5-49T435-698q-16 80-67.5 142.5T241-462Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.contact-box .foot .btn::after {
display: none;
}
.contact-box.is-open .foot .btn {
width: 32px;
height: 32px;
background: #d7262b;
box-shadow: 0 6px 14px rgba(215, 38, 43, 0.35);
}
.contact-box.is-open .foot .btn::before,
.contact-box.is-open .foot .btn::after {
content: '';
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 16px;
height: 2px;
background: #fff;
border-radius: 2px;
transform: translate(-50%, -50%) rotate(45deg);
}
.contact-box.is-open .foot .btn::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
@media (max-width: 768px) {
.contact-box {
left: 12px;
bottom: 12px;
}
}
/* ===== Sections (header, nav, home, etc.) ===== */
/* ===== Header ===== */
.site-header {
position: relative;
top: 0;
background: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
z-index: 100001;
}
/* === Section: Header Top === */
.header-top {
background: var(--header-gray);
font-size: .9rem;
color: #111;
}
.header-top .container {
margin: 0 auto;
}
.header-top .content ul {
display: flex;
justify-content: space-between;
padding: 0;
margin: 0;
list-style: none;
font-weight: 700;
line-height: 2rem;
height: 2rem;
}
.header-top .content ul li:nth-child(2) {
position: absolute;
left: 50%;
transform: translateX(-50%);
padding: 0 1rem;
background-color: var(--color-navy);
color: var(--header-gold);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.header-top .content ul li:nth-child(2)::before,
.header-top .content ul li:nth-child(2)::after {
content: '';
position: absolute;
top: 0px;
width: 2rem;
height: 100%;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1420 1520'%3E%3Cpath d='M1230 1511c0-5-12-11-27-14-39-8-145-74-209-130-146-129-250-360-269-597-18-217-67-417-133-544-41-79-128-178-181-206C375 1 378 1 898 0h522v1520h-95c-52 0-95-4-95-9' fill='%230f1328'/%3E%3C/svg%3E") center/contain no-repeat;
}
.header-top .content ul li:nth-child(2)::before {
left: -29px;
}
.header-top .content ul li:nth-child(2)::after {
right: -29px;
transform: scaleX(-1);
}
/* === Section edit link (admin only) === */
.section .container {
position: relative;
}
.section-edit-link {
position: absolute;
top: 8px;
right: 8px;
background: rgba(0,0,0,0.65);
color: #fff;
border-radius: 50%;
width: 28px;
height: 28px;
display: grid;
place-items: center;
font-size: 14px;
text-decoration: none;
z-index: 2;
}
.section-edit-link:hover {
background: #d7a126;
color: #000;
}
@media (max-width: 1200px) {
.header-top {
display: none;
}
}
/* === Section: Header Main === */
.header-main .container{
margin: 0 auto;
padding: 2rem 1rem;
display: flex;
justify-content: center;
}
.header-main .block-search {
position: absolute;
width: 300px;;
top: 50%;
left: 1rem;
transform: translateY(-50%);
}
.header-main .block-actions {
position: absolute;
top: 50%;
right: 1rem;
transform: translateY(-50%);
}
.header-main .block-actions .banners-list {
display: flex;
gap: 1.5rem;
}
.header-main .block-actions .banner-item {
position: relative;
}
.header-main .block-actions .banner-link {
display: flex;
align-items: start;
gap: .5rem;
color: var(--color-red);
font-weight: 700;
letter-spacing: 0.2px;
text-transform: uppercase;
line-height: 1;
}
.header-main .block-actions .banner-item:nth-child(2) .banner-link {
align-items: center;
}
.header-main .block-actions .banner-link img {
width: 32px;
height: 32px;
filter: brightness(0) saturate(100%) invert(17%) sepia(96%) saturate(4335%) hue-rotate(346deg) brightness(99%) contrast(104%);
}
.header-main .block-actions .banner-caption {
position: absolute;
right: 0;
bottom: 0;
font-size: .8rem;
line-height: 1;
letter-spacing: 1.5px;
}
.header-main .block-actions .banner-caption p {
margin: 0;
}
.header-main .block-brand img {
max-width: 200px;
}
.header-search {
grid-area: search;
display: flex;
align-items: center;
width: min(420px, 100%);
height: 48px;
padding: 0 16px;
background: #e6e6e6;
border: 1px solid #d8d8d8;
border-radius: 999px;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}
.header-search input {
flex: 1;
width: 100%;
border: none;
background: transparent;
outline: none;
color: #111;
font-size: 16px;
font-weight: 500;
}
.header-search input::placeholder {
color: #666;
font-weight: 500;
}
@media (max-width: 640px) {
.header-search {
height: 52px;
}
.header-search input {
text-align: center;
}
}
.header-search__btn {
border: none;
background: none;
color: #000;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.header-search__btn svg {
width: 24px;
height: 24px;
}
.header-brand {
grid-area: brand;
display: flex;
flex-direction: column;
align-items: center;
justify-self: center;
gap: 6px;
text-decoration: none;
color: #0a0e18;
}
.header-brand__name {
font-size: 44px;
font-weight: 700;
letter-spacing: -0.5px;
}
.header-brand__name span {
color: var(--header-gold);
}
.header-brand__tagline {
text-transform: uppercase;
font-size: 13px;
letter-spacing: 3px;
font-weight: 500;
}
.header-actions {
grid-area: actions;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 14px;
}
.header-hotline {
display: inline-flex;
align-items: center;
padding-right: 0;
border-right: none;
}
.header-hotline__icon {
width: 44px;
height: 44px;
border-radius: 0;
background: transparent;
color: #e60012;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: none;
}
.header-hotline__text {
display: flex;
flex-direction: column;
line-height: 1.3;
}
.header-hotline__number {
font-weight: 700;
font-size: 16px;
}
.header-hotline__sub {
font-size: 12px;
color: #666;
}
.header-cart {
display: inline-flex;
align-items: center;
color: #e60012;
font-weight: 700;
letter-spacing: 0.2px;
text-transform: uppercase;
border-left: 1px solid var(--color-gray-300);
padding-left: 14px;
margin-left: 6px;
}
.header-cart__icon {
width: 44px;
height: 44px;
border-radius: 0;
background: transparent;
color: #e60012;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: none;
}
.header-cart__label {
font-size: 13px;
color: #444;
}
@media (max-width: 1200px) {
.header-main .container {
display: grid;
grid-template-columns: 1fr auto 1fr;
grid-template-rows: auto auto;
align-items: center;
column-gap: 1rem;
row-gap: 0.75rem;
}
.header-main .block-search {
position: static;
transform: none;
display: block;
width: 100%;
order: 3;
grid-column: 1 / -1;
}
.header-main .block-brand {
order: 1;
grid-column: 2;
display: flex;
justify-content: center;
position: static;
transform: none;
}
.header-main .block-actions {
position: static;
transform: none;
order: 2;
grid-column: 3;
justify-self: end;
}
.header-search {
width: 100%;
max-width: 100%;
}
.header-main .block-brand img {
max-width: 150px;
}
.header-main .block-actions .banner-item:not(:last-child) {
display: none;
}
.header-main .block-actions .banner-link span,
.header-main .block-actions .banner-caption {
display: none;
}
}
@media (max-width: 992px) {
.header-main .block-actions .banner-link span,
.header-main .block-actions .banner-caption {
display: none;
}
}
/* === Countdown === */
.pw-countdown {
display: flex;
align-items: center;
justify-content: center;
gap: .5rem;
}
.pw-countdown__segment {
display: grid;
justify-items: center;
gap: .25rem;
}
.pw-countdown__value {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 52px;
height: 44px;
padding: 0 .5rem;
background: #e11f26;
color: #fff;
font-weight: 700;
font-size: 1.25rem;
border-radius: .35rem;
letter-spacing: 0.5px;
}
.pw-countdown__label {
font-size: 0.7rem;
text-transform: uppercase;
font-weight: 700;
color: #111;
}
.pw-countdown__separator {
color: #e11f26;
font-weight: 700;
font-size: 1.25rem;
line-height: 1;
margin-top: -12px;
}
/* === Section: Header Nav === */
.header-nav {
background: var(--header-navy);
}
.header-nav .container {
margin: 0 auto;
}
.header-nav__list {
list-style: none;
display: flex;
align-items: center;
justify-content: space-around;
gap: 20px;
padding: 14px 0;
margin: 0;
}
.header-nav__list a {
color: var(--header-gold);
font-weight: 700;
letter-spacing: 0.3px;
text-transform: uppercase;
font-size: 18px;
}
.header-nav__list a:hover,
.header-nav__list li.active a {
color: var(--header-gray);
}
.header-nav .block-nav .description a[href^="#toggle-"] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 7h16a1 1 0 100-2H4a1 1 0 100 2zm0 6h16a1 1 0 100-2H4a1 1 0 100 2zm0 6h16a1 1 0 100-2H4a1 1 0 100 2z'/%3E%3C/svg%3E");
text-indent: -999px;
display: block;
width: 40px;
height: 40px;
}
.header-nav .block-nav .description {
display: none;
}
@media (max-width: 1200px) {
.header-nav {
background: none;
}
.header-nav .container {
position: static;
}
.header-nav .block-nav .head {
position: absolute;
top: 2rem;
left: 1rem;
transform: none;
}
.header-nav__list {
flex-direction: column;
justify-content: flex-start;
gap: 0;
padding: 0;
margin: 0;
width: 100%;
}
.header-nav__list li {
width: 100%;
}
.header-nav__list a {
display: block;
width: 100%;
padding: 16px 18px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.header-nav .block-nav .description {
display: block;
}
.header-nav .block-nav .content {
position: fixed;
inset: 0;
display: flex;
background: var(--header-navy);
transform: translateX(-100%);
transition: transform 0.3s ease;
width: 100%;
max-width: 320px;
}
.header-nav .block-nav.is-open .content {
transform: translateX(0);
transition: transform 0.3s ease;
}
}
.header-nav .block-submenu {
background: #fff;
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
border-bottom-left-radius: .5rem;
border-bottom-right-radius: .5rem;
overflow: hidden;
position: absolute;
font-size: 14px;
line-height: 1.35;
height: 0;
width: 100%;
&.is-open {
height: calc(440px + 2rem);
transition: height 0.3s ease;
}
a > span.pw-menu-item-title {
font-weight: 500;
}
a:hover > span.pw-menu-item-title {
color: var(--color-red)!important;
}
.content {
margin: 1rem;
padding-left: calc(300px + 4rem);
height: 440px;
overflow-y: scroll;
/* Track */
&::-webkit-scrollbar {
width: .5rem;
box-sizing: border-box;
}
/* Nền phía sau */
&::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Thanh kéo */
&::-webkit-scrollbar-thumb {
background: var(--color-gold);
border: 1.5px solid #f1f1f1;
}
/* Hover */
&::-webkit-scrollbar-thumb:hover {
background: var(--color-gold-deep); /* màu bạn muốn */
}
.pw-menu-item-info {
position: absolute;
top: 0;
bottom: 0rem;
left: 0;
padding: 1rem 1rem 1rem 2rem;
margin-right: 1rem;
width: 300px;
background: var(--color-gold);
box-sizing: content-box;
p.pw-menu-item-title {
text-align: center;
font-weight: 700;
}
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
ul.shortcode-menu {
column-count: 4;
gap: 2rem;
> li {
break-inside: avoid;
margin-bottom: 1.5rem;
> a > span.pw-menu-item-title {color: var(--color-gold-deep); font-weight: 700; }
ul.sub-menu {
display: flex;
flex-direction: column;
gap: .5rem;
margin-top: .5rem;
}
}
}
}
}
/* === Section: Home Slider === */
.home-slider .container {
max-width: 100%;
margin-top: 0;
}
.home-slider .swiper-button-prev,
.home-slider .swiper-button-next,
.home-slider .swiper-scrollbar {
display: none;
}
.home-slider .banner-item img {
margin: 0 auto;
}
/* === Section: Home USP === */
.home-usp .banner-item {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
}
.home-usp .swiper-button-prev,
.home-usp .swiper-button-next,
.home-usp .swiper-scrollbar {
display: none;
}
.home-usp strong {
font-weight: 700;
}
/* === Section: Home Services === */
.home-services .banner-item {
position: relative;
}
.home-services .banner-item .banner-caption {
position: absolute;
inset: 0;
padding: 1.5rem 2rem 1.5rem 3rem;
color: #fff;
background: rgba(0, 0, 0, 0.3);
display: flex;
flex-direction: column;
justify-content: space-between;
}
.home-services .banner-item .banner-caption::before {
content: '';
background: #fff;
width: 2px;
height: 58px;
position: absolute;
left: 2rem;
top: 1.5rem;
}
.home-services .banner-item .banner-caption p {
margin: 0;
}
.home-services .banner-item .banner-caption strong {
font-size: 1.5rem;
letter-spacing: 0.2px;
}
.home-services .banners-list {
overflow: hidden;
}
.home-services .swiper {
overflow: visible;
}
.home-services .swiper-pagination,
.home-services .swiper-scrollbar {
display: none;
}
.home-services .swiper-button-prev,
.home-services .swiper-button-next {
margin: 0;
width: 48px;
height: 48px;
top: 50%;
transform: translateY(-50%);
background: transparent;
box-shadow: none;
}
.home-services .swiper-button-prev {
left: -38px;
}
.home-services .swiper-button-next {
right: -38px;
}
.home-services .swiper-button-prev::after,
.home-services .swiper-button-next::after {
content: '';
display: block;
width: 48px;
height: 48px;
margin: auto;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='%230f172a' d='M199.7 299.8C189.4 312.4 190.2 330.9 201.9 342.6L329.9 470.6C339.1 479.8 352.8 482.5 364.8 477.5C376.8 472.5 384.6 460.9 384.6 447.9L384.6 191.9C384.6 179 376.8 167.3 364.8 162.3C352.8 157.3 339.1 160.1 329.9 169.2L201.9 297.2L199.7 299.6z'/%3E%3C/svg%3E");
}
.home-services .swiper-button-next::after {
transform: rotate(180deg);
}
.home-services .swiper-button-prev:hover::after,
.home-services .swiper-button-next:hover::after {
opacity: .6;
}
@media (max-width: 767px) {
.home-services .swiper-button-prev,
.home-services .swiper-button-next {
display: none;
}
}
/* === Section: Home Product Categories === */
.home-product-cat .content {
position: relative;
}
.home-product-cat .content::before {
content: '';
position: absolute;
top: 0;
width: 100%;
height: 2px;
background: linear-gradient(
90deg,
#00c4cc 0% 20%,
#f5b700 20% 50%,
#f48fb1 50% 70%,
#4caf50 70% 100%
);
border-radius: 2px;
}
.home-product-cat .head .title {
color: #00787d;
text-transform: uppercase;
font-size: 1.2rem;
font-weight: 500;
margin-top: 2rem;
margin-bottom: 0;
padding-bottom: .5rem;
line-height: 2rem;
padding: 0 .5rem;
}
.home-product-cat ul.shortcode-menu {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
justify-content: space-between;
font-size: .9rem;
text-align: center;
list-style: none;
padding: 0;
}
.home-product-cat ul.shortcode-menu li {
border: 1px solid var(--header-gray);
padding: .25rem;
}
.home-product-cat ul.shortcode-menu li a {
display: flex;
flex-direction: column;
gap: .5rem;
padding: .5rem 0;
align-items: center;
}
.home-product-cat ul.shortcode-menu li a img {
width: 80px;
height: 80px;
object-fit: cover;
border-radius: .5rem;
}
.home-product-cat ul.shortcode-menu li a .pw-menu-item-info .pw-menu-item-title {
display: none;
}
@media (max-width: 767px) {
.home-product-cat .head .title {
display: inline-flex;
gap: .5rem;
align-items: center;
font-weight: 700;
background-color: var(--header-gold);
color: var(--color-text-main);
}
.home-product-cat .head .title::before {
content: url('data:image/svg+xml,');
width: 25px;
height: 18px;
}
.home-product-cat .content::before {
display: none;
}
.home-product-cat ul.shortcode-menu {
grid-template-columns: repeat(3, 1fr);
}
.home-product-cat ul.shortcode-menu li:nth-child(n + 7) {
display: none;
}
}
/* === Section: Home Form Features === */
.home-form-features .container {
position: relative;
}
@media (max-width: 767px) {
.home-form-features .container {
margin-top: 1.5rem;
}
}
/* === Section: Home HBanner === */
.home-hbanner img {
width: 100%;
height: auto;
}
/* === Section: Home List Posts === */
.home-list-posts .block--list_posts {
position: absolute;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease;
}
.home-list-posts .block--list_posts.is-open {
position: relative;
opacity: 1;
visibility: visible;
transition: opacity 0.4s ease;
}
.home-list-posts .block--list_posts .posts-list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
margin-top: 2rem;
}
.home-list-posts .block--list_posts .foot {
margin-top: 2rem;
text-align: center;
}
.home-list-posts .block--list_posts .foot a {
display: inline-block;
background: var(--color-dark-ink);
color: var(--color-gold);
padding: 0 1rem;
border-radius: .5rem;
line-height: 2rem;
font-weight: 700;
text-transform: uppercase;
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}
@media (max-width: 991px) {
.home-list-posts .block--list_posts .posts-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.5rem;
}
}
@media (max-width: 640px) {
.home-list-posts .block--list_posts .posts-list {
grid-template-columns: 1fr;
gap: 1rem;
}
}
/* === Block: Navigation (Home List Posts) === */
.home-list-posts .block-nav .description {
display: none;
}
.home-list-posts .block-nav .description a[href^="#toggle-"] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
text-indent: -9999px;
overflow: hidden;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fec935' d='M4 7h16a1 1 0 100-2H4a1 1 0 100 2zm0 6h16a1 1 0 100-2H4a1 1 0 100 2zm0 6h16a1 1 0 100-2H4a1 1 0 100 2z'/%3E%3C/svg%3E");
}
.home-list-posts .block-nav .head .title {
text-align: center;
}
.home-list-posts .block-nav .head .title a {
position: relative;
font-size: 2rem;
letter-spacing: 1px;
font-weight: 700;
margin: 0;
padding-bottom: .5rem;
text-align: center;
}
.home-list-posts .block-nav .head .title a::before {
content: url('data:image/svg+xml,');
background: #fff;
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 25px;
height: 38px;
bottom: -18px;
z-index: -1;
}
.home-list-posts .block-nav .head .title a::after {
content: '';
position: absolute;
width: 260px;
left: 50%;
transform: translateX(-50%);
height: 2px;
background: var(--header-gold);
bottom: -5px;
z-index: -2;
}
.home-list-posts .block-nav .content ul {
display: flex;
justify-content: center;
gap: 2rem;
list-style: none;
margin-top: 2rem;
padding: 0;
}
.home-list-posts .block-nav .content ul a {
position: relative;
display: block;
font-weight: 500;
width: 200px;
padding: .25rem .5rem;
border: 1px solid var(--text-main);
border-radius: .5rem;
text-align: center;
}
.home-list-posts .block-nav .content ul a.active {
background: var(--header-navy);
color: var(--header-gold);
}
.home-list-posts .block-nav .content ul a.active::before {
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 100%;
border-left: 35px solid transparent;
border-right: 35px solid transparent;
border-top: 10px solid var(--header-navy);
}
@media (max-width: 992px) {
.home-list-posts .block-nav .description {
display: block;
}
.home-list-posts .block-nav .head .title a {
display: flex;
align-items: center;
gap: .5rem;
font-size: 1.5rem;
background: var(--color-navy);
color: var(--header-gold);
padding: 0 .5rem;
line-height: 2.5rem;
}
.home-list-posts .block-nav .head .title a::before {
position: static;
transform: none;
background: none;
width: 2rem;
height: 1.5rem;
z-index: 1;
}
.home-list-posts .block-nav .head .title a::after {
display: none;
}
.home-list-posts .block-nav .head .title {
position: relative;
}
.home-list-posts .block-nav .head .description {
display: inline-flex;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
color: var(--header-gold);
border-radius: 50%;
}
.home-list-posts .block-nav {
position: relative;
}
.home-list-posts .block-nav .content {
position: absolute;
top: 100%;
right: 0;
max-height: 0;
overflow: hidden;
background: #fff;
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
transition: max-height 0.3s ease;
z-index: 1;
border-bottom-left-radius: .5rem;
border-bottom-right-radius: .5rem;
}
.home-list-posts .block-nav .content ul {
flex-direction: column;
gap: .5rem;
margin: 0;
justify-content: start;
padding: .5rem;
}
.home-list-posts .block-nav.is-open .content {
max-height: 100vh;
}
.home-list-posts .block-nav .content ul a {
width: 100%;
}
.home-list-posts .block-nav .content ul a.active::before {
display: none;
}
}
/* === Block: Footer Business === */
.block-footer-business .title {
font-size: 1.4rem;
text-align: center;
margin-bottom: 0;
}
.block-footer-business .description {
font-size: 12px;
}
.block-footer-business .description p {
margin: 0;
}
/* === Block: Footer Menu === */
.block-footer-menu .content ul {
padding-left: 10px;
margin: 0;
}
.block-footer-menu .content ul a {
display: block;
padding: .25rem 0;
}
/* === Block: HFF Form === */
.hff-form {
position: absolute;
width: 28%;
border: 2px solid var(--header-gold);
padding: .25rem;
background: #fff;
z-index: 1;
}
.hff-form .banner-caption {
margin-top: .5rem;
}
/* === Block: HFF Features === */
.hff-features {
margin-left: calc(28% + 2rem);
}
@media (max-width: 992px) {
.hff-form {
width: 45%;
}
.hff-features {
margin-left: calc(45% + 1rem);
}
}
@media (max-width: 768px) {
.hff-form {
position: static;
width: 100%;
max-width: 100%;
margin: 0 0 1.25rem;
}
.hff-form .banners-list {
display: block;
}
}
.hff-features .head .title {
font-size: 1.2rem;
font-weight: 500;
background-color: var(--header-gold);
margin: 0;
display: inline-block;
text-transform: uppercase;
text-align: center;
line-height: 2rem;
padding: 0 .5rem;
min-width: 33.33%;
}
.hff-features .banners-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem 1rem;
margin-top: 2rem;
}
@media (max-width: 992px) {
.hff-features .banners-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
}
.hff-features .banner-title {
display: block;
margin-top: .5rem;
font-weight: 500;
}
.hff-features .banner-title::before {
content: "";
display: inline-block;
width: 18px;
height: 18px;
margin-right: 0.5rem;
vertical-align: -2px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230b0f24' d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1.003 1.003 0 0 0 0-1.42l-2.34-2.34a1.003 1.003 0 0 0-1.42 0l-1.83 1.83 3.75 3.75 1.84-1.82z'/%3E%3C/svg%3E");
background-position: left center;
background-repeat: no-repeat;
background-size: contain;
}
@media (max-width: 767px) {
.hff-features {
margin-left: 0;
}
.hff-features .head .title {
display: inline-flex;
align-items: center;
gap: .5rem;
font-weight: 700;
min-width: unset;
}
.hff-features .head .title::before {
content: url('data:image/svg+xml,');
width: 25px;
height: 18px;
}
}
/* === Block: Testimonials === */
.home-testimonials {
background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.04), transparent 35%), #0c0f1f;
color: #f7f7f7;
}
.home-testimonials .container {
padding: 2rem;
margin-top: 0;
}
.home-testimonials .block--banner {
background: transparent;
text-align: center;
}
.home-testimonials .head {
margin-bottom: 18px;
}
.home-testimonials .head .title {
color: #f7f7f7;
font-size: 26px;
font-weight: 700;
position: relative;
display: inline-block;
padding: 0 24px;
}
.home-testimonials .head .title::before {
content: '';
position: absolute;
top: 50%;
width: 40px;
height: 2px;
background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(236, 150, 62, 0.8));
}
.home-testimonials .head .title::before {
left: -48px;
transform: translateY(-50%) scaleX(-1);
}
.home-testimonials .head .title::after {
right: -48px;
transform: translateY(-50%);
}
.home-testimonials .head .description {
margin-top: 8px;
color: #f7f7f7;
font-size: 15px;
}
.home-testimonials .swiper {
padding-top: 1rem;
padding-bottom: 180px;
}
.home-testimonials .banner-item {
padding: 1.2rem;
}
.home-testimonials .banner-item img {
object-fit: cover;
box-shadow: -5px 5px 2px 4px rgb(255 255 255);
border-top-left-radius: 2rem;
border-bottom-right-radius: 2rem;
transform: translateX(5px);
}
.home-testimonials .banner-caption {
position: absolute;
top: calc(100% + 1rem);
left: 50%;
transform: translateX(-50%);
width: 200%;
opacity: 0;
}
.home-testimonials .swiper-slide-active .banner-caption {
opacity: 1;
transition: opacity 0.3s ease;
}
.home-testimonials .swiper-button-next,
.home-testimonials .swiper-button-prev {
color: #f0f0f0;
width: 38px;
height: 38px;
border: 2px solid rgba(255, 255, 255, 0.6);
border-radius: 50%;
background: rgba(0, 0, 0, 0.35);
backdrop-filter: blur(2px);
transition: all 0.2s ease;
}
.home-testimonials .swiper-button-next:hover,
.home-testimonials .swiper-button-prev:hover {
border-color: #f6a623;
color: #f6a623;
background: rgba(0, 0, 0, 0.55);
}
.home-testimonials .swiper-button-next:after,
.home-testimonials .swiper-button-prev:after {
font-size: 18px;
font-weight: 700;
}
.home-testimonials .swiper-pagination {
display: none;
}
@media (max-width: 991px) {
.home-testimonials {
padding: 48px 0 56px;
}
.home-testimonials .head .title {
font-size: 22px;
}
.home-testimonials .swiper {
padding: 10px 24px 24px;
}
}
@media (max-width: 640px) {
.home-testimonials .banner-item {
border-radius: 14px;
}
.home-testimonials .head .title {
font-size: 20px;
}
.home-testimonials .head .title::after {
display: none;
}
.home-testimonials .swiper-button-next {
width: 32px;
height: 32px;
}
}
/* === Block: Benefits & FAQs === */
.home-benefits-faqs {
background: #0f1328;
}
.home-benefits-faqs .container {
padding: 2rem;
color: #f4f6ff;
display: grid;
gap: 32px 48px;
grid-template-columns: repeat(2, minmax(0, 1fr));
margin-bottom: 0;
}
.home-benefits-faqs .block--html {
background: transparent;
}
.home-benefits-faqs .head .title {
color: var(--color-gold);
font-size: 1.5rem;
font-weight: 700;
border-bottom: 3px solid var(--color-gold);
display: inline-block;
padding-bottom: 6px;
margin-bottom: 20px;
}
.home-benefits-faqs .content ul {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 14px;
}
.home-benefits-faqs .content li {
display: flex;
align-items: center;
gap: 12px;
}
.home-benefits-faqs .benefits li::before {
content: '';
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--color-gold);
flex: 0 0 auto;
}
.home-benefits-faqs .faqs li::before {
content: '+';
width: 22px;
height: 22px;
background: var(--color-gold);
border-radius: 4px;
display: grid;
place-items: center;
color: var(--color-dark-ink);
font-weight: 700;
line-height: 1;
flex: 0 0 auto;
margin-top: 2px;
}
@media (max-width: 900px) {
.home-benefits-faqs .container {
grid-template-columns: 1fr;
}
.home-benefits-faqs {
padding: 48px 0;
}
}
/* === WooCommerce: Product Specs === */
.pw-product-specs__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
margin-left: 6px;
border-radius: 50%;
background: #1e8e3e;
color: #fff;
font-size: 11px;
line-height: 1;
cursor: help;
}
.pw-product-tooltip {
position: fixed;
z-index: 9999;
max-width: 260px;
background: #23282d;
color: #fff;
padding: 6px 8px;
border-radius: 4px;
font-size: 12px;
line-height: 1.3;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
opacity: 0;
pointer-events: none;
transition: opacity 0.12s ease;
}
.pw-product-tooltip.is-visible {
opacity: 1;
}
.pw-product-tooltip::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: #23282d;
}
/* Add-to-cart popup section */
.pw-add-to-cart-popup {
background: linear-gradient(180deg, #fff 0%, #fff 100%);
border-top: 6px solid var(--color-gold);
padding: 2rem 0 3rem;
}
.pw-add-to-cart-inner {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 2rem;
align-items: stretch;
}
.pw-add-to-cart-left .pw-promo img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 12px;
box-shadow: 0 8px 30px rgba(15,19,40,0.08);
}
.pw-add-to-cart-right {
border: 2px solid var(--header-gold);
border-radius: 1rem;
overflow: hidden;
}
.pw-form-title {
margin: 0;
padding-left: 1rem;
font-size: 1.2rem;
line-height: 1.5;
background-color: var(--header-gold);
color: var(--color-dark-ink);
}
.pw-quick-quote {
padding: .5rem 1rem;
}
.pw-quick-quote .pw-row {
display: flex;
gap: .5rem;
margin-bottom: .5rem;
}
.pw-quick-quote input,
.pw-quick-quote select,
.pw-quick-quote textarea {
flex: 1 1 0;
border: 2px solid var(--header-gold);
}
.pw-quick-quote textarea { border-radius: 12px; padding: .5rem .75rem; height: auto; }
.pw-actions {
display: flex;
gap: .75rem;
margin-top: .75rem;
}
.pw-actions .btn-ghost {
background: transparent;
border: 2px solid var(--color-red);
color: var(--color-red);
}
.pw-actions .btn-primary {
background: var(--color-red);
color: #fff;
}
@media (max-width: 900px) {
.pw-add-to-cart-inner { grid-template-columns: 1fr; }
.pw-quick-quote .pw-row { flex-direction: column; }
}
/* Popup/backdrop behaviour */
.pw-atc-backdrop {
position: fixed;
inset: 0;
display: none;
align-items: center;
justify-content: center;
background: rgba(0,0,0,0.45);
z-index: 9998;
padding: 1rem;
}
.pw-atc-backdrop.is-open { display: flex; }
.pw-atc-popup {
max-width: 1100px;
width: 100%;
border-radius: 14px;
box-shadow: 0 20px 60px rgba(0,0,0,0.25);
transform: translateY(0);
}
.pw-atc-close {
position: absolute;
right: 1rem;
top: 1rem;
background: rgba(0,0,0,0.06);
border: none;
font-size: 1.25rem;
line-height: 1;
width: 36px;
height: 36px;
border-radius: 999px;
cursor: pointer;
}
/* Attribute sections inside add-to-cart popup */
.pw-attr-title {
margin-bottom: .5rem;
font-weight: 700;
color: var(--color-dark-ink);
}
.pw-attribute-defaults,
.pw-attribute-optionals {
margin-bottom: 1rem;
}
.pw-attribute-defaults .pw-row {
display: flex;
gap: 0.75rem;
align-items: center;
margin-bottom: 0; /* no spacing between default rows */
}
.pw-attribute-optionals .pw-row {
display: flex;
gap: 0.75rem;
align-items: center;
margin-bottom: 0.5rem;
}
.pw-row .pw-label {
min-width: 160px;
color: var(--color-gray-700);
font-weight: 500;
}
.pw-row .pw-field {
flex: 1 1 0;
}
.pw-attribute-optionals .pw-field select,
.pw-quick-quote .pw-row .pw-field select {
border-radius: 999px;
padding: 0 .5rem;
font-size: 1rem;
height: 1.5rem;
width: 100%;
border: 2px solid var(--header-gold);
outline: none;
}
/* Quantity buttons style */
.pw-qty-buttons {
display: inline-flex;
gap: 0;
align-items: center;
border-radius: 999px;
overflow: hidden;
border: 2px solid var(--header-gold);
background: #fff;
}
.pw-qty-buttons .pw-qty-btn {
background: transparent;
color: var(--color-navy);
height: 24px;
width: 24px;
border-radius: 0;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-weight:700;
}
.pw-qty-buttons .pw-qty-btn:hover, .pw-qty-buttons .pw-qty-btn:focus { background: var(--header-gold); color: #000; }
.pw-qty-buttons input[type="number"] {
width: 38px;
height: 24px;
text-align: center;
border: 0;
padding: 0 .3rem;
-moz-appearance: textfield;
background: transparent;
}
.pw-qty-buttons input[type="number"]::-webkit-outer-spin-button,
.pw-qty-buttons input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Make inputs full width and tidy spacing on small screens */
@media (max-width: 900px) {
.pw-row .pw-label {
min-width: 0;
width: 100%;
font-size: 0.95rem;
}
.pw-attribute-defaults .pw-row,
.pw-attribute-optionals .pw-row {
flex-direction: column;
align-items: stretch;
}
.pw-static-value { width: 100%; }
}
/* Small-screen tweaks to prevent cart table overflow and keep qty controls compact */
@media (max-width: 991px) {
.product-quantity { min-width: auto; }
.pw-qty-btn { width: 20px; height: 20px; font-size: 0.6rem; }
.pw-qty-buttons input[type="number"] { width: 32px; }
}
/* ===== Taxonomy term description + TOC styles (optimized, preserve visuals) ===== */
.block-toc {
text-align: center;
margin: 0 0 1rem 0;
position: relative;
}
/* Toggle header (pill) */
.toc-toggle {
display: inline-block;
border: 1px solid var(--color-gray-300);
border-radius: 8px;
padding: 0.5rem 0.65rem;
background: #fff;
}
button.toc-toggle-btn {
display: inline-flex;
align-items: center;
gap: .5rem;
border: 0;
background: transparent;
padding: 0;
cursor: pointer;
font-size: 1rem;
color: var(--color-dark-ink);
transition: all .18s ease;
}
button.toc-toggle-btn:hover,
button.toc-toggle-btn:focus {
outline: none;
background: none;
}
.toc-toggle-icon {
display: flex;
align-items: center;
justify-content: center;
}
.toc-toggle-icon svg { display:block; width:18px; height:18px; }
/* Open state (yellow pill) */
.toc-toggle-btn.is-open .toc-toggle-label { color: #111; }
.toc-toggle-btn.is-open .toc-toggle-icon { background: #fff; border-color: #fff; color: var(--color-dark-ink); }
.toc-toggle-btn.is-open .toc-toggle-icon svg rect { fill: currentColor; }
/* TOC panel (boxed, scrollable) */
.toc-panel {
box-sizing: border-box;
max-width: 55vw;
width: max-content;
height: 85vh;
overflow: auto;
margin: .6rem auto 0;
text-align: left;
padding: .6rem .8rem;
border: 1px solid var(--color-gray-300);
background: #fff;
border-radius: 6px;
}
.toc-panel[aria-hidden="true"]{ display:none; }
/* Numbered nested TOC (levels 2-4) */
.toc-panel .toc-list{ counter-reset:h2counter; margin:0; padding:0; list-style:none; }
.toc-panel .toc-list > li{ list-style:none; }
.toc-panel .toc-list li{ display:block; break-inside:avoid; margin:.25rem 0; }
.toc-panel .toc-list li.toc-level-2{ counter-increment:h2counter; counter-reset:h3counter; margin:.6rem 0; }
.toc-panel .toc-list li.toc-level-2 > a{ display:block; font-weight:800; color:var(--color-dark-ink); font-size:1rem; text-align:left; white-space:normal; word-break:break-word; }
.toc-panel .toc-list li.toc-level-2 > a::before{ content: counter(h2counter) ". "; color:#9aa0a6; font-weight:700; margin-right:.4rem; }
.toc-panel .toc-list li.toc-level-3{ counter-increment:h3counter; counter-reset:h4counter; margin:.25rem 0; }
.toc-panel .toc-list li.toc-level-3 > a{ display:block; font-weight:700; color:#333; text-align:left; white-space:normal; }
.toc-panel .toc-list li.toc-level-3 > a::before{ content: counter(h2counter) "." counter(h3counter) ". "; color:#a7adb1; margin-right:.45rem; font-weight:600; }
.toc-panel .toc-list li.toc-level-4{ counter-increment:h4counter; margin:.15rem 0; }
.toc-panel .toc-list li.toc-level-4 > a{ display:block; font-weight:600; color:#555; text-align:left; white-space:normal; }
.toc-panel .toc-list li.toc-level-4 > a::before{ content: counter(h2counter) "." counter(h3counter) "." counter(h4counter) ". "; color:#b8bfc3; margin-right:.35rem; font-weight:600; }
/* Fallback nested UL styling */
.toc-panel .toc-list ul{ list-style:disc; margin:.25rem 0 0 1.2rem; padding:0; }
.toc-panel .toc-list ul li{ margin:.15rem 0; }
/* Pills variant for short lists */
.toc-panel.pills .toc-list{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; }
.toc-panel.pills .toc-item a{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; border:2px solid var(--color-red); color:var(--color-red); background:#fff; font-weight:700; font-size:.95rem; }
.toc-panel.pills .toc-item a:hover, .toc-panel.pills .toc-item a:focus{ background:var(--color-red); color:#fff; border-color:var(--color-red); }
/* Responsive */
@media (max-width:900px){ .toc-panel{ max-width:100%; width:100%; height:auto; } .toc-panel .toc-list{ column-count:1; } .toc-panel .toc-list li.toc-level-2 > a{ font-size:1rem; } }
/* Desktop sticky / absolute toggle */
@media (min-width:1000px){
#primary-content > .container, #term-desc > .container{ position:relative; }
#primary-content > .container > .block-toc, #term-desc > .container > .block-toc{ position:sticky; top:1rem; width:auto; z-index:5; align-self:flex-start; }
#primary-content > .container .toc-toggle, #term-desc > .container .toc-toggle{ position:absolute; left: -200px; z-index:10; }
#primary-content > .container > .block-term-desc, #term-desc > .container > .block-term-desc{ margin-left: 0; }
/* When there's no left sidebar, keep term content padded from the left
so the absolute toc-toggle (left: -200px) doesn't overlap content. */
#term-desc > .container { padding-left: 200px; }
/* If a left sidebar is present (aside.sidebar--left before main), remove padding. */
.sidebar--left + main #term-desc > .container { padding-left: 0; }
}
@media (max-width:999px){ #primary-content > .container > .block-toc, #term-desc > .container > .block-toc{ position:static; } #primary-content > .container > .block-term-desc, #term-desc > .container > .block-term-desc{ margin-left:0; } }
/* Toggle preview for taxonomy term description */
.block-term-desc .term-description {
--pw-description-max-height: 520px;
position: relative;
max-height: var(--pw-description-max-height);
overflow: hidden;
}
.block-term-desc.is-expanded .term-description {
max-height: none;
}
.block-term-desc.is-expanded .term-description::after {
display: none;
}
/* Center page title (archive title) similar to screenshot */
.archive-title,
.page-title,
.woocommerce-products-header__title {
text-align: center;
font-size: 1.35rem;
font-weight: 800;
color: var(--color-dark-ink);
margin-bottom: 1rem;
}
@media (max-width: 900px) {
.block-term-desc .term-description { padding: 1rem; font-size: 14px; }
}
@media (max-width: 520px) {
.block-term-desc .term-description::after { height: 120px; }
}
/* Pagination: circular numbered buttons like design */
.woocommerce-pagination{ display:flex; justify-content:center; margin:1.5rem 0 2rem; }
.woocommerce-pagination .page-numbers{ display:flex; gap:0.75rem; list-style:none; margin:0; padding:0; align-items:center; }
.woocommerce-pagination .page-numbers li{ margin:0; }
.woocommerce-pagination .page-numbers a,
.woocommerce-pagination .page-numbers span.page-numbers{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; border:2px solid var(--color-red); color:var(--color-red); background:transparent; text-decoration:none; font-weight:800; }
.woocommerce-pagination .page-numbers a:hover,
.woocommerce-pagination .page-numbers a:focus{ background:var(--color-red); color:#fff; border-color:var(--color-red); outline: none; }
.woocommerce-pagination .page-numbers span.current{ background:var(--color-red); color:#fff; border-color:var(--color-red); }
.woocommerce-pagination .page-numbers a.prev,
.woocommerce-pagination .page-numbers a.next{ width:32px; height:32px; font-weight:700; }
@media (max-width:520px){
.woocommerce-pagination .page-numbers a,
.woocommerce-pagination .page-numbers span.page-numbers{ width:32px; height:32px; }
.woocommerce-pagination{ margin:1rem 0; }
}
ul.products.columns-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
}