/* ========== 原始CSS 完全保留基础样式，仅按需求优化 ========== */
        *{box-sizing: border-box;font-family: "Be Vietnam Pro",-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue",Arial,"Noto Sans","Liberation Sans","DejaVu Sans","Noto Sans SC","Microsoft YaHei","PingFang SC",sans-serif;}
        body{background:#f8f4e9;max-width:960px;margin:0 auto;padding:16px;color:#183431;line-height:1.6;}
        .header{background:#0e6b62;color:#fff;padding:20px;border-radius:12px;margin-bottom:20px;}
        h1{margin:0;font-size:22px;}
        .section{background:#fff;border-radius:10px;padding:22px;margin-bottom:28px;border:1px solid #dbe6e1;}
        h2{color:#0e5d58;font-size:18px;margin-top:0;border-left:4px solid #0e6b62;padding-left:10px;}
        .vocab-table{width:100%;border-collapse:collapse;font-size:14px;}
        .vocab-table td,.vocab-table th{border:1px solid #eee;padding:8px;}
        .vocab-table th{background:#eef1ec;}
        .question{margin:16px 0;padding:12px;background:#f8f4e9;border-radius:8px;}
        .opt{margin:6px 0;cursor:pointer;padding:6px;border-radius:6px;}
        .opt:hover{background:#f7e9e7;}
        .ans{margin-top:8px;padding:10px;border-radius:6px;display:none;}
        .correct{background:#e3f3ee;color:#0e5d58;}
        .listen-explain{display:none;margin-top:10px;padding:10px 12px;border-radius:8px;font-size:.92rem;line-height:1.5}
        .listen-explain.show{display:block}
        .listen-explain.ok-box{background:#e3f3ee;color:#0e5d58;border:1px solid #1f8f6f}
        .listen-explain.bad-box{background:#fbe9e6;color:#8a2f22;border:1px solid #b63c2f}
        .wrong{background:#fbe9e6;color:#8a2f22;}
        button{
            background:#0e6b62;color:white;border:none;
            padding:10px 16px;border-radius:8px;cursor:pointer;margin:5px;
            transition:0.22s ease;
            min-height:42px;
            font-size:15px;
        }
        button:hover{background:#0a5049;}
        button:active{transform:scale(0.96);}
        .pinyin{color:#0b4a44;font-weight:bold;}
        .tongue{background:#eef6f3;padding:15px;border-radius:10px;font-size:16px;}
        .audio-tip{
            display: inline-block;
            background: #eef1ec;
            padding:4px 8px;
            border-radius:4px;
            font-size:13px;
            margin-left:10px;
        }
        /* ========== 导航标签栏 ========== */
        .tab-wrap{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:24px;}
        .tab-btn{padding:8px 12px;border-radius:6px;border:none;background:#dbe6e1;color:#0b4a44;cursor:pointer;}
        .tab-btn.active{background:#0e6b62;color:#fff;}
        .tab-content{display:none;}
        .tab-content.active{display:block;}
        /* ========== 汉字学习卡片样式 ========== */
        .char-card{text-align:center;padding:20px;}
        .big-hanzi{font-size:72px;margin:12px 0;}
        .card-nav button{margin:8px;}
        .memory-info{background:#f8f4e9;padding:12px;border-radius:8px;margin-top:12px;text-align:left;}
        /* ========== 3D翻转闪卡【优化后样式】 ========== */
        .flip-container{perspective:1200px;width:100%;max-width:520px;margin:24px auto;height:380px;}
        .flipper{position:relative;width:100%;height:100%;transition:transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);transform-style:preserve-3d;}
        .flip-container.flipped .flipper{transform:rotateY(180deg);}
        .front,.back{
            position:absolute;width:100%;height:100%;backface-visibility:hidden;
            border-radius:18px;padding:32px;display:flex;flex-direction:column;align-items:center;justify-content:center;
            box-shadow: 0 6px 16px rgba(214, 59, 89, 0.15);
        }
        .front{background:#eef6f3;}
        .back{background:#eef1ec;transform:rotateY(180deg);}
        .front .big-hanzi{font-size:86px;margin-bottom:24px;}
        .back .pinyin{font-size:24px;margin-bottom:12px;}
        .back p{margin:8px 0;font-size:16px;line-height:1.7;}
        .flash-btn-group{margin-top:16px;text-align:center;}
        /* ========== 汉字-拼音配对【移除Canvas，点击交互样式】 ========== */
        .match-wrap{display:grid;grid-template-columns:1fr 1fr;gap:24px;min-height:320px;margin-top:16px;}
        .match-item{
            padding:14px 10px;background:#f8f4e9;border-radius:10px;margin:8px 0;
            cursor:pointer;text-align:center;transition: all 0.24s;
            border:2px solid transparent;
        }
        .match-item:hover{background:#eef1ec;}
        .match-item.selected{border-color:#0e6b62;}
        .match-item.correct{background:#e3f3ee;border-color:#1f8f6f;cursor:default;}
        .match-item.wrong{background:#fbe9e6;border-color:#b63c2f;}
        .match-item.locked{pointer-events:none;opacity:0.85;}
        /* ========== 记忆配对游戏 ========== */
        .memory-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:10px;margin:16px 0;}
        .mem-card{height:90px;border-radius:8px;position:relative;cursor:pointer;transform-style:preserve-3d;transition:transform 0.5s;}
        .mem-card.flipped{transform:rotateY(180deg);}
        .mem-front,.mem-back{position:absolute;width:100%;height:100%;display:flex;align-items:center;justify-content:center;border-radius:8px;backface-visibility:hidden;padding:4px;}
        .mem-back{background:#0e6b62;color:#fff;}
        .mem-front{background:#eef6f3;transform:rotateY(180deg);}
        /* ========== 听写输入框 ========== */
        .input-box{width:100%;padding:10px;font-size:18px;border:1px solid #dbe6e1;border-radius:8px;margin:10px 0;}
        /* ========== 学习统计面板 ========== */
        .stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:12px 0;}
        .stat-item{background:#f8f4e9;padding:10px;border-radius:8px;text-align:center;}
        .progress-bar{width:100%;height:12px;background:#eee;border-radius:6px;margin:6px 0;overflow:hidden;}
        .progress-inner{height:100%;background:#0e6b62;width:0%;transition:0.4s;}
        /* ========== 彩带容器 ========== */
        #confettiCanvas{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9999;}
        /* ── HanziWriter containers ── */
        .hanzi-writer-wrap{
            display:flex;justify-content:center;align-items:center;
            flex-wrap:wrap;gap:10px;
            min-height:130px;margin:14px 0 6px;
        }
        .replay-btn{
            background:#eef6f3;color:#0e6b62;
            border:1.5px solid #0e6b62;font-size:13px;
            padding:5px 16px;border-radius:20px;cursor:pointer;
            min-height:32px;margin:4px auto 0;display:block;
            transition:0.2s;
        }
        .replay-btn:hover{background:#0e6b62;color:#fff;}
    
        /* ========== Bổ sung responsive cho điện thoại (chỉ áp dụng ≤600px, không ảnh hưởng desktop) ========== */
        @media (max-width:600px){
            body{padding:10px;}
            .section{padding:14px;}
            .vocab-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;}
            .opt{padding:10px 12px;min-height:44px;display:flex;align-items:center;}
            button{min-height:44px;}
            .tab-btn{min-height:40px;padding:10px 12px;font-size:14px;}
            .big-hanzi{font-size:56px;}
            .front .big-hanzi{font-size:64px;}
            .flip-container{height:320px;}
            .match-wrap{gap:12px;}
            .input-box{font-size:16px;}
        }
    
        .lt-pinyin{color:#b8822f;font-style:italic;font-weight:500;display:block;margin-bottom:2px;font-size:12.5px;}
        .dl-hanzi{font-size:17px;color:#183431;line-height:1.5;}
        .dl-hanzi b{color:#0e5d58;}
.voc-mobile td:first-child{font-size:20px;font-weight:700;color:#0e5d58;}
        .voc-mobile th:nth-child(1),.voc-mobile td:nth-child(1){width:16%;}
        .voc-mobile th:nth-child(2),.voc-mobile td:nth-child(2){width:23%;}
        .voc-mobile th:nth-child(3),.voc-mobile td:nth-child(3){width:19%;}
        .voc-mobile th:nth-child(4),.voc-mobile td:nth-child(4){width:42%;}
        @media (max-width:600px){
            .voc-mobile{white-space:normal;overflow-x:visible;}
            .voc-mobile,.voc-mobile tr,.voc-mobile td{display:block;width:100%;}
            .voc-mobile tr:first-child{display:none;}
            .voc-mobile tr{margin-bottom:10px;border:1px solid #d8d0c1;border-radius:10px;overflow:hidden;padding:6px 0;}
            .voc-mobile td{border:none;padding:6px 12px 6px 42%;position:relative;min-height:20px;}
            .voc-mobile td:before{position:absolute;left:12px;top:6px;width:36%;font-weight:600;color:#a9782f;font-size:12px;}
            .voc-mobile td:nth-of-type(1):before{content:"汉字";}
            .voc-mobile td:nth-of-type(2):before{content:"拼音";}
            .voc-mobile td:nth-of-type(3):before{content:"Từ loại";}
            .voc-mobile td:nth-of-type(4):before{content:"Nghĩa";}
            .voc-mobile td:first-child{font-size:24px;padding-left:42%;}
        }
        .wenben-title{display:flex;align-items:center;gap:8px;font-weight:700;color:#a9782f;font-size:16px;margin-bottom:10px;}
        .wenben-badge{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;background:#c9973d;color:#fff;border-radius:6px;font-size:14px;flex-shrink:0;}
    

        /* ========== Tối ưu thẩm mỹ, pinyin bài khóa và giao diện điện thoại ========== */
        :root{
            --lesson-primary:#0e6b62;
            --lesson-primary-dark:#0a5049;
            --lesson-primary-deep:#0b4a44;
            --lesson-gold:#c9973d;
            --lesson-border:#dbe6e1;
            --lesson-soft:#f8f4e9;
        }
        body{
            background:
                radial-gradient(circle at 100% 0, rgba(14,107,98,0.10), transparent 24rem),
                radial-gradient(circle at 0 100%, rgba(201,151,61,0.08), transparent 22rem),
                #f8f4e9;
        }
        .header{
            position:relative;
            overflow:hidden;
            box-shadow:0 12px 28px rgba(11,74,68,0.18);
            border:1px solid rgba(255,255,255,0.24);
        }
        .header::after{
            content:"";
            position:absolute;
            width:150px;height:150px;border-radius:50%;
            right:-55px;top:-75px;
            background:rgba(255,255,255,0.14);
            pointer-events:none;
        }
        .section{
            box-shadow:0 8px 24px rgba(11,74,68,0.07);
            border-color:var(--lesson-border);
        }
        .tab-wrap{
            position:sticky;top:0;z-index:20;
            padding:9px;
            margin-left:-4px;margin-right:-4px;
            border:1px solid rgba(219,230,225,0.92);
            border-radius:14px;
            background:rgba(248,244,233,0.94);
            box-shadow:0 6px 18px rgba(11,74,68,0.08);
            backdrop-filter:blur(10px);
            -webkit-backdrop-filter:blur(10px);
        }
        .tab-btn{font-weight:600;box-shadow:inset 0 0 0 1px rgba(14,107,98,0.04);}
        .tab-btn.active{box-shadow:0 5px 12px rgba(14,107,98,0.22);}

        /* Pinyin nằm đúng phía trên câu thoại, tên người nói ở cột riêng. */
        .dialogue-line{
            display:grid !important;
            grid-template-columns:max-content minmax(0,1fr);
            grid-template-areas:
                "speaker pinyin"
                "speaker hanzi";
            column-gap:11px;
            row-gap:0;
            align-items:start;
            margin:10px 0 !important;
            padding:11px 13px;
            border:1px solid var(--lesson-border);
            border-radius:12px;
            background:linear-gradient(135deg,#ffffff 0%,#f8f4e9 100%);
            box-shadow:0 3px 10px rgba(11,74,68,0.05);
        }
        .dialogue-line .dl-speaker{
            grid-area:speaker;
            align-self:center;
            color:var(--lesson-primary-deep);
            font-size:15px;
            font-weight:750;
            line-height:1.45;
            white-space:nowrap;
        }
        .dialogue-line .lt-pinyin{
            grid-area:pinyin;
            display:block;
            margin:0 0 1px;
            color:#a9782f;
            font-size:12.5px;
            font-style:normal;
            font-weight:600;
            line-height:1.35;
            letter-spacing:0.01em;
            overflow-wrap:anywhere;
        }
        .dialogue-line .dl-hanzi{
            grid-area:hanzi;
            min-width:0;
            color:#183431;
            font-size:17px;
            line-height:1.55;
            overflow-wrap:anywhere;
        }

        @media (max-width:600px){
            body{padding:8px;line-height:1.55;}
            .header{padding:18px 16px;margin-bottom:14px;border-radius:14px;}
            .header h1{font-size:19px;line-height:1.35;}
            .header p{font-size:13px;margin:7px 0 0;}
            .tab-wrap{
                position:sticky;top:0;
                flex-wrap:nowrap;
                overflow-x:auto;
                gap:7px;
                margin-bottom:16px;
                padding:8px;
                scroll-snap-type:x proximity;
                -webkit-overflow-scrolling:touch;
            }
            .tab-wrap::-webkit-scrollbar{display:none;}
            .tab-btn{
                flex:0 0 auto;
                min-height:42px;
                padding:9px 12px;
                border-radius:9px;
                font-size:13px;
                scroll-snap-align:start;
                white-space:nowrap;
            }
            .section{padding:14px 12px;margin-bottom:16px;border-radius:14px;}
            h2{font-size:17px;line-height:1.4;}
            .dialogue-line{
                grid-template-columns:max-content minmax(0,1fr);
                column-gap:8px;
                padding:10px 9px;
                border-radius:10px;
            }
            .dialogue-line .dl-speaker{font-size:13px;}
            .dialogue-line .lt-pinyin{font-size:12px;line-height:1.3;}
            .dialogue-line .dl-hanzi{font-size:16px;line-height:1.5;}
            .flip-container{max-width:100%;height:300px;}
            .front,.back{padding:20px 14px;}
            .memory-grid{grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px;}
            .mem-card{height:82px;}
        }
        @media (max-width:380px){
            .dialogue-line{
                grid-template-columns:1fr;
                grid-template-areas:"speaker" "pinyin" "hanzi";
                row-gap:2px;
            }
            .dialogue-line .dl-speaker{margin-bottom:2px;}
        }


        /* ========== Mobile refinement: preserve functions, improve narrow screens ========== */
        @media (max-width:600px){
            html,body{width:100%;max-width:100%;overflow-x:hidden;}
            body{padding:8px !important;line-height:1.55;}
            .header{padding:17px 14px !important;margin-bottom:13px !important;border-radius:13px !important;}
            .header h1{font-size:18px !important;line-height:1.38 !important;overflow-wrap:anywhere;}
            .header p{font-size:13px !important;line-height:1.45 !important;margin:7px 0 0 !important;}

            /* Tabs stay visible as a compact two-column grid instead of a horizontal strip. */
            .tab-wrap{
                position:relative !important;top:auto !important;z-index:1 !important;
                display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;
                gap:6px !important;overflow:visible !important;
                margin:0 0 14px !important;padding:6px !important;
                border-radius:12px !important;scroll-snap-type:none !important;
            }
            .tab-btn{
                width:100% !important;min-width:0 !important;min-height:44px !important;
                margin:0 !important;padding:8px 7px !important;border-radius:9px !important;
                white-space:normal !important;font-size:12.5px !important;line-height:1.28 !important;
                text-align:center !important;overflow-wrap:anywhere;
            }

            .section{padding:13px 11px !important;margin-bottom:16px !important;border-radius:11px !important;}
            h2{font-size:16.5px !important;line-height:1.38 !important;padding-left:8px !important;overflow-wrap:anywhere;}
            .replay-btn{max-width:100%;white-space:normal;}

            /* On phones, speaker, pinyin and Hanzi form one readable vertical column. */
            .dialogue-line{
                grid-template-columns:minmax(0,1fr) !important;
                grid-template-areas:"speaker" "pinyin" "hanzi" !important;
                column-gap:0 !important;row-gap:1px !important;
                margin:8px 0 !important;padding:10px 11px !important;border-radius:10px !important;
            }
            .dialogue-line .dl-speaker{
                align-self:start !important;white-space:normal !important;
                font-size:14px !important;line-height:1.35 !important;margin-bottom:2px !important;
            }
            .dialogue-line .lt-pinyin{
                font-size:12.5px !important;line-height:1.38 !important;margin:0 0 1px !important;
                overflow-wrap:anywhere;word-break:normal;
            }
            .dialogue-line .dl-hanzi{
                font-size:17px !important;line-height:1.55 !important;overflow-wrap:anywhere;
            }

            .vocab-table{max-width:100%;}
            .vocab-table:not(.voc-mobile){display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
            .voc-mobile tr{margin-bottom:9px !important;}
            .voc-mobile td{padding-right:10px !important;overflow-wrap:anywhere;}
            .opt{min-height:44px;padding:9px 10px !important;overflow-wrap:anywhere;}
            button{max-width:100%;}
            input,textarea,select{max-width:100%;font-size:16px !important;}
            audio{max-width:100%;}
            img,svg,canvas{max-width:100%;}

            .flip-container{width:100% !important;height:300px !important;margin:16px auto !important;}
            .front,.back{padding:20px 14px !important;}
            .front .big-hanzi{font-size:58px !important;margin-bottom:16px !important;}
            .back .pinyin{font-size:21px !important;}
            .match-wrap{grid-template-columns:1fr 1fr !important;gap:9px !important;min-height:0 !important;}
            .match-item{padding:11px 6px !important;margin:5px 0 !important;overflow-wrap:anywhere;}
            .memory-grid{grid-template-columns:repeat(auto-fill,minmax(72px,1fr)) !important;gap:8px !important;}
            .mem-card{height:78px !important;}
            .stat-row{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:8px !important;}
            .hanzi-writer-wrap{gap:6px !important;overflow:hidden;}
        }
        @media (max-width:350px){
            .tab-wrap{grid-template-columns:1fr !important;}
            .stat-row{grid-template-columns:1fr !important;}
            .match-wrap{gap:6px !important;}
        }


        /* ========== Mobile vocabulary card width fix ========== */
        @media (max-width:600px){
            .voc-mobile{
                display:block !important;width:100% !important;max-width:100% !important;
                overflow:visible !important;white-space:normal !important;table-layout:auto !important;
            }
            .voc-mobile tbody{display:block !important;width:100% !important;}
            .voc-mobile tr{
                display:block !important;width:100% !important;
                margin-bottom:9px !important;padding:5px 0 !important;
            }
            .voc-mobile tr:first-child{display:none !important;}
            .voc-mobile td{
                display:block !important;width:100% !important;box-sizing:border-box !important;
                position:relative !important;min-height:34px !important;
                padding:7px 10px 7px 98px !important;
                white-space:normal !important;word-break:normal !important;overflow-wrap:anywhere !important;
            }
            .voc-mobile td:before{
                left:10px !important;top:7px !important;width:78px !important;
                white-space:normal !important;
            }
            .voc-mobile td:first-child{
                width:100% !important;font-size:22px !important;padding-left:98px !important;
            }
        }