SOJI ELECTRONICS - User contributions [en]

LIGO AIR Video

2026-05-25T08:32:46Z

Admin: Test video

== Videos ==
<div class="dim">
''Installation, demo, and tutorial videos for this product.''

'''How to add/edit videos:'''
* '''Edit existing video''': click on the YouTube template box → form opens → change Video ID → Apply
* '''Add new video''': copy 1 video block (from === title === to {{!}}{{!}}), paste below, edit all 3 fields:
*# H3 title
*# Description text
*# YouTube template (Video ID)
* '''Get YouTube Video ID''': from URL <code>youtube.com/watch?v=<u>ABC123XYZ</u></code> or <code>youtu.be/<u>ABC123XYZ</u></code> — copy the 11-character ID only (no <code>?si=</code> or <code>&t=</code>)
* '''How to Insert YouTube video:'''
** Press '''Enter''' to start a new line
** Click toolbar '''Insert''' (with the down arrow ▼) → '''Template'''
** Search box appears → type <code>YouTube</code> → select '''YouTube''' from dropdown
** Form opens with fields:
** '''YouTube Video ID''' ''(required)'' — paste the 11-character video ID from YouTube URL
** '''Width (px)''' — default <code>640</code> (good for most cases). For wider showcase use <code>800</code>, for compact use <code>480</code>
** '''Alignment''' — choose <code>center</code> (default), <code>left</code>, or <code>right</code>
** '''Caption''' ''(optional)'' — short text shown below the video player
** Click '''Insert''' → video preview appears in editor

'''Tips:'''
* Upload videos to SOJI YouTube channel first
* Set videos to '''Public''' or '''Unlisted''' (NOT Private)
* In YouTube Studio: enable '''Allow embedding''' in Advanced settings
</div>{{YouTube|id=33bgFmoK4y8|width=640|align=center|caption=ABCXYZ}}

== Related Documents ==
{{RelatedDocuments}}

== Revision History ==
<div class="revision-history-auto">
<span class="dim">Loading revision history...</span>
</div>

[[Category:LIGO AIR ]]

LIGO AIR Video

2026-05-25T08:30:29Z

Admin: Test Video

== Videos ==
<div class="dim">
''Installation, demo, and tutorial videos for this product.''

'''How to add/edit videos:'''
* '''Edit existing video''': click on the YouTube template box → form opens → change Video ID → Apply
* '''Add new video''': copy 1 video block (from === title === to {{!}}{{!}}), paste below, edit all 3 fields:
*# H3 title
*# Description text
*# YouTube template (Video ID)
* '''Get YouTube Video ID''': from URL <code>youtube.com/watch?v=<u>ABC123XYZ</u></code> or <code>youtu.be/<u>ABC123XYZ</u></code> — copy the 11-character ID only (no <code>?si=</code> or <code>&t=</code>)
* '''How to Insert YouTube video:'''
** Press '''Enter''' to start a new line
** Click toolbar '''Insert''' (with the down arrow ▼) → '''Template'''
** Search box appears → type <code>YouTube</code> → select '''YouTube''' from dropdown
** Form opens with fields:
** '''YouTube Video ID''' ''(required)'' — paste the 11-character video ID from YouTube URL
** '''Width (px)''' — default <code>640</code> (good for most cases). For wider showcase use <code>800</code>, for compact use <code>480</code>
** '''Alignment''' — choose <code>center</code> (default), <code>left</code>, or <code>right</code>
** '''Caption''' ''(optional)'' — short text shown below the video player
** Click '''Insert''' → video preview appears in editor

'''Tips:'''
* Upload videos to SOJI YouTube channel first
* Set videos to '''Public''' or '''Unlisted''' (NOT Private)
* In YouTube Studio: enable '''Allow embedding''' in Advanced settings
</div>

{{YouTube|id=QyeU1MJjEHU|width=640|align=center}}{{YouTube|id=33bgFmoK4y8|width=640|align=center|caption=ABCXYZ}}

== Related Documents ==
{{RelatedDocuments}}

== Revision History ==
<div class="revision-history-auto">
<span class="dim">Loading revision history...</span>
</div>

[[Category:LIGO AIR ]]

LIGO AIR Video

2026-05-25T08:29:17Z

Admin: Update

== Videos ==
<div class="dim">
''Installation, demo, and tutorial videos for this product.''

'''How to add/edit videos:'''
* '''Edit existing video''': click on the YouTube template box → form opens → change Video ID → Apply
* '''Add new video''': copy 1 video block (from === title === to {{!}}{{!}}), paste below, edit all 3 fields:
*# H3 title
*# Description text
*# YouTube template (Video ID)
* '''Get YouTube Video ID''': from URL <code>youtube.com/watch?v=<u>ABC123XYZ</u></code> or <code>youtu.be/<u>ABC123XYZ</u></code> — copy the 11-character ID only (no <code>?si=</code> or <code>&t=</code>)
* '''How to Insert YouTube video:'''
** Press '''Enter''' to start a new line
** Click toolbar '''Insert''' (with the down arrow ▼) → '''Template'''
** Search box appears → type <code>YouTube</code> → select '''YouTube''' from dropdown
** Form opens with fields:
** '''YouTube Video ID''' ''(required)'' — paste the 11-character video ID from YouTube URL
** '''Width (px)''' — default <code>640</code> (good for most cases). For wider showcase use <code>800</code>, for compact use <code>480</code>
** '''Alignment''' — choose <code>center</code> (default), <code>left</code>, or <code>right</code>
** '''Caption''' ''(optional)'' — short text shown below the video player
** Click '''Insert''' → video preview appears in editor

'''Tips:'''
* Upload videos to SOJI YouTube channel first
* Set videos to '''Public''' or '''Unlisted''' (NOT Private)
* In YouTube Studio: enable '''Allow embedding''' in Advanced settings
</div>

{{YouTube|id=QyeU1MJjEHU|width=640|align=center}}

== Related Documents ==
{{RelatedDocuments}}

== Revision History ==
<div class="revision-history-auto">
<span class="dim">Loading revision history...</span>
</div>

[[Category:LIGO AIR ]]

MediaWiki:Common.js

2026-05-25T08:28:28Z

Admin: Update

Template:YouTube

2026-05-25T08:27:57Z

Admin: Update

MediaWiki:Common.js

2026-05-25T08:25:51Z

Admin: Update

Template:YouTube

2026-05-25T08:25:15Z

Admin: Update Template

<noinclude>
== YouTube Embed Template ==

Embed YouTube video. Auto-strips query parameters from ID.

'''Usage:''' <code><nowiki>{{YouTube|id=VIDEO_ID|width=640|align=center|caption=Description}}</nowiki></code>

{{TemplateData
|description=Embed a YouTube video. Paste video ID (the 11 characters after v= in YouTube URL).
|params={
"id": {
"label": "YouTube Video ID",
"type": "string",
"required": true,
"description": "Video ID (11 chars). Query parameters auto-stripped."
},
"width": {
"label": "Width (px)",
"type": "number",
"default": "640"
},
"align": {
"label": "Alignment",
"type": "string",
"default": "center",
"description": "left / center / right"
},
"caption": {
"label": "Caption",
"type": "string",
"required": false
}
}
}}

[[Category:Templates]]
</noinclude><includeonly><div class="soji-yt-embed" style="text-align:{{{align|center}}}; margin:12px 0;" data-video-id="{{#explode:{{#explode:{{{id|}}}|?|0}}|&|0}}" data-width="{{{width|640}}}"><div class="soji-yt-thumb-wrap" style="position:relative; display:inline-block; width:{{{width|640}}}px; max-width:100%; aspect-ratio:16/9; cursor:pointer; overflow:hidden; border-radius:8px; background:#000;"><img src="https://i.ytimg.com/vi/{{#explode:{{#explode:{{{id|}}}|?|0}}|&|0}}/hqdefault.jpg" alt="Video thumbnail" loading="lazy" style="width:100%; height:100%; object-fit:cover; display:block;"><div class="soji-yt-play-overlay" style="position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:72px; height:50px; background:rgba(0,0,0,0.7); border-radius:14px; display:flex; align-items:center; justify-content:center; transition:background 0.2s;"><svg width="36" height="26" viewBox="0 0 36 26" fill="white"><polygon points="14,7 14,19 25,13"/></svg></div></div>{{#if:{{{caption|}}}|<div style="margin-top:8px; font-style:italic; color:#666; font-size:0.9em;">{{{caption}}}</div>|}}</div></includeonly>

LIGO AIR Video

2026-05-25T08:20:54Z

Admin: Test video

== Videos ==
<div class="dim">
''Installation, demo, and tutorial videos for this product.''

'''How to add/edit videos:'''
* '''Edit existing video''': click on the YouTube template box → form opens → change Video ID → Apply
* '''Add new video''': copy 1 video block (from === title === to {{!}}{{!}}), paste below, edit all 3 fields:
*# H3 title
*# Description text
*# YouTube template (Video ID)
* '''Get YouTube Video ID''': from URL <code>youtube.com/watch?v=<u>ABC123XYZ</u></code> or <code>youtu.be/<u>ABC123XYZ</u></code> — copy the 11-character ID only (no <code>?si=</code> or <code>&t=</code>)
* '''How to Insert YouTube video:'''
** Press '''Enter''' to start a new line
** Click toolbar '''Insert''' (with the down arrow ▼) → '''Template'''
** Search box appears → type <code>YouTube</code> → select '''YouTube''' from dropdown
** Form opens with fields:
** '''YouTube Video ID''' ''(required)'' — paste the 11-character video ID from YouTube URL
** '''Width (px)''' — default <code>640</code> (good for most cases). For wider showcase use <code>800</code>, for compact use <code>480</code>
** '''Alignment''' — choose <code>center</code> (default), <code>left</code>, or <code>right</code>
** '''Caption''' ''(optional)'' — short text shown below the video player
** Click '''Insert''' → video preview appears in editor

'''Tips:'''
* Upload videos to SOJI YouTube channel first
* Set videos to '''Public''' or '''Unlisted''' (NOT Private)
* In YouTube Studio: enable '''Allow embedding''' in Advanced settings
</div>

== Test 1: Direct iframe HTML ==
<iframe width="640" height="360"
src="https://www.youtube-nocookie.com/embed/QyeU1MJjEHU"
frameborder="0" allowfullscreen></iframe>

== Test 2: Template hiện tại ==
{{YouTube|id=QyeU1MJjEHU|width=640|align=center}}

== Related Documents ==
{{RelatedDocuments}}

== Revision History ==
<div class="revision-history-auto">
<span class="dim">Loading revision history...</span>
</div>

[[Category:LIGO AIR ]]

2026-05-25T07:43:46Z

Admin: Update

/* 1. Layout dòng Item */
#p-categorytree-portlet .CategoryTreeItem {
position: relative !important;
display: block !important;
padding: 10px 30px 10px 0 !important;
border-bottom: 1px solid #e7eaf0 !important;
}

/* 2. Cấu hình Bullet chứa mũi tên */
#p-categorytree-portlet .CategoryTreeBullet {
position: absolute !important;
right: 0 !important; /* Đẩy sát lề phải */
top: 50% !important;
transform: translateY(-50%) !important;
margin: 0 !important;
width: 24px !important;
height: 24px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}

/* Chúng ta dùng visibility: hidden để giữ chức năng click nhưng ẩn hình tam giác */
#p-categorytree-portlet .CategoryTreeToggle {
visibility: hidden !important;
position: relative !important;
display: block !important;
width: 100% !important;
height: 100% !important;
text-decoration: none !important;
}

/* 4. TỰ VẼ MŨI TÊN MẢNH (Chevron) */
/* Dùng visibility: visible để hiện lại mũi tên mảnh chúng ta tự vẽ */
#p-categorytree-portlet .CategoryTreeToggle::after {
content: '' !important;
visibility: visible !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
width: 8px !important;
height: 8px !important;
border-right: 1.5px solid #4a5fd2 !important; /* Độ mảnh và màu xanh Teltonika */
border-bottom: 1.5px solid #4a5fd2 !important;
box-sizing: border-box !important;
/* Mặc định xoay sang phải > */
transform: translate(-70%, -50%) rotate(45deg) !important;
transition: transform 0.2s ease !important;
}

/* 5. XOAY MŨI TÊN KHI MỞ (Trạng thái Expanded) */
/* MediaWiki khi mở sẽ đổi text từ "►" sang "▼" hoặc đổi onclick,
CSS dưới đây bắt theo cấu trúc chung của CategoryTree */
#p-categorytree-portlet .CategoryTreeToggle[onclick*="collapse"]::after,
#p-categorytree-portlet .CategoryTreeToggle-expanded::after {
transform: translate(-50%, -75%) rotate(45deg) !important;
}

/* 6. ẨN CÁC DẤU CHẤM TRANG LÁ */
#p-categorytree-portlet .CategoryTreePageBullet,
#p-categorytree-portlet .CategoryTreeEmptyBullet {
display: none !important;
}

/* 7. Kiểu chữ nhãn (Label) */
#p-categorytree-portlet .CategoryTreeLabel a {
color: #4a5fd2 !important;
font-size: 14px !important;
text-decoration: none !important;
font-weight: 400 !important;
}

/* Thụt lề cho các cấp con */
#p-categorytree-portlet .CategoryTreeChildren {
padding-left: 20px !important;
margin: 0 !important;
}

/* Simple top header style */
body.skin-vector-2022 .vector-header-container,
body.skin-vector-2022 .vector-header,
body.skin-vector-2022 .vector-sticky-header-container,
body.skin-vector-2022 .vector-sticky-header {
background-color: #B5C2CD !important;
border-bottom: 0 !important;
box-shadow: none !important;
}

body.skin-vector-2022 .vector-header {
min-height: 72px !important;
padding: 0 24px !important;
max-width: none !important;
}

body.skin-vector-2022 .mw-logo {
min-height: 72px !important;
display: flex !important;
align-items: center !important;
text-decoration: none !important;
}

body.skin-vector-2022 .mw-logo-wordmark {
color: #fff !important;
font-size: 24px !important;
font-weight: 700 !important;
line-height: 1 !important;
}

body.skin-vector-2022 .mw-logo-icon {
display: none !important;
}

body.skin-vector-2022 #vector-main-menu-dropdown-label,
body.skin-vector-2022 #vector-main-menu-dropdown-label .vector-icon,
body.skin-vector-2022 .vector-user-links a,
body.skin-vector-2022 #lang-switcher,
body.skin-vector-2022 #lang-select {
color: #fff !important;
}

body.skin-vector-2022 #lang-select {
background: transparent !important;
border: 0 !important;
}

/* language select: đóng màu trắng, mở ra chữ đen nền trắng */
body.skin-vector-2022 #lang-select {
color: #fff !important;
background: transparent !important;
border: 0 !important;
}

body.skin-vector-2022 #lang-select option {
color: #202122 !important;
background: #fff !important;
}

body.skin-vector-2022 .vector-dropdown-content a,
body.skin-vector-2022 .vector-dropdown-content a span,
body.skin-vector-2022 .vector-dropdown-content .vector-icon {
color: #202122 !important;
fill: #202122 !important;
}

body.skin-vector-2022 .mw-logo-wordmark,
body.skin-vector-2022 #vector-main-menu-dropdown-label,
body.skin-vector-2022 #vector-main-menu-dropdown-label .vector-icon,
body.skin-vector-2022 .vector-header .vector-user-links-main > div > .vector-menu-content a,
body.skin-vector-2022 .vector-header #p-vector-user-menu-overflow a,
body.skin-vector-2022 .vector-header #pt-login-2 a,
body.skin-vector-2022 #lang-select {
color: #1F2A36 !important;
}

/* =========================
SOJI CUSTOM FOOTER
========================= */

.soji-site-footer {
background: #4a5468;
color: #ffffff;
padding: 50px 0 20px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
box-sizing: border-box;
}

/* Sticky footer: ép footer xuống đáy viewport khi page ngắn */
html, body {
min-height: 100vh;
}
body.has-soji-footer {
display: flex;
flex-direction: column;
background: #f8f9fa !important;
}
body.has-soji-footer > .mw-page-container,
body.has-soji-footer > #mw-page-base,
body.has-soji-footer > main {
flex: 1 0 auto;
}
body.has-soji-footer .soji-site-footer {
flex-shrink: 0;
margin-top: auto;
}

/* Shell: full ngang màn hình, chỉ chừa padding 2 bên */
.soji-footer-shell {
max-width: 100%;
margin: 0 auto;
padding: 0 80px;
box-sizing: border-box;
}

.soji-footer-grid {
display: grid;
grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
gap: 60px;
align-items: start;
}

.soji-footer-company-name {
color: #ffffff;
font-size: 16px;
font-weight: 700;
margin: 0 0 20px;
border: none;
padding: 0;
}

.soji-footer-contact-list {
list-style: none;
margin: 0;
padding: 0;
}

.soji-footer-contact {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 14px;
font-size: 13px;
line-height: 1.5;
color: #ffffff;
}

.soji-footer-icon {
flex: 0 0 18px;
width: 18px;
height: 18px;
color: #ffffff;
display: inline-flex;
align-items: center;
justify-content: center;
}

.soji-footer-icon svg {
width: 100%;
height: 100%;
}

.soji-footer-col h2,
.soji-footer-subscribe-col h2 {
color: #ffffff;
font-size: 14px;
font-weight: 700;
margin: 0 0 20px;
border: none;
padding: 0;
text-transform: uppercase;
letter-spacing: 0.5px;
}

.soji-footer-col ul {
list-style: none;
margin: 0;
padding: 0;
}

.soji-footer-col li {
margin-bottom: 12px;
}

.soji-footer-link,
.soji-footer-link:visited,
.soji-footer-link:link,
.soji-footer-link:active {
color: #ffffff !important;
text-decoration: none;
}

.soji-footer-link:hover {
color: #ffffff !important;
opacity: 0.7;
text-decoration: none;
}

.soji-footer-subscribe-form {
margin-bottom: 20px;
}

.soji-footer-subscribe-input {
width: 100%;
background: transparent;
border: 1px solid #ffffff;
padding: 12px 14px;
color: #fff;
font-size: 14px;
border-radius: 4px;
margin-bottom: 12px;
box-sizing: border-box;
}

.soji-footer-subscribe-input::placeholder {
color: rgba(255, 255, 255, 0.7);
}

.soji-footer-subscribe-input:focus {
outline: none;
border-color: #ffffff;
}

.soji-footer-subscribe-btn {
width: 100%;
background: #ffffff;
color: #4a5468;
border: none;
padding: 12px;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
border-radius: 4px;
cursor: pointer;
transition: background 0.2s;
}

.soji-footer-subscribe-btn:hover {
background: #d99425;
}

.soji-footer-social {
display: flex;
gap: 14px;
margin-top: 4px;
}

.soji-footer-social-item {
width: 34px;
height: 34px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.85);
color: #4a5468;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: transform 0.2s;
}

.soji-footer-social-item:hover {
background: #ffffff;
transform: translateY(-2px);
text-decoration: none;
}

.soji-footer-social-item .soji-footer-icon {
width: 20px;
height: 20px;
color: #2d3338;
}

.soji-footer-copy {
margin-top: 40px;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.15);
text-align: center;
color: rgba(255, 255, 255, 0.7);
font-size: 12px;
}

@media (max-width: 1200px) {
.soji-footer-shell {
padding: 0 40px;
}
.soji-footer-grid {
gap: 40px;
}
}

@media (max-width: 900px) {
.soji-footer-grid {
grid-template-columns: 1fr 1fr;
gap: 30px;
}
.soji-footer-shell {
padding: 0 25px;
}
}

@media (max-width: 600px) {
.soji-footer-grid {
grid-template-columns: 1fr;
}
}

/* Ẩn MediaWiki standard footer khi đã có SOJI footer */
body.has-soji-footer #footer,
body.has-soji-footer .mw-footer {
display: none !important;
}

/* =========================
BREADCRUMB
========================= */

.custom-breadcrumb {
padding: 8px 0 12px 0;
font-size: 0.9em;
color: #54595d;
border-bottom: 1px solid #eaecf0;
margin-bottom: 1em;
}
.custom-breadcrumb a { color: #3366cc; text-decoration: none; }
.custom-breadcrumb a:hover { text-decoration: underline; }

/* ============================================ */
/* Wikitable: zebra rows (default style) */
/* ============================================ */

/* Row chẵn — màu nền xám nhạt */
.wikitable > tr:nth-child(even) > td,
.wikitable > * > tr:nth-child(even) > td {
background-color: #f5f7fa;
}

/* Row lẻ — màu trắng */
.wikitable > tr:nth-child(odd) > td,
.wikitable > * > tr:nth-child(odd) > td {
background-color: #ffffff;
}

/* Header giữ style mặc định */
.wikitable > tr > th,
.wikitable > * > tr > th {
background-color: #eaecf0;
font-weight: 600;
}

/* Hover row — highlight nhẹ */
.wikitable > tr:hover > td,
.wikitable > * > tr:hover > td {
background-color: #eaf3ff;
transition: background-color 0.15s ease;
}

/* Border row nhẹ hơn cho cảm giác clean */
.wikitable td,
.wikitable th {
border: 1px solid #e1e4e8;
padding: 8px 12px;
}

/* PDF */
.pdf-icon {
font-size: 0.85em;
opacity: 0.6;
margin-left: 2px;
}
a:hover .pdf-icon {
opacity: 1;
}

/* ============================================ */
/* Main Page — Teltonika-style (no card borders)*/
/* ============================================ */

.categories-list {
display: grid;
grid-template-columns: repeat(4, 1fr); /* 4 cột, gọn như Teltonika */
gap: 32px 24px;
margin: 36px 0;
}

/* Grid 3 cột cho Products */
.categories-list-3 {
grid-template-columns: repeat(3, 1fr) !important;
}

/* Grid 4 cột cho Information */
.categories-list-4 {
grid-template-columns: repeat(4, 1fr) !important;
}

/* Responsive */
@media (max-width: 1200px) {
.categories-list-3 {
grid-template-columns: repeat(2, 1fr) !important;
}
.categories-list-4 {
grid-template-columns: repeat(2, 1fr) !important;
}
}

@media (max-width: 700px) {
.categories-list-3,
.categories-list-4 {
grid-template-columns: 1fr !important;
}
}

/* Style cho separator <hr> giữa 2 section */
.mw-parser-output > hr {
border: 0;
border-top: 1px solid #eaecf0;
margin: 32px 0;
}

/* Title link không underline */
.category-block-title a {
color: #1976d2 !important;
text-decoration: none !important;
}

.category-block-title a:hover {
text-decoration: underline !important;
}

.category-block {
/* ❌ KHÔNG có border, background, shadow */
padding: 0;
background: transparent;
border: none;
text-align: center;
}

/* Header: icon trên, title dưới */
.category-block-header {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 10px !important;
margin-bottom: 8px !important;
}

/* Icon đứng trần — không frame xám */
.category-block-icon {
background: transparent !important;
padding: 0 !important;
width: auto !important;
height: auto !important;
box-shadow: none !important;
}

.category-block-icon img {
height: 72px !important;
width: auto !important;
}

.category-block-title {
font-size: 1.05em !important;
color: #1976d2 !important;
font-weight: 600 !important;
margin-top: 4px !important;
display: block !important;
}

.category-block-desc {
color: #54595d;
font-size: 0.88em;
margin: 6px 8px 12px;
line-height: 1.5;
min-height: 60px;
}

.category-block-toggle {
margin-top: 8px;
padding-top: 0;
border-top: none;
}

/* Toggle text: xanh + không đậm */
.category-block-toggle span[class*="mw-customtoggle-cb-"] {
cursor: pointer;
color: #1976d2 !important;
font-weight: 400 !important; /* không đậm */
font-size: 0.95em;
user-select: none;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
}

.category-block-toggle span[class*="mw-customtoggle-cb-"]:hover {
color: #0d47a1 !important;
text-decoration: underline;
}

.category-block-toggle span[class*="mw-customtoggle-cb-"]:hover .toggle-arrow {
border-color: #0d47a1;
}

/* Chevron arrow — mặc định trỏ xuống (collapsed) */
.toggle-arrow {
display: inline-block;
width: 7px;
height: 7px;
border-right: 2px solid #1976d2;
border-bottom: 2px solid #1976d2;
transform: rotate(45deg); /* trỏ xuống ⌄ */
transition: transform 0.25s ease;
margin-top: -4px;
}

/* Khi expanded — xoay lên ⌃ */
.category-block-toggle span[class*="mw-customtoggle-cb-"].is-expanded .toggle-arrow {
transform: rotate(-135deg); /* trỏ lên */
margin-top: 2px;
}

.category-block-toggle span[class*="mw-customtoggle-cb-"]:hover {
color: #000 !important;
text-decoration: underline;
}

.category-block-products {
margin-top: 14px;
padding-top: 12px;
border-top: 1px dashed #e1e4e8;
text-align: left;
}

.category-block-products ul {
margin: 6px 0;
padding-left: 20px;
}

.category-block-products li {
margin: 5px 0;
font-size: 0.9em;
line-height: 1.5;
}

.category-block-products .mw-collapsible-toggle,
.category-block-products .mw-collapsible-toggle-default,
.category-block-products a.mw-collapsible-text {
display: none !important;
}

/* Responsive */
@media (max-width: 1200px) {
.categories-list {
grid-template-columns: repeat(2, 1fr);
}
}

@media (max-width: 600px) {
.categories-list {
grid-template-columns: 1fr;
}
.category-block-desc {
min-height: auto;
}
}

/* ============================================ */
/* Document download/view buttons */
/* ============================================ */

a.btn-download {
display: inline-block;
padding: 4px 10px;
background: #1976d2;
color: #fff !important;
border-radius: 4px;
font-size: 0.88em;
font-weight: 500;
text-decoration: none !important;
transition: background 0.15s ease;
}

a.btn-download:hover {
background: #0d47a1;
color: #fff !important;
text-decoration: none !important;
}

/* Style cho link View (không phải button, chỉ là link icon) */
a[href*=".pdf"][target="_blank"]:not(.btn-download) {
color: #1976d2;
text-decoration: none;
font-weight: 500;
font-size: 0.92em;
}

a[href*=".pdf"][target="_blank"]:not(.btn-download):hover {
text-decoration: underline;
}

/* ============================================ */
/* Global heading styles */
/* ============================================ */

/* HEADING (H2) — to, đậm, xanh */
.mw-parser-output h2 {
font-size: 1.55em !important;
font-weight: 700 !important;
color: #1976d2 !important;
margin: 1.3em 0 0.6em !important;
padding-bottom: 0.3em !important;
border-bottom: 1px solid #eaecf0 !important;
line-height: 1.3 !important;
}

/* SUB-HEADING 1 (H3) — to, không đậm */
.mw-parser-output h3 {
font-size: 1.35em !important;
font-weight: 400 !important;
color: #202122 !important;
margin: 1em 0 0.4em !important;
padding-bottom: 0 !important;
border-bottom: none !important;
line-height: 1.3 !important;
}

/* SUB-HEADING 2 (H4) — to vừa, không đậm */
.mw-parser-output h4 {
font-size: 1.25em !important;
font-weight: 400 !important;
color: #202122 !important;
margin: 0.9em 0 0.35em !important;
padding-bottom: 0 !important;
border-bottom: none !important;
line-height: 1.3 !important;
font-style: normal !important;
}

/* SUB-HEADING 3 (H5) — không đậm */
.mw-parser-output h5 {
font-size: 1.15em !important;
font-weight: 400 !important;
color: #202122 !important;
margin: 0.85em 0 0.3em !important;
padding-bottom: 0 !important;
border-bottom: none !important;
line-height: 1.3 !important;
font-style: normal !important;
}

/* SUB-HEADING 4 (H6) — không đậm, không nghiêng */
.mw-parser-output h6 {
font-size: 1.05em !important;
font-weight: 400 !important;
color: #202122 !important;
margin: 0.8em 0 0.3em !important;
padding-bottom: 0 !important;
border-bottom: none !important;
line-height: 1.3 !important;
font-style: normal !important; /* override Vector default italic */
}

/* Edit link bên cạnh heading */
.mw-parser-output .mw-editsection,
.mw-parser-output .mw-editsection a {
font-size: 0.6em !important;
font-weight: 400 !important;
color: #54595d !important;
}

.mw-parser-output h2 .mw-editsection a {
color: #1976d2 !important;
}

/* ============================================ */
/* TOC: collapse sub-headings by default */
/* ============================================ */

/* Ẩn mọi sub-list trong TOC mặc định */
.vector-toc .vector-toc-list .vector-toc-list-item .vector-toc-list {
display: none;
}

/* Hiển thị khi item được expand */
.vector-toc .vector-toc-list-item-expanded > .vector-toc-list,
.vector-toc-toggle[aria-expanded="true"] ~ .vector-toc-list {
display: block;
}

/* Hiển thị mũi tên ▶ rõ ràng hơn */
.vector-toc-toggle {
opacity: 0.7;
transition: opacity 0.15s;
}

.vector-toc-toggle:hover {
opacity: 1;
}

body, .mw-parser-output, h1, h2, h3, h4, h5, h6 {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif !important;
}

/* Icon SVG render crisp */
.category-block-icon img,
img[src*="Icon-"] {
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}

/* ============================================ */
/* Safety callout tables */
/* ============================================ */

.wikitable.danger,
.wikitable.warning,
.wikitable.caution,
.wikitable.notice {
border-collapse: collapse;
border: none;
border-left-width: 4px;
border-left-style: solid;
margin: 16px 0;
width: 100%;
border-radius: 0 4px 4px 0;
overflow: hidden;
}

.wikitable.danger th,
.wikitable.warning th,
.wikitable.caution th,
.wikitable.notice th {
text-align: left !important;
font-weight: 700 !important;
padding: 10px 16px !important;
border: none !important;
}

.wikitable.danger td,
.wikitable.warning td,
.wikitable.caution td,
.wikitable.notice td {
padding: 12px 16px !important;
border: none !important;
line-height: 1.55;
}

/* DANGER — Red */
.wikitable.danger {
border-left-color: #d32f2f;
background: #ffebee;
}
.wikitable.danger th {
background: #ffcdd2 !important;
color: #b71c1c !important;
}

/* WARNING — Orange */
.wikitable.warning {
border-left-color: #f57c00;
background: #fff3e0;
}
.wikitable.warning th {
background: #ffe0b2 !important;
color: #e65100 !important;
}

/* CAUTION — Yellow */
.wikitable.caution {
border-left-color: #f9a825;
background: #fffde7;
}
.wikitable.caution th {
background: #fff9c4 !important;
color: #f57f17 !important;
}

/* NOTICE — Blue */
.wikitable.notice {
border-left-color: #1976d2;
background: #e3f2fd;
}
.wikitable.notice th {
background: #bbdefb !important;
color: #0d47a1 !important;
}

/* Pending Reviews Badge */
#pending-reviews-badge {
transition: background 0.2s ease, transform 0.15s ease;
}

#pending-reviews-badge:hover {
background: #ffe0b2 !important;
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(229, 81, 0, 0.15);
}

#pending-reviews-badge a:hover {
text-decoration: none !important;
}

@keyframes pendingPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(229, 81, 0, 0.4); }
50% { box-shadow: 0 0 0 4px rgba(229, 81, 0, 0); }
}

#pending-reviews-badge {
animation: pendingPulse 2s infinite;
}

/* Download table */
.doc-downloads {
border-collapse: collapse !important;
background: transparent !important;
border: none !important;
margin: 12px 0 !important;
}

.doc-downloads td {
border: none !important;
padding: 6px 12px 6px 0 !important;
background: transparent !important;
vertical-align: middle;
}

.doc-downloads td:first-child {
font-weight: 500;
}

.doc-downloads td:last-child {
color: #54595d;
font-size: 0.9em;
}

.doc-downloads a {
color: #0054A6;
text-decoration: none;
}

.doc-downloads a:hover {
text-decoration: underline;
}

/* ===== PCN styles ===== */
.pcn-page-title {
margin: 0 0 12px;
padding: 14px 18px;
background: linear-gradient(135deg, #4b5f78 0%, #5d728e 100%);
color: #fff;
border-radius: 8px;
font-weight: 700;
}

.pcn-intro,
.pcn-note,
.pcn-section-card {
border: 1px solid #d9e2ec;
border-radius: 8px;
background: #fff;
padding: 14px 16px;
margin: 0 0 16px;
}

.pcn-intro {
background: #f7f9fc;
}

.pcn-note {
background: #f4f8fd;
border-left: 4px solid #5b84b1;
}

.pcn-section-title {
margin: 20px 0 10px;
padding: 8px 12px;
background: #eef3f8;
border-left: 4px solid #5d728e;
font-weight: 700;
color: #243447;
}

.pcn-table {
width: 100%;
border-collapse: collapse;
margin: 0 0 18px;
font-size: 14px;
}

.pcn-table th,
.pcn-table td {
border: 1px solid #d8e0ea;
padding: 8px 10px;
vertical-align: top;
}

.pcn-table th {
background: #eef3f8;
color: #243447;
font-weight: 700;
text-align: left;
}

.pcn-table tr:nth-child(even) td {
background: #fafbfd;
}

.pcn-status {
display: inline-block;
min-width: 72px;
padding: 3px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.02em;
}

.pcn-status-draft {
background: #eef1f5;
color: #51606f;
}

.pcn-status-active {
background: #e8f4ec;
color: #1d6b3d;
}

.pcn-status-implemented {
background: #eaf1fb;
color: #285ea8;
}

.pcn-status-obsolete {
background: #f7eaea;
color: #a33d3d;
}

.pcn-meta {
display: grid;
grid-template-columns: repeat(2, minmax(220px, 1fr));
gap: 12px 18px;
margin: 0 0 16px;
}

.pcn-meta-item {
padding: 10px 12px;
border: 1px solid #d9e2ec;
border-radius: 8px;
background: #fff;
}

.pcn-meta-label {
display: block;
margin-bottom: 4px;
color: #5c6b7a;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
}

.pcn-meta-value {
color: #1f2d3a;
font-weight: 600;
}

@media (max-width: 720px) {
.pcn-meta {
grid-template-columns: 1fr;
}
}

/* ============================================================
* Highlight bảng row khi được focus qua URL anchor (#fw-v1.2.0)
* ============================================================ */

/* Smooth scroll khi click anchor link */
html {
scroll-behavior: smooth;
}

/* Offset top để row không bị che bởi sticky header Vector 2022 */
.wikitable tr[id] {
scroll-margin-top: 80px;
}

/* Highlight row khi được target */
.wikitable tr:target {
background-color: #fff8dc !important;
box-shadow: inset 4px 0 0 #FFC107, 0 0 12px rgba(255, 193, 7, 0.4);
animation: highlightPulse 1.5s ease-out 1;
}

/* Highlight cell trong row được target */
.wikitable tr:target > td {
background-color: #fff8dc !important;
transition: background-color 0.3s;
}

/* Animation pulse khi vừa scroll tới */
@keyframes highlightPulse {
0% { background-color: #FFD54F !important; }
50% { background-color: #FFECB3 !important; }
100% { background-color: #fff8dc !important; }
}

/* ============================================================
* Placeholder text styling — used by {{Placeholder|...}}
* ============================================================ */

.soji-placeholder {
color: #888 !important;
font-style: italic !important;
background: #fffbe6 !important;
padding: 3px 8px !important;
border-left: 3px solid #ffc107 !important;
display: inline-block !important;
border-radius: 0 3px 3px 0;
transition: opacity 0.2s;
}

.soji-placeholder:hover {
opacity: 0.8;
}

/* Print mode: ẩn placeholder khỏi PDF/print */
@media print {
.soji-placeholder {
display: none !important;
}
}

/* ============================================================
* Version History Row Action Toolbar
* ============================================================ */

.fw-row-toolbar {
position: absolute;
top: 4px;
right: -2px;
display: none;
background: white;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
padding: 4px;
z-index: 10;
white-space: nowrap;
}

.fw-version-history tr:hover .fw-row-toolbar,
.fw-version-history tr.fw-row-active .fw-row-toolbar {
display: inline-block;
}

.fw-btn {
padding: 4px 10px;
margin: 0 2px;
border: 1px solid #ccc;
border-radius: 3px;
background: #fff;
cursor: pointer;
font-size: 0.85em;
color: #333;
transition: all 0.15s;
}

.fw-btn:hover {
background: #0054A6;
color: white;
border-color: #003d7a;
}

.fw-btn-edit:hover { background: #2196F3; border-color: #1976D2; }
.fw-btn-add-above:hover { background: #4CAF50; border-color: #388E3C; }
.fw-btn-add-below:hover { background: #4CAF50; border-color: #388E3C; }

/* Row đang hover được nhấn nhẹ */
.fw-version-history tr:hover {
background-color: #f0f8ff !important;
cursor: default;
}

/* Print mode: ẩn toolbar */
@media print {
.fw-row-toolbar {
display: none !important;
}
}

/* ============================================================
* Dim class — fade any content (text, image, table, link, ...)
* Usage: <div class="dim">content</div> or <span class="dim">text</span>
* ============================================================ */
.dim {
opacity: 0.4;
color: #000;
transition: opacity 0.25s ease;
}
@media print {
.dim {
display: none !important;
}
}

/* MultiBoilerplate dropdown styling */
fieldset.boilerplate-fieldset,
#multiboilerplate-fieldset {
border: 1px solid #c8ccd1;
border-radius: 4px;
padding: 12px 16px;
background: #f8f9fa;
margin-bottom: 16px;
}

fieldset.boilerplate-fieldset legend,
#multiboilerplate-fieldset legend {
font-weight: bold;
color: #0054A6;
padding: 0 8px;
}

select[name="boilerplate"],
#multiboilerplate-select,
#boilerplate-select {
padding: 6px 12px;
border: 1px solid #c8ccd1;
border-radius: 3px;
background: white;
cursor: pointer;
min-width: 250px;
font-size: 0.95em;
transition: border-color 0.2s, box-shadow 0.2s;
}

select[name="boilerplate"]:hover,
#multiboilerplate-select:hover {
border-color: #0054A6;
box-shadow: 0 0 0 2px rgba(0, 84, 166, 0.15);
}

.mb-loading-indicator {
animation: pulse 1s ease-in-out infinite;
}

@keyframes pulse {
0%, 100% { opacity: 0.5; }
50% { opacity: 1; }
}

/* Software card styling */
.software-card {
display: inline-block;
width: 240px;
padding: 16px;
margin: 10px;
border: 1px solid #c8ccd1;
border-radius: 8px;
background: #fff;
vertical-align: top;
text-align: center;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.software-card:hover {
transform: translateY(-3px);
box-shadow: 0 4px 12px rgba(0, 84, 166, 0.15);
border-color: #0054A6;
}

.software-card-image {
height: 120px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
}

.software-card-title {
font-weight: bold;
font-size: 1.05em;
margin-bottom: 8px;
}

.software-card-title a {
color: #0054A6 !important;
text-decoration: none;
}

.software-card-desc {
font-size: 0.85em;
color: #54595d;
line-height: 1.4;
}

.software-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px;
margin: 20px 0;
}

/* No-icon placeholder inside card */
.software-card-no-icon {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #888;
text-align: center;
font-size: 0.75em;
padding: 8px;
box-sizing: border-box;
background: #fafafa;
border: 2px dashed #c8ccd1;
border-radius: 4px;
}

.software-card-no-icon-emoji {
font-size: 2em;
color: #c8ccd1;
margin-bottom: 6px;
line-height: 1;
}

.software-card-no-icon-text {
line-height: 1.4;
}

.software-card-no-icon-text code {
background: #fff3cd;
color: #856404;
padding: 2px 6px;
border-radius: 3px;
font-size: 0.95em;
word-break: break-all;
display: inline-block;
margin-top: 2px;
}

/* Certifications page — cert cards */
.cert-card {
padding: 12px 16px;
margin: 10px 0;
border-radius: 6px;
border-left: 4px solid;
display: flex;
align-items: center;
gap: 8px;
font-size: 1em;
}

.cert-card-available {
background: #e8f5e9;
border-left-color: #4CAF50;
}

.cert-card-available::before {
content: "✅";
font-size: 1.2em;
}

.cert-card-missing {
background: #fff3cd;
border-left-color: #ffc107;
color: #856404;
}

.cert-card-missing::before {
content: "⚠";
font-size: 1.2em;
}

.cert-card code {
background: #fff;
padding: 2px 6px;
border-radius: 3px;
font-size: 0.9em;
border: 1px solid #c8ccd1;
}

/* ============================================================
* Sidebar category filter — CSS-first to prevent FOUC flash
* Hide non-whitelisted sub-categories before JS runs
* ============================================================ */

/* Hide all sub-categories trong CategoryTree first */
#p-categorytree-portlet .CategoryTreeChildren .CategoryTreeItem {
display: none;
}

/* Show ONLY whitelisted suffixes — using attribute selectors */
#p-categorytree-portlet .CategoryTreeChildren .CategoryTreeItem:has(a[href*="Datasheet"]),
#p-categorytree-portlet .CategoryTreeChildren .CategoryTreeItem:has(a[href*="User_Guide"]),
#p-categorytree-portlet .CategoryTreeChildren .CategoryTreeItem:has(a[href*="Video"]) {
display: list-item;
}

/* Backup: hide known bad items explicitly */
#p-categorytree-portlet a[href*="Product_Change_Notifications"],
#p-categorytree-portlet a[href*="Firmware_Changelog"],
#p-categorytree-portlet a[href*="Promotional_Material"],
#p-categorytree-portlet a[href*="Certifications"],
#p-categorytree-portlet a[href*="Certification_%26_Approvals"] {
display: none !important;
}

#p-categorytree-portlet li:has(> a[href*="Product_Change_Notifications"]),
#p-categorytree-portlet li:has(> a[href*="Firmware_Changelog"]),
#p-categorytree-portlet li:has(> a[href*="Promotional_Material"]),
#p-categorytree-portlet li:has(> a[href*="Certifications"]),
#p-categorytree-portlet li:has(> a[href*="Certification_%26_Approvals"]) {
display: none !important;
}

/* Smooth transition khi sidebar render */
#mw-panel,
#p-categorytree-portlet {
transition: opacity 0.15s ease;
}
/* Prevent sidebar layout shift during navigation */
#mw-panel,
#vector-main-menu-pinned-container,
#p-categorytree-portlet {
contain: layout style;
min-height: 1px;
}

/* Skeleton loader for sidebar during load */
.client-nojs #p-categorytree-portlet,
body.mw-special #p-categorytree-portlet {
/* No loading state on special pages */
}

/* Protocol link only — make it look like internal links, no icon */
.protocol-link a {
color: #0645ad !important;
background: none !important;
background-image: none !important;
padding-right: 0 !important;
padding-left: 0 !important;
font-weight: normal !important;
text-decoration: none !important;
}

.protocol-link a:visited {
color: #0645ad !important;
}

.protocol-link a:hover {
text-decoration: underline !important;
}

.protocol-link a::after,
.protocol-link a::before {
content: none !important;
display: none !important;
background-image: none !important;
}

.protocol-link img,
.protocol-link a + img,
.protocol-link a ~ img {
display: none !important;
}

/* =========================
FORCE PAGE CONTAINER FULL VIEWPORT WIDTH
========================= */
.mw-page-container,
.mw-page-container-inner {
max-width: none !important;
width: 100% !important;
}

/* Đảm bảo content inside cũng stretch theo */
.mw-content-container,
.mw-body {
max-width: none !important;
}

/* Nhưng cap text-heavy content để dễ đọc (text quá dài 1 dòng khó đọc trên màn hình to) */
.mw-body-content .mw-parser-output {
max-width: 1400px;
margin: 0 auto;
}

/* =========================
DOWNLOAD PDF BUTTON
========================= */
.soji-pdf-btn {
background: #f0a830;
color: #2d3338;
border: none;
padding: 8px 16px;
border-radius: 4px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
margin-left: auto;
vertical-align: middle;
display: inline-flex;
align-items: center;
transition: background 0.2s;
font-family: inherit;
}
.mw-first-heading,
#firstHeading,
h1.firstHeading {
display: flex !important;
align-items: center;
flex-wrap: wrap;
gap: 12px;
}
.soji-pdf-btn:hover {
background: #d99425;
}
.soji-pdf-btn:focus {
outline: 2px solid #2c5aa0;
outline-offset: 2px;
}

/* =========================
PRINT / PDF EXPORT STYLES
Applied when user clicks button → window.print()
========================= */
@media print {
/* Ẩn UI elements không thuộc nội dung */
.mw-sidebar,
#mw-panel,
.mw-header,
#mw-head,
#mw-page-base,
.mw-portlet-tb,
.mw-portlet-lang,
.vector-page-toolbar,
.vector-menu-tabs,
.vector-pinnable-header,
.vector-column-start,
.vector-column-end,
.vector-sticky-header,
.vector-header-container,
.mw-table-of-contents-container,
.soji-site-footer,
#footer,
.mw-footer,
.mw-footer-container,
.soji-pdf-btn,
.printfooter,
.mw-editsection,
#catlinks,
.mw-jump-link,
.mw-indicators,
.custom-breadcrumb,
#toc .toctogglecheckbox,
.mw-cite-backlink,
.noprint {
display: none !important;
}

/* Reset layout cho clean print */
html, body {
margin: 0 !important;
padding: 0 !important;
background: white !important;
color: black !important;
font-size: 11pt;
line-height: 1.5;
overflow: visible !important;
}

.mw-page-container,
.mw-page-container-inner,
.mw-content-container,
.mw-body,
.mw-body-content,
.mw-parser-output {
max-width: 100% !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
background: white !important;
box-shadow: none !important;
}

/* Heading hierarchy — h1 > h2 > h3 */
.mw-first-heading, #firstHeading, h1.firstHeading {
font-size: 24pt !important;
font-weight: 700 !important;
border-bottom: 2px solid #2c5aa0;
padding-bottom: 8px;
margin-bottom: 20px;
color: #2c5aa0 !important;
}

.mw-body-content h2,
.mw-parser-output h2,
div.mw-heading2 h2,
h2 {
font-size: 18pt !important;
font-weight: 600 !important;
line-height: 1.3 !important;
margin: 0 !important;
padding: 0 !important;
border: none !important; /* ← bỏ border ở h2 */
color: #2c5aa0 !important;
}

/* Wrapper mw-heading2 có border xanh đậm */
div.mw-heading2,
.mw-heading.mw-heading2 {
border-bottom: 0.75px solid #2c5aa0 !important; /* ← xanh, dày 2px */
padding-bottom: 4pt !important;
margin-top: 14pt !important;
margin-bottom: 8pt !important;
}

.mw-body-content h3,
.mw-parser-output h3,
div.mw-heading3,
div.mw-heading3 h3,
h3 {
font-size: 16pt !important;
margin-top: 12pt !important;
color: #444 !important;
}
h4 { font-size: 9pt !important; color: #555 !important; }

/* Tables: keep on same page, có border */
table {
page-break-inside: avoid;
border-collapse: collapse;
}
table.wikitable {
border: 1px solid #999;
}
table.wikitable th, table.wikitable td {
border: 1px solid #999;
padding: 6px 10px;
}
table.wikitable th {
background: #f5f5f5;
}

/* Images full visible */
img {
max-width: 100% !important;
height: auto !important;
page-break-inside: avoid;
}

/* Hiển thị URL của external link */
a[href^="http"]:not([href*="sojielectronics.com"])::after {
content: " (" attr(href) ")";
font-size: 9pt;
color: #666;
word-break: break-all;
}
a[href^="#"]::after, a[href^="/"]::after { content: ""; }
a {
color: #2c5aa0;
text-decoration: none;
}

/* Page break control */
ul, ol { page-break-inside: avoid; }
blockquote, figure, pre { page-break-inside: avoid; }
p { orphans: 3; widows: 3; }

/* Page settings — A4 với margin chuẩn */
@page {
margin: 1.5cm 2cm;
size: A4;
}

/* Header chữ nhỏ trên cùng mỗi trang */
body::before {
content: "SOJI Electronics — Technical Documentation Wiki";
display: block;
font-size: 9pt;
color: #666;
text-align: right;
border-bottom: 1px solid #ddd;
padding-bottom: 6px;
margin-bottom: 14px;
}
/* =========================
IMAGES & CAPTIONS - print
========================= */

/* Outer container */
div.thumb,
figure.thumb,
figure.mw-default-size,
figure[typeof~="mw:File/Thumb"],
figure[typeof~="mw:File/Frame"],
.thumb,
.floatright,
.floatleft,
.tright,
.tleft {
float: none !important;
clear: both !important;
margin: 12pt auto !important;
display: block !important;
width: auto !important; /* ← override inline width */
max-width: 80% !important;
page-break-inside: avoid !important;
}

/* Inner container (cái này gây bug — có inline width nhỏ) */
.thumbinner,
div.thumbinner,
figure.thumb > *,
.thumb .thumbinner {
width: auto !important; /* ← key fix */
max-width: 100% !important;
margin: 0 auto !important;
text-align: center !important;
padding: 6pt !important;
}

/* Image */
.thumb img,
figure img,
.image img,
a.image img {
max-width: 100% !important;
height: auto !important;
margin: 0 auto !important;
display: block !important;
width: auto !important;
}

/* Caption — không bị bóp width nữa */
.thumbcaption,
figcaption,
div.thumbcaption {
width: auto !important; /* ← override inline */
max-width: 100% !important;
text-align: center !important;
font-style: italic !important;
font-size: 9pt !important;
color: #555 !important;
margin-top: 4pt !important;
padding: 0 6pt !important;
white-space: normal !important; /* ← cho phép wrap bình thường */
display: block !important;
}

/* Standalone image (không trong thumb) */
img {
page-break-inside: avoid !important;
max-width: 100% !important;
height: auto !important;
}
}

/* =========================
IMAGE CAPTIONS - căn giữa cho normal view
========================= */
.thumbcaption,
.thumbinner .thumbcaption,
figure figcaption,
figure .mw-file-description-caption {
text-align: center !important;
}

/* Ẩn icon magnify (kính lúp) bên cạnh caption nếu muốn */
.magnify {
display: none !important;
}

/* Ẩn icon magnify/expand ở góc caption */
.magnify,
.mw-file-description .magnify,
.thumbcaption .magnify {
display: none !important;
}
.thumb a,
.image {
pointer-events: none !important;
cursor: default !important;
}

/* =========================
YOUTUBE FACADE
========================= */
.soji-yt-facade {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background: #000;
cursor: pointer;
overflow: hidden;
border-radius: 8px;
margin: 12px auto;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
transition: box-shadow 0.2s;
}

.soji-yt-facade:hover {
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.soji-yt-thumb {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.3s, filter 0.2s;
}

.soji-yt-facade:hover .soji-yt-thumb {
transform: scale(1.02);
filter: brightness(0.85);
}

.soji-yt-play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: transparent;
border: none;
cursor: pointer;
width: 84px;
height: 60px;
padding: 0;
transition: transform 0.2s;
pointer-events: none;
}

.soji-yt-play svg {
width: 100%;
height: 100%;
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
}

.soji-yt-play-bg {
fill: #212121;
fill-opacity: 0.8;
transition: fill 0.2s, fill-opacity 0.2s;
}

.soji-yt-facade:hover .soji-yt-play {
transform: translate(-50%, -50%) scale(1.1);
}

.soji-yt-facade:hover .soji-yt-play-bg {
fill: #ff0000;
fill-opacity: 1;
}

.soji-yt-playing iframe {
width: 100%;
height: 100%;
position: absolute;
inset: 0;
border: 0;
}

/* Ẩn trong print */
@media print {
.soji-yt-facade,
iframe[src*="youtube"] {
display: none !important;
}
}

/* =========================
TABLES - full width đồng đều
========================= */

/* Page view */
table.wikitable,
.mw-parser-output table.wikitable {
width: 100%;
table-layout: auto; /* Cell vẫn tự cỡ theo content, nhưng tổng = 100% */
margin: 12px 0;
}

/* Print/PDF */
@media print {
table,
table.wikitable,
.mw-parser-output table {
width: 100% !important;
table-layout: auto !important;
margin: 8pt 0 !important;
page-break-inside: avoid !important;
}

/* Cell padding rộng hơn để text breathing room */
table.wikitable th,
table.wikitable td {
padding: 6pt 10pt !important;
vertical-align: middle !important;
}

/* Header row đậm hơn */
table.wikitable th {
background: #f5f7fa !important;
font-weight: 700 !important;
text-align: center !important;
}
}

/* =========================
MAIN PAGE GRIDS
========================= */
.main-page-products-grid {
display: flex;
flex-wrap: wrap;
justify-content: center; /* ← căn giữa cụm */
gap: 24px;
margin: 24px auto;
max-width: 100%;
}

.main-page-product-card {
flex: 0 0 320px; /* ← fixed width 280px, không co dãn */
background: white;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 28px 20px 24px;
text-align: center;
transition: all 0.2s;
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
}

.main-page-product-icon {
width: 140px;
height: 140px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px; /* ← căn giữa horizontal */
}

.main-page-product-icon img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
margin: 0 auto; /* ← căn giữa nếu ảnh nhỏ hơn container */
display: block;
}

.main-page-product-title {
font-size: 22px;
font-weight: 700;
margin-top: 12px; /* ← đẩy title xuống cách image */
margin-bottom: 16px;
color: #2c5aa0;
text-align: center;
width: 100%;
}

.main-page-product-title a {
color: #2c5aa0;
text-decoration: none;
}

.main-page-product-desc {
color: #444;
font-size: 14px;
line-height: 1.5;
text-align: center; /* ← căn giữa text */
margin: 0;
padding: 0 8px;
}

.main-page-product-link a {
color: #2c5aa0;
font-weight: 600;
font-size: 14px;
text-decoration: none;
}

/* Categories grid (bottom) */
.main-page-categories-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin: 30px 0;
}

.main-page-category-card {
text-align: center;
padding: 20px;
}

.main-page-category-icon {
font-size: 50px;
margin-bottom: 12px;
color: #2c5aa0;
}

.main-page-category-title {
font-size: 18px;
font-weight: 700;
margin-bottom: 8px;
}

.main-page-category-title a {
color: #2c5aa0;
text-decoration: none;
}

.main-page-category-desc {
color: #444;
font-size: 13px;
line-height: 1.5;
margin-bottom: 12px;
min-height: 60px;
}

.main-page-category-link a {
color: #2c5aa0;
font-weight: 600;
text-decoration: none;
}

@media (max-width: 900px) {
.main-page-categories-grid {
grid-template-columns: 1fr 1fr;
}
}

@media (max-width: 600px) {
.main-page-products-grid,
.main-page-categories-grid {
grid-template-columns: 1fr;
}
}

/* =========================
PRODUCT PAGES — Summary card + Full layout
========================= */

/* Direct view: hide summary card (because description shows on Main Page card),
show full layout (sub-page links + image) */
body.action-view .product-summary-card {
display: none;
}
body.action-view .product-fullview {
display: flex;
}

/* Main Page grid: show summary card (as product card), hide full layout */
.main-page-products-grid .product-summary-card {
display: block;
}
.main-page-products-grid .product-fullview {
display: none;
}

/* Edit mode: show summary card with yellow cue */
body:not(.action-view) .product-summary-card {
display: block;
background: #fff8e1;
border: 2px dashed #f0a830;
padding: 14px;
border-radius: 8px;
margin-bottom: 20px;
}

body:not(.action-view) .product-summary-card::before {
content: "📦 Main Page Card Preview — edit description in the template below";
display: block;
font-weight: 700;
color: #2c5aa0;
margin-bottom: 12px;
font-size: 13px;
}

.main-page-products-grid .product-summary-card {
background: transparent;
border: none;
padding: 0;
margin: 0;
}
.main-page-products-grid .product-summary-card::before {
content: none;
}

/* Products grid */
.main-page-products-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 24px;
margin: 24px auto;
}
/* =========================
MAIN PAGE GRIDS
========================= */
.main-page-products-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 24px;
margin: 24px auto;
}

.main-page-product-card {
background: transparent;
border: none;
padding: 20px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
flex: 0 0 280px;
box-sizing: border-box;
position: relative;
cursor: pointer;
}

/* Bỏ hover effect trên card (không border, không shadow, không transform) */
.main-page-product-card:hover {
background: transparent;
border: none;
box-shadow: none;
transform: none;
}

/* Stretched link: link trong title cover toàn card */
.main-page-product-title a::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
}

/* Pass clicks through icon và description xuống stretched link */
.main-page-product-icon,
.main-page-product-desc,
.main-page-product-no-icon {
pointer-events: none;
}

/* Title link giữ pointer-events bình thường */
.main-page-product-title {
pointer-events: auto;
}

.main-page-product-icon {
width: 140px;
height: 140px;
margin: 0 auto 16px;
display: flex;
align-items: center;
justify-content: center;
}

.main-page-product-icon img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}

.main-page-product-title {
font-size: 22px;
font-weight: 700;
color: #2c5aa0;
text-align: center;
margin: 8px 0 14px;
}

.main-page-product-title a {
color: #2c5aa0;
text-decoration: none;
transition: color 0.2s;
}

/* Chỉ highlight title khi hover card (giống 4 category cards bottom) */
.main-page-product-card:hover .main-page-product-title a {
text-decoration: underline;
color: #1a3a6e;
}

.main-page-product-desc {
color: #444;
font-size: 14px;
line-height: 1.5;
text-align: center;
}

/* Categories grid - 4 cards bottom */
.main-page-categories-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin: 30px 0;
}

.main-page-category-card {
text-align: center;
padding: 20px;
}

.main-page-category-icon {
font-size: 50px;
margin-bottom: 12px;
color: #2c5aa0;
}

.main-page-category-title {
font-size: 18px;
font-weight: 700;
margin-bottom: 8px;
}

.main-page-category-title a {
color: #2c5aa0;
text-decoration: none;
}

.main-page-category-desc {
color: #444;
font-size: 13px;
line-height: 1.5;
}

/* =========================
FLOATING BUTTONS - luôn trên top
========================= */
#floating-buttons {
position: fixed !important;
z-index: 99999 !important;
/* Position: thường là góc dưới phải */
bottom: 24px;
right: 24px;
}

#floating-buttons button,
#floating-buttons a {
z-index: 99999 !important;
}

/* Đảm bảo footer KHÔNG che các button này */
.soji-site-footer,
#footer,
.mw-footer-container {
z-index: 1 !important;
}

/* ============================================ */
/* Override all blue to SOJI brand color */
/* ============================================ */

/* Heading H2 */
.mw-parser-output h2 {
color: #0054A6 !important;
border-bottom-color: #eaecf0 !important;
}

/* Page title H1 */
.mw-page-title,
#firstHeading,
h1.firstHeading {
color: #0054A6 !important;
}

/* Wiki links */
.mw-parser-output a {
color: #0054A6;
}

.mw-parser-output a:visited {
color: #003a7a;
}

.mw-parser-output a:hover {
color: #003a7a;
}

/* Import font Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@600;700;800&display=swap');

/* Category block title — apply font mới */
.category-block-title,
.category-block-title a {
color: #003a7a !important;
font-family: 'Mulish', -apple-system, "Segoe UI", sans-serif !important;
font-weight: 700 !important;
letter-spacing: 0.3px !important;
font-size: 1.15em !important;
}

/* Category block hover border */
.category-block:hover {
border-color: #0054A6 !important;
}

/* Toggle text */
.category-block-toggle span[class*="mw-customtoggle-cb-"] {
color: #0054A6 !important;
}

.category-block-toggle span[class*="mw-customtoggle-cb-"]:hover {
color: #003a7a !important;
}

/* Chevron arrow */
.toggle-arrow {
border-right-color: #0054A6 !important;
border-bottom-color: #0054A6 !important;
}

.category-block-toggle span:hover .toggle-arrow {
border-color: #003a7a !important;
}

/* Document download button */
.doc-download a {
background: #0054A6 !important;
color: #fff !important;
}

.doc-download a:hover {
background: #003a7a !important;
}

/* Document view link */
.doc-view a {
color: #0054A6 !important;
}

/* Wiki link blue (mặc định Vector) */
a.external,
.mw-body-content a {
color: #0054A6;
}

/* TOC links */
.vector-toc a,
.vector-toc-link {
color: #0054A6 !important;
}

/* Sidebar menu links */
.vector-main-menu a,
#p-categorytree-portlet a,
.CategoryTreeLabel,
.CategoryTreeLabel a {
color: #0054A6 !important;
}

/* Edit link bên cạnh heading */
.mw-parser-output h2 .mw-editsection a {
color: #0054A6 !important;
}

/* Breadcrumb */
.custom-breadcrumb a {
color: #0054A6 !important;
}

MediaWiki:Common.css

2026-05-25T07:40:54Z

2026-05-22T01:10:31Z

Admin: Update

Template:CategoryBlock

2026-05-22T01:09:31Z

Admin: Update

<div class="category-block">
<div class="category-block-header">
<span class="category-block-icon">[[File:{{{icon|Icon-default.svg}}}|56px|link={{{link|{{{title}}}}}}]]</span>
<span class="category-block-title">'''[[{{{link|{{{title}}}}}}|{{{title}}}]]'''</span>
</div>
<div class="category-block-desc">{{{desc}}}</div>
</div>

Main Page

2026-05-21T11:07:37Z

Admin: Update

__NOTOC__
'''Welcome to the SOJI Electronics Wiki!'''

Find technical resources, product documentation, configuration guides, and compatibility information for all SOJI Electronics products below, or use the search bar to find specific information.

<div class="main-page-products-grid">
{{#dpl:
|category=Products
|namespace=main
|mode=userformat
|format=,{{MainPageProductCard{{!}}name=%PAGE%}},,
|ordermethod=title
|order=ascending
|allowcachedresults=false
}}
</div>

----

<div class="categories-list categories-list-4">

{{CategoryBlock
| id = info
| link = General Information
| icon = Icon-info.svg
| title = General Information
| desc = Reference documentation, integration guides, protocol descriptions, and platform compatibility.
| products =
* [[LIGO Air Configuration|BLE Protocol Integration]] — Advertising message format
* [[Compatibility|Platform Compatibility]] — Tested telematics platforms
* Firmware version history
* Product Change Notifications (PCN)
}}

{{CategoryBlock
| id = app
| link = Software & Applications
| icon = Icon-software.svg
| title = Software & Applications
| desc = Mobile applications, configurator tools, and integration software for managing SOJI devices.
| products =
* [[Software & Applications|LIGO BLE Configurator]] — iOS / Android
* Firmware downloads
* Protocol integration libraries
}}

{{CategoryBlock
| id = accessories
| link = Accessories
| icon = Icon-accessories.svg
| title = Accessories
| desc = Adapters, cables, mounting kits, and signal boosters for SOJI sensor systems.
| products =
* [[Accessories|LIGO AIR Adapter]] — BLE signal booster for receiver
* Cable accessories
* Mounting kits
* Spare parts
}}

{{CategoryBlock
| id = faq
| link = Frequently Asked Questions - FAQ
| icon = Icon-faq.svg
| title = FAQ
| desc = Common questions about installation, configuration, troubleshooting, and product compatibility.
| products =
* [[Frequently Asked Questions - FAQ|All FAQ topics]]
* Installation FAQ
* Configuration FAQ
* Troubleshooting FAQ
* Compatibility FAQ
}}

</div>

----

''© 2026 SOJI Electronics JSC. All Rights Reserved.''

Main Page

2026-05-21T11:05:48Z

Admin: Update

__NOTOC__
'''Welcome to the SOJI Electronics Wiki!'''

Find technical resources, product documentation, configuration guides, and compatibility information for all SOJI Electronics products below, or use the search bar to find specific information.

<div class="main-page-products-grid">
{{#dpl:
|category=Products
|namespace=main
|mode=userformat
|format=,{{MainPageProductCard{{!}}name=%PAGE%}},,
|ordermethod=title
|order=ascending
}}
</div>

----

<div class="categories-list categories-list-4">

{{CategoryBlock
| id = info
| link = General Information
| icon = Icon-info.svg
| title = General Information
| desc = Reference documentation, integration guides, protocol descriptions, and platform compatibility.
| products =
* [[LIGO Air Configuration|BLE Protocol Integration]] — Advertising message format
* [[Compatibility|Platform Compatibility]] — Tested telematics platforms
* Firmware version history
* Product Change Notifications (PCN)
}}

{{CategoryBlock
| id = app
| link = Software & Applications
| icon = Icon-software.svg
| title = Software & Applications
| desc = Mobile applications, configurator tools, and integration software for managing SOJI devices.
| products =
* [[Software & Applications|LIGO BLE Configurator]] — iOS / Android
* Firmware downloads
* Protocol integration libraries
}}

{{CategoryBlock
| id = accessories
| link = Accessories
| icon = Icon-accessories.svg
| title = Accessories
| desc = Adapters, cables, mounting kits, and signal boosters for SOJI sensor systems.
| products =
* [[Accessories|LIGO AIR Adapter]] — BLE signal booster for receiver
* Cable accessories
* Mounting kits
* Spare parts
}}

{{CategoryBlock
| id = faq
| link = Frequently Asked Questions - FAQ
| icon = Icon-faq.svg
| title = FAQ
| desc = Common questions about installation, configuration, troubleshooting, and product compatibility.
| products =
* [[Frequently Asked Questions - FAQ|All FAQ topics]]
* Installation FAQ
* Configuration FAQ
* Troubleshooting FAQ
* Compatibility FAQ
}}

</div>

----

''© 2026 SOJI Electronics JSC. All Rights Reserved.''

2026-05-21T10:34:30Z

Admin: Update color footer

/* 1. Layout dòng Item */
#p-categorytree-portlet .CategoryTreeItem {
position: relative !important;
display: block !important;
padding: 10px 30px 10px 0 !important;
border-bottom: 1px solid #e7eaf0 !important;
}

/* 2. Cấu hình Bullet chứa mũi tên */
#p-categorytree-portlet .CategoryTreeBullet {
position: absolute !important;
right: 0 !important; /* Đẩy sát lề phải */
top: 50% !important;
transform: translateY(-50%) !important;
margin: 0 !important;
width: 24px !important;
height: 24px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}

/* Chúng ta dùng visibility: hidden để giữ chức năng click nhưng ẩn hình tam giác */
#p-categorytree-portlet .CategoryTreeToggle {
visibility: hidden !important;
position: relative !important;
display: block !important;
width: 100% !important;
height: 100% !important;
text-decoration: none !important;
}

/* 4. TỰ VẼ MŨI TÊN MẢNH (Chevron) */
/* Dùng visibility: visible để hiện lại mũi tên mảnh chúng ta tự vẽ */
#p-categorytree-portlet .CategoryTreeToggle::after {
content: '' !important;
visibility: visible !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
width: 8px !important;
height: 8px !important;
border-right: 1.5px solid #4a5fd2 !important; /* Độ mảnh và màu xanh Teltonika */
border-bottom: 1.5px solid #4a5fd2 !important;
box-sizing: border-box !important;
/* Mặc định xoay sang phải > */
transform: translate(-70%, -50%) rotate(45deg) !important;
transition: transform 0.2s ease !important;
}

/* 5. XOAY MŨI TÊN KHI MỞ (Trạng thái Expanded) */
/* MediaWiki khi mở sẽ đổi text từ "►" sang "▼" hoặc đổi onclick,
CSS dưới đây bắt theo cấu trúc chung của CategoryTree */
#p-categorytree-portlet .CategoryTreeToggle[onclick*="collapse"]::after,
#p-categorytree-portlet .CategoryTreeToggle-expanded::after {
transform: translate(-50%, -75%) rotate(45deg) !important;
}

/* 6. ẨN CÁC DẤU CHẤM TRANG LÁ */
#p-categorytree-portlet .CategoryTreePageBullet,
#p-categorytree-portlet .CategoryTreeEmptyBullet {
display: none !important;
}

/* 7. Kiểu chữ nhãn (Label) */
#p-categorytree-portlet .CategoryTreeLabel a {
color: #4a5fd2 !important;
font-size: 14px !important;
text-decoration: none !important;
font-weight: 400 !important;
}

/* Thụt lề cho các cấp con */
#p-categorytree-portlet .CategoryTreeChildren {
padding-left: 20px !important;
margin: 0 !important;
}

/* Simple top header style */
body.skin-vector-2022 .vector-header-container,
body.skin-vector-2022 .vector-header,
body.skin-vector-2022 .vector-sticky-header-container,
body.skin-vector-2022 .vector-sticky-header {
background-color: #B5C2CD !important;
border-bottom: 0 !important;
box-shadow: none !important;
}

body.skin-vector-2022 .vector-header {
min-height: 72px !important;
padding: 0 24px !important;
max-width: none !important;
}

body.skin-vector-2022 .mw-logo {
min-height: 72px !important;
display: flex !important;
align-items: center !important;
text-decoration: none !important;
}

body.skin-vector-2022 .mw-logo-wordmark {
color: #fff !important;
font-size: 24px !important;
font-weight: 700 !important;
line-height: 1 !important;
}

body.skin-vector-2022 .mw-logo-icon {
display: none !important;
}

body.skin-vector-2022 #vector-main-menu-dropdown-label,
body.skin-vector-2022 #vector-main-menu-dropdown-label .vector-icon,
body.skin-vector-2022 .vector-user-links a,
body.skin-vector-2022 #lang-switcher,
body.skin-vector-2022 #lang-select {
color: #fff !important;
}

body.skin-vector-2022 #lang-select {
background: transparent !important;
border: 0 !important;
}

/* language select: đóng màu trắng, mở ra chữ đen nền trắng */
body.skin-vector-2022 #lang-select {
color: #fff !important;
background: transparent !important;
border: 0 !important;
}

body.skin-vector-2022 #lang-select option {
color: #202122 !important;
background: #fff !important;
}

body.skin-vector-2022 .vector-dropdown-content a,
body.skin-vector-2022 .vector-dropdown-content a span,
body.skin-vector-2022 .vector-dropdown-content .vector-icon {
color: #202122 !important;
fill: #202122 !important;
}

body.skin-vector-2022 .mw-logo-wordmark,
body.skin-vector-2022 #vector-main-menu-dropdown-label,
body.skin-vector-2022 #vector-main-menu-dropdown-label .vector-icon,
body.skin-vector-2022 .vector-header .vector-user-links-main > div > .vector-menu-content a,
body.skin-vector-2022 .vector-header #p-vector-user-menu-overflow a,
body.skin-vector-2022 .vector-header #pt-login-2 a,
body.skin-vector-2022 #lang-select {
color: #1F2A36 !important;
}

/* =========================
SOJI CUSTOM FOOTER
========================= */

.soji-site-footer {
background: #4a5468;
color: #ffffff;
padding: 50px 0 20px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
box-sizing: border-box;
}

/* Sticky footer: ép footer xuống đáy viewport khi page ngắn */
html, body {
min-height: 100vh;
}
body.has-soji-footer {
display: flex;
flex-direction: column;
background: #f8f9fa !important;
}
body.has-soji-footer > .mw-page-container,
body.has-soji-footer > #mw-page-base,
body.has-soji-footer > main {
flex: 1 0 auto;
}
body.has-soji-footer .soji-site-footer {
flex-shrink: 0;
margin-top: auto;
}

/* Shell: full ngang màn hình, chỉ chừa padding 2 bên */
.soji-footer-shell {
max-width: 100%;
margin: 0 auto;
padding: 0 80px;
box-sizing: border-box;
}

.soji-footer-grid {
display: grid;
grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
gap: 60px;
align-items: start;
}

.soji-footer-company-name {
color: #ffffff;
font-size: 16px;
font-weight: 700;
margin: 0 0 20px;
border: none;
padding: 0;
}

.soji-footer-contact-list {
list-style: none;
margin: 0;
padding: 0;
}

.soji-footer-contact {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 14px;
font-size: 13px;
line-height: 1.5;
color: #ffffff;
}

.soji-footer-icon {
flex: 0 0 18px;
width: 18px;
height: 18px;
color: #ffffff;
display: inline-flex;
align-items: center;
justify-content: center;
}

.soji-footer-icon svg {
width: 100%;
height: 100%;
}

.soji-footer-col h2,
.soji-footer-subscribe-col h2 {
color: #ffffff;
font-size: 14px;
font-weight: 700;
margin: 0 0 20px;
border: none;
padding: 0;
text-transform: uppercase;
letter-spacing: 0.5px;
}

.soji-footer-col ul {
list-style: none;
margin: 0;
padding: 0;
}

.soji-footer-col li {
margin-bottom: 12px;
}

.soji-footer-link {
color: #ffffff;
text-decoration: none;
font-size: 14px;
transition: color 0.2s;
}

.soji-footer-link:hover {
color: #ffffff;
text-decoration: none;
}

.soji-footer-subscribe-form {
margin-bottom: 20px;
}

.soji-footer-subscribe-input {
width: 100%;
background: transparent;
border: 1px solid #ffffff;
padding: 12px 14px;
color: #fff;
font-size: 14px;
border-radius: 4px;
margin-bottom: 12px;
box-sizing: border-box;
}

.soji-footer-subscribe-input::placeholder {
color: rgba(255, 255, 255, 0.7);
}

.soji-footer-subscribe-input:focus {
outline: none;
border-color: #ffffff;
}

.soji-footer-subscribe-btn {
width: 100%;
background: #ffffff;
color: #4a5468;
border: none;
padding: 12px;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
border-radius: 4px;
cursor: pointer;
transition: background 0.2s;
}

.soji-footer-subscribe-btn:hover {
background: #d99425;
}

.soji-footer-social {
display: flex;
gap: 14px;
margin-top: 4px;
}

.soji-footer-social-item {
width: 34px;
height: 34px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.85);
color: #4a5468;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: transform 0.2s;
}

.soji-footer-social-item:hover {
background: #ffffff;
transform: translateY(-2px);
text-decoration: none;
}

.soji-footer-social-item .soji-footer-icon {
width: 20px;
height: 20px;
color: #2d3338;
}

.soji-footer-copy {
margin-top: 40px;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.15);
text-align: center;
color: rgba(255, 255, 255, 0.7);
font-size: 12px;
}

@media (max-width: 1200px) {
.soji-footer-shell {
padding: 0 40px;
}
.soji-footer-grid {
gap: 40px;
}
}

@media (max-width: 900px) {
.soji-footer-grid {
grid-template-columns: 1fr 1fr;
gap: 30px;
}
.soji-footer-shell {
padding: 0 25px;
}
}

@media (max-width: 600px) {
.soji-footer-grid {
grid-template-columns: 1fr;
}
}

/* Ẩn MediaWiki standard footer khi đã có SOJI footer */
body.has-soji-footer #footer,
body.has-soji-footer .mw-footer {
display: none !important;
}

/* =========================
BREADCRUMB
========================= */

.custom-breadcrumb {
padding: 8px 0 12px 0;
font-size: 0.9em;
color: #54595d;
border-bottom: 1px solid #eaecf0;
margin-bottom: 1em;
}
.custom-breadcrumb a { color: #3366cc; text-decoration: none; }
.custom-breadcrumb a:hover { text-decoration: underline; }

/* ============================================ */
/* Wikitable: zebra rows (default style) */
/* ============================================ */

/* Row chẵn — màu nền xám nhạt */
.wikitable > tr:nth-child(even) > td,
.wikitable > * > tr:nth-child(even) > td {
background-color: #f5f7fa;
}

/* Row lẻ — màu trắng */
.wikitable > tr:nth-child(odd) > td,
.wikitable > * > tr:nth-child(odd) > td {
background-color: #ffffff;
}

/* Header giữ style mặc định */
.wikitable > tr > th,
.wikitable > * > tr > th {
background-color: #eaecf0;
font-weight: 600;
}

/* Hover row — highlight nhẹ */
.wikitable > tr:hover > td,
.wikitable > * > tr:hover > td {
background-color: #eaf3ff;
transition: background-color 0.15s ease;
}

/* Border row nhẹ hơn cho cảm giác clean */
.wikitable td,
.wikitable th {
border: 1px solid #e1e4e8;
padding: 8px 12px;
}

/* PDF */
.pdf-icon {
font-size: 0.85em;
opacity: 0.6;
margin-left: 2px;
}
a:hover .pdf-icon {
opacity: 1;
}

/* ============================================ */
/* Main Page — Teltonika-style (no card borders)*/
/* ============================================ */

.categories-list {
display: grid;
grid-template-columns: repeat(4, 1fr); /* 4 cột, gọn như Teltonika */
gap: 32px 24px;
margin: 36px 0;
}

/* Grid 3 cột cho Products */
.categories-list-3 {
grid-template-columns: repeat(3, 1fr) !important;
}

/* Grid 4 cột cho Information */
.categories-list-4 {
grid-template-columns: repeat(4, 1fr) !important;
}

/* Responsive */
@media (max-width: 1200px) {
.categories-list-3 {
grid-template-columns: repeat(2, 1fr) !important;
}
.categories-list-4 {
grid-template-columns: repeat(2, 1fr) !important;
}
}

@media (max-width: 700px) {
.categories-list-3,
.categories-list-4 {
grid-template-columns: 1fr !important;
}
}

/* Style cho separator <hr> giữa 2 section */
.mw-parser-output > hr {
border: 0;
border-top: 1px solid #eaecf0;
margin: 32px 0;
}

/* Title link không underline */
.category-block-title a {
color: #1976d2 !important;
text-decoration: none !important;
}

.category-block-title a:hover {
text-decoration: underline !important;
}

.category-block {
/* ❌ KHÔNG có border, background, shadow */
padding: 0;
background: transparent;
border: none;
text-align: center;
}

/* Header: icon trên, title dưới */
.category-block-header {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 10px !important;
margin-bottom: 8px !important;
}

/* Icon đứng trần — không frame xám */
.category-block-icon {
background: transparent !important;
padding: 0 !important;
width: auto !important;
height: auto !important;
box-shadow: none !important;
}

.category-block-icon img {
height: 72px !important;
width: auto !important;
}

.category-block-title {
font-size: 1.05em !important;
color: #1976d2 !important;
font-weight: 600 !important;
margin-top: 4px !important;
display: block !important;
}

.category-block-desc {
color: #54595d;
font-size: 0.88em;
margin: 6px 8px 12px;
line-height: 1.5;
min-height: 60px;
}

.category-block-toggle {
margin-top: 8px;
padding-top: 0;
border-top: none;
}

/* Toggle text: xanh + không đậm */
.category-block-toggle span[class*="mw-customtoggle-cb-"] {
cursor: pointer;
color: #1976d2 !important;
font-weight: 400 !important; /* không đậm */
font-size: 0.95em;
user-select: none;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
}

.category-block-toggle span[class*="mw-customtoggle-cb-"]:hover {
color: #0d47a1 !important;
text-decoration: underline;
}

.category-block-toggle span[class*="mw-customtoggle-cb-"]:hover .toggle-arrow {
border-color: #0d47a1;
}

/* Chevron arrow — mặc định trỏ xuống (collapsed) */
.toggle-arrow {
display: inline-block;
width: 7px;
height: 7px;
border-right: 2px solid #1976d2;
border-bottom: 2px solid #1976d2;
transform: rotate(45deg); /* trỏ xuống ⌄ */
transition: transform 0.25s ease;
margin-top: -4px;
}

/* Khi expanded — xoay lên ⌃ */
.category-block-toggle span[class*="mw-customtoggle-cb-"].is-expanded .toggle-arrow {
transform: rotate(-135deg); /* trỏ lên */
margin-top: 2px;
}

.category-block-toggle span[class*="mw-customtoggle-cb-"]:hover {
color: #000 !important;
text-decoration: underline;
}

.category-block-products {
margin-top: 14px;
padding-top: 12px;
border-top: 1px dashed #e1e4e8;
text-align: left;
}

.category-block-products ul {
margin: 6px 0;
padding-left: 20px;
}

.category-block-products li {
margin: 5px 0;
font-size: 0.9em;
line-height: 1.5;
}

.category-block-products .mw-collapsible-toggle,
.category-block-products .mw-collapsible-toggle-default,
.category-block-products a.mw-collapsible-text {
display: none !important;
}

/* Responsive */
@media (max-width: 1200px) {
.categories-list {
grid-template-columns: repeat(2, 1fr);
}
}

@media (max-width: 600px) {
.categories-list {
grid-template-columns: 1fr;
}
.category-block-desc {
min-height: auto;
}
}

/* ============================================ */
/* Document download/view buttons */
/* ============================================ */

a.btn-download {
display: inline-block;
padding: 4px 10px;
background: #1976d2;
color: #fff !important;
border-radius: 4px;
font-size: 0.88em;
font-weight: 500;
text-decoration: none !important;
transition: background 0.15s ease;
}

a.btn-download:hover {
background: #0d47a1;
color: #fff !important;
text-decoration: none !important;
}

/* Style cho link View (không phải button, chỉ là link icon) */
a[href*=".pdf"][target="_blank"]:not(.btn-download) {
color: #1976d2;
text-decoration: none;
font-weight: 500;
font-size: 0.92em;
}

a[href*=".pdf"][target="_blank"]:not(.btn-download):hover {
text-decoration: underline;
}

/* ============================================ */
/* Global heading styles */
/* ============================================ */

/* HEADING (H2) — to, đậm, xanh */
.mw-parser-output h2 {
font-size: 1.55em !important;
font-weight: 700 !important;
color: #1976d2 !important;
margin: 1.3em 0 0.6em !important;
padding-bottom: 0.3em !important;
border-bottom: 1px solid #eaecf0 !important;
line-height: 1.3 !important;
}

/* SUB-HEADING 1 (H3) — to, không đậm */
.mw-parser-output h3 {
font-size: 1.35em !important;
font-weight: 400 !important;
color: #202122 !important;
margin: 1em 0 0.4em !important;
padding-bottom: 0 !important;
border-bottom: none !important;
line-height: 1.3 !important;
}

/* SUB-HEADING 2 (H4) — to vừa, không đậm */
.mw-parser-output h4 {
font-size: 1.25em !important;
font-weight: 400 !important;
color: #202122 !important;
margin: 0.9em 0 0.35em !important;
padding-bottom: 0 !important;
border-bottom: none !important;
line-height: 1.3 !important;
font-style: normal !important;
}

/* SUB-HEADING 3 (H5) — không đậm */
.mw-parser-output h5 {
font-size: 1.15em !important;
font-weight: 400 !important;
color: #202122 !important;
margin: 0.85em 0 0.3em !important;
padding-bottom: 0 !important;
border-bottom: none !important;
line-height: 1.3 !important;
font-style: normal !important;
}

/* SUB-HEADING 4 (H6) — không đậm, không nghiêng */
.mw-parser-output h6 {
font-size: 1.05em !important;
font-weight: 400 !important;
color: #202122 !important;
margin: 0.8em 0 0.3em !important;
padding-bottom: 0 !important;
border-bottom: none !important;
line-height: 1.3 !important;
font-style: normal !important; /* override Vector default italic */
}

/* Edit link bên cạnh heading */
.mw-parser-output .mw-editsection,
.mw-parser-output .mw-editsection a {
font-size: 0.6em !important;
font-weight: 400 !important;
color: #54595d !important;
}

.mw-parser-output h2 .mw-editsection a {
color: #1976d2 !important;
}

/* ============================================ */
/* TOC: collapse sub-headings by default */
/* ============================================ */

/* Ẩn mọi sub-list trong TOC mặc định */
.vector-toc .vector-toc-list .vector-toc-list-item .vector-toc-list {
display: none;
}

/* Hiển thị khi item được expand */
.vector-toc .vector-toc-list-item-expanded > .vector-toc-list,
.vector-toc-toggle[aria-expanded="true"] ~ .vector-toc-list {
display: block;
}

/* Hiển thị mũi tên ▶ rõ ràng hơn */
.vector-toc-toggle {
opacity: 0.7;
transition: opacity 0.15s;
}

.vector-toc-toggle:hover {
opacity: 1;
}

body, .mw-parser-output, h1, h2, h3, h4, h5, h6 {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif !important;
}

/* Icon SVG render crisp */
.category-block-icon img,
img[src*="Icon-"] {
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}

/* ============================================ */
/* Safety callout tables */
/* ============================================ */

.wikitable.danger,
.wikitable.warning,
.wikitable.caution,
.wikitable.notice {
border-collapse: collapse;
border: none;
border-left-width: 4px;
border-left-style: solid;
margin: 16px 0;
width: 100%;
border-radius: 0 4px 4px 0;
overflow: hidden;
}

.wikitable.danger th,
.wikitable.warning th,
.wikitable.caution th,
.wikitable.notice th {
text-align: left !important;
font-weight: 700 !important;
padding: 10px 16px !important;
border: none !important;
}

.wikitable.danger td,
.wikitable.warning td,
.wikitable.caution td,
.wikitable.notice td {
padding: 12px 16px !important;
border: none !important;
line-height: 1.55;
}

/* DANGER — Red */
.wikitable.danger {
border-left-color: #d32f2f;
background: #ffebee;
}
.wikitable.danger th {
background: #ffcdd2 !important;
color: #b71c1c !important;
}

/* WARNING — Orange */
.wikitable.warning {
border-left-color: #f57c00;
background: #fff3e0;
}
.wikitable.warning th {
background: #ffe0b2 !important;
color: #e65100 !important;
}

/* CAUTION — Yellow */
.wikitable.caution {
border-left-color: #f9a825;
background: #fffde7;
}
.wikitable.caution th {
background: #fff9c4 !important;
color: #f57f17 !important;
}

/* NOTICE — Blue */
.wikitable.notice {
border-left-color: #1976d2;
background: #e3f2fd;
}
.wikitable.notice th {
background: #bbdefb !important;
color: #0d47a1 !important;
}

/* Pending Reviews Badge */
#pending-reviews-badge {
transition: background 0.2s ease, transform 0.15s ease;
}

#pending-reviews-badge:hover {
background: #ffe0b2 !important;
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(229, 81, 0, 0.15);
}

#pending-reviews-badge a:hover {
text-decoration: none !important;
}

@keyframes pendingPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(229, 81, 0, 0.4); }
50% { box-shadow: 0 0 0 4px rgba(229, 81, 0, 0); }
}

#pending-reviews-badge {
animation: pendingPulse 2s infinite;
}

/* Download table */
.doc-downloads {
border-collapse: collapse !important;
background: transparent !important;
border: none !important;
margin: 12px 0 !important;
}

.doc-downloads td {
border: none !important;
padding: 6px 12px 6px 0 !important;
background: transparent !important;
vertical-align: middle;
}

.doc-downloads td:first-child {
font-weight: 500;
}

.doc-downloads td:last-child {
color: #54595d;
font-size: 0.9em;
}

.doc-downloads a {
color: #0054A6;
text-decoration: none;
}

.doc-downloads a:hover {
text-decoration: underline;
}

/* ===== PCN styles ===== */
.pcn-page-title {
margin: 0 0 12px;
padding: 14px 18px;
background: linear-gradient(135deg, #4b5f78 0%, #5d728e 100%);
color: #fff;
border-radius: 8px;
font-weight: 700;
}

.pcn-intro,
.pcn-note,
.pcn-section-card {
border: 1px solid #d9e2ec;
border-radius: 8px;
background: #fff;
padding: 14px 16px;
margin: 0 0 16px;
}

.pcn-intro {
background: #f7f9fc;
}

.pcn-note {
background: #f4f8fd;
border-left: 4px solid #5b84b1;
}

.pcn-section-title {
margin: 20px 0 10px;
padding: 8px 12px;
background: #eef3f8;
border-left: 4px solid #5d728e;
font-weight: 700;
color: #243447;
}

.pcn-table {
width: 100%;
border-collapse: collapse;
margin: 0 0 18px;
font-size: 14px;
}

.pcn-table th,
.pcn-table td {
border: 1px solid #d8e0ea;
padding: 8px 10px;
vertical-align: top;
}

.pcn-table th {
background: #eef3f8;
color: #243447;
font-weight: 700;
text-align: left;
}

.pcn-table tr:nth-child(even) td {
background: #fafbfd;
}

.pcn-status {
display: inline-block;
min-width: 72px;
padding: 3px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.02em;
}

.pcn-status-draft {
background: #eef1f5;
color: #51606f;
}

.pcn-status-active {
background: #e8f4ec;
color: #1d6b3d;
}

.pcn-status-implemented {
background: #eaf1fb;
color: #285ea8;
}

.pcn-status-obsolete {
background: #f7eaea;
color: #a33d3d;
}

.pcn-meta {
display: grid;
grid-template-columns: repeat(2, minmax(220px, 1fr));
gap: 12px 18px;
margin: 0 0 16px;
}

.pcn-meta-item {
padding: 10px 12px;
border: 1px solid #d9e2ec;
border-radius: 8px;
background: #fff;
}

.pcn-meta-label {
display: block;
margin-bottom: 4px;
color: #5c6b7a;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
}

.pcn-meta-value {
color: #1f2d3a;
font-weight: 600;
}

@media (max-width: 720px) {
.pcn-meta {
grid-template-columns: 1fr;
}
}

/* ============================================================
* Highlight bảng row khi được focus qua URL anchor (#fw-v1.2.0)
* ============================================================ */

/* Smooth scroll khi click anchor link */
html {
scroll-behavior: smooth;
}

/* Offset top để row không bị che bởi sticky header Vector 2022 */
.wikitable tr[id] {
scroll-margin-top: 80px;
}

/* Highlight row khi được target */
.wikitable tr:target {
background-color: #fff8dc !important;
box-shadow: inset 4px 0 0 #FFC107, 0 0 12px rgba(255, 193, 7, 0.4);
animation: highlightPulse 1.5s ease-out 1;
}

/* Highlight cell trong row được target */
.wikitable tr:target > td {
background-color: #fff8dc !important;
transition: background-color 0.3s;
}

/* Animation pulse khi vừa scroll tới */
@keyframes highlightPulse {
0% { background-color: #FFD54F !important; }
50% { background-color: #FFECB3 !important; }
100% { background-color: #fff8dc !important; }
}

/* ============================================================
* Placeholder text styling — used by {{Placeholder|...}}
* ============================================================ */

.soji-placeholder {
color: #888 !important;
font-style: italic !important;
background: #fffbe6 !important;
padding: 3px 8px !important;
border-left: 3px solid #ffc107 !important;
display: inline-block !important;
border-radius: 0 3px 3px 0;
transition: opacity 0.2s;
}

.soji-placeholder:hover {
opacity: 0.8;
}

/* Print mode: ẩn placeholder khỏi PDF/print */
@media print {
.soji-placeholder {
display: none !important;
}
}

/* ============================================================
* Version History Row Action Toolbar
* ============================================================ */

.fw-row-toolbar {
position: absolute;
top: 4px;
right: -2px;
display: none;
background: white;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
padding: 4px;
z-index: 10;
white-space: nowrap;
}

.fw-version-history tr:hover .fw-row-toolbar,
.fw-version-history tr.fw-row-active .fw-row-toolbar {
display: inline-block;
}

.fw-btn {
padding: 4px 10px;
margin: 0 2px;
border: 1px solid #ccc;
border-radius: 3px;
background: #fff;
cursor: pointer;
font-size: 0.85em;
color: #333;
transition: all 0.15s;
}

.fw-btn:hover {
background: #0054A6;
color: white;
border-color: #003d7a;
}

.fw-btn-edit:hover { background: #2196F3; border-color: #1976D2; }
.fw-btn-add-above:hover { background: #4CAF50; border-color: #388E3C; }
.fw-btn-add-below:hover { background: #4CAF50; border-color: #388E3C; }

/* Row đang hover được nhấn nhẹ */
.fw-version-history tr:hover {
background-color: #f0f8ff !important;
cursor: default;
}

/* Print mode: ẩn toolbar */
@media print {
.fw-row-toolbar {
display: none !important;
}
}

/* ============================================================
* Dim class — fade any content (text, image, table, link, ...)
* Usage: <div class="dim">content</div> or <span class="dim">text</span>
* ============================================================ */
.dim {
opacity: 0.4;
color: #000;
transition: opacity 0.25s ease;
}
@media print {
.dim {
display: none !important;
}
}

/* MultiBoilerplate dropdown styling */
fieldset.boilerplate-fieldset,
#multiboilerplate-fieldset {
border: 1px solid #c8ccd1;
border-radius: 4px;
padding: 12px 16px;
background: #f8f9fa;
margin-bottom: 16px;
}

fieldset.boilerplate-fieldset legend,
#multiboilerplate-fieldset legend {
font-weight: bold;
color: #0054A6;
padding: 0 8px;
}

select[name="boilerplate"],
#multiboilerplate-select,
#boilerplate-select {
padding: 6px 12px;
border: 1px solid #c8ccd1;
border-radius: 3px;
background: white;
cursor: pointer;
min-width: 250px;
font-size: 0.95em;
transition: border-color 0.2s, box-shadow 0.2s;
}

select[name="boilerplate"]:hover,
#multiboilerplate-select:hover {
border-color: #0054A6;
box-shadow: 0 0 0 2px rgba(0, 84, 166, 0.15);
}

.mb-loading-indicator {
animation: pulse 1s ease-in-out infinite;
}

@keyframes pulse {
0%, 100% { opacity: 0.5; }
50% { opacity: 1; }
}

/* Software card styling */
.software-card {
display: inline-block;
width: 240px;
padding: 16px;
margin: 10px;
border: 1px solid #c8ccd1;
border-radius: 8px;
background: #fff;
vertical-align: top;
text-align: center;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.software-card:hover {
transform: translateY(-3px);
box-shadow: 0 4px 12px rgba(0, 84, 166, 0.15);
border-color: #0054A6;
}

.software-card-image {
height: 120px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
}

.software-card-title {
font-weight: bold;
font-size: 1.05em;
margin-bottom: 8px;
}

.software-card-title a {
color: #0054A6 !important;
text-decoration: none;
}

.software-card-desc {
font-size: 0.85em;
color: #54595d;
line-height: 1.4;
}

.software-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px;
margin: 20px 0;
}

/* No-icon placeholder inside card */
.software-card-no-icon {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #888;
text-align: center;
font-size: 0.75em;
padding: 8px;
box-sizing: border-box;
background: #fafafa;
border: 2px dashed #c8ccd1;
border-radius: 4px;
}

.software-card-no-icon-emoji {
font-size: 2em;
color: #c8ccd1;
margin-bottom: 6px;
line-height: 1;
}

.software-card-no-icon-text {
line-height: 1.4;
}

.software-card-no-icon-text code {
background: #fff3cd;
color: #856404;
padding: 2px 6px;
border-radius: 3px;
font-size: 0.95em;
word-break: break-all;
display: inline-block;
margin-top: 2px;
}

/* Certifications page — cert cards */
.cert-card {
padding: 12px 16px;
margin: 10px 0;
border-radius: 6px;
border-left: 4px solid;
display: flex;
align-items: center;
gap: 8px;
font-size: 1em;
}

.cert-card-available {
background: #e8f5e9;
border-left-color: #4CAF50;
}

.cert-card-available::before {
content: "✅";
font-size: 1.2em;
}

.cert-card-missing {
background: #fff3cd;
border-left-color: #ffc107;
color: #856404;
}

.cert-card-missing::before {
content: "⚠";
font-size: 1.2em;
}

.cert-card code {
background: #fff;
padding: 2px 6px;
border-radius: 3px;
font-size: 0.9em;
border: 1px solid #c8ccd1;
}

/* ============================================================
* Sidebar category filter — CSS-first to prevent FOUC flash
* Hide non-whitelisted sub-categories before JS runs
* ============================================================ */

/* Hide all sub-categories trong CategoryTree first */
#p-categorytree-portlet .CategoryTreeChildren .CategoryTreeItem {
display: none;
}

/* Show ONLY whitelisted suffixes — using attribute selectors */
#p-categorytree-portlet .CategoryTreeChildren .CategoryTreeItem:has(a[href*="Datasheet"]),
#p-categorytree-portlet .CategoryTreeChildren .CategoryTreeItem:has(a[href*="User_Guide"]),
#p-categorytree-portlet .CategoryTreeChildren .CategoryTreeItem:has(a[href*="Video"]) {
display: list-item;
}

/* Backup: hide known bad items explicitly */
#p-categorytree-portlet a[href*="Product_Change_Notifications"],
#p-categorytree-portlet a[href*="Firmware_Changelog"],
#p-categorytree-portlet a[href*="Promotional_Material"],
#p-categorytree-portlet a[href*="Certifications"],
#p-categorytree-portlet a[href*="Certification_%26_Approvals"] {
display: none !important;
}

#p-categorytree-portlet li:has(> a[href*="Product_Change_Notifications"]),
#p-categorytree-portlet li:has(> a[href*="Firmware_Changelog"]),
#p-categorytree-portlet li:has(> a[href*="Promotional_Material"]),
#p-categorytree-portlet li:has(> a[href*="Certifications"]),
#p-categorytree-portlet li:has(> a[href*="Certification_%26_Approvals"]) {
display: none !important;
}

/* Smooth transition khi sidebar render */
#mw-panel,
#p-categorytree-portlet {
transition: opacity 0.15s ease;
}
/* Prevent sidebar layout shift during navigation */
#mw-panel,
#vector-main-menu-pinned-container,
#p-categorytree-portlet {
contain: layout style;
min-height: 1px;
}

/* Skeleton loader for sidebar during load */
.client-nojs #p-categorytree-portlet,
body.mw-special #p-categorytree-portlet {
/* No loading state on special pages */
}

/* Protocol link only — make it look like internal links, no icon */
.protocol-link a {
color: #0645ad !important;
background: none !important;
background-image: none !important;
padding-right: 0 !important;
padding-left: 0 !important;
font-weight: normal !important;
text-decoration: none !important;
}

.protocol-link a:visited {
color: #0645ad !important;
}

.protocol-link a:hover {
text-decoration: underline !important;
}

.protocol-link a::after,
.protocol-link a::before {
content: none !important;
display: none !important;
background-image: none !important;
}

.protocol-link img,
.protocol-link a + img,
.protocol-link a ~ img {
display: none !important;
}

/* =========================
FORCE PAGE CONTAINER FULL VIEWPORT WIDTH
========================= */
.mw-page-container,
.mw-page-container-inner {
max-width: none !important;
width: 100% !important;
}

/* Đảm bảo content inside cũng stretch theo */
.mw-content-container,
.mw-body {
max-width: none !important;
}

/* Nhưng cap text-heavy content để dễ đọc (text quá dài 1 dòng khó đọc trên màn hình to) */
.mw-body-content .mw-parser-output {
max-width: 1400px;
margin: 0 auto;
}

/* =========================
DOWNLOAD PDF BUTTON
========================= */
.soji-pdf-btn {
background: #f0a830;
color: #2d3338;
border: none;
padding: 8px 16px;
border-radius: 4px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
margin-left: auto;
vertical-align: middle;
display: inline-flex;
align-items: center;
transition: background 0.2s;
font-family: inherit;
}
.mw-first-heading,
#firstHeading,
h1.firstHeading {
display: flex !important;
align-items: center;
flex-wrap: wrap;
gap: 12px;
}
.soji-pdf-btn:hover {
background: #d99425;
}
.soji-pdf-btn:focus {
outline: 2px solid #2c5aa0;
outline-offset: 2px;
}

/* =========================
PRINT / PDF EXPORT STYLES
Applied when user clicks button → window.print()
========================= */
@media print {
/* Ẩn UI elements không thuộc nội dung */
.mw-sidebar,
#mw-panel,
.mw-header,
#mw-head,
#mw-page-base,
.mw-portlet-tb,
.mw-portlet-lang,
.vector-page-toolbar,
.vector-menu-tabs,
.vector-pinnable-header,
.vector-column-start,
.vector-column-end,
.vector-sticky-header,
.vector-header-container,
.mw-table-of-contents-container,
.soji-site-footer,
#footer,
.mw-footer,
.mw-footer-container,
.soji-pdf-btn,
.printfooter,
.mw-editsection,
#catlinks,
.mw-jump-link,
.mw-indicators,
.custom-breadcrumb,
#toc .toctogglecheckbox,
.mw-cite-backlink,
.noprint {
display: none !important;
}

/* Reset layout cho clean print */
html, body {
margin: 0 !important;
padding: 0 !important;
background: white !important;
color: black !important;
font-size: 11pt;
line-height: 1.5;
overflow: visible !important;
}

.mw-page-container,
.mw-page-container-inner,
.mw-content-container,
.mw-body,
.mw-body-content,
.mw-parser-output {
max-width: 100% !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
background: white !important;
box-shadow: none !important;
}

/* Heading hierarchy — h1 > h2 > h3 */
.mw-first-heading, #firstHeading, h1.firstHeading {
font-size: 24pt !important;
font-weight: 700 !important;
border-bottom: 2px solid #2c5aa0;
padding-bottom: 8px;
margin-bottom: 20px;
color: #2c5aa0 !important;
}

.mw-body-content h2,
.mw-parser-output h2,
div.mw-heading2 h2,
h2 {
font-size: 18pt !important;
font-weight: 600 !important;
line-height: 1.3 !important;
margin: 0 !important;
padding: 0 !important;
border: none !important; /* ← bỏ border ở h2 */
color: #2c5aa0 !important;
}

/* Wrapper mw-heading2 có border xanh đậm */
div.mw-heading2,
.mw-heading.mw-heading2 {
border-bottom: 0.75px solid #2c5aa0 !important; /* ← xanh, dày 2px */
padding-bottom: 4pt !important;
margin-top: 14pt !important;
margin-bottom: 8pt !important;
}

.mw-body-content h3,
.mw-parser-output h3,
div.mw-heading3,
div.mw-heading3 h3,
h3 {
font-size: 16pt !important;
margin-top: 12pt !important;
color: #444 !important;
}
h4 { font-size: 9pt !important; color: #555 !important; }

/* Tables: keep on same page, có border */
table {
page-break-inside: avoid;
border-collapse: collapse;
}
table.wikitable {
border: 1px solid #999;
}
table.wikitable th, table.wikitable td {
border: 1px solid #999;
padding: 6px 10px;
}
table.wikitable th {
background: #f5f5f5;
}

/* Images full visible */
img {
max-width: 100% !important;
height: auto !important;
page-break-inside: avoid;
}

/* Hiển thị URL của external link */
a[href^="http"]:not([href*="sojielectronics.com"])::after {
content: " (" attr(href) ")";
font-size: 9pt;
color: #666;
word-break: break-all;
}
a[href^="#"]::after, a[href^="/"]::after { content: ""; }
a {
color: #2c5aa0;
text-decoration: none;
}

/* Page break control */
ul, ol { page-break-inside: avoid; }
blockquote, figure, pre { page-break-inside: avoid; }
p { orphans: 3; widows: 3; }

/* Page settings — A4 với margin chuẩn */
@page {
margin: 1.5cm 2cm;
size: A4;
}

/* Header chữ nhỏ trên cùng mỗi trang */
body::before {
content: "SOJI Electronics — Technical Documentation Wiki";
display: block;
font-size: 9pt;
color: #666;
text-align: right;
border-bottom: 1px solid #ddd;
padding-bottom: 6px;
margin-bottom: 14px;
}
/* =========================
IMAGES & CAPTIONS - print
========================= */

/* Outer container */
div.thumb,
figure.thumb,
figure.mw-default-size,
figure[typeof~="mw:File/Thumb"],
figure[typeof~="mw:File/Frame"],
.thumb,
.floatright,
.floatleft,
.tright,
.tleft {
float: none !important;
clear: both !important;
margin: 12pt auto !important;
display: block !important;
width: auto !important; /* ← override inline width */
max-width: 80% !important;
page-break-inside: avoid !important;
}

/* Inner container (cái này gây bug — có inline width nhỏ) */
.thumbinner,
div.thumbinner,
figure.thumb > *,
.thumb .thumbinner {
width: auto !important; /* ← key fix */
max-width: 100% !important;
margin: 0 auto !important;
text-align: center !important;
padding: 6pt !important;
}

/* Image */
.thumb img,
figure img,
.image img,
a.image img {
max-width: 100% !important;
height: auto !important;
margin: 0 auto !important;
display: block !important;
width: auto !important;
}

/* Caption — không bị bóp width nữa */
.thumbcaption,
figcaption,
div.thumbcaption {
width: auto !important; /* ← override inline */
max-width: 100% !important;
text-align: center !important;
font-style: italic !important;
font-size: 9pt !important;
color: #555 !important;
margin-top: 4pt !important;
padding: 0 6pt !important;
white-space: normal !important; /* ← cho phép wrap bình thường */
display: block !important;
}

/* Standalone image (không trong thumb) */
img {
page-break-inside: avoid !important;
max-width: 100% !important;
height: auto !important;
}
}

/* =========================
IMAGE CAPTIONS - căn giữa cho normal view
========================= */
.thumbcaption,
.thumbinner .thumbcaption,
figure figcaption,
figure .mw-file-description-caption {
text-align: center !important;
}

/* Ẩn icon magnify (kính lúp) bên cạnh caption nếu muốn */
.magnify {
display: none !important;
}

/* Ẩn icon magnify/expand ở góc caption */
.magnify,
.mw-file-description .magnify,
.thumbcaption .magnify {
display: none !important;
}
.thumb a,
.image {
pointer-events: none !important;
cursor: default !important;
}

/* =========================
YOUTUBE FACADE
========================= */
.soji-yt-facade {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background: #000;
cursor: pointer;
overflow: hidden;
border-radius: 8px;
margin: 12px auto;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
transition: box-shadow 0.2s;
}

.soji-yt-facade:hover {
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.soji-yt-thumb {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.3s, filter 0.2s;
}

.soji-yt-facade:hover .soji-yt-thumb {
transform: scale(1.02);
filter: brightness(0.85);
}

.soji-yt-play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: transparent;
border: none;
cursor: pointer;
width: 84px;
height: 60px;
padding: 0;
transition: transform 0.2s;
pointer-events: none;
}

.soji-yt-play svg {
width: 100%;
height: 100%;
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
}

.soji-yt-play-bg {
fill: #212121;
fill-opacity: 0.8;
transition: fill 0.2s, fill-opacity 0.2s;
}

.soji-yt-facade:hover .soji-yt-play {
transform: translate(-50%, -50%) scale(1.1);
}

.soji-yt-facade:hover .soji-yt-play-bg {
fill: #ff0000;
fill-opacity: 1;
}

.soji-yt-playing iframe {
width: 100%;
height: 100%;
position: absolute;
inset: 0;
border: 0;
}

/* Ẩn trong print */
@media print {
.soji-yt-facade,
iframe[src*="youtube"] {
display: none !important;
}
}

/* =========================
TABLES - full width đồng đều
========================= */

/* Page view */
table.wikitable,
.mw-parser-output table.wikitable {
width: 100%;
table-layout: auto; /* Cell vẫn tự cỡ theo content, nhưng tổng = 100% */
margin: 12px 0;
}

/* Print/PDF */
@media print {
table,
table.wikitable,
.mw-parser-output table {
width: 100% !important;
table-layout: auto !important;
margin: 8pt 0 !important;
page-break-inside: avoid !important;
}

/* Cell padding rộng hơn để text breathing room */
table.wikitable th,
table.wikitable td {
padding: 6pt 10pt !important;
vertical-align: middle !important;
}

/* Header row đậm hơn */
table.wikitable th {
background: #f5f7fa !important;
font-weight: 700 !important;
text-align: center !important;
}
}

/* =========================
MAIN PAGE GRIDS
========================= */
.main-page-products-grid {
display: flex;
flex-wrap: wrap;
justify-content: center; /* ← căn giữa cụm */
gap: 24px;
margin: 24px auto;
max-width: 100%;
}

.main-page-product-card {
flex: 0 0 280px; /* ← fixed width 280px, không co dãn */
background: white;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 28px 20px 24px;
text-align: center;
transition: all 0.2s;
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
box-sizing: border-box;
}

.main-page-product-card:hover {
border-color: #2c5aa0;
box-shadow: 0 6px 20px rgba(44, 90, 160, 0.12);
transform: translateY(-2px);
}

.main-page-product-icon {
width: 140px;
height: 140px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px; /* ← căn giữa horizontal */
}

.main-page-product-icon img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
margin: 0 auto; /* ← căn giữa nếu ảnh nhỏ hơn container */
display: block;
}

.main-page-product-title {
font-size: 22px;
font-weight: 700;
margin-top: 12px; /* ← đẩy title xuống cách image */
margin-bottom: 16px;
color: #2c5aa0;
text-align: center;
width: 100%;
}

.main-page-product-title a {
color: #2c5aa0;
text-decoration: none;
}

.main-page-product-desc {
color: #444;
font-size: 14px;
line-height: 1.5;
text-align: center; /* ← căn giữa text */
margin: 0;
padding: 0 8px;
}

.main-page-product-link a {
color: #2c5aa0;
font-weight: 600;
font-size: 14px;
text-decoration: none;
}

/* Categories grid (bottom) */
.main-page-categories-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin: 30px 0;
}

.main-page-category-card {
text-align: center;
padding: 20px;
}

.main-page-category-icon {
font-size: 50px;
margin-bottom: 12px;
color: #2c5aa0;
}

.main-page-category-title {
font-size: 18px;
font-weight: 700;
margin-bottom: 8px;
}

.main-page-category-title a {
color: #2c5aa0;
text-decoration: none;
}

.main-page-category-desc {
color: #444;
font-size: 13px;
line-height: 1.5;
margin-bottom: 12px;
min-height: 60px;
}

.main-page-category-link a {
color: #2c5aa0;
font-weight: 600;
text-decoration: none;
}

@media (max-width: 900px) {
.main-page-categories-grid {
grid-template-columns: 1fr 1fr;
}
}

@media (max-width: 600px) {
.main-page-products-grid,
.main-page-categories-grid {
grid-template-columns: 1fr;
}
}

/* =========================
PRODUCT PAGES — Summary card + Full layout
========================= */

/* Direct view: hide summary card (because description shows on Main Page card),
show full layout (sub-page links + image) */
body.action-view .product-summary-card {
display: none;
}
body.action-view .product-fullview {
display: flex;
}

/* Main Page grid: show summary card (as product card), hide full layout */
.main-page-products-grid .product-summary-card {
display: block;
}
.main-page-products-grid .product-fullview {
display: none;
}

/* Edit mode: show summary card with yellow cue */
body:not(.action-view) .product-summary-card {
display: block;
background: #fff8e1;
border: 2px dashed #f0a830;
padding: 14px;
border-radius: 8px;
margin-bottom: 20px;
}

body:not(.action-view) .product-summary-card::before {
content: "📦 Main Page Card Preview — edit description in the template below";
display: block;
font-weight: 700;
color: #2c5aa0;
margin-bottom: 12px;
font-size: 13px;
}

.main-page-products-grid .product-summary-card {
background: transparent;
border: none;
padding: 0;
margin: 0;
}
.main-page-products-grid .product-summary-card::before {
content: none;
}

/* Products grid */
.main-page-products-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 24px;
margin: 24px auto;
}
/* =========================
MAIN PAGE GRIDS
========================= */
.main-page-products-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 24px;
margin: 24px auto;
}

.main-page-product-card {
background: white;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 28px 20px 24px;
text-align: center;
transition: all 0.2s;
display: flex;
flex-direction: column;
align-items: center;
flex: 0 0 280px;
box-sizing: border-box;
position: relative;
}

.main-page-product-card:hover {
border-color: #2c5aa0;
box-shadow: 0 6px 20px rgba(44, 90, 160, 0.12);
transform: translateY(-2px);
}

/* Stretched link: link trong title cover toàn card */
.main-page-product-title a::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}

/* Đảm bảo các phần khác hiển thị nhưng link cover phía trên */
.main-page-product-icon,
.main-page-product-title,
.main-page-product-desc {
position: relative;
z-index: 0;
}

/* Nếu có link khác trong card (vd icon có link riêng), giữ nó clickable trên cùng */
.main-page-product-card a:not(.main-page-product-title a) {
position: relative;
z-index: 2;
}

.main-page-product-icon {
width: 140px;
height: 140px;
margin: 0 auto 16px;
display: flex;
align-items: center;
justify-content: center;
}
.main-page-product-icon img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.main-page-product-title {
font-size: 22px;
font-weight: 700;
margin: 8px 0 14px;
}
.main-page-product-title a {
color: #2c5aa0;
text-decoration: none;
}
.main-page-product-card:hover .main-page-product-title a {
text-decoration: underline;
}
.main-page-product-desc {
color: #444;
font-size: 14px;
line-height: 1.5;
text-align: center;
}

.main-page-product-icon {
width: 140px;
height: 140px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
}

.main-page-product-icon img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}

.main-page-product-title {
font-size: 22px;
font-weight: 700;
margin: 8px 0 14px;
color: #2c5aa0;
text-align: center;
}

.main-page-product-title a {
color: #2c5aa0;
text-decoration: none;
}

.main-page-product-desc {
color: #444;
font-size: 14px;
line-height: 1.5;
text-align: center;
}

/* Categories grid - 4 cards bottom */
.main-page-categories-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin: 30px 0;
}

.main-page-category-card {
text-align: center;
padding: 20px;
}

.main-page-category-icon {
font-size: 50px;
margin-bottom: 12px;
color: #2c5aa0;
}

.main-page-category-title {
font-size: 18px;
font-weight: 700;
margin-bottom: 8px;
}

.main-page-category-title a {
color: #2c5aa0;
text-decoration: none;
}

.main-page-category-desc {
color: #444;
font-size: 13px;
line-height: 1.5;
}

/* ============================================ */
/* Override all blue to SOJI brand color */
/* ============================================ */

/* Heading H2 */
.mw-parser-output h2 {
color: #0054A6 !important;
border-bottom-color: #eaecf0 !important;
}

/* Page title H1 */
.mw-page-title,
#firstHeading,
h1.firstHeading {
color: #0054A6 !important;
}

/* Wiki links */
.mw-parser-output a {
color: #0054A6;
}

.mw-parser-output a:visited {
color: #003a7a;
}

.mw-parser-output a:hover {
color: #003a7a;
}

/* Import font Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@600;700;800&display=swap');

/* Category block title — apply font mới */
.category-block-title,
.category-block-title a {
color: #003a7a !important;
font-family: 'Mulish', -apple-system, "Segoe UI", sans-serif !important;
font-weight: 700 !important;
letter-spacing: 0.3px !important;
font-size: 1.15em !important;
}

/* Category block hover border */
.category-block:hover {
border-color: #0054A6 !important;
}

/* Toggle text */
.category-block-toggle span[class*="mw-customtoggle-cb-"] {
color: #0054A6 !important;
}

.category-block-toggle span[class*="mw-customtoggle-cb-"]:hover {
color: #003a7a !important;
}

/* Chevron arrow */
.toggle-arrow {
border-right-color: #0054A6 !important;
border-bottom-color: #0054A6 !important;
}

.category-block-toggle span:hover .toggle-arrow {
border-color: #003a7a !important;
}

/* Document download button */
.doc-download a {
background: #0054A6 !important;
color: #fff !important;
}

.doc-download a:hover {
background: #003a7a !important;
}

/* Document view link */
.doc-view a {
color: #0054A6 !important;
}

/* Wiki link blue (mặc định Vector) */
a.external,
.mw-body-content a {
color: #0054A6;
}

/* TOC links */
.vector-toc a,
.vector-toc-link {
color: #0054A6 !important;
}

/* Sidebar menu links */
.vector-main-menu a,
#p-categorytree-portlet a,
.CategoryTreeLabel,
.CategoryTreeLabel a {
color: #0054A6 !important;
}

/* Edit link bên cạnh heading */
.mw-parser-output h2 .mw-editsection a {
color: #0054A6 !important;
}

/* Breadcrumb */
.custom-breadcrumb a {
color: #0054A6 !important;
}