/*
Theme Name: TQS Profile Links
Theme URI: https://trungquanstore.com
Author: Trung Quân
Author URI: https://trungquanstore.com
Description: Trang hồ sơ dạng vCard: ảnh bìa, ảnh đại diện, tên và số liệu, bên dưới là danh sách thanh kéo. Mỗi thanh kéo sang phải sẽ chuyển hướng sang một website. Toàn màn hình trên mọi thiết bị.
Version: 1.3.2
Requires at least: 6.0
Requires PHP: 7.4
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tqs-profile-links
Tags: one-column, custom-colors, custom-logo, custom-menu, featured-images
*/

:root{
	--brand:#16A34A; --brand-2:#065F46; --brand-soft:#DCFCE7;
	--card:#FFFFFF; --bg:#EFF1F0; --ink:#0F172A; --soft:#64748B; --line:rgba(15,23,42,.08);
	--r:clamp(20px,2.4vw,28px);
	--sh:0 18px 46px -26px rgba(6,95,70,.45);
}
body.is-dark{
	--card:#171A19; --bg:#0E100F; --ink:#F1F5F4; --soft:#9AA5A0; --line:rgba(255,255,255,.1);
	--sh:0 18px 46px -26px rgba(0,0,0,.8);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.tqspl-body{
	margin:0;
	padding:0;
	width:100%;
	background:var(--bg);
	color:var(--ink);
	line-height:1.6;
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
	-webkit-font-smoothing:antialiased;
	min-height:100vh;
	min-height:100dvh;
	overflow-x:hidden;
}
img{max-width:100%;height:auto}
.tqspl-skip{position:absolute;left:-9999px}
.tqspl-skip:focus{left:12px;top:12px;background:var(--card);color:var(--ink);padding:10px 14px;border-radius:10px;z-index:99}

/* ---------- ảnh bìa full width ---------- */
.tqspl-cover{
	width:100%;
	height:clamp(160px,26vw,320px);
	background-size:cover;
	background-position:center;
	background-image:
	radial-gradient(75% 60% at 20% 15%,#A7F3A0 0%,rgba(167,243,160,0) 62%),
	radial-gradient(70% 60% at 85% 30%,#4ADE80 0%,rgba(74,222,128,0) 60%),
	radial-gradient(80% 70% at 60% 95%,#065F46 0%,rgba(6,95,70,0) 60%),
	linear-gradient(140deg,#7ED957,#16A34A 50%,#065F46);
}

/* ---------- khung bao quanh: FULL WIDTH 100% ---------- */
.tqspl-shell{
	width:100% !important;
	max-width:100% !important;
	margin:0 !important;
	padding:0 16px 40px !important;
	box-sizing:border-box !important;
}

.tqspl-profile{
	width:100% !important;
	max-width:100% !important;
	background:var(--card);
	border-radius:var(--r);
	box-shadow:var(--sh);
	margin-top:clamp(-70px,-6vw,-45px);
	padding:0 20px 28px;
	text-align:center;
	position:relative;
	box-sizing:border-box !important;
}

.tqspl-avatar-wrap{display:block;margin:0 auto;position:relative;
	transform:translateY(calc(clamp(90px,10vw,125px) / -2))}
.tqspl-avatar{width:clamp(90px,10vw,125px);height:clamp(90px,10vw,125px);border-radius:50%;object-fit:cover;
	border:5px solid var(--card);box-shadow:0 10px 26px -14px rgba(6,95,70,.6);background:var(--brand-soft);display:block}
.tqspl-id{margin-top:calc(clamp(90px,10vw,125px) / -2 + 8px)}
.tqspl-name{display:flex;align-items:center;justify-content:center;gap:.2em;margin:0;
	font-size:clamp(22px,3.2vw,30px);font-weight:800;letter-spacing:-.015em;line-height:1.15;overflow-wrap:anywhere}
.tqspl-badge{width:.7em;height:.7em;flex:none;object-fit:contain}
.tqspl-role{color:var(--soft);margin:6px 0 0;font-size:clamp(14px,1.4vw,16px)}

/* ---------- số liệu ---------- */
.tqspl-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;
	margin:clamp(16px,2.4vw,22px) 0 0;padding:clamp(12px,1.8vw,18px) 0 0;border-top:1px solid var(--line)}
.tqspl-stat{min-width:0}
.tqspl-stat b{display:flex;align-items:center;justify-content:center;gap:7px;
	font-size:clamp(17px,2vw,24px);font-weight:800;line-height:1.1}
.tqspl-stat svg{width:clamp(16px,1.5vw,20px);height:clamp(16px,1.5vw,20px);fill:currentColor;flex:none}
.tqspl-stat span{display:block;margin-top:6px;color:var(--soft);font-size:clamp(11px,1vw,13px)}

/* ---------- DANH SÁCH THANH KÉO: 1 TAB / 1 DÒNG FULL WIDTH ---------- */
.tqspl-links{
	display: flex !important;
	flex-direction: column !important;
	gap: 16px;
	margin: 24px 0 0 !important;
	width: 100% !important;
	max-width: 100% !important; /* Full width hoàn toàn */
	padding: 0 !important;
	box-sizing: border-box !important;
}

.tqspl-links--two{
	display: flex !important;
	flex-direction: column !important;
	grid-template-columns: none !important;
}

.tqspl-empty{text-align:center;color:var(--soft);padding:34px 10px}

/* Thanh trượt: Chiếm 100% chiều ngang màn hình */
.tqspl-bar{
	--bar-a:#16A34A;
	--bar-b:#065F46;
	--led:3px;
	position:relative;
	width:100% !important;
	max-width:100% !important;
	min-width:0;
	height: 68px;
	border-radius:999px;
	overflow:hidden;
	background:var(--card);
	box-shadow:var(--sh);
	display:flex;
	align-items:center;
	user-select:none;
	touch-action:pan-y;
	cursor:grab;
	border:0;
	isolation:isolate;
	margin: 0 !important;
	box-sizing: border-box !important;
}
.tqspl-bar:active{cursor:grabbing}

/* Viền LED 7 màu chạy quanh viền thanh trượt */
.tqspl-bar::before{
	content:"";
	position:absolute;
	top:50%;
	left:50%;
	width:300%;
	aspect-ratio:1;
	margin:-150% 0 0 -150%;
	z-index:0;
	pointer-events:none;
	background:conic-gradient(#FF0040,#FF7A00,#FFE600,#3DFF00,#00E5FF,#2B5BFF,#B400FF,#FF0040);
	animation:tqsplLed 4.5s linear infinite;
}
.tqspl-bar::after{
	content:"";
	position:absolute;
	inset:var(--led);
	border-radius:999px;
	background:var(--card);
	z-index:1;
	pointer-events:none;
}
@keyframes tqsplLed{to{transform:rotate(1turn)}}

.tqspl-bar__body{
	position:relative;
	z-index:2;
	display:flex;
	align-items:center;
	gap:14px;
	min-width:0;
	padding-left: 76px;
	padding-right: 20px;
	width:100%;
	pointer-events:none;
}
.tqspl-bar__icon{
	width: 42px;
	height: 42px;
	border-radius:12px;
	object-fit:cover;
	flex:none;
	background:var(--brand-soft);
}
.tqspl-bar__text{min-width:0;text-align:left;flex:1 1 auto}
.tqspl-bar__title{
	display:block;
	font-weight:700;
	font-size: 16px;
	line-height:1.25;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.tqspl-bar__hint{
	display:flex;
	align-items:center;
	gap:6px;
	margin-top:2px;
	color:var(--soft);
	font-size: 13px;
	line-height:1.3;
}
.tqspl-bar__hint em{
	font-style:normal;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	display: inline !important;
}
.tqspl-chev{display:inline-flex;gap:3px;flex:none}
.tqspl-chev i{
	width:6px;
	height:6px;
	border-right:2px solid currentColor;
	border-top:2px solid currentColor;
	transform:rotate(45deg);
	opacity:.25;
	animation:tqsplChev 1.5s ease-in-out infinite;
}
.tqspl-chev i:nth-child(2){animation-delay:.18s}
.tqspl-chev i:nth-child(3){animation-delay:.36s}
@keyframes tqsplChev{0%,100%{opacity:.2}50%{opacity:.95}}

/* Nút trượt */
.tqspl-bar__handle{
	position:absolute;
	z-index:3;
	left:6px;
	top:50%;
	width: 56px;
	height: 56px;
	margin-top: -28px;
	border:0;
	border-radius:50%;
	padding:0;
	cursor:grab;
	display:flex;
	align-items:center;
	justify-content:center;
	color:#fff;
	background:linear-gradient(135deg,var(--bar-a),var(--bar-b));
	box-shadow:0 10px 22px -12px rgba(6,95,70,.9);
}
.tqspl-bar__handle svg{width:20px;height:20px;fill:currentColor}
.tqspl-bar__handle:focus-visible{outline:3px solid #2563EB;outline-offset:3px}
.tqspl-bar.is-dragging .tqspl-bar__handle{transition:none}
.tqspl-bar:not(.is-dragging) .tqspl-bar__handle{transition:transform .28s cubic-bezier(.22,1,.36,1)}

/* ---------- xem ảnh full ---------- */
.tqspl-zoom{cursor:zoom-in}
.tqspl-lightbox{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;
	padding:clamp(14px,4vw,40px);background:rgba(0,0,0,.92);cursor:zoom-out;
	padding-top:calc(clamp(14px,4vw,40px) + env(safe-area-inset-top,0px));
	padding-bottom:calc(clamp(14px,4vw,40px) + env(safe-area-inset-bottom,0px));
	animation:tqsplFade .18s ease}
.tqspl-lightbox[hidden]{display:none}
.tqspl-lightbox img{max-width:100%;max-height:100%;object-fit:contain;border-radius:14px;
	box-shadow:0 30px 70px -30px rgba(0,0,0,.9)}
.tqspl-lightbox-close{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));right:14px;
	width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;color:#fff;font-size:26px;line-height:1;
	background:rgba(255,255,255,.18);backdrop-filter:blur(6px)}
.tqspl-lightbox-close:focus-visible{outline:3px solid #fff;outline-offset:2px}
@keyframes tqsplFade{from{opacity:0}to{opacity:1}}
body.tqspl-lock{overflow:hidden}

/* ---------- chân trang & trang thường ---------- */
.tqspl-foot{text-align:center;color:var(--soft);font-size:13px;padding:6px 18px clamp(24px,4vw,40px)}
.tqspl-nav{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;list-style:none;margin:0 0 10px;padding:0}
.tqspl-nav a{color:var(--soft);text-decoration:none}
.tqspl-nav a:hover{color:var(--ink)}
.tqspl-page{width:100%;max-width:100%;margin:0;padding:clamp(24px,4vw,44px) 18px 60px}
.tqspl-page h1{font-size:clamp(24px,3vw,32px);margin:0 0 16px}
.tqspl-page a{color:var(--brand)}

@media (max-width:480px){
	.tqspl-bar__body{gap:8px;padding-left: 70px}
}
@media (prefers-reduced-motion:reduce){
	.tqspl-bar *{transition:none!important}
	.tqspl-bar::before{animation:none}
	.tqspl-chev i{animation:none;opacity:.55}
}
/* Bố cục hàng ngang chứa Tên bên trái và Nút Follow bên phải */
.tqspl-id-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: calc(clamp(90px, 10vw, 125px) / -2 + 10px);
    padding: 0 4px;
    box-sizing: border-box;
    gap: 12px;
}

/* Căn chữ bên trái */
.tqspl-id-wrap .tqspl-id {
    margin-top: 0 !important;
    text-align: left;
    flex: 1 1 auto;
    min-width: 0;
}
.tqspl-id-wrap .tqspl-name {
    justify-content: flex-start !important;
}

/* Cụm nút bấm Follow */
.tqspl-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
}

/* Nút Follow bo tròn nền đen chuẩn mẫu */
.tqspl-btn-follow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #0F172A;
    color: #FFFFFF !important;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: 999px;
    text-decoration: none;
    transition: transform 0.15s ease, opacity 0.15s ease;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
}
.tqspl-btn-follow:hover {
    opacity: 0.9;
    transform: scale(1.03);
}

/* Nút icon bookmark cạnh nút Follow */
.tqspl-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--ink);
    text-decoration: none;
    transition: background 0.15s ease;
}
.tqspl-btn-icon:hover {
    background: rgba(0, 0, 0, 0.05);
}

/* Khi giao diện bật chế độ tối */
body.is-dark .tqspl-btn-follow {
    background: #F1F5F4;
    color: #0E100F !important;
}
body.is-dark .tqspl-btn-icon {
    border-color: rgba(255, 255, 255, 0.15);
}

/* ========================================================
   CỐ ĐỊNH TÊN VÀ TÍCH XANH NẰM TRÊN CÙNG 1 DÒNG DUY NHẤT
   ======================================================== */

/* Khung tiêu đề tên: không xuống dòng, hiển thị inline */
.tqspl-name {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    max-width: 100% !important;
    white-space: nowrap !important; /* Tuyệt đối không nhảy xuống dòng 2 */
    margin: 0 !important;
    line-height: 1.2 !important;
    font-size: clamp(16px, 3.8vw, 24px) !important; /* Co giãn mượt theo cỡ màn hình */
}

/* Phần chữ tên: nếu quá dài sẽ tự rút gọn dấu 3 chấm thay vì nhảy dòng */
.tqspl-name span {
    display: inline-block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important; /* Hiện dấu ... nếu chạm sát nút Follow */
    flex-shrink: 1 !important;
    min-width: 0 !important;
}

/* Huy hiệu tích xanh: bám sát tên, không bị co méo */
.tqspl-badge {
    display: inline-block !important;
    width: 0.8em !important;
    height: 0.8em !important;
    margin-left: 5px !important;    /* Khoảng cách dính sát ngay sau tên */
    flex-shrink: 0 !important;      /* Không bị bẹp khi tên quá dài */
    vertical-align: middle !important;
    object-fit: contain !important;
}

/* Khung chứa tên bên trái: ép không để flexbox đẩy rớt hàng */
.tqspl-id-wrap .tqspl-id {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
}