/* =================================================================
   WiseTech ICT — main.css
   Bổ trợ Tailwind CDN: responsive hoàn chỉnh, admin bar,
   WordPress core styles, video embed, typography bài viết.
   ================================================================= */

/* ---- Base ---- */
html { scroll-behavior: smooth; }
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
*, *::before, *::after { box-sizing: border-box; }
img, video, iframe { max-width: 100%; display: block; }
a { text-decoration: none; }

/* ---- Admin bar: đẩy sticky header xuống ---- */
.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
    .admin-bar .site-header { top: 46px; }
}

/* ---- Skip link a11y ---- */
.skip-link {
    position: absolute; left: -9999px; top: auto;
    background: #2563eb; color: #fff; padding: 10px 18px; z-index: 9999;
    font-weight: 600; border-radius: 0 0 6px 6px;
}
.skip-link:focus { left: 16px; top: 0; }

/* ---- Focus visible ---- */
a:focus-visible, button:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---- Video embed responsive 16:9 ---- */
.video-frame {
    position: relative; width: 100%; aspect-ratio: 16 / 9;
    border-radius: 0.75rem; overflow: hidden; background: #000;
}
.video-frame iframe {
    position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

/* ---- Mobile nav toggle ---- */
#mobile-nav { display: none; }
#mobile-nav.is-open { display: block; }

/* ================================================================
   RESPONSIVE — các breakpoint quan trọng
   Tailwind CDN đã xử lý hầu hết, file này chỉ xử lý
   những gì Tailwind CDN không thể: dynamic content từ WordPress
   (bài viết, ảnh, bảng, code block...)
   ================================================================ */

/* ---- Trang chủ: hero grid ---- */
@media (max-width: 1023px) {
    .hero-grid { grid-template-columns: 1fr !important; }
    .hero-video-col { margin-top: 2rem; }
}

/* ---- Header logo responsive ---- */
.site-logo img { height: 60px; width: auto; max-width: 200px; }
@media (max-width: 640px) {
    .site-logo img { height: 44px; max-width: 160px; }
    .header-hotline { display: none; }
}

/* ---- Cards grid ---- */
@media (max-width: 767px) {
    .cards-3col { grid-template-columns: 1fr !important; }
    .cards-2col { grid-template-columns: 1fr !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .cards-3col { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ---- Pricing cards ---- */
@media (max-width: 767px) {
    .pricing-grid { grid-template-columns: 1fr !important; }
}

/* ---- Footer ---- */
@media (max-width: 767px) {
    .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 2rem; }
}
@media (max-width: 480px) {
    .footer-grid { grid-template-columns: 1fr !important; }
}

/* ---- Stat strip ---- */
@media (max-width: 767px) {
    .stat-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ---- Contact section ---- */
@media (max-width: 1023px) {
    .contact-grid { grid-template-columns: 1fr !important; }
}

/* ---- About section ---- */
@media (max-width: 1023px) {
    .about-grid { grid-template-columns: 1fr !important; }
}

/* ================================================================
   TYPOGRAPHY — bài viết từ Gutenberg / editor cổ điển
   ================================================================ */
.entry-content {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: #374151;
}
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5 {
    font-weight: 700;
    color: #111827;
    margin-top: 2em;
    margin-bottom: 0.6em;
    line-height: 1.25;
}
.entry-content h2 { font-size: 1.5rem; }
.entry-content h3 { font-size: 1.25rem; }
.entry-content h4 { font-size: 1.1rem; }
.entry-content p  { margin-bottom: 1.25em; }
.entry-content a  { color: #2563eb; text-decoration: underline; text-underline-offset: 3px; }
.entry-content a:hover { color: #1d4ed8; }
.entry-content ul,
.entry-content ol { padding-left: 1.5em; margin-bottom: 1.25em; }
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content li { margin-bottom: 0.4em; }
.entry-content img {
    border-radius: 0.75rem;
    margin: 1.5em 0;
    max-width: 100%;
    height: auto;
}
.entry-content blockquote {
    border-left: 4px solid #2563eb;
    padding: 1em 1.5em;
    margin: 1.5em 0;
    background: #eff6ff;
    border-radius: 0 0.5rem 0.5rem 0;
    font-style: italic;
    color: #1e40af;
}
.entry-content code {
    background: #f3f4f6;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
}
.entry-content pre {
    background: #1f2937;
    color: #e5e7eb;
    padding: 1.5em;
    border-radius: 0.75rem;
    overflow-x: auto;
    margin: 1.5em 0;
}
.entry-content pre code { background: none; padding: 0; color: inherit; }
.entry-content table {
    width: 100%; border-collapse: collapse;
    margin: 1.5em 0; font-size: 0.95rem;
}
.entry-content table th {
    background: #1e3a5f; color: #fff;
    padding: 0.75em 1em; text-align: left; font-weight: 600;
}
.entry-content table td {
    padding: 0.65em 1em;
    border-bottom: 1px solid #e5e7eb;
}
.entry-content table tr:nth-child(even) td { background: #f9fafb; }

/* ---- Gutenberg blocks ---- */
.wp-block-image img { border-radius: 0.75rem; }
.wp-block-quote {
    border-left: 4px solid #2563eb;
    padding: 1em 1.5em;
    background: #eff6ff;
    border-radius: 0 0.5rem 0.5rem 0;
}
.wp-block-cover { border-radius: 0.75rem; overflow: hidden; }
.wp-block-button__link {
    background: #2563eb !important;
    border-radius: 0.5rem !important;
    font-weight: 600 !important;
}
.wp-block-separator { border-color: #e5e7eb; }

/* ---- Gallery ---- */
.wp-block-gallery .blocks-gallery-grid { gap: 0.75rem; }

/* ================================================================
   PAGINATION
   ================================================================ */
.pagination .page-numbers, .nav-links a, .nav-links span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; height: 40px; padding: 0 12px;
    border: 1px solid #e5e7eb; border-radius: 0.5rem;
    color: #374151; font-size: 0.9rem; font-weight: 500;
    transition: all 0.15s;
    margin: 0 2px;
}
.pagination .page-numbers:hover, .nav-links a:hover {
    background: #2563eb; color: #fff; border-color: #2563eb;
}
.pagination .page-numbers.current, .nav-links span.current {
    background: #2563eb; color: #fff; border-color: #2563eb;
}

/* ================================================================
   COMMENTS
   ================================================================ */
.comment-list { list-style: none; padding: 0; }
.comment-list .comment {
    padding: 1.25rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    margin-bottom: 1rem;
    background: #fff;
}
.comment-list .comment .comment-author img {
    border-radius: 50%; width: 40px; height: 40px;
}
.comment-form input, .comment-form textarea {
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    width: 100%;
    font-family: inherit;
    font-size: 0.95rem;
    transition: border-color 0.15s;
}
.comment-form input:focus, .comment-form textarea:focus {
    outline: none; border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}
.comment-form .submit {
    background: #2563eb; color: #fff;
    padding: 0.75rem 1.75rem;
    border: none; border-radius: 0.5rem;
    font-weight: 600; cursor: pointer;
    transition: background 0.15s;
}
.comment-form .submit:hover { background: #1d4ed8; }

/* ================================================================
   SEARCH FORM
   ================================================================ */
.search-form { display: flex; gap: 0.5rem; }
.search-form .search-field {
    flex: 1; padding: 0.75rem 1rem;
    border: 1px solid #d1d5db; border-radius: 0.5rem;
    font-family: inherit; font-size: 0.95rem;
}
.search-form .search-submit {
    background: #2563eb; color: #fff;
    padding: 0.75rem 1.25rem; border: none;
    border-radius: 0.5rem; font-weight: 600; cursor: pointer;
}

/* ================================================================
   WOOCOMMERCE (nếu cài)
   ================================================================ */
.woocommerce .products.columns-3 {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
    list-style: none; padding: 0;
}
@media (max-width: 767px) {
    .woocommerce .products.columns-3 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
    .woocommerce .products.columns-3 { grid-template-columns: 1fr !important; }
}
.woocommerce ul.products li.product {
    background: #fff; border-radius: 0.75rem;
    border: 1px solid #e5e7eb; padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.woocommerce span.price { color: #2563eb; font-weight: 700; }
.woocommerce a.button, .woocommerce button.button {
    background: #2563eb !important; color: #fff !important;
    border-radius: 0.5rem !important; font-weight: 600 !important;
    padding: 0.75rem 1.25rem !important;
}