/* ============================================================
   QUOC ANH PRINT — Main Stylesheet
   Replaces all inline styles across views
   ============================================================ */

:root {
  --green: #288943;
  --green-rgb: 40, 137, 67;
  --green-light: #028746;
  --white: #ffffff;
  --black: #000000;
  --gray: #6c757d;
}

/* ============ HEADER / NAVBAR ============ */

/* Top contact bar */
.header-top-bar {
  height: 90px;
  color: var(--green-light);
  margin-right: 30px;
}
.header-phone-icon { width: 51px; height: 45px; }
.header-mail-icon { padding-left: 20px; width: auto; height: 45px; }
.header-logo { margin: 45px 0 30px 10px; }
.header-hr-line { border-top: 1px solid var(--green); opacity: .3; margin: 0; }

/* Desktop nav */
.header-nav { border-bottom: 2px solid var(--green); }
.nav-menu-item { width: 12%; }
.nav-menu-item-wide { width: 18%; }
.nav-lang-btn { width: 70px; height: 50px; margin-top: -10px; }
.nav-link-active { color: var(--green-light) !important; }
.nav-link-inactive { color: var(--black) !important; }

/* Mobile nav */
.mobile-contact-bar { color: var(--green-light); margin-left: 10px; }
.mobile-contact-icon { width: auto; height: 30px; }
.mobile-contact-text { font-size: 12px; }
.mobile-mail-row { color: var(--green-light); margin-left: 13px; }
.mobile-mail-icon { width: auto; height: 28px; }
.mobile-mail-text { font-size: 12px; padding-left: 5px; }
.mobile-logo { width: 50px; height: 40px; margin-left: 15px; }

/* ============ FOOTER ============ */
.qa-footer { padding-top: 3rem; }

/* Top section: logo + slogan */
.footer-top-box {
  border: 1px solid var(--green);
}
.footer-slogan-block { margin-left: -20px; color: var(--green); }
.footer-slogan-title { color: var(--green); }

/* System companies */
.footer-system-section { margin-top: 80px; }
.footer-system-inner { margin-left: 30px; }
.footer-system-title { margin-bottom: 0; font-size: 1.5rem; }
.footer-system-item { margin-bottom: 0; font-size: 1.25rem; }
.footer-hr {
  border-top: 2px solid var(--green);
  opacity: 1;
}

/* Contact rows */
.footer-contact-row {
  display: flex; align-items: center;
}
.footer-icon { flex-shrink: 0; }
.footer-icon-map { width: 40px; height: 40px; }
.footer-icon-phone { width: 40px; height: 40px; }
.footer-icon-mail { width: 40px; height: 40px; }
.footer-contact-text { font-size: 16px; }

/* Buttons */
.footer-buttons { display: flex; align-items: center; gap: 10px; }
.footer-icon-lookup { width: auto; height: 45px; }
.footer-btn-profile {
  width: 150px; height: 50px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--green);
}
.footer-btn-profile-text { font-size: 20px; }
.footer-btn-download {
  width: 150px; height: 50px;
  background-color: var(--green);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px; border-radius: .375rem;
}

/* Map */
.footer-map {
  width: 75%; height: 400px;
  margin-top: 50px; margin-bottom: 50px;
}
.footer-menu { margin-top: 0; }
.footer-menu-link { color: var(--black); text-decoration: none; }
.footer-menu-link:hover { text-decoration: underline; }

/* Social */
.footer-social { margin: 3rem 0; }
.footer-social-icon { width: 40px; height: 40px; margin-right: 15px; }
.footer-social-icon:first-child { margin-left: 30px; }

/* Copyright */
.footer-copyright-bar { height: 50px; background-color: var(--green); }
.footer-copyright-text { font-size: 15px; margin-left: 0; }

/* ============ HOME PAGE ============ */
.home-banner-img { width: 100%; height: auto; max-height: 600px; object-fit: cover; }
.home-section-title { color: var(--green); font-size: 2rem; }
.home-section-desc { font-size: 1.1rem; line-height: 1.8; }
.home-card { border: 1px solid var(--green); border-radius: 8px; overflow: hidden; transition: .3s; }
.home-card:hover { box-shadow: 0 4px 20px rgba(var(--green-rgb), .2); }
.home-card-img { width: 100%; height: 250px; object-fit: cover; }
.home-card-title { font-size: 1.1rem; color: var(--green); }
.home-achievement-num { font-size: 2.5rem; color: var(--green); }
.home-achievement-label { font-size: 1rem; color: var(--gray); }

/* ============ ABOUT US ============ */
.about-hero { position: relative; }
.about-hero-img { width: 100%; max-height: 500px; object-fit: cover; }
.about-tab-btn { color: var(--green); border: none; background: none; font-size: 1.1rem; }
.about-tab-btn.active { color: var(--green); border-bottom: 3px solid var(--green); font-weight: 700; }
.about-section { padding: 3rem 0; }
.about-title { color: var(--green); font-size: 1.8rem; margin-bottom: 1.5rem; }
.about-content { font-size: 1.05rem; line-height: 1.8; }

/* ============ PRODUCTION ============ */
.prod-gallery-img { width: 100%; height: 300px; object-fit: cover; border-radius: 8px; }
.prod-gallery-img:hover { opacity: .85; cursor: pointer; }
.prod-video-wrapper { position: relative; }
.prod-video-thumb { width: 100%; border-radius: 8px; }
.prod-video-play-btn {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 70px; height: 70px;
  background: rgba(0,0,0,.6); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 2rem;
}

/* ============ JOBS ============ */
.jobs-hero { position: relative; }
.jobs-hero-img { width: 100%; max-height: 400px; object-fit: cover; }
.jobs-card { border: 1px solid #e0e0e0; border-radius: 8px; padding: 1.5rem; transition: .3s; }
.jobs-card:hover { border-color: var(--green); box-shadow: 0 2px 12px rgba(var(--green-rgb), .15); }
.jobs-card-title { color: var(--green); font-size: 1.2rem; }
.jobs-detail-title { color: var(--green); font-size: 1.5rem; }
.jobs-benefit-item { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: 1rem; }
.jobs-benefit-icon { color: var(--green); font-size: 1.5rem; flex-shrink: 0; }
.jobs-form input, .jobs-form textarea, .jobs-form select {
  border: 1px solid #ddd; border-radius: 6px; padding: .75rem; width: 100%;
}
.jobs-form input:focus, .jobs-form textarea:focus { border-color: var(--green); outline: none; }
.jobs-submit-btn { background: var(--green); color: #fff; padding: .75rem 2rem; border: none; border-radius: 6px; font-weight: 700; }

/* ============ NEWS ============ */
.news-card { border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; transition: .3s; }
.news-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1); }
.news-card-img { width: 100%; height: 200px; object-fit: cover; }
.news-card-title { font-size: 1.1rem; color: var(--green); }
.news-detail-title { font-size: 1.8rem; color: var(--green); }
.news-detail-img { width: 100%; max-height: 500px; object-fit: cover; border-radius: 8px; }
.news-detail-content { font-size: 1.05rem; line-height: 1.9; }

/* ============ PRODUCT ============ */
.product-card { border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; transition: .3s; }
.product-card:hover { border-color: var(--green); box-shadow: 0 2px 12px rgba(var(--green-rgb), .15); }
.product-card-img { width: 100%; height: 220px; object-fit: cover; }
.product-card-title { color: var(--green); font-size: 1rem; margin-top: .5rem; }
.product-detail-img { width: 100%; max-height: 450px; object-fit: contain; }
.product-detail-title { color: var(--green); font-size: 1.6rem; }

/* ============ CONTACT ============ */
.contact-info-card { border: 1px solid var(--green); border-radius: 8px; padding: 2rem; }
.contact-info-icon { width: 40px; height: 40px; color: var(--green); }
.contact-info-title { color: var(--green); font-size: 1.2rem; margin-bottom: .5rem; }
.contact-form input, .contact-form textarea {
  border: 1px solid #ddd; border-radius: 6px; padding: .75rem; width: 100%;
}
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--green); outline: none; }
.contact-submit-btn { background: var(--green); color: #fff; padding: .75rem 3rem; border: none; border-radius: 6px; font-weight: 700; }

/* ============ SUPPORT ============ */
.support-card { border: 1px solid var(--green); border-radius: 8px; padding: 1.5rem; text-align: center; transition: .3s; }
.support-card:hover { background: rgba(var(--green-rgb), .05); }
.support-card-icon { color: var(--green); font-size: 2.5rem; margin-bottom: 1rem; }
.support-card-title { color: var(--green); font-size: 1.1rem; }

/* ============ ACHIEVEMENT ============ */
.achievement-card { text-align: center; padding: 2rem 1rem; }
.achievement-num { color: var(--green); font-size: 2.5rem; font-weight: 700; }
.achievement-label { color: var(--gray); font-size: 1rem; margin-top: .5rem; }

/* ============ GENERAL UTILITIES ============ */
.text-green { color: var(--green) !important; }
.text-green-light { color: var(--green-light) !important; }
.bg-green { background-color: var(--green) !important; }
.border-green { border-color: var(--green) !important; }
.section-padding { padding: 3rem 0; }
.qa-container { max-width: 1200px; margin: 0 auto; padding: 0 15px; }

/* ============ RESPONSIVE (< 768px) ============ */
@media (max-width: 767.98px) {
  /* Footer */
  .footer-system-section { margin-top: 30px; }
  .footer-system-inner { margin-left: 10px; }
  .footer-system-title { font-size: 17px; }
  .footer-system-item { font-size: 15px; }
  .footer-contact-text { font-size: 14px; }
  .footer-icon-map { width: 30px; height: 30px; }
  .footer-icon-phone { width: 35px; height: 30px; }
  .footer-icon-mail { width: 30px; height: 30px; }
  .footer-icon-lookup { width: 30px; height: 40px; }
  .footer-btn-profile { width: 140px; }
  .footer-btn-download { width: 140px; }
  .footer-btn-profile-text { font-size: 18px; }
  .footer-btn-download { font-size: 18px; }
  .footer-map { width: 100%; height: 400px; }
  .footer-social { margin: 1rem 0; }
  .footer-social-icon:first-child { margin-left: 10px; }
  .footer-copyright-text { font-size: 12px; margin-left: 10px; }

  /* General */
  .hide-mobile { display: none !important; }
}

@media (min-width: 768px) {
  .hide-desktop { display: none !important; }
}

/* ============ HEADER (updated) ============ */
.header-logo { margin: 45px 0px 30px 10px; }
.header-top-bar { height: 90px; }
.header-contact-line {
  margin-top: 20px;
  color: var(--green-light);
  margin-right: 30px;
}
.header-phone-icon { width: 51px; height: 45px; }
.header-mail-icon { padding-left: 20px; width: auto; height: 45px; }
.nav-menu-item { width: 12%; }
.nav-menu-item-wide { width: 18%; }
.nav-menu-lang { width: 10%; }
.nav-lang-btn { width: 70px; height: 50px; margin-top: -10px; }

.mobile-contact-bar { color: var(--green-light); margin-left: 10px; }
.mobile-contact-icon { width: auto; height: 30px; }
.mobile-contact-text { font-size: 12px; }
.mobile-mail-row { color: var(--green-light); margin-left: 13px; }
.mobile-mail-icon { width: auto; height: 28px; }
.mobile-mail-text { font-size: 12px; padding-left: 5px; }
.mobile-logo { width: 50px; height: 40px; margin-left: 15px; }

/* ============ HOME (updated) ============ */
.home-heading-span { margin-left: -15px; }
.home-cat-img {
  object-fit: cover;
  min-height: 100px;
  width: 100%;
}
.home-cat-btn {
  height: 45px;
  font-size: 20px;
  margin-top: -40px;
}
.home-whyus-btn-wrap { min-height: 60px; }
.home-avatar { width: 100px; height: 100px; }
.home-avatar-wrap { margin-top: -50px; }
.home-news-cat-name { margin-left: 5px; color: var(--green-light); }
.home-news-ml5 { margin-left: 5px; }
.home-news-date {
  margin-left: 5px;
  font-size: 12px;
  font-style: italic;
  color: gray;
}
.home-news-content { margin-left: 5px; font-size: 14px; }

/* Footer cup icons + slogan */
.footer-cup-icon { height: 100px; width: auto; }
.footer-cup-icon-mobile { height: 70px; width: auto; }
.footer-slogan-sub { font-size: 14px; }

/* ============ ABOUT + PRODUCTION + CONTACT ============ */
.hero-img-dim { filter: brightness(50%); }
.about-icon-60 { width: auto; height: 60px; }
.about-icon-50 { width: auto; height: 50px; }
.about-text-15 { font-size: 15px; }
.about-text-14 { font-size: 14px; }
.about-content-ml-90 { margin-left: 90px; }
.about-content-ml-10 { margin-left: 10px; }

.staff-img-d { width: 200px; height: 200px; max-width: 80%; }
.staff-box-d { height: 100px; background-color: var(--green); }
.staff-name-pt { padding-top: 20px; }
.staff-img-m { width: 120px; height: 120px; }
.staff-box-m { height: 80px; background-color: var(--green); }
.video-fill { width: 100%; height: 100%; }

.contact-ml-30 { margin-left: 30px; }
.contact-mr-30 { margin-right: 30px; }
.contact-title { color: var(--green-light); }
.contact-send-btn { width: 200px; height: 50px; }

/* ============ JOBS DETAIL ============ */
.job-slogan-line { line-height: 35px; }
.job-title-pl-95 { padding-left: 95px; }
.job-desc-pl-95 { padding-left: 95px; padding-right: 50px; }
.job-benefit-icon { width: 55px; height: 50px; }
.job-benefit-text { padding-left: 10px; padding-top: 15px; }
.job-item-ml-45 { margin-left: 45px; }
.job-item-ml-15 { margin-left: 15px; }
.job-item-date-d { font-size: 15px; font-style: italic; color: gray; margin-left: 45px; }
.job-item-date-m { font-size: 14px; font-style: italic; color: gray; margin-left: 15px; }
.job-btn-ml-95 { margin-left: 95px; }
.job-btn-ml-20 { margin-left: 20px; }
.job-btn-text { margin-top: 5px; }
.job-btn-text-14 { margin-top: 5px; font-size: 14px; }
.job-btn-text-13 { margin-top: 5px; font-size: 13px; }
.job-side-title { color: var(--green-light); margin-top: 60px; }
.job-side-title-sm { color: var(--green-light); margin-top: 10px; }
.job-date-row { margin-top: 5px; }
.job-date-text { padding-left: 10px; padding-top: 7px; }
.job-title-pl-10 { padding-left: 10px; }
.job-desc-pl-10 { padding-left: 10px; padding-right: 10px; }
.job-btn-mobile { margin-left: 5px; margin-right: 5px; height: 44px; }

/* ============ NEWS DETAIL ============ */
.news-meta { font-size: 15px; font-style: italic; color: gray; }
.news-detail-pr { padding-right: 30px; }
.news-side-cat { font-size: 14px; }
.news-side-title { font-size: 14px; }
.news-side-content { font-size: 13px; }
.news-side-cat-sm { font-size: 13px; }
.news-side-title-sm { font-size: 13px; }

/* ============ SUPPORT ============ */
.support-ml-30 { margin-left: 30px; }
.support-ml-20 { margin-left: 20px; }
.support-ml-10 { margin-left: 10px; }

/* ============ ACHIEVEMENT ============ */
.achievement-bg { background-color: #f2f2f2; min-height: 90px; }
.achievement-plus { color: var(--green-light); }

/* ============ PRODUCT ============ */
.product-card-img {
  width: 100%;
  min-height: 180px;
  max-height: 280px;
  object-fit: cover;
}
.product-card-title-clamp {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.product-detail-padding { padding-left: 15px; }
.product-side-padding { padding-left: 15px; }
.product-hr { border: 2px solid gray; width: 100%; }

/* ============ TEST FIXES - missing classes ============ */
.footer-btn-text { font-size: 20px; }
.footer-contact-inner { margin-left: 30px; }
.product-content {  }