/*
 * Giao diện "xanh" — tông logo Paper World + phong cách Modern Pastel Neumorphism (dashboard UI).
 * Nạp SAU style.css khi data.php → skin = 'xanh'. Chỉ ghi đè; muốn quay lại bản vàng: đặt skin = 'vang'.
 * Neumorphism = bề mặt cùng màu nền, nổi lên bằng 2 lớp bóng (sáng trên-trái, tối dưới-phải).
 */

/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root {
	--c-primary: #1e4397;        /* xanh navy logo: tiêu đề, nút chính */
	--c-primary-dark: #16316f;
	--c-royal: #0054a6;          /* xanh dương logo */
	--c-accent: #2aabe1;         /* xanh da trời logo */
	--c-accent-soft: #d6edfa;
	--c-cream: #f4f7fc;          /* nền sáng chính (bề mặt neumorphism) */
	--c-cream-2: #eef3fa;
	--c-kraft: #eaf1f9;
	--c-kraft-dark: #e8eff8;
	--c-espresso: #16316f;
	--c-text: #2a3957;
	--c-text-muted: #637089;
	--c-text-invert: #ffffff;
	--c-border: rgba(30, 67, 151, 0.1);

	--p-sky: #d4ecfa;            /* pastel phụ cho ô biểu tượng */
	--p-lilac: #e1e4fb;
	--p-mint: #d6f1ec;
	--p-peach: #fde6dc;

	--grad-brand: linear-gradient(135deg, #2aabe1 0%, #0054a6 60%, #1e4397 100%);
	--grad-deep: linear-gradient(140deg, #1e4397 0%, #0054a6 60%, #1f8fd0 100%);
	--grad-light: linear-gradient(135deg, #ffffff 0%, #eef6fd 50%, #dcefFB 100%);
	--grad-soft: linear-gradient(160deg, #e6f2fc 0%, #f6f9fd 70%);

	--neu-light: rgba(255, 255, 255, 1);
	--neu-dark: rgba(170, 188, 214, 0.32);
	--neu: 10px 10px 30px var(--neu-dark), -10px -10px 30px var(--neu-light);
	--neu-sm: 6px 6px 16px var(--neu-dark), -6px -6px 16px var(--neu-light);
	--neu-in: inset 3px 3px 8px var(--neu-dark), inset -3px -3px 8px var(--neu-light);
	--shadow: var(--neu);
	--shadow-sm: var(--neu-sm);

	--f-body: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
	--f-heading: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
	--f-script: "Be Vietnam Pro", system-ui, sans-serif;
	--fs-base: 1rem;

	--radius: 18px;
	--radius-lg: 26px;
	--radius-sm: 12px;

	--tex-tissue: none;
	--tex-kraft: none;
}

/* ==========================================================================
   2. Nền, chữ
   ========================================================================== */
body { background: var(--c-cream); line-height: 1.7; }
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.015em; }
.section h2 { text-transform: none; letter-spacing: -0.02em; font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.3rem); }
.section--tissue { background: var(--c-cream); }
.section--tissue-alt { background: var(--c-cream-2); }
.section--kraft { background: var(--c-kraft); }
.section--dark { background: var(--grad-soft); color: var(--c-text); }
.section--dark h2, .section--dark h3 { color: var(--c-primary); }
.section--dark .section__lead { color: var(--c-text-muted); }
.section__eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: var(--radius-pill); background: #fff; box-shadow: var(--neu-sm); color: var(--c-royal); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.section__eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--grad-brand); }
.note { font-style: normal; }

/* ==========================================================================
   3. Nút, chip, icon
   ========================================================================== */
.btn { font-weight: 700; }
.btn--accent { background: var(--grad-brand); color: #fff; box-shadow: 0 10px 22px rgba(0, 84, 166, 0.28); }
.btn--accent:hover { color: #fff; box-shadow: 0 14px 28px rgba(0, 84, 166, 0.36); }
.btn--primary { background: var(--c-primary); color: #fff; box-shadow: 0 10px 22px rgba(30, 67, 151, 0.25); }
.btn--ghost { border: 0; background: var(--c-cream); color: var(--c-royal); box-shadow: var(--neu-sm); }
.btn--ghost:hover { color: var(--c-primary); box-shadow: var(--neu-in); transform: none; }
.btn--ghost { background: #fff; }

.icon-btn { background: var(--c-cream); color: var(--c-royal); box-shadow: var(--neu-sm); }
.icon-btn:hover { color: var(--c-primary); box-shadow: var(--neu-in); transform: none; }
.icon-btn--accent { background: var(--grad-brand); color: #fff; box-shadow: 0 8px 18px rgba(0, 84, 166, 0.25); }
.icon-btn--accent:hover { color: #fff; }

.chip { border: 0; background: var(--c-cream); color: var(--c-text); box-shadow: var(--neu-sm); font-weight: 600; }
.chip:hover { background: var(--c-cream); color: var(--c-royal); box-shadow: var(--neu-in); }
.chip.is-active { background: var(--grad-brand); color: #fff; box-shadow: 0 8px 18px rgba(0, 84, 166, 0.25); }
.chips__label { color: var(--c-text-muted); font-weight: 600; }
.tags li { background: var(--c-cream); box-shadow: var(--neu-sm); color: var(--c-royal); }
.checklist .icon { color: var(--c-accent); }

/* ==========================================================================
   4. Header — thanh nổi mềm
   ========================================================================== */
.site-header { background: var(--c-cream); padding-block: 12px; }
.site-header.is-scrolled { box-shadow: 0 8px 24px rgba(163, 180, 206, 0.35); }
.site-header__bar { background: rgba(255, 255, 255, 0.92); border-radius: 24px; box-shadow: var(--neu); padding: 8px 10px 8px 18px; }
.site-logo { gap: 12px; }
.site-logo__img { height: 44px; width: auto; }
.site-logo__text { padding-left: 12px; border-left: 2px solid rgba(30, 67, 151, 0.15); }
.site-logo__name { font-family: var(--f-body); font-size: 1.05rem; font-weight: 800; color: var(--c-primary); letter-spacing: -0.01em; }
.site-logo__sub { margin-top: 4px; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; color: var(--c-accent); }
.nav-toggle { color: var(--c-primary); font-weight: 600; }
.nav-toggle__bar, .nav-toggle__bar::before, .nav-toggle__bar::after { background: var(--c-primary); }
.primary-nav { background: var(--c-cream); }
.primary-nav a { color: var(--c-text); font-weight: 600; text-transform: none; font-size: 1rem; letter-spacing: 0; }
.primary-nav .current-menu-item > a, .primary-nav .current-menu-ancestor > a, .primary-nav a:hover { color: var(--c-royal); text-decoration-color: var(--c-accent); }
@media (min-width: 1024px) {
	.primary-nav a { padding: 10px 12px; border-radius: 12px; font-size: 0.95rem; }
	.primary-nav > ul > li > a:hover, .primary-nav > div > ul > li > a:hover { text-decoration: none; box-shadow: var(--neu-in); }
	.primary-nav .current-menu-item > a, .primary-nav .current-menu-ancestor > a { text-decoration: none; box-shadow: var(--neu-in); }
	.primary-nav .sub-menu, .primary-nav .children { background: var(--c-cream); border-radius: 18px; box-shadow: var(--neu); padding: 10px; }
	.primary-nav .sub-menu a, .primary-nav .children a { border-radius: 10px; }
	.primary-nav .sub-menu a:hover { box-shadow: var(--neu-in); text-decoration: none; }
}

/* ==========================================================================
   5. Hero — khung xanh gradient nổi trên nền pastel
   ========================================================================== */
.hero { background: var(--c-cream); padding: 10px 0 32px; }
.hero__panel { background: var(--grad-light); color: var(--c-text); border-radius: 32px; box-shadow: var(--neu); }
.hero__panel::after { content: ""; position: absolute; right: -120px; top: -120px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(42, 171, 225, 0.18), transparent 70%); pointer-events: none; }
.hero__stack { font-weight: 800; text-transform: lowercase; letter-spacing: -0.04em; background: linear-gradient(180deg, #2aabe1, #0054a6); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
.hero__script { font-weight: 700; font-size: 2rem; color: var(--c-primary); letter-spacing: -0.02em; }
.hero__title { font-family: var(--f-body); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-accent); line-height: 1.6; }
.hero__lead { color: var(--c-text-muted); }

.hero__segments { gap: 12px; margin-top: 24px; }
.hero__segments a { background: var(--c-cream); color: var(--c-primary); box-shadow: var(--neu-sm); font-weight: 700; }
.hero__segments a:hover { background: var(--c-cream); color: var(--c-royal); box-shadow: var(--neu-in); }
@media (min-width: 1024px) {
	.hero__stack { font-size: clamp(3.8rem, 1.8rem + 3.8vw, 5.8rem); line-height: 0.95; }
	.hero__script { font-size: 2.6rem; }
}

/* ==========================================================================
   6. Giới thiệu + ô số liệu kiểu dashboard
   ========================================================================== */
.about__img { border-radius: 24px; box-shadow: var(--neu); border: 8px solid #fff; }
.stats li { position: relative; padding: 18px 16px 16px; border: 0; border-radius: 20px; background: #fff; box-shadow: var(--neu-sm); }
.stats li::before { content: ""; display: block; width: 28px; height: 6px; margin-bottom: 10px; border-radius: 6px; background: var(--grad-brand); }
.stats strong { font-weight: 800; font-size: 1.6rem; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ==========================================================================
   7. Thẻ
   ========================================================================== */
/* Khối 4 nhóm khách: đổi nền ảnh tối → nền pastel, thẻ nổi mềm */
.section--photo { background: var(--c-kraft); color: var(--c-text); }
.section--photo h2 { color: var(--c-primary); }
.section--photo .section__lead { color: var(--c-text-muted); }
.seg-card { padding: 12px; border-radius: 24px; background: #fff; box-shadow: var(--neu); }
.seg-card__link { border-radius: 16px; box-shadow: none; background: var(--c-cream-2); }
.seg-card__label { color: var(--c-primary) !important; text-transform: none; font-weight: 800; letter-spacing: 0; font-size: 1.05rem; }
.seg-card__text { margin: 12px 6px 4px; color: var(--c-text-muted); }

.frame-card { padding: 12px; border-radius: 24px; background: #fff; box-shadow: var(--neu); }
.frame-card:hover { box-shadow: 12px 12px 26px var(--neu-dark), -12px -12px 26px var(--neu-light); }
.frame-card__media { border-radius: 16px; }
.frame-card__body { background: transparent; padding: 16px 8px 8px; }
.frame-card__title { font-weight: 800; }
.frame-card__meta { color: var(--c-royal); }

.product { border: 0; border-radius: 22px; background: #fff; box-shadow: var(--neu-sm); }
.product:hover { box-shadow: var(--neu); }
.product__media { margin: 10px 10px 0; border-radius: 16px; overflow: hidden; }
.product__badge { background: var(--p-sky); color: var(--c-royal); }
.product__body { border-top: 0; }
.product__code { color: var(--c-accent); }
.product__name { font-weight: 700; color: var(--c-primary); }
.product__more summary { color: var(--c-royal); }
.product-group__head h2 { text-transform: none; }

/* ==========================================================================
   8. Lý do, 5 KHÔNG, quy trình, FAQ
   ========================================================================== */
.feature { border: 0; border-radius: 24px; background: #fff; box-shadow: var(--neu); }
.feature__icon { border-radius: 16px; background: var(--p-sky); color: var(--c-royal); box-shadow: var(--neu-sm); }
.grid--4 .feature:nth-child(2) .feature__icon { background: var(--p-lilac); color: var(--c-primary); }
.grid--4 .feature:nth-child(3) .feature__icon { background: var(--p-mint); color: #10806f; }
.grid--4 .feature:nth-child(4) .feature__icon { background: var(--p-peach); color: #c2583a; }
.feature h3 { font-weight: 800; }
.five-no { background: #fff; color: var(--c-text); border-radius: 28px; box-shadow: var(--neu); }
.five-no__title strong { color: var(--c-royal); font-family: var(--f-body); font-weight: 800; }
.five-no__list li { color: var(--c-primary); }
.five-no__list li::before { background: var(--grad-brand); color: #fff; }

.duo img { border-radius: 24px; box-shadow: var(--neu); border: 8px solid #fff; }

.steps li::before { background: var(--c-cream); color: var(--c-royal); box-shadow: var(--neu-sm); font-weight: 800; font-family: var(--f-body); }
.steps li:not(:last-child)::after { border-left-color: rgba(42, 171, 225, 0.4); }

.faq__item { border: 0; border-radius: 18px; background: #fff; box-shadow: var(--neu-sm); margin-bottom: 16px; }
.faq__q { color: var(--c-primary); }
.faq__q::after { background: var(--grad-brand); color: #fff; }

/* ==========================================================================
   9. Form + văn phòng
   ========================================================================== */
.form { background: #fff; border-radius: 28px; box-shadow: var(--neu); }
.form label { color: var(--c-text); font-weight: 600; }
.form input, .form select, .form textarea { border: 0; border-radius: 14px; background: var(--c-cream-2); box-shadow: var(--neu-in); }
.form input:focus, .form select:focus, .form textarea:focus { box-shadow: var(--neu-in), 0 0 0 3px rgba(42, 171, 225, 0.35); }
.office__map iframe { border-radius: 24px; box-shadow: var(--neu); border: 8px solid var(--c-kraft); }
.office__info { border-radius: 24px; background: #fff; box-shadow: var(--neu); }
.office__info h3 { text-transform: none; font-weight: 800; color: var(--c-primary); }
.contact-map { box-shadow: var(--neu); }

/* ==========================================================================
   10. Trang con
   ========================================================================== */
.page-hero { background: linear-gradient(160deg, #d7eafa 0%, var(--c-cream) 70%); }
.page-hero h1 { color: var(--c-primary); }
.page-hero .section__lead { color: var(--c-text-muted); opacity: 1; }
.page-hero .btn--ghost { color: var(--c-royal); }
.breadcrumb { color: var(--c-text-muted); }
.page-hero__media img { border-radius: 26px; box-shadow: var(--neu); border: 8px solid var(--c-cream); }
.entry blockquote { border-left-color: var(--c-accent); background: var(--c-cream); box-shadow: var(--neu-sm); }
.entry table { background: var(--c-cream); border-radius: 18px; overflow: hidden; box-shadow: var(--neu-sm); border-collapse: separate; border-spacing: 0; }
.entry th { background: var(--c-primary); }
.entry th, .entry td { border: 0; border-bottom: 1px solid var(--c-border); }
.entry .box { background: var(--p-sky); border-radius: 18px; }
.page-numbers { border: 0; background: var(--c-cream); box-shadow: var(--neu-sm); }
.page-numbers.current { background: var(--grad-brand); }

/* ==========================================================================
   11. CTA + Footer
   ========================================================================== */
.cta-band { background: var(--grad-soft); color: var(--c-text); }
.cta-band h2 { color: var(--c-primary); text-transform: none; }
.cta-band .btn--accent { background: var(--grad-brand); color: #fff; }
.site-footer { background: var(--c-kraft-dark); color: var(--c-text); }
.site-footer a:hover { color: var(--c-royal); }
.site-footer__title { color: var(--c-primary); font-family: var(--f-body); font-weight: 800; text-transform: none; font-size: 1.1rem; }
.site-footer__title::after { background: var(--grad-brand); border-radius: 3px; }
.site-footer__list .icon { color: var(--c-accent); }
.site-footer__bottom { border-top-color: rgba(30, 67, 151, 0.12); }

/* ==========================================================================
   12. Nút liên hệ nổi
   ========================================================================== */
.float-contact__phone { background: var(--grad-brand); }

/* ==========================================================================
   13. Sửa chi tiết
   ========================================================================== */
/* Nút gửi form trên nền xanh đậm: form sáng nên nút dùng lại gradient */
/* Chân trang: link kế thừa màu chữ → giữ biểu tượng trắng trên nút gradient */
.site-footer .icon-btn--accent, .site-footer .icon-btn--accent:hover { color: #fff; }
/* Điện thoại: logo + tên gọn lại để không đè nút Menu */
@media (max-width: 479px) {
	.site-header__bar { padding-left: 12px; }
	.site-logo { gap: 8px; }
	.site-logo__img { height: 34px; }
	.site-logo__text { padding-left: 8px; }
	.site-logo__name { font-size: 0.9rem; }
	.site-logo__sub { font-size: 0.6rem; letter-spacing: 0.04em; }
	.nav-toggle__label { display: none; }
	.stats { gap: 8px; }
	.stats li { padding: 14px 10px 12px; }
	.stats strong { font-size: 1.3rem; }
}
/* Bản sáng: nút viền trong khung đầu trang dùng chữ xanh; menu desktop không có nền riêng */
.hero .btn--ghost { color: var(--c-royal); background: #fff; border: 0; box-shadow: var(--neu-sm); }
.hero .btn--ghost:hover { color: var(--c-primary); box-shadow: var(--neu-in); }
@media (min-width: 1024px) {
	.primary-nav { background: none; }
}