.kptd-layout { max-width: 1600px; min-height: 70vh; margin: 0 auto; padding: 24px 40px 80px; display: grid; grid-template-columns: 1fr 340px; gap: 40px; align-items: start;}.kptd-article { min-width: 0;}.kptd-header { margin-bottom: 32px; padding-bottom: 24px;}.kptd-title { font-size: 36px; font-weight: 700; line-height: 1.3; color: #1a2b3c; margin: 12px 0 16px;}.kptd-body { font-size: 16px; line-height: 1.8; color: #444;}.kptd-body h2 { font-size: 28px; font-weight: 700; color: #1a2b3c; margin-top: 36px; margin-bottom: 16px; line-height: 1.3;}.kptd-body h3 { font-size: 22px; font-weight: 600; color: var(--second-color); margin-top: 28px; margin-bottom: 12px; line-height: 1.3;}.kptd-body h4 { font-size: 18px; font-weight: 600; color: #1a2b3c; margin-top: 24px; margin-bottom: 10px;}.kptd-body p { margin-bottom: 16px;}.kptd-body strong { color: var(--first-color);}.kptd-body a { color: var(--first-color); text-decoration: none;}.kptd-body a:hover { text-decoration: underline;}.kptd-body ul,.kptd-body ol { margin: 16px 0 24px; padding-left: 24px;}.kptd-body li { margin-bottom: 6px; line-height: 1.7;}.kptd-body table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 15px;}.kptd-body table th,.kptd-body table td { padding: 12px 16px; text-align: left; border: 1px solid #e2e8f0; vertical-align: top;}.kptd-body table th { background: var(--first-color); color: #fff; font-weight: 600;}.kptd-body table tr:nth-child(even) td { background: #f8fafc;}.kptd-body table a { color: var(--first-color); font-weight: 500;}.kptd-body img { border-radius: 8px; margin: 20px 0; max-width: 100%; height: auto;}.kptd-body blockquote { margin: 24px 0; padding: 16px 24px; border-left: 3px solid var(--first-color); background: #f8fafc; color: #555;}.kptd-sidebar { position: relative;}.kptd-sidebar-sticky { }.kptd-cta-card { border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; padding: 28px 24px; box-shadow: 0 4px 16px rgba(26, 43, 60, 0.06);}.kptd-cta-product { text-align: center; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #eee;}.kptd-cta-img-wrap { width: 120px; height: 120px; margin: 0 auto 12px; border-radius: 8px; background: #f8fafc; border: 1px solid #eee; overflow: hidden;}.kptd-cta-img-wrap img { width: 100%; height: 100%; object-fit: contain;}.kptd-cta-product-name { font-size: 15px; font-weight: 600; color: #1a2b3c; line-height: 1.4; margin: 0; padding: 0 4px;}.kptd-cta-title { font-size: 18px; font-weight: 600; color: #1a2b3c; margin: 0 0 10px; line-height: 1.4;}.kptd-cta-desc { font-size: 13px; color: #6b7c8d; line-height: 1.65; margin: 0 0 20px;}.kptd-cta-actions { display: flex; flex-direction: column; gap: 10px;}.kptd-cta-btn-primary,.kptd-cta-btn-secondary { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border-radius: 8px; font-size: 14px; font-weight: 600; text-decoration: none; transition: all 0.25s ease; cursor: pointer;}.kptd-cta-btn-primary { background: linear-gradient(135deg, var(--second-color), var(--first-color)); color: #fff;}.kptd-cta-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0, 60, 150, 0.25); opacity: 0.92;}.kptd-cta-btn-primary svg { width: 16px; height: 16px; transition: transform 0.2s ease;}.kptd-cta-btn-primary:hover svg { transform: translateX(3px);}.kptd-cta-btn-secondary { background: #f8fafc; color: #334155; border: 1px solid #e2e8f0;}.kptd-cta-btn-secondary:hover { background: #f1f5f9; border-color: #cbd5e1; color: #1a2b3c;}.kptd-cta-btn-secondary svg { width: 14px; height: 14px;}.kptd-related { background: #f8fafc; border-top: 1px solid #eef2f6; padding: 0; width: 100%;}.related-inner-box{ width: 1600px; margin: 0 auto; padding:50px 40px 100px;}.kptd-related-header { text-align: center; margin-bottom: 36px;}.kptd-related-title { display: inline-block; font-size: clamp(22px, 2.5vw, 28px); font-weight: 700; color: #1a2b3c; position: relative; padding-bottom: 14px; letter-spacing: -0.3px;}.kptd-related-title::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 48px; height: 3px; background: linear-gradient(90deg, var(--first-color), var(--second-color)); border-radius: 2px;}.kptd-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px;}.kptd-related-card { display: flex; flex-direction: column; text-decoration: none; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 22px 24px; transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); cursor: pointer;}.kptd-related-card:hover { transform: translateY(-5px); box-shadow: 0 16px 36px rgba(26, 43, 60, 0.1); border-color: transparent;}.kptd-rc-title { font-size: 16px; font-weight: 600; color: #1a2b3c; line-height: 1.4; margin-bottom: 12px;}.kptd-related-card:hover .kptd-rc-title { color: var(--first-color);}.kptd-rc-link { margin-top: auto; padding-top: 12px; border-top: 1px solid #f0f0f0; display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--first-color); transition: all 0.25s ease;}.kptd-rc-link svg { width: 14px; height: 14px; transition: transform 0.2s ease;}.kptd-related-card:hover .kptd-rc-link svg { transform: translateX(4px);}.kp-topics-section { padding: 60px 40px 80px; max-width: 1400px; margin: 0 auto;}.kp-topics-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px;}.kp-topic-card { display: flex; flex-direction: column; text-decoration: none; background: #ffffff; border: 1px solid #e8ecf1; border-radius: 12px; overflow: hidden; transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); cursor: pointer;}.kp-topic-card:hover { transform: translateY(-6px); box-shadow: 0 16px 36px rgba(26, 43, 60, 0.1); border-color: transparent;}.kp-topic-card:hover .kp-topic-arrow { background: linear-gradient(135deg, var(--first-color), var(--second-color)); color: #fff; transform: translateX(4px);}.kp-topic-body { padding: 24px 24px 20px; display: flex; flex-direction: column; flex: 1;}.kp-topic-title { font-size: 20px; font-weight: 600; color: #1a2b3c; line-height: 1.4; margin-bottom: 10px; display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}.kp-topic-desc { font-size: 16px; color: #5a6a7a; line-height: 1.6; margin-bottom: 16px; display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; flex: 1;}.kp-topic-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; border-top: 1px solid #f0f0f0; margin-top: auto;}.kp-topic-meta { font-size: 14px; color: #8899aa; display: flex; align-items: center; gap: 6px;}.kp-topic-arrow { width: 36px; height: 36px; border-radius: 50%; background: #f1f5f9; display: flex; align-items: center; justify-content: center; transition: all 0.25s ease; color: #334155; flex-shrink: 0;}.kp-topic-arrow svg { width: 18px; height: 18px; transition: transform 0.25s ease;}.kptd-content { max-width: 1400px; margin: 0 auto; padding: 50px 40px 80px;}.kptd-share { display: flex; align-items: center; gap: 16px; padding: 24px 0; border-bottom: 1px solid #e8ecf1;}.kptd-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px;}.kptd-item { display: flex; flex-direction: column; text-decoration: none; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 22px 24px; transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); cursor: pointer;}.kptd-item:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(26, 43, 60, 0.08); border-color: transparent;}.kptd-item-name { font-size: 16px; font-weight: 600; color: #1a2b3c; line-height: 1.4; margin-bottom: 8px; display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}.kptd-item-arrow { margin-top: auto; padding-top: 12px; border-top: 1px solid #f0f0f0; display: flex; align-items: center; justify-content: flex-end; gap: 6px; font-size: 13px; font-weight: 600; color: var(--first-color); transition: all 0.25s ease;}.kptd-item-arrow svg { width: 16px; height: 16px; transition: transform 0.2s ease;}.kptd-item:hover .kptd-item-arrow { color: var(--second-color);}.kptd-item:hover .kptd-item-arrow svg { transform: translateX(4px);}.related_topic { position: fixed; top: 160px; right: calc(50% - 815px); width: 340px; border: 1px solid #e8ecf1; border-radius: 16px; background: #fff; padding: 28px 24px; box-shadow: 0 4px 20px rgba(26, 43, 60, 0.1); z-index: 100; transition: opacity 0.2s ease, visibility 0s;}.rt-img-wrap { width: 140px; height: 140px; background: linear-gradient(145deg, #f5f7fa, #eef2f7); border-radius: 12px; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; overflow: hidden;}.rt-name { font-size: 18px; font-weight: 700; color: #1a2b3c; text-align: center; margin-bottom: 4px; line-height: 1.3;}.rt-cas { font-size: 13px; color: #6b7c8d; text-align: center; margin-bottom: 6px;}.rt-desc { font-size: 13px; color: #5a6a7a; line-height: 1.65; margin-bottom: 22px; text-align: left;}.rt-btn { display: flex; flex-direction: column; gap: 10px;}.rt-btn a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border-radius: 8px; font-size: 14px; font-weight: 600; text-decoration: none; transition: all 0.25s ease; cursor: pointer;}.rt-btn a svg { width: 16px; height: 16px; transition: transform 0.2s ease;}.rt-btn-primary { background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #ffffff; box-shadow: 0 3px 12px rgba(37, 99, 235, 0.3);}.rt-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4); background: linear-gradient(135deg, #3b82f6, #2563eb);}.rt-btn-primary:hover svg { transform: translateX(3px);}.rt-btn-secondary { background: #f8fafc; color: #334155; border: 1px solid #e2e8f0;}.rt-btn-secondary:hover { background: #f1f5f9; border-color: #cbd5e1; color: #1a2b3c;}@media (max-width: 1024px) { .kptd-layout { grid-template-columns: 1fr; gap: 30px; } .kptd-sidebar-sticky { position: static; } .kptd-related { width: auto; padding: 40px 20px 60px; }}@media (max-width: 767.98px) { .related-inner-box{ width: 100%; padding: 50px 40px; } .kptd-layout { padding: 20px 20px 48px; gap: 24px; } .kptd-title { font-size: 26px; } .kptd-body { font-size: 15px; } .kptd-content { padding: 36px 20px 60px; } .kptd-list { grid-template-columns: 1fr; } .kptd-item { padding: 18px 18px; } .kp-topics-section { padding: 40px 20px 60px; } .kp-topics-grid { grid-template-columns: 1fr 1fr; gap: 16px; } .kp-topic-body { padding: 18px 18px 16px; } .kp-topic-title { font-size: 15px; } .kptd-related-grid { grid-template-columns: 1fr; gap: 16px; }}@media (max-width: 479.98px) { .kp-topics-grid { grid-template-columns: 1fr; }}