diff --git a/CSS/style.css b/CSS/style.css
index ebe0dcc..8481e24 100644
--- a/CSS/style.css
+++ b/CSS/style.css
@@ -13,15 +13,17 @@
     --media-bg-rgb: 255, 255, 255; --media-bg-opacity: 0.03;
     --media-width: 90%; --media-btn-size: 50px; --media-btn-play: 65px;
     --media-btn-color: rgba(255, 255, 255, 0.05); --media-svg-color: #ffffff;
+    --thumb-size: 25px; --thumb-color: #ffffff; --thumb-bg-image: url('../Theme/icon-dot.png');
     --bg-image: none;
 }
 
 * { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, sans-serif; -webkit-tap-highlight-color: transparent; }
 a { text-decoration: none; color: inherit; }
 
-body { color: var(--text-color); min-height: 100vh; overflow-x: hidden; }
+html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
+body { color: var(--text-color); min-height: 100vh; overflow-x: hidden; overscroll-behavior: none; }
 body::before {
-    content: ""; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
+    content: ""; position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh;
     background-color: var(--bg-main); background-image: var(--bg-image); background-size: cover;
     background-position: center; background-repeat: no-repeat; z-index: -1; transition: background-color 0.3s ease;
 }
@@ -31,56 +33,61 @@ body.standard-mode .dev-only { display: none !important; }
 .app-header { text-align: center; padding: 60px 0 20px 0; font-size: var(--title-size); font-weight: bold; letter-spacing: var(--title-spacing); text-shadow: none; transition: font-size 0.2s, letter-spacing 0.2s; }
 .label { font-size: var(--icon-font-size, 14px); font-weight: 500; letter-spacing: var(--icon-spacing, 0px); text-align: center; text-shadow: none; display: var(--label-display); transition: font-size 0.2s, letter-spacing 0.2s; }
 
+/* ============================================
+   INTRO SCREEN
+   ============================================ */
 #intro-screen { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 99999; display: flex; justify-content: center; align-items: center; pointer-events: none; }
-.intro-half { position: absolute; top: 0; width: 50%; height: 100%; background: #000000; transition: transform 1.5s cubic-bezier(0.77, 0, 0.175, 1); z-index: 1; }
+.intro-half { position: absolute; top: 0; width: 50%; height: 100%; background: #000000; transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1); z-index: 1; }
 .intro-left { left: 0; }
 .intro-right { right: 0; }
-
 .intro-content { position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; transition: opacity 0.5s ease, transform 0.5s ease; }
 .apple-logo-wrapper { color: #ffffff; filter: drop-shadow(0 0 12px #007aff) drop-shadow(0 0 25px #007aff); animation: pulseGlow 1.5s infinite alternate; }
 @keyframes pulseGlow { 0% { filter: drop-shadow(0 0 8px #007aff); transform: scale(1); } 100% { filter: drop-shadow(0 0 22px #007aff) drop-shadow(0 0 35px #0051a8); transform: scale(1.05); } }
-
-.intro-title-wrapper { margin-top: 18px; opacity: 0; animation: fadeInDelay 0.5s forwards 1.5s; }
+.intro-title-wrapper { margin-top: 18px; opacity: 0; animation: fadeInDelay 0.5s forwards 0.8s; }
 @keyframes fadeInDelay { to { opacity: 1; } }
-
 .intro-title-container { font-size: 24px; font-weight: bold; color: #007aff; display: flex; }
 .intro-title-container span { display: inline-block; }
-
 .anim-wave span { animation: waveAnim 1.2s infinite ease-in-out; }
 @keyframes waveAnim { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); color: #66b2ff; } }
-
 .anim-bounce span { animation: bounceAnim 1s infinite ease-in-out alternate; }
 @keyframes bounceAnim { 0% { transform: translateY(0); } 100% { transform: translateY(-10px) scale(1.1); color: #33ccff; } }
-
 .anim-flip span { animation: flipAnim 2s infinite ease-in-out; perspective: 1000px; }
 @keyframes flipAnim { 0%, 100% { transform: rotateY(0deg); } 50% { transform: rotateY(180deg) scale(1.1); color: #00f2fe; } }
-
-.intro-title-container span:nth-child(1) { animation-delay: 0.0s; } .intro-title-container span:nth-child(2) { animation-delay: 0.1s; }
-.intro-title-container span:nth-child(3) { animation-delay: 0.2s; } .intro-title-container span:nth-child(4) { animation-delay: 0.3s; }
-.intro-title-container span:nth-child(5) { animation-delay: 0.4s; } .intro-title-container span:nth-child(6) { animation-delay: 0.5s; }
-.intro-title-container span:nth-child(7) { animation-delay: 0.6s; } .intro-title-container span:nth-child(8) { animation-delay: 0.7s; }
-.intro-title-container span:nth-child(9) { animation-delay: 0.8s; } .intro-title-container span:nth-child(10) { animation-delay: 0.9s; }
-.intro-title-container span:nth-child(11) { animation-delay: 1.0s; } .intro-title-container span:nth-child(12) { animation-delay: 1.1s; }
-.intro-title-container span:nth-child(13) { animation-delay: 1.2s; }
-
 #intro-screen.dismiss .intro-content { opacity: 0; transform: scale(0.8); transition-duration: 0.5s; }
 #intro-screen.dismiss .intro-left { transform: translateX(-100%); }
 #intro-screen.dismiss .intro-right { transform: translateX(100%); }
 
-.app-container { transition: transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 1s ease; }
+.app-container { transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.8s ease; }
 .app-container.intro-zoom { transform: scale(0.9); opacity: 0; }
-.slider-item { position: relative; display: flex; align-items: center; margin-bottom: 8px; width: 100%; }
-.slider-item > div { flex: 1; display: flex; align-items: center; }
 
+/* ============================================
+   SLIDER ITEM & TOOLTIP
+   ============================================ */
+.slider-item { position: relative; display: flex; align-items: center; margin-bottom: 8px; width: 100%; transition: opacity 0.3s ease; }
 .slider-item input[type=range] { flex: 1; width: 100% !important; }
-.slider-label { width: 95px; font-size: 12px; opacity: 0.8; flex-shrink: 0; }
-.slider-tooltip { position: absolute; top: -28px; background: #007aff; color: #ffffff; font-size: 11px; font-weight: bold; padding: 4px 8px; border-radius: 8px; opacity: 0; transform: translateY(5px); transition: opacity 0.2s, transform 0.2s, left 0.1s ease-out; pointer-events: none; z-index: 50; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,0.3); }
-.slider-tooltip.show { opacity: 1; transform: translateY(0); }
+.slider-label { 
+    width: 110px; 
+    font-size: 12px; 
+    opacity: 0.85; 
+    flex-shrink: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding-right: 6px;
+}
+@media (max-width: 380px) {
+    .slider-label { width: 95px; font-size: 11px; }
+}
+.slider-tooltip { position: fixed; background: #007aff; color: #ffffff; font-size: 11px; font-weight: bold; padding: 4px 8px; border-radius: 8px; opacity: 0; transform: translateX(-50%) translateY(5px); transition: opacity 0.15s ease, transform 0.15s ease; pointer-events: none; z-index: 999999; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.4); }
+.slider-tooltip.show { opacity: 1; transform: translateX(-50%) translateY(0); }
 
 .badge-dot { display: inline-block; width: 8px; height: 8px; background-color: #ff3b30; border-radius: 50%; margin-left: 5px; vertical-align: middle; box-shadow: 0 0 6px #ff3b30; animation: badgePulse 1.5s infinite; }
 @keyframes badgePulse { 0% { opacity: 0.5; } 100% { opacity: 1; transform: scale(1.2); } }
 .badge-dot.hidden { display: none !important; }
 
+/* ============================================
+   GRID LAYOUT
+   ============================================ */
 .grid-layout { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; padding: 20px; max-width: 600px; margin: 0 auto; position: relative; }
 .glass-btn { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; color: var(--text-color); user-select: none; position: relative; }
 .icon-box {
@@ -88,11 +95,11 @@ body.standard-mode .dev-only { display: none !important; }
     background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: var(--frame-border-radius);
     display: flex; justify-content: center; align-items: center; box-shadow: var(--btn-shadow);
     transition: transform 0.1s ease, box-shadow 0.2s ease; transform: perspective(500px) translate3d(var(--tilt-x), var(--tilt-y), 0);
+    will-change: transform;
 }
 .icon-box svg { width: var(--svg-size); height: var(--svg-size); fill: var(--svg-color); color: var(--svg-color); opacity: var(--svg-opacity); position: relative; z-index: 2; transform: perspective(500px) translate3d(calc(var(--tilt-x) * 1.5), calc(var(--tilt-y) * 1.5), 10px); }
 .glass-btn:active .icon-box { transform: scale(0.92); }
 .glass-active .icon-box { background: rgba(255,255,255,0.15); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border: 1px solid rgba(255,255,255,0.2); }
-.glass-active.list-mode .glass-btn { background: rgba(0,0,0,0.3); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.1); }
 
 @keyframes pulseSwap { 0% { box-shadow: 0 0 0 0 rgba(0, 122, 255, 0.7); } 70% { box-shadow: 0 0 0 15px rgba(0, 122, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 122, 255, 0); } }
 .edit-mode .glass-btn { pointer-events: auto; cursor: pointer; }
@@ -100,102 +107,288 @@ body.standard-mode .dev-only { display: none !important; }
 .edit-mode .glass-btn.selected-swap::after { content: "🔄"; position: absolute; top: -5px; right: -5px; font-size: 18px; background: #007aff; border-radius: 50%; padding: 2px; }
 .edit-mode .grid-layout { background: rgba(255,255,255,0.05); border: 2px dashed rgba(255,255,255,0.3); border-radius: 20px; }
 
-.app-container.list-mode .grid-layout { grid-template-columns: 1fr; gap: 12px; }
-.app-container.list-mode .glass-btn { flex-direction: row; justify-content: flex-start; align-items: center; gap: 15px; background: var(--list-bg-rgba); padding: 12px 18px; border-radius: var(--list-border-radius); color: var(--list-text-color); box-shadow: var(--btn-shadow); }
+/* ============================================
+   LIST MODE
+   ============================================ */
+.app-container.list-mode .grid-layout { grid-template-columns: 1fr !important; gap: 12px; }
+.app-container.list-mode .glass-btn { 
+    flex-direction: row; justify-content: flex-start; align-items: center; gap: 15px; 
+    background: var(--list-bg-rgba); padding: 12px 18px; border-radius: var(--list-border-radius); 
+    color: var(--list-text-color); 
+    box-shadow: var(--btn-shadow); 
+}
 .app-container.list-mode:not(.list-frame-active) .icon-box { background: transparent !important; box-shadow: none !important; width: var(--svg-size); height: var(--svg-size); transform: none; border-radius: 0; }
 .app-container.list-mode:not(.list-frame-active) .icon-box svg { fill: var(--list-svg-color); color: var(--list-svg-color); width: 100%; height: 100%; transform: none; opacity: var(--svg-opacity); }
 .app-container.list-mode .label { text-align: left; }
-.app-container.list-mode.list-frame-active .glass-btn { background: var(--list-bg-rgba); box-shadow: none; }
+.app-container.list-mode.list-frame-active .glass-btn { background: var(--list-bg-rgba); box-shadow: var(--btn-shadow); }
 .app-container.list-mode.list-frame-active .icon-box { width: var(--frame-size); height: var(--frame-size); min-width: var(--frame-size); background-image: var(--frame-bg) !important; background-color: var(--frame-bg-color) !important; background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: var(--frame-border-radius); box-shadow: var(--btn-shadow) !important; transform: perspective(500px) translate3d(var(--tilt-x), var(--tilt-y), 0); display: flex; justify-content: center; align-items: center; }
 .app-container.list-mode.list-frame-active .icon-box svg { fill: var(--svg-color); color: var(--svg-color); width: var(--svg-size); height: var(--svg-size); opacity: var(--svg-opacity); }
 
-.media-player-widget { margin: 10px auto 30px auto; width: var(--media-width); max-width: 400px; padding: 20px; border-radius: 24px; display: flex; flex-direction: column; gap: 22px; background: rgba(var(--media-bg-rgb), var(--media-bg-opacity)); box-shadow: var(--btn-shadow); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.1); }
-.media-controls { display: flex; align-items: center; justify-content: center; gap: 30px; }
-.media-btn { border: none; background: var(--media-btn-color); color: var(--media-svg-color); border-radius: 50%; width: var(--media-btn-size); height: var(--media-btn-size); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--btn-shadow); transition: all 0.15s ease; }
-.media-btn.play-main { width: var(--media-btn-play); height: var(--media-btn-play); }
-.media-btn:active { box-shadow: inset 0 0 10px rgba(0,0,0,0.3); transform: scale(0.95); }
+/* ============================================
+   MEDIA WIDGET - FIX DISPLAY
+   ============================================ */
+.media-player-widget { 
+    margin: 10px auto 30px auto; 
+    width: var(--media-width); 
+    max-width: 400px; 
+    padding: 20px; 
+    border-radius: 24px; 
+    display: flex; 
+    flex-direction: column; 
+    gap: 22px; 
+    background: rgba(var(--media-bg-rgb), var(--media-bg-opacity)); 
+    box-shadow: var(--btn-shadow); 
+    backdrop-filter: blur(10px); 
+    -webkit-backdrop-filter: blur(10px); 
+    border: 1px solid rgba(255,255,255,0.1); 
+}
+
+.media-controls { 
+    display: flex; 
+    align-items: center; 
+    justify-content: center; 
+    gap: 30px; 
+}
+
+/* ⭐ FIX: Media buttons dùng thẻ <a> thay vì <button> */
+.media-btn { 
+    display: inline-flex;
+    align-items: center; 
+    justify-content: center; 
+    text-decoration: none !important;
+    border: none; 
+    background: var(--media-btn-color); 
+    color: var(--media-svg-color); 
+    border-radius: 50%; 
+    width: var(--media-btn-size); 
+    height: var(--media-btn-size); 
+    cursor: pointer; 
+    box-shadow: var(--btn-shadow); 
+    transition: all 0.15s ease; 
+    padding: 0;
+    margin: 0;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-user-select: none;
+    user-select: none;
+    line-height: 0;
+    font-size: 0;
+    vertical-align: middle;
+    box-sizing: border-box;
+    flex-shrink: 0;
+    appearance: none;
+    -webkit-appearance: none;
+}
+.media-btn svg { 
+    display: block; 
+    width: auto;
+    height: auto;
+    pointer-events: none;
+    flex-shrink: 0;
+}
+.media-btn.play-main { 
+    width: var(--media-btn-play); 
+    height: var(--media-btn-play); 
+}
+.media-btn:active { 
+    box-shadow: inset 0 0 10px rgba(0,0,0,0.3); 
+    transform: scale(0.95); 
+}
+.media-player-widget.theme-synced .media-btn { 
+    background-image: var(--frame-bg) !important; 
+    background-color: var(--frame-bg-color) !important; 
+    background-size: cover; 
+    background-position: center; 
+    box-shadow: var(--btn-shadow) !important; 
+}
+
 .system-sliders { display: flex; flex-direction: column; gap: 15px; width: 100%; }
 .sys-slider-container { display: flex; align-items: center; gap: 12px; color: var(--media-svg-color); opacity: 0.8; }
 .sys-slider { -webkit-appearance: none; flex: 1; height: 8px !important; border-radius: 4px; background: rgba(0, 0, 0, 0.3) !important; box-shadow: inset 1px 1px 3px rgba(0,0,0,0.5), inset -1px -1px 3px rgba(255,255,255,0.1) !important; outline: none; }
 
-.settings-fab { position: fixed; bottom: 25px; right: 25px; width: 45px; height: 45px; border-radius: 50%; background: transparent; border: none; box-shadow: none; z-index: 100; cursor: pointer; overflow: hidden; padding: 0; transition: transform 0.2s ease; }
-.settings-fab img { width: 100%; height: 100%; object-fit: contain; }
-.settings-fab:active { transform: scale(0.9); }
-
+/* ============================================
+   SLIDER THUMBS
+   ============================================ */
 input[type=range]::-webkit-slider-thumb, .sys-slider::-webkit-slider-thumb {
-    -webkit-appearance: none; height: 25px !important; width: 25px !important; 
-    background-size: contain !important; background-position: center !important;
-    background-repeat: no-repeat !important; background-color: transparent !important;
-    border-radius: 0 !important; border: none !important; box-shadow: none !important;
-    filter: drop-shadow(0px 2px 4px rgba(0,0,0,0.4)); cursor: pointer;
-}
-input[type=range]::-webkit-slider-thumb {
-    -webkit-appearance: none !important;
-    height: 25px !important; 
-    width: 25px !important; 
-    background-image: url('../Theme/icon-dot.png') !important;
-    background-size: contain !important;
-    background-position: center !important;
-    background-repeat: no-repeat !important;
-    background-color: transparent !important;
-    border: none !important;
-    margin-top: -9.5px !important;
-    filter: drop-shadow(0px 2px 4px rgba(0,0,0,0.4));
-    cursor: pointer;
+    -webkit-appearance: none !important; appearance: none !important; 
+    height: var(--thumb-size) !important; width: var(--thumb-size) !important; 
+    background-image: var(--thumb-bg-image) !important; 
+    background-size: contain !important; background-position: center !important; background-repeat: no-repeat !important;
+    background-color: transparent !important; border: none !important; 
+    margin-top: calc((var(--thumb-size) / -2) + 3px) !important;
+    box-shadow: none !important; filter: drop-shadow(0px 2px 4px rgba(0,0,0,0.4)); cursor: pointer;
 }
-.sys-slider::-webkit-slider-thumb {
-    -webkit-appearance: none !important;
-    height: 25px !important; 
-    width: 25px !important; 
-    background-image: url('../Theme/icon-control.png') !important;
-    background-size: contain !important;
-    background-position: center !important;
-    background-repeat: no-repeat !important;
-    background-color: transparent !important;
-    border: none !important;
-    margin-top: -8.5px !important;
-    filter: drop-shadow(0px 2px 4px rgba(0,0,0,0.4));
-    cursor: pointer;
-}
-input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 6px; background: rgba(255,255,255,0.2); border-radius: 3px; }
+input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 6px; background: rgba(255,255,255,0.2); border-radius: 3px; box-shadow: none; }
 
-.settings-drawer .theme-grid-picker { 
-    display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(2, 44px); 
-    gap: 12px; margin-top: 10px; justify-items: center; align-items: center; overflow: hidden; 
+.media-player-widget.pure-css-dots .sys-slider::-webkit-slider-thumb {
+    background-image: none !important;
+    background-color: var(--thumb-color) !important;
+    box-shadow: var(--btn-shadow) !important;
+    border-radius: 50% !important;
+    opacity: var(--svg-opacity) !important;
+    filter: none !important;
 }
 
-.macos-window .full-grid {
-    display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
-    max-height: 280px; overflow-y: auto; padding: 5px; justify-items: center; align-items: center;
+/* ============================================
+   THEME DOT PLUS BUTTON
+   ============================================ */
+.btn-plus-theme {
+    width: 26px; height: 26px; border-radius: 50%; background: #007aff; color: white; border: none;
+    font-size: 18px; font-weight: 300; display: flex; align-items: center; justify-content: center; cursor: pointer; 
+    transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0, 122, 255, 0.4);
 }
-
-.theme-chip {
-    width: calc(100% - 3px); max-width: 44px; aspect-ratio: 1; border-radius: 10px; 
-    background: transparent; border: 2px solid transparent; 
-    display: flex; align-items: center; justify-content: center;
-    cursor: pointer; transition: all 0.2s ease; padding: 2px;
+.btn-plus-theme.disabled {
+    background: #8e8e93; box-shadow: none; opacity: 0.5; pointer-events: none;
 }
+.btn-plus-theme span { margin-top: -2px; }
+
+/* ============================================
+   FLOATING FAB BUTTONS
+   ============================================ */
+.settings-fab { position: fixed; bottom: 25px; right: 25px; width: 45px; height: 45px; border-radius: 50%; background: transparent; border: none; box-shadow: none; z-index: 100; cursor: pointer; overflow: hidden; padding: 0; transition: transform 0.2s ease; }
+.settings-fab img { width: 100%; height: 100%; object-fit: contain; }
+.settings-fab:active { transform: scale(0.9); }
+.sort-fab { position: fixed; bottom: 35px; left: 50%; transform: translateX(-50%) scale(1); width: 56px; height: 56px; border-radius: 50%; border: none; background: #8e8e93; color: white; box-shadow: 0 4px 15px rgba(0,0,0,0.3); z-index: 1000; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
+.sort-fab.hidden { transform: translateX(-50%) scale(0) !important; opacity: 0; pointer-events: none; }
+.sort-fab.active { background: #007aff; box-shadow: 0 4px 20px rgba(0, 122, 255, 0.5); transform: translateX(-50%) scale(1.1); }
+.sort-fab svg { width: 30px; height: 30px; stroke-width: 3.5; }
+.sort-fab:active { transform: translateX(-50%) scale(0.95); }
+
+/* ============================================
+   THEME PICKER GRID
+   ============================================ */
+.settings-drawer .theme-grid-picker { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(2, 44px); gap: 12px; margin-top: 10px; justify-items: center; align-items: center; overflow: hidden; }
+.macos-window .full-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; max-height: 280px; overflow-y: auto; padding: 5px; justify-items: center; align-items: center; }
+.theme-chip { width: calc(100% - 3px); max-width: 44px; aspect-ratio: 1; border-radius: 10px; background: transparent; border: 2px solid transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; padding: 2px; }
 .theme-chip img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; border-radius: inherit; }
 .theme-chip.active { border-color: var(--accent-color); box-shadow: 0 0 12px rgba(0, 122, 255, 0.4); background: rgba(0, 122, 255, 0.1); }
-
-.theme-chip-more {
-    width: calc(100% - 3px); max-width: 44px; aspect-ratio: 1; border-radius: 50%;
-    background: #007aff; color: #ffffff; font-size: 26px; font-weight: 300;
-    display: flex; align-items: center; justify-content: center; cursor: pointer;
-    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.4); transition: all 0.2s ease;
-}
+.theme-chip-more { width: calc(100% - 3px); max-width: 44px; aspect-ratio: 1; border-radius: 50%; background: #007aff; color: #ffffff; font-size: 26px; font-weight: 300; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 122, 255, 0.4); transition: all 0.2s ease; }
 .theme-chip-more span { margin-top: -2px; }
 .theme-chip-more:active { transform: scale(0.9); }
 
-.settings-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); opacity: 0; visibility: hidden; transition: opacity 0.3s ease; z-index: 998; }
+/* ============================================
+   DRAWER & OVERLAY
+   ============================================ */
+.settings-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); opacity: 0; visibility: hidden; transition: opacity 0.45s cubic-bezier(0.32, 0.72, 0, 1); z-index: 998; }
 .settings-overlay.open { opacity: 1; visibility: visible; }
-.settings-drawer { position: fixed; top: calc(env(safe-area-inset-top) + 15px); right: -120%; width: 85%; max-width: 360px; max-height: 85vh; border-radius: 20px; background: rgba(30,30,30,0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: -5px 0 25px rgba(0,0,0,0.5); z-index: 999; transition: right 0.4s cubic-bezier(0.1, 0.7, 0.1, 1), background 0.3s ease, backdrop-filter 0.3s ease; display: flex; flex-direction: column; color: white; overflow: hidden; }
+.settings-drawer { 
+    position: fixed; top: calc(env(safe-area-inset-top) + 15px); right: -120%; width: 85%; max-width: 360px; max-height: 85vh; border-radius: 20px; 
+    background: rgba(30,30,30,0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: -5px 0 25px rgba(0,0,0,0.5); 
+    z-index: 999; transition: right 0.45s cubic-bezier(0.32, 0.72, 0, 1), background 0.3s ease; 
+    will-change: right, opacity; display: flex; flex-direction: column; color: white; overflow: hidden; 
+}
 .settings-drawer.open { right: 15px; }
-.settings-drawer.adjusting { background: rgba(30, 30, 30, 0.1) !important; opacity: 0.15 !important; backdrop-filter: blur(0px) !important; -webkit-backdrop-filter: blur(0px) !important; box-shadow: none !important; }
-.settings-header { padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.1); }
-.settings-header button { background: rgba(255,255,255,0.2); border: none; color: white; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; }
-.settings-body { padding: 20px 20px 60px 20px; overflow-y: auto; flex: 1; }
-.setting-group { margin-bottom: 20px; display: flex; flex-direction: column; gap: 8px; }
+.settings-drawer.adjusting { background: rgba(30, 30, 30, 0.35) !important; opacity: 0.4 !important; backdrop-filter: blur(2px) !important; -webkit-backdrop-filter: blur(2px) !important; box-shadow: none !important; }
+
+/* ============================================
+   SETTINGS HEADER
+   ============================================ */
+.settings-header {
+    padding: 12px 15px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid rgba(255,255,255,0.08);
+    position: relative;
+    min-height: 58px;
+}
+.settings-header .header-btn {
+    background: rgba(255,255,255,0.12);
+    border: none;
+    color: white;
+    width: 34px;
+    height: 34px;
+    border-radius: 50%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    font-weight: bold;
+    font-family: -apple-system, sans-serif;
+    transition: transform 0.15s ease, background 0.2s ease;
+    padding: 0;
+    flex-shrink: 0;
+    z-index: 2;
+}
+.settings-header .header-btn:active { transform: scale(0.88); background: rgba(255,255,255,0.22); }
+.settings-header .header-btn.info-header-btn {
+    background: linear-gradient(135deg, #007aff, #0055cc);
+    font-style: italic;
+    font-family: Georgia, serif;
+    box-shadow: 0 2px 10px rgba(0, 122, 255, 0.55), inset 0 1px 0 rgba(255,255,255,0.3);
+}
+.settings-header .header-btn.info-header-btn:active { background: linear-gradient(135deg, #0066dd, #0044aa); }
+.settings-header .header-title-pill {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    background: linear-gradient(135deg, #007aff, #0055cc);
+    color: white;
+    padding: 8px 26px;
+    border-radius: 22px;
+    font-size: 13px;
+    font-weight: 800;
+    letter-spacing: 1.5px;
+    box-shadow: 0 3px 14px rgba(0, 122, 255, 0.5), inset 0 1px 0 rgba(255,255,255,0.3);
+    text-transform: uppercase;
+    white-space: nowrap;
+    pointer-events: none;
+    z-index: 1;
+}
+
+/* ============================================
+   TAB BAR
+   ============================================ */
+.settings-tabs-bar {
+    display: flex;
+    gap: 4px;
+    padding: 10px 12px;
+    background: rgba(0,0,0,0.25);
+    border-bottom: 1px solid rgba(255,255,255,0.06);
+    overflow-x: auto;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    flex-shrink: 0;
+}
+.settings-tabs-bar::-webkit-scrollbar { display: none; }
+.settings-tab {
+    flex: 1;
+    min-width: 66px;
+    padding: 9px 6px;
+    border: none;
+    background: rgba(255,255,255,0.06);
+    color: rgba(255,255,255,0.6);
+    border-radius: 10px;
+    font-size: 11px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    white-space: nowrap;
+    font-family: -apple-system, sans-serif;
+    -webkit-tap-highlight-color: transparent;
+    text-align: center;
+}
+.settings-tab:active { transform: scale(0.96); }
+.settings-tab.active {
+    background: linear-gradient(135deg, #007aff, #0055cc);
+    color: white;
+    box-shadow: 0 3px 10px rgba(0, 122, 255, 0.45);
+    font-weight: 700;
+}
+
+.settings-tab-content { display: none; }
+.settings-tab-content.active { display: block; animation: tabFadeIn 0.25s ease-out; }
+@keyframes tabFadeIn {
+    from { opacity: 0; transform: translateY(6px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+/* ============================================
+   SETTINGS BODY & GROUPS
+   ============================================ */
+.settings-body { padding: 16px 18px 60px 18px; overflow-y: auto; flex: 1; }
+.setting-group { margin-bottom: 18px; display: flex; flex-direction: column; gap: 8px; }
 .highlight-box { background: rgba(255,255,255,0.05); padding: 15px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.1); }
 .feature-toggles { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; font-size: 13px; }
 .feature-toggles label { display: flex; justify-content: space-between; align-items: center; }
@@ -204,28 +397,248 @@ input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 6px; bac
 .layout-buttons { display: flex; gap: 10px; }
 .layout-btn { flex: 1; padding: 10px 0; background: rgba(255,255,255,0.1); border: 1px solid transparent; color: white; border-radius: 8px; cursor: pointer; font-weight: 500; transition: all 0.2s; }
 .layout-btn.active { background: var(--accent-color); font-weight: bold; }
-.config-actions { display: flex; gap: 5px; margin-bottom: 20px; }
+.config-actions { display: flex; gap: 5px; margin-bottom: 8px; }
 .action-btn { flex: 1; padding: 8px; background: rgba(255,255,255,0.15); border: none; color: white; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 13px; font-weight: 500; }
+
+/* ============================================
+   SHADOW HEADER
+   ============================================ */
 .shadow-item { border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; margin-bottom: 10px; overflow: hidden; }
-.shadow-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 15px; background: rgba(0,0,0,0.2); }
-.shadow-drawer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; padding: 0 15px; background: rgba(0,0,0,0.1); }
-.shadow-drawer.active { max-height: 400px; padding: 15px; }
+.shadow-header { 
+    display: flex; 
+    justify-content: space-between; 
+    align-items: center; 
+    padding: 16px 18px; 
+    min-height: 52px;
+    background: rgba(0,0,0,0.2); 
+}
+.shadow-header span { font-size: 14px; font-weight: 500; }
+.shadow-header input[type=checkbox] {
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
+    accent-color: #007aff;
+    flex-shrink: 0;
+}
+.shadow-drawer { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; padding: 0 15px; background: rgba(0,0,0,0.1); }
+.shadow-drawer.active { max-height: 500px; padding: 15px; }
+
 select { width: 100%; padding: 10px; border-radius: 8px; background: rgba(0,0,0,0.3); color: white; border: 1px solid rgba(255,255,255,0.2); font-size: 14px; }
-.info-btn { position: absolute; bottom: 20px; right: 20px; width: 28px; height: 28px; border-radius: 50%; background: #007aff; color: #ffffff; border: none; font-size: 15px; font-weight: bold; font-family: -apple-system, sans-serif; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; }
 
-.info-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); opacity: 0; visibility: hidden; transition: opacity 0.3s ease; z-index: 2000; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
+/* ============================================
+   NÚT KHÔI PHỤC MẶC ĐỊNH
+   ============================================ */
+.config-actions-secondary {
+    display: flex;
+    margin-bottom: 20px;
+}
+.config-actions-secondary .action-btn {
+    background: rgba(255, 59, 48, 0.12);
+    border: 1px solid rgba(255, 59, 48, 0.28);
+    color: #ff6b60;
+    font-size: 12.5px;
+    font-weight: 600;
+    padding: 10px 8px;
+    transition: all 0.2s ease;
+}
+.config-actions-secondary .action-btn:active {
+    background: rgba(255, 59, 48, 0.28);
+    color: #ff8a80;
+    transform: scale(0.97);
+}
+.config-actions-secondary .action-btn.danger { width: 100%; }
+
+/* ============================================
+   BẢNG MÀU NHANH
+   ============================================ */
+.color-swatch-row {
+    display: flex;
+    gap: 10px;
+    justify-content: space-between;
+    margin-top: 12px;
+    padding: 4px 2px;
+}
+.color-swatch {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 5px;
+    position: relative;
+}
+.color-swatch input[type=color] {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 100%;
+    max-width: 48px;
+    height: 48px;
+    border: 2px solid rgba(255,255,255,0.18);
+    border-radius: 14px;
+    padding: 0;
+    cursor: pointer;
+    background: transparent;
+    overflow: hidden;
+    transition: all 0.2s ease;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.15);
+}
+.color-swatch input[type=color]:active {
+    transform: scale(0.92);
+    border-color: #007aff;
+    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.35);
+}
+.color-swatch input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
+.color-swatch input[type=color]::-webkit-color-swatch {
+    border: none;
+    border-radius: 11px;
+}
+.swatch-label {
+    font-size: 10px;
+    font-weight: 600;
+    color: rgba(255,255,255,0.65);
+    letter-spacing: 0.3px;
+    white-space: nowrap;
+    text-align: center;
+}
+
+/* ============================================
+   CUSTOM FILE INPUT
+   ============================================ */
+.file-input-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    cursor: pointer;
+    padding: 4px 0;
+    -webkit-tap-highlight-color: transparent;
+}
+.file-input-wrapper input[type=file] {
+    display: none;
+}
+.file-input-btn {
+    background: linear-gradient(135deg, #007aff, #0055cc);
+    color: #ffffff;
+    padding: 8px 16px;
+    border-radius: 20px;
+    font-size: 13px;
+    font-weight: 600;
+    white-space: nowrap;
+    flex-shrink: 0;
+    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.35);
+    transition: transform 0.15s ease, box-shadow 0.2s ease;
+    letter-spacing: 0.2px;
+}
+.file-input-wrapper:active .file-input-btn {
+    transform: scale(0.94);
+    box-shadow: 0 1px 4px rgba(0, 122, 255, 0.5);
+}
+.file-input-name {
+    font-size: 12.5px;
+    color: rgba(255,255,255,0.7);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1;
+    min-width: 0;
+}
+.file-input-name.has-file {
+    color: #34c759;
+    font-weight: 600;
+}
+.clear-bg-btn {
+    margin-top: 8px;
+    padding: 8px 12px;
+    background: rgba(255, 59, 48, 0.1);
+    border: 1px solid rgba(255, 59, 48, 0.25);
+    color: #ff6b60;
+    border-radius: 8px;
+    font-size: 12.5px;
+    font-weight: 600;
+    cursor: pointer;
+    width: 100%;
+    transition: all 0.2s ease;
+    font-family: -apple-system, sans-serif;
+}
+.clear-bg-btn:active {
+    background: rgba(255, 59, 48, 0.25);
+    transform: scale(0.97);
+}
+
+/* ============================================
+   MACOS MODAL WINDOWS
+   ============================================ */
+.info-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); opacity: 0; visibility: hidden; transition: opacity 0.45s ease; z-index: 2000; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
 .info-overlay.show { opacity: 1; visibility: visible; }
-.macos-window { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.9); width: 85%; max-width: 380px; background: #ffffff; border-radius: 16px; box-shadow: 0 20px 40px rgba(0,0,0,0.3); z-index: 2001; opacity: 0; visibility: hidden; transition: all 0.3s ease; color: #000000; overflow: hidden; }
+.macos-window { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.9); width: 85%; max-width: 380px; background: #ffffff; border-radius: 16px; box-shadow: 0 20px 40px rgba(0,0,0,0.3); z-index: 2001; opacity: 0; visibility: hidden; transition: all 0.45s cubic-bezier(0.32, 0.72, 0, 1); color: #000000; overflow: hidden; will-change: transform, opacity; }
 .macos-window.show { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); }
 .macos-header { background: #f1f1f1; padding: 12px 15px; display: flex; gap: 8px; align-items: center; justify-content: flex-start; }
 .mac-dot { width: 13px; height: 13px; border-radius: 50%; cursor: pointer; box-shadow: inset 0 0 4px rgba(0,0,0,0.1); }
-.close-dot { background: #ff5f56; } .min-dot { background: #ffbd2e; } .max-dot { background: #27c93f; }
-.macos-body { padding: 20px 15px 30px 15px; text-align: center; }
-.info-desc { font-size: 15px; margin-top: 15px; line-height: 1.6; }
+.close-dot { background: #ff5f56; } 
+.min-dot { background: #ffbd2e; } 
+.max-dot { background: #27c93f; }
+.macos-body { padding: 25px 20px 30px 20px; text-align: center; }
+
+/* ============================================
+   INFO MODAL
+   ============================================ */
+.info-body { padding: 18px 16px 24px !important; text-align: center; }
+.info-pill-tabs { display: flex; gap: 6px; justify-content: center; margin-bottom: 20px; flex-wrap: nowrap; }
+.info-pill {
+    padding: 9px 15px;
+    border-radius: 22px;
+    border: 1px solid rgba(0, 122, 255, 0.35);
+    background: rgba(0, 122, 255, 0.08);
+    color: #007aff;
+    font-size: 12.5px;
+    font-weight: 700;
+    text-decoration: none;
+    cursor: pointer;
+    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
+    backdrop-filter: blur(14px);
+    -webkit-backdrop-filter: blur(14px);
+    font-family: -apple-system, sans-serif;
+    white-space: nowrap;
+    display: flex;
+    align-items: center;
+    letter-spacing: 0.2px;
+    -webkit-tap-highlight-color: transparent;
+}
+.info-pill:active, .info-pill.active {
+    background: linear-gradient(135deg, #007aff, #0055cc);
+    color: white;
+    border-color: transparent;
+    box-shadow: 0 5px 16px rgba(0, 122, 255, 0.5), inset 0 1px 0 rgba(255,255,255,0.3);
+    transform: translateY(-1.5px) scale(1.02);
+}
+
+.info-content { text-align: center; }
+.info-app-name { font-size: 22px; font-weight: 800; color: #007aff; margin: 0 0 10px; letter-spacing: 0.3px; }
+.info-version-row, .info-dev-row {
+    font-size: 13px; color: #666; margin-bottom: 8px;
+    display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap;
+}
+.info-version-value {
+    font-weight: 700; color: #000;
+    background: rgba(0,0,0,0.07); padding: 3px 10px; border-radius: 8px; font-size: 12.5px;
+}
+.info-dev-link { color: #007aff; font-weight: 700; text-decoration: none; }
+.info-dev-link:active { opacity: 0.7; }
+.info-desc-box, .info-guide-box {
+    text-align: left; margin-top: 14px; padding: 12px 14px;
+    background: rgba(0,0,0,0.04); border-radius: 12px; border: 1px solid rgba(0,0,0,0.06);
+}
+.info-desc-title, .info-guide-title {
+    font-size: 13px; font-weight: 700; color: #007aff; margin-bottom: 6px; letter-spacing: 0.2px;
+}
+.info-desc-box p, .info-guide-box p {
+    font-size: 12.5px; line-height: 1.55; color: #333; margin: 0; white-space: pre-line;
+}
 
-.settings-drawer.anim-zoom { right: 15px; transform: scale(0.6); opacity: 0; transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease; pointer-events: none; }
+/* ============================================
+   ANIMATION POPUP SETTINGS
+   ============================================ */
+.settings-drawer.anim-zoom { right: 15px; transform: scale(0.88); opacity: 0; transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.35s ease-out; pointer-events: none; }
 .settings-drawer.anim-zoom.open { transform: scale(1); opacity: 1; pointer-events: auto; }
-.settings-drawer.anim-slide-top { right: 15px; transform: translateY(-120%); opacity: 0; transition: transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1), opacity 0.4s ease; pointer-events: none; }
+.settings-drawer.anim-slide-top { right: 15px; transform: translateY(-120%); opacity: 0; transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.35s ease-out; pointer-events: none; }
 .settings-drawer.anim-slide-top.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
-.settings-drawer.anim-fade { right: 15px; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
+.settings-drawer.anim-fade { right: 15px; opacity: 0; transition: opacity 0.45s cubic-bezier(0.32, 0.72, 0, 1); pointer-events: none; }
 .settings-drawer.anim-fade.open { opacity: 1; pointer-events: auto; }
\ No newline at end of file
diff --git a/Language/vi-VN.json b/Language/vi-VN.json
index 201c709..58343c6 100644
--- a/Language/vi-VN.json
+++ b/Language/vi-VN.json
@@ -1,47 +1,70 @@
 {
   "app_title": "Quick Control",
-  "settings_title": "⚙️ CÀI ĐẶT",
+  "settings_title": "CÀI ĐẶT",
+  "tab_appearance": "GIAO DIỆN",
+  "tab_title": "TIÊU ĐỀ",
+  "tab_frame": "KHUNG",
+  "tab_media": "NHẠC",
+  "tab_shadow": "ĐỔ BÓNG",
   "btn_list": "Danh sách",
   "btn_grid": "Lưới",
   "btn_export": "Xuất",
   "btn_import": "Nhập",
   "btn_edit_layout": "Sắp xếp",
+  "btn_reset_default": "Khôi phục mặc định",
   "btn_clear_bg": "Xóa ảnh nền",
-  "btn_config_copy": "📋 Sao chép",
-  "btn_config_apply": "✅ Áp dụng",
   "lbl_theme_presets": "🪄 Giao diện",
   "opt_preset_none": "Tự do tùy chỉnh",
   "opt_preset_vn": "🇻🇳 VietOS",
-  "opt_preset_neon_light": "Neon Sáng",
-  "opt_preset_neon_dark": "Neon Tối",
-  "opt_preset_Glass_button": "Nút thuỷ tinh",
-  "opt_preset_Dark_blue": "Xanh tối",
-  "opt_preset_Neon_glow": "Phát sáng neon",
-  "opt_preset_Convex_glass": "Kính cầu lồi",
-  "opt_preset_Purple_glass": "Thuỷ tinh tím",
-  "lbl_popup_anim": "✨ Hiệu ứng Popup Cài đặt",
-  "opt_popup_default": "Trượt từ phải sang (Mặc định)",
-  "opt_popup_zoom": "Thu phóng (macOS)",
-  "opt_popup_slide_top": "Trượt từ trên xuống",
-  "opt_popup_fade": "Làm mờ (Fade)",
+  "opt_preset_Green_button": "Nút xanh lá",
+  "opt_preset_White_button_(iPhone)": "Nút trắng (iPhone)",
+  "opt_preset_White_button_(iPad)": "Nút trắng (iPad)",
+  "opt_preset_neon_dark": "🌑 Neon Tối",
+  "opt_preset_gold": "👑 Gold",
+  "lbl_quick_palette": "🎨 Bảng màu danh sách",
+  "swatch_bg_main": "Màu nền chính",
+  "swatch_bg_main_short": "Nền",
+  "swatch_text_color": "Màu chữ hệ thống",
+  "swatch_text_color_short": "Chữ",
+  "swatch_list_bg": "Nền danh sách",
+  "swatch_list_bg_short": "Nền DS",
+  "swatch_list_text": "Chữ danh sách",
+  "swatch_list_text_short": "Chữ DS",
+  "swatch_list_svg": "SVG danh sách",
+  "swatch_list_svg_short": "SVG DS",
   "lbl_title_adjust": "Sửa tiêu đề",
-  "lbl_title_size": "🔠 Cỡ chữ chính",
-  "lbl_title_spacing": "📐 Dãn chữ chính",
-  "lbl_icon_size": "🔠 Cỡ chữ Icon",
-  "lbl_icon_spacing": "📐 Dãn chữ Icon",
+  "lbl_title_size": "🔠 Tên",
+  "lbl_title_spacing": "📐 Khoảng cách",
+  "lbl_icon_size": "🔠 iCon",
+  "lbl_icon_spacing": "📐 Khoảng cách",
   "lbl_hide_labels": "Ẩn tên",
-  "lbl_list_frame": "Theme cho Danh sách",
-  "lbl_list_bg_opacity": "Đậm nhạt màu nút",
+  "lbl_list_frame": "Chủ đề danh sách",
+  "lbl_list_bg_opacity": "Đậm nhạt",
   "lbl_audio_feedback": "🎚️ Âm thanh",
-  "lbl_parallax": "🧭 Gia tốc kế 3D",
+  "lbl_parallax": "🧭 Hiệu ứng 3D",
   "lbl_bg_image": "📱 Hình nền tự chọn",
+  "btn_choose_file": "Chọn tệp",
+  "file_none_selected": "chưa chọn tệp nào",
+  "file_selected_prefix": "Đã chọn: ",
   "lbl_glassmorphism": "Bật Kính mờ",
+  "info_title": "Quick Control",
+  "info_dev_prefix": "Phát triển bởi",
+  "info_desc": "Webclip điều khiển đa năng, tích hợp giao diện kính mờ và hệ thống Live Knobs tuỳ biến sống động chuyên nghiệp dành riêng cho iOS.",
+  "info_pill_follow": "Theo dõi",
+  "info_pill_contact": "Liên hệ",
+  "info_pill_about": "Thông tin",
+  "info_app_name": "Quick Control",
+  "info_version_label": "Phiên bản",
+  "info_dev_label": "Phát triển bởi",
+  "info_desc_title": "📝 Mô tả chức năng",
+  "info_guide_title": "📖 Hướng dẫn sử dụng",
+  "info_guide_desc": "1. Bấm vào nút bất kỳ để kích hoạt tính năng tương ứng (Wi-Fi, Bluetooth, VPN, Đèn pin...).\n\n2. Nhấn vào biểu tượng ⚙️ ở góc dưới phải để mở bảng Cài đặt tuỳ chỉnh.\n\n3. Chọn Theme có sẵn trong preset hoặc tự do kéo slider để tùy chỉnh màu sắc, kích thước khung, đổ bóng, kính mờ theo gu của bạn.\n\n4. Vào mục Giao diện → Xuất để lưu mã cấu hình, Nhập để khôi phục lại khi cần. Nên sao lưu mã trước khi xóa webclip.\n\n5. Slider âm lượng & độ sáng cần cài Shortcut tên \"QuickControl\" trong app Shortcuts để hoạt động.",
   "lbl_bg_main": "🏳️‍🌈 Màu Nền Chính",
   "lbl_text_color": "🏳️‍🌈 Màu Chữ Hệ Thống",
-  "lbl_list_bg": "Màu nền Danh sách",
-  "lbl_list_text": "Màu chữ Danh sách",
-  "lbl_list_svg": "Màu SVG Danh sách",
-  "lbl_theme_frame": "💠 CHỦ ĐỀ",
+  "lbl_list_bg": "🏳️‍🌈 Màu nền Danh sách",
+  "lbl_list_text": "🏳️‍🌈 Màu chữ Danh sách",
+  "lbl_list_svg": "🏳️‍🌈 Màu SVG Danh sách",
+  "lbl_theme_frame": "💠 CHỦ ĐỀ HỆ THỐNG",
   "lbl_frame_svg_size": "🖼️ Khung Icon & SVG",
   "lbl_frame_size": "Khung",
   "lbl_svg_size": "SVG",
@@ -49,7 +72,13 @@
   "lbl_frame_radius": "Bo góc",
   "lbl_frame_color": "Nền khung",
   "lbl_frame_bg_opacity": "Độ đậm nền",
-  "lbl_svg_color": "Màu SVG",
+  "lbl_popup_anim": "✨ Hiệu ứng Popup Cài đặt",
+  "opt_anim_default": "Trượt từ phải sang",
+  "opt_anim_zoom": "Thu phóng",
+  "opt_anim_slide_top": "Trượt từ trên xuống",
+  "opt_anim_fade": "Làm mờ",
+  "lbl_theme_store": "Kho Giao Diện",
+  "lbl_svg_color": "🏳️‍🌈 Màu SVG",
   "lbl_shadow_section": "🔘 ĐỔ BÓNG",
   "shadow_inset": "⚪️ Bóng Chìm",
   "shadow_outer": "⚪️ Bóng Ngoài",
@@ -62,25 +91,20 @@
   "slider_spread": "Lan rộng",
   "slider_color": "Màu Bóng",
   "slider_opacity": "Độ đậm bóng",
-  "lbl_layout_mode": "Danh sách/Lưới",
-  "lbl_media_widget": "🎵 Trình Phát Nhạc",
-  "lbl_media_width": "Kích thước khung",
-  "lbl_media_bg_opacity": "Độ mờ khung",
-  "lbl_media_btn_size": "Cỡ nút bấm",
-  "lbl_media_bg_color": "Màu khung",
-  "lbl_media_btn_color": "Màu nút",
-  "lbl_media_svg_color": "Màu SVG",
-  "msg_copy_success": "Đã sao chép mã cấu hình!",
+  "lbl_layout_mode": "💠 Danh sách/Lưới",
+  "msg_copy_success": "📄 Đã sao chép mã cấu hình!",
   "msg_prompt_import": "📥 Dán mã cấu hình vào đây:",
-  "modal_info_title": "Thông tin ứng dụng",
-  "modal_theme_title": "Kho Giao Diện",
-  "modal_config_title": "Cấu hình",
-  "modal_config_title_export": "📤 Xuất cấu hình",
-  "modal_config_title_import": "📥 Nhập cấu hình",
-  "config_placeholder": "Mã cấu hình...",
-  "info_title": "Quick Control",
-  "info_dev_prefix": "Phát triển bởi",
-  "info_desc": "Webclip điều khiển đa năng, tích hợp giao diện kính mờ và hệ thống Live Knobs tuỳ biến sống động chuyên nghiệp dành riêng cho iOS.",
+  "lbl_media_widget": "🎶 Trình Phát Nhạc",
+  "lbl_media_width": "📐 Kích thước khung",
+  "lbl_media_bg_opacity": "Độ mờ khung",
+  "lbl_media_btn_size": "📐 Cỡ nút bấm",
+  "lbl_media_bg_color": "🏳️‍🌈 Màu khung",
+  "lbl_media_btn_color": "🏳️‍🌈 Màu nút",
+  "lbl_media_svg_color": "🏳️‍🌈 Màu SVG",
+  "lbl_media_theme_sync": "Đồng bộ chủ đề hệ thống",
+  "lbl_theme_dot": "💠 Chủ đề núm kéo",
+  "lbl_thumb_size": "📐 Kích thước núm",
+  "lbl_thumb_color": "🏳️‍🌈 Màu núm kéo",
   "lang_wifi": "Wi-Fi",
   "lang_bluetooth": "Bluetooth",
   "lang_cellular": "Di động",
@@ -102,4 +126,4 @@
   "lang_airdrop": "Airdrop",
   "lang_text_to_speech": "Văn bản thành giọng nói",
   "lang_speech_to_text": "Giọng nói thành văn bản"
-}
+}
\ No newline at end of file
diff --git a/README.md b/README.md
index c5b42f2..1764732 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,6 @@
-# ⚡ Quick Control — Trung Tâm Điều Khiển Đa Năng Đỉnh Cao Cho iOS
+<p align="center">
+  <img src="https://capsule-render.vercel.app/api?type=waving&height=300&color=gradient&text=Quick%20Control%20&animation=fadeIn&textBg=false" alt="Banner Sentechtipsvn" />
+</p>
 
 <div align="center">
 
@@ -47,6 +49,7 @@
 ## 📲 Trải Nghiệm Ngay Lập Tức
 
 • Lấy phím tắt **Tại đây**
+
 • Thêm hồ sơ cấu hình [**Tại đây**](https://sentechtipsvn.github.io/Quick-Control/Quick-Control.mobileconfig)
 
 . Tận hưởng ngay trung tâm điều khiển đẳng cấp của riêng bạn!
@@ -56,4 +59,4 @@
 <div align="center">
   <p><b>Phát triển bởi <a href="https://browse.shortcuty.app/user/Sentechtipsvn">Sentechtipsvn</a></b></p>
   <p><i>Mang sự hoàn mỹ đến gần hơn với hệ sinh thái Apple của bạn.</i></p>
-</div>
\ No newline at end of file
+</div>
diff --git a/index.html b/index.html
index 9a5c048..6dc3924 100644
--- a/index.html
+++ b/index.html
@@ -8,7 +8,7 @@
     <meta name="apple-mobile-web-app-title" content="Control Panel">
     <link rel="apple-touch-icon" href="icon.png">
     <title>Trung tâm điều khiển - Sentechtipvn</title>
-    <link rel="stylesheet" href="CSS/style.css?v=10.4">
+    <link rel="stylesheet" href="CSS/style.css?v=14.2">
 </head>
 <body>
 
@@ -23,9 +23,7 @@
             </div>
             <div class="intro-title-wrapper">
                 <div class="intro-title-container" id="intro-text-wrapper">
-                    <span>Q</span><span>u</span><span>i</span><span>c</span><span>k</span>
-                    <span>&nbsp;</span>
-                    <span>C</span><span>o</span><span>n</span><span>t</span><span>r</span><span>o</span><span>l</span>
+                    <span>Q</span><span>u</span><span>i</span><span>c</span><span>k</span><span>&nbsp;</span><span>C</span><span>o</span><span>n</span><span>t</span><span>r</span><span>o</span><span>l</span>
                 </div>
             </div>
         </div>
@@ -35,172 +33,215 @@
         <div class="app-header" data-i18n="app_title">Quick Control</div>
         <div class="grid-layout" id="control-panel"></div>
         
+        <!-- ⭐ FIX: Media controls dùng <a href> thay vì <button onclick> -->
         <div class="media-player-widget">
             <div class="media-controls">
-                <button class="media-btn" id="btn-media-prev" onclick="location.href='shortcuts://run-shortcut?name=QuickControl&input=text&text=media_prev'">
-                    <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/></svg>
-                </button>
-                <button class="media-btn play-main" id="btn-media-play" onclick="location.href='shortcuts://run-shortcut?name=QuickControl&input=text&text=media_playpause'">
-                    <svg viewBox="0 0 24 24" width="26" height="26" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
-                </button>
-                <button class="media-btn" id="btn-media-next" onclick="location.href='shortcuts://run-shortcut?name=QuickControl&input=text&text=media_next'">
-                    <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6z"/></svg>
-                </button>
+                <a class="media-btn" id="btn-media-prev" href="shortcuts://run-shortcut?name=QuickControl&input=text&text=media_prev" aria-label="Previous">
+                    <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor" aria-hidden="true"><path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/></svg>
+                </a>
+                <a class="media-btn play-main" id="btn-media-play" href="shortcuts://run-shortcut?name=QuickControl&input=text&text=media_playpause" aria-label="Play">
+                    <svg viewBox="0 0 24 24" width="26" height="26" fill="currentColor" aria-hidden="true"><path d="M8 5v14l11-7z"/></svg>
+                </a>
+                <a class="media-btn" id="btn-media-next" href="shortcuts://run-shortcut?name=QuickControl&input=text&text=media_next" aria-label="Next">
+                    <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor" aria-hidden="true"><path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6z"/></svg>
+                </a>
             </div>
             <div class="system-sliders">
                 <div class="sys-slider-container">
                     <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/></svg>
-                    <input type="range" class="sys-slider" id="sys-volume" min="0" max="100" value="50" onchange="location.href='shortcuts://run-shortcut?name=QuickControl&input=text&text=vol_' + this.value">
+                    <input type="range" class="sys-slider" id="sys-volume" min="0" max="100" value="50" data-shortcut-prefix="vol_">
                 </div>
                 <div class="sys-slider-container">
                     <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41L5.99 4.58zm12.37 12.37c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41l-1.06-1.06zm1.06-10.96c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41.39.39 1.03.39 1.41 0l1.06-1.06zM7.05 18.36c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41.39.39 1.03.39 1.41 0l1.06-1.06z"/></svg>
-                    <input type="range" class="sys-slider" id="sys-brightness" min="0" max="100" value="50" onchange="location.href='shortcuts://run-shortcut?name=QuickControl&input=text&text=bri_' + this.value">
+                    <input type="range" class="sys-slider" id="sys-brightness" min="0" max="100" value="50" data-shortcut-prefix="bri_">
                 </div>
             </div>
         </div>
 
-        <button class="settings-fab" id="open-settings">
-            <img src="Theme/icon_setting.png" alt="Settings">
-        </button>
+        <button class="settings-fab" id="open-settings"><img src="Theme/icon_setting.png" alt="Settings"></button>
+        <button id="btn-confirm-sort" class="sort-fab hidden"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg></button>
     </div>
 
     <div class="settings-overlay" id="settings-overlay"></div>
-
     <div class="settings-drawer" id="settings-drawer">
+        
         <div class="settings-header">
-            <h2 data-i18n="settings_title">⚙️ Cài đặt</h2>
-            <button id="close-settings">✕</button>
+            <button id="close-settings" class="header-btn" aria-label="Close">✕</button>
+            <div class="header-title-pill" data-i18n="settings_title">CÀI ĐẶT</div>
+            <button id="btn-info" class="header-btn info-header-btn" aria-label="Info">i</button>
+        </div>
+
+        <div class="settings-tabs-bar">
+            <button class="settings-tab active" data-tab="tab-appearance" data-i18n="tab_appearance">🎨 Giao diện</button>
+            <button class="settings-tab" data-tab="tab-title" data-i18n="tab_title">✏️ Tiêu đề</button>
+            <button class="settings-tab" data-tab="tab-frame" data-i18n="tab_frame">🖼️ Khung</button>
+            <button class="settings-tab" data-tab="tab-media" data-i18n="tab_media">🎵 Media</button>
+            <button class="settings-tab dev-only" data-tab="tab-shadow" data-i18n="tab_shadow">🌑 Bóng</button>
         </div>
         
         <div class="settings-body">
-            <div class="config-actions">
-                <button id="btn-export" class="action-btn">📤 <span data-i18n="btn_export">Xuất</span></button>
-                <button id="btn-import" class="action-btn">📥 <span data-i18n="btn_import">Nhập</span></button>
-                <button id="btn-edit-layout" class="action-btn">🔄 <span data-i18n="btn_edit_layout">Sắp xếp</span></button>
-            </div>
 
-            <div class="setting-group highlight-box" style="position: relative;">
-                <label data-i18n="lbl_theme_presets">🪄 Giao diện <span class="badge-dot" id="badge-preset"></span></label>
-                <select id="val-theme-preset">
-                    <option value="none" data-i18n="opt_preset_none">Tự do tùy chỉnh</option>
-                    <option value="WyIjY2MwMDAwIiwiI2ZmZmZmZiIsImdyaWQiLCIjY2MwMDAwIiwiI2ZmZmZmZiIsIiNmZmZmMDAiLCJUaGVtZS9SZWQtQ29sb3VyLnBuZyIsIjYwIiwiMjgiLCIxMDAiLCI1MCIsIiNjYzAwMDAiLCIjZmZmZjAwIixbImdsb3ciLCIwIiwiMCIsIjE1IiwiMCIsIiNmZmZmMDAiLCIxMDAiXSxmYWxzZSwiMjIiLCIwLjUiLHRydWUsIjEwIiwiMCIsIjEwIiwiMTAwIiwiOTAiLCIzIiwiNTAiLCIjZmZmZmZmIiwiI2I1MWEwMCIsIiNmZmZmMDAiXQ==" data-i18n="opt_preset_vn">🇻🇳 VietOS</option>
-                    <option value="eyJiZ01haW4iOiIjZmZmZmZmIiwidGV4dENvbG9yIjoiIzAwMDAwMCIsImxheW91dE1vZGUiOiJncmlkIiwibGlzdEJnIjoiI2NjMDAwMCIsImxpc3RUZXh0IjoiI2ZmZmZmZiIsImxpc3RTdmciOiIjZmZmZjAwIiwidGhlbWVGcmFtZSI6IlRoZW1lL05lb25fcmFpbmJvdy5wbmciLCJmcmFtZVNpemUiOiI1NCIsInN2Z1NpemUiOiIyNSIsInN2Z09wYWNpdHkiOiIxMDAiLCJmcmFtZVJhZGl1cyI6IjUwIiwiZnJhbWVDb2xvciI6IiNjYzAwMDAiLCJzdmdDb2xvciI6IiNmZWZiNDEiLCJoaWRlTGFiZWxzIjpmYWxzZSwidGl0bGVTaXplIjoiMzYiLCJ0aXRsZVNwYWNpbmciOiIwLjUiLCJsaXN0RnJhbWUiOnRydWUsImljb25TaXplIjoiMTEiLCJpY29uU3BhY2luZyI6IjAiLCJsaXN0QmdPcGFjaXR5IjoiMTAiLCJmcmFtZUJnT3BhY2l0eSI6IjEwMCIsIm1lZGlhV2lkdGgiOiI5OCIsIm1lZGlhQmdPcGFjaXR5IjoiNDciLCJtZWRpYUJ0blNpemUiOiI1MCIsIm1lZGlhQmdDb2xvciI6IiNmZmZmZmYiLCJtZWRpYUJ0bkNvbG9yIjoiI2Q2ZDZkNiIsIm1lZGlhU3ZnQ29sb3IiOiIjZmVmYjQxIiwiZ2xhc3NNb2RlIjpmYWxzZSwicG9wdXBBbmltIjoiYW5pbS16b29tIiwic2hhZG93Q29uZmlnIjp7Imluc2V0Ijp7ImFjdGl2ZSI6ZmFsc2UsIngiOiIwIiwieSI6IjUiLCJiIjoiMCIsInMiOiItNCIsImMiOiIjZmZmZmZmIiwibyI6IjEwMCJ9LCJvdXRlciI6eyJhY3RpdmUiOnRydWUsIngiOiIwIiwieSI6IjYiLCJiIjoiNSIsInMiOiItMyIsImMiOiIjMDAwMDAwIiwibyI6IjEwMCJ9LCJzb2Z0Ijp7ImFjdGl2ZSI6ZmFsc2UsIngiOiIwIiwieSI6IjAiLCJiIjoiNyIsInMiOiIyIiwiYyI6IiNmZjQwMTUiLCJvIjoiMTAwIn0sImhhcmQiOnsiYWN0aXZlIjp0cnVlLCJ4IjoiMCIsInkiOiI0IiwiYiI6IjEwIiwicyI6IjAiLCJjIjoiIzQ3NDc0NyIsIm8iOiIxMDAifSwiZ2xvdyI6eyJhY3RpdmUiOmZhbHNlLCJ4IjoiMCIsInkiOiIwIiwiYiI6IjEyIiwicyI6IjAiLCJjIjoiI2UyMjQwMCIsIm8iOiI0OCJ9fX0=" data-i18n="opt_preset_Neon_light">Neon sáng</option>
-                    <option value="eyJiZ01haW4iOiIjMzMzMzMzIiwidGV4dENvbG9yIjoiI2ZmZmZmZiIsImxheW91dE1vZGUiOiJncmlkIiwibGlzdEJnIjoiI2NjMDAwMCIsImxpc3RUZXh0IjoiI2ZmZmZmZiIsImxpc3RTdmciOiIjZmZmZjAwIiwidGhlbWVGcmFtZSI6IlRoZW1lL05lb25fcmFpbmJvdy5wbmciLCJmcmFtZVNpemUiOiI1NCIsInN2Z1NpemUiOiIyNSIsInN2Z09wYWNpdHkiOiIxMDAiLCJmcmFtZVJhZGl1cyI6IjUwIiwiZnJhbWVDb2xvciI6IiNjYzAwMDAiLCJzdmdDb2xvciI6IiNmZWZiNDEiLCJoaWRlTGFiZWxzIjpmYWxzZSwidGl0bGVTaXplIjoiMzYiLCJ0aXRsZVNwYWNpbmciOiIwLjUiLCJsaXN0RnJhbWUiOnRydWUsImljb25TaXplIjoiMTEiLCJpY29uU3BhY2luZyI6IjAiLCJsaXN0QmdPcGFjaXR5IjoiMTAiLCJmcmFtZUJnT3BhY2l0eSI6IjEwMCIsIm1lZGlhV2lkdGgiOiI5OCIsIm1lZGlhQmdPcGFjaXR5IjoiMTAwIiwibWVkaWFCdG5TaXplIjoiNTAiLCJtZWRpYUJnQ29sb3IiOiIjMzMzMzMzIiwibWVkaWFCdG5Db2xvciI6IiMzMzMzMzMiLCJtZWRpYVN2Z0NvbG9yIjoiI2ZlZmI0MSIsImdsYXNzTW9kZSI6ZmFsc2UsInBvcHVwQW5pbSI6ImFuaW0tem9vbSIsInNoYWRvd0NvbmZpZyI6eyJpbnNldCI6eyJhY3RpdmUiOmZhbHNlLCJ4IjoiMCIsInkiOiI1IiwiYiI6IjAiLCJzIjoiLTQiLCJjIjoiI2ZmZmZmZiIsIm8iOiIxMDAifSwib3V0ZXIiOnsiYWN0aXZlIjp0cnVlLCJ4IjoiMCIsInkiOiI2IiwiYiI6IjkiLCJzIjoiLTIiLCJjIjoiIzAwMDAwMCIsIm8iOiIxMDAifSwic29mdCI6eyJhY3RpdmUiOmZhbHNlLCJ4IjoiMCIsInkiOiIwIiwiYiI6IjciLCJzIjoiMiIsImMiOiIjZmY0MDE1IiwibyI6IjEwMCJ9LCJoYXJkIjp7ImFjdGl2ZSI6dHJ1ZSwieCI6IjAiLCJ5IjoiLTgiLCJiIjoiMTIiLCJzIjoiLTIiLCJjIjoiIzk5OTk5OSIsIm8iOiI0NSJ9LCJnbG93Ijp7ImFjdGl2ZSI6ZmFsc2UsIngiOiIwIiwieSI6IjAiLCJiIjoiMTIiLCJzIjoiMCIsImMiOiIjZTIyNDAwIiwibyI6IjQ4In19fQ==" data-i18n="opt_preset_Dark_neon">Neon tối</option>
-                    <option value="eyJiZ01haW4iOiIjZDZkNmQ2IiwidGV4dENvbG9yIjoiIzAwMDAwMCIsImxheW91dE1vZGUiOiJncmlkIiwibGlzdEJnIjoiIzFhMWExYSIsImxpc3RUZXh0IjoiI2ZmZDcwMCIsImxpc3RTdmciOiIjZmZkNzAwIiwidGhlbWVGcmFtZSI6IlRoZW1lL2ljb24tR2xhc3MucG5nIiwiZnJhbWVTaXplIjoiNjAiLCJzdmdTaXplIjoiMjkiLCJzdmdPcGFjaXR5IjoiMTAwIiwiZnJhbWVSYWRpdXMiOiI1MCIsImZyYW1lQ29sb3IiOiIjMjIyMjIyIiwic3ZnQ29sb3IiOiIjMDAwMDAwIiwiaGlkZUxhYmVscyI6ZmFsc2UsInRpdGxlU2l6ZSI6IjM3IiwidGl0bGVTcGFjaW5nIjoiMSIsImxpc3RGcmFtZSI6dHJ1ZSwiaWNvblNpemUiOiIxMSIsImljb25TcGFjaW5nIjoiMCIsImxpc3RCZ09wYWNpdHkiOiIxMCIsImZyYW1lQmdPcGFjaXR5IjoiMTAwIiwibWVkaWFXaWR0aCI6IjkwIiwibWVkaWFCZ09wYWNpdHkiOiIzIiwibWVkaWFCdG5TaXplIjoiNTAiLCJtZWRpYUJnQ29sb3IiOiIjZmZmZmZmIiwibWVkaWFCdG5Db2xvciI6IiNhZGFkYWQiLCJtZWRpYVN2Z0NvbG9yIjoiIzAwMDAwMCIsImdsYXNzTW9kZSI6ZmFsc2UsInBvcHVwQW5pbSI6ImFuaW0tem9vbSIsInNoYWRvd0NvbmZpZyI6eyJpbnNldCI6eyJhY3RpdmUiOmZhbHNlLCJ4IjoiLTEyIiwieSI6Ii03IiwiYiI6IjQiLCJzIjoiLTEwIiwiYyI6IiMwMDAwMDAiLCJvIjoiMjEifSwib3V0ZXIiOnsiYWN0aXZlIjp0cnVlLCJ4IjoiMyIsInkiOiIzIiwiYiI6IjMiLCJzIjoiLTIiLCJjIjoiIzAwMDAwMCIsIm8iOiI2MCJ9LCJzb2Z0Ijp7ImFjdGl2ZSI6ZmFsc2UsIngiOiIwIiwieSI6IjAiLCJiIjoiNCIsInMiOiIxIiwiYyI6IiMwMDhjYjQiLCJvIjoiNDcifSwiaGFyZCI6eyJhY3RpdmUiOnRydWUsIngiOiItMyIsInkiOiItMyIsImIiOiI3IiwicyI6Ii0xIiwiYyI6IiNmZmZmZmYiLCJvIjoiNzQifSwiZ2xvdyI6eyJhY3RpdmUiOmZhbHNlLCJ4IjoiMCIsInkiOiIwIiwiYiI6IjciLCJzIjoiNSIsImMiOiIjNDc0NzQ3IiwibyI6IjQzIn19fQ==" data-i18n="opt_preset_Glass_button">Nút thuỷ tinh</option>
-                    <option value="eyJiZ01haW4iOiIjMzMzMzMzIiwidGV4dENvbG9yIjoiIzMyYzc1OSIsImxheW91dE1vZGUiOiJncmlkIiwibGlzdEJnIjoiIzFhMWExYSIsImxpc3RUZXh0IjoiI2ZmZDcwMCIsImxpc3RTdmciOiIjZmZkNzAwIiwidGhlbWVGcmFtZSI6IlRoZW1lL0JsYWNrX2JsdWVfYm9yZGVyLnBuZyIsImZyYW1lU2l6ZSI6IjYwIiwic3ZnU2l6ZSI6IjI5Iiwic3ZnT3BhY2l0eSI6IjEwMCIsImZyYW1lUmFkaXVzIjoiNTAiLCJmcmFtZUNvbG9yIjoiIzIyMjIyMiIsInN2Z0NvbG9yIjoiIzJiZmY0NyIsImhpZGVMYWJlbHMiOmZhbHNlLCJ0aXRsZVNpemUiOiIzNyIsInRpdGxlU3BhY2luZyI6IjEiLCJsaXN0RnJhbWUiOnRydWUsImljb25TaXplIjoiMTEiLCJpY29uU3BhY2luZyI6IjAiLCJsaXN0QmdPcGFjaXR5IjoiMTAiLCJmcmFtZUJnT3BhY2l0eSI6IjEwMCIsIm1lZGlhV2lkdGgiOiI5MSIsIm1lZGlhQmdPcGFjaXR5IjoiMTAwIiwibWVkaWFCdG5TaXplIjoiNTAiLCJtZWRpYUJnQ29sb3IiOiIjMDBlYmY3IiwibWVkaWFCdG5Db2xvciI6IiMzMzMzMzMiLCJtZWRpYVN2Z0NvbG9yIjoiIzMyYzc1OSIsImdsYXNzTW9kZSI6ZmFsc2UsInBvcHVwQW5pbSI6ImFuaW0tem9vbSIsInNoYWRvd0NvbmZpZyI6eyJpbnNldCI6eyJhY3RpdmUiOmZhbHNlLCJ4IjoiLTEyIiwieSI6Ii03IiwiYiI6IjQiLCJzIjoiLTEwIiwiYyI6IiMwMDAwMDAiLCJvIjoiMjEifSwib3V0ZXIiOnsiYWN0aXZlIjp0cnVlLCJ4IjoiLTIiLCJ5IjoiNCIsImIiOiI4IiwicyI6Ii0xIiwiYyI6IiMwMDBiMDgiLCJvIjoiMTAwIn0sInNvZnQiOnsiYWN0aXZlIjpmYWxzZSwieCI6IjAiLCJ5IjoiMCIsImIiOiI0IiwicyI6IjEiLCJjIjoiIzAwOGNiNCIsIm8iOiI0NyJ9LCJoYXJkIjp7ImFjdGl2ZSI6ZmFsc2UsIngiOiItMyIsInkiOiItMyIsImIiOiI3IiwicyI6Ii0xIiwiYyI6IiNmZmZmZmYiLCJvIjoiNzQifSwiZ2xvdyI6eyJhY3RpdmUiOmZhbHNlLCJ4IjoiMCIsInkiOiIwIiwiYiI6IjciLCJzIjoiNSIsImMiOiIjNDc0NzQ3IiwibyI6IjQzIn19fQ==" data-i18n="opt_preset_Dark_blue">Xanh tối</option>
-                    <option value="eyJiZ01haW4iOiIjMDAwMDAwIiwidGV4dENvbG9yIjoiI2ZmZmZmZiIsImxheW91dE1vZGUiOiJncmlkIiwibGlzdEJnIjoiIzFhMWExYSIsImxpc3RUZXh0IjoiI2ZmZDcwMCIsImxpc3RTdmciOiIjZmZkNzAwIiwidGhlbWVGcmFtZSI6IlRoZW1lL25lb25fYmxhY2sucG5nIiwiZnJhbWVTaXplIjoiNjAiLCJzdmdTaXplIjoiMjkiLCJzdmdPcGFjaXR5IjoiMTAwIiwiZnJhbWVSYWRpdXMiOiI1MCIsImZyYW1lQ29sb3IiOiIjMjIyMjIyIiwic3ZnQ29sb3IiOiIjZmZmZmZmIiwiaGlkZUxhYmVscyI6ZmFsc2UsInRpdGxlU2l6ZSI6IjM3IiwidGl0bGVTcGFjaW5nIjoiMSIsImxpc3RGcmFtZSI6dHJ1ZSwiaWNvblNpemUiOiIxMSIsImljb25TcGFjaW5nIjoiMCIsImxpc3RCZ09wYWNpdHkiOiIxMCIsImZyYW1lQmdPcGFjaXR5IjoiMTAwIiwibWVkaWFXaWR0aCI6IjkxIiwibWVkaWFCZ09wYWNpdHkiOiIxMDAiLCJtZWRpYUJ0blNpemUiOiI1MCIsIm1lZGlhQmdDb2xvciI6IiMwMDAwMDAiLCJtZWRpYUJ0bkNvbG9yIjoiIzAwNDJhOSIsIm1lZGlhU3ZnQ29sb3IiOiIjMzJjNzU5IiwiZ2xhc3NNb2RlIjpmYWxzZSwicG9wdXBBbmltIjoiYW5pbS16b29tIiwic2hhZG93Q29uZmlnIjp7Imluc2V0Ijp7ImFjdGl2ZSI6ZmFsc2UsIngiOiItMTIiLCJ5IjoiLTciLCJiIjoiNCIsInMiOiItMTAiLCJjIjoiIzAwMDAwMCIsIm8iOiIyMSJ9LCJvdXRlciI6eyJhY3RpdmUiOmZhbHNlLCJ4IjoiLTIiLCJ5IjoiNCIsImIiOiI4IiwicyI6Ii0xIiwiYyI6IiMwMDBiMDgiLCJvIjoiMTAwIn0sInNvZnQiOnsiYWN0aXZlIjpmYWxzZSwieCI6IjAiLCJ5IjoiMCIsImIiOiI0IiwicyI6IjEiLCJjIjoiIzAwOGNiNCIsIm8iOiI0NyJ9LCJoYXJkIjp7ImFjdGl2ZSI6ZmFsc2UsIngiOiItMyIsInkiOiItMyIsImIiOiI3IiwicyI6Ii0xIiwiYyI6IiNmZmZmZmYiLCJvIjoiNzQifSwiZ2xvdyI6eyJhY3RpdmUiOnRydWUsIngiOiIwIiwieSI6IjAiLCJiIjoiMTQiLCJzIjoiMCIsImMiOiIjY2JmMGZmIiwibyI6IjEwMCJ9fX0=" data-i18n="opt_preset_Neon_glow">Phát sáng neon</option>
-                    <option value="eyJiZ01haW4iOiIjZWJlYmViIiwidGV4dENvbG9yIjoiIzAwMDAwMCIsImxheW91dE1vZGUiOiJncmlkIiwibGlzdEJnIjoiI2NjMDAwMCIsImxpc3RUZXh0IjoiI2ZmZmZmZiIsImxpc3RTdmciOiIjZmZmZjAwIiwidGhlbWVGcmFtZSI6IlRoZW1lL0NvbnZleF9nbGFzcy5wbmciLCJmcmFtZVNpemUiOiI1NiIsInN2Z1NpemUiOiIzMCIsInN2Z09wYWNpdHkiOiIxMDAiLCJmcmFtZVJhZGl1cyI6IjUwIiwiZnJhbWVDb2xvciI6IiNjYzAwMDAiLCJzdmdDb2xvciI6IiMwMDAwMDAiLCJoaWRlTGFiZWxzIjpmYWxzZSwidGl0bGVTaXplIjoiMzQiLCJ0aXRsZVNwYWNpbmciOiIwIiwibGlzdEZyYW1lIjp0cnVlLCJpY29uU2l6ZSI6IjEwIiwiaWNvblNwYWNpbmciOiIwIiwibGlzdEJnT3BhY2l0eSI6IjEwIiwiZnJhbWVCZ09wYWNpdHkiOiIxMDAiLCJtZWRpYVdpZHRoIjoiOTgiLCJtZWRpYUJnT3BhY2l0eSI6IjI2IiwibWVkaWFCdG5TaXplIjoiNTciLCJtZWRpYUJnQ29sb3IiOiIjZWJlYmViIiwibWVkaWFCdG5Db2xvciI6IiNlYmViZWIiLCJtZWRpYVN2Z0NvbG9yIjoiIzAwMDAwMCIsImdsYXNzTW9kZSI6ZmFsc2UsInBvcHVwQW5pbSI6ImFuaW0tem9vbSIsInNoYWRvd0NvbmZpZyI6eyJpbnNldCI6eyJhY3RpdmUiOmZhbHNlLCJ4IjoiMCIsInkiOiIwIiwiYiI6IjkiLCJzIjoiLTEiLCJjIjoiI2JlMzhmMyIsIm8iOiIxMDAifSwib3V0ZXIiOnsiYWN0aXZlIjp0cnVlLCJ4IjoiMCIsInkiOiIwIiwiYiI6IjUiLCJzIjoiMCIsImMiOiIjMDAxMDM2IiwibyI6IjEwMCJ9LCJzb2Z0Ijp7ImFjdGl2ZSI6ZmFsc2UsIngiOiIwIiwieSI6IjAiLCJiIjoiNCIsInMiOiIxIiwiYyI6IiMwMDhjYjQiLCJvIjoiNDcifSwiaGFyZCI6eyJhY3RpdmUiOmZhbHNlLCJ4IjoiNCIsInkiOiI1IiwiYiI6IjYiLCJzIjoiLTEiLCJjIjoiIzllNTlmZiIsIm8iOiI3NyJ9LCJnbG93Ijp7ImFjdGl2ZSI6ZmFsc2UsIngiOiIwIiwieSI6IjAiLCJiIjoiMjIiLCJzIjoiLTUiLCJjIjoiI2QzNTdmZSIsIm8iOiIxMDAifX19" data-i18n="opt_preset_Convex_glass">Kính cầu lồi</option>
-                    <option value="eyJiZ01haW4iOiIjZmZmZmZmIiwidGV4dENvbG9yIjoiIzAwMDAwMCIsImxheW91dE1vZGUiOiJncmlkIiwibGlzdEJnIjoiIzFhMWExYSIsImxpc3RUZXh0IjoiI2ZmZmZmZiIsImxpc3RTdmciOiIjZmZmZmZmIiwidGhlbWVGcmFtZSI6IlRoZW1lL0NvbnZleF9nbGFzcy5wbmciLCJmcmFtZVNpemUiOiI2MCIsInN2Z1NpemUiOiIyOCIsInN2Z09wYWNpdHkiOiIxMDAiLCJmcmFtZVJhZGl1cyI6IjUwIiwiZnJhbWVDb2xvciI6IiMwMDAwMDAiLCJzdmdDb2xvciI6IiMwMDAwMDAiLCJoaWRlTGFiZWxzIjpmYWxzZSwidGl0bGVTaXplIjoiMjIiLCJ0aXRsZVNwYWNpbmciOiIwLjUiLCJsaXN0RnJhbWUiOmZhbHNlLCJpY29uU2l6ZSI6IjEyIiwiaWNvblNwYWNpbmciOiIwIiwibGlzdEJnT3BhY2l0eSI6IjEwIiwiZnJhbWVCZ09wYWNpdHkiOiIxMDAiLCJtZWRpYVdpZHRoIjoiOTAiLCJtZWRpYUJnT3BhY2l0eSI6IjEwMCIsIm1lZGlhQnRuU2l6ZSI6IjQ2IiwibWVkaWFCZ0NvbG9yIjoiI2ZmZmZmZiIsIm1lZGlhQnRuQ29sb3IiOiIjZmZmZmZmIiwibWVkaWFTdmdDb2xvciI6IiMwMDAwMDAiLCJnbGFzc01vZGUiOmZhbHNlLCJwb3B1cEFuaW0iOiJhbmltLWZhZGUiLCJzaGFkb3dDb25maWciOnsiaW5zZXQiOnsiYWN0aXZlIjpmYWxzZSwieCI6IjAiLCJ5IjoiNCIsImIiOiIxMCIsInMiOiIwIiwiYyI6IiMwMDAwMDAiLCJvIjoiMTAwIn0sIm91dGVyIjp7ImFjdGl2ZSI6ZmFsc2UsIngiOiIwIiwieSI6IjQiLCJiIjoiMTAiLCJzIjoiMCIsImMiOiIjMDAwMDAwIiwibyI6IjEwMCJ9LCJzb2Z0Ijp7ImFjdGl2ZSI6ZmFsc2UsIngiOiIwIiwieSI6IjQiLCJiIjoiMTAiLCJzIjoiMCIsImMiOiIjMDAwMDAwIiwibyI6IjEwMCJ9LCJoYXJkIjp7ImFjdGl2ZSI6ZmFsc2UsIngiOiIwIiwieSI6IjQiLCJiIjoiMTAiLCJzIjoiMCIsImMiOiIjMDAwMDAwIiwibyI6IjEwMCJ9LCJnbG93Ijp7ImFjdGl2ZSI6dHJ1ZSwieCI6IjAiLCJ5IjoiLTEiLCJiIjoiNSIsInMiOiIxIiwiYyI6IiNiZTM4ZjMiLCJvIjoiMTAwIn19fQ==" data-i18n="opt_preset_Purple_glass">Thuỷ tinh tím</option>
-                </select>
+            <div class="settings-tab-content active" data-tab="tab-appearance">
+                <div class="config-actions">
+                    <button id="btn-export" class="action-btn">📤 <span data-i18n="btn_export">Xuất</span></button>
+                    <button id="btn-import" class="action-btn">📥 <span data-i18n="btn_import">Nhập</span></button>
+                    <button id="btn-edit-layout" class="action-btn">🔄 <span data-i18n="btn_edit_layout">Sắp xếp</span></button>
+                </div>
+
+                <div class="config-actions-secondary">
+                    <button id="btn-reset-default" class="action-btn danger">↺ <span data-i18n="btn_reset_default">Khôi phục mặc định</span></button>
+                </div>
+
+                <div class="setting-group highlight-box" style="position: relative;">
+                    <label data-i18n="lbl_theme_presets">🪄 Giao diện <span class="badge-dot" id="badge-preset"></span></label>
+                    <select id="val-theme-preset">
+                        <option value="none" data-i18n="opt_preset_none">Tự do tùy chỉnh</option>
+                        <option value="%2376bb40%7C%23ffffff%7Cgrid%7C%2300a1d8%7C%23e22400%7C%2361187c%7CTheme%2FGreen-colour.png%7C63%7C30%7C100%7C50%7C%23f7fadb%7C%23ffffff%7C0%7C28%7C0.5%7C1%7C11%7C0%7C100%7C100%7C90%7C30%7C50%7C%23ffffff%7C%2376bb40%7C%23ffffff%7C0%7Canim-slide-top%7Couter*-2*7*8*1*%23000000*40~soft*0*0*6*0*%2338571a*50" data-i18n="opt_preset_Green_button">Nút xanh lá</option>
+                        <option value="%23c2c2c2%7C%23000000%7Cgrid%7C%2300a1d8%7C%23e22400%7C%2361187c%7CTheme%2FWhite_button.png%7C100%7C45%7C100%7C50%7C%23f7fadb%7C%23000000%7C0%7C40%7C0.5%7C1%7C15%7C0%7C100%7C100%7C100%7C100%7C63%7C%23c2c2c2%7C%23c2c2c2%7C%23000000%7C0%7Canim-slide-top%7Couter*-2*7*8*2*%23000000*40~hard*0*-1*8*8*%23ffffff*50%7C1" data-i18n="opt_preset_White_button_(iPad)">Nút trắng (iPad)</option>
+                        <option value="%23c2c2c2%7C%23000000%7Cgrid%7C%2300a1d8%7C%23e22400%7C%2361187c%7CTheme%2FWhite_button.png%7C65%7C30%7C100%7C50%7C%23f7fadb%7C%23000000%7C0%7C30%7C10%7C1%7C10%7C0%7C100%7C100%7C90%7C100%7C47%7C%23c2c2c2%7C%23c2c2c2%7C%23000000%7C0%7Canim-slide-top%7Couter*-2*7*8*2*%23000000*40~hard*0*-1*8*8*%23ffffff*50%7C1" data-i18n="opt_preset_White_button_(iPhone)">Nút trắng (iPhone)</option>
+                        <option value="%23474747%7C%23ffffff%7Cgrid%7C%2300a1d8%7C%23e22400%7C%2361187c%7CTheme%2FBlack-Colour.png%7C63%7C30%7C100%7C50%7C%23474747%7C%23ffffff%7C0%7C28%7C6.5%7C1%7C11%7C0%7C100%7C100%7C90%7C100%7C50%7C%23474747%7C%2376bb40%7C%23ffffff%7C0%7Canim-slide-top%7Couter*5*5*5*0*%23000000*55~glow*0*0*9*0*%23ffffff*65%7C1" data-i18n="opt_preset_Dark_Neon">Neon Tối</option>
+                    </select>
 
-                <label style="margin-top: 10px;" data-i18n="lbl_popup_anim">✨ Hiệu ứng Popup Cài đặt</label>
-                <select id="val-popup-anim">
-                    <option value="default" data-i18n="opt_popup_default">Trượt từ phải sang (Mặc định)</option>
-                    <option value="anim-zoom" data-i18n="opt_popup_zoom">Thu phóng (macOS)</option>
-                    <option value="anim-slide-top" data-i18n="opt_popup_slide_top">Trượt từ trên xuống</option>
-                    <option value="anim-fade" data-i18n="opt_popup_fade">Làm mờ (Fade)</option>
-                </select>
+                    <label style="margin-top: 10px;" data-i18n="lbl_popup_anim">✨ Hiệu ứng Popup Cài đặt</label>
+                    <select id="val-popup-anim">
+                        <option value="default" data-i18n="opt_anim_default">Trượt từ phải sang (Mặc định)</option>
+                        <option value="anim-zoom" data-i18n="opt_anim_zoom">Thu phóng (macOS)</option>
+                        <option value="anim-slide-top" data-i18n="opt_anim_slide_top">Trượt từ trên xuống</option>
+                        <option value="anim-fade" data-i18n="opt_anim_fade">Làm mờ (Fade)</option>
+                    </select>
 
-                <div class="feature-toggles">
-                    <label><span data-i18n="lbl_audio_feedback">🎚️ Âm thanh</span><input type="checkbox" id="toggle-audio"></label>
-                    <label><span data-i18n="lbl_parallax">🧭 Gia tốc kế 3D</span><input type="checkbox" id="toggle-parallax"></label>
+                    <div class="feature-toggles">
+                        <label><span data-i18n="lbl_audio_feedback">🎚️ Âm thanh</span><input type="checkbox" id="toggle-audio"></label>
+                        <label><span data-i18n="lbl_parallax">🧭 Gia tốc kế 3D</span><input type="checkbox" id="toggle-parallax"></label>
+                    </div>
                 </div>
-            </div>
 
-            <div class="setting-group highlight-box">
-                <label data-i18n="lbl_title_adjust">Sửa tiêu đề</label>
-                <div class="slider-item"><span class="slider-label" data-i18n="lbl_title_size">💫 Cỡ chữ chính</span><input type="range" id="val-title-size" min="14" max="40" value="22"></div>
-                <div class="slider-item"><span class="slider-label" data-i18n="lbl_title_spacing">📐 Dãn chữ chính</span><input type="range" id="val-title-spacing" min="0" max="10" step="0.5" value="0.5"></div>
-                <hr style="border: 0; border-top: 1px solid rgba(150,150,150,0.2); margin: 10px 0;">
-                <div class="slider-item"><span class="slider-label" data-i18n="lbl_icon_size">💫 Cỡ chữ Icon</span><input type="range" id="val-icon-size" min="10" max="25" value="14"></div>
-                <div class="slider-item"><span class="slider-label" data-i18n="lbl_icon_spacing">📐 Dãn chữ Icon</span><input type="range" id="val-icon-spacing" min="0" max="5" step="0.1" value="0"></div>
-                <label style="margin-top: 10px;"><input type="checkbox" id="toggle-hide-labels"> <span data-i18n="lbl_hide_labels">Ẩn tên</span></label>
-            </div>
+                <div class="setting-group highlight-box">
+                    <label data-i18n="lbl_quick_palette">🎨 Bảng màu nhanh</label>
+                    <div class="color-swatch-row">
+                        <div class="color-swatch" data-label="Nền" data-i18n-title="swatch_bg_main">
+                            <input type="color" id="val-bg-main" value="#121b22">
+                            <span class="swatch-label" data-i18n="swatch_bg_main_short">Nền</span>
+                        </div>
+                        <div class="color-swatch" data-label="Chữ" data-i18n-title="swatch_text_color">
+                            <input type="color" id="val-text-color" value="#ffffff">
+                            <span class="swatch-label" data-i18n="swatch_text_color_short">Chữ</span>
+                        </div>
+                        <div class="color-swatch" data-label="Nền DS" data-i18n-title="swatch_list_bg">
+                            <input type="color" id="val-list-bg" value="#1a1a1a">
+                            <span class="swatch-label" data-i18n="swatch_list_bg_short">Nền DS</span>
+                        </div>
+                        <div class="color-swatch" data-label="Chữ DS" data-i18n-title="swatch_list_text">
+                            <input type="color" id="val-list-text" value="#ffffff">
+                            <span class="swatch-label" data-i18n="swatch_list_text_short">Chữ DS</span>
+                        </div>
+                        <div class="color-swatch" data-label="SVG DS" data-i18n-title="swatch_list_svg">
+                            <input type="color" id="val-list-svg" value="#ffffff">
+                            <span class="swatch-label" data-i18n="swatch_list_svg_short">SVG DS</span>
+                        </div>
+                    </div>
+                </div>
 
-            <div class="setting-group">
-                <label data-i18n="lbl_bg_image">📱 Hình nền tự chọn</label>
-                <input type="file" id="upload-bg" accept="image/*" style="font-size: 12px;">
-                <button type="button" id="clear-bg" data-i18n="btn_clear_bg" style="margin-top:5px; padding:5px; background:rgba(150,150,150,0.2); border:none; color:inherit; border-radius:5px;">Xóa ảnh nền</button>
-            </div>
-            
-            <div class="setting-group">
-                <label><input type="checkbox" id="toggle-glass"> <span data-i18n="lbl_glassmorphism">Bật Kính mờ</span></label>
-            </div>
+                <div class="setting-group">
+                    <label data-i18n="lbl_bg_image">📱 Hình nền tự chọn</label>
+                    
+                    <label class="file-input-wrapper" for="upload-bg">
+                        <input type="file" id="upload-bg" accept="image/*">
+                        <span class="file-input-btn" data-i18n="btn_choose_file">Chọn tệp</span>
+                        <span class="file-input-name" id="file-name-display" data-i18n="file_none_selected">chưa chọn tệp nào</span>
+                    </label>
+                    
+                    <button type="button" id="clear-bg" class="clear-bg-btn" data-i18n="btn_clear_bg">Xóa ảnh nền</button>
+                </div>
+                
+                <div class="setting-group"><label><input type="checkbox" id="toggle-glass"> <span data-i18n="lbl_glassmorphism">Bật Kính mờ</span></label></div>
 
-            <div class="setting-group dev-only">
-                <label data-i18n="lbl_bg_main">🏳️‍🌈 Màu Nền Chính</label><input type="color" id="val-bg-main" value="#121b22">
-            </div>
-            <div class="setting-group">
-                <label data-i18n="lbl_text_color">🏳️‍🌈 Màu Chữ Hệ Thống</label><input type="color" id="val-text-color" value="#ffffff">
-            </div>
+                <div class="setting-group">
+                    <label data-i18n="lbl_layout_mode">Danh sách/Lưới</label>
+                    <div class="layout-buttons">
+                        <button id="btn-layout-list" class="layout-btn" data-i18n="btn_list">Danh sách</button>
+                        <button id="btn-layout-grid" class="layout-btn active" data-i18n="btn_grid">Lưới</button>
+                    </div>
+                </div>
 
-            <div class="setting-group">
-                <label data-i18n="lbl_layout_mode">Danh sách/Lưới</label>
-                <div class="layout-buttons">
-                    <button id="btn-layout-list" class="layout-btn" data-i18n="btn_list">Danh sách</button>
-                    <button id="btn-layout-grid" class="layout-btn active" data-i18n="btn_grid">Lưới</button>
+                <div class="setting-group highlight-box">
+                    <div class="slider-item" style="margin-top: 10px;"><span class="slider-label" data-i18n="lbl_list_bg_opacity" style="width: 120px;">Đậm nhạt màu nút</span><input type="range" id="val-list-bg-opacity" min="0" max="100" value="10"></div>
+                    <label style="margin-top: 10px;"><input type="checkbox" id="toggle-list-frame"> <span data-i18n="lbl_list_frame">Theme cho Danh sách</span></label>
+                </div>
+                
+                <div class="setting-group" style="position: relative;">
+                    <label data-i18n="lbl_theme_frame">💠 CHỦ ĐỀ <span class="badge-dot" id="badge-theme"></span></label>
+                    <div class="theme-grid-picker">
+                        <div class="theme-chip active" data-value="none"><span style="font-size: 18px;">❌</span></div>
+                        <div class="theme-chip" data-value="Theme/Black-Colour.png"><img src="Theme/Black-Colour.png" alt="Black"></div>
+                        <div class="theme-chip" data-value="Theme/Red-Colour.png"><img src="Theme/Red-Colour.png" alt="Red"></div>
+                        <div class="theme-chip" data-value="Theme/Green-colour.png"><img src="Theme/Green-colour.png" alt="Green"></div>
+                        <div class="theme-chip" data-value="Theme/Orange-colour.png"><img src="Theme/Orange-colour.png" alt="Orange"></div>
+                        <div class="theme-chip-more" id="btn-more-themes"><span>+</span></div>
+                    </div>
+                    <input type="hidden" id="val-theme-frame" value="none">
                 </div>
             </div>
 
-            <div class="setting-group highlight-box dev-only">
-                <label data-i18n="lbl_list_bg">Màu nền Danh sách</label><input type="color" id="val-list-bg" value="#1a1a1a">
-                <label data-i18n="lbl_list_text">Màu chữ Danh sách</label><input type="color" id="val-list-text" value="#ffffff">
-                <label data-i18n="lbl_list_svg">Màu SVG Danh sách</label><input type="color" id="val-list-svg" value="#ffffff">
-                <div class="slider-item" style="margin-top: 10px;">
-                    <span class="slider-label" data-i18n="lbl_list_bg_opacity" style="width: 120px;">Đậm nhạt màu nút</span>
-                    <input type="range" id="val-list-bg-opacity" min="0" max="100" value="10">
+            <div class="settings-tab-content" data-tab="tab-title">
+                <div class="setting-group highlight-box">
+                    <label data-i18n="lbl_title_adjust">Sửa tiêu đề</label>
+                    <div class="slider-item"><span class="slider-label" data-i18n="lbl_title_size">💫 Cỡ chữ chính</span><input type="range" id="val-title-size" min="14" max="40" value="22"></div>
+                    <div class="slider-item"><span class="slider-label" data-i18n="lbl_title_spacing">📐 Dãn chữ chính</span><input type="range" id="val-title-spacing" min="0" max="10" step="0.5" value="0.5"></div>
+                    <hr style="border: 0; border-top: 1px solid rgba(150,150,150,0.2); margin: 10px 0;">
+                    <div class="slider-item"><span class="slider-label" data-i18n="lbl_icon_size">💫 Cỡ chữ Icon</span><input type="range" id="val-icon-size" min="10" max="25" value="14"></div>
+                    <div class="slider-item"><span class="slider-label" data-i18n="lbl_icon_spacing">📐 Dãn chữ Icon</span><input type="range" id="val-icon-spacing" min="0" max="5" step="0.1" value="0"></div>
+                    <label style="margin-top: 10px;"><input type="checkbox" id="toggle-hide-labels"> <span data-i18n="lbl_hide_labels">Ẩn tên</span></label>
                 </div>
-                <label style="margin-top: 10px;"><input type="checkbox" id="toggle-list-frame"> <span data-i18n="lbl_list_frame">Theme cho Danh sách</span></label>
             </div>
-            
-            <div class="setting-group" style="position: relative;">
-                <label data-i18n="lbl_theme_frame">💠 Theme SVG <span class="badge-dot" id="badge-theme"></span></label>
-                <div class="theme-grid-picker">
-                    <div class="theme-chip active" data-value="none"><span style="font-size: 18px;">❌</span></div>
-                    <div class="theme-chip" data-value="Theme/Black-Colour.png"><img src="Theme/Black-Colour.png" alt="Black"></div>
-                    <div class="theme-chip" data-value="Theme/Red-Colour.png"><img src="Theme/Red-Colour.png" alt="Red"></div>
-                    <div class="theme-chip" data-value="Theme/Green-colour.png"><img src="Theme/Green-colour.png" alt="Green"></div>
-                    <div class="theme-chip" data-value="Theme/Orange-colour.png"><img src="Theme/Orange-colour.png" alt="Orange"></div>
-                    
-                    <div class="theme-chip" data-value="Theme/Purple-colour.png"><img src="Theme/Purple-colour.png" alt="Purple"></div>
-                    <div class="theme-chip" data-value="Theme/Moss-green.png"><img src="Theme/Moss-green.png" alt="Moss"></div>
-                    <div class="theme-chip" data-value="Theme/icon-Glass.png"><img src="Theme/icon-Glass.png" alt="Glass"></div>
-                    <div class="theme-chip" data-value="Theme/Convex_glass.png"><img src="Theme/Convex_glass.png" alt="Convex glass"></div>
-                    <div class="theme-chip-more" id="btn-more-themes"><span>+</span></div>
+
+            <div class="settings-tab-content" data-tab="tab-frame">
+                <div class="setting-group">
+                    <label data-i18n="lbl_svg_color">🏳️‍🌈 Màu Icon (SVG)</label>
+                    <input type="color" id="val-svg-color" value="#ffffff">
                 </div>
-                <input type="hidden" id="val-theme-frame" value="none">
-            </div>
-            
-            <div class="setting-group dev-only">
-                <label data-i18n="lbl_frame_svg_size">🖼️ Khung Icon & SVG</label>
-                <div class="slider-item"><span class="slider-label" data-i18n="lbl_frame_size">Khung</span><input type="range" id="val-frame-size" min="40" max="100" value="60"></div>
-                <div class="slider-item"><span class="slider-label" data-i18n="lbl_frame_radius">Bo góc</span><input type="range" id="val-frame-radius" min="0" max="50" value="22"></div>
-                <div class="slider-item"><span class="slider-label" data-i18n="lbl_svg_size">SVG</span><input type="range" id="val-svg-size" min="16" max="60" value="28"></div>
-                <div class="slider-item"><span class="slider-label" data-i18n="lbl_svg_opacity">Độ đậm SVG</span><input type="range" id="val-svg-opacity" min="0" max="100" value="100"></div>
-                <div class="slider-item"><span class="slider-label" data-i18n="lbl_frame_color">Nền khung</span><input type="color" id="val-frame-color" value="#000000"></div>
-                <div class="slider-item" style="margin-top: 5px;">
-                    <span class="slider-label" data-i18n="lbl_frame_bg_opacity">Độ đậm nền</span><input type="range" id="val-frame-bg-opacity" min="0" max="100" value="100">
+
+                <div class="setting-group">
+                    <label data-i18n="lbl_frame_svg_size">🖼️ Khung Icon & SVG</label>
+                    <div class="slider-item"><span class="slider-label" data-i18n="lbl_frame_size">Khung</span><input type="range" id="val-frame-size" min="40" max="100" value="60"></div>
+                    <div class="slider-item"><span class="slider-label" data-i18n="lbl_frame_radius">Bo góc</span><input type="range" id="val-frame-radius" min="0" max="50" value="22"></div>
+                    <div class="slider-item"><span class="slider-label" data-i18n="lbl_svg_size">SVG</span><input type="range" id="val-svg-size" min="16" max="60" value="28"></div>
+                    <div class="slider-item"><span class="slider-label" data-i18n="lbl_svg_opacity">Độ đậm SVG</span><input type="range" id="val-svg-opacity" min="0" max="100" value="100"></div>
+                    <div class="slider-item"><span class="slider-label" data-i18n="lbl_frame_color">Nền khung</span><input type="color" id="val-frame-color" value="#000000"></div>
+                    <div class="slider-item" style="margin-top: 5px;"><span class="slider-label" data-i18n="lbl_frame_bg_opacity">Độ đậm nền</span><input type="range" id="val-frame-bg-opacity" min="0" max="100" value="100"></div>
                 </div>
             </div>
-            
-            <div class="setting-group">
-                <label data-i18n="lbl_svg_color">Màu SVG</label><input type="color" id="val-svg-color" value="#ffffff">
+
+            <div class="settings-tab-content" data-tab="tab-media">
+                <div class="setting-group highlight-box">
+                    <label data-i18n="lbl_media_widget">🎵 Trình Phát Nhạc</label>
+                    <div class="slider-item"><span class="slider-label" data-i18n="lbl_media_width">Kích thước khung</span><input type="range" id="val-media-width" min="50" max="100" value="90"></div>
+                    <div class="slider-item"><span class="slider-label" data-i18n="lbl_media_bg_opacity">Độ mờ khung</span><input type="range" id="val-media-bg-opacity" min="0" max="100" value="3"></div>
+                    <div class="slider-item"><span class="slider-label" data-i18n="lbl_media_btn_size">Cỡ nút bấm</span><input type="range" id="val-media-btn-size" min="30" max="70" value="50"></div>
+                    <div class="slider-item"><span class="slider-label" data-i18n="lbl_thumb_size">Kích thước núm</span><input type="range" id="val-thumb-size" min="10" max="40" value="25"></div>
+                    <div class="slider-item"><span class="slider-label" data-i18n="lbl_media_bg_color">Màu khung</span><input type="color" id="val-media-bg-color" value="#ffffff"></div>
+                    <div class="slider-item"><span class="slider-label" data-i18n="lbl_media_btn_color">Màu nút</span><input type="color" id="val-media-btn-color" value="#ffffff"></div>
+                    <div class="slider-item"><span class="slider-label" data-i18n="lbl_media_svg_color">Màu SVG</span><input type="color" id="val-media-svg-color" value="#ffffff"></div>
+                    <div class="slider-item"><span class="slider-label" data-i18n="lbl_thumb_color">🏳️‍🌈 Màu núm kéo</span><input type="color" id="val-thumb-color" value="#ffffff"></div>
+                    <label style="margin-top: 10px; display: flex; align-items: center; gap: 5px;">
+                        <input type="checkbox" id="toggle-media-theme"> <span data-i18n="lbl_media_theme_sync">Đồng bộ Theme hệ thống</span>
+                    </label>
+                    <label style="margin-top: 10px; display: flex; align-items: center; justify-content: space-between;">
+                        <div style="display: flex; align-items: center; gap: 5px;">
+                            <input type="checkbox" id="toggle-theme-dot" checked> 
+                            <span data-i18n="lbl_theme_dot">Chủ đề núm kéo</span>
+                        </div>
+                        <button id="btn-thumb-theme" class="btn-plus-theme" type="button"><span>+</span></button>
+                        <input type="hidden" id="val-thumb-theme" value="none">
+                    </label>
+                </div>
             </div>
 
-            <div class="setting-group highlight-box dev-only">
-                <label data-i18n="lbl_media_widget">🎵 Trình Phát Nhạc</label>
-                <div class="slider-item"><span class="slider-label" data-i18n="lbl_media_width">Kích thước khung</span><input type="range" id="val-media-width" min="50" max="100" value="90"></div>
-                <div class="slider-item"><span class="slider-label" data-i18n="lbl_media_bg_opacity">Độ mờ khung</span><input type="range" id="val-media-bg-opacity" min="0" max="100" value="3"></div>
-                <div class="slider-item"><span class="slider-label" data-i18n="lbl_media_btn_size">Cỡ nút bấm</span><input type="range" id="val-media-btn-size" min="30" max="70" value="50"></div>
-                <div class="slider-item"><span class="slider-label" data-i18n="lbl_media_bg_color">Màu khung</span><input type="color" id="val-media-bg-color" value="#ffffff"></div>
-                <div class="slider-item"><span class="slider-label" data-i18n="lbl_media_btn_color">Màu nút</span><input type="color" id="val-media-btn-color" value="#ffffff"></div>
-                <div class="slider-item"><span class="slider-label" data-i18n="lbl_media_svg_color">Màu SVG</span><input type="color" id="val-media-svg-color" value="#ffffff"></div>
+            <div class="settings-tab-content" data-tab="tab-shadow">
+                <div id="shadow-controls" class="dev-only"></div>
             </div>
 
-            <h3 class="section-title dev-only" data-i18n="lbl_shadow_section">🔘 Đổ Bóng</h3>
-            <div id="shadow-controls" class="dev-only"></div>
         </div>
-        <button id="btn-info" class="info-btn">i</button>
     </div>
 
     <div class="info-overlay" id="theme-overlay"></div>
@@ -209,7 +250,7 @@ <h3 class="section-title dev-only" data-i18n="lbl_shadow_section">🔘 Đổ Bó
             <div class="mac-dot close-dot" id="close-theme-modal"></div>
             <div class="mac-dot min-dot"></div>
             <div class="mac-dot max-dot"></div>
-            <div style="font-size: 14px; font-weight: bold; margin-left: 10px; color: #333;" data-i18n="modal_theme_title">Kho Giao Diện</div>
+            <div style="font-size: 14px; font-weight: bold; margin-left: 6px; color: #333;" data-i18n="lbl_theme_store">Kho Giao Diện</div>
         </div>
         <div class="macos-body">
             <div class="theme-grid-picker full-grid">
@@ -235,48 +276,90 @@ <h3 class="section-title dev-only" data-i18n="lbl_shadow_section">🔘 Đổ Bó
         </div>
     </div>
 
-    <div class="info-overlay" id="info-overlay"></div>
-    <div id="info-modal" class="macos-window">
+    <div id="info-modal" class="macos-window" style="max-width: 340px;">
         <div class="macos-header">
-            <div class="mac-dot close-dot" id="close-info"></div>
+            <div class="mac-dot close-dot" id="close-info-modal"></div>
             <div class="mac-dot min-dot"></div>
             <div class="mac-dot max-dot"></div>
-            <div style="font-size: 14px; font-weight: bold; margin-left: 10px; color: #333;" data-i18n="modal_info_title">Thông tin ứng dụng</div>
+            <div style="font-size: 14px; font-weight: bold; margin-left: 6px; color: #333;" data-i18n="info_title">Quick Control</div>
         </div>
-        <div class="macos-body">
-            <div class="info-desc">
-                <h3 style="font-size: 18px; margin-bottom: 8px;" data-i18n="info_title">Quick Control</h3>
-                <p style="font-size: 13px; color: #666;">
-                    <span data-i18n="info_dev_prefix">Phát triển bởi</span>
-                    <a href="https://www.youtube.com/@Sentechtipvn" target="_blank" rel="noopener" style="color: #007aff; font-weight: 600; text-decoration: none;">Sentechtipvn</a>
-                </p>
-                <p style="margin-top: 14px; text-align: left; line-height: 1.6;" data-i18n="info_desc">
-                    Webclip điều khiển đa năng, tích hợp giao diện kính mờ và hệ thống Live Knobs tuỳ biến sống động chuyên nghiệp dành riêng cho iOS.
-                </p>
+        <div class="macos-body info-body">
+            <div class="info-pill-tabs">
+                <a href="https://browse.shortcuty.app/user/Sentechtipsvn" target="_blank" rel="noopener" class="info-pill">
+                    <span data-i18n="info_pill_follow">Theo dõi</span>
+                </a>
+                <a href="mailto:sentechtps@gmail.com" class="info-pill">
+                    <span data-i18n="info_pill_contact">Liên hệ</span>
+                </a>
+                <button class="info-pill active" type="button">
+                    <span data-i18n="info_pill_about">Thông tin</span>
+                </button>
             </div>
-        </div>
-    </div>
 
-    <div class="info-overlay" id="config-overlay"></div>
-    <div id="config-modal" class="macos-window">
-        <div class="macos-header">
-            <div class="mac-dot close-dot" id="close-config"></div>
-            <div class="mac-dot min-dot"></div>
-            <div class="mac-dot max-dot"></div>
-            <div id="config-modal-title" style="font-size: 14px; font-weight: bold; margin-left: 10px; color: #333;" data-i18n="modal_config_title">Cấu hình</div>
-        </div>
-        <div class="macos-body">
-            <textarea id="config-textarea" 
-                style="width: 100%; height: 140px; padding: 10px; border-radius: 8px; border: 1px solid #ccc; font-family: ui-monospace, monospace; font-size: 11px; resize: none; box-sizing: border-box; word-break: break-all;"
-                data-i18n-placeholder="config_placeholder" placeholder="Mã cấu hình..."></textarea>
-            <div style="display: flex; gap: 8px; margin-top: 12px;">
-                <button id="btn-config-copy" data-i18n="btn_config_copy" style="flex: 1; padding: 10px; background: #007aff; color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 14px;">📋 Sao chép</button>
-                <button id="btn-config-apply" data-i18n="btn_config_apply" style="flex: 1; padding: 10px; background: #34c759; color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 14px;">✅ Áp dụng</button>
+            <div class="info-content">
+                <h3 class="info-app-name" data-i18n="info_app_name">Quick Control</h3>
+                <div class="info-version-row">
+                    <span data-i18n="info_version_label">Phiên bản</span>
+                    <span class="info-version-value">1.0</span>
+                </div>
+                <div class="info-dev-row">
+                    <span data-i18n="info_dev_label">Phát triển bởi</span>
+                    <a href="https://browse.shortcuty.app/user/Sentechtipsvn" target="_blank" rel="noopener" class="info-dev-link">Sentechtipvn</a>
+                </div>
+                <div class="info-desc-box">
+                    <div class="info-desc-title" data-i18n="info_desc_title">📝 Mô tả chức năng</div>
+                    <p data-i18n="info_desc">Webclip điều khiển đa năng, tích hợp giao diện kính mờ và hệ thống Live Knobs tuỳ biến sống động chuyên nghiệp dành riêng cho iOS.</p>
+                </div>
+                <div class="info-guide-box">
+                    <div class="info-guide-title" data-i18n="info_guide_title">📖 Hướng dẫn sử dụng</div>
+                    <p data-i18n="info_guide_desc">1. Bấm vào nút bất kỳ để kích hoạt tính năng tương ứng (Wi-Fi, Bluetooth, VPN, Đèn pin...).&#10;&#10;2. Nhấn vào biểu tượng ⚙️ ở góc dưới phải để mở bảng Cài đặt tuỳ chỉnh.&#10;&#10;3. Chọn Theme có sẵn trong preset hoặc tự do kéo slider để tùy chỉnh màu sắc, kích thước khung, đổ bóng, kính mờ theo gu của bạn.&#10;&#10;4. Vào mục Giao diện → Xuất để lưu mã cấu hình, Nhập để khôi phục lại khi cần. Nên sao lưu mã trước khi xóa webclip.&#10;&#10;5. Slider âm lượng &amp; độ sáng cần cài Shortcut tên "QuickControl" trong app Shortcuts để hoạt động.</p>
+                </div>
             </div>
         </div>
     </div>
-    
-    <script src="js/theme.js?v=10.5"></script>
-    <script src="js/main.js?v=10.5"></script>
+
+    <script>
+        (function() {
+            function dismissIntro() {
+                var intro = document.getElementById('intro-screen');
+                var main = document.getElementById('main-container');
+                if (intro && !intro.classList.contains('dismiss')) {
+                    intro.classList.add('dismiss');
+                    if (main) main.classList.remove('intro-zoom');
+                    setTimeout(function() { if (intro) intro.style.display = 'none'; }, 800);
+                }
+            }
+            if (document.readyState === 'loading') {
+                document.addEventListener('DOMContentLoaded', function() { setTimeout(dismissIntro, 2200); });
+            } else {
+                setTimeout(dismissIntro, 2200);
+            }
+            window.addEventListener('load', function() { setTimeout(dismissIntro, 2400); });
+            setTimeout(dismissIntro, 3500);
+            window.__dismissIntro = dismissIntro;
+        })();
+
+        // ⭐ FIX: Gắn sự kiện cho 2 thanh trượt vol/bri bằng JS (bỏ inline onchange)
+        document.addEventListener('DOMContentLoaded', function() {
+            var volumeSlider = document.getElementById('sys-volume');
+            var brightnessSlider = document.getElementById('sys-brightness');
+            
+            if (volumeSlider) {
+                volumeSlider.addEventListener('change', function() {
+                    var prefix = this.dataset.shortcutPrefix || 'vol_';
+                    window.location.href = 'shortcuts://run-shortcut?name=QuickControl&input=text&text=' + prefix + this.value;
+                });
+            }
+            if (brightnessSlider) {
+                brightnessSlider.addEventListener('change', function() {
+                    var prefix = this.dataset.shortcutPrefix || 'bri_';
+                    window.location.href = 'shortcuts://run-shortcut?name=QuickControl&input=text&text=' + prefix + this.value;
+                });
+            }
+        });
+    </script>
+
+    <script src="js/theme.js?v=14.2"></script>
+    <script src="js/main.js?v=14.2"></script>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/js/theme.js b/js/theme.js
index f394d17..a3bf031 100644
--- a/js/theme.js
+++ b/js/theme.js
@@ -1,880 +1,901 @@
 const DEV_MODE = true; 
 
+// ⭐ VERSION CONTROL CHO BADGE THÔNG BÁO
+const PRESET_VERSION = 3;   // Tăng số này mỗi khi thêm preset giao diện mới
+const THEME_VERSION = 2;    // Tăng số này mỗi khi thêm Theme SVG mới
+
 const SHADOW_MODES = [
     { id: 'inset', nameKey: 'shadow_inset', name: 'Bóng Chìm', template: 'inset {x}px {y}px {b}px {s}px {c}' },
     { id: 'outer', nameKey: 'shadow_outer', name: 'Bóng Ngoài', template: '{x}px {y}px {b}px {s}px {c}' },
-    { id: 'soft',  nameKey: 'shadow_soft',  name: 'Mờ Diện Rộng', template: '{x}px {y}px {b}px {s}px {c}' },
-    { id: 'hard',  nameKey: 'shadow_hard',  name: 'Nổi Khối 3D', template: '{x}px {y}px {b}px {s}px {c}' },
-    { id: 'glow',  nameKey: 'shadow_glow',  name: 'Phát Sáng', template: '0px 0px {b}px {s}px {c}' }
+    { id: 'soft', nameKey: 'shadow_soft', name: 'Mờ Diện Rộng', template: '{x}px {y}px {b}px {s}px {c}' },
+    { id: 'hard', nameKey: 'shadow_hard', name: 'Nổi Khối 3D', template: '{x}px {y}px {b}px {s}px {c}' },
+    { id: 'glow', nameKey: 'shadow_glow', name: 'Phát Sáng', template: '0px 0px {b}px {s}px {c}' }
 ];
 
-function safeSetItem(key, value) {
-    try {
-        localStorage.setItem(key, value);
-        return true;
-    } catch (e) {
-        console.warn('localStorage.setItem failed:', key, e);
-        return false;
-    }
-}
-function safeGetItem(key) {
-    try { return localStorage.getItem(key); } catch (e) { return null; }
-}
-
 document.addEventListener("DOMContentLoaded", () => {
-    const root = document.documentElement;
-    const shadowContainer = document.getElementById('shadow-controls');
-    const mainContainer = document.getElementById('main-container');
-    const introScreen = document.getElementById('intro-screen');
-    const introTextWrapper = document.getElementById('intro-text-wrapper');
-
-    if (introTextWrapper) {
-        const effects = ['anim-wave', 'anim-bounce', 'anim-flip'];
-        const randomEffect = effects[Math.floor(Math.random() * effects.length)];
-        introTextWrapper.classList.add(randomEffect);
-    }
+    try {
+        const root = document.documentElement;
+        const shadowContainer = document.getElementById('shadow-controls');
+        const mainContainer = document.getElementById('main-container');
+        const introScreen = document.getElementById('intro-screen');
+        const introTextWrapper = document.getElementById('intro-text-wrapper');
+
+        if (introTextWrapper) {
+            const effects = ['anim-wave', 'anim-bounce', 'anim-flip'];
+            const randomEffect = effects[Math.floor(Math.random() * effects.length)];
+            introTextWrapper.classList.add(randomEffect);
+        }
 
-    if (mainContainer) mainContainer.classList.add('intro-zoom');
-    
-    window.addEventListener('load', () => {
-        setTimeout(() => {
-            if (introScreen) {
-                introScreen.classList.add('dismiss'); 
-                if (mainContainer) mainContainer.classList.remove('intro-zoom'); 
-                setTimeout(() => { introScreen.style.display = 'none'; }, 1500); 
-            }
-        }, 3000); 
-    });
-
-    if (!DEV_MODE) document.body.classList.add('standard-mode');
-
-    const badgePreset = document.getElementById('badge-preset');
-    const badgeTheme = document.getElementById('badge-theme');
-    
-    if (safeGetItem('sttv_seen_preset_badge') === 'true') badgePreset?.classList.add('hidden');
-    if (safeGetItem('sttv_seen_theme_badge') === 'true') badgeTheme?.classList.add('hidden');
-
-    document.querySelectorAll('input[type="range"]').forEach(input => {
-        const wrapper = document.createElement('div');
-        wrapper.style.position = 'relative';
-        wrapper.style.flex = '1';
-        wrapper.style.display = 'flex';
-        wrapper.style.alignItems = 'center';
-        wrapper.style.width = '100%';
+        if (mainContainer) mainContainer.classList.add('intro-zoom');
         
-        input.parentNode.insertBefore(wrapper, input);
-        wrapper.appendChild(input);
-
-        const tooltip = document.createElement('div');
-        tooltip.className = 'slider-tooltip';
-        tooltip.innerText = input.value;
-        wrapper.appendChild(tooltip);
-
-        const updateTooltip = () => {
-            tooltip.innerText = input.value;
-            tooltip.classList.add('show');
-            const min = input.min ? parseFloat(input.min) : 0;
-            const max = input.max ? parseFloat(input.max) : 100;
-            const val = parseFloat(input.value);
-            let percent = ((val - min) / (max - min)) * 100;
-            if (percent < 5) percent = 5;
-            if (percent > 95) percent = 95;
-            tooltip.style.left = `calc(${percent}% - 12px)`;
-        };
-
-        input.addEventListener('input', updateTooltip);
-        input.addEventListener('pointerup', () => tooltip.classList.remove('show'));
-        input.addEventListener('touchend', () => tooltip.classList.remove('show'));
-        input.addEventListener('blur', () => tooltip.classList.remove('show'));
-        input.addEventListener('mouseleave', () => tooltip.classList.remove('show'));
-    });
-
-    if (shadowContainer) {
-        SHADOW_MODES.forEach(mode => {
-            const div = document.createElement('div');
-            div.className = 'shadow-item dev-only';
-            div.innerHTML = `
-                <div class="shadow-header">
-                    <span data-i18n="${mode.nameKey}">${mode.name}</span>
-                    <input type="checkbox" name="active_shadow" value="${mode.id}" class="shadow-switch">
-                </div>
-                <div class="shadow-drawer" id="drawer-${mode.id}">
-                    <div class="setting-group"><label data-i18n="slider_x">Trục X</label><input type="range" class="s-x" min="-20" max="20" value="0"></div>
-                    <div class="setting-group"><label data-i18n="slider_y">Trục Y</label><input type="range" class="s-y" min="-20" max="20" value="4"></div>
-                    <div class="setting-group"><label data-i18n="slider_blur">Độ mờ</label><input type="range" class="s-b" min="0" max="50" value="10"></div>
-                    <div class="setting-group"><label data-i18n="slider_spread">Lan rộng</label><input type="range" class="s-s" min="-10" max="30" value="0"></div>
-                    <div class="setting-group"><label data-i18n="slider_color">Màu Bóng</label><input type="color" class="s-c" value="#000000"></div>
-                    <div class="setting-group"><label data-i18n="slider_opacity">Độ đậm bóng</label><input type="range" class="s-o" min="0" max="100" value="100"></div>
-                </div>
-            `;
-            shadowContainer.appendChild(div);
-        });
-    }
-
-    function applyShadowI18n() {
-        if (!window.i18nData) return;
-        document.querySelectorAll('#shadow-controls [data-i18n]').forEach(el => {
-            const key = el.getAttribute('data-i18n');
-            if (window.i18nData[key]) el.innerText = window.i18nData[key];
-        });
-    }
-    applyShadowI18n();
-
-    document.querySelectorAll('.theme-chip').forEach(chip => {
-        chip.addEventListener('click', () => {
-            document.querySelectorAll('.theme-chip').forEach(c => c.classList.remove('active'));
-            const val = chip.dataset.value;
-            document.querySelectorAll(`.theme-chip[data-value="${val}"]`).forEach(c => c.classList.add('active'));
-            const hiddenFrame = document.getElementById('val-theme-frame');
-            if (hiddenFrame) hiddenFrame.value = val;
-            
-            if (badgeTheme) { 
-                badgeTheme.classList.add('hidden'); 
-                safeSetItem('sttv_seen_theme_badge', 'true'); 
-            }
-            resetPresetToCustom();
-            updateLiveVariables();
-        });
-    });
-
-    function syncThemePickerVisuals(val) {
-        document.querySelectorAll('.theme-chip').forEach(c => {
-            if (c.dataset.value === val) c.classList.add('active');
-            else c.classList.remove('active');
+        window.addEventListener('load', () => {
+            setTimeout(() => {
+                if (window.__dismissIntro) { window.__dismissIntro(); return; }
+                if (introScreen) {
+                    introScreen.classList.add('dismiss'); 
+                    if (mainContainer) mainContainer.classList.remove('intro-zoom'); 
+                    setTimeout(() => { introScreen.style.display = 'none'; }, 500); 
+                }
+            }, 2000); 
         });
-    }
 
-    const themeModal = document.getElementById('theme-modal');
-    const themeOverlay = document.getElementById('theme-overlay');
-    const btnMoreThemes = document.getElementById('btn-more-themes');
-    const closeThemeModal = document.getElementById('close-theme-modal');
+        if (!DEV_MODE) document.body.classList.add('standard-mode');
 
-    if (btnMoreThemes && themeModal && themeOverlay) {
-        btnMoreThemes.onclick = () => { themeModal.classList.add('show'); themeOverlay.classList.add('show'); };
-    }
-    if (closeThemeModal && themeModal && themeOverlay) {
-        closeThemeModal.onclick = () => { themeModal.classList.remove('show'); themeOverlay.classList.remove('show'); };
-    }
-    if (themeOverlay && themeModal) {
-        themeOverlay.onclick = () => { themeModal.classList.remove('show'); themeOverlay.classList.remove('show'); };
-    }
-
-    const presetSelect = document.getElementById('val-theme-preset');
-    if (presetSelect) {
-        presetSelect.addEventListener('change', (e) => {
-            const val = e.target.value;
-            safeSetItem('sttv_activePreset', val);
-            if (badgePreset) { 
-                badgePreset.classList.add('hidden'); 
-                safeSetItem('sttv_seen_preset_badge', 'true'); 
+        /* ========== ⭐ BADGE VERSION-BASED ========== */
+        const badgePreset = document.getElementById('badge-preset');
+        const badgeTheme = document.getElementById('badge-theme');
+        
+        // Preset badge: hiện khi bạn tăng PRESET_VERSION
+        const seenPresetVersion = parseInt(localStorage.getItem('sttv_presetVersionSeen') || '0');
+        if (badgePreset) {
+            if (seenPresetVersion >= PRESET_VERSION) {
+                badgePreset.classList.add('hidden');
+            } else {
+                badgePreset.classList.remove('hidden');
+            }
+        }
+        
+        // Theme badge: hiện khi bạn tăng THEME_VERSION
+        const seenThemeVersion = parseInt(localStorage.getItem('sttv_themeVersionSeen') || '0');
+        if (badgeTheme) {
+            if (seenThemeVersion >= THEME_VERSION) {
+                badgeTheme.classList.add('hidden');
+            } else {
+                badgeTheme.classList.remove('hidden');
             }
-            if (val !== 'none') unpackConfig(val);
-        });
-    }
-
-    function resetPresetToCustom() {
-        if (presetSelect) {
-            presetSelect.value = 'none';
-            safeSetItem('sttv_activePreset', 'none');
         }
-    }
-
-    const drawerEl = document.getElementById('settings-drawer');
-    const popupAnimSelect = document.getElementById('val-popup-anim');
-    if (popupAnimSelect && drawerEl) {
-        popupAnimSelect.addEventListener('change', (e) => {
-            const animClass = e.target.value;
-            drawerEl.className = 'settings-drawer ' + (drawerEl.classList.contains('open') ? 'open ' : '') + (animClass !== 'default' ? animClass : '');
-            safeSetItem('sttv_popupAnim', animClass);
-        });
-    }
 
-    const AudioContext = window.AudioContext || window.webkitAudioContext;
-    let audioCtx;
-    function playTick() {
-        const toggleAudio = document.getElementById('toggle-audio');
-        if (!toggleAudio || !toggleAudio.checked) return;
-        try {
-            if (!audioCtx) audioCtx = new AudioContext();
-            if (audioCtx.state === 'suspended') audioCtx.resume();
-            const osc = audioCtx.createOscillator(); 
-            const gain = audioCtx.createGain();
-            osc.type = 'sine'; 
-            osc.frequency.setValueAtTime(800, audioCtx.currentTime); 
-            osc.frequency.exponentialRampToValueAtTime(300, audioCtx.currentTime + 0.05);
-            gain.gain.setValueAtTime(0.3, audioCtx.currentTime); 
-            gain.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + 0.05);
-            osc.connect(gain); gain.connect(audioCtx.destination);
-            osc.start(); osc.stop(audioCtx.currentTime + 0.05);
-        } catch(e) {}
-    }
-    document.addEventListener('click', (e) => { 
-        if (e.target.tagName === 'BUTTON' || e.target.type === 'checkbox' || e.target.closest('.theme-chip') || e.target.closest('.theme-chip-more')) playTick(); 
-    });
-    
-    if (drawerEl) {
-        drawerEl.addEventListener('input', (e) => { 
-            if (e.target.type === 'range') playTick(); 
-            if (e.target.id !== 'val-theme-preset' && e.target.id !== 'val-popup-anim') resetPresetToCustom();
+        /* ========== TAB SWITCHING ========== */
+        const tabButtons = document.querySelectorAll('.settings-tab');
+        const tabContents = document.querySelectorAll('.settings-tab-content');
+        
+        tabButtons.forEach(btn => {
+            btn.addEventListener('click', () => {
+                const targetTab = btn.dataset.tab;
+                tabButtons.forEach(b => b.classList.remove('active'));
+                tabContents.forEach(c => c.classList.remove('active'));
+                btn.classList.add('active');
+                const targetContent = document.querySelector(`.settings-tab-content[data-tab="${targetTab}"]`);
+                if (targetContent) targetContent.classList.add('active');
+                try { localStorage.setItem('sttv_activeTab', targetTab); } catch(e) {}
+                try { playTick(); } catch(e) {}
+            });
         });
-    }
 
-    document.querySelectorAll('.shadow-switch').forEach(switchBtn => {
-        switchBtn.addEventListener('change', (e) => {
-            const drawer = document.getElementById(`drawer-${e.target.value}`);
-            if (drawer) {
-                if (e.target.checked) drawer.classList.add('active'); 
-                else drawer.classList.remove('active');
+        const savedTab = localStorage.getItem('sttv_activeTab');
+        if (savedTab) {
+            const savedBtn = document.querySelector(`.settings-tab[data-tab="${savedTab}"]`);
+            const savedContent = document.querySelector(`.settings-tab-content[data-tab="${savedTab}"]`);
+            if (savedBtn && savedContent) {
+                tabButtons.forEach(b => b.classList.remove('active'));
+                tabContents.forEach(c => c.classList.remove('active'));
+                savedBtn.classList.add('active');
+                savedContent.classList.add('active');
             }
-            resetPresetToCustom();
-            updateLiveVariables();
-        });
-    });
-
-    function handleOrientation(e) {
-        const toggleParallax = document.getElementById('toggle-parallax');
-        if (!toggleParallax || !toggleParallax.checked) return;
-        let x = e.gamma; let y = e.beta; 
-        if (x > 45) x = 45; if (x < -45) x = -45;
-        if (y > 45) y = 45; if (y < -45) y = -45;
-        root.style.setProperty('--tilt-x', (x / 10) + 'px'); 
-        root.style.setProperty('--tilt-y', (y / 10) + 'px');
-    }
+        }
 
-    const toggleParallax = document.getElementById('toggle-parallax');
-    if (toggleParallax) {
-        toggleParallax.addEventListener('change', (e) => {
-            if (e.target.checked) {
-                if (typeof DeviceOrientationEvent !== 'undefined' && typeof DeviceOrientationEvent.requestPermission === 'function') {
-                    DeviceOrientationEvent.requestPermission().then(state => {
-                        if (state === 'granted') window.addEventListener('deviceorientation', handleOrientation);
-                        else { e.target.checked = false; alert('Vui lòng cấp quyền cảm biến!'); }
-                    }).catch(console.error);
-                } else { 
-                    window.addEventListener('deviceorientation', handleOrientation); 
+        /* ========== TOOLTIP GLOBAL ========== */
+        let globalTooltip = document.createElement('div');
+        globalTooltip.className = 'slider-tooltip';
+        document.body.appendChild(globalTooltip);
+
+        let rafId = null;
+        document.addEventListener('input', (e) => {
+            if (e.target && e.target.type === 'range') {
+                const input = e.target;
+                if (rafId) cancelAnimationFrame(rafId);
+                rafId = requestAnimationFrame(() => {
+                    globalTooltip.innerText = input.value;
+                    globalTooltip.classList.add('show');
+                    const rect = input.getBoundingClientRect();
+                    const min = parseFloat(input.min) || 0;
+                    const max = parseFloat(input.max) || 100;
+                    const val = parseFloat(input.value);
+                    const percent = (val - min) / (max - min);
+                    const thumbOffset = 12.5 - (percent * 25);
+                    const thumbX = rect.left + (percent * rect.width) + thumbOffset;
+                    globalTooltip.style.left = `${thumbX}px`;
+                    globalTooltip.style.top = `${rect.top - 35}px`;
+                });
+                try { playTick(); } catch(e) {}
+                if (e.target.id !== 'val-theme-preset' && e.target.id !== 'val-popup-anim') {
+                    resetPresetToCustom();
                 }
-            } else {
-                window.removeEventListener('deviceorientation', handleOrientation);
-                root.style.setProperty('--tilt-x', '0px'); 
-                root.style.setProperty('--tilt-y', '0px');
+                updateLiveVariables(false); 
             }
-            safeSetItem('sttv_parallax', e.target.checked);
         });
-    }
 
-    const uploadBg = document.getElementById('upload-bg');
-    if (uploadBg) {
-        uploadBg.addEventListener('change', (e) => {
-            const file = e.target.files[0];
-            if (file) {
-                const reader = new FileReader();
-                reader.onload = (ev) => {
-                    const b64 = ev.target.result; 
-                    const ok = safeSetItem('sttv_customBgImage', b64);
-                    if (!ok) {
-                        alert('⚠️ Ảnh quá lớn, không thể lưu vào bộ nhớ. Vui lòng chọn ảnh nhỏ hơn!');
-                        return;
-                    }
-                    root.style.setProperty('--bg-image', `url('${b64}')`);
-                };
-                reader.readAsDataURL(file);
+        const hideTooltip = (e) => {
+            if (e.target && e.target.type === 'range') globalTooltip.classList.remove('show');
+        };
+        document.addEventListener('pointerup', hideTooltip);
+        document.addEventListener('touchend', hideTooltip);
+        document.addEventListener('change', (e) => {
+            if (e.target && e.target.type === 'range') {
+                hideTooltip(e);
+                saveSettingsToLocal();
             }
         });
-    }
-    const clearBgBtn = document.getElementById('clear-bg');
-    if (clearBgBtn) {
-        clearBgBtn.addEventListener('click', () => { 
-            try { localStorage.removeItem('sttv_customBgImage'); } catch(e) {}
-            root.style.setProperty('--bg-image', 'none'); 
-            if (uploadBg) uploadBg.value = ""; 
-        });
-    }
 
-    const overlay = document.getElementById('settings-overlay');
-    const closeSettings = () => { 
-        if (drawerEl) drawerEl.classList.remove('open'); 
-        if (overlay) overlay.classList.remove('open'); 
-    };
-    const openSettingsBtn = document.getElementById('open-settings');
-    const closeSettingsBtn = document.getElementById('close-settings');
-    if (openSettingsBtn && drawerEl && overlay) {
-        openSettingsBtn.onclick = () => { drawerEl.classList.add('open'); overlay.classList.add('open'); };
-    }
-    if (closeSettingsBtn) closeSettingsBtn.onclick = closeSettings;
-    if (overlay) overlay.onclick = closeSettings;
-
-    let adjustTimeout;
-    if (drawerEl) {
-        drawerEl.addEventListener('input', (e) => {
-            if (e.target.tagName === 'INPUT') {
-                drawerEl.classList.add('adjusting'); 
-                clearTimeout(adjustTimeout);
-                adjustTimeout = setTimeout(() => drawerEl.classList.remove('adjusting'), 800);
-            }
-            updateLiveVariables();
-        });
-    }
+        /* ========== SHADOW CONTROLS ========== */
+        if (shadowContainer) {
+            SHADOW_MODES.forEach(mode => {
+                const div = document.createElement('div');
+                div.className = 'shadow-item dev-only';
+                div.innerHTML = `
+                    <div class="shadow-header">
+                        <span data-i18n="${mode.nameKey}">${mode.name}</span>
+                        <input type="checkbox" name="active_shadow" value="${mode.id}" class="shadow-switch">
+                    </div>
+                    <div class="shadow-drawer" id="drawer-${mode.id}">
+                        <div class="setting-group"><label data-i18n="slider_x">Trục X</label><input type="range" class="s-x" min="-20" max="20" value="0"></div>
+                        <div class="setting-group"><label data-i18n="slider_y">Trục Y</label><input type="range" class="s-y" min="-20" max="20" value="4"></div>
+                        <div class="setting-group"><label data-i18n="slider_blur">Độ mờ</label><input type="range" class="s-b" min="0" max="50" value="10"></div>
+                        <div class="setting-group"><label data-i18n="slider_spread">Lan rộng</label><input type="range" class="s-s" min="-10" max="30" value="0"></div>
+                        <div class="setting-group"><label data-i18n="slider_color">Màu Bóng</label><input type="color" class="s-c" value="#000000"></div>
+                        <div class="setting-group"><label data-i18n="slider_opacity">Độ đậm bóng</label><input type="range" class="s-o" min="0" max="100" value="100"></div>
+                    </div>
+                `;
+                shadowContainer.appendChild(div);
+            });
+        }
 
-    const btnList = document.getElementById('btn-layout-list');
-    const btnGrid = document.getElementById('btn-layout-grid');
-    function setLayoutMode(mode) {
-        safeSetItem('sttv_layoutMode', mode);
-        if (!btnList || !btnGrid) return;
-        if (mode === 'list') { btnList.classList.add('active'); btnGrid.classList.remove('active'); } 
-        else { btnGrid.classList.add('active'); btnList.classList.remove('active'); }
-        updateLiveVariables();
-    }
-    if (btnList) btnList.onclick = () => { setLayoutMode('list'); resetPresetToCustom(); }; 
-    if (btnGrid) btnGrid.onclick = () => { setLayoutMode('grid'); resetPresetToCustom(); };
+        let currentThemeTarget = 'frame';
+        
+        function syncThemePickerVisuals(val) {
+            document.querySelectorAll('.theme-chip').forEach(c => {
+                if (c.dataset.value === val) c.classList.add('active');
+                else c.classList.remove('active');
+            });
+        }
 
-    const infoModal = document.getElementById('info-modal');
-    const infoOverlay = document.getElementById('info-overlay');
-    const btnInfo = document.getElementById('btn-info');
-    const closeInfoBtn = document.getElementById('close-info');
+        const themeModal = document.getElementById('theme-modal');
+        const themeOverlay = document.getElementById('theme-overlay');
+        
+        const btnMoreThemes = document.getElementById('btn-more-themes');
+        if (btnMoreThemes) {
+            btnMoreThemes.onclick = () => { 
+                currentThemeTarget = 'frame';
+                const vtf = document.getElementById('val-theme-frame');
+                if (vtf) syncThemePickerVisuals(vtf.value);
+                if (themeModal) themeModal.classList.add('show');
+                if (themeOverlay) themeOverlay.classList.add('show'); 
+            };
+        }
 
-    if (btnInfo && infoModal && infoOverlay) {
-        btnInfo.onclick = () => { 
+        const btnThumbTheme = document.getElementById('btn-thumb-theme');
+        if (btnThumbTheme) {
+            btnThumbTheme.onclick = () => {
+                currentThemeTarget = 'thumb';
+                const vtt = document.getElementById('val-thumb-theme');
+                if (vtt) syncThemePickerVisuals(vtt.value);
+                if (themeModal) themeModal.classList.add('show');
+                if (themeOverlay) themeOverlay.classList.add('show'); 
+            };
+        }
+
+        document.querySelectorAll('.theme-chip').forEach(chip => {
+            chip.addEventListener('click', () => {
+                const val = chip.dataset.value;
+                syncThemePickerVisuals(val);
+                if (currentThemeTarget === 'frame') {
+                    const vtf = document.getElementById('val-theme-frame');
+                    if (vtf) vtf.value = val;
+                    // ⭐ Đánh dấu đã xem Theme version mới
+                    if (badgeTheme) { 
+                        badgeTheme.classList.add('hidden'); 
+                        localStorage.setItem('sttv_themeVersionSeen', String(THEME_VERSION)); 
+                    }
+                    resetPresetToCustom();
+                } else if (currentThemeTarget === 'thumb') {
+                    const vtt = document.getElementById('val-thumb-theme');
+                    if (vtt) vtt.value = val;
+                }
+                updateLiveVariables(true);
+            });
+        });
+
+        const closeThemeModal = document.getElementById('close-theme-modal');
+        if (closeThemeModal && themeModal) closeThemeModal.onclick = () => { 
+            themeModal.classList.remove('show'); 
+            if (themeOverlay) themeOverlay.classList.remove('show'); 
+        };
+        
+        const infoModal = document.getElementById('info-modal');
+        const btnInfo = document.getElementById('btn-info');
+        if (btnInfo && infoModal) btnInfo.onclick = () => { 
             infoModal.classList.add('show'); 
-            infoOverlay.classList.add('show'); 
+            if (themeOverlay) themeOverlay.classList.add('show'); 
         };
-    }
-    if (closeInfoBtn && infoModal && infoOverlay) {
-        closeInfoBtn.onclick = () => { 
+        const closeInfoModal = document.getElementById('close-info-modal');
+        if (closeInfoModal && infoModal) closeInfoModal.onclick = () => { 
             infoModal.classList.remove('show'); 
-            infoOverlay.classList.remove('show'); 
+            if (themeOverlay) themeOverlay.classList.remove('show'); 
         };
-    }
-    if (infoOverlay && infoModal) {
-        infoOverlay.onclick = (e) => { 
-            if (e.target.id === 'info-overlay') { 
-                infoModal.classList.remove('show'); 
-                infoOverlay.classList.remove('show'); 
+
+        if (themeOverlay) {
+            themeOverlay.onclick = () => { 
+                if (themeModal) themeModal.classList.remove('show'); 
+                if (infoModal) infoModal.classList.remove('show');
+                themeOverlay.classList.remove('show'); 
+            };
+        }
+
+        /* ========== PRESET SELECT ========== */
+        const presetSelect = document.getElementById('val-theme-preset');
+        if (presetSelect) {
+            presetSelect.addEventListener('change', (e) => {
+                const val = e.target.value;
+                localStorage.setItem('sttv_activePreset', val);
+                // ⭐ Đánh dấu đã xem Preset version mới
+                if (badgePreset) { 
+                    badgePreset.classList.add('hidden'); 
+                    localStorage.setItem('sttv_presetVersionSeen', String(PRESET_VERSION)); 
+                }
+                if (val !== 'none') unpackConfig(val);
+            });
+        }
+
+        function resetPresetToCustom() {
+            if (presetSelect) {
+                presetSelect.value = 'none';
+                localStorage.setItem('sttv_activePreset', 'none');
             }
-        };
-    }
+        }
 
-    const configModal = document.getElementById('config-modal');
-    const configOverlay = document.getElementById('config-overlay');
-    const configTextarea = document.getElementById('config-textarea');
-    const configModalTitle = document.getElementById('config-modal-title');
-    const btnConfigCopy = document.getElementById('btn-config-copy');
-    const btnConfigApply = document.getElementById('btn-config-apply');
-    const btnConfigClose = document.getElementById('close-config');
-
-    function openConfigModal(mode) {
-        if (!configModal || !configOverlay) return;
-        if (mode === 'export') {
-            configTextarea.value = packConfig();
-            configTextarea.readOnly = true;
-            configModalTitle.innerText = (window.i18nData && window.i18nData['modal_config_title_export']) || '📤 Xuất cấu hình';
-            btnConfigCopy.style.display = 'block';
-            btnConfigApply.style.display = 'none';
-        } else {
-            configTextarea.value = '';
-            configTextarea.readOnly = false;
-            configModalTitle.innerText = (window.i18nData && window.i18nData['modal_config_title_import']) || '📥 Nhập cấu hình';
-            btnConfigCopy.style.display = 'none';
-            btnConfigApply.style.display = 'block';
+        const drawerEl = document.getElementById('settings-drawer');
+        const popupAnimSelect = document.getElementById('val-popup-anim');
+        if (popupAnimSelect && drawerEl) {
+            popupAnimSelect.addEventListener('change', (e) => {
+                const animClass = e.target.value;
+                drawerEl.className = 'settings-drawer ' + (drawerEl.classList.contains('open') ? 'open ' : '') + (animClass !== 'default' ? animClass : '');
+                localStorage.setItem('sttv_popupAnim', animClass);
+            });
         }
-        configModal.classList.add('show');
-        configOverlay.classList.add('show');
-        setTimeout(() => {
-            try { 
-                if (mode === 'export') configTextarea.select();
-                else configTextarea.focus();
+
+        const AudioContext = window.AudioContext || window.webkitAudioContext;
+        let audioCtx = null;
+        function playTick() {
+            const toggleAudio = document.getElementById('toggle-audio');
+            if (!toggleAudio || !toggleAudio.checked) return;
+            try {
+                if (!audioCtx) audioCtx = new AudioContext();
+                if (audioCtx.state === 'suspended') audioCtx.resume();
+                const osc = audioCtx.createOscillator(); 
+                const gain = audioCtx.createGain();
+                osc.type = 'sine'; 
+                osc.frequency.setValueAtTime(800, audioCtx.currentTime); 
+                osc.frequency.exponentialRampToValueAtTime(300, audioCtx.currentTime + 0.04);
+                gain.gain.setValueAtTime(0.2, audioCtx.currentTime); 
+                gain.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + 0.04);
+                osc.connect(gain); gain.connect(audioCtx.destination); 
+                osc.start(); osc.stop(audioCtx.currentTime + 0.04);
             } catch(e) {}
-        }, 250);
-    }
-    function closeConfigModal() {
-        if (configModal) configModal.classList.remove('show');
-        if (configOverlay) configOverlay.classList.remove('show');
-    }
+        }
+        document.addEventListener('click', (e) => { 
+            if (e.target.tagName === 'BUTTON' || e.target.type === 'checkbox' || e.target.closest('.theme-chip') || e.target.closest('.theme-chip-more')) playTick(); 
+        });
 
-    if (btnConfigClose) btnConfigClose.onclick = closeConfigModal;
-    if (configOverlay) configOverlay.onclick = closeConfigModal;
+        /* ========== COLOR PICKER KHÔNG BỊ VĂNG ========== */
+        let colorPickerLock = false;
 
-    if (btnConfigCopy) {
-        btnConfigCopy.onclick = () => {
-            const text = configTextarea.value;
-            const successMsg = (window.i18nData && window.i18nData['msg_copy_success']) || "Đã sao chép mã cấu hình!";
-            
-            const doFallbackCopy = () => {
-                try {
-                    const wasReadOnly = configTextarea.readOnly;
-                    configTextarea.readOnly = false;
-                    configTextarea.select();
-                    configTextarea.setSelectionRange(0, 99999);
-                    const ok = document.execCommand('copy');
-                    configTextarea.readOnly = wasReadOnly;
-                    if (ok) alert(successMsg);
-                    else alert('Vui lòng nhấn giữ để chọn và sao chép thủ công.');
-                } catch(e) {
-                    alert('Vui lòng nhấn giữ để chọn và sao chép thủ công.');
+        if (drawerEl) {
+            drawerEl.addEventListener('focusin', (e) => {
+                if (e.target && e.target.type === 'color') {
+                    colorPickerLock = true;
                 }
-            };
+            });
 
-            if (navigator.clipboard && window.isSecureContext) {
-                navigator.clipboard.writeText(text).then(() => alert(successMsg)).catch(doFallbackCopy);
-            } else {
-                doFallbackCopy();
-            }
-        };
-    }
-
-    if (btnConfigApply) {
-        btnConfigApply.onclick = () => {
-            const code = configTextarea.value.trim();
-            if (!code) { alert('Vui lòng dán mã cấu hình!'); return; }
-            unpackConfig(code);
-            resetPresetToCustom();
-            closeConfigModal();
-        };
-    }
+            drawerEl.addEventListener('focusout', (e) => {
+                if (e.target && e.target.type === 'color') {
+                    setTimeout(() => { colorPickerLock = false; }, 400);
+                }
+            });
+
+            drawerEl.addEventListener('change', (e) => {
+                if (e.target.type === 'color') {
+                    updateLiveVariables(true);
+                    setTimeout(() => { colorPickerLock = false; }, 150);
+                } 
+                else if (e.target.type === 'checkbox') {
+                    updateLiveVariables(true); 
+                }
+            });
 
-    function hexToRgba(hex, alpha) {
-        let r = 0, g = 0, b = 0;
-        if (!hex) return `rgba(0,0,0,${alpha / 100})`;
-        if (hex.length === 4) { r = parseInt(hex[1] + hex[1], 16); g = parseInt(hex[2] + hex[2], 16); b = parseInt(hex[3] + hex[3], 16); }
-        else if (hex.length === 7) { r = parseInt(hex.substring(1, 3), 16); g = parseInt(hex.substring(3, 5), 16); b = parseInt(hex.substring(5, 7), 16); }
-        return `rgba(${r}, ${g}, ${b}, ${alpha / 100})`;
-    }
-    function hexToRgb(hex) {
-        let r = 0, g = 0, b = 0;
-        if (!hex) return '0,0,0';
-        if (hex.length === 4) { r = parseInt(hex[1] + hex[1], 16); g = parseInt(hex[2] + hex[2], 16); b = parseInt(hex[3] + hex[3], 16); }
-        else if (hex.length === 7) { r = parseInt(hex.substring(1, 3), 16); g = parseInt(hex.substring(3, 5), 16); b = parseInt(hex.substring(5, 7), 16); }
-        return `${r}, ${g}, ${b}`;
-    }
+            drawerEl.addEventListener('input', (e) => {
+                if (e.target && e.target.type === 'color') {
+                    e.stopPropagation();
+                }
+            }, true);
+        }
 
-    function updateShadow() {
-        const activeShadows = document.querySelectorAll('input[name="active_shadow"]:checked');
-        let combinedShadow = '';
-        activeShadows.forEach(checkbox => {
-            const drawer = document.getElementById(`drawer-${checkbox.value}`);
-            if (!drawer) return;
-            const mode = SHADOW_MODES.find(m => m.id === checkbox.value);
-            const hexColor = drawer.querySelector('.s-c').value;
-            const opacity = drawer.querySelector('.s-o').value;
-            const rgbaColor = hexToRgba(hexColor, opacity);
-
-            let shadowStr = mode.template
-                .replace('{x}', drawer.querySelector('.s-x').value).replace('{y}', drawer.querySelector('.s-y').value)
-                .replace('{b}', drawer.querySelector('.s-b').value).replace('{s}', drawer.querySelector('.s-s').value)
-                .replace('{c}', rgbaColor);
-            if (combinedShadow) combinedShadow += ', '; 
-            combinedShadow += shadowStr;
+        document.querySelectorAll('.shadow-switch').forEach(switchBtn => {
+            switchBtn.addEventListener('change', (e) => {
+                const drawer = document.getElementById(`drawer-${e.target.value}`);
+                if (drawer) {
+                    if (e.target.checked) drawer.classList.add('active'); 
+                    else drawer.classList.remove('active');
+                }
+                resetPresetToCustom(); 
+                updateLiveVariables(true);
+            });
         });
-        root.style.setProperty('--btn-shadow', combinedShadow || 'none');
-    }
 
-    function saveSettingsToLocal() {
-        const get = id => document.getElementById(id);
-        
-        const saves = {
-            sttv_bgMain: get('val-bg-main'), sttv_textColor: get('val-text-color'),
-            sttv_listBg: get('val-list-bg'), sttv_listBgOpacity: get('val-list-bg-opacity'),
-            sttv_listText: get('val-list-text'), sttv_listSvg: get('val-list-svg'),
-            sttv_themeFrame: get('val-theme-frame'),
-            sttv_frameSize: get('val-frame-size'), sttv_svgSize: get('val-svg-size'),
-            sttv_svgOpacity: get('val-svg-opacity'), sttv_frameRadius: get('val-frame-radius'),
-            sttv_frameColor: get('val-frame-color'), sttv_frameBgOpacity: get('val-frame-bg-opacity'),
-            sttv_svgColor: get('val-svg-color'),
-            sttv_titleSize: get('val-title-size'), sttv_titleSpacing: get('val-title-spacing'),
-            sttv_iconSize: get('val-icon-size'), sttv_iconSpacing: get('val-icon-spacing'),
-            sttv_mediaWidth: get('val-media-width'), sttv_mediaBgOpacity: get('val-media-bg-opacity'),
-            sttv_mediaBtnSize: get('val-media-btn-size'), sttv_mediaBgColor: get('val-media-bg-color'),
-            sttv_mediaBtnColor: get('val-media-btn-color'), sttv_mediaSvgColor: get('val-media-svg-color')
-        };
-        for (const k in saves) {
-            if (saves[k]) safeSetItem(k, saves[k].value);
+        function handleOrientation(e) {
+            const tp = document.getElementById('toggle-parallax');
+            if (!tp || !tp.checked) return;
+            let x = e.gamma; let y = e.beta; 
+            if (x > 45) x = 45; if (x < -45) x = -45;
+            if (y > 45) y = 45; if (y < -45) y = -45;
+            root.style.setProperty('--tilt-x', (x / 10) + 'px'); 
+            root.style.setProperty('--tilt-y', (y / 10) + 'px');
         }
 
-        const checks = {
-            sttv_hideLabels: get('toggle-hide-labels'),
-            sttv_listFrame: get('toggle-list-frame'),
-            sttv_glassMode: get('toggle-glass'),
-            sttv_audioFeedback: get('toggle-audio')
-        };
-        for (const k in checks) {
-            if (checks[k]) safeSetItem(k, checks[k].checked);
+        const toggleParallaxEl = document.getElementById('toggle-parallax');
+        if (toggleParallaxEl) {
+            toggleParallaxEl.addEventListener('change', (e) => {
+                if (e.target.checked) {
+                    if (typeof DeviceOrientationEvent !== 'undefined' && typeof DeviceOrientationEvent.requestPermission === 'function') {
+                        DeviceOrientationEvent.requestPermission().then(state => {
+                            if (state === 'granted') window.addEventListener('deviceorientation', handleOrientation);
+                            else { e.target.checked = false; alert('Vui lòng cấp quyền cảm biến!'); }
+                        }).catch(console.error);
+                    } else { window.addEventListener('deviceorientation', handleOrientation); }
+                } else {
+                    window.removeEventListener('deviceorientation', handleOrientation);
+                    root.style.setProperty('--tilt-x', '0px'); 
+                    root.style.setProperty('--tilt-y', '0px');
+                }
+                localStorage.setItem('sttv_parallax', e.target.checked);
+            });
         }
 
-        const shadowState = {};
-        SHADOW_MODES.forEach(mode => {
-            const drawer = document.getElementById(`drawer-${mode.id}`);
-            const checkbox = document.querySelector(`input[name="active_shadow"][value="${mode.id}"]`);
-            if (drawer && checkbox) {
-                shadowState[mode.id] = {
-                    active: checkbox.checked,
-                    x: drawer.querySelector('.s-x').value, y: drawer.querySelector('.s-y').value,
-                    b: drawer.querySelector('.s-b').value, s: drawer.querySelector('.s-s').value,
-                    c: drawer.querySelector('.s-c').value, o: drawer.querySelector('.s-o').value
-                };
-            }
-        });
-        safeSetItem('sttv_shadowConfig', JSON.stringify(shadowState));
-    }
-
-    function packConfig() {
-        const shadowState = {};
-        SHADOW_MODES.forEach(mode => {
-            const drawer = document.getElementById(`drawer-${mode.id}`);
-            const checkbox = document.querySelector(`input[name="active_shadow"][value="${mode.id}"]`);
-            if (drawer && checkbox) {
-                shadowState[mode.id] = {
-                    active: checkbox.checked,
-                    x: drawer.querySelector('.s-x').value, y: drawer.querySelector('.s-y').value,
-                    b: drawer.querySelector('.s-b').value, s: drawer.querySelector('.s-s').value,
-                    c: drawer.querySelector('.s-c').value, o: drawer.querySelector('.s-o').value
-                };
+        /* ========== UPLOAD BACKGROUND ========== */
+        const uploadBg = document.getElementById('upload-bg');
+        const fileDisplay = document.getElementById('file-name-display');
+        
+        function updateFileNameDisplay(fileName) {
+            if (!fileDisplay) return;
+            const prefix = (window.i18nData && window.i18nData['file_selected_prefix']) || 'Đã chọn: ';
+            const emptyText = (window.i18nData && window.i18nData['file_none_selected']) || 'chưa chọn tệp nào';
+            if (fileName) {
+                fileDisplay.textContent = prefix + fileName;
+                fileDisplay.classList.add('has-file');
+            } else {
+                fileDisplay.textContent = emptyText;
+                fileDisplay.classList.remove('has-file');
             }
-        });
+        }
+        window.__updateFileNameDisplay = updateFileNameDisplay;
+        
+        if (uploadBg) {
+            uploadBg.addEventListener('change', (e) => {
+                const file = e.target.files[0];
+                if (file) {
+                    updateFileNameDisplay(file.name);
+                    const reader = new FileReader();
+                    reader.onload = (ev) => {
+                        const b64 = ev.target.result; 
+                        localStorage.setItem('sttv_customBgImage', b64);
+                        root.style.setProperty('--bg-image', `url('${b64}')`);
+                    };
+                    reader.readAsDataURL(file);
+                }
+            });
+        }
+        
+        const clearBgBtn = document.getElementById('clear-bg');
+        if (clearBgBtn) {
+            clearBgBtn.addEventListener('click', () => { 
+                localStorage.removeItem('sttv_customBgImage'); 
+                root.style.setProperty('--bg-image', 'none'); 
+                if (uploadBg) uploadBg.value = ""; 
+                updateFileNameDisplay(null);
+            });
+        }
 
-        const g = id => { const el = document.getElementById(id); return el ? el.value : ''; };
-        const c = id => { const el = document.getElementById(id); return el ? el.checked : false; };
-
-        const fullConfig = {
-            bgMain: g('val-bg-main'), textColor: g('val-text-color'),
-            layoutMode: safeGetItem('sttv_layoutMode') || 'grid',
-            listBg: g('val-list-bg'), listText: g('val-list-text'), listSvg: g('val-list-svg'),
-            themeFrame: g('val-theme-frame'), frameSize: g('val-frame-size'),
-            svgSize: g('val-svg-size'), svgOpacity: g('val-svg-opacity'),
-            frameRadius: g('val-frame-radius'), frameColor: g('val-frame-color'),
-            svgColor: g('val-svg-color'),
-            hideLabels: c('toggle-hide-labels'), titleSize: g('val-title-size'),
-            titleSpacing: g('val-title-spacing'), listFrame: c('toggle-list-frame'),
-            iconSize: g('val-icon-size'), iconSpacing: g('val-icon-spacing'),
-            listBgOpacity: g('val-list-bg-opacity'), frameBgOpacity: g('val-frame-bg-opacity'),
-            mediaWidth: g('val-media-width'), mediaBgOpacity: g('val-media-bg-opacity'),
-            mediaBtnSize: g('val-media-btn-size'), mediaBgColor: g('val-media-bg-color'),
-            mediaBtnColor: g('val-media-btn-color'), mediaSvgColor: g('val-media-svg-color'),
-            glassMode: c('toggle-glass'), popupAnim: g('val-popup-anim'),
-            shadowConfig: shadowState
+        const overlay = document.getElementById('settings-overlay');
+        const closeSettings = () => { 
+            if (drawerEl) drawerEl.classList.remove('open'); 
+            if (overlay) overlay.classList.remove('open'); 
+        };
+        const openSettingsBtn = document.getElementById('open-settings');
+        const closeSettingsBtn = document.getElementById('close-settings');
+        if (openSettingsBtn) openSettingsBtn.onclick = () => { 
+            if (drawerEl) drawerEl.classList.add('open'); 
+            if (overlay) overlay.classList.add('open'); 
         };
+        if (closeSettingsBtn) closeSettingsBtn.onclick = closeSettings;
+        if (overlay) overlay.onclick = closeSettings;
+
+        let adjustTimeout;
+        if (drawerEl) {
+            drawerEl.addEventListener('input', (e) => {
+                if (e.target.tagName === 'INPUT' && e.target.type === 'range') {
+                    drawerEl.classList.add('adjusting'); 
+                    clearTimeout(adjustTimeout);
+                    adjustTimeout = setTimeout(() => drawerEl.classList.remove('adjusting'), 800);
+                }
+            });
+        }
 
-        return btoa(unescape(encodeURIComponent(JSON.stringify(fullConfig)))); 
-    }
+        function setLayoutMode(mode) { localStorage.setItem('sttv_layoutMode', mode); updateLiveVariables(true); }
+        const btnLayoutList = document.getElementById('btn-layout-list');
+        const btnLayoutGrid = document.getElementById('btn-layout-grid');
+        if (btnLayoutList) btnLayoutList.onclick = () => { setLayoutMode('list'); resetPresetToCustom(); }; 
+        if (btnLayoutGrid) btnLayoutGrid.onclick = () => { setLayoutMode('grid'); resetPresetToCustom(); };
+
+        function hexToRgba(hex, alpha) {
+            let r = 0, g = 0, b = 0;
+            if (!hex) return `rgba(0,0,0,${alpha / 100})`;
+            if (hex.length === 4) { r = parseInt(hex[1] + hex[1], 16); g = parseInt(hex[2] + hex[2], 16); b = parseInt(hex[3] + hex[3], 16); }
+            else if (hex.length === 7) { r = parseInt(hex.substring(1, 3), 16); g = parseInt(hex.substring(3, 5), 16); b = parseInt(hex.substring(5, 7), 16); }
+            return `rgba(${r}, ${g}, ${b}, ${alpha / 100})`;
+        }
+        function hexToRgb(hex) {
+            let r = 0, g = 0, b = 0;
+            if (!hex) return '0,0,0';
+            if (hex.length === 4) { r = parseInt(hex[1] + hex[1], 16); g = parseInt(hex[2] + hex[2], 16); b = parseInt(hex[3] + hex[3], 16); }
+            else if (hex.length === 7) { r = parseInt(hex.substring(1, 3), 16); g = parseInt(hex.substring(3, 5), 16); b = parseInt(hex.substring(5, 7), 16); }
+            return `${r}, ${g}, ${b}`;
+        }
 
-    function unpackConfig(base64Str) {
-        try {
-            if (drawerEl) drawerEl.classList.remove('adjusting');
-            const decodedStr = decodeURIComponent(escape(atob(base64Str)));
-            let config;
-            try { config = JSON.parse(decodedStr); } 
-            catch(e) { alert("Mã không hợp lệ!"); return; }
-            
-            try { localStorage.removeItem('sttv_customBgImage'); } catch(e) {}
-            root.style.setProperty('--bg-image', 'none');
-            const uploadBgInput = document.getElementById('upload-bg');
-            if (uploadBgInput) uploadBgInput.value = "";
-
-            const setV = (id, v) => { const el = document.getElementById(id); if (el) el.value = v; };
-            const setC = (id, v) => { const el = document.getElementById(id); if (el) el.checked = v; };
-
-            if (Array.isArray(config)) {
-                if (config.length < 13) throw 'Lỗi mã cũ';
-                if (config[0]) { setV('val-bg-main', config[0]); root.style.setProperty('--bg-main', config[0]); }
-                setV('val-text-color', config[1]);
-                setLayoutMode(config[2]);
-                setV('val-list-bg', config[3]);
-                setV('val-list-text', config[4]);
-                setV('val-list-svg', config[5]);
-                setV('val-theme-frame', config[6]);
-                syncThemePickerVisuals(config[6]);
-                setV('val-frame-size', config[7]);
-                setV('val-svg-size', config[8]); 
-                setV('val-svg-opacity', config[9]);
-                setV('val-frame-radius', config[10]); 
-                setV('val-frame-color', config[11]); 
-                setV('val-svg-color', config[12]);
-                
-                document.querySelectorAll('.shadow-switch').forEach(cb => { 
-                    cb.checked = false; 
-                    const d = document.getElementById(`drawer-${cb.value}`);
-                    if (d) d.classList.remove('active');
-                });
-                if (config[13] && config[13].length > 0) {
-                    const sId = config[13][0]; 
-                    const shadowSwitch = document.querySelector(`input[name="active_shadow"][value="${sId}"]`);
-                    if (shadowSwitch) {
-                        shadowSwitch.checked = true;
-                        const drw = document.getElementById(`drawer-${sId}`); 
-                        if (drw) {
-                            drw.classList.add('active');
-                            drw.querySelector('.s-x').value = config[13][1]; 
-                            drw.querySelector('.s-y').value = config[13][2];
-                            drw.querySelector('.s-b').value = config[13][3]; 
-                            drw.querySelector('.s-s').value = config[13][4]; 
-                            drw.querySelector('.s-c').value = config[13][5];
-                            if (config[13].length > 6) drw.querySelector('.s-o').value = config[13][6];
-                        }
+        function updateShadow() {
+            const activeShadows = document.querySelectorAll('input[name="active_shadow"]:checked');
+            let combinedShadow = '';
+            activeShadows.forEach(checkbox => {
+                const drawer = document.getElementById(`drawer-${checkbox.value}`);
+                if (!drawer) return;
+                const mode = SHADOW_MODES.find(m => m.id === checkbox.value);
+                const rgbaColor = hexToRgba(drawer.querySelector('.s-c').value, drawer.querySelector('.s-o').value);
+                let shadowStr = mode.template
+                    .replace('{x}', drawer.querySelector('.s-x').value).replace('{y}', drawer.querySelector('.s-y').value)
+                    .replace('{b}', drawer.querySelector('.s-b').value).replace('{s}', drawer.querySelector('.s-s').value)
+                    .replace('{c}', rgbaColor);
+                if (combinedShadow) combinedShadow += ', '; 
+                combinedShadow += shadowStr;
+            });
+            root.style.setProperty('--btn-shadow', combinedShadow || 'none');
+        }
+
+        function g(id) { const el = document.getElementById(id); return el ? el.value : ''; }
+        function c(id) { const el = document.getElementById(id); return el ? el.checked : false; }
+
+        function saveSettingsToLocal() {
+            try {
+                localStorage.setItem('sttv_bgMain', g('val-bg-main'));
+                localStorage.setItem('sttv_textColor', g('val-text-color'));
+                localStorage.setItem('sttv_listBg', g('val-list-bg'));
+                localStorage.setItem('sttv_listBgOpacity', g('val-list-bg-opacity'));
+                localStorage.setItem('sttv_listText', g('val-list-text'));
+                localStorage.setItem('sttv_listSvg', g('val-list-svg'));
+                localStorage.setItem('sttv_themeFrame', g('val-theme-frame'));
+                localStorage.setItem('sttv_frameSize', g('val-frame-size'));
+                localStorage.setItem('sttv_svgSize', g('val-svg-size'));
+                localStorage.setItem('sttv_svgOpacity', g('val-svg-opacity'));
+                localStorage.setItem('sttv_frameRadius', g('val-frame-radius'));
+                localStorage.setItem('sttv_frameColor', g('val-frame-color'));
+                localStorage.setItem('sttv_frameBgOpacity', g('val-frame-bg-opacity'));
+                localStorage.setItem('sttv_svgColor', g('val-svg-color'));
+                localStorage.setItem('sttv_hideLabels', c('toggle-hide-labels'));
+                localStorage.setItem('sttv_listFrame', c('toggle-list-frame'));
+                localStorage.setItem('sttv_titleSize', g('val-title-size'));
+                localStorage.setItem('sttv_titleSpacing', g('val-title-spacing'));
+                localStorage.setItem('sttv_iconSize', g('val-icon-size'));
+                localStorage.setItem('sttv_iconSpacing', g('val-icon-spacing'));
+                localStorage.setItem('sttv_glassMode', c('toggle-glass'));
+                localStorage.setItem('sttv_audioFeedback', c('toggle-audio'));
+                localStorage.setItem('sttv_mediaWidth', g('val-media-width'));
+                localStorage.setItem('sttv_mediaBgOpacity', g('val-media-bg-opacity'));
+                localStorage.setItem('sttv_mediaBtnSize', g('val-media-btn-size'));
+                localStorage.setItem('sttv_mediaBgColor', g('val-media-bg-color'));
+                localStorage.setItem('sttv_mediaBtnColor', g('val-media-btn-color'));
+                localStorage.setItem('sttv_mediaSvgColor', g('val-media-svg-color'));
+                localStorage.setItem('sttv_mediaThemeSync', c('toggle-media-theme'));
+                localStorage.setItem('sttv_themeDot', c('toggle-theme-dot'));
+                localStorage.setItem('sttv_thumbSize', g('val-thumb-size'));
+                localStorage.setItem('sttv_thumbColor', g('val-thumb-color'));
+                localStorage.setItem('sttv_thumbTheme', g('val-thumb-theme'));
+
+                const shadowState = {};
+                SHADOW_MODES.forEach(mode => {
+                    const drawer = document.getElementById(`drawer-${mode.id}`);
+                    const checkbox = document.querySelector(`input[name="active_shadow"][value="${mode.id}"]`);
+                    if (drawer && checkbox) {
+                        shadowState[mode.id] = {
+                            active: checkbox.checked, x: drawer.querySelector('.s-x').value, y: drawer.querySelector('.s-y').value,
+                            b: drawer.querySelector('.s-b').value, s: drawer.querySelector('.s-s').value,
+                            c: drawer.querySelector('.s-c').value, o: drawer.querySelector('.s-o').value
+                        };
                     }
+                });
+                localStorage.setItem('sttv_shadowConfig', JSON.stringify(shadowState));
+            } catch(e) { console.warn('save failed:', e); }
+        }
+
+        function packConfig() {
+            const shadowArr = [];
+            SHADOW_MODES.forEach(mode => {
+                const drawer = document.getElementById(`drawer-${mode.id}`);
+                const checkbox = document.querySelector(`input[name="active_shadow"][value="${mode.id}"]`);
+                if (drawer && checkbox && checkbox.checked) {
+                    shadowArr.push([
+                        mode.id, drawer.querySelector('.s-x').value, drawer.querySelector('.s-y').value,
+                        drawer.querySelector('.s-b').value, drawer.querySelector('.s-s').value,
+                        drawer.querySelector('.s-c').value, drawer.querySelector('.s-o').value
+                    ].join('*'));
                 }
-                if (config.length >= 17) {
-                    setC('toggle-hide-labels', config[14]);
-                    setV('val-title-size', config[15]);
-                    setV('val-title-spacing', config[16]);
-                }
-                if (config.length >= 18) setC('toggle-list-frame', config[17]);
-                if (config.length >= 20) {
-                    setV('val-icon-size', config[18]);
-                    setV('val-icon-spacing', config[19]);
-                }
-                setV('val-list-bg-opacity', config.length >= 21 ? config[20] : 10);
-                setV('val-frame-bg-opacity', config.length >= 22 ? config[21] : 100);
+            });
+
+            const configValues = [
+                g('val-bg-main'), g('val-text-color'),
+                localStorage.getItem('sttv_layoutMode') || 'grid', g('val-list-bg'),
+                g('val-list-text'), g('val-list-svg'),
+                g('val-theme-frame'), g('val-frame-size'),
+                g('val-svg-size'), g('val-svg-opacity'),
+                g('val-frame-radius'), g('val-frame-color'),
+                g('val-svg-color'), c('toggle-hide-labels') ? 1 : 0,
+                g('val-title-size'), g('val-title-spacing'),
+                c('toggle-list-frame') ? 1 : 0, g('val-icon-size'),
+                g('val-icon-spacing'), g('val-list-bg-opacity'),
+                g('val-frame-bg-opacity'), g('val-media-width'),
+                g('val-media-bg-opacity'), g('val-media-btn-size'),
+                g('val-media-bg-color'), g('val-media-btn-color'),
+                g('val-media-svg-color'), c('toggle-glass') ? 1 : 0,
+                g('val-popup-anim'), shadowArr.join('~'),
+                c('toggle-media-theme') ? 1 : 0,
+                c('toggle-theme-dot') ? 1 : 0,
+                g('val-thumb-size'),
+                g('val-thumb-color'),
+                g('val-thumb-theme')
+            ];
+            return encodeURIComponent(configValues.join('|'));
+        }
+
+        function unpackConfig(code) {
+            if (!code) return;
+            try {
+                if (drawerEl) drawerEl.classList.remove('adjusting'); 
+                localStorage.removeItem('sttv_customBgImage');
+                root.style.setProperty('--bg-image', 'none');
+                if (uploadBg) uploadBg.value = "";
+                if (window.__updateFileNameDisplay) window.__updateFileNameDisplay(null);
+
+                const decoded = decodeURIComponent(code.trim());
+                const data = decoded.split('|');
+                if (data.length < 29) { alert("Mã cấu hình không hợp lệ!"); return; }
                 
-                if (config.length >= 28) {
-                    setV('val-media-width', config[22]);
-                    setV('val-media-bg-opacity', config[23]);
-                    setV('val-media-btn-size', config[24]);
-                    setV('val-media-bg-color', config[25]);
-                    setV('val-media-btn-color', config[26]);
-                    setV('val-media-svg-color', config[27]);
-                }
-            } else {
-                if (config.bgMain) { setV('val-bg-main', config.bgMain); root.style.setProperty('--bg-main', config.bgMain); }
-                if (config.textColor) setV('val-text-color', config.textColor);
-                if (config.layoutMode) setLayoutMode(config.layoutMode);
-                if (config.listBg) setV('val-list-bg', config.listBg);
-                if (config.listText) setV('val-list-text', config.listText);
-                if (config.listSvg) setV('val-list-svg', config.listSvg);
-                if (config.listBgOpacity) setV('val-list-bg-opacity', config.listBgOpacity);
-                if (config.listFrame !== undefined) setC('toggle-list-frame', config.listFrame);
-
-                if (config.themeFrame) {
-                    setV('val-theme-frame', config.themeFrame);
-                    syncThemePickerVisuals(config.themeFrame);
-                }
-                if (config.frameSize) setV('val-frame-size', config.frameSize);
-                if (config.svgSize) setV('val-svg-size', config.svgSize);
-                if (config.svgOpacity) setV('val-svg-opacity', config.svgOpacity);
-                if (config.frameRadius) setV('val-frame-radius', config.frameRadius);
-                if (config.frameColor) setV('val-frame-color', config.frameColor);
-                if (config.frameBgOpacity) setV('val-frame-bg-opacity', config.frameBgOpacity);
-                if (config.svgColor) setV('val-svg-color', config.svgColor);
-
-                if (config.hideLabels !== undefined) setC('toggle-hide-labels', config.hideLabels);
-                if (config.titleSize) setV('val-title-size', config.titleSize);
-                if (config.titleSpacing) setV('val-title-spacing', config.titleSpacing);
-                if (config.iconSize) setV('val-icon-size', config.iconSize);
-                if (config.iconSpacing) setV('val-icon-spacing', config.iconSpacing);
-
-                if (config.mediaWidth) setV('val-media-width', config.mediaWidth);
-                if (config.mediaBgOpacity) setV('val-media-bg-opacity', config.mediaBgOpacity);
-                if (config.mediaBtnSize) setV('val-media-btn-size', config.mediaBtnSize);
-                if (config.mediaBgColor) setV('val-media-bg-color', config.mediaBgColor);
-                if (config.mediaBtnColor) setV('val-media-btn-color', config.mediaBtnColor);
-                if (config.mediaSvgColor) setV('val-media-svg-color', config.mediaSvgColor);
-
-                if (config.glassMode !== undefined) setC('toggle-glass', config.glassMode);
-                if (config.popupAnim) {
-                    setV('val-popup-anim', config.popupAnim);
-                    if (drawerEl) drawerEl.className = 'settings-drawer ' + (config.popupAnim !== 'default' ? config.popupAnim : '');
-                }
+                const setV = (id, v) => { const el = document.getElementById(id); if (el) el.value = v; };
+                const setC = (id, v) => { const el = document.getElementById(id); if (el) el.checked = v; };
+                
+                setV('val-bg-main', data[0]); setV('val-text-color', data[1]);
+                setLayoutMode(data[2]); setV('val-list-bg', data[3]);
+                setV('val-list-text', data[4]); setV('val-list-svg', data[5]);
+                setV('val-theme-frame', data[6]);
+                setV('val-frame-size', data[7]); setV('val-svg-size', data[8]); 
+                setV('val-svg-opacity', data[9]); setV('val-frame-radius', data[10]); 
+                setV('val-frame-color', data[11]); setV('val-svg-color', data[12]);
+                setC('toggle-hide-labels', data[13] === '1'); setV('val-title-size', data[14]);
+                setV('val-title-spacing', data[15]); setC('toggle-list-frame', data[16] === '1');
+                setV('val-icon-size', data[17]); setV('val-icon-spacing', data[18]);
+                setV('val-list-bg-opacity', data[19]); setV('val-frame-bg-opacity', data[20]);
+                setV('val-media-width', data[21]); setV('val-media-bg-opacity', data[22]);
+                setV('val-media-btn-size', data[23]); setV('val-media-bg-color', data[24]);
+                setV('val-media-btn-color', data[25]); setV('val-media-svg-color', data[26]);
+                setC('toggle-glass', data[27] === '1'); setV('val-popup-anim', data[28]);
+                
+                document.querySelectorAll('.shadow-switch').forEach(chk => { 
+                    chk.checked = false; 
+                    const drw = document.getElementById(`drawer-${chk.value}`); 
+                    if (drw) drw.classList.remove('active'); 
+                });
 
-                if (config.shadowConfig) {
-                    SHADOW_MODES.forEach(mode => {
-                        const item = config.shadowConfig[mode.id];
-                        const checkbox = document.querySelector(`input[name="active_shadow"][value="${mode.id}"]`);
-                        const drawer = document.getElementById(`drawer-${mode.id}`);
-                        if (item && checkbox && drawer) {
-                            checkbox.checked = item.active;
-                            if (item.active) drawer.classList.add('active'); 
-                            else drawer.classList.remove('active');
-                            drawer.querySelector('.s-x').value = item.x;
-                            drawer.querySelector('.s-y').value = item.y;
-                            drawer.querySelector('.s-b').value = item.b;
-                            drawer.querySelector('.s-s').value = item.s;
-                            drawer.querySelector('.s-c').value = item.c;
-                            drawer.querySelector('.s-o').value = item.o;
+                if (data[29]) {
+                    const shadows = data[29].split('~');
+                    shadows.forEach(sh => {
+                        const p = sh.split('*');
+                        if (p.length > 1) {
+                            const sId = p[0]; 
+                            const shadowSwitch = document.querySelector(`input[name="active_shadow"][value="${sId}"]`);
+                            if (shadowSwitch) {
+                                shadowSwitch.checked = true; 
+                                const drw = document.getElementById(`drawer-${sId}`); 
+                                if (drw) {
+                                    drw.classList.add('active');
+                                    drw.querySelector('.s-x').value = p[1]; 
+                                    drw.querySelector('.s-y').value = p[2];
+                                    drw.querySelector('.s-b').value = p[3]; 
+                                    drw.querySelector('.s-s').value = p[4]; 
+                                    drw.querySelector('.s-c').value = p[5]; 
+                                    if (p[6]) drw.querySelector('.s-o').value = p[6];
+                                }
+                            }
                         }
                     });
                 }
+
+                if (data[30] !== undefined) setC('toggle-media-theme', data[30] === '1');
+                if (data[31] !== undefined) setC('toggle-theme-dot', data[31] === '1'); 
+                else setC('toggle-theme-dot', true);
+                if (data[32] !== undefined) setV('val-thumb-size', data[32]);
+                if (data[33] !== undefined) setV('val-thumb-color', data[33]);
+                if (data[34] !== undefined) setV('val-thumb-theme', data[34]);
+
+                updateLiveVariables(true);
+            } catch(e) { 
+                console.error(e); 
+                alert("Lỗi đọc mã cấu hình! Vui lòng thử lại."); 
             }
-            updateLiveVariables();
-        } catch(e) { 
-            console.error(e);
-            alert("Mã cấu hình không hợp lệ!"); 
         }
-    }
 
-    const btnExport = document.getElementById('btn-export');
-    if (btnExport) btnExport.onclick = () => openConfigModal('export');
+        const btnExport = document.getElementById('btn-export');
+        if (btnExport) {
+            btnExport.addEventListener('click', (e) => { 
+                e.preventDefault(); 
+                const code = packConfig();
+                if (navigator.clipboard && window.isSecureContext) {
+                    navigator.clipboard.writeText(code).then(() => { 
+                        alert("Đã sao chép mã cấu hình thành công!"); 
+                    }).catch(() => { prompt("Sao chép mã cấu hình bên dưới:", code); });
+                } else {
+                    prompt("Sao chép mã cấu hình bên dưới:", code);
+                }
+            });
+        }
 
-    const btnImport = document.getElementById('btn-import');
-    if (btnImport) btnImport.onclick = () => openConfigModal('import');
+        const btnImport = document.getElementById('btn-import');
+        if (btnImport) {
+            btnImport.addEventListener('click', (e) => { 
+                e.preventDefault(); 
+                const code = prompt("📥 Dán mã cấu hình vào đây:"); 
+                if (code) { unpackConfig(code); resetPresetToCustom(); } 
+            });
+        }
 
-    function updateLiveVariables() {
-        const g = id => { const el = document.getElementById(id); return el ? el.value : ''; };
-        const c = id => { const el = document.getElementById(id); return el ? el.checked : false; };
+        const btnResetDefault = document.getElementById('btn-reset-default');
+        if (btnResetDefault) {
+            btnResetDefault.addEventListener('click', (e) => {
+                e.preventDefault();
+                if (confirm('⚠️ Khôi phục tất cả cài đặt về mặc định?\n\nThao tác này sẽ xóa toàn bộ tuỳ chỉnh, hình nền, theme hiện tại và KHÔNG THỂ hoàn tác.\n\nBạn có chắc chắn?')) {
+                    try {
+                        const keysToRemove = [];
+                        for (let i = 0; i < localStorage.length; i++) {
+                            const key = localStorage.key(i);
+                            if (key && key.startsWith('sttv_')) keysToRemove.push(key);
+                        }
+                        keysToRemove.forEach(k => localStorage.removeItem(k));
+                    } catch(err) { console.warn(err); }
+                    location.reload();
+                }
+            });
+        }
 
-        const bgMain = g('val-bg-main'); if (bgMain) root.style.setProperty('--bg-main', bgMain);
-        const textColor = g('val-text-color'); if (textColor) root.style.setProperty('--text-color', textColor);
-        const frameSize = g('val-frame-size'); if (frameSize) root.style.setProperty('--frame-size', frameSize + 'px');
-        const svgSize = g('val-svg-size'); if (svgSize) root.style.setProperty('--svg-size', svgSize + 'px');
-        const svgColor = g('val-svg-color'); if (svgColor) root.style.setProperty('--svg-color', svgColor);
-        const svgOpacity = g('val-svg-opacity'); if (svgOpacity) root.style.setProperty('--svg-opacity', svgOpacity / 100);
-        
-        const rawRadius = g('val-frame-radius');
-        if (rawRadius !== '') {
+        function updateLiveVariables(saveNow = false) {
+            root.style.setProperty('--bg-main', g('val-bg-main'));
+            root.style.setProperty('--text-color', g('val-text-color'));
+            root.style.setProperty('--frame-size', g('val-frame-size') + 'px');
+            root.style.setProperty('--svg-size', g('val-svg-size') + 'px');
+            root.style.setProperty('--svg-color', g('val-svg-color'));
+            root.style.setProperty('--svg-opacity', g('val-svg-opacity') / 100);
+            
+            const rawRadius = g('val-frame-radius');
             root.style.setProperty('--frame-border-radius', rawRadius + '%'); 
             root.style.setProperty('--list-border-radius', rawRadius + 'px'); 
-        }
 
-        const titleSize = g('val-title-size'); if (titleSize) root.style.setProperty('--title-size', titleSize + 'px');
-        const titleSpacing = g('val-title-spacing'); if (titleSpacing) root.style.setProperty('--title-spacing', titleSpacing + 'px');
-        const iconSize = g('val-icon-size'); if (iconSize) root.style.setProperty('--icon-font-size', iconSize + 'px');
-        const iconSpacing = g('val-icon-spacing'); if (iconSpacing) root.style.setProperty('--icon-spacing', iconSpacing + 'px');
-        root.style.setProperty('--label-display', c('toggle-hide-labels') ? 'none' : 'block');
-        
-        const currentLayout = safeGetItem('sttv_layoutMode') || 'grid';
-        if (btnList && btnGrid) {
-            if (currentLayout === 'list') { btnList.classList.add('active'); btnGrid.classList.remove('active'); } 
-            else { btnGrid.classList.add('active'); btnList.classList.remove('active'); }
-        }
+            root.style.setProperty('--title-size', g('val-title-size') + 'px');
+            root.style.setProperty('--title-spacing', g('val-title-spacing') + 'px');
+            root.style.setProperty('--icon-font-size', g('val-icon-size') + 'px');
+            root.style.setProperty('--icon-spacing', g('val-icon-spacing') + 'px');
+            root.style.setProperty('--label-display', c('toggle-hide-labels') ? 'none' : 'block');
+            
+            const currentLayout = localStorage.getItem('sttv_layoutMode') || 'grid';
+            if (btnLayoutList && btnLayoutGrid && mainContainer) {
+                if (currentLayout === 'list') { 
+                    btnLayoutList.classList.add('active'); 
+                    btnLayoutGrid.classList.remove('active'); 
+                    mainContainer.classList.add('list-mode'); 
+                    mainContainer.classList.remove('grid-mode'); 
+                } else { 
+                    btnLayoutGrid.classList.add('active'); 
+                    btnLayoutList.classList.remove('active'); 
+                    mainContainer.classList.add('grid-mode'); 
+                    mainContainer.classList.remove('list-mode'); 
+                }
+            }
 
-        const isListFrame = c('toggle-list-frame');
-        if (mainContainer) {
-            if (isListFrame) mainContainer.classList.add('list-frame-active'); 
-            else mainContainer.classList.remove('list-frame-active');
-        }
+            if (mainContainer) {
+                if (c('toggle-list-frame')) mainContainer.classList.add('list-frame-active'); 
+                else mainContainer.classList.remove('list-frame-active');
+            }
 
-        const listBgHex = g('val-list-bg');
-        const listBgOpacity = g('val-list-bg-opacity');
-        if (listBgHex) root.style.setProperty('--list-bg-color', listBgHex); 
-        if (listBgHex && listBgOpacity) root.style.setProperty('--list-bg-rgba', hexToRgba(listBgHex, listBgOpacity)); 
-        const listText = g('val-list-text'); if (listText) root.style.setProperty('--list-text-color', listText);
-        const listSvg = g('val-list-svg'); if (listSvg) root.style.setProperty('--list-svg-color', listSvg);
-
-        const frameSelect = g('val-theme-frame');
-        const frameColorHex = g('val-frame-color');
-        const frameColorOpacity = g('val-frame-bg-opacity');
-        const frameColorRgba = hexToRgba(frameColorHex, frameColorOpacity);
-        
-        if (frameSelect === 'none' || !frameSelect) { 
-            root.style.setProperty('--frame-bg', 'none'); 
-            root.style.setProperty('--frame-bg-color', frameColorRgba);
-        } else { 
-            root.style.setProperty('--frame-bg', `url('../${frameSelect}')`); 
-            root.style.setProperty('--frame-bg-color', 'transparent'); 
-        }
-        
-        const glassMode = c('toggle-glass');
-        if (mainContainer) {
-            if (glassMode) mainContainer.classList.add('glass-active'); 
-            else mainContainer.classList.remove('glass-active');
-        }
+            const listBgHex = g('val-list-bg');
+            const listBgOpacity = g('val-list-bg-opacity');
+            root.style.setProperty('--list-bg-color', listBgHex); 
+            root.style.setProperty('--list-bg-rgba', hexToRgba(listBgHex, listBgOpacity)); 
+            root.style.setProperty('--list-text-color', g('val-list-text'));
+            root.style.setProperty('--list-svg-color', g('val-list-svg'));
+
+            const frameSelect = g('val-theme-frame');
+            const frameColorRgba = hexToRgba(g('val-frame-color'), g('val-frame-bg-opacity'));
+            if (frameSelect === 'none' || !frameSelect) { 
+                root.style.setProperty('--frame-bg', 'none'); 
+                root.style.setProperty('--frame-bg-color', frameColorRgba); 
+            } else { 
+                root.style.setProperty('--frame-bg', `url('../${frameSelect}')`); 
+                root.style.setProperty('--frame-bg-color', 'transparent'); 
+            }
+            
+            if (mainContainer) {
+                if (c('toggle-glass')) mainContainer.classList.add('glass-active'); 
+                else mainContainer.classList.remove('glass-active');
+            }
 
-        const mediaBgColor = g('val-media-bg-color');
-        if (mediaBgColor) root.style.setProperty('--media-bg-rgb', hexToRgb(mediaBgColor));
-        const mediaBgOpacity = g('val-media-bg-opacity'); if (mediaBgOpacity) root.style.setProperty('--media-bg-opacity', mediaBgOpacity / 100);
-        const mediaWidth = g('val-media-width'); if (mediaWidth) root.style.setProperty('--media-width', mediaWidth + '%');
-        const mediaBtnColor = g('val-media-btn-color'); if (mediaBtnColor) root.style.setProperty('--media-btn-color', mediaBtnColor);
-        const mediaSvgColor = g('val-media-svg-color'); if (mediaSvgColor) root.style.setProperty('--media-svg-color', mediaSvgColor);
-        const mediaBtnSize = g('val-media-btn-size');
-        if (mediaBtnSize) {
+            root.style.setProperty('--media-bg-rgb', hexToRgb(g('val-media-bg-color')));
+            root.style.setProperty('--media-bg-opacity', g('val-media-bg-opacity') / 100);
+            root.style.setProperty('--media-width', g('val-media-width') + '%');
+            root.style.setProperty('--media-btn-color', g('val-media-btn-color'));
+            root.style.setProperty('--media-svg-color', g('val-media-svg-color'));
+            const mediaBtnSize = g('val-media-btn-size');
             root.style.setProperty('--media-btn-size', mediaBtnSize + 'px');
             root.style.setProperty('--media-btn-play', (parseInt(mediaBtnSize) + 15) + 'px');
-        }
 
-        updateShadow();
-        saveSettingsToLocal();
-    }
+            root.style.setProperty('--thumb-size', g('val-thumb-size') + 'px');
+            root.style.setProperty('--thumb-color', g('val-thumb-color'));
+            const thumbThemeSelect = g('val-thumb-theme');
+            if (thumbThemeSelect === 'none') root.style.setProperty('--thumb-bg-image', "url('../Theme/icon-dot.png')");
+            else root.style.setProperty('--thumb-bg-image', `url('../${thumbThemeSelect}')`);
+
+            const toggleMediaTheme = document.getElementById('toggle-media-theme');
+            const toggleThemeDot = document.getElementById('toggle-theme-dot');
+            const btnThumbThemeEl = document.getElementById('btn-thumb-theme');
+            const thumbColorEl = document.getElementById('val-thumb-color');
+            const thumbColorItem = thumbColorEl ? thumbColorEl.parentElement : null;
+            const mediaWidget = document.querySelector('.media-player-widget');
+            
+            if (mediaWidget) {
+                if (toggleMediaTheme && toggleMediaTheme.checked) mediaWidget.classList.add('theme-synced');
+                else mediaWidget.classList.remove('theme-synced');
+
+                if (toggleThemeDot && toggleThemeDot.checked) {
+                    mediaWidget.classList.remove('pure-css-dots');
+                    if (btnThumbThemeEl) btnThumbThemeEl.classList.remove('disabled');
+                    if (thumbColorItem) { thumbColorItem.style.opacity = '0.5'; thumbColorItem.style.pointerEvents = 'none'; }
+                } else {
+                    mediaWidget.classList.add('pure-css-dots');
+                    if (btnThumbThemeEl) btnThumbThemeEl.classList.add('disabled');
+                    if (thumbColorItem) { thumbColorItem.style.opacity = '1'; thumbColorItem.style.pointerEvents = 'auto'; }
+                }
+            }
 
-    function loadSettingsFromLocal() {
-        const safeSet = (id, key, fallback, isCheck = false) => {
-            const el = document.getElementById(id); 
-            if (!el) return;
-            const val = safeGetItem('sttv_' + key);
-            if (isCheck) el.checked = val === 'true' ? true : (val === null ? fallback : false);
-            else el.value = val !== null ? val : fallback;
-        };
+            updateShadow();
+            if (saveNow) saveSettingsToLocal();
+        }
 
-        safeSet('val-bg-main', 'bgMain', '#121b22'); 
-        safeSet('val-text-color', 'textColor', '#ffffff');
-        safeSet('val-list-bg', 'listBg', '#1a1a1a'); 
-        safeSet('val-list-bg-opacity', 'listBgOpacity', '10');
-        safeSet('val-list-text', 'listText', '#ffffff'); 
-        safeSet('val-list-svg', 'listSvg', '#ffffff');
-        
-        const savedFrame = safeGetItem('sttv_themeFrame') || 'none';
-        const frameEl = document.getElementById('val-theme-frame');
-        if (frameEl) frameEl.value = savedFrame;
-        syncThemePickerVisuals(savedFrame);
-
-        const savedPreset = safeGetItem('sttv_activePreset') || 'none';
-        if (presetSelect) presetSelect.value = savedPreset;
-
-        const savedAnim = safeGetItem('sttv_popupAnim') || 'default';
-        if (popupAnimSelect) popupAnimSelect.value = savedAnim;
-        if (savedAnim !== 'default' && drawerEl) drawerEl.classList.add(savedAnim);
-
-        safeSet('val-frame-size', 'frameSize', '60');
-        safeSet('val-svg-size', 'svgSize', '28'); 
-        safeSet('val-svg-opacity', 'svgOpacity', '100');
-        safeSet('val-svg-color', 'svgColor', '#ffffff'); 
-        safeSet('val-frame-radius', 'frameRadius', '22');
-        safeSet('val-frame-color', 'frameColor', '#000000'); 
-        safeSet('val-frame-bg-opacity', 'frameBgOpacity', '100');
-        
-        safeSet('toggle-hide-labels', 'hideLabels', false, true); 
-        safeSet('toggle-list-frame', 'listFrame', false, true);
-        safeSet('val-title-size', 'titleSize', '22'); 
-        safeSet('val-title-spacing', 'titleSpacing', '0.5');
-        safeSet('val-icon-size', 'iconSize', '14'); 
-        safeSet('val-icon-spacing', 'iconSpacing', '0');
-        safeSet('toggle-glass', 'glassMode', false, true); 
-        safeSet('toggle-audio', 'audioFeedback', false, true);
-        safeSet('toggle-parallax', 'parallax', false, true);
-
-        safeSet('val-media-width', 'mediaWidth', '90'); 
-        safeSet('val-media-bg-opacity', 'mediaBgOpacity', '3');
-        safeSet('val-media-btn-size', 'mediaBtnSize', '50'); 
-        safeSet('val-media-bg-color', 'mediaBgColor', '#ffffff');
-        safeSet('val-media-btn-color', 'mediaBtnColor', '#ffffff'); 
-        safeSet('val-media-svg-color', 'mediaSvgColor', '#ffffff');
-
-        const savedShadowConfig = safeGetItem('sttv_shadowConfig');
-        if (savedShadowConfig) {
-            try {
-                const shadowState = JSON.parse(savedShadowConfig);
-                SHADOW_MODES.forEach(mode => {
-                    if (shadowState[mode.id]) {
-                        const item = shadowState[mode.id];
-                        const checkbox = document.querySelector(`input[name="active_shadow"][value="${mode.id}"]`);
-                        const drawer = document.getElementById(`drawer-${mode.id}`);
-                        if (checkbox && drawer) {
-                            checkbox.checked = item.active;
-                            if (item.active) drawer.classList.add('active'); 
-                            else drawer.classList.remove('active');
-                            drawer.querySelector('.s-x').value = item.x;
-                            drawer.querySelector('.s-y').value = item.y;
-                            drawer.querySelector('.s-b').value = item.b;
-                            drawer.querySelector('.s-s').value = item.s;
-                            drawer.querySelector('.s-c').value = item.c;
-                            drawer.querySelector('.s-o').value = item.o;
+        function loadSettingsFromLocal() {
+            const safeSet = (id, key, fallback, isCheck = false) => {
+                const el = document.getElementById(id); 
+                if (!el) return;
+                const val = localStorage.getItem('sttv_' + key);
+                if (isCheck) el.checked = val === 'true' ? true : (val === null ? fallback : false);
+                else el.value = val !== null ? val : fallback;
+            };
+
+            safeSet('val-bg-main', 'bgMain', '#121b22'); 
+            safeSet('val-text-color', 'textColor', '#ffffff');
+            safeSet('val-list-bg', 'listBg', '#1a1a1a'); 
+            safeSet('val-list-bg-opacity', 'listBgOpacity', '10');
+            safeSet('val-list-text', 'listText', '#ffffff'); 
+            safeSet('val-list-svg', 'listSvg', '#ffffff');
+            
+            const vtf = document.getElementById('val-theme-frame');
+            if (vtf) vtf.value = localStorage.getItem('sttv_themeFrame') || 'none';
+            if (presetSelect) presetSelect.value = localStorage.getItem('sttv_activePreset') || 'none';
+            
+            const savedAnim = localStorage.getItem('sttv_popupAnim') || 'default';
+            if (popupAnimSelect) popupAnimSelect.value = savedAnim;
+            if (savedAnim !== 'default' && drawerEl) drawerEl.classList.add(savedAnim);
+
+            safeSet('val-frame-size', 'frameSize', '60'); 
+            safeSet('val-svg-size', 'svgSize', '28'); 
+            safeSet('val-svg-opacity', 'svgOpacity', '100'); 
+            safeSet('val-svg-color', 'svgColor', '#ffffff'); 
+            safeSet('val-frame-radius', 'frameRadius', '22'); 
+            safeSet('val-frame-color', 'frameColor', '#000000'); 
+            safeSet('val-frame-bg-opacity', 'frameBgOpacity', '100');
+            
+            safeSet('toggle-hide-labels', 'hideLabels', false, true); 
+            safeSet('toggle-list-frame', 'listFrame', false, true);
+            safeSet('val-title-size', 'titleSize', '22'); 
+            safeSet('val-title-spacing', 'titleSpacing', '0.5');
+            safeSet('val-icon-size', 'iconSize', '14'); 
+            safeSet('val-icon-spacing', 'iconSpacing', '0');
+            safeSet('toggle-glass', 'glassMode', false, true); 
+            safeSet('toggle-audio', 'audioFeedback', false, true);
+            safeSet('toggle-parallax', 'parallax', false, true);
+
+            safeSet('val-media-width', 'mediaWidth', '90'); 
+            safeSet('val-media-bg-opacity', 'mediaBgOpacity', '3');
+            safeSet('val-media-btn-size', 'mediaBtnSize', '50'); 
+            safeSet('val-media-bg-color', 'mediaBgColor', '#ffffff');
+            safeSet('val-media-btn-color', 'mediaBtnColor', '#ffffff'); 
+            safeSet('val-media-svg-color', 'mediaSvgColor', '#ffffff');
+            safeSet('toggle-media-theme', 'mediaThemeSync', false, true);
+            
+            safeSet('toggle-theme-dot', 'themeDot', true, true);
+            safeSet('val-thumb-size', 'thumbSize', '25');
+            safeSet('val-thumb-color', 'thumbColor', '#ffffff');
+            const vtt = document.getElementById('val-thumb-theme');
+            if (vtt) vtt.value = localStorage.getItem('sttv_thumbTheme') || 'none';
+
+            const savedShadowConfig = localStorage.getItem('sttv_shadowConfig');
+            if (savedShadowConfig) {
+                try {
+                    const shadowState = JSON.parse(savedShadowConfig);
+                    SHADOW_MODES.forEach(mode => {
+                        if (shadowState[mode.id]) {
+                            const item = shadowState[mode.id];
+                            const checkbox = document.querySelector(`input[name="active_shadow"][value="${mode.id}"]`);
+                            const drawer = document.getElementById(`drawer-${mode.id}`);
+                            if (checkbox && drawer) {
+                                checkbox.checked = item.active;
+                                if (item.active) drawer.classList.add('active'); 
+                                else drawer.classList.remove('active');
+                                drawer.querySelector('.s-x').value = item.x; 
+                                drawer.querySelector('.s-y').value = item.y;
+                                drawer.querySelector('.s-b').value = item.b; 
+                                drawer.querySelector('.s-s').value = item.s;
+                                drawer.querySelector('.s-c').value = item.c; 
+                                drawer.querySelector('.s-o').value = item.o;
+                            }
                         }
-                    }
-                });
-            } catch(e) { console.error("Lỗi đọc cấu hình shadow:", e); }
-        }
+                    });
+                } catch(e) {}
+            }
 
-        const initLayout = safeGetItem('sttv_layoutMode') || 'grid';
-        if (btnList && btnGrid) {
-            if (initLayout === 'list') { btnList.classList.add('active'); btnGrid.classList.remove('active'); } 
-            else { btnGrid.classList.add('active'); btnList.classList.remove('active'); }
-        }
+            const initLayout = localStorage.getItem('sttv_layoutMode') || 'grid';
+            if (btnLayoutList && btnLayoutGrid) {
+                if (initLayout === 'list') { 
+                    btnLayoutList.classList.add('active'); 
+                    btnLayoutGrid.classList.remove('active'); 
+                } else { 
+                    btnLayoutGrid.classList.add('active'); 
+                    btnLayoutList.classList.remove('active'); 
+                }
+            }
 
-        const savedBg = safeGetItem('sttv_customBgImage'); 
-        if (savedBg) root.style.setProperty('--bg-image', `url('${savedBg}')`);
-    }
+            const savedBg = localStorage.getItem('sttv_customBgImage'); 
+            if (savedBg) root.style.setProperty('--bg-image', `url('${savedBg}')`);
+        }
 
-    loadSettingsFromLocal();
-    updateLiveVariables();
+        loadSettingsFromLocal();
+        updateLiveVariables(true);
 
-    document.addEventListener("visibilitychange", function() { 
-        if (document.visibilityState === 'hidden') saveSettingsToLocal(); 
-    });
-    window.addEventListener("beforeunload", saveSettingsToLocal);
-    window.addEventListener("pagehide", saveSettingsToLocal);
+        document.addEventListener("visibilitychange", () => { 
+            if (document.visibilityState === 'hidden') saveSettingsToLocal(); 
+        });
+        window.addEventListener("beforeunload", saveSettingsToLocal);
+    } catch(err) {
+        console.error('Theme.js crashed:', err);
+        if (window.__dismissIntro) window.__dismissIntro();
+    }
 });
\ No newline at end of file