/**
 * ============================================================================
 * MAIN STYLESHEET
 * ============================================================================
 *
 * Project: BTV Website
 * Version: 1.0.0
 *
 * TABLE OF CONTENTS
 * ----------------------------------------------------------------------------
 * 1.  CSS Custom Properties (Variables)
 * 2.  Base & Reset Styles
 * 3.  Typography
 * 4.  Utility Classes
 * 5.  Layout - Containers & Grid
 * 6.  Components - News Cards
 * 7.  Components - Time & Stats
 * 8.  Components - Section Titles
 * 9.  Components - Last News Section
 * 10. Components - Video Section
 * 11. Components - News Sections
 * 12. Components - Broadcasts
 * 13. Components - Reporters
 * 14. Components - Dark Background
 * 15. Components - Shows
 * 16. Components - Three Columns
 * 17. Components - Gallery
 * 18. Components - Navigation Buttons
 * 19. Components - Listing Page
 * 20. Components - View Page
 * 21. Components - Pagination
 * 22. Components - Tags & Sharing
 * 23. Components - Related News
 * 24. Components - Profile Section
 * 25. Components - Forms
 * 26. Components - Archive
 * 27. Components - Error Page
 * 28. Components - Static Pages
 * 29. Components - Live View
 * ============================================================================
 */


/* ==========================================================================
   1. CSS CUSTOM PROPERTIES (VARIABLES)
   ========================================================================== */

:root {
    /* Brand Colors */
    --color-primary: #195d7f;
    --color-primary-light: #0083B7;
    --color-secondary: #041932;
    --color-accent: #3f8ecc;
    --color-danger: #E90000;
    --color-alert: #C71A1A;

    /* Neutral Colors */
    --color-black: #000000;
    --color-dark: #111111;
    --color-gray-dark: #333333;
    --color-gray: #767676;
    --color-gray-light: #CCCCCC;
    --color-gray-lighter: #E8E8E8;
    --color-gray-lightest: #F5F5F5;
    --color-white: #FFFFFF;

    /* Background Colors */
    --bg-light-blue: #EDF7FB;
    --bg-light-cyan: #e7f1f5;
    --bg-light-yellow: #F7F6EC;

    /* Typography */
    --font-primary: "Inter", sans-serif;
    --font-serif: "Source Serif 4", serif;

    /* Spacing */
    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 15px;
    --spacing-lg: 20px;
    --spacing-xl: 30px;
    --spacing-xxl: 40px;

    /* Border Radius */
    --radius-sm: 3px;
    --radius-md: 4px;
    --radius-lg: 12px;
    --radius-lgb: 16px;
    --radius-xl: 20px;
    --radius-xxl: 32px;
    --radius-round: 100%;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.7s ease;

    /* Container */
    --container-max-width: 1360px;
}


/* ==========================================================================
   2. BASE & RESET STYLES
   ========================================================================== */

h1,
h2,
h3,
p {
    margin: 0;
}

h4 {
    margin: 0;
}

input,
textarea,
button {
    border-radius: 0;
    padding: 0;
    outline: none;
}

button,
button:focus {
    outline: none;
}

a {
    text-decoration: none;
    color: var(--color-primary-light);
}

img {
    text-decoration: none;
}

/* Section styling handled by block-level default behavior */


/* Webkit Media Controls - Hide Native Player Controls
   -------------------------------------------------------------------------- */

*::-webkit-media-controls-panel {
    display: none !important;
    -webkit-appearance: none;
    appearance: none;
}

*::--webkit-media-controls-play-button {
    display: none !important;
    -webkit-appearance: none;
    appearance: none;
}

*::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none;
    appearance: none;
}


/* Ul li */
ul.list {
    padding-left: 1.2rem;
}

ul.list li::marker {
    color: var(--color-primary-light);
    font-size: 1.2em;
}


/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */

body {
    font-family: var(--font-primary);
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}


/* ==========================================================================
   4. UTILITY CLASSES
   ========================================================================== */

/* Display Utilities
   -------------------------------------------------------------------------- */

.hidden {
    display: none;
}

.invisible {
    display: none;
}

.block {
    display: block !important;
}

.d-flex {
    display: -ms-flexbox !important;
    display: flex !important;
}

.mobile {
    display: none;
}


/* Float Utilities
   -------------------------------------------------------------------------- */

.clear {
    clear: both;
}

.left {
    float: left;
}

.right {
    float: right;
}


/* Clearfix
   -------------------------------------------------------------------------- */

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}


/* Position Utilities
   -------------------------------------------------------------------------- */

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}


/* Text Utilities
   -------------------------------------------------------------------------- */

.center {
    text-align: center;
}

.text-left {
    text-align: left !important;
}

.upper {
    text-transform: uppercase;
}

.bold {
    font-weight: bold;
}

.decor_none {
    text-decoration: none;
}


/* Color Utilities
   -------------------------------------------------------------------------- */

.blue {
    color: var(--color-accent) !important;
}

.black {
    color: var(--color-dark);
}

.white {
    color: var(--color-white);
}


/* Sizing Utilities
   -------------------------------------------------------------------------- */

.w100 {
    width: 100%;
}

.w100_important {
    width: 100% !important;
}


/* Border Utilities
   -------------------------------------------------------------------------- */

.border_none {
    border: 0 !important;
}


/* Box Model Utilities
   -------------------------------------------------------------------------- */

.box_sizing {
    box-sizing: border-box;
}

.overflow_hidden {
    overflow: hidden;
}


/* Interaction Utilities
   -------------------------------------------------------------------------- */

.pointer {
    cursor: pointer;
}


/* Transform Utilities
   -------------------------------------------------------------------------- */

.rotate180 {
    transform: rotate(180deg);
}


/* Spacing Utilities
   -------------------------------------------------------------------------- */

.mt30 {
    margin-top: 15px;
}


/* Legacy Centering Utilities (Maintained for Compatibility)
   -------------------------------------------------------------------------- */

.center_them {
    display: inline-block;
}

.vertical_centering_css3 {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.horizontal_centering_css3 {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}


/* Button Base
   -------------------------------------------------------------------------- */

.btn:hover {
    color: var(--color-white);
}


/* ==========================================================================
   5. LAYOUT - CONTAINERS & GRID
   ========================================================================== */

/* Main element uses block-level default behavior */


/* Top Container Layout
   -------------------------------------------------------------------------- */

.top-container {
    display: flex;
    gap: var(--spacing-lg);
    max-width: 100%;
    margin: 0 auto;
    margin-top: var(--spacing-xl);
}

.left-container {
    display: flex;
    gap: var(--spacing-lg);
    width: calc(100% - 370px);
}


/* Column System
   -------------------------------------------------------------------------- */

.column {
    flex: 1;
}

.column-1 {
    flex: 1;
    width: 300px;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.column-2 {
    flex: 2;
}

.right-column {
    flex: 1;
    width: 300px;
}


/* Smaller Container
   -------------------------------------------------------------------------- */

.smaller-container {
    width: 980px;
    margin: 0 auto;
}


/* ==========================================================================
   6. COMPONENTS - NEWS CARDS
   ========================================================================== */

/* Small News Card
   -------------------------------------------------------------------------- */

.small-news {
    padding-bottom: var(--spacing-md);
    padding-top: var(--spacing-xs);
    box-sizing: border-box;
    border-bottom: 1px solid var(--color-gray-lighter);
}

.small-news:last-child {
    border-bottom: none;
}

.small-news:first-child {
    padding-top: 0;
}

.bottom-part .small-news:first-child {
    padding-top: var(--spacing-xs);
}

.small-news .image {
    display: block;
    margin-bottom: var(--spacing-md);
    position: relative;
}

.small-news .image img {
    display: block;
    width: 100%;
    border-top-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
}

.small-news .image .time-wrap {
    bottom: var(--spacing-sm);
    left: var(--spacing-sm);
    gap: var(--spacing-xs);
}

.small-news .image .time-wrap .img {
    width: 45px;
    height: 40px;
}

.right-column .small-news {
    margin-bottom: 0;
    padding-bottom: var(--spacing-sm);
    box-sizing: border-box;
    border-bottom: 1px solid var(--color-gray-lighter);
}


/* Big News Card
   -------------------------------------------------------------------------- */

.big-news {
    float: left;
    width: 100%;
}

.big-news .image {
    display: block;
    position: relative;
}

.big-news .image img {
    display: block;
    width: 100%;
    border-top-left-radius: var(--radius-xxl);
    border-bottom-right-radius: var(--radius-xxl);
}

.big-news .small-title {
    font-size: 32px;
    line-height: 41px;
}


/* Small Title
   -------------------------------------------------------------------------- */

.small-title {
    display: block;
    color: var(--color-black);
    font-weight: 500;
    font-size: 18px;
    margin-bottom: var(--spacing-md);
    line-height: 24px;
    font-family: var(--font-serif);
}

.small-title .play-icon {
   font-size: 12px;
   line-height: 18px;
}

.column-1 .small-title {
    font-size: 22px;
    line-height: 29px;
}

.small-title.is-bigger {
    font-size: 22px;
}


/* ==========================================================================
   7. COMPONENTS - TIME & STATS
   ========================================================================== */

/* Time Wrap
   -------------------------------------------------------------------------- */

.time-wrap {
    position: absolute;
    bottom: var(--spacing-sm);
    left: var(--spacing-sm);
    display: flex;
    gap: var(--spacing-sm);
    color: var(--color-white);
    align-items: center;
}

.time-wrap .img {
    width: 80px;
    height: 80px;
}

.time-wrap .img img {
    display: block;
    width: 100%;
}


/* Live Indicator
   -------------------------------------------------------------------------- */

.live-wrap {
    margin: var(--spacing-sm) 0;
    color: var(--color-danger);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 500;
}


/* Stats
   -------------------------------------------------------------------------- */

.stats {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
}

.stats span {
    color: var(--color-black);
    font-size: 12px;
    padding-right: 6px;
    box-sizing: border-box;
    position: relative;
}

.stats span::after {
    position: absolute;
    content: "";
    right: 0;
    top: 0;
    width: 1px;
    height: 100%;
    background: var(--color-gray-light);
}

.stats span:last-child::after,
.stats span.cat::after {
    content: none;
}

.stats span.cat {
    background: var(--bg-light-cyan);
    padding: 3px;
    box-sizing: border-box;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
}

.stats span.view {
    background: var(--bg-light-cyan);
    padding: 3px;
    box-sizing: border-box;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    position: relative;
    padding-left: 25px;
}

.stats span.view::before {
    position: absolute;
    content: "";
    left: 5px;
    top: 3px;
    width: 15px;
    height: 13px;
    background: url(../img/view.png) no-repeat center;
    background-size: 100%;
}


/* ==========================================================================
   8. COMPONENTS - SECTION TITLES
   ========================================================================== */

.section-title {
    color: var(--color-black);
    font-size: 36px;
    font-weight: bold;
    margin-bottom: var(--spacing-lg);
    font-family: var(--font-serif);
}

.section-title.is-icon span {
    position: relative;
    z-index: 99;
}

.section-title.is-icon span::before {
    position: absolute;
    content: "";
    left: -25px;
    top: -40px;
    width: 120px;
    height: 120px;
    background: url("../img/union.svg") no-repeat center;
    background-size: 100%;
    z-index: -1;
}


/* ==========================================================================
   9. COMPONENTS - LAST NEWS SECTION
   ========================================================================== */
.is-info span.view:after {
    content: none;
}

.last-news-wrap {
    background: var(--bg-light-blue);
    padding: var(--spacing-xxl) 0;
    box-sizing: border-box;
}

.all-last-news {
    display: flex;
    gap: var(--spacing-lg);
}

.last-news-box {
    width: 25%;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.last-news-box .small-title {
    font-size: 22px;
    line-height: 28px;
}


/* Top Hour
   -------------------------------------------------------------------------- */

.top-hour {
    font-weight: 500;
    font-size: 16px;
}

.top-hour span {
    position: relative;
    font-size: 16px;
    font-weight: 500;
}

.top-hour span::after {
    position: absolute;
    content: "";
    background: var(--bg-light-cyan);
    width: 100px;
    right: 0;
    top: 10px;
    height: 1px;
    left: 105%;
}


/* Sub Text
   -------------------------------------------------------------------------- */

.sub-txt {
    margin-top: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.sub-txt p {
    color: var(--color-black);
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
}

.is-info .small-title {
    font-size: 22px;
    line-height: 28px;
    font-weight: 500;
}

.is-info .small-title .small-icon {
    font-size: 12px;
    line-height: 18px;
 }

.home-most-read .is-info .small-title {
    font-size: 18px;
    line-height: 24px;
}

/* ==========================================================================
   10. COMPONENTS - VIDEO SECTION
   ========================================================================== */

.video-container {
    margin-top: var(--spacing-xl);
    overflow: hidden;
}

.video-wrap {
    display: flex;
    gap: var(--spacing-lg);
}

.video-box {
    width: 20%;
    position: relative;
}

.video-box .video-image {
    display: block;
    width: 100%;
    height: 500px;
    border-bottom-right-radius: var(--radius-lg);
    border-top-left-radius: var(--radius-lg);
}

.video-box .video-image::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 55%;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.55) 35%,
    rgba(0, 0, 0, 0.20) 70%,
    rgba(0, 0, 0, 0) 100%
  );
}

.video-image.is-add img {
    object-fit: contain !important;
}

.video-image.is-add {
    height: auto;
    display: flex;
}

.video-box .video-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-top-left-radius: var(--radius-xxl);
    border-bottom-right-radius: var(--radius-xxl);
}

.video-info {
    position: absolute;
    bottom: var(--spacing-sm);
    left: var(--spacing-sm);
    right: var(--spacing-sm);
}

.video-info .video-title {
    display: block;
    color: var(--color-white);
    font-size: 22px;
    margin-bottom: var(--spacing-sm);
    font-family: var(--font-serif);
    font-weight: 500;
    line-height: 27px;
}

.video-time {
    display: block;
    font-size: 13px;
    color: var(--color-white);
    padding-left: 35px;
    position: relative;
}

.video-time::before {
    position: absolute;
    content: "";
    left: 0;
    top: -6px;
    width: 30px;
    height: 30px;
    background: url("../img/drop_1.svg") no-repeat center;
    background-size: 100%;
}


/* ==========================================================================
   11. COMPONENTS - NEWS SECTIONS
   ========================================================================== */

.section-dis {
    margin-top: var(--spacing-xxl);
}

.all-news {
    display: flex;
    flex-direction: column;
}

.top-part {
    display: flex;
    gap: var(--spacing-lg);
}

.left-top-part {
    width: 50%;
}

.left-top-part .big-news {
    /* Inherits from .big-news */
}

.left-top-part .big-news .small-title {
    margin-top: var(--spacing-lg);
    font-size: 32px;
    line-height: 41px;
}

.home-most-read .left-top-part .big-news .small-title {
    font-size: 28px;
    line-height: 36px;
}

.right-top-part {
    width: 50%;
    display: flex;
    gap: var(--spacing-md);
}

.right-small-colum {
    width: 50%;
}


/* Number Styling
   -------------------------------------------------------------------------- */

.is-number-wrap {
    display: flex;
    gap: var(--spacing-sm);
}

.is-number {
    color: var(--color-primary-light);
    font-size: 65px;
    font-weight: 700;
    font-family: var(--font-serif);
    align-items: flex-start;
}

.small-news .is-number {
   margin-top: -10px;
}

.big-news .is-number {
   margin-top: 10px;
}

/* Bottom Part
   -------------------------------------------------------------------------- */

.bottom-part {
    display: flex;
    gap: var(--spacing-sm);
}

.bottom-part .small-news {
    width: 25%;
}


/* Banner
   -------------------------------------------------------------------------- */

.banner {
    /* Block-level default behavior */
}

.banner img {
    display: block;
    width: 100%;
}

.horizontal-banner {
    display: flex;
    justify-content: center;
    margin: var(--spacing-xl) 0;
}

.horizontal-banner a {
    width: 980px;
}

.horizontal-banner img {
    display: block;
    width: 100%;
}


/* ==========================================================================
   12. COMPONENTS - BROADCASTS
   ========================================================================== */

.broadcasts-wrap {
    background: var(--bg-light-blue);
    padding: var(--spacing-xl) 0;
    box-sizing: border-box;
}

.all-broadcasts {
    display: flex;
    gap: var(--spacing-lg);
}

.broadcast-box {
    width: 25%;
}

.top-b-title {
    margin-bottom: var(--spacing-sm);
}

.top-b-title img {
    display: block;
    width: 100%;
    border-top-left-radius: var(--radius-xl);
    border-bottom-right-radius: var(--radius-xl);
    height: 60px;
    object-fit: cover;
}

.broadcast-box .small-news {
    border-top: 1px solid var(--bg-light-cyan);
}

.broadcast-box .small-news .small-title {
    font-size: 22px;
    line-height: 26px;
}

.broadcast-box .small-title.is-smaller {
    font-size: 18px;
    line-height: 22px;
}


/* ==========================================================================
   13. COMPONENTS - REPORTERS
   ========================================================================== */

.reporter-wrap {
    display: flex;
    gap: var(--spacing-lg);
}

.reporter-box {
    width: 25%;
}

.reporter-box .small-title {
    font-size: 24px;
    line-height: 28px;
}

.author-wrap {
    font-size: 16px;
    color: var(--color-black);
    position: relative;
    padding-left: 75px;
    box-sizing: border-box;
    margin: var(--spacing-xl) 0;
}

.author-wrap::before {
    position: absolute;
    content: "";
    left: 0;
    top: -22px;
    width: 65px;
    height: 65px;
    background: var(--bg-light-blue) url("../img/profile-white.svg") no-repeat center;
    background-size: 35%;
    border-radius: var(--radius-round);
}


/* ==========================================================================
   14. COMPONENTS - DARK BACKGROUND
   ========================================================================== */

.dark-background {
    background: var(--color-secondary);
    border-top-left-radius: var(--radius-xl);
    border-bottom-right-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    box-sizing: border-box;
    margin-top: var(--spacing-xl);
}

.dark-background .section-title {
    color: var(--color-white);
}

.dark-background .small-title {
    color: var(--color-white);
    font-size: 22px;
    line-height: 29px;
}

.dark-background .move-moddle {
    width: 6px;
    height: 6px;
    background: var(--color-white);
    border-radius: var(--radius-round);
}

.dark-background .move-moddle-active {
    width: 10px;
    height: 10px;
    background-color: var(--color-white);
    border-radius: 50%;
    position: relative;
}

.dark-background .move-moddle-active::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 4px;
    background-color: var(--color-black);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}


/* ==========================================================================
   15. COMPONENTS - SHOWS
   ========================================================================== */

.shows-wrap {
    /* Block-level default behavior */
}

.all-shows {
    display: flex;
    gap: var(--spacing-lg);
}

.show-box {
    width: 25%;
}

.bottom-shows-info {
    padding-top: var(--spacing-lg);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #395271;
    margin-top: var(--spacing-xl);
}

.info-shows {
    color: var(--color-white);
    font-size: 24px;
    font-family: var(--font-serif);
    padding-left: 40px;
    box-sizing: border-box;
    position: relative;
}

.info-shows::before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 25px;
    height: 25px;
    background: url("../img/play-live.svg") no-repeat center;
    background-size: 100%;
}

.show-now {
    padding: var(--spacing-md);
    background: var(--color-white);
    border-radius: var(--radius-md);
    color: var(--color-black);
    font-size: 16px;
    padding-left: 35px;
    box-sizing: border-box;
    position: relative;
}

.show-now::before {
    position: absolute;
    content: "";
    left: 11px;
    top: 15px;
    width: 18px;
    height: 18px;
    background: url(../img/arrow-diagonal-grey.svg) no-repeat center;
    background-size: 100%;
}


/* ==========================================================================
   16. COMPONENTS - THREE COLUMNS
   ========================================================================== */

.three-colums-wrap {
    display: flex;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
}

.three-colums-wrap .small-news {
    border-bottom: none;
}

.news-column {
    width: 33%;
}

.top-logo {
    margin-bottom: var(--spacing-sm);
}

.top-logo img {
    height: 46px;
}


/* Info More News
   -------------------------------------------------------------------------- */

.info-more-news {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
}

.info {
    display: flex;
    gap: var(--spacing-md);
    padding-top: 18px;
    box-sizing: border-box;
    border-top: 1px solid #D9D9D9;
    align-items: flex-start;
}

.info .image {
    width: 110px;
    flex-shrink: 0;
}

.info .right-info-part {
    width: calc(100% - 110px);
}

.info .image img {
    display: block;
    width: 100%;
    border-top-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
}


/* ==========================================================================
   17. COMPONENTS - GALLERY
   ========================================================================== */

.home-galleries-mobile {
    display: none;
} 
.galeery-image {
    margin-top: var(--spacing-xxl);
    position: relative;
}

.galeery-image img {
    display: block;
    width: 100%;
    max-height: 600px;
    object-fit: cover;
}

.bottom-blue-part {
    position: absolute;
    width: 1360px;
    bottom: 0;
    background: var(--color-secondary);
    border-top-left-radius: var(--radius-lgb);
    display: flex;
    padding: var(--spacing-md);
    box-sizing: border-box;
    align-items: flex-end;
}

.left-bottom-blue {
    width: 50%;
}

.right-bottom-blue {
    width: 50%;
    display: flex;
    gap: 10px;
}

.right-bottom-blue img {
    width: calc(33% - 5px);
    height: 205px;
    object-fit: cover;
}


/* Gallery Title
   -------------------------------------------------------------------------- */

.gall-title {
    color: var(--color-white);
    font-size: 32px;
    font-family: var(--font-serif);
    font-weight: 700;
}

.gall-title span {
    position: relative;
    display: inline-block;
}

.gall-title span::after {
    position: absolute;
    content: "";
    width: 60px;
    height: 60px;
    right: -70px;
    top: -45px;
    background: url("../img/azr.svg") no-repeat center;
    background-size: 100%;
}

.gall-txt {
    display: block;
    color: var(--color-white);
    font-size: 24px;
    line-height: 29px;
    font-family: var(--font-serif);
}

.gall-txt a {
    color: var(--color-white);
}

.galeery-image a {
    color: var(--color-white);
}


/* ==========================================================================
   18. COMPONENTS - NAVIGATION BUTTONS
   ========================================================================== */

.move-btns {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
    justify-content: center;
}

.move-left {
    width: 40px;
    height: 40px;
    transform: rotate(180deg);
    cursor: pointer;
}

.move-right {
    width: 40px;
    height: 40px;
    cursor: pointer;
}

.move-moddle {
    width: 6px;
    height: 6px;
    background: var(--color-black);
    border-radius: var(--radius-round);
}

.move-moddle-active {
    width: 10px;
    height: 10px;
    background-color: var(--color-black);
    border-radius: 50%;
    position: relative;
}

.move-moddle-active::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 4px;
    background-color: var(--color-white);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}


/* ==========================================================================
   19. COMPONENTS - LISTING PAGE
   ========================================================================== */

/* Path & Title
   -------------------------------------------------------------------------- */

.path-title-wrap {
    margin: var(--spacing-xl) 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.path .path-link {
    color: var(--color-black);
    font-size: 13px;
    padding-right: 20px;
    box-sizing: border-box;
    position: relative;
}

.path .path-link::after {
    position: absolute;
    content: "";
    right: 5px;
    top: 0;
    width: 10px;
    height: 15px;
    background: url("../img/arrow-right.svg") no-repeat center;
    background-size: 100%;
}

.path .path-link:last-child::after {
    content: none;
}

.path .path-link.home {
    position: relative;
    padding-left: 25px;
    box-sizing: border-box;
    color: var(--color-gray);
}

.path .path-link.home::before {
    position: absolute;
    content: "";
    left: 0;
    top: -3px;
    width: 20px;
    height: 20px;
    background: url("../img/home.svg") no-repeat center;
    background-size: 75%;
}

.listing-title {
    margin: 20px 0px;
    font-size: 48px;
    color: var(--color-black);
    font-family: var(--font-serif);
    text-align: center;
}

.listing-title img {
    width: 120px;
    margin-right: var(--spacing-lg);
}

.listing-title.article-title {
    font-size: 38px;
}

.share-wrapper a:first-of-type img {
    width: 46px;
}



/* Listing Layout
   -------------------------------------------------------------------------- */

.is-three-colum {
    display: flex;
    gap: var(--spacing-lg);
}

.is-three-colum .small-title,
.is-four-colum .small-title {
    font-size: 22px;
    line-height: 28px;
}

.is-three-colum .small-news,
.is-four-colum .small-news {
    border-bottom: none;
}

.left-part-listing-news {
    width: calc(100% - 300px);
    display: flex;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
}

.left-part-listing-news .small-news {
    width: calc(33% - 10px);
}

.is-three-colum .right-banner {
    width: 300px;
}

.is-four-colum {
    display: flex;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
}

.is-four-colum .small-news {
    width: calc(25% - 15px);
}


/* Listing Links
   -------------------------------------------------------------------------- */

.listing-links {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
    white-space: nowrap;
}

.listing-links .top-listing-link {
    color: var(--color-black);
    font-weight: 500;
    font-size: 16px;
    position: relative;
    white-space: nowrap;
}

.listing-links .top-listing-link::before {
    position: absolute;
    content: "";
    background: var(--color-primary);
    height: 5px;
    width: 0;
    transition: var(--transition-slow);
    bottom: -11px;
}

.listing-links .top-listing-link:hover::before {
    width: 100%;
}

.listing-links .top-listing-link.active::before {
    width: 100%;
}

.listing-links .top-listing-link.active {
    color: var(--color-primary);
}

.top-listing-link {
    white-space: nowrap;
}


/* Scroll Container
   -------------------------------------------------------------------------- */

.is-scroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    display: block;
}

.is-inner {
    display: flex;
    gap: var(--spacing-lg);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--color-gray-light);
}


/* ==========================================================================
   20. COMPONENTS - VIEW PAGE
   ========================================================================== */

/* Image View
   -------------------------------------------------------------------------- */

.image-view {
    position: relative;
    width: 100%;
}

.image-view .time-wrap {
    position: absolute;
    bottom: 50px;
    left: 55px;
    display: flex;
    gap: var(--spacing-sm);
    color: var(--color-white);
    align-items: center;

}

.image-view .time-wrap .img {
    width: 136px;
    height: 136px;
}

.image-view img {
    display: block;
    width: 100%;
}

.ticket1 {
    width: 68px;
    height: 68px;
    border: 1px solid #CCCCCC;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* Bottom Image Info
   -------------------------------------------------------------------------- */

.bottom-image-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    padding: 13.5px;
    box-sizing: border-box;
}

.bottom-image-info a {
    color: white;
}

.bottom-image-info a:hover {
    color: var(--bg-light-blue);
}

.black-line-info {
    display: flex;
    justify-content: space-between;
}

.black-line-info.is-right {
    justify-content: flex-end;
}

.black-line-info span,
.black-line-info .right {
    color: var(--color-white);
    font-size: 13px;
}

.black-line-info span {
    padding-right: 20px;
    box-sizing: border-box;
    position: relative;
}

.black-line-info span::after {
    position: absolute;
    content: "";
    right: 0;
    top: 0;
    width: 1px;
    height: 100%;
    background: var(--color-white);
}

.black-line-info span:nth-of-type(2) {
    padding-left: 30px;
    font-size: 16px;
    box-sizing: border-box;
    position: relative;
}

.black-line-info span:nth-of-type(2)::before {
    position: absolute;
    content: "";
    left: 8px;
    top: 1px;
    width: 15px;
    height: 15px;
    background: url("../img/users-fill.svg") no-repeat center;
    background-size: 100%;
}

.black-line-info span:last-child::after {
    content: none;
}


/* Text Content
   -------------------------------------------------------------------------- */

.txt {
    margin: var(--spacing-lg) 0;
    color: var(--color-black);
    font-size: 20px;
    line-height: 34px;
}

.txt p,
.left-view-page p {
    color: var(--color-black);
    font-size: 20px;
    line-height: 34px;
    margin: 13px 0;
}

.view-page.is-two-column-view p {
    color: var(--color-black);
    font-size: 20px;
    line-height: 34px;
    margin: 13px 0;
}

.txt.is-bolder,
strong {
    --font-scale: 1;
    font-weight: 700;
    font-style: italic;
    line-height: 33px;
}


/* View Page Layout
   -------------------------------------------------------------------------- */

.view-page {
    display: flex;
    gap: var(--spacing-lg);
}

.left-view-page {
    width: calc(100% - 345px);
}

.right-view-page {
    width: 325px;
    flex-shrink: 0;
}

.right-view-page .stats {
    gap: var(--spacing-xs);
}

.right-view-page .stats span {
    font-size: 13px;
}


/* Quote
   -------------------------------------------------------------------------- */

.quote,
blackquote {
    float: right;
    width: calc(100% - 15px);
    padding: var(--spacing-xl);
    box-sizing: border-box;
    border: 1px solid var(--color-primary-light);
    font-size: 32px;
    font-weight: 600;
    font-style: italic;
    font-family: var(--font-serif);
    position: relative;
    line-height: 42px;
    border-radius: 5px;
    margin: 20px 0px;
}

.quote::before,
blackquote:before {
    position: absolute;
    content: "";
    left: -21px;
    top: 15%;
    width: 40px;
    height: 40px;
    background: url(../img/quote.png) no-repeat center;
    background-size: 100%;
}


/* Top View Info
   -------------------------------------------------------------------------- */

.top-view-info {
    display: flex;
    margin-top: var(--spacing-lg);
    align-items: center;
    /* justify-content: space-between; */
    width: 100%;
    justify-content: flex-end;
    padding-top: 12px;
}

.top-view-info .left-info {
    display: flex;
    gap: var(--spacing-lg);
}

.top-view-info .left-info .share img {
    display: block;
    width: 68px;
    height: 68px;
}

.top-view-info .left-info img {
    width: 35px;
}

.top-view-info .right-info {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
}

.top-view-info .right-info .listen {
    color: var(--color-primary-light);
    font-size: 14px;
    border-bottom: 1px solid var(--color-primary-light);
}

.is-link {
    color: var(--color-primary-light);
    border-bottom: 1px solid var(--color-primary-light);
}



/* ==========================================================================
   21. COMPONENTS - PAGINATION
   ========================================================================== */

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 20px;
    font-family: sans-serif;
}

.page-number,
.page-arrow {
    text-decoration: none;
    color: var(--color-gray-dark);
    font-size: 14px;
    border-radius: 50%;
    transition: var(--transition-fast);
}

.page-number {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-number.active {
    background: #071833;
    color: var(--color-white);
    font-weight: bold;
    border-radius: 50%;
}

.page-arrow {
    padding: 6px 10px;
    font-size: 18px;
    line-height: 1;
}

.page-number:hover:not(.active),
.page-arrow:hover {
    background: #e6e6e6;
    border-radius: 50%;
}

.page-dots {
    color: #666;
    padding: 0 4px;
}


/* ==========================================================================
   22. COMPONENTS - TAGS & SHARING
   ========================================================================== */

.share-wrap {
    margin: var(--spacing-lg) 0;
    display: flex;
    gap: var(--spacing-sm);
}

.share-wrap img {
    width: 40px;
    height: 40px;
}

.tags {
    margin-bottom: var(--spacing-lg);
    align-items: center;
}

.tags .tag {
    background: var(--color-gray-lightest);
    margin-bottom: var(--spacing-sm);

    padding: 12px 15px;
    box-sizing: border-box;
    color: var(--color-black);
    font-size: 13px;
    display: inline-block;
}

.follow-us-wrap {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
    margin-bottom: 16px;
}


/* ==========================================================================
   23. COMPONENTS - RELATED NEWS
   ========================================================================== */

.related-title {
    color: var(--color-black);
    font-weight: 700;
    font-size: 24px;
    margin-bottom: var(--spacing-lg);
    font-family: var(--font-serif);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.related-title span {
    flex: 1;
    display: flex;
    height: 1px;
    background: var(--color-primary);
}

.related-news {
    display: flex;
    gap: var(--spacing-lg);
}

.related-news .small-news {
    width: calc(33% - 20px);
}

.related-news-wrap {
    margin: var(--spacing-lg) 0;
    padding: var(--spacing-lg) 0;
    box-sizing: border-box;
    /* border-top: 1px solid var(--color-primary); */
    border-bottom: 1px solid var(--color-primary);
}

.related-news-info {
    display: flex;
    gap: var(--spacing-lg);
}

.right-rel-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.right-rel-info .title {
    font-size: 22px;
    color: var(--color-black);
    font-weight: 500;
    font-family: var(--font-serif);
    line-height: 29px;
}

.related-news-info .img img {
    border-top-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
}


/* Bottom News
   -------------------------------------------------------------------------- */

.is-bottom-news {
    border: none;
    background: var(--bg-light-blue);
    padding: var(--spacing-lg);
    box-sizing: border-box;
    border-top-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
}

.is-bottom-news .title,
.more-news .title {
    margin-bottom: var(--spacing-lg);
    font-size: 40px;
    font-weight: 700;
    color: var(--color-black);
    font-family: var(--font-serif);
}


/* Right Blue News
   -------------------------------------------------------------------------- */

.right-blue-news {
    background: var(--bg-light-blue);
    border-top-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
    padding: 12px;
    box-sizing: border-box;
    margin-top: var(--spacing-xl);
}

.right-blue-news .small-title {
    font-size: 16px;
}

.right-blue-news .small-title.is-bigger {
    font-size: 22px;
    line-height: 28px;
}

.right-blue-news .title {
    color: var(--color-black);
    font-size: 32px;
    margin-bottom: var(--spacing-sm);
    font-family: var(--font-serif);
}


/* Live News
   -------------------------------------------------------------------------- */

.live-news {
    background: var(--bg-light-yellow);
    border-top-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-sizing: border-box;
    margin-top: var(--spacing-xl);
}

.live-news .small-title {
    font-size: 16px;
}


/* ==========================================================================
   24. COMPONENTS - PROFILE SECTION
   ========================================================================== */

/* Ticket
   -------------------------------------------------------------------------- */

.is-ticket {
    margin-top: var(--spacing-lg);
    cursor: pointer;
    background: url("../img/art-empty.svg") no-repeat center;
    width: 24px;
    height: 24px;
    background-size: 100%;
}

.is-ticket:hover {
    margin-top: var(--spacing-lg);
    cursor: pointer;
    background: url("../img/art-blue.svg") no-repeat center;
    width: 24px;
    height: 24px;
    background-size: 100%;
}

.is-ticket.is-full {
    margin-top: var(--spacing-lg);
    cursor: pointer;
    background: url("../img/art-full.svg") no-repeat center;
    width: 24px;
    height: 24px;
    background-size: 100%;
}


/* Title Variations
   -------------------------------------------------------------------------- */

.is-title {
    font-weight: 600;
    margin: var(--spacing-xl) 0;
    font-size: 32px;
    font-family: var(--font-serif);
}

.bottom-txt {
    text-align: center;
    font-size: 20px;
    margin: 24px 0px;
}

.bottom-txt.article-subtitle {
    font-size: 18px;
}





/* Search News
   -------------------------------------------------------------------------- */

.all-search-news {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
}

.all-search-news .small-news {
    display: flex;
    gap: var(--spacing-lg);
    border-bottom: none;
}

.all-search-news .small-news .small-title {
    margin-bottom: 0;
}

.all-search-news .small-news .is-ticket {
    margin-top: 0;
}

.all-search-news .small-news .image {
    width: 330px;
    flex-shrink: 0;
    margin-bottom: 0;
}

.all-search-news .small-news .image img {
    display: block;
    width: 100%;
    max-height: 330px;
    object-fit: cover;
}

.right-part-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.right-news .small-news .image img {
    border-top-left-radius: var(--radius-xxl);
    border-bottom-right-radius: var(--radius-xxl);
}

.right-part-info .small-title {
    font-size: 22px;
    line-height: 28px;
}


/* Person Info
   -------------------------------------------------------------------------- */

.person-info {
    display: flex;
    gap: var(--spacing-lg);
    padding-top: 20px;
}

.person-info .column-txt {
    column-count: 2;
    column-gap: 30px;
    width: 100%;
}


.person-info .column-txt p strong {
    font-size: inherit;
}

.person-info .column-txt p:first-child {
    margin-top: 0px;
}

.person-info.is-teem {
    background: var(--bg-light-blue);
    padding: var(--spacing-lg);
    box-sizing: border-box;
    border-top-left-radius: var(--radius-xxl);
    border-bottom-right-radius: var(--radius-xxl);
}

.person-info.is-teem .left-image-wrap {
    width: 160px;
    height: 160px;
}

.person-info.is-teem .left-image-wrap img {
    border-top-left-radius: var(--radius-round);
    border-top-right-radius: var(--radius-round);
    border-bottom-right-radius: var(--radius-round);
    border-bottom-left-radius: 0;
    width: 160px;
    height: 160px;
}

.person-info.is-teem .right-info-wrap {
    width: calc(100% - 170px);
}

.title.is-inner-title {
    margin-top: var(--spacing-xxl);
    font-size: 48px;
    font-weight: 700;
    font-family: var(--font-serif);
}


/* Row Info
   -------------------------------------------------------------------------- */

.row-info {
    display: flex;
    gap: var(--spacing-sm);
    margin: 6px 0;
    align-items: flex-end;
}

.row-info .name {
    font-size: 18px;
    color: var(--color-black);
    text-decoration: underline;
    font-family: var(--font-serif);
    font-weight: 500;
}

.row-info .job {
    font-size: 13px;
    font-weight: 400;
    color: var(--color-black);
}


/* Image Wrapper
   -------------------------------------------------------------------------- */

.left-image-wrap {
    width: 440px;
}

.left-image-wrap img {
    display: block;
    width: 100%;
    border-top-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
    height: 585px;
    object-fit: cover;
}

.right-info-wrap {
    width: calc(100% - 440px);
}

.right-info-wrap .title {
    font-size: 48px;
    font-family: var(--font-serif);
    font-weight: 700;
}

.right-info-wrap .soc-wrap {
    margin-bottom: var(--spacing-lg);
}


/* Two Column Text
   -------------------------------------------------------------------------- */

.two-column-txt {
    display: flex;
    gap: var(--spacing-lg);
}

.column-txt {
    /* Block-level default behavior */
    width: 50%;
}

.column-1 .small-news {
    border-bottom: none;
}

.column-txt p {
    font-size: 16px;
    line-height: 24px;
    color: var(--color-black);
    margin: 15px 0;
}


/* Team Image
   -------------------------------------------------------------------------- */

.big-teem-image {
    /* Block-level default behavior */
}

.big-teem-image img {
    display: block;
    width: 100%;
    border-top-left-radius: 36px;
    border-bottom-right-radius: 36px;
}


/* Team View Info
   -------------------------------------------------------------------------- */

.teem-view-info {
    margin-top: var(--spacing-lg);
}

.teem-view-info p {
    font-size: 20px;
    line-height: 34px;
    color: var(--color-black);
}


/* All Faces
   -------------------------------------------------------------------------- */

.all-faces {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
}

.face-box {
    width: calc(50% - 10px);
    display: flex;
    flex-direction: column;
}

.face-box .face-img img {
    border-top-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
    display: block;
    width: 100%;
}

.face-box .face-name {
    font-size: 24px;
    color: var(--color-black);
    font-family: var(--font-serif);
    margin-top: var(--spacing-sm);
}


/* Profile Section
   -------------------------------------------------------------------------- */

.profile-section {
    width: 960px;
    margin: 0 auto;
    border-top-left-radius: var(--radius-xxl);
    border-bottom-right-radius: var(--radius-xxl);
    padding: 32px 64px;
    box-sizing: border-box;
    background: var(--bg-light-blue);
}

.profile-section .small-title,
.profile-section-articles .small-title {
    font-size: 24px;
    font-weight: 500;
    padding-left: 30px;
    box-sizing: border-box;
    position: relative;
}

.profile-section .small-news .small-title,
.profile-section-articles .small-news .small-title {
    padding-left: 0;
}

.profile-section .small-title::before,
.profile-section-articles .small-title::before {
    position: absolute;
    content: "";
    left: 0;
    top: 3px;
    width: 25px;
    height: 18px;
    background: url(../img/back-arrow.svg) no-repeat center;
}

.profile-section .small-news .small-title::before,
.profile-section-articles .small-news .small-title::before {
    content: none;
}


/* Profile Links
   -------------------------------------------------------------------------- */

.all-profile-links {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.profile-link {
    display: block;
    height: 72px;
    padding: 12px;
    box-sizing: border-box;
    border-radius: var(--radius-md);
    background: var(--color-white);
    color: var(--color-black);
    font-family: var(--font-serif);
    line-height: 44px;
    padding-left: 70px;
    font-size: 22px;
}

.profile-link.link1 {
    position: relative;
}

.profile-link.link1::before {
    position: absolute;
    content: "";
    left: 12px;
    top: 12px;
    width: 48px;
    height: 48px;
    background: var(--color-primary-light) url("../img/profile.svg") no-repeat center;
    background-size: 50%;
    border-radius: var(--radius-md);
}

.profile-link.link1::after {
    position: absolute;
    content: "";
    right: 15px;
    top: 30px;
    width: 15px;
    height: 20px;
    background: url("../img/arrow-right.svg") no-repeat center;
    background-size: 100%;
}

.profile-link.link2 {
    position: relative;
}

.profile-link.link2::before {
    position: absolute;
    content: "";
    left: 12px;
    top: 12px;
    width: 48px;
    height: 48px;
    background: var(--color-primary-light) url("../img/lock.svg") no-repeat center;
    background-size: 50%;
    border-radius: var(--radius-md);
}

.profile-link.link2::after {
    position: absolute;
    content: "";
    right: 15px;
    top: 30px;
    width: 15px;
    height: 20px;
    background: url("../img/arrow-right.svg") no-repeat center;
    background-size: 100%;
}

.profile-link.link3 {
    position: relative;
}

.profile-link.link3::before {
    position: absolute;
    content: "";
    left: 12px;
    top: 12px;
    width: 48px;
    height: 48px;
    background: var(--color-primary-light) url("../img/watch-later.svg") no-repeat center;
    background-size: 50%;
    border-radius: var(--radius-md);
}

.profile-link.link3::after {
    position: absolute;
    content: "";
    right: 15px;
    top: 30px;
    width: 15px;
    height: 20px;
    background: url("../img/arrow-right.svg") no-repeat center;
    background-size: 100%;
}

.profile-link.link4 {
    position: relative;
}

.profile-link.link4::before {
    position: absolute;
    content: "";
    left: 12px;
    top: 12px;
    width: 48px;
    height: 48px;
    background: var(--color-primary-light) url("../img/notification.svg") no-repeat center;
    background-size: 50%;
    border-radius: var(--radius-md);
}

.profile-link.link4::after {
    position: absolute;
    content: "";
    right: 15px;
    top: 30px;
    width: 15px;
    height: 20px;
    background: url("../img/arrow-right.svg") no-repeat center;
    background-size: 100%;
}

.profile-link.link5 {
    position: relative;
}

.profile-link.link5::before {
    position: absolute;
    content: "";
    left: 12px;
    top: 12px;
    width: 48px;
    height: 48px;
    background: var(--color-primary-light) url("../img/exit.svg") no-repeat center;
    background-size: 50%;
    border-radius: var(--radius-md);
}

.profile-link.link5::after {
    position: absolute;
    content: "";
    right: 15px;
    top: 30px;
    width: 15px;
    height: 20px;
    background: url("../img/arrow-right.svg") no-repeat center;
    background-size: 100%;
}


/* Smaller Text
   -------------------------------------------------------------------------- */

.is-smaller-txt {
    float: none;
    width: 50%;
    font-size: 16px;
    line-height: 24px;
}


/* White Box
   -------------------------------------------------------------------------- */

.white-box {
    border-radius: var(--radius-md);
    background: var(--color-white);
    padding: 24px;
    box-sizing: border-box;
    margin-bottom: var(--spacing-xl);
}

.white-box.is-center-txt {
    background: none;
    text-align: center;
}

.white-box .txt {
    margin: 0;
    margin-bottom: var(--spacing-lg);
    font-size: 16px;
    line-height: 24px;
    float: left;
}


/* ==========================================================================
   25. COMPONENTS - FORMS
   ========================================================================== */

/* Send Request Button
   -------------------------------------------------------------------------- */

.send-request {
    border: 1px solid var(--color-primary-light);
    border-radius: var(--radius-md);
    background: none;
    padding: 12px 24px;
    box-sizing: border-box;
    font-size: 16px;
    color: var(--color-black);
    padding-left: 35px;
    position: relative;
    cursor: pointer;
}

.send-request::before {
    position: absolute;
    content: "";
    left: 10px;
    top: 10px;
    width: 18px;
    height: 23px;
    background: url("../img/mail.svg") no-repeat center;
    background-size: 100%;
}


/* Inputs Wrapper
   -------------------------------------------------------------------------- */

.inputs-wrap {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: var(--spacing-lg);
}

.inp-row {
    width: 100%;
    display: flex;
    gap: var(--spacing-lg);
}

.inp-row .inp-box {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.inp-row .inp-box.show {
    position: relative;
}

/* .inp-row .inp-box.show:after {
    position: absolute;
    content: "";
    right: 10px;
    top: 38px;
    width: 18px;
    height: 22px;
     background: url(../img/see-pass.svg) no-repeat center;
    background-size: 100%;  
    cursor: pointer;
} */

.inp-row .inp-box label {
    font-size: 15px;
}

.input-pwd-wrapper {
    position: relative;
}

.input-pwd-wrapper img {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

.inp-row .inp-box input {
    height: 53px;
    width: 100%;
    padding: 16px;
    box-sizing: border-box;
    border: 1px solid var(--color-gray-dark);
    border-radius: var(--radius-sm);
}

.inp-box.is-full {
    /* Block-level default behavior */
    width: 100%;
}

.inp-box.is-full textarea {
    float: left;
    width: 100%;
    border: 1px solid #333;
    border-radius: 4px;
    padding: 16px;
    box-sizing: border-box;
    min-height: 95px;
}

.inp-box.is-full select,
.inp-box select {
    display: block;
    height: 53px;
    width: 100%;
    padding: 16px;
    box-sizing: border-box;
    border: 1px solid var(--color-gray-dark);
    border-radius: var(--radius-sm);
}


/* Buttons
   -------------------------------------------------------------------------- */

.buttons {
    width: 100%;
    display: flex;
    align-items: center;
    margin-top: var(--spacing-xl);
    justify-content: center;
    gap: var(--spacing-lg);
}

.buttons .give-up {
    padding: 16px 24px;
    box-sizing: border-box;
    border: 1px solid var(--color-primary-light);
    border-radius: var(--radius-md);
    color: var(--color-black);
    font-size: 16px;
    background: none;
    cursor: pointer;
}

.buttons .save {
    padding: 16px 24px;
    box-sizing: border-box;
    background: var(--color-primary-light);
    border: 1px solid var(--color-primary-light);
    border-radius: var(--radius-md);
    color: var(--color-white);
    font-size: 16px;
    cursor: pointer;
    font-weight: 700;
}

.buttons .save.send {
    display: flex;
    gap: 6px;
}


/* Gender Selection
   -------------------------------------------------------------------------- */

.gender {
    display: flex;
    gap: 25px;
    align-items: center;
    font-family: sans-serif;
    font-size: 16px;
    margin-top: 13px;
}

.radio {
    display: flex;
    align-items: center;
    cursor: pointer;
    gap: 6px;
}

.radio input {
    display: none;
}

.custom {
    width: 16px;
    height: 16px;
    border: 2px solid #4a4a4a;
    border-radius: 50%;
    display: inline-block;
    position: relative;
}

.radio input:checked+.custom {
    border-color: #0077aa;
}

.radio input:checked+.custom::after {
    content: "";
    width: 10px;
    height: 10px;
    background: #0077aa;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


/* Again Box
   -------------------------------------------------------------------------- */

.again-box {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
}

.again-box .send-request {
    border: 1px solid var(--color-gray);
    color: var(--color-gray);
    cursor: auto;
}

.send-again {
    font-size: 13px;
    color: var(--color-primary);
}


/* Checkbox
   -------------------------------------------------------------------------- */

.checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    font-family: Arial, sans-serif;
}

.checkbox input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
}

.box {
    width: 16px;
    height: 16px;
    background: var(--color-white);
    border: 1px solid var(--color-black);
    border-radius: var(--radius-md);
    position: relative;
    transition: 0.15s ease;
}

.box::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transform-origin: center;
    transition: 0.12s;
}

.checkbox input:checked+.box {
    background: var(--color-primary-light);
    border-color: var(--color-primary-light);
}

.checkbox input:checked+.box::after {
    transform: rotate(45deg) scale(1);
}


/* Checks Wrap
   -------------------------------------------------------------------------- */

.checks-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
    margin-top: var(--spacing-md);
}

.checks-wrap span {
    font-size: 13px;
    color: var(--color-black);
}


/* Tabs
   -------------------------------------------------------------------------- */

.tabs-wrap {
    display: flex;
    gap: var(--spacing-lg);
    align-items: center;
    justify-content: center;
}

.tabs-wrap .tab {
    padding: 12px 24px;
    box-sizing: border-box;
    border: 1px solid var(--color-primary-light);
    color: var(--color-black);
    border-radius: var(--radius-md);
    font-size: 16px;
    font-weight: 500;
}


/* Sort Wrap
   -------------------------------------------------------------------------- */

.sort-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sort-wrap select {
    width: 283px;
    height: 53px;
    border: 1px solid var(--color-gray-dark);
    border-radius: var(--radius-md);
}


/* Download Image
   -------------------------------------------------------------------------- */

.is-download-image {
    position: relative;
}

.is-download-image::before {
    content: "Прикачи";
    position: absolute;
    top: 20px;
    right: 25px;
    font-size: 14px;
    line-height: 20px;
    color: #0083B7;
    cursor: pointer;
}

.is-download-image::after {
    content: "";
    position: absolute;
    top: 20px;
    right: 90px;
    width: 20px;
    height: 20px;
    background: url("../img/icon.svg") no-repeat center;
    background-size: 100%;
    cursor: pointer;
}


/* Delete Button
   -------------------------------------------------------------------------- */

.delete {
    position: absolute;
    width: 13px;
    height: 14px;
    background: url(../img/trash.svg) no-repeat center;
    background-size: 100%;
    right: 0;
    top: -20px;
    cursor: pointer;
}

.bott-inp-txt {
    font-size: 13px;
    font-weight: 400;
    color: #000;
}


/* ==========================================================================
   26. COMPONENTS - ARCHIVE
   ========================================================================== */

/* Years & Months
   -------------------------------------------------------------------------- */

.all-years,
.all-months {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.all-years .year {
    width: 70px;
    height: 53px;
    background: var(--color-gray-lightest);
    border-radius: var(--radius-md);
    line-height: 54px;
    color: var(--color-black);
    font-size: 16px;
    font-weight: 500;
    text-align: center;
}

.all-months .month {
    padding: 12px 24px;
    box-sizing: border-box;
    background: var(--color-gray-lightest);
    border-radius: var(--radius-md);
    color: var(--color-black);
    font-size: 16px;
    font-weight: 500;
    text-align: center;
}


/* Archive Section
   -------------------------------------------------------------------------- */

.profile-section-archives {
    margin-top: var(--spacing-xl);
}

.profile-section-archives .small-title {
    font-size: 32px;
    font-weight: 600;
}


/* News Links
   -------------------------------------------------------------------------- */

.all-news .news-link {
    display: block;
    padding: var(--spacing-sm) 0;
    box-sizing: border-box;
    font-size: 22px;
    font-weight: 500;
    border-bottom: 1px solid var(--color-gray-lighter);
    font-family: var(--font-serif);
    color: var(--color-black);
}


/* ==========================================================================
   27. COMPONENTS - ERROR PAGE
   ========================================================================== */

.eror-page {
    width: 390px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    align-items: center;
    justify-content: center;
}

.number-eror {
    font-size: 200px;
    color: var(--color-black);
}

.eror-page span {
    font-size: 20px;
    font-weight: 400;
    color: var(--color-black);
}

.back-btn-eror {
    padding: 15px 50px;
    box-sizing: border-box;
    background: var(--color-primary-light);
    color: var(--color-white);
    border-radius: var(--radius-md);
    padding-left: 60px;
    position: relative;
}

.back-btn-eror::before {
    position: absolute;
    content: "";
    left: 30px;
    top: 18px;
    width: 22px;
    height: 15px;
    background: url(../img/arrow-left-btn.png) no-repeat center;
    background-size: 80%;
}


/* ==========================================================================
   28. COMPONENTS - STATIC PAGES
   ========================================================================== */

.static-page-wrap {
    width: 960px;
    margin: 0 auto;
}

.static-page-wrap p {
    margin: var(--spacing-sm) 0;
    font-size: 20px;
    line-height: 34px;
}

.static-page-wrap h2 {
    font-size: 32px;
    font-weight: 600;
    font-family: var(--font-serif);
    margin-top: var(--spacing-lg);
}

.static-page-wrap ul {
    /* Block-level default behavior */
}

.static-page-wrap ul li {
    font-size: 20px;
    line-height: 34px;
}

.static-page-wrap span {
    display: block;
    padding-left: var(--spacing-lg);
    box-sizing: border-box;
    position: relative;
    font-size: 20px;
    line-height: 34px;
}

.static-page-wrap span::before {
    position: absolute;
    content: "";
    left: 0;
    top: 13px;
    width: 8px;
    height: 8px;
    background: var(--color-primary-light);
    border-radius: var(--radius-round);
}


/* Link Variations
   -------------------------------------------------------------------------- */

.is-link.bottom-link {
    display: block;
    padding-left: 25px;
    box-sizing: border-box;
    position: relative;
    color: var(--color-primary-light);
    border-bottom: 1px solid var(--color-primary-light);
    padding-bottom: var(--spacing-lg);
}

.is-link.bottom-link::before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 15px;
    height: 15px;
    background: url("../img/plus.svg") no-repeat center;
    background-size: 100%;
}


/* ==========================================================================
   29. COMPONENTS - LIVE VIEW
   ========================================================================== */

/* Live View Top
   -------------------------------------------------------------------------- */

.live-view-top {
    position: relative;
}

.live-view-top img.big-img {
    display: block;
    width: 100%;
}

.top-title {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    color: var(--color-white);
    font-size: 180px;
    font-weight: 300;
    letter-spacing: 0.22em;
    text-align: center;
    text-transform: uppercase;
    pointer-events: none;
}

.bottom-title {
    width: 70%;
    position: absolute;
    left: 15%;
    bottom: 30px;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.bottom-title .big-title {
    color: var(--color-white);
    text-transform: uppercase;
    font-size: 68px;
    font-family: var(--font-serif);
}


/* Back Button
   -------------------------------------------------------------------------- */

.back-btn {
    position: relative;
    padding: 15px 50px;
    box-sizing: border-box;
    background: var(--color-white);
    color: var(--color-black);
    bottom: 34px;
    left: 0;
    border-radius: var(--radius-md);
    padding-left: 60px;
}

.back-btn::before {
    position: absolute;
    content: "";
    left: 30px;
    top: 18px;
    width: 22px;
    height: 15px;
    background: url(../img/back-btn.png) no-repeat center;
    background-size: 80%;
}


/* Live View Info
   -------------------------------------------------------------------------- */

.live-view-info {
    /* Block-level default behavior */
}

.live-title {
    font-size: 52px;
    font-weight: 700;
    font-family: var(--font-serif);
    margin-top: 80px;
}

.live-title img {
    display: block;
    width: 200px;
    height: 200px;
    margin-top: -90px;
    margin-bottom: var(--spacing-xl);
}


/* White Line Info
   -------------------------------------------------------------------------- */

.white-line-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--spacing-xl);
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid #ccc;
}

.white-line-info span {
    font-size: 13px;
}

.white-line-info .left span:first-child {
    padding-right: var(--spacing-sm);
    box-sizing: border-box;
    border-right: 1px solid var(--color-gray-light);
}

.white-line-info .right span {
    color: var(--color-primary-light);
    font-size: 16px;
    border-bottom: 1px solid var(--color-primary-light);
    padding-left: var(--spacing-lg);
    box-sizing: border-box;
    position: relative;
}

.white-line-info .right span::before {
    position: absolute;
    content: "";
    width: 15px;
    height: 15px;
    background: url("../img/red.png") no-repeat center;
    background-size: 100%;
    left: 0;
}


/* Smaller Text
   -------------------------------------------------------------------------- */

.smaller-txt {
    width: 900px;
    margin: 0 auto;
    font-size: 20px;
    line-height: 34px;
    color: var(--color-black);
}


/* Image Wraps
   -------------------------------------------------------------------------- */

.one-img-wrap.is-right {
    width: 1220px;
    margin-left: auto;
    position: relative;
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

.one-img-wrap.is-right img.big {
    display: block;
    width: 100%;
    border-top-left-radius: 64px;
    height: 657px;
    object-fit: cover;
}


/* Images Section
   -------------------------------------------------------------------------- */

.images-section {
    display: flex;
    gap: var(--spacing-xl);
    margin: var(--spacing-xl) 0;
}

.left-part {
    width: 50%;
}

.right-part {
    width: 50%;
    position: relative;
}


/* Live Slider
   -------------------------------------------------------------------------- */

.live-slider {
    /* Block-level default behavior */
}

.live-slider img {
    display: block;
    width: 100%;
    height: 550px;
    object-fit: cover;
    border-top-left-radius: var(--radius-xxl);
    border-bottom-right-radius: var(--radius-xxl);
}


/* Text Image Wrap
   -------------------------------------------------------------------------- */

.txt-image-wrap {
    display: flex;
}

.txt-image-wrap .txt {
    width: 50%;
    position: relative;
}

.is-center {
    width: 380px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.txt-image-wrap .name {
    font-size: 48px;
    font-weight: 700;
    color: var(--color-black);
    font-family: var(--font-serif);
}

.is-center .info {
    border-top: none;
    font-size: 20px;
    line-height: 34px;
}

.txt-image-wrap .img {
    width: 40%;
}

.txt-image-wrap .img img {
    display: block;
    width: 100%;
    height: 930px;
    object-fit: cover;
    border-top-left-radius: var(--radius-xxl);
    border-bottom-right-radius: var(--radius-xxl);
}


/* Two Images Wrap
   -------------------------------------------------------------------------- */

.two-images-wrap {
    display: flex;
    gap: 130px;
    margin-top: var(--spacing-xl);
}

.two-images-wrap .txt-image-wrap .txt:first-child .info {
    justify-content: flex-end;
}

.two-images-wrap .txt-image-wrap:nth-child(2) .txt:first-child .info {
    justify-content: flex-start;
    text-align: left;
}

.two-images-wrap .txt-image-wrap:nth-child(2) .name {
    text-align: left;
}

.two-images-wrap .txt,
.three-images-wrap .txt {
    width: 100%;
}

.txt .info {
    border-top: none;
}

.two-images-wrap .txt-image-wrap .img,
.three-images-wrap .txt-image-wrap .img {
    width: 100%;
}

.two-images-wrap .txt-image-wrap {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.two-images-wrap .txt-image-wrap .txt:first-child {
    text-align: right;
}

.two-images-wrap .txt-image-wrap img {
    width: 100%;
}


/* Three Images Wrap
   -------------------------------------------------------------------------- */

.three-images-wrap {
    display: flex;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xl);
}

.three-images-wrap .name {
    font-size: 32px;
}

.three-images-wrap .txt-image-wrap {
    width: 33%;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}


/* More Info
   -------------------------------------------------------------------------- */

.more-info {
    /* Block-level default behavior */
}

.more-info p {
    color: var(--color-black);
    font-size: 16px;
    line-height: 21px;
}


/* Number of Photos
   -------------------------------------------------------------------------- */

.number-of-photos {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    width: 85px;
    align-items: center;
}

.number-of-photos .number {
    font-size: 52px;
    font-weight: 700;
    font-family: var(--font-serif);
}

.small-width-txt {
    width: 240px;
    bottom: 0;
    right: 0;
    color: var(--color-black);
    font-size: 16px;
    line-height: 20px;
    position: absolute;
}


/* Smaller Wrap
   -------------------------------------------------------------------------- */

.smaller-wrap {
    width: 900px;
    margin: 0 auto;
}

.smaller-wrap img {
    width: 100%;
    border-top-left-radius: var(--radius-xxl);
    border-bottom-right-radius: var(--radius-xxl);
}


/* Live View Bottom
   -------------------------------------------------------------------------- */

.live-view-bottom {
    position: relative;
}

.live-view-bottom .big-img {
    width: 100%;
    border-top-left-radius: var(--radius-xxl);
    border-bottom-right-radius: var(--radius-xxl);
}

.live-view-bottom .time-wrap {
    /* Inherits from .time-wrap */
}

.mega-menu-info {
    display: flex
}

.mega-menu-info .footer-title {
    font-weight: 500;
    font-size: 18px;
    color: #000;
    margin-bottom: 10px;
    margin-block-start: 1.67em;
    margin-block-end: 1.67em;
    display: block;
}

.mega-menu-info .footer-link {
    margin: 5px;
    margin-bottom: 10px;
}

/* Aaaaaand the rest */

.is-two-column-view .listing-title {
    text-align: left;
}

.is-two-column-view .bottom-txt {
    float: left;
    width: 100%;
    font-size: 20px;
    color: #000;
    margin-bottom: 20px;
    text-align: left;
}

.is-left-info {
    float: left;
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.is-left-info .left-info {
    width: 80px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.is-two-column-view .txt.is-bolder,
.is-two-column-view .txt,
.is-two-column-view .related-news-wrap,
.is-two-column-view .horizontal-banner,
.is-two-column-view .is-other-view {
    padding-left: 90px;
    box-sizing: border-box;
}

.is-two-column-view p {
    box-sizing: border-box;
}

.is-two-column-view .bottom-image-info {
    left: 90px;
}

.is-two-column-view .listing-title {
    padding-left: 90px;
    box-sizing: border-box;
}

.is-two-column-view .bottom-txt {
    padding-left: 90px;
    box-sizing: border-box;
}

.is-two-column-view .top-view-info {
    display: flex;
    margin-top: var(--spacing-lg);
    align-items: center;
    justify-content: flex-end;
    float: left;
    width: 100%;
}

.is-two-column-view .top-view-info .right-info {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
    float: left;
    width: 100%;
    justify-content: flex-end;
}

.is-two-column-view .image-view {
    width: calc(100% - 80px);
}

.is-two-column-view .is-title {
    padding-left: 90px;
    box-sizing: border-box;
}

.is-two-column-view .related-news-wrap.more-news {
    padding-left: 0px;
}

.is-two-column-view .related-news-wrap.is-bottom-news {
    padding-left: 30px;
}

.is-two-column-view .related-news-wrap {
    padding-left: 0;
}



.fast-search-listing a {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 18px;
    font-weight: 500;
    font-family: var(--font-serif);
    padding: 16px 0px;
    color: black;
}

.fast-search-link-wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}

.hide {
    display: none;
}

.show {
    display: block;
}

.show-flex {
    display: flex;
}

#article-body {
    --font-scale: 1;
}

#article-body p,
#article-body li {
    font-size: calc(0.9em * var(--font-scale));
}

/* по желание – headings да растат по-малко */
#article-body h2,
#article-body h3 {
    font-size: calc(1em * (1 + (var(--font-scale) - 1) * 0.5));
}


.article-gallery-leading {
    position: relative;
    display: block;
    cursor: pointer;
}

.icon-gallery {
    display: flex;
    width: 42px;
    height: 42px;
    align-items: center;
    margin-left: auto;
    margin-right: 0;
    background-image: url(https://cms.static.btv.bg/microsites/btvnovinite/images/icons/gallery.svg);
    background-color: rgba(14, 45, 62, .7);
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 50%;
    background-size: 27px;
    cursor: pointer;
}

.gallery-flag .count,
.gallery-flag .icon-gallery {
    cursor: pointer;
}

.image-article img {
    max-width: 100%;
}

.gallery-flag {
    position: absolute;
    right: 24px;
    top: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row-reverse;
    gap: 6px;
    background: var(--bg-light-blue);
    padding: 7px 12px;
    border-radius: 6px;
}

.news-article .image-article {
    position: relative;
}

.embedded.gallery img {
    cursor: pointer;
}




/* SHARE MODAL */
.share-modal {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 9999;
}

.share-modal.active {
    display: block;
}

/* BACKDROP */
.share-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(3px);
}

/* BOX */
.share-box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -45%);
    width: 380px;
    /* по-голям */
    max-width: calc(100% - 32px);

    background: #fff;
    border-radius: 18px;
    padding: 20px;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.08);

    animation: modalIn 0.25s ease;
}

/* HEADER */
.share-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.share-header span {
    font-size: 16px;
    font-weight: 600;
    color: #000;
}

/* CLOSE */
.close-btn {
    border: none;
    background: #F5F5F5;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    transition: 0.2s;
}

.close-btn:hover {
    background: #e9e9e9;
}

/* GRID */
.share-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 24px 0px;
}

/* BUTTONS */
.share-grid button {
    background: #EDF7FB;
    border: 1px solid transparent;
    border-radius: 14px;
    padding: 14px;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    transition: all 0.2s ease;
}

.share-grid button img {
    width: 26px;
    height: 26px;
}

/* hover */
.share-grid button:hover {
    background: #fff;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
}

/* COPY SECTION */
.copy-row {
    display: flex;
    gap: 8px;
    background: #F5F5F5;
    padding: 6px;
    border-radius: 12px;
}

.copy-row input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 8px;
    font-size: 13px;
    color: #333;
}

/* COPY BUTTON */
.copy-row button {
    border: none;
    background: #0083B7;
    color: white;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    transition: 0.2s;
}

.copy-row button:hover {
    background: #0a558d;
}

@keyframes modalIn {
    from {
        transform: translate(-50%, -35%) scale(0.95);
        opacity: 0;
    }

    to {
        transform: translate(-50%, -45%) scale(1);
        opacity: 1;
    }
}

/* ~ END SHARE MODAL */

.w-100 {
    width: 100%;
}

.share-wrapper {
    display: flex;
    justify-content: center;
    margin: 16px;
    gap: 16px;
}

.btvplus .section-title img {
    height: 32px;
}

.btvplus .section-title {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 16px;
}


.ticket1 {
    width: 46px;
    height: 46px;
}

.flex-direction-column {
    flex-direction: column;
}

.most-viewed-article img.image-item {
    display: block;
    width: 100%;
    border-top-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
}

.horizontal-news-item {
    display: flex;
    flex-direction: row;
    gap: 12px;
}

.horizontal-news-item-image {
    flex: 1;
    min-width: 120px;
    max-width: 120px;
}

.horizontal-news-item-image img {
    max-width: 100%;
    height: auto;
    margin-top: 6px;
}

.horizontal-news-item h4 {
    flex: 2;
}

.horizontal-news-item .small-title {
    font-size: 15px;
}


.article-meta-info {
    margin-top: 16px;
}

.article-meta-info>div {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 12px;
}

.article-meta-info .author.mobile {
  display: none;
}

.article-meta-info .font-sizes {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

.article-meta-info .article-meta-info-bottom {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 16px;
}

.article-meta-info .article-source-image {
    width: 38px;
    height: 38px;
    border-radius: 100%;

}
.article-meta-info .calendar-date {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
     
}

.clamp-2 {
  line-height: 1.5;
  max-height: calc(1.5em * 2);
  overflow: hidden;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.clamp-3 {
  line-height: 1.5;
  max-height: calc(1.5em * 3);
  overflow: hidden;

  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* START - LEGAL PAGES */

.policy-wrapper {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 10px 20px 10px;
}

.policy-wrapper h1, .policy-wrapper h2 {
  font-family: 'Roboto Slab';
}

.policy-wrapper p, .policy-wrapper ul li, .policy-wrapper ol li {
  line-height: 24px;
  font-size: 17px;
  text-align: justify;
}

.policy-wrapper h1 {
  text-align: center;
}

.policy-wrapper h3, .policy-wrapper h4 {
  font-weight: 400;
}

.policy-wrapper a, .policy-wrapper a:visited {
  color: #1C5A7C;
  font-weight: 600;
}

.policy-wrapper.home {
  padding: 0 10px 100px 0;
}

.policy-wrapper.home ul li {
  display: block;
  text-align: center;
  margin: 10px 0;
}

.policy-wrapper.home ul li a {
  padding: 5px 0;
  cursor: pointer;
  text-decoration: underline;
  text-transform: uppercase;
  font-size: 18px;
}

.policy-wrapper .sup {
  font-size: 23px;
}

/* END - LEGAL PAGES */

.site-wrap.btvplus {
  padding: 0 0 1em 0;
}

  ::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(120,120,120,.35);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;

  transition: background .3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(120,120,120,.55);
  border: 2px solid transparent;
  background-clip: padding-box;
}

.small-news a.image, .big-news a.image   {
  overflow: hidden;
  transform-origin: center center;
  transform: scale(1);
  transition: transform 0.7s ease-in;

  border-top-left-radius: var(--radius-xxl);
  border-bottom-right-radius: var(--radius-xxl);
}

.small-news:hover img, .big-news:hover img {
  transition: transform 0.7s ease-out;

  transform: scale(1.125);
  filter: brightness(1.025);
}

.site-wrap.article .related-news-wrap .is-number-wrap {
  padding: 1em 0;
}

.site-wrap.article .related-news-wrap picture img {
  display: block;
  width: 100%;
  border-top-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}  

.swiper-slide picture img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

  .news-column {
  width: 25%;
}
.info .right-info-part {
  width: 100%;
}

.top-logo img {
  height: 40px;
}

.right-small-colum .small-news:nth-of-type(2) a.image, .right-small-colum .small-news:nth-of-type(3) a.image {
  display: none;
}

.tts-player {
  display: flex;
  align-items: center;
  padding: 0 0.5em;
}
.tts-player .icon {
  margin-right: 0.5em;
  cursor: pointer;
}

.tts-player .icon img {
  width: 24px;
}

#article-body iframe {
  max-width: 100%;
}

.footer .social-footer .dark-logo img {
  width: 250px;
}

  .media-box {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #f1f1f1;
}

.media-box::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      #f1f1f1 25%,
      #f7f7f7 37%,
      #f1f1f1 63%
    );
  background-size: 400% 100%;
  animation: shimmer 1.4s infinite;
}

@keyframes shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.media-box > img,
.media-box > video,
.media-box > iframe,
.media-box > .gallery {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
}

#article-body>p:first-of-type {
    color: #000;
    font-weight: 600;
}

.article-meta-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.article-meta-info .author {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

#article-body .bottom-image-info {
  background: #000000;
  background: linear-gradient(90deg,rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 1) 100%);
}
#article-body .bottom-image-info .black-line-info.is-right {
  line-height: 0.4em;
}

  ::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(120,120,120,.35);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;

  transition: background .3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(120,120,120,.55);
  border: 2px solid transparent;
  background-clip: padding-box;
}

.small-news a.image, .big-news a.image   {
  overflow: hidden;
  transform-origin: center center;
  transform: scale(1);
  transition: transform 0.7s ease-in;

  border-top-left-radius: var(--radius-xxl);
  border-bottom-right-radius: var(--radius-xxl);
}

.small-news:hover img, .big-news:hover img {
  transition: transform 0.7s ease-out;

  transform: scale(1.125);
  filter: brightness(1.025);
}

.site-wrap.article .related-news-wrap .is-number-wrap {
  padding: 1em 0;
}

.site-wrap.article .related-news-wrap picture img {
  display: block;
  width: 100%;
  border-top-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}  

.swiper-slide picture img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

a.google-news-fav {
  background: var(--bg-light-blue);
  padding: var(--spacing-sm);
  font-size: 17px;
  border-radius: 5px;
  gap: 0.5em;
  line-height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

a.google-news-fav span.icon {
  background-image: url(data:image/png;base64,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);
  width: 26px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
}