/* =========================================================
   Sonzim Tools — main.css
   Display: Space Grotesk · Body: Inter
   ========================================================= */

:root{
	--bg:#f3f7f5;
	--surface:#ffffff;
	--surface-2:#f4f8f6;
	--ink:#0f172a;
	--muted:#5b6b6f;
	--line:#e2eae6;
	--primary:#025da4;     /* Xanh dương logo */
	--primary-2:#009948;   /* Xanh lá logo */
	--accent:#009948;
	--btn-text:#ffffff;
	--hero-1:#023f6e;      /* Hero bắt đầu (xanh dương đậm) */
	--hero-2:#00984a;      /* Hero kết thúc (xanh lá) */
	--green:#16a34a;
	--green-bg:#dcfce7;
	--blue:#025da4;
	--blue-bg:#dbeafe;
	--amber-bg:#fef3c7;
	--radius:16px;
	--radius-sm:10px;
	--shadow:0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.06);
	--shadow-lg:0 12px 40px rgba(2,93,164,.16);
	--maxw:1200px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
	margin:0;
	background:var(--bg);
	color:var(--ink);
	font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
	font-size:16px;
	line-height:1.6;
	-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--primary);text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3,h4{font-family:"Space Grotesk","Inter",sans-serif;line-height:1.2;color:var(--ink);}

.sz-container{max-width:var(--maxw);margin:0 auto;padding:0 20px;}
.sz-main{padding:28px 20px 56px;}
.sz-skip{position:absolute;left:-9999px;}
.sz-skip:focus{left:16px;top:16px;background:#fff;padding:10px 16px;border-radius:8px;z-index:999;}

/* ---------- Header ---------- */
.sz-header{
	position:sticky;top:0;z-index:50;
	background:rgba(255,255,255,.85);
	backdrop-filter:saturate(160%) blur(10px);
	border-bottom:1px solid var(--line);
}
.sz-header__inner{display:flex;align-items:center;gap:20px;min-height:68px;}
.sz-brand__text{font-family:"Space Grotesk";font-weight:700;font-size:1.35rem;color:var(--ink);}
.sz-brand img{max-height:46px;width:auto;}
.sz-nav{margin-left:8px;}
.sz-menu{display:flex;gap:4px;list-style:none;margin:0;padding:0;}
.sz-menu li{position:relative;}
.sz-menu a{display:flex;align-items:center;gap:6px;padding:9px 14px;border-radius:10px;color:var(--ink);font-weight:500;}
.sz-menu a:hover{background:var(--surface-2);text-decoration:none;}
.sz-menu .current-menu-item>a,.sz-menu .current-menu-parent>a{color:var(--primary);background:#e6f1ec;}

/* Mũi tên cho mục có menu con */
.sz-menu .menu-item-has-children>a::after{
	content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
	transform:rotate(45deg);margin-top:-3px;opacity:.55;transition:transform .18s,opacity .18s;
}
.sz-menu .menu-item-has-children:hover>a::after,
.sz-menu .menu-item-has-children:focus-within>a::after{opacity:1;transform:rotate(225deg);margin-top:2px;}

/* Hộp menu con thả xuống */
.sz-menu .sub-menu{
	position:absolute;top:calc(100% + 6px);left:0;min-width:240px;margin:0;padding:7px;list-style:none;
	background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);
	opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .18s ease,transform .18s ease,visibility .18s;
	z-index:70;
}
/* Cầu nối vô hình để rê chuột không bị rớt */
.sz-menu .sub-menu::before{content:"";position:absolute;top:-8px;left:0;right:0;height:8px;}
.sz-menu li:hover>.sub-menu,
.sz-menu li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:translateY(0);}
.sz-menu .sub-menu li{position:relative;}
.sz-menu .sub-menu a{
	display:flex;justify-content:space-between;align-items:center;gap:10px;
	padding:10px 12px;border-radius:9px;white-space:nowrap;color:var(--ink);font-weight:500;font-size:.94rem;
	position:relative;
}
.sz-menu .sub-menu a:hover{background:var(--surface-2);color:var(--primary);}
/* Gạch nhấn bên trái khi hover item con */
.sz-menu .sub-menu a::before{
	content:"";position:absolute;left:4px;top:50%;width:3px;height:0;border-radius:3px;background:var(--primary);
	transform:translateY(-50%);transition:height .18s;
}
.sz-menu .sub-menu a:hover::before{height:16px;}
/* Menu con cấp 2 (xổ sang phải) */
.sz-menu .sub-menu .menu-item-has-children>a::after{transform:rotate(-45deg);margin:0;}
.sz-menu .sub-menu .sub-menu{top:-7px;left:calc(100% + 6px);}

/* Nút mở menu con trên mobile (ẩn ở desktop) */
.sz-sub-toggle{display:none;}
.sz-header__actions{margin-left:auto;}
.sz-search{display:flex;align-items:center;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:4px 4px 4px 14px;}
.sz-search input{border:0;background:transparent;outline:none;font-size:.92rem;width:160px;}
.sz-search button{border:0;background:var(--primary);color:#fff;width:34px;height:34px;border-radius:999px;cursor:pointer;}
.sz-nav__toggle{display:none;}

/* Khi đăng nhập: ghim header NGAY DƯỚI thanh quản trị WordPress (không bị che đầu) */
.admin-bar .sz-header{top:32px;}
.admin-bar .sz-sidebar{top:108px;}
@media screen and (max-width:782px){
	.admin-bar .sz-header{top:46px;}
}
@media screen and (max-width:600px){
	.admin-bar .sz-header{top:0;} /* thanh quản trị cuộn theo trang nên không cần bù */
}

/* ---------- Hero ---------- */
.sz-hero{
	margin:8px 0 28px;
	background:
		radial-gradient(1200px 300px at 90% -40%, rgba(255,255,255,.16), transparent 60%),
		linear-gradient(120deg, var(--hero-1), var(--hero-2));
	color:#fff;border-radius:24px;padding:46px 40px;overflow:hidden;
}
.sz-hero__eyebrow{margin:0 0 8px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-size:.72rem;color:#d6f0e0;}
.sz-hero__title{margin:0 0 12px;font-size:clamp(1.7rem,3.4vw,2.6rem);color:#fff;}
.sz-hero__sub{margin:0 0 22px;max-width:620px;color:#e8f4ee;font-size:1.02rem;}
.sz-hero__optin{max-width:520px;}
.sz-hero .sz-form__row{display:flex;gap:8px;}
.sz-hero input[type=email]{flex:1;border:0;border-radius:12px;padding:13px 16px;font-size:.98rem;}
.sz-hero .sz-form__msg{color:#d6f0e0;margin:8px 2px 0;font-size:.9rem;min-height:1em;}

/* ---------- Layout content + sidebar ---------- */
.sz-layout{display:grid;grid-template-columns:1fr 320px;gap:32px;align-items:start;}
/* Tắt cột bên trong Quản Lý Tool → Giao diện thì lưới trải hết chiều ngang. */
.sz-layout--full{grid-template-columns:1fr;}
.sz-content{min-width:0;}

/* ---------- Filter chips ---------- */
.sz-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;}
.sz-chip{
	display:inline-block;padding:7px 14px;border-radius:999px;
	background:var(--surface);border:1px solid var(--line);color:var(--muted);
	font-size:.86rem;font-weight:500;
}
.sz-chip:hover{color:var(--ink);border-color:#cbd5e1;text-decoration:none;}
.sz-chip.is-active{background:var(--ink);color:#fff;border-color:var(--ink);}

.sz-section-title{font-size:1.4rem;margin:0 0 18px;}

/* ---------- Grid of tools ---------- */
.sz-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.sz-grid--3{grid-template-columns:repeat(3,1fr);}

.sz-card{
	background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
	overflow:hidden;display:flex;flex-direction:column;
	transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sz-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:#cfe6dc;}
.sz-card__media{
	position:relative;display:flex;align-items:center;justify-content:center;
	height:128px;background:
		radial-gradient(120px 120px at 50% 0%, #e8f3ee, transparent 70%),
		var(--surface-2);
	border-bottom:1px solid var(--line);
}
.sz-card__media img{width:84px;height:84px;object-fit:contain;border-radius:14px;}
.sz-card__placeholder{
	width:84px;height:84px;border-radius:16px;display:flex;align-items:center;justify-content:center;
	font-family:"Space Grotesk";font-weight:700;font-size:2rem;color:#fff;
	background:linear-gradient(135deg,var(--primary),var(--primary-2));
}
.sz-card__placeholder--lg{width:110px;height:110px;font-size:2.6rem;border-radius:22px;}
.sz-card__body{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1;}
.sz-card__title{font-size:1.05rem;margin:0;}
.sz-card__title a{color:var(--ink);}
.sz-card__title a:hover{color:var(--primary);text-decoration:none;}
.sz-card__desc{margin:0;color:var(--muted);font-size:.9rem;flex:1;}
.sz-card__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px;}
.sz-card__price{font-weight:700;color:var(--ink);font-size:.98rem;}

/* ---------- Badge ---------- */
.sz-badge{
	position:absolute;top:10px;left:10px;
	font-size:.7rem;font-weight:600;padding:4px 9px;border-radius:999px;letter-spacing:.02em;
}
.sz-badge.is-free{background:var(--green-bg);color:var(--green);}
.sz-badge.is-buy{background:var(--amber-bg);color:#b45309;}
.sz-badge.is-ext{background:var(--blue-bg);color:var(--blue);}
.sz-badge.is-ver{position:static;background:var(--surface-2);color:var(--muted);border:1px solid var(--line);}

/* ---------- Buttons ---------- */
.sz-btn{
	display:inline-flex;align-items:center;justify-content:center;gap:6px;
	padding:9px 16px;border-radius:11px;font-weight:600;font-size:.9rem;
	border:1px solid transparent;cursor:pointer;white-space:nowrap;
	background:var(--ink);color:var(--btn-text,#fff);line-height:1;transition:filter .15s,transform .15s;
}
.sz-btn:hover{filter:brightness(1.08);text-decoration:none;color:var(--btn-text,#fff);transform:translateY(-1px);}
.sz-btn--lg{padding:14px 26px;font-size:1rem;border-radius:13px;}
.sz-btn--download{background:linear-gradient(135deg,var(--green),#15803d);}
.sz-btn--buy{background:linear-gradient(135deg,var(--primary),var(--primary-2));}
.sz-btn--external{background:linear-gradient(135deg,var(--blue),#1d4ed8);}
.sz-btn--ghost{background:#fff;color:var(--ink);border-color:var(--line);}
.sz-btn--ghost:hover{color:var(--ink);background:var(--surface-2);}
.sz-btn.is-disabled{background:var(--surface-2);color:var(--muted);cursor:not-allowed;pointer-events:none;}

/* ---------- Pagination ---------- */
.sz-pagination{margin-top:30px;}
.sz-pagination .page-numbers{
	display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 8px;
	border:1px solid var(--line);border-radius:10px;margin:0 3px;background:#fff;color:var(--ink);font-weight:600;
}
.sz-pagination .page-numbers.current{background:var(--ink);color:#fff;border-color:var(--ink);}
.sz-pagination .page-numbers:hover{text-decoration:none;border-color:var(--primary);}

/* ---------- Single tool ---------- */
.sz-single{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:30px;}
.sz-single__top{display:flex;gap:26px;align-items:flex-start;}
.sz-single__logo img,.sz-single__logo .sz-card__placeholder{width:110px;height:110px;object-fit:contain;border-radius:22px;}
.sz-single__logo{flex:0 0 auto;background:var(--surface-2);border:1px solid var(--line);border-radius:24px;padding:12px;}
.sz-single__head{flex:1;min-width:0;}
.sz-single__badges{display:flex;gap:8px;margin-bottom:10px;}
.sz-single__badges .sz-badge{position:static;}
.sz-single__title{font-size:1.9rem;margin:0 0 10px;}
.sz-single__excerpt{color:var(--muted);margin:0 0 18px;font-size:1.05rem;}
.sz-single__cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;}
.sz-single__price{display:flex;flex-direction:column;line-height:1.1;margin-right:4px;}
.sz-single__price-val{font-family:"Space Grotesk";font-weight:700;font-size:1.5rem;color:var(--ink);}
.sz-single__price-note{font-size:.8rem;color:var(--muted);}
.sz-single__body{margin-top:26px;padding-top:24px;border-top:1px solid var(--line);}
.sz-single__cats{margin-top:22px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:.9rem;}
.sz-related{margin-top:38px;}

/* ---------- Sidebar ---------- */
.sz-sidebar{display:flex;flex-direction:column;gap:22px;position:sticky;top:88px;}
.widget{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;}
.widget-title{font-size:1.05rem;margin:0 0 14px;}
.sz-mini-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
.sz-mini{display:flex;gap:12px;align-items:center;}
.sz-mini__thumb img,.sz-mini__ph{width:48px;height:48px;border-radius:12px;object-fit:contain;background:var(--surface-2);border:1px solid var(--line);}
.sz-mini__ph{display:flex;align-items:center;justify-content:center;font-family:"Space Grotesk";font-weight:700;color:var(--primary);}
.sz-mini__info{display:flex;flex-direction:column;min-width:0;}
.sz-mini__title{color:var(--ink);font-weight:600;font-size:.92rem;line-height:1.3;}
.sz-mini__title:hover{color:var(--primary);text-decoration:none;}
.sz-mini__price{font-size:.8rem;color:var(--muted);}

/* ---------- Opt-in form ---------- */
.sz-optin__desc{margin:0 0 12px;color:var(--muted);font-size:.9rem;}
.sz-form{display:flex;flex-direction:column;gap:8px;}
.sz-form__row{display:flex;gap:8px;}
.sz-form input{border:1px solid var(--line);border-radius:10px;padding:11px 13px;font-size:.92rem;width:100%;font-family:inherit;}
.sz-form input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(2,93,164,.14);}
.sz-form__row .sz-btn{flex:0 0 auto;}
.sz-form__msg{margin:2px 0 0;font-size:.85rem;min-height:1em;}
.sz-form__msg.is-ok{color:var(--green);}
.sz-form__msg.is-err{color:#dc2626;}

/* widget opt-in nằm trong widget có nền trắng, hero opt-in nền tối đã xử lý riêng */
.widget .sz-form__row{flex-direction:column;}
.widget .sz-form__row .sz-btn{width:100%;}

/* ---------- Inline opt-in (cuối bài) ---------- */
.sz-inline-optin{
	margin-top:34px;background:linear-gradient(135deg,#e9f4ee,#eef7f3);
	border:1px solid #d6ebe0;border-radius:18px;padding:24px;
}
.sz-inline-optin h3{margin:0 0 6px;}
.sz-inline-optin p{margin:0 0 14px;color:var(--muted);}
.sz-inline-optin .sz-form__row{flex-direction:row;}

/* ---------- Posts / pages ---------- */
.sz-postlist{display:flex;flex-direction:column;gap:20px;}
.sz-post{display:flex;gap:18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;}
.sz-post__thumb{flex:0 0 200px;}
.sz-post__thumb img{border-radius:12px;height:100%;object-fit:cover;}
.sz-post__title{margin:0 0 6px;font-size:1.2rem;}
.sz-post__title a{color:var(--ink);}
.sz-post__meta{color:var(--muted);font-size:.85rem;margin:0 0 8px;}
.sz-post__excerpt{margin:0 0 10px;color:var(--muted);}
.sz-page{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:30px;}
.sz-prose{line-height:1.75;}

/* ===== Mẫu trang theo độ rộng ===== */
body.sz-tpl-wide #sz-main{--maxw:1360px;}
body.sz-tpl-full #sz-main{--maxw:1640px;}
body.sz-tpl-canvas #sz-main{--maxw:100%;padding:0;}
.sz-page--wide,.sz-page--full{max-width:100%;}
.sz-canvas{width:100%;}
.sz-canvas>*{max-width:100%;}
.sz-canvas iframe{width:100%;border:0;display:block;}
.sz-prose h2{margin:1.6em 0 .6em;}
.sz-prose img{border-radius:12px;margin:1em 0;}
.sz-post__hero img{border-radius:16px;margin:0 0 22px;width:100%;object-fit:cover;}

/* ---------- Empty / 404 ---------- */
.sz-empty{background:var(--surface);border:1px dashed var(--line);border-radius:16px;padding:40px;text-align:center;color:var(--muted);}
.sz-empty--404 h1{font-size:4rem;margin:0;color:var(--primary);}

/* ---------- Footer ---------- */
.sz-footer{background:#0f172a;color:#cbd5e1;margin-top:40px;padding:44px 0 24px;}
.sz-footer .widget{background:transparent;border:0;padding:0;}
.sz-footer .widget-title{color:#fff;}
.sz-footer a{color:#cbd5e1;}
.sz-footer a:hover{color:#fff;}
.sz-footer__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-bottom:28px;}
.sz-footer__bottom{border-top:1px solid #1e293b;padding-top:18px;font-size:.88rem;}
.sz-footer__menu{list-style:none;display:inline-flex;gap:16px;margin:0;padding:0;}

/* ---------- Modal gated download ---------- */
.sz-modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px;}
.sz-modal[hidden]{display:none;}
.sz-modal__overlay{position:absolute;inset:0;background:rgba(15,23,42,.55);backdrop-filter:blur(2px);}
.sz-modal__box{position:relative;background:#fff;border-radius:18px;padding:28px;max-width:420px;width:100%;box-shadow:var(--shadow-lg);}
.sz-modal__close{position:absolute;top:12px;right:14px;border:0;background:transparent;font-size:1.6rem;line-height:1;cursor:pointer;color:var(--muted);}
.sz-modal__title{margin:0 0 6px;font-size:1.25rem;}
.sz-modal__desc{margin:0 0 16px;color:var(--muted);font-size:.92rem;}
.sz-modal .sz-form__row{flex-direction:column;}
.sz-modal .sz-form__row .sz-btn{width:100%;}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
	.sz-layout{grid-template-columns:1fr;}
	.sz-sidebar{position:static;flex-direction:row;flex-wrap:wrap;}
	.sz-sidebar .widget{flex:1 1 260px;}
}
@media (max-width:820px){
	.sz-grid,.sz-grid--3{grid-template-columns:repeat(2,1fr);}
	.sz-search input{width:120px;}
	.sz-nav__toggle{display:inline-flex;flex-direction:column;gap:4px;background:transparent;border:0;cursor:pointer;padding:8px;margin-left:auto;}
	.sz-nav__toggle span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;}
	.sz-menu{display:none;position:absolute;left:0;right:0;top:68px;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;padding:8px 16px;box-shadow:var(--shadow);max-height:80vh;overflow:auto;}
	.sz-menu.is-open{display:flex;}
	.sz-menu li{position:relative;}
	.sz-menu .menu-item-has-children>a{display:flex;}
	.sz-menu .menu-item-has-children>a::after{display:none;}
	/* mỗi mục cha có nút mũi tên riêng để bấm mở */
	.sz-sub-toggle{
		display:inline-flex;align-items:center;justify-content:center;position:absolute;top:3px;right:0;
		width:40px;height:40px;background:transparent;border:0;cursor:pointer;color:var(--ink);
	}
	.sz-sub-toggle::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .18s;}
	.sz-sub-toggle[aria-expanded="true"]::after{transform:rotate(225deg);}
	/* menu con: tĩnh, thụt lề, ẩn cho tới khi mở */
	.sz-menu .sub-menu{
		position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-left:2px solid var(--line);
		border-radius:0;margin:0 0 4px 10px;padding:0 0 0 6px;min-width:0;display:none;
	}
	.sz-menu li.sz-open>.sub-menu{display:block;}
	.sz-menu .sub-menu a{white-space:normal;}
	.sz-header__inner{flex-wrap:wrap;}
	.sz-header__actions{order:3;width:100%;margin:0 0 10px;}
	.sz-search{width:100%;}
	.sz-search input{width:100%;}
	.sz-hero{padding:32px 22px;}
}
@media (max-width:540px){
	.sz-grid,.sz-grid--3{grid-template-columns:1fr 1fr;gap:14px;}
	.sz-single__top{flex-direction:column;}
	.sz-post{flex-direction:column;}
	.sz-post__thumb{flex:auto;}
	.sz-footer__cols{grid-template-columns:1fr 1fr;}
	.sz-hero__optin .sz-form__row{flex-direction:column;}
}
@media (max-width:380px){
	.sz-grid,.sz-grid--3{grid-template-columns:1fr;}
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
	*{transition:none!important;scroll-behavior:auto!important;}
}

/* Nút CTA ở hero (thay cho form email cũ) */
.sz-hero__cta{display:flex;flex-wrap:wrap;gap:12px;}
.sz-hero__cta .sz-btn--ghost{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.35);}
.sz-hero__cta .sz-btn--ghost:hover{background:rgba(255,255,255,.24);color:#fff;}
@media (max-width:540px){.sz-hero__cta{flex-direction:column;}.sz-hero__cta .sz-btn{width:100%;}}