/*
Author: Nguonnha APP
ĐĂNG TIN FRONTEND APP STYLE
Version: 3.0.6
*/
:root { --nn-brand: #089ED3; --nn-bg: #F9F9F9; --nn-border: #E0E0E0; --nn-text: #333; }
input[type=checkbox], input[type=radio] { display: inline; margin: 5px 3px 3px 10px; font-size: 14px; }
.success { background-color: #ecfff8 !important; display: block; color: #007047; font-weight: bold; text-align: center; padding: 12px; border: 1px solid #04AA6D; margin: 15px; border-radius: 10px; }
.nn-vn-valid-count { font-size: 13px; color: #666; text-align: -webkit-left; padding: 7px 0px; font-weight: bold; font-style: italic; }
.char-count { display: block; position: absolute; right: 17px; font-size: 12px; margin-top: -10px; }
.nn-vn-btn-group { display: flex; gap: 12px; }
div#nn-post-form-root.nn-vn-post-container, div#nn-video-form-root.nn-vn-post-container { max-width: 850px !important; margin: 0px auto !important; background: #fff !important; padding: 15px !important; border-radius: 15px !important; box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important; }
#nn-post-form-root .nn-vn-form-wrapper, #nn-video-form-root .nn-vn-form-wrapper { padding: 0 !important; }
#nn-post-form-root .acf-form, #nn-video-form-root .acf-form { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; align-items: flex-start !important; }
#nn-post-form-root .acf-fields, #nn-video-form-root .acf-fields { display: contents !important; }
#nn-post-form-root .acf-field, #nn-video-form-root .acf-field { margin: 0 !important; padding: 0 !important; border: none !important; position: relative !important; float: none !important; clear: none !important; }
#nn-post-form-root .acf-description, #nn-post-form-root .description, #nn-post-form-root p.description, #nn-post-form-root .acf-instructions, #nn-video-form-root .acf-description, #nn-video-form-root .description, #nn-video-form-root p.description, #nn-video-form-root .acf-instructions { display: none !important; visibility: hidden !important; height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; }
#nn-post-form-root .acf-field[data-name="_post_title"], #nn-video-form-root .acf-field[data-name="_post_title"] { order: 1; width: 100% !important; }
#nn-post-form-root .acf-field[data-key="field_5d65483d477c3"], #nn-post-form-root .acf-field[data-key="field_64e51571e548c"], #nn-video-form-root .acf-field[data-key="field_6a5503d95c175"], #nn-video-form-root .acf-field[data-key="field_6a5503f15c176"] { width: calc(50% - 5px) !important; order: 2; }
#nn-post-form-root .acf-field[data-key="field_64ea516b9407a"], #nn-post-form-root .acf-field[data-key="field_64ea523cd6a92"], #nn-video-form-root .acf-field[data-key="field_6a55040b5c177"], #nn-video-form-root .acf-field[data-key="field_6a5503525c174"] { width: calc(50% - 5px) !important; order: 3; }
#nn-post-form-root .acf-field[data-key="field_68883bd9005f1"], #nn-post-form-root .acf-field[data-key="field_64e79c6fb1093"], #nn-post-form-root .acf-field[data-key="field_6894e77126e5a"] { width: calc(33.33% - 6.7px) !important; order: 4; }
#nn-post-form-root .acf-field[data-key="field_5d654901477ca"], #nn-post-form-root .acf-field[data-key="field_65d85395c5f5e"], #nn-video-form-root .acf-field[data-key="field_6a55031f5c173"] { width: 100% !important; order: 5; }
#nn-post-form-root .nn-vn-media-phone-row, #nn-video-form-root .nn-vn-media-phone-row { width: 100% !important; order: 6 !important; display: flex !important; gap: 10px !important; margin-top: 5px !important; }
#nn-post-form-root .nn-vn-media-box, #nn-post-form-root .nn-vn-phone-box, #nn-video-form-root .nn-vn-media-box, #nn-video-form-root .nn-vn-phone-box { width: calc(50% - 5px) !important; flex: none !important; }
#nn-post-form-root .acf-label label, #nn-video-form-root .acf-label label { font-size: 12px !important; font-weight: 700 !important; color: #555 !important; margin-bottom: 4px !important; display: block !important; text-transform: uppercase !important; }
#nn-post-form-root .acf-input-wrap input, #nn-post-form-root .acf-input select, #nn-video-form-root .acf-input-wrap input, #nn-video-form-root .acf-input select { height: 38px !important; background: var(--nn-bg) !important; border: 1.5px solid var(--nn-border) !important; border-radius: 8px !important; font-size: 13px !important; padding: 0 10px !important; box-shadow: none !important; transition: all 0.2s ease !important; width: 100% !important; margin-bottom: 5px; box-sizing: border-box !important; }
#nn-post-form-root textarea, #nn-video-form-root textarea { min-height: 110px !important; max-height: 300px !important; background: var(--nn-bg) !important; border: 1.5px solid var(--nn-border) !important; border-radius: 10px !important; font-size: 14px !important; padding: 12px !important; overflow-y: auto !important; resize: none !important; width: 100% !important; box-sizing: border-box !important; transition: border-color 0.2s ease !important; }
#nn-post-form-root .acf-field:hover, #nn-post-form-root .acf-field.-focus, #nn-video-form-root .acf-field:hover, #nn-video-form-root .acf-field.-focus { background: transparent !important; }
#nn-post-form-root .acf-input-wrap input:focus, #nn-post-form-root .acf-input select:focus, #nn-post-form-root textarea:focus, #nn-video-form-root .acf-input-wrap input:focus, #nn-video-form-root .acf-input select:focus, #nn-video-form-root textarea:focus { border-color: var(--nn-brand) !important; background: #fff !important; outline: none !important; }
#nn-post-form-root .nn-vn-img-placeholder { width: 120px !important; height: 110px !important; background: #f0f7ff !important; border: 2px dashed #089ed3 !important; border-radius: 12px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; }
#nn-post-form-root .nn-vn-img-placeholder i { font-size: 24px !important; color: #999 !important; }
#nn-post-form-root .nn-vn-img-placeholder span { font-size: 11px !important; color: #999 !important; margin-top: 5px !important; }
#nn-post-form-root .nn-vn-img-placeholder img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 10px !important; }
#nn-post-form-root .nn-vn-phone-box, #nn-video-form-root .nn-vn-phone-box { margin-top: 30px; background: #fff !important; border: 1.5px solid var(--nn-border) !important; border-radius: 12px !important; padding: 15px !important; height: 105px !important; display: flex !important; flex-direction: column !important; justify-content: center !important; }
#nn-post-form-root .phone-label, #nn-video-form-root .phone-label { font-size: 11px !important; color: #888 !important; margin-bottom: 2px !important; font-weight: 600 !important; }
#nn-post-form-root .verified-badge, #nn-video-form-root .verified-badge { background: #E8F5E9 !important; color: #2E7D32 !important; font-size: 9px !important; padding: 2px 8px !important; border-radius: 10px !important; font-weight: 600 !important; text-transform: uppercase !important; }
#nn-post-form-root .phone-number, #nn-video-form-root .phone-number { font-size: 22px !important; font-weight: 600 !important; color: var(--nn-brand) !important; letter-spacing: 0.5px !important; margin-top: 5px !important; }
#nn-post-form-root .nn-vn-gallery-section { width: 100% !important; order: 7 !important; margin-top: 15px !important; }
#nn-post-form-root .nn-vn-gallery-grid { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; padding: 5px 2px 15px 2px !important; align-items: flex-start !important; }
#nn-gal-preview { display: contents !important; }
#nn-post-form-root .nn-vn-add-img { min-width: 80px !important; height: 80px !important; background: #f0f7ff !important; border: 2px dashed var(--nn-brand) !important; border-radius: 12px !important; display: flex !important; flex-direction: column !important; align-items: center !important; font-size: 10px !important; font-weight: bold !important; color: var(--nn-brand) !important; justify-content: center !important; cursor: pointer !important; flex-shrink: 0 !important; transition: all 0.2s ease; }
#nn-post-form-root .nn-vn-add-img:hover { background: #e3f2fd !important; }
#nn-post-form-root .nn-vn-add-img i { font-size: 18px !important; margin-bottom: 2px !important; }
#nn-gal-preview .gal-item { position: relative; width: 80px; height: 80px; flex-shrink: 0; border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
#nn-gal-preview .gal-item img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 12px !important; }
#nn-gal-preview .gal-remove { position: absolute; top: -6px; right: -6px; background: #ff3b30 !important; color: #fff !important; width: 22px !important; height: 22px !important; border-radius: 50% !important; font-size: 14px !important; display: flex !important; align-items: center !important; justify-content: center !important; border: 2px solid #fff !important; cursor: pointer !important; z-index: 10; line-height: 1 !important; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
#nn-post-form-root .nn-vn-content-box, #nn-video-form-root .nn-vn-content-box { width: 100% !important; order: 8 !important; margin-top: 15px !important; }
#nn-post-form-root .nn-vn-switches, #nn-video-form-root .nn-vn-switches { width: 100% !important; order: 9 !important; background: #f3fcff !important; border-radius: 10px !important; padding: 7px 10px !important; margin-top: 8px !important; border: 1px solid #089ed3; }
#nn-post-form-root .switch-item, #nn-video-form-root .switch-item { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-bottom: 3px !important; font-size: 13px !important; font-weight: 700 !important; color: #666 !important; }
#nn-post-form-root .acf-form-submit, #nn-video-form-root .acf-form-submit { width: 100% !important; order: 10 !important; clear: both !important; }
#nn-post-form-root .nn-vn-actions { width: 100% !important; margin: 8px 0px; text-align: center; }
#nn-post-form-root .nn-vn-btn-primary, #nn-video-form-root .nn-vn-btn-primary { height: 40px !important; width: 100%; background: var(--nn-brand) !important; border: none !important; color: #fff !important; border-radius: 5px !important; font-size: 16px !important; font-weight: 600 !important; cursor: pointer !important; }
#nn-post-form-root .nn-vn-btn-bolt { height: 40px !important; min-width: 100px; background: #fff4bc !important; border: 1px solid #ffe185; color: #d19d00 !important; border-radius: 5px !important; font-size: 14px !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: transform 0.2s !important; }
#nn-post-form-root .nn-vn-btn-bolt:hover { transform: scale(1.05); }
.nn-live-preview { width: 100%; max-width: 450px; margin: 10px auto; background: #fff; border-radius: 30px; overflow: hidden; box-shadow: 0 15px 50px rgba(0,0,0,0.1); border: 8px solid #333; }
.nn-lp-container { background: #fff; min-height: 600px; display: flex; flex-direction: column; }
.nn-lp-image-wrap { position: relative; width: 100%; padding-top: 66%; background: #f0f0f0; }
#nn-lp-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.nn-lp-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 40px; color: #ccc; }
.nn-lp-badge-verified { position: absolute; bottom: 15px; right: 15px; background: rgba(255,255,255,0.95); color: #2E7D32; font-size: 10px; font-weight: 600; padding: 6px 12px; border-radius: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.nn-lp-body { padding: 20px; flex: 1; }
.nn-lp-title { font-size: 18px; font-weight: 600; line-height: 1.4; color: #111; margin-bottom: 15px; }
.nn-lp-price-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.nn-lp-price { font-size: 24px; font-weight: 600; color: #D30808; }
.nn-lp-ms { border: 1.5px solid #D30808; color: #D30808; font-size: 12px; font-weight: 600; border-radius: 20px; padding: 4px 12px; display: flex; align-items: center; gap: 8px; }
.nn-lp-ms i { background: #D30808; color: #fff; padding: 4px; border-radius: 50%; font-size: 8px; }
.nn-lp-price-note { color: #D30808; font-size: 12px; font-style: italic; margin-bottom: 25px; }
.nn-lp-desc-header { display: flex; justify-content: space-between; border-bottom: 2px solid #eee; padding-bottom: 8px; margin-bottom: 15px; font-weight: 600; font-size: 15px; }
.nn-lp-date { font-size: 11px; color: #999; font-weight: 400; }
.nn-lp-content { font-size: 14px; line-height: 1.6; color: #333; margin-bottom: 3px; }
.nn-lp-emoji-row { font-size: 14px; line-height: 1.6; color: #333; }
.nn-lp-emoji-row div { margin-bottom: 4px; }
.nn-lp-analysis { margin-top: 30px; background: #fff; border-top: 1px solid #f0f0f0; padding-top: 20px; }
.analysis-header { text-align: right; font-size: 12px; color: #BCA474; text-decoration: underline; margin-bottom: 15px; cursor: pointer; }
.analysis-bars { display: flex; justify-content: space-between; margin-bottom: 15px; }
.bar-item { flex: 1; display: flex; flex-direction: column; }
.bar-label { font-size: 9px; font-weight: 600; color: #999; margin-bottom: 5px; }
.bar-value { font-size: 14px; font-weight: 600; color: #BCA474; }
.bar-item.center { flex: 2; align-items: center; }
.bar-item.right { align-items: flex-end; }
.buy-range-box { background: #E8F5E9; color: #2E7D32; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 20px; }
.bar-item.right .bar-value { color: #D30808; }
.analysis-progress { width: 100%; height: 18px; background: #f0f0f0; border-radius: 3px; position: relative; overflow: hidden; }
.progress-bg { width: 100%; height: 100%; background: linear-gradient(to right, #BCA474 5%, #2E7D32 5%, #2E7D32 95%, #D30808 95%); }
.progress-fill { position: absolute; top: 0; left: 15%; right: 15%; height: 100%; background: #2E7D32; color: #fff; font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; text-transform: uppercase; }
@media (max-width: 767px) { div#nn-post-form-root.nn-vn-post-container { border-radius: 0 !important; margin: 0px -10px !important; padding: 5px 10px !important; } }
.nn-vn-modal { display: none; position: fixed; z-index: 100000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); overflow: auto; backdrop-filter: blur(8px); align-items: center; justify-content: center; }
.xu-confirm-box { background: #fff; margin: auto; padding: 25px; width: 90%; max-width: 420px; border-radius: 24px; position: relative; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
.xu-confirm-close { position: absolute; top: 15px; right: 20px; font-size: 20px; color: #999; cursor: pointer; }
.xu-confirm-header img { width: 64px; height: 64px; margin-bottom: 12px; }
.xu-confirm-header h3 { font-size: 20px; font-weight: 700; color: #212121; margin: 0; }
.xu-confirm-note { font-size: 14px; color: #666; margin: 10px 0 20px; line-height: 1.5; }
.xu-calc-table { background: #F8F9FA; border: 1.5px solid #EEE; border-radius: 16px; padding: 16px; margin-bottom: 25px; }
.xu-row { display: flex; justify-content: space-between; font-size: 14px; color: #444; margin-bottom: 8px; }
.xu-row.spend { color: #D30808; font-weight: 700; }
.xu-divider { height: 1px; background: #EEE; margin: 10px 0; }
.xu-row.total { font-weight: 700; color: #212121; font-size: 16px; margin-bottom: 0; }
.xu-val { font-family: 'Roboto Mono', monospace; font-weight: 700; }
.xu-error-alert { background: #FFF1F0; border: 1.5px solid #FFA39E; color: #CF1322; padding: 12px; border-radius: 12px; font-size: 13px; font-weight: 600; margin-bottom: 25px; display: flex; align-items: center; gap: 8px; text-align: left; }
.xu-confirm-actions { display: flex; gap: 12px; }
.nn-btn-cancel, .nn-btn-close-modal { flex: 1; height: 48px; background: #F5F5F5; border: none; border-radius: 12px; font-weight: 700; cursor: pointer; color: #777; transition: all 0.2s; }
.nn-btn-confirm, .nn-btn-recharge { flex: 1.5; height: 48px; background: var(--nn-brand); border: none; border-radius: 12px; color: #fff; font-weight: 700; cursor: pointer; text-decoration: none !important; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.nn-btn-confirm:hover { background: #0288D1; }
.nn-btn-recharge { background: #D30808; }
.video-mode.nn-live-preview { max-width: 320px; border-radius: 35px; border: 8px solid #1A1A1A; position: relative; background: #000; box-shadow: 0 25px 50px rgba(0,0,0,0.4); }
.video-mode .nn-lp-video-wrap { position: relative; width: 100%; padding-top: 177.77%; overflow: hidden; }
.video-mode #nn-lp-video-player { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.video-mode #nn-lp-video-player iframe { width: 100%; height: 100%; object-fit: cover; }
.video-mode .nn-lp-placeholder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 0; }
.nn-lp-sidebar { position: absolute; right: 10px; bottom: 100px; z-index: 20; display: flex; flex-direction: column; gap: 20px; align-items: center; }
.nn-lp-sidebar .sidebar-item { display: flex; flex-direction: column; align-items: center; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.8); }
.nn-lp-sidebar .sidebar-item i { font-size: 28px; margin-bottom: 2px; }
.nn-lp-sidebar .sidebar-item span { font-size: 11px; font-weight: 600; }
.video-mode .nn-lp-body { background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.5) 40%, transparent 100%); position: absolute; bottom: 0; left: 0; right: 0; color: #fff; padding: 25px 15px 35px; z-index: 10; pointer-events: none; text-align: left; }
.video-mode .nn-lp-title { color: #fff; font-size: 16px; font-weight: 700; margin-bottom: 10px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.video-mode .nn-lp-info-row { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.video-mode .nn-lp-price { background: #D30808; color: #fff; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 4px; }
.video-mode .nn-lp-area { background: #607D8B; color: #fff; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 4px; }
.video-mode .nn-lp-profile-row { margin-bottom: 12px; display: flex; }
.video-mode .nn-lp-profile-chip { background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.2); border-radius: 30px; padding: 5px 12px 5px 5px; display: flex; align-items: center; gap: 8px; }
.video-mode .mini-avatar { width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3); object-fit: cover; }
.video-mode .user-name { font-size: 13px; font-weight: 700; color: #fff; }
.video-mode .btn-follow { background: var(--nn-brand); color: #fff; font-size: 11px; padding: 3px 10px; border-radius: 20px; font-weight: 700; margin-left: 5px; }
.video-mode .nn-lp-desc { font-size: 13px; color: rgba(255,255,255,0.8); line-height: 1.4; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.video-mode .nn-lp-location { font-size: 12px; color: rgba(255,255,255,0.6); display: flex; align-items: center; gap: 5px; }
.video-mode .nn-lp-location i { font-size: 10px; }
.nn-video-album-wrapper { background: #fff; padding: 20px; border-radius: 20px; color: #333; min-height: 600px; margin: 10px 0; border: 1px solid #eee; }
.nn-video-filter-row { display: flex; gap: 10px; margin-bottom: 12px; align-items: center; }
.nn-v-filter-group { flex: 1; display: flex; gap: 8px; }
.nn-v-select { flex: 1; height: 38px !important; background: var(--nn-bg) !important; border: 1.5px solid var(--nn-border) !important; border-radius: 8px !important; color: #333 !important; font-size: 13px !important; padding: 0 10px !important; appearance: none; -webkit-appearance: none; cursor: pointer; outline: none !important; box-shadow: none !important; transition: all 0.2s ease !important; }
.nn-v-select:focus { border-color: var(--nn-brand) !important; background: #fff !important; }
.nn-v-select option { background: #fff; color: #333; }
.nn-v-btn-search { width: 38px; height: 38px; background: linear-gradient(135deg, #089ED3, #0277BD); border: none; border-radius: 8px; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; transition: transform 0.2s; }
.nn-v-btn-search:hover { transform: scale(1.05); }
.nn-v-sort-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-top: 1px solid #eee; padding-top: 15px; flex-wrap: wrap; gap: 10px; }
.nn-v-sort-group { display: flex; gap: 10px; }
.nn-v-sort-item { background: #f5f5f5; color: #666; padding: 6px 16px; border-radius: 20px; font-size: 12px; text-decoration: none !important; transition: all 0.2s; border: 1px solid #ddd; }
.nn-v-sort-item.active { background: #089ED3; color: #fff; border-color: #089ED3; font-weight: bold; box-shadow: 0 4px 10px rgba(8,158,211,0.3); }
.nn-v-btn-post { background: linear-gradient(135deg, #089ED3, #0277BD); color: #fff !important; padding: 8px 18px; border-radius: 20px; font-size: 13px; font-weight: bold; text-decoration: none !important; display: flex; align-items: center; gap: 6px; box-shadow: 0 4px 10px rgba(8,158,211,0.3); }
.nn-video-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
@media (max-width: 1400px) { .nn-video-grid { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 1100px) { .nn-video-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 850px) { .nn-video-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .nn-video-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; } .nn-video-album-wrapper { padding: 10px; border-radius: 0; margin: 0 -15px; } .nn-v-select { font-size: 11px !important; } }
.nn-v-item { position: relative; border-radius: 15px; overflow: hidden; background: #fff; border: 1px solid #eee; transition: transform 0.3s, border-color 0.3s; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.nn-v-item:hover { transform: translateY(-5px); border-color: #089ED3; }
.nn-v-thumb { position: relative; padding-top: 177.77%; overflow: hidden; background: #f0f0f0; }
.nn-v-thumb .nn-v-main-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.nn-v-item:hover .nn-v-thumb .nn-v-main-img { transform: scale(1.05); }
.nn-v-overlay { position: absolute; bottom: 0; left: 0; right: 0; height: 50%; background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.4) 60%, transparent 100%); }
.nn-v-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 32px; color: rgba(255,255,255,0.4); pointer-events: none; transition: all 0.3s; }
.nn-v-item:hover .nn-v-play { color: #fff; transform: translate(-50%, -50%) scale(1.2); }
.nn-v-author-mini { position: absolute; top: 8px; left: 8px; width: 26px !important; height: 26px !important; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.5); box-shadow: 0 2px 10px rgba(0,0,0,0.5); z-index: 5; object-fit: cover; }
.nn-v-info { position: absolute; bottom: 10px; left: 10px; right: 10px; pointer-events: none; z-index: 10; text-align: left; }
.nn-v-title { color: #fff; font-size: 13px; font-weight: 600; margin: 0 0 6px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 3px rgba(0,0,0,0.8); }
.nn-v-meta { display: flex; justify-content: space-between; align-items: flex-end; }
.nn-v-price { color: #089ED3; font-size: 13px; font-weight: 700; line-height: 1; }
.nn-v-area { color: #ccc; font-size: 10px; font-weight: 600; opacity: 0.8; }
.nn-v-pagination { text-align: center; margin-top: 30px; padding-bottom: 20px; }
.nn-v-pagination .page-numbers { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; background: #fff; color: #333; margin: 0 4px; border-radius: 50%; text-decoration: none !important; font-size: 14px; transition: all 0.2s; border: 1px solid #ddd; }
.nn-v-pagination .page-numbers:hover { background: #f5f5f5; border-color: #089ED3; }
.nn-v-pagination .page-numbers.current { background: #089ED3; color: #fff; font-weight: bold; border-color: #089ED3; box-shadow: 0 4px 10px rgba(8,158,211,0.3); }
.nn-v-empty { grid-column: 1 / -1; text-align: center; padding: 80px 0; color: #999; font-style: italic; font-size: 16px; }
body.nn-no-scroll { overflow: hidden !important; }
.nn-video-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 1000000; align-items: center; justify-content: center; backdrop-filter: blur(15px); }
.nn-vm-close { position: absolute; top: 30px; right: 30px; color: #fff; font-size: 32px; cursor: pointer; z-index: 100; opacity: 0.7; transition: opacity 0.3s; }
.nn-vm-close:hover { opacity: 1; }
.nn-vm-nav { position: absolute; top: calc(50% - 50px); transform: translateY(-50%); width: 60px; height: 60px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; cursor: pointer; z-index: 1000; transition: all 0.3s; opacity: 0.6; }
.nn-vm-nav:hover { background: rgba(255,255,255,0.25); opacity: 1; scale: 1.1; border-color: var(--nn-brand); }
.nn-vm-nav.prev { left: calc(50% - 210px - 180px); }
.nn-vm-nav.next { right: calc(50% - 210px - 180px); }
@media (max-width: 1300px) { .nn-vm-nav.prev { left: calc(50% - 210px - 170px); } .nn-vm-nav.next { right: calc(50% - 210px - 170px); } }
@media (max-width: 900px) { .nn-vm-nav.prev { left: 10px; background: rgba(0,0,0,0.3); } .nn-vm-nav.next { right: 10px; background: rgba(0,0,0,0.3); } }
@media (max-width: 600px) { .nn-vm-nav { display: none; } }
.nn-vm-full-wrapper { display: flex; align-items: flex-end; justify-content: center; width: 100%; max-width: 1300px; height: 90vh; gap: 20px; position: relative; padding-bottom: 40px; }
.nn-vm-side-panel { color: #fff; z-index: 10; width: 280px; flex-shrink: 0; }
.nn-vm-container { width: 100%; max-width: 420px; height: 100%; background: #000; border-radius: 16px; overflow: hidden; box-shadow: 0 0 100px rgba(0,0,0,0.8); border: 1px solid #333; position: relative; flex-shrink: 0; }
.nn-vm-video-wrap { position: relative; width: 100%; height: 100%; }
#nn-vm-player { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#nn-vm-player iframe { width: 100%; height: 100%; border: none; object-fit: cover; }
.nn-vm-side-panel.right .nn-lp-sidebar { position: static; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.nn-vm-side-panel.right .sidebar-item, .video-mode .nn-lp-sidebar .sidebar-item { cursor: pointer; transition: transform 0.2s; display: flex; flex-direction: column; align-items: center; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.8); }
.nn-vm-side-panel.right .sidebar-item:hover { transform: scale(1.1); }
.nn-vm-side-panel.right .sidebar-item .icon-wrap, .video-mode .nn-lp-sidebar .sidebar-item i { width: 48px; height: 48px; background: rgba(255,255,255,0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 5px; font-size: 20px; border: 1px solid rgba(255,255,255,0.1); }
.nn-vm-side-panel.right .sidebar-item span, .video-mode .nn-lp-sidebar .sidebar-item span { font-size: 11px; font-weight: 600; opacity: 0.8; }
.nn-vm-side-panel.right .btn-view-home .icon-wrap { background: var(--nn-brand); border-color: var(--nn-brand); }
.nn-vm-side-panel.left .nn-lp-body { position: static; background: transparent; padding: 0; pointer-events: auto; text-align: right; width: 100%; }
.nn-vm-side-panel.left .nn-lp-info-row { justify-content: flex-end; }
.nn-vm-side-panel.left .nn-lp-profile-row { justify-content: flex-end; }
.nn-vm-side-panel.left .nn-vm-desc { margin-left: auto; }
.nn-vm-title { font-size: 22px; font-weight: 600; line-height: 1.3; margin-bottom: 15px; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.nn-vm-desc { font-size: 14px; color: #ccc; line-height: 1.5; margin: 15px 0; max-width: 280px; opacity: 0.9; }
@media (max-width: 1100px) { .nn-vm-full-wrapper { max-width: 1000px; gap: 15px; } .nn-vm-side-panel { width: 220px; } }
@media (max-width: 900px) { .nn-vm-side-panel.left { display: none; } .nn-vm-side-panel.right { width: 80px; } .nn-vm-side-panel.right .nn-lp-sidebar { align-items: center; } }
@media (max-width: 600px) { .nn-vm-full-wrapper { height: 100vh; gap: 0; padding: 0; align-items: center; } .nn-vm-container { max-width: 100%; border-radius: 0; height: 100%; } .nn-vm-close { top: 15px; right: 15px; font-size: 24px; } .nn-vm-side-panel.right { position: absolute; right: 10px; bottom: 100px; z-index: 100; width: auto; } .nn-vm-side-panel.right .nn-lp-sidebar { align-items: center; gap: 15px; } .nn-vm-side-panel.right .sidebar-item .icon-wrap { width: 42px; height: 42px; font-size: 18px; } .nn-vm-side-panel.left { display: block; position: absolute; bottom: 0; left: 0; right: 0; padding: 20px; background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 50%, transparent 100%); z-index: 90; width: 100%; pointer-events: none; } .nn-vm-side-panel.left .nn-lp-body { text-align: left; pointer-events: none; padding-right: 80px; } .nn-vm-side-panel.left .nn-lp-info-row { justify-content: flex-start; } .nn-vm-side-panel.left .nn-lp-profile-row { justify-content: flex-start; } .nn-vm-title { font-size: 16px; margin-bottom: 8px; } .nn-vm-desc { font-size: 13px; margin: 10px 0; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .nn-vm-price, .nn-vm-area { font-size: 11px; } }

/* APP BOTTOM NAVIGATION (MOBILE) */
.nn-bottom-nav { display: none; }
@media (max-width: 600px) {
    .nn-bottom-nav {
        display: flex; position: fixed; bottom: 0; left: 0; width: 100%; height: 70px;
        background: #fff; box-shadow: 0 -3px 10px rgba(0,0,0,0.15); z-index: 9999;
        align-items: center; justify-content: space-around;
        padding-bottom: env(safe-area-inset-bottom);
        border-radius: 18px 18px 0 0; /* Bo góc trên giống App */
    }
    .nn-nav-item { flex: 1; text-align: center; position: relative; z-index: 1; }
    .nn-nav-item a { display: flex; flex-direction: column; align-items: center; text-decoration: none !important; color: #616161; gap: 4px; }
    .nn-nav-item i { font-size: 22px; color: #616161; transition: all 0.2s; }
    .nn-nav-item span { font-size: 11px; font-weight: 600; white-space: nowrap; color: #757575; }

    /* Central Post Button - Nổi bật giống App */
    .nn-nav-item.center { position: relative; z-index: 2; margin-top: -35px; }
    .nn-nav-item.center .center-btn {
        width: 56px; height: 56px; background: #E53935; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        border: 2px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.2);
        transition: transform 0.2s;
    }
    .nn-nav-item.center:active .center-btn { transform: scale(0.9); }
    .nn-nav-item.center img { width: 28px; filter: brightness(0) invert(1); }
    .nn-nav-item.center span { margin-top: 10px; display: block; }

    .nn-nav-item.active a, .nn-nav-item.active i { color: var(--nn-brand); }
    .nn-nav-item.active span { color: var(--nn-brand); }

    /* Floating Tools Positioning Adjust */
    .soan-nha5 { bottom: 105px !important; right: 15px !important; } /* Mic cách bottom nav 70px + 35px */
}

/* Floating Tools Style */
.soan-nha5 {
    position: fixed; z-index: 9998; width: 55px; height: 55px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); cursor: pointer; transition: all 0.3s;
    background: #fff; color: #555; border: 1px solid #eee; bottom: 80px; right: 20px;
    font-size: 20px;
}
.nn-member-shortcut{position:relative;display:inline-block}
.nn-login-trigger.logged-in{padding:4px 12px 4px 4px!important;border:1px solid #ddd;border-radius:30px;display:flex;align-items:center;text-decoration:none!important;color:#333!important;background:#fff;cursor:pointer}
.user-avatar-wrap{width:32px;height:32px;border-radius:50%;overflow:hidden;margin-right:8px;border:1px solid #eee}
.nn-avatar-shortcut{width:100%;height:100%;object-fit:cover}
.nn-member-dashboard{position:absolute;top:120%;right:0;background:#fff;border-radius:8px;box-shadow:0 4px 9px rgba(0,0,0,.15);width:340px;max-height:85vh;display:none;z-index:9999;overflow-y:auto;padding-bottom:15px;scrollbar-width:thin;scrollbar-color:#ddd transparent}
.nn-member-dashboard::-webkit-scrollbar{width:6px}
.nn-member-dashboard::-webkit-scrollbar-track{background:transparent}
.nn-member-dashboard::-webkit-scrollbar-thumb{background-color:#ddd;border-radius:10px}
.nn-member-shortcut.active .nn-member-dashboard{display:block}
.dashboard-inner{padding:0}
.db-header{text-align:center;padding:20px 15px 10px}
.db-avatar-container{position:relative;width:70px;height:70px;margin:0 auto 10px}
.db-avatar{width:70px;height:70px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 4px 10px rgba(0,0,0,.1)}
.camera-icon{position:absolute;bottom:0;right:0;background:#089ed3;color:#fff;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;border:2px solid #fff}
.db-name{font-size:16px;font-weight:700;margin:0 0 3px;color:#111}
.db-role-badge{background:#e8f6fb;color:#089ed3;font-size:11px;padding:2px 12px;border-radius:20px;font-weight:500;display:inline-block;margin-bottom:8px}
.db-account-id{background:#f5f5f5;border-radius:20px;padding:5px 12px;font-size:11px;color:#666;display:flex;align-items:center;justify-content:center;gap:6px}
.copy-id{color:#089ed3;cursor:pointer;font-size:13px}
.db-actions{display:flex;gap:8px;padding:0 15px 15px}
.btn-db{flex:1;padding:10px;border-radius:10px;font-size:13px;font-weight:700;text-decoration:none!important;color:#fff!important;display:flex;align-items:center;justify-content:center;gap:6px;transition:opacity .2s}
.btn-post-property{background:#089ed3}
.btn-post-video{background:#444}
.btn-db:hover{opacity:.9}
.db-balance-card{background:#f4f9fb;border:1px solid #e1f0f5;border-radius:18px;margin:0 15px 20px;padding:12px}
.balance-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.balance-header .title{font-weight:700;font-size:14px;color:#333}
.xu-badges{display:flex;gap:6px}
.xu-badge{padding:3px 8px;border-radius:15px;font-size:11px;font-weight:700;display:flex;align-items:center;gap:4px}
.xu-badge img{width:12px;height:12px}
.xu-badge.gold{background:#ffd25f;color:#846700}
.xu-badge.silver{background:#e2e2e2;color:#555}
.stats-row{display:flex;justify-content:space-between;font-size:12px;color:#666;margin-bottom:6px;border-top:1px solid #e1f0f5;padding-top:6px}
.stat-item strong{color:#111}
.text-right{text-align:right}
.balance-actions{display:flex;gap:8px;margin-top:8px}
.btn-sub{flex:1;padding:8px;border-radius:8px;font-size:12px;font-weight:700;text-decoration:none!important;display:flex;align-items:center;justify-content:center;gap:4px}
.btn-earn{background:#ebf7f2;color:#2d8b62!important;border:1px solid #d1eade}
.btn-wallet{background:#e8f3fa;color:#089ed3!important;border:1px solid #d5e7f4}
.db-utilities{padding:0 15px}
.section-title{font-size:12px;color:#888;font-weight:700;margin-bottom:10px;letter-spacing:.5px}
.utility-list{list-style:none;margin:0;padding:0}
.utility-list li{margin-bottom:4px}
.utility-list li a{display:flex;align-items:center;padding:10px 12px;background:#f8f9fa;border-radius:10px;color:#333!important;text-decoration:none!important;font-size:13px;font-weight:500;transition:background .2s;position:relative}
.utility-list li a:hover{background:#f1f3f5}
.utility-list li a i{font-size:15px;margin-right:12px;width:18px;text-align:center}
.icon-blue{color:#089ed3}
.icon-red{color:#e91e63}
.arrow-r{position:absolute;right:12px;font-size:11px;color:#ccc;margin:0!important}
.badge-count{background:#e8f3fa;color:#089ed3;font-size:10px;padding:2px 8px;border-radius:10px;margin-left:auto;margin-right:20px}
.logout-link{background:#fff5f7!important}
.logout-link:hover{background:#ffe8ed!important}
.logout-link .icon-red,.logout-link span{color:#e91e63}
.mobile-close-db{display:none}
@media (max-width:767px){
.nn-login-trigger.logged-in{padding:0;border:none;background:transparent}
.nn-login-trigger.logged-in .user-avatar-wrap{margin-right:0;width:36px;height:36px;border:2px solid #888}
.nn-login-trigger.logged-in .arrow-down{display:none}
.nn-member-dashboard{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;max-height:100vh;border-radius:0;z-index:10001;margin:0;padding-bottom:80px}
.mobile-close-db{display:block;position:absolute;top:15px;right:20px;font-size:22px;color:#888;z-index:10;cursor:pointer}
.dashboard-inner{padding-top:20px;padding-bottom:100px}
}
.nn-login-trigger{display:inline-flex;align-items:center;background:#fff;border:2px solid #eee;border-radius:30px;padding:4px 14px 4px 4px !important;cursor:pointer;transition:all .3s;text-decoration:none!important;color:#333!important}
.nn-login-trigger:hover{border-color:#ccc;box-shadow:0 2px 8px rgba(0,0,0,.1)}
.nn-login-trigger .user-icon-circle{width:30px;height:30px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-right:10px;border:2px solid #888}
.nn-login-trigger .user-icon-circle i{font-size:16px;color:#888}
.nn-login-trigger .arrow-down{font-size:14px;color:#333}
#nn-login-popup{background:#fff;padding:40px 30px;max-width:440px;margin:40px auto;border-radius:28px;position:relative;text-align:center;box-shadow:0 10px 40px rgba(0,0,0,.1)}
#nn-login-popup .logo-popup{max-width:220px;margin-bottom:25px}
#nn-login-popup h2{font-size:26px;font-weight:700;margin-bottom:25px;color:#111}
#nn-login-popup #google-btn-wrapper-popup{display:flex;justify-content:center;width:100%;margin-bottom:30px}
#nn-login-popup .separator{display:flex;align-items:center;text-align:center;color:#aaa;font-size:14px;margin-bottom:25px}
#nn-login-popup .separator::before,#nn-login-popup .separator::after{content:'';flex:1;border-bottom:1px solid #eee}
#nn-login-popup .separator:not(:empty)::before{margin-right:.5em}
#nn-login-popup .separator:not(:empty)::after{margin-left:.5em}
#nn-login-popup .form-group{text-align:left;margin-bottom:20px;position:relative}
#nn-login-popup .form-group label{display:block;font-size:15px;font-weight:700;margin-bottom:8px;color:#000}
#nn-login-popup .input-control{width:100%;padding:14px 20px;border:2px solid #000;border-radius:30px;font-size:15px;outline:0;box-sizing:border-box}
#nn-login-popup .toggle-password{position:absolute;right:20px;top:43px;cursor:pointer;color:#888;font-size:18px}
#nn-login-popup .form-options{display:flex;justify-content:space-between;align-items:center;font-size:14px;margin-bottom:25px}
#nn-login-popup .checkbox-label{display:flex;align-items:center;cursor:pointer;color:#666}
#nn-login-popup .checkbox-label input{margin-right:8px;width:18px;height:18px}
#nn-login-popup .form-links a{color:#0073aa;text-decoration:none;font-weight:500}
#nn-login-popup .btn-submit{width:100%;padding:14px;background:#111;border:none;border-radius:30px;font-size:16px;font-weight:700;color:#fff;cursor:pointer;transition:background .3s}
#nn-login-popup .btn-submit:hover{background:#333}
#nn-login-popup .msg-box{padding:10px;border-radius:8px;font-size:14px;margin-bottom:20px;display:none;text-align:center}
#nn-login-popup .msg-box.error{background:#fff1f0;color:#cf1322;border:1px solid #ffa39e;display:block}
#nn-login-popup .msg-box.success{background:#f6ffed;color:#389e0d;border:1px solid #b7eb8f;display:block}
.mfp-fade.mfp-bg{opacity:0;transition:all .3s ease-out}
.mfp-fade.mfp-bg.mfp-ready{opacity:.8}
.mfp-fade.mfp-bg.mfp-removing{opacity:0}
.mfp-fade.mfp-wrap .mfp-content{opacity:0;transform:scale(.9);transition:all .3s ease-out}
.mfp-fade.mfp-wrap.mfp-ready .mfp-content{opacity:1;transform:scale(1)}
.mfp-fade.mfp-wrap.mfp-removing .mfp-content{opacity:0;transform:scale(.9)}
@media (max-width:767px){
.nn-login-trigger.open-popup-link{padding:0;border:none;background:transparent}
.nn-login-trigger.open-popup-link .user-icon-circle{margin-right:0;width:36px;height:36px}
.nn-login-trigger.open-popup-link .arrow-down{display:none}
}