/* ==========================================================================
   TN Multilang — Frontend Styles
   ========================================================================== */

/* ---- Ẩn Google Translate toolbar mặc định (xấu) ---- */
.goog-te-banner-frame,
.goog-te-balloon-frame,
#goog-gt-tt,
.goog-tooltip,
.goog-tooltip-content,
.goog-te-menu-value:hover,
.skiptranslate iframe,
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf { display: none !important; }

/* Google đẩy body xuống 40px khi dịch — reset lại */
body { top: 0 !important; }

/* Ẩn Google logo nhỏ xuất hiện trên ảnh */
.VIpgJd-ZVi9od-aZ2wEe { display: none !important; }


/* ---- Reset & Variables ---- */
.tn-switcher-wrap,
.tn-floating,
.tn-switcher {
    --tn-bg:          #ffffff;
    --tn-bg-hover:    #f3f4f6;
    --tn-border:      #e5e7eb;
    --tn-text:        #111827;
    --tn-text-muted:  #6b7280;
    --tn-accent:      #2563eb;
    --tn-radius:      8px;
    --tn-shadow:      0 4px 16px rgba(0,0,0,.12);
    --tn-transition:  .15s ease;
    font-family: inherit;
    box-sizing: border-box;
}

/* ---- Floating container ---- */
.tn-floating {
    position: fixed;
    z-index: 99999;
}
.tn-pos-top-right    { top: 20px; right: 20px; }
.tn-pos-top-left     { top: 20px; left:  20px; }
.tn-pos-bottom-right { bottom: 20px; right: 20px; }
.tn-pos-bottom-left  { bottom: 20px; left:  20px; }

/* ========================================================================
   Dropdown Switcher
   ======================================================================== */
.tn-switcher--dropdown {
    position: relative;
    display: inline-block;
}

.tn-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--tn-bg);
    border: 1px solid var(--tn-border);
    border-radius: var(--tn-radius);
    color: var(--tn-text);
    font-size: .9rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color var(--tn-transition), box-shadow var(--tn-transition);
    white-space: nowrap;
    user-select: none;
}

.tn-trigger:hover,
.tn-trigger:focus-visible {
    border-color: var(--tn-accent);
    box-shadow: 0 0 0 3px rgba(37,99,235,.15);
    outline: none;
}

.tn-chevron {
    width: 16px;
    height: 16px;
    color: var(--tn-text-muted);
    transition: transform var(--tn-transition);
    flex-shrink: 0;
}

.tn-switcher--dropdown.tn-open .tn-chevron {
    transform: rotate(180deg);
}

/* Dropdown menu */
.tn-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 160px;
    background: var(--tn-bg);
    border: 1px solid var(--tn-border);
    border-radius: var(--tn-radius);
    box-shadow: var(--tn-shadow);
    list-style: none;
    margin: 0;
    padding: 4px;
    z-index: 9999;
    animation: tnFadeIn .12s ease;
}

.tn-switcher--dropdown.tn-open .tn-menu {
    display: block;
}

@keyframes tnFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.tn-menu li {
    margin: 0;
    padding: 0;
}

.tn-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 12px;
    background: transparent;
    border: none;
    border-radius: calc(var(--tn-radius) - 2px);
    color: var(--tn-text);
    font-size: .9rem;
    cursor: pointer;
    transition: background var(--tn-transition);
    text-align: left;
}

.tn-option:hover,
.tn-option:focus-visible {
    background: var(--tn-bg-hover);
    outline: none;
}

.tn-option.tn-selected {
    color: var(--tn-accent);
    font-weight: 600;
}

.tn-check {
    width: 14px;
    height: 14px;
    margin-left: auto;
    flex-shrink: 0;
}

/* ========================================================================
   Buttons Switcher
   ======================================================================== */
.tn-switcher--buttons {
    display: inline-flex;
    gap: 4px;
    flex-wrap: wrap;
}

.tn-lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: var(--tn-bg);
    border: 1px solid var(--tn-border);
    border-radius: var(--tn-radius);
    color: var(--tn-text);
    font-size: .875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--tn-transition), border-color var(--tn-transition);
    white-space: nowrap;
}

.tn-lang-btn:hover,
.tn-lang-btn:focus-visible {
    background: var(--tn-bg-hover);
    border-color: var(--tn-accent);
    outline: none;
}

.tn-lang-btn.tn-active {
    background: var(--tn-accent);
    border-color: var(--tn-accent);
    color: #fff;
}

/* ========================================================================
   Flags
   ======================================================================== */
.tn-flag {
    font-size: 1.2em;
    line-height: 1;
    display: inline-block;
}

.tn-flag-img {
    width: 20px;
    height: 15px;
    object-fit: cover;
    border-radius: 2px;
    vertical-align: middle;
    flex-shrink: 0;
}

/* ========================================================================
   Loading Overlay
   ======================================================================== */
.tn-translating {
    position: relative;
}

.tn-translating::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,.55);
    backdrop-filter: blur(2px);
    z-index: 99998;
    pointer-events: none;
}

/* Spinner */
.tn-spinner {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100000;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--tn-bg);
    border: 1px solid var(--tn-border);
    border-radius: 50px;
    padding: 10px 20px;
    box-shadow: var(--tn-shadow);
    font-size: .9rem;
    color: var(--tn-text);
    pointer-events: none;
}

.tn-spinner-icon {
    width: 18px;
    height: 18px;
    border: 2px solid var(--tn-border);
    border-top-color: var(--tn-accent);
    border-radius: 50%;
    animation: tnSpin .7s linear infinite;
    flex-shrink: 0;
}

@keyframes tnSpin {
    to { transform: rotate(360deg); }
}

/* ========================================================================
   Nav Menu Integration
   Áp dụng khi switcher nằm trong <li class="tn-menu-item"> hoặc
   <li class="tn-switcher-item"> (Cách 2 — thủ công)
   ======================================================================== */

li.tn-menu-item,
li.tn-switcher-item {
    display:     flex !important;
    align-items: center !important;   /* căn giữa dọc với các item khác */
    padding:     0 !important;
    list-style:  none;
}

/* Switcher bên trong menu — full height để flex centering hoạt động */
li.tn-menu-item .tn-switcher,
li.tn-switcher-item .tn-switcher {
    display:     flex;
    align-items: center;
    height:      100%;
}

/* Trigger trong nav: trong suốt, kế thừa màu chữ của menu */
li.tn-menu-item .tn-trigger,
li.tn-switcher-item .tn-trigger {
    background:    transparent;
    border-color:  rgba(255, 255, 255, .3);
    color:         inherit;
    font-size:     .875rem;
    font-weight:   600;
    padding:       6px 12px;
    gap:           7px;
    letter-spacing: .02em;
}

li.tn-menu-item .tn-trigger:hover,
li.tn-switcher-item .tn-trigger:hover,
li.tn-menu-item .tn-trigger:focus-visible,
li.tn-switcher-item .tn-trigger:focus-visible {
    background:  rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .6);
    box-shadow:  none;
    outline:     none;
}

/* Dropdown mở ra phía dưới nav, nền trắng để dễ đọc */
li.tn-menu-item .tn-menu,
li.tn-switcher-item .tn-menu {
    top:        calc(100% + 6px);
    right:      0;
    left:       auto;
    min-width:  170px;
    background: #ffffff;
    border:     1px solid #e5e7eb;
    z-index:    999999;
}

li.tn-menu-item .tn-option,
li.tn-switcher-item .tn-option {
    color: #111827;
}

li.tn-menu-item .tn-option:hover,
li.tn-switcher-item .tn-option:hover {
    background: #f3f4f6;
}

li.tn-menu-item .tn-option.tn-selected,
li.tn-switcher-item .tn-option.tn-selected {
    color: #2563eb;
}

/* Cờ SVG trong nav — lớn hơn để dễ nhìn */
li.tn-menu-item .tn-flag-img,
li.tn-switcher-item .tn-flag-img {
    width:  24px;
    height: 18px;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(0,0,0,.15);
}

/* Cờ emoji trong nav — tăng size */
li.tn-menu-item .tn-flag,
li.tn-switcher-item .tn-flag {
    font-size: 1.35em;
}

/* Chevron — sáng hơn trên nền tối */
li.tn-menu-item .tn-chevron,
li.tn-switcher-item .tn-chevron {
    color: rgba(255, 255, 255, .7);
}

/* Dropdown options — flag SVG size nhỏ hơn trigger */
li.tn-menu-item .tn-menu .tn-flag-img,
li.tn-switcher-item .tn-menu .tn-flag-img {
    width:  22px;
    height: 16px;
}

/* ========================================================================
   Mobile Menu — Baumeister theme (.mkd-mobile-nav)
   Convert dropdown → 2 nút ngang luôn visible, khớp style menu
   ======================================================================== */

.mkd-mobile-header .mkd-mobile-nav li.tn-switcher-item,
.mkd-mobile-header .mkd-mobile-nav li.tn-menu-item {
    display: block !important;
    padding: 11px 0 !important;
    border-bottom: 1px solid #c5c5c5;
    align-items: unset !important;
}

/* Label nhỏ phía trên */
.mkd-mobile-header .mkd-mobile-nav li.tn-switcher-item::before,
.mkd-mobile-header .mkd-mobile-nav li.tn-menu-item::before {
    content: 'Ngôn ngữ / Language';
    display: block;
    font-size: 10px;
    color: #b0b0b0;
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: 8px;
}

/* Bỏ inline-block của switcher wrapper */
.mkd-mobile-header .mkd-mobile-nav li.tn-switcher-item .tn-switcher--dropdown,
.mkd-mobile-header .mkd-mobile-nav li.tn-menu-item .tn-switcher--dropdown {
    display: block;
    width: 100%;
}

/* Ẩn trigger button — không cần dropdown lồng trong mobile menu */
.mkd-mobile-header .mkd-mobile-nav li.tn-switcher-item .tn-trigger,
.mkd-mobile-header .mkd-mobile-nav li.tn-menu-item .tn-trigger {
    display: none !important;
}

/* Menu luôn visible, layout ngang */
.mkd-mobile-header .mkd-mobile-nav li.tn-switcher-item .tn-menu,
.mkd-mobile-header .mkd-mobile-nav li.tn-menu-item .tn-menu {
    display:   flex !important;
    position:  static !important;
    box-shadow: none !important;
    border:    none !important;
    background: transparent !important;
    padding:   0 !important;
    gap:       8px !important;
    animation: none !important;
    min-width: unset !important;
}

/* li wrapper bên trong menu — bỏ border */
.mkd-mobile-header .mkd-mobile-nav li.tn-switcher-item .tn-menu > li,
.mkd-mobile-header .mkd-mobile-nav li.tn-menu-item .tn-menu > li {
    flex:        1;
    border:      none !important;
    padding:     0 !important;
    margin:      0 !important;
    list-style:  none;
}

/* Nút ngôn ngữ — pill style, chiều rộng đều */
.mkd-mobile-header .mkd-mobile-nav li.tn-switcher-item .tn-option,
.mkd-mobile-header .mkd-mobile-nav li.tn-menu-item .tn-option {
    width:           100%;
    padding:         8px 10px !important;
    border:          1.5px solid #d0d0d0;
    border-radius:   7px;
    background:      transparent;
    color:           #9c9c9c;
    font-size:       .85rem;
    font-weight:     500;
    gap:             7px;
    justify-content: center;
    transition:      background .15s, border-color .15s, color .15s;
}

.mkd-mobile-header .mkd-mobile-nav li.tn-switcher-item .tn-option:hover,
.mkd-mobile-header .mkd-mobile-nav li.tn-menu-item .tn-option:hover {
    background:   rgba(234,10,42,.06);
    border-color: #EA0A2A;
    color:        #EA0A2A;
}

/* Ngôn ngữ đang chọn — đỏ theme */
.mkd-mobile-header .mkd-mobile-nav li.tn-switcher-item .tn-option.tn-selected,
.mkd-mobile-header .mkd-mobile-nav li.tn-menu-item .tn-option.tn-selected {
    background:   #EA0A2A;
    border-color: #EA0A2A;
    color:        #fff;
    font-weight:  600;
}

/* Check icon không cần trong mobile */
.mkd-mobile-header .mkd-mobile-nav .tn-check { display: none !important; }

/* Flag size trong mobile */
.mkd-mobile-header .mkd-mobile-nav .tn-flag-img {
    width: 20px; height: 15px;
}
.mkd-mobile-header .mkd-mobile-nav .tn-flag {
    font-size: 1.1em;
}

/* ========================================================================
   Dark mode support
   ======================================================================== */
@media (prefers-color-scheme: dark) {
    .tn-switcher-wrap,
    .tn-floating,
    .tn-switcher {
        --tn-bg:         #1f2937;
        --tn-bg-hover:   #374151;
        --tn-border:     #374151;
        --tn-text:       #f9fafb;
        --tn-text-muted: #9ca3af;
    }
    .tn-translating::after {
        background: rgba(17,24,39,.55);
    }
}