<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Featured &#8211; Nhật Phúc</title>
	<atom:link href="https://nhatphuc.com/danh-muc/featured/feed/" rel="self" type="application/rss+xml" />
	<link>https://nhatphuc.com</link>
	<description></description>
	<lastBuildDate>Fri, 11 Jul 2025 07:05:48 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.8.2</generator>

<image>
	<url>https://nhatphuc.com/wp-content/uploads/2019/08/favicon-75x75.png</url>
	<title>Featured &#8211; Nhật Phúc</title>
	<link>https://nhatphuc.com</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>Quy tắc bàn tay trái</title>
		<link>https://nhatphuc.com/quy-tac-ban-tay-trai/</link>
					<comments>https://nhatphuc.com/quy-tac-ban-tay-trai/#respond</comments>
		
		<dc:creator><![CDATA[Linh Nguyễn]]></dc:creator>
		<pubDate>Fri, 11 Jul 2025 07:05:48 +0000</pubDate>
				<category><![CDATA[Khám phá]]></category>
		<category><![CDATA[Featured]]></category>
		<guid isPermaLink="false">https://nhatphuc.com/?p=17351</guid>

					<description><![CDATA[<p>Mô hình 3D tương tác giúp bạn hiểu rõ quy tắc bàn tay trái của [&#8230;]</p>
<p>The post <a rel="nofollow" href="https://nhatphuc.com/quy-tac-ban-tay-trai/">Quy tắc bàn tay trái</a> appeared first on <a rel="nofollow" href="https://nhatphuc.com">Nhật Phúc</a>.</p>
]]></description>
										<content:encoded><![CDATA[<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Khám phá Quy tắc bàn tay trái của Fleming một cách trực quan với mô hình 3D. Tương tác để hiểu rõ mối quan hệ giữa Lực từ, Dòng điện và Từ trường.">
    <style>
        :root {
            --bg-color: #111827;
            --card-bg-color: #1f2937;
            --text-color: #d1d5db;
            --text-muted: #9ca3af;
            --border-color: #374151;
            --content-h-color: #ffffff;
            --accent-color: #38bdf8;
            --force-color: #f87171; /* Red for Force */
            --field-color: #34d399; /* Green for Magnetic Field */
            --current-color: #f59e0b; /* Amber for Current */
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
            background-color: var(--bg-color);
            color: var(--text-color);
            margin: 0;
            padding: 0;
            line-height: 1.7;
            overflow-x: hidden;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem;
        }

        header {
            text-align: center;
            margin-bottom: 3rem;
        }

        header h1 {
            font-size: 2.75rem;
            font-weight: 800;
            color: var(--content-h-color);
            margin-bottom: 0.5rem;
        }

        header p {
            font-size: 1.125rem;
            color: var(--text-muted);
            max-width: 700px;
            margin: 0 auto;
        }

        .main-layout {
            display: grid;
            grid-template-columns: 1fr;
            gap: 2rem;
            margin-bottom: 4rem;
        }

        @media (min-width: 992px) {
            .main-layout {
                grid-template-columns: 1fr 400px;
            }
        }

        #scene-container {
            position: relative;
            width: 100%;
            min-height: 450px;
            height: 500px;
            background-color: #0d1117;
            border-radius: 1rem;
            border: 1px solid var(--border-color);
            overflow: hidden;
        }
        
        canvas {
            display: block;
        }

        .controls-and-explanation {
            background-color: var(--card-bg-color);
            border-radius: 1rem;
            padding: 1.5rem;
            border: 1px solid var(--border-color);
        }

        .controls-and-explanation h2 {
            margin-top: 0;
            font-size: 1.5rem;
            color: var(--content-h-color);
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 1rem;
            margin-bottom: 1.5rem;
        }

        .control-group {
            margin-bottom: 1.5rem;
        }

        .control-group label {
            display: block;
            font-weight: 600;
            margin-bottom: 0.75rem;
            font-size: 1rem;
        }
        
        .control-group .label-b { color: var(--field-color); }
        .control-group .label-i { color: var(--current-color); }

        .slider {
            -webkit-appearance: none;
            width: 100%;
            height: 8px;
            border-radius: 5px;
            background: #374151;
            outline: none;
            opacity: 0.9;
            transition: opacity .2s;
        }
        .slider:hover { opacity: 1; }
        .slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            cursor: pointer;
        }
        .slider::-moz-range-thumb {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            cursor: pointer;
        }
        #field-slider::-webkit-slider-thumb { background: var(--field-color); }
        #field-slider::-moz-range-thumb { background: var(--field-color); }
        #current-slider::-webkit-slider-thumb { background: var(--current-color); }
        #current-slider::-moz-range-thumb { background: var(--current-color); }

        .explanation-section {
            margin-top: 2rem;
        }
        
        .explanation-section h3 {
            color: var(--accent-color);
            margin-bottom: 0.5rem;
        }

        .explanation-section ul {
            list-style: none;
            padding: 0;
        }
        .explanation-section ul li {
            margin-bottom: 0.75rem;
            padding-left: 1.5rem;
            position: relative;
        }
        .explanation-section ul li::before {
            content: '■';
            position: absolute;
            left: 0;
            font-size: 1rem;
        }
        .li-force::before { color: var(--force-color); }
        .li-field::before { color: var(--field-color); }
        .li-current::before { color: var(--current-color); }

        .formula {
            background-color: var(--bg-color);
            padding: 1rem;
            border-radius: 0.5rem;
            font-family: 'Courier New', Courier, monospace;
            font-size: 1.1rem;
            text-align: center;
            border: 1px solid var(--border-color);
            margin-top: 1rem;
            overflow-x: auto;
        }

        /* Article Section Styles */
        .article-section {
            background-color: var(--card-bg-color);
            border-radius: 1rem;
            padding: 2.5rem;
            border: 1px solid var(--border-color);
        }
        .article-section h2 {
            text-align: left;
            font-size: 2rem;
            color: var(--accent-color);
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 1rem;
            margin-bottom: 1.5rem;
        }
        .article-section h3 {
            text-align: left;
            font-size: 1.5rem;
            color: var(--content-h-color);
            margin-top: 2rem;
            margin-bottom: 1rem;
        }
        .article-section p {
            color: var(--text-color);
            margin-bottom: 1rem;
        }
        .article-section ul {
            list-style-type: disc;
            padding-left: 20px;
        }
        .article-section li {
            margin-bottom: 0.5rem;
        }
        .article-section a {
            color: var(--accent-color-hover);
            text-decoration: none;
        }
        .article-section a:hover {
            text-decoration: underline;
        }
        .article-section blockquote {
            border-left: 4px solid var(--accent-color);
            padding-left: 1rem;
            margin-left: 0;
            font-style: italic;
            color: var(--text-muted);
        }

        footer {
            text-align: center;
            margin-top: 4rem;
            color: var(--text-muted);
            font-size: 0.875rem;
        }
    </style>
</head>
<body>

    <div class="container">
        <header>
            <p>Mô hình 3D tương tác giúp bạn hiểu rõ quy tắc bàn tay trái của Fleming để xác định chiều của lực điện từ.</p>
        </header>

        <div class="main-layout">
            <div id="scene-container">
                <!-- 3D Scene will be rendered here -->
            </div>
            <div class="controls-and-explanation">
                <h2>Bảng điều khiển & Giải thích</h2>
                <div class="control-group">
                    <label for="field-slider" class="label-b">Chiều Từ trường (B)</label>
                    <input type="range" min="-180" max="180" value="0" class="slider" id="field-slider">
                </div>
                <div class="control-group">
                    <label for="current-slider" class="label-i">Chiều Dòng điện (I)</label>
                    <input type="range" min="-180" max="180" value="0" class="slider" id="current-slider">
                </div>
                
                <div class="explanation-section">
                    <h3>Quy ước</h3>
                    <p>Đặt bàn tay trái sao cho các đường sức từ hướng vào lòng bàn tay, chiều từ cổ tay đến ngón giữa là chiều dòng điện, khi đó ngón tay cái choãi ra 90° chỉ chiều của lực điện từ.</p>
                    <ul>
                        <li class="li-force"><strong>Ngón cái:</strong> Chiều của Lực từ (F).</li>
                        <li class="li-field"><strong>Ngón trỏ:</strong> Chiều của Từ trường (B).</li>
                        <li class="li-current"><strong>Ngón giữa:</strong> Chiều của Dòng điện (I).</li>
                    </ul>
                    <p>Quy tắc này dựa trên công thức Lực Lorentz:</p>
                    <div class="formula">
                        <b>F</b> = I(<b>L</b> × <b>B</b>)
                    </div>
                </div>
            </div>
        </div>

        <section class="article-section">
            <h2>Tìm hiểu sâu hơn về Quy tắc Bàn tay trái</h2>
            
            <h3>Quy tắc Bàn tay trái là gì?</h3>
            <p>Quy tắc bàn tay trái, hay còn gọi là quy tắc bàn tay trái của Fleming, là một quy tắc ghi nhớ đơn giản trong vật lý học. Nó được kỹ sư và nhà vật lý học người Anh <strong>John Ambrose Fleming</strong> phát minh vào cuối thế kỷ 19. Mục đích chính của quy tắc này là để xác định nhanh chiều của lực cơ học (chuyển động) sinh ra khi một dòng điện chạy qua một dây dẫn đặt trong từ trường. Đây là nguyên lý cơ bản đằng sau hoạt động của các động cơ điện.</p>
            
            <h3>Phát biểu và cách áp dụng</h3>
            <p>Để áp dụng quy tắc, bạn xòe bàn tay trái và đặt các ngón tay theo quy ước sau:</p>
            <blockquote>Đặt bàn tay trái sao cho các đường sức từ (từ trường) hướng vào lòng bàn tay, chiều từ cổ tay đến ngón giữa là chiều của dòng điện. Khi đó, ngón cái choãi ra 90 độ sẽ chỉ chiều của lực điện từ tác dụng lên dây dẫn.</blockquote>
            <ul>
                <li><strong>Lòng bàn tay:</strong> Hứng các đường sức từ (vector cảm ứng từ <b>B</b>). Chiều của từ trường được quy ước đi từ cực Bắc (N) đến cực Nam (S) của nam châm.</li>
                <li><strong>Chiều từ cổ tay đến ngón giữa:</strong> Theo chiều của dòng điện (<b>I</b>). Chiều dòng điện được quy ước là chiều dịch chuyển của các điện tích dương, tức là đi từ cực dương (+) đến cực âm (-) của nguồn điện.</li>
                <li><strong>Ngón cái choãi ra 90°:</strong> Chỉ chiều của lực điện từ (<b>F</b>) tác dụng lên đoạn dây dẫn.</li>
            </ul>

            <h3>Cơ sở vật lý của quy tắc</h3>
            <p>Quy tắc bàn tay trái không phải là một định luật vật lý, mà là một cách diễn giải trực quan của <strong>Lực Lorentz</strong>. Biểu thức toán học của lực từ tác dụng lên một đoạn dây dẫn có chiều dài L, mang dòng điện I và đặt trong từ trường B là:</p>
            <div class="formula">
                <b>F</b> = I(<b>L</b> × <b>B</b>)
            </div>
            <p>Trong đó:</p>
            <ul>
                <li><b>F</b>: là vector lực điện từ.</li>
                <li><b>I</b>: là cường độ dòng điện.</li>
                <li><b>L</b>: là vector có độ dài bằng chiều dài đoạn dây dẫn và có hướng theo chiều dòng điện.</li>
                <li><b>B</b>: là vector cảm ứng từ.</li>
                <li><b>×</b>: là ký hiệu của phép nhân có hướng (tích vector).</li>
            </ul>
            <p>Kết quả của phép nhân có hướng (<b>L</b> × <b>B</b>) là một vector (chính là <b>F</b>) có phương vuông góc với cả hai vector <b>L</b> và <b>B</b>. Quy tắc bàn tay trái chính là cách để xác định nhanh chiều của vector kết quả này.</p>

            <h3>Phân biệt với Quy tắc Bàn tay phải</h3>
            <p>Cần lưu ý không nhầm lẫn Quy tắc Bàn tay trái với <a href="#">Quy tắc Bàn tay phải</a>. Mặc dù cả hai đều liên quan đến điện từ, chúng được dùng cho hai trường hợp trái ngược nhau:</p>
            <ul>
                <li><strong>Quy tắc Bàn tay trái:</strong> Dùng cho <strong>động cơ điện</strong>. Xác định chiều của <strong>lực (chuyển động)</strong> khi biết chiều dòng điện và từ trường.</li>
                <li><strong>Quy tắc Bàn tay phải:</strong> Dùng cho <strong>máy phát điện</strong>. Xác định chiều của <strong>dòng điện cảm ứng</strong> khi biết chiều chuyển động của dây dẫn và chiều từ trường.</li>
            </ul>
        </section>

    </div>

    <footer>
        <p>Dựa trên nội dung từ Wikipedia. Mô hình 3D được phát triển bởi Gemini.</p>
    </footer>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>

    <script>
        // --- Basic setup ---
        const scene = new THREE.Scene();
        const container = document.getElementById('scene-container');
        const camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);
        camera.position.set(0, 1.5, 4);

        const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(container.clientWidth, container.clientHeight);
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setClearColor(0x111827); // Match background color
        container.appendChild(renderer.domElement);

        const controls = new THREE.OrbitControls(camera, renderer.domElement);
        controls.enableDamping = true;
        controls.minDistance = 2;
        controls.maxDistance = 10;
        
        // --- Lighting ---
        const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
        scene.add(ambientLight);
        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
        directionalLight.position.set(5, 10, 7.5);
        scene.add(directionalLight);

        // --- Vector variables ---
        const origin = new THREE.Vector3(0, 0, 0);
        const length = 2;
        const forceVec = new THREE.Vector3(0, 1, 0);
        const fieldVec = new THREE.Vector3(1, 0, 0);
        const currentVec = new THREE.Vector3(0, 0, 1);

        // --- Arrow Helpers ---
        const forceArrow = new THREE.ArrowHelper(forceVec.clone().normalize(), origin, length, 0xf87171, 0.4, 0.2);
        const fieldArrow = new THREE.ArrowHelper(fieldVec.clone().normalize(), origin, length, 0x34d399, 0.4, 0.2);
        const currentArrow = new THREE.ArrowHelper(currentVec.clone().normalize(), origin, length, 0xf59e0b, 0.4, 0.2);
        scene.add(forceArrow, fieldArrow, currentArrow);
        
        // --- Labels ---
        function createLabel(text, color) {
            const div = document.createElement('div');
            div.style.color = color;
            div.style.fontWeight = 'bold';
            div.style.fontSize = '24px';
            div.style.position = 'absolute';
            div.style.textShadow = '0 0 5px rgba(0,0,0,0.7)';
            div.textContent = text;
            div.style.pointerEvents = 'none'; // Make labels non-interactive
            return div;
        }

        const forceLabel = createLabel('F (Lực)', '#f87171');
        const fieldLabel = createLabel('B (Từ trường)', '#34d399');
        const currentLabel = createLabel('I (Dòng điện)', '#f59e0b');
        container.appendChild(forceLabel);
        container.appendChild(fieldLabel);
        container.appendChild(currentLabel);

        // --- UI Controls ---
        const fieldSlider = document.getElementById('field-slider');
        const currentSlider = document.getElementById('current-slider');

        fieldSlider.addEventListener('input', updateVectors);
        currentSlider.addEventListener('input', updateVectors);

        function updateVectors() {
            // Get angles from sliders
            const fieldAngle = THREE.MathUtils.degToRad(fieldSlider.value);
            const currentAngle = THREE.MathUtils.degToRad(currentSlider.value);

            // Update Field Vector (rotates on XZ plane)
            fieldVec.set(Math.cos(fieldAngle), 0, Math.sin(fieldAngle));
            
            // Update Current Vector (rotates on YZ plane)
            currentVec.set(0, Math.sin(currentAngle), Math.cos(currentAngle));

            // Ensure they are not parallel to avoid a zero-length force vector
            if (Math.abs(fieldVec.dot(currentVec)) > 0.995) {
                 currentVec.set(0, Math.sin(currentAngle + 0.1), Math.cos(currentAngle + 0.1));
            }
            
            // Calculate Force Vector (Cross Product)
            forceVec.crossVectors(currentVec, fieldVec);

            // Update Arrow Helpers
            forceArrow.setDirection(forceVec.clone().normalize());
            fieldArrow.setDirection(fieldVec.clone().normalize());
            currentArrow.setDirection(currentVec.clone().normalize());
        }

        // --- Animation Loop ---
        function animate() {
            requestAnimationFrame(animate);
            controls.update();

            // Update label positions
            updateLabelPosition(forceLabel, forceArrow.position, forceArrow.cone.position);
            updateLabelPosition(fieldLabel, fieldArrow.position, fieldArrow.cone.position);
            updateLabelPosition(currentLabel, currentArrow.position, currentArrow.cone.position);

            renderer.render(scene, camera);
        }
        
        function updateLabelPosition(label, arrowPosition, conePosition) {
            const pos = new THREE.Vector3().addVectors(arrowPosition, conePosition);
            pos.project(camera);
            const x = (pos.x * 0.5 + 0.5) * container.clientWidth;
            const y = (pos.y * -0.5 + 0.5) * container.clientHeight;
            label.style.transform = `translate(-50%, -50%) translate(${x}px, ${y}px)`;
        }

        // --- Handle Window Resize ---
        window.addEventListener('resize', () => {
            const width = container.clientWidth;
            const height = container.clientHeight;
            camera.aspect = width / height;
            camera.updateProjectionMatrix();
            renderer.setSize(width, height);
        });

        // --- Initial Call ---
        updateVectors();
        animate();

    </script>
</body>
</html>
<p>The post <a rel="nofollow" href="https://nhatphuc.com/quy-tac-ban-tay-trai/">Quy tắc bàn tay trái</a> appeared first on <a rel="nofollow" href="https://nhatphuc.com">Nhật Phúc</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://nhatphuc.com/quy-tac-ban-tay-trai/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Bảng động từ bất quy tắc chính xác và đầy đủ nhất</title>
		<link>https://nhatphuc.com/380-dong-tu-bat-quy-tac/</link>
					<comments>https://nhatphuc.com/380-dong-tu-bat-quy-tac/#respond</comments>
		
		<dc:creator><![CDATA[Linh Nguyễn]]></dc:creator>
		<pubDate>Fri, 11 Jul 2025 05:07:44 +0000</pubDate>
				<category><![CDATA[Featured]]></category>
		<category><![CDATA[Khám phá]]></category>
		<category><![CDATA[Học tiếng Anh]]></category>
		<guid isPermaLink="false">https://nhatphuc.com/?p=17346</guid>

					<description><![CDATA[<p>Học thông minh hơn với phương pháp Lặp lại Ngắt quãng (Spaced Repetition). Công cụ [&#8230;]</p>
<p>The post <a rel="nofollow" href="https://nhatphuc.com/380-dong-tu-bat-quy-tac/">Bảng động từ bất quy tắc chính xác và đầy đủ nhất</a> appeared first on <a rel="nofollow" href="https://nhatphuc.com">Nhật Phúc</a>.</p>
]]></description>
										<content:encoded><![CDATA[<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Công cụ học động từ bất quy tắc thông minh với thuật toán lặp lại ngắt quãng (Spaced Repetition) và tự động lưu tiến độ. Tối ưu hóa việc ghi nhớ dài hạn.">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        :root {
            --bg-color: #111827;
            --card-bg-color: #1f2937;
            --text-color: #d1d5db;
            --text-muted: #9ca3af;
            --border-color: #374151;
            --content-h-color: #ffffff;
            --accent-color: #38bdf8;
            --accent-color-hover: #7dd3fc;
            --success-color: #22c55e;
            --error-color: #ef4444;
            --warning-color: #f59e0b;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            margin: 0;
            padding: 2rem 1rem;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
        }

        h1, h2 {
            color: var(--content-h-color);
            text-align: center;
        }
        
        h1 {
            font-size: 2.5rem;
            font-weight: 800;
            background: linear-gradient(to right, var(--accent-color), #a855f7);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 1rem;
        }
        
        .tool-description {
            text-align: center;
            color: var(--text-muted);
            margin-bottom: 3rem;
            font-size: 1.125rem;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }

        .verb-trainer {
            background-color: var(--card-bg-color);
            border-radius: 1rem;
            padding: 2.5rem;
            border: 1px solid var(--border-color);
            box-shadow: 0 10px 25px rgba(0,0,0,0.3);
            margin-bottom: 4rem;
            position: relative;
        }

        .verb-card {
            background-color: var(--bg-color);
            color: var(--accent-color-hover);
            font-size: 3rem;
            font-weight: 700;
            text-align: center;
            padding: 2rem;
            border-radius: 0.75rem;
            margin-bottom: 1.5rem;
            border: 1px dashed var(--border-color);
            min-height: 80px;
        }

        .srs-info {
            text-align: center;
            font-size: 0.9rem;
            color: var(--text-muted);
            margin-bottom: 2rem;
            min-height: 1.2em;
        }

        .input-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1.5rem;
        }

        .input-group {
            display: flex;
            flex-direction: column;
        }

        .input-group label {
            font-size: 0.875rem;
            font-weight: 500;
            color: var(--text-muted);
            margin-bottom: 0.5rem;
        }

        .input-group input {
            background-color: #374151;
            border: 2px solid var(--border-color);
            color: var(--text-color);
            padding: 0.75rem 1rem;
            border-radius: 0.5rem;
            font-size: 1rem;
            transition: all 0.2s;
        }

        .input-group input:focus {
            outline: none;
            border-color: var(--accent-color);
            box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.3);
        }
        
        .input-group input.correct { border-color: var(--success-color); }
        .input-group input.incorrect { border-color: var(--error-color); }
        
        .feedback {
            margin-top: 1rem;
            font-size: 0.875rem;
            visibility: hidden;
            height: 1.2em;
        }
        
        .feedback.correct { color: var(--success-color); visibility: visible; }
        .feedback.incorrect { color: var(--error-color); visibility: visible; }

        .button-group {
            margin-top: 2rem;
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            justify-content: center;
        }

        .btn {
            padding: 0.75rem 1.5rem;
            border: none;
            border-radius: 0.5rem;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            text-decoration: none;
            display: inline-block;
            text-align: center;
        }
        .btn:disabled { opacity: 0.6; cursor: not-allowed; }

        .btn-primary { background-color: var(--accent-color); color: var(--bg-color); }
        .btn-primary:hover:not(:disabled) {
            background-color: var(--accent-color-hover);
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(56, 189, 248, 0.2);
        }

        .btn-secondary { background-color: var(--border-color); color: var(--text-color); }
        .btn-secondary:hover:not(:disabled) { background-color: #4b5563; }
        
        .btn-danger { background-color: #4a1d2d; color: #f87171; border: 1px solid #ef4444; }
        .btn-danger:hover:not(:disabled) { background-color: #ef4444; color: white; }

        #reset-btn {
            position: absolute;
            top: 1rem;
            right: 1rem;
            padding: 0.4rem 0.8rem;
            font-size: 0.8rem;
        }

        .progress-container { margin-top: 2rem; }
        .progress-text {
            display: flex;
            justify-content: space-between;
            color: var(--text-muted);
            font-size: 0.875rem;
            margin-bottom: 0.5rem;
        }
        .progress-bar-bg {
            width: 100%; height: 10px;
            background-color: var(--border-color);
            border-radius: 5px; overflow: hidden;
        }
        .progress-bar {
            width: 0%; height: 100%;
            background-color: var(--accent-color);
            border-radius: 5px;
            transition: width 0.5s ease;
        }

        .verb-list-section {
            background-color: var(--card-bg-color);
            border-radius: 1rem;
            padding: 2.5rem;
            border: 1px solid var(--border-color);
        }

        .verb-table-container { overflow-x: auto; }
        .verb-table { width: 100%; border-collapse: collapse; margin-top: 1.5rem; }
        .verb-table th, .verb-table td {
            padding: 0.75rem 1rem;
            text-align: left;
            border-bottom: 1px solid var(--border-color);
        }
        .verb-table th { color: var(--accent-color); font-size: 0.875rem; text-transform: uppercase; font-weight: 600; }
        .verb-table tbody tr:hover { background-color: #2a374a; }

        footer { text-align: center; margin-top: 4rem; color: var(--text-muted); font-size: 0.875rem; }
        footer a { color: var(--accent-color); text-decoration: none; }
        footer a:hover { text-decoration: underline; }
    </style>
</head>
<body>

    <div class="container">
        <header>
            <p class="tool-description">Học thông minh hơn với phương pháp <strong>Lặp lại Ngắt quãng (Spaced Repetition)</strong>. Công cụ sẽ tự động lưu tiến độ và nhắc lại các từ bạn hay quên.</p>
        </header>

        <main>
            <section class="verb-trainer">
                <button id="reset-btn" class="btn btn-danger">Xóa tiến độ</button>
                <div id="verb-card" class="verb-card">Đang tải...</div>
                <div id="srs-info" class="srs-info"></div>

                <div class="input-grid">
                    <div class="input-group">
                        <label for="past-input">Quá khứ (V2)</label>
                        <input type="text" id="past-input" autocomplete="off" spellcheck="false">
                        <div class="feedback" id="past-feedback"></div>
                    </div>
                    <div class="input-group">
                        <label for="participle-input">Quá khứ Phân từ (V3)</label>
                        <input type="text" id="participle-input" autocomplete="off" spellcheck="false">
                        <div class="feedback" id="participle-feedback"></div>
                    </div>
                    <div class="input-group">
                        <label for="meaning-input">Nghĩa Tiếng Việt</label>
                        <input type="text" id="meaning-input" autocomplete="off">
                         <div class="feedback" id="meaning-feedback"></div>
                    </div>
                </div>

                <div class="button-group">
                    <button id="check-btn" class="btn btn-primary">Kiểm tra</button>
                    <button id="reveal-btn" class="btn btn-secondary">Xem đáp án</button>
                    <button id="next-btn" class="btn btn-secondary">Từ tiếp theo</button>
                </div>

                <div class="progress-container">
                    <div class="progress-text">
                        <span id="progress-label">Tiến độ ghi nhớ</span>
                        <span id="progress-counter">0/0</span>
                    </div>
                    <div class="progress-bar-bg">
                        <div id="progress-bar" class="progress-bar"></div>
                    </div>
                </div>
            </section>

            <section id="verb-list" class="verb-list-section">
                <h2>Danh sách Động từ Bất quy tắc (Đầy đủ)</h2>
                <div class="verb-table-container">
                    <table class="verb-table">
                        <thead>
                            <tr>
                                <th>Nguyên thể (V1)</th>
                                <th>Quá khứ (V2)</th>
                                <th>QK Phân từ (V3)</th>
                                <th>Nghĩa</th>
                            </tr>
                        </thead>
                        <tbody id="verb-table-body"></tbody>
                    </table>
                </div>
            </section>
        </main>
    </div>

    <script>
    document.addEventListener('DOMContentLoaded', () => {
        // --- DATA: Danh sách động từ đã được hợp nhất và bổ sung ---
        const masterVerbsList = `[
            {"v1":"abide","v2":"abode/abided","v3":"abode/abided","mean":"lưu trú, tuân theo, chịu đựng"},
            {"v1":"arise","v2":"arose","v3":"arisen","mean":"phát sinh, nổi dậy, nổi lên"},
            {"v1":"awake","v2":"awoke","v3":"awoken","mean":"đánh thức, thức giấc"},
            {"v1":"backslide","v2":"backslid","v3":"backslidden/backslid","mean":"tái phạm"},
            {"v1":"be","v2":"was/were","v3":"been","mean":"thì, là, bị, ở"},
            {"v1":"bear","v2":"bore","v3":"borne/born","mean":"mang, chịu đựng, sinh sản"},
            {"v1":"beat","v2":"beat","v3":"beaten/beat","mean":"đánh, đập"},
            {"v1":"become","v2":"became","v3":"become","mean":"trở nên, trở thành"},
            {"v1":"befall","v2":"befell","v3":"befallen","mean":"xảy đến"},
            {"v1":"beget","v2":"begot","v3":"begotten/begot","mean":"gây ra, sinh ra"},
            {"v1":"begin","v2":"began","v3":"begun","mean":"bắt đầu"},
            {"v1":"behold","v2":"beheld","v3":"beheld","mean":"ngắm nhìn"},
            {"v1":"bend","v2":"bent","v3":"bent","mean":"bẻ cong, uốn cong"},
            {"v1":"bereave","v2":"bereft/bereaved","v3":"bereft/bereaved","mean":"cướp đi, tước đoạt"},
            {"v1":"beseech","v2":"besought/beseeched","v3":"besought/beseeched","mean":"van xin"},
            {"v1":"beset","v2":"beset","v3":"beset","mean":"bao quanh"},
            {"v1":"bespeak","v2":"bespoke","v3":"bespoken","mean":"chứng tỏ"},
            {"v1":"bet","v2":"bet/betted","v3":"bet/betted","mean":"đánh cược, cá cược"},
            {"v1":"bid","v2":"bid","v3":"bid","mean":"trả giá, ra lệnh"},
            {"v1":"bide","v2":"bided/bode","v3":"bided/bidden","mean":"chờ đợi, chịu đựng"},
            {"v1":"bind","v2":"bound","v3":"bound","mean":"buộc, trói"},
            {"v1":"bite","v2":"bit","v3":"bitten","mean":"cắn, ngoạm"},
            {"v1":"bleed","v2":"bled","v3":"bled","mean":"chảy máu"},
            {"v1":"bless","v2":"blessed/blest","v3":"blessed/blest","mean":"ban phúc"},
            {"v1":"blow","v2":"blew","v3":"blown","mean":"thổi"},
            {"v1":"break","v2":"broke","v3":"broken","mean":"đập vỡ, làm gãy"},
            {"v1":"breed","v2":"bred","v3":"bred","mean":"nuôi, dạy dỗ, sinh sản"},
            {"v1":"bring","v2":"brought","v3":"brought","mean":"mang đến, mang lại"},
            {"v1":"broadcast","v2":"broadcast/broadcasted","v3":"broadcast/broadcasted","mean":"phát thanh, phát sóng"},
            {"v1":"browbeat","v2":"browbeat","v3":"browbeaten/browbeat","mean":"hăm dọa"},
            {"v1":"build","v2":"built","v3":"built","mean":"xây dựng"},
            {"v1":"burn","v2":"burnt/burned","v3":"burnt/burned","mean":"đốt, cháy"},
            {"v1":"burst","v2":"burst","v3":"burst","mean":"nổ tung, vỡ òa"},
            {"v1":"bust","v2":"busted/bust","v3":"busted/bust","mean":"làm bể, bắt giữ"},
            {"v1":"buy","v2":"bought","v3":"bought","mean":"mua"},
            {"v1":"can","v2":"could","v3":"","mean":"có thể"},
            {"v1":"cast","v2":"cast","v3":"cast","mean":"ném, tung, đúc"},
            {"v1":"catch","v2":"caught","v3":"caught","mean":"bắt, chụp"},
            {"v1":"chide","v2":"chid/chided","v3":"chid/chidden/chided","mean":"mắng chửi, trách mắng"},
            {"v1":"choose","v2":"chose","v3":"chosen","mean":"chọn, lựa"},
            {"v1":"clap","v2":"clapped/clapt","v3":"clapped/clapt","mean":"vỗ tay, đặt mạnh"},
            {"v1":"cleave","v2":"clove/cleft/cleaved","v3":"cloven/cleft/cleaved","mean":"chẻ, tách hai"},
            {"v1":"cling","v2":"clung","v3":"clung","mean":"bám víu, dính chặt"},
            {"v1":"clothe","v2":"clothed/clad","v3":"clothed/clad","mean":"mặc quần áo, che phủ"},
            {"v1":"come","v2":"came","v3":"come","mean":"đến, đi đến"},
            {"v1":"cost","v2":"cost","v3":"cost","mean":"có giá là, trị giá"},
            {"v1":"creep","v2":"crept","v3":"crept","mean":"bò, trườn, lẻn"},
            {"v1":"crossbreed","v2":"crossbred","v3":"crossbred","mean":"cho lai giống"},
            {"v1":"crow","v2":"crew/crewed","v3":"crowed","mean":"gáy (gà)"},
            {"v1":"cut","v2":"cut","v3":"cut","mean":"cắt, chặt"},
            {"v1":"daydream","v2":"daydreamed/daydreamt","v3":"daydreamed/daydreamt","mean":"nghĩ vẩn vơ, mơ mộng"},
            {"v1":"deal","v2":"dealt","v3":"dealt","mean":"giao thiệp, chia bài"},
            {"v1":"dig","v2":"dug","v3":"dug","mean":"đào, xới"},
            {"v1":"disprove","v2":"disproved","v3":"disproved/disproven","mean":"bác bỏ"},
            {"v1":"dive","v2":"dove/dived","v3":"dived","mean":"lặn, lao xuống"},
            {"v1":"do","v2":"did","v3":"done","mean":"làm, hành động"},
            {"v1":"draw","v2":"drew","v3":"drawn","mean":"vẽ, kéo"},
            {"v1":"dream","v2":"dreamt/dreamed","v3":"dreamt/dreamed","mean":"mơ thấy"},
            {"v1":"drink","v2":"drank","v3":"drunk","mean":"uống"},
            {"v1":"drive","v2":"drove","v3":"driven","mean":"lái xe"},
            {"v1":"dwell","v2":"dwelt/dwelled","v3":"dwelt/dwelled","mean":"trú ngụ, ở"},
            {"v1":"eat","v2":"ate","v3":"eaten","mean":"ăn"},
            {"v1":"fall","v2":"fell","v3":"fallen","mean":"ngã, rơi"},
            {"v1":"feed","v2":"fed","v3":"fed","mean":"cho ăn, nuôi"},
            {"v1":"feel","v2":"felt","v3":"felt","mean":"cảm thấy"},
            {"v1":"fight","v2":"fought","v3":"fought","mean":"chiến đấu"},
            {"v1":"find","v2":"found","v3":"found","mean":"tìm thấy"},
            {"v1":"fit","v2":"fitted/fit","v3":"fitted/fit","mean":"làm vừa vặn, phù hợp"},
            {"v1":"flee","v2":"fled","v3":"fled","mean":"chạy trốn"},
            {"v1":"fling","v2":"flung","v3":"flung","mean":"tung, quăng, ném"},
            {"v1":"fly","v2":"flew","v3":"flown","mean":"bay"},
            {"v1":"forbear","v2":"forbore","v3":"forborne","mean":"nhịn, kiêng"},
            {"v1":"forbid","v2":"forbade/forbad","v3":"forbidden","mean":"cấm, cấm đoán"},
            {"v1":"forecast","v2":"forecast/forecasted","v3":"forecast/forecasted","mean":"dự báo"},
            {"v1":"forego","v2":"forewent","v3":"foregone","mean":"bỏ, kiêng"},
            {"v1":"foresee","v2":"foresaw","v3":"foreseen","mean":"thấy trước"},
            {"v1":"foretell","v2":"foretold","v3":"foretold","mean":"đoán trước"},
            {"v1":"forget","v2":"forgot","v3":"forgotten","mean":"quên"},
            {"v1":"forgive","v2":"forgave","v3":"forgiven","mean":"tha thứ"},
            {"v1":"forsake","v2":"forsook","v3":"forsaken","mean":"ruồng bỏ"},
            {"v1":"freeze","v2":"froze","v3":"frozen","mean":"(làm) đông lại"},
            {"v1":"frostbite","v2":"frostbit","v3":"frostbitten","mean":"bỏng lạnh"},
            {"v1":"get","v2":"got","v3":"got/gotten","mean":"có được, lấy được"},
            {"v1":"gild","v2":"gilt/gilded","v3":"gilt/gilded","mean":"mạ vàng"},
            {"v1":"gird","v2":"girt/girded","v3":"girt/girded","mean":"đeo vào, bao quanh"},
            {"v1":"give","v2":"gave","v3":"given","mean":"cho"},
            {"v1":"go","v2":"went","v3":"gone","mean":"đi"},
            {"v1":"grind","v2":"ground","v3":"ground","mean":"nghiền, xay"},
            {"v1":"grow","v2":"grew","v3":"grown","mean":"mọc, trồng"},
            {"v1":"hand-feed","v2":"hand-fed","v3":"hand-fed","mean":"cho ăn bằng tay"},
            {"v1":"handwrite","v2":"handwrote","v3":"handwritten","mean":"viết tay"},
            {"v1":"hang","v2":"hung","v3":"hung","mean":"treo, móc lên"},
            {"v1":"have","v2":"had","v3":"had","mean":"có"},
            {"v1":"hear","v2":"heard","v3":"heard","mean":"nghe"},
            {"v1":"heave","v2":"hove/heaved","v3":"hove/heaved","mean":"trục lên, ném"},
            {"v1":"hew","v2":"hewed","v3":"hewn/hewed","mean":"chặt, đốn"},
            {"v1":"hide","v2":"hid","v3":"hidden","mean":"giấu, trốn, ẩn nấp"},
            {"v1":"hit","v2":"hit","v3":"hit","mean":"đánh, đụng"},
            {"v1":"hold","v2":"held","v3":"held","mean":"giữ, cầm, nắm"},
            {"v1":"hurt","v2":"hurt","v3":"hurt","mean":"làm đau, làm tổn thương"},
            {"v1":"inbreed","v2":"inbred","v3":"inbred","mean":"lai giống cận huyết"},
            {"v1":"inlay","v2":"inlaid","v3":"inlaid","mean":"cẩn, khảm"},
            {"v1":"input","v2":"input/inputted","v3":"input/inputted","mean":"đưa vào (dữ liệu)"},
            {"v1":"inset","v2":"inset","v3":"inset","mean":"dát, ghép"},
            {"v1":"interbreed","v2":"interbred","v3":"interbred","mean":"giao phối, lai giống"},
            {"v1":"interweave","v2":"interwove/interweaved","v3":"interwoven/interweaved","mean":"trộn lẫn, xen lẫn"},
            {"v1":"interwind","v2":"interwound","v3":"interwound","mean":"cuộn vào, quấn vào"},
            {"v1":"jerry-build","v2":"jerry-built","v3":"jerry-built","mean":"xây dựng cẩu thả"},
            {"v1":"keep","v2":"kept","v3":"kept","mean":"giữ"},
            {"v1":"kneel","v2":"knelt/kneeled","v3":"knelt/kneeled","mean":"quỳ"},
            {"v1":"knit","v2":"knit/knitted","v3":"knit/knitted","mean":"đan"},
            {"v1":"know","v2":"knew","v3":"known","mean":"biết, quen biết"},
            {"v1":"lade","v2":"laded","v3":"laden/laded","mean":"chất hàng"},
            {"v1":"lay","v2":"laid","v3":"laid","mean":"đặt, để"},
            {"v1":"lead","v2":"led","v3":"led","mean":"dẫn dắt, lãnh đạo"},
            {"v1":"lean","v2":"leaned/leant","v3":"leaned/leant","mean":"dựa, tựa, nghiêng"},
            {"v1":"leap","v2":"leapt/leaped","v3":"leapt/leaped","mean":"nhảy, nhảy qua"},
            {"v1":"learn","v2":"learnt/learned","v3":"learnt/learned","mean":"học, được biết"},
            {"v1":"leave","v2":"left","v3":"left","mean":"rời đi, để lại"},
            {"v1":"lend","v2":"lent","v3":"lent","mean":"cho mượn, cho vay"},
            {"v1":"let","v2":"let","v3":"let","mean":"cho phép, để cho"},
            {"v1":"lie","v2":"lay","v3":"lain","mean":"nằm"},
            {"v1":"light","v2":"lit/lighted","v3":"lit/lighted","mean":"thắp sáng, đốt"},
            {"v1":"lip-read","v2":"lip-read","v3":"lip-read","mean":"đọc môi"},
            {"v1":"lose","v2":"lost","v3":"lost","mean":"làm mất, thua"},
            {"v1":"make","v2":"made","v3":"made","mean":"chế tạo, sản xuất"},
            {"v1":"may","v2":"might","v3":"","mean":"có thể, có lẽ"},
            {"v1":"mean","v2":"meant","v3":"meant","mean":"có nghĩa là"},
            {"v1":"meet","v2":"met","v3":"met","mean":"gặp mặt, đáp ứng"},
            {"v1":"miscast","v2":"miscast","v3":"miscast","mean":"chọn vai diễn không hợp"},
            {"v1":"misdeal","v2":"misdealt","v3":"misdealt","mean":"chia bài sai"},
            {"v1":"misdo","v2":"misdid","v3":"misdone","mean":"làm sai, phạm lỗi"},
            {"v1":"mishear","v2":"misheard","v3":"misheard","mean":"nghe nhầm"},
            {"v1":"mislay","v2":"mislaid","v3":"mislaid","mean":"để lạc mất"},
            {"v1":"mislead","v2":"misled","v3":"misled","mean":"làm cho lầm đường"},
            {"v1":"mislearn","v2":"mislearned/mislearnt","v3":"mislearned/mislearnt","mean":"học sai"},
            {"v1":"misread","v2":"misread","v3":"misread","mean":"đọc sai"},
            {"v1":"misset","v2":"misset","v3":"misset","mean":"đặt sai chỗ"},
            {"v1":"misspeak","v2":"misspoke","v3":"misspoken","mean":"nói hớ, nói sai"},
            {"v1":"misspell","v2":"misspelt/misspelled","v3":"misspelt/misspelled","mean":"viết sai chính tả"},
            {"v1":"misspend","v2":"misspent","v3":"misspent","mean":"tiêu phí, bỏ phí"},
            {"v1":"mistake","v2":"mistook","v3":"mistaken","mean":"phạm lỗi, nhầm lẫn"},
            {"v1":"misteach","v2":"mistaught","v3":"mistaught","mean":"dạy sai"},
            {"v1":"misunderstand","v2":"misunderstood","v3":"misunderstood","mean":"hiểu lầm"},
            {"v1":"miswrite","v2":"miswrote","v3":"miswritten","mean":"viết sai"},
            {"v1":"mow","v2":"mowed","v3":"mown/mowed","mean":"cắt cỏ, gặt"},
            {"v1":"offset","v2":"offset","v3":"offset","mean":"đền bù, bù đắp"},
            {"v1":"outbid","v2":"outbid","v3":"outbid","mean":"trả giá cao hơn"},
            {"v1":"outbreed","v2":"outbred","v3":"outbred","mean":"giao phối xa"},
            {"v1":"outdo","v2":"outdid","v3":"outdone","mean":"làm giỏi hơn"},
            {"v1":"outdraw","v2":"outdrew","v3":"outdrawn","mean":"rút súng nhanh hơn"},
            {"v1":"outdrink","v2":"outdrank","v3":"outdrunk","mean":"uống giỏi hơn"},
            {"v1":"outdrive","v2":"outdrove","v3":"outdriven","mean":"lái xe nhanh hơn"},
            {"v1":"outfight","v2":"outfought","v3":"outfought","mean":"đánh giỏi hơn"},
            {"v1":"outfly","v2":"outflew","v3":"outflown","mean":"bay cao/xa hơn"},
            {"v1":"outgrow","v2":"outgrew","v3":"outgrown","mean":"lớn nhanh hơn"},
            {"v1":"outleap","v2":"outleaped/outleapt","v3":"outleaped/outleapt","mean":"nhảy cao/xa hơn"},
            {"v1":"outrun","v2":"outran","v3":"outrun","mean":"chạy nhanh hơn"},
            {"v1":"outsell","v2":"outsold","v3":"outsold","mean":"bán chạy hơn"},
            {"v1":"outshine","v2":"outshined/outshone","v3":"outshined/outshone","mean":"sáng hơn, nổi bật hơn"},
            {"v1":"outshoot","v2":"outshot","v3":"outshot","mean":"bắn giỏi hơn"},
            {"v1":"outsing","v2":"outsang","v3":"outsung","mean":"hát hay hơn"},
            {"v1":"outsit","v2":"outsat","v3":"outsat","mean":"ngồi lâu hơn"},
            {"v1":"outsleep","v2":"outslept","v3":"outslept","mean":"ngủ muộn hơn"},
            {"v1":"outsmell","v2":"outsmelled/outsmelt","v3":"outsmelled/outsmelt","mean":"đánh hơi giỏi hơn"},
            {"v1":"outspeak","v2":"outspoke","v3":"outspoken","mean":"nói to/dài hơn"},
            {"v1":"outspeed","v2":"outsped","v3":"outsped","mean":"chạy nhanh hơn"},
            {"v1":"outspend","v2":"outspent","v3":"outspent","mean":"tiêu nhiều hơn"},
            {"v1":"outswear","v2":"outswore","v3":"outsworn","mean":"chửi rủa nhiều hơn"},
            {"v1":"outswim","v2":"outswam","v3":"outswum","mean":"bơi giỏi hơn"},
            {"v1":"outthink","v2":"outthought","v3":"outthought","mean":"suy nghĩ nhanh hơn"},
            {"v1":"outthrow","v2":"outthrew","v3":"outthrown","mean":"ném xa hơn"},
            {"v1":"outwrite","v2":"outwrote","v3":"outwritten","mean":"viết hay/nhanh hơn"},
            {"v1":"overbid","v2":"overbid","v3":"overbid","mean":"trả giá quá cao"},
            {"v1":"overbreed","v2":"overbred","v3":"overbred","mean":"nhân giống quá mức"},
            {"v1":"overbuild","v2":"overbuilt","v3":"overbuilt","mean":"xây dựng quá nhiều"},
            {"v1":"overbuy","v2":"overbought","v3":"overbought","mean":"mua quá nhiều"},
            {"v1":"overcome","v2":"overcame","v3":"overcome","mean":"vượt qua, khắc phục"},
            {"v1":"overdo","v2":"overdid","v3":"overdone","mean":"làm quá sức, nấu quá chín"},
            {"v1":"overdraw","v2":"overdrew","v3":"overdrawn","mean":"rút tiền quá mức"},
            {"v1":"overdrink","v2":"overdrank","v3":"overdrunk","mean":"uống quá nhiều"},
            {"v1":"overeat","v2":"overate","v3":"overeaten","mean":"ăn quá nhiều"},
            {"v1":"overfeed","v2":"overfed","v3":"overfed","mean":"cho ăn quá no"},
            {"v1":"overfly","v2":"overflew","v3":"overflown","mean":"bay qua"},
            {"v1":"overhang","v2":"overhung","v3":"overhung","mean":"nhô ra, treo lơ lửng"},
            {"v1":"overhear","v2":"overheard","v3":"overheard","mean":"nghe lỏm, nghe trộm"},
            {"v1":"overlay","v2":"overlaid","v3":"overlaid","mean":"phủ lên"},
            {"v1":"overpay","v2":"overpaid","v3":"overpaid","mean":"trả quá tiền"},
            {"v1":"override","v2":"overrode","v3":"overridden","mean":"gạt bỏ, không đếm xỉa tới"},
            {"v1":"overrun","v2":"overran","v3":"overrun","mean":"tràn ngập"},
            {"v1":"oversee","v2":"oversaw","v3":"overseen","mean":"giám sát, trông nom"},
            {"v1":"oversell","v2":"oversold","v3":"oversold","mean":"bán quá mức, quảng cáo quá lố"},
            {"v1":"oversew","v2":"oversewed","v3":"oversewn/oversewed","mean":"may nối vắt"},
            {"v1":"overshoot","v2":"overshot","v3":"overshot","mean":"bắn trượt, đi quá"},
            {"v1":"oversleep","v2":"overslept","v3":"overslept","mean":"ngủ quên"},
            {"v1":"overspeak","v2":"overspoke","v3":"overspoken","mean":"nói quá nhiều"},
            {"v1":"overspend","v2":"overspent","v3":"overspent","mean":"tiêu quá lố"},
            {"v1":"overspill","v2":"overspilled/overspilt","v3":"overspilled/overspilt","mean":"làm tràn"},
            {"v1":"overtake","v2":"overtook","v3":"overtaken","mean":"đuổi kịp, vượt qua"},
            {"v1":"overthink","v2":"overthought","v3":"overthought","mean":"nghĩ quá nhiều"},
            {"v1":"overthrow","v2":"overthrew","v3":"overthrown","mean":"lật đổ"},
            {"v1":"overwind","v2":"overwound","v3":"overwound","mean":"lên dây (đồng hồ) quá chặt"},
            {"v1":"overwrite","v2":"overwrote","v3":"overwritten","mean":"viết đè lên"},
            {"v1":"partake","v2":"partook","v3":"partaken","mean":"tham gia, dự phần"},
            {"v1":"pay","v2":"paid","v3":"paid","mean":"trả tiền"},
            {"v1":"plead","v2":"pleaded/pled","v3":"pleaded/pled","mean":"bào chữa, biện hộ"},
            {"v1":"prebuild","v2":"prebuilt","v3":"prebuilt","mean":"làm nhà tiền chế"},
            {"v1":"predo","v2":"predid","v3":"predone","mean":"làm trước"},
            {"v1":"premake","v2":"premade","v3":"premade","mean":"làm sẵn"},
            {"v1":"prepay","v2":"prepaid","v3":"prepaid","mean":"trả trước"},
            {"v1":"presell","v2":"presold","v3":"presold","mean":"bán trước"},
            {"v1":"preset","v2":"preset","v3":"preset","mean":"thiết lập sẵn"},
            {"v1":"preshrink","v2":"preshrank","v3":"preshrunk","mean":"ngâm vải cho co trước"},
            {"v1":"proofread","v2":"proofread","v3":"proofread","mean":"đọc và sửa bản in thử"},
            {"v1":"prove","v2":"proved","v3":"proven/proved","mean":"chứng minh, chứng tỏ"},
            {"v1":"put","v2":"put","v3":"put","mean":"đặt, để"},
            {"v1":"quick-freeze","v2":"quick-froze","v3":"quick-frozen","mean":"kết đông nhanh"},
            {"v1":"quit","v2":"quit/quitted","v3":"quit/quitted","mean":"bỏ, rời"},
            {"v1":"read","v2":"read","v3":"read","mean":"đọc"},
            {"v1":"reawake","v2":"reawoke","v3":"reawaken","mean":"đánh thức lại"},
            {"v1":"rebid","v2":"rebid","v3":"rebid","mean":"bỏ thầu lại"},
            {"v1":"rebind","v2":"rebound","v3":"rebound","mean":"buộc lại, đóng lại"},
            {"v1":"rebroadcast","v2":"rebroadcast/rebroadcasted","v3":"rebroadcast/rebroadcasted","mean":"phát lại"},
            {"v1":"rebuild","v2":"rebuilt","v3":"rebuilt","mean":"xây dựng lại"},
            {"v1":"recast","v2":"recast","v3":"recast","mean":"đúc lại"},
            {"v1":"recut","v2":"recut","v3":"recut","mean":"cắt lại"},
            {"v1":"redeal","v2":"redealt","v3":"redealt","mean":"chia bài lại"},
            {"v1":"redo","v2":"redid","v3":"redone","mean":"làm lại"},
            {"v1":"redraw","v2":"redrew","v3":"redrawn","mean":"vẽ lại"},
            {"v1":"refit","v2":"refitted/refit","v3":"refitted/refit","mean":"trang bị lại"},
            {"v1":"regrind","v2":"reground","v3":"reground","mean":"mài sắc lại"},
            {"v1":"regrow","v2":"regrew","v3":"regrown","mean":"mọc lại, trồng lại"},
            {"v1":"rehang","v2":"rehung","v3":"rehung","mean":"treo lại"},
            {"v1":"rehear","v2":"reheard","v3":"reheard","mean":"xét xử lại"},
            {"v1":"reknit","v2":"reknitted/reknit","v3":"reknitted/reknit","mean":"đan lại"},
            {"v1":"relay","v2":"relaid","v3":"relaid","mean":"đặt lại"},
            {"v1":"relearn","v2":"relearned/relearnt","v3":"relearned/relearnt","mean":"học lại"},
            {"v1":"relight","v2":"relit/relighted","v3":"relit/relighted","mean":"thắp sáng lại"},
            {"v1":"remake","v2":"remade","v3":"remade","mean":"làm lại"},
            {"v1":"rend","v2":"rent","v3":"rent","mean":"xé toạc"},
            {"v1":"repay","v2":"repaid","v3":"repaid","mean":"hoàn tiền lại"},
            {"v1":"reread","v2":"reread","v3":"reread","mean":"đọc lại"},
            {"v1":"rerun","v2":"reran","v3":"rerun","mean":"chiếu lại, chạy lại"},
            {"v1":"resell","v2":"resold","v3":"resold","mean":"bán lại"},
            {"v1":"resend","v2":"resent","v3":"resent","mean":"gửi lại"},
            {"v1":"reset","v2":"reset","v3":"reset","mean":"thiết lập lại"},
            {"v1":"resew","v2":"resewed","v3":"resewn/resewed","mean":"may lại"},
            {"v1":"retake","v2":"retook","v3":"retaken","mean":"chiếm lại, thi lại"},
            {"v1":"reteach","v2":"retaught","v3":"retaught","mean":"dạy lại"},
            {"v1":"retear","v2":"retore","v3":"retorn","mean":"xé lại"},
            {"v1":"retell","v2":"retold","v3":"retold","mean":"kể lại"},
            {"v1":"rethink","v2":"rethought","v3":"rethought","mean":"suy nghĩ lại"},
            {"v1":"retread","v2":"retread","v3":"retread","mean":"đắp lại vỏ xe"},
            {"v1":"retrofit","v2":"retrofitted/retrofit","v3":"retrofitted/retrofit","mean":"trang bị thêm"},
            {"v1":"rewake","v2":"rewoke/rewaked","v3":"rewaken/rewaked","mean":"đánh thức lại"},
            {"v1":"rewear","v2":"rewore","v3":"reworn","mean":"mặc lại"},
            {"v1":"reweave","v2":"rewove/reweaved","v3":"rewoven/reweaved","mean":"dệt lại"},
            {"v1":"rewed","v2":"rewed/rewedded","v3":"rewed/rewedded","mean":"kết hôn lại"},
            {"v1":"rewet","v2":"rewet/rewetted","v3":"rewet/rewetted","mean":"làm ướt lại"},
            {"v1":"rewin","v2":"rewon","v3":"rewon","mean":"thắng lại"},
            {"v1":"rewind","v2":"rewound","v3":"rewound","mean":"cuốn lại, tua lại"},
            {"v1":"rewrite","v2":"rewrote","v3":"rewritten","mean":"viết lại"},
            {"v1":"rid","v2":"rid","v3":"rid","mean":"giải thoát, tống khứ"},
            {"v1":"ride","v2":"rode","v3":"ridden","mean":"cưỡi (ngựa), đi (xe đạp)"},
            {"v1":"ring","v2":"rang","v3":"rung","mean":"rung chuông"},
            {"v1":"rise","v2":"rose","v3":"risen","mean":"đứng dậy, mọc lên"},
            {"v1":"roughcast","v2":"roughcast","v3":"roughcast","mean":"tạo hình phỏng chừng"},
            {"v1":"run","v2":"ran","v3":"run","mean":"chạy"},
            {"v1":"sand-cast","v2":"sand-cast","v3":"sand-cast","mean":"đúc bằng khuôn cát"},
            {"v1":"saw","v2":"sawed","v3":"sawn/sawed","mean":"cưa"},
            {"v1":"say","v2":"said","v3":"said","mean":"nói"},
            {"v1":"see","v2":"saw","v3":"seen","mean":"nhìn thấy"},
            {"v1":"seek","v2":"sought","v3":"sought","mean":"tìm kiếm"},
            {"v1":"sell","v2":"sold","v3":"sold","mean":"bán"},
            {"v1":"send","v2":"sent","v3":"sent","mean":"gửi"},
            {"v1":"set","v2":"set","v3":"set","mean":"đặt, thiết lập"},
            {"v1":"sew","v2":"sewed","v3":"sewn/sewed","mean":"may, khâu"},
            {"v1":"shake","v2":"shook","v3":"shaken","mean":"rung, lay, lắc"},
            {"v1":"shave","v2":"shaved","v3":"shaved/shaven","mean":"cạo (râu, mặt)"},
            {"v1":"shear","v2":"sheared","v3":"shorn/sheared","mean":"xén lông (cừu)"},
            {"v1":"shed","v2":"shed","v3":"shed","mean":"rơi, rụng (lá); lột (da)"},
            {"v1":"shine","v2":"shone","v3":"shone","mean":"chiếu sáng"},
            {"v1":"shit","v2":"shit/shat/shitted","v3":"shit/shat/shitted","mean":"đi vệ sinh (thô tục)"},
            {"v1":"shoot","v2":"shot","v3":"shot","mean":"bắn"},
            {"v1":"show","v2":"showed","v3":"shown/showed","mean":"cho xem, trưng bày"},
            {"v1":"shrink","v2":"shrank","v3":"shrunk","mean":"co lại, rút lại"},
            {"v1":"shut","v2":"shut","v3":"shut","mean":"đóng lại"},
            {"v1":"sight-read","v2":"sight-read","v3":"sight-read","mean":"đọc và chơi (nhạc) ngay"},
            {"v1":"sing","v2":"sang","v3":"sung","mean":"hát"},
            {"v1":"sink","v2":"sank","v3":"sunk","mean":"chìm, lặn"},
            {"v1":"sit","v2":"sat","v3":"sat","mean":"ngồi"},
            {"v1":"slay","v2":"slew","v3":"slain","mean":"sát hại, giết"},
            {"v1":"sleep","v2":"slept","v3":"slept","mean":"ngủ"},
            {"v1":"slide","v2":"slid","v3":"slid","mean":"trượt, lướt"},
            {"v1":"sling","v2":"slung","v3":"slung","mean":"ném mạnh, quăng"},
            {"v1":"slink","v2":"slunk","v3":"slunk","mean":"lẻn đi"},
            {"v1":"slit","v2":"slit","v3":"slit","mean":"rạch, khứa"},
            {"v1":"smell","v2":"smelt/smelled","v3":"smelt/smelled","mean":"ngửi, có mùi"},
            {"v1":"smite","v2":"smote","v3":"smitten","mean":"đập mạnh, đánh"},
            {"v1":"sneak","v2":"sneaked/snuck","v3":"sneaked/snuck","mean":"trốn, lén"},
            {"v1":"sow","v2":"sowed","v3":"sown/sowed","mean":"gieo hạt"},
            {"v1":"speak","v2":"spoke","v3":"spoken","mean":"nói"},
            {"v1":"speed","v2":"sped/speeded","v3":"sped/speeded","mean":"tăng tốc, đi nhanh"},
            {"v1":"spell","v2":"spelt/spelled","v3":"spelt/spelled","mean":"đánh vần"},
            {"v1":"spend","v2":"spent","v3":"spent","mean":"tiêu xài, dành (thời gian)"},
            {"v1":"spill","v2":"spilt/spilled","v3":"spilt/spilled","mean":"làm tràn, làm đổ"},
            {"v1":"spin","v2":"spun/span","v3":"spun","mean":"quay tròn, xe chỉ"},
            {"v1":"spit","v2":"spat/spit","v3":"spat/spit","mean":"khạc, nhổ"},
            {"v1":"split","v2":"split","v3":"split","mean":"chẻ, tách ra"},
            {"v1":"spoil","v2":"spoilt/spoiled","v3":"spoilt/spoiled","mean":"làm hỏng, làm hư"},
            {"v1":"spoon-feed","v2":"spoon-fed","v3":"spoon-fed","mean":"cho ăn bằng thìa, mớm"},
            {"v1":"spread","v2":"spread","v3":"spread","mean":"lan truyền, trải ra"},
            {"v1":"spring","v2":"sprang/sprung","v3":"sprung","mean":"nhảy, bật lên"},
            {"v1":"stand","v2":"stood","v3":"stood","mean":"đứng"},
            {"v1":"stave","v2":"stove/staved","v3":"stove/staved","mean":"đâm thủng"},
            {"v1":"steal","v2":"stole","v3":"stolen","mean":"ăn cắp, ăn trộm"},
            {"v1":"stick","v2":"stuck","v3":"stuck","mean":"dán, dính, cắm"},
            {"v1":"sting","v2":"stung","v3":"stung","mean":"châm, chích, đốt"},
            {"v1":"stink","v2":"stunk/stank","v3":"stunk","mean":"bốc mùi hôi"},
            {"v1":"strew","v2":"strewed","v3":"strewn/strewed","mean":"rắc, rải"},
            {"v1":"stride","v2":"strode","v3":"stridden","mean":"bước sải"},
            {"v1":"strike","v2":"struck","v3":"struck/stricken","mean":"đánh, đình công"},
            {"v1":"string","v2":"strung","v3":"strung","mean":"xâu, buộc dây"},
            {"v1":"strive","v2":"strove","v3":"striven","mean":"phấn đấu, cố gắng"},
            {"v1":"sublet","v2":"sublet","v3":"sublet","mean":"cho thuê lại"},
            {"v1":"sunburn","v2":"sunburned/sunburnt","v3":"sunburned/sunburnt","mean":"cháy nắng"},
            {"v1":"swear","v2":"swore","v3":"sworn","mean":"tuyên thệ, thề"},
            {"v1":"sweat","v2":"sweat/sweated","v3":"sweat/sweated","mean":"đổ mồ hôi"},
            {"v1":"sweep","v2":"swept","v3":"swept","mean":"quét"},
            {"v1":"swell","v2":"swelled","v3":"swollen/swelled","mean":"phồng, sưng lên"},
            {"v1":"swim","v2":"swam","v3":"swum","mean":"bơi"},
            {"v1":"swing","v2":"swung","v3":"swung","mean":"đánh đu, đong đưa"},
            {"v1":"take","v2":"took","v3":"taken","mean":"cầm, lấy, mang"},
            {"v1":"teach","v2":"taught","v3":"taught","mean":"dạy, giảng dạy"},
            {"v1":"tear","v2":"tore","v3":"torn","mean":"xé, làm rách"},
            {"v1":"telecast","v2":"telecast","v3":"telecast","mean":"phát sóng truyền hình"},
            {"v1":"tell","v2":"told","v3":"told","mean":"kể, bảo, nói"},
            {"v1":"test-drive","v2":"test-drove","v3":"test-driven","mean":"lái thử"},
            {"v1":"test-fly","v2":"test-flew","v3":"test-flown","mean":"bay thử"},
            {"v1":"think","v2":"thought","v3":"thought","mean":"suy nghĩ"},
            {"v1":"thrive","v2":"thrived/throve","v3":"thrived/thriven","mean":"phát triển mạnh"},
            {"v1":"throw","v2":"threw","v3":"thrown","mean":"ném, liệng, quăng"},
            {"v1":"thrust","v2":"thrust","v3":"thrust","mean":"thọc, ấn mạnh"},
            {"v1":"tread","v2":"trod","v3":"trodden/trod","mean":"giẫm, đạp"},
            {"v1":"typecast","v2":"typecast","v3":"typecast","mean":"chuyên đóng một loại vai"},
            {"v1":"typeset","v2":"typeset","v3":"typeset","mean":"sắp chữ"},
            {"v1":"typewrite","v2":"typewrote","v3":"typewritten","mean":"đánh máy"},
            {"v1":"unbend","v2":"unbent","v3":"unbent","mean":"làm thẳng lại, thư giãn"},
            {"v1":"unbind","v2":"unbound","v3":"unbound","mean":"mở, cởi trói"},
            {"v1":"unclothe","v2":"unclothed/unclad","v3":"unclothed/unclad","mean":"cởi áo, lột trần"},
            {"v1":"undercut","v2":"undercut","v3":"undercut","mean":"bán rẻ hơn, phá giá"},
            {"v1":"underfeed","v2":"underfed","v3":"underfed","mean":"cho ăn thiếu"},
            {"v1":"undergo","v2":"underwent","v3":"undergone","mean":"trải qua, chịu đựng"},
            {"v1":"underlie","v2":"underlay","v3":"underlain","mean":"nằm dưới, làm nền tảng"},
            {"v1":"understand","v2":"understood","v3":"understood","mean":"hiểu"},
            {"v1":"undertake","v2":"undertook","v3":"undertaken","mean":"đảm nhận, cam kết"},
            {"v1":"underwrite","v2":"underwrote","v3":"underwritten","mean":"bảo hiểm, tài trợ"},
            {"v1":"undo","v2":"undid","v3":"undone","mean":"tháo ra, hủy bỏ"},
            {"v1":"unfreeze","v2":"unfroze","v3":"unfrozen","mean":"làm tan đông"},
            {"v1":"unhang","v2":"unhung","v3":"unhung","mean":"hạ xuống"},
            {"v1":"unhide","v2":"unhid","v3":"unhidden","mean":"hiển thị, không ẩn"},
            {"v1":"unlearn","v2":"unlearned/unlearnt","v3":"unlearned/unlearnt","mean":"gạt bỏ (kiến thức)"},
            {"v1":"unspin","v2":"unspun","v3":"unspun","mean":"tháo chỉ, quay ngược"},
            {"v1":"unwind","v2":"unwound","v3":"unwound","mean":"tháo ra, thư giãn"},
            {"v1":"uphold","v2":"upheld","v3":"upheld","mean":"ủng hộ, duy trì"},
            {"v1":"upset","v2":"upset","v3":"upset","mean":"làm đổ, làm buồn"},
            {"v1":"wake","v2":"woke/waked","v3":"woken/waked","mean":"thức giấc, đánh thức"},
            {"v1":"waylay","v2":"waylaid","v3":"waylaid","mean":"mai phục"},
            {"v1":"wear","v2":"wore","v3":"worn","mean":"mặc, đội, mang"},
            {"v1":"weave","v2":"wove/weaved","v3":"woven/weaved","mean":"dệt, đan"},
            {"v1":"wed","v2":"wed/wedded","v3":"wed/wedded","mean":"kết hôn"},
            {"v1":"weep","v2":"wept","v3":"wept","mean":"khóc"},
            {"v1":"wet","v2":"wet/wetted","v3":"wet/wetted","mean":"làm ướt"},
            {"v1":"win","v2":"won","v3":"won","mean":"thắng, chiến thắng"},
            {"v1":"wind","v2":"wound","v3":"wound","mean":"quấn, lên dây cót"},
            {"v1":"withdraw","v2":"withdrew","v3":"withdrawn","mean":"rút lui, rút tiền"},
            {"v1":"withhold","v2":"withheld","v3":"withheld","mean":"giữ lại, từ chối"},
            {"v1":"withstand","v2":"withstood","v3":"withstood","mean":"chịu đựng, chống lại"},
            {"v1":"wring","v2":"wrung","v3":"wrung","mean":"vặn, vắt"},
            {"v1":"write","v2":"wrote","v3":"written","mean":"viết"}
        ]`;
        
        // --- DOM Elements ---
        const elements = {
            verbCard: document.getElementById('verb-card'),
            srsInfo: document.getElementById('srs-info'),
            pastInput: document.getElementById('past-input'),
            participleInput: document.getElementById('participle-input'),
            meaningInput: document.getElementById('meaning-input'),
            pastFeedback: document.getElementById('past-feedback'),
            participleFeedback: document.getElementById('participle-feedback'),
            meaningFeedback: document.getElementById('meaning-feedback'),
            checkBtn: document.getElementById('check-btn'),
            revealBtn: document.getElementById('reveal-btn'),
            nextBtn: document.getElementById('next-btn'),
            resetBtn: document.getElementById('reset-btn'),
            verbTableBody: document.getElementById('verb-table-body'),
            progressBar: document.getElementById('progress-bar'),
            progressCounter: document.getElementById('progress-counter'),
            progressLabel: document.getElementById('progress-label'),
        };

        // --- Spaced Repetition System (SRS) Configuration ---
        const STORAGE_KEY = 'irregularVerbsProgress_v2';
        const DAY_IN_MS = 24 * 60 * 60 * 1000;
        const srsIntervals = [
            0, // Stage 0: New
            1 * DAY_IN_MS,  // Stage 1: 1 day
            3 * DAY_IN_MS,  // Stage 2: 3 days
            7 * DAY_IN_MS,  // Stage 3: 1 week
            14 * DAY_IN_MS, // Stage 4: 2 weeks
            30 * DAY_IN_MS, // Stage 5: 1 month
            90 * DAY_IN_MS  // Stage 6: 3 months (Mastered)
        ];

        let verbs = [];
        let currentVerb = null;

        // --- Functions ---
        
        function initializeApp() {
            populateTable();
            loadProgress();
            updateProgress();
            getNextVerb();
            
            elements.checkBtn.addEventListener('click', checkAnswer);
            elements.nextBtn.addEventListener('click', getNextVerb);
            elements.revealBtn.addEventListener('click', revealAnswer);
            elements.resetBtn.addEventListener('click', resetProgress);
            [elements.pastInput, elements.participleInput, elements.meaningInput].forEach(input => {
                input.addEventListener('keypress', e => e.key === 'Enter' && checkAnswer());
            });
        }

        function populateTable() {
            const parsedVerbs = JSON.parse(masterVerbsList);
            parsedVerbs.forEach(verb => {
                const row = document.createElement('tr');
                row.innerHTML = `<td>${verb.v1}</td><td>${verb.v2}</td><td>${verb.v3}</td><td>${verb.mean}</td>`;
                elements.verbTableBody.appendChild(row);
            });
        }

        function loadProgress() {
            const savedData = localStorage.getItem(STORAGE_KEY);
            if (savedData) {
                verbs = JSON.parse(savedData);
            } else {
                // First time user: initialize the structure
                verbs = JSON.parse(masterVerbsList).map(verb => ({
                    ...verb,
                    stage: 0, // Initial stage
                    nextReviewDate: 0, // Due for review immediately
                }));
            }
        }

        function saveProgress() {
            localStorage.setItem(STORAGE_KEY, JSON.stringify(verbs));
        }

        function resetProgress() {
            if (confirm('Bạn có chắc chắn muốn xóa toàn bộ tiến độ học và bắt đầu lại từ đầu không?')) {
                localStorage.removeItem(STORAGE_KEY);
                location.reload();
            }
        }

        function updateProgress() {
            const masteredCount = verbs.filter(v => v.stage > 0).length;
            const totalVerbs = verbs.length;
            elements.progressCounter.textContent = `${masteredCount}/${totalVerbs}`;
            const percentage = totalVerbs > 0 ? (masteredCount / totalVerbs) * 100 : 0;
            elements.progressBar.style.width = `${percentage}%`;
        }

        function getNextVerb() {
            const now = new Date().getTime();
            const dueVerbs = verbs.filter(v => v.nextReviewDate <= now);
            
            // Prioritize due verbs, then new verbs (stage 0)
            let verbPool = dueVerbs.length > 0 ? dueVerbs : verbs.filter(v => v.stage === 0);

            if (verbPool.length === 0) {
                // All verbs are learned and not due for review yet
                const nextReview = verbs.reduce((earliest, v) => v.nextReviewDate < earliest ? v.nextReviewDate : earliest, Infinity);
                elements.verbCard.textContent = "Hết từ để học!";
                elements.srsInfo.textContent = `Tuyệt vời! Bạn đã hoàn thành bài học hôm nay. Hãy quay lại sau ${formatTimeAgo(nextReview)}.`;
                disableAllInputs();
                return;
            }

            currentVerb = verbPool[Math.floor(Math.random() * verbPool.length)];
            
            elements.verbCard.textContent = currentVerb.v1;
            elements.srsInfo.textContent = `Cấp độ ghi nhớ: ${currentVerb.stage} / ${srsIntervals.length - 1}`;
            if (currentVerb.nextReviewDate > 0) {
                 elements.srsInfo.textContent += ` | Lần ôn tiếp theo: ${formatTimeAgo(currentVerb.nextReviewDate)}`;
            }
            resetInputsAndButtons();
        }
        
        function disableAllInputs() {
            [elements.pastInput, elements.participleInput, elements.meaningInput, elements.checkBtn, elements.revealBtn].forEach(el => el.disabled = true);
        }

        function resetInputsAndButtons() {
            const inputs = [elements.pastInput, elements.participleInput, elements.meaningInput];
            const feedbacks = [elements.pastFeedback, elements.participleFeedback, elements.meaningFeedback];
            
            inputs.forEach(input => {
                input.value = '';
                input.classList.remove('correct', 'incorrect');
                input.disabled = false;
            });
            
            feedbacks.forEach(feedback => {
                feedback.textContent = '';
                feedback.classList.remove('correct', 'incorrect');
            });

            elements.checkBtn.disabled = false;
            elements.revealBtn.disabled = false;
        }

        function checkAnswer() {
            if (!currentVerb) return;

            const userV2 = elements.pastInput.value.trim().toLowerCase();
            const userV3 = elements.participleInput.value.trim().toLowerCase();
            const userMean = elements.meaningInput.value.trim().toLowerCase();

            const isV2Correct = checkSingleAnswer(userV2, currentVerb.v2);
            const isV3Correct = checkSingleAnswer(userV3, currentVerb.v3) || (currentVerb.v3 === "" && userV3 === "");
            const isMeanCorrect = checkSingleAnswer(userMean, currentVerb.mean, true);

            applyFeedback(elements.pastInput, elements.pastFeedback, isV2Correct, `Đáp án: ${currentVerb.v2}`);
            applyFeedback(elements.participleInput, elements.participleFeedback, isV3Correct, `Đáp án: ${currentVerb.v3}`);
            applyFeedback(elements.meaningInput, elements.meaningFeedback, isMeanCorrect, `Đáp án: ${currentVerb.mean}`);
            
            const isFullyCorrect = isV2Correct && isV3Correct && isMeanCorrect;
            updateSRS(isFullyCorrect);

            if(isFullyCorrect) {
                elements.checkBtn.disabled = true;
                elements.revealBtn.disabled = true;
            }
        }
        
        function checkSingleAnswer(userInput, correctAnswersStr, isMeaning = false) {
            if (!userInput) return false;
            const correctAnswers = correctAnswersStr.toLowerCase().split(isMeaning ? /[,;/]/ : '/');
            if (isMeaning) {
                // For meaning, check if user's input is a substring of any correct answer.
                return correctAnswers.some(correct => correct.trim().includes(userInput));
            }
            // For verb forms, require an exact match.
            return correctAnswers.includes(userInput);
        }

        function updateSRS(isCorrect) {
            const now = new Date().getTime();
            if (isCorrect) {
                currentVerb.stage = Math.min(currentVerb.stage + 1, srsIntervals.length - 1);
                elements.srsInfo.style.color = 'var(--success-color)';
                elements.srsInfo.textContent = 'Chính xác! Cấp độ ghi nhớ đã tăng.';
            } else {
                currentVerb.stage = Math.max(0, currentVerb.stage - 1); // Less punishing: move back 1 stage
                elements.srsInfo.style.color = 'var(--error-color)';
                elements.srsInfo.textContent = 'Chưa đúng. Cấp độ ghi nhớ đã giảm.';
            }
            
            const interval = srsIntervals[currentVerb.stage];
            currentVerb.nextReviewDate = now + interval;
            
            updateProgress();
            saveProgress();
        }

        function revealAnswer() {
            if (!currentVerb) return;
            elements.pastInput.value = currentVerb.v2.split('/')[0];
            elements.participleInput.value = currentVerb.v3.split('/')[0];
            elements.meaningInput.value = currentVerb.mean.split(/[,;/]/)[0].trim();
            
            updateSRS(false); // Revealing counts as an incorrect answer for SRS purposes.
            disableAllInputs();
            elements.revealBtn.disabled = true;
        }

        function applyFeedback(input, feedbackEl, isCorrect, correctAnswer) {
             input.classList.remove('correct', 'incorrect');
             feedbackEl.classList.remove('correct', 'incorrect');
             if (input.value.trim() === '') return;
             if(isCorrect) {
                 input.classList.add('correct');
                 feedbackEl.textContent = 'Chính xác!';
                 feedbackEl.classList.add('correct');
             } else {
                 input.classList.add('incorrect');
                 feedbackEl.textContent = correctAnswer;
                 feedbackEl.classList.add('incorrect');
             }
        }

        function formatTimeAgo(timestamp) {
            const now = new Date().getTime();
            const difference = timestamp - now;

            if (difference < 0) return 'bây giờ';

            const days = Math.floor(difference / DAY_IN_MS);
            if (days > 0) return `${days} ngày`;
            const hours = Math.floor((difference % DAY_IN_MS) / (1000 * 60 * 60));
            if (hours > 0) return `${hours} giờ`;
            const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
            if (minutes > 0) return `${minutes} phút`;
            return 'ngay bây giờ';
        }

        // --- Initialization ---
        initializeApp();
    });
    </script>
</body>
</html>
<p>The post <a rel="nofollow" href="https://nhatphuc.com/380-dong-tu-bat-quy-tac/">Bảng động từ bất quy tắc chính xác và đầy đủ nhất</a> appeared first on <a rel="nofollow" href="https://nhatphuc.com">Nhật Phúc</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://nhatphuc.com/380-dong-tu-bat-quy-tac/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Quy tắc 5 ngón tay</title>
		<link>https://nhatphuc.com/quy-tac-5-ngon-tay/</link>
					<comments>https://nhatphuc.com/quy-tac-5-ngon-tay/#respond</comments>
		
		<dc:creator><![CDATA[Linh Nguyễn]]></dc:creator>
		<pubDate>Fri, 11 Jul 2025 04:33:16 +0000</pubDate>
				<category><![CDATA[Featured]]></category>
		<category><![CDATA[Khám phá]]></category>
		<guid isPermaLink="false">https://nhatphuc.com/?p=17341</guid>

					<description><![CDATA[<p>Một bài học đơn giản nhưng vô cùng quan trọng giúp cả phụ huynh và [&#8230;]</p>
<p>The post <a rel="nofollow" href="https://nhatphuc.com/quy-tac-5-ngon-tay/">Quy tắc 5 ngón tay</a> appeared first on <a rel="nofollow" href="https://nhatphuc.com">Nhật Phúc</a>.</p>
]]></description>
										<content:encoded><![CDATA[<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        :root {
            /* Bảng màu Dark Theme - Đồng bộ với style.css gốc */
            --bg-color: #111827;
            --card-bg-color: #1f2937;
            --text-color: #d1d5db;
            --text-muted: #9ca3af;
            --border-color: #374151;
            --header-color: #ffffff;
            --shadow-color: rgba(0, 0, 0, 0.2);

            /* Màu cho các ngón tay - giữ nguyên để nổi bật */
            --hand-bg: #ffedd5;
            --hand-border: #fdba74;
            --thumb-color: #22c55e;
            --index-color: #3b82f6;
            --middle-color: #f97316;
            --ring-color: #eab308;
            --pinky-color: #ef4444;
        }

        body { 
            font-family: 'Inter', sans-serif; 
            background-color: var(--bg-color); 
            color: var(--text-color); 
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            margin: 0;
            padding: 2rem 1rem;
        }
        
        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
        }

        .main-header {
            text-align: center;
            margin-bottom: 2rem;
        }

        .main-title {
            font-size: 2.5rem;
            font-weight: 800;
            color: var(--header-color);
            margin-bottom: 0.5rem;
        }

        .main-intro {
            font-size: 1.125rem;
            color: var(--text-muted);
            max-width: 800px;
            margin: 0 auto;
            line-height: 1.7;
        }

        .interactive-area {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 2rem;
            margin-top: 3rem;
            flex-wrap: wrap;
        }

        .hand-container {
            display: flex;
            align-items: flex-end;
            justify-content: center;
            gap: 1rem;
            width: 350px;
            height: 250px;
            padding: 1rem;
        }

        .finger {
            width: 55px;
            border-radius: 30px;
            background-color: var(--hand-bg);
            border: 4px solid var(--hand-border);
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            font-weight: 700;
            font-size: 0.8rem;
            color: #c2410c;
            padding: 8px;
            box-sizing: border-box;
            box-shadow: 0 4px 6px var(--shadow-color);
        }

        #thumb { height: 90px; align-self: flex-start; margin-top: 60px; }
        #index { height: 130px; }
        #middle { height: 150px; }
        #ring { height: 130px; }
        #pinky { height: 110px; }

        .finger:hover {
            transform: translateY(-10px) scale(1.05);
            box-shadow: 0 10px 20px var(--shadow-color);
        }

        .finger.active {
            transform: translateY(-15px) scale(1.15);
            color: white;
            border-width: 4px;
            box-shadow: 0 12px 25px var(--shadow-color);
        }

        #thumb.active { background-color: var(--thumb-color); border-color: #166534; }
        #index.active { background-color: var(--index-color); border-color: #1d4ed8; }
        #middle.active { background-color: var(--middle-color); border-color: #c2410c; }
        #ring.active { background-color: var(--ring-color); border-color: #a16207; }
        #pinky.active { background-color: var(--pinky-color); border-color: #b91c1c; }


        .info-panel {
            width: 100%;
            max-width: 450px;
            min-height: 350px;
            position: relative;
        }

        .info-card {
            background-color: var(--card-bg-color); /* Đổi màu nền card */
            border-radius: 1rem;
            padding: 2rem;
            box-shadow: 0 10px 25px -5px var(--shadow-color), 0 8px 10px -6px var(--shadow-color);
            display: flex; 
            flex-direction: column;
            align-items: center;
            text-align: center;
            border: 3px solid transparent;
            position: absolute;
            width: 100%;
            box-sizing: border-box;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.4s ease, visibility 0.4s ease, border-color 0.3s ease;
        }

        .info-card.active {
            opacity: 1;
            visibility: visible;
        }
        
        .info-card .icon {
            width: 64px;
            height: 64px;
            margin-bottom: 1rem;
        }

        .info-card .title {
            font-size: 1.75rem;
            font-weight: 700;
            margin: 0 0 0.5rem 0;
        }

        .info-card .subtitle {
            font-size: 1rem;
            font-weight: 500;
            color: var(--text-muted);
            margin-bottom: 1.5rem;
        }

        .info-card .description {
            font-size: 1.1rem;
            line-height: 1.6;
            color: var(--text-color); /* Đổi màu chữ */
        }
        
        #card-thumb { border-color: var(--thumb-color); }
        #card-thumb .title { color: var(--thumb-color); }
        #card-index { border-color: var(--index-color); }
        #card-index .title { color: var(--index-color); }
        #card-middle { border-color: var(--middle-color); }
        #card-middle .title { color: var(--middle-color); }
        #card-ring { border-color: var(--ring-color); }
        #card-ring .title { color: var(--ring-color); }
        #card-pinky { border-color: var(--pinky-color); }
        #card-pinky .title { color: var(--pinky-color); }
        
        .parent-tips {
            margin-top: 4rem;
            padding: 2rem;
            background-color: var(--card-bg-color); /* Đổi màu nền */
            border-radius: 1rem;
            border: 1px solid var(--border-color); /* Đổi màu viền */
        }
        
        .parent-tips h2 {
            text-align: center;
            color: var(--header-color);
            font-size: 1.5rem;
            margin-top: 0;
        }
        
        .parent-tips ul {
            padding-left: 20px;
            list-style-type: '⭐';
        }
        
        .parent-tips li {
            margin-bottom: 1rem;
            padding-left: 10px;
            font-size: 1.05rem;
            line-height: 1.6;
        }

        @media (max-width: 768px) {
            .interactive-area {
                flex-direction: column;
            }
            .main-title {
                font-size: 2rem;
            }
        }
    </style>
</head>
<body>

    <div class="container">
        <header class="main-header">
            <p class="main-intro">Một bài học đơn giản nhưng vô cùng quan trọng giúp cả phụ huynh và trẻ em hiểu về ranh giới an toàn, phòng chống xâm hại. Hãy cùng con khám phá nhé!</p>
        </header>

        <div class="interactive-area">
            <div class="hand-container">
                <!-- 5 ngón tay hình elip -->
                <div id="thumb" class="finger">Ngón Cái</div>
                <div id="index" class="finger">Ngón Trỏ</div>
                <div id="middle" class="finger">Ngón Giữa</div>
                <div id="ring" class="finger">Ngón Áp Út</div>
                <div id="pinky" class="finger">Ngón Út</div>
            </div>

            <div class="info-panel">
                <!-- Card mặc định -->
                <div id="card-default" class="info-card active">
                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="var(--header-color)"><path stroke-linecap="round" stroke-linejoin="round" d="M7.864 4.243A7.5 7.5 0 0119.5 10.5c0 2.92-.556 5.709-1.588 8.26l-1.275 4.015a.75.75 0 01-1.423-.45l-1.275-4.015a6 6 0 00-9.428 0L3.087 18.25a.75.75 0 01-1.423-.45l-1.275-4.015A7.5 7.5 0 017.864 4.243z" /></svg>
                    <h2 class="title" style="color: var(--header-color);">Bàn Tay An Toàn</h2>
                    <p class="description">Hãy chạm vào từng ngón tay để tìm hiểu xem bé nên tương tác với mỗi nhóm người như thế nào nhé!</p>
                </div>
                
                <!-- Card Ngón Cái -->
                <div id="card-thumb" class="info-card">
                    <h2 class="title">Ngón Cái</h2>
                    <p class="subtitle">Gần mình nhất - Người thân ruột thịt</p>
                    <p class="description">Con có thể ôm hôn những người thân nhất trong gia đình như ông bà, bố mẹ, anh chị em ruột. Đây là những người luôn yêu thương và bảo vệ con.</p>
                </div>
                
                <!-- Card Ngón Trỏ -->
                <div id="card-index" class="info-card">
                    <h2 class="title">Ngón Trỏ</h2>
                    <p class="subtitle">Xa hơn một chút - Thầy cô, bạn bè, họ hàng</p>
                    <p class="description">Với thầy cô, bạn bè và họ hàng, con có thể nắm tay, khoác vai. Đây là những hành động thể hiện sự thân thiện và quý mến.</p>
                </div>

                <!-- Card Ngón Giữa -->
                <div id="card-middle" class="info-card">
                    <h2 class="title">Ngón Giữa</h2>
                    <p class="subtitle">Người quen biết</p>
                    <p class="description">Khi gặp người quen, con chỉ nên bắt tay thôi nhé. Đây là cách chào hỏi lịch sự và vẫn giữ khoảng cách an toàn.</p>
                </div>

                <!-- Card Ngón Áp Út -->
                <div id="card-ring" class="info-card">
                    <h2 class="title">Ngón Áp Út</h2>
                    <p class="subtitle">Người lạ</p>
                    <p class="description">Nếu gặp người lạ, con hãy vẫy tay chào từ xa. Tuyệt đối không tiếp xúc gần hay đi theo họ nhé.</p>
                </div>

                <!-- Card Ngón Út -->
                <div id="card-pinky" class="info-card">
                    <h2 class="title">Ngón Út</h2>
                    <p class="subtitle">Hành vi đáng ngờ</p>
                    <p class="description">Nếu có ai đó cố tình chạm vào vùng riêng tư, khiến con sợ hãi, hãy XUA TAY, HÉT LỚN và BỎ CHẠY thật nhanh đến nơi an toàn!</p>
                </div>
            </div>
        </div>
        
        <div class="parent-tips">
            <h2>Gợi ý cho cha mẹ</h2>
            <ul>
                <li><strong>Trẻ sơ sinh - 2 tuổi:</strong> Sớm thiết lập ranh giới về việc ai được ôm, bế trẻ. Thực hiện các hoạt động vệ sinh cá nhân ở nơi riêng tư.</li>
                <li><strong>Trẻ mầm non:</strong> Dùng "Quy tắc 5 ngón tay" thường xuyên để giúp trẻ ghi nhớ. Sử dụng sách, video để minh họa.</li>
                <li><strong>Trẻ 10-12 tuổi:</strong> Đồng hành sát sao cùng con trong giai đoạn tiền dậy thì. Cởi mở trò chuyện về những thay đổi cơ thể và củng cố các kỹ năng phòng vệ.</li>
                <li><strong>Luôn luôn lắng nghe:</strong> Tạo một môi trường an toàn để trẻ luôn tin tưởng và sẵn sàng chia sẻ mọi chuyện với bạn.</li>
            </ul>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const fingers = document.querySelectorAll('.finger');
            const infoCards = document.querySelectorAll('.info-card');
            const defaultCard = document.getElementById('card-default');

            function showInfo(fingerId) {
                // Deactivate all fingers and cards
                fingers.forEach(f => f.classList.remove('active'));
                infoCards.forEach(c => {
                    if(c.id !== `card-${fingerId}`) {
                        c.classList.remove('active');
                    }
                });

                // Activate the selected finger and corresponding card
                const activeFinger = document.getElementById(fingerId);
                const activeCard = document.getElementById('card-' + fingerId);
                
                if (activeFinger) {
                    activeFinger.classList.add('active');
                }
                if (activeCard) {
                    activeCard.classList.add('active');
                } else {
                    defaultCard.classList.add('active');
                }
            }

            fingers.forEach(finger => {
                finger.addEventListener('click', function(event) {
                    event.stopPropagation(); // Ngăn sự kiện click lan ra ngoài
                    const fingerId = this.id;
                    showInfo(fingerId);
                });
            });

            // Click ra ngoài để trở về trạng thái mặc định
            document.documentElement.addEventListener('click', function() {
                showInfo('default');
            });
        });
    </script>
</body>
</html>
<p>The post <a rel="nofollow" href="https://nhatphuc.com/quy-tac-5-ngon-tay/">Quy tắc 5 ngón tay</a> appeared first on <a rel="nofollow" href="https://nhatphuc.com">Nhật Phúc</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://nhatphuc.com/quy-tac-5-ngon-tay/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Người thông minh có tính cách gì và thường làm gì?</title>
		<link>https://nhatphuc.com/nguoi-thong-minh-co-tinh-cach-gi-va-thuong-lam-gi/</link>
					<comments>https://nhatphuc.com/nguoi-thong-minh-co-tinh-cach-gi-va-thuong-lam-gi/#respond</comments>
		
		<dc:creator><![CDATA[Linh Nguyễn]]></dc:creator>
		<pubDate>Fri, 11 Jul 2025 04:01:27 +0000</pubDate>
				<category><![CDATA[Featured]]></category>
		<category><![CDATA[Khám phá]]></category>
		<category><![CDATA[người thông minh]]></category>
		<guid isPermaLink="false">https://nhatphuc.com/?p=17336</guid>

					<description><![CDATA[<p>Trí thông minh thực sự không chỉ thể hiện qua điểm số mà còn qua [&#8230;]</p>
<p>The post <a rel="nofollow" href="https://nhatphuc.com/nguoi-thong-minh-co-tinh-cach-gi-va-thuong-lam-gi/">Người thông minh có tính cách gì và thường làm gì?</a> appeared first on <a rel="nofollow" href="https://nhatphuc.com">Nhật Phúc</a>.</p>
]]></description>
										<content:encoded><![CDATA[<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        :root {
            --bg-color: #111827;
            --card-bg-color: #1f2937;
            --text-color: #d1d5db;
            --text-muted: #9ca3af;
            --border-color: #374151;
            --content-h-color: #ffffff;
            --content-p-color: #d1d5db;
            --accent-color: #38bdf8;
            --accent-color-hover: #7dd3fc;
        }

        body { 
            font-family: 'Inter', sans-serif; 
            background-color: var(--bg-color); 
            color: var(--text-color); 
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            margin: 0;
            padding: 2rem 1rem;
        }
        
        ::selection {
          background: var(--accent-color);
          color: #111827;
        }

        .container {
            max-width: 900px;
            margin: 0 auto;
        }

        .main-header {
            text-align: center;
            margin-bottom: 3rem;
        }

        .main-title {
            font-size: 2.5rem;
            font-weight: 800;
            color: var(--content-h-color);
            margin-bottom: 1rem;
        }

        .main-intro {
            font-size: 1.125rem;
            color: var(--text-muted);
            max-width: 700px;
            margin: 0 auto;
            line-height: 1.7;
        }
        
        .main-image {
            width: 100%;
            max-height: 400px;
            object-fit: cover;
            border-radius: 0.75rem;
            margin-bottom: 3rem;
            box-shadow: 0 10px 25px rgba(0,0,0,0.3);
            border: 1px solid var(--border-color);
        }

        .accordion {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .accordion-item {
            background-color: var(--card-bg-color);
            border: 1px solid var(--border-color);
            border-radius: 0.75rem;
            overflow: hidden;
            transition: background-color 0.3s ease;
        }
        
        .accordion-item.active {
             background-color: #2a374a;
        }

        .accordion-header {
            display: flex;
            align-items: center;
            width: 100%;
            padding: 1.5rem;
            cursor: pointer;
            background: none;
            border: none;
            text-align: left;
            color: var(--content-h-color);
            font-size: 1.25rem;
            font-weight: 600;
            transition: background-color 0.2s ease;
        }
        
        .accordion-header:hover {
            background-color: rgba(255, 255, 255, 0.05);
        }

        .accordion-header .icon {
            width: 24px;
            height: 24px;
            margin-right: 1rem;
            color: var(--accent-color);
            flex-shrink: 0;
        }
        
        .accordion-header .toggle-icon {
            margin-left: auto;
            width: 20px;
            height: 20px;
            transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
        }
        
        .accordion-item.active .toggle-icon {
            transform: rotate(180deg);
        }

        .accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s cubic-bezier(0.25, 0.1, 0.25, 1.0);
        }

        .accordion-content-inner {
            padding: 0 1.5rem 1.5rem 1.5rem;
            color: var(--text-muted);
            line-height: 1.8;
            font-size: 1rem;
            border-top: 1px solid var(--border-color);
            margin: 0 1.5rem;
        }
        
        .accordion-content-inner p {
            margin-bottom: 1rem;
        }
        
        .accordion-content-inner p:last-child {
            margin-bottom: 0;
        }
        
        .section-divider {
            text-align: center;
            margin: 3rem 0 2rem 0;
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--accent-color);
        }

        @media (max-width: 768px) {
            .main-title {
                font-size: 2rem;
            }
            .main-intro {
                font-size: 1rem;
            }
            .accordion-header {
                font-size: 1.1rem;
                padding: 1.25rem;
            }
        }
    </style>
</head>
<body>

    <div class="container">
        <header class="main-header">
            <p class="main-intro">Trí thông minh thực sự không chỉ thể hiện qua điểm số mà còn qua cách chúng ta sống, tương tác và giải quyết vấn đề. Hãy cùng khám phá những thói quen và dấu hiệu của người thông minh để sống một cuộc đời tích cực và ý nghĩa hơn.</p>
        </header>

        <img src="https://nhatphuc.com/wp-content/uploads/2025/07/1-18-3924-1721214088.jpg" alt="Người thông minh biết điểm mạnh, điểm yếu của bản thân và không ngừng học hỏi để tiến bộ" class="main-image">

        <div class="accordion">
            <h2 class="section-divider">5 Thói Quen Sống Tích Cực</h2>
            <!-- Item 1: Không than vãn -->
            <div class="accordion-item">
                <button class="accordion-header">
                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" /></svg>
                    <span>Không bao giờ than vãn</span>
                    <svg class="toggle-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" /></svg>
                </button>
                <div class="accordion-content">
                    <div class="accordion-content-inner">
                        <p>Nghiên cứu của Đại học Stanford cho thấy than vãn liên tục có thể làm tổn thương não bộ, ảnh hưởng đến tâm trạng và nhận thức. Người thông minh biết cách tự xử lý hoặc tìm sự hỗ trợ phù hợp thay vì chìm trong tiêu cực.</p>
                    </div>
                </div>
            </div>

            <!-- Item 2: Chấm dứt mối quan hệ độc hại -->
            <div class="accordion-item">
                <button class="accordion-header">
                     <svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" /></svg>
                    <span>Chấm dứt mối quan hệ tiêu hao năng lượng</span>
                    <svg class="toggle-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" /></svg>
                </button>
                <div class="accordion-content">
                    <div class="accordion-content-inner">
                        <p>Họ sẽ kết thúc một mối quan hệ khi thấy nó không còn hy vọng phát triển, đặc biệt khi liên tục bị thiếu tôn trọng hoặc thao túng. Họ không ngại đầu tư năng lượng và thời gian để tái tạo bản thân thay vì duy trì các kết nối độc hại.</p>
                    </div>
                </div>
            </div>

            <!-- Item 3: Sẵn sàng nói 'Không' -->
            <div class="accordion-item">
                <button class="accordion-header">
                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M10.05 4.575a1.575 1.575 0 10-3.15 0v3m3.15-3v-1.5a1.575 1.575 0 013.15 0v1.5m-3.15 0l.075 5.925m3.075.75V4.575m0 0a1.575 1.575 0 013.15 0V15M6.9 7.575a1.575 1.575 0 10-3.15 0v8.175a6.75 6.75 0 006.75 6.75h2.018a5.25 5.25 0 005.25-5.25v-2.575a3.375 3.375 0 00-3.375-3.375H9.75" /></svg>
                    <span>Sẵn sàng nói "Không"</span>
                    <svg class="toggle-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" /></svg>
                </button>
                <div class="accordion-content">
                    <div class="accordion-content-inner">
                        <p>Người thông minh không ngại nói lên suy nghĩ và thiết lập ranh giới lành mạnh bằng cách nói "Không" với những điều khiến họ khó chịu. Điều này giúp họ bước ra khỏi vùng an toàn và đón nhận những cơ hội mới.</p>
                    </div>
                </div>
            </div>
            
            <!-- Item 4: Khao khát trò chuyện sâu sắc -->
            <div class="accordion-item">
                <button class="accordion-header">
                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 20.25c4.97 0 9-3.694 9-8.25s-4.03-8.25-9-8.25S3 7.006 3 11.55c0 2.43.81 4.655 2.18 6.330M15.75 12.75h-7.5" /></svg>
                    <span>Khao khát những cuộc trò chuyện sâu sắc</span>
                    <svg class="toggle-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" /></svg>
                </button>
                <div class="accordion-content">
                    <div class="accordion-content-inner">
                        <p>Họ tránh những cuộc nói chuyện phiếm và tạo không gian cho những kết nối sâu sắc, dựa trên sự tin cậy, trung thực và thấu hiểu. Điều này giúp họ xây dựng các mối quan hệ chất lượng và ý nghĩa hơn.</p>
                    </div>
                </div>
            </div>

            <!-- Item 5: Làm vì bản thân -->
            <div class="accordion-item">
                <button class="accordion-header">
                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" /></svg>
                    <span>Làm mọi thứ vì bản thân</span>
                    <svg class="toggle-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" /></svg>
                </button>
                <div class="accordion-content">
                    <div class="accordion-content-inner">
                        <p>Họ làm mọi thứ vì mục tiêu phát triển bản thân, sống thoải mái và bình yên, thay vì tìm kiếm sự chấp thuận và soi xét từ bên ngoài. Việc không quan tâm đến việc được người khác thích là một tư duy quan trọng của họ.</p>
                    </div>
                </div>
            </div>
            
            <h2 class="section-divider">8 Dấu Hiệu Nhận Biết</h2>

            <!-- Item 6: Tò mò -->
            <div class="accordion-item">
                <button class="accordion-header">
                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" /></svg>
                    <span>Có tính tò mò mạnh mẽ</span>
                    <svg class="toggle-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" /></svg>
                </button>
                <div class="accordion-content">
                    <div class="accordion-content-inner">
                        <p>Họ không chỉ khát khao kiến thức mà còn thích đặt câu hỏi và thách thức các khái niệm hiện có. Sự tò mò thúc đẩy họ không ngừng học hỏi những điều mới và mở rộng tầm nhìn.</p>
                    </div>
                </div>
            </div>
            
            <!-- Item 7: Thích ứng -->
            <div class="accordion-item">
                <button class="accordion-header">
                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0011.667 0l3.181-3.183m-4.991-2.695v-2.695A8.25 8.25 0 005.68 9.348v2.695m0 0l3.181 3.183a8.25 8.25 0 0011.667 0l3.181-3.183" /></svg>
                    <span>Có khả năng thích ứng mạnh mẽ</span>
                    <svg class="toggle-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" /></svg>
                </button>
                <div class="accordion-content">
                    <div class="accordion-content-inner">
                        <p>Họ ứng phó linh hoạt với các tình huống và thách thức khác nhau, không bị ràng buộc bởi các khuôn khổ hiện có. Khả năng này cho phép họ giữ bình tĩnh và tìm ra giải pháp cho các vấn đề.</p>
                    </div>
                </div>
            </div>

            <!-- Item 8: Đơn giản hóa -->
            <div class="accordion-item">
                <button class="accordion-header">
                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.898 20.572L16.5 21.75l-.398-1.178a3.375 3.375 0 00-2.455-2.456L12.75 18l1.178-.398a3.375 3.375 0 002.455-2.456L16.5 14.25l.398 1.178a3.375 3.375 0 002.456 2.456L20.25 18l-1.178.398a3.375 3.375 0 00-2.456 2.456z" /></svg>
                    <span>Đơn giản hóa vấn đề</span>
                    <svg class="toggle-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" /></svg>
                </button>
                <div class="accordion-content">
                    <div class="accordion-content-inner">
                        <p>Einstein từng nói: "Nếu bạn không thể giải thích điều gì một cách đơn giản, có nghĩa là bạn chưa hiểu nó". Người thông minh có xu hướng đơn giản hóa sự việc phức tạp, giúp họ nhanh chóng nắm bắt cốt lõi vấn đề.</p>
                    </div>
                </div>
            </div>

            <!-- Item 9: Hiểu rõ bản thân -->
            <div class="accordion-item">
                <button class="accordion-header">
                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" /></svg>
                    <span>Hiểu rõ bản thân</span>
                    <svg class="toggle-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" /></svg>
                </button>
                <div class="accordion-content">
                    <div class="accordion-content-inner">
                        <p>Họ biết rất rõ điểm mạnh và điểm yếu của mình. Sự hiểu biết sâu sắc này cho phép họ phát huy tối đa điểm mạnh, đồng thời khiêm tốn tiếp thu ý kiến của người khác để khắc phục điểm yếu.</p>
                    </div>
                </div>
            </div>

            <!-- Item 10: Thích ở một mình -->
            <div class="accordion-item">
                <button class="accordion-header">
                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" /></svg>
                    <span>Thích ở một mình</span>
                    <svg class="toggle-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" /></svg>
                </button>
                <div class="accordion-content">
                    <div class="accordion-content-inner">
                        <p>Họ tận hưởng thời gian một mình để suy nghĩ và tái tạo năng lượng. Đây không phải là chống đối xã hội, mà là cách để họ làm phong phú thế giới nội tâm và phát triển khả năng suy nghĩ độc lập.</p>
                    </div>
                </div>
            </div>

            <!-- Item 11: Lắng nghe nhiều hơn -->
            <div class="accordion-item">
                <button class="accordion-header">
                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 01.865-.501 48.172 48.172 0 003.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z" /></svg>
                    <span>Lắng nghe nhiều hơn nói</span>
                    <svg class="toggle-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" /></svg>
                </button>
                <div class="accordion-content">
                    <div class="accordion-content-inner">
                        <p>Những người lắng nghe giỏi thường thông minh hơn vì họ học hỏi được nhiều điều và được truyền cảm hứng từ quan điểm của người khác. Điều này cho phép họ có cái nhìn sâu sắc và toàn diện hơn.</p>
                    </div>
                </div>
            </div>

            <!-- Item 12: Cởi mở -->
            <div class="accordion-item">
                <button class="accordion-header">
                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 18v-5.25m0 0a6.01 6.01 0 001.5-.189m-1.5.189a6.01 6.01 0 01-1.5-.189m3.75 7.478a12.06 12.06 0 01-4.5 0m3.75 2.354a15.056 15.056 0 01-4.5 0m3.75-12.454c0-1.193.255-2.31.72-3.344m-1.44 3.344a15.056 15.056 0 00-4.5 0m1.44-3.344c-.465 1.033-.72 2.15-.72 3.344M3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25M3 12a9.023 9.023 0 01.424-2.828M21 12a9.023 9.023 0 00-.424-2.828" /></svg>
                    <span>Cởi mở với những quan điểm mới</span>
                    <svg class="toggle-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" /></svg>
                </button>
                <div class="accordion-content">
                    <div class="accordion-content-inner">
                        <p>Họ sẵn sàng chấp nhận những ý tưởng khác nhau, biết rằng tư duy đa dạng giúp mở rộng tầm nhìn. Họ không ngại thừa nhận sự thiếu hiểu biết của mình và coi đó là cơ hội để học hỏi.</p>
                    </div>
                </div>
            </div>

            <!-- Item 13: Tử tế -->
            <div class="accordion-item">
                <button class="accordion-header">
                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" /></svg>
                    <span>Tử tế và nhân ái</span>
                    <svg class="toggle-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" /></svg>
                </button>
                <div class="accordion-content">
                    <div class="accordion-content-inner">
                        <p>Người khôn ngoan thường có nhiều lòng trắc ẩn, có thể hiểu được cảm xúc của người khác và sẵn sàng giúp đỡ. Lòng trắc ẩn này không chỉ thể hiện ở sự quan tâm của họ đối với mọi người mà còn ở sự nhạy cảm trước các vấn đề xã hội.</p>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const accordionItems = document.querySelectorAll('.accordion-item');

            accordionItems.forEach(item => {
                const header = item.querySelector('.accordion-header');
                const content = item.querySelector('.accordion-content');

                header.addEventListener('click', () => {
                    const isActive = item.classList.contains('active');

                    // Đóng tất cả các mục khác
                    accordionItems.forEach(otherItem => {
                        otherItem.classList.remove('active');
                        otherItem.querySelector('.accordion-content').style.maxHeight = null;
                    });

                    // Nếu mục vừa nhấp không phải là mục đang mở, thì mở nó ra
                    if (!isActive) {
                        item.classList.add('active');
                        content.style.maxHeight = content.scrollHeight + 'px';
                    }
                });
            });
        });
    </script>
</body>
</html>
<p>The post <a rel="nofollow" href="https://nhatphuc.com/nguoi-thong-minh-co-tinh-cach-gi-va-thuong-lam-gi/">Người thông minh có tính cách gì và thường làm gì?</a> appeared first on <a rel="nofollow" href="https://nhatphuc.com">Nhật Phúc</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://nhatphuc.com/nguoi-thong-minh-co-tinh-cach-gi-va-thuong-lam-gi/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>5 cách quản lý chi tiêu sai (theo Warren Buffet)</title>
		<link>https://nhatphuc.com/5-cach-quan-ly-chi-tieu-sai/</link>
					<comments>https://nhatphuc.com/5-cach-quan-ly-chi-tieu-sai/#respond</comments>
		
		<dc:creator><![CDATA[Linh Nguyễn]]></dc:creator>
		<pubDate>Fri, 11 Jul 2025 03:50:18 +0000</pubDate>
				<category><![CDATA[Khám phá]]></category>
		<category><![CDATA[Featured]]></category>
		<category><![CDATA[quản lý chi tiêu]]></category>
		<guid isPermaLink="false">https://nhatphuc.com/?p=17330</guid>

					<description><![CDATA[<p>Thông qua việc hiểu mô hình tư duy của Buffett, chúng ta có thể tránh [&#8230;]</p>
<p>The post <a rel="nofollow" href="https://nhatphuc.com/5-cach-quan-ly-chi-tieu-sai/">5 cách quản lý chi tiêu sai (theo Warren Buffet)</a> appeared first on <a rel="nofollow" href="https://nhatphuc.com">Nhật Phúc</a>.</p>
]]></description>
										<content:encoded><![CDATA[<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        /* CSS từ file style.css của bạn */
        :root {
            --bg-color: #111827; /* Nền chính - Xanh đen đậm */
            --card-bg-color: #1f2937; /* Nền cho card, header - Xám xanh */
            --text-color: #d1d5db; /* Màu chữ chính - Xám nhạt */
            --text-muted: #9ca3af; /* Màu chữ phụ - Xám */
            --border-color: #374151; /* Màu viền */
            --content-h-color: #ffffff; /* Màu tiêu đề */
            --content-p-color: #d1d5db; /* Màu chữ đoạn văn */
            --accent-color: #38bdf8; /* Màu nhấn công nghệ - Xanh Cyan */
            --accent-color-hover: #7dd3fc;
            --danger-color: #f43f5e; /* Màu cảnh báo - Đỏ hồng */
            --success-color: #34d399; /* Màu thành công - Xanh lá */
        }

        body { 
            font-family: 'Inter', sans-serif; 
            background-color: var(--bg-color); 
            color: var(--text-color); 
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            margin: 0;
            padding: 2rem 1rem;
        }
        
        ::selection {
          background: var(--accent-color);
          color: #111827;
        }

        /*--------------------------------------------------------------
        9.0 - Interactive Article Styles (Mới bổ sung)
        --------------------------------------------------------------*/
        .container {
            max-width: 1200px;
            margin: 0 auto;
            text-align: center;
        }

        .main-title {
            font-size: 2.5rem;
            font-weight: 800;
            color: var(--content-h-color);
            margin-bottom: 1rem;
            background: linear-gradient(to right, var(--accent-color), #a855f7, #ec4899); 
            -webkit-background-clip: text; 
            -webkit-text-fill-color: transparent; 
            background-clip: text; 
            text-fill-color: transparent;
        }

        .intro-text {
            font-size: 1.125rem;
            color: var(--text-muted);
            max-width: 800px;
            margin: 0 auto 3rem auto;
            line-height: 1.7;
        }

        .traps-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 1.5rem;
            perspective: 1000px; /* Cần cho hiệu ứng 3D */
        }

        .trap-card {
            background-color: transparent;
            min-height: 420px;
            border-radius: 0.75rem;
            cursor: pointer;
            position: relative;
            transform-style: preserve-3d;
            transition: transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
        }

        .trap-card.is-flipped {
            transform: rotateY(180deg);
        }

        .card-face {
            position: absolute;
            width: 100%;
            height: 100%;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 2rem;
            box-sizing: border-box;
            border-radius: 0.75rem;
            border: 1px solid var(--border-color);
            background-color: var(--card-bg-color);
            box-shadow: 0 10px 25px rgba(0,0,0,0.3);
        }

        .card-front .icon {
            width: 64px;
            height: 64px;
            margin-bottom: 1.5rem;
            color: var(--accent-color);
        }

        .card-front .card-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--content-h-color);
            margin: 0;
        }
        
        .card-front .click-hint {
            font-size: 0.875rem;
            color: var(--text-muted);
            margin-top: 0.5rem;
        }

        .card-back {
            transform: rotateY(180deg);
            justify-content: flex-start;
            text-align: left;
        }

        .card-back .card-title {
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--accent-color);
            margin: 0 0 1rem 0;
            width: 100%;
        }

        .card-back .card-description {
            font-size: 0.95rem;
            line-height: 1.6;
            color: var(--text-color);
            margin: 0 0 1.5rem 0;
        }
        
        .simulation {
            width: 100%;
            margin-top: auto;
            padding-top: 1rem;
            border-top: 1px solid var(--border-color);
        }
        
        .simulation .sim-title {
            font-size: 0.875rem;
            font-weight: 600;
            text-transform: uppercase;
            color: var(--text-muted);
            margin-bottom: 0.75rem;
        }
        
        /* Simulation specific styles */
        .bar-chart {
            width: 100%;
        }
        .bar {
            height: 20px;
            background-color: var(--danger-color);
            margin-bottom: 8px;
            border-radius: 4px;
            color: #fff;
            font-size: 0.75rem;
            font-weight: 600;
            text-align: right;
            padding: 0 8px;
            box-sizing: border-box;
            line-height: 20px;
            transition: width 0.5s ease-out;
        }
        .bar.initial { width: 100%; background-color: var(--success-color); }
        .bar.year1 { width: 80%; }
        .bar.year2 { width: 65%; }
        
        .debt-growth {
            font-size: 1.25rem;
            font-weight: 700;
            text-align: center;
        }
        .debt-initial { color: var(--success-color); }
        .debt-final { color: var(--danger-color); }

        .conclusion {
            margin-top: 4rem;
            padding: 2rem;
            background-color: var(--card-bg-color);
            border-radius: 0.75rem;
            border: 1px solid var(--border-color);
        }

        .conclusion-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--content-h-color);
            margin-bottom: 1rem;
        }
        
        .conclusion-text {
            font-size: 1.125rem;
            color: var(--text-muted);
            max-width: 800px;
            margin: 0 auto;
            line-height: 1.7;
        }

        @media (max-width: 768px) {
            .main-title {
                font-size: 2rem;
            }
            .intro-text, .conclusion-text {
                font-size: 1rem;
            }
        }
    </style>
</head>
<body>

    <div class="container">
        <p class="intro-text">
            Thông qua việc hiểu mô hình tư duy của Buffett, chúng ta có thể tránh được những cạm bẫy tài chính mà ông đã nhiều lần cảnh báo, đồng thời học hỏi từ quan điểm của ông để nâng cao khả năng tích lũy tài sản bền vững.
        </p>

        <div class="traps-grid">
            <!-- Card 1: Mua Ôtô Mới -->
            <div class="trap-card" id="card-car">
                <div class="card-face card-front">
                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 18.75a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h6m-9 0H3.375a1.125 1.125 0 01-1.125-1.125V14.25m17.25 4.5a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h1.125c.621 0 1.125-.504 1.125-1.125V14.25m-17.25 4.5v-9m17.25 9v-9m-1.5-9H5.625c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125z" />
                    </svg>
                    <h2 class="card-title">Mua Ôtô Mới</h2>
                    <p class="click-hint">(Nhấp để xem chi tiết)</p>
                </div>
                <div class="card-face card-back">
                    <h3 class="card-title">Lỗ Ngay Khi Rời Đại Lý</h3>
                    <p class="card-description">
                        Buffett cho rằng mua ôtô mới là một bẫy chi tiêu phổ biến. Xe mới mất giá cực nhanh. Thay vì đổ tiền vào món tài sản mất giá, ông chọn xe cũ để tiết kiệm và mang tiền đi đầu tư.
                    </p>
                    <div class="simulation">
                        <h4 class="sim-title">Mô Phỏng Mất Giá Xe</h4>
                        <div class="bar-chart">
                            <div class="bar initial" title="Giá trị ban đầu: 100%">100%</div>
                            <div class="bar year1" title="Sau 1 năm: còn 80%">80%</div>
                            <div class="bar year2" title="Sau 2 năm: còn 65%">65%</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Card 2: Nợ Lãi Cao -->
            <div class="trap-card" id="card-debt">
                <div class="card-face card-front">
                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h6m3-5.25H21.75m-3.75 2.25H21.75M3 16.5h18M3 12h18M3 7.5h18M7.5 3v3.75m6.75-3.75v3.75M3 3h18M3 3a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 003 21h18a2.25 2.25 0 002.25-2.25V5.25A2.25 2.25 0 0021 3H3z" />
                    </svg>
                    <h2 class="card-title">Nợ Lãi Suất Cao</h2>
                    <p class="click-hint">(Nhấp để xem chi tiết)</p>
                </div>
                <div class="card-face card-back">
                    <h3 class="card-title">Lãi Kép Theo Chiều Ngược</h3>
                    <p class="card-description">
                        Lãi suất cao sẽ biến nguyên lý lãi kép thành cơn ác mộng. Các khoản nợ thẻ tín dụng tăng nhanh hơn bất kỳ khoản đầu tư nào. Buffett khuyên phải trả hết nợ lãi cao trước khi đầu tư.
                    </p>
                    <div class="simulation">
                        <h4 class="sim-title">Mô Phỏng Nợ Thẻ Tín Dụng (Lãi 20%/năm)</h4>
                        <div class="debt-growth">
                            <span class="debt-initial">Nợ gốc: 50.000.000đ</span>
                            <br> &rarr; <br>
                            <span class="debt-final">Sau 3 năm: 86.400.000đ</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Card 3: Cờ Bạc, Xổ Số -->
            <div class="trap-card" id="card-gambling">
                <div class="card-face card-front">
                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                       <path stroke-linecap="round" stroke-linejoin="round" d="M14.25 7.756a4.5 4.5 0 100 8.488M7.5 10.5h5.25m-5.25 3h5.25M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    <h2 class="card-title">Cờ Bạc & Xổ Số</h2>
                    <p class="click-hint">(Nhấp để xem chi tiết)</p>
                </div>
                <div class="card-face card-back">
                    <h3 class="card-title">"Thuế Trí Tuệ"</h3>
                    <p class="card-description">
                        Buffett gọi đây là khoản tiền người chơi tự nguyện đóng vì không hiểu xác suất. Những trò may rủi được thiết kế cho nhà cái thắng. Thay vì mơ đổi đời, hãy đầu tư định kỳ, dù là số tiền nhỏ.
                    </p>
                     <div class="simulation">
                        <h4 class="sim-title">Xác Suất Thắng</h4>
                        <div class="bar-chart">
                            <div class="bar" style="width: 99.99%;" title="Tỷ lệ thua">Thua</div>
                            <div class="bar success" style="width: 0.01%; background-color: var(--success-color);" title="Tỷ lệ thắng">Thắng</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Card 4: Mua Nhà Quá Lớn -->
            <div class="trap-card" id="card-house">
                <div class="card-face card-front">
                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
                    </svg>
                    <h2 class="card-title">Mua Nhà Quá Lớn</h2>
                    <p class="click-hint">(Nhấp để xem chi tiết)</p>
                </div>
                <div class="card-face card-back">
                    <h3 class="card-title">Giấc Mơ Hóa Áp Lực</h3>
                    <p class="card-description">
                        Buffett vẫn ở căn nhà ông mua từ năm 1958. Nhà càng lớn, chi phí duy trì càng cao: vay nợ, điện nước, sửa chữa, thuế... Nhiều người rơi vào cảnh "nghèo vì nhà". Hãy chọn nhà hợp lý và giữ vốn để đầu tư.
                    </p>
                    <div class="simulation">
                        <h4 class="sim-title">Chi Phí Chìm Của Ngôi Nhà Lớn</h4>
                         <p class="card-description" style="font-size: 0.9rem; margin:0;">
                            • Lãi vay cao hơn<br>
                            • Thuế đất, phí bảo trì lớn<br>
                            • Chi phí điện, nước, sửa chữa tăng<br>
                            • Ít tiền dư để đầu tư sinh lời
                        </p>
                    </div>
                </div>
            </div>

            <!-- Card 5: Đầu Tư Mù Mờ -->
            <div class="trap-card" id="card-invest">
                <div class="card-face card-front">
                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.519l2.74-1.22m0 0l-3.75-2.25M21 18l-3.75-2.25m0 0l-3.75 2.25M15 12l-3.75 2.25" />
                    </svg>
                    <h2 class="card-title">Đầu Tư Mù Mờ</h2>
                    <p class="click-hint">(Nhấp để xem chi tiết)</p>
                </div>
                <div class="card-face card-back">
                    <h3 class="card-title">Không Hiểu Mà Vẫn Xuống Tiền</h3>
                    <p class="card-description">
                        "Đừng đầu tư vào thứ bạn không hiểu". Nhiều người bị cuốn theo các xu hướng "ai cũng lao vào". Buffett ủng hộ các khoản đầu tư đơn giản, chi phí thấp như quỹ chỉ số, giúp phân tán rủi ro và hưởng lợi dài hạn.
                    </p>
                     <div class="simulation">
                        <h4 class="sim-title">Nguyên Tắc Vàng</h4>
                        <p class="card-description" style="font-size: 1.1rem; text-align:center; font-weight: 600; color: var(--success-color); margin:0;">
                            "Chỉ đầu tư vào những gì bạn thực sự am hiểu."
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <div class="conclusion">
            <h2 class="conclusion-title">Kết Luận</h2>
            <p class="conclusion-text">
                Buffett không chỉ dạy cách làm giàu bằng đầu tư, mà còn dạy cách không tiêu tiền một cách thiếu khôn ngoan. Với tầng lớp trung lưu, tránh được năm cái bẫy trên đã là một bước lớn để tài chính vững vàng và tiến gần đến tự do.
            </p>
        </div>
    </div>

    <script>
        // JavaScript để xử lý việc lật thẻ
        document.addEventListener('DOMContentLoaded', function() {
            // Lấy tất cả các thẻ có class 'trap-card'
            const cards = document.querySelectorAll('.trap-card');

            // Lặp qua từng thẻ và thêm sự kiện 'click'
            cards.forEach(card => {
                card.addEventListener('click', function() {
                    // Khi một thẻ được nhấp, thêm hoặc xóa class 'is-flipped'
                    // Class này sẽ kích hoạt hiệu ứng lật trong CSS
                    this.classList.toggle('is-flipped');
                });
            });
        });
    </script>
</body>
</html>
<p>The post <a rel="nofollow" href="https://nhatphuc.com/5-cach-quan-ly-chi-tieu-sai/">5 cách quản lý chi tiêu sai (theo Warren Buffet)</a> appeared first on <a rel="nofollow" href="https://nhatphuc.com">Nhật Phúc</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://nhatphuc.com/5-cach-quan-ly-chi-tieu-sai/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Công cụ tính khoảng thời gian Ngày và Giờ</title>
		<link>https://nhatphuc.com/cong-cu-tinh-khoang-thoi-gian-ngay-va-gio/</link>
					<comments>https://nhatphuc.com/cong-cu-tinh-khoang-thoi-gian-ngay-va-gio/#respond</comments>
		
		<dc:creator><![CDATA[Linh Nguyễn]]></dc:creator>
		<pubDate>Mon, 07 Jul 2025 15:16:48 +0000</pubDate>
				<category><![CDATA[Khám phá]]></category>
		<category><![CDATA[Featured]]></category>
		<guid isPermaLink="false">https://nhatphuc.com/?p=17282</guid>

					<description><![CDATA[<p>Công Cụ Tính Khoảng Thời Gian Giữa 2 Ngày Tính khoảng thời gian Ngày và [&#8230;]</p>
<p>The post <a rel="nofollow" href="https://nhatphuc.com/cong-cu-tinh-khoang-thoi-gian-ngay-va-gio/">Công cụ tính khoảng thời gian Ngày và Giờ</a> appeared first on <a rel="nofollow" href="https://nhatphuc.com">Nhật Phúc</a>.</p>
]]></description>
										<content:encoded><![CDATA[<!DOCTYPE html>
<html lang="vi" class="">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Công Cụ Tính Khoảng Thời Gian Giữa 2 Ngày</title>
    <meta name="description" content="Tính toán chính xác khoảng thời gian giữa hai ngày và giờ bất kỳ. Công cụ hiển thị kết quả theo năm, tháng, ngày, giờ, phút, và giây.">
    <meta name="keywords" content="tính khoảng thời gian, máy tính ngày, khoảng cách giữa hai ngày, đếm ngày, tính giờ">
    
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- Google Fonts: Inter -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- Flatpickr for Date/Time Picker -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <link rel="stylesheet" href="https://npmcdn.com/flatpickr/dist/themes/dark.css">
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script src="https://npmcdn.com/flatpickr/dist/l10n/vn.js"></script>
    
    <style>
        :root {
            --bg-color: #f3f4f6;
            --card-bg-color: white;
            --text-color-primary: #1f2937;
            --text-color-secondary: #4b5563;
            --border-color: #d1d5db;
            --btn-secondary-bg: #e5e7eb;
            --btn-secondary-text: #374151;
            --btn-secondary-hover-bg: #d1d5db;
        }

        html.dark {
            --bg-color: #111827;
            --card-bg-color: #1f2937;
            --text-color-primary: #f9fafb;
            --text-color-secondary: #9ca3af;
            --border-color: #4b5563;
            --btn-secondary-bg: #374151;
            --btn-secondary-text: #f9fafb;
            --btn-secondary-hover-bg: #4b5563;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color-primary);
            transition: background-color 0.3s, color 0.3s;
        }
        .card {
            background-color: var(--card-bg-color);
            border-radius: 0.75rem;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            transition: background-color 0.3s;
        }
        .btn {
            transition: all 0.2s ease-in-out;
        }
        .btn-primary {
            background-color: #2563eb; /* blue-600 */
            color: white;
        }
        .btn-primary:hover {
            background-color: #1d4ed8; /* blue-700 */
        }
        .btn-secondary {
            background-color: var(--btn-secondary-bg);
            color: var(--btn-secondary-text);
        }
        .btn-secondary:hover {
            background-color: var(--btn-secondary-hover-bg);
        }
        #result-section {
            display: none;
        }
        .form-input {
            background-color: var(--card-bg-color);
            border: 1px solid var(--border-color);
            color: var(--text-color-primary);
        }
        .form-input:focus {
             outline: 2px solid transparent;
             outline-offset: 2px;
             --tw-ring-color: #3b82f6;
             box-shadow: 0 0 0 2px var(--tw-ring-color);
        }
    </style>
</head>
<body class="p-4 md:p-8">

    <div class="max-w-6xl mx-auto">
        <!-- Header and Theme Toggle -->
        <header class="flex justify-between items-center mb-8">
            <h1 class="text-3xl font-bold">Tính khoảng thời gian Ngày và Giờ</h1>
            <button id="theme-toggle" class="p-2 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500" style="color: var(--text-color-secondary);">
                <svg id="theme-toggle-dark-icon" class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" /></svg>
                <svg id="theme-toggle-light-icon" class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" /></svg>
            </button>
        </header>

        <!-- Main Content -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
            <!-- Calculator -->
            <div class="card p-6 md:p-8 space-y-6">
                <div>
                    <label for="start-date" class="block text-sm font-medium mb-1" style="color: var(--text-color-secondary);">Ngày giờ bắt đầu</label>
                    <input type="text" id="start-date" class="form-input w-full p-3 rounded-lg">
                </div>
                 <div>
                    <label for="end-date" class="block text-sm font-medium mb-1" style="color: var(--text-color-secondary);">Ngày giờ kết thúc</label>
                    <input type="text" id="end-date" class="form-input w-full p-3 rounded-lg">
                </div>
                <div class="flex items-center space-x-4 pt-4">
                    <button id="calculate-btn" class="btn btn-primary w-full py-3 rounded-lg font-semibold">Tính toán</button>
                    <button id="reset-btn" class="btn btn-secondary w-full py-3 rounded-lg font-semibold">Làm mới</button>
                </div>
            </div>

            <!-- Result -->
            <div id="result-section" class="card p-6 md:p-8">
                <h2 class="text-xl font-bold mb-4">Kết quả</h2>
                <div class="text-center">
                    <p id="total-duration" class="text-3xl md:text-4xl font-bold text-blue-500"></p>
                    <p id="time-range" class="text-sm mt-1" style="color: var(--text-color-secondary);"></p>
                </div>
                <div class="mt-6 border-t pt-4" style="border-color: var(--border-color);">
                    <h3 class="font-semibold mb-3 text-center">Khoảng thời gian theo các đơn vị khác nhau</h3>
                    <ul id="summary-list" class="space-y-2 text-sm" style="color: var(--text-color-secondary);">
                        <!-- Summary items will be injected here by JS -->
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <script>
        // --- Theme Management ---
        const themeToggleBtn = document.getElementById('theme-toggle');
        const darkIcon = document.getElementById('theme-toggle-dark-icon');
        const lightIcon = document.getElementById('theme-toggle-light-icon');
        const htmlEl = document.documentElement;

        const setTheme = (theme) => {
            if (theme === 'dark') {
                htmlEl.classList.add('dark');
                lightIcon.classList.remove('hidden');
                darkIcon.classList.add('hidden');
                localStorage.setItem('theme', 'dark');
            } else {
                htmlEl.classList.remove('dark');
                darkIcon.classList.remove('hidden');
                lightIcon.classList.add('hidden');
                localStorage.setItem('theme', 'light');
            }
            initFlatpickr();
        };

        themeToggleBtn.addEventListener('click', () => {
            setTheme(htmlEl.classList.contains('dark') ? 'light' : 'dark');
        });

        // --- Calculator Logic ---
        const calculateBtn = document.getElementById('calculate-btn');
        const resetBtn = document.getElementById('reset-btn');
        const resultSection = document.getElementById('result-section');
        const totalDurationEl = document.getElementById('total-duration');
        const timeRangeEl = document.getElementById('time-range');
        const summaryListEl = document.getElementById('summary-list');

        let startPicker, endPicker;

        function initFlatpickr() {
            const theme = htmlEl.classList.contains('dark') ? 'dark' : 'light';
            const options = {
                enableTime: true,
                dateFormat: "d/m/Y H:i",
                time_24hr: true,
                locale: "vn",
                theme: theme
            };
            if(startPicker) startPicker.destroy();
            if(endPicker) endPicker.destroy();
            startPicker = flatpickr("#start-date", {...options, defaultDate: '07/07/2015 00:00'});
            endPicker = flatpickr("#end-date", {...options, defaultDate: new Date()});
        }

        function calculateDuration() {
            const startDate = startPicker.selectedDates[0];
            const endDate = endPicker.selectedDates[0];

            if (!startDate || !endDate) {
                alert("Vui lòng nhập cả ngày giờ bắt đầu và kết thúc.");
                return;
            }

            if (endDate < startDate) {
                alert("Ngày kết thúc phải sau ngày bắt đầu.");
                resultSection.style.display = 'none';
                return;
            }

            // --- Main Duration (Years, Months, Days...) ---
            let tempDate = new Date(startDate);
            let years = endDate.getFullYear() - startDate.getFullYear();
            let months = endDate.getMonth() - startDate.getMonth();
            let days = endDate.getDate() - startDate.getDate();
            let hours = endDate.getHours() - startDate.getHours();
            let minutes = endDate.getMinutes() - startDate.getMinutes();
            let seconds = endDate.getSeconds() - startDate.getSeconds();

            if (seconds < 0) { minutes--; seconds += 60; }
            if (minutes < 0) { hours--; minutes += 60; }
            if (hours < 0) { days--; hours += 24; }
            if (days < 0) {
                months--;
                // Get days in the previous month of the end date
                const daysInPrevMonth = new Date(endDate.getFullYear(), endDate.getMonth(), 0).getDate();
                days += daysInPrevMonth;
            }
            if (months < 0) {
                years--;
                months += 12;
            }
            
            totalDurationEl.innerHTML = `${years} năm, ${months} tháng, ${days} ngày<br>${hours} giờ, ${minutes} phút, ${seconds} giây`;

            const formatDateTime = (date) => date.toLocaleString('vi-VN', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' });
            timeRangeEl.textContent = `${formatDateTime(startDate)} — ${formatDateTime(endDate)}`;

            // --- Summary Calculation ---
            const diff = endDate.getTime() - startDate.getTime();
            const diffSeconds = Math.floor(diff / 1000);
            const diffMinutes = Math.floor(diff / (1000 * 60));
            const diffHours = Math.floor(diff / (1000 * 60 * 60));
            const diffDays = Math.floor(diff / (1000 * 60 * 60 * 24));
            const diffWeeks = Math.floor(diffDays / 7);
            
            const summaryMonths = years * 12 + months;

            summaryListEl.innerHTML = `
                <li>= ${summaryMonths} tháng, ${days} ngày, ${hours} giờ, ${minutes} phút</li>
                <li>= ${diffWeeks} tuần, ${diffDays % 7} ngày, ${hours} giờ, ${minutes} phút</li>
                <li>= ${diffDays.toLocaleString('vi-VN')} ngày, ${hours} giờ, ${minutes} phút</li>
                <li>= ${diffHours.toLocaleString('vi-VN')} giờ, ${minutes} phút</li>
                <li>= ${diffMinutes.toLocaleString('vi-VN')} phút</li>
                <li>= ${diffSeconds.toLocaleString('vi-VN')} giây</li>
            `;

            resultSection.style.display = 'block';
        }

        function resetCalculator() {
            initFlatpickr();
            setTimeout(() => {
                calculateDuration();
            }, 100);
        }

        calculateBtn.addEventListener('click', calculateDuration);
        resetBtn.addEventListener('click', resetCalculator);

        // Initial setup
        const storedTheme = localStorage.getItem('theme');
        const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
        setTheme(storedTheme || (systemPrefersDark ? 'dark' : 'light'));
        
        window.onload = () => {
            initFlatpickr();
            setTimeout(calculateDuration, 100); // Delay to ensure pickers are ready
        };
    </script>
</body>
</html>
<p>The post <a rel="nofollow" href="https://nhatphuc.com/cong-cu-tinh-khoang-thoi-gian-ngay-va-gio/">Công cụ tính khoảng thời gian Ngày và Giờ</a> appeared first on <a rel="nofollow" href="https://nhatphuc.com">Nhật Phúc</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://nhatphuc.com/cong-cu-tinh-khoang-thoi-gian-ngay-va-gio/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Công cụ cộng trừ thời gian</title>
		<link>https://nhatphuc.com/cong-cu-cong-tru-thoi-gian/</link>
					<comments>https://nhatphuc.com/cong-cu-cong-tru-thoi-gian/#respond</comments>
		
		<dc:creator><![CDATA[Linh Nguyễn]]></dc:creator>
		<pubDate>Mon, 07 Jul 2025 15:13:10 +0000</pubDate>
				<category><![CDATA[Featured]]></category>
		<category><![CDATA[Khám phá]]></category>
		<guid isPermaLink="false">https://nhatphuc.com/?p=17279</guid>

					<description><![CDATA[<p>Công Cụ Cộng Trừ Thời Gian (Ngày, Giờ, Phút) Công cụ cộng trừ thời gian [&#8230;]</p>
<p>The post <a rel="nofollow" href="https://nhatphuc.com/cong-cu-cong-tru-thoi-gian/">Công cụ cộng trừ thời gian</a> appeared first on <a rel="nofollow" href="https://nhatphuc.com">Nhật Phúc</a>.</p>
]]></description>
										<content:encoded><![CDATA[<!DOCTYPE html>
<html lang="vi" class="">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Công Cụ Cộng Trừ Thời Gian (Ngày, Giờ, Phút)</title>
    <meta name="description" content="Công cụ cộng và trừ thời gian online. Dễ dàng tính toán bằng cách thêm hoặc bớt ngày, giờ, phút, giây từ một mốc thời gian ban đầu.">
    <meta name="keywords" content="cộng thời gian, trừ thời gian, cộng trừ thời gian, máy tính thời gian, tính giờ">
    
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- Google Fonts: Inter -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    
    <style>
        :root {
            --bg-color: #f3f4f6;
            --card-bg-color: white;
            --text-color-primary: #1f2937;
            --text-color-secondary: #4b5563;
            --border-color: #d1d5db;
            --btn-secondary-bg: #e5e7eb;
            --btn-secondary-text: #374151;
            --btn-secondary-hover-bg: #d1d5db;
            --result-bg-color: #f0fdf4;
            --result-text-color: #166534;
        }

        html.dark {
            --bg-color: #111827;
            --card-bg-color: #1f2937;
            --text-color-primary: #f9fafb;
            --text-color-secondary: #9ca3af;
            --border-color: #4b5563;
            --btn-secondary-bg: #374151;
            --btn-secondary-text: #f9fafb;
            --btn-secondary-hover-bg: #4b5563;
            --result-bg-color: #14532d;
            --result-text-color: #dcfce7;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color-primary);
            transition: background-color 0.3s, color 0.3s;
        }
        .card {
            background-color: var(--card-bg-color);
            border-radius: 0.75rem;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            transition: background-color 0.3s;
        }
        .btn {
            transition: all 0.2s ease-in-out;
        }
        .btn-primary {
            background-color: #2563eb; /* blue-600 */
            color: white;
        }
        .btn-primary:hover {
            background-color: #1d4ed8; /* blue-700 */
        }
        .btn-secondary {
            background-color: var(--btn-secondary-bg);
            color: var(--btn-secondary-text);
        }
        .btn-secondary:hover {
            background-color: var(--btn-secondary-hover-bg);
        }
        #result-section {
            display: none;
        }
        .form-input {
            background-color: var(--card-bg-color);
            border: 1px solid var(--border-color);
            color: var(--text-color-primary);
            text-align: center;
        }
        .form-input:focus {
             outline: 2px solid transparent;
             outline-offset: 2px;
             --tw-ring-color: #3b82f6;
             box-shadow: 0 0 0 2px var(--tw-ring-color);
        }
        .prose {
            color: var(--text-color-secondary);
        }
        .prose h2, .prose h3, .prose strong {
            color: var(--text-color-primary);
        }
    </style>
</head>
<body class="p-4 md:p-8">

    <div class="max-w-6xl mx-auto">
        <!-- Header and Theme Toggle -->
        <header class="flex justify-between items-center mb-8">
            <h1 class="text-3xl font-bold">Công cụ cộng trừ thời gian</h1>
            <button id="theme-toggle" class="p-2 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500" style="color: var(--text-color-secondary);">
                <svg id="theme-toggle-dark-icon" class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" /></svg>
                <svg id="theme-toggle-light-icon" class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" /></svg>
            </button>
        </header>

        <!-- Main Content -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
            <!-- Calculator -->
            <div class="card p-6 md:p-8 space-y-6">
                <!-- Start Time -->
                <div>
                    <label class="block text-lg font-medium mb-2">Thời gian ban đầu</label>
                    <div id="start-time-group" class="grid grid-cols-4 gap-2">
                        <input type="number" data-unit="days" class="form-input p-2 rounded-lg" placeholder="Ngày" value="0">
                        <input type="number" data-unit="hours" class="form-input p-2 rounded-lg" placeholder="Giờ" value="10">
                        <input type="number" data-unit="minutes" class="form-input p-2 rounded-lg" placeholder="Phút" value="5">
                        <input type="number" data-unit="seconds" class="form-input p-2 rounded-lg" placeholder="Giây" value="0">
                    </div>
                </div>

                <!-- Operation -->
                <div>
                    <label class="block text-lg font-medium mb-2">Lựa chọn Cộng hoặc Trừ</label>
                    <div class="flex items-center space-x-4 p-3 rounded-lg border" style="border-color: var(--border-color);">
                        <label class="flex items-center space-x-2 cursor-pointer">
                            <input type="radio" name="operation" value="add" class="form-radio text-blue-600" checked>
                            <span>(+) Cộng</span>
                        </label>
                        <label class="flex items-center space-x-2 cursor-pointer">
                            <input type="radio" name="operation" value="subtract" class="form-radio text-blue-600">
                            <span>(-) Trừ</span>
                        </label>
                    </div>
                </div>

                <!-- Time to Add/Subtract -->
                <div>
                    <label class="block text-lg font-medium mb-2">Thời gian để tính toán</label>
                    <div id="modify-time-group" class="grid grid-cols-4 gap-2">
                        <input type="number" data-unit="days" class="form-input p-2 rounded-lg" placeholder="Ngày" value="0">
                        <input type="number" data-unit="hours" class="form-input p-2 rounded-lg" placeholder="Giờ" value="2">
                        <input type="number" data-unit="minutes" class="form-input p-2 rounded-lg" placeholder="Phút" value="10">
                        <input type="number" data-unit="seconds" class="form-input p-2 rounded-lg" placeholder="Giây" value="0">
                    </div>
                </div>

                <!-- Buttons -->
                <div class="flex items-center space-x-4 pt-4">
                    <button id="calculate-btn" class="btn btn-primary w-full py-3 rounded-lg font-semibold">Tính toán</button>
                    <button id="reset-btn" class="btn btn-secondary w-full py-3 rounded-lg font-semibold">Làm mới</button>
                </div>
            </div>

            <!-- Result -->
            <div id="result-section" class="card p-6 md:p-8">
                <h2 class="text-xl font-bold mb-4">Kết quả</h2>
                <div class="p-4 rounded-lg text-center" style="background-color: var(--result-bg-color); color: var(--result-text-color);">
                    <p class="text-sm">Thời gian đã tính toán</p>
                    <p id="result-time" class="text-3xl font-bold my-1">0 ngày, 12 giờ, 15 phút, 0 giây</p>
                </div>
                <div class="mt-6 space-y-3 text-sm">
                    <div class="flex justify-between">
                        <span style="color: var(--text-color-secondary);">Mốc thời gian</span>
                        <span id="summary-start-time" class="font-semibold"></span>
                    </div>
                    <div class="flex justify-between">
                        <span style="color: var(--text-color-secondary);">Phép tính</span>
                        <span id="summary-operation" class="font-semibold"></span>
                    </div>
                    <div class="flex justify-between">
                        <span style="color: var(--text-color-secondary);">Cộng/Trừ thời gian</span>
                        <span id="summary-modify-time" class="font-semibold"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // --- Theme Management ---
        const themeToggleBtn = document.getElementById('theme-toggle');
        const darkIcon = document.getElementById('theme-toggle-dark-icon');
        const lightIcon = document.getElementById('theme-toggle-light-icon');
        const htmlEl = document.documentElement;

        const setTheme = (theme) => {
            if (theme === 'dark') {
                htmlEl.classList.add('dark');
                lightIcon.classList.remove('hidden');
                darkIcon.classList.add('hidden');
                localStorage.setItem('theme', 'dark');
            } else {
                htmlEl.classList.remove('dark');
                darkIcon.classList.remove('hidden');
                lightIcon.classList.add('hidden');
                localStorage.setItem('theme', 'light');
            }
        };

        themeToggleBtn.addEventListener('click', () => {
            setTheme(htmlEl.classList.contains('dark') ? 'light' : 'dark');
        });

        // --- Calculator Logic ---
        const calculateBtn = document.getElementById('calculate-btn');
        const resetBtn = document.getElementById('reset-btn');
        const resultSection = document.getElementById('result-section');
        const resultTimeEl = document.getElementById('result-time');
        const summaryStartEl = document.getElementById('summary-start-time');
        const summaryOpEl = document.getElementById('summary-operation');
        const summaryModifyEl = document.getElementById('summary-modify-time');
        
        const getTimeInSeconds = (group) => {
            const inputs = document.querySelectorAll(`#${group} input`);
            let totalSeconds = 0;
            inputs.forEach(input => {
                const value = parseInt(input.value) || 0;
                switch(input.dataset.unit) {
                    case 'days': totalSeconds += value * 86400; break;
                    case 'hours': totalSeconds += value * 3600; break;
                    case 'minutes': totalSeconds += value * 60; break;
                    case 'seconds': totalSeconds += value; break;
                }
            });
            return totalSeconds;
        };

        const formatSecondsToString = (totalSeconds) => {
            const days = Math.floor(totalSeconds / 86400);
            totalSeconds %= 86400;
            const hours = Math.floor(totalSeconds / 3600);
            totalSeconds %= 3600;
            const minutes = Math.floor(totalSeconds / 60);
            const seconds = totalSeconds % 60;
            return `${days}d ${hours}h ${minutes}m ${seconds}s`;
        };
        
         const formatSecondsToDisplay = (totalSeconds) => {
            const days = Math.floor(totalSeconds / 86400);
            totalSeconds %= 86400;
            const hours = Math.floor(totalSeconds / 3600);
            totalSeconds %= 3600;
            const minutes = Math.floor(totalSeconds / 60);
            const seconds = totalSeconds % 60;
            return `${days} ngày, ${hours} giờ, ${minutes} phút, ${seconds} giây`;
        };

        const calculateTime = () => {
            const startSeconds = getTimeInSeconds('start-time-group');
            const modifySeconds = getTimeInSeconds('modify-time-group');
            const operation = document.querySelector('input[name="operation"]:checked').value;

            let finalSeconds;
            if (operation === 'add') {
                finalSeconds = startSeconds + modifySeconds;
                summaryOpEl.textContent = '(+)';
            } else {
                finalSeconds = startSeconds - modifySeconds;
                summaryOpEl.textContent = '(-)';
            }
            
            if (finalSeconds < 0) {
                finalSeconds = 0;
                 alert("Kết quả là số âm, đã được đặt về 0.");
            }

            resultTimeEl.textContent = formatSecondsToDisplay(finalSeconds);
            summaryStartEl.textContent = formatSecondsToString(startSeconds);
            summaryModifyEl.textContent = formatSecondsToString(modifySeconds);

            resultSection.style.display = 'block';
        };

        const resetCalculator = () => {
            document.querySelectorAll('input[type="number"]').forEach(input => input.value = '');
            document.querySelector('#start-time-group input[data-unit="hours"]').value = '10';
            document.querySelector('#start-time-group input[data-unit="minutes"]').value = '5';
            document.querySelector('#modify-time-group input[data-unit="hours"]').value = '2';
            document.querySelector('#modify-time-group input[data-unit="minutes"]').value = '10';
            document.querySelector('input[value="add"]').checked = true;
            resultSection.style.display = 'none';
        };

        calculateBtn.addEventListener('click', calculateTime);
        resetBtn.addEventListener('click', resetCalculator);

        // Initial setup
        const storedTheme = localStorage.getItem('theme');
        const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
        setTheme(storedTheme || (systemPrefersDark ? 'dark' : 'light'));
        
        window.onload = calculateTime;
    </script>
</body>
</html>
<p>The post <a rel="nofollow" href="https://nhatphuc.com/cong-cu-cong-tru-thoi-gian/">Công cụ cộng trừ thời gian</a> appeared first on <a rel="nofollow" href="https://nhatphuc.com">Nhật Phúc</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://nhatphuc.com/cong-cu-cong-tru-thoi-gian/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Công cụ tính khoảng thời gian</title>
		<link>https://nhatphuc.com/cong-cu-tinh-khoang-thoi-gian/</link>
					<comments>https://nhatphuc.com/cong-cu-tinh-khoang-thoi-gian/#respond</comments>
		
		<dc:creator><![CDATA[Linh Nguyễn]]></dc:creator>
		<pubDate>Mon, 07 Jul 2025 15:09:45 +0000</pubDate>
				<category><![CDATA[Featured]]></category>
		<category><![CDATA[Khám phá]]></category>
		<guid isPermaLink="false">https://nhatphuc.com/?p=17275</guid>

					<description><![CDATA[<p>Công Cụ Tính Khoảng Thời Gian (Giờ, Phút, Giây) Công cụ tính khoảng thời gian [&#8230;]</p>
<p>The post <a rel="nofollow" href="https://nhatphuc.com/cong-cu-tinh-khoang-thoi-gian/">Công cụ tính khoảng thời gian</a> appeared first on <a rel="nofollow" href="https://nhatphuc.com">Nhật Phúc</a>.</p>
]]></description>
										<content:encoded><![CDATA[<!DOCTYPE html>
<html lang="vi" class="">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Công Cụ Tính Khoảng Thời Gian (Giờ, Phút, Giây)</title>
    <meta name="description" content="Sử dụng công cụ tính khoảng thời gian để cộng hoặc trừ giờ, phút, giây một cách nhanh chóng. Nhập thời gian bắt đầu và kết thúc để đo lường chính xác.">
    <meta name="keywords" content="tính khoảng thời gian, tính thời gian, cộng trừ thời gian, máy tính thời gian, giờ phút giây">
    
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- Google Fonts: Inter -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- Flatpickr for Date/Time Picker -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <link rel="stylesheet" href="https://npmcdn.com/flatpickr/dist/themes/dark.css">
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    
    <style>
        :root {
            --bg-color: #f3f4f6;
            --card-bg-color: white;
            --text-color-primary: #1f2937;
            --text-color-secondary: #4b5563;
            --border-color: #d1d5db;
            --btn-secondary-bg: #e5e7eb;
            --btn-secondary-text: #374151;
            --btn-secondary-hover-bg: #d1d5db;
        }

        html.dark {
            --bg-color: #111827;
            --card-bg-color: #1f2937;
            --text-color-primary: #f9fafb;
            --text-color-secondary: #9ca3af;
            --border-color: #4b5563;
            --btn-secondary-bg: #374151;
            --btn-secondary-text: #f9fafb;
            --btn-secondary-hover-bg: #4b5563;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color-primary);
            transition: background-color 0.3s, color 0.3s;
        }
        .card {
            background-color: var(--card-bg-color);
            border-radius: 0.75rem;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            transition: background-color 0.3s;
        }
        .result-card {
            border-top: 4px solid #3b82f6; /* blue-500 */
        }
        .btn {
            transition: all 0.2s ease-in-out;
        }
        .btn-primary {
            background-color: #2563eb; /* blue-600 */
            color: white;
        }
        .btn-primary:hover {
            background-color: #1d4ed8; /* blue-700 */
        }
        .btn-secondary {
            background-color: var(--btn-secondary-bg);
            color: var(--btn-secondary-text);
        }
        .btn-secondary:hover {
            background-color: var(--btn-secondary-hover-bg);
        }
        #result-section {
            display: none;
        }
        .form-input {
            background-color: var(--card-bg-color);
            border: 1px solid var(--border-color);
            color: var(--text-color-primary);
        }
        .form-input:focus {
             outline: 2px solid transparent;
             outline-offset: 2px;
             --tw-ring-color: #3b82f6;
             box-shadow: 0 0 0 2px var(--tw-ring-color);
        }
        .prose {
            color: var(--text-color-secondary);
        }
        .prose h2, .prose h3, .prose strong {
            color: var(--text-color-primary);
        }
        .prose ul > li::before {
            background-color: var(--text-color-secondary);
        }
    </style>
</head>
<body class="p-4 md:p-8">

    <div class="max-w-6xl mx-auto">
        <!-- Header and Theme Toggle -->
        <header class="flex justify-between items-center mb-8">
            <h1 class="text-3xl font-bold">Công cụ tính khoảng thời gian</h1>
            <button id="theme-toggle" class="p-2 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500" style="color: var(--text-color-secondary);">
                <svg id="theme-toggle-dark-icon" class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
                </svg>
                <svg id="theme-toggle-light-icon" class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
                </svg>
            </button>
        </header>

        <!-- Main Content -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
            <!-- Calculator -->
            <div class="card p-6 md:p-8">
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <label for="start-time" class="block text-sm font-medium mb-1" style="color: var(--text-color-secondary);">Bắt đầu</label>
                        <input type="text" id="start-time" class="form-input w-full p-3 rounded-lg" value="07:30 AM">
                    </div>
                    <div>
                        <label for="end-time" class="block text-sm font-medium mb-1" style="color: var(--text-color-secondary);">Kết thúc</label>
                        <input type="text" id="end-time" class="form-input w-full p-3 rounded-lg" value="06:00 PM">
                    </div>
                </div>
                <div class="flex items-center space-x-4 mt-8">
                    <button id="calculate-btn" class="btn btn-primary w-full py-3 rounded-lg font-semibold">Tính toán</button>
                    <button id="reset-btn" class="btn btn-secondary w-full py-3 rounded-lg font-semibold">Làm mới</button>
                </div>
            </div>

            <!-- Result -->
            <div id="result-section" class="card p-6 md:p-8 result-card">
                <h2 class="text-xl font-bold mb-4">Kết quả</h2>
                <div class="text-center">
                    <p id="total-duration" class="text-3xl md:text-4xl font-bold text-blue-500">10 giờ, 30 phút, 0 giây</p>
                    <p id="time-range" class="text-sm mt-1" style="color: var(--text-color-secondary);">7:30 SA — 6:00 CH</p>
                </div>
                <div class="mt-6 border-t pt-4" style="border-color: var(--border-color);">
                    <h3 class="font-semibold mb-3 text-center">Khoảng thời gian theo các đơn vị khác nhau</h3>
                    <ul id="summary-list" class="space-y-2 text-center" style="color: var(--text-color-secondary);">
                        <!-- Summary items will be injected here by JS -->
                    </ul>
                </div>
            </div>
        </div>

        <!-- SEO Content -->
        <article class="prose max-w-full mt-12">
            <p>Sử dụng <strong>Công cụ tính khoảng thời gian</strong> này để nhanh chóng tính toán tổng thời gian giữa hai mốc thời gian. Cho dù bạn muốn <strong>cộng hoặc trừ giờ và phút</strong>, hay tính toán một khoảng thời gian theo <strong>giờ, phút, giây</strong>, công cụ này sẽ giúp bạn đo lường các khoảng thời gian một cách chính xác.</p>
            <p>Đây là công cụ lý tưởng để tính toán giờ làm việc, thời gian di chuyển, hoặc thời lượng của bất kỳ sự kiện nào. Chỉ cần nhập thời gian bắt đầu và kết thúc, công cụ sẽ hiển thị <strong>khoảng thời gian giữa hai mốc thời gian</strong> ở định dạng dễ hiểu.</p>
            
            <h2>Công cụ này có thể làm gì?</h2>
            <ul>
                <li>Tính toán khoảng thời gian theo <strong>giờ và phút</strong>.</li>
                <li>Hiển thị kết quả theo <strong>giờ, phút, giây</strong> cho các khoảng thời gian dài hơn.</li>
                <li>Hỗ trợ cả định dạng thời gian 12 giờ (SA/CH) và <strong>24 giờ</strong>.</li>
                <li>Hoạt động như một <strong>công cụ tính khoảng thời gian và ngày</strong> cho các nhu cầu nâng cao hơn.</li>
            </ul>

            <h2>Cách hoạt động</h2>
            <ol>
                <li><strong>Nhập thời gian bắt đầu:</strong> Sử dụng định dạng chính xác (ví dụ: 08:30 SA hoặc 14:45).</li>
                <li><strong>Nhập thời gian kết thúc:</strong> Chỉ định điểm kết thúc cho khoảng thời gian.</li>
                <li><strong>Nhấp vào "Tính toán":</strong> Công cụ sẽ xác định tổng thời gian đã trôi qua.</li>
                <li><strong>Xem kết quả:</strong> Bạn sẽ nhận được tổng thời gian theo <em>giờ và phút</em>, hoặc theo <em>giờ, phút, giây</em> nếu khoảng thời gian kéo dài qua nhiều giờ.</li>
            </ol>

            <h2>Các trường hợp sử dụng ví dụ</h2>
            <ul>
                <li>Tính toán giờ làm việc của ca từ 9:00 SA đến 5:30 CH.</li>
                <li>Xác định thời gian bay giữa hai múi giờ (nếu ngày được hỗ trợ).</li>
                <li>Theo dõi thời gian thực hiện dự án hoặc nhiệm vụ bằng cách sử dụng <em>mốc thời gian bắt đầu và kết thúc</em>.</li>
            </ul>

            <h2>Các câu hỏi thường gặp</h2>
            <h3>1. Tôi có thể sử dụng công cụ này để cộng hoặc trừ thời gian thủ công không?</h3>
            <p>Có. Bạn có thể nhập thời gian bắt đầu và kết thúc để <strong>cộng hoặc trừ</strong> sự khác biệt. Để tính toán thời gian thủ công, chỉ cần đặt một giá trị làm cơ sở và giá trị kia làm thời gian bạn muốn bù trừ.</p>
            <h3>2. Công cụ có hoạt động với định dạng thời gian 24 giờ không?</h3>
            <p>Chắc chắn rồi. Công cụ hỗ trợ cả định dạng 12 giờ (SA/CH) và <strong>24 giờ</strong>. Chỉ cần đảm bảo bạn nhập thời gian một cách nhất quán.</p>
            <h3>3. Nó có thể tính toán qua nhiều giờ không?</h3>
            <p>Có. Nếu thời gian bắt đầu và kết thúc của bạn kéo dài nhiều giờ, công cụ sẽ trả về kết quả theo <strong>giờ, phút, giây</strong>, lý tưởng cho các phép tính thời gian dài.</p>
        </article>
    </div>

    <script>
        // --- Theme Management ---
        const themeToggleBtn = document.getElementById('theme-toggle');
        const darkIcon = document.getElementById('theme-toggle-dark-icon');
        const lightIcon = document.getElementById('theme-toggle-light-icon');
        const htmlEl = document.documentElement;

        const setTheme = (theme) => {
            if (theme === 'dark') {
                htmlEl.classList.add('dark');
                lightIcon.classList.remove('hidden');
                darkIcon.classList.add('hidden');
                localStorage.setItem('theme', 'dark');
            } else {
                htmlEl.classList.remove('dark');
                darkIcon.classList.remove('hidden');
                lightIcon.classList.add('hidden');
                localStorage.setItem('theme', 'light');
            }
             // Re-initialize flatpickr with the new theme
            initFlatpickr();
        };

        themeToggleBtn.addEventListener('click', () => {
            setTheme(htmlEl.classList.contains('dark') ? 'light' : 'dark');
        });

        // --- Duration Calculator Logic ---
        const startTimeInput = document.getElementById('start-time');
        const endTimeInput = document.getElementById('end-time');
        const calculateBtn = document.getElementById('calculate-btn');
        const resetBtn = document.getElementById('reset-btn');
        const resultSection = document.getElementById('result-section');
        const totalDurationEl = document.getElementById('total-duration');
        const timeRangeEl = document.getElementById('time-range');
        const summaryListEl = document.getElementById('summary-list');

        let startPicker, endPicker;

        function initFlatpickr() {
            const theme = htmlEl.classList.contains('dark') ? 'dark' : 'light';
            const options = {
                enableTime: true,
                noCalendar: true,
                dateFormat: "h:i K",
                time_24hr: false,
                theme: theme
            };
            if(startPicker) startPicker.destroy();
            if(endPicker) endPicker.destroy();
            startPicker = flatpickr(startTimeInput, options);
            endPicker = flatpickr(endTimeInput, options);
        }

        calculateBtn.addEventListener('click', calculateDuration);
        resetBtn.addEventListener('click', resetCalculator);

        function calculateDuration() {
            const startTime = startPicker.selectedDates[0];
            const endTime = endPicker.selectedDates[0];

            if (!startTime || !endTime) {
                alert("Vui lòng nhập cả thời gian bắt đầu và kết thúc.");
                return;
            }
            
            let difference = endTime.getTime() - startTime.getTime();

            // If difference is negative, assume it's the next day
            if (difference < 0) {
                difference += 24 * 60 * 60 * 1000; // add 24 hours in milliseconds
            }

            const totalMilliseconds = difference;
            const totalSeconds = Math.floor(totalMilliseconds / 1000);
            const totalMinutes = Math.floor(totalSeconds / 60);
            const totalHours = Math.floor(totalMinutes / 60);

            const seconds = totalSeconds % 60;
            const minutes = totalMinutes % 60;
            const hours = totalHours % 24;

            totalDurationEl.textContent = `${hours} giờ, ${minutes} phút, ${seconds} giây`;
            
            const formatTime = (date) => date.toLocaleTimeString('vi-VN', { hour: 'numeric', minute: '2-digit', hour12: true }).replace('SA', 'SA').replace('CH', 'CH');
            timeRangeEl.textContent = `${formatTime(startTime)} — ${formatTime(endTime)}`;

            summaryListEl.innerHTML = `
                <li>= ${totalMinutes.toLocaleString('vi-VN')} phút, ${seconds} giây</li>
                <li>= ${totalSeconds.toLocaleString('vi-VN')} giây</li>
                <li>= ${totalMilliseconds.toLocaleString('vi-VN')} mili giây</li>
            `;

            resultSection.style.display = 'block';
        }

        function resetCalculator() {
            startPicker.setDate("07:30 AM");
            endPicker.setDate("06:00 PM");
            resultSection.style.display = 'none';
        }
        
        // Initial setup
        const storedTheme = localStorage.getItem('theme');
        const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
        setTheme(storedTheme || (systemPrefersDark ? 'dark' : 'light'));
        
        window.onload = () => {
            initFlatpickr();
            // Set default values after initialization
            setTimeout(() => {
                 startPicker.setDate("07:30 AM");
                 endPicker.setDate("06:00 PM");
                 calculateDuration();
            }, 100);
        };
    </script>
</body>
</html>
<p>The post <a rel="nofollow" href="https://nhatphuc.com/cong-cu-tinh-khoang-thoi-gian/">Công cụ tính khoảng thời gian</a> appeared first on <a rel="nofollow" href="https://nhatphuc.com">Nhật Phúc</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://nhatphuc.com/cong-cu-tinh-khoang-thoi-gian/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Công cụ tính tuổi của bạn</title>
		<link>https://nhatphuc.com/cong-cu-tinh-tuoi-cua-ban/</link>
					<comments>https://nhatphuc.com/cong-cu-tinh-tuoi-cua-ban/#respond</comments>
		
		<dc:creator><![CDATA[Linh Nguyễn]]></dc:creator>
		<pubDate>Mon, 07 Jul 2025 14:59:12 +0000</pubDate>
				<category><![CDATA[Featured]]></category>
		<guid isPermaLink="false">https://nhatphuc.com/?p=17267</guid>

					<description><![CDATA[<p>Công Cụ Tính Tuổi Chính Xác Tính tuổi của bạn Ngày sinh Tính đến ngày [&#8230;]</p>
<p>The post <a rel="nofollow" href="https://nhatphuc.com/cong-cu-tinh-tuoi-cua-ban/">Công cụ tính tuổi của bạn</a> appeared first on <a rel="nofollow" href="https://nhatphuc.com">Nhật Phúc</a>.</p>
]]></description>
										<content:encoded><![CDATA[<!DOCTYPE html>
<html lang="vi" class="">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Công Cụ Tính Tuổi Chính Xác</title>
    <meta name="description" content="Công cụ tính tuổi online chính xác nhất. Nhập ngày sinh của bạn để biết bạn bao nhiêu tuổi, tháng, ngày và đếm ngược đến sinh nhật tiếp theo.">
    <meta name="keywords" content="tính tuổi, máy tính tuổi, tuổi của tôi, bao nhiêu tuổi, công cụ tính tuổi">
    
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- Google Fonts: Inter -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- Flatpickr for Date/Time Picker -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <link rel="stylesheet" href="https://npmcdn.com/flatpickr/dist/themes/dark.css">
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    
    <style>
        :root {
            --bg-color: #f3f4f6;
            --card-bg-color: white;
            --text-color-primary: #1f2937;
            --text-color-secondary: #4b5563;
            --border-color: #d1d5db;
            --btn-secondary-bg: #e5e7eb;
            --btn-secondary-text: #374151;
            --btn-secondary-hover-bg: #d1d5db;
        }

        html.dark {
            --bg-color: #111827;
            --card-bg-color: #1f2937;
            --text-color-primary: #f9fafb;
            --text-color-secondary: #9ca3af;
            --border-color: #4b5563;
            --btn-secondary-bg: #374151;
            --btn-secondary-text: #f9fafb;
            --btn-secondary-hover-bg: #4b5563;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color-primary);
            transition: background-color 0.3s, color 0.3s;
        }
        .card {
            background-color: var(--card-bg-color);
            border-radius: 0.75rem;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            transition: background-color 0.3s;
        }
        .result-card {
            border-left: 4px solid #3b82f6; /* blue-500 */
        }
        .btn {
            transition: all 0.2s ease-in-out;
        }
        .btn-primary {
            background-color: #2563eb; /* blue-600 */
            color: white;
        }
        .btn-primary:hover {
            background-color: #1d4ed8; /* blue-700 */
        }
        .btn-secondary {
            background-color: var(--btn-secondary-bg);
            color: var(--btn-secondary-text);
        }
        .btn-secondary:hover {
            background-color: var(--btn-secondary-hover-bg);
        }
        #result-section {
            display: none;
        }
        .form-input {
            background-color: var(--card-bg-color);
            border: 1px solid var(--border-color);
            color: var(--text-color-primary);
        }
        .form-input:focus {
             outline: 2px solid transparent;
             outline-offset: 2px;
             --tw-ring-color: #3b82f6;
             box-shadow: 0 0 0 2px var(--tw-ring-color);
        }
    </style>
</head>
<body class="flex items-center justify-center min-h-screen p-4 relative">

    <!-- Theme Toggle Button -->
    <button id="theme-toggle" class="absolute top-4 right-4 p-2 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500" style="color: var(--text-color-secondary);">
        <svg id="theme-toggle-dark-icon" class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
        </svg>
        <svg id="theme-toggle-light-icon" class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
        </svg>
    </button>

    <div class="max-w-4xl w-full grid grid-cols-1 md:grid-cols-2 gap-8">
        
        <!-- Input Card -->
        <div class="card p-6 md:p-8">
            <h1 class="text-2xl font-bold mb-6" style="color: var(--text-color-primary);">Tính tuổi của bạn</h1>
            
            <div class="space-y-4">
                <div>
                    <label for="birthdate" class="block text-sm font-medium mb-1" style="color: var(--text-color-secondary);">Ngày sinh</label>
                    <input type="text" id="birthdate" class="form-input w-full p-3 rounded-lg" placeholder="Chọn ngày sinh của bạn...">
                </div>
                <div>
                    <label for="todaydate" class="block text-sm font-medium mb-1" style="color: var(--text-color-secondary);">Tính đến ngày</label>
                    <input type="text" id="todaydate" class="form-input w-full p-3 rounded-lg">
                </div>
            </div>
            
            <div class="flex items-center space-x-4 mt-8">
                <button id="calculate-btn" class="btn btn-primary w-full py-3 rounded-lg font-semibold">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block mr-2" viewBox="0 0 20 20" fill="currentColor">
                      <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd" />
                    </svg>
                    Tính toán
                </button>
                <button id="reset-btn" class="btn btn-secondary w-full py-3 rounded-lg font-semibold">Làm mới</button>
            </div>
        </div>
        
        <!-- Result Card -->
        <div id="result-section" class="card p-6 md:p-8 result-card">
            <h2 class="text-xl font-bold mb-4" style="color: var(--text-color-primary);">Kết quả</h2>
            
            <div id="age-result" class="mb-6">
                <p class="text-3xl md:text-4xl font-bold text-blue-600" id="age-string"></p>
                <p class="text-sm mt-1" id="date-range" style="color: var(--text-color-secondary);"></p>
            </div>
            
            <div id="next-birthday-result" class="bg-green-50 dark:bg-green-900/50 border border-green-200 dark:border-green-700 rounded-lg p-4 mb-6">
                <p class="font-semibold text-green-800 dark:text-green-300">Sinh nhật tiếp theo</p>
                <p class="text-2xl font-bold text-green-700 dark:text-green-200" id="days-to-birthday"></p>
            </div>
            
            <div>
                <h3 class="font-semibold mb-3" style="color: var(--text-color-primary);">Thống kê chi tiết</h3>
                <ul id="summary-list" class="space-y-2" style="color: var(--text-color-secondary);">
                    <!-- Summary items will be injected here by JS -->
                </ul>
            </div>
        </div>
    </div>

    <script>
        // --- Theme Management ---
        const themeToggleBtn = document.getElementById('theme-toggle');
        const darkIcon = document.getElementById('theme-toggle-dark-icon');
        const lightIcon = document.getElementById('theme-toggle-light-icon');
        const htmlEl = document.documentElement;

        // Function to set theme
        const setTheme = (theme) => {
            if (theme === 'dark') {
                htmlEl.classList.add('dark');
                lightIcon.classList.remove('hidden');
                darkIcon.classList.add('hidden');
                localStorage.setItem('theme', 'dark');
            } else {
                htmlEl.classList.remove('dark');
                darkIcon.classList.remove('hidden');
                lightIcon.classList.add('hidden');
                localStorage.setItem('theme', 'light');
            }
        };

        // Event listener for toggle button
        themeToggleBtn.addEventListener('click', () => {
            const currentTheme = localStorage.getItem('theme') || 'light';
            setTheme(currentTheme === 'light' ? 'dark' : 'light');
        });

        // Initialize theme on page load
        const storedTheme = localStorage.getItem('theme');
        const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
        setTheme(storedTheme || (systemPrefersDark ? 'dark' : 'light'));

        // --- Age Calculator Logic ---

        // Initialize date pickers
        const dobPicker = flatpickr("#birthdate", {
            dateFormat: "d/m/Y",
            maxDate: "today",
            defaultDate: "15/03/1995",
            theme: localStorage.getItem('theme') || 'light', // Set initial theme
        });
        const todayPicker = flatpickr("#todaydate", {
            dateFormat: "d/m/Y",
            defaultDate: "today",
            theme: localStorage.getItem('theme') || 'light', // Set initial theme
        });

        // DOM Elements
        const calculateBtn = document.getElementById('calculate-btn');
        const resetBtn = document.getElementById('reset-btn');
        const resultSection = document.getElementById('result-section');
        const ageStringEl = document.getElementById('age-string');
        const dateRangeEl = document.getElementById('date-range');
        const daysToBirthdayEl = document.getElementById('days-to-birthday');
        const summaryListEl = document.getElementById('summary-list');

        // Event Listeners
        calculateBtn.addEventListener('click', calculateAge);
        resetBtn.addEventListener('click', resetCalculator);

        function calculateAge() {
            const dobString = dobPicker.input.value;
            const todayString = todayPicker.input.value;

            if (!dobString || !todayString) {
                alert("Vui lòng chọn cả ngày sinh và ngày tính toán.");
                return;
            }

            const dob = parseDate(dobString);
            const today = parseDate(todayString);

            if (dob >= today) {
                alert("Ngày sinh phải trước ngày tính toán.");
                return;
            }

            // --- Age Calculation ---
            let years = today.getFullYear() - dob.getFullYear();
            let months = today.getMonth() - dob.getMonth();
            let days = today.getDate() - dob.getDate();

            if (days < 0) {
                months--;
                const prevMonth = new Date(today.getFullYear(), today.getMonth(), 0);
                days += prevMonth.getDate();
            }

            if (months < 0) {
                years--;
                months += 12;
            }

            ageStringEl.textContent = `${years} năm, ${months} tháng, ${days} ngày`;
            
            const options = { year: 'numeric', month: 'long', day: 'numeric' };
            dateRangeEl.textContent = `${dob.toLocaleDateString('vi-VN', options)} — ${today.toLocaleDateString('vi-VN', options)}`;

            // --- Next Birthday ---
            const currentYear = new Date().getFullYear();
            let nextBirthday = new Date(currentYear, dob.getMonth(), dob.getDate());
            if (nextBirthday.getTime() < new Date().setHours(0,0,0,0)) {
                nextBirthday.setFullYear(currentYear + 1);
            }
            const diffTimeBirthday = nextBirthday - new Date();
            const diffDaysBirthday = Math.ceil(diffTimeBirthday / (1000 * 60 * 60 * 24));
            daysToBirthdayEl.textContent = `${diffDaysBirthday} ngày`;

            // --- Summary ---
            const diffTimeTotal = today - dob;
            const totalDays = Math.floor(diffTimeTotal / (1000 * 60 * 60 * 24));
            const totalMonths = years * 12 + months;
            const totalWeeks = Math.floor(totalDays / 7);
            const remainingDaysInWeeks = totalDays % 7;
            const totalHours = totalDays * 24;
            const totalMinutes = totalHours * 60;
            const totalSeconds = totalMinutes * 60;

            summaryListEl.innerHTML = `
                <li><strong>Tổng số tháng:</strong> ${totalMonths.toLocaleString('vi-VN')}</li>
                <li><strong>Tổng số tuần:</strong> ${totalWeeks.toLocaleString('vi-VN')} tuần, ${remainingDaysInWeeks} ngày</li>
                <li><strong>Tổng số ngày:</strong> ${totalDays.toLocaleString('vi-VN')}</li>
                <li><strong>Tổng số giờ:</strong> ${totalHours.toLocaleString('vi-VN')}</li>
                <li><strong>Tổng số phút:</strong> ${totalMinutes.toLocaleString('vi-VN')}</li>
                <li><strong>Tổng số giây:</strong> ${totalSeconds.toLocaleString('vi-VN')}</li>
            `;

            // Show results
            resultSection.style.display = 'block';
        }

        function resetCalculator() {
            dobPicker.setDate("15/03/1995");
            todayPicker.setDate(new Date());
            resultSection.style.display = 'none';
        }
        
        // Helper to parse dd/mm/yyyy format
        function parseDate(dateString) {
            const parts = dateString.split('/');
            // Note: parts[1] - 1 because months are 0-indexed in JS
            return new Date(parts[2], parts[1] - 1, parts[0]);
        }
        
        // Initially calculate on load with default values
        window.onload = calculateAge;

    </script>
</body>
</html>
<p>The post <a rel="nofollow" href="https://nhatphuc.com/cong-cu-tinh-tuoi-cua-ban/">Công cụ tính tuổi của bạn</a> appeared first on <a rel="nofollow" href="https://nhatphuc.com">Nhật Phúc</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://nhatphuc.com/cong-cu-tinh-tuoi-cua-ban/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Cách tính tiền nước sinh hoạt</title>
		<link>https://nhatphuc.com/cach-tinh-tien-nuoc-sinh-hoat/</link>
					<comments>https://nhatphuc.com/cach-tinh-tien-nuoc-sinh-hoat/#respond</comments>
		
		<dc:creator><![CDATA[Linh Nguyễn]]></dc:creator>
		<pubDate>Fri, 04 Jul 2025 14:58:46 +0000</pubDate>
				<category><![CDATA[Featured]]></category>
		<category><![CDATA[Khám phá]]></category>
		<guid isPermaLink="false">https://nhatphuc.com/?p=16976</guid>

					<description><![CDATA[<p>Công cụ tính tiền nước sinh hoạt (Hà Nội, TP.HCM) Công cụ tính tiền Nước [&#8230;]</p>
<p>The post <a rel="nofollow" href="https://nhatphuc.com/cach-tinh-tien-nuoc-sinh-hoat/">Cách tính tiền nước sinh hoạt</a> appeared first on <a rel="nofollow" href="https://nhatphuc.com">Nhật Phúc</a>.</p>
]]></description>
										<content:encoded><![CDATA[<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Công cụ tính tiền nước sinh hoạt (Hà Nội, TP.HCM)</title>
    <meta name="description" content="Công cụ tính và ước tính hóa đơn tiền nước sinh hoạt hàng tháng theo biểu giá mới nhất tại Hà Nội và TP.HCM.">
    <meta name="keywords" content="tính tiền nước, hóa đơn nước, giá nước sinh hoạt, tiền nước hà nội, tiền nước tphcm">
    
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Google Fonts: Inter -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #111827; /* gray-900 */
        }
        .form-input, .form-select {
            background-color: #374151; /* gray-700 */
            border-color: #4b5563; /* gray-600 */
            color: #f3f4f6; /* gray-100 */
        }
        .form-input:focus, .form-select:focus {
            --tw-ring-color: #3b82f6; /* blue-500 */
            border-color: #3b82f6;
        }
        .result-card {
            background: linear-gradient(145deg, #1f2937, #374151);
        }
    </style>
</head>
<body class="text-gray-300">

    <div class="container mx-auto p-4 sm:p-8 max-w-4xl">
        <!-- Header -->
        <header class="text-center mb-10">
            <h1 class="text-3xl sm:text-4xl font-bold text-white">Công cụ tính tiền Nước sinh hoạt</h1>
            <p class="text-gray-400 mt-2">Ước tính hóa đơn tiền nước hàng tháng của bạn.</p>
        </header>

        <!-- Main Content -->
        <div class="grid lg:grid-cols-5 gap-8">
            <!-- Input Form -->
            <div class="lg:col-span-2 bg-gray-800 p-6 rounded-lg shadow-lg">
                <h2 class="text-2xl font-semibold text-white mb-6">Thông tin tiêu thụ</h2>
                <div class="space-y-5">
                    <div>
                        <label for="water-region" class="block text-sm font-medium text-gray-300 mb-1">Khu vực</label>
                        <select id="water-region" class="w-full p-3 rounded-md form-select">
                            <option value="hanoi">Hà Nội</option>
                            <option value="hcm">TP. Hồ Chí Minh</option>
                        </select>
                    </div>
                    <div id="household-members-container" class="hidden">
                         <label for="household-members" class="block text-sm font-medium text-gray-300 mb-1">Số người trong hộ</label>
                         <input type="number" id="household-members" class="w-full p-3 rounded-md form-input" value="4" min="1">
                    </div>
                    <div>
                        <label for="water-usage" class="block text-sm font-medium text-gray-300 mb-1">Tổng nước tiêu thụ</label>
                        <div class="relative">
                            <input type="number" id="water-usage" class="w-full p-3 rounded-md form-input font-bold pl-4" placeholder="Ví dụ: 25">
                            <span class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400">m³</span>
                        </div>
                    </div>
                    <button id="calculate-water-btn" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition duration-300">Tính toán</button>
                </div>
            </div>

            <!-- Result Display -->
            <div class="lg:col-span-3 result-card border border-gray-700 p-6 rounded-lg shadow-lg">
                <h2 class="text-2xl font-semibold text-white mb-4">Chi tiết hóa đơn Nước (ước tính)</h2>
                <div id="water-result-details" class="space-y-2">
                    <p class="text-gray-500">Vui lòng nhập thông tin và nhấn "Tính toán".</p>
                </div>
                <hr class="border-gray-600 my-4">
                <div class="space-y-3">
                    <div class="flex justify-between items-center"><p class="text-md text-gray-400">Tổng tiền trước thuế:</p><p id="water-subtotal" class="text-lg font-semibold text-white">0 VNĐ</p></div>
                    <div class="flex justify-between items-center"><p class="text-md text-gray-400">Thuế VAT (5%):</p><p id="water-vat" class="text-lg font-semibold text-white">0 VNĐ</p></div>
                    <div class="flex justify-between items-center"><p class="text-md text-gray-400">Phí BVMT (10%):</p><p id="water-env-fee" class="text-lg font-semibold text-white">0 VNĐ</p></div>
                    <div class="flex justify-between items-center pt-2 border-t border-dashed border-gray-600"><p class="text-xl font-bold text-white">Tổng cộng thanh toán:</p><p id="water-total-bill" class="text-3xl font-extrabold text-yellow-300">0 VNĐ</p></div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // DOM Elements
        const waterRegionSelect = document.getElementById('water-region');
        const householdMembersContainer = document.getElementById('household-members-container');
        const householdMembersInput = document.getElementById('household-members');
        const waterUsageInput = document.getElementById('water-usage');
        const calculateWaterBtn = document.getElementById('calculate-water-btn');
        const waterResultDetailsEl = document.getElementById('water-result-details');
        const waterSubtotalEl = document.getElementById('water-subtotal');
        const waterVatEl = document.getElementById('water-vat');
        const waterEnvFeeEl = document.getElementById('water-env-fee');
        const waterTotalBillEl = document.getElementById('water-total-bill');

        // Price data
        const waterPriceTiers = {
            hanoi: [
                { limit: 10, price: 5973 }, { limit: 10, price: 7052 }, { limit: 10, price: 8669 }, { limit: Infinity, price: 15929 }
            ],
            hcm: [
                { limit: 4, price: 6700 }, { limit: 2, price: 12900 }, { limit: Infinity, price: 14400 }
            ]
        };
        const WATER_VAT_RATE = 0.05;
        const WATER_ENV_FEE_RATE = 0.10;

        // Formatter for currency
        const formatter = new Intl.NumberFormat('vi-VN', { style: 'currency', currency: 'VND', minimumFractionDigits: 0 });

        function calculateWaterBill() {
            const region = waterRegionSelect.value;
            const totalUsage = parseInt(waterUsageInput.value) || 0;
            const members = parseInt(householdMembersInput.value) || 1;
            
            if (totalUsage <= 0) {
                 waterResultDetailsEl.innerHTML = '<p class="text-gray-500">Vui lòng nhập số m³ tiêu thụ.</p>';
                 return;
            }

            let remainingUsage = totalUsage;
            let subtotal = 0;
            let breakdownHTML = '';
            let tierNumber = 1;
            
            let tiers = waterPriceTiers[region];
            if (region === 'hcm') {
                // Adjust limits for HCM based on household members
                tiers = tiers.map(tier => ({ ...tier, limit: tier.limit * members }));
            }

            for (const tier of tiers) {
                if (remainingUsage <= 0) break;
                const usageInThisTier = Math.min(remainingUsage, tier.limit);
                const costInThisTier = usageInThisTier * tier.price;
                subtotal += costInThisTier;
                
                let tierLabel = `Bậc ${tierNumber}`;
                if(region === 'hcm') {
                    if(tierNumber === 1) tierLabel = `Định mức (đến ${tier.limit} m³)`;
                    else if(tierNumber === 2) tierLabel = `Vượt định mức 1 (từ ${tiers[0].limit + 1} - ${tiers[0].limit + tier.limit} m³)`;
                    else tierLabel = `Vượt định mức 2 (trên ${tiers[0].limit + tiers[1].limit} m³)`;
                }

                breakdownHTML += `<div class="flex justify-between text-sm"><span class="text-gray-400">${tierLabel}: ${usageInThisTier} m³ x ${tier.price.toLocaleString('vi-VN')}đ</span><span class="font-medium text-white">${formatter.format(costInThisTier)}</span></div>`;
                remainingUsage -= usageInThisTier;
                tierNumber++;
            }

            const vat = subtotal * WATER_VAT_RATE;
            const envFee = subtotal * WATER_ENV_FEE_RATE;
            const totalBill = subtotal + vat + envFee;

            waterResultDetailsEl.innerHTML = breakdownHTML;
            waterSubtotalEl.textContent = formatter.format(subtotal);
            waterVatEl.textContent = formatter.format(vat);
            waterEnvFeeEl.textContent = formatter.format(envFee);
            waterTotalBillEl.textContent = formatter.format(totalBill);
        }
        
        // Event Listeners
        waterRegionSelect.addEventListener('change', () => {
             householdMembersContainer.classList.toggle('hidden', waterRegionSelect.value !== 'hcm');
             calculateWaterBill();
        });
        
        calculateWaterBtn.addEventListener('click', calculateWaterBill);
        [waterUsageInput, householdMembersInput].forEach(input => {
            input.addEventListener('input', calculateWaterBill);
            input.addEventListener('keydown', e => e.key === 'Enter' && calculateWaterBill());
        });

        // Initial check on load
        window.onload = () => {
            householdMembersContainer.classList.toggle('hidden', waterRegionSelect.value !== 'hcm');
        };

    </script>

</body>
</html>
<p>The post <a rel="nofollow" href="https://nhatphuc.com/cach-tinh-tien-nuoc-sinh-hoat/">Cách tính tiền nước sinh hoạt</a> appeared first on <a rel="nofollow" href="https://nhatphuc.com">Nhật Phúc</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://nhatphuc.com/cach-tinh-tien-nuoc-sinh-hoat/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
