.. tiêu đề: Trình phân tích phân mảnh và khám phá đường dẫn MTU
.. sên: máy phân tích phân mảnh mtu
.. ngày: 2026-02-02 17:00:00 UTC
.. tags: mạng, mtu, phân mảnh, máy tính, công cụ
.. thể loại: Công cụ
.. liên kết:
.. mô tả: Chẩn đoán và ngăn ngừa các sự cố hiệu suất liên quan đến MTU bằng máy tính đóng gói, trình hiển thị phân mảnh và trình khắc phục sự cố PMTUD
.. loại: văn bản
<link href="/assets/css/tools-common.css" rel="stylesheet"/>
<style>
        * {
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
        }

        .calc-container {
            max-width: 1000px;
            margin: 20px auto;
            padding: 20px;
        }

        .calc-header {
            margin-bottom: 30px;
            padding: 25px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            color: white;
        }

        .calc-header h2 {
            margin-top: 0;
            color: white;
            font-size: 28px;
            margin-bottom: 10px;
        }

        .calc-header p {
            margin: 10px 0 20px 0;
            opacity: 0.95;
            font-size: 15px;
        }

        .preset-section {
            margin: 20px 0;
        }

        .preset-label {
            display: block;
            margin-bottom: 10px;
            font-weight: 600;
            font-size: 14px;
        }

        .preset-buttons {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .preset-btn {
            padding: 10px 16px;
            background: rgba(255,255,255,0.15);
            color: white;
            border: 2px solid rgba(255,255,255,0.3);
            border-radius: 6px;
            cursor: pointer;
            font-size: 13px;
            font-weight: 600;
            transition: all 0.2s ease;
            white-space: nowrap;
        }

        .preset-btn:hover {
            background: rgba(255,255,255,0.25);
            border-color: rgba(255,255,255,0.5);
            transform: translateY(-2px);
        }

        .input-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin-top: 20px;
        }

        .input-group {
            display: flex;
            flex-direction: column;
        }

        .input-group label {
            margin-bottom: 8px;
            font-weight: 600;
            font-size: 14px;
            color: rgba(255,255,255,0.95);
        }

        .input-group input,
        .input-group select {
            padding: 14px;
            font-size: 16px;
            border: 2px solid rgba(255,255,255,0.3);
            border-radius: 6px;
            font-family: 'Courier New', monospace;
            background: rgba(255,255,255,0.95);
            transition: all 0.3s ease;
        }

        .input-group input:focus,
        .input-group select:focus {
            outline: none;
            border-color: #4CAF50;
            background: white;
            box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
        }

        .button-group {
            display: flex;
            gap: 10px;
            margin-top: 15px;
        }

        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }

        .btn-primary {
            background: #4CAF50;
            color: white;
        }

        .btn-primary:hover {
            background: #45a049;
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.3);
        }

        .btn-secondary {
            background: rgba(255,255,255,0.2);
            color: white;
            border: 1px solid rgba(255,255,255,0.3);
        }

        .btn-secondary:hover {
            background: rgba(255,255,255,0.3);
        }

        .encap-stack {
            margin-top: 15px;
            min-height: 50px;
        }

        .encap-layer {
            background: rgba(255,255,255,0.15);
            padding: 10px 15px;
            margin-bottom: 8px;
            border-radius: 6px;
            border-left: 4px solid #4CAF50;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: white;
        }

        .encap-layer .name {
            font-weight: 600;
        }

        .encap-layer .overhead {
            background: #4CAF50;
            color: white;
            padding: 4px 12px;
            border-radius: 20px;
            font-weight: bold;
            font-size: 12px;
            margin-right: 10px;
        }

        .encap-layer .remove-btn {
            background: #dc3545;
            color: white;
            border: none;
            padding: 4px 10px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
        }

        .section {
            margin-bottom: 30px;
            background: white;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }

        .section h3 {
            margin-top: 0;
            margin-bottom: 20px;
            color: #333;
            border-left: 5px solid #667eea;
            padding-left: 15px;
            font-size: 20px;
        }

        .result-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
        }

        .result-card {
            background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
            color: white;
            padding: 20px;
            border-radius: 8px;
            text-align: center;
            transition: transform 0.2s ease;
        }

        .result-card:hover {
            transform: translateY(-2px);
        }

        .result-card.warning {
            background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
            color: #000;
        }

        .result-card.error {
            background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
        }

        .result-card.neutral {
            background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
        }

        .result-label {
            font-size: 14px;
            opacity: 0.9;
            margin-bottom: 10px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .status-text {
            font-size: 11px;
            opacity: 0.8;
            font-weight: normal;
            text-transform: capitalize;
        }

        .result-value {
            font-size: 42px;
            font-weight: bold;
            margin: 10px 0;
            font-family: 'Courier New', monospace;
        }

        .result-detail {
            font-size: 13px;
            opacity: 0.9;
        }

        /* Packet Visualization */
        .packet-diagram {
            margin: 20px 0;
        }

        .packet {
            border: 2px solid #667eea;
            border-radius: 8px;
            margin-bottom: 15px;
            overflow: hidden;
            animation: fadeIn 0.5s ease;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .packet-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 10px 15px;
            font-weight: bold;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .packet-body {
            padding: 15px;
            background: #f8f9fa;
        }

        .packet-section {
            display: flex;
            margin-bottom: 8px;
            border-left: 3px solid #667eea;
            padding-left: 10px;
        }

        .packet-section-label {
            font-weight: bold;
            min-width: 150px;
            color: #555;
        }

        .packet-section-value {
            font-family: 'Courier New', monospace;
            color: #333;
        }

        .fragment-visual {
            display: flex;
            gap: 10px;
            margin: 20px 0;
            flex-wrap: wrap;
        }

        .fragment-box {
            flex: 1;
            min-width: 200px;
            border: 2px solid #17a2b8;
            border-radius: 6px;
            padding: 15px;
            background: white;
            position: relative;
        }

        .fragment-box::before {
            content: attr(data-fragment);
            position: absolute;
            top: -12px;
            left: 10px;
            background: #17a2b8;
            color: white;
            padding: 2px 10px;
            border-radius: 10px;
            font-size: 11px;
            font-weight: bold;
        }

        /* PMTUD Flowchart */
        .flowchart {
            margin: 20px 0;
        }

        .flow-node {
            background: white;
            border: 2px solid #667eea;
            border-radius: 8px;
            padding: 20px;
            margin: 15px auto;
            max-width: 600px;
            position: relative;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .flow-node:hover {
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
            transform: scale(1.02);
        }

        .flow-node.decision {
            background: #fff3cd;
            border-color: #ffc107;
        }

        .flow-node.success {
            background: #d4edda;
            border-color: #28a745;
        }

        .flow-node.problem {
            background: #f8d7da;
            border-color: #dc3545;
        }

        .flow-node-title {
            font-weight: bold;
            font-size: 16px;
            margin-bottom: 10px;
            color: #333;
        }

        .flow-node-content {
            color: #555;
            line-height: 1.6;
        }

        .flow-options {
            display: flex;
            gap: 10px;
            margin-top: 15px;
        }

        .flow-btn {
            flex: 1;
            padding: 10px;
            border: 2px solid #667eea;
            background: white;
            border-radius: 6px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.2s ease;
        }

        .flow-btn:hover {
            background: #667eea;
            color: white;
        }

        .flow-arrow {
            text-align: center;
            color: #667eea;
            font-size: 24px;
            margin: 10px 0;
        }

        .solution-box {
            background: #d1ecf1;
            border-left: 4px solid #17a2b8;
            padding: 15px;
            border-radius: 6px;
            margin-top: 15px;
        }

        .solution-box h4 {
            margin-top: 0;
            color: #0c5460;
        }

        .solution-box code {
            background: #2d2d2d;
            color: #f8f8f2;
            padding: 2px 6px;
            border-radius: 3px;
            font-family: 'Courier New', monospace;
        }

        .alert {
            padding: 15px 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            border-left: 4px solid;
        }

        .alert-info {
            background: #d1ecf1;
            border-color: #17a2b8;
            color: #0c5460;
        }

        .alert-warning {
            background: #fff3cd;
            border-color: #ffc107;
            color: #856404;
        }

        .alert-danger {
            background: #f8d7da;
            border-color: #dc3545;
            color: #721c24;
        }

        .data-row {
            display: flex;
            margin: 12px 0;
            padding: 10px;
            background: #f8f9fa;
            border-radius: 4px;
            border-left: 3px solid #667eea;
        }

        .data-label {
            font-weight: bold;
            color: #555;
            min-width: 200px;
            flex-shrink: 0;
        }

        .data-value {
            color: #333;
            font-family: 'Courier New', monospace;
        }

        .hidden {
            display: none;
        }

        /* Encapsulation Stack Builder */
        .stack-builder {
            background: white;
            border: 2px solid #dee2e6;
            border-radius: 8px;
            padding: 20px;
            margin: 20px 0;
        }

        .stack-builder h4 {
            margin-top: 0;
            margin-bottom: 15px;
            color: #333;
        }

        .stack-container {
            min-height: 100px;
            border: 2px dashed #dee2e6;
            border-radius: 8px;
            padding: 10px;
            background: #f8f9fa;
        }

        .stack-empty {
            text-align: center;
            padding: 40px 20px;
            color: #6c757d;
            font-style: italic;
        }

        .stack-layer {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 10px;
            cursor: move;
            transition: all 0.2s ease;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .stack-layer:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        }

        .stack-layer.dragging {
            opacity: 0.5;
            cursor: grabbing;
        }

        .layer-info {
            flex: 1;
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .drag-handle {
            font-size: 20px;
            cursor: grab;
            user-select: none;
        }

        .drag-handle:active {
            cursor: grabbing;
        }

        .layer-name {
            font-weight: 600;
            font-size: 16px;
        }

        .layer-overhead {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .overhead-value {
            font-family: 'Courier New', monospace;
            font-size: 18px;
            font-weight: bold;
            background: rgba(255,255,255,0.2);
            padding: 4px 12px;
            border-radius: 4px;
            min-width: 60px;
            text-align: center;
        }

        .overhead-edit {
            display: none;
        }

        .overhead-value.editing {
            display: none;
        }

        .overhead-value.editing + .overhead-edit {
            display: block;
        }

        .overhead-edit input {
            width: 60px;
            padding: 4px 8px;
            border: 2px solid white;
            border-radius: 4px;
            font-family: 'Courier New', monospace;
            font-size: 16px;
            text-align: center;
        }

        .layer-actions {
            display: flex;
            gap: 8px;
        }

        .layer-btn {
            background: rgba(255,255,255,0.2);
            border: 1px solid rgba(255,255,255,0.3);
            color: white;
            padding: 6px 12px;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.2s ease;
            font-size: 14px;
        }

        .layer-btn:hover {
            background: rgba(255,255,255,0.3);
        }

        .layer-btn:focus {
            outline: none;
            box-shadow: 0 0 0 2px rgba(255,255,255,0.5);
        }

        .effective-mtu-display {
            background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
            color: white;
            padding: 20px;
            border-radius: 8px;
            margin-top: 15px;
            text-align: center;
            font-size: 18px;
            font-weight: 600;
        }

        .effective-mtu-display.warning {
            background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
        }

        .effective-mtu-display.error {
            background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
        }

        .mtu-value-large {
            font-size: 36px;
            font-family: 'Courier New', monospace;
            margin: 10px 0;
        }

        .preset-badge {
            background: rgba(102, 126, 234, 0.1);
            border: 2px solid #667eea;
            color: #667eea;
            padding: 10px 15px;
            border-radius: 8px;
            margin-top: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .add-layer-section {
            margin-top: 20px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 8px;
            border: 1px solid #dee2e6;
        }

        @media (max-width: 768px) {
            .input-grid {
                grid-template-columns: 1fr;
            }

            .preset-buttons {
                flex-direction: column;
            }

            .preset-btn {
                width: 100%;
            }

            .result-grid {
                grid-template-columns: 1fr;
            }

            .fragment-visual {
                flex-direction: column;
            }

            /* Minimum touch target size for mobile accessibility */
            .btn, button, .preset-btn, .layer-btn {
                min-height: 44px;
                min-width: 44px;
            }
        }

@media (max-width: 600px) {
    .input-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .calc-header h2 {
        font-size: 22px;
    }

    .calc-header p {
        font-size: 14px;
    }

    .btn {
        width: 100%;
        padding: 10px 16px;
    }

    .preset-buttons {
        flex-direction: column;
    }

    .preset-btn {
        width: 100%;
        padding: 10px 12px;
    }

    .fragment-box {
        margin-bottom: 10px;
    }

    .flow-node {
        max-width: 100%;
        margin: 10px auto;
    }

    .flow-node-title {
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .calc-header {
        padding: 15px;
        margin-bottom: 20px;
    }

    .calc-header h2 {
        font-size: 20px;
    }

    .preset-buttons {
        gap: 8px;
    }

    .preset-btn {
        font-size: 12px;
        padding: 8px 12px;
    }

    .input-grid {
        gap: 10px;
    }

    .btn {
        font-size: 14px;
        padding: 10px 12px;
    }

    .flow-node {
        padding: 12px;
    }

    .flow-node-title {
        font-size: 14px;
    }

    .flow-node-content {
        font-size: 13px;
    }

    code {
        font-size: 12px;
    }

    .packet-section-label {
        font-size: 12px;
    }

    .packet-section-value {
        font-size: 12px;
    }
}
</style>
<div class="calc-container">
<div class="calc-header">
<h2>📦 Trình phân tích phân mảnh và khám phá đường dẫn MTU</h2>
<p>Tính toán MTU hiệu quả sau chi phí đóng gói, trực quan hóa sự phân mảnh và khắc phục sự cố PMTUD</p>
<div class="preset-section">
<label class="preset-label">Kịch bản nhanh (Cài đặt sẵn bằng một cú nhấp chuột):</label>
<div aria-label="MTU preset scenarios" class="preset-buttons" role="group">
<button aria-label="Load Internet preset: 1500 MTU standard Ethernet" class="preset-btn" onclick="loadPreset('internet')">🌐 Internet (1500)</button>
<button aria-label="Load PPPoE DSL preset: 1492 MTU for DSL connections" class="preset-btn" onclick="loadPreset('pppoe')">📞 PPPoE DSL (1492)</button>
<button aria-label="Load Azure preset: 1400 MTU for Azure cloud" class="preset-btn" onclick="loadPreset('azure')">☁️ Azure (1400)</button>
<button aria-label="Load AWS preset: 9001 MTU jumbo frames for AWS VPC" class="preset-btn" onclick="loadPreset('aws')">☁️ AWS Jumbo (9001)</button>
<button aria-label="Load Google Cloud preset: 1460 MTU for GCP" class="preset-btn" onclick="loadPreset('gcp')">☁️ GCP (1460)</button>
<button aria-label="Load MPLS VPN preset: 1448 MTU for MPLS networks" class="preset-btn" onclick="loadPreset('mpls')">🔀 MPLS VPN (1448)</button>
</div>
</div>
<div class="input-group" style="max-width: 400px;">
<label for="baseMtu">MTU cơ sở (byte):<span class="tooltip-trigger" data-tooltip="Maximum Transmission Unit - largest frame size before encapsulation. Standard Ethernet is 1500 bytes.">?</span>
</label>
<input id="baseMtu" max="9216" min="576" oninput="updateStackMTU()" type="number" value="1500"/>
</div>
Huy hiệu cài sẵn (hiển thị khi cài đặt trước được kích hoạt)
<div class="preset-badge" id="presetBadge" style="display: none;">
<div>
<strong>🎯 Dựa trên:</strong> <span id="presetName">Azure</span>
</div>
<button class="btn btn-small btn-secondary" onclick="resetToPreset()">Đặt lại về cài đặt trước</button>
</div>
Trình tạo ngăn xếp đóng gói
<div class="stack-builder">
<h4>🏗️ Ngăn xếp đóng gói<span style="font-size: 14px; font-weight: normal; color: #666;">(Kéo để sắp xếp lại)</span></h4>
<div class="stack-container" id="stackContainer">
<div class="stack-empty">Không có lớp đóng gói nào được thêm vào. Thêm một lớp bên dưới để xem nó ảnh hưởng đến MTU như thế nào.</div>
</div>
Hiển thị MTU hiệu quả
<div class="effective-mtu-display" id="effectiveMtuDisplay">
<div style="font-size: 14px; opacity: 0.9;">MTU tải trọng hiệu quả</div>
<div class="mtu-value-large" id="stackMtuValue">1500</div>
<div style="font-size: 14px; opacity: 0.9;">byte có sẵn cho dữ liệu</div>
</div>
Thêm phần lớp
<div class="add-layer-section">
<label style="display: block; margin-bottom: 10px; font-weight: 600;">Thêm lớp đóng gói:</label>
<div style="display: flex; gap: 10px; flex-wrap: wrap;">
<select id="encapType" style="flex: 1; min-width: 200px; padding: 10px; border: 2px solid #ced4da; border-radius: 6px;">
<option value="">Chọn đóng gói...</option>
<option value="vlan">VLAN 802.1Q (+4 byte)</option>
<option value="qinq">Thẻ đôi QinQ (+8 byte)</option>
<option value="mpls1">Nhãn MPLS (+4 byte)</option>
<option value="mpls2">Nhãn MPLS 2 (+8 byte)</option>
<option value="mpls3">Nhãn MPLS 3 (+12 byte)</option>
<option value="gre">GRE (+24 byte)</option>
<option value="ipsec">IPsec ESP (+60 byte trung bình)</option>
<option value="vxlan">VXLAN (+50 byte)</option>
<option value="l2tp">L2TPv3 (+12 byte)</option>
<option value="pppoe">PPPoE (+8 byte)</option>
<option value="geneve">GENEVE (+8 byte cơ sở)</option>
<option value="nvgre">NVGRE (+42 byte)</option>
</select>
<button class="btn btn-primary" id="addEncap" onclick="addStackLayer()">+ Thêm lớp</button>
</div>
</div>
</div>
<div class="encap-stack" id="encapStack"></div>
</div>
Kiểm soát phiên
<div class="session-controls" id="sessionControls">
<span class="session-status" id="sessionStatus">Chưa lưu</span>
<button class="btn btn-small btn-secondary" onclick="clearSession()">Xóa dữ liệu đã lưu</button>
</div>
Khôi phục biểu ngữ
<div class="alert alert-info" id="restoreBanner" style="display: none;">
<strong>Đã tìm thấy phiên trước đó!</strong>
<button class="btn btn-small btn-primary" onclick="restoreSession()" style="margin: 0 10px;">Khôi phục</button>
<button class="btn btn-small btn-secondary" onclick="dismissRestore()">Bắt đầu mới</button>
</div>
Cách sử dụng bảng điều khiển
<div class="how-to-use">
<div class="how-to-use-header">
<span>📖 Cách sử dụng công cụ này</span>
<span class="toggle-icon">▼</span>
</div>
<div class="how-to-use-content">
<ul>
<li><strong>Bắt đầu nhanh:</strong>Nhấp vào nút cài sẵn (Internet, PPPoE, Azure, v.v.) để tải các tình huống phổ biến</li>
<li><strong>Tính toán tùy chỉnh:</strong>Đặt MTU cơ sở của bạn và thêm từng lớp đóng gói</li>
<li><strong>Kết quả:</strong>Xem MTU tải trọng hiệu quả của bạn, MSS TCP được đề xuất và phân tích chi phí chung</li>
<li><strong>Phân mảnh:</strong>Nếu MTU &lt; 1500, sơ đồ phân mảnh trực quan sẽ tự động xuất hiện</li>
<li><strong>Khắc phục sự cố:</strong>Sử dụng sơ đồ PMTUD để chẩn đoán các sự cố Khám phá Đường dẫn MTU</li>
<li><strong>Tác động hiệu suất:</strong>Công cụ tính toán lãng phí băng thông cho thấy chi phí thực sự của việc phân mảnh</li>
</ul>
</div>
</div>
Kết quả MTU
<div aria-atomic="false" aria-live="polite" class="section" id="resultsSection">
<h3>Kết quả tính toán MTU</h3>
<div aria-label="MTU calculation results" class="result-grid" role="region">
<div class="result-card" id="mtuCard">
<div class="result-label">MTU tải trọng hiệu quả</div>
<div class="result-value" id="effectiveMtu">1500</div>
<div class="result-detail">byte có sẵn cho dữ liệu</div>
</div>
<div class="result-card neutral">
<div class="result-label">Tổng chi phí</div>
<div class="result-value" id="totalOverhead">0</div>
<div class="result-detail">byte đã tiêu thụ</div>
</div>
<div class="result-card" id="mssCard">
<div class="result-label">MSS TCP được đề xuất</div>
<div class="result-value" id="tcpMss">1460</div>
<div class="result-detail">MTU - 40 (tiêu đề IP+TCP)</div>
</div>
</div>
<div class="hidden" id="mtuWarning"></div>
<div style="margin-top: 20px;">
<div class="data-row">
<span class="data-label">MTU cơ sở:</span>
<span class="data-value" id="displayBaseMtu">1500 byte</span>
</div>
<div class="data-row">
<span class="data-label">Chi phí đóng gói:</span>
<span class="data-value" id="displayOverhead">0 byte</span>
</div>
<div class="data-row">
<span class="data-label">MTU hiệu quả:</span>
<span class="data-value" id="displayEffective">1500 byte</span>
</div>
<div class="data-row">
<span class="data-label">Tiêu đề IP + TCP:</span>
<span class="data-value">40 byte (20 IP + 20 TCP)</span>
</div>
<div class="data-row">
<span class="data-label">Tải trọng TCP tối đa:</span>
<span class="data-value" id="displayPayload">1460 byte</span>
</div>
<div class="data-row">
<span class="data-label">Hiệu quả:</span>
<span class="data-value" id="displayEfficiency">97,3%</span>
</div>
</div>
</div>
Trực quan hóa phân mảnh
<div class="section hidden" id="fragmentationSection">
<h3>📊 Trực quan hóa sự phân mảnh</h3>
<div class="alert alert-warning">
<strong>⚠️ Đã phát hiện phân mảnh:</strong>Cấu hình MTU hiện tại của bạn sẽ gây ra hiện tượng phân mảnh IP, ảnh hưởng đến hiệu suất.</div>
<div id="fragmentationDetails"></div>
<div class="packet-diagram" id="packetDiagram"></div>
</div>
Máy tính lãng phí băng thông (Tính năng P0)
<div class="section" id="bandwidthWasteSection">
<h3>💸 Máy tính lãng phí băng thông</h3>
<div class="alert alert-info">
<strong>ℹ️ Tác động đến hiệu suất:</strong>Tính toán chi phí thực tế của việc phân mảnh băng thông mạng của bạn.</div>
<div class="input-grid">
<div class="input-group">
<label for="packetsPerSec">Gói mỗi giây:<span class="tooltip-trigger" data-tooltip="Expected packet rate. For example, a 1Gbps link at 1500-byte MTU can handle ~82,000 pps.">?</span>
</label>
<input id="packetsPerSec" max="1000000" min="1" type="number" value="10000"/>
</div>
<div class="input-group">
<label for="avgPacketSize">Kích thước gói trung bình (byte):<span class="tooltip-trigger" data-tooltip="Average size of packets on your network. Web traffic is often 1200-1500 bytes.">?</span>
</label>
<input id="avgPacketSize" max="9000" min="64" type="number" value="1400"/>
</div>
<div class="input-group">
<label for="linkSpeed">Tốc độ liên kết (Mbps):<span class="tooltip-trigger" data-tooltip="Your network link capacity (e.g., 1000 for 1 Gigabit).">?</span>
</label>
<input id="linkSpeed" max="100000" min="1" type="number" value="1000"/>
</div>
</div>
<button class="btn btn-primary" onclick="calculateBandwidthWaste()">Tính toán tác động</button>
<div aria-atomic="true" aria-live="polite" class="hidden" id="bandwidthWasteResults" style="margin-top: 20px;">
<div aria-label="Bandwidth waste analysis results" class="result-grid" role="region">
<div class="result-card warning">
<div class="result-label">⚠ Lãng phí băng thông<span class="status-text">(Cảnh báo)</span></div>
<div class="result-value" id="wastedMbps">0</div>
<div class="result-detail">Mbps bị mất do chi phí phân mảnh</div>
</div>
<div class="result-card error">
<div class="result-label">✗ Tỷ lệ chi phí chung<span class="status-text">(Phê bình)</span></div>
<div class="result-value" id="wastedPercent">0%</div>
<div class="result-detail">tổng băng thông bị lãng phí</div>
</div>
<div class="result-card warning">
<div class="result-label">⚠ Mảnh vỡ bổ sung<span class="status-text">(Cảnh báo)</span></div>
<div class="result-value" id="extraFragments">0</div>
<div class="result-detail">gói bổ sung mỗi giây</div>
</div>
</div>
<div class="data-row">
<span class="data-label">Các mảnh trên mỗi gói gốc:</span>
<span class="data-value" id="fragmentsPerPacket">1</span>
</div>
<div class="data-row">
<span class="data-label">Chi phí chung cho mỗi gói:</span>
<span class="data-value" id="overheadPerPacket">0 byte</span>
</div>
<div class="data-row">
<span class="data-label">Tổng chi phí mỗi giây:</span>
<span class="data-value" id="totalOverheadPerSec">0 byte</span>
</div>
<div class="data-row">
<span class="data-label">Hành động được đề xuất:</span>
<span class="data-value" id="recommendation">Tăng MTU hoặc kích hoạt PMTUD</span>
</div>
</div>
</div>
Trình khắc phục sự cố tương tác PMTUD
<div class="section">
<h3>🔍 Trình khắc phục sự cố tương tác Path MTU Discovery (PMTUD)</h3>
<div class="alert alert-info">
<strong>ℹ️ Sơ đồ tương tác:</strong>Nhấp qua các bước chẩn đoán bên dưới để khắc phục sự cố PMTUD.</div>
<div class="flowchart" id="pmtudFlowchart">
<div class="flow-node decision" id="step1" onclick="showStep(2)">
<div class="flow-node-title">🚀 Bắt đầu: Bị mất gói hoặc hiệu suất chậm?</div>
<div class="flow-node-content">Bấm vào để bắt đầu quá trình chẩn đoán. Chúng tôi sẽ hướng dẫn các bước khắc phục sự cố mang tính hệ thống.</div>
<div class="flow-options">
<button class="flow-btn" onclick="event.stopPropagation(); showStep(2)">Bắt đầu chẩn đoán →</button>
</div>
</div>
<div class="flow-arrow hidden" id="arrow1">↓</div>
<div class="flow-node decision hidden" id="step2">
<div class="flow-node-title">❓ Bạn có thể ping với các gói nhỏ (64 byte) không?</div>
<div class="flow-node-content">Bài kiểm tra:<code>ping -s 64 destination</code>(Linux) hoặc<code>ping -l 64 destination</code>(Cửa sổ)</div>
<div class="flow-options">
<button class="flow-btn" onclick="event.stopPropagation(); showStep(2.1)">✅ Có</button>
<button class="flow-btn" onclick="event.stopPropagation(); showStep(2.2)">❌ Không</button>
</div>
</div>
<div class="flow-arrow hidden" id="arrow2">↓</div>
<div class="flow-node problem hidden" id="step2.2">
<div class="flow-node-title">🔴 Sự cố lớp 1/2 - Không liên quan đến MTU</div>
<div class="flow-node-content">Nếu các gói nhỏ bị lỗi thì đây là sự cố kết nối chứ không phải do MTU/phân mảnh.</div>
<div class="solution-box">
<h4>Các bước khắc phục sự cố:</h4>
<ul>
<li>Kiểm tra kết nối vật lý và tính toàn vẹn của cáp</li>
<li>Xác minh trạng thái giao diện:<code>show interface</code></li>
<li>Kiểm tra lỗi/loại bỏ trên các giao diện</li>
<li>Xác minh bảng định tuyến và ARP</li>
<li>Kiểm tra quy tắc tường lửa và ACL</li>
</ul>
</div>
<button class="btn btn-secondary" onclick="resetFlowchart()" style="margin-top: 15px;">↺ Khởi động lại</button>
</div>
<div class="flow-node decision hidden" id="step2.1">
<div class="flow-node-title">❓ Bạn có thể ping với các gói lớn (1472 byte) không?</div>
<div class="flow-node-content">Bài kiểm tra:<code>ping -s 1472 destination</code>(Linux) hoặc<code>ping -l 1472 destination</code>(Cửa sổ)<br/><small>Lưu ý: 1472 dữ liệu + 20 IP + 8 ICMP = gói 1500 byte</small>
</div>
<div class="flow-options">
<button class="flow-btn" onclick="event.stopPropagation(); showStep(3.1)">✅ Có</button>
<button class="flow-btn" onclick="event.stopPropagation(); showStep(3.2)">❌ Không</button>
</div>
</div>
<div class="flow-arrow hidden" id="arrow3">↓</div>
<div class="flow-node success hidden" id="step3.1">
<div class="flow-node-title">✅ Không phát hiện thấy vấn đề MTU</div>
<div class="flow-node-content">Các gói lớn hoạt động tốt. Cấu hình MTU của bạn là chính xác. Tìm kiếm các vấn đề hiệu suất khác.</div>
<button class="btn btn-secondary" onclick="resetFlowchart()" style="margin-top: 15px;">↺ Khởi động lại</button>
</div>
<div class="flow-node decision hidden" id="step3.2">
<div class="flow-node-title">❓ Bạn có thể ping với tập hợp bit DF (Don't Fragment) không?</div>
<div class="flow-node-content">Bài kiểm tra:<code>ping -M do -s 1472 destination</code>(Linux) hoặc<code>ping -f -l 1472 destination</code>(Cửa sổ)</div>
<div class="flow-options">
<button class="flow-btn" onclick="event.stopPropagation(); showStep(4.1)">✅ Có</button>
<button class="flow-btn" onclick="event.stopPropagation(); showStep(4.2)">❌ Không</button>
</div>
</div>
<div class="flow-arrow hidden" id="arrow4">↓</div>
<div class="flow-node problem hidden" id="step4.2">
<div class="flow-node-title">🔴 Đã phát hiện lỗ đen PMTUD!</div>
<div class="flow-node-content">Thông báo ICMP "Cần phân mảnh" (Loại 3, Mã 4) đang được lọc ở đâu đó trong đường dẫn.</div>
<div class="solution-box">
<h4>Giải pháp:</h4>
<strong>1. Kẹp TCP MSS (Khuyến nghị):</strong>
<pre style="background: #2d2d2d; color: #f8f8f2; padding: 10px; border-radius: 4px; overflow-x: auto; margin: 10px 0;">
! Cisco IOS/IOS-XE
interface GigabitEthernet0/0
 ip tcp adjust-mss <span id="clampMss" style="color: #ce9178;">1460</span>

! Juniper JunOS
set interfaces ge-0/0/0 unit 0 family inet tcp-mss <span style="color: #ce9178;">1460</span>

# Linux iptables
iptables -t mangle -A FORWARD -p tcp --tcp-flags SYN,RST SYN \\
  -j TCPMSS --set-mss <span style="color: #ce9178;">1460</span></pre>
<strong>2. Cho phép ICMP Loại 3 Mã 4:</strong>
<pre style="background: #2d2d2d; color: #f8f8f2; padding: 10px; border-radius: 4px; overflow-x: auto; margin: 10px 0;">
! Cisco ACL
permit icmp any any packet-too-big

# iptables
iptables -A INPUT -p icmp --icmp-type fragmentation-needed -j ACCEPT</pre>
<strong>3. Giảm MTU giao diện:</strong>
<pre style="background: #2d2d2d; color: #f8f8f2; padding: 10px; border-radius: 4px; overflow-x: auto; margin: 10px 0;">
! Cisco
interface GigabitEthernet0/0
 ip mtu <span id="reducedMtu" style="color: #ce9178;">1400</span></pre>
</div>
<button class="btn btn-secondary" onclick="resetFlowchart()" style="margin-top: 15px;">↺ Khởi động lại</button>
</div>
<div class="flow-node success hidden" id="step4.1">
<div class="flow-node-title">✅ PMTUD hoạt động chính xác</div>
<div class="flow-node-content">Đường dẫn MTU Discovery đang hoạt động bình thường. Tin nhắn ICMP không được lọc.</div>
<div class="solution-box">
<h4>Hành động được đề xuất:</h4>
<ul>
<li>Sử dụng tính năng kẹp TCP MSS để có hiệu suất tối ưu</li>
<li>Xem xét giảm MTU trên giao diện nếu cần</li>
<li>Giám sát mất gói và truyền lại</li>
<li>Ghi lại cài đặt MTU của bạn để tham khảo trong tương lai</li>
</ul>
</div>
<button class="btn btn-secondary" onclick="resetFlowchart()" style="margin-top: 15px;">↺ Khởi động lại</button>
</div>
</div>
</div>
Ví dụ về cấu hình
<div class="section">
<h3>🔧 Ví dụ về cấu hình</h3>
<div class="alert alert-info">
<strong>ℹ️ Kẹp TCP MSS:</strong>Định cấu hình những thứ này trên bộ định tuyến của bạn để ngăn chặn sự phân mảnh.</div>
<div style="background: #2d2d2d; color: #f8f8f2; padding: 15px; border-radius: 6px; margin-bottom: 15px;">
<div style="color: #6a9955; margin-bottom: 10px;">! Cisco IOS/IOS-XE</div>
<code style="display: block; font-family: 'Courier New', monospace;">
interface GigabitEthernet0/0<br/>
 ip tcp adjust-mss <span id="ciscoMss" style="color: #ce9178;">1460</span>
</code>
</div>
<div style="background: #2d2d2d; color: #f8f8f2; padding: 15px; border-radius: 6px; margin-bottom: 15px;">
<div style="color: #6a9955; margin-bottom: 10px;">! Juniper JunOS</div>
<code style="display: block; font-family: 'Courier New', monospace;">
set interfaces ge-0/0/0 unit 0 family inet mtu <span id="juniperMtu" style="color: #ce9178;">1500</span><br/>
set interfaces ge-0/0/0 unit 0 family inet tcp-mss <span id="juniperMss" style="color: #ce9178;">1460</span>
</code>
</div>
<div style="background: #2d2d2d; color: #f8f8f2; padding: 15px; border-radius: 6px;">
<div style="color: #6a9955; margin-bottom: 10px;"># iptables Linux</div>
<code style="display: block; font-family: 'Courier New', monospace;">
iptables -t mangle -A FORWARD -p tcp --tcp-flags SYN,RST SYN -j TCPMSS --set-mss <span id="linuxMss" style="color: #ce9178;">1460</span>
</code>
</div>
</div>
Phân tích khung Jumbo
<div class="section">
<h3>🚀 Phân tích khung Jumbo</h3>
<div class="alert alert-info">
<strong>ℹ️ Khung Jumbo:</strong>Kích thước MTU lớn hơn cải thiện thông lượng cho mạng lưu trữ và trung tâm dữ liệu.</div>
<div style="margin-top: 20px;">
<div class="data-row">
<span class="data-label">Hiệu suất khung tiêu chuẩn:</span>
<span class="data-value" id="stdEfficiency">97,3% (1460/1500)</span>
</div>
<div class="data-row">
<span class="data-label">Khung Jumbo (9000 MTU):</span>
<span class="data-value">Hiệu suất 99,6% (8960/9000)</span>
</div>
<div class="data-row">
<span class="data-label">Số khung hình trên GB (Hiện tại):</span>
<span class="data-value" id="framesPerGb">~731.000 khung hình</span>
</div>
<div class="data-row">
<span class="data-label">Số khung hình trên GB (Jumbo 9000):</span>
<span class="data-value">~119.000 khung hình (giảm 84%)</span>
</div>
<div class="data-row">
<span class="data-label">Tiết kiệm CPU (Jumbo so với Std):</span>
<span class="data-value" id="cpuSavings">~84% số lần ngắt ít hơn</span>
</div>
</div>
<div style="margin-top: 20px; padding: 15px; background: #f8f9fa; border-radius: 6px;">
<h4 style="margin-top: 0;">Khuyến nghị:</h4>
<ul style="margin: 10px 0; padding-left: 20px; line-height: 1.8;">
<li><strong>Tiêu chuẩn 1500 MTU:</strong>Internet, mạng chung của trường, môi trường hỗn hợp</li>
<li><strong>Bé Jumbo (2000):</strong>Metro Ethernet, một số mạng MPLS</li>
<li><strong>Khung Jumbo (9000):</strong>iSCSI, NFS, kết cấu từ máy chủ đến máy chủ, trung tâm dữ liệu</li>
<li><strong>Siêu Jumbo (9216):</strong>Mạng lưu trữ, trung tâm dữ liệu 10GbE+</li>
</ul>
</div>
</div>
</div>
<script>
    let encapsulationLayers = [];
    let baseMtu = 1500;
    let calculationTimeout;
    let activePreset = null;
    let draggedElement = null;

    const encapsulations = {
        vlan: { name: '802.1Q VLAN', overhead: 4 },
        qinq: { name: 'QinQ Double Tag', overhead: 8 },
        mpls1: { name: 'MPLS Label', overhead: 4 },
        mpls2: { name: 'MPLS 2 Labels', overhead: 8 },
        mpls3: { name: 'MPLS 3 Labels', overhead: 12 },
        gre: { name: 'GRE', overhead: 24 },
        ipsec: { name: 'IPsec ESP', overhead: 60 },
        vxlan: { name: 'VXLAN', overhead: 50 },
        l2tp: { name: 'L2TPv3', overhead: 12 },
        pppoe: { name: 'PPPoE', overhead: 8 },
        geneve: { name: 'GENEVE', overhead: 8 },
        nvgre: { name: 'NVGRE', overhead: 42 }
    };

    const presets = {
        internet: { name: 'Internet (1500)', mtu: 1500, layers: [] },
        pppoe: { name: 'PPPoE DSL (1492)', mtu: 1492, layers: ['pppoe'] },
        azure: { name: 'Azure (1400)', mtu: 1400, layers: [] },
        aws: { name: 'AWS Jumbo (9001)', mtu: 9001, layers: [] },
        gcp: { name: 'GCP (1460)', mtu: 1460, layers: [] },
        mpls: { name: 'MPLS VPN (1448)', mtu: 1500, layers: ['mpls1', 'vlan'] }
    };

    // Stack Builder Functions
    function addStackLayer() {
        const select = document.getElementById('encapType');
        const layerType = select.value;

        if (!layerType) {
            alert('Please select an encapsulation type');
            return;
        }

        const encap = encapsulations[layerType];
        const layer = {
            id: Date.now(),
            type: layerType,
            name: encap.name,
            overhead: encap.overhead
        };

        encapsulationLayers.push(layer);
        activePreset = null; // Modified from preset
        renderStack();
        updateStackMTU();

        // Reset select
        select.value = '';
    }

    function renderStack() {
        const container = document.getElementById('stackContainer');

        if (encapsulationLayers.length === 0) {
            container.innerHTML = '<div class="stack-empty">No encapsulation layers added. Add a layer below to see how it affects MTU.</div>';
            return;
        }

        container.innerHTML = encapsulationLayers.map((layer, index) => `
            <div class="stack-layer" draggable="true" data-layer-id="${layer.id}" data-index="${index}">
                <div class="layer-info">
                    <span class="drag-handle" title="Drag to reorder">⋮⋮</span>
                    <span class="layer-name">${layer.name}</span>
                </div>
                <div class="layer-overhead">
                    <span class="overhead-value" id="overhead-${layer.id}" onclick="editOverhead(${layer.id})">+${layer.overhead} bytes</span>
                    <span class="overhead-edit">
                        <input type="number" id="edit-${layer.id}" value="${layer.overhead}" min="0" max="200"
                               onblur="saveOverhead(${layer.id})" onkeypress="if(event.key==='Enter') saveOverhead(${layer.id})">
                    </span>
                </div>
                <div class="layer-actions">
                    <button class="layer-btn" onclick="editOverhead(${layer.id})" title="Edit overhead value">✏️ Edit</button>
                    <button class="layer-btn" onclick="removeLayer(${layer.id})" title="Remove layer">🗑️ Remove</button>
                </div>
            </div>
        `).join('');

        // Add drag and drop event listeners
        setupDragAndDrop();
    }

    function setupDragAndDrop() {
        const layers = document.querySelectorAll('.stack-layer');

        layers.forEach(layer => {
            layer.addEventListener('dragstart', handleDragStart);
            layer.addEventListener('dragover', handleDragOver);
            layer.addEventListener('drop', handleDrop);
            layer.addEventListener('dragend', handleDragEnd);
        });
    }

    function handleDragStart(e) {
        draggedElement = this;
        this.classList.add('dragging');
        e.dataTransfer.effectAllowed = 'move';
        e.dataTransfer.setData('text/html', this.innerHTML);
    }

    function handleDragOver(e) {
        if (e.preventDefault) {
            e.preventDefault();
        }
        e.dataTransfer.dropEffect = 'move';
        return false;
    }

    function handleDrop(e) {
        if (e.stopPropagation) {
            e.stopPropagation();
        }

        if (draggedElement !== this) {
            const draggedIndex = parseInt(draggedElement.dataset.index);
            const targetIndex = parseInt(this.dataset.index);

            // Reorder array
            const [removed] = encapsulationLayers.splice(draggedIndex, 1);
            encapsulationLayers.splice(targetIndex, 0, removed);

            renderStack();
            updateStackMTU();
        }

        return false;
    }

    function handleDragEnd(e) {
        this.classList.remove('dragging');
    }

    function editOverhead(layerId) {
        const valueSpan = document.getElementById(`overhead-${layerId}`);
        const input = document.getElementById(`edit-${layerId}`);

        valueSpan.classList.add('editing');
        input.focus();
        input.select();
    }

    function saveOverhead(layerId) {
        const input = document.getElementById(`edit-${layerId}`);
        const newValue = parseInt(input.value);

        if (newValue >= 0 && newValue <= 200) {
            const layer = encapsulationLayers.find(l => l.id === layerId);
            layer.overhead = newValue;
            activePreset = null; // Modified from preset
        }

        renderStack();
        updateStackMTU();
    }

    function removeLayer(layerId) {
        encapsulationLayers = encapsulationLayers.filter(l => l.id !== layerId);
        activePreset = null; // Modified from preset
        renderStack();
        updateStackMTU();
    }

    function updateStackMTU() {
        baseMtu = parseInt(document.getElementById('baseMtu').value);
        const totalOverhead = encapsulationLayers.reduce((sum, layer) => sum + layer.overhead, 0);
        const effectiveMtu = baseMtu - totalOverhead;

        // Update display
        const display = document.getElementById('effectiveMtuDisplay');
        const value = document.getElementById('stackMtuValue');

        value.textContent = effectiveMtu;

        // Color code based on MTU
        display.classList.remove('warning', 'error');
        if (effectiveMtu < 1400) {
            display.classList.add('error');
        } else if (effectiveMtu < 1460) {
            display.classList.add('warning');
        }

        // Update preset badge
        const badge = document.getElementById('presetBadge');
        if (activePreset) {
            badge.style.display = 'flex';
            document.getElementById('presetName').textContent = presets[activePreset].name;
        } else {
            badge.style.display = 'none';
        }

        // Trigger main calculate function
        calculate();
    }

    function resetToPreset() {
        if (activePreset) {
            loadPreset(activePreset);
        }
    }

    function loadPreset(preset) {
        const config = presets[preset];
        activePreset = preset;

        // Set base MTU
        document.getElementById('baseMtu').value = config.mtu;
        baseMtu = config.mtu;

        // Clear and rebuild layers
        encapsulationLayers = [];
        config.layers.forEach(layerType => {
            const encap = encapsulations[layerType];
            encapsulationLayers.push({
                id: Date.now() + Math.random(),
                type: layerType,
                name: encap.name,
                overhead: encap.overhead
            });
        });

        renderStack();
        updateStackMTU();
    }

    function addEncapsulationLayer(type) {
        if (!type || !encapsulations[type]) return;

        encapsulationLayers.push({
            type: type,
            name: encapsulations[type].name,
            overhead: encapsulations[type].overhead
        });
    }

    function updateEncapsulationDisplay() {
        const stack = document.getElementById('encapStack');

        if (encapsulationLayers.length === 0) {
            stack.innerHTML = '<p style="color: rgba(255,255,255,0.7); font-size: 14px; margin: 10px 0;">No encapsulation layers added. Base MTU will be used.</p>';
            return;
        }

        stack.innerHTML = encapsulationLayers.map((layer, index) => `
            <div class="encap-layer">
                <span class="name">${layer.name}</span>
                <div>
                    <span class="overhead">+${layer.overhead} bytes</span>
                    <button class="remove-btn" onclick="removeEncapsulation(${index})">×</button>
                </div>
            </div>
        `).join('');
    }

    function removeEncapsulation(index) {
        encapsulationLayers.splice(index, 1);
        updateEncapsulationDisplay();
        scheduleCalculation();
    }

    function scheduleCalculation() {
        clearTimeout(calculationTimeout);
        calculationTimeout = setTimeout(calculate, 300);
    }

    function calculate() {
        baseMtu = parseInt(document.getElementById('baseMtu').value) || 1500;

        const totalOverhead = encapsulationLayers.reduce((sum, layer) => sum + layer.overhead, 0);
        const effectiveMtu = baseMtu - totalOverhead;
        const tcpMss = effectiveMtu - 40;

        // Update displays
        document.getElementById('effectiveMtu').textContent = effectiveMtu;
        document.getElementById('totalOverhead').textContent = totalOverhead;
        document.getElementById('tcpMss').textContent = tcpMss;

        document.getElementById('displayBaseMtu').textContent = baseMtu + ' bytes';
        document.getElementById('displayOverhead').textContent = totalOverhead + ' bytes';
        document.getElementById('displayEffective').textContent = effectiveMtu + ' bytes';
        document.getElementById('displayPayload').textContent = tcpMss + ' bytes';

        const efficiency = ((tcpMss / effectiveMtu) * 100).toFixed(1);
        document.getElementById('displayEfficiency').textContent = efficiency + '%';

        // Update config examples
        document.getElementById('ciscoMss').textContent = tcpMss;
        document.getElementById('juniperMtu').textContent = effectiveMtu;
        document.getElementById('juniperMss').textContent = tcpMss;
        document.getElementById('linuxMss').textContent = tcpMss;
        document.getElementById('clampMss').textContent = tcpMss;
        document.getElementById('reducedMtu').textContent = effectiveMtu;

        // Update efficiency calcs
        document.getElementById('stdEfficiency').textContent = `${efficiency}% (${tcpMss}/${effectiveMtu})`;

        const framesPerGb = Math.ceil((1024 * 1024 * 1024) / tcpMss);
        document.getElementById('framesPerGb').textContent = `~${framesPerGb.toLocaleString()} frames`;

        const jumboFrames = Math.ceil((1024 * 1024 * 1024) / 8960);
        const cpuReduction = ((1 - (jumboFrames / framesPerGb)) * 100).toFixed(0);
        document.getElementById('cpuSavings').textContent = `~${cpuReduction}% fewer interrupts`;

        // Color code results
        const mtuCard = document.getElementById('mtuCard');
        const mssCard = document.getElementById('mssCard');
        const warningDiv = document.getElementById('mtuWarning');

        if (effectiveMtu < 1400) {
            mtuCard.className = 'result-card error';
            mssCard.className = 'result-card error';
            mtuCard.querySelector('.result-label').innerHTML = '✗ Effective Payload MTU <span class="status-text">(Critical)</span>';
            mssCard.querySelector('.result-label').innerHTML = '✗ Recommended TCP MSS <span class="status-text">(Critical)</span>';
            warningDiv.className = 'alert alert-danger';
            warningDiv.innerHTML = '<strong>⚠️ Critical:</strong> Effective MTU is below 1400 bytes. Severe fragmentation expected. Consider increasing base MTU or removing encapsulation layers.';
            warningDiv.classList.remove('hidden');
        } else if (effectiveMtu < 1460) {
            mtuCard.className = 'result-card warning';
            mssCard.className = 'result-card warning';
            mtuCard.querySelector('.result-label').innerHTML = '⚠ Effective Payload MTU <span class="status-text">(Warning)</span>';
            mssCard.querySelector('.result-label').innerHTML = '⚠ Recommended TCP MSS <span class="status-text">(Warning)</span>';
            warningDiv.className = 'alert alert-warning';
            warningDiv.innerHTML = '<strong>⚠️ Warning:</strong> Effective MTU is below 1460 bytes. Fragmentation may occur. TCP MSS clamping is recommended.';
            warningDiv.classList.remove('hidden');
        } else {
            mtuCard.className = 'result-card';
            mssCard.className = 'result-card';
            mtuCard.querySelector('.result-label').innerHTML = '✓ Effective Payload MTU <span class="status-text">(Good)</span>';
            mssCard.querySelector('.result-label').innerHTML = '✓ Recommended TCP MSS <span class="status-text">(Good)</span>';
            warningDiv.classList.add('hidden');
        }

        // Show fragmentation analysis if needed
        const fragSection = document.getElementById('fragmentationSection');
        if (effectiveMtu < 1500 && effectiveMtu < baseMtu) {
            fragSection.classList.remove('hidden');
            showFragmentationVisualization(1500, effectiveMtu);
        } else {
            fragSection.classList.add('hidden');
        }
    }

    function showFragmentationVisualization(originalSize, pathMtu) {
        const maxPayload = pathMtu - 20; // IP header
        const fragmentCount = Math.ceil(originalSize / maxPayload);
        const overhead = (fragmentCount * 20) / originalSize * 100;

        const details = document.getElementById('fragmentationDetails');
        details.innerHTML = `
            <div class="data-row">
                <span class="data-label">Original Packet Size:</span>
                <span class="data-value">${originalSize} bytes</span>
            </div>
            <div class="data-row">
                <span class="data-label">Path MTU Bottleneck:</span>
                <span class="data-value">${pathMtu} bytes</span>
            </div>
            <div class="data-row">
                <span class="data-label">Number of Fragments:</span>
                <span class="data-value">${fragmentCount} fragments</span>
            </div>
            <div class="data-row">
                <span class="data-label">Fragment Overhead:</span>
                <span class="data-value">${overhead.toFixed(1)}% (${fragmentCount} × 20 byte IP headers)</span>
            </div>
        `;

        // Add DF bit impact info after overhead calculation
        details.innerHTML += `
            <div style="margin-top: 15px; padding: 12px; background: #fff3e0; border-left: 4px solid #ff9800; border-radius: 4px;">
                <strong style="color: #e65100;">⚠️ Don't Fragment (DF) Bit Consideration</strong>
                <div style="margin-top: 8px; font-size: 13px; color: #666;">
                    <p>If DF=1 (Don't Fragment flag set):</p>
                    <ul style="margin: 6px 0; padding-left: 20px; line-height: 1.6;">
                        <li>Router <strong>cannot</strong> fragment this packet</li>
                        <li>If packet size > path MTU, router sends ICMP "Fragmentation Needed" (Type 3, Code 4)</li>
                        <li>Sender must reduce packet size and retry (PMTUD)</li>
                        <li>If ICMP is blocked (firewall), connection hangs (MTU black hole)</li>
                    </ul>
                    <p style="margin-top: 10px; padding: 10px; background: white; border-radius: 3px; border-left: 3px solid #ff9800; font-family: monospace; font-size: 12px;">
                        <strong>For this scenario (${originalSize}B packet, ${pathMtu}B MTU):</strong><br>
                        With DF=0: <span style="color: #4CAF50;">✅ Packet fragments into ${fragmentCount} pieces</span><br>
                        With DF=1: <span style="color: #d32f2f;">❌ Router would drop and send ICMP error</span>
                    </p>
                </div>
            </div>
        `;

        details.innerHTML += `
            <div class="data-row">
            <div class="data-row">
                <span class="data-label">Estimated Performance Impact:</span>
                <span class="data-value">~${(fragmentCount * 5).toFixed(0)}% throughput reduction</span>
            </div>
        `;

        details.innerHTML += `
            <div style="margin-top: 15px; padding: 12px; background: #f0f0f0; border-radius: 6px; font-size: 13px; color: #666;">
                <strong style="color: #333;">💡 Note:</strong> Maximum payload shown is for IP layer fragmentation.
                For TCP, the MSS (Maximum Segment Size) is further reduced by 20 bytes for TCP header:
                <code style="display: block; margin-top: 6px; padding: 6px; background: white; border-radius: 3px; font-family: monospace;">
                    TCP MSS = MTU - 20 (IP) - 20 (TCP) = ${Math.max(0, pathMtu - 40)} bytes
                </code>
            </div>
        `;

        // Create packet visualization
        const diagram = document.getElementById('packetDiagram');
        let html = '<h4 style="margin-top: 20px; margin-bottom: 15px;">Packet Fragmentation Diagram:</h4>';
        html += '<div class="fragment-visual">';

        for (let i = 0; i < fragmentCount; i++) {
            const isLast = i === fragmentCount - 1;
            const fragmentSize = isLast ? (originalSize - (i * maxPayload) + 20) : pathMtu;
            const dataSize = fragmentSize - 20;
            const offsetBytes = i * maxPayload;
            const offsetUnits = Math.floor(offsetBytes / 8);  // RFC 791: 8-byte units

            html += `
                <div class="fragment-box" data-fragment="Fragment ${i + 1}">
                    <div class="packet-section">
                        <span class="packet-section-label">IP Header:</span>
                        <span class="packet-section-value">20 bytes</span>
                    </div>
                    <div class="packet-section">
                        <span class="packet-section-label">Fragment Offset:</span>
                        <span class="packet-section-value">
                            ${offsetBytes} bytes (IPv4 field: ${offsetUnits} × 8-byte units)
                        </span>
                    </div>
                    <div class="packet-section">
                        <span class="packet-section-label">More Fragments:</span>
                        <span class="packet-section-value">${isLast ? 'No (MF=0)' : 'Yes (MF=1)'}</span>
                    </div>
                    <div class="packet-section">
                        <span class="packet-section-label">Data Payload:</span>
                        <span class="packet-section-value">${dataSize} bytes</span>
                    </div>
                    <div class="packet-section">
                        <span class="packet-section-label">Total Size:</span>
                        <span class="packet-section-value">${fragmentSize} bytes</span>
                    </div>
                </div>
            `;
        }

        html += '</div>';
        diagram.innerHTML = html;
    }

    // PMTUD Flowchart functions
    function showStep(stepId) {
        const stepStr = stepId.toString();
        const step = document.getElementById('step' + stepStr);
        if (step) {
            step.classList.remove('hidden');

            // Show arrow before this step
            const prevStepNum = stepStr.includes('.') ? parseInt(stepStr.split('.')[0]) : stepId - 1;
            const arrow = document.getElementById('arrow' + prevStepNum);
            if (arrow) arrow.classList.remove('hidden');

            // Scroll to step
            step.scrollIntoView({ behavior: 'smooth', block: 'center' });
        }
    }

    function resetFlowchart() {
        // Hide all steps except first
        document.querySelectorAll('.flow-node, .flow-arrow').forEach(el => {
            if (el.id !== 'step1') {
                el.classList.add('hidden');
            }
        });

        // Scroll to top
        document.getElementById('step1').scrollIntoView({ behavior: 'smooth' });
    }

    // Event listeners
    document.getElementById('baseMtu').addEventListener('input', scheduleCalculation);

    document.getElementById('addEncap').addEventListener('click', () => {
        const select = document.getElementById('encapType');
        const type = select.value;

        if (type) {
            addEncapsulationLayer(type);
            updateEncapsulationDisplay();
            scheduleCalculation();
            select.value = '';
        }
    });

    document.getElementById('resetCalc').addEventListener('click', () => {
        document.getElementById('baseMtu').value = 1500;
        encapsulationLayers = [];
        updateEncapsulationDisplay();
        scheduleCalculation();
    });

    // Session Management (P0 Feature)
    let sessionManager;

    function initializeSessionManagement() {
        sessionManager = new SessionManager('mtu-analyzer');

        // Check for previous session
        const savedData = sessionManager.promptRestore();

        // Start auto-save
        sessionManager.startAutoSave(() => {
            return {
                baseMtu: document.getElementById('baseMtu').value,
                encapsulationLayers: encapsulationLayers,
                packetsPerSec: document.getElementById('packetsPerSec').value,
                avgPacketSize: document.getElementById('avgPacketSize').value,
                linkSpeed: document.getElementById('linkSpeed').value
            };
        });
    }

    function restoreSession() {
        const data = sessionManager.load();
        if (data) {
            document.getElementById('baseMtu').value = data.baseMtu || 1500;
            encapsulationLayers = data.encapsulationLayers || [];

            if (data.packetsPerSec) document.getElementById('packetsPerSec').value = data.packetsPerSec;
            if (data.avgPacketSize) document.getElementById('avgPacketSize').value = data.avgPacketSize;
            if (data.linkSpeed) document.getElementById('linkSpeed').value = data.linkSpeed;

            updateEncapsulationDisplay();
            scheduleCalculation();

            document.getElementById('restoreBanner').style.display = 'none';
        }
    }

    function dismissRestore() {
        document.getElementById('restoreBanner').style.display = 'none';
    }

    function clearSession() {
        if (confirm('Clear all saved data?')) {
            sessionManager.clear();
            document.getElementById('baseMtu').value = 1500;
            document.getElementById('packetsPerSec').value = 10000;
            document.getElementById('avgPacketSize').value = 1400;
            document.getElementById('linkSpeed').value = 1000;
            encapsulationLayers = [];
            updateEncapsulationDisplay();
            scheduleCalculation();
        }
    }

    // Bandwidth Waste Calculator (P0 Feature)
    function calculateBandwidthWaste() {
        const pps = parseInt(document.getElementById('packetsPerSec').value) || 10000;
        const avgSize = parseInt(document.getElementById('avgPacketSize').value) || 1400;
        const linkSpeed = parseInt(document.getElementById('linkSpeed').value) || 1000;

        // Get current effective MTU
        const baseMtu = parseInt(document.getElementById('baseMtu').value);
        const overhead = encapsulationLayers.reduce((sum, layer) => sum + layer.overhead, 0);
        const effectiveMtu = baseMtu - overhead;
        const ipHeaderSize = 20;
        const maxPayload = effectiveMtu - ipHeaderSize;

        // Calculate fragmentation
        let fragmentCount = 1;
        let overheadPerPacket = 0;

        if (avgSize > maxPayload) {
            fragmentCount = Math.ceil(avgSize / maxPayload);
            // Each additional fragment adds 20 bytes (IP header)
            overheadPerPacket = (fragmentCount - 1) * ipHeaderSize;
        }

        // Calculate bandwidth waste
        const overheadPerSecond = overheadPerPacket * pps;
        const wastedMbps = (overheadPerSecond * 8) / 1000000; // Convert to Mbps
        const wastedPercent = (wastedMbps / linkSpeed) * 100;
        const extraFragmentsPerSec = (fragmentCount - 1) * pps;

        // Update UI
        document.getElementById('bandwidthWasteResults').classList.remove('hidden');
        document.getElementById('wastedMbps').textContent = wastedMbps.toFixed(2);
        document.getElementById('wastedPercent').textContent = wastedPercent.toFixed(2) + '%';
        document.getElementById('extraFragments').textContent = formatNumber(extraFragmentsPerSec);
        document.getElementById('fragmentsPerPacket').textContent = fragmentCount;
        document.getElementById('overheadPerPacket').textContent = overheadPerPacket + ' bytes';
        document.getElementById('totalOverheadPerSec').textContent = formatNumber(overheadPerSecond) + ' bytes';

        // Recommendation
        let recommendation = '';
        if (fragmentCount === 1) {
            recommendation = '✅ No fragmentation - optimal configuration';
        } else if (wastedPercent < 5) {
            recommendation = '⚠️ Minor impact - consider increasing MTU if possible';
        } else if (wastedPercent < 15) {
            recommendation = '⚠️ Moderate impact - enable PMTUD or increase MTU';
        } else {
            recommendation = '🔴 Significant impact - MTU increase strongly recommended';
        }
        document.getElementById('recommendation').textContent = recommendation;

        // Animate results
        animateCards('#bandwidthWasteResults', 100);
    }

    function formatNumber(num) {
        return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    }

    function animateCards(containerSelector, delay) {
        const cards = document.querySelectorAll(`${containerSelector} .result-card`);
        cards.forEach((card, index) => {
            setTimeout(() => {
                card.classList.add('fade-in');
            }, index * delay);
        });
    }

    // Initialize
    calculate();

    // Load common utilities after DOM is ready
    const commonScript = document.createElement('script');
    commonScript.src = '/assets/js/tools-common.js';
    commonScript.onload = () => {
        initializeSessionManagement();
    };
    document.head.appendChild(commonScript);
</script>