/*
Theme Name: Mona Theme
Theme URI: #
Description: Hơn 10+ năm mang đến giải pháp cho các doanh nghiệp, để khách hàng có thể có những phương án Kinh Doanh, Marketing, Quản lý phù hợp nhất cho doanh nghiệp của mình
Author: MONA.Media / Website
Author URI: https://mona.media/
Version: 4.4.0
Tags: fluid-layout, responsive-layout, accessibility-ready, translation-ready, microformats, rtl-language-support
Text Domain: monamedia
*/

.dim .dim-panel {
    position: relative;
    min-height: 24rem;
}

.dim .dim-panel::before,
.dim .dim-panel::after {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.dim .dim-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.72);
    z-index: 2;
}

.dim .dim-panel::after {
    content: "";
    position: absolute;
    top: 4rem;
    left: 50%;
    width: 3.6rem;
    height: 3.6rem;
    margin-left: -1.8rem;
    border: 0.3rem solid rgba(29, 144, 201, 0.18);
    border-top-color: #1d90c9;
    border-radius: 50%;
    animation: mona-dim-loading 0.8s linear infinite;
    z-index: 3;
}

.dim .dim-panel.is-loading::before,
.dim .dim-panel.is-loading::after {
    opacity: 1;
}

.dim .dim-panel.is-loading > * {
    opacity: 0.35;
    transition: opacity 0.25s ease;
}

.dim.is-loading .dim-item,
.dim.is-loading .prd-item {
    pointer-events: none;
    cursor: progress;
}

.dim-loadmore {
    display: flex;
    justify-content: center;
    margin-top: 4rem;
}

.dim-loadmore_btn {
    appearance: none;
    border: 0.1rem solid var(--color-pri);
    background: var(--color-pri);
    color: var(--color-white);
    cursor: pointer;
    padding: 1.2rem 2.4rem;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.3;
    transition: 0.3s ease;
    border-radius: 999rem;
}

@media screen and (min-width: 1201px) {
    .dim-loadmore_btn:hover {
        background: transparent;
        color: var(--color-pri);
    }
}

.dim-loadmore_btn:disabled {
    opacity: 0.6;
    cursor: wait;
}

mark.mona-mark-cyan,
mark.mona-mark-yellow,
mark.mona-mark-green {
    color: inherit;
    padding: 0 0.12em;
    border-radius: 0.2em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

mark.mona-mark-cyan {
    background-color: #00ffff;
}

mark.mona-mark-yellow {
    background-color: #ffff00;
}

mark.mona-mark-green {
    background-color: #00ff00;
}

@keyframes mona-dim-loading {
    to {
        transform: rotate(360deg);
    }
}

.abb .abb-content {
    position: relative;
    min-height: 24rem;
}

.abb .abb-content::before,
.abb .abb-content::after {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.abb .abb-content::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.72);
    z-index: 2;
}

.abb .abb-content::after {
    content: "";
    position: absolute;
    top: 4rem;
    left: 50%;
    width: 3.6rem;
    height: 3.6rem;
    margin-left: -1.8rem;
    border: 0.3rem solid rgba(29, 144, 201, 0.18);
    border-top-color: #1d90c9;
    border-radius: 50%;
    animation: mona-abb-loading 0.8s linear infinite;
    z-index: 3;
}

.abb .abb-content.is-loading::before,
.abb .abb-content.is-loading::after {
    opacity: 1;
}

.abb .abb-content.is-loading > * {
    opacity: 0.35;
    transition: opacity 0.25s ease;
}

.abb.is-loading .number-item {
    pointer-events: none;
    cursor: progress;
}

@keyframes mona-abb-loading {
    to {
        transform: rotate(360deg);
    }
}

/**
 * Language popup (secondary list) fix.
 *
 * Base theme CSS (common.css) hides `.lang-list--sec .lang-item span:last-child`
 * and only reveals it for the first item — a rule meant for items that have two
 * spans (code + name). Our items render a single `.lang-code` span, which is both
 * first- and last-child, so every item after the first was hidden. Keep the code
 * visible for all items.
 */
.lang-list.lang-list--sec .lang-item .lang-code {
    display: block !important;
}

/**
 * Highlight the active UI-translation language so the currently applied
 * choice is visually distinguishable from the rest of the column.
 */
.lang-list.lang-list--sec .lang-item.is-active .lang-code {
    font-weight: 700;
}

/**
 * Country items: flag first, then code, with a uniform flag size and a
 * consistent gap so larger source images (e.g. the UK flag) don't blow up
 * the row height.
 */
.lang-list .country-item {
    width:100%;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.lang-list .country-item img {
    flex: 0 0 auto;
    width: 24px;
    height: 16px;
    object-fit: cover;
    border-radius: 2px;
}

/**
 * Force LTR layout for all languages (theme is not designed for RTL).
 * Backs up the language_attributes filter that rewrites <html dir> to ltr,
 * in case is_rtl() still adds a body.rtl class or pulls RTL stylesheets.
 */
html[dir="rtl"],
body.rtl {
    direction: ltr !important;
}

body.rtl {
    text-align: left;
}

/**
 * GTranslate overflow safety layer.
 *
 * Scoped to the translated state only (Google adds .translated-ltr /
 * .translated-rtl to <html> while a translation is active), so the original,
 * untranslated design is left untouched. Translated strings are often longer
 * and overflow fixed-size / clipped containers — these rules let text wrap,
 * stop truncation, and let buttons grow vertically.
 *
 * Note: this cannot fix every case (e.g. a parent with a hard `height` +
 * `overflow:hidden`); those need per-component tweaks.
 */
html.translated-ltr h1, html.translated-rtl h1,
html.translated-ltr h2, html.translated-rtl h2,
html.translated-ltr h3, html.translated-rtl h3,
html.translated-ltr h4, html.translated-rtl h4,
html.translated-ltr h5, html.translated-rtl h5,
html.translated-ltr h6, html.translated-rtl h6,
html.translated-ltr p,  html.translated-rtl p,
html.translated-ltr a,  html.translated-rtl a,
html.translated-ltr li, html.translated-rtl li,
html.translated-ltr span, html.translated-rtl span,
html.translated-ltr button, html.translated-rtl button,
html.translated-ltr [class*="title-"], html.translated-rtl [class*="title-"],
html.translated-ltr .btn, html.translated-rtl .btn {
    white-space: normal !important;
    text-overflow: clip !important;
    overflow-wrap: break-word;
    word-break: break-word;
    -webkit-line-clamp: unset !important;
}

/* Buttons / pill controls: grow to fit instead of clipping. */
html.translated-ltr .btn, html.translated-rtl .btn,
html.translated-ltr button, html.translated-rtl button,
html.translated-ltr [class*="btn"], html.translated-rtl [class*="btn"] {
    height: auto !important;
    min-height: 0;
}

/**
 * Hide GTranslate / Google Translate UI artifacts: loading spinner, top banner,
 * "Google Translate" logo and the hover tooltip. Covers both the legacy
 * (.goog-te-*) and the current (.VIpgJd-*) Google Translate widget markup.
 * These classes only exist while a translation is active, so hiding them is safe.
 */
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
iframe.skiptranslate,
.goog-te-spinner-pos,
.goog-te-spinner,
.goog-te-gadget-icon,
.goog-te-balloon-frame,
#goog-gt-tt,
.goog-tooltip,
.goog-tooltip:hover,
.VIpgJd-ZVi9od-ORHb-OEVmcd,
.VIpgJd-ZVi9od-l4eHX-hSRGPd,
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf,
.VIpgJd-ZVi9od-aZ2wEe-OiiCO {
    display: none !important;
    visibility: hidden !important;
}

/* Google shifts the page down for its banner; keep it in place. */
body {
    top: 0 !important;
    position: static !important;
}

/* Remove the highlight box Google adds over translated text. */
.goog-text-highlight {
    background: none !important;
    box-shadow: none !important;
}