/*
Theme Name: ACC SOFTWARE — Enterprise ERP & Digital Operations
Theme URI: https://accsoft.vn
Author: ACC Group
Author URI: https://accsoft.vn
Description: Giao diện chuẩn doanh nghiệp công nghệ cho ACC SOFTWARE. Tích hợp đầy đủ trang chủ tương tác, hệ thống phân hệ ERP, blog kiến thức với tên tác giả, avatar, mục lục bài viết tự động (TOC), thời gian đọc, và bài viết mới nhất đồng bộ từ WordPress.
Version: 1.0.0
Tested up to: 6.7
Requires at least: 5.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: accsoft
Tags: corporate, erp, technology, responsive, blog, custom-header, custom-menu, featured-images
*/

@import url('css/style.css');

/* ==========================================================================
   WORDPRESS CORE ALIGNMENTS & UTILITIES
   ========================================================================== */

/* Smooth scroll for Table of Contents */
html {
  scroll-behavior: smooth;
}

/* Headings with anchor offsets for sticky header */
.article-content h2[id],
.article-content h3[id] {
  scroll-margin-top: calc(var(--header-height) + 28px);
}

/* WordPress Admin Bar Compatibility */
body.admin-bar .site-header {
  top: 32px !important;
}

@media screen and (max-width: 782px) {
  body.admin-bar .site-header {
    top: 46px !important;
  }
}

/* Avatar styling */
.author-avatar {
  overflow: hidden;
  position: relative;
  border-radius: 50%;
  flex-shrink: 0;
}

.author-avatar img,
.author-avatar .avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* Standard WP Content Alignments */
.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.alignleft {
  float: left;
  margin: 0 24px 20px 0;
}

.alignright {
  float: right;
  margin: 0 0 20px 24px;
}

.wp-caption {
  max-width: 100%;
  margin-bottom: 24px;
}

.wp-caption-text {
  font-size: 0.88rem;
  color: var(--text-muted);
  text-align: center;
  padding-top: 8px;
  font-style: italic;
}

figure.wp-block-image {
  margin: 28px 0;
}

figure.wp-block-image figcaption {
  font-size: 0.88rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: 8px;
}

/* Table of Contents sidebar list indent */
.toc-list .toc-item-h3 {
  padding-left: 16px;
  font-size: 0.86rem;
  opacity: 0.9;
}

/* WordPress Pagination */
.posts-pagination,
.navigation.pagination {
  margin: 48px 0 24px 0;
  display: flex;
  justify-content: center;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  background: var(--surface-white);
  color: var(--text-primary);
  font-weight: 500;
  font-size: 0.92rem;
  text-decoration: none;
  transition: all var(--transition-fast);
}

.page-numbers:hover,
.page-numbers.current {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #FFFFFF;
}

/* ==========================================================================
   WORDPRESS COMMENTS & REPLIES (Enterprise SaaS UI Design)
   ========================================================================== */
.comments-area {
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid var(--border-light);
}

.comments-header {
  margin-bottom: 32px;
}

.comments-header-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.comments-icon {
  color: var(--brand-primary);
  flex-shrink: 0;
}

.comments-title {
  font-size: 1.45rem;
  font-weight: 700;
  color: #0F172A;
  margin: 0;
  letter-spacing: -0.02em;
}

.comments-subtitle {
  font-size: 0.92rem;
  color: #64748B;
  margin: 0;
  line-height: 1.5;
}

/* Comment Form Card */
.comment-respond {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: var(--radius-lg, 14px);
  padding: 28px 30px;
  margin-bottom: 40px;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.04);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.comment-respond:focus-within {
  border-color: rgba(4, 120, 87, 0.4);
  box-shadow: 0 8px 30px -4px rgba(4, 120, 87, 0.08);
}

.comment-reply-title {
  font-size: 1.18rem;
  font-weight: 700;
  color: #0F172A;
  margin: 0 0 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.cancel-reply-wrap #cancel-comment-reply-link {
  font-size: 0.8rem;
  font-weight: 600;
  color: #DC2626;
  background: #FEF2F2;
  border: 1px solid #FECACA;
  padding: 4px 10px;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.cancel-reply-wrap #cancel-comment-reply-link:hover {
  background: #DC2626;
  color: #FFFFFF;
  border-color: #DC2626;
}

.comment-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.comment-notes,
.logged-in-as {
  font-size: 0.85rem;
  color: #64748B;
  margin-bottom: 8px;
}

.logged-in-as a {
  color: var(--brand-primary);
  font-weight: 600;
  text-decoration: none;
}

.logged-in-as a:hover {
  text-decoration: underline;
}

.comment-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 640px) {
  .comment-form-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  font-size: 0.86rem;
  font-weight: 600;
  color: #334155;
  margin-bottom: 6px;
}

.form-group label .required {
  color: #EF4444;
}

.form-group label .email-note {
  font-size: 0.78rem;
  font-weight: 400;
  color: #94A3B8;
  margin-left: 4px;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  border: 1.5px solid #E2E8F0;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 0.94rem;
  color: #0F172A;
  background: #F8FAFC;
  font-family: inherit;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus {
  outline: none;
  background: #FFFFFF;
  border-color: #047857;
  box-shadow: 0 0 0 3px rgba(4, 120, 87, 0.12);
}

.comment-form textarea {
  min-height: 110px;
  resize: vertical;
  line-height: 1.6;
}

.comment-form-cookies-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.84rem;
  color: #64748B;
  margin-top: 4px;
}

.comment-form-cookies-consent input[type="checkbox"] {
  margin-top: 3px;
  accent-color: #047857;
}

.btn-submit-comment {
  align-self: flex-start;
  background: #047857;
  color: #FFFFFF;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.94rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 6px rgba(4, 120, 87, 0.2);
}

.btn-submit-comment:hover {
  background: #065F46;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(4, 120, 87, 0.3);
}

.btn-submit-comment:active {
  transform: translateY(0);
}

/* Comment List & Nested Threads */
.comment-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.comment-list li.comment {
  list-style: none;
}

.comment-body {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: var(--radius-lg, 14px);
  padding: 20px 24px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.02);
  transition: all 0.2s ease;
  position: relative;
}

.comment-body:hover {
  border-color: #CBD5E1;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}

/* Meta: Avatar, Name, Badge, Date & Reply */
.comment-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.comment-author-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: #E2E8F0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #F1F5F9;
}

.comment-author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.comment-initial-avatar {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #047857 0%, #10B981 100%);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.comment-author-info {
  flex: 1;
  min-width: 0;
}

.comment-author-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  line-height: 1.3;
}

.comment-author-name {
  font-size: 0.98rem;
  font-weight: 700;
  color: #0F172A;
  margin: 0;
}

.comment-author-name a {
  color: #0F172A;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.comment-author-name a:hover {
  color: var(--brand-primary);
}

.badge-post-author {
  font-size: 0.72rem;
  font-weight: 600;
  color: #047857;
  background: #ECFDF5;
  border: 1px solid rgba(4, 120, 87, 0.2);
  padding: 2px 8px;
  border-radius: 999px;
  line-height: 1.2;
}

.comment-date {
  font-size: 0.8rem;
  color: #64748B;
  display: flex;
  align-items: center;
  margin-top: 2px;
}

.comment-reply-action {
  margin-left: auto;
  flex-shrink: 0;
}

.comment-reply-action .comment-reply-link {
  display: inline-flex;
  align-items: center;
  font-size: 0.82rem;
  font-weight: 600;
  color: #047857;
  background: #ECFDF5;
  border: 1px solid rgba(4, 120, 87, 0.18);
  padding: 5px 12px;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.comment-reply-action .comment-reply-link:hover {
  background: #047857;
  color: #FFFFFF;
  border-color: #047857;
  box-shadow: 0 2px 8px rgba(4, 120, 87, 0.2);
}

.comment-awaiting-moderation {
  background: #FEF3C7;
  border-left: 3px solid #F59E0B;
  padding: 8px 12px;
  font-size: 0.84rem;
  color: #92400E;
  margin-bottom: 12px;
  border-radius: 0 4px 4px 0;
}

.comment-content {
  font-size: 0.94rem;
  line-height: 1.65;
  color: #334155;
  padding-left: 54px;
}

.comment-content p:last-child {
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .comment-content {
    padding-left: 0;
    margin-top: 10px;
  }
}

/* Nested Replies (Thread Hierarchy) */
.comment-list .children {
  list-style: none;
  padding: 0 0 0 24px;
  margin: 16px 0 0 32px;
  border-left: 2px solid #E2E8F0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.comment-list .children .comment-body {
  background: #F8FAFC;
  border-color: #E2E8F0;
  box-shadow: none;
}

.comment-list .children .comment-body:hover {
  background: #FFFFFF;
  border-color: #CBD5E1;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
}

@media (max-width: 640px) {
  .comment-list .children {
    margin-left: 12px;
    padding-left: 12px;
  }
  
  .comment-body {
    padding: 16px;
  }
}

/* Empty State & Navigation */
.comments-empty-state {
  text-align: center;
  padding: 36px 20px;
  background: #F8FAFC;
  border: 1.5px dashed #CBD5E1;
  border-radius: 12px;
  margin-top: 24px;
}

.comments-empty-state .empty-icon {
  font-size: 2rem;
  margin-bottom: 8px;
}

.comments-empty-state .empty-text {
  font-size: 0.92rem;
  color: #64748B;
  margin: 0;
}

.no-comments {
  font-size: 0.92rem;
  color: #94A3B8;
  font-style: italic;
  text-align: center;
  padding: 24px 0;
}

.comment-navigation {
  display: flex;
  justify-content: space-between;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid #E2E8F0;
  font-size: 0.9rem;
  font-weight: 600;
}

.comment-navigation a {
  color: var(--brand-primary);
  text-decoration: none;
}

.comment-navigation a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   MOBILE HERO & FLOATING OVERLAY CLEANUP
   ========================================================================== */
@media (max-width: 768px) {
  .hero-section {
    padding-top: calc(var(--header-height) + 20px);
    padding-bottom: 40px;
    overflow-x: hidden;
  }

  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .hero-content {
    position: relative;
    z-index: 5;
    width: 100%;
  }

  .hero-cta-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    margin-bottom: 22px !important;
    width: 100% !important;
    position: relative !important;
    z-index: 5 !important;
  }

  .hero-cta-group .btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 13px 20px !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    border-radius: var(--radius-pill) !important;
    box-sizing: border-box !important;
  }

  .hero-highlights {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding-top: 16px !important;
    margin-bottom: 6px !important;
    border-top: 1px solid var(--border-light) !important;
    width: 100% !important;
  }

  .hero-visual {
    position: relative !important;
    width: 100% !important;
    margin-top: 6px !important;
    z-index: 4 !important;
  }

  .visual-mockup-card, .workspace-mockup {
    padding: 10px !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 10px 28px -6px rgba(9, 13, 22, 0.12) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .mockup-status-live {
    display: none !important;
  }

  /* CRITICAL: HIDE FLOATING PILLS ON MOBILE TO PREVENT OVERLAPPING BUTTONS AND IMAGE */
  .floating-status-pill,
  .floating-kpi-pill,
  .mockup-badge-float {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .floating-quick-bar {
    bottom: 16px !important;
    right: 12px !important;
    gap: 8px !important;
    z-index: 90 !important;
  }

  .quick-btn {
    width: 40px !important;
    height: 40px !important;
  }

  .quick-btn-tooltip {
    display: none !important;
  }
}