/* CSS for XC Header - Based on User Provided Code */
.main-header__content {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 4px 8px 4px 12px;
}

@media screen and (min-width: 992px) {
    .main-header__content {
        padding-right: 16px;
    }
}

@media screen and (min-width: 1199px) {
    .main-header__content {
        padding: 4px 32px;
    }
}

.main-header-logo {
    display: inline-block;
    width: 86px;
    height: 58px;
    flex-shrink: 0;
}

@media screen and (min-width: 992px) {
    .main-header-logo {
        margin-right: 40px;
    }
}

.main-header-logo img {
    display: block;
    height: 100%;
    width: 100%;
    object-fit: contain;
}

/* Fix Logo Size to match user request */
#logo img {
    max-height: 58px !important;
    /* The user CSS says .main-header-logo has height 58px. 
       Flatsome's #logo img might be overriding. Force it. */
    width: auto !important;
}

/* Navbar Links */
.main-header .navbar-end,
.main-header .navbar-start {
    display: flex;
    align-items: center;
}

.main-header .navbar-start {
    flex: 1;
}

.main-header .navbar-end {
    column-gap: 12px;
}

.main-header .navbar-link {
    border-radius: 6px;
    font-weight: 500 !important;
    color: #334155;
    text-transform: none;
    /* User requested no uppercase for most items? No, "Menu item sống ở vinhomes có background, text in hoa" implies others might not be?
                           Looking at the snippet: class="navbar-link has-text-weight-medium".
                           Flatsome adds uppercase by default to nav-uppercase.
                           I should target the flatsome nav items. */
}

/* Override Flatsome Nav Uppercase for standard items if needed, but user said "Menu item sống ở vinhomes ... text in hoa", implying others are NOT?
   In the user snippet: <a ...>Mua</a>, <a ...>Thuê</a>. They are capitalized but not UPPERCASE.
   Flatsome .nav-uppercase makes them UPPERCASE.
   I should reset text-transform for .header-nav-main > li > a
*/
.header-nav-main.nav-uppercase>li>a {
    text-transform: none;
    font-weight: 600;
    color: #334155;
}

/* Specific Style for "SỐNG Ở VINHOMES" (Menu item 331) */
.song-o-vinhomes>a {
    text-transform: uppercase !important;
    font-weight: 700 !important;
    position: relative;
    padding-right: 0 !important;
    /* To handle custom decoration if any, but user snippet shows it inside <a> */
}

/* User Snippet for "Sống ở Vinhomes":
   <a class="navbar-link ... is-news" ...><span>SỐNG Ở VINHOMES</span> <span class="rhombus-1"></span> ...</a>
   In Flatsome menu, it's just an <a>. I need to apply the styles to the <li> or <a>.
   The user said "Menu item sống ở vinhomes có background, text in hoa.."
   Wait, the snippet has animations and rhombuses for "is-news".
   If I can't change the HTML of the menu item easily (unless I use a custom walker or JS), I might have to simulate it or use CSS pseudo elements.
   But the user provided specific HTML in their request: "học ... <div class="main-header__content">..."
   It seems they might want me to REPLACE the entire header content with their HTML using a block or something?
   "css lại cho headerflatsome" implies styling the EXISTING Flatsome header to match, OR replacing it.
   Given the "buttons mismatch" and "logo size" comments, I should style the Flatsome elements to match.
*/

/* Fix Buttons */
.header-button .button.primary {
    background-color: #f1f5f9 !important;
    /* is-grey in snippet */
    color: #334155 !important;
    border: none !important;
    font-weight: 700 !important;
    text-transform: none !important;
    border-radius: 999px !important;
    box-shadow: none !important;
}

.header-button .button.secondary {
    background-color: #f1f5f9 !important;
    /* is-grey in snippet */
    color: #334155 !important;
    border: none !important;
    font-weight: 700 !important;
    text-transform: none !important;
    border-radius: 999px !important;
    box-shadow: none !important;
}

/* User snippet has "button is-grey".
   .button.is-grey { background:#f1f5f9; }
   Hover: background:#e2e8f0;
*/
.header-button .button:hover {
    background-color: #e2e8f0 !important;
    color: #334155 !important;
}

/* User Account Dropdown - Hover only */
.user-account .dropdown-menu {
    min-width: 248px;
    max-width: 300px;
    right: 0;
    left: auto;
    display: none;
    /* Hide by default */
    position: absolute;
    top: 100%;
    z-index: 1000;
    padding-top: 10px;
    /* Space for hover bridge */
}

.user-account:hover .dropdown-menu {
    display: block;
    /* Show on hover */
}

.user-account-image {
    gap: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    text-decoration: none;
}

.user-account-image .image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #f1f5f9;
    border-radius: 9999px;
    margin: 0;
    color: #aab7ca;
}

.user-account-image .dropdown-icon {
    font-size: 20px;
    color: #334155;
    margin-left: 4px;
}

/* Dropdown Content Box */
.dropdown-content-user-client {
    background-color: #fff;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 12px 0 rgba(28, 30, 34, .08);
    padding: 8px;
}

.dropdown-item {
    font-size: .875rem;
    color: #334155;
    display: block;
    padding: 8px 16px;
    border-radius: 4px;
    transition: background-color .1s ease;
    text-decoration: none;
    font-weight: 600;
}

.dropdown-item:hover {
    background-color: #f1f5f9;
    color: #334155;
}

/* "Sống ở Vinhomes" Special Style */
/* Target the menu item class .song-o-vinhomes added in flatsome menu if possible, or use ID #menu-item-331 */
#menu-item-331>a,
.song-o-vinhomes>a {
    font-weight: 700 !important;
    text-transform: uppercase !important;
    position: relative;
    overflow: visible;
}

/* Yellow Line */
#menu-item-331>a:after,
.song-o-vinhomes>a:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 12px;
    /* Adjust based on line height */
    width: 100%;
    height: 6px;
    background: #f0dbbd;
    z-index: 0;
    animation: 0.8s headerLine 0.2s linear infinite alternate;
}

/* Ensure text is above the line */
#menu-item-331>a>span,
.song-o-vinhomes>a>span {
    z-index: 2;
    position: relative;
}

/* Rhombus 1 (simulated with ::before on a) */
#menu-item-331>a:before,
.song-o-vinhomes>a:before {
    content: "";
    position: absolute;
    top: -2px;
    left: 0;
    width: 24px;
    height: 24px;
    border: 1px solid #d2b589;
    transform: rotate(45deg);
    z-index: 1;
    animation: 1.4s rhombus1 0.1s infinite cubic-bezier(0.4, 0.4, 0.4, 0.4) forwards;
}

/* Rhombus 2 (simulated with ::after on span?) No, span already has content. 
   Can't easily add 2nd rhombus without extra markup. 
   I'll skip Rhombus 2 for now or try to attach to span if flatsome allows. 
   Flatsome `a > span` usually just wraps text. 
   Let's try `a > span::after` for Rhombus 2.
*/
#menu-item-331>a>span::after,
.song-o-vinhomes>a>span::after {
    content: "";
    position: absolute;
    bottom: 3px;
    left: 100%;
    /* Position relative to text end */
    margin-left: -4px;
    /* Adjust */
    width: 8px;
    height: 8px;
    border: 1px solid #d2b589;
    transform: rotate(45deg);
    z-index: 1;
    animation: 2s rhombus2 0.2s infinite cubic-bezier(0.5, 0.5, 0.5, 0.5) forwards;
    /* Adjust position to match design: left 124px in original. Here relative to text. */
}

/* Adjust Flatsome Nav Heights/Padding to match */
.header-nav-main>li>a {
    padding-left: 16px;
    padding-right: 16px;
}

@media screen and (min-width: 992px) {
    .header-main {
        height: auto;
        padding: 10px 0;
    }
}