/*
Theme Name: Gói Cước VinaPhone
Theme URI: https://goicuoc5gviettel.local/
Description: Theme hiển thị bảng giá, thông số và hướng dẫn đăng ký Gói Cước VinaPhone. Tương thích plugin goicuoc-vinaphone-shortcode.
Author: Goi Cuoc Team
Version: 1.0.0
Text Domain: goicuoc-vinaphone-theme
Requires PHP: 7.4
*/

:root{
	--gct-primary: #00a99d;
	--gct-primary-dark: #00807a;
	--gct-primary-soft: #d9f5f2;
	--gct-ink: #1c2230;
	--gct-ink-soft: #5b6472;
	--gct-line: #e7e9ee;
	--gct-bg: #f6f7fb;
	--gct-card: #ffffff;
	--gct-radius: 14px;
	--gct-shadow: 0 10px 28px rgba(28,34,48,.07);
	--gct-maxw: 1140px;
}

@media (prefers-color-scheme: dark){
	:root{
		--gct-ink: #eef0f5;
		--gct-ink-soft: #aab1bf;
		--gct-line: #2a2f3a;
		--gct-bg: #15171d;
		--gct-card: #1d2027;
		--gct-shadow: 0 10px 28px rgba(0,0,0,.35);
	}
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
	margin: 0;
	background: var(--gct-bg);
	color: var(--gct-ink);
	font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; height: auto; display:block; }
a{ color: var(--gct-primary); text-decoration: none; }
a:hover{ text-decoration: underline; }
.gct-wrap{ max-width: var(--gct-maxw); margin: 0 auto; padding: 0 20px; }
.gct-skip-link{ position:absolute; left:-9999px; }
.gct-skip-link:focus{ left:10px; top:10px; background:#000; color:#fff; padding:8px 14px; border-radius:8px; z-index:9999; }
.gct-sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ===== Header ===== */
.gct-header{
	background: var(--gct-card);
	border-bottom: 1px solid var(--gct-line);
	position: sticky; top: 0; z-index: 50;
}
.gct-header .gct-wrap{ display:flex; align-items:center; gap:22px; padding-top:14px; padding-bottom:14px; }
.gct-logo{ font-size:1.05rem; font-weight:800; color:var(--gct-ink); letter-spacing:.3px; margin-right:auto; text-transform: uppercase; white-space: nowrap; }
.gct-logo span{ color: var(--gct-primary); }
.gct-nav{ display:flex; }
.gct-nav ul{ display:flex; gap:2px; margin:0; padding:0; list-style:none; }
.gct-nav li{ display:flex; }
.gct-nav a{
	display:flex; align-items:center;
	padding:9px 15px; border-radius:999px;
	color: var(--gct-ink); font-weight:600; font-size:.92rem; white-space:nowrap;
	transition: background-color .18s ease, color .18s ease;
}
.gct-nav a:hover{ background: var(--gct-primary-soft); color: var(--gct-primary); text-decoration:none; }
.gct-nav-toggle{ display:none; background:none; border:0; font-size:1.4rem; cursor:pointer; color:var(--gct-ink); }
.gct-header-search{ display:flex; align-items:center; }
.gct-header-search input[type="search"]{
	border:1px solid var(--gct-line); border-radius:999px; padding:8px 16px; font-size:.9rem; width:190px; background:var(--gct-bg); color:var(--gct-ink);
}
.gct-header-search button{ display:none; }

@media (max-width: 820px){
	.gct-nav{ display:none; }
	.gct-nav-toggle{ display:block; }
	.gct-header-search input[type="search"]{ width:120px; }
}

/* ===== Menu mobile dạng panel trượt từ phải ===== */
.gct-mobile-nav{ position:fixed; inset:0; z-index:200; visibility:hidden; pointer-events:none; }
.gct-mobile-nav.is-open{ visibility:visible; pointer-events:auto; }
.gct-mobile-nav-backdrop{
	position:absolute; inset:0; background:rgba(10,12,18,.52); backdrop-filter: blur(1px);
	opacity:0; transition: opacity .25s ease;
}
.gct-mobile-nav.is-open .gct-mobile-nav-backdrop{ opacity:1; }
.gct-mobile-nav-panel{
	position:absolute; top:0; right:0; height:100%; width:min(360px, 88vw);
	background: var(--gct-bg); box-shadow:-18px 0 40px rgba(0,0,0,.2);
	transform: translateX(100%); transition: transform .32s ease;
	overflow-y:auto; padding:18px 14px 34px;
}
.gct-mobile-nav.is-open .gct-mobile-nav-panel{ transform: translateX(0); }
body.gct-noscroll{ overflow:hidden; }

.gct-mnav-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:16px; }
.gct-mnav-logo{ font-size:.92rem; margin-right:0; }
.gct-mnav-close{
	background:var(--gct-card); border:1px solid var(--gct-line); border-radius:50%;
	width:38px; height:38px; min-width:38px; display:flex; align-items:center; justify-content:center;
	cursor:pointer; font-size:1rem; color:var(--gct-ink);
}
.gct-mnav-close:hover{ filter:brightness(1.15); }

.gct-mnav-row{
	display:flex; align-items:center; gap:12px;
	background: var(--gct-card); border:1px solid var(--gct-line); border-radius:16px;
	padding:12px 14px; margin-bottom:10px; font-weight:700; font-size:.95rem; color:var(--gct-ink);
	box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
.gct-mnav-row:hover{ text-decoration:none; filter:brightness(1.04); box-shadow:0 8px 18px rgba(0,0,0,.09); }
.gct-mnav-row--home{ background: var(--gct-primary-soft); color: var(--gct-primary); }
.gct-mnav-row--home .gct-mnav-icon{ background:#fff; color:var(--gct-primary); }

.gct-mnav-icon{
	width:38px; height:38px; min-width:38px; border-radius:12px;
	display:flex; align-items:center; justify-content:center;
	background: var(--gct-primary-soft); color: var(--gct-primary); font-size:1rem;
}
.gct-mnav-label{ flex:1; }
.gct-mnav-toggle{ background:none; border:0; color:var(--gct-ink-soft); font-size:.9rem; cursor:pointer; padding:6px; }
.gct-mnav-toggle i{ transition: transform .2s ease; display:inline-block; }
.gct-mnav-item.is-expanded > .gct-mnav-row .gct-mnav-toggle i{ transform: rotate(180deg); }
.gct-mnav-sub{ list-style:none; margin:0 0 10px; padding:0 0 0 14px; display:none; }
.gct-mnav-item.is-expanded > .gct-mnav-sub{ display:block; }
.gct-mnav-sub li > a{ display:flex; padding:10px 14px; font-weight:600; font-size:.88rem; box-shadow:none; margin-bottom:8px; }

/* xoay vòng màu icon cho từng dòng danh mục, đỡ đơn điệu */
.gct-mnav-list > li:nth-child(6n+1) .gct-mnav-icon{ background:#fff3e0; color:#e8821c; }
.gct-mnav-list > li:nth-child(6n+2) .gct-mnav-icon{ background:#e8f8ee; color:#1ea664; }
.gct-mnav-list > li:nth-child(6n+3) .gct-mnav-icon{ background:#f1ecfe; color:#7b4ff0; }
.gct-mnav-list > li:nth-child(6n+4) .gct-mnav-icon{ background:#e8f1fe; color:#1868d6; }
.gct-mnav-list > li:nth-child(6n+5) .gct-mnav-icon{ background:#fdeaf0; color:#e8356f; }
.gct-mnav-list > li:nth-child(6n+6) .gct-mnav-icon{ background:#fff8e0; color:#c79211; }

/* ===== Hero ===== */
.gct-hero{ background: linear-gradient(180deg, var(--gct-primary-soft), transparent 70%); padding: 46px 0 28px; }
.gct-hero h1{ font-size: clamp(1.5rem, 1rem + 2vw, 2.3rem); margin: 0 0 12px; color: var(--gct-ink); }
.gct-hero p{ color: var(--gct-ink-soft); max-width: 720px; font-size: 1.02rem; }
.gct-hero-2col{ display:flex; align-items:center; gap:36px; }
.gct-hero-text{ flex: 1 1 52%; min-width: 0; }
.gct-hero-card{ flex: 1 1 42%; min-width: 280px; max-width: 380px; }
/* Thẻ gói trong hero đứng 1 mình -> plugin tự bọc "pkg-card-solo-wrap" (max-width:60%) để căn giữa
   khi dùng trên 1 trang bình thường; ở đây cột hero đã tự giới hạn chiều rộng rồi nên bỏ max-width
   đó đi, tránh bị co lại 2 lần (y hệt lỗi "Gói Cước Nổi Bật" đã sửa ở khối lưới bên dưới). */
.gct-hero-card .pkg-card-solo-wrap{ max-width: 100%; margin: 0; }
@media (max-width: 820px){
	.gct-hero-2col{ flex-direction: column; align-items: stretch; }
	.gct-hero-card{ max-width: 420px; margin: 0 auto; }
}
.gct-trust-bullets{ display:flex; gap:18px; flex-wrap:wrap; margin-top:18px; padding:0; list-style:none; }
.gct-trust-bullets li{
	background: var(--gct-card); border:1px solid var(--gct-line); border-radius: 999px; padding:8px 16px; font-size:.88rem; font-weight:600;
	display:flex; align-items:center; gap:8px; box-shadow: var(--gct-shadow);
}
.gct-trust-bullets i{ color: var(--gct-primary); }

/* ===== Section headings / TOC ===== */
.gct-section{ padding: 34px 0; }
.gct-section h2{ font-size:1.4rem; margin: 0 0 18px; color: var(--gct-ink); display:flex; align-items:center; gap:10px; }
.gct-section h2 i{ color: var(--gct-primary); }
.gct-toc{ background:var(--gct-card); border:1px solid var(--gct-line); border-radius: var(--gct-radius); padding:18px 22px; box-shadow: var(--gct-shadow); }
.gct-toc h2{ margin-bottom:10px; font-size:1.05rem; }
.gct-toc ol{ margin:0; padding-left:1.1rem; columns: 2; gap: 24px; }
.gct-toc li{ margin-bottom:6px; font-size:.92rem; }
@media (max-width:640px){ .gct-toc ol{ columns:1; } }

.gct-btn{
	display:inline-flex; align-items:center; justify-content:center; gap:8px;
	background: var(--gct-primary); color:#fff !important; border:0; border-radius:999px;
	padding:10px 20px; font-weight:700; font-size:.92rem; cursor:pointer; text-decoration:none !important;
	box-shadow: 0 8px 18px rgba(0,0,0,.14);
}
.gct-btn:hover{ background: var(--gct-primary-dark); }
.gct-btn-outline{ background:transparent; color:var(--gct-primary) !important; border:2px solid var(--gct-primary); box-shadow:none; }

/* ===== Category tabs / list nav ===== */
.gct-cat-nav{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
.gct-cat-nav a{
	background: var(--gct-card); border:1px solid var(--gct-line); border-radius:999px; padding:8px 16px; font-size:.88rem; font-weight:600; color:var(--gct-ink);
}
.gct-cat-nav a.is-active, .gct-cat-nav a:hover{ background:var(--gct-primary); color:#fff; border-color:var(--gct-primary); text-decoration:none; }

/* ===== Steps ===== */
.gct-steps{ display:grid; grid-template-columns: repeat(3,1fr); gap:16px; }
.gct-step{ background:var(--gct-card); border:1px solid var(--gct-line); border-radius:var(--gct-radius); padding:20px; box-shadow:var(--gct-shadow); text-align:center; }
.gct-step .gct-step-no{ width:38px; height:38px; border-radius:50%; background:var(--gct-primary); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; margin:0 auto 10px; }
@media (max-width:760px){ .gct-steps{ grid-template-columns:1fr; } }

/* ===== FAQ accordion ===== */
.gct-faq details{ background:var(--gct-card); border:1px solid var(--gct-line); border-radius:12px; margin-bottom:10px; padding: 4px 18px; }
.gct-faq summary{ cursor:pointer; font-weight:700; padding:12px 0; list-style:none; display:flex; justify-content:space-between; gap:12px; }
.gct-faq summary::-webkit-details-marker{ display:none; }
.gct-faq summary:after{ content:"+"; color:var(--gct-primary); font-size:1.3rem; }
.gct-faq details[open] summary:after{ content:"−"; }
.gct-faq p{ margin:0 0 14px; color:var(--gct-ink-soft); }

/* ===== Syntax table ===== */
.gct-syntax-table{ width:100%; border-collapse:collapse; background:var(--gct-card); border-radius:var(--gct-radius); overflow:hidden; box-shadow:var(--gct-shadow); }
.gct-syntax-table th, .gct-syntax-table td{ padding:12px 16px; border-bottom:1px solid var(--gct-line); text-align:left; font-size:.92rem; }
.gct-syntax-table th{ background: var(--gct-primary-soft); color: var(--gct-ink); }
.gct-syntax-table code{ background:var(--gct-bg); padding:2px 8px; border-radius:6px; }

/* ===== Page content / single ===== */
.gct-page-content{ padding: 30px 0 60px; }
.gct-page-content .gct-wrap > *:first-child{ margin-top:0; }
.gct-breadcrumb{ font-size:.85rem; color:var(--gct-ink-soft); margin-bottom:14px; }
.gct-post-meta{ font-size:.85rem; color:var(--gct-ink-soft); margin:-6px 0 20px; }
.gct-breadcrumb a{ color:var(--gct-ink-soft); }

/* ===== Search ===== */
.gct-search-form{ display:flex; gap:10px; max-width:520px; margin: 0 auto 26px; }
.gct-search-form input[type="search"]{ flex:1; border:1px solid var(--gct-line); border-radius:999px; padding:12px 18px; font-size:1rem; background:var(--gct-card); color:var(--gct-ink); }
.gct-search-result{ background:var(--gct-card); border:1px solid var(--gct-line); border-radius:var(--gct-radius); padding:18px 20px; margin-bottom:14px; box-shadow:var(--gct-shadow); }
.gct-search-result h2{ margin:0 0 6px; font-size:1.05rem; }
.gct-search-result p{ margin:0; color:var(--gct-ink-soft); font-size:.9rem; }
.gct-search-count{ color:var(--gct-ink-soft); font-size:.95rem; margin:0 0 18px; }
.gct-search-count strong{ color:var(--gct-primary); }

/* ===== 404 ===== */
.gct-404{ text-align:center; padding:70px 0; }
.gct-404 .gct-404-code{ font-size:5rem; font-weight:900; color:var(--gct-primary-soft); line-height:1; }

/* ===== Footer ===== */
.gct-footer{ background:#15171d; color:#c6cad3; margin-top: 50px; }
.gct-footer .gct-wrap{ padding:40px 20px 20px; display:grid; grid-template-columns: repeat(3,1fr); gap:28px; }
.gct-footer h3{ color:#fff; font-size:1rem; margin:0 0 12px; }
.gct-footer a{ color:#c6cad3; }
.gct-footer a:hover{ color:#fff; }
.gct-footer-bottom{ border-top:1px solid #2a2f3a; text-align:center; font-size:.82rem; padding:16px 0; color:#8a90a0; }
@media (max-width:760px){ .gct-footer .gct-wrap{ grid-template-columns:1fr; } }

/* ===== Menu cố định dưới màn hình (mobile/tablet) ===== */
.gct-bottom-nav{
	display:none; position:fixed; left:0; right:0; bottom:0; z-index:500;
	background: linear-gradient(135deg, var(--gct-primary), var(--gct-primary-dark));
	box-shadow: 0 -8px 24px rgba(0,0,0,.22);
	padding-bottom: env(safe-area-inset-bottom);
}
.gct-bnav-item{
	flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
	padding:9px 4px 7px; margin:5px 4px; border-radius:14px;
	color:rgba(255,255,255,.8); text-decoration:none; font-size:.68rem; font-weight:700;
	transition: color .15s ease, background-color .15s ease, transform .1s ease;
}
.gct-bnav-item i{ font-size:1.25rem; text-shadow:0 1px 3px rgba(0,0,0,.2); }
.gct-bnav-item:active{ transform: scale(.92); }
.gct-bnav-item:hover{ color:#fff; }
.gct-bnav-item.is-active{ color:#fff; background: rgba(255,255,255,.2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }
@media (max-width:820px){
	.gct-bottom-nav{ display:flex; }
	body{ padding-bottom: 60px; }
}

/* ===== Thẻ gợi ý theo nhu cầu sử dụng ===== */
.gct-audience-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); gap:16px; }
.gct-audience-card{
	background: var(--gct-card); border:1px solid var(--gct-line); border-radius: var(--gct-radius);
	padding: 20px; box-shadow: var(--gct-shadow);
}
.gct-audience-icon{
	width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center;
	background: var(--gct-primary-soft); color: var(--gct-primary); font-size:1.15rem; margin-bottom:10px;
}
.gct-audience-card strong{ display:block; margin-bottom:6px; color:var(--gct-ink); }
.gct-audience-card p{ margin:0; color:var(--gct-ink-soft); font-size:.9rem; }

.gct-skip-trust{ margin-top:36px; background: var(--gct-primary-soft); border-radius: var(--gct-radius); padding: 24px; }
.gct-quicklinks{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.gct-quicklinks a{ background:var(--gct-card); border:1px solid var(--gct-line); border-radius:999px; padding:6px 14px; font-size:.85rem; }

/* ===== Hiệu ứng hover: sáng lên + nảy nhẹ khi rê chuột vào link/nút/thẻ ===== */
@keyframes gct-bounce{
	0%, 100% { transform: translateY(0); }
	30%      { transform: translateY(-7px); }
	55%      { transform: translateY(0); }
	75%      { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: no-preference){
	.gct-nav a, .gct-toc a, .gct-cat-nav a, .gct-quicklinks a,
	.gct-btn, .gct-trust-bullets li, .gct-step, .gct-faq summary,
	.pkg-cta, .pkg-detail-btn {
		transition: filter .18s ease, box-shadow .18s ease, color .18s ease;
	}
	.gct-nav a:hover, .gct-toc a:hover, .gct-breadcrumb a:hover,
	.gct-cat-nav a:hover, .gct-quicklinks a:hover,
	.gct-btn:hover, .gct-trust-bullets li:hover, .gct-step:hover,
	.pkg-cta:hover, .pkg-detail-btn:hover {
		animation: gct-bounce .5s ease;
	}
	.gct-nav a:hover, .gct-toc a:hover{
		color: var(--gct-primary);
		filter: drop-shadow(0 0 6px color-mix(in srgb, var(--gct-primary) 55%, transparent));
	}
	.gct-cat-nav a:hover, .gct-quicklinks a:hover, .gct-trust-bullets li:hover{
		box-shadow: 0 10px 22px color-mix(in srgb, var(--gct-primary) 35%, transparent);
	}
	.gct-btn:hover, .pkg-cta:hover{
		filter: brightness(1.15);
		box-shadow: 0 10px 26px color-mix(in srgb, var(--gct-primary) 50%, transparent);
	}
	.pkg-detail-btn:hover{ filter: brightness(1.2); }
	.gct-step:hover .gct-step-no{ filter: brightness(1.2); box-shadow: 0 0 0 6px color-mix(in srgb, var(--gct-primary) 18%, transparent); }
	.gct-faq summary:hover{ color: var(--gct-primary); }
}

/* ===== Đánh giá (sao) trang chi tiết gói ===== */
.gct-rating-summary{ display:flex; align-items:center; gap:8px; font-size:.95rem; margin:14px 0 0; }
.gct-rating-summary--empty{ color:var(--gct-ink-soft); font-style:italic; }
.gct-stars{ color:#ffa000; letter-spacing:1px; text-shadow:0 1px 6px rgba(255,160,0,.4); }
.gct-stars .is-empty{ color:var(--gct-line); text-shadow:none; }

.gct-reviews{ margin-top:40px; padding-top:30px; border-top:1px solid var(--gct-line); }
.gct-review-list{ list-style:none; margin:16px 0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.gct-review-item{
	display:flex; align-items:center; gap:10px;
	background:var(--gct-card); border:1px solid var(--gct-line); border-radius:999px; padding:8px 16px;
}
.gct-review-date{ color:var(--gct-ink-soft); font-size:.82rem; }

#reply-title{ font-size:1.15rem; margin:0 0 16px; }
#reply-title small{ margin-left:10px; font-size:.8rem; font-weight:500; }

#commentform{
	margin-top:10px; background:var(--gct-card); border:1px solid var(--gct-line);
	border-radius:var(--gct-radius); padding:22px 24px; box-shadow:var(--gct-shadow);
	display:flex; flex-direction:column; align-items:flex-start; gap:16px;
}
#commentform p{ margin:0; }

.gct-rating-field label{ display:block; font-weight:700; margin-bottom:10px; }
.gct-rating-field .gct-required{ color:#e11; }
.gct-star-input{ display:inline-flex; flex-direction:row-reverse; gap:8px; }
.gct-star-input input{ display:none; }
.gct-star-input label{
	margin:0; font-size:2.3rem; color:var(--gct-line); cursor:pointer;
	transition:color .15s ease, transform .1s ease;
}
.gct-star-input label:hover{ transform:scale(1.15); }
.gct-star-input label:hover,
.gct-star-input label:hover ~ label,
.gct-star-input input:checked ~ label{
	color:#ffa000; text-shadow:0 2px 10px rgba(255,160,0,.55);
}

#commentform .gct-btn{ margin-top:4px; }