/*
Theme Name: Chọn Giờ Sinh v2
Theme URI: https://chongiosinh.vn
Author: Chọn Giờ Sinh Team
Author URI: https://chongiosinh.vn
Description: Custom WordPress theme for Chọn Giờ Sinh website - Tử Vi và Phong Thủy
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: chongiosinh-v2
Tags: custom, tử vi, phong thủy, astrology

This theme, like WordPress, is licensed under the GPL.
*/

/* ==========================================================================
   BASE STYLES
   ========================================================================== */


/* TikTok Sans — Variable font, Vietnamese subset (~48 KB thay cho 4 file TTF ~700 KB).
   1 file phục vụ mọi weight 100-900 (font-medium 500, font-semibold 600, font-bold 700, ...).
   Source: file do Tier 1 chuẩn bị (api-sonkhiem/images/v1/assets/TikTokSans-VF-vn.woff2).

   font-display: optional — tránh swap-induced CLS/LCP reset. Variable font có metrics
   khác fallback Arial/Helvetica (đặc biệt với Vietnamese diacritics) → swap gây text
   reflow → CLS 0.6+ và LCP 7s+ trên home/gio-tot/lien-he. Với `optional`: nếu font không
   load kịp 100ms block period thì dùng fallback permanent (không swap), font cache cho
   lần load sau. Real user 4G/5G/WiFi (~5Mbps+) load 47KB trong <75ms → vẫn thấy TikTokSans.
   Xem .claude/page-speed-21052026.md P1-1. */
@font-face {
    font-family: 'TikTok Sans';
    src: url('../../../fonts/tiktoksans/TikTokSans-VF-vn.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: optional;
}/* Element Colors */
.hanh-kim {
    color: #999;
}

.hanh-moc {
    color: #28a745;
}

.hanh-thuy {
    color: #333;
}

.hanh-hoa {
    color: #ff0000;
}

.hanh-tho {
    color: #f27200;
}

.bg-hanh-kim {
    background-color: #718096;
}

.bg-hanh-moc {
    background-color: #28a745;
}

.bg-hanh-thuy {
    background-color: #3b82f6;
}

.bg-hanh-hoa {
    background-color: #ef4444;
}

.bg-hanh-tho {
    background-color: #f27200;
}

h2 {
    display: block;
    font-size: 1.5em;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    font-weight: bold;
    unicode-bidi: isolate;
}

h3 {
    display: block;
    font-size: 1.17em;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    unicode-bidi: isolate;
}

/* Mobile Menu */
.mobile-menu-panel {
    display: none;
}


.mobile-menu-panel.active {
    display: block;
}

.mobile-user-menu {
    display: none;
}

.mobile-user-menu.active {
    display: block;
}

/* Link Styles */
header a {
    text-decoration: none;
    color: inherit;
}

header nav a {
    transition: color 0.2s;
}

/* Button Styles */
#site-header button {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

/* ==========================================================================
   LOGO STYLES
   ========================================================================== */

/* Logo dùng <img> trực tiếp (xem header.php + footer.php) — browser preload
   scanner phát hiện img sớm, fetch song song HTML parse → FCP nhanh hơn ~200-500ms
   so với background-image (phải đợi CSS parse + layout). */
#logo,
#footer-logo {
    display: block;
    width: 200px;
    height: 60px;
    object-fit: contain;
}

/* ==========================================================================
   HEADER STYLES
   ========================================================================== */

/* Dropdown Menu */
.dropdown-menu {
    display: none;
}

.dropdown-menu.active {
    display: block;
}

header.bg-white {
    background-color: #fff;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    position: relative;
    width: 100%;
}

/* Login Icon */

#social-login-section button.google-login {
    font-size: 15px;
    border: 1px solid #ccc;
}

#password-field button,
#confirm-password-field button {
    background: transparent;
    border: none;
    padding-right: 10px;
}

/* Tablet and Mobile */
@media (max-width: 768px) {

    /* Form Styles */

    .form-row {
        flex-direction: column;
        gap: 0;
    }

    .form-row .form-group {
        margin-bottom: 1.25rem;
    }
}



/* ==========================================================================
   BLOG STYLES
   ========================================================================== */

.single article,
.page article,
.page .block-menh-khuyet,
.page .checkout-mobile {
    display: block;
    width: 600px;
    margin: 20px auto;
}

article table {
    border-left: 1px solid #ddd !important;
    border-right: 1px solid #ddd !important;
    border-collapse: collapse;
    width: 100%;
    text-align: center;
}

article td,
article th {
    border-top: 1px solid #ddd !important;
    border-bottom: 1px solid #ddd !important;
    border-left: none !important;
    border-right: none !important;
    padding: 8px;
}

article tr:nth-child(even) {
    background-color: #f2f2f2;
}

article tr:hover {
    background-color: #ddd;
}

article th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #04AA6D;
    color: white;
}

.entry-summary {
    background-color: var(--color-gray-100);
    padding: 1.5rem;
    border-radius: 12px;
    position: relative;
    margin-bottom: 20px;
}

.entry-summary-quote-icon {
    position: absolute;
    top: -10px;
    left: 20px;
    z-index: 1;
}

.wp-block-heading {
    margin-top: 20px;
}

.entry-content p {
    margin-bottom: 10px;
}

.entry-content ul,
.entry-content ol {
    margin-bottom: 10px;
    margin-left: 24px;
}

.entry-content ul li {
    margin-bottom: 5px;
    display: list-item;
    list-style: outside disc;
}

figure {
    margin: 20px 0;
}

.entry-content figure img {
    box-sizing: border-box;
    height: auto;
    vertical-align: bottom;
    border-radius: 15px;
    width: calc(100% + 56px) !important;
    margin: 0px -28px 0px;
    max-width: unset;
    border: 1px solid #f5f5f5;
}

.entry-content figure figcaption {
    text-align: center;
    font-style: normal;
}

/* Responsive */
@media (max-width: 768px) {

    article {
        width: 100%;
        margin: 0;
    }

    .single article,
    .page article,
    .page .block-menh-khuyet,
    .page .checkout-mobile {
        width: 100%;
    }

    .entry-content figure img {
        width: 100% !important;
        margin: 0px;
        max-width: unset;
    }

    .entry-meta-wrapper {
        margin-bottom: 20px;
    }
}



/* ==========================================================================
   RESPONSIVE STYLES FOR ADDITIONAL SECTIONS
   ========================================================================== */

@media (max-width: 768px) {

    #luan-giai-toc {
        display: none;
    }
}


/* ==========================================================================
   BREADCRUMBS STYLES
   ========================================================================== */
.rank-math-breadcrumb {
    font-size: 0.9rem;
    color: var(--color-gray-500);
}

#breadcrumbs {
    width: 100%;
    max-width: 1200px;
    margin: 20px auto;
    background-color: var(--color-gray-100);
    padding: 10px 15px;
    border-radius: 5px;
}

.rank-math-breadcrumb p {
    margin: 0;
}

.rank-math-breadcrumb a {
    color: var(--color-gray-600);
    text-decoration: none;
    transition: color 0.2s;
}

.rank-math-breadcrumb a:hover {
    color: var(--color-orange-600);
}

.rank-math-breadcrumb .separator {
    margin: 0 0.5rem;
    color: var(--color-gray-400);
}

/* ==========================================================================
   FONT RESIZER STYLES
   ========================================================================== */

@media (min-width: 768px) {
    .entry-meta-wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1.5rem;
        border-top: 1px solid var(--color-gray-100);
        padding-top: 1rem;
    }

}

/* ==========================================================================
   POST TAGS STYLES
   ========================================================================== */

.resizer-btn {
    background: none;
    border: none;
    padding: 6px 16px;
    border-radius: 9999px;
    color: var(--color-gray-600);
    cursor: pointer;
    transition: all 0.2s;
}

.resizer-btn:hover {
    color: var(--color-blue-600);
}

.resizer-btn.active {
    background-color: var(--color-blue-700);
    color: #fff;
    font-weight: 500;
}

/* Logic classes */
.entry-content.font-size-large {
    font-size: 1.25rem;
    /* ~20px */
    line-height: 1.7;
}

.entry-content.font-size-larger {
    font-size: 1.5rem;
    /* ~24px */
    line-height: 1.6;
}

/* ==========================================================================
   TABLE OF CONTENTS STYLES
   ========================================================================== */
.post-toc {
    border: 2px solid var(--color-blue-700);
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 30px;
    background-color: white;
}

.toc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    margin-bottom: 0;
}

.toc-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #2C3E50;
    text-transform: uppercase;
}

.toc-toggle {
    color: var(--color-blue-700);
    transition: transform 0.3s ease;
}

.post-toc.collapsed .toc-toggle {
    transform: rotate(-90deg);
}

.toc-content {
    margin-top: 16px;
    display: block;
}

.post-toc.collapsed .toc-content {
    display: none;
}

.post-toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: item;
}

.post-toc ul li {
    margin-bottom: 8px;
}

.post-toc ul li a {
    text-decoration: none;
    color: var(--color-gray-700);
    font-weight: 500;
    font-size: 0.95rem;
    transition: color 0.2s;
    line-height: 1.5;
    display: block;
}

.post-toc ul li a:hover {
    color: var(--color-blue-600);
}

/* Nested Counters Logic */
.post-toc>.toc-content>ul>li {
    counter-increment: item;
}

/* Level 2 */
.post-toc ul ul {
    padding-left: 20px;
    margin-top: 6px;
    counter-reset: subitem;
}

.post-toc ul ul li {
    counter-increment: subitem;
    margin-bottom: 6px;
}

.post-toc ul ul li a {
    font-size: 0.9rem;
    font-weight: 400;
}

/* Level 3 */
.post-toc ul ul ul {
    padding-left: 20px;
    counter-reset: subsubitem;
}

.post-toc ul ul ul li {
    counter-increment: subsubitem;
}

.post-toc ul ul ul li a::before {
    content: counter(item) "." counter(subitem) "." counter(subsubitem) ". ";
}

/* ==========================================================================
   MOBILE STICKY TOC STYLES
   ========================================================================== */
.mobile-sticky-toc {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: white;
    z-index: 9999;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    /* display: none handled by JS/Media Query */
}

/* Ensure it's hidden on desktop even if JS sets block */
@media (min-width: 769px) {
    .mobile-sticky-toc {
        display: none !important;
    }
}

.mobile-toc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--color-gray-200);
}

.mobile-toc-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--color-gray-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 10px;
    max-width: 90%;
}

.mobile-toc-toggle {
    color: var(--color-gray-500);
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
}

/* Rotate arrow when expanded */
.mobile-sticky-toc.expanded .mobile-toc-toggle {
    transform: rotate(180deg);
}

.mobile-toc-content {
    display: none;
    max-height: 60vh;
    overflow-y: auto;
    padding: 16px;
    background-color: white;
    border-top: 1px solid var(--color-gray-100);
}

.mobile-sticky-toc.expanded .mobile-toc-content {
    display: block;
}

/* Reuse basic list styles but override some spacing */
.mobile-toc-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
    /* Reset counters again for this clone */
}

.mobile-toc-content ul li {
    margin-bottom: 10px;
    margin-block-start: 0px;
    margin-block-end: 0px;
}

.mobile-toc-content ul li a {
    text-decoration: none;
    color: var(--color-gray-700);
    font-size: 0.9rem;
    display: block;
    line-height: 1.4;
}

/* Remove CSS counters from mobile view if too cluttered, or keep them. 
   Let's keep them but adjust padding if needed. */
.mobile-toc-content ul {
    padding-left: 0;
}

.mobile-toc-content ul ul {
    padding-left: 15px;
    margin-top: 5px;
}

/* ==========================================================================
   CATEGORY PAGE STYLES
   ========================================================================== */



.form-title {
    color: var(--primary-color);
    margin-bottom: 2rem;
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 20px;
}

.form-group {
    margin-bottom: 1.25rem;
}

.form-group label,
.form-group legend {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #495057;
    font-size: 15px;
    border: none;
}

.form-input,
.form-select {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ced4da;
    border-radius: 4px;
    line-height: 1.5;
    background-color: #fff;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-input::placeholder {
    color: #adb5bd;
}

.form-input:focus,
.form-select:focus {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.25);
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 15px;
}

.form-row .form-group {
    flex: 1 1 0;
    min-width: 120px;
    margin-bottom: 0;
}

fieldset {
    border: none;
    padding: 0;
}

.submit-btn {
    width: 100%;
    padding: 0.8rem 1rem;
    background-color: #FF8C42;
    border: none;
    border-radius: 4px;
    color: white;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
}

.submit-btn:hover {
    background-color: #FF6B1A;
}

/* Account Menu Styles */

.account-menu-item.active {
    background-color: #e0e7ff;
    color: #3730a3;
    font-weight: 600;
}


/* Typography cho HTML content trả về từ API (luận giải nguyệt/tiểu/đại vận, FAQ).
   Tailwind v4 preflight reset list-style và margins → cần bring back để render đúng. */
.format-html-content ul {
    list-style: disc;
    padding-left: 1.5rem;
    margin: 0.5rem 0;
}

.format-html-content ol {
    list-style: decimal;
    padding-left: 1.5rem;
    margin: 0.5rem 0;
}

.format-html-content li {
    margin-bottom: 0.4rem;
}

.format-html-content li:last-child {
    margin-bottom: 0;
}

.format-html-content p {
    margin-bottom: 0.75rem;
}

.format-html-content p:last-child {
    margin-bottom: 0;
}


.kk-star-ratings .kksr-legend {
    font-size: 15px !important;
}





/* Mobile: hiển thị short, ẩn full */
#excerpt-desktop-full {
    display: none;
}

#excerpt-short {
    display: block;
    font-size: 0.875rem;
    text-align: justify;
}

#excerpt-full-mobile {
    display: none;
    font-size: 0.875rem;
    text-align: justify;
}

@media (min-width: 768px) {
    #excerpt-short {
        display: none !important;
    }

    #excerpt-full-mobile {
        display: none !important;
    }

    #excerpt-desktop-full {
        display: block;
    }
}

/* Tools widget: mobile compact / desktop full */
.tools-mobile-row {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.tools-desktop-row {
    display: none;
}

@media (min-width: 768px) {
    .tools-mobile-row {
        display: none;
    }

    .tools-desktop-row {
        display: block;
    }
}


/* Footer Icons */
.footer-icon-location {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 25 25' fill='none'><path d='M6.66602 10.4289C6.66602 7.43058 9.27769 5 12.4993 5C15.721 5 18.3327 7.43058 18.3327 10.4289C18.3327 13.4036 16.4709 16.8749 13.5661 18.1163C12.8889 18.4057 12.1098 18.4057 11.4326 18.1163C8.52781 16.8749 6.66602 13.4036 6.66602 10.4289Z' stroke='%230066B2' stroke-width='1.5'/><path d='M14.1673 9.99967C14.1673 10.9201 13.4211 11.6663 12.5007 11.6663C11.5802 11.6663 10.834 10.9201 10.834 9.99967C10.834 9.0792 11.5802 8.33301 12.5007 8.33301C13.4211 8.33301 14.1673 9.0792 14.1673 9.99967Z' stroke='%230066B2' stroke-width='1.5'/><path d='M19.9665 15.417C20.5209 15.9191 20.8327 16.485 20.8327 17.0837C20.8327 19.1547 17.1017 20.8337 12.4993 20.8337C7.89698 20.8337 4.16602 19.1547 4.16602 17.0837C4.16602 16.485 4.47778 15.9191 5.03224 15.417' stroke='%230066B2' stroke-width='1.5' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 25px;
    height: 25px;
    display: inline-block;
    flex-shrink: 0;
}

.footer-icon-phone {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'><path d='M13.5996 4C13.5996 4 15.3596 4.16 17.5996 6.4C19.8396 8.64 19.9996 10.4 19.9996 10.4' stroke='%230066B2' stroke-width='1.5' stroke-linecap='round'/><path d='M13.7656 6.82812C13.7656 6.82812 14.5576 7.0544 15.7455 8.24234C16.9335 9.43028 17.1597 10.2222 17.1597 10.2222' stroke='%230066B2' stroke-width='1.5' stroke-linecap='round'/><path d='M10.4297 6.65255L10.9489 7.58289C11.4175 8.42247 11.2294 9.52387 10.4914 10.2618C10.4914 10.2619 10.4914 10.2618 10.4914 10.2619C10.4913 10.262 9.59633 11.1571 11.2192 12.78C12.8415 14.4022 13.7366 13.5087 13.7374 13.5078C13.7374 13.5078 13.7374 13.5078 13.7374 13.5078C14.4754 12.7699 15.5768 12.5818 16.4163 13.0503L17.3467 13.5695C18.6145 14.2771 18.7642 16.055 17.6498 17.1694C16.9802 17.839 16.1599 18.36 15.2531 18.3944C13.7266 18.4522 11.1342 18.0659 8.53377 15.4654C5.93331 12.865 5.54698 10.2726 5.60485 8.74608C5.63923 7.83929 6.16025 7.019 6.82985 6.34939C7.94421 5.23503 9.72215 5.38476 10.4297 6.65255Z' stroke='%230066B2' stroke-width='1.5' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 25px;
    height: 25px;
    display: inline-block;
    flex-shrink: 0;
}

.footer-icon-email {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'><path d='M16.8 7.28125C17.8401 7.38356 18.5402 7.61477 19.0627 8.13731C20 9.07457 20 10.5831 20 13.6001C20 16.617 20 18.1255 19.0627 19.0628C18.1255 20.0001 16.617 20.0001 13.6 20.0001H10.4C7.38301 20.0001 5.87452 20.0001 4.93726 19.0628C4 18.1255 4 16.617 4 13.6001C4 10.5831 4 9.07457 4.93726 8.13731C5.4598 7.61477 6.15991 7.38356 7.2 7.28125' stroke='%230066B2' stroke-width='1.5'/><path d='M10.4004 7.2002H13.6004' stroke='%230066B2' stroke-width='1.5' stroke-linecap='round'/><path d='M11.1992 9.59961H12.7992' stroke='%230066B2' stroke-width='1.5' stroke-linecap='round'/><path d='M8.92634 11.8393L8.63848 11.5994C7.93073 11.0096 7.57686 10.7147 7.38804 10.3116C7.19922 9.90842 7.19922 9.44778 7.19922 8.5265V8C7.19922 6.11438 7.19922 5.17157 7.78501 4.58579C8.37079 4 9.3136 4 11.1992 4H12.7992C14.6848 4 15.6276 4 16.2134 4.58579C16.7992 5.17157 16.7992 6.11438 16.7992 8V8.5265C16.7992 9.44778 16.7992 9.90842 16.6104 10.3116C16.4216 10.7147 16.0677 11.0096 15.36 11.5994L15.0721 11.8393C13.6028 13.0637 12.8681 13.6759 11.9992 13.6759C11.1303 13.6759 10.3956 13.0637 8.92634 11.8393Z' stroke='%230066B2' stroke-width='1.5' stroke-linecap='round'/><path d='M7.19922 10.4004L8.92634 11.8397C10.3956 13.0641 11.1303 13.6763 11.9992 13.6763C12.8681 13.6763 13.6028 13.0641 15.0721 11.8397L16.7992 10.4004' stroke='%230066B2' stroke-width='1.5' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 25px;
    height: 25px;
    display: inline-block;
    flex-shrink: 0;
}

.heart-icon {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'><path d='M2 9.1371C2 14 6.01943 16.5914 8.96173 18.9109C10 19.7294 11 20.5 12 20.5C13 20.5 14 19.7294 15.0383 18.9109C17.9806 16.5914 22 14 22 9.1371C22 4.27416 16.4998 0.825464 12 5.50063C7.50016 0.825464 2 4.27416 2 9.1371Z' fill='%23ff0000'/></svg>");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 15px 15px;
    width: 16px;
    height: 16px;
    display: inline-block;
    top: 3px;
    position: relative;
}