/* Header: main menu and dropdowns */
.top_panel_custom {
--bella-blue: #0F4F9E;
--bella-blue-dark: #0B3D7C;
--bella-ink: #10263F;
--bella-tint: #EDF4FC;
--bella-line: #DEE8F2;
--bella-muted: #5C6E86; /* group headings in the mega menu: 5.21:1 on white */
--bella-menu-radius: 12px;
--bella-panel-radius: 18px;
--bella-panel-shadow:
0 28px 54px -26px rgba(16, 38, 63, .45),
0 8px 20px -12px rgba(16, 38, 63, .16);
}
/* The theme restates its whole palette on every element carrying a scheme
class - the header row is one - so these have to be set there too. The
search overlay runs on scheme_dark and is deliberately left alone. */
.top_panel_custom,
.top_panel_custom .scheme_default,
.top_panel_custom .scheme_light {
--theme-color-text_link: #0F4F9E;
--theme-color-text_hover: #0B3D7C;
--theme-color-alter_link: #0F4F9E;
--theme-color-alter_hover: #0B3D7C;
}
/* Row */
@media (min-width: 1280px) {
.top_panel_custom .sc_layouts_row_type_compact > .elementor-container {
flex-wrap: nowrap;
}
.top_panel_custom .sc_layouts_row_type_compact .elementor-top-column:has(.elementor-widget-trx_sc_layouts_menu) {
width: auto;
flex: 1 1 auto;
min-width: 0;
}
.top_panel_custom .sc_layouts_row_type_compact .elementor-top-column:has(.sc_layouts_search) {
width: auto;
flex: 0 0 auto;
}
.top_panel_custom .sc_layouts_row_type_compact .elementor-top-column:has(.sc_layouts_logo):not(:has(.elementor-widget-trx_sc_layouts_menu)) {
width: auto;
flex: 0 0 auto;
}
/* Fallback for browsers without :has() - the two columns of this header,
by id. Harmless if the layout is rebuilt with different ids: the rule
simply stops matching and the theme's own widths apply. */
.top_panel_custom .elementor-element-294dc6b {
width: auto;
flex: 1 1 auto;
min-width: 0;
}
.top_panel_custom .elementor-element-4e08b9d {
width: auto;
flex: 0 0 auto;
}
.top_panel_custom .sc_layouts_row_type_compact .elementor-widget-wrap {
flex-wrap: nowrap;
}
.top_panel_custom .sc_layouts_row_type_compact .elementor-widget-trx_sc_layouts_logo {
flex: 0 0 auto;
}
}
/* Sticky row: a blurred white ground rather than the flat --bg_color fill, so
the page keeps showing through as it scrolls under the header. */
.top_panel_custom .sc_layouts_row_fixed_on {
background-color: rgba(255, 255, 255, .88);
-webkit-backdrop-filter: saturate(180%) blur(14px);
backdrop-filter: saturate(180%) blur(14px);
border-bottom: 1px solid rgba(222, 232, 242, .8);
box-shadow: 0 14px 34px -24px rgba(16, 38, 63, .5);
}
/* Top level */
/* The nav is a row of floated items with a clearing :after; as a flex row the
pills centre against the logo without depending on line-height. Spacing is
kept inside the links rather than in a `gap`, because the collapse script
measures each item's outer width plus its margins and does not read the
list's gap - a gap would make it think everything fits. */
.top_panel_custom .sc_layouts_row .sc_layouts_menu_default .sc_layouts_menu_nav {
display: flex;
align-items: center;
flex-wrap: nowrap;
}
.top_panel_custom .sc_layouts_row .sc_layouts_menu_default .sc_layouts_menu_nav:after {
display: none;
}
.top_panel_custom .sc_layouts_row .sc_layouts_menu_default .sc_layouts_menu_nav > li {
float: none;
}
.top_panel_custom .sc_layouts_row .sc_layouts_menu_default .sc_layouts_menu_nav > li > a,
.top_panel_custom .sc_layouts_row .sc_layouts_menu_default .sc_layouts_menu_nav > li.menu-item-has-children > a {
padding: 11px 15px;
border-radius: var(--bella-menu-radius);
color: var(--bella-ink);
font-weight: 500;
letter-spacing: -.01em;
white-space: nowrap;
transition: color .2s ease, background-color .2s ease;
}
.top_panel_custom .sc_layouts_row .sc_layouts_menu_default .sc_layouts_menu_nav > li > a > span {
position: relative;
display: inline-block;
}
/* The "color_line" hover draws its bar in ::before/::after on the link. Both
are dropped for the pill; the caret is drawn on the label's ::after instead,
which also keeps it clear of the `right: 2em !important` those rules set.
The collapse item ("...") keeps its ::before - that pseudo-element is its
icon, not a bar. */
.top_panel_custom .sc_layouts_row .sc_layouts_menu_default .sc_layouts_menu_nav > li:not(.menu-collapse) > a:before,
.top_panel_custom .sc_layouts_row .sc_layouts_menu_default .sc_layouts_menu_nav > li:not(.menu-collapse) > a:after {
display: none !important;
}
.top_panel_custom .sc_layouts_row .sc_layouts_menu_default .sc_layouts_menu_nav > li > a:hover,
.top_panel_custom .sc_layouts_row .sc_layouts_menu_default .sc_layouts_menu_nav > li.sfHover > a {
background-color: rgba(15, 79, 158, .07);
color: var(--bella-blue);
}
.top_panel_custom .sc_layouts_row .sc_layouts_menu_default .sc_layouts_menu_nav > li.current-menu-item > a {
background-color: var(--bella-tint);
}
.top_panel_custom .sc_layouts_row .sc_layouts_menu_default .sc_layouts_menu_nav > li.current-menu-item > a,
.top_panel_custom .sc_layouts_row .sc_layouts_menu_default .sc_layouts_menu_nav > li.current-menu-parent > a,
.top_panel_custom .sc_layouts_row .sc_layouts_menu_default .sc_layouts_menu_nav > li.current-menu-ancestor > a {
color: var(--bella-blue);
font-weight: 600;
}
/* Keyboard focus gets the hover pill plus a ring - the theme only draws its
own outline after a key is pressed, and a pill with no ring is easy to lose
in a row of eight. */
.top_panel_custom .sc_layouts_row .sc_layouts_menu_default .sc_layouts_menu_nav > li > a:focus-visible,
.top_panel_custom .sc_layouts_row .sc_layouts_menu_default .sc_layouts_menu_nav > li li > a:focus-visible {
background-color: var(--bella-tint);
color: var(--bella-blue);
outline: 2px solid rgba(15, 79, 158, .45);
outline-offset: 2px;
}
/* Caret: two borders on a rotated box, so it does not depend on the icon font
and can rotate to point up while its menu is open. */
.top_panel_custom .sc_layouts_row .sc_layouts_menu_default .sc_layouts_menu_nav li.menu-item-has-children > a > span {
padding-right: 18px;
}
.top_panel_custom .sc_layouts_row .sc_layouts_menu_default .sc_layouts_menu_nav li.menu-item-has-children > a > span:after {
content: '';
position: absolute;
top: 50%;
right: 2px;
width: 6px;
height: 6px;
margin-top: -4px;
border-right: 1.6px solid currentColor;
border-bottom: 1.6px solid currentColor;
border-radius: 1px;
opacity: .5;
transform: rotate(45deg);
transition: transform .25s ease, opacity .25s ease;
}
.top_panel_custom .sc_layouts_row .sc_layouts_menu_default .sc_layouts_menu_nav > li.menu-item-has-children > a:hover > span:after,
.top_panel_custom .sc_layouts_row .sc_layouts_menu_default .sc_layouts_menu_nav > li.menu-item-has-children.sfHover > a > span:after {
opacity: 1;
}
.top_panel_custom .sc_layouts_row .sc_layouts_menu_default .sc_layouts_menu_nav > li.menu-item-has-children.sfHover > a > span:after {
margin-top: -1px;
transform: rotate(225deg);
}
/* Phone number. It is an ordinary menu item pointing at a tel: link, so it is
matched on the href rather than on its id. */
.top_panel_custom .sc_layouts_row .sc_layouts_menu_default .sc_layouts_menu_nav > li > a[href^="tel:"] {
color: var(--bella-blue);
font-weight: 600;
}
.top_panel_custom .sc_layouts_row .sc_layouts_menu_default .sc_layouts_menu_nav > li > a[href^="tel:"] > span {
padding-left: 22px;
}
.top_panel_custom .sc_layouts_row .sc_layouts_menu_default .sc_layouts_menu_nav > li > a[href^="tel:"] > span:before {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 15px;
height: 15px;
margin-top: -8px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.7.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.7.1.3 0 .7-.2 1l-2.3 2.1z'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.7.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.7.1.3 0 .7-.2 1l-2.3 2.1z'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
/* Booking link, matched on its slug. Filled: with the "Liên hệ" button gone
from the end of the row, this is the header's one call to action. */
.top_panel_custom .sc_layouts_row .sc_layouts_menu_default .sc_layouts_menu_nav > li > a[href*="dat-hen"] {
margin-left: 8px;
padding: 11px 22px;
background-color: var(--bella-blue);
color: #fff;
font-weight: 600;
box-shadow: 0 10px 20px -12px rgba(15, 79, 158, .8);
transition: color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.top_panel_custom .sc_layouts_row .sc_layouts_menu_default .sc_layouts_menu_nav > li.current-menu-item > a[href*="dat-hen"],
.top_panel_custom .sc_layouts_row .sc_layouts_menu_default .sc_layouts_menu_nav > li.current-menu-item > a[href*="dat-hen"] > span {
color: #fff !important;
}
.top_panel_custom .sc_layouts_row .sc_layouts_menu_default .sc_layouts_menu_nav > li > a[href*="dat-hen"]:hover,
.top_panel_custom .sc_layouts_row .sc_layouts_menu_default .sc_layouts_menu_nav > li > a[href*="dat-hen"]:focus {
background-color: var(--bella-blue-dark);
color: #fff;
transform: translateY(-1px);
}
/* On a 1280-1440 laptop the row is a few dozen pixels short of holding the
phone number and the booking link, and the collapse script hides exactly
those two - the reason most people open this menu. Tightening the labels
buys the room back; below 1280 the header switches to the burger row. */
@media (min-width: 1280px) and (max-width: 1439px) {
.top_panel_custom .sc_layouts_row .sc_layouts_menu_default .sc_layouts_menu_nav > li > a,
.top_panel_custom .sc_layouts_row .sc_layouts_menu_default .sc_layouts_menu_nav > li.menu-item-has-children > a {
padding-left: 11px;
padding-right: 11px;
}
.top_panel_custom .sc_layouts_row .sc_layouts_menu_default .sc_layouts_menu_nav > li > a[href*="dat-hen"] {
margin-left: 4px;
padding-left: 16px;
padding-right: 16px;
}
/* The row's 55px gutters and the logo's 1.5em margin are generous at this
width; a third of that is the difference between showing those two items
and hiding them. */
.top_panel_custom .elementor-section.sc_layouts_row.sc_layouts_row_type_compact {
padding-left: 34px;
padding-right: 34px;
}
.top_panel_custom .sc_layouts_row .elementor-widget-trx_sc_layouts_logo > .elementor-widget-container {
margin-right: 12px;
}
.top_panel_custom .sc_layouts_row .elementor-widget-trx_sc_layouts_search > .elementor-widget-container {
margin-right: 12px;
}
}
/* The "..." item the collapse script appends when the row still runs short. */
.top_panel_custom .sc_layouts_row .sc_layouts_menu_default .sc_layouts_menu_nav > li.menu-collapse > a {
border-radius: var(--bella-menu-radius);
}
/* ---------------------------------------------------------------------------
* Dropdowns
* ------------------------------------------------------------------------ */
.top_panel_custom .sc_layouts_row .sc_layouts_menu_default .sc_layouts_menu_nav > li ul:not(.sc_item_filters_tabs) {
/* Repointed rather than overridden: the theme writes every submenu link
colour with !important, through these variables. */
--theme-color-extra_bg_color: #FFFFFF;
--theme-color-extra_text: #33455C;
--theme-color-extra_hover: #0F4F9E;
--theme-color-extra_light: #7A8AA0;
--theme-color-extra_dark: #10263F;
--theme-color-extra_bd_color: #E4ECF6;
width: max-content;
min-width: 13em;
max-width: 22em;
padding: 8px;
border: 1px solid rgba(15, 79, 158, .08);
box-shadow: var(--bella-panel-shadow);
}
.top_panel_custom .sc_layouts_row .sc_layouts_menu_default .sc_layouts_menu_nav > li:not(.trx_addons_stretch_window) > ul,
.top_panel_custom .sc_layouts_row .sc_layouts_menu_default .sc_layouts_menu_nav > li:not(.trx_addons_stretch_window) > ul ul {
border-radius: var(--bella-panel-radius);
}
/* The panel is nudged so its first label sits directly under the label of the
item that opened it. */
.top_panel_custom .sc_layouts_row .sc_layouts_menu_default .sc_layouts_menu_nav > li > ul {
left: -8px;
}
/* Nested panels open off the edge of their parent, whatever it is sized to.
`submenu_left` is the class the theme's JS adds when a panel would run off
the right of the window. */
.top_panel_custom .sc_layouts_row .sc_layouts_menu_default .sc_layouts_menu_nav > li > ul ul {
left: 100%;
top: -8px;
margin: 0 0 0 6px;
}
.top_panel_custom .sc_layouts_row .sc_layouts_menu_default .sc_layouts_menu_nav > li > ul ul.submenu_left {
left: auto;
right: 100%;
margin: 0 6px 0 0;
}
/* Rows inside a panel. */
.top_panel_custom .sc_layouts_row .sc_layouts_menu_default .sc_layouts_menu_nav > li li > a {
padding: 10px 14px;
border-radius: var(--bella-menu-radius);
font-weight: 500;
line-height: 1.45em;
transition: color .2s ease, background-color .2s ease;
}
.top_panel_custom .sc_layouts_row .sc_layouts_menu_default .sc_layouts_menu_nav li li.menu-item-has-children > a {
padding-right: 30px;
}
.top_panel_custom .sc_layouts_row .sc_layouts_menu_default .sc_layouts_menu_nav > li li > a:hover,
.top_panel_custom .sc_layouts_row .sc_layouts_menu_default .sc_layouts_menu_nav > li li.sfHover > a,
.top_panel_custom .sc_layouts_row .sc_layouts_menu_default .sc_layouts_menu_nav > li li.current-menu-item > a,
.top_panel_custom .sc_layouts_row .sc_layouts_menu_default .sc_layouts_menu_nav > li li.current-menu-parent > a,
.top_panel_custom .sc_layouts_row .sc_layouts_menu_default .sc_layouts_menu_nav > li li.current-menu-ancestor > a {
background-color: var(--bella-tint);
}
/* Same caret as the top level, turned to point at the panel it opens. The
theme's own glyph is dropped so the two levels match. */
.top_panel_custom .sc_layouts_row .sc_layouts_menu_default .sc_layouts_menu_nav li li.menu-item-has-children > a:after {
display: none;
}
.top_panel_custom .sc_layouts_row .sc_layouts_menu_default .sc_layouts_menu_nav li li.menu-item-has-children > a > span {
position: relative;
display: block;
padding-right: 0;
}
.top_panel_custom .sc_layouts_row .sc_layouts_menu_default .sc_layouts_menu_nav li li.menu-item-has-children > a > span:after {
right: -18px;
transform: rotate(-45deg);
}
.top_panel_custom .sc_layouts_row .sc_layouts_menu_default .sc_layouts_menu_nav li li.menu-item-has-children > a:hover > span:after,
.top_panel_custom .sc_layouts_row .sc_layouts_menu_default .sc_layouts_menu_nav li li.menu-item-has-children.sfHover > a > span:after {
right: -20px;
opacity: 1;
transform: rotate(-45deg);
}
.top_panel_custom .sc_layouts_row .sc_layouts_menu_default .sc_layouts_menu_nav > li.sfHover:after {
content: '';
position: absolute;
top: 100%;
left: 0;
right: 0;
height: 40px;
}
/* Superfish fades the panel in by animating opacity; the slide is ours. */
@keyframes bella-submenu-in {
from { transform: translateY(-9px); }
to { transform: none; }
}
@keyframes bella-submenu-in-side {
from { transform: translateX(-9px); }
to { transform: none; }
}
.top_panel_custom .sc_layouts_row .sc_layouts_menu_default .sc_layouts_menu_nav > li.sfHover > ul {
animation: bella-submenu-in .24s cubic-bezier(.22, .61, .36, 1) both;
}
.top_panel_custom .sc_layouts_row .sc_layouts_menu_default .sc_layouts_menu_nav > li li.sfHover > ul {
animation: bella-submenu-in-side .24s cubic-bezier(.22, .61, .36, 1) both;
}
/* Mega menu ("Dịch vụ") */
.top_panel_custom .sc_layouts_row .sc_layouts_menu_default .sc_layouts_menu_nav > li.bella-mm {
position: static;
}
.top_panel_custom .sc_layouts_row .sc_layouts_menu_default .sc_layouts_menu_nav > li.bella-mm > ul {
left: 0;
right: 0;
width: auto;
min-width: 0;
max-width: none;
padding: 22px 16px 16px;
}
.top_panel_custom .sc_layouts_row .sc_layouts_menu_default .sc_layouts_menu_nav > li.bella-mm > ul:after {
content: '';
display: table;
clear: both;
}
/* The bridge across the gap under the row is drawn on the panel here. The
item-width bridge used by the other dropdowns is drawn on the , and a
static has no box of its own to hang it from. Gated on .sfHover, so the
strip only exists while this panel is open. */
.top_panel_custom .sc_layouts_row .sc_layouts_menu_default .sc_layouts_menu_nav > li.bella-mm.sfHover:after {
display: none;
}
.top_panel_custom .sc_layouts_row .sc_layouts_menu_default .sc_layouts_menu_nav > li.bella-mm.sfHover > ul:before {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 100%;
height: 24px;
}
/* Columns */
.top_panel_custom .sc_layouts_row .sc_layouts_menu_default .sc_layouts_menu_nav > li.bella-mm > ul > li {
float: left;
box-sizing: border-box;
width: 25%;
padding: 0 6px;
}
/* Group heading. Uppercase and small: the one real failure of the old menu was
that a heading and a service looked alike, so these are pushed as far from
link-shaped as they go - no hover, no caret, no pointer. */
.top_panel_custom .sc_layouts_row .sc_layouts_menu_default .sc_layouts_menu_nav > li.bella-mm > ul > li.bella-mm-title > a {
display: block;
margin: 0 0 8px;
padding: 0 10px 10px;
border-bottom: 1px solid var(--bella-line);
border-radius: 0;
color: var(--bella-muted);
font-size: 11.5px;
font-weight: 600;
letter-spacing: .08em;
line-height: 1.4;
text-transform: uppercase;
background: none;
cursor: default;
pointer-events: none;
}
.top_panel_custom .sc_layouts_row .sc_layouts_menu_default .sc_layouts_menu_nav > li.bella-mm > ul > li.bella-mm-title > a:hover,
.top_panel_custom .sc_layouts_row .sc_layouts_menu_default .sc_layouts_menu_nav > li.bella-mm > ul > li.bella-mm-title.sfHover > a {
background: none;
}
.top_panel_custom .sc_layouts_row .sc_layouts_menu_default .sc_layouts_menu_nav > li.bella-mm > ul > li.menu-item-has-children > a > span:after {
display: none;
}
.top_panel_custom .sc_layouts_row .sc_layouts_menu_default .sc_layouts_menu_nav > li.bella-mm > ul > li.menu-item-has-children > a {
padding-right: 10px;
}
/* The group's own list: laid out in the column instead of flying out of it. */
.top_panel_custom .sc_layouts_row .sc_layouts_menu_default .sc_layouts_menu_nav > li.bella-mm > ul ul {
display: block !important;
opacity: 1 !important;
position: static;
width: auto;
min-width: 0;
max-width: none;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
animation: none !important;
}
.top_panel_custom .sc_layouts_row .sc_layouts_menu_default .sc_layouts_menu_nav > li.bella-mm > ul ul > li > a {
padding: 8px 10px;
font-size: 15px;
line-height: 1.45;
}
/* ---------------------------------------------------------------------------
* Search and the header button
* ------------------------------------------------------------------------ */
.top_panel_custom .sc_layouts_search .search_modern > .search_submit {
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border: 1px solid var(--bella-line);
border-radius: 50%;
color: var(--bella-ink);
background-color: rgba(255, 255, 255, .5);
transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}
.top_panel_custom .sc_layouts_search .search_modern > .search_submit:hover {
border-color: transparent;
background-color: var(--bella-tint);
color: var(--bella-blue);
}
/* The side-panel toggle some header layouts carry sits next to the search
button; give it the same chip so the pair reads as one control group. */
.top_panel_custom .sc_layouts_row .elementor-widget-icon .elementor-icon {
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border: 1px solid var(--bella-line);
border-radius: 50%;
color: var(--bella-ink);
background-color: rgba(255, 255, 255, .5);
transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}
.top_panel_custom .sc_layouts_row .elementor-widget-icon .elementor-icon:hover {
border-color: transparent;
background-color: var(--bella-tint);
color: var(--bella-blue);
}
.top_panel_custom .sc_layouts_row .sc_layouts_column .sc_layouts_item.elementor-widget-trx_sc_button {
display: none !important;
}
@media (prefers-reduced-motion: reduce) {
.top_panel_custom .sc_layouts_row .sc_layouts_menu_default .sc_layouts_menu_nav > li.sfHover > ul,
.top_panel_custom .sc_layouts_row .sc_layouts_menu_default .sc_layouts_menu_nav > li li.sfHover > ul {
animation: none;
}
.top_panel_custom .sc_layouts_row .sc_layouts_menu_default .sc_layouts_menu_nav > li > a[href*="dat-hen"]:hover {
transform: none;
}
}
/* Fullscreen search overlay */
.search_wrap .search_header_wrap img.logo_image {
filter: brightness(0) invert(1);
max-height: 44px;
width: auto;
opacity: 0.9;
}
/* Mobile menu: touch target height */
.menu_mobile .menu_mobile_nav_area .menu-item > a {
padding-top: 10px !important;
padding-bottom: 10px !important;
}