/* --- CORE VARIABLES --- */
:root {
    --ha-bg-color: #ffffff;
    --ha-text-color: #333333;
    --ha-link-color: #0073aa;
    --ha-primary: #0045ff;
    --ha-font-size: 16px;
}

html { font-size: var(--ha-font-size) !important; }

#ha-widget-wrapper, #ha-widget-wrapper * {
    font-size: 14px !important; line-height: normal !important;
}

/* =================================================================
   DARK MODE LOGIC
   ================================================================= */

body.ha-dark-mode {
    background-color: #121212 !important;
    color: #e0e0e0 !important;
}

/* 1. TÔ ĐEN NỘI DUNG CHÍNH */
body.ha-dark-mode *:not(script):not(style):not(img):not(video):not(iframe):not(svg):not(path):not(circle):not(rect):not(.ha-no-dark):not(#masthead):not(#masthead *):not(#comment):not(.contact-cta):not(.contact-cta *):not(.section-header):not(.section-header *):not(.cttin .col-inner):not(.cttin .col-inner *) {
    background-color: #121212 !important;
    color: #e0e0e0 !important;
    border-color: #333 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    background-image: none !important;
}

/* 2. STYLE CHO LINK CHUNG */
body.ha-dark-mode a:not(.ha-no-dark):not(#masthead a):not(.contact-cta a):not(.section-header a):not(.cttin .col-inner a) {
    color: #8ab4f8 !important;
}

/* 3. STYLE CHO HEADINGS */
body.ha-dark-mode h1:not(.ha-no-dark):not(.contact-cta h1):not(.section-header h1):not(.cttin .col-inner h1), body.ha-dark-mode h1 a:not(.ha-no-dark):not(.contact-cta a):not(.section-header a):not(.cttin .col-inner a),
body.ha-dark-mode h2:not(.ha-no-dark):not(.contact-cta h2):not(.section-header h2):not(.cttin .col-inner h2), body.ha-dark-mode h2 a:not(.ha-no-dark):not(.contact-cta a):not(.section-header a):not(.cttin .col-inner a),
body.ha-dark-mode h3:not(.ha-no-dark):not(.contact-cta h3):not(.section-header h3):not(.cttin .col-inner h3), body.ha-dark-mode h3 a:not(.ha-no-dark):not(.contact-cta a):not(.section-header a):not(.cttin .col-inner a),
body.ha-dark-mode h4:not(.ha-no-dark):not(.contact-cta h4):not(.section-header h4):not(.cttin .col-inner h4), body.ha-dark-mode h4 a:not(.ha-no-dark):not(.contact-cta a):not(.section-header a):not(.cttin .col-inner a),
body.ha-dark-mode h5:not(.ha-no-dark):not(.contact-cta h5):not(.section-header h5):not(.cttin .col-inner h5), body.ha-dark-mode h5 a:not(.ha-no-dark):not(.contact-cta a):not(.section-header a):not(.cttin .col-inner a),
body.ha-dark-mode h6:not(.ha-no-dark):not(.contact-cta h6):not(.section-header h6):not(.cttin .col-inner h6), body.ha-dark-mode h6 a:not(.ha-no-dark):not(.contact-cta a):not(.section-header a):not(.cttin .col-inner a),
body.ha-dark-mode .section-title-main:not(.ha-no-dark):not(.contact-cta .section-title-main):not(.section-header .section-title-main):not(.cttin .col-inner .section-title-main),
body.ha-dark-mode .section-title:not(.ha-no-dark):not(.contact-cta .section-title):not(.section-header .section-title):not(.cttin .col-inner .section-title),
body.ha-dark-mode .title:not(.ha-no-dark):not(.contact-cta .title):not(.section-header .title):not(.cttin .col-inner .title),
body.ha-dark-mode .entry-title:not(.ha-no-dark):not(.contact-cta .entry-title):not(.section-header .entry-title):not(.cttin .col-inner .entry-title),
body.ha-dark-mode .entry-title a:not(.ha-no-dark):not(.contact-cta a):not(.section-header a):not(.cttin .col-inner a),
body.ha-dark-mode .post-title:not(.ha-no-dark):not(.contact-cta .post-title):not(.section-header .post-title):not(.cttin .col-inner .post-title),
body.ha-dark-mode .page-title:not(.ha-no-dark):not(.contact-cta .page-title):not(.section-header .page-title):not(.cttin .col-inner .page-title)
{
    color: #ffffff !important;
    text-decoration: none !important;
    border-bottom: 0 !important;
}

/* 3B. STYLE ĐẶC BIỆT CHO ENTRY-TITLE CÓ CLASS ha-no-dark */
body.ha-dark-mode .entry-title.ha-no-dark,
body.ha-dark-mode .entry-title.ha-no-dark a {
    color: #ffffff !important;
    text-decoration: none !important;
    border-bottom: 0 !important;
}

/* 3C. ĐẢM BẢO MASTHEAD LUÔN MÀU TRẮNG */
#masthead {
    background: #fff !important;
}

/* Ẩn các đường kẻ trang trí Flatsome */
body.ha-dark-mode .section-title b:not(.ha-no-dark),
body.ha-dark-mode .section-title span:not(.ha-no-dark) {
    border-color: #333 !important;
    background-color: #333 !important;
}

/* 4. INPUT FORM (TRỪ #comment) */
body.ha-dark-mode input:not(.ha-no-dark),
body.ha-dark-mode textarea:not(.ha-no-dark):not(#comment),
body.ha-dark-mode select:not(.ha-no-dark) {
    background-color: #222 !important; border: 1px solid #555 !important; color: #fff !important;
}

/* 4B. TEXTAREA COMMENT ĐẶC BIỆT - MÀU TRẮNG */
body.ha-dark-mode textarea#comment {
    background-color: #ffffff !important;
    color: #333333 !important;
    border: 1px solid #ddd !important;
}

/* =================================================================
   UI WIDGET (PROTECTED)
   ================================================================= */

#ha-toggle-btn { background-color: var(--ha-primary) !important; }
#ha-toggle-btn svg, #ha-toggle-btn path { fill: #ffffff !important; stroke: #ffffff !important; }
#ha-tools-panel { background: white !important; }
.ha-tool-btn { background: #f9f9f9 !important; color: #333 !important; }
.ha-tool-btn.active { background: #333 !important; color: #fff !important; }
#ha-font-select { background: #f9f9f9 !important; color: #333 !important; }

/* ================================================================= */
/* CSS CẤU TRÚC (GIỮ NGUYÊN) */
#ha-contrast-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 999990; background: rgba(0,0,0,0); display: none; backdrop-filter: contrast(150%); -webkit-backdrop-filter: contrast(150%); }
body.ha-high-contrast #ha-contrast-overlay { display: block; }
#ha-widget-wrapper { position: fixed; z-index: 999999; display: flex; align-items: center; justify-content: center; }
#ha-widget-wrapper.bottom-right { bottom: 20px; right: 20px; flex-direction: column-reverse; align-items: flex-end; }
#ha-widget-wrapper.bottom-left  { bottom: 20px; left: 20px; flex-direction: column-reverse; align-items: flex-start; }
#ha-widget-wrapper.top-right    { top: 20px; right: 20px; align-items: flex-end; }
#ha-widget-wrapper.top-left     { top: 20px; left: 20px; align-items: flex-start; }
#ha-widget-wrapper.middle-right { top: 50%; right: 20px; transform: translateY(-50%); }
#ha-widget-wrapper.middle-left  { top: 50%; left: 20px; transform: translateY(-50%); }
#ha-toggle-btn { width: 50px; height: 50px; border-radius: 50%; border: none; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease; position: relative; z-index: 2; flex-shrink: 0; }
#ha-toggle-btn svg { width: 28px; height: 28px; }
#ha-toggle-btn:hover { transform: scale(1.1); }
#ha-widget-wrapper.open #ha-toggle-btn { transform: rotate(45deg); }
#ha-tools-panel { padding: 10px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.2); display: flex; flex-direction: column; gap: 8px; width: 80px; opacity: 0; visibility: hidden; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
#ha-font-select { width: 100%; padding: 5px; border: 1px solid #ccc; border-radius: 4px; text-align: center; font-weight: bold; cursor: pointer; height: 35px; }
.ha-tool-btn { width: 100%; height: 35px; border: 1px solid #eee; border-radius: 4px; cursor: pointer; font-weight: bold; font-size: 14px; display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
#ha-widget-wrapper.open:not(.middle-right):not(.middle-left) #ha-tools-panel { opacity: 1; visibility: visible; transform: scale(1); }
#ha-widget-wrapper.bottom-right #ha-tools-panel, #ha-widget-wrapper.bottom-left #ha-tools-panel, #ha-widget-wrapper.top-right #ha-tools-panel, #ha-widget-wrapper.top-left #ha-tools-panel { transform: scale(0.8); }
#ha-widget-wrapper.middle-right #ha-tools-panel { position: absolute; right: 60px; top: 50%; transform: translateY(-50%) scale(0.8) translateX(20px); }
#ha-widget-wrapper.middle-right.open #ha-tools-panel { opacity: 1; visibility: visible; transform: translateY(-50%) scale(1) translateX(0); }
#ha-widget-wrapper.middle-left #ha-tools-panel { position: absolute; left: 60px; top: 50%; transform: translateY(-50%) scale(0.8) translateX(-20px); }
#ha-widget-wrapper.middle-left.open #ha-tools-panel { opacity: 1; visibility: visible; transform: translateY(-50%) scale(1) translateX(0); }