/*
Theme Name:     TheAIMedia
Theme URI:      https://theaimedia.com.vn;
Description:    Website Design and Google Ads
Version:        8.0
Author:         Tony
Author URI:     https://theaimedia.com.vn/
License:
License URI:
Tags: Website Design
*/

/* ==================================================
   FONT FACE
================================================== */
@font-face {
  font-family: 'Roboto';
  src: url('/wp-content/themes/semaster/fonts/Roboto-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('/wp-content/themes/semaster/fonts/Roboto-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('/wp-content/themes/semaster/fonts/Roboto-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('/wp-content/themes/semaster/fonts/Roboto-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* =====================
   RESET + GLOBAL
===================== */
* {
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #111;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0;
  padding: 0;
}

/* ======Hiệu ứng nhấn chạm====*/
a:focus{
    outline:none;
}

a:hover{
    text-decoration:none;
}

video,
iframe {
    width: 100%;           /* full chiều ngang */
    height: 60vh;          /* 60% chiều cao viewport */
    object-fit: cover;     /* phủ đầy, không méo */
}

a, button, input.button {
    display: inline-block;
    padding: 5px 12px 5px 12px;             /* tăng padding để text không sát viền */
    border-radius: 12px;            /* bo tròn góc mềm mại */
    border: none;                   /* tắt viền */
    outline: none;                  /* tắt outline */
    color: #333;                     /* text dễ đọc */
    text-decoration: none;
    transition: transform 0.25s cubic-bezier(0.4,0,0.2,1),
                box-shadow 0.25s cubic-bezier(0.4,0,0.2,1),
                background-color 0.2s ease;
    cursor: pointer;
}

/* Hover nâng nhẹ + shadow mượt */
a:hover, button:hover, input.button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    background-color: #f2f2f2;
}

/* Active nhấn xuống nhẹ */
a:active, button:active, input.button:active {
    transform: translateY(1px);
    box-shadow: 0 3px 8px rgba(0,0,0,0.08);
}
/*#End*/








/****                   *****/
/* Style danh sách bài viết */
/****                   *****/

    /* Title */
.category-title-wrap {
    margin-bottom: 25px;
}
.category-title span {
    font-size: 34px;
    font-weight: 700;
    color: #111;
    display: inline-block;
    padding-bottom: 8px;
    border-bottom: 3px solid #00aaff;
}

/* Subcategory */
.category-subcat-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}
.category-subcat-item a {
    display: inline-block;
    padding: 10px 18px;
    background: linear-gradient(145deg,#f7f7f9,#e9faff);
    border-radius: 16px;
    text-decoration: none;
    color: #111;
    font-weight: 500;
    transition: all 0.3s ease;
}
.category-subcat-item a:hover {
    background: linear-gradient(145deg,#e0f7ff,#c0ebff);
    transform: translateY(-2px);
}

/* Post grid */
.post-grid-list {
    list-style: none;
    padding: 0;
    margin: 0 -10px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.post-grid-item {
    padding: 0 10px;
    margin-bottom: 30px;
}
.post-card {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}
.post-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 38px rgba(0,0,0,0.12);
}

/* Image centered */
.post-card-img {
    position: relative;
    display: flex;
    justify-content: center;
    overflow: hidden;
}
.post-card-img img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.post-card-img:hover img {
    transform: scale(1.05);
}

/* Meta */
.post-card-meta {
    padding: 12px 16px;
}
.post-card-meta p {
    font-size: 13px;
    color: #888;
    margin-bottom: 8px;
}
.post-card-meta p a {
    color: #00aaff;
    text-decoration: none;
}
.post-card-title h2 a {
    color: #111;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.25s ease;
}
.post-card-title h2 a:hover {
    color: #00aaff;
}

/* Pagination */
.pagination-wrap center {
    margin-top: 20px;
}

/* Social */
.category-social-follow {
    text-align: center;
    padding: 20px 0;
}
.category-social-follow a img {
    vertical-align: middle;
    margin-left: 8px;
    transition: transform 0.25s ease;
}
.category-social-follow a img:hover {
    transform: scale(1.2);
}

/* Responsive */
@media (max-width: 991px) {
    .post-grid-item { width: 50%; }
}
@media (max-width: 767px) {
    .post-grid-item { width: 100%; }
    .category-title span { font-size: 28px; }
    .post-card-title h2 a { font-size: 16px; }
}
    




/* ==================================================
   Style: Page Liên hệ
================================================== */
  
    /* Page Contact */
.page-contact {
    padding-bottom: 50px;
    background-color: #f5f5f7;
}

/* Banner hero */
.page-contact__hero img {
    width: 100%;
    height: 42vh;
    object-fit: cover;
}

/* Row nội dung */
.page-contact__row {
    padding-top: 50px;
    padding-bottom: 20px;
}

/* Title */
.page-contact__title {
    font-size: 34px;
    font-weight: 700;
    margin-bottom: 25px;
    color: #111;
}

/* Nội dung */
.page-contact__content {
    font-size: 16px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 30px;
}

/* Cards liên hệ */
.page-contact__cards {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Card đơn */
.page-contact__card {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #fff;
    border-radius: 18px;
    padding: 16px 18px;
    box-shadow: 0 8px 28px rgba(0,0,0,.05);
}

/* Icon trong card */
.page-contact__icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #f5f5f7;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.page-contact__icon img {
    max-width: 24px;
}

/* Text trong card */
.page-contact__text strong {
    display: block;
    font-size: 14px;
    color: #888;
    margin-bottom: 4px;
}

.page-contact__text a {
    color: #111;
    font-weight: 600;
    text-decoration: none;
}

/* Form card */
.page-contact__form-card {
    background: #fff;
    border-radius: 24px;
    padding: 28px;
    box-shadow: 0 12px 35px rgba(0,0,0,.06);
}

/* Input/textarea */
.page-contact__form-card input,
.page-contact__form-card textarea {
    width: 100%;
    border: 1px solid #e5e5e5;
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 14px;
}

/* Submit */
.page-contact__form-card input[type=submit] {
    background: #111;
    color: #fff;
    border: none;
    font-weight: 600;
    border-radius: 999px;
    padding: 14px 26px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.page-contact__form-card input[type=submit]:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

/* Responsive */
@media (max-width: 991px){
    .page-contact__hero img {
        height: 28vh;
    }

    .page-contact__row {
        padding-top: 30px;
    }

    .page-contact__title {
        font-size: 28px;
    }

    .page-contact__form {
        margin-top: 30px;
    }
}
/* Container để pseudo-element */


/* Chỉ áp dụng cho select */
.page-contact__form-card select.wpcf7-select {
    width: 100%;
    padding: 14px 16px;
    margin-bottom: 10px;
    border-radius: 14px;
    border: 1px solid #e5e5e5;
    background-color: #fff;
    font-size: 16px;
    color: #111;
    cursor: pointer;
    transition: all 0.25s ease;
    appearance: auto; /* giữ mũi tên mặc định */
}

/* Hover/focus */
.page-contact__form-card select.wpcf7-select:hover,
.page-contact__form-card select.wpcf7-select:focus {
    border-color: #ccc;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    outline: none;
}




/* ==================================================
   Style: Post: Single
==================================================
   Style: General
================================================== */



  
 .single-page { padding:20px 0; }
.single-breadcrumb { font-size:13px; margin-bottom:20px; color:#888; }
.single-breadcrumb a { color:#00aaff; text-decoration:none; }
.single-breadcrumb a:hover { text-decoration:underline; }

.single-title { font-size:32px; font-weight:700; border-bottom:3px solid #00aaff; padding-bottom:8px; margin-bottom:20px; }

.single-meta { display:flex; justify-content:space-between; flex-wrap:wrap; margin-bottom:15px; font-size:13px; }
.meta-author { color:#00aaff; text-decoration:none; }
.meta-share { list-style:none; display:flex; gap:8px; padding:0; margin:0; }
.meta-share li a { font-size:20px; color:#00aaff; transition:0.3s; }
.meta-share li a:hover { transform:scale(1.2); }

.single-content { line-height:1.7; margin-bottom:20px; }
#countdown-code { cursor:pointer; font-weight:500; color:#111; }

.single-sidebar { padding-left:20px; }

.single-contact-benefit { padding:40px 0; background:#f7f7f9; }

.modal-login-content { border-radius:16px; overflow:hidden; }
.modal-login-header { padding:20px; text-align:center; }
.modal-logo img, .modal-mascot img { max-width:80px; margin-bottom:10px; }

.single-social { padding:20px 0; text-align:center; }
.single-social img { transition:transform 0.3s; }
.single-social img:hover { transform:scale(1.2); }

@media(max-width:991px){ 
    .single-sidebar{padding-left:0;margin-top:20px;}
    .related-title,.benefit-title{font-size:14px;} 
    .benefit-desc{font-size:13px;}
}
@media(max-width:767px){ 
    .single-title{font-size:28px;} 
}

/*==================================================
   Style: SINGLE: BENEFIT & FORM
================================================== */
/* Container ul */
.benefit-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    list-style: none;
    justify-content: center;
}

/* Li mỗi benefit */
.benefit-wrap li {
    border-radius: 16px;
    flex: 1 1 calc(50% - 20px); /* 2 cột desktop */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.benefit-img { max-width:80px; margin-bottom:15px; }
.benefit-title { font-size:18px; font-weight:600; margin-bottom:10px; }
.benefit-desc { font-size:14px; color:#555; margin-bottom:10px; }
.benefit-link { color:#00aaff; text-decoration:none; font-weight:500; transition:0.3s; }
.benefit-link:hover { text-decoration:underline; }
/* Hover nâng card */
.benefit-wrap li:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}

/* Image */
.benefit-wrap li img {
    max-width: 80px;
    border-radius: 50%;
    margin-bottom: 15px;
    transition: transform 0.3s ease;
}

.benefit-wrap li:hover img {
    transform: scale(1.1);
}

/* Title */
.benefit-wrap li h4 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
    text-align: center;
}

/* Description */
.benefit-wrap li p {
    font-size: 14px;
    color: #555;
    text-align: center;
    margin-bottom: 10px;
}

/* Link */
.benefit-wrap li a {
    color: #00aaff;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.25s ease;
}

.benefit-wrap li a:hover {
    text-decoration: underline;
}

/* Responsive mobile */
@media(max-width:767px){
    .benefit-wrap li {
        flex: 1 1 100%;
    }
}

/* Card mỗi benefit */
.benefit-card {
    background: #fff;
    padding: 20px;
    border-radius: 16px;
    text-align: center;
    flex: 1 1 calc(50% - 20px); /* 2 cột desktop */
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover nâng card */
.benefit-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}

/* Image */
.benefit-card img.benefit-img {
    max-width: 80px;
    margin-bottom: 15px;
    border-radius: 50%;
    transition: transform 0.3s ease;
}
.benefit-card:hover img.benefit-img {
    transform: scale(1.1);
}

/* Title & Description */
.benefit-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
}
.benefit-desc {
    font-size: 14px;
    color: #555;
    margin-bottom: 10px;
}

/* Link */
.benefit-link {
    color: #00aaff;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.25s ease;
}
.benefit-link:hover {
    text-decoration: underline;
}

/* Responsive mobile */
@media(max-width:767px){
    .benefit-card { flex: 1 1 100%; }
}





/*==================================================
   Style: SINGLE: CONTENT
================================================== */
/* =============================
   General Content Styles
   Dành cho nội dung trong post (single.php)
   Chuyên nghiệp – Tối ưu SEO & Speed
============================= */

/* --- Container --- */
.post-content {
    max-width: 900px;       /* Giới hạn chiều rộng, dễ đọc */
    margin: 0 auto;
    line-height: 1.65;
    font-family: 'Inter', 'Helvetica', 'Arial', sans-serif;
    font-size: 1rem;
    color: #222;
    word-wrap: break-word;
}

/* --- Headings --- */
.post-content h1, 
.post-content h2, 
.post-content h3, 
.post-content h4, 
.post-content h5, 
.post-content h6 {
    line-height: 1.3;
    margin: 1.5em 0 0.75em 0;
    font-weight: 600;
    color: #111;            /* Mạnh hơn chữ thường */
}

.post-content h1 { font-size: 2.2rem; }
.post-content h2 { font-size: 1.8rem; }
.post-content h3 { font-size: 1.5rem; }
.post-content h4 { font-size: 1.25rem; }
.post-content h5 { font-size: 1rem; }
.post-content h6 { font-size: 0.9rem; }

/* --- Paragraphs --- */
.post-content p {
    margin: 0 0 1em 0;
    text-align: justify;    /* Cân bằng chữ đẹp trên desktop */
    hyphens: auto;          /* Ngắt chữ thông minh */
}

/* --- Links --- */
.post-content a {
    color: #1a73e8;
    text-decoration: underline;
    transition: color 0.2s ease-in-out;
}
.post-content a:hover {
    color: #0b59d1;
}

/* --- Lists --- */
.post-content ul, .post-content ol {
    padding-left: 1.5em;
    margin-bottom: 1em;
}
.post-content li {
    margin-bottom: 0.5em;
}

/* --- Images --- */
.post-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1em auto;
    border-radius: 4px;        /* Nhẹ nhàng */
    box-shadow: 0 2px 6px rgba(0,0,0,0.05); /* Nhẹ, không ảnh hưởng tốc độ */
    object-fit: cover;
}

/* --- Lazyload support --- */
.post-content img.lazyload {
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}
.post-content img.lazyloaded {
    opacity: 1;
}
/* --- Highlight missing alt for devs --- */
.single-content img[alt=""] {
    outline: 1px dashed red;
}
/* --- Blockquotes --- */
.post-content blockquote {
    border-left: 4px solid #1a73e8;
    padding-left: 1em;
    margin: 1.5em 0;
    color: #555;
    font-style: italic;
    background-color: #f9f9f9;
}

.single-content b,
.single-content strong {
    font-weight: 600;
}

.single-content i,
.single-content em {
    font-style: italic;
}

.single-content del {
    text-decoration: line-through;
    color: #999;
}

/* --- Inline elements --- */
.single-content span {
    display: inline;
}

/* --- Tables --- */
.post-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
    font-size: 0.95rem;
}
.post-content th, 
.post-content td {
    border: 1px solid #ddd;
    padding: 0.5em 0.75em;
}
.post-content th {
    background-color: #f2f2f2;
}

/* --- Code & Preformatted --- */
.post-content code {
    background-color: #f5f5f5;
    padding: 0.15em 0.3em;
    border-radius: 3px;
    font-family: 'Source Code Pro', monospace;
    font-size: 0.95em;
}
.post-content pre {
    background-color: #f5f5f5;
    padding: 1em;
    overflow-x: auto;
    border-radius: 4px;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .post-content {
        padding: 1em;
        font-size: 0.95rem;
    }
    .post-content h1 { font-size: 1.8rem; }
    .post-content h2 { font-size: 1.5rem; }
    .post-content h3 { font-size: 1.25rem; }
}

/* --- Optional: SEO-friendly micro-optimizations --- */
/* Link focus for accessibility */
.post-content a:focus {
    outline: 2px dashed #1a73e8;
    outline-offset: 2px;
}

/* Ensure images have alt text (SEO) */
.post-content img[alt=""] {
    outline: 1px dashed red; /* Developer warning, không hiển thị user */
}

/* --- iframe / video --- */
.single-content iframe,
.single-content embed,
.single-content video {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1em auto;
}

/* --- Horizontal rule --- */
.single-content hr {
    border: none;
    border-top: 1px solid #ddd;
    margin: 2em 0;
}

.single-content blockquote {
    border-left: 4px solid #1a73e8;
    padding-left: 1em;
    margin: 1.5em 0;
    color: #555;
    font-style: italic;
    background-color: #f9f9f9;
}

.single-content img.lazyload {
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}
.single-content img.lazyloaded {
    opacity: 1;
}
/*==================================================
   Style: SINGLE: READMORE 
================================================== */
.single-related h4{
    margin-bottom:15px;
    padding:10px;
}
/* Container grid */
.relate-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

/* Item card */
.relate-item {
    display: flex;
    flex-direction: row;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 20px;
    min-height: 120px; /* giữ khung khi không có ảnh */
}

/* Hover card */
.relate-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}

.relate-img {
    overflow: hidden;
    background: #f0f0f0; /* placeholder khi không có ảnh */
}

/* Nếu có ảnh */
.relate-img img {
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f0f0;
    overflow: hidden;
}


.relate-item:hover .relate-img img {
    transform: scale(1.05);
}

.relate-content h2 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
}
.relate-content p {
    font-size: 14px;
    color: #555;
}

/* Responsive mobile */
@media(max-width:767px){
    .relate-item {
        flex-direction: column;
    }
    .relate-img,
    .relate-content {
        flex: 1 1 100%;
        max-width: 100%;
    }
}