/* css/header.css: Top bar, header (logo, menu, tìm kiếm, giỏ hàng, tài khoản), dropdown.
Giao diện mới ngày 08/10/2026. Cấu trúc HTML: template-parts/header/header-main.php và inc/header.php.
Ghi chú: CSS Customizer của Flatsome nạp SAU file này nên các luật ghi đè Theme Options dùng #top-bar / #masthead
(độ ưu tiên id) hoặc !important khi Flatsome cũng dùng !important. */
/* ==========================================================================
Icon dùng làm mặt nạ (mask) tô bằng màu chữ: bộ viền mảnh (stroke 1.8, viewBox 24) và icon nhà đặc.
========================================================================== */
:root {
/* Thanh trên cùng và dải bản quyền cuối trang: đối xứng, hai mép xanh navy, giữa sáng nhẹ (dải mỏng trải rộng nên
dải một chiều trái sang phải nhìn lệch một đầu; đối xứng nhìn cân và tự nhiên hơn trên mọi bề rộng màn hình). */
--an-topbar-bg: #0052cc;
--an-accent-line: linear-gradient(90deg, var(--an-brand), var(--an-accent));
--an-icon-news: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 3l-1.67 1.67L18.67 3 17 4.67 15.33 3l-1.66 1.67L12 3l-1.67 1.67L8.67 3 7 4.67 5.33 3 3.67 4.67 2 3v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V3zM11 19H4v-6h7v6zm9 0h-7v-2h7v2zm0-4h-7v-2h7v2zm0-4H4V8h16v3z'/%3E%3C/svg%3E");
--an-icon-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E");
--an-icon-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z'/%3E%3C/svg%3E");
--an-icon-cart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 8h13l1 12h-15l1-12z'/%3E%3Cpath d='M9 10V7a3 3 0 0 1 6 0v3'/%3E%3C/svg%3E");
--an-icon-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}
/* ==========================================================================
TOP BAR: nền xanh thương hiệu, cao 44px, chữ trắng 14px/500
========================================================================== */
#top-bar {
min-height: 44px;
/* Theme Options đặt .header-top{background-color:#1e73be!important} nên phải !important. */
background: var(--an-topbar-bg) !important;
color: #fff;
font-size: 14px;
}
#top-bar .flex-row {
position: relative;
min-height: 44px;
}
#top-bar .top-nav {
font-size: 0; /* bỏ khoảng trắng giữa các li inline-block */
display: inline-block;
vertical-align: middle;
list-style: none;
margin: 0 32px 0 0;
}
#top-bar .top-nav li {
display: inline-block;
vertical-align: middle;
position: relative;
margin: 0;
font-size: 14px;
}
/* Đường kẻ đứng mờ giữa các mục top bar */
#top-bar .top-nav li + li:before {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 1px;
height: 16px;
margin-top: -8px;
background: rgba(255, 255, 255, 0.35);
}
#top-bar .top-nav li a,
#top-bar .h-time {
color: #fff;
font-size: 14px;
font-weight: 500;
letter-spacing: 0;
}
#top-bar .top-nav li a {
display: block;
line-height: 20px;
padding: 10px 22px;
transition: var(--an-transition-fast);
}
#top-bar .top-nav li:first-child a {
padding-left: 10px;
}
#top-bar .top-nav li:hover > a {
color: #dbeafe;
}
/* Icon trước "Tin Tức", Hotline và ngày giờ */
#top-bar .top-nav li:nth-child(1) a,
#top-bar .top-nav li:nth-child(2) a,
#top-bar .h-time {
display: inline-flex;
align-items: center;
gap: 8px;
}
#top-bar .top-nav li:nth-child(1) a:before,
#top-bar .top-nav li:nth-child(2) a:before,
#top-bar .h-time:before {
content: '';
flex: none;
width: 18px;
height: 18px;
background: currentColor;
}
#top-bar .top-nav li:nth-child(1) a:before {
-webkit-mask: var(--an-icon-news) center / contain no-repeat;
mask: var(--an-icon-news) center / contain no-repeat;
}
#top-bar .top-nav li:nth-child(2) a:before {
-webkit-mask: var(--an-icon-phone) center / contain no-repeat;
mask: var(--an-icon-phone) center / contain no-repeat;
}
#top-bar .h-time:before {
-webkit-mask: var(--an-icon-clock) center / contain no-repeat;
mask: var(--an-icon-clock) center / contain no-repeat;
}
/* Hiệu ứng rê chuột trên top bar (máy tính có chuột): mỗi mục một kiểu nhưng cùng tông xanh cyan
1. Tin Tức: vạch quét cyan chạy dưới chữ, icon nhấc lên. 2. Hotline: viên kính phát sáng, icon điện thoại rung.
3. Giờ làm việc: bốn góc khung HUD hiện ra, icon đồng hồ xoay một vòng. */
@media (min-width: 850px) and (hover: hover) {
#top-bar .top-nav li:nth-child(1) a,
#top-bar .top-nav li:nth-child(2) a,
#top-bar .h-time {
position: relative;
isolation: isolate;
}
#top-bar .top-nav li:nth-child(1) a:before,
#top-bar .top-nav li:nth-child(2) a:before,
#top-bar .h-time:before {
transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
#top-bar .top-nav li:nth-child(1) a:after,
#top-bar .top-nav li:nth-child(2) a:after,
#top-bar .h-time:after {
content: '';
position: absolute;
pointer-events: none;
opacity: 0;
transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* 1. Tin Tức & Sự Kiện */
#top-bar .top-nav li:nth-child(1) a:after {
left: 10px;
right: 22px;
bottom: 5px;
height: 2px;
border-radius: 2px;
background: linear-gradient(90deg, var(--an-accent-soft), rgba(255, 255, 255, 0));
opacity: 1;
transform: scaleX(0);
transform-origin: left center;
}
#top-bar .top-nav li:nth-child(1):hover a {
color: #fff;
text-shadow: 0 0 14px rgba(255, 255, 255, 0.75);
}
#top-bar .top-nav li:nth-child(1):hover a:after {
transform: scaleX(1);
}
#top-bar .top-nav li:nth-child(1):hover a:before {
transform: translateY(-2px);
}
/* 2. Hotline */
#top-bar .top-nav li:nth-child(2) a:after {
z-index: -1;
top: 6px;
right: 8px;
bottom: 6px;
left: 6px;
border: 1px solid rgba(255, 255, 255, 0.55);
border-radius: 999px;
background: linear-gradient(90deg, rgba(0, 82, 204, 0.3), rgba(255, 255, 255, 0.08));
box-shadow: 0 0 18px rgba(0, 82, 204, 0.4), inset 0 0 12px rgba(255, 255, 255, 0.18);
transform: scale(0.92);
}
#top-bar .top-nav li:nth-child(2):hover a {
color: #fff;
}
#top-bar .top-nav li:nth-child(2):hover a:after {
opacity: 1;
transform: scale(1);
}
#top-bar .top-nav li:nth-child(2):hover a:before {
animation: an-tb-ring 0.7s ease-in-out;
}
/* 3. Thời gian làm việc (không phải liên kết) */
#top-bar .h-time {
cursor: default;
}
#top-bar .h-time:after {
top: -6px;
right: -12px;
bottom: -6px;
left: -12px;
z-index: -1;
background:
linear-gradient(var(--an-accent-soft), var(--an-accent-soft)) left top / 9px 1.5px no-repeat,
linear-gradient(var(--an-accent-soft), var(--an-accent-soft)) left top / 1.5px 9px no-repeat,
linear-gradient(var(--an-accent-soft), var(--an-accent-soft)) right top / 9px 1.5px no-repeat,
linear-gradient(var(--an-accent-soft), var(--an-accent-soft)) right top / 1.5px 9px no-repeat,
linear-gradient(var(--an-accent-soft), var(--an-accent-soft)) left bottom / 9px 1.5px no-repeat,
linear-gradient(var(--an-accent-soft), var(--an-accent-soft)) left bottom / 1.5px 9px no-repeat,
linear-gradient(var(--an-accent-soft), var(--an-accent-soft)) right bottom / 9px 1.5px no-repeat,
linear-gradient(var(--an-accent-soft), var(--an-accent-soft)) right bottom / 1.5px 9px no-repeat;
transform: scale(1.18);
}
#top-bar .h-time:hover {
text-shadow: 0 0 14px rgba(255, 255, 255, 0.7);
}
#top-bar .h-time:hover:after {
opacity: 1;
transform: scale(1);
}
#top-bar .h-time:hover:before {
transform: rotate(360deg);
transition-duration: 0.7s;
}
}
@keyframes an-tb-ring {
0%, 100% { transform: rotate(0); }
20% { transform: rotate(-16deg); }
40% { transform: rotate(14deg); }
60% { transform: rotate(-10deg); }
80% { transform: rotate(6deg); }
}
@media (prefers-reduced-motion: reduce) {
#top-bar .top-nav li a:before,
#top-bar .top-nav li a:after,
#top-bar .h-time:before,
#top-bar .h-time:after {
animation: none;
transition: none;
}
}
/* ==========================================================================
HEADER: nền trắng, cao 80px (68px khi cuộn)
========================================================================== */
#masthead {
height: 80px;
/* Nền trắng; đã bỏ vạch xanh mảnh ở đáy header (31/10/2026) để banner trang chủ sát menu */
background: #fff;
box-shadow: 0 2px 10px rgba(10, 46, 110, 0.10);
}
.stuck #masthead {
height: 68px;
}
#masthead .header-inner {
height: 100%;
}
/* Logo tròn. Tên công ty dạng chữ vẫn nằm trong HTML, ẩn kiểu visually-hidden (chờ logo ngang mới). */
#logo {
width: auto !important; /* Flatsome đặt chiều rộng logo bằng inline style. */
display: flex;
align-items: center;
}
#masthead #logo img.header_logo {
width: auto;
height: 44px;
padding: 0; /* Flatsome đặt padding 12px 0 cho ảnh logo */
max-width: none;
max-height: none !important; /* Customizer đặt max-height:70px !important */
flex: none;
}
@media (min-width: 850px) {
#masthead #logo img.header_logo {
height: 52px;
}
.stuck #masthead #logo img.header_logo {
height: 46px;
}
}
#logo .name {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Menu chính */
#masthead .header-nav-main {
flex-wrap: nowrap;
justify-content: center;
}
#masthead .header-nav-main > li.menu-item {
position: relative;
margin: 0;
white-space: nowrap;
}
#masthead .header-nav-main > li.menu-item:not(.menu-item-home) + li.menu-item:before {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 1px;
height: 14px;
margin-top: -7px;
background: #bfc5d2;
}
#masthead .header-nav-main > li.menu-item > a {
position: relative;
padding: 8px 14px;
color: #2f2f2f;
font-size: 14px;
font-weight: 600;
letter-spacing: 0;
text-transform: uppercase;
transition: var(--an-transition-fast);
}
/* Gạch chân gradient chạy từ giữa ra khi rê chuột / mục đang xem */
#masthead .header-nav-main > li.menu-item > a:after {
content: '';
position: absolute;
left: 14px;
right: 14px;
bottom: 2px;
height: 3px;
border-radius: 2px;
background: var(--an-accent-line);
transform: scaleX(0);
transition: transform 0.25s ease;
}
#masthead .header-nav-main > li.menu-item:hover > a:after,
#masthead .header-nav-main > li.menu-item.active > a:after,
#masthead .header-nav-main > li.menu-item.current-menu-item > a:after {
transform: scaleX(1);
}
#masthead .header-nav-main > li.menu-item:hover > a,
#masthead .header-nav-main > li.menu-item.active > a,
#masthead .header-nav-main > li.menu-item.current-menu-item > a {
color: var(--an-text-hover);
}
/* "Trang chủ" không hiện ở hàng menu (logo đã dẫn về trang chủ); mục vẫn nằm trong menu và HTML. Đường "|" không vẽ trước mục đầu tiên còn hiện. */
#masthead .header-nav-main > li.menu-item-home {
display: none;
}
/* Tìm kiếm, giỏ hàng, tài khoản (khối .an-header-search, đặt cuối hàng menu) */
#masthead .an-header-search .header-search > a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid #cfd6e4;
border-radius: 50%;
color: var(--an-text-body);
transition: var(--an-transition-fast);
}
#masthead .an-header-search .header-search > a:hover {
border-color: var(--an-brand);
color: var(--an-text-hover);
}
#masthead .an-header-search {
gap: 10px;
}
/* Bỏ vạch ngăn: ba nút cùng kiểu viên thuốc, cách đều nhau */
#masthead .an-header-search .header-divider {
display: none;
}
#masthead .an-header-search .header-search > a {
background: #fff;
}
#masthead .an-header-search .cart-item > a,
#masthead .an-header-search .account-item > a {
position: relative;
display: inline-flex;
align-items: center;
gap: 9px;
height: 40px;
margin: 0;
padding: 0 18px 0 14px;
border: 1px solid #cfd6e4;
border-radius: 999px;
background: #fff;
color: var(--an-text-body);
font-size: 14px;
font-weight: 600;
text-transform: none;
letter-spacing: 0;
text-decoration: none;
transition: var(--an-transition-fast);
}
#masthead .an-header-search .cart-item > a:hover,
#masthead .an-header-search .account-item > a:hover {
border-color: var(--an-brand);
background: var(--an-brand-tint);
color: var(--an-text-hover);
box-shadow: 0 6px 16px -8px rgba(0, 82, 204, 0.55);
}
/* Biểu tượng (cùng cỡ, cùng nét) */
#masthead .an-header-search .cart-item > a:before,
#masthead .an-header-search .account-item > a:before {
content: '';
flex: none;
width: 19px;
height: 19px;
background: currentColor;
-webkit-mask: var(--an-icon-cart) center / contain no-repeat;
mask: var(--an-icon-cart) center / contain no-repeat;
}
#masthead .an-header-search .account-item > a:before {
-webkit-mask-image: var(--an-icon-user);
mask-image: var(--an-icon-user);
}
/* Giỏ hàng: bỏ chữ "Giỏ hàng /", chỉ giữ số tiền; số lượng thành huy hiệu ở góc biểu tượng */
#masthead .an-header-search .header-cart-title {
display: flex;
align-items: center;
font-size: 0;
line-height: 1;
color: inherit;
}
#masthead .an-header-search .cart-price {
font-size: 14px;
font-weight: 600;
line-height: 1;
color: inherit;
white-space: nowrap;
}
/* Ký hiệu ₫ trong font dự phòng có gạch chân như bị lỗi: hiện chữ "đ" thường cùng font với các nút bên cạnh */
#masthead .an-header-search .cart-price .woocommerce-Price-currencySymbol {
font-size: 0;
}
#masthead .an-header-search .cart-price .woocommerce-Price-currencySymbol:after {
content: 'đ';
font-size: 14px;
}
#masthead .an-header-search .cart-price *,
#masthead .an-header-search .header-cart-title * {
text-decoration: none;
}
#masthead .an-header-search .cart-item .cart-icon {
position: absolute;
top: -6px;
bottom: auto;
left: 28px;
margin: 0;
}
#masthead .an-header-search .cart-item .cart-icon strong {
display: block;
min-width: 19px;
height: 19px;
margin: 0;
padding: 0 5px;
border: 2px solid #fff;
border-radius: 999px;
background: var(--an-brand);
color: #fff;
font-size: 11px;
font-weight: 700;
line-height: 15px;
text-align: center;
box-shadow: 0 2px 6px rgba(0, 82, 204, 0.45);
}
/* Giỏ trống: ẩn huy hiệu "0" (đã có "0 ₫" bên cạnh, hai số 0 liền nhau gây rối). Flatsome in .ux-mini-cart-empty trong dropdown khi giỏ rỗng,
và WooCommerce thay phần này khi thêm/xóa sản phẩm nên huy hiệu tự hiện lại. */
#masthead .an-header-search .cart-item:has(.ux-mini-cart-empty) .cart-icon {
display: none;
}
#masthead .an-header-search .cart-item .cart-icon strong:before,
#masthead .an-header-search .cart-item .cart-icon strong:after {
display: none;
}
/* ==========================================================================
DROPDOWN (menu, giỏ hàng, tài khoản): nền trắng, viền trên xanh, đường kẻ ngăn mục,
rê chuột đổi chữ xanh + nền xanh nhạt. Ghi đè nền xám #e0e0e0 của Theme Options (.nav .nav-dropdown).
========================================================================== */
#masthead .nav .nav-dropdown {
margin-top: 15px;
padding: 0;
background-color: #fff;
border: 0;
border-top: 3px solid var(--an-brand);
border-radius: 0 0 8px 8px;
box-shadow: 0 12px 30px rgba(0, 82, 204, 0.18);
}
#masthead .nav-dropdown li > a:not(.button) {
padding: 11px 18px;
border-bottom: 1px solid #eef0f5;
color: #2f2f2f;
font-size: 14px;
font-weight: 500;
text-transform: none;
transition: var(--an-transition-fast);
}
#masthead .nav-dropdown li:last-child > a:not(.button) {
border-bottom: 0;
}
#masthead .nav-dropdown li:hover {
background: var(--an-brand-tint);
}
#masthead .nav-dropdown li:hover > a:not(.button) {
color: var(--an-text-hover);
}
#masthead .nav-dropdown-has-arrow li.has-dropdown:before {
border-width: 10px;
margin-left: -10px;
}
/* Dropdown nhiều cấp (Công trình): cấp 2 là cột, cấp 3 xổ ngang bên phải */
#masthead .nav-dropdown > li.nav-dropdown-col {
display: block;
width: 100%;
border-right: 0 !important; /* Flatsome kẻ cạnh phải bằng luật có độ ưu tiên cao. */
}
#masthead .nav-dropdown .nav-dropdown-col > ul {
display: none;
position: absolute;
left: 100%;
z-index: 9;
min-width: 260px;
margin-top: -40px;
background: #fff;
border: 0;
border-radius: 8px;
box-shadow: 0 12px 30px rgba(0, 82, 204, 0.18);
}
#masthead .header-nav li.nav-dropdown-col:hover > ul {
display: block !important; /* Flatsome ẩn cấp 3 bằng luật có độ ưu tiên cao. */
}
/* Giỏ hàng nhỏ trong dropdown: chữ tối, nút xanh thương hiệu */
#masthead .nav-dropdown .widget_shopping_cart,
#masthead .nav-dropdown .woocommerce-mini-cart__empty-message,
#masthead .nav-dropdown .woocommerce-mini-cart__total {
color: #2f2f2f;
}
#masthead .nav-dropdown .button.primary {
background-color: var(--an-brand);
border-color: var(--an-brand);
color: #fff;
font-size: 15px;
font-weight: 400;
}
#masthead .nav-dropdown .button.primary:hover {
background-color: var(--an-brand-dark);
border-color: var(--an-brand-dark);
}
/* ==========================================================================
BỐ CỤC THEO MÀN HÌNH
========================================================================== */
/* Từ 550px: ô trái top bar căn giữa theo chiều dọc để ngày giờ ngang hàng với chữ */
@media (min-width: 550px) {
#top-bar .html_topbar_left {
display: flex;
align-items: center;
height: 40px;
}
#top-bar .html_topbar_left .top-nav {
display: flex;
align-items: center;
}
#top-bar .h-time {
line-height: 20px;
}
}
/* Từ 850px (hiện menu desktop): header lưới 3 cột (logo | menu sát logo, căn trái | tìm kiếm, giỏ hàng, tài khoản);
ngày giờ neo vào góc phải top bar. */
@media (min-width: 850px) {
#masthead .header-inner {
display: grid;
grid-template-columns: auto minmax(max-content, 1fr) auto;
align-items: center;
}
#masthead .header-inner > #logo {
grid-column: 1;
justify-self: start;
}
#masthead .header-inner > .flex-col.flex-left.hide-for-medium {
display: none; /* ô trái của Flatsome để trống */
}
#masthead .header-inner > .flex-col.flex-right.hide-for-medium {
display: contents;
}
#masthead .header-inner > .flex-right > ul.header-nav-main:first-child {
grid-column: 2;
justify-self: start;
width: auto;
justify-content: flex-start;
margin-left: 0; /* cách logo khoảng 44px: 30px lề phải của #logo + 14px đệm mục menu đầu */
}
#masthead .header-inner > .flex-right > ul.an-header-search {
grid-column: 3;
justify-self: end;
width: auto;
}
/* Các phần tử cha để static để ngày giờ neo vào khung .flex-row của top bar. */
#top-bar .flex-col.flex-left,
#top-bar .flex-col.flex-left .nav,
#top-bar .flex-col.flex-left .nav > li.html_topbar_left {
position: static;
}
#top-bar .flex-col.flex-left .h-time {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
}
}
/* Dưới 1600px (laptop): giỏ hàng và tài khoản chỉ còn icon để hàng header không tràn */
@media (min-width: 850px) and (max-width: 1599px) {
#masthead .an-header-search .header-cart-title,
#masthead .an-header-search .account-item > a > span {
display: none;
}
#masthead .an-header-search .cart-item > a,
#masthead .an-header-search .account-item > a {
justify-content: center;
width: 40px;
padding: 0;
}
#masthead .an-header-search .cart-item .cart-icon {
left: 24px;
}
}
@media (min-width: 850px) and (max-width: 1399px) {
#masthead .header-nav-main > li.menu-item > a {
padding: 8px 12px;
}
#masthead .header-nav-main > li.menu-item > a:after {
left: 12px;
right: 12px;
}
}
/* 850-1199px (máy tính bảng ngang): menu gọn hơn */
@media (min-width: 850px) and (max-width: 1199px) {
#masthead .header-nav-main > li.menu-item > a {
padding: 8px;
font-size: 13px;
}
#masthead .header-nav-main > li.menu-item > a:after {
left: 8px;
right: 8px;
}
}
/* 850-999px: bỏ giỏ hàng và tài khoản ở hàng menu cho vừa chỗ */
@media (min-width: 850px) and (max-width: 999px) {
#masthead .an-header-search .cart-item,
#masthead .an-header-search .account-item,
#masthead .an-header-search .header-divider {
display: none;
}
}
/* ==========================================================================
MOBILE (dưới 850px): top bar, hàng logo, menu trượt (khối đầu/cuối in bởi inc/header.php)
========================================================================== */
@media (max-width: 849px) {
/* Top bar: một hàng gọn, hai mục cách nhau bằng vạch mờ như desktop; giờ làm việc chuyển vào menu */
#top-bar,
#top-bar .flex-row {
min-height: 40px;
}
#top-bar .mobile-nav {
justify-content: center;
}
#top-bar .top-nav {
margin-right: 0;
}
#top-bar .top-nav li a,
#top-bar .top-nav li:first-child a {
padding: 10px 14px;
font-size: 13px;
}
#top-bar .top-nav li:nth-child(2) a {
font-weight: 600;
}
#top-bar .h-time {
display: none;
}
/* Hàng logo: nút menu và tìm kiếm là ô vuông bo góc nền xanh nhạt, logo ở giữa */
#masthead {
height: 64px;
}
#masthead .mobile-nav > li > a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
border-radius: 12px;
background: var(--an-brand-tint);
color: var(--an-text-hover);
}
#masthead .mobile-nav > li > a i {
top: 0;
margin: 0;
font-size: 18px !important;
}
#masthead #logo img.header_logo {
height: 42px;
}
}
@media (max-width: 549px) {
#top-bar .top-nav li a,
#top-bar .top-nav li:first-child a {
padding: 10px 12px;
}
}
/* Điện thoại hẹp (dưới 380px): top bar vẫn một hàng */
@media (max-width: 379px) {
#top-bar .top-nav li a,
#top-bar .top-nav li:first-child a {
gap: 6px;
padding: 10px 8px;
font-size: 12px;
}
}
@media (max-width: 339px) {
#top-bar .top-nav li:nth-child(1) a:before {
display: none; /* bỏ icon tin tức để vừa một hàng */
}
#top-bar .top-nav li a,
#top-bar .top-nav li:first-child a {
padding: 10px 6px;
}
}
/* ==========================================================================
MOBILE (dưới 850px) — top bar và hàng logo phối theo một hệ thống (10/10/2026)
Lề hai bên 14px ở cả hai hàng nên mép trái/phải thẳng hàng. Top bar: Hotline (trái, icon cyan) và Tin tức (phải), chữ trần, không viền.
Hàng logo: logo + "ÁNH NHẬT / TELECOM" (trái); tìm kiếm và menu cùng một kiểu ô bo 14px (phải), menu tô gradient thương hiệu.
========================================================================== */
@media (max-width: 849px) {
#top-bar,
#top-bar .flex-row {
min-height: 40px;
}
#top-bar .flex-row {
padding: 0 14px;
}
#top-bar .mobile-nav {
justify-content: stretch;
width: 100%;
}
#top-bar .mobile-nav > li {
flex: 1 1 100%;
width: 100%;
margin: 0;
}
#top-bar .top-nav {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
margin: 0;
}
#top-bar .top-nav li {
display: block;
margin: 0;
}
#top-bar .top-nav li + li:before {
display: none;
}
/* Hotline lên trước (trái), Tin tức sau (phải) */
#top-bar .top-nav li:nth-child(2) {
order: -1;
}
#top-bar .top-nav li a,
#top-bar .top-nav li:first-child a {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 40px;
padding: 0;
border: 0;
background: none;
box-shadow: none;
font-size: 13px;
font-weight: 600;
line-height: 1;
white-space: nowrap;
}
#top-bar .top-nav li:nth-child(2) a {
color: #fff;
font-weight: 700;
letter-spacing: 0.2px;
}
#top-bar .top-nav li:nth-child(2) a:before {
width: 17px;
height: 17px;
background: var(--an-accent-soft);
}
#top-bar .top-nav li:nth-child(1) a {
color: rgba(255, 255, 255, 0.88);
}
#top-bar .top-nav li:nth-child(1) a:before {
width: 17px;
height: 17px;
}
/* Hàng logo */
#masthead {
height: 66px;
}
#masthead .header-inner {
gap: 10px;
padding: 0 14px;
}
#masthead .header-inner:before,
#masthead .header-inner:after {
display: none; /* clearfix của Flatsome thành phần tử flex, cộng thêm 10px gap */
}
#masthead .header-inner > #logo {
order: 1;
margin: 0 auto 0 0 !important; /* Flatsome đặt lề trái 15px */
gap: 10px;
}
#masthead .header-inner > .show-for-medium {
margin: 0 !important;
padding: 0;
}
#masthead .header-inner > .show-for-medium ul {
margin: 0 !important;
}
#masthead .header-inner > .show-for-medium.flex-right {
order: 2;
flex: none;
}
#masthead .header-inner > .show-for-medium.flex-left {
order: 3;
flex: none;
}
#masthead #logo img.header_logo {
height: 42px;
}
/* Chữ thương hiệu: ÁNH NHẬT (to) / TELECOM (nhỏ, giãn chữ). div.name (trước đây h2) có sẵn trong HTML, trước đây ẩn */
#masthead #logo .name {
position: static;
display: block;
width: auto;
height: auto;
margin: 0;
overflow: visible;
clip: auto;
line-height: 1;
}
#masthead #logo .name strong {
display: none;
}
#masthead #logo .name span {
display: block;
color: var(--an-text-heading);
font-size: 19px;
font-weight: 800;
letter-spacing: 0.6px;
text-transform: uppercase;
}
#masthead #logo .name span:after {
content: 'Telecom';
display: block;
margin-top: 5px;
color: var(--an-text-hover);
font-size: 10px;
font-weight: 700;
letter-spacing: 3.6px;
text-transform: uppercase;
}
#masthead .mobile-nav {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
}
#masthead .mobile-nav > li {
margin: 0;
}
/* Hai nút cùng một kiểu: ô vuông bo 14px, 42px */
#masthead .mobile-nav > li > a {
width: 42px;
height: 42px;
border: 1px solid #d3e4fb;
border-radius: 14px;
background: var(--an-brand-tint);
box-shadow: none;
color: var(--an-text-hover);
}
#masthead .mobile-nav > li.nav-icon > a {
border-color: transparent;
background: linear-gradient(135deg, var(--an-brand), var(--an-brand-dark));
box-shadow: 0 10px 18px -10px rgba(0, 82, 204, 0.95);
color: #fff;
}
}
/* Điện thoại hẹp */
@media (max-width: 379px) {
#masthead #logo .name span {
font-size: 17px;
}
#masthead #logo .name span:after {
letter-spacing: 2.6px;
}
#top-bar .top-nav li a,
#top-bar .top-nav li:first-child a {
font-size: 12.5px;
}
}
@media (max-width: 359px) {
#top-bar .top-nav li a,
#top-bar .top-nav li:first-child a {
gap: 6px;
font-size: 12px;
}
#top-bar .top-nav li:nth-child(1) a:before {
display: none;
}
#masthead #logo img.header_logo {
height: 38px;
}
}
@media (max-width: 339px) {
#masthead #logo .name span {
font-size: 15px;
}
}
/* Menu trượt mobile: nền gradient thương hiệu (đậm -> cyan), mục đánh số 01-08, mục đang xem là viên trắng mờ */
.off-canvas .mfp-content:has(> #main-menu) { /* chỉ khung menu; lightbox tìm kiếm cũng dùng .off-canvas */
width: min(320px, 86vw);
background: linear-gradient(165deg, var(--an-brand-dark) 0%, var(--an-brand) 55%, var(--an-accent) 100%);
box-shadow: 10px 0 40px rgba(2, 10, 34, 0.45);
}
.off-canvas .mobile-sidebar .sidebar-menu {
padding-top: 0;
}
/* Đầu menu: logo + tên (inc/header.php) */
.an-mnav-head {
position: relative;
padding: 24px 20px 20px;
}
.an-mnav-head:after {
content: '';
position: absolute;
right: 20px;
bottom: 0;
left: 20px;
height: 1px;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
}
.an-mnav-head a {
display: flex;
align-items: center;
gap: 12px;
color: #fff;
font-size: 15px;
font-weight: 700;
letter-spacing: 0.6px;
text-transform: uppercase;
}
.an-mnav-head img {
width: 42px;
height: 42px;
border-radius: 50%;
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
}
/* Danh sách mục */
.off-canvas .nav-sidebar {
padding: 14px 12px 4px;
counter-reset: an-mnav;
}
.off-canvas .nav-sidebar > li,
.off-canvas .nav-sidebar.nav-vertical > li + li {
position: relative;
margin: 0 0 4px;
border: 0; /* bỏ đường kẻ #ececec của Flatsome */
}
.off-canvas .nav-sidebar.nav-vertical > li.menu-item.active,
.off-canvas .nav-sidebar.nav-vertical > li.menu-item:hover {
background: none; /* Flatsome tô nền xám mờ mục đang mở / rê chuột */
}
.off-canvas .nav-sidebar > li > a {
display: flex;
align-items: center;
gap: 14px;
padding: 13px 14px;
border: 1px solid transparent;
border-radius: 12px;
color: rgba(255, 255, 255, 0.92);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.4px;
transition: var(--an-transition-fast);
}
.off-canvas .nav-sidebar > li.menu-item-has-children > a {
padding-right: 52px; /* chừa chỗ cho nút mở menu con */
}
.off-canvas .nav-sidebar > li > a:before {
counter-increment: an-mnav;
content: counter(an-mnav, decimal-leading-zero);
min-width: 18px;
color: #bfeaff;
font-size: 11px;
font-weight: 600;
letter-spacing: 1px;
opacity: 0.7;
}
.off-canvas .nav-sidebar > li > a:hover {
background: rgba(255, 255, 255, 0.06);
color: #fff;
}
.off-canvas .nav-sidebar > li.current-menu-item > a,
.off-canvas .nav-sidebar > li.current-menu-ancestor > a {
border-color: rgba(255, 255, 255, 0.35);
background: rgba(255, 255, 255, 0.14);
box-shadow: inset 3px 0 0 var(--an-accent-soft);
color: #fff;
}
.off-canvas .nav-sidebar > li.current-menu-item > a:before,
.off-canvas .nav-sidebar > li.current-menu-ancestor > a:before {
opacity: 1;
}
/* Nút mở menu con: vòng tròn viền mảnh nằm trong viên của mục (Flatsome đặt nó bên ngoài) */
.off-canvas .nav-sidebar > li > .toggle {
position: absolute;
top: 7px;
right: 8px;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
min-height: 32px; /* Flatsome đặt min-height 38.8px làm nút bị méo thành hình bầu dục */
margin: 0;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
color: #fff;
opacity: 1;
}
.off-canvas .nav-sidebar > li > .toggle i {
margin: 0;
font-size: 14px;
}
.off-canvas .nav-sidebar > li.active > .toggle {
border-color: transparent;
background: linear-gradient(135deg, var(--an-accent), var(--an-brand));
}
/* Menu con: đường dọc bên trái kiểu cây thư mục */
.off-canvas .nav-sidebar .sub-menu {
margin: 4px 0 8px 22px;
padding: 2px 0 !important; /* Flatsome đặt padding bằng !important */
border-left: 1px solid rgba(255, 255, 255, 0.3);
background: none;
}
.off-canvas .nav-sidebar .sub-menu li a {
padding: 9px 14px 9px 18px;
color: rgba(255, 255, 255, 0.78);
font-size: 13.5px;
font-weight: 400;
text-transform: none;
}
.off-canvas .nav-sidebar .sub-menu li a:hover {
color: #fff;
}
/* Cuối menu: nút gọi trắng + giờ làm việc (inc/header.php) */
.an-mnav-contact {
margin: 10px 16px 24px;
padding: 18px 10px 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.an-mnav-contact .an-mnav-call {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 48px;
border-radius: 999px;
background: #fff;
box-shadow: 0 10px 24px rgba(2, 10, 34, 0.25);
color: var(--an-text-hover);
font-size: 15px;
font-weight: 700;
letter-spacing: 0.3px;
}
.an-mnav-contact .h-time {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 12px;
color: rgba(255, 255, 255, 0.8);
font-size: 13px;
}
.an-mnav-contact .an-mnav-call:before,
.an-mnav-contact .h-time:before {
content: '';
width: 18px;
height: 18px;
background: currentColor;
-webkit-mask: var(--an-icon-phone) center / contain no-repeat;
mask: var(--an-icon-phone) center / contain no-repeat;
}
.an-mnav-contact .h-time:before {
width: 16px;
height: 16px;
-webkit-mask-image: var(--an-icon-clock);
mask-image: var(--an-icon-clock);
}
/* Cửa sổ đăng nhập (lightbox): tiêu đề "Đăng nhập"/"Đăng ký" là (woocommerce/myaccount/form-login.php),
giữ đúng kiểu cũ của
: đậm, cách form 10px. */
.account-login-inner > p.h3,
.account-register-inner > p.h3 {
margin-bottom: 0.5em;
font-weight: 700;
}