/* ================================================================
   puppyfarm.css — Issue-31: pixel-perfect CSS match to nongtraicun.com
   Design tokens:
     Primary accent:    #F7882F
     Secondary accent:  #6B7A8F
     Hover / alt:       #F7C331
     Body background:   #f5f5f5
     Base font:         Roboto 14px / 24px / #666666
   ================================================================ */

/* ── Base / Body ─────────────────────────────────────────────── */
body {
    background-color: #f5f5f5;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    line-height: 24px;
    color: #666666;
}

/* Body padding-top to clear the fixed header */
body {
    padding-top: 186px;
}
@media (max-width: 767px) {
    body { padding-top: 295px; }
}
@media (max-width: 575px) {
    body { padding-top: 319px; }
}
@media (max-width: 479px) {
    body { padding-top: 349px; }
}

/* ── @keyframes for sticky header entrance ───────────────────── */
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Header ─────────────────────────────────────────────────── */
.header-top {
    background: #f5f5f5;
    padding: 10px 0;
}

.header-bottom {
    background: #ffffff;
    box-shadow: 0px 5px 4px 0px rgba(0, 0, 0, 0.1);
}

/* Sticky behaviour */
.header-sticky.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    animation: 300ms ease-in-out fadeInDown;
    background: rgba(255, 255, 255, 0.95);
}

/* ── Header-top ──────────────────────────────────────────────── */
.header-top {
    background: #f5f5f5;
    padding: 10px 0;
}

/* ── Logo ────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .logo img { width: 90px; }
}
@media (max-width: 479px) {
    .logo img { width: 70px; }
}

/* ── Search button ───────────────────────────────────────────── */
.header-advance-search button {
    background-color: #F7882F;
}
.header-advance-search button:hover {
    background-color: #F7C331;
}

/* ── Primary nav (header-bottom bar) ────────────────────────── */
.main-menu nav > ul > li > a {
    text-transform: uppercase;
    font-size: 15px;
    font-weight: 500;
    color: #222222;
}

.main-menu nav > ul > li.active > a,
.main-menu nav > ul > li:hover > a {
    color: #F7882F;
}

/* ── Secondary nav (orange bar) — override main.css incl. responsive resets ── */
.home-other-navigation-menu {
    background-color: #ff6445;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .home-other-navigation-menu { background-color: #ff6445 !important; }
}
@media only screen and (max-width: 767px) {
    .home-other-navigation-menu { background-color: #ff6445 !important; }
}

/* ── Section title tab (#ff6445 primary) ─────────────────────── */
.slider .section-title h3 {
    background: #ff6445;
}
.slider .section-title h3:before {
    background: #ff6445;
}
.slider .section-title h3:after {
    border-top-color: #cc3d1e;
}
@media only screen and (max-width: 575px) {
    .slider .section-title h3:after {
        border-top-color: #cc3d1e;
    }
}

/* ── Readmore / hover accents ────────────────────────────────── */
a.readmore-btn:hover {
    color: #ff6445;
}
.blog-readmore-btn:hover {
    background: #ff6445;
    border-color: #ff6445;
    color: #fff;
}
.single-post-wrapper h3.post-title a:hover {
    color: #ff6445;
}

/* ── Section title "Xem thêm" link ──────────────────────────── */
.slider .section-title .view-all {
    position: absolute;
    right: 0;
    top: 12px;
    bottom: 0;
    z-index: 10;
    background: #e9e9e9;
    padding: 0 15px;
    display: flex;
    align-items: center;
}
.slider .section-title .view-all a {
    color: #666666;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    line-height: 1;
}
.slider .section-title .view-all a:hover {
    color: #ff6445;
}

/* ── Slick arrow hover ───────────────────────────────────────── */
.slider .slick-arrow:hover i.fa {
    color: #ff6445;
    border-color: #ff6445;
}

.home-other-navigation-menu .main-menu > nav > ul > li > a:hover {
    color: #6B7A8F;
}

/* ── Category toggle ─────────────────────────────────────────── */
.hero-side-category .category-toggle-wrap {
    background-color: #F7882F;
}
.category-toggle-wrap:before {
    background-color: #F7C331;
}
.category-toggle-wrap:after {
    border-top-color: #F7882F;
}

.hero-side-category nav.category-menu > ul > li > a:hover {
    color: #F7882F;
}

/* ── Tab slider ──────────────────────────────────────────────── */
.tab-slider-wrapper .nav-tabs .nav-link.active {
    color: #F7882F;
}
.tab-slider-wrapper .nav-tabs .nav-link.active:before,
.tab-slider-wrapper .nav-tabs .nav-link:hover:before {
    background: #F7C331;
}
.tab-slider-wrapper .nav-tabs .nav-link:hover {
    color: #F7882F;
}

/* ── Hero Slider ─────────────────────────────────────────────── */
.hero-slider-item {
    height: 800px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

@media (min-width: 768px) and (max-width: 991px) {
    .hero-slider-item { height: 600px; }
}

@media (max-width: 767px) {
    .hero-slider-item { height: 500px; }
}

.slider-content h1 {
    font-size: 100px !important;
    line-height: 1.1;
    font-weight: 300;
    color: #ffffff;
}

/* Responsive h1 scale (spec: 90→70→50→35→30px) */
@media (max-width: 1499px) {
    .slider-content h1 { font-size: 90px !important; }
}
@media (max-width: 991px) {
    .slider-content h1 { font-size: 70px !important; }
}
@media (max-width: 767px) {
    .slider-content h1 { font-size: 50px !important; }
}
@media (max-width: 575px) {
    .slider-content h1 { font-size: 35px !important; }
}
@media (max-width: 479px) {
    .slider-content h1 { font-size: 30px !important; }
}

.slider-content p {
    color: #ffffff;
    font-size: 47px;
    font-style: italic;
    margin-bottom: 60px;
}

/* Slick entrance animations matching theme */
.slick-active .slider-content > * {
    animation: zoomIn 1.5s ease both;
}
.slick-active .slider-content > *:nth-child(1) { animation-delay: 0.5s; }
.slick-active .slider-content > *:nth-child(2) { animation-delay: 1.5s; }
.slick-active .slider-content > *:nth-child(3) { animation: zoomIn 1s ease both; animation-delay: 3s; }

/* Hero slider images — JPG fallback */
.slider-bg-1 {
    background-image: url("../images/sliders/home1-slider1.jpg");
}
.slider-bg-2 {
    background-image: url("../images/sliders/home1-slider2.jpg");
}
/* WebP override — Modernizr adds .webp class to <html> */
.webp .slider-bg-1 {
    background-image: url("../images/sliders/home1-slider1.webp");
}
.webp .slider-bg-2 {
    background-image: url("../images/sliders/home1-slider2.webp");
}

/* ── Policy strip ────────────────────────────────────────────── */
.policy-titles {
    background: #ffffff;
    border: 1px solid #e0e0e0;
}

.single-policy {
    flex-basis: 33.333%;
    padding: 15px 10px 15px 70px;
    position: relative;
}

.single-policy:nth-child(1),
.single-policy:nth-child(2) {
    border-right: 1px solid #e0e0e0;
}

.single-policy img {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    float: none;
    width: 35px;
    height: auto;
}

.single-policy p {
    font-weight: 500;
    line-height: 22px;
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .single-policy {
        flex-basis: 100%;
        border-right: none;
        border-bottom: 1px solid #e0e0e0;
    }
    .single-policy:last-child {
        border-bottom: none;
    }
}

/* ── Newsletter ──────────────────────────────────────────────── */
.newsletter-section {
    background-color: #ff6445;
}

.newsletter-title h1,
.newsletter-title h2 {
    color: #ffffff;
    font-size: 31px;
    line-height: 42px;
    margin-bottom: 0;
}

@media (min-width: 768px) and (max-width: 991px) {
    .newsletter-title h1,
    .newsletter-title h2 {
        font-size: 25px;
        line-height: 30px;
    }
}

.subscription-form button {
    background: #6B7A8F;
    padding: 10px 30px;
    border-radius: 50px;
    text-transform: uppercase;
    position: absolute;
    top: 3px;
    right: 3px;
    border: none;
    color: #ffffff;
}

.subscription-form button:hover {
    background: #4a5568;
}

/* ── Social links (footer) ───────────────────────────────────── */
.social-media-section h2 {
    font-size: 31px;
    line-height: 42px;
    font-weight: 500;
    margin-bottom: 20px;
}

.social-links a {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    line-height: 40px;
    text-align: center;
    margin-right: 10px;
    color: #ffffff;
    font-size: 16px;
}

.social-links a.facebook { background: #4867aa; }
.social-links a.facebook:hover { background: #30436b; }
.social-links a.youtube { background: #f42b00; }
.social-links a.youtube:hover { background: #bb1202; }

/* ── Floating social icon bar ───────────────────────────────── */
.icon-bar {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 999;
}

.icon-bar a {
    display: block;
    padding: 16px;
    color: #ffffff;
    font-size: 20px;
    line-height: 1;
    transition: background 0.2s;
}

.icon-bar a:hover {
    background: #000000;
    color: #ffffff;
}

.icon-bar a.youtube {
    background: linear-gradient(135deg, #ff0000, #bb0000);
}

.icon-bar a.facebook {
    background: linear-gradient(135deg, #4267b2, #2d4373);
}

.icon-bar a.linkedin {
    background: linear-gradient(135deg, #43e97b, #25d366);
}

/* ── Tin Tức Slider ──────────────────────────────────────────── */
.news-slider-section {
    background: #ffffff;
}

.news-slider-section .section-title h2 {
    font-size: 28px;
    color: #242424;
    font-weight: 700;
    margin-bottom: 0;
    position: relative;
    padding-bottom: 12px;
}

.news-slider-section .section-title h2::after {
    content: "";
    display: block;
    width: 50px;
    height: 3px;
    background: #F7882F;
    margin-top: 8px;
}

.view-all-link {
    color: #F7882F;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.view-all-link:hover {
    color: #F7C331;
}

.single-news-card {
    background: #fff;
    border: 1px solid #eeeeee;
    border-radius: 4px;
    overflow: hidden;
    margin: 0 10px;
    transition: box-shadow 0.2s;
}

.single-news-card:hover {
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1);
}

.news-card-img img,
.news-card-img picture {
    width: 100%;
    display: block;
}

.news-card-img--placeholder {
    height: 180px;
    background: #f0ede8;
    display: flex;
    align-items: center;
    justify-content: center;
}

.news-card-img--placeholder a {
    font-size: 48px;
    color: #F7882F;
    text-decoration: none;
}

.news-card-body {
    padding: 20px;
}

.news-card-date {
    font-size: 12px;
    color: #999999;
    display: block;
    margin-bottom: 8px;
}

.news-card-body h3 {
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    margin-bottom: 10px;
}

.news-card-body h3 a {
    color: #242424;
    text-decoration: none;
}

.news-card-body h3 a:hover {
    color: #F7882F;
}

.news-card-body p {
    font-size: 14px;
    color: #666666;
    line-height: 22px;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-read-more {
    font-size: 13px;
    font-weight: 600;
    color: #F7882F;
    text-decoration: none;
}

.news-read-more:hover {
    color: #F7C331;
}

/* Slick dots for news slider */
.news-slider {
    overflow: hidden;
}

.news-slider .slick-dots {
    bottom: -30px;
}

.news-slider .slick-dots li button::before {
    font-size: 10px;
    color: #cccccc;
}

.news-slider .slick-dots li.slick-active button::before {
    color: #F7882F;
}

.news-slider .slick-prev,
.news-slider .slick-next {
    width: 36px;
    height: 36px;
    background: #F7882F;
    border-radius: 50%;
    z-index: 1;
}

.news-slider .slick-prev { left: -18px; }
.news-slider .slick-next { right: -18px; }

/* ── Blog Section Header (matches news section style) ────────── */
.blog-area .section-title h2 {
    font-size: 28px;
    color: #242424;
    font-weight: 700;
    margin-bottom: 0;
    position: relative;
    padding-bottom: 12px;
}

.blog-area .section-title h2::after {
    content: "";
    display: block;
    width: 50px;
    height: 3px;
    background: #F7882F;
    margin-top: 8px;
}

.news-slider .slick-prev::before,
.news-slider .slick-next::before {
    font-size: 16px;
    color: #ffffff;
    opacity: 1;
}

/* ── Section header badge (TIN TỨC / BÀI VIẾT) ───────────────────────────── */
.section-header-badge {
    display: inline-block;
    background: #F7882F;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 5px 16px;
    letter-spacing: 0.5px;
}

.view-all-link {
    font-size: 13px;
    color: #666;
    text-decoration: none;
}
.view-all-link:hover { color: #F7882F; }

/* ── News section card styles ─────────────────────────────────────────────── */
.news-section { padding-top: 10px; }

/* Featured left card — portrait image */
.news-card-large__img {
    width: 100%;
    height: 390px;
    object-fit: cover;
    display: block;
}

/* Right side-by-side small cards — image top */
.news-card-small { border: none; padding-bottom: 0; }
.news-card-small__img {
    width: 100%;
    height: 190px;
    object-fit: cover;
    display: block;
}

.news-card-body { padding: 12px 0; }
.news-card-date {
    font-size: 12px;
    color: #888;
    display: block;
    margin-bottom: 6px;
}
.news-card-large h3 {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 8px;
}
.news-card-large h3 a { color: #222; text-decoration: none; }
.news-card-large h3 a:hover { color: #F7882F; }

.news-card-small h4 {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 8px;
}
.news-card-small h4 a { color: #222; text-decoration: none; }
.news-card-small h4 a:hover { color: #F7882F; }

/* ── Chi Tiết link ────────────────────────────────────────────────────────── */
.chi-tiet-btn {
    font-size: 13px;
    color: #555;
    text-decoration: none;
}
.chi-tiet-btn:hover { color: #F7882F; }

/* ── Blog / News listing page ─────────────────────────────────────────────── */
.blog-page-container { padding-top: 50px; }
.blog-page-container--no-top { padding-top: 0; }
.single-contact-block--no-border { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }

/* ── gioi-thieu / blog single post — override green #80bb01 ─────────────── */
.blog-single-post-container .post-meta p a:hover {
    color: #ff6445;
}
.blog-single-post-container .single-blog-post-media .blog-categories ul li a:hover {
    background-color: #ff6445;
}
.blog-single-post-container .post-content blockquote {
    border-left-color: #ff6445;
}