/* input(293,1): run-time error CSS1019: Unexpected token, found '@import' input(293,9): run-time error CSS1019: Unexpected token, found 'url('https://fonts.googleapis.com/css2?family=Roboto:wght@500;700&family=Be+Vietnam+Pro:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap')' input(296,1): run-time error CSS1019: Unexpected token, found '@import' input(296,9): run-time error CSS1019: Unexpected token, found ''components/_heatmap-top-stocks.css'' input(297,1): run-time error CSS1019: Unexpected token, found '@import' input(297,9): run-time error CSS1019: Unexpected token, found ''components/_fili-multimedia.css'' input(298,1): run-time error CSS1019: Unexpected token, found '@import' input(298,9): run-time error CSS1019: Unexpected token, found ''components/_fili-three-topic-news.css'' input(299,1): run-time error CSS1019: Unexpected token, found '@import' input(299,9): run-time error CSS1019: Unexpected token, found ''components/_fili-entertainment-section.css'' input(300,1): run-time error CSS1019: Unexpected token, found '@import' input(300,9): run-time error CSS1019: Unexpected token, found ''components/_fili-pagination.css'' input(301,1): run-time error CSS1019: Unexpected token, found '@import' input(301,9): run-time error CSS1019: Unexpected token, found ''components/_fili-content.css'' input(302,1): run-time error CSS1019: Unexpected token, found '@import' input(302,9): run-time error CSS1019: Unexpected token, found ''components/_fili-trending-stocks.css'' input(303,1): run-time error CSS1019: Unexpected token, found '@import' input(303,9): run-time error CSS1019: Unexpected token, found ''components/_fili-left-action-bar/_fili-left-action-bar-master.css'' input(304,1): run-time error CSS1019: Unexpected token, found '@import' input(304,9): run-time error CSS1019: Unexpected token, found ''components/_layout/_layout-master.css'' input(305,1): run-time error CSS1019: Unexpected token, found '@import' input(305,9): run-time error CSS1019: Unexpected token, found ''components/_fili-templates/_fili-template-master.css'' input(306,1): run-time error CSS1019: Unexpected token, found '@import' input(306,9): run-time error CSS1019: Unexpected token, found ''components/_fili-category/_fili-category-master.css'' input(307,1): run-time error CSS1019: Unexpected token, found '@import' input(307,9): run-time error CSS1019: Unexpected token, found ''components/_fili-search/_fili-search-master.css'' input(308,1): run-time error CSS1019: Unexpected token, found '@import' input(308,9): run-time error CSS1019: Unexpected token, found ''components/_fili-featured/_fili-featured-master.css'' input(309,1): run-time error CSS1019: Unexpected token, found '@import' input(309,9): run-time error CSS1019: Unexpected token, found ''components/_fili-short-form-content.css'' input(310,1): run-time error CSS1019: Unexpected token, found '@import' input(310,9): run-time error CSS1019: Unexpected token, found ''components/_fili-long-form-content.css'' input(311,1): run-time error CSS1019: Unexpected token, found '@import' input(311,9): run-time error CSS1019: Unexpected token, found ''components/_fili-same-article.css'' input(312,1): run-time error CSS1019: Unexpected token, found '@import' input(312,9): run-time error CSS1019: Unexpected token, found ''components/_fili-market-chart/_fili-market-chart-master.css'' input(313,1): run-time error CSS1019: Unexpected token, found '@import' input(313,9): run-time error CSS1019: Unexpected token, found ''components/_fili-breadcrumb.css'' input(2970,25): run-time error CSS1035: Expected colon, found '{' input(2993,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&' input(3072,34): run-time error CSS1035: Expected colon, found '{' input(3095,34): run-time error CSS1035: Expected colon, found '{' input(3127,29): run-time error CSS1035: Expected colon, found '{' input(3134,29): run-time error CSS1035: Expected colon, found '{' input(19625,1): run-time error CSS1019: Unexpected token, found '@import' input(19625,9): run-time error CSS1019: Unexpected token, found ''_fili-channel-skeleton.css'' input(19626,1): run-time error CSS1019: Unexpected token, found '@import' input(19626,9): run-time error CSS1019: Unexpected token, found ''_fili-channel-default.css'' input(19627,1): run-time error CSS1019: Unexpected token, found '@import' input(19627,9): run-time error CSS1019: Unexpected token, found ''_fili-channel-compact.css'' input(19628,1): run-time error CSS1019: Unexpected token, found '@import' input(19628,9): run-time error CSS1019: Unexpected token, found ''_fili-iframe.css'' input(22392,25): run-time error CSS1035: Expected colon, found '{' input(22415,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&' input(22490,34): run-time error CSS1035: Expected colon, found '{' input(22513,34): run-time error CSS1035: Expected colon, found '{' input(22541,29): run-time error CSS1035: Expected colon, found '{' input(22548,29): run-time error CSS1035: Expected colon, found '{' input(22596,1): run-time error CSS1019: Unexpected token, found '@import' input(22596,9): run-time error CSS1019: Unexpected token, found '"_fili-left-action-bar-report.css"' */ /* input(233,1): run-time error CSS1019: Unexpected token, found '@import' input(233,9): run-time error CSS1019: Unexpected token, found 'url('https://fonts.googleapis.com/css2?family=Roboto:wght@500;700&family=Be+Vietnam+Pro:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap')' input(236,1): run-time error CSS1019: Unexpected token, found '@import' input(236,9): run-time error CSS1019: Unexpected token, found ''components/_heatmap-top-stocks.css'' input(237,1): run-time error CSS1019: Unexpected token, found '@import' input(237,9): run-time error CSS1019: Unexpected token, found ''components/_fili-multimedia.css'' input(238,1): run-time error CSS1019: Unexpected token, found '@import' input(238,9): run-time error CSS1019: Unexpected token, found ''components/_fili-three-topic-news.css'' input(239,1): run-time error CSS1019: Unexpected token, found '@import' input(239,9): run-time error CSS1019: Unexpected token, found ''components/_fili-entertainment-section.css'' input(240,1): run-time error CSS1019: Unexpected token, found '@import' input(240,9): run-time error CSS1019: Unexpected token, found ''components/_fili-pagination.css'' input(241,1): run-time error CSS1019: Unexpected token, found '@import' input(241,9): run-time error CSS1019: Unexpected token, found ''components/_fili-content.css'' input(242,1): run-time error CSS1019: Unexpected token, found '@import' input(242,9): run-time error CSS1019: Unexpected token, found ''components/_fili-trending-stocks.css'' input(243,1): run-time error CSS1019: Unexpected token, found '@import' input(243,9): run-time error CSS1019: Unexpected token, found ''components/_fili-left-action-bar/_fili-left-action-bar-master.css'' input(244,1): run-time error CSS1019: Unexpected token, found '@import' input(244,9): run-time error CSS1019: Unexpected token, found ''components/_layout/_layout-master.css'' input(245,1): run-time error CSS1019: Unexpected token, found '@import' input(245,9): run-time error CSS1019: Unexpected token, found ''components/_fili-templates/_fili-template-master.css'' input(246,1): run-time error CSS1019: Unexpected token, found '@import' input(246,9): run-time error CSS1019: Unexpected token, found ''components/_fili-category/_fili-category-master.css'' input(247,1): run-time error CSS1019: Unexpected token, found '@import' input(247,9): run-time error CSS1019: Unexpected token, found ''components/_fili-search/_fili-search-master.css'' input(248,1): run-time error CSS1019: Unexpected token, found '@import' input(248,9): run-time error CSS1019: Unexpected token, found ''components/_fili-featured/_fili-featured-master.css'' input(249,1): run-time error CSS1019: Unexpected token, found '@import' input(249,9): run-time error CSS1019: Unexpected token, found ''components/_fili-short-form-content.css'' input(250,1): run-time error CSS1019: Unexpected token, found '@import' input(250,9): run-time error CSS1019: Unexpected token, found ''components/_fili-long-form-content.css'' input(251,1): run-time error CSS1019: Unexpected token, found '@import' input(251,9): run-time error CSS1019: Unexpected token, found ''components/_fili-same-article.css'' input(252,1): run-time error CSS1019: Unexpected token, found '@import' input(252,9): run-time error CSS1019: Unexpected token, found ''components/_fili-market-chart/_fili-market-chart-master.css'' input(253,1): run-time error CSS1019: Unexpected token, found '@import' input(253,9): run-time error CSS1019: Unexpected token, found ''components/_fili-breadcrumb.css'' input(2910,25): run-time error CSS1035: Expected colon, found '{' input(2933,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&' input(3012,34): run-time error CSS1035: Expected colon, found '{' input(3035,34): run-time error CSS1035: Expected colon, found '{' input(3067,29): run-time error CSS1035: Expected colon, found '{' input(3074,29): run-time error CSS1035: Expected colon, found '{' input(19565,1): run-time error CSS1019: Unexpected token, found '@import' input(19565,9): run-time error CSS1019: Unexpected token, found ''_fili-channel-skeleton.css'' input(19566,1): run-time error CSS1019: Unexpected token, found '@import' input(19566,9): run-time error CSS1019: Unexpected token, found ''_fili-channel-default.css'' input(19567,1): run-time error CSS1019: Unexpected token, found '@import' input(19567,9): run-time error CSS1019: Unexpected token, found ''_fili-channel-compact.css'' input(19568,1): run-time error CSS1019: Unexpected token, found '@import' input(19568,9): run-time error CSS1019: Unexpected token, found ''_fili-iframe.css'' input(22332,25): run-time error CSS1035: Expected colon, found '{' input(22355,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&' input(22430,34): run-time error CSS1035: Expected colon, found '{' input(22453,34): run-time error CSS1035: Expected colon, found '{' input(22481,29): run-time error CSS1035: Expected colon, found '{' input(22488,29): run-time error CSS1035: Expected colon, found '{' input(22536,1): run-time error CSS1019: Unexpected token, found '@import' input(22536,9): run-time error CSS1019: Unexpected token, found '"_fili-left-action-bar-report.css"' */ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500;700&family=Be+Vietnam+Pro:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap'); @import 'components/_layout/_layout-master.css'; @import 'components/_fili-lightbox.css'; @import 'components/_fili-heatmap.css'; @import 'components/_fili-multimedia.css'; @import 'components/_fili-three-topic-news/_fili-three-topic-news-master.css'; @import 'components/_fili-entertainment-section.css'; @import 'components/_fili-pagination.css'; @import 'components/_fili-content.css'; @import 'components/_fili-trending/_fili-trending-master.css'; @import 'components/_fili-left-action-bar/_fili-left-action-bar-master.css'; @import 'components/_fili-templates/_fili-template-master.css'; @import 'components/_fili-category/_fili-category-master.css'; @import 'components/_fili-search/_fili-search-master.css'; @import 'components/_fili-featured/_fili-featured-master.css'; @import 'components/_fili-form/_fili-form-master.css'; @import 'components/_fili-same-article.css'; @import 'components/_fili-market-chart/_fili-market-chart-master.css'; @import 'components/_fili-breadcrumb.css'; @import 'components/_fili-channel/_fili-channel-master.css'; :root { /* --- Typography Tokens --- */ --font-primary: 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-heading: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-mono: SFMono-Regular, Menlo, Monaco, Consolas, monospace; --font-size-base: 16px; --line-height-base: 1.5; --line-height-heading: 1.25; /* --- ORIGINAL BLUE & NAVY BRAND TOKENS --- */ --color-brand-primary: #1091FF; --color-brand-secondary: #0F172A; --color-brand-accent: #D12F2F; --color-brand-accent-hover: #0070E0; /* --- ORIGINAL DARK SLATE / NAVY --- */ --color-brand-dark: #17222B; --color-brand-dark-hover: #1E293B; --color-brand-dark-active: #020617; --color-brand-red: #D12F2F; --color-brand-red-hover: #A82323; --color-brand-red-dark: #B71C1C; /* --- Neutral Text Colors --- */ --color-text-main: #222222; --color-text-muted: #666666; --color-text-heading: #333333; --color-text-inverse: #ffffff; /* --- Surfaces & Borders --- */ --color-bg-body: #ffffff; --color-bg-surface: #f8f9fa; --color-bg-subtle: #f1f3f5; --color-border: #e2e8f0; --color-border-dark: rgba(255, 255, 255, 0.15); /* --- Financial Market Indicators --- */ --color-stock-up: #008000; --color-stock-down: #D12F2F; --color-stock-ref: #eab308; /* --- Radii, Shadows & Transitions --- */ --radius-sm: 3px; --radius-md: 5px; --radius-lg: 8px; --radius-full: 9999px; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 3px 8px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.12); --transition-fast: all 0.15s ease; --transition-normal: all 0.25s ease; } *, *::before, *::after { box-sizing: border-box; } html { font-size: var(--font-size-base); } body { font-family: var(--font-primary); font-size: 16px; color: var(--color-text-main); background-color: var(--color-bg-body); line-height: var(--line-height-base); margin: 0; padding: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 700; color: var(--color-text-heading); line-height: var(--line-height-heading); margin-top: 0; } a { color: var(--color-text-main); text-decoration: none; transition: var(--transition-fast); } a:hover { color: var(--color-brand-accent); } .fili-red-link, .category-page-title, .fili-nav-link.active { color: var(--color-brand-red); } .fili-red-link:hover, .category-page-title:hover { color: var(--color-brand-red-hover); } :root { --font-primary: Arial; --font-heading: 'Roboto', sans-serif; --font-mono: SFMono-Regular, Menlo, Monaco, Consolas, monospace; --font-size-base: 16px; --line-height-base: 1.5; --line-height-heading: 1.25; --color-brand-primary: #1091FF; --color-brand-secondary: #0F172A; --color-brand-accent: #D12F2F; --color-brand-accent-hover: #0070E0; --color-brand-dark: #263145; --color-brand-dark-hover: #1E293B; --color-brand-dark-active: #020617; --color-brand-red: #D12F2F; --color-brand-red-hover: #A82323; --color-brand-red-dark: #B71C1C; --color-text-main: #222222; --color-text-muted: #444; --color-text-heading: #333333; --color-text-inverse: #ffffff; --color-bg-body: #fff; --color-bg-surface: #f8f9fa; --color-bg-subtle: #f1f3f5; --color-border: #e2e8f0; --color-border-dark: rgba(255, 255, 255, 0.15); --color-stock-up: #008000; --color-stock-down: #D12F2F; --color-stock-ref: #eab308; --radius-sm: 3px; --radius-md: 5px; --radius-lg: 8px; --radius-full: 9999px; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 3px 8px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.12); --transition-fast: all 0.15s ease; --transition-normal: all 0.25s ease; } *, *::before, *::after { box-sizing: border-box; } html { font-size: var(--font-size-base); } body { font-family: var(--font-primary); font-size: 16px; color: var(--color-text-main); background-color: var(--color-bg-body); line-height: var(--line-height-base); margin: 0; padding: 0; overflow-y: scroll; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 700; color: var(--color-text-heading); line-height: var(--line-height-heading); margin-top: 0; } h1 { font-size: 37px; } h2 { font-size: 31px; } h3 { font-size: 25px; } h4 { font-size: 19px; } h5 { font-size: 15px; } h6 { font-size: 13px; } a { color: var(--color-text-main); text-decoration: none; transition: var(--transition-fast); } a:hover { color: var(--color-brand-accent); } .fili-red-link, .category-page-title, .fili-nav-link.active { color: var(--color-brand-red); } .fili-red-link:hover, .category-page-title:hover { color: var(--color-brand-red-hover); } /* ========================================================================== MASTER STYLESHEET - ASP.NET Core MVC (wwwroot/css) ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500;700&family=Be+Vietnam+Pro:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap'); /*@import 'components/_fili-lightbox.css';*/ @import 'components/_heatmap-top-stocks.css'; @import 'components/_fili-multimedia.css'; @import 'components/_fili-three-topic-news.css'; @import 'components/_fili-entertainment-section.css'; @import 'components/_fili-pagination.css'; @import 'components/_fili-content.css'; @import 'components/_fili-trending-stocks.css'; @import 'components/_fili-left-action-bar/_fili-left-action-bar-master.css'; @import 'components/_layout/_layout-master.css'; @import 'components/_fili-templates/_fili-template-master.css'; @import 'components/_fili-category/_fili-category-master.css'; @import 'components/_fili-search/_fili-search-master.css'; @import 'components/_fili-featured/_fili-featured-master.css'; @import 'components/_fili-short-form-content.css'; @import 'components/_fili-long-form-content.css'; @import 'components/_fili-same-article.css'; @import 'components/_fili-market-chart/_fili-market-chart-master.css'; @import 'components/_fili-breadcrumb.css'; :root { /* --- Typography Tokens --- */ --font-primary: 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-heading: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-mono: SFMono-Regular, Menlo, Monaco, Consolas, monospace; --font-size-base: 16px; --line-height-base: 1.5; --line-height-heading: 1.25; /* --- ORIGINAL BLUE & NAVY BRAND TOKENS --- */ --color-brand-primary: #1091FF; --color-brand-secondary: #0F172A; --color-brand-accent: #D12F2F; --color-brand-accent-hover: #0070E0; /* --- ORIGINAL DARK SLATE / NAVY --- */ --color-brand-dark: #17222B; --color-brand-dark-hover: #1E293B; --color-brand-dark-active: #020617; --color-brand-red: #D12F2F; --color-brand-red-hover: #A82323; --color-brand-red-dark: #B71C1C; /* --- Neutral Text Colors --- */ --color-text-main: #222222; --color-text-muted: #666666; --color-text-heading: #111111; --color-text-inverse: #ffffff; /* --- Surfaces & Borders --- */ --color-bg-body: #ffffff; --color-bg-surface: #f8f9fa; --color-bg-subtle: #f1f3f5; --color-border: #e2e8f0; --color-border-dark: rgba(255, 255, 255, 0.15); /* --- Financial Market Indicators --- */ --color-stock-up: #008000; --color-stock-down: #D12F2F; --color-stock-ref: #eab308; /* --- Radii, Shadows & Transitions --- */ --radius-sm: 3px; --radius-md: 5px; --radius-lg: 8px; --radius-full: 9999px; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 3px 8px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.12); --transition-fast: all 0.15s ease; --transition-normal: all 0.25s ease; } *, *::before, *::after { box-sizing: border-box; } html { font-size: var(--font-size-base); } body { font-family: var(--font-primary); font-size: 16px; color: var(--color-text-main); background-color: var(--color-bg-body); line-height: var(--line-height-base); margin: 0; padding: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 700; color: var(--color-text-heading); line-height: var(--line-height-heading); margin-top: 0; } a { color: var(--color-text-main); text-decoration: none; transition: var(--transition-fast); } a:hover { color: var(--color-brand-accent); } .fili-red-link, .category-page-title, .fili-nav-link.active { color: var(--color-brand-red); } .fili-red-link:hover, .category-page-title:hover { color: var(--color-brand-red-hover); } .fili-about-wrapper { width: 100%; } /* Header & Breadcrumbs */ .fili-about-header { background-color: var(--color-bg-surface); border-bottom: 1px solid var(--color-border); padding: 12px 0; margin-bottom: 24px; } .fili-about-breadcrumb { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; } .fili-about-breadcrumb li { display: inline-flex; align-items: center; } .fili-about-breadcrumb li + li::before { content: "/"; margin-right: 8px; color: var(--color-text-muted); } .fili-about-breadcrumb a { color: var(--color-text-muted); } .fili-about-breadcrumb a:hover { color: var(--fili-brand-red-hover); } /* Main Content Area */ .fili-about-content { line-height: var(--line-height-base); margin-bottom: 3em; } .fili-about-title { font-size: 18px; color: var(--fili-brand-red); text-transform: uppercase; margin-top: 25px; margin-bottom: 15px; } /* Quick Navigation Menu */ .fili-about-menu { list-style: none; padding: 16px 20px; margin: 0 0 30px 0; background-color: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px 20px; } .fili-about-menu li { margin: 0; } .fili-about-menu-link { display: inline-flex; align-items: center; color: var(--color-text-main); font-weight: 500; font-size: 14px; } .fili-about-menu-link:hover { color: var(--fili-brand-red); } .fili-about-menu-icon { margin-right: 8px; color: var(--fili-brand-red); font-size: 13px; } /* Page Sections */ .fili-about-section { padding-top: 10px; margin-bottom: 25px; scroll-margin-top: 20px; } .fili-about-section p { margin-bottom: 12px; color: var(--color-text-main); } .fili-about-section p strong { color: var(--color-text-heading); } /* Content Lists */ .fili-about-list { padding-left: 24px; margin-top: 8px; margin-bottom: 16px; } .fili-about-list li { margin-bottom: 6px; } ol.fili-about-list > li { font-weight: 600; margin-bottom: 12px; } ol.fili-about-list > li > ul { font-weight: 400; margin-top: 6px; padding-left: 20px; } /* Responsive Styles */ @media (max-width: 768px) { .fili-about-menu { grid-template-columns: 1fr; } .fili-about-title { font-size: 16px; } } .fili-breadcrumb-wrapper { margin-bottom: 16px; display: block; width: 100%; } .fili-breadcrumb-wrapper .cat-breadcrumb-trail { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; line-height: 1.4; } .fili-breadcrumb-wrapper .cat-bc-link, .fili-breadcrumb-wrapper .cat-bc-current { font-size: 14px !important; text-transform: none !important; text-decoration: none !important; transition: color 0.2s ease; } .fili-breadcrumb-wrapper .cat-bc-link { color: var(--fili-sf-text-muted, #6b7280) !important; font-weight: 500 !important; } .fili-breadcrumb-wrapper .cat-bc-link:hover { color: #A82323 !important; text-decoration: none !important; } .fili-breadcrumb-wrapper .cat-bc-current { color: #A82323 !important; font-weight: 700 !important; cursor: pointer; } .fili-breadcrumb-wrapper .cat-bc-current:hover { color: #8B1C1C !important; text-decoration: none !important; } .fili-breadcrumb-wrapper .cat-bc-sep { font-size: 10px !important; color: var(--fili-sf-text-muted, #9ca3af) !important; margin: 0 2px; } /* ========================================================================== MODULE: SHORTFORM ARTICLE CONTENT & DETAIL PAGE (_fili-shortform.css) ========================================================================== */ /* -------------------------------------------------------------------------- 1. Scoped Module Tokens & Variables -------------------------------------------------------------------------- */ .fili-shortform-container { /* Fonts */ --fili-sf-font-body: var(--font-primary, system-ui, -apple-system, sans-serif); --fili-sf-font-heading: var(--font-heading, inherit); /* Text & Brand Colors */ --fili-sf-text-main: var(--color-text-main, #222222); --fili-sf-text-muted: var(--color-text-muted, #6c757d); --fili-sf-heading: var(--color-text-heading, #111111); --fili-sf-brand: var(--color-brand-accent, #0056b3); --fili-sf-brand-hover: var(--color-brand-accent-hover, #003d80); /* Backgrounds & Borders */ --fili-sf-bg-surface: var(--color-bg-body, #ffffff); --fili-sf-bg-light: var(--color-bg-surface, #ffffff); --fili-sf-bg-subtle: var(--color-bg-subtle, #f8f9fa); --fili-sf-border: var(--color-border, #e9ecef); /* Shape & Shadows */ --fili-sf-radius-lg: var(--radius-lg, 12px); --fili-sf-radius-md: var(--radius-md, 8px); --fili-sf-radius-sm: var(--radius-sm, 4px); --fili-sf-shadow-main: var(--shadow-md, 0 4px 16px rgba(0, 0, 0, 0.05)); --fili-sf-shadow-subtle: var(--shadow-sm, 0 2px 6px rgba(0, 0, 0, 0.04)); font-family: var(--fili-sf-font-body); color: var(--fili-sf-text-main); } /* -------------------------------------------------------------------------- 2. Main Shortform Article Card & Header Structure -------------------------------------------------------------------------- */ .fili-shortform-container .fili-shortform-post { background: var(--fili-sf-bg-surface); border: 1px solid var(--fili-sf-border); border-radius: var(--fili-sf-radius-lg); padding: 40px; box-shadow: var(--fili-sf-shadow-main); overflow: hidden; /* Prevents child overflow */ } /* Article Header & Title */ .fili-shortform-container .fili-shortform-title { font-family: var(--fili-sf-font-heading); font-size: clamp(1.8rem, 3.2vw, 2.35rem); font-weight: 800; line-height: 1.3; color: var(--fili-sf-heading); margin-bottom: 20px; letter-spacing: -0.025em; } /* Metadata Bar */ .fili-shortform-container .fili-shortform-meta { font-size: 0.875rem; color: var(--fili-sf-text-muted); padding: 14px 0; } .fili-shortform-container .fili-btn-report-error { font-size: 0.825rem; padding: 4px 12px; border-radius: var(--fili-sf-radius-sm); transition: all 0.2s ease; } .fili-shortform-container .fili-btn-report-error:hover { background-color: #dc3545; color: #ffffff; border-color: #dc3545; } /* -------------------------------------------------------------------------- 3. Body Typography & Injected HTML Content (.fili-content-view) -------------------------------------------------------------------------- */ .fili-shortform-container .fili-content-view { font-size: 1.1rem; line-height: 1.7; color: var(--fili-sf-text-main); } .fili-shortform-container .fili-content-view .pTitle { display: none !important; } /* Sapo / Article Lead Box (.pHead) */ .fili-shortform-container .fili-content-view .pHead { font-size: 1.15rem; font-weight: 600; line-height: 1.75; color: var(--fili-sf-heading); background-color: rgba(0, 86, 179, 0.05); /* Brand tint */ border-left: 4px solid var(--color-brand-red); padding: 20px 24px; border-radius: 0 var(--fili-sf-radius-md) var(--fili-sf-radius-md) 0; margin-bottom: 32px; box-shadow: inset 0 0 0 1px rgba(0, 86, 179, 0.1); } /* Section Subheadings (.pSubTitle) */ .fili-shortform-container .fili-content-view .pSubTitle { font-family: var(--fili-sf-font-heading); font-size: 1.4rem; font-weight: 700; color: var(--fili-sf-heading); margin-top: 44px; margin-bottom: 18px; padding-bottom: 10px; border-bottom: 2px solid var(--fili-sf-bg-subtle); position: relative; letter-spacing: -0.01em; } .fili-shortform-container .fili-content-view .pSubTitle::after { content: ""; position: absolute; bottom: -2px; left: 0; width: 48px; height: 2px; background-color: var(--fili-sf-brand); } /* Standard Body Paragraphs (.pBody) */ .fili-shortform-container .fili-content-view .pBody, .fili-shortform-container .fili-content-view p { font-size: 16px; line-height: 1.75; color: var(--fili-sf-text-main); margin-bottom: 22px; text-align: left; word-break: break-word; } /* Center paragraph wrappers containing images */ .fili-shortform-container .fili-content-view p:has(img) { text-align: center; } /* Body Links */ .fili-shortform-container .fili-content-view a { color: var(--fili-sf-brand); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(0, 86, 179, 0.3); text-underline-offset: 3px; transition: all 0.2s ease; } .fili-shortform-container .fili-content-view a:hover { color: var(--fili-sf-brand-hover); text-decoration-color: var(--fili-sf-brand-hover); } .fili-shortform-container .fili-content-view span { font-weight: 600; color: var(--fili-sf-heading); } /* Text Selection Accent */ .fili-shortform-container .fili-content-view ::selection { background-color: rgba(0, 86, 179, 0.15); color: var(--fili-sf-heading); } /* -------------------------------------------------------------------------- 4. DB Injected Images, Tables, tbody, td & Captions -------------------------------------------------------------------------- */ /* Universal Loose Image Reset */ .fili-shortform-container .fili-content-view img, .fili-shortform-container .fili-content-view .imgCenter_Full, .fili-shortform-container .fili-content-view .imgCenter, .fili-shortform-container .fili-content-view img.zoom { max-width: 100% !important; height: auto !important; display: block; margin: 24px auto; border-radius: var(--fili-sf-radius-sm); box-shadow: var(--fili-sf-shadow-subtle); } /* Table Card Container Reset (Overrides inline style="width: 640px;") */ .fili-shortform-container .fili-content-view table.img-content { width: 100% !important; max-width: 100% !important; margin: 32px auto !important; border-collapse: separate; border-spacing: 0; background-color: var(--fili-sf-bg-light); border: 1px solid var(--fili-sf-border); border-radius: var(--fili-sf-radius-md); overflow: hidden; box-shadow: var(--fili-sf-shadow-subtle); } /* Table Body, Rows & Cells Resets */ .fili-shortform-container .fili-content-view table.img-content tbody, .fili-shortform-container .fili-content-view table.img-content tr { width: 100% !important; display: block !important; } .fili-shortform-container .fili-content-view table.img-content td { display: block !important; width: 100% !important; padding: 0 !important; text-align: center; box-sizing: border-box; } /* Image Inside Table (Overrides inline style="width: 640px; height: 360px;") */ .fili-shortform-container .fili-content-view table.img-content td img { width: 100% !important; max-width: 100% !important; height: auto !important; display: block; margin: 0 auto !important; border: 0 !important; border-radius: 0; box-shadow: none; transition: transform 0.3s ease; } .fili-shortform-container .fili-content-view table.img-content:hover td img { transform: scale(1.015); } /* Image Captions (.pCaption inside td) */ .fili-shortform-container .fili-content-view .pCaption, .fili-shortform-container .fili-content-view table.img-content .pCaption, .fili-shortform-container .fili-content-view table.img-content td .pCaption { width: 100% !important; box-sizing: border-box; font-size: 0.875rem; color: var(--fili-sf-text-muted); font-style: italic; padding: 12px 18px; background-color: var(--fili-sf-bg-subtle); border-top: 1px solid var(--fili-sf-border); text-align: center; line-height: 1.5; margin: 0; } /* -------------------------------------------------------------------------- 5. Author, Source Sign-off & Actions -------------------------------------------------------------------------- */ .fili-shortform-container .fili-content-view .pAuthor { font-size: 1rem; font-weight: 700; color: var(--fili-sf-heading); text-align: right; margin-top: 40px; margin-bottom: 4px; } .fili-shortform-container .fili-content-view .pSource { font-size: 0px; font-weight: 600; color: var(--fili-sf-text-muted); text-align: right; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 24px; } .fili-shortform-container .fili-content-view .pSource a { color: var(--fili-sf-text-muted); text-decoration: none; } .fili-shortform-container .fili-content-view .pSource a:hover { color: var(--fili-sf-brand); } /* Actions & Back Home Button */ .fili-shortform-container .fili-shortform-actions { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--fili-sf-border); display: flex; align-items: center; justify-content: flex-start; } .fili-shortform-container .btn-back-home { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; font-size: 0.95rem; font-weight: 600; color: var(--fili-sf-brand); background-color: var(--fili-sf-bg-subtle); border: 1px solid var(--fili-sf-border); border-radius: var(--fili-sf-radius-md); text-decoration: none !important; transition: all 0.2s ease; } .fili-shortform-container .btn-back-home:hover { color: #ffffff; background-color: var(--fili-sf-brand); border-color: var(--fili-sf-brand); box-shadow: var(--fili-sf-shadow-subtle); transform: translateY(-1px); } /* -------------------------------------------------------------------------- 6. Sidebar Card & Ad Containers -------------------------------------------------------------------------- */ .fili-shortform-container .fili-sidebar-widget.fili-card { background: var(--fili-sf-bg-surface); border: 1px solid var(--fili-sf-border); border-radius: var(--fili-sf-radius-md); padding: 20px; box-shadow: var(--fili-sf-shadow-subtle); } .fili-shortform-container .fili-widget-adv { text-align: center; overflow: hidden; } /* -------------------------------------------------------------------------- 7. Mobile & Responsive Adaptation -------------------------------------------------------------------------- */ @media (max-width: 768px) { .fili-shortform-container { padding-top: 12px; padding-bottom: 12px; } .fili-shortform-container .fili-shortform-post { padding: 24px 16px; border-radius: 0; border-left: none; border-right: none; box-shadow: none; } .fili-shortform-container .fili-content-view .pHead { padding: 16px; font-size: 1.05rem; } .fili-shortform-container .fili-content-view .pSubTitle { font-size: 1.25rem; } } /* ========================================================================== MODULE: VIETSTOCK FLAT CATEGORY LAYOUT (_fili-category-macro.css) ========================================================================== */ /* -------------------------------------------------------------------------- 1. Scoped Module Variables (--fili-cat-*) -------------------------------------------------------------------------- */ .fili-cat-section { /* Fonts */ --fili-cat-font-body: var(--font-primary, 'Helvetica Neue', sans-serif); --fili-cat-font-heading: var(--font-heading, 'Roboto', sans-serif); /* Surfaces */ --fili-cat-bg: var(--color-bg-body, #ffffff); /* Brand */ --fili-cat-accent: var(--color-brand-red, #D12F2F); --fili-cat-accent-hover: var(--color-brand-red-hover, #A82323); /* Header */ --fili-cat-title-bg: var(--color-brand-red, #D12F2F); --fili-cat-title-color: #ffffff; /* Badge */ --fili-cat-badge-bg: var(--color-brand-red, #D12F2F); --fili-cat-badge-text: var(--color-text-inverse, #ffffff); /* Typography */ --fili-cat-heading-color: var(--color-text-heading, #111111); --fili-cat-text-muted: var(--color-text-muted, #666666); /* Borders */ --fili-cat-border: var(--color-border, #e2e8f0); /* Radius */ --fili-cat-radius-badge: var(--radius-sm, 3px); --fili-cat-radius-thumb: var(--radius-sm, 3px); } /* -------------------------------------------------------------------------- 2. Outer Section & Container Setup -------------------------------------------------------------------------- */ .fili-cat-section { background-color: var(--fili-cat-bg); padding-top: 0; padding-bottom: 0; font-family: var(--fili-cat-font-body); } .fili-cat-container { max-width: 1280px; margin: 0 auto; padding-left: 15px; padding-right: 15px; } /* -------------------------------------------------------------------------- 3. Grid Layout Systems -------------------------------------------------------------------------- */ .fili-cat-grid { display: grid; grid-template-columns: 1fr; gap: 24px; } @media (min-width: 992px) { .fili-cat-grid { grid-template-columns: 2fr 1fr; } } .fili-cat-main-content { display: flex; flex-direction: column; } .fili-cat-row { display: grid; grid-template-columns: 1fr; gap: 24px; } @media (min-width: 768px) { .fili-cat-row { grid-template-columns: 1fr 1fr; } } .fili-cat-col { display: flex; flex-direction: column; } /* -------------------------------------------------------------------------- 4. Sidebar Column -------------------------------------------------------------------------- */ .fili-cat-sidebar { border-left: 1px solid var(--fili-cat-border); padding-left: 20px; } .fili-cat-sidebar a, .fili-cat-sidebar a:link, .fili-cat-sidebar a:visited { color: var(--fili-cat-heading-color, #111111); text-decoration: none !important; } .fili-cat-sidebar a:hover, .fili-cat-sidebar a:focus { color: var(--fili-cat-accent-hover, #A82323) !important; } .fili-cat-sticky-sidebar { position: sticky; top: 20px; } /* -------------------------------------------------------------------------- 5. Section Header -------------------------------------------------------------------------- */ .fili-cat-header { display: flex; align-items: center; margin-bottom: 12px; border-bottom: 1px solid var(--fili-cat-border); padding-bottom: 0; } .fili-cat-accent { display: none; } .fili-cat-title { margin: 0; font-family: var(--fili-cat-font-heading); font-size: 14px; font-weight: 700; color: #ffffff !important; background-color: var(--fili-cat-title-bg, #D12F2F) !important; padding: 6px 14px; display: inline-block; text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.2; } /* -------------------------------------------------------------------------- 6. Hero Featured Article -------------------------------------------------------------------------- */ .fili-cat-hero { position: relative; margin-bottom: 12px; } .fili-cat-hero-thumb { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; margin-bottom: 10px; border-radius: var(--fili-cat-radius-thumb); } .fili-cat-hero-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--transition-normal, 0.3s ease); } .fili-cat-hero:hover .fili-cat-hero-thumb img { transform: scale(1.03); } /* -------------------------------------------------------------------------- 7. Hero Badge -------------------------------------------------------------------------- */ .fili-cat-hero-badge { position: absolute; bottom: 6px; right: 6px; background: var(--fili-cat-badge-bg); color: var(--fili-cat-badge-text); font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: var(--fili-cat-radius-badge); } /* -------------------------------------------------------------------------- 8. Hero Title -------------------------------------------------------------------------- */ .fili-cat-hero-title { font-family: var(--fili-cat-font-heading); font-size: 15px; font-weight: 700; line-height: var(--line-height-heading, 1.35); margin: 0 0 6px 0; } .fili-cat-hero-title a, .fili-cat-hero-title a:link, .fili-cat-hero-title a:visited { color: var(--fili-cat-heading-color, #111111) !important; text-decoration: none !important; transition: color 0.2s ease; } .fili-cat-hero:hover .fili-cat-hero-title a, .fili-cat-hero-title a:hover { color: var(--fili-cat-accent-hover, #A82323) !important; } /* -------------------------------------------------------------------------- 9. Hero Excerpt -------------------------------------------------------------------------- */ .fili-cat-hero-excerpt { font-size: 12px; color: var(--fili-cat-text-muted); line-height: 1.4; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* -------------------------------------------------------------------------- 10. Sub-List & Compact List Items -------------------------------------------------------------------------- */ .fili-cat-sub-list, .fili-cat-compact-list { border-top: 1px dashed var(--fili-cat-border); } .fili-cat-sub-item { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--fili-cat-border); } .fili-cat-sub-item:last-child { border-bottom: none; } /* -------------------------------------------------------------------------- 11. Sub Article Thumbnail -------------------------------------------------------------------------- */ .fili-cat-sub-thumb-wrapper { flex-shrink: 0; width: 80px; height: 54px; display: block; overflow: hidden; border-radius: var(--fili-cat-radius-thumb); } .fili-cat-sub-thumb { width: 80px !important; height: 54px !important; object-fit: cover !important; display: block; transition: transform 0.2s ease; } .fili-cat-sub-item:hover .fili-cat-sub-thumb { transform: scale(1.05); } /* -------------------------------------------------------------------------- 12. Sub Article Title -------------------------------------------------------------------------- */ .fili-cat-sub-title { margin: 0; font-family: var(--fili-cat-font-heading); font-size: 12.5px; font-weight: 700; line-height: 1.35; } .fili-cat-sub-title a, .fili-cat-sub-title a:link, .fili-cat-sub-title a:visited { color: var(--fili-cat-heading-color, #111111) !important; text-decoration: none !important; transition: color 0.2s ease; } .fili-cat-sub-item:hover .fili-cat-sub-title a, .fili-cat-sub-title a:hover { color: var(--fili-cat-accent-hover, #A82323) !important; } /* -------------------------------------------------------------------------- 13. Responsive Spacing -------------------------------------------------------------------------- */ @media (max-width: 991.98px) { .fili-cat-section { padding-top: 0; padding-bottom: 0; } .fili-cat-container { padding-left: 12px; padding-right: 12px; } .fili-cat-grid { gap: 20px; } .fili-cat-sidebar { border-left: none; border-top: 1px solid var(--fili-cat-border); padding-left: 0; padding-top: 20px; } } /* -------------------------------------------------------------------------- 14. Mobile Spacing -------------------------------------------------------------------------- */ @media (max-width: 767.98px) { .fili-cat-section.container, .fili-cat-container { padding-left: 12px !important; padding-right: 12px !important; } .fili-cat-grid, .fili-cat-row { gap: 16px; } .fili-cat-header { margin-bottom: 10px; } .fili-cat-title { font-size: 13px; padding: 6px 12px; } .fili-cat-sub-item { gap: 10px; padding: 9px 0; } .fili-cat-sub-thumb-wrapper, .fili-cat-sub-thumb { width: 76px !important; height: 52px !important; } } #heatmap-section { background-color: transparent; color: var(--color-text-body, inherit); padding: 24px 0; } #heatmap-section .heatmap-container { max-width: var(--fili-container-max, 1200px); margin: 0 auto; background-color: transparent; padding: 0; border-radius: var(--fili-feat-radius-md, 8px); } #heatmap-section .heatmap-header { margin-bottom: 16px; display: flex; align-items: center; } #heatmap-section .heatmap-title { font-family: var(--fili-feat-font-heading, var(--font-heading, sans-serif)); font-size: 16px; font-weight: 700; color: var(--fili-feat-heading-color, var(--color-text-heading, #0f172a)); margin: 0; position: relative; padding-left: 12px; line-height: 1.3; } #heatmap-section .heatmap-title::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 18px; background-color: var(--color-brand-red, #D12F2F); border-radius: 2px; } #heatmap-section .heatmap-iframe-wrapper { width: 100%; position: relative; } #heatmap-section .heatmap-iframe-container { position: relative; width: 100%; height: 650px; border-radius: var(--fili-feat-radius-md, 8px) var(--fili-feat-radius-md, 8px) 0 0; overflow: hidden; border: 1px solid var(--fili-feat-border-color, #e2e8f0); background-color: transparent; } #heatmap-section .heatmap-iframe { width: 100%; height: 100%; border: 0; display: block; } #heatmap-section .heatmap-board-footer { flex-shrink: 0; background: var(--fili-s3-card-bg, #ffffff); padding: 8px 12px; font-size: 11px; text-align: right; color: var(--fili-s3-text-muted, #666666); border-left: 1px solid var(--fili-s3-border, #e2e8f0); border-right: 1px solid var(--fili-s3-border, #e2e8f0); border-bottom: 1px solid var(--fili-s3-border, #e2e8f0); border-radius: 0 0 var(--fili-s3-radius-card, 8px) var(--fili-s3-radius-card, 8px); } #heatmap-section .heatmap-board-footer a { color: #0a58ca; text-decoration: none; font-weight: 700; transition: color var(--transition-fast, 0.2s ease); } #heatmap-section .heatmap-board-footer a:hover { color: var(--fili-s3-primary-hover, #A82323); text-decoration: underline; } /* Responsive Scaling */ @media (max-width: 768px) { #heatmap-section { padding: 16px 0; } #heatmap-section .heatmap-iframe-container { height: 500px; } #heatmap-section .heatmap-title { font-size: 16px; } } .fili-article-wrapper > .fili-action-bar-left { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 12px; align-self: flex-start; flex-shrink: 0; z-index: 10; padding-top: 180px; } .fili-shortform-meta > .fili-action-bar-left { display: none; } .fili-action-btn { width: 38px; height: 38px; border-radius: 50%; border: none; display: inline-flex; align-items: center; justify-content: center; color: #ffffff !important; /* !important prevents .fili-content-view a from overriding */ font-size: 15px; text-decoration: none !important; transition: transform 0.2s ease, opacity 0.2s ease; cursor: pointer; } .fili-action-btn:hover { transform: translateY(-2px); opacity: 0.9; color: #ffffff !important; /* !important ensures hover stays white, not red */ text-decoration: none !important; } /* Individual Button Colors */ .fili-action-btn.btn-facebook { background-color: #3b5998; } .fili-action-btn.btn-print { background-color: #38bdf8; } .fili-action-btn.btn-save { background-color: #0284c7; } .fili-action-btn.btn-email { background-color: #475569; } .fili-action-btn.btn-report { background-color: #e11d48; } /* ========================================= 2. TABLET & MOBILE VIEW (max-width: 768px) ========================================= */ @media (max-width: 768px) { .fili-article-wrapper { flex-direction: column; } .fili-article-wrapper > .fili-action-bar-left { display: none !important; } .fili-shortform-meta > .fili-action-bar-left { display: flex !important; position: relative; top: 0; flex-direction: row; /* Makes it horizontal */ gap: 12px; align-items: center; padding-top: 0; } .fili-shortform-meta > .fili-action-bar-left .fili-action-btn { width: 34px; height: 34px; font-size: 14px; } } body.no-scroll { overflow: hidden !important; } .fili-lightbox { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #000000; z-index: 999999; display: flex; align-items: center; justify-content: center; } .fili-lightbox-close { position: absolute; top: 15px; right: 20px; background: transparent; border: none; color: #ffffff; font-size: 36px; cursor: pointer; z-index: 1000000; line-height: 1; } .fili-lightbox-container { display: flex; width: 100%; height: 100%; } .fili-lightbox-main { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; background-color: #000000; padding: 20px; } .fili-lightbox-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; max-width: 90%; max-height: 90vh; } #fili-lightbox-img { max-width: 100%; max-height: 75vh; object-fit: contain; box-shadow: 0 4px 20px rgba(0,0,0,0.5); } .fili-lightbox-caption { color: #d1d5db; font-size: 0.9rem; margin-top: 12px; text-align: center; max-width: 800px; } .fili-lightbox-counter { color: #9ca3af; font-size: 0.8rem; margin-top: 6px; } .fili-lightbox-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.4); color: #ffffff; border: none; font-size: 28px; padding: 16px 12px; cursor: pointer; z-index: 10; transition: background 0.2s; } .fili-lightbox-arrow:hover { background: rgba(255,255,255,0.2); } .fili-lightbox-arrow.fili-prev { left: 15px; } .fili-lightbox-arrow.fili-next { right: 15px; } /* Right Sidebar Metadata Panel */ .fili-lightbox-sidebar { width: 320px; background-color: #18181b; border-left: 1px solid #27272a; padding: 40px 24px; color: #ffffff; display: flex; flex-direction: column; } .fili-lightbox-meta-date { font-size: 0.825rem; color: #a1a1aa; margin-bottom: 12px; } .fili-lightbox-meta-title { font-size: 1.15rem; font-weight: 700; line-height: 1.4; color: #f4f4f5; margin-bottom: 20px; } .fili-lightbox-meta-source { font-size: 0.8rem; color: #71717a; letter-spacing: 0.05em; margin-top: auto; } @media (max-width: 991px) { .fili-lightbox-container { flex-direction: column; } .fili-lightbox-sidebar { width: 100%; height: auto; padding: 16px; } } /* ========================================================================== MODULE: FILI LONG-FORM CONTENT ========================================================================== */ /* Universal element constraint to contain broad HTML elements injected from CMS */ .fili-longform-content * { max-width: 100%; box-sizing: border-box; } /* -------------------------------------------------------------------------- 1. Root Canvas Wrapper & Theme Layout -------------------------------------------------------------------------- */ .fili-longform-wrapper { width: 100%; min-height: 100vh; margin: 0; padding: 0; box-sizing: border-box; background-color: var(--color-bg-body); color: var(--color-text-main); font-family: var(--font-primary); font-size: 19px; line-height: var(--line-height-base); -webkit-font-smoothing: antialiased; transition: var(--transition-normal); overflow-x: clip; } .fili-longform { width: 100%; padding-top: 0; padding-bottom: 64px; } .fili-longform-content::after { content: ""; display: table; clear: both; } /* -------------------------------------------------------------------------- 2. Reading Column Constraint (~740px centered measure) -------------------------------------------------------------------------- */ .fili-longform-content > p, .fili-longform-content > blockquote, .fili-longform-content > ul, .fili-longform-content > ol, .fili-longform-content .pBody, .fili-longform-content .pHead, .fili-longform-content .pTitle, .fili-longform-content .hTitle, .fili-longform-content .pSubTitle, .fili-longform-content .pAuthor, .fili-longform-content .pCaption, .fili-longform-content .pPublishTimeSource { max-width: 740px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; box-sizing: border-box; } .fili-longform-content p:empty, .fili-longform-content .pBody:empty, .fili-longform-content span:empty, .fili-longform-content .rrHandle { display: none !important; } /* -------------------------------------------------------------------------- 3. Typography & CMS Content Elements -------------------------------------------------------------------------- */ /* Article Main Title (.pTitle / .hTitle / h1) */ .fili-longform-content .pTitle, .fili-longform-content .hTitle, .fili-longform-content h1 { font-family: var(--font-heading); font-size: 38px; font-weight: 700; line-height: var(--line-height-heading); color: var(--color-text-heading); text-align: center; margin-top: 36px; margin-bottom: 24px; } /* Lead Paragraph / Sapo (.pHead) */ .fili-longform-content .pHead { font-family: var(--font-heading); font-size: 21px; font-weight: 500; line-height: 1.6; color: var(--color-text-heading); margin-top: 0; margin-bottom: 36px; padding-left: 20px; border-left: 4px solid var(--color-brand-red); } /* Standard Paragraph Body (.pBody / p) */ .fili-longform-content p, .fili-longform-content .pBody { font-size: 19px; line-height: 1.8; margin-top: 0; margin-bottom: 24px; color: var(--color-text-main); word-break: break-word; } .fili-longform-content p strong, .fili-longform-content p b { font-weight: 700; color: var(--color-text-heading); } .fili-longform-content p em, .fili-longform-content p i { font-style: italic; } /* Article Links */ .fili-longform-content a { color: var(--color-brand-red); text-decoration: underline; text-underline-offset: 4px; transition: var(--transition-fast); } .fili-longform-content a:hover { color: var(--color-brand-red-hover); } /* Editorial Blockquotes */ .fili-longform-content blockquote { border-left: 4px solid var(--color-brand-red); padding: 18px 24px; margin-top: 32px; margin-bottom: 32px; font-size: 20px; font-style: italic; color: var(--color-text-heading); background-color: var(--color-bg-surface); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; } /* Captions (.pCaption / caption) */ .fili-longform-content .pCaption, .fili-longform-content caption { display: block; width: 100%; font-family: var(--font-heading); font-size: 14px; line-height: 1.6; color: var(--color-text-muted); text-align: center; margin-top: 8px; margin-bottom: 32px; font-style: italic; } .fili-longform-content .pCaption br { content: ""; display: block; margin-top: 6px; } .fili-longform-content .pCaption br + br, .fili-longform-content .pCaption br:first-child, .fili-longform-content .pCaption br:last-child { display: none !important; } /* Author Credits (.pAuthor) */ .fili-longform-content .pAuthor { font-family: var(--font-heading); font-size: 15px; font-weight: 700; color: var(--color-text-heading); text-align: right; margin-top: 24px; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; } .fili-longform-content .pAuthor a { color: var(--color-text-heading); text-decoration: none; } .fili-longform-content .pAuthor a:hover { color: var(--color-brand-red); } /* Timestamp and Source Info */ .fili-longform-content .pPublishTimeSource { font-family: var(--font-heading); font-size: 13px; color: var(--color-text-muted); margin-top: 16px; margin-bottom: 0; } .fili-longform-content .pPublishTimeSource.right { text-align: right; } /* Hide Legacy CMS Source Tag */ .fili-longform-content .pSource { display: none !important; } /* -------------------------------------------------------------------------- 4. Media & Image Breakout Layouts -------------------------------------------------------------------------- */ .fili-longform-content img { max-width: 100%; height: auto; display: block; } /* Full Viewport Width Image Breakout (.imgCenter_Full) */ .fili-longform-content .imgCenter_Full { width: 100vw !important; max-width: 100vw !important; position: relative; left: 50%; right: 50%; margin-left: -50vw !important; margin-right: -50vw !important; margin-top: 36px; margin-bottom: 36px; object-fit: cover; border-radius: 0; } /* Remove paragraph padding constraint when wrapping full bleed images */ .fili-longform-content p:has(.imgCenter_Full) { max-width: 100% !important; padding: 0 !important; margin: 0 !important; } /* Medium Expanded Center Media (.imgCenter) */ .fili-longform-content .imgCenter { width: 100%; max-width: 960px; margin: 40px auto 16px; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .fili-longform-content p:has(.imgCenter) { max-width: 960px !important; padding-left: 0; padding-right: 0; } /* Floated Left & Right Image Layouts */ .fili-longform-content .pImgBody { max-width: 740px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; clear: both; } .fili-longform-content .imgBodyRight { float: right; max-width: 420px; margin: 8px 0 20px 28px; } .fili-longform-content .imgBodyLeft { float: left; max-width: 420px; margin: 8px 28px 20px 0; } .fili-longform-content .imgWidthLR { width: 100%; max-width: 420px; border-radius: var(--radius-md); } /* -------------------------------------------------------------------------- 5. Embedded Video & CMS Callout Tables -------------------------------------------------------------------------- */ .fili-longform-content iframe { display: block; width: 100%; max-width: 740px; aspect-ratio: 16 / 9; height: auto !important; margin: 36px auto; border: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); } .fili-longform-content p:has(iframe) { max-width: 740px !important; padding: 0; } /* Callout Tables / Embedded Expert Quote Boxes */ .fili-longform-content table { display: block; width: 100% !important; max-width: 740px !important; overflow-x: auto; -webkit-overflow-scrolling: touch; height: auto !important; margin: 40px auto !important; border-collapse: separate; border-spacing: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .fili-longform-content table td { padding: 28px 32px !important; border: none !important; border-left: 4px solid var(--color-brand-red) !important; background-color: var(--color-bg-surface) !important; } .fili-longform-content table td p { font-size: 17px; line-height: 1.75; margin-bottom: 16px; color: var(--color-text-main); } .fili-longform-content table td p:last-child { margin-bottom: 0; } /* -------------------------------------------------------------------------- 6. Custom Theme Overrides (Extending Master Tokens) -------------------------------------------------------------------------- */ /* Dark Slate Theme (.article-dark) */ .fili-longform-wrapper.article-dark { background-color: var(--color-brand-dark); color: #cbd5e1; } .fili-longform-wrapper.article-dark .fili-longform-content .pTitle, .fili-longform-wrapper.article-dark .fili-longform-content .hTitle, .fili-longform-wrapper.article-dark .fili-longform-content h1, .fili-longform-wrapper.article-dark .fili-longform-content .pHead, .fili-longform-wrapper.article-dark .fili-longform-content strong, .fili-longform-wrapper.article-dark .fili-longform-content .pAuthor { color: var(--color-text-inverse); } .fili-longform-wrapper.article-dark .fili-longform-content p, .fili-longform-wrapper.article-dark .fili-longform-content .pBody { color: #cbd5e1; } .fili-longform-wrapper.article-dark .fili-longform-content .pCaption, .fili-longform-wrapper.article-dark .fili-longform-content .pPublishTimeSource { color: #94a3b8; } .fili-longform-wrapper.article-dark blockquote, .fili-longform-wrapper.article-dark table td { background-color: var(--color-brand-dark-hover) !important; } /* OLED Black Theme (.article-black) */ .fili-longform-wrapper.article-black { background-color: var(--color-brand-dark-active); color: #e2e8f0; } .fili-longform-wrapper.article-black .fili-longform-content .pTitle, .fili-longform-wrapper.article-black .fili-longform-content .hTitle, .fili-longform-wrapper.article-black .fili-longform-content h1, .fili-longform-wrapper.article-black .fili-longform-content .pHead, .fili-longform-wrapper.article-black .fili-longform-content strong, .fili-longform-wrapper.article-black .fili-longform-content .pAuthor { color: var(--color-text-inverse); } .fili-longform-wrapper.article-black .fili-longform-content p, .fili-longform-wrapper.article-black .fili-longform-content .pBody { color: #e2e8f0; } .fili-longform-wrapper.article-black blockquote, .fili-longform-wrapper.article-black table td { background-color: rgba(255, 255, 255, 0.05) !important; } /* Deep Purple Theme (.article-purple) */ .fili-longform-wrapper.article-purple { background-color: #3b0764; color: #f3e8ff; } .fili-longform-wrapper.article-purple .fili-longform-content .pTitle, .fili-longform-wrapper.article-purple .fili-longform-content .hTitle, .fili-longform-wrapper.article-purple .fili-longform-content h1, .fili-longform-wrapper.article-purple .fili-longform-content .pHead, .fili-longform-wrapper.article-purple .fili-longform-content strong, .fili-longform-wrapper.article-purple .fili-longform-content .pAuthor { color: var(--color-text-inverse); } .fili-longform-wrapper.article-purple .fili-longform-content p, .fili-longform-wrapper.article-purple .fili-longform-content .pBody { color: #f3e8ff; } .fili-longform-wrapper.article-purple blockquote, .fili-longform-wrapper.article-purple table td { background-color: rgba(0, 0, 0, 0.2) !important; } /* -------------------------------------------------------------------------- 7. Mobile Responsive Adaptation -------------------------------------------------------------------------- */ @media screen and (max-width: 992px) { .fili-longform-content .imgCenter { max-width: 100%; border-radius: 0; } .fili-longform-content .imgBodyRight, .fili-longform-content .imgBodyLeft { max-width: 340px; } } @media screen and (max-width: 768px) { .fili-longform-wrapper { font-size: 17px; line-height: 1.7; } .fili-longform-content .pTitle, .fili-longform-content .hTitle, .fili-longform-content h1 { font-size: 28px; margin-top: 20px; margin-bottom: 20px; } .fili-longform-content .pHead { font-size: 19px; padding-left: 14px; margin-bottom: 28px; } .fili-longform-content p, .fili-longform-content .pBody { font-size: 17px; margin-bottom: 20px; } .fili-longform-content .imgBodyRight, .fili-longform-content .imgBodyLeft, .fili-longform-content .imgWidthLR { float: none; width: 100%; max-width: 100%; margin: 20px 0; } .fili-longform-content table td { padding: 20px !important; } } /* ========================================================================== Fili Multimedia Section Component Module: wwwroot/css/components/_fili-multimedia.css ========================================================================== */ #fili-multimedia { --fili-mm-accent-red: var(--color-brand-red, #D12F2F); --fili-mm-accent-hover: var(--color-brand-red-dark, #991b1b); --fili-mm-accent-bright: #ff4d4d; --fili-mm-dark-bg: var(--color-brand-dark, #0f172a); background-color: var(--fili-mm-dark-bg); color: var(--color-text-inverse, #ffffff); padding: 40px 0; } #fili-multimedia a { text-decoration: none; color: inherit; transition: var(--transition-fast, color 0.2s ease); } /* Container inherits global Bootstrap container dimensions */ #fili-multimedia .container, #fili-multimedia .fili-container { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } /* Section Header Navigation */ #fili-multimedia .fili-multimedia-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; } #fili-multimedia .fili-header-title-wrap { display: flex; align-items: center; } #fili-multimedia .fili-header-title { font-family: var(--font-heading, sans-serif); font-size: 27px; font-weight: 800; color: var(--color-text-inverse, #ffffff); margin: 0; border: 2px solid var(--fili-mm-accent-red); padding: 4px 14px; display: inline-block; text-transform: uppercase; line-height: 1.2; border-radius: var(--radius-sm, 4px); letter-spacing: 0.5px; } #fili-multimedia .fili-header-title a { color: var(--color-text-inverse, #ffffff); display: inline-flex; align-items: center; gap: 8px; } #fili-multimedia .fili-header-title a:hover { color: var(--fili-mm-accent-bright); } #fili-multimedia .fili-dot { width: 8px; height: 8px; background-color: var(--fili-mm-accent-red); border-radius: 50%; display: inline-block; box-shadow: 0 0 8px var(--fili-mm-accent-red); } /* Slash Separator between Title and Navigation */ #fili-multimedia .fili-multimedia-slash { font-family: var(--font-primary, sans-serif); font-size: 16px; font-weight: 300; color: rgba(255, 255, 255, 0.4); line-height: 1; user-select: none; } #fili-multimedia .fili-header-nav { display: flex; gap: 20px; list-style: none; align-items: center; margin: 0; padding: 0; } #fili-multimedia .fili-header-nav li { list-style: none; margin: 0; padding: 0; } #fili-multimedia .fili-header-nav .fili-nav-link { font-family: var(--font-primary, sans-serif); font-size: 16px; font-weight: 600; color: rgba(255, 255, 255, 0.8); position: relative; padding: 2px 0; transition: color 0.2s ease; } #fili-multimedia .fili-header-nav .fili-nav-link:hover, #fili-multimedia .fili-header-nav .fili-nav-link.active { color: var(--fili-mm-accent-bright); } #fili-multimedia .fili-header-nav .fili-nav-link.active::after { content: ""; position: absolute; bottom: -4px; left: 0; right: 0; height: 2px; background-color: var(--fili-mm-accent-bright); border-radius: 2px; } /* Outer Row Layout & Column Flex Stretch Fixes */ #fili-multimedia .fili-multimedia-wrapper { border-radius: var(--radius-md, 8px); overflow: hidden; box-shadow: var(--shadow-lg, 0 10px 25px rgba(0, 0, 0, 0.3)); background-color: var(--fili-mm-dark-bg); } #fili-multimedia .fili-multimedia-wrapper > [class*="col-"] { display: flex; flex-direction: column; } /* Main Hero Article Card */ #fili-multimedia .fili-hero-card { position: relative; min-height: 460px; height: 100%; background-color: var(--fili-mm-dark-bg); display: flex; flex-direction: column; justify-content: flex-end; padding: 30px; overflow: hidden; flex: 1 1 auto; } #fili-multimedia .fili-hero-image-wrap { position: absolute; inset: 0; display: block; overflow: hidden; } #fili-multimedia .fili-hero-image-wrap img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition-normal, transform 0.3s ease); } #fili-multimedia .fili-hero-card:hover .fili-hero-image-wrap img { transform: scale(1.04); } #fili-multimedia .fili-hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 23, 42, 0.15) 0%, rgba(15, 23, 42, 0.75) 60%, rgba(15, 23, 42, 0.98) 100%); z-index: 1; } #fili-multimedia .fili-hero-content { position: relative; z-index: 2; width: 100%; } #fili-multimedia .fili-hero-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; } #fili-multimedia .fili-badge { font-family: var(--font-primary, sans-serif); font-size: 11px; font-weight: 700; letter-spacing: 0.5px; color: var(--fili-mm-accent-bright); text-transform: uppercase; } #fili-multimedia .fili-date { font-family: var(--font-primary, sans-serif); font-size: 12px; font-weight: 400; color: rgba(255, 255, 255, 0.75); } #fili-multimedia .fili-hero-title { font-family: var(--font-heading, sans-serif); font-size: 25px; font-weight: 700; line-height: var(--line-height-heading, 1.35); color: var(--color-text-inverse, #ffffff); margin: 0; } #fili-multimedia .fili-hero-title a { color: var(--color-text-inverse, #ffffff); transition: color 0.2s ease; } #fili-multimedia .fili-hero-card:hover .fili-hero-title a, #fili-multimedia .fili-hero-title a:hover { color: var(--fili-mm-accent-bright, #ff4d4d) !important; } #fili-multimedia .fili-sidebar-list { background-color: var(--color-bg-body, #ffffff); color: var(--color-text-main, #333333); padding: 24px 20px; display: flex; flex-direction: column; justify-content: space-between; flex: 1 1 auto; height: 100%; } #fili-multimedia .fili-side-article { display: flex; align-items: flex-start; gap: 12px; border-bottom: 1px dashed var(--color-border, #e2e8f0); padding-bottom: 14px; margin-bottom: 14px; } #fili-multimedia .fili-side-article:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; } /* Sidebar Thumbnail Styling */ #fili-multimedia .fili-side-thumb { flex-shrink: 0; width: 85px; height: 58px; border-radius: var(--radius-sm, 4px); overflow: hidden; display: block; background-color: var(--color-bg-subtle, #f8fafc); } #fili-multimedia .fili-side-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.2s ease; } #fili-multimedia .fili-side-article:hover .fili-side-thumb img { transform: scale(1.05); } /* Sidebar Article Content */ #fili-multimedia .fili-side-info { flex: 1; min-width: 0; } #fili-multimedia .fili-side-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; } #fili-multimedia .fili-side-category { font-family: var(--font-primary, sans-serif); font-size: 11px; font-weight: 500; color: var(--fili-mm-accent-red, #D12F2F); text-transform: uppercase; letter-spacing: 0.4px; text-decoration: none; display: inline-block; padding: 2px 0; transition: color 0.2s ease, text-decoration 0.2s ease; } #fili-multimedia a.fili-side-category:hover, #fili-multimedia .fili-side-category:hover { color: var(--color-brand-red-dark, #991b1b); text-decoration: underline; } #fili-multimedia a.fili-side-category:focus-visible { outline: 2px solid var(--color-brand-red, #D12F2F); outline-offset: 2px; border-radius: 2px; } #fili-multimedia .fili-side-date { font-family: var(--font-primary, sans-serif); font-size: 12px; color: var(--color-text-muted, #666666); } #fili-multimedia .fili-side-title { font-family: var(--font-heading, sans-serif); font-size: 18px; font-weight: 600; line-height: 1.35; color: var(--color-text-heading, #111111); margin: 0; overflow: hidden; } #fili-multimedia .fili-side-title a { color: var(--color-text-heading, #111111); transition: color 0.2s ease; } #fili-multimedia .fili-side-article:hover .fili-side-title a, #fili-multimedia .fili-side-title a:hover { color: var(--fili-mm-accent-hover, #991b1b) !important; } /* Mobile & Tablet Adjustments */ @media (max-width: 992px) { #fili-multimedia .fili-hero-card { min-height: 380px; } } @media (max-width: 576px) { #fili-multimedia .fili-multimedia-header { flex-direction: column; align-items: flex-start; gap: 12px; } #fili-multimedia .fili-multimedia-slash { display: none; } #fili-multimedia .fili-hero-title { font-size: 20px; } #fili-multimedia .fili-hero-card { padding: 20px; min-height: 320px; } } .fili-pagination-wrapper { /* Fonts */ --fili-pag-font-body: var(--font-primary, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif); --fili-pag-font-heading: var(--font-heading, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif); --fili-pag-active-bg: #FF5555; --fili-pag-active-bg-hover: #e04444; --fili-pag-active-color: #ffffff; /* Neutral & Surface Colors */ --fili-pag-bg: var(--color-bg-subtle, #f1f5f9); --fili-pag-bg-hover: #e2e8f0; --fili-pag-border: var(--color-border, #e2e8f0); --fili-pag-border-hover: #cbd5e1; --fili-pag-text: #475569; --fili-pag-text-hover: var(--color-text-heading, #0f172a); --fili-pag-text-muted: var(--color-text-muted, #64748b); --fili-pag-disabled-color: #cbd5e1; /* Radii & Shadows */ --fili-pag-radius-btn: var(--radius-sm, 6px); --fili-pag-radius-popover: var(--radius-md, 10px); --fili-pag-shadow-active: 0 2px 8px rgba(255, 85, 85, 0.28); --fili-pag-shadow-popover: 0 10px 25px -5px rgba(15, 23, 42, 0.15), 0 8px 10px -6px rgba(15, 23, 42, 0.05); display: inline-block; position: relative; font-family: var(--fili-pag-font-body); } .fili-pagination { display: inline-flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; } .fili-pagination .page-item { display: inline-block; } /* Base Page Buttons */ .fili-pagination .page-link { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 10px; border-radius: var(--fili-pag-radius-btn); background-color: var(--fili-pag-bg); border: 1px solid var(--fili-pag-border); color: var(--fili-pag-text); font-family: var(--fili-pag-font-heading); font-size: 13px; font-weight: 600; text-decoration: none; transition: background-color var(--transition-fast, 0.15s ease), border-color var(--transition-fast, 0.15s ease), color var(--transition-fast, 0.15s ease), box-shadow var(--transition-fast, 0.15s ease); cursor: pointer; box-shadow: none; } .fili-pagination .page-link:hover { background-color: var(--fili-pag-bg-hover); border-color: var(--fili-pag-border-hover); color: var(--fili-pag-text-hover); } /* Active Page Button (Red Accent) */ .fili-pagination .page-item.active .page-link { background-color: var(--fili-pag-active-bg) !important; border-color: var(--fili-pag-active-bg) !important; color: var(--fili-pag-active-color) !important; box-shadow: var(--fili-pag-shadow-active); } .fili-pagination .page-item.active .page-link:hover { background-color: var(--fili-pag-active-bg-hover) !important; border-color: var(--fili-pag-active-bg-hover) !important; } /* Disabled Page Button */ .fili-pagination .page-item.disabled .page-link { background-color: var(--fili-pag-bg); border-color: var(--fili-pag-border); color: var(--fili-pag-disabled-color); cursor: not-allowed; pointer-events: none; } .page-jump-popover { display: none; position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--color-bg-body, #ffffff); border: 1px solid var(--fili-pag-border); border-radius: var(--fili-pag-radius-popover); padding: 8px 10px; box-shadow: var(--fili-pag-shadow-popover); z-index: 1050; white-space: nowrap; } /* Popover Arrow Pointer */ .page-jump-popover::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border-width: 6px; border-style: solid; border-color: var(--color-bg-body, #ffffff) transparent transparent transparent; } .page-jump-popover.show { display: block; animation: filiPopoverFadeIn var(--transition-fast, 0.15s ease) ease-out; } @keyframes filiPopoverFadeIn { from { opacity: 0; transform: translate(-50%, 4px); } to { opacity: 1; transform: translate(-50%, 0); } } .page-jump-popover .jump-title { display: block; font-size: 11px; font-weight: 600; color: var(--fili-pag-text-muted); margin-bottom: 4px; } .page-jump-input { width: 65px; height: 28px; font-size: 12px; text-align: center; border-radius: var(--fili-pag-radius-btn); border: 1px solid var(--fili-pag-border); padding: 2px 4px; outline: none; transition: border-color var(--transition-fast, 0.15s ease), box-shadow var(--transition-fast, 0.15s ease); } .page-jump-input:focus { border-color: var(--fili-pag-active-bg); box-shadow: 0 0 0 2px rgba(255, 85, 85, 0.2); } .btn-jump-go { background-color: var(--fili-pag-active-bg); border: 1px solid var(--fili-pag-active-bg); color: var(--fili-pag-active-color); font-family: var(--fili-pag-font-heading); font-weight: 600; font-size: 12px; height: 28px; padding: 0 10px; border-radius: var(--fili-pag-radius-btn); display: inline-flex; align-items: center; cursor: pointer; transition: background-color var(--transition-fast, 0.15s ease), border-color var(--transition-fast, 0.15s ease); } .btn-jump-go:hover { background-color: var(--fili-pag-active-bg-hover); border-color: var(--fili-pag-active-bg-hover); } body { } /* ========================================================================== MODULE: FILI MODERN ARTICLE QUIZ & INFO CARDS ========================================================================== */ /* Quiz Outer Table Styling */ .fili-content-view table.quizz, .fili-content-view table.img-content.quizz { width: 100% !important; margin: 24px 0 !important; border-collapse: separate !important; border-spacing: 0 !important; border: 1px solid var(--fili-sf-border, #e2e8f0); border-radius: 12px; background: #ffffff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03); overflow: hidden; } .fili-content-view table.quizz td.pCaption { padding: 16px 20px; font-size: 1.05rem; font-weight: 700; color: var(--fili-sf-text-heading, #111827); border-bottom: 1px solid var(--fili-sf-border, #e2e8f0); background-color: var(--fili-sf-bg-surface, #f8fafc); } .fili-content-view table.quizz td.pCaption h3 { font-size: 1.1rem; margin: 0; font-weight: 700; } /* Option List Container */ .fili-content-view table.quizz tr > td > ul { margin: 16px !important; padding: 0 !important; list-style: none !important; counter-reset: quiz-option; } /* Default Option Item */ .fili-content-view table.quizz:not(.quiz-info-card) ul li { counter-increment: quiz-option; display: flex; flex-direction: column; position: relative; width: 100%; margin-bottom: 10px; padding: 12px 16px 12px 52px; background-color: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; cursor: pointer; font-weight: 500; font-size: 0.975rem; color: #334155; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); box-sizing: border-box; } /* ANTI-SPOILER RULE: Hide font-weight spoilers on or tags before choice */ .fili-content-view table.quizz:not(.answered) ul li strong, .fili-content-view table.quizz:not(.answered) ul li b { font-weight: 500 !important; color: inherit !important; } /* Letter Badge (A, B, C, D) */ .fili-content-view table.quizz:not(.quiz-info-card) ul li::before { content: counter(quiz-option, upper-latin); position: absolute; left: 14px; top: 10px; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background-color: #cbd5e1; color: #334155; font-weight: 700; font-size: 0.8rem; transition: all 0.2s ease; } /* Hover Effect (Before Answered) */ .fili-content-view table.quizz:not(.answered):not(.quiz-info-card) ul li:hover { background-color: #f1f5f9; border-color: var(--fili-sf-brand-red, #D12F2F); transform: translateX(4px); } .fili-content-view table.quizz:not(.answered):not(.quiz-info-card) ul li:hover::before { background-color: var(--fili-sf-brand-red, #D12F2F); color: #ffffff; } /* Answered States */ .fili-content-view table.quizz.answered ul li { cursor: default; opacity: 0.6; } /* Correct Choice */ .fili-content-view table.quizz.answered ul li.correct { opacity: 1 !important; background-color: #f0fdf4 !important; color: #166534 !important; border-color: #86efac !important; } .fili-content-view table.quizz.answered ul li.correct strong, .fili-content-view table.quizz.answered ul li.correct b { font-weight: 700 !important; } .fili-content-view table.quizz.answered ul li.correct::before { background-color: #22c55e !important; color: #ffffff !important; } /* Wrong Choice (Selected by user) */ .fili-content-view table.quizz.answered ul li.selected:not(.correct) { opacity: 1 !important; background-color: #fef2f2 !important; color: #991b1b !important; border-color: #fca5a5 !important; } .fili-content-view table.quizz.answered ul li.selected:not(.correct)::before { background-color: #ef4444 !important; color: #ffffff !important; } /* Answer Explanation */ .fili-content-view table.quizz ul li p.explaination { display: block !important; margin-top: 10px !important; padding: 10px 14px !important; background-color: rgba(255, 255, 255, 0.85); border-left: 3px solid var(--fili-sf-brand-red, #D12F2F); border-radius: 4px; font-size: 0.9rem; font-style: italic; font-weight: 400; color: #334155 !important; line-height: 1.5; } .fili-content-view table.quizz.quiz-info-card ul li.is-info-item { padding: 12px 16px !important; background-color: #f8fafc !important; border: 1px solid #e2e8f0 !important; border-left: 4px solid var(--fili-sf-brand-red, #D12F2F) !important; border-radius: 6px !important; cursor: default !important; margin-bottom: 10px; font-weight: 400 !important; opacity: 1 !important; } .fili-content-view table.quizz.quiz-info-card ul li.is-info-item::before { display: none !important; } /* End Quiz Score Summary Card */ .fili-content-view .quizz-result { margin-top: 32px !important; padding: 24px !important; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; text-align: center; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); } .fili-content-view .quizz-result-title { font-family: var(--fili-sf-font-heading, sans-serif); font-size: 1.1rem; font-weight: 700; color: var(--fili-sf-brand-red, #D12F2F); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; } .fili-content-view .quizz-result .message { display: block; font-size: 1rem; color: #475569; margin-bottom: 12px; } .fili-content-view .quizz-result .score-display { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 2rem; font-weight: 800; } .fili-content-view .quizz-result .score-display .correct { color: #22c55e; } .fili-content-view .quizz-result .score-display .correct::after { content: " /"; color: #94a3b8; font-weight: 400; } .fili-content-view .quizz-result .score-display .total { color: var(--fili-sf-brand-red, #D12F2F); } /* ========================================================================== MODULE: REPORT ERROR COMPONENT ========================================================================== */ .fili-btn-report-error { font-size: 0.825rem; padding: 4px 12px; border-radius: var(--radius-sm, 4px); color: var(--color-text-muted, #6b7280); border: 1px solid var(--color-border, #e2e8f0); background: transparent; transition: all 0.2s ease; } .fili-btn-report-error:hover { background-color: var(--color-brand-red, #D12F2F); color: #ffffff; border-color: var(--color-brand-red, #D12F2F); } .fili-report-error-modal .modal-content { border-radius: var(--radius-md, 8px); border: none; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); } .fili-report-error-modal .modal-header { border-bottom: 1px solid var(--color-border, #e2e8f0); } .fili-report-error-modal .fili-btn-primary { background-color: var(--color-brand-red, #D12F2F); border-color: var(--color-brand-red, #D12F2F); color: #ffffff; padding: 6px 20px; } .fili-report-error-modal .fili-btn-primary:hover { background-color: var(--color-brand-red-hover, #A82323); border-color: var(--color-brand-red-hover, #A82323); } /* ========================================================================== MODULE: FILI SAME ARTICLE / TIN CÙNG CHUYÊN MỤC ========================================================================== */ .fili-article-same-container { width: 100%; margin-top: 56px; padding-top: 40px; padding-bottom: 40px; border-top: 1px solid var(--color-border); .fili-section-title { font-family: var(--font-heading); font-size: 22px; font-weight: 700; line-height: var(--line-height-heading); color: var(--color-text-heading); margin-bottom: 24px; position: relative; text-align: center; padding-left: 0; } } .fili-related-card { display: flex; flex-direction: column; height: 100%; background-color: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; transition: var(--transition-normal); &:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); .img_wrap img { transform: scale(1.06); } .fili-related-title a { color: var(--color-brand-red); } } .img_wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background-color: var(--color-bg-subtle); a { display: block; width: 100%; height: 100%; } img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } } .fili-related-content { display: flex; flex-direction: column; flex-grow: 1; justify-content: space-between; padding: 16px; } .fili-related-title { font-family: var(--font-heading); font-size: 16px; font-weight: 600; line-height: 1.4; margin-top: 0; margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; a { color: var(--color-text-heading); text-decoration: none; transition: var(--transition-fast); } } .meta { font-family: var(--font-heading); font-size: 13px; color: var(--color-text-muted); margin-top: auto; .date { display: inline-block; } } } /* -------------------------------------------------------------------------- Dark & Theme Overrides (Extending Master Dark Modes) -------------------------------------------------------------------------- */ .fili-longform-wrapper.article-dark, .fili-longform-wrapper.article-black { .fili-article-same-container { border-top-color: var(--color-border-dark); .fili-section-title { color: var(--color-text-inverse); } } .fili-related-card { background-color: var(--color-brand-dark-hover); border-color: var(--color-border-dark); .fili-related-title a { color: var(--color-text-inverse); } .meta { color: var(--color-text-muted); } } } .fili-longform-wrapper.article-purple { .fili-article-same-container { border-top-color: rgba(255, 255, 255, 0.15); .fili-section-title { color: var(--color-text-inverse); } } .fili-related-card { background-color: rgba(0, 0, 0, 0.2); border-color: rgba(255, 255, 255, 0.1); .fili-related-title a { color: var(--color-text-inverse); } .meta { color: #d8b4fe; } } } /* -------------------------------------------------------------------------- Mobile Responsive Adjustments -------------------------------------------------------------------------- */ @media screen and (max-width: 576px) { .fili-article-same-container { margin-top: 36px; padding-top: 24px; padding-bottom: 24px; .fili-section-title { font-size: 19px; margin-bottom: 16px; } } .fili-related-card { .fili-related-title { font-size: 15px; -webkit-line-clamp: 2; } } } /* ========================================================================== MODULE: SHORTFORM ARTICLE CONTENT & DETAIL PAGE (_fili-short-form-content.css) ========================================================================== */ /* -------------------------------------------------------------------------- 1. Scoped Module Tokens & Variables -------------------------------------------------------------------------- */ .fili-shortform-container { --fili-sf-font-body: var(--font-primary, system-ui, -apple-system, sans-serif); --fili-sf-font-heading: var(--font-heading, inherit); --fili-sf-text-main: var(--color-text-main, #222222); --fili-sf-text-muted: var(--color-text-muted, #6c757d); --fili-sf-heading: var(--color-text-heading, #111111); --fili-sf-brand: var(--color-brand-accent, #0056b3); --fili-sf-brand-hover: var(--color-brand-accent-hover, #003d80); --fili-sf-bg-surface: var(--color-bg-body, #ffffff); --fili-sf-bg-light: var(--color-bg-surface, #ffffff); --fili-sf-bg-subtle: var(--color-bg-subtle, #f8f9fa); --fili-sf-border: var(--color-border, #e9ecef); --fili-sf-radius-lg: var(--radius-lg, 12px); --fili-sf-radius-md: var(--radius-md, 8px); --fili-sf-radius-sm: var(--radius-sm, 4px); --fili-sf-shadow-main: var(--shadow-md, 0 4px 16px rgba(0, 0, 0, 0.05)); --fili-sf-shadow-subtle: var(--shadow-sm, 0 2px 6px rgba(0, 0, 0, 0.04)); font-family: var(--fili-sf-font-body); color: var(--fili-sf-text-main); } /* -------------------------------------------------------------------------- 2. Main Shortform Article Card & Header Structure -------------------------------------------------------------------------- */ .fili-shortform-container .fili-shortform-post { background: var(--fili-sf-bg-surface); border: 1px solid var(--fili-sf-border); border-radius: var(--fili-sf-radius-lg); padding: 40px; box-shadow: var(--fili-sf-shadow-main); overflow: hidden; } .fili-shortform-container .fili-shortform-title { font-family: var(--fili-sf-font-heading); font-size: clamp(28.8px, 3.2vw, 37.6px); font-weight: 800; line-height: 1.3; color: var(--fili-sf-heading); margin-bottom: 20px; letter-spacing: -0.025em; } .fili-shortform-container .fili-shortform-meta { font-size: 14px; color: var(--fili-sf-text-muted); padding: 14px 0; } .fili-shortform-container .fili-btn-report-error { font-size: 13.2px; padding: 4px 12px; border-radius: var(--fili-sf-radius-sm); transition: all 0.2s ease; } .fili-shortform-container .fili-btn-report-error:hover { background-color: #dc3545; color: #ffffff; border-color: #dc3545; } /* -------------------------------------------------------------------------- 3. Body Typography & Injected HTML Content (.fili-content-view) -------------------------------------------------------------------------- */ .fili-shortform-container .fili-content-view { font-size: 17.6px; line-height: 1.7; color: var(--fili-sf-text-main); } .fili-shortform-container .fili-content-view .pTitle { display: none !important; } .fili-shortform-container .fili-content-view .pHead { font-size: 18.4px; font-weight: 600; line-height: 1.75; color: var(--fili-sf-heading); background-color: rgba(0, 86, 179, 0.05); border-left: 4px solid var(--color-brand-red); padding: 20px 24px; border-radius: 0 var(--fili-sf-radius-md) var(--fili-sf-radius-md) 0; margin-bottom: 32px; box-shadow: inset 0 0 0 1px rgba(0, 86, 179, 0.1); } .fili-shortform-container .fili-content-view .pSubTitle { font-family: var(--fili-sf-font-heading); font-size: 22.4px; font-weight: 700; color: var(--fili-sf-heading); margin-top: 44px; margin-bottom: 18px; padding-bottom: 10px; border-bottom: 2px solid var(--fili-sf-bg-subtle); position: relative; letter-spacing: -0.01em; } .fili-shortform-container .fili-content-view .pSubTitle::after { content: ""; position: absolute; bottom: -2px; left: 0; width: 48px; height: 2px; background-color: var(--fili-sf-brand); } .fili-shortform-container .fili-content-view .pBody, .fili-shortform-container .fili-content-view p { font-size: 16px; line-height: 1.75; color: var(--fili-sf-text-main); margin-bottom: 22px; text-align: left; word-break: break-word; } .fili-shortform-container .fili-content-view p:has(img) { text-align: center; } .fili-shortform-container .fili-content-view a { color: var(--fili-sf-brand); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(0, 86, 179, 0.3); text-underline-offset: 3px; transition: all 0.2s ease; } .fili-shortform-container .fili-content-view a:hover { color: var(--fili-sf-brand-hover); text-decoration-color: var(--fili-sf-brand-hover); } .fili-shortform-container .fili-content-view span { font-weight: 600; color: var(--fili-sf-heading); } .fili-shortform-container .fili-content-view ::selection { background-color: rgba(0, 86, 179, 0.15); color: var(--fili-sf-heading); } /* -------------------------------------------------------------------------- 4. DB Injected Images, Tables, tbody, td & Captions -------------------------------------------------------------------------- */ .fili-shortform-container .fili-content-view img, .fili-shortform-container .fili-content-view .imgCenter_Full, .fili-shortform-container .fili-content-view .imgCenter, .fili-shortform-container .fili-content-view img.zoom { max-width: 100% !important; height: auto !important; display: block; margin: 24px auto; border-radius: var(--fili-sf-radius-sm); box-shadow: var(--fili-sf-shadow-subtle); cursor: pointer !important; pointer-events: auto !important; position: relative; z-index: 2; touch-action: manipulation; } .fili-shortform-container .fili-content-view table.img-content { width: 100% !important; max-width: 100% !important; margin: 32px auto !important; border-collapse: separate; border-spacing: 0; background-color: var(--fili-sf-bg-light); border: 1px solid var(--fili-sf-border); border-radius: var(--fili-sf-radius-md); overflow: hidden; box-shadow: var(--fili-sf-shadow-subtle); } .fili-shortform-container .fili-content-view table.img-content tbody, .fili-shortform-container .fili-content-view table.img-content tr { width: 100% !important; display: block !important; } .fili-shortform-container .fili-content-view table.img-content td { display: block !important; width: 100% !important; padding: 0 !important; text-align: center; box-sizing: border-box; } .fili-shortform-container .fili-content-view table.img-content td img { width: 100% !important; max-width: 100% !important; height: auto !important; display: block; margin: 0 auto !important; border: 0 !important; border-radius: 0; box-shadow: none; transition: transform 0.3s ease; cursor: pointer !important; pointer-events: auto !important; } .fili-shortform-container .fili-content-view table.img-content:hover td img { transform: scale(1.015); } .fili-shortform-container .fili-content-view .pCaption, .fili-shortform-container .fili-content-view table.img-content .pCaption, .fili-shortform-container .fili-content-view table.img-content td .pCaption { width: 100% !important; box-sizing: border-box; font-size: 14px; color: var(--fili-sf-text-muted); font-style: italic; padding: 12px 18px; background-color: var(--fili-sf-bg-subtle); border-top: 1px solid var(--fili-sf-border); text-align: center; line-height: 1.5; margin: 0; } /* -------------------------------------------------------------------------- 5. Author, Source Sign-off & Actions -------------------------------------------------------------------------- */ .fili-shortform-container .fili-content-view .pAuthor { font-size: 16px; font-weight: 700; color: var(--fili-sf-heading); text-align: right; margin-top: 40px; margin-bottom: 4px; } .fili-shortform-container .fili-content-view .pSource { font-size: 0px; font-weight: 600; color: var(--fili-sf-text-muted); text-align: right; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 24px; } .fili-shortform-container .fili-content-view .pSource a { color: var(--fili-sf-text-muted); text-decoration: none; } .fili-shortform-container .fili-content-view .pSource a:hover { color: var(--fili-sf-brand); } .fili-shortform-container .fili-shortform-actions { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--fili-sf-border); display: flex; align-items: center; justify-content: flex-start; } .fili-shortform-container .btn-back-home { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; font-size: 15.2px; font-weight: 600; color: var(--fili-sf-brand); background-color: var(--fili-sf-bg-subtle); border: 1px solid var(--fili-sf-border); border-radius: var(--fili-sf-radius-md); text-decoration: none !important; transition: all 0.2s ease; } .fili-shortform-container .btn-back-home:hover { color: #ffffff; background-color: var(--fili-sf-brand); border-color: var(--fili-sf-brand); box-shadow: var(--fili-sf-shadow-subtle); transform: translateY(-1px); } /* -------------------------------------------------------------------------- 6. Sidebar Card & Ad Containers -------------------------------------------------------------------------- */ .fili-shortform-container .fili-sidebar-widget.fili-card { background: var(--fili-sf-bg-surface); border: 1px solid var(--fili-sf-border); border-radius: var(--fili-sf-radius-md); padding: 20px; box-shadow: var(--fili-sf-shadow-subtle); } .fili-shortform-container .fili-widget-adv { text-align: center; overflow: hidden; } /* -------------------------------------------------------------------------- 7. Layout Grid & Sticky Sidebar Integration -------------------------------------------------------------------------- */ #fili-shortform-detail, .fili-shortform-container { --fili-sf-bg-surface: var(--color-bg-surface, #f8fafc); --fili-sf-bg-subtle: var(--color-bg-subtle, #f1f5f9); --fili-sf-brand-red: var(--color-brand-red, #D12F2F); --fili-sf-brand-red-hover: var(--color-brand-red-hover, #A82323); --fili-sf-text-heading: var(--color-text-heading, #111827); --fili-sf-text-main: var(--color-text-main, #374151); --fili-sf-text-muted: var(--color-text-muted, #6b7280); --fili-sf-border: var(--color-border, #e2e8f0); --fili-sf-radius-sm: 4px; --fili-sf-radius-md: 8px; --fili-sf-font-body: var(--font-primary, system-ui, -apple-system, sans-serif); --fili-sf-font-heading: var(--font-heading, system-ui, -apple-system, sans-serif); font-family: var(--fili-sf-font-body); color: var(--fili-sf-text-main); } #fili-shortform-detail, .fili-shortform-container, .fili-shortform-grid { overflow: visible !important; } .fili-shortform-container { max-width: 1280px; margin: 0 auto; padding: 0 15px; } .fili-shortform-main { display: flex; flex-direction: column; min-width: 0; background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; } .fili-shortform-header { margin-bottom: 20px !important; padding-bottom: 12px; border-bottom: 1px solid var(--fili-sf-border); } .fili-shortform-title { font-family: var(--fili-sf-font-heading); font-size: clamp(25.6px, 2.8vw, 33.6px); font-weight: 800; line-height: 1.3; color: var(--fili-sf-text-heading); margin-bottom: 8px; letter-spacing: -0.02em; } .fili-shortform-meta { font-size: 14px; color: var(--fili-sf-text-muted); } .fili-shortform-meta .fili-meta-date { color: var(--fili-sf-text-muted) !important; font-size: 13px; } .fili-btn-report-error { font-size: 13.2px; padding: 4px 12px; border-radius: var(--fili-sf-radius-sm); color: var(--fili-sf-text-muted); border: 1px solid var(--fili-sf-border); background: transparent; transition: all 0.2s ease; } .fili-btn-report-error:hover { background-color: var(--fili-sf-brand-red); color: #ffffff; border-color: var(--fili-sf-brand-red); } .fili-sidebar-widget { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; } /* -------------------------------------------------------------------------- 8. Media Queries (Fixed Column Separator Spacing) -------------------------------------------------------------------------- */ @media (min-width: 992px) { .fili-shortform-container .fili-shortform-main { padding-right: 32px !important; } .fili-shortform-sidebar { border-left: 1px solid var(--fili-sf-border); padding-left: 32px; position: -webkit-sticky !important; position: sticky !important; top: 20px !important; align-self: flex-start; } } @media (max-width: 991px) { .fili-shortform-sidebar { border-left: none; padding-left: 0; position: static !important; } } @media (max-width: 768px) { .fili-shortform-container { padding-top: 12px; padding-bottom: 12px; } .fili-shortform-container .fili-shortform-post { padding: 24px 16px; border-radius: 0; border-left: none; border-right: none; box-shadow: none; } .fili-shortform-container .fili-content-view .pHead { padding: 16px; font-size: 16.8px; } .fili-shortform-container .fili-content-view .pSubTitle { font-size: 20px; } } /* ========================================================================== MODULE: THREE TOPIC NEWS MODULE (_three-topic-news.css) ========================================================================== */ /* -------------------------------------------------------------------------- 1. Scoped Module Variables & Container -------------------------------------------------------------------------- */ .fili-three-topic-news { /* Fonts */ --fili-3top-font-body: var(--font-primary, sans-serif); --fili-3top-font-heading: var(--font-heading, sans-serif); /* Palette & Brand Tokens */ --fili-3top-bg: transparent; --fili-3top-tag-bg: var(--color-brand-red, #D12F2F); --fili-3top-tag-hover: var(--color-brand-red-hover, #A82323); --fili-3top-accent-bright: #ff4d4d; --fili-3top-tag-text: var(--color-text-inverse, #ffffff); --fili-3top-text-light: #ffffff; --fili-3top-text-dark: var(--color-text-heading, #0f172a); --fili-3top-border-light: rgba(255, 255, 255, 0.25); /* Radii & Shadows */ --fili-3top-radius: var(--radius-md, 8px); --fili-3top-shadow: var(--shadow-md, 0 4px 15px rgba(0, 0, 0, 0.12)); --fili-3top-shadow-hover: var(--shadow-lg, 0 10px 25px rgba(0, 0, 0, 0.22)); /* Motion */ --fili-3top-ease-smooth: cubic-bezier(0.16, 1, 0.3, 1); --fili-3top-duration: 0.35s; background-color: var(--fili-3top-bg); padding: 30px 0; font-family: var(--fili-3top-font-body); } .fili-three-topic-news .container { max-width: 1200px; margin: 0 auto; padding: 0 15px; } .fili-three-topic-news .section-label { color: var(--fili-3top-text-dark); font-family: var(--fili-3top-font-heading); font-size: 14px; font-weight: 700; margin-bottom: 20px; display: inline-block; border-left: 4px solid var(--fili-3top-tag-bg); padding-left: 12px; text-transform: uppercase; } /* -------------------------------------------------------------------------- 2. Grid Layout & Feature Card -------------------------------------------------------------------------- */ .fili-three-topic-news .card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .fili-three-topic-news .feature-card { position: relative; min-height: 520px; border-radius: var(--fili-3top-radius); overflow: hidden; background-size: cover; background-position: center; display: flex; flex-direction: column; justify-content: space-between; padding: 24px; box-shadow: var(--fili-3top-shadow); transition: transform var(--fili-3top-duration) var(--fili-3top-ease-smooth), box-shadow var(--fili-3top-duration) var(--fili-3top-ease-smooth); will-change: transform, box-shadow; text-decoration: none; isolation: isolate; } .fili-three-topic-news .feature-card:hover { transform: translateY(-4px); box-shadow: var(--fili-3top-shadow-hover); } /* Dedicated Overlay Element */ .fili-three-topic-news .card-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(23, 34, 43, 0.2) 0%, rgba(23, 34, 43, 0.92) 100%); transition: background 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .fili-three-topic-news .feature-card:hover .card-overlay { background: linear-gradient(180deg, rgba(23, 34, 43, 0.3) 0%, rgba(23, 34, 43, 0.98) 100%); } /* -------------------------------------------------------------------------- 3. Card Inner Elements -------------------------------------------------------------------------- */ .fili-three-topic-news .card-tag { position: relative; z-index: 3; align-self: flex-start; display: inline-block; border: 1px solid rgba(255, 255, 255, 0.3); color: var(--fili-3top-text-light) !important; background: rgba(15, 23, 42, 0.65); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-family: var(--fili-3top-font-heading); font-size: 11px; font-weight: 700; text-transform: uppercase; padding: 5px 12px; border-radius: var(--radius-sm, 4px); letter-spacing: 0.5px; text-decoration: none; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .fili-three-topic-news .card-tag:hover { background-color: var(--fili-3top-tag-bg, #D12F2F); border-color: var(--fili-3top-tag-bg, #D12F2F); color: #ffffff !important; } .fili-three-topic-news .card-bottom { position: static; z-index: 2; } .fili-three-topic-news .card-title { font-family: var(--fili-3top-font-heading); font-size: 25px; font-weight: 700; line-height: 1.35; margin-bottom: 16px; } .fili-three-topic-news .card-title-link { color: #ffffff !important; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; transition: color 0.2s ease; } .fili-three-topic-news .feature-card:hover .card-title-link, .fili-three-topic-news .card-title-link:hover { color: var(--fili-3top-accent-bright, #ff4d4d) !important; } .fili-three-topic-news .card-footer { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--fili-3top-border-light); padding-top: 14px; } .fili-three-topic-news .read-more { display: inline-flex; align-items: center; gap: 6px; font-family: var(--fili-3top-font-heading); font-size: 11.5px; font-weight: 700; color: var(--fili-3top-text-light); text-transform: uppercase; letter-spacing: 0.8px; text-decoration: none; opacity: 0.9; transition: opacity 0.2s ease, color 0.2s ease; } .fili-three-topic-news .read-more-icon { font-size: 11px; transition: transform 0.3s var(--fili-3top-ease-smooth); } .fili-three-topic-news .feature-card:hover .read-more { opacity: 1; color: var(--fili-3top-accent-bright, #ff4d4d); } .fili-three-topic-news .feature-card:hover .read-more-icon { transform: translateX(4px); } .fili-three-topic-news .social-share { position: relative; z-index: 3; display: flex; gap: 8px; } .fili-three-topic-news .social-btn { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--fili-3top-border-light); display: flex; align-items: center; justify-content: center; color: var(--fili-3top-text-light); font-size: 11px; text-decoration: none; transition: background-color 0.25s var(--fili-3top-ease-smooth), border-color 0.25s var(--fili-3top-ease-smooth); } .fili-three-topic-news .social-btn:hover { background-color: var(--fili-3top-tag-bg); border-color: var(--fili-3top-tag-bg); } /* -------------------------------------------------------------------------- 4. Responsive Breakpoints -------------------------------------------------------------------------- */ @media (max-width: 1024px) { .fili-three-topic-news .card-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .fili-three-topic-news .card-grid { grid-template-columns: 1fr; } .fili-three-topic-news .feature-card { min-height: 420px; padding: 18px; } .fili-three-topic-news .card-title { font-size: 18px; } } .fili-trending-ticker-widget { font-family: var(--font-primary, inherit); --fili-trend-color-up: #00a651; /* Stock Green */ --fili-trend-color-down: #d93025; /* Stock Red */ --fili-trend-color-ref: #f58220; /* Stock Orange/Amber */ background-color: #fcfcfd; padding: 6px; width: 100%; } .fili-trending-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; width: 100%; } .fili-trending-card { display: flex; flex-direction: column; justify-content: space-between; padding: 8px 10px; background-color: #ffffff; border: 1px solid #f1f1f1; border-radius: 2px; text-decoration: none; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02); transition: background-color 0.15s ease, border-color 0.15s ease; box-sizing: border-box; min-width: 0; overflow: hidden; font-family: inherit; } .fili-trending-card:hover { background-color: #fafafa; border-color: #e2e2e2; } .fili-trending-header { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-bottom: 6px; min-width: 0; line-height: 1; } .fili-trending-title { display: flex; align-items: center; gap: 6px; min-width: 0; } .fili-trending-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 0; } .fili-trending-icon .arr-up { display: block; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 5.5px solid currentColor; } .fili-trending-icon .arr-down { display: block; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5.5px solid currentColor; } .fili-trending-icon .arr-flat { display: block; width: 6px; height: 6px; background-color: currentColor; } .fili-trending-sym { font-family: var(--font-heading, inherit); font-size: 12px; font-weight: 700; color: #1e293b; letter-spacing: -0.1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1; } .fili-trending-chart { width: 50px; height: 20px; object-fit: contain; flex-shrink: 0; display: block; } .fili-trending-body { display: flex; align-items: baseline; justify-content: flex-start; gap: 6px; min-width: 0; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; line-height: 1; } .fili-trending-price { font-family: var(--font-primary, inherit); font-size: 12px; font-weight: 600; color: #0f172a; white-space: nowrap; } .fili-trending-change { font-family: inherit; font-size: 11px; font-weight: 600; white-space: nowrap; } .fili-trending-percent { font-family: inherit; font-size: 11px; font-weight: 600; white-space: nowrap; } .fili-trending-ticker-widget .text-up, .text-up { color: var(--fili-trend-color-up) !important; } .fili-trending-ticker-widget .text-down, .text-down { color: var(--fili-trend-color-down) !important; } .fili-trending-ticker-widget .text-ref, .text-ref { color: var(--fili-trend-color-ref) !important; } @keyframes tickerFlash { 0% { background-color: rgba(0, 166, 81, 0.12); } 100% { background-color: #ffffff; } } .fili-trending-card.quote-updated { animation: tickerFlash 0.8s ease-out; } /* ========================================================================== COMPONENT: HEATMAP SECTION EMBED (_fili-heatmap.css) ========================================================================== */ #heatmap-section { background-color: transparent; color: var(--color-text-body, inherit); padding: 24px 0; } #heatmap-section .heatmap-container { max-width: var(--fili-container-max, 1200px); margin: 0 auto; background-color: transparent; padding: 0; border-radius: var(--fili-feat-radius-md, 8px); } #heatmap-section .heatmap-header { margin-bottom: 16px; display: flex; align-items: center; } /* Section Title with Fili Brand Accent */ #heatmap-section .heatmap-title { font-family: var(--fili-feat-font-heading, var(--font-heading, sans-serif)); font-size: 16px; font-weight: 700; color: var(--fili-feat-heading-color, var(--color-text-heading, #0f172a)); margin: 0; position: relative; padding-left: 12px; line-height: 1.3; } #heatmap-section .heatmap-title::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 18px; background-color: var(--color-brand-red, #D12F2F); border-radius: 2px; } /* Embedded Iframe Container */ #heatmap-section .heatmap-iframe-container { position: relative; width: 100%; height: 680px; border-radius: var(--fili-feat-radius-sm, 6px); overflow: hidden; border: 1px solid var(--fili-feat-border-color, #e2e8f0); background-color: transparent; } #heatmap-section .heatmap-iframe { width: 100%; height: 100%; border: 0; display: block; } /* Responsive Scaling */ @media (max-width: 768px) { #heatmap-section { padding: 16px 0; } #heatmap-section .heatmap-iframe-container { height: 500px; } #heatmap-section .heatmap-title { font-size: 16px; } } @charset "utf-8"; * { margin: 0; padding: 0 } body { color: #000; font: 400 12px arial; text-align: left; background: #fff } h2 { line-height: 16px } a { color: #000; text-decoration: none; outline: 1px } a:hover { text-decoration: none; color: #004f8b } img { border: 0; font-size: 0; line-height: 0; max-width: 100% } ul, li { list-style-type: none } input, textarea { font-family: arial; font-size: 11px; border: none; background: none } .pSubTitle { /* display: none; */ font-size: 13.5pt !important; font-weight: bold !important; padding: 0 !important; margin-top: 10px !important; } .clear { clear: both; font-size: 0; line-height: 0 } .left { float: left } .right { float: right } html { -webkit-text-size-adjust: none } #page { position: relative; z-index: 1; width: 100%; float: left } .no_wrap { white-space: nowrap } .txt_666 { color: #666 } .txt_vne { color: #9f224e } .txt_10 { font-size: 10px } .txt_11 { font-size: 11px } .txt_14 { font-size: 14px } .txt_16 { font-size: 16px } .space_bottom_20 { margin-bottom: 20px } .space_bottom_10 { margin-bottom: 20px } #wrapper_header { width: 100%; float: left; height: 35px; background: #f4f4f4; border-bottom: 1px solid #ccc } #header, #container { width: 980px; margin: 0 auto } .img_logo { width: 144px; float: left; margin: 5px 0 0; display: inline } .width_common { width: 100%; float: left } .block_icon_menu_header img { float: left; border-left: 1px solid #e6e6e6 } .block_icon_menu_header img.end { border: none } .list_menu_header { float: left; overflow: hidden; height: 35px } .list_menu_header li { float: left; padding: 0 11px; border-left: 1px solid #e6e6e6 } .list_menu_header li a { font: 700 13px/35px arial; color: #000 } #wrapper_container { width: 100%; float: left } .breakumb_timer { padding: 5px 0 } .timer_header { font: 400 11px arial; float: left } .txt_timer_header { margin: 0 0 0 5px } .txt_timer_header .drash { color: #e6e6e6; font: 400 11px arial } .temprature img { float: left } .temprature .txt_doC_den { display: inline-block; font: 700 14px arial; padding: 0 7px 0 5px; background: #fff url(../components/printer/images/graphics/bg_o.gif) no-repeat right 4px; float: left } .txt_location { font: 400 12px tahoma; background: url(../components/printer/images/graphics/bg_arrow_xam_4x7.gif) no-repeat left 5px; padding: 0 10px; float: left; color: #666 } .txt_rss { padding: 0 15px 0 10px; background: url(../components/printer/images/graphics/img_rss.gif) no-repeat right top; float: left; border-left: 1px solid #e6e6e6; margin: 0 0 0 10px } .banner_980x60 { width: 980px; float: left; overflow: hidden; position: relative; z-index: 1; margin: 10px 0 0 } .main_container { margin: 0 0 10px } .icon_content { background: url(../components/printer/images/graphics/icon_total_01.png) no-repeat; display: inline-block; font-size: 0 !important; line-height: 0 !important } .icon_title_coment { width: 14px; height: 16px; background-position: -23px -360px } .icon_title_0 { display: none } .icon_title_2 { width: 14px; height: 16px; background-position: -46px -360px } .icon_title_4 { width: 14px; height: 16px; background-position: 0 -360px } .icon_title_6 { width: 33px; height: 11px; background-position: 0 -376px } .icon_title_8 { width: 23px; height: 11px; background-position: 0 -387px } .icon_title_10 { width: 42px; height: 11px; background-position: 0 -398px } .icon_title_12 { width: 42px; height: 11px; background-position: 0 -409px } .icon_title_14 { width: 60px; height: 11px; background-position: 0 -420px } .icon_title_16 { width: 14px; height: 11px; background-position: 0 -431px } .icon_title_18 { width: 33px; height: 11px; background-position: 0 -442px } .icon_title_20 { width: 33px; height: 11px; background-position: 0 -453px } .icon_title_22 { width: 52px; height: 11px; background-position: 0 -464px } .icon_title_24 { width: 49px; height: 11px; background-position: 0 -475px } .icon_title_26 { width: 57px; height: 11px; background-position: 0 -486px } .icon_title_28 { width: 57px; height: 11px; background-position: 0 -497px } .icon_title_30 { width: 74px; height: 11px; background-position: 0 -508px } .icon_title_128 { width: 36px; height: 11px; background-position: 0 -522px } .icon_title_fun { width: 15px; height: 12px; background-position: 0 -536px } .icon_taitro { font-size: 0; line-height: 0 } .icon_taitro .icon_title_128 { margin-bottom: 10px } .box_hot_news .icon_taitro .icon_title_128 { padding: 0 } .icon_video_photo { background: url(../components/printer/images/icons/icon_video_photo.png) no-repeat; display: inline-block; font-size: 0 !important; line-height: 0 !important } .ico_video_01 { width: 30px; height: 30px; background-position: -210px 0 } .ico_video_02 { width: 54px; height: 54px; background-position: -142px 0 } .icon_photo_01 { width: 30px; height: 30px; background-position: -30px 0 } .icon_photo_02 { width: 54px; height: 54px; background-position: -74px 0 } .icon_responsive { width: 20px; height: 20px; display: inline-block; line-height: 0; font-size: 0; background: url(../components/printer/images/icons/icon_resonesive.gif) no-repeat } .ico_respone_01 { background-position: 0 0 } .ico_respone_02 { background-position: -20px 0 } .ico_respone_04 { background-position: -252px 0; width: 25px; height: 25px } .ico_respone_05 { background-position: -277px 0; width: 25px; height: 25px } .ico_respone_06 { background-position: -154px 0; width: 16px; height: 16px } .ico_respone_07 { background-position: -170px 0; width: 16px; height: 16px } .ico_respone_08 { background-position: -186px 0; width: 16px; height: 16px } .ico_respone_rss { width: 50px; height: 18px; background-position: -202px 0 } .icon_more { background: url(../components/printer/images/graphics/icon_more.gif) no-repeat scroll 0 4px rgba(0, 0, 0, 0); display: inline-block; height: 16px; width: 11px } .icon_less { background: url(../components/printer/images/graphics/icon_less.gif) no-repeat scroll 0 4px rgba(0, 0, 0, 0); display: inline-block; height: 16px; width: 11px } #box_news_top { border-bottom: 1px solid #e2e2e3; padding-bottom: 12px; margin-bottom: 12px } #box_news_top .line_col { background: url(../components/printer/images/graphics/bg_1x1_gray.gif) repeat-y 50% 0; margin: 0 } #box_news_top .line_col .line_col_midnews_top { background: url(../components/printer/images/graphics/bg_1x1_gray.gif) repeat-y 68.3% 0; width: 100%; float: left } .box_hot_news { float: left; width: 49% } .box_hot_news .list_news_dot_3x3_300 { margin: 0; padding: 0; border: none } .box_hot_news .list_news_dot_3x3_300 li { padding: 0 0 0 10px; background-position: 0 6px } .block_news_big { width: 100%; float: left; overflow: hidden; height: 288px; margin-bottom: 5px; text-align: center; position: relative; background: #eee } .title_news { width: 100%; float: left; padding: 0 0 5px } h2.title_news { line-height: 18px } #news_home.list_news .title_news { padding: 0 0 5px } .title_news a { font: 700 14px arial; color: #333 } .title_news a.txt_link:hover { color: #004f8b } .box_hot_news .title_news { padding: 0 0 5px; line-height: 22px } .box_hot_news .title_news a { color: #9f224e; font: 700 20px arial } .txt_num_comment { color: #9f224e; font: 400 12px arial; white-space: nowrap } .txt_num_comment .total { cursor: pointer } .news_lead { width: 100%; float: left; font: 400 13px/16px arial; color: #333 } .news_lead h4 { font: 400 13px/16px arial } #box_news_top .news_lead, #box_news_top .news_lead h4 { padding: 0 0 5px; font: 400 13px/16px arial } .list_news_dot_3x3_300 { width: 100%; float: left; border-top: 1px dotted #e2e2e3; margin: 10px 0 0; padding: 5px 0 0; color: #666 } .block_col_top_right .list_news_dot_3x3_300 { padding: 0; margin: 0; border: none } .list_news_dot_3x3_300 li { padding: 5px 0 0 10px; background: url(../components/printer/images/graphics/bg_dot_gray_3x3.gif) no-repeat left 11px } .list_news_dot_3x3_300 li h2 { line-height: 13px } .list_news_dot_3x3_300 li p { padding: 0 } .list_news_dot_3x3_300 li a { font: 700 12px/16px arial; color: #666 } .box_hot_news .list_news_dot_3x3_300 li a { font: 700 11px/16px arial } * + html .list_news_dot_3x3 li strong { display: inline-block; margin: 0 0 0 -15px } * + html #homepage .list_news_dot_3x3 li strong { display: inline; margin: 0 } .list_news_dot_3x3 li a.icon_commend { background: none !important; padding: 0 } .box_hot_news .list_news_dot_3x3_300 li a:hover, .list_news_dot_3x3_300 li a:hover, .list_news_dot_3x3 li a:hover { color: #004f8b } .list_news_dot_3x3 { color: #666 } .list_news_dot_3x3 li a { font: 700 11px arial; color: #666 } .list_news_dot_3x3 li strong { background: url(../components/printer/images/graphics/bg_dot_gray_3x3.gif) no-repeat left 6px; padding: 0 0 0 10px } .mid_1_left .list_news_dot_3x3 li strong { display: inline-block } .mid_1_left .list_news li .news_lead { padding: 0 0 5px } .box_sub_hot_news { width: 17%; float: left; margin: 0 0 0 2% } .box_sub_hot_news ul { width: 160px; float: left } .box_sub_hot_news li { width: 100%; float: left; border-bottom: 1px dotted #e2e2e3; margin: 0 0 5px } .box_sub_hot_news li.end { border: none; margin: 0 } .box_sub_hot_news li .thumb { display: none; width: 45%; float: left; margin: 0 10px 0 0 } .box_sub_hot_news li .thumb img { width: 100% } .box_ads_hot_news { width: 30.61%; float: right } .box_ads_hot_news .box_category:last-child { margin: 0 } .banner_300x120 { width: 300px; float: left } #col_1 { width: 480px; float: left } #col_2 { width: 300px; padding: 0 10px; float: left; margin: 0 0 0 10px } .list_news li { padding-bottom: 10px; margin-bottom: 6px; border-bottom: 1px dotted #e2e2e3; width: 100%; float: left } #news_home.list_news li { padding-bottom: 0 } #news_home.list_news li:last-child { border-bottom: none; padding: 0; margin: 0 } #news_home.list_news li .list_news_dot_3x3 li { padding-bottom: 7px; padding-right: 2% } #result_search #news_home.list_news li { padding-bottom: 7px } #news_home.list_news li.end { margin: 0; padding: 0 } .list_news li.end { padding: 0; margin: 0; border: none } .list_news .thumb { float: left; width: 140px; margin: 0 10px 0 0; position: relative } #news_home.list_news .thumb { width: 37% } #news_home.list_news.list_news_home_page li .thumb { width: 140px } .list_news .thumb img { font-size: 0; line-height: 0; float: left } #homepage #news_home.list_news .thumb { width: 39% } #news_home.list_news .thumb img { padding-bottom: 10px; width: 100% } #news_home.list_news .thumb .icon_thumb_videophoto { bottom: 10px } .list_news .news_lead { width: auto; float: none; margin: 0; padding: 0 0 5px } .list_news .list_news_dot_3x3 { width: 100%; float: left } #news_home.list_news .list_news_dot_3x3 li, .list_news .list_news_dot_3x3 li { width: auto; margin: 0; padding: 0; border: none; float: none } .list_news .list_news_dot_3x3 li a { font: 700 11px arial } #homepage .block_col_top_left .list_news .list_news_dot_3x3 { float: none; width: auto } .box_category { margin-bottom: 15px } .title_box_category { height: 30px; background: #eee url(../components/printer/images/graphics/bg_1x28.gif) repeat-x left top; margin-bottom: 10px; overflow: hidden } .txt_main_category { float: left; margin: 0 0 0 10px; display: inline; font: 700 14px/30px arial; color: #9f224e } .title_box_category .line_top_box { color: #9f224e; font: 700 14px/30px arial; height: 28px; display: block; float: left; background: url(../components/printer/images/graphics/bg_dot_gray_3x3_vne.gif) repeat-x left -1px } .txt_main_category span, .txt_main_category a { color: #9f224e; font: 700 14px/30px arial; height: 28px; display: block; float: left; background: url(../components/printer/images/graphics/bg_active_categoryname.gif) repeat-x left top } .block_category_child a { color: #666; font: 400 11px arial; padding: 10px 8px 6px; background: url(../components/printer/images/graphics/bg_drash_1x10.gif) no-repeat left 12px; float: left; white-space: nowrap } .block_category_child a:first-child { background: none } .col_width_140 .title_box_category img { margin: 3px 0 0 } .content_box_category .thumb { float: left; margin: 0 10px 0 0; width: 140px; position: relative } .block_image_news .news_lead { float: none; margin: 0; width: auto } .content_box_category .list_news_dot_3x3 { border-top: 1px dotted #e2e2e3; width: 100%; float: left; margin: 10px 0 0; padding: 5px 0 0 } .content_box_category .list_news_dot_3x3.no_space, .content_box_category .list_news_dot_3x3_300.no_space { margin: 0 } .content_box_category .list_news_dot_3x3 li { margin: 5px 0 0 } .banner_300x250 { width: 300px; float: left } .content_survey .td_input { width: 50px } .content_survey .td_servey { width: 100px } .content_survey input { float: left } #box_details_news #boxthamdoykien { margin: 0 0 10px; display: block } .block_100 #boxthamdoykien { float: left; margin: 0 } #boxthamdoykien .vote_3col td { width: 32%; vertical-align: top; margin: 0 1% 0 0 } #boxthamdoykien .vote_2col td { width: 48%; vertical-align: top; margin: 0 2% 0 0 } #boxthamdoykien .title_box_category { margin: 0 } #boxthamdoykien .content_box_category { background: #f5f5f5 } .block_padding_10 { padding: 10px } #boxthamdoykien .title_thamdo { font: 700 12px arial; padding: 0 0 10px; border-bottom: 1px solid #dadada; margin-bottom: 10px; text-align: left } #boxthamdoykien .input_servey { float: left; margin: 0 5px 0 0 } #boxthamdoykien .tb_servey { text-align: left } #box_details_news #boxthamdoykien .tb_servey td, #boxthamdoykien .tb_servey td { padding: 0 0 9px } #boxthamdoykien .tb_servey tr:last-child td { padding: 0 } #boxthamdoykien .btn_bieuquyet { padding: 5px 7px; border: none; background: #858585; color: #fff; font: 700 11px arial; cursor: pointer } * + html #boxthamdoykien .btn_bieuquyet { float: left } #box_details_news #boxthamdoykien .txt_xemketqua, #boxthamdoykien .txt_xemketqua { font: 400 11px arial; color: #9a1f44 } * + html #boxthamdoykien .txt_xemketqua { padding: 6px 0 0 3px; float: left } .block_flash_video { overflow: hidden; cursor: pointer; width: 100%; float: left; position: relative; font-size: 0; background: #fff } .videoname { width: 96%; padding: 0 2% 10px; background: #f5f5f5; float: left } .icon_bloclvideo { position: absolute; left: 0; top: 0; bottom: 0; right: 0 } .icon_bloclvideo .img_icon { background: url(../components/printer/images/graphics/ico-play-60x60.png) no-repeat scroll left top; display: inline-block; height: 60px; vertical-align: middle; width: 60px } .icon_bloclvideo:hover .img_icon { background: url(../components/printer/images/graphics/ico-play-60x60.png) no-repeat scroll right top } .icon_bloclvideo .image_icon_center { display: inline-block; height: 100%; vertical-align: middle } .thumb_image { position: relative; width: 100%; float: left } .thumb_image img { float: left } .list_video { padding: 10px 0 0; width: 100%; float: left; position: relative } .list_video li { width: 140px; float: left; margin: 0 20px 0 0 } .list_video li.end { margin: 0 } .list_video li .title_video { width: 100%; float: left; padding: 5px 0 0 } #video .item { width: 140px; float: left } #video .width_slider { width: 430px; float: left } .icon_thumb_videophoto { width: 28px; display: block; height: 28px; position: absolute; background: url(../components/printer/images/graphics/icon_total_01.png) no-repeat; left: 0; bottom: 0 } .icon_video { background-position: 0 0 } .thumb:hover .icon_video { background-position: 0 -28px } .icon_photo { background-position: -28px 0 } .thumb:hover .icon_photo { background-position: -28px -28px } .slide_more_video ul { width: 432px; float: left } .col_width_310 { width: 360px; float: left } .block_photo_top { float: left; margin-bottom: 10px; width: 100% } .block_photo_top .thumb_image { margin-bottom: 10px } #photo .list_news .thumb_image { width: auto; margin: 0 10px 0 0 } #photo .list_news li.end, #xemnhieunhat .list_news li.end, #binhluannhieu .list_news li.end { margin: 0; padding: 0; border: none } .col_width_140 { width: 100px } #xemnhieunhat .title_news { padding: 0 } #binhluannhieu .title_news { padding: 0 } #xemnhieunhat .title_news a, #binhluannhieu .title_news a { font: 400 14px arial } #xemnhieunhat .title_news .no_wrap { padding: 0 0 0 3px } #col_3 { width: 160px; float: right } #wrapper_footer { width: 100%; float: left } * + html #wrapper_footer { margin: 20px 0 0 } #footer { width: 980px; margin: 0 auto; border-top: 1px solid #dedede; padding: 1px 0 0 } .footerMenu { width: 960px; background: #f4f4f4; float: left; overflow: hidden; padding: 0 0 13px 20px } .ulBlockMenu { display: inline-block; list-style-type: none; margin: 16px 0 0; overflow: hidden; padding: 0; vertical-align: top; width: 156px; float: left } .ulBlockMenu li { width: 100%; float: left } .liFollow { width: 100%; float: left; height: 17px } .liFollow h2 { width: 100%; float: left; height: 14px; margin: 0 0 3px } .liFollow a { font: 12px arial; color: #606060; text-decoration: none; float: left } .liFollow a:hover { text-decoration: underline } .liFirst a { font: bold 12px/20px arial; color: #000; text-decoration: none; float: left; white-space: nowrap } .liFirst a:hover { color: #9F224E } .liFirst h2 { width: 100%; height: 20px; margin: 0 0 5px } .lineFmenu { width: 960px; float: left; padding: 0 0 5px; overflow: hidden } .ft-bot { width: 100%; padding: 0 0 20px; border-top: 1px solid #d7dbe3; float: left; background: #fff } .ft-botm { padding: 18px 0 0 10px; float: left; font: 400 11px arial } .ft-botl { width: 180px; padding: 14px 0 0 10px; float: left } ft-botm p, .ft-botr p { margin: 0; padding: 0; font: 11px arial; color: #686e7a } .ft-botm p span, .ft-botr p span { font-weight: 700 } .ft-botr { padding: 18px 10px 0 0; float: right; text-align: right } .ft-botr a { font: 11px arial; color: #686E7A; text-decoration: none; padding: 0 4px } .ft-botr a:hover { color: #004f8b } .adv-header { float: left; height: 10px; overflow: hidden; width: 100% } .adv-header img { float: right } .scroll-pane { height: 280px; overflow: hidden } .nicescroll-rails { cursor: pointer !important } .box_sub_hot_news .scroll-pane { height: 390px; width: 168px !important } .box_sub_hot_news.scroll_news_home .scroll-pane { height: 314px; margin: 0 0 15px } #homepage .box_sub_hot_news .scroll-pane { height: 230px } #homepage .box_sub_hot_news .scroll-pane li a { font: 400 13px arial } #homepage .box_sub_hot_news .title_news { padding: 0 0 6px } #homepage .box_sub_hot_news li { margin: 0 0 6px } #homepage .box_sub_hot_news .scroll-pane .news_lead { display: none } #box_raovat .scroll-pane { height: 430px } .col_width_140 .list_new_160 li a, .scroll-pane .list_new_160 li a { font-size: 12px } .item_thirdparty li.first .title_news a { font-weight: 700 } .item_thirdparty li .block_image_news { margin-bottom: 5px } .box_sub_hot_news .jspContainer { height: 400px !important; width: 168px !important } .box_sub_hot_news.scroll_news_home .jspContainer { height: 334px !important } .scroll-pane .list_new_160 { width: 93% } .list_new_160 li { border-bottom: 1px dotted #E2E2E3; float: left; margin-bottom: 5px; padding-bottom: 5px; width: 100% } .list_new_160 li:last-child { margin: 0; padding: 0; border: none } #col_3 .list_new_160 li { margin-bottom: 7px; padding-bottom: 7px } .list_new_160 li a { font: 400 14px arial } .list_new_160 li.end { margin: 0; border: none; padding: 0 } .btn_dangtin { background: #9a1f44 url(../components/printer/images/graphics/icon_dangtin.gif) no-repeat left top; height: 23px; padding: 0 10px 0 30px; font: 700 11px/23px arial; color: #fff; display: block; float: left; margin: 10px 0 0 } a.btn_dangtin:hover { color: #fff } .ipad, .coppy_right_small, .list_menu_small, #box_col_left { display: none } .web { float: left } .block_arrow_title { display: none; float: right; width: 45px; height: 44px; background: url(../components/printer/images/graphics/icon_total_01.png) no-repeat 23px -157px } #wrapper_header, .breakumb_timer { display: none } #header_main { width: 980px; margin: 0 auto } #header_main .banner_728x90 { padding: 0 0 0 8px; background: url(../components/printer/images/graphics/bg_ad_by_elick.png) no-repeat left bottom } .chungkhoankinhdoanh { height: 90px; margin: 10px 0 0; font-size: 0; line-height: 0; width: 728px } .banner_728x90 { height: 90px; margin: 10px 0 0; font-size: 0; line-height: 0 } #HalfBanner1_available { margin: 0 5px 0 0 } .logo_web { margin: 0 } .logo_icon_home { height: 13px; width: 13px; background: url(../components/printer/images/graphics/icon_total_01.png) no-repeat -274px 0; display: block; float: left } a:hover .logo_icon_home, .active .logo_icon_home { background-position: -287px 0 } #menu_web li a { display: block; min-width: 12px } #menu_web { margin: 20px 0 0; padding-bottom: 3px; border-bottom: 3px solid silver } #menu_web li { float: left; padding: 0 3.6px; padding: 0 3.5px\9 \0; background: url(../components/printer/images/graphics/bg_drash_1x12.gif) no-repeat right 3px } #menu_web li:last-child { background: none } #menu_web li.end { background: none } #menu_web li.item_have_more_menu { position: relative; padding: 0; background: none } .sub_main_menu_item { position: absolute; right: 0; top: 15px; z-index: 6200; width: 70px; display: none; background: #e2e2e2 } #menu_web li .sub_main_menu_item a { float: left; padding: 0 10px; height: 28px; display: inline-block; font: 700 12px/28px arial; margin: 5px 0 0 } #menu_web li .sub_main_menu_item a:hover { color: #9F224E } @font-face { font-family: 'arialbold'; src: url(../components/printer/fontmenu/arialbd.eot); src: url(../components/printer/fontmenu/arialbd.eot?#iefix) format("embedded-opentype"), url(../components/printer/fontmenu/arialbd.woff2) format("woff2"), url(../components/printer/fontmenu/arialbd.woff) format("woff"), url(../components/printer/fontmenu/arialbd.ttf) format("truetype"), url(../components/printer/fontmenu/arialbd.svg#arialbold) format("svg"); font-weight: 400; font-style: normal } #menu_web li a { font-family: arialbold; font-size: 12px; white-space: nowrap } .arrow_lastest_menu { width: 9px; height: 10px; background: url(../components/printer/images/graphics/icon_total_01.png) no-repeat -278px -31px; line-height: 12px } .item_have_more_menu.active .arrow_lastest_menu, .item_have_more_menu a.end:hover .arrow_lastest_menu { background: url(../components/printer/images/graphics/icon_total_01.png) no-repeat -278px -16px } #menu_web li.active a.mnu_giaitri, #menu_web li a.mnu_giaitri:hover, a.mnu_giaitri:hover { color: #d71450 } #menu_web li.active a.mnu_thethao, #menu_web li a.mnu_thethao:hover, a.mnu_thethao:hover { color: #58a12b } #menu_web li.active a.mnu_kinhdoanh, #menu_web li a.mnu_kinhdoanh:hover, a.mnu_kinhdoanh:hover { color: #04416d } #menu_web li.active a.mnu_doisong, #menu_web li a.mnu_doisong:hover, a.mnu_doisong:hover { color: #2D96B5 } #menu_web li.active a.mnu_sohoa, #menu_web li a.mnu_sohoa:hover, a.mnu_sohoa:hover { color: #df9c00 } #menu_web li.active a.mnu_dulich, #menu_web li a.mnu_dulich:hover, a.mnu_dulich:hover { color: #0072bb } #menu_web li.active a.mnu_thegioi, #menu_web li a.mnu_thegioi:hover, a.mnu_thegioi:hover { color: #9f224e } #menu_web li.active a.mnu_phapluat, #menu_web li a.mnu_phapluat:hover, a.mnu_phapluat:hover { color: #6e2c2d } #menu_web li.active a.mnu_khoahoc, #menu_web li a.mnu_khoahoc:hover, a.mnu_khoahoc:hover { color: #806f26 } #menu_web li.active a.mnu_xe, #menu_web li a.mnu_xe:hover, a.mnu_otoxemay:hover, a.mnu_xe:hover { color: #6a7b83 } #menu_web li.active a.mnu_bandoc, #menu_web li a.mnu_bandoc:hover, a.mnu_bandoc:hover { color: #9f224e } #menu_web li.active a.mnu_congdong, #menu_web li a.mnu_congdong:hover, a.mnu_congdong:hover, #menu_web li.active a.mnu_thoisu, #menu_web li a.mnu_thoisu:hover, a.mnu_thoisu:hover, #menu_web li.active a.mnu_tamsu, #menu_web li a.mnu_tamsu:hover, a.mnu_tamsu:hover { color: #9f224e } #menu_web li.active a.mnu_raovat, #menu_web li a.mnu_raovat:hover, a.mnu_raovat:hover { color: #176f87 } #menu_web li.active a.mnu_gocnhin, #menu_web li a.mnu_gocnhin:hover, a.mnu_gocnhin:hover, #menu_web li.active a.mnu_video, #menu_web li a.mnu_video:hover, a.mnu_video:hover { color: #9f224e } #menu_web li.active a.mnu_cuoi, #menu_web li a.mnu_cuoi:hover, a.mnu_cuoi:hover { color: #dc3926 } #menu_web li.active a.mnu_giaoduc, #menu_web li a.mnu_giaoduc:hover, a.mnu_giaoduc:hover { color: #e17100 } #menu_web li.active a.mnu_suckhoe, #menu_web li a.mnu_suckhoe:hover, a.mnu_suckhoe:hover { color: #04a59d } .mid_header { padding: 3px 0 4px; width: 100%; float: left; position: relative } #breakumb_web { margin-bottom: 5px; float: left } #breakumb_web li a { padding: 0 8px; white-space: nowrap } #breakumb_web li.start a { float: left; display: inline-block; height: 25px; font: 700 12px/25px arial; background: #eee; border-left: 3px solid #9f224e; color: #9f224e } .txt_timer { float: left; font: 400 11px/20px arial; width: 180px; text-align: right; white-space: nowrap } .txt_24h { float: left; height: 20px; display: inline-block; padding: 0 5px; font: 400 11px/20px arial; background: #e2e2e2; color: #000; margin: 0 5px } .txt_24h:hover { color: #000 } .img_rss { font-size: 0; line-height: 0 } .block_search_web .txt_input { font: 400 11px arial; border: 1px solid silver; background: #fff; height: 18px; float: left; padding: 0 5px 0 4px; width: 100px; border-right: none } .icon_seach_web { float: left; height: 20px; width: 20px; background: url(../components/printer/images/graphics/icon_search_web.gif) no-repeat left top; border-top: 1px solid silver; border-right: 1px solid silver; border-bottom: 1px solid silver; cursor: pointer; font-size: 0; line-height: 0 } .sub_breakumn { float: left; padding: 5px 0 0 } .sub_breakumn li { float: left; padding: 0 10px; background: url(../components/printer/images/graphics/bg_drash_1x12.gif) no-repeat right 0 } .sub_breakumn li.end { background: none } .sub_breakumn li a { font-weight: 400 } .sub_breakumn li.active a { text-decoration: underline } .block_breakumb_left { float: left } .list_arrow_breakumb li { float: left } .list_arrow_breakumb li a { height: 25px; display: block; float: left; font: 400 14px/25px arial; background: #eceeed; padding: 0 5px; white-space: nowrap } .list_arrow_breakumb li.start a { border-left: 3px solid #9f224e; padding: 0 8px; color: #9f224e; font-weight: 700 } .list_arrow_breakumb li a:hover { color: #000 } .list_arrow_breakumb li.start a:hover { color: #9f224e } #breakumb_web .arrow_breakumb, .list_arrow_breakumb .arrow_breakumb { width: 13px; height: 25px; display: block; float: left; background: url(../components/printer/images/graphics/icon_total_01.png) no-repeat -287px -20px } .list_arrow_breakumb li.have_cap2 .arrow_breakumb { background: url(../components/printer/images/graphics/icon_total_01.png) no-repeat -287px -45px } .list_arrow_breakumb li.cap2 .arrow_breakumb { background: url(../components/printer/images/graphics/icon_total_01.png) no-repeat -287px -70px } .list_arrow_breakumb li.cap2 a { background: #d3d3d3 } .list_arrow_breakumb li.cap3 a { background: #e2e2e2 } .list_arrow_breakumb li.have_cap3 .arrow_breakumb { background: url(../components/printer/images/graphics/icon_total_01.png) no-repeat -287px -95px } .list_arrow_breakumb li.cap3 .arrow_breakumb { background: url(../components/printer/images/graphics/icon_total_01.png) no-repeat -287px -120px } .mid_1_left { width: 360px; float: left } .mid_1_right { width: 100px; float: right; margin: 0 } .block_mid_new { width: 100%; float: left } .mid_1_right .title_news { padding: 0 0 5% } .mid_1_right .title_news a { font: 400 14px arial } #gocnhin .tentacgia_gocnhin { padding: 2px 0 0; font: 700 12px arial; color: #333; text-align: right; display: inline } #gocnhin .tentacgia_gocnhin a { color: #333 } #gocnhin { border-top: 1px solid #e2e2e2; margin: 5px 0 0; padding: 0; width: 100% } #gocnhin .title_box_category { background: #fff url(../components/printer/images/bg_box_gocnhin.gif) no-repeat left top; margin: 0 } #gocnhin .block_image_news { float: right; width: 40%; margin: 5px 0 0 5px } #homepage #gocnhin .news_lead, #homepage #gocnhin .title_news { float: none; padding: 0 } #homepage #gocnhin .title_news { padding: 0 0 10px } #gocnhin .title_news a { font: 700 13px/17px arial } * + html #gocnhin .title_news { display: inline } #gocnhin .news_lead { width: auto; font: 400 12px/16px arial } #gocnhin .block_title_gocnhin { padding-bottom: 2px; margin-bottom: 4px; background: url(../components/printer/images/graphics/bg_box_gocnhin.gif) repeat-y left top; height: 27px } #gocnhin .block_title_gocnhin a { border-top: 1px solid #9f224e; color: #9f224e; font: 700 13px/31px arial; margin: 0 0 0 10px; padding: 8px 0 0 } .gocnhin_tag { margin-bottom: 5px } .gocnhin_tag a { font-weight: 700; color: #666 } .ul_gocnhin .title_news a { font-size: 18px; font-weight: 400 } #news_home.ul_gocnhin .thumb { width: 80px } #binhluanmoinhat .title_news a { font: 400 14px arial } #binhluanmoinhat .list_news { display: block; padding-right: 13px } .tacgia_binhluan { color: #666; padding-top: 5px } #binhluanmoinhat .scroll-pane { height: 830px } #col_3 #box_cactacgia .content_box_category .thumb { width: 60px; margin: 0 10px 0 0 } #col_3 #box_cactacgia .content_box_category .title { margin-bottom: 5px } #box_cactacgia .sobaiviet { font-size: 11px; color: #666 } #col_3 #box_cactacgia .list_new_160 li { margin-bottom: 8px; padding-bottom: 9px } .tacgia_gocnhin { padding-bottom: 10px; text-align: center; float: left; width: 100% } #tacgia_detail_gocnhin .theodoi_baiviet { margin-top: 0; margin-bottom: 10px } .list_new_160 li .tacgia_gocnhin a { font-weight: 700 } .tacgia_link { padding: 10px 0 0 } .block_tacgialink { border-top: 1px dotted #e2e2e3; float: left; width: 100% } .tacgia_link a.fb { background: url(../components/printer/images/graphics/facebook.gif) no-repeat 0 0; padding: 0 0 0 27px; cursor: pointer } .tacgia_link a.email { background: url(../components/printer/images/graphics/email_gocnhin.gif) no-repeat 0 2px; padding: 0 0 0 27px; cursor: pointer } #binhluanmoinhat /* End goc nhin by huentm7 27-02-14 */ #tieudiem .title_box_category, #congdong .title_box_category { margin: 0 0 5px } .mid_1_right .list_news li:last-child { margin: 0; border: none; padding: 0 } .mid_1_right .block_image_news { font-size: 0; line-height: 0 } .mid_1_right .box_category { margin-bottom: 10px } .block_image_news { width: 100%; float: left } .item_thirdparty .txt_main_category a { margin: 3px 0 0; background: none } .item_thirdparty .title_news a { font: 400 14px arial } #col_3 .list_news { padding: 0 } #col_3 .block_image_news .news_lead { padding: 0 } .btn_slide_photo { background: url(../components/printer/images/graphics/btn_next_pre_slide_show_boxvideo300.png) no-repeat left top; height: 23px; width: 23px; position: absolute; top: 75px; z-index: 10 } .next_btn { left: 10px } .prev_btn { right: 10px; background-position: -23px 0 } .line_col { background: url(../components/printer/images/graphics/bg_line_col.gif) repeat-y 490px 0; margin-bottom: 20px } .pagination_news a { float: left; display: inline-block; height: 22px; border: 1px solid #d6d6d6; padding: 0 10px; color: #000; font: 400 11px/24px arial; border-radius: 3px; margin: 0 0 0 6px } .pagination_news a:hover, .pagination_news a.active { background: #c8c8c8; font-weight: 700 } .pagination_news span { margin: 0 0 0 10px } .pagination_news a img { float: left } .pagination_news a.pagination_btn { padding: 0; border: none; height: 24px; width: 24px } .pagination_news a.pa_prev:hover, .pa_prev { background: url(../components/printer/images/graphics/pagination_prev.gif) no-repeat left top } .pagination_news a.pa_next:hover, .pa_next { background: url(../components/printer/images/graphics/pagination_next.gif) no-repeat left top } .view_date_time { float: left } .bottom_pagination { padding: 10px 0 0 } .bottom_hop_tac { width: 100%; float: left; border-top: 1px dotted #dfdfdf; padding: 5px 0 0; margin: 5px 0 0 } .txt_hoptac { width: 100%; float: left; padding-bottom: 5px; font: 400 11px arial; color: #000 } #col_2 .txt_hoptac { width: 35% !important } #col_2 .nhataitro { float: right } #col_2 .nhataitro img.hoptac { margin: 0 10px 0 0 } #hanghoa .nhataitro img.hoptac { margin: 0 5px 0 0 } .list_new_140 li { width: 46%; float: left; margin: 0 4% 0 0; padding: 0 0 10px } .list_new_140.make_class_end.end li, .list_new_140.make_class_end li { padding: 0 } .list_new_140 li a { font: 400 14px arial } .list_new_140.end li { padding: 0 } .list_new_140 { width: 100%; float: left } .tab_click { padding: 0 0 10px } .tab_click p { padding: 0 0 0 10px } .tab_click a { font: 400 11px arial; margin: 0 19px 0 0; color: #666 } .tab_click a.active { font: 700 12px arial } .titlelong .title_box_category { height: auto; background-color: #eee } .titlelong .txt_main_category a { font: 700 14px/18px arial; height: auto; padding: 5px 0 } .block_timer_share { width: 100%; float: left } #box_details_news #breackcumb_portal { padding-bottom: 5px; padding-top: 10px } #box_details_news .block_timer { font: 400 11px arial; padding: 5px 0 0; white-space: nowrap } #box_details_news .content_news { padding: 0 0 10px; overflow: hidden } #box_details_news .title_news { margin-top: 10px; color: #333 } #box_details_news .title_news a.title_topic { color: #333 } #box_details_news .title_news, #box_details_news .relative_news { width: 100%; float: left; padding-bottom: 10px; color: #333 } #box_details_news .title_news h1 { font: 400 28px/32px arial; text-rendering: geometricPrecision } #box_details_news .short_intro, .relative_news { font-weight: 700 } #box_details_news .short_intro { font: 700 14px/18px arial; width: 100%; float: left; padding-bottom: 10px; color: #444; text-rendering: geometricPrecision } #box_details_news .short_intro h3 { font: 700 14px/18px arial } #box_details_news .gocnhin .short_intro { color: #333; font: 400 14px/18px arial } #box_details_news .short_intro a, #box_details_news .fck_detail a { color: #004f8b } #box_details_news .fck_detail .btn_control_tv_slider { top: 24% } #box_details_news .relative_new { width: 100%; float: left; padding-bottom: 5px } #box_details_news .relative_new .list_news_dot_3x3_300 { margin: 0; border: none; padding: 0 } #box_details_news .relative_new .list_news_dot_3x3_300 li { padding: 0 0 5px 10px; background-position: 0 6px } #box_details_news .fck_detail { width: 98%; float: left; overflow: hidden; font: 400 14px arial; padding: 0 2% 0 0; color: #333 } #box_details_news .fck_detail table caption { caption-side: bottom; font: 400 14px arial; color: #333; background: #f5f5f5; padding: 10px; text-align: left } #box_details_news .fck_detail table.tplCaption td { line-height: 0; padding: 0 } #box_details_news .fck_detail table.tplCaption td td { line-height: auto; } #box_details_news .fck_detail table { max-width: 100%; margin: 0 auto 10px; width: auto } #box_details_news .fck_detail ul, #box_details_news .fck_detail ul li { list-style-type: disc; margin-left: 7px } #box_details_news .fck_detail ol { list-style: decimal; padding: 0 0 0 30px; margin: 0 } #box_details_news .fck_detail ol li { list-style-type: decimal; margin-left: 7px } #box_details_news .fck_detail td { padding: 2px } #box_details_news .fck_detail table.tplCaption td.caption, #box_details_news .fck_detail table.tplCaption td.Image, #box_details_news .fck_detail table.tplCaption td p.Normal, #box_details_news .fck_detail table.tplCaption td .Image, #box_details_news .fck_detail .tplCaption .Image { font: 400 12px arial; color: #333; background: #f5f5f5; padding: 10px; margin: 0 } #box_details_news .fck_detail table.tbl_insert .Normal { padding: 0; background: none; color: #333 } #box_details_news .fck_detail p.Image { margin: 0; padding: 5px } #box_details_news .fck_detail .Normal, #box_details_news .fck_detail p { margin: 0 0 1em; line-height: 18px; text-rendering: geometricPrecision } #box_details_news .fck_detail p.subtitle { font-weight: 700 } #box_details_news .fck_detail table td.Image p { margin: 0 0 1em } #box_details_news .fck_detail .ContractNo { display: none } #box_details_news .fck_detail table td.PnDTitle { color: #FFF; font-family: 'Verdana'; font-size: 8pt; font-weight: 700; text-decoration: none } #box_details_news .news_same_title { padding: 20px 0 0 } #box_details_news .txt_title_same { padding-bottom: 5px; border-bottom: 1px solid #e5e5e5; width: 100%; font: 700 12px arial } #box_details_news .news_same_title ul { padding: 10px 0 0 } #box_details_news .news_same_title li { width: 460px; overflow: hidden } #detail_page_live.line_col, #detail_page.line_col { background: url(../components/printer/images/graphics/bg_1x1_gray.gif) repeat-y 68.37% 0; margin-bottom: 20px } #box_details_news .list_slide { width: 100%; float: left; position: relative; margin-bottom: 10px } figure { width: 98%; margin: 0 auto; padding: 0 } .video-js { width: 100% !important; height: 100% } #col_660 { width: 67.35% } #col_300 { width: 30.61% } .block_share a { float: left; margin: 0 0 0 5px } .block_share .drash_share { float: left; color: #e6e6e6; margin: 0 0 0 5px } .relative_new p .icon_tinlienquan { background: url(../components/printer/images/graphics/bg_dot_gray_3x3.gif) no-repeat left 6px; display: inline-block; height: 12px; width: 5px } .line_col_480 { background: url(../components/printer/images/graphics/bg_1x1_gray.gif) repeat-y 74.25% 0 } .block_col_480 { width: 72.73%; float: left } .block_col_160 { width: 24.24% } .social_share { margin-bottom: 15px } #social_like { position: relative; z-index: 1000 } .item_social, .social_share .item_social { float: left; margin: 0 10px 0 0; z-index: 999; position: relative } .social_twitter, .social_plus { width: 70px } .social_share .btn_quantam { display: block; height: 20px; width: 75px; background: url(../components/printer/images/graphics/icon_total_01.png) no-repeat -80px -320px; float: left; margin: 0 } .social_share .btn_quantam.dislike { background: url(../components/printer/images/graphics/icon_total_01.png) no-repeat -80px -340px } .social_share .btn_phanhoi { display: block; height: 20px; width: 75px; background: url(../components/printer/images/graphics/btn_phanhoi.gif) no-repeat 0 0; float: left } .social_share .number_count { height: 20px; background: url(../components/printer/images/graphics/bg_arrow_social_like.gif) no-repeat left top; padding: 0 0 0 7px; float: left; margin: 0 0 0 4px } .social_share .number_count span { float: left; height: 20px; display: block; background: #f5f5f5; color: #656565; font: 400 11px/20px arial; padding: 0 5px 0 3px } title_div_fbook { margin-bottom: 25px; display: none } .title_div_fbook.title_div_fbook { margin: 10px 0 0 } .div-fbook { display: none } .div-fbook .item_social { float: left; margin: 0 0 0 10px } .style_02 { background: url(../components/printer/images/graphics/bgline_title_d6.gif) repeat-x left top } .style_02 .txt_main_category a { background: url(../components/printer/images/graphics/bg_dot_gray_3x3_vne.gif) repeat-x left -1px; color: #000; padding: 5px 0 0 } .style_03 { background: url(../components/printer/images/graphics/bgline_title_d3.gif) repeat-x left top } .style_03 .txt_main_category a { background: url(../components/printer/images/graphics/bg_dot_gray_3x3_vne.gif) repeat-x left -1px; color: #000 } #box_tinkhac .title_box_category { margin: 0 } #box_tinkhac .content_box_category .list_news_dot_3x3 { margin: 0; border: none; padding: 0 } #box_tinkhac .content_box_category .list_news_dot_3x3 a { font: 400 16px arial; background-position: 0 6px; color: #000 } #box_tinkhac .content_box_category .list_news_dot_3x3 span.txt_666 { font: 400 14px arial } .txt_view_more { color: #666; float: right; padding: 0 10px 0 0; background: url(../components/printer/images/graphics/bg_arrow_xemthem.gif) no-repeat right 5px; font: 400 11px arial } .mg_bottom_20 { margin-bottom: 15px } .thumb_160 { margin-bottom: 5px; position: relative } .thumb_160 img { float: left; font-size: 0; line-height: 0; width: 100% } .style_03 .list_new_160 li a { font: 400 14px arial } #col_3 .content_box_category .thumb { width: 160px; margin: 0 0 10px } #box_tinlienquan.mg_bottom_20 { margin: 15px 0 10px } #box_comment .txt_title_comment_detal { font: 700 12px arial; padding-bottom: 5px; text-rendering: geometricPrecision } #box_comment .txt_title_comment_detail { font: 700 12px arial; padding-bottom: 5px } #box_comment .txt_blue:hover b { text-decoration: underline } #box_comment .more_bottom_detal { padding-bottom: 10px } .block_input_comment .input_comment textarea { font: 400 12px/18px arial; background: #fff; border: 1px solid #c5c5c5; width: 98.5%; color: #666; overflow: hidden; padding: 5px 0 0 1%; float: right; height: 50px } .block_input_comment .confirm_comment { padding: 5px 0 0 } .block_input_comment .btn_send_comment { background: #9d234c; padding: 4px 18px 4px 17px; font: 700 12px arial; color: #fff; border: none; cursor: pointer; float: right; margin: 10px 0 0 } .block_input_comment .txt_check { margin: 1px 5px 0 0; float: left } #box_comment .title_show { color: #333; background: #eee; position: relative; height: 26px; width: 100%; float: left; text-rendering: geometricPrecision } #box_comment .title_show .ykien_vne { font: 400 14px/26px arial; color: #9d234c; padding: 0 0 0 10px } * + html #box_comment .title_show .ykien_vne { width: 650px } #box_comment .title_show .txt_songuoithich { color: #666; font: 400 11px/26px arial } #box_comment .title_show p b { color: #000 } #box_comment .comment_item { padding: 10px 10px 5px } * + html #box_comment .comment_item { width: 640px } * + html #box_coment_300 #box_comment .comment_item { width: 100% } #box_comment .comment_item .user_status .left.txt_11 { font-size: 12px; padding: 5px 0 0; white-space: nowrap } #box_comment .comment_item .user_status .block_like_web { position: relative; padding: 5px 0 0 } #box_comment .comment_item .user_status .block_like_web .block_share_cmt_fb { position: absolute; right: 0; top: 24px; display: none; z-index: 9 } #box_comment .comment_item .user_status .block_like_web .share_cmt_fb { padding: 0 8px 0 0; background: url(../components/printer/images/icons/arrow_chiase_coment.gif) no-repeat right 5px } #box_comment .comment_item .user_status .block_like_web .block_share_cmt_fb img { width: 16px } #box_comment .comment_item p { padding-bottom: 2px; line-height: 18px; font-size: 13px } #box_comment .comment_item p .fullname a { color: #000 } #box_comment .comment_item p .fullname a:hover { color: #004f8b } #box_comment .hight_light { background: #f8f8f8 } #box_comment .comment_item .txt_view_more { text-align: right; margin: 0; padding: 0; background: none } #box_comment .comment_item .txt_view_more a { color: #004f8b; text-decoration: underline } #box_comment .comment_item .txt_view_more a:hover { color: #666 } #box_comment .more_bottom_detal { padding: 10px 0 0 } #box_comment .more_bottom_detal b { color: #333 } #box_comment .more_bottom_detal .txt_view_more a:hover b { color: #004f8b } #box_comment .more_bottom_detail { padding: 10px 0 } #box_comment .sub_comment { float: right; width: 95%; padding: 5px 0 0 } * + html #box_comment .sub_comment { width: 600px } * + html #box_coment_300 #box_comment .sub_comment { width: 100% } #box_comment a.link_thich { background: url(../components/printer/images/graphics/dot_blue.gif) no-repeat scroll right 7px; color: #004F8B !important; margin-right: 4px; padding-right: 6px } #box_comment a.link_thich.unlike { color: #858585 !important } #box_comment .counter_world { font: 400 11px arial; color: #666 } #box_comment .view_more_coment { width: 100%; float: left; height: 26px; background: url(../components/printer/images/graphics/bg_1x1_gray.gif) repeat-x left 13px; margin: 10px 0; text-align: center } * + html #box_comment .view_more_coment { width: 660px } #box_comment .view_more_coment a { background: #eee; padding: 0 20px; font: 700 11px/26px arial; color: #666; text-align: center; display: inline-block } #box_comment .sub_comment .input_comment { padding: 0 0 10px; background: none; margin-bottom: 10px; border-bottom: 1px dotted #e2e2e3 } * + html #box_comment .sub_comment .block_input_comment .input_comment { width: 600px } * + html #box_comment .sub_comment .block_input_comment .input_comment textarea { width: 593px } * + html #box_coment_300 #box_comment .view_more_coment { width: 100% } * + html #box_coment_300 #box_comment .input_comment { width: 280px } * + html #box_coment_300 #box_comment .sub_comment .block_input_comment .input_comment { width: 260px; float: left; position: static } * + html #box_coment_300 #box_comment .sub_comment .block_input_comment .input_comment textarea { width: 280px } .user_status { position: relative; z-index: 999 } .user_status.avatahover { z-index: 9999 } .comment_item .info_avata_cmt { position: absolute; left: 0; bottom: 28px; padding: 10px; border: 1px solid #ccc; background: #f4f4f4; color: #000; width: 420px; display: none } .comment_item .info_avata_cmt .avata_coment { width: 100px } .comment_item .info_avata_cmt .avata_coment img { width: 100% } .btn_traloi { display: inline-block; float: left; width: 50px; height: 24px; padding: 1px 0 0 20px; color: #004074; font: 700 12px/25px arial; background: url(../components/printer/images/graphics/bg_btn_traloi.gif); margin: 0 .5em 0 0; color: #004074 } .btn_like { display: inline-block; float: left; height: 25px; background: url(../components/printer/images/graphics/bg_90x25.gif) no-repeat right -25px; padding: 0 2px 0 0; color: #004074 } .btn_like span { display: inline-block; float: left; height: 24px; padding: 1px 5px 0 28px; font: 700 12px/25px arial; color: #004074; background: url(../components/printer/images/graphics/bg_90x25.gif) no-repeat left top } .btn_like.unlike span { background: url(../components/printer/images/graphics/bg_90x25.gif) no-repeat left -50px; color: #666 } .numb_like { display: inline-block; float: left; height: 25px; background: url(../components/printer/images/graphics/bg_num_like_90x25.gif) no-repeat right bottom; padding: 0 2px 0 0; margin: 0 0 0 5px } .numb_like span { display: inline-block; float: left; height: 24px; padding: 1px 5px 0 10px; font: 400 11px/25px Palatino Linotype; color: #000; background: url(../components/printer/images/graphics/bg_num_like_90x25.gif) no-repeat left top } .block_relative { position: relative } .txt_blue { color: #004f8b !important } .icon_portal { display: inline-block; background: url(../components/printer/images/icons/icon_portal.gif) no-repeat } .icon_feedback { background-position: -545px 2px; width: 13px } * + html .icon_feedback { background-position: -545px -1px } .icon_like { width: 13px; background: url(../components/printer/images/graphics/icon_total_01.png) no-repeat -122px -26px; cursor: pointer } .icon_like.unline { background-position: -160px -26px } .icon_like.unline:hover { background-position: -141px -24px } #box_comment .subcomment_item { padding-top: 5px; margin-bottom: 5px; border-top: 1px dotted #e2e2e3 } .block_input_comment { border-top: 1px solid #dedede } #comment_reply_wrapper { border: none; padding: 5px 0 } .input_comment { padding: 10px; background: #f5f5f5; position: relative; z-index: 2; margin: 1px 0 0 } .google_name { cursor: pointer; font: 700 13px arial; min-width: 80px; padding: 5px; color: #666 } .block_action_google ul { display: block; float: left; list-style-type: none; margin: 0; padding: 0; width: 100% } .block_action_google li a { color: #666; display: block; font: 400 14px/21px arial; height: 21px; padding: 5px 0 0 5px } .block_action_google li a:hover { color: #000 } .like_google { background: none repeat scroll 0 0 #F5F5F5; border: 1px solid #F5F5F5; position: absolute; right: 75px; top: 5px; width: auto; z-index: 99 } .like_google.active { border: 1px solid #CCC; background: #fff } .google_name #open_id_name { background: url(../components/printer/images/graphics/bg_arrow_xam_4x7.gif) no-repeat right 7px; display: inline-block; margin: 5px 0 0; padding: 0 10px 0 0; white-space: nowrap } .block_action_google { display: block; float: left; width: 100%; border-top: 1px solid #CCC; display: none } * + html .input_comment { width: 640px; float: left } * + html .block_btn_send { width: 200px } #login-vne4 { background: #f4f4f4; padding: 0 } #login-vne3 .ttOline, #login-vne4 .ttOline, #login-vne5 .ttOline, #login-vne6 .ttOline, #login-vne7 .ttOline, .ttOline { background: #fff; height: 28px; padding: 8px 20px 0; display: block; overflow: hidden; font: 700 16px arial; color: #000 } .complete-form { padding: 20px; display: block; overflow: hidden; font: 500 14px arial; color: #000; width: auto } .close-lb { background: url(../components/printer/images/graphics/icon_total_01.png) no-repeat -22px -286px; width: 30px; height: 30px; position: absolute; top: 5px; right: 10px; cursor: pointer } .comment_item .avata_coment { width: 24px; margin: 0 10px 0 0; float: left } .input_comment .avata_coment { width: 24px; margin: 0 10px 0 0; float: left } .input_comment .avata_coment img { width: 24px } .block_turn_back_news { font: 700 14px arial; background: #f0f0f0; padding: 10px 0; border-bottom: 1px solid #fff; position: relative } .block_turn_back_news p { padding: 0 0 0 15px } .block_turn_back_news a { color: #28aa47 } .block_turn_back_news .icon_turnback { position: absolute; left: -5px; top: 10px } #box_tinkhac_detail .txt_main_category { margin: 0 } #box_tinkhac_detail .list_10tinkhac { border-top: 1px dotted #E2E2E3 } #box_tinkhac_detail .list_news li { width: 48%; margin: 0 2% 0 0; border-bottom: none } #box_tinkhac_detail .list_news { width: 50%; float: left } #box_tinkhac_detail .list_news li { width: 47.8% } * + html #box_tinkhac_detail .list_news { width: 49.8% } #box_tinkhac_detail .list_news li.end { margin: 0; padding-bottom: 10px } #box_tinkhac_detail .list_news_dot_3x3_300 { margin: 0; padding: 5px 0 0; border: none } .w320 { width: 320px } #box_tinkhac_detail .content_box_category .list_news_dot_3x3 { border: none; margin: 0 } #box_tinkhac_detail .list_news li a, #box_tinkhac_detail .content_box_category .list_news_dot_3x3_300 li a { font: 400 14px arial; color: #000 } #box_tinkhac_detail .list_news li a:hover, #box_tinkhac_detail .content_box_category .list_news_dot_3x3_300 li a:hover { color: #004f8b } #box_tinkhac_detail .list_news li .news_lead { padding: 5px 0 0 } .thumb_relative, .thumb_140 { width: 100%; float: left; position: relative; margin-bottom: 10px } .thumb_140 img, .thumb_relative img { float: left; width: 100% } .box_num02 { border-bottom: 1px dotted #e2e2e3; margin-bottom: 10px } .box_num02 .news_lead { padding: 0 0 10px } .block_tag .txt_tag { background: #f1f1f1 url(../components/printer/images/graphics/bg_icon_tag.gif) no-repeat left top; padding: 0 10px 0 20px; height: 20px; color: #939393; float: left; font: 400 11px/20px arial; margin: 0 5px 0 0 } .block_tag .tag_item { display: inline-block; height: 20px; font: 400 11px/20px arial; color: #656565; padding: 0 10px; white-space: nowrap; background: #f1f1f1; margin: 0 5px 5px 0; float: left } .block_tag .tag_item:hover { background: #e2e2e2 } .title_block_col { font: 400 20px arial; color: #9f224e; padding: 0 0 8px; width: 100%; float: left; border-bottom: 1px solid #e2e2e3; margin: 5px 0 8px } .title_block_col .theodoi_baiviet { margin-top: 0 !important } .folder_item_list #news_home.list_news .title_news { float: none; width: auto } .folder_item_list #news_home.list_news .list_news_dot_3x3 { display: inline; float: none; padding: 0; width: auto } .folder_item_list .list_news .thumb img, .folder_item_list .list_news .thumb { width: 180px } .folder_item_list #news_home.list_news .news_lead { padding-bottom: 10px } .go_head { width: 980px; margin: 0 auto; border-top: 1px solid #dedede; background: #f4f4f4 } .go_head a { display: block; float: left; height: 29px; font: 700 11px/29px arial; color: #666; padding: 0 20px; border-right: 1px solid #dedede } .go_head a .icon_responsive { float: left; margin: 5px 5px 0 0 } #col_2 #boxthamdoykien .vote_3col td .w20 { width: 10% } #col_2 #boxthamdoykien .vote_3col td .w130 { width: 80% } #col_300 .tb_servey td .w20 { width: 7% } #col_300 .tb_servey td .w130 { width: 93% } .tb_servey .w20 { float: left; width: 5% } .tb_servey.vote_2col .w20 { width: 8% } .tb_servey .w130 { float: left; width: 87%; margin: 0 0 0 3% } .fck_detail .tb_servey { text-align: left } .fck_detail .tb_servey .w130 { width: 95%; margin: 0 } .fck_detail .tb_servey.vote_3col td .w130 { width: 85% } .fck_detail .tb_servey.vote_3col td .w20 { width: 10% } .fck_detail .tb_servey.vote_2col td .w130 { width: 90% } .control_pagination a { float: left; margin: 7px 0 0 10px } #box_tinkhac_detail .title_box_category { background: url(../components/printer/images/graphics/bg_2x2_xam.gif) repeat-x left 0 } .block_tincheo { margin-top: 10px; padding-top: 10px; border-top: 1px solid #e2e2e3 } .block_tincheo .icon_responsive { float: left; margin: 2px 5px 0 0 } .block_tincheo li { width: 100%; float: left; padding: 0 0 5px } .block_tincheo li a { font-size: 14px } #box_tinlienquan .txt_main_category { line-height: 18px; margin: 0 } #box_tinlienquan .title_box_category { height: auto; margin: 0 0 5px } .style_02 .txt_main_category a, .title_box_category .line_top_box { height: auto } #box_tinlienquan .content_box_category .list_news_dot_3x3 { margin: 0; border: 0; padding: 0 0 10px } #box_tinlienquan .content_box_category .list_news_dot_3x3 li { padding: 0 0 0 10px; background: url(../components/printer/images/graphics/bg_dot_gray_3x3.gif) no-repeat left 6px } #box_details_news #box_tinlienquan .content_box_category .list_news_dot_3x3 a { font: 400 14px arial; color: #000; background-position: 0 7px; display: inline } #box_details_news #box_tinlienquan .content_box_category .list_news_dot_3x3 span { font: 400 14px arial; padding: 0 0 0 5px } #box_details_news #box_tinlienquan .content_box_category .list_news_dot_3x3 span.txt_num_comment { font: 400 12px arial } .boxhoptac .txt_main_category a { background: none } .xemtiep { text-align: center; width: 100%; margin: 10px 0 20px; float: left; display: none; background: #f5f5f5 } .xemtiep a { font: 400 14px arial; display: block; width: 100%; text-align: center; padding: 10px 0 } .xemtiep a:hover { color: #000 } .block_goithutoasoan { width: 100%; height: 40px; float: left; background: #eee url(../components/printer/images/graphics/img_goithutoasoan.gif) no-repeat left top; margin: 0 0 15px } .block_goithutoasoan a { padding: 0 0 0 15%; width: 85% } .block_goithutoasoan .content_goithutoasoan { width: 100%; float: left; height: 40px; font: 700 14px/40px tahoma } .list_new_300 li { width: 100%; float: left; padding: 0 0 10px; border-bottom: 1px dotted #e2e2e3; margin: 0 0 10px } .list_new_300 li .thumb_140 { width: 140px; margin: 0 10px 0 0 } .list_new_300 li a { font: 400 14px arial } .list_new_300 li.end { margin: 0; padding: 0; border: none } .content_vptt { background: #eee; font: 700 12px arial; width: 100%; float: left } .content_vptt p { padding: 5px 7px; border-bottom: 1px solid #fff; font: 700 14px arial } .content_vptt .timer_pvtt { padding: 7px 10px } .image_pvtt img { width: 100% } .content_vptt .timer_pvtt { color: #333; font: 400 12px/24px arial; padding: 7px 5px } .content_vptt .icon_clock { background-position: -737px 6px; display: inline-block; width: 12px; margin: 0; line-height: 24px } #box_details_news .btn_gui_pvtt { display: inline-block; padding: 10px 15px; background: #9f224e; color: #fff !important; font: 700 14px arial } .content_vptt .btn_gui { float: right; display: inline-block; padding: 5px 10px; background: #9f224e; color: #fff !important; font: 700 11px arial } #box_details_news #phongvantructuyen { background: #eee } #box_details_news #phongvantructuyen p { margin: 0 } #box_details_news #phongvantructuyen p a { color: #333 } #box_details_news .image_pvtt { width: 30% } #box_details_news .content_vptt { width: 70% } #box_details_news .dangphongvan, #phongvantructuyen .dangphongvan { color: #9f224e; font-size: 12px } #box_details_news .block_pvtt { margin-bottom: 20px; line-height: 32px } #box_details_news .fck_detail a.txt_thamgia { color: #666; text-decoration: underline; font-size: 12px } #search_404 { padding: 40px 0 } .block_404 { width: 660px; margin: 0 auto } .mid_block { width: 640px; padding: 0 10px; float: left } .title_404 { width: 100%; float: left; text-align: center } .title_404 .txt_404 { font: 400 28px/40px arial; color: #9f224e } .title_404 .txt_center { text-align: center; font: 400 14px arial } .content_404 { width: 100%; float: left; padding: 20px 0 } .content_404 p { font: 700 14px arial; padding-bottom: 5px } .content_404 p a { color: #c00c1f } .chose_search_404 { width: 300px; float: left; margin: 10px 0 0 220px; display: inline } .chose_search_404 label { margin: 0 30px 0 0; float: left; cursor: pointer; font: 400 11px arial } .chose_search_404 input { margin: 1px 3px 0 0; float: left } *html .chose_search_404 input { margin: -3px 0 0 } * + html .chose_search_404 input { margin: -3px 0 0 } .bor_search input.txt_input_search { border: 1px solid silver; float: left; width: 500px; padding: 8px 0 7px 10px; height: 13px; font: 400 12px arial; color: #000; margin: 0 0 0 40px } .btn_main_search { width: 95px; height: 29px; color: #fff; font: 700 13px arial; background: #9d1e44; cursor: pointer; border: none; text-transform: uppercase; float: right } #rsspage { margin-bottom: 20px } #rsspage.line_page { background: url(../components/printer/images/graphics/bg_1x1_gray.gif) repeat-y 68% 0 } .title_block { border-bottom: 1px dotted #E2E2E3; font: 700 14px arial; padding-bottom: 10px } #rsspage .block_rss .title_block { margin-bottom: 20px } .block_rss { width: 67% } #rsspage .list_item_rss { width: 48% } #rsspage .list_right { float: right } .list_item_rss { width: 31%; float: left } .list_item_rss li { float: left; padding: 0 0 5px; margin: 0 0 5px; border-bottom: 1px dotted #e2e2e3; width: 100% } .list_item_rss li a { font: 400 14px arial; float: left } .list_item_rss li a.ico_respone_rss { float: right } .list_item_rss li.active a { font: 700 14px arial } .line_mid_670 { background: url(../components/printer/images/graphics/bg_1x1_gray.gif) repeat-y 50% 0 } .txt_block_rss { padding: 10px 0 0 } .txt_block_rss p { padding: 0 0 10px; font: 400 12px arial } .block_txt_right_rss { width: 31% } #videopage { padding-bottom: 20px } #box_top_video { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #e2e2e3 } .block_menu_video_320 { display: none } .line_mid_980_300 { background: url(../components/printer/images/graphics/bg_1x1_gray.gif) repeat-y 68.37% 0 } .box_flash_video { width: 67.35% } .block_flash { width: 100%; overflow: hidden; margin: 0 0 15px } .box_flash_video .social_share { margin-bottom: 10px } .box_flash_video .title_video h1 { font: 400 24px arial } .box_flash_video .block_view_num { margin: 0 0 10px } .view_num { color: #9f224e } .box_flash_video .block_lead { font: 700 14px arial; color: #323232; padding-bottom: 5px } .list_video_right { width: 30.61%; float: right } .block_video_box300 .list_video_right { width: 100% } .list_video_right .thumb_140 { width: 140px; height: 84px; margin: 0 10px 0 0; position: static } .list_video_right .title_news { float: none; width: auto } .list_video_right li { border-bottom: 1px dotted #E2E2E3; float: left; margin-bottom: 10px; padding-bottom: 10px; width: 100% } .list_video_right li.end { margin: 0; padding: 0; border: none } .title_menu_video { padding: 5px 0; border-bottom: 1px solid #dedede } .title_menu_video p { padding: 0 0 0 10px } .block_menu_video { width: 19% } .block_menu_video ul { width: 100%; float: left; padding: 5px 0 0 } .block_menu_video ul li { background: url(../components/printer/images/graphics/bg_dot_gray_3x3.gif) no-repeat left 10px } .block_menu_video ul li.active, .block_menu_video ul li:hover { background: #eee url(../components/printer/images/graphics/bg_dot_gray_3x3.gif) no-repeat left 10px } .block_menu_video ul li:hover a { color: #000 } .block_menu_video ul li a { margin: 0 0 0 10px; display: block; padding: 5px 0; font: 400 12px arial } .block_menu_video ul li a.have_child { background: url(../components/printer/images/graphics/img_expan_menu_video.gif) no-repeat 95px 10px } .block_menu_video ul.child_menu { padding: 0 0 0 8%; float: none; width: 92%; background: #fff } .block_menu_video ul li ul.child_menu { background: #fff; display: none } .block_menu_video ul li ul.child_menu a.active { color: #9f224e; background: none } .block_list_video_mid { width: 80%; float: right } .block_list_video_mid li { width: 30.5%; margin: 0 .5% 5px 1.5%; overflow: hidden; display: inline-block; vertical-align: top } * + html .block_list_video_mid li { float: left; height: 160px } .list_video_right .title_news a, .block_list_video_mid li a { font: 400 14px arial } .block_list_video_mid li .thumb_160 { width: 100%; float: left; margin-bottom: 10px } .block_col_left_660 { background: url(../components/printer/images/graphics/bg_1x1_gray.gif) repeat-y 20% 0; float: left; width: 670px } .block_col_left_660 .pagination_news { margin: 0 10px 0 0 } .block_col_right_300 { width: 300px; float: right } .block_video_list_croll .list_video_right { width: 96%; float: left } .block_video_list_croll .scroll-pane { height: 300px } .title_box_category.no_space { margin: 0 } .block_tab_type { background: #eee; height: 30px; margin: 0 0 10px } .block_tab_type a { display: block; float: left; height: 30px; padding: 0 15px; margin: 0 0 0 10px; font: 400 12px/30px arial; color: #666 } .block_tab_type a:hover, .block_tab_type a.active { font: 700 12px/30px arial; color: #000; background: #fff } .title_chose_day { margin: 0 0 10px; border-bottom: 1px solid #e2e2e3 } .title_chose_day .right { float: none } .block_thoitiet_160 { width: 100%; float: left; background: #eee; padding: 0 0 5px; border-top: 2px solid #d3d3d3; margin-bottom: 15px } .block_thoitiet_160 .rss { width: 100% } .block_thoitiet_160 .txt_location { margin: 13px 0 0 3px; padding: 0 0 0 10px; font: 700 12px tahoma; white-space: nowrap } .block_thoitiet_160 .temprature { float: right } .block_thoitiet_160 .temprature a:hover .txt_doC_den { color: #000 } .block_thoitiet_160 .temprature .txt_doC_den { background: url(../components/printer/images/graphics/bg_o.gif) no-repeat scroll right 4px; margin: 11px 3px 0 0; padding: 0 7px 0 0 } .block_category_item { height: 22px; width: 100px; float: left; margin: 0 10px 10px 0 } .title_chose_day .view_date_time { margin: 0 0 10px } .block_lienhe { width: 67% } #xacnhan_page { background: url(../components/printer/images/graphics/bg_1x1_gray.gif) repeat-y scroll 68% 0; margin-bottom: 20px } #lienhe_page { padding-bottom: 20px; background: url(../components/printer/images/graphics/bg_1x1_gray.gif) repeat-y scroll 68% 0; margin-bottom: 20px } .form_lienhe { width: 100%; padding: 20px 0 0; float: left } .form_lienhe p { display: block; margin-top: 10px; position: relative } .form_lienhe label { display: block; font-size: 14px; margin: 0 0 3px } .form_lienhe label span { color: #a5315a } .form_lienhe select, .form_lienhe input[type="password"], .form_lienhe select, .form_lienhe input[type="text"], .form_lienhe input[type="email"], .form_lienhe input[type="tel"] { border: 1px solid #ccc; height: 30px; font-size: 14px } .form_lienhe select { width: 300px; padding-top: 5px } .form_lienhe .txt_input { line-height: 30px } .form_lienhe .txt_input.tieude { width: 97%; padding: 0 1% } .form_lienhe .error { display: block; font-size: 11px; color: #a5315a; margin: 3px 0 0 } .form_lienhe .note { font-size: 11px; color: #666; padding: 0 1% 0 0 } .form_lienhe .txt_area.noidung { width: 98%; height: 150px; border: 1px solid #ccc; font: 400 14px arial; padding: 5px 0 0 1% } .form_lienhe .xacnhan { width: 120px } .form_lienhe .code a { margin-top: 20px } .form_lienhe .button { margin: 10px 0; border-bottom: 1px dotted #999; padding: 0 0 10px } .form_lienhe .btn_gui { width: 65px; height: 30px; background: #9f224e; cursor: pointer; color: #fff; font: 400 14px arial; margin: 0 10px 0 0 } .form_lienhe .txt_xoatrang { text-decoration: underline } .form_lienhe .btn_xoa { font-size: 11px; text-decoration: underline; margin: 0 0 0 10px } .form_lienhe .note2 { font-size: 11px; color: #666; float: left; margin: 0 } .form_lienhe ul#thumbnails li { width: 22%; float: left; height: 120px; margin: 5px 3% 10px 0; overflow: hidden } .form_lienhe ul#thumbnails li .wrap { height: 100px; overflow: hidden } .form_lienhe ul#thumbnails li .del_action { line-height: 18px; float: right } .form_lienhe ul#thumbnails li .del_action a:hover { text-decoration: underline } #showCaptcha img { max-width: none } #lienhe_page .content { padding-top: 10px; float: left } #lienhe_page .content p { margin-bottom: 10px } #lienhe_page .block_txt_right_rss .content p { line-height: 17px } #lienhe_page .fan_page { float: left; margin-top: 10px } .item_input_lienhe { margin-bottom: 10px } #search_page { width: 100%; padding: 0 0 20px; float: left; background: url(../components/printer/images/graphics/bg_1x1_gray.gif) repeat-y 17% 0 } #search_page .line_col { background: url(../components/printer/images/graphics/bg_1x1_gray.gif) repeat-y 68% 0 } #search_page .block_mid_new { background: none } #colum_1 { width: 16%; padding: 0 1% 0 0; overflow: hidden; float: left } #search_page .search_left .loai-cmuc { border-bottom: 1px solid #dedede; padding: 10px 0 10px 7%; margin: 0 0 5px; display: block; width: 93% } #search_page .search_left .loai-cmuc a { font: 700 14px arial; color: #000 } #search_page .search_left ul li { width: 100%; float: left } #search_page .search_left ul li a { display: block; overflow: hidden; padding: 5px 0 5px 10px; font: 400 arial; color: #000; background: url(../components/printer/images/graphics/bg_dot_gray_3x3.gif) no-repeat 0 9px } #search_page .search_left ul li.active a, #search_page .search_left ul li a:hover { background: #eee url(../components/printer/images/graphics/bg_dot_gray_3x3.gif) no-repeat 0 9px } #search_page .search_left ul li a label { color: #666 } #colum_2 { width: 49%; padding: 0 1%; float: left } #search_page .form_search { padding: 12px; background: #eee; width: 100%; margin-bottom: 14px; float: left; box-sizing: border-box } #search_page .form_search .input-search { display: block } #search_page .form_search .btt_search { width: 7%; height: 30px; cursor: pointer } #search_page .form_search .wrap_txtsearch { height: 32px; width: 92%; background: #fff } #search_page .form_search .txt-search { background: none; border: none; font: 400 14px arial; color: #666; padding: 7px 10px 5px; box-sizing: border-box; float: left; width: 100% } #search_page .form_search .keyword { font: 700 14px arial; color: #000; margin: 0 0 3px } #search_page .form_search .keyword label { color: #9f224e } #search_page .form_search .info-search { display: block; overflow: visible } #search_page .form_search .info-search .txt_timkiem { font: 400 12px arial; color: #606062; float: left } #search_page .info-sRight .all { font: 400 12px arial; color: #606062; margin-top: 1px; margin-right: 15px; float: left } #search_page .info-sRight .select { font: 400 12px arial; color: #606062; float: left; background: url(../components/printer/images/graphics/date-icon.gif) no-repeat right top; padding: 0 30px 0 0; height: 21px; margin: 1px 0 0 } #search_page .info-sRight a:hover { color: #000 } #search_page #news_home.list_news .title_news { float: none; width: auto } #search_page .title_news a.txt_link label { color: #9f224e } #search_page .pagination_news a.pa_prev:hover, .pa_prev { background: url(../components/printer/images/graphics/pagination_prev.gif) no-repeat left top } #search_page .pagination_news a.pa_next:hover, .pa_next { background: url(../components/printer/images/graphics/pagination_next.gif) no-repeat left top } .info-search { font-size: 16px; margin-bottom: 15px } .info-search b { color: #9f224e } .filter_search_right { width: 100%; float: left; background: #f0f0f0; margin-bottom: 15px } .filter_search_right .filter_left a { display: inline-block; float: left; padding: 10px 15px; font: 400 12px arial; border-right: 1px solid #dddedd } .filter_search_right .filter_right a.txt_filter { display: inline-block; float: left; padding: 10px 15px; font: 400 12px arial; border-left: 1px solid #dddedd } .filter_search_right .filter_right a.txt_filter:first-child, .filter_search_right .filter_left a:last-child { border: none } .filter_search_right .filter_right a.txt_filter.active, .filter_search_right .filter_left a.active { background: #dddedd; color: #9f224e } .filter_search_right .filter_right .calenda { float: left; margin: 5px 10px 0 } .filter_search_right .filter_right #widgetCalendar { right: 0; left: auto } #colum_3 { width: 31%; float: right } .total-each { font: 400 12px arial; color: #666; background: url(../components/printer/images/graphics/7-5.gif) no-repeat right 5px; padding-right: 10px; margin-top: 5px } .info-sRight.right { position: relative } .dialog_date_search { width: 125px; padding: 10px; border: 1px solid #ccc; position: absolute; z-index: 200; background: #fff; right: -11px; top: -12px; display: none } .dl_date_content label { margin: 5px 0 0 } .dl_date_title span { color: #000 !important; font: 400 12px/8px arial } .dl_date_title a { background: url(../components/printer/images/graphics/date-icon.gif) no-repeat right 3px; padding-right: 30px; padding-top: 3px; float: right; height: 21px; margin: -1px 0 } .dl_date_content select { width: 55px; height: 20px; border: 1px solid #ccc; margin: 5px 0 0 } .dl_date_content .btn_submit { width: 55px; height: 20px; font: 700 11px/8px arial; color: #fff; background: #9f224e; margin: 10px 0 0; cursor: pointer } .kinhdoanh_category a { color: #04416d } .giaitri_category a { color: #d71450 } .thethao_category a { color: #58a12b } .doisong_category a { color: #2D96B5 } .sohoa_category a { color: #DF9C00 } .dulich_category a { color: #0072BB } .phapluat_category a { color: #6E2C2D } .giaoduc_category a { color: #E17100 } .khoahoc_category a { color: #806F26 } .xe_category a { color: #6A7B83 } .cuoi_category a { color: #DC3926 } .suckhoe_category a { color: #04a59d } .block_thumb_slide_show { width: 100%; float: left; position: relative; text-align: center; font-size: 0; line-height: 0 } .block_thumb_slide_show img { cursor: all-scroll } .block_thumb_slide_show img.left { text-align: center; float: none; cursor: all-scroll\!important; cursor: all-scroll\9 !important; *cursor: all-scroll !important } .btn_icon_show_slide_show { height: 28px; width: 28px; display: block; background: url(../components/printer/images/graphics/icon_total_01.png) no-repeat -178px -21px; position: absolute; right: 0; top: 0 } .desc_cation { width: 100%; padding: 0 0 10px; float: left; background: #f5f5f5; font-size: 14px } .item_slide_show .desc_cation { font-size: 12px; padding: 10px 10px 0; width: 100%; box-sizing: border-box } .item_slide_show .desc_cation p { padding: 0 0 10px } .desc_cation a { color: #004F8B } .desc_cation a:hover { color: #000 } .item_slide_show { margin: 0 auto 10px; clear: both } #box_slider .slider_container { width: 100%; height: 285px; position: relative; overflow: hidden } .slider_container .title_news { padding: 10px 0 } .txt_title_main_giaitri { font: 400 14px/12px Arial; color: #000; margin: 10px 0 } .dot_red { padding: 0 0 0 10px; width: 150px; background: url(../components/printer/images/graphics/bg_dot_3x3.gif) no-repeat left 7px; margin-top: 3px; float: left } .txt_title_main_giaitri span { font: 400 10px/14px Arial; color: #666; display: block } .gt_tag_items { text-decoration: underline; color: #666; margin: 0 4px } .gt_entertai_des_time { background: #f1f1f1; margin: 10px 0 0 } .gt_entertai_des_time p { padding: 10px } .gt_entertai_des_time span { font-weight: 700; color: #d71450 } .list_sao li, .tt_sao_ul_item li { width: 45%; margin: 0 4% 0 0; display: inline-block; padding-bottom: 10px; overflow: hidden; vertical-align: top } * + html .list_sao li, * + html .tt_sao_ul_item li { height: 150px } .tt_sao_ul_item span { width: 100%; float: left; padding: 10px 0 } .list_sao li p { padding: 10px 0 0 } .list_sao li p a { color: #000; font: 400 12px arial } .box_width_common { width: 100%; float: left } .movie_infomation { padding: 3px 0 0 } .movie_infomation p { margin-bottom: 3px } .content_block_thongtin { padding: 0 0 20px; font-size: 11px } .block_col_160 .txt_green, .block_col_160 .txt_red { color: #000 } h2.txt_red, .movie_infomation h2 { font: 400 14px arial; padding: 0 0 5px } .content_block_thongtin .list_dot_3x3 { float: left; width: 100% } .content_block_thongtin .list_dot_3x3 li { margin: 0 0 5px } .content_block_thongtin .list_dot_3x3 li:last-child { margin: 0 } .content_block_thongtin .dot_red { background: url(../components/printer/images/graphics/bg_dot_gray_3x3.gif) no-repeat left 6px } .content_block_thongtin .list_dot_3x3 li a, .content_block_thongtin .dot_red a { text-decoration: underline; color: #666 } .block_news_detail_right li, .content_block_thongtin .list_dot_3x3 li { padding: 0 0 0 10px; background: url(../components/printer/images/graphics/bg_dot_gray_3x3.gif) no-repeat left 6px } .block_khoichieu { width: 100%; float: left; padding: 10px 0 0 } .block_khoichieu .txt_khoichieu { padding: 10px; background: #f1f1f1 } .block_khoichieu .txt_khoichieu .txt_red { font-size: 12px } .txt_italic { font-style: italic } .block_survey_2_detail_right { width: 100%; float: left; border-top: 1px solid #CCC; margin: 10px 0 20px; display: inline; background: #f5f5f5; padding-bottom: 10px } .block_survey_2_detail_right h2 { background: #eee; padding: 5px 10px; color: #000; font-weight: 700; font-size: 14px; text-align: left; color: #9f224e } .main_survey, .block_submit { width: 100%; float: left } .block_survey_2_detail_right .item_survey { width: 100%; float: left; padding-bottom: 5px } #box_details_news .block_survey_2_detail_right .main_survey ul { list-style-type: none; margin: 0 } #box_details_news .block_survey_2_detail_right .main_survey ul li { width: 100%; float: left; list-style-type: none; margin: 0; border-bottom: 1px solid #dadada; padding: 5px 0; color: #666 } #box_details_news .block_survey_2_detail_right .main_survey ul li:hover, #box_details_news .block_survey_2_detail_right .main_survey ul li:last-child { border: none; background: none } #box_details_news .block_survey_2_detail_right .item_survey ul li .txt_survey_left { float: left; font: 400 12px arial; margin: 0 0 0 10px } #box_details_news .block_survey_2_detail_right .item_survey ul li .txt_survey_right { float: right; font: 700 12px arial; margin: 0 10px 0 0 } #box_details_news .block_survey_2_detail_right .item_survey ul li label { color: #9f224e } #box_details_news .block_survey_2_detail_right .btn_danhgia { background: #858585; padding: 4px 6px; margin: 0 0 0 5px; font: 700 11px/8px Arial; color: #fff; float: left; cursor: pointer } .rating { float: left } .star { float: left; width: 34px; height: 24px; overflow: hidden; text-indent: -999em; cursor: pointer } .star-left, .star-right { width: 12px } .star, .star a { background: url(../components/printer/images/icons/star.png) no-repeat 0 0 } .star-left, .star-left a { background: url(../components/printer/images/icons/star-left.png) no-repeat 0 0 } .star-right, .star-right a { background: url(../components/printer/images/icons/star-right.png) no-repeat 0 0 } .star a { display: block; width: 100%; height: 100%; background-position: 0 -23px } div.rating div.on a { background-position: 0 -23px } div.rating div.hover a, div.rating div a:hover { background-position: 0 0 } #ratinglt { width: 100%; position: relative; background: #f4f4f4; padding-bottom: 20px } .rating_bar { padding: 10px 10%; background: #ededed; font: 400 14px/24px arial } .input_comment .rating_bar { padding: 0 0 10px; width: 100%; float: left; background: none } .block_one_start { float: left; margin: 0 0 0 10px } .txt_numbdanhgia { margin: 0 0 0 20px } .rating_sercut { padding: 10px 10% 0 } #ratinglt .form_thamgia .btt-complete { margin: 0 0 0 10px } .txt_danhgiacuaban { margin: 0 10px 0 0 } .block_news_detail_right { width: 100%; float: left; background: #f6f6f6; margin: 0 0 15px; display: inline } .block_news_detail_right .txt_block_news_detail { font: 700 14px arial; padding: 5px 0 5px 10px; width: 150px; float: left } .block_news_detail_right ul { width: 95%; float: left; padding: 0 0 10px 5%; border-top: 1px solid #e2e2e2 } .block_news_detail_right li { padding: 0 0 0 4%; float: left; width: 96%; background: url(../components/printer/images/graphics/bg_dot_gray_3x3_vne.gif) no-repeat left 5px; font: 700 11px/16px arial; margin: 5px 0 0; display: inline; overflow: hidden } .block_news_detail_right ul.list_baihat_mv { border: none } .block_news_detail_right ul.list_baihat_mv li { background: none; padding: 0; width: 100%; padding: 0 0 10px 0; margin: 10px 0 0; border-bottom: 1px dotted #dedede } .block_news_detail_right ul.list_baihat_mv li:last-child { padding: 0; border: none } .block_news_detail_right li a { font: 700 11px arial; color: #666 } .list_baihat_mv { border-top: 1px solid #e2e2e2 !important } .txt_mv_title { padding: 0 0 0 10px; line-height: 24px } .icon_loa_24 { background: url(../components/printer/images/icons/icon_nhac_24x24.png) no-repeat 0 0; width: 27px; height: 27px; float: left } .icon_clip_24 { background: url(../components/printer/images/icons/icon_nhac_24x24.png) no-repeat 0 -74px; width: 27px; height: 27px; float: left } .icon_album_24 { background: url(../components/printer/images/icons/icon_nhac_24x24.png) no-repeat 0 -37px; width: 27px; height: 27px; float: left } .icon_playlist_24 { background: url(../components/printer/images/icons/icon_nhac_24x24.png) no-repeat 0 -110px; width: 27px; height: 27px; float: left } .txt_baihat_mv { width: 70%; float: left; padding: 0 0 0 5% } .block_news_detail_right li a.txt_baihat_mv { width: 77% } .block_news_detail_right li a.txt_baihat_mv:hover { color: #004f8b } .pic_sach { position: relative; z-index: 1; width: 100%; float: left; font-size: 0; line-height: 0; margin: 0 0 10px; text-align: center } .pic_sach .icon_like_fb1 { position: absolute; bottom: 2px; left: 2px } .book_info h2 { padding-bottom: 5px } .block_bookingsach { padding: 10px 0 0; width: 100%; float: left } .block_bookingsach a { display: block; height: 31px; float: left; width: 100%; background: url(../components/printer/images/graphics/img_muasendo.gif) no-repeat left top } .block_bookingsach a:hover { background: url(../components/printer/images/graphics/img_muasendo.gif) no-repeat left bottom } #h24qua.line_col { background: url(../components/printer/images/graphics/bg_1x1_gray.gif) repeat-y 68% 0; margin-bottom: 20px } .box_news_top_24h { width: 48% } .block_news_medium { width: 100%; float: left; overflow: hidden; margin-bottom: 10px } .block_news_medium img { width: 100% } .top24h .title_news { margin-bottom: 5px; padding-bottom: 0 } .top24h .title_news a { font: 400 arial; color: #000 } #h24qua .time { font: 11px arial; margin-bottom: 5px; color: #666 } #h24qua .box_sub_hot_news { width: 48%; float: right } #h24qua .box_sub_hot_news .title_news { float: none; width: auto } #h24qua .list_news .thumb { margin-bottom: 0; display: block; width: 45%; padding-bottom: 10px } .list-line { width: 100%; float: left } .folder_list .line_col { background: none } .box_folder { width: 48%; float: right } .box_folder .title_news { font: 14px arial; float: none; width: auto } .box_folder .title_news a { font-size: 14px } .top24h .box_sub_hot_news .list_news { width: 100% } .top24h .list_news li { padding-bottom: 0; margin: 0 0 10px } .list_news_time { border-top: 1px dotted #e2e2e3; margin-top: 10px; padding-top: 5px } .content_box_category .list_news_time li { margin: 5px 0; display: block; overflow: hidden } .long_hours { width: 25%; float: left; font: 11px arial; color: #666 } .long_hours div { display: block; padding: 0 5px 0 0 } .right_news { font: 12px arial; color: #000; width: 75% } .folder_list_left { float: left } #h24qua .folder_list { background: url(../components/printer/images/graphics/bg_1x1_gray.gif) repeat-y 50% 0 } .ul-lb li { cursor: pointer; font: 12px arial; color: #000; margin: 0 0 10px } .login-form { width: 100%; float: left; border: 1px solid #dedede; background: #fff; position: relative; padding: 10px 0 } #login-vne1 { padding: 15px 0 } #login-vne1 .login-left { width: 35%; float: left } #login-vne1 .login-right { width: 61%; float: right; padding: 0 0 0 2%; border-left: 1px solid #dedede } #login-vne1 .login-left .login-type { font: 700 14px arial; color: #000; margin: 0 0 5px; overflow: hidden; text-align: right } #login-vne1 .login-right .login-type { font: 700 14px arial; color: #000; margin: 0 0 5px; display: block; overflow: hidden } .p-social { display: block; overflow: hidden; margin: 0 0 10px } .p-social .login-social { width: 134px; height: 30px; float: right; background: url(../components/printer/images/graphics/social-login.gif) no-repeat } .p-social .lg-facebook { background-position: 0 0 } .p-social .lg-google { background-position: 0 -42px } .login-txt { margin: 0 0 3px } .login-txt .txt-login { border: 1px solid silver; background: #fff; font: 400 14px arial; color: #666; width: 85%; padding: 2px 7px; height: 20px } .login-desc { font: 400 11px arial; color: #9f224e; margin: 0 0 10px; display: inline-block; overflow: hidden } .login-btt { display: block; overflow: hidden; margin: 0; width: 100% } .btt-complete { width: 96px; height: 28px; text-align: center; padding: 2px 0 0; font: 500 14px arial; color: #fffefe; background: #9f224e; border: none; cursor: pointer } .close-lb { background: url(../components/printer/images/graphics/icon_total_01.png) no-repeat -22px -286px; width: 30px; height: 30px; position: absolute; top: 5px; right: 10px; cursor: pointer } #login-vne2 .login-left { padding: 0 10px 0 0; width: 49px; float: left } #login-vne2 .login-right { padding: 0 0 0 10px; width: 364px; float: left } #login-vne2 .login-type { font: 700 14px arial; color: #000; margin: 0 0 5px; text-align: left; display: block; overflow: hidden } #login-vne2 .complete-form { width: 90%; padding: 0 50px; display: block; overflow: hidden } #login-vne3, #login-vne5 { height: 266px; background: #f4f4f4; padding: 0 } #login-vne3 .complete-form, #login-vne5 .complete-form, #login-vne6 .complete-form { padding: 20px 0 0 80px; width: 81%; display: block; overflow: hidden } #login-vne3 .ttOline, #login-vne4 .ttOline, #login-vne5 .ttOline, #login-vne6 .ttOline, #login-vne7 .ttOline, .ttOline { background: #fff; height: 28px; padding: 8px 20px 0; display: block; overflow: hidden; font: 700 16px arial; color: #000 } #login-vne3 .login-txt, #login-vne5 .login-txt, #login-vne6 .login-txt { margin: 0 0 3px; display: block; overflow: hidden } #login-vne3 .login-txt .txt-login { border: 1px solid silver; background: #fff; font: 400 14px arial; color: #666; width: 358px; padding: 2px 7px; height: 20px } #login-vne3 .txt-capcha, #login-vne5 .txt-capcha, #login-vne6 .txt-capcha { float: left; border: 1px solid silver; background: #fff; font: 400 14px arial; color: #666; width: 104px; padding: 2px 7px; height: 20px; margin-right: 10px } #login-vne3 img, #login-vne5 img, #login-vne6 img { float: left; margin-right: 8px } #login-vne6 .sercurity .img_chapcha img { margin-right: 110px\9 } #login-vne4 { background: #f4f4f4; padding: 0 } .complete-form { padding: 20px; display: block; overflow: hidden; font: 500 14px arial; color: #000; width: auto } #login-vne6 { height: 167x; background: #f4f4f4; padding: 0 } .input_capcha { font: 600 14px arial; color: #000; margin: 0 0 3px } #login-vne7 { background: #f4f4f4; padding: 0 } .rs_vote { display: block; background: #ededed; padding: 15px 20px; overflow: hidden; margin-bottom: 12px } #login-vne7 .ttOline { margin-bottom: 0 } .question_vote { font: 500 14px arial; color: #9f224e; margin: 0 0 4px } .p_infoVote { margin: 0 } .time_vote { font: 400 11px arial; color: #666; float: left } .total_vote { float: right; font: 400 11px arial; color: #666 } .total_vote label { font-weight: 700; color: #9f224e } .list_rs { overflow: hidden; background: #f4f4f4 } .scroll_thongke { float: left; width: 92%; padding: 0; margin: 10px 4% } .scroll_thongke li { padding: 0 0 15px; margin: 0 0 10px; border-bottom: 1px dotted #ccc; display: block; overflow: hidden } .info_result { display: block } .rsV_left { width: 25%; float: left; font: 12px arial; color: #000; margin: 0 2% 0 0 } .rsV_right { width: 18%; float: right; font: 12px arial; color: #999; text-align: right } .rsV_right label { color: #000 } .scroll_color { width: 55%; float: left; margin-top: 3px; height: 5px; background: #ccc } .bg_center_scroll { position: relative; background: #9f224e; float: left; height: 5px } .txt_number_ketqua { display: inline-block; padding: 5px 0 0; position: absolute; right: -10px; bottom: -15px; font: 10px arial; color: #9f224e } #BoxOverlay { position: fixed !important; height: 100% !important; width: 100% !important } .item_login { width: 100%; float: left; padding-bottom: 10px } .sercurity { width: 100%; float: left } #login-vne5 { padding: 0; height: 530px; background: #f5f5f5 } .share_email_des { background: #ededed; float: left; width: 100%; padding: 15px 0 } .share_email_left { float: left; width: 15% } .share_email_left a { color: #666; text-decoration: underline; font: 600 11px/16px Arial; padding: 0 0 0 20px } .share_email_right { float: right; width: 84% } .share_email_right div { font: 400 14px/16px Arial; color: #9f224e } .share_email_right ul { list-style: none; float: left; width: 100%; padding: 0; margin: 5px 0 } .share_email_right li { float: left } .share_email_right li.txt_underline a { text-decoration: underline } .share_email_right a { font: 400 11px/16px Arial; color: #666 } .share_email_right .active a { color: #333 } #login-vne5 .complete-form { margin-top: 10px; float: left } #login-vne5 .complete-form textarea { height: 85px; margin-bottom: 10px } .share_email_label { margin-bottom: 5px; font: 400 14px/14px Arial } #iconfb .fb_edge_widget_with_comment { top: -41px } #gocnhin .block_image_news { background: none } @media print { #menu_web, .mid_header, #col_300, .block_col_160, #box_comment, .block_tag, #box_tinkhac_detail, #wrapper_footer, .banner_728x90, .banner_980x60, .banner_common, .block_share, .social_share, #box_tinlienquan, .relative_new { display: none } #header, #container, #col_660, #header_main { width: 480px; margin: 0 auto } .block_col_480 { width: 100% } #col_660 { background: red } .txt_huongdan_print { margin: 75px 0 0; font: 400 11px arial; color: #666 } .txt_huongdan_print span { text-decoration: underline } #detail_page { margin: 30px 0 0; padding: 30px 0 0; border-top: 1px solid #ccc } } .breakumb_timer { position: relative; z-index: 9 } .block_show_breakumb { width: 100%; position: absolute; right: 0; top: 38px; background: #f5f5f5; display: none; padding: 0 0 10px; z-index: 9 } .block_show_breakumb ul li { width: 48%; margin: 0 0 0 2%; float: left; border-bottom: 1px solid #dedede } .block_show_breakumb ul li a { display: block; height: 44px; font: 400 18px/44px arial } .block_search { background: #333; border-bottom: 1px solid #171717; padding: 7px 10px } .block_search .ui-corner-all { border-radius: 0; padding: 0; margin: 0; box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0); background: #555; border: none } .block_search .input_search { background: #555 !important; padding: .2em 0; color: #aeaeae; width: 190px !important; padding: .5em 0 .5em .5em !important; font-size: 12px; height: 18px; float: left; border-radius: 0 !important; border: none } .block_search a.btn_search { display: block; float: left; width: 22px; height: 21px; padding: 4px 0 5px; background: #555 } .block_search .btn_search { width: 23px; height: 30px; border: none; background-position: -602px -5px; background-color: #555; margin: 0; border-radius: 0 !important } .list_item_panel { width: 100%; float: left } .list_item_panel li { float: left; width: 100% } .list_item_panel li img { float: left } .list_item_panel li a { display: block; width: 100%; float: left; color: #fff !important; font: 700 16px/40px arial; background: #555; border-bottom: 1px solid #484848 } .list_item_panel li.active a { background: #333 url(../components/printer/images/graphics/bg_arrow_active_20x41.gif) no-repeat right top; border-left: 5px solid #9f224e; width: 235px } .list_item_panel li.end a { border: none } .ui-body-a .list_item_panel li a.ui-link { color: #fff } .list_item_panel li a.bg_666 { background: #666 } .coppy_right_left { background: #333 url(../components/printer/images/graphics/icon_arrow.gif) no-repeat 15px 0; padding: 20px 5px 50px 15px; float: left; width: 220px; font: 400 14px arial; color: #666 } .coppy_right_left p { padding-bottom: .5em } .coppy_right_left .txt_lienhe, .coppy_right_left .txt_lienhe a { color: #fff !important } #box_col_left.block_more_info { position: absolute; top: 0; left: -240px; width: 240px; height: 100%; z-index: 99999 } .btn_control_col_left { border-right: 1px solid #e6e6e6; height: 44px } .block_scoll_menu { width: 100%; float: left } #page.hidden { overflow: hidden } .icon_menu_phone { background: url(../components/printer/images/icons/icon_menu.png) no-repeat; display: inline-block; float: left; width: 24px; height: 24px; margin: 9px 10px 0 } .list_item_panel li.active .icon_menu_phone { margin: 9px 10px 0 5px } .ico_menu_01 { background-position: 5px -8px } .ico_menu_02 { background-position: -20px -8px } .ico_menu_03 { background-position: -44px -8px } .ico_menu_04 { background-position: -70px -8px } .ico_menu_05 { background-position: -103px -8px } .ico_menu_06 { background-position: -132px -8px } .ico_menu_07 { background-position: -157px -8px } .ico_menu_08 { background-position: -181px -8px } .ico_menu_09 { background-position: -208px -8px } .ico_menu_10 { background-position: -233px -8px } .ico_menu_11 { background-position: -260px -8px } .ico_menu_12 { background-position: -285px -8px } .ico_menu_13 { background-position: -310px -8px } .ico_menu_14 { background-position: -337px -8px } .ico_menu_15 { background-position: -366px -8px } .ico_menu_16 { background-position: -394px -8px } .ico_menu_17 { background-position: -423px -8px } .ico_menu_18 { background-position: -452px -8px } .ico_menu_19 { background-position: -485px -8px } .ico_menu_20 { background-position: -510px -8px } .ico_menu_21 { background-position: -536px -8px } .ico_menu_22 { background-position: -561px -8px } .ico_menu_23 { background-position: -629px -8px } .ico_menu_24 { background-position: -673px -8px } .ico_menu_25 { background-position: -719px -8px } .ico_menu_26 { background-position: -769px -8px } .ico_menu_27 { background-position: -814px -8px } .ico_menu_28 { background-position: -857px -8px } .ico_menu_29 { background-position: -901px -8px } .block_tincheo.no_space { margin: 0; padding: 0; border: none } .txt_block_relative_news { float: left; width: 95% } .block_load_more_tinkhac { border-top: 1px dotted #E2E2E3; margin: 10px 0 0; padding: 10px 0 0; width: 100%; float: left } .login-txt br { display: none } #goicauhoi { padding: 0 0 20px } #goicauhoi .title_block { position: relative; padding: 5px 0 10px } #goicauhoi .like_google { right: 0; top: -5px } #goicauhoi .google_name { padding: 2px 5px 0 3px } .title_box_category .line_top_box { color: #000; margin: 0 0 0 10px } .form_lienhe .form-line li { width: 100%; float: left } .form_lienhe .form-line li .wrap { width: 18%; float: left; margin: 0 0 0 2% } .form_lienhe .form-line li .wrap img { float: left; width: 100% } #divFileProgressContainer { display: none } #box_thanhtoan .title_box_category { margin: 0 } #box_thanhtoan .content_box_category { padding: 0 } .list_thanhtoan li { margin: 10px 0 0; border-bottom: 1px dotted #cacaca; height: 48px } .list_thanhtoan li:last-child { border: none } .list_thanhtoan li a { padding: 0 0 0 43px; display: block; height: 33px; font: 400 11px arial; background: url(../components/printer/images/icons/icon_boxthanhtoan.gif) no-repeat } .list_thanhtoan li.internet a { background-position: 0 0 } .list_thanhtoan li.naptruoc a { background-position: 0 -42px } .list_thanhtoan li.napsau a { background-position: 0 -84px } .list_thanhtoan li.napgame a { background-position: 0 -125px } .list_thanhtoan li.muasam a { background-position: 0 -167px } .list_thanhtoan li.truyehinh a { background-position: 0 -209px } .img_nhataitro { position: absolute; right: 255px } .txt_thongtinnhataitro { height: 20px; display: inline-block; padding: 0 6px; font: 400 11px/20px arial; background: #e2e2e2; color: #000; float: left; margin: 0 5px } a.txt_thongtinnhataitro:hover { color: #000 } .tab_lich_phatsong { width: 150px; float: left; border-bottom: 1px solid #e2e2e3; padding: 0 0 0 10px; margin: 0 0 10px } .tab_lich_phatsong a { float: left; border-top: 2px solid #eee; margin: 0 5px 0 0 } .tab_lich_phatsong a.active { border-top: 2px solid #999 } .tab_lich_phatsong a img { float: left } #lichphatsong .view_date_time { margin: 0 0 10px } #to_top { position: fixed; bottom: 20px; right: 20px; z-index: 9999; display: none } #pvtt_page { background: url(../components/printer/images/graphics/bg_1x1_gray.gif) repeat-y 68% 0 } #pvtt_page .block_timer { padding: 0; white-space: nowrap } #pvtt_page .block_col_left_660 { background: none; width: 67% } .block_title_pvtt { font: 400 28px arial; padding: 10px 0 } .lead_pvtt { font-weight: 700; padding: 0 0 20px; color: #323232; font-size: 14px } .block_list_2image, .block_list_4image, .block_list_3image { padding: 10px 10px 0; background: #f4f4f4; margin: 0 0 20px } .block_list_2image ul, .block_list_4image ul, .block_list_3image ul { width: 100%; float: left } .block_list_3image li { width: 31%; margin: 0 2% 10px 0; text-align: center; display: inline-block; vertical-align: top } .block_list_3image li p { font: 700 12px arial; color: #323232 } * + html .block_list_3image li { float: left } .block_list_3image li.end { margin: 0 } .block_list_3image li img { width: 100%; margin: 0 0 10px } .block_list_4image li { width: 22.5%; margin: 0 2% 10px 0; text-align: center; display: inline-block; vertical-align: top } .block_list_4image li p { font: 700 12px arial; color: #323232 } * + html .block_list_4image li, * + html .block_list_3image li { float: left } .block_list_4image li.end { margin: 0 } .block_list_4image li img { width: 100%; margin: 0 0 10px } .block_list_2image li { width: 48.5%; margin: 0 2% 10px 0; text-align: center; display: inline-block; vertical-align: top } .block_list_2image li p { font: 700 12px arial; color: #323232 } * + html .block_list_2image li { float: left } .block_list_2image li.end { margin: 0 } .block_list_2image li img { width: 100%; margin: 0 0 10px } .image_1hinh { text-align: center } .image_1hinh strong { background: #F4F4F4; display: block; text-align: left; padding: 5px 10px } .item_pvtt .Image, .pics_caption { font: 400 12px arial; padding: 5px 10px; background: #f4f4f4 } .item_pvtt { width: 100%; float: left; margin: 0 0 15px } .txt_user_ask { text-align: right; font-size: 12px; padding: 5px 0 0 } .item_ask { width: 98%; font-weight: 700; padding-right: 2% } .content_pvtt { line-height: 18px } .answear { padding: 10px 0 0 2%; width: 97%; border-left: 2px solid #d5d5d5 } .answear a { color: #004f8b } .answear img { width: 100% } .answear p, .answear p.Normal { margin-bottom: 10px } .answear table { margin: 0 auto 10px } .answear table, .answear img { max-width: 100% } p.pics { text-align: center } .form_thamgia li { width: 100%; float: left; margin: 0 0 10px } .form_thamgia .block_input, .form_thamgia .txt_input { border: 1px solid silver; color: #666; font: 400 14px arial; height: 20px; padding: 2px 2%; width: 95%; background: #fff } .form_thamgia .block_input { height: 100px } .form_thamgia .tuoi { float: right } .txt_form { padding: 0 0 5px } .txt_error { color: #9F224E; font-size: 11px } .input_left { width: 71% } .input_right { width: 27% } .form_thamgia .input_capcha { width: 100px } .form_thamgia .btn_refrest { float: left; margin: 0 10px 0 0 } .form_thamgia .capcha { float: left; margin: 0 10px } .form_thamgia .capcha img { max-width: none } .form_thamgia .block_input_capcha { float: left; width: 130px } .form_thamgia .txt_clear_all { font: 400 11px arial; color: #666; text-decoration: underline; margin: 0 0 0 20px } .form_thamgia .btt-complete { width: 65px } #form_thamgia, .btn_dangky_thamgia { display: none } #thoitiet { width: 100%; position: relative; background: #f4f4f4; padding-bottom: 20px } .title_thoitiet { width: 100%; float: left; height: 37px; background: #fff } .txt_title_thoitiet { font: 700 16px/37px arial; margin: 0 0 0 20px } .txt_time_thoitiet { margin: 0 40px 0 0; line-height: 37px } .content_thoitiet { padding: 20px 2%; width: 96%; float: left } .location { font: 400 16px arial; color: #666 } .location .change_location { text-decoration: underline; margin: 0 0 0 20px; color: #666; font: 400 12px arial } .location .change_location.active { padding: 0 13px 0 0; background: url(../components/printer/images/icons/icon_thaydoi_tt.gif) no-repeat right 2px } .block_location { padding: 20px 0; border-bottom: 1px dotted #e2e2e3; width: 100%; margin: 0 0 10px } .txt_doc_big { float: left; padding: 0 65px 0 0; background: url(../components/printer/images/graphics/doc_big.gif) no-repeat right 12px; font: 400 72px arial } .icon_thoitiet_big { background: url(../components/printer/images/icons/icon_thoitiet_big.png) no-repeat } .tt_big_340, .tt_big_1 { background-position: 0 0 } .tt_big_90, .tt_big_2 { background-position: 0 -80px } .tt_big_3 { background-position: 0 -160px } .tt_big_300, .tt_big_4 { background-position: 0 -248px } .tt_big_5 { background-position: 0 -344px } .tt_big_6 { background-position: 0 -430px } .tt_big_7 { background-position: 0 -523px } .tt_big_260, .tt_big_8 { background-position: -145px 5px } .tt_big_40, .tt_big_9 { background-position: -145px -75px } .tt_big_10 { background-position: -145px -160px } .tt_big_11 { background-position: -145px -240px } .tt_big_390, .tt_big_110, .tt_big_12 { background-position: -145px -325px } .tt_big_13 { background-position: -145px -408px } .tt_big_14 { background-position: -145px -490px } .tt_big_15 { background-position: -295px 5px } .tt_big_16 { background-position: -295px -75px } .tt_big_17 { background-position: -295px -160px } .tt_big_18 { background-position: -295px -240px } .tt_big_300, .tt_big_270, .tt_big_19 { background-position: -295px -320px } .tt_big_20 { background-position: -295px -405px } .tt_big_21 { background-position: -295px -490px } .tt_big_22 { background-position: -295px -490px } .tt_big_6lge, .tt_big_23 { background-position: -435px -5px } .icon_thoitiet_small { background: url(../components/printer/images/icons/icon_thoitiet_small.png) no-repeat; width: 45px; height: 45px } .tt_small_340, .tt_small_1 { background-position: -120px -5px } .tt_small_2 { background-position: -120px -75px } .tt_small_300, .tt_small_3 { background-position: -120px -150px } .tt_small_90, .tt_small_4 { background-position: -120px -222px } .tt_small_40, .tt_small_5 { background-position: -120px -295px } .tt_small_6 { background-position: -120px -368px } .tt_small_7 { background-position: -120px -440px } .tt_small_260, .tt_small_8 { background-position: -330px -5px } .tt_small_9 { background-position: -330px -75px } .tt_small_390, .tt_small_110, .tt_small_10 { background-position: -330px -150px } .tt_small_11 { background-position: -330px -222px } .tt_small_12 { background-position: -330px -295px } .tt_small_13 { background-position: -330px -370px } .tt_small_14 { background-position: -330px -440px } .tt_small_15 { background-position: -550px -5px } .tt_small_330, .tt_small_270, .tt_small_16 { background-position: -550px -75px } .tt_small_17 { background-position: -550px -150px } .tt_small_18 { background-position: -550px -220px } .tt_small_19 { background-position: -550px -295px } .tt_small_20 { background-position: -550px -370px } .tt_small_21 { background-position: -550px -5px } .tt_small_22 { background-position: -710px -5px } .tt_small_23 { background-position: -710px -80px } .block_info_temp { width: 50%; float: left } .more_info_temp { width: 50%; float: right } .more_info_temp .list_news_dot_3x3_300 { color: #000; margin: 0; padding: 0; border: none } .furture_tem { background: #ddd } .furture_tem p { padding: 5px 10px } .txt_decs_tt { width: 100px; font: 700 14px arial } .block_txt_des_tt { float: left; width: 15%; font: 700 14px arial; padding: 10px 0 0 } .block_txt_des_tt .txt_thoigian { padding: 0 0 53px } .block_txt_des_tt .txt_nhietdo { padding: 0 0 10px } .tt_detail { width: 85%; float: left; padding: 13px 0 0 } .tt_detail li { width: 29%; float: left; border-left: 1px solid #e2e2e3; padding: 0 2% } .tt_detail li .txt_center { padding-bottom: 10px } .txt_center { text-align: center } .search_location { position: relative; z-index: 999; margin: 10px 0 0; display: none } .txt_select_location { width: 250px; float: left; font: 400 14px arial; height: 24px; padding: 4px 0 } .txt_doC_den { background: url(../components/printer/images/graphics/bg_o.gif) no-repeat scroll right 15px rgba(0, 0, 0, 0); display: inline-block; float: left; font: 700 1.5em/44px arial; padding: 0 7px 0 5px; margin: 0 10px 0 0 } .txt_location_topbar { background: url(../components/printer/images/graphics/icon_arrow_5x9_topbar.gif) no-repeat left 16px; display: inline-block; height: 43px; font: 400 14px/43px arial; padding: 0 0 0 10px; float: left; color: #666; margin: 0 5px 0 0 } .block_icon_menu_header .block_location_tt img { border: none; height: 43px } #ratinglt_result { width: 100%; background: #f4f4f4; position: relative } .title_result { font: 400 11px arial; padding: 10px 0; color: #666 } .content_result_rating .title_result { position: absolute; bottom: -60px } .block_result_rating { padding: 0 20px 50px } .content_result_rating { position: relative } .width_colrating { position: relative; height: 100px } .col_rating { width: 9%; background: #ccc; bottom: 0; position: absolute } .block_result_rating .col1 { left: 0 } .block_result_rating .col2 { left: 10% } .block_result_rating .col3 { left: 20% } .block_result_rating .col4 { left: 30% } .block_result_rating .col5 { left: 40% } .block_result_rating .col6 { left: 50% } .block_result_rating .col7 { left: 60% } .block_result_rating .col8 { left: 70% } .block_result_rating .col9 { left: 80% } .block_result_rating .col10 { left: 90% } .num_rating { width: 100%; float: left; padding: 5px 0 0; border-top: 1px solid #e1e1e1; margin: 5px 0 0 } .num_rating li { width: 10%; float: left; text-align: center } .icon_show_full_comment { width: 11px; height: 12px; background: url(../components/printer/images/graphics/icon_total_01.png) no-repeat -42px -320px; display: inline-block; margin: 0 0 0 3px; line-height: 12px } .icon_show_full_comment:hover { background-position: -53px -320px } .icon_show_full_comment.icon_tru { background-position: -20px -320px } .icon_show_full_comment.icon_tru:hover { background-position: -31px -320px } #box_details_news .block_demo_nhacso { width: 100%; float: left; border-top: 2px solid #d3d3d3; background: #f4f4f4; margin: 0 0 10px } #box_details_news .block_demo_nhacso ul.list_news { margin: 0; padding: 10px 2%; list-style-type: none; width: 96% } #box_details_news .block_demo_nhacso ul.list_news li { margin: 0 0 10px; padding: 0 0 10px; list-style-type: none; border-bottom: 1px solid #d3d3d3 } #box_details_news .block_demo_nhacso ul.list_news li:last-child { margin: 0; padding: 0; border: none } #box_details_news .type .icon_play { width: 24px; height: 24px; display: block; background: url(../components/printer/images/icons/icon_nhac_detail.gif) no-repeat left top } #box_details_news .decs_info_type { padding: 0 0 0 10px; width: 80% } #box_details_news .decs_info_type p { font: 400 12px arial; margin: 0; padding: 0 0 5px } #box_details_news .decs_info_type p a { color: #000 } #box_details_news .decs_info_type p a.txt_666 { color: #666 } #box_details_news .decs_info_type p a:hover { color: #004F8B } #box_details_news .decs_info_type .txt_11 { font: 400 11px arial } #box_details_news .decs_info_type p.nghe_allalbum a { color: #999; display: inline-block; padding: 0 0 0 15px; background: url(../components/printer/images/icons/icon_nghe_playlist.gif) no-repeat left 2px } #box_album_music_detail { margin: 0 0 20px } #box_album_music_detail .title_box { width: 100%; float: left; border-top: 2px solid #d3d3d3; background: #eee; height: 28px } #box_album_music_detail .title_box .txt_left { margin: 0 0 0 10px; font: 700 14px/28px arial; color: #d71450 } #box_album_music_detail .title_box .txt_left a { color: #d71450 } #box_album_music_detail .title_box .txt_view_more { background: none !important } #box_album_music_detail .title_box .txt_view_more a { font: 400 11px/28px arial; background: url(../components/printer/images/icons/icon_nghe_all_album.gif) no-repeat left 10px; height: 28px; padding: 0 0 0 15px; display: inline-block } #box_album_music_detail .content_block { padding: 10px 0 10px 10px; background: #f4f4f4 } #box_album_music_detail .block_avata_album { width: 35% } #box_album_music_detail .block_avata_album img { width: 100% } #box_album_music_detail .list_news { width: 63%; float: right; max-height: 350px; overflow: hidden } #box_album_music_detail .list_news li { padding: 0 0 5px; margin: 0 0 5px } #box_album_music_detail .list_news ul { padding: 0 10px 0 0 } #box_album_music_detail .txt_info_music { width: 65% } #box_album_music_detail .txt666 { color: #666 } #box_album_music_detail .icon_addlist { background: url(../components/printer/images/graphics/btnadd.gif) no-repeat left 2px; display: inline-block; padding: 0 0 0 15px } #box_album_music_detail .chose_action { width: 80px } #box_xemnhieunhat .list_new_160 li { padding-bottom: 7px; margin-bottom: 7px } #box_xemnhieunhat .list_new_160 li:last-child { margin: 0; padding: 0 } .embed-container, .embed-container.audio { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; margin-bottom: 10px } .fck_detail .embed-container { margin: 0 0 1em } .block_flash_video .embed-container { background: #000 } .embed-container.audio { padding-bottom: 12.2% } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100% } #box_comment .pagination_news { padding: 10px 0 } #video.box_category { margin-top: 5px } .reply_name { color: #999; font-style: italic } .movie_infomation .block_lichthidau_detail li { background: url(../components/printer/images/graphics/bg_dot_gray_3x3_vne.gif) no-repeat left 6px; margin: 3px 0 0; padding: 0 0 0 10px } .team_info .movie_infomation .block_lichthidau_detail li a { color: #666; font-weight: 700 } .team_info .movie_infomation .block_lichthidau_detail li a strong { color: #000; font-weight: 400 } #col_3 .list_news li { margin-bottom: 7px; padding-bottom: 7px } #col_3 .list_news li:last-child { margin: 0; padding: 0; border: none } #col_3 .list_news li a { font: 400 14px arial } .banner_980x60 .box_category { margin: 0 0 10px } .template td { padding-bottom: 10px } .template .vnexHead td { padding: 0 } .template tr:last-child td { padding-bottom: 0 } .vnex2ColL { width: 50%; padding: 0 3% 0 0 } .template img { width: 100% } .vnex2ColR { width: 47% } .txt_title_tp { font: 400 14px arial } .vnex22SColR, .vnex22SColL, .vnex22ColR, .vnex22ColL { width: 46%; padding: 0 2% } .vnexBullet a { background: url(../components/printer/images/graphics/bg_dot_gray_3x3.gif) no-repeat left 6px; display: inline-block; padding: 0 0 0 10px } .list_type_nodot li { padding-bottom: 7px; margin: 0 0 7px; border-bottom: 1px dotted #cacaca; width: 100%; float: left } .list_type_nodot li:last-child { border: none; margin: 0; padding: 0 } #vieclamcareelink .title_box_category { background: #a0234f } #tuvannghecareek .title_box_category a, #xedienantoan .title_box_category a, #taichinhteckombank .title_box_category a, #vieclamcareelink .title_box_category a { color: #fff } #taichinhteckombank .title_box_category { background: #f00001 } #xedienantoan .title_box_category { background: #098732 } #tuvannghecareek .title_box_category { background: #034ca3 } #col_3 .list_new_160 li:last-child, #col_3 .list_new_160 li.end { margin: 0; padding: 0 } .block_close_menu { position: absolute; height: 100%; width: 100%; z-index: 99; left: 0; top: 0; display: none } .mapgoogle { width: 100%; float: left; padding: 10px 0 0; border-top: 1px solid #cacaca } .block_rt_thuvien { width: 100%; float: left; border-bottom: 1px dotted #e2e2e3; padding: 0 0 10px; margin: 0 0 10px } #box_details_news .block_rt_thuvien { border-bottom: none; padding: 5px 0 0; margin: 0 } .ratingdocgia { color: #004579 } .rt_bandoc, .rt_vne, .rt_point { float: left; margin: 0 10px 0 0; line-height: 22px; white-space: nowrap } .block_col_160 .rt_point { margin: 0 } .pont_rating { font: 400 11px arial; color: #666; display: block; padding: 3px 5px; border: 1px solid #eaeaea; border-radius: 2px; background: #fff; float: left; width: 95px\9 } .txt_danhgia_rtpoint { font: 400 10px arial; background: #eaeaea; color: #666; float: left; padding: 0 5px; border-radius: 0 2px 2px 0; height: 22px } .number_rating { width: 62px; height: 9px; background: url(../components/printer/images/graphics/bg_start.jpg) no-repeat left top; margin: 0 5px 0 0 } .number_rating.rating1 { background-position: 0 -9px } .number_rating.rating2 { background-position: 0 -18px } .number_rating.rating3 { background-position: 0 -27px } .number_rating.rating4 { background-position: 0 -36px } .number_rating.rating5 { background-position: 0 -45px } .number_rating.rating6 { background-position: 0 -54px } .number_rating.rating7 { background-position: 0 -63px } .number_rating.rating8 { background-position: 0 -72px } .number_rating.rating9 { background-position: 0 -81px } .number_rating.rating10 { background-position: 0 -90px } .lits_news_980 li { float: left; width: 22.8%; padding: 10px 1% } .lits_news_980 .thumb_image { width: 50%; float: left; margin: 0 3% 0 0 } .lits_news_980 .title_news_980 { font: 700 12px/16px arial } .title_news_block_980 { font: 700 14px/30px arial; color: #9f224e; border-top: 1px solid #dedede; border-bottom: 1px solid #dedede; background: #f4f4f4; padding: 0 1%; width: 98%; position: relative } .title_news_block_980 .btn_control_tv_slider { top: 1px } .title_news_block_980 .prev_slider { right: 30px; left: auto } .title_news_block_980 .btn_control_tv_slider:hover, .title_news_block_980 .btn_control_tv_slider { background: url(../components/printer/images/graphics/icon_total_01.png) no-repeat -20px -332px } .title_news_block_980 .next_slider:hover, .title_news_block_980 .next_slider { background-position: -48px -332px; right: 0 } .content_news_980 { width: 98%; float: left; padding: 7px 1%; background: #f4f4f4; border-top: 1px solid #fff } .coppy_right p span { font-weight: 700 } #col_3 #boxthamdoykien { float: left } #col_3 #boxthamdoykien.box_category { margin: 0 } #bar_swich_page { background: #d2d2d2; width: 100%; float: left; height: 30px; position: fixed; top: 0; z-index: 9999 } .swich_page { width: 980px; margin: 0 auto; position: relative } .goback_oldversion { text-align: center } .goback_oldversion a { font: 400 12px/30px arial; background: url(../components/printer/images/graphics/img_go_back_older.gif) no-repeat left top; padding: 0 0 0 45px; display: inline-block } .icon_close_swich_page { width: 30px; height: 30px; background: url(../components/printer/images/icons/icon_close_bar_swich_page.gif) no-repeat center center } .icon_tweet_swich_page { width: 18px; height: 16px; background: url(../components/printer/images/icons/icon_top_swich_bar.png) no-repeat -24px -32px } a:hover .icon_tweet_swich_page { background: url(../components/printer/images/icons/icon_top_swich_bar.png) no-repeat -24px -4px } .icon_fb_swich_page { width: 18px; height: 16px; background: url(../components/printer/images/icons/icon_top_swich_bar.png) no-repeat 3px -32px } a:hover .icon_fb_swich_page { background: url(../components/printer/images/icons/icon_top_swich_bar.png) no-repeat 3px -4px } .gopy { position: absolute; right: 0; top: 0; height: 30px } .gopy a { display: inline-block; float: right } .gopy .txt_gopy { background: url(../components/printer/images/icons/icon_gopy_hover.png) no-repeat 0 8px; padding: 0 0 0 20px; font: 400 12px/30px arial; color: #9F224E } .gopy a:hover.txt_gopy { color: #000; background: url(../components/printer/images/icons/icon_gopy_top.gif) no-repeat left 8px } .gopy .txt_drash { background: url(../components/printer/images/graphics/bg_1x16.gif) no-repeat right 0; padding: 0 10px 0 0; margin: 7px 10px 0 0 } #baovipham, #gopykien { position: relative } #baovipham .complete-form, #gopykien .complete-form { background: #F4F4F4; padding: 10px 40px } #baovipham .txt-login, #gopykien .txt-login { width: 97%; border: 1px solid silver; float: left; padding: 3px 1%; font: 400 14px arial; color: #666; background: #fff } #baovipham textarea.txt-login, #gopykien textarea.txt-login { height: 50px; margin: 0 0 10px } #baovipham .txt-capcha, #gopykien .txt-capcha { background: none repeat scroll 0 0 #FFF; border: 1px solid silver; color: #666; float: left; font: 400 14px arial; height: 20px; margin-right: 10px; padding: 2px 7px; width: 104px } #baovipham .input_capcha, #gopykien .input_capcha { margin: 0 10px 0 0 } #baovipham .btt-complete, #gopykien .btt-complete { float: left; margin: 0 0 0 10px } #baovipham .sercurity, #gopykien .sercurity { padding: 10px 0 0; width: 100%; float: left } .txt_select_lydo { width: 100%; float: left; height: 26px; margin: 0 0 10px } .block_txt_capcha { width: 135px } .item_radio { width: 100%; float: left; padding: 10px 0 0 } .item_radio label { cursor: pointer } .block_radio_col { width: 31%; float: left; margin: 0 0 0 1%; padding: 0 1% 0 0 } .block_radio_col .txt_colum_radio { font: 700 14px arial } #gopykien .bg_line { background: url(../components/printer/images/graphics/bg_1x1_gray.gif) repeat-y 63% 0 } #gopykien .list_radio { background: url(../components/printer/images/graphics/bg_1x1_gray.gif) repeat-y 32% 0; margin: 0 0 10px } #box_details_news .w670 { width: 100% } .txtstuff { resize: none; overflow: hidden } .hiddendiv { display: none; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word } .cmt_common_hidden { min-height: 50px; overflow: hidden; font: 400 12px/18px arial } .mid_1_right .block_padding_10 { padding: 10px 0 0 } .mid_1_right .tb_servey .w20 { width: 20% } .mid_1_right .tb_servey .w130 { width: 80% } .mid_1_right .btn_bieuquyet { margin: 0 0 3px 15px; text-align: center; display: inline } * + html .mid_1_right .btn_bieuquyet { width: 85px } .mid_1_right #boxthamdoykien .txt_xemketqua { margin: 0 0 0 20px } .mid_1_right #boxthamdoykien { width: 100%; float: left; border-bottom: 1px dotted #cacaca; margin: 0 } .mid_1_right #boxthamdoykien .title_box_category { height: 28px; border-top: 2px solid #9d9d9d; background: #eee } .mid_1_right #boxthamdoykien .txt_main_category span, .mid_1_right #boxthamdoykien .txt_main_category a { background: none } #boxthamdoykien .title_thamdo { font: 400 14px arial } .mid_1_right #boxthamdoykien .content_box_category { background: none } .infographic_detail { padding-bottom: 0 } #box_details_news .ul_tinkhac300 .title_news { width: auto; float: none; margin: 0 } .ul_tinkhac300 li { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dotted #e2e2e3; display: block; overflow: hidden } .ul_tinkhac300 li .thubm { width: 100%; float: left; position: relative } .ul_tinkhac300 .thubm a img { width: 100%; float: left } .icon_thumb_infographic { width: 28px; display: block; height: 28px; position: absolute; background: url(../components/printer/images/graphics/icon_infographic.png) no-repeat 0 0; left: 0; bottom: 0 } #news_home.list_news .thumb .icon_thumb_infographic { margin-bottom: 10px } #news_home.list_news .thumb:hover .icon_thumb_infographic { background: url(../components/printer/images/graphics/icon_infographic.png) no-repeat -28px 0 } #box_cactacgia { width: 100% } #box_cactacgia .content_box_category .thumb { width: 60px } * + html #box_cactacgia .content_box_category .thumb { position: static } #box_cactacgia .scroll-pane { height: 1100px } #box_cactacgia .scroll-pane .list_new_160 li .title { margin-bottom: 5px } #box_cactacgia .scroll-pane .list_new_160 li a { font-size: 14px } #box_cactacgia .sobaiviet { font-size: 12px } .stick { position: fixed; top: 40px; z-index: 9999; background: #fff; padding-bottom: 10px } #homepage .block_mid_new .list_news .list_news_dot_3x3 { width: auto; float: none; margin: 5px 0 0 } .block_slider_photo { position: relative } .block_slider_photo .item_slider { padding: 0 } .block_slider_photo .item_slider .title_news { padding: 10px 0 } .item_slider .thumb_image .thumb_image { margin-bottom: 5px } .item_slider .thumb_image img { width: 100% } .block_slider_photo .prev_slider { top: 30%; left: -1px } .block_slider_photo .next_slider { top: 30%; right: -1px } .title_box_tinmoi { background: url(../components/printer/images/graphics/bg_1x1_gray.gif) repeat-x left 7px; width: 100%; float: left } .title_box_tinmoi span { float: left; padding: 0 10px 5px 0; display: inline-block; background: #fff; font: 700 14px arial; color: #9f224e } #homepage .line_col_home { background: url(../components/printer/images/graphics/bg_1x1_gray.gif) repeat-y 810px 0 } .block_home_new { width: 800px; float: left } .block_col_top_left { width: 360px; float: left } .block_col_top_right { width: 420px; float: right } .block_col_top { background: url(../components/printer/images/graphics/bg_1x1_gray.gif) repeat-y 370px 0; margin: 0 0 10px } .block_col_mid #col_2 { float: right; margin: 0; padding: 0 } .block_col_mid { background: url(../components/printer/images/graphics/bg_1x1_gray.gif) repeat-y 490px 0 } .block_col_top_right .home_bleft_640 { width: 300px; float: left } .block_col_top_right .home_bright_640 { width: 115px; float: right } .block_100 { width: 100px; float: left } .block_banner { width: 300px; float: right } .block_100 .block_padding_10 { padding: 10px 0 0 } .block_100 #boxthamdoykien .content_box_category { background: #fff } .block_100 #boxthamdoykien .tb_servey .w130 { width: 80%; float: right } .block_100 #boxthamdoykien .btn_bieuquyet { float: left; margin: 0 0 0 15px } .block_100 #boxthamdoykien .txt_xemketqua { float: left; margin: 5px 0 0 25px; white-space: nowrap } .info_tuvan_mem { padding: 0 0 5px; width: 71%; float: right } .info_tuvan_mem .chucvi { font: 400 11px arial; color: #666 } #tvxkhop03 .content_box_category .thumb, #tvxkhop02 .content_box_category .thumb, #tvxkhop .content_box_category .thumb { width: 26%; margin: 0 } #tvxkhop03 .block_image_news .news_lead, #tvxkhop02 .block_image_news .news_lead, #tvxkhop .block_image_news .news_lead { padding: 10px 0 0 } #tvxkhop03 .txt_view_more, #tvxkhop02 .txt_view_more, #tvxkhop .txt_view_more { margin: 0 10px 0 0 } .timer_box { font: 400 12px/20px arial; padding: 10px 0 0 } .txt_timer_box { padding: 0 10px; background: #eee } .timer_box span { height: 20px; background: #f0edda; color: #9f224e; padding: 0 5px; display: inline-block } .timer_box .btn_goicauhoi { display: inline-block; float: left; height: 20px; font: 700 11px/20px arial; color: #fff; background: #858585; padding: 0 10px; margin: 0 0 0 10px } .block_question { padding: 0 0 10px 10%; float: left; width: 90%; background: url(../components/printer/images/icons/icon_question.gif) no-repeat left top; min-height: 20px; margin: 10px 0 5px; border-bottom: 1px solid #E2E2E3 } .block_hidden_device { width: 100%; float: left } .block_hidden_device .col_width_140 .box_category, .block_hidden_device .banner_common { width: 100%; float: left; padding: 0 0 15px; margin: 0 } .block_hidden_device .box_category { margin: 0 } .block_100 .scroll-pane { height: 210px } .filter_coment { float: right; padding: 0 10px 0 0; color: #666; text-align: right; white-space: nowrap } .filter_coment a { font: 400 11px arial; color: #666 } .filter_coment a.active { color: #9D234C } .filter_coment_mobile { float: right } .filter_coment_mobile select { font: 400 14px arial; display: none } #container_tab_live { float: left; margin: 0 0 20px } #container_tab_live ul li { float: left; width: 98%; margin-bottom: 10px; padding: 10px 2% 0 0; overflow: hidden; position: relative; border-bottom: 1px dotted #ccc } #container_tab_live ul li.no_space { margin: 0; border: none } #container_tab_live ul li .day_time { font: 700 12px arial; color: #9f224e; padding: 0 0 10px } #container_tab_live div.minutes { float: left; width: 10%; position: relative; color: #9f224e } #container_tab_live div.text_live { float: right; width: 86%; font-family: "arial"; font-size: 14px; line-height: 18px; position: relative; padding-bottom: 15px } #container_tab_live .social_share { width: 100%; float: left; margin: 0; height: 20px } #container_tab_live .social_share .content_inner { display: none } #container_tab_live ul li:last-child div.text_live { border: none; padding: 0 } #container_tab_live div.text_live .tb_servey .w130 { float: left } #container_tab_live div.text_live p { margin: 0 0 5px } #container_tab_live div.text_live img { float: left } #container_tab_live div.text_live img.icon_content { float: none } #container_tab_live div.text_live table.tplCaption { max-width: 100%; margin: 0 auto 10px } #container_tab_live div.text_live table.tplCaption img { margin: 0 } #container_tab_live div.text_live table.tplCaption td { line-height: 0 } #container_tab_live div.text_live table.tplCaption td p.Normal, #container_tab_live div.text_live table.tplCaption .Image { padding: 10px; background: #F5F5F5; font-size: 12px; line-height: 16px } #container_tab_live div.bg_special_tuongthuat { background: #f7f7f7 } #container_tab_live div.minutes span { display: inline-block; text-align: center } #container_tab_live li.icon_traibanh div.minutes span.icon_special { background-position: -1px } #container_tab_live li.icon_muiten div.minutes span.icon_special { background-position: -24px center } #container_tab_live li.icon_thevang div.minutes span.icon_special { background-position: -44px center } #container_tab_live .text_live .block_audio .title_audio { background: #303030 url(../components/printer/images/icons/icon_audio_player.gif) no-repeat 10px 10px; color: #fff; font: 400 14px arial; padding: 10px 0 10px 50px } .block_check_noibat { float: left; margin: 10px 0 0 10px; font: 400 12px/16px arial } .block_check_noibat label { cursor: pointer } .block_check_noibat input { float: left; margin: 0 5px 0 0 } #box_coment_300 .scroll-pane { margin: 0 0 10px; height: 380px } #box_coment_300 .content_scoller { width: 96% } .icon_live { position: absolute; height: 24px; width: 24px; background: url(../components/printer/images/icons/icon_football_live.gif) no-repeat; right: -16%; top: 0 } .icon_live_01 { background-position: -51px -40px } .icon_live_02 { background-position: -129px -40px } .icon_live_03 { background-position: -205px -40px } .icon_live_04 { background-position: -284px -40px } .icon_live_05 { background-position: -368px -40px } .icon_live_06 { background-position: -447px -40px } .icon_live_07 { background-position: -527px -40px } .icon_live_08 { background-position: -50px -109px } .icon_live_09 { background-position: -129px -109px } .icon_live_10 { background-position: -209px -114px } .icon_live_11 { background-position: -289px -109px } .icon_live_12 { background-position: -367px -109px } .icon_live_13 { background-position: -447px -109px } .icon_live_14 { background-position: -527px -109px } .icon_dot_live { background: url(../components/printer/images/icons/icon_dot_live.gif) no-repeat left top; font-size: 0; line-height: 0; height: 7px; width: 7px; top: 5px; right: auto; left: 94% } .high-light .icon_dot_live { background: url(../components/printer/images/icons/icon_dot_live_active.gif) no-repeat -9px -8px } @media screen and (-webkit-min-device-pixel-ratio:0) { .icon_dot_live { left: 96% } } #box_coment_300 .filter_coment a { font: 400 11px/30px arial } .block_filter_live { width: 100%; float: left; height: 30px; background: #f4f4f4; margin: 0 0 15px } .filter_right { float: right } .filter_left { float: left } .block_filter_live a { display: inline-block; float: left; padding: 0 10px; font: 400 12px/30px arial; color: #333 } .block_filter_live a.active { color: #9f224e; font: 400 12px/30px arial; background: #e2e2e2 } .special_time { display: inline-block; padding: 2px 5px; background: #9F224E; color: #fff } #container_tab_live div.text_live .list_dot_3x3 { width: 96%; float: left; padding: 5px 2%; background: #f4f4f4; margin-bottom: 10px } #container_tab_live .list_dot_3x3 .dot_item { padding: 5px 0 5px 2%; width: 97%; background: url(../components/printer/images/graphics/bg_dot_gray_3x3.gif) no-repeat left 10px } .list_dot_3x3 .dot_item a { font: 700 12px arial; color: #666 } #container_tab_live div.text_live .item_social { margin: 0 0 0 5px; float: right } #container_tab_live div.text_live .thumb { width: 25%; float: left; margin: 0 10px 0 0; position: relative } #container_tab_live div.text_live .title_news { width: auto; float: none; margin: 0 } #container_tab_live div.text_live .block_image_news { padding: 5px 2%; float: left; width: 96%; background: #f4f4f4; margin: 0 0 10px } #container_tab_live div.text_live .item_slider { padding: 0 5px } #container_tab_live div.text_live .btn_control_tv_slider { top: 40%; display: none } #container_tab_live .author_quote { font-weight: 700 } #box_coment_300.stick { width: 300px; top: 10px } .live_post_status { width: 100%; float: left; text-align: center; padding: 10px 0; background: #f4f4f4; margin: 0 0 15px } .live_post_status a { color: #9f224e; font: 700 12px/16px arial; display: inline-block; background: url(../components/printer/images/icons/icon_live_post.gif) no-repeat left top; padding: 0 0 0 20px } .live_post_status a.short_live { background: url(../components/printer/images/icons/icon_live_post.gif) no-repeat left bottom } #container_tab_live div.text_live td { vertical-align: top } #container_tab_live .image_quote { width: 30px; height: 23px; background: url(../components/printer/images/icons/icon_quote.gif) no-repeat right top } #container_tab_live div.text_live .live_quote { width: 100% } #container_tab_live div.text_live .live_quote td.first_quote { width: 10% } #container_tab_live div.text_live .live_quote .thumb_quote { width: 90%; float: left } #container_tab_live div.text_live .live_quote .thumb_quote img { width: 100%; float: left } #beach-vne6.login-form { width: auto; display: block; overflow: hidden } #beach-vne6 .share_email_des { font-size: 14px; color: #9f224e; display: block; padding: 20px; width: auto; float: none; overflow: hidden } #beach-vne6 .div_btt_beach { display: block; overflow: hidden; padding-top: 10px } #beach-vne6 .btt-cancel { width: 96px; height: 28px; text-align: center; padding: 2px 0 0; font: 500 14px arial; color: #000; background: #ddd; border: none; cursor: pointer; margin-left: 12px } #beach-vne6 .txt-login { width: 97% } .tyele_vote_beach { width: 100%; padding-bottom: 15px; padding-top: 5px; float: left; text-align: center } .div_tylebinhchon { font-size: 11px; background: #ddd; padding: 5px 15px; margin: 0 auto; display: inline; cursor: pointer } .div_tylebinhchon a { font-size: 11px; color: #000 } #binhluanmoinhat .list_news_dot_3x3_300 { padding: 0; margin: 0; border: none } #binhluanmoinhat .list_news_dot_3x3_300 li { border: none; padding: 5px 0 0 10px; margin: 0 } #binhluanmoinhat .list_news_dot_3x3_300 li a { font: 700 14px arial } #giavang .box_giavang { width: 57%; border-top: 1px solid #d9d9d9; padding-top: 2px } #giavang .box_laisuat { width: 40%; border-top: 1px solid #d9d9d9; padding-top: 2px } .block_loaivang .note_ls { width: 100%; float: left; margin-bottom: 6px } #giavang .title_giavang { margin-bottom: 5px } .txt_title_giavang { font: 700 12px arial; color: #333 } #tigia .txt_giavang { padding: 4px 0 5px } .txt_giavang p { padding: 0 4px 2px } .tb_giavang { width: 100%; float: left; background: #fff; border-left: 1px solid #e6e6e6; border-top: 1px solid #e6e6e6 } .tb_giavang td { text-align: center; border-bottom: 1px solid #e6e6e6; border-right: 1px solid #e6e6e6; font-size: 11px; padding: 3px; vertical-align: middle } .tb_giavang td.ten_vang { text-align: left } .block_nguon { float: left; padding: 7px 0 0 } .block_nguon img { margin: 0; height: 14px } .giavang_home { margin-top: 5px } .box_laisuat .tb_giavang td { text-align: left } .box_laisuat .tb_giavang td.pecent_ls { text-align: right; padding-right: 10px; width: 30% } #homepage #thitruong_new { background: #f5f5f5 } .banner_mobile { display: none } .block_tacgia .thumb { width: 25%; float: left } .block_tacgia .thumb img { width: 100% } .block_tacgia .title_tacgia { color: #9F224E; font: 400 20px arial; padding: 0 0 8px } .soluongbaiviet { color: #666; font: 400 14px arial; padding: 0 0 10px } .soluongbaiviet .theodoi_baiviet { margin-top: 0 !important; margin-bottom: 10px } .info_tacgia { width: 72%; float: right } .block_tacgia { width: 100%; float: left; padding: 0 0 10px; margin: 0 0 10px; border-bottom: 1px dotted #cacaca } #tvxkhop02, #tvxkhop { margin: 0; padding: 0 0 10px } #tvxkhop .title_box_category { background: url(../components/printer/images/graphics/menu_bar_home_2.jpg) repeat } #tvxkhop .title_box_category a { color: #000; background: none } #tvxkhop02 .title_box_category { background: url(../components/printer/images/graphics/menu_bar_home_01.jpg) repeat } #tvxkhop02 .title_box_category a { color: #000; background: none } #tvxkhop03 .title_box_category { background: url(../components/printer/images/graphics/title_bg_apilas.jpg) repeat } #tvxkhop03 .title_box_category a { color: #000; background: none } .block_quangcao { border: 1px solid #e2e2e3; position: relative } .block_quangcao .content_box_category { padding: 0 3%; width: 94% } .ad_by_elick { position: absolute; right: 0; bottom: -15px; height: 10px; background: url(../components/printer/images/graphics/bg_ad_by_elick_ngang.png) no-repeat; width: 61px } .block_quangcao .xuongkhop2col .block_question { width: 23.8%; float: right; padding: 0; background: none; border: none } .block_quangcao .xuongkhop2col .block_image_news { width: 74.2%; float: left } .block_quangcao .xuongkhop2col .item_questtions { width: 100%; float: left; border-bottom: 1px dotted #e2e2e3; padding: 0 0 5px; margin: 0 0 5px } .block_quangcao .xuongkhop2col .item_questtions:last-child { border: none; margin: 0; padding: 0 } .block_quangcao .xuongkhop2col .more_bottom { border-top: 1px solid #e2e2e3; padding: 5px 0 0; margin: 10px 0 0 } .block_quangcao .xuongkhop2col .item_questtions img.icon_chamhoi { float: left; margin: 0 5px 5px 0 } .block_quangcao #tvxkhop03 .xuongkhop2col .thumb, .block_quangcao #tvxkhop02 .xuongkhop2col .thumb, .block_quangcao #tvxkhop .xuongkhop2col .thumb { width: 140px; margin: 0 10px 0 0 } #tvxkhop03 .xuongkhop2col .block_image_news .news_lead, #tvxkhop02 .xuongkhop2col .block_image_news .news_lead, #tvxkhop .xuongkhop2col .block_image_news .news_lead { padding: 0 } .xuongkhop2col .info_tuvan_mem { float: none } .title_chucvi { padding: 0 0 10px } * + html #box_coment_300 #box_comment .comment_item { width: 90% } * + html #box_coment_300 #box_comment .sub_comment { width: 100% } * + html #box_coment_300 #box_comment .sub_comment .input_comment, * + html #box_coment_300 .input_comment { width: 95%; padding: 10px 2%; position: static } * + html #box_coment_300 #box_comment .sub_comment .block_input_comment .input_comment { width: 90% } * + html #box_coment_300 #box_comment .sub_comment .block_input_comment .input_comment textarea { width: 100% } * + html #box_coment_300 #box_comment .view_more_coment { width: 100% } .banner_special_wc { width: 100%; text-align: right; margin: 0 0 10px } .category_guess_score .txt_main_category a { background: none; color: #328005 } .category_guess_score .date { padding: 0 0 5px; width: 100%; float: left; color: #333; font: 400 11px arial; border-bottom: 1px dotted #ccc; text-align: center } .category_guess_score table { width: 100%; float: left } .category_guess_score table td { padding: 2px 0; vertical-align: top } .category_guess_score table .minutes, .category_guess_score table thead { text-align: center; color: #9f224e; font: 400 12px arial } .category_guess_score table .main_team, .category_guess_score table .sub_team { font-size: 11px } .category_guess_score table .score { text-align: center; font-weight: 700; font-size: 14px; width: 30% } .category_guess_score table .score button { background: #328005; color: #fff; border: none; width: 50px; padding: 3px 0; cursor: pointer } .category_guess_score table .score span.box { border: 1px solid #ccc; width: 14px; text-align: center; overflow: hidden; display: inline-block } .category_guess_score table .score span.box input { font-size: 14px; text-align: center; width: 100% } .category_guess_score table .score span.no-border { border: 1px solid #fff; width: 7px } .category_guess_score table .sub_team, .category_guess_score table .main_team { text-align: center } .category_guess_score table .main_team img { margin-left: 5px } .category_guess_score table .sub_team img { margin-right: 5px } .category_guess_score table .line td { border-top: 1px dotted #ccc } .category_guess_score table .chuadau { font: 400 12px arial; color: #999; text-align: center } .category_guess_score .content_box_category { padding: 0 0 30px; background: url(../components/printer/images/graphics/bg_wc_104x33.jpg) no-repeat right bottom } #dudoan_300.category_guess_score table .main_team, #dudoan_300.category_guess_score table .sub_team { width: 40% } #dudoan_300.category_guess_score table .main_team a, #dudoan_300.category_guess_score table .sub_team a { font: 400 14px arial } #dudoan_300.category_guess_score table .txt_view_more a { font-size: 12px } #dudoan_300.category_guess_score table .score span.no-border { font-size: 14px } #dudoan_300 { display: none } .thanhtoan_item { width: 100%; float: left; border-bottom: 1px dotted #dedede; margin: 5px 0 0 } .thanhtoan_item.end { padding: 0; border: none } .thanhtoan_item a.txt_hoadon { padding: 5px 0 0 } .thanhtoan_item a img { float: left; margin: 0 5px 0 0 } .daiphatsong img { margin: 0 5px 0 0 } .line_after { margin: 0 0 20px; border-bottom: 1px solid #ccc; padding: 0 0 20px; width: 100%; float: left } .block_filter_live a.none_link { color: #ccc; border-right: 1px solid #DEDEDE } .live_post_dienbien { border: 1px solid #95bb26; background: #f7ffe1; margin: 0 0 10px } .live_post_dienbien a { display: block; width: 100%; color: #360; padding: 10px 0; text-align: center } .list_3text_inrow, .list_3image_inrow { overflow: hidden; width: 100%; float: left } .list_3text_inrow ul, .list_3image_inrow ul { width: 104%; float: left; padding: 0 } .list_3image_inrow li { width: 30.5%; display: inline-block; vertical-align: top; margin: 0 2% 0 0 } * + html .list_3text_inrow ul, * + html .list_3image_inrow ul { width: 100%; float: left } * + html .list_3text_inrow li, * + html .list_3image_inrow li { float: left } .title_maybay { font: 700 16px arial; border-top: 1px solid #e2e2e3; padding: 10px 0 } .fix { position: fixed; top: 0; z-index: 1 } #dangkythamgia .form_thamgia .capcha { margin: 17px 10px 0 0 } #dangkythamgia .form_thamgia .btn_refrest { margin: 17px 0 0 } #cuocthianh { overflow: hidden } #cuocthianh .videoname { width: 96.5% } #cuocthianh .title_box_category { background: #ffb83c url(../components/printer/images/graphics/bg-left-bottom-13x13.png) no-repeat left bottom } #cuocthianh .txt_main_category { width: 100%; background: url(../components/printer/images/graphics/bg-right-center-100x44.png) no-repeat right center; display: block; margin: 0; height: 30px } #cuocthianh .txt_main_category a { margin: 0 0 0 10px; background: none; letter-spacing: -.8px } .logo_myebank { margin: 7px 10px 0 0 } .vd_menu_web li a { white-space: nowrap } .title_tinlienquan_160 { font: 400 11px arial; padding-bottom: 5px; border-bottom: 1px solid #e2e2e3; font: 700 11px arial } .block_trailer, .block_tlq_160 { margin: 10px 0 0 } .txt_khoichieu { color: #d71450 } .block_khoichieu_160 { width: 90%; float: left; padding: 5px 5%; background: #f1f1f1; font: 400 12px arial } .block_trailer a.txt_trailer { display: block; float: left; text-align: center; color: #fff; font: 700 12px arial; padding: 5px 0; background: #ce154e; width: 100% } .block_trailer .txt_trailer a { color: #fff } .movie_infomation .thumb_140 { margin: 0 0 5px; padding: 5px 0 0 } .movie_infomation .list_new_140 li { padding: 0 } .movie_infomation .list_new_140.list_1item li { margin: 0; width: 100% } .movie_infomation .list_new_140 li a { font: 400 11px arial } .content_block_thongtin .block_tlq_160 .list_dot_3x3 li a, .content_block_thongtin .block_tlq_160 .dot_red a { color: #333; text-decoration: none } #box_details_news table.tbl_fptplay { margin: 0 auto 10px; max-width: 100% } #box_details_news table.tbl_fptplay td { border: medium none; padding: 0 10px } #box_details_news .box_quangcao .title_news { width: auto; float: none; margin: 0 } #box_details_news .box_quangcao .title_news a { color: #333 } #box_details_news .box_quangcao { width: 96%; padding: 10px 2%; float: left; background: #eee; border-top: 2px solid #dadada } #box_details_news .box_quangcao.list_news .thumb { width: 150px; margin-bottom: 5px } #box_details_news .box_quangcao .title_news a, #box_details_news .box_quangcao.list_news li a { color: #333 } #box_details_news .box_quangcao .title_news a:hover, #box_details_news .box_quangcao.list_news li a:hover { color: #004f8b } #box_details_news .box_quangcao.list_news .list_news_dot_3x3 { margin: 0 } #box_details_news .box_quangcao.list_news li { list-style: none; margin: 0; padding: 0 } .checking_filter { float: left; margin: 7px 5px 0 0 } .filter_left .active { background: none repeat scroll 0 0 #e2e2e2; color: #9f224e; font: 400 12px/30px arial; display: block; float: left; padding: 0 10px; cursor: pointer } .filter_left label { cursor: pointer; float: left } #detail_page_live #box_details_news .news_lead { padding-bottom: 15px; font: 400 14px/18px arial } .icon_total_vne { background: url(../components/printer/images/graphics/icon_total_01.png) no-repeat } .icon_thongtintx { width: 14px; height: 14px; background-position: -23px -260px } .icon_hotline { width: 14px; height: 14px; background-position: -37px -265px } .icon_hambermenu { background-position: -56px -263px; width: 44px; height: 44px } .block_ama { padding: 10px 2%; width: 96%; float: left; background: #f5f5f5; overflow: hidden; margin-bottom: 15px; text-align: left } .title_ama { font-size: 14px; padding: 0 0 10px } .question_ama { padding: 0 0 10px } .item_answare_ama { width: 44.5%; margin: 0 4% 0 0; display: inline-block; vertical-align: top } * + html .item_answare_ama { float: left } .answare_ama { width: 104% } .question_ama p { margin: 0 !important } .item_answare_ama a { display: block; border: 1px solid #ccc; background: #fff; border-radius: 2px; margin: 0 0 10px; text-align: center; font: 400 12px/16px arial; padding: 6px 7% 6px 3%; color: #333 !important } .item_answare_ama a:hover { color: #333; background: #d9d9d9 } .item_answare_ama.error_ama a { background: #d9d9d9 url(../components/printer/images/icons/icon_checked_ama.gif) no-repeat 97% center; font-weight: 700 } .item_answare_ama.checked_ama a { background: #fff url(../components/printer/images/icons/icon_checked_ama_02.gif) no-repeat 97% center } .block_btn_send_answare { border-top: 1px solid #d9d9d9; padding: 10px 0 0 } .btn_send_answare_ama { background: #e17100; border: none; color: #fff; cursor: pointer; float: right; font: 400 14px arial; padding: 4px 10px } .list_dot_3x3_xem_nhieu li { padding: 0 0 0 3%; margin: 0 0 10px; background: url(../components/printer/images/graphics/bg_dot_gray_3x3.gif) no-repeat left 6px; width: 97%; float: left } .list_dot_3x3_xem_nhieu li:last-child { margin: 0 } .wiz_sk { padding: 15px 3%; width: 94%; float: left; background: #f4f4f4; margin: 10px 0 20px } .wiz_sk:last-child { margin-bottom: 0 } .title_wiz { border-bottom: 1px solid #d9d9d9; padding-bottom: 5px; font: 400 12px arial; margin-bottom: 15px } .icon_dung { background: url(../components/printer/images/graphics/spell_check.png) no-repeat left top; display: inline-block; width: 14px; margin: 0 3px } .icon_sai { background: url(../components/printer/images/graphics/spell_check_02.png) no-repeat center 2px; display: inline-block; width: 14px; margin: 0 3px } .ans_item .icon_dung { margin: 0 } .ans_item .icon_sai { margin: 0 } .ask_wiz { font: 700 14px arial; margin-bottom: 10px } .ans_item { margin: 0 0 5px; font: 400 12px arial } .ans_item label { cursor: pointer } .txt_ans_wiz { float: right; width: 96% } .btn_wiz_01 { background: #9f224e; border: medium none; color: #fff; cursor: pointer; float: left; font: 400 14px arial; height: 30px; margin: 10px 10px 0 0; padding: 0 40px } .btn_wiz_02 { background: #e6e6e6; border: medium none; color: #9f224e; cursor: pointer; float: left; font: 400 14px arial; height: 30px; margin: 10px 10px 0 0; padding: 0 40px } .note_wiz { float: left; padding: 15px 4%; width: 92%; background: #e9eaf3; margin: 5px 0 } .btn_dangky_thamgia:hover, .btn_dangky_thamgia { width: 180px; margin: 0 auto 10px; height: 30px; background: #9f224e; color: #fff; text-align: center; font: 400 14px/30px arial } .block_50_quangcao { width: 50%; float: left; box-sizing: border-box; padding: 0 10px 0 0 } .block_50_quangcao:last-child { padding: 0 0 0 10px } .tab_contact_ads a.active { border-bottom: 1px solid #fff; background: #fff } .txt_location_contac { width: 100%; float: left; background: url(../components/printer/images/graphics/bg_1x1_gray.gif) repeat-x left 8px; margin-bottom: 15px } .txt_location_contac span { font: 700 14px arial; display: inline-block; padding: 0 10px 0 0; background: #fff } .content_tab_ads { float: left; width: 100%; box-sizing: border-box; font: 400 14px arial; margin-bottom: 30px } .content_tab_ads p { position: relative; padding: 0 0 0 20px; margin-bottom: 15px } .content_tab_ads .icon_map { display: inline-block; width: 13px; height: 13px; background: url(../components/printer/images/graphics/icon_total_01.png) no-repeat 0 -594px; position: absolute; left: 0; top: 0 } .content_tab_ads .icon_phone { display: inline-block; width: 13px; height: 13px; background: url(../components/printer/images/graphics/icon_total_01.png) no-repeat -14px -594px; position: absolute; left: 0; top: 0 } .content_tab_ads .icon_cell_phone { display: inline-block; width: 6px; height: 10px; background: url(../components/printer/images/graphics/icon_total_01.png) no-repeat -2px -608px; position: absolute; left: 15px; top: 8px } .hot_line { padding: 5px 20px 5px 35px; position: relative; float: left; font: 700 14px arial; color: #fff; background: #999; border-radius: 5px } .hot_line:hover { background: #9f224e } .list_kytu_tag { box-sizing: border-box; width: 100%; float: left; background: #eee; padding: 10px 10px 0; margin-bottom: 15px } .list_kytu_tag li { display: inline-block; margin: 0 10px 10px } .list_kytu_tag li.active a { font: 700 14px arial; color: #9f224e; text-decoration: underline } .list_kytu_tag li:first-child { font: 400 14px arial; color: #999 } #col_ds_tag { background: url(../components/printer/images/graphics/bg_1x1_gray.gif) repeat-y 810px 0 } #col_tag { width: 800px; float: left } #col_tag ul { width: 33.33%; float: left } #col_tag li { display: inline-block; width: 100%; vertical-align: top; padding: 0 1% 10px 0 } #col_tag li a { font: 400 13px/18px arial } .luu_baiviet { background: #eee; display: inline-block; font: 11px/14px arial; border-radius: 3px } .luu_baiviet a { display: inline-block; padding: 3px 7px } .luu_baiviet .icon_savebaiviet { background: url(../components/printer/images/icons/icon_bookmar.png) no-repeat 0 0 / cover; float: left; margin-top: 1px; width: 11px; height: 14px; margin-right: 5px } .luu_baiviet:hover .icon_savebaiviet { background-position: -11px 0 } .luu_baiviet.active { background: #004f8a } .luu_baiviet.active a { color: #fff } .luu_baiviet.active .icon_savebaiviet { background-position: -24px 0 } .luu_baiviet.active:hover { background: #417ca8 } .theodoi_baiviet { background: #eee; padding: 5px 10px; margin-top: 10px; cursor: pointer; color: #666; font: 12px arial } .theodoi_baiviet:hover { background: #ddd } .theodoi_baiviet:hover .line_theodoi { color: #fff } .theodoi_baiviet .txt_theodoi { color: #004f8b } .txt_dangtheodoi { color: #666 } .txt_huytheodoi { color: #9f224e } .theodoi_baiviet .soluot_theodoi { color: #666; font: 12px arial } .icon_theodoi { background: url(../components/printer/images/icons/icon_theodoi.png) no-repeat 0 -68px; float: left; margin-top: 1px; padding-right: 3px; width: 12px; height: 12px } .icon_dangtheodoi { background: url(../components/printer/images/icons/icon_theodoi.png) no-repeat 0 0; float: left; margin-top: 1px; padding-right: 3px; width: 12px; height: 12px } .icon_huytheodoi { background: url(../components/printer/images/icons/icon_theodoi.png) no-repeat 0 -34px; float: left; margin-top: 1px; padding-right: 3px; width: 12px; height: 12px } .author_mail { text-align: right; font-size: 14px; color: #d6d6d6; margin-bottom: 15px } .author_mail strong { color: #333 } .author_mail .icon_mail { width: 16px; height: 11px; background: url(../components/printer/images/graphics/mail_icon.png) no-repeat 0 0; display: inline-block; position: relative; float: right; margin-top: 4px } .author_mail .icon_mail .tooltip_mail { width: 109px; height: 24px; background: url(../components/printer/images/graphics/mail_to_tg.png) no-repeat 0 0; position: absolute; top: -27px; left: -92px; display: none } .author_mail .icon_mail:hover .tooltip_mail { display: block } .vongloai_vongbang { margin-bottom: 10px; width: 100%; float: left } .vongloai_vongbang ul.tabs { float: left; width: 100%; background: #f4f4f4 } .vongloai_vongbang ul.tabs li { float: left } .vongloai_vongbang ul.tabs li.last { float: right } .vongloai_vongbang ul.tabs li a { padding: 8px 15px; display: block; font-size: 14px; color: #999 } .vongloai_vongbang ul.tabs li a.active { background: #9f224e; color: #fff } #dangky_nhanbantin { background: #f5f5f5; padding: 10px; box-sizing: border-box; border-top: 2px solid #dfdfdf } #dangky_nhanbantin .intro_box_nhanbantin { font: 700 12px/16px arial } #dangky_nhanbantin .intro_box_nhanbantin_dagoi { font: 400 12px/16px arial; margin-top: 10px } #dangky_nhanbantin .intro_box_nhanbantin_dagoi a { font: 700 12px/16px arial; color: #004f8b } #dangky_nhanbantin .form_nhanbantin { background: #fff; position: relative; border: 1px solid #d9d9d9; box-sizing: border-box; padding-right: 32px; margin-top: 10px } #dangky_nhanbantin .form_nhanbantin input { border: 0; background: none; float: left; width: 100%; float: left; height: 28px; padding: 0 5px; box-sizing: border-box } #dangky_nhanbantin .form_nhanbantin button { height: 28px; width: 32px; position: absolute; right: 0; top: 0; color: #fff; background: #9f224e; font-size: 11px; border: none } .title_xacnhandangky { font: 700 16px arial; margin-bottom: 15px } .info_xacnhandangky { font: 700 14px arial; margin-bottom: 15px } .note_xacnhandagnky { margin-bottom: 20px } #xacnhan_page .form_lienhe { padding: 0 } #xacnhan_page .form_lienhe .btn_gui { padding: 0 15px; width: auto } .btn_swich_en { float: left; margin-right: 25px; width: 66px; height: 20px; background: url(../components/printer/images/icons/icon_swich_en.gif) no-repeat 0 0; text-indent: -9000px } .item_thirdparty .txt_main_category a.btn_swich_en_box { background: url(../components/printer/images/icons/img_vne_eng.gif) no-repeat 0 3px; text-indent: -9000px } .btn_swich_en_breadcrum { margin-right: 0 } #box_col_left .block_swich_en_mobile { width: 100%; float: left; background: #e2e2e2; padding: 0 10px 0 15px; box-sizing: border-box; line-height: 40px; color: #666 } #box_col_left .block_swich_en_mobile a { line-height: 40px; vertical-align: middle; width: 72px; height: 18px; background: url(../components/printer/images/icons/icon_swich_en_mobile.gif) no-repeat 0 0; text-indent: -9000px; display: inline-block } #box_infographic .list_new_140 li { width: 48% } #box_infographic .list_new_140 li:last-child { margin: 0 } #box_infographic .list_new_140 li a { font-weight: 700 } .block_quiz_v2 { position: relative; color: #3b3b3b } .item_quiz { padding: 0 0 5px; margin: 0 0 5px } .ask_quiz { font-size: 14px; font-weight: 700; margin-bottom: 15px } .active_quiz .ask_quiz { color: #9f224e } .ans_quiz .answer_item { width: 100%; float: left; box-sizing: border-box; margin: 0 0 12px } .answer_item label { cursor: pointer } .quiz_send { text-align: center } .send_quiz_btn { display: inline-block; background: #9f224e; color: #fff; font-size: 14px; font-weight: 400; padding: 8px 20px; cursor: pointer; border: none; margin-bottom: 10px } .error { font-size: 12px; color: #9f224e } .inner_block_quiz { background: #f4f4f4; padding: 15px 20px 10px; box-sizing: border-box } .block_quiz_v2_option2 .quiz_send { text-align: left } .block_quiz_v2_option2 .send_quiz_btn { margin-bottom: 0 } .label_socauhoi { border-bottom: 1px solid #d9d9d9; margin-bottom: 15px; padding-bottom: 10px; color: #176f87 } .block_ketqua_quiz .number_point { font-size: 18px; text-align: center } .block_ketqua_quiz .number_point strong { font-size: 22px; color: #9f224e } .share_btn { margin-top: 10px; text-align: center } .share_btn a { background: #3c60aa url(../components/printer/images/graphics/fb_share_icon.png) no-repeat 25px center; color: #fff !important; padding: 10px 25px 10px 45px; display: inline-block } #block_flash_video_home { background: #fff } #block_flash_video_home .embed-container { height: 100%; padding-bottom: 0; background: #fff } .block_tinlienquan_temp { background: #eee; border: 1px solid #d6d6d6 } .block_tinlienquan_temp .item_tinlq_temp { width: 50%; float: left; padding: 10px; box-sizing: border-box } .block_tinlienquan_temp .item_tinlq_temp .thumb img { width: 100%; float: left } #box_details_news .fck_detail .block_tinlienquan_temp a { color: #333; font: 400 14px arial } .list_slide_raovat { position: relative; padding: 0 10px; box-sizing: border-box } .thumb_raovat { float: left; width: 100%; margin: 0 0 5px; position: relative } .thumb_raovat img { width: 100%; float: left } .thumb_raovat .overlay_price { width: 100%; position: absolute; bottom: 0; left: 0; background: url(../components/printer/images/graphics/opacity_raovat.png) repeat; padding: 1px 5px 1px 0; text-align: right; box-sizing: border-box } .thumb_raovat .overlay_price .number_price { font: 400 11px arial; color: #fff; background: url(../components/printer/images/graphics/icon_gia_rv.png) no-repeat 0 center; padding-left: 15px; display: inline-block; vertical-align: middle } #box_raovat .list_new_160 { width: 100% } #col_3 #box_raovat .list_new_160 li { width: 100%; padding: 0 0 5px; margin: 0 0 5px; box-sizing: border-box; border-bottom: 1px solid #efeeee } #col_3 #box_raovat .list_new_160 li:last-child { padding: 0; border-bottom: none } #col_3 #box_raovat .list_new_160 li .txt_link_rv { float: none; margin: 0; width: auto } .xemthem_raovat { text-align: center } .xemthem_raovat a { color: #3f5dab; font-style: italic } .btn_control_rv { width: 11px; height: 26px; background: url(../components/printer/images/graphics/btn_box_raovat.png) no-repeat; position: absolute; top: 50%; margin-top: -13px; cursor: pointer } .btn_control_rv.btn_control_rv_prev { background-position: 0 0; left: -5px } .btn_control_rv.btn_control_rv_next { background-position: -12px 0; right: -5px } .list_news_recommend { width: 100%; float: left; padding: 0 } .box_list_recommend li { width: 49.5%; float: none; display: inline-block; vertical-align: top; padding: 0 10px 0 0; margin: 0 0 15px; box-sizing: border-box } .content_box_category .box_list_recommend .thumb { width: 45px; margin: 0 10px 0 0; float: left } .content_box_category .box_list_recommend .thumb img { width: 100%; float: left } #box_details_news .box_list_recommend li .title_news { margin-top: 0; float: none; width: auto; padding: 0 0 0 55px } .box_list_recommend li .title_news a { color: #000; font: 400 14px arial } .box_recommend_style1 .control_pagination a { margin: 7px 0 0 } .box_list_recommend li .title_news span { font: 400 14px arial; padding: 0 } .box_list_recommend li .title_news span.txt_666 { display: none; margin-top: 7px; font: 400 12px arial; color: #999 } .box_recommend_style1 .box_list_recommend { min-height: 165px } .box_recommend_style2 .list_news_recommend { width: 100% } .box_recommend_style2 .box_list_recommend li { width: 100%; margin: 0 0 5px; padding: 0 0 0 10px; background: url(../components/printer/images/graphics/bg_dot_gray_3x3.gif) no-repeat left 7px } .box_recommend_style2 .content_box_category .box_list_recommend .thumb { display: none } .box_recommend_style2 .control_pagination { display: none } #box_details_news .box_recommend_style2 .title_news { padding-bottom: 0 } .box_recommend_style2 .box_list_recommend li .title_news span.txt_666 { display: inline-block; margin-top: 0 } #box_details_news .box_recommend_660 .box_list_recommend li .title_news { padding: 0 0 0 70px } .box_recommend_660 .content_box_category .box_list_recommend .thumb { width: 60px } .box_recommend_660 .box_list_recommend li .title_news span.txt_666 { display: block } .switch_eng { white-space: nowrap; color: #666 !important; font: 400 12px arial !important; vertical-align: middle; display: inline-block; position: relative } .switch_eng .ico-eng { width: 14px; height: 16px; background: url(../components/printer/images/icons/ico-vnex-14x16.png) no-repeat 0 0; display: inline-block; vertical-align: middle; margin-right: 3px } .switch_eng span { color: #666; font: 400 12px arial; vertical-align: middle; display: inline-block } .switch_eng span.tip_read { width: 97px; height: 29px; background: url(../components/printer/images/icons/tip_read.png) no-repeat 0 0; position: absolute; top: 15px; right: 0; display: none } .switch_eng:hover span.tip_read { display: block } .box_sanpham.width_980 { width: 100% } .box_sanpham.width_160 { width: 160px } .box_sanpham.width_100 { width: 100px } .box_sanpham.height_600 { height: 600px } .box_sanpham.height_250 { height: 250px } .box_sanpham.height_116 { height: 116px; margin-bottom: 10px } .box_sanpham .box_logo { display: inline-block; vertical-align: middle; text-decoration: none } .box_sanpham .box_logo img { max-width: 100%; display: block } .box_sanpham.width_980 .box_logo img { margin-bottom: 0; width: 125px } .box_sanpham .box_logo span { color: #9f9f9f; font-size: 11px } .box_sanpham.width_980 .box_logo { width: 15% } .box_sanpham.width_980 .slides_sanpham { width: 83% } .box_sanpham .slides_sanpham { display: inline-block; vertical-align: middle; position: relative; height: 100%; overflow: hidden } .box_sanpham { overflow: hidden } .box_sanpham .warp { border: 1px solid #dfdfdf; padding: 5px 10px; overflow: hidden; box-sizing: border-box; height: 100% } .box_sanpham .avata { border: 1px solid transparent; text-align: center; position: relative; display: inline-block; vertical-align: middle; margin-right: 3px; width: 95px; height: 95px } .box_sanpham .avata:hover { border: 1px solid #9f224e; text-align: center } .box_sanpham figure { overflow: hidden; display: block; padding: 0; margin: 0; box-sizing: border-box; width: 100%; height: 100%; border: 1px solid #eee; position: relative } .box_sanpham .avata img { max-width: 100%; margin: 0 auto } .box_sanpham .avata .price p { font-size: 13px; text-transform: uppercase; color: #9f224e; font-weight: 700; margin: 0; padding: 0; margin-bottom: 5px } .box_sanpham .box-group-text { position: absolute; top: 50%; transform: translateY(-50%); left: 0; right: 0 } .box_sanpham .xem a { font-size: 9px; color: #fff; background: #9f224e; padding: 3px 10px 4px; cursor: pointer; font-size: bold } .box_sanpham .owl-nav { text-align: center; margin-top: 20px } .box_sanpham .owl-prev { background: url(../components/printer/images/graphics/prev.png) no-repeat center; font-size: 0; position: absolute; top: 50%; left: 0; width: 6px; height: 10px; transform: translateY(-50%); cursor: pointer } .box_sanpham .owl-next { background: url(../components/printer/images/graphics/next.png) no-repeat center; font-size: 0; position: absolute; top: 50%; right: 0; width: 6px; height: 10px; transform: translateY(-50%); cursor: pointer } .box_sanpham .box-om-testimo { display: none; position: absolute; background: rgba(255, 255, 255, 0.7); top: 0; left: 0; right: 0; height: 100%; padding: 5px; box-sizing: border-box } .box_sanpham .name { overflow: hidden; display: inline-block; vertical-align: top; max-width: 71px } .box_sanpham .name a { display: block; color: #333; font-size: 14px; line-height: 1.3; margin-bottom: 10px } .box_sanpham .giamgia { color: #9f224e; font-size: 15px; font-weight: 700; line-height: 1.2 } .box_sanpham .name { font-size: 13px } .slides_sanpham .owl-item .Item { padding: 0 7px; clear: both } .box_sanpham .owl-carousel .owl-item { float: left } .box_sanpham .owl-stage { overflow: hidden } .box_sanpham.width_160 .name { max-width: none; display: block; text-align: center; padding-left: 20px; padding-right: 20px } .box_sanpham.width_160 .avata { width: 130px; height: 130px; margin-bottom: 5px; margin-right: 0; box-sizing: border-box; margin-left: auto; margin-right: auto; display: block } .box_sanpham.width_160 .giamgia { position: absolute; bottom: 0; right: 0; background: #fff; padding: 5px 7px } .box_sanpham.width_160 .box_logo { margin-bottom: 20px } .box_sanpham.width_160 .warp { padding-top: 20px; padding-bottom: 20px } .box_sanpham.width_160 .avata .price p { font-size: 17px; margin-bottom: 10px } .box_sanpham.width_160 .avata .xem a { font-size: 11px; padding: 7px 14px 9px; font-weight: 700 } .box_sanpham.width_160 .slides_sanpham_1 { height: 94%; position: relative } .box_sanpham.width_160 .owl-stage-outer { height: 100%; overflow: hidden } .box_sanpham.width_160 .owl-prev { left: -6px } .box_sanpham.width_160 .owl-next { right: -6px } .box_sanpham.width_160 .name a { line-height: 1.2; margin-bottom: 0 } .box_sanpham.width_160 .Item { margin-bottom: 10px } .box_sanpham.width_100 .slides_sanpham_2 { overflow: hidden; position: relative } .box_sanpham.width_100 .warp { padding: 15px 2px } .box_sanpham.width_100 .avata { width: 100%; height: 100%; box-sizing: border-box } .box_sanpham_title { color: #333; font-size: 14px; font-weight: 700; line-height: 1.2; text-align: center } .box_sanpham.width_100 .avata { border: none; margin-bottom: 15px; margin-right: 0; cursor: pointer } .box_sanpham.width_100 .avata:hover { border: none } .box_sanpham.width_100 figure { border: none } .box_sanpham.width_100 .xem { text-align: center; height: 50px; display: block } .box_sanpham.width_100 .xem a { font-size: 11px; padding: 7px 19px 8px; font-weight: 700 } .box_sanpham.width_100 .box_logo { margin-bottom: 10px } .box_sanpham.width_100 .owl-buttons { display: none } #box_cate_giaoduc { margin-bottom: 20px } #box_cate_giaoduc .box_sanpham .Item .avata { overflow: hidden; width: 100%; position: relative } #box_cate_giaoduc .box_sanpham figure { padding: 2px } #box_cate_giaoduc .box_sanpham.width_160 .name { padding-left: 5px !important; padding-right: 5px !important; min-height: 32px; max-height: 32px; overflow: hidden } #box_cate_giaoduc .btn_control_rv.btn_control_rv_prev { left: -12px } #box_cate_giaoduc .btn_control_rv.btn_control_rv_next { right: -12px } #box_cate_giaoduc .box_sanpham .avata:hover .box-om-testimo { display: block !important } #box_cate_giaoduc .box_sanpham.width_160 .avata .price p { font-size: 13px } #box_cate_giaoduc figure img { position: absolute; top: 10%; left: 10% } #box_cate_giaoduc figure img:empty { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%) } #box_cate_giaoduc .box_sanpham.width_160 .giamgia { bottom: 50px !important; right: 2px !important } .thamdo_box_left { width: 64%; border-right: 1px solid #dfdfdf; padding-right: 8px; margin-right: 8px; float: left } .thamdo_box_right { float: left } .percent { margin-bottom: 20px; text-align: center } .percent .percent_number { font-size: 24px; line-height: 1.2 } .percent_1 .percent_number { color: #029ae6 } .percent_2 .percent_number { color: #f00001 } .percent .name_percent { font-size: 11px; line-height: 1.2; color: #333 } #boxthamdoykien.boxthamdoykien_bophieu .title_thamdo { border: none; color: #333; font-weight: 700; padding: 0 } #boxthamdoykien.boxthamdoykien_bophieu .txt_xemketqua { color: #9f224e; font-size: 12px } .bieudo_baucu2016 .embed-container iframe { margin-top: -130px; height: 680px } .xemthem_new_ver { padding-top: 15px; margin-bottom: 15px; border-top: 1px solid #e2e2e3 } .xemthem_new_ver .text_xemthem { float: left; font-size: 14px } .xemthem_new_ver .list_xemthem_newver { padding-left: 80px } .list_xemthem_newver ul li { width: 100% !important; float: left; margin: 0 0 10px; padding: 0 0 0 10px !important; box-sizing: border-box; background: url(../components/printer/images/graphics/bg_dot_gray_3x3.gif) no-repeat left 6px; border: none !important } .list_xemthem_newver ul li a { color: #004f8b; font: 400 14px arial } @media screen and (min-width: 120px) and (max-width: 480px) { #box_cactacgia .scroll-pane .list_new_160 li a { font-size: 16px } #box_cactacgia .sobaiviet { font-size: 14px } #wrapper_header, .breakumb_timer, .xemtiep, .list_menu_small, .box_sub_hot_news li .thumb, #box_col_left, .div-fbook, .block_menu_video_320 { display: block } #header_web, .logo_myeban { display: none } .btn_control_col_left { display: block; position: absolute; right: -45px; top: 0; cursor: pointer } .ipad_header, .title_chose_day { display: none } .web, .banner_980x60, .block_timer_share, .box_ads_hot_news, .photo_blnhieu, .banner_300x250, .block_category_child, #boxthamdoykien, .banner_120x240, .bottom_pagination, .block_timer, .banner_468, #detail_page #col_300, .line_col_480 .hidden320, .like_google, #box_tinkhac_detail, #colum_3, .hidden320, .block_col_160, .img_nhataitro, .block_col_480 .social_share, #h24qua #col_300, .go_head { display: none } .ipad { display: block; float: left } #header, #container { margin: 0 auto; width: 748px; padding: 0 10px } .img_logo { float: none; margin: 11px auto 7px; width: 120px; display: block } .logovne { width: 100%; float: left; height: 44px } #wrapper_header { height: 44px } #header { width: auto } #container { width: auto; padding: 0 10px 10px } .box_hot_news { width: 100% } .block_news_big { width: 100%; height: auto } #col_tag, .box_hot_news .title_news { width: 100%; float: left } .list_news .list_news_dot_3x3 { padding: 10px 0 0 } .list_news .list_news_dot_3x3 li a { font-size: 14px } .list_news .list_news_dot_3x3 li strong { display: inline-block } .width_image_common { width: 100% } .box_ads_hot_news { height: 120px; overflow: hidden; margin: 0 0 0 10px } .box_sub_hot_news { border: none; padding: 0; margin: 0; width: 100% } .box_sub_hot_news li.end, .box_sub_hot_news li { border-bottom: none; border-top: 1px solid #E2E2E3; padding: 10px 0 0; margin: 10px 0 0 } #box_news_top .box_sub_hot_news li .title_news, #box_news_top .box_sub_hot_news li .news_lead, #news_home.list_news .title_news { float: none; width: auto } #box_news_top .box_sub_hot_news li .news_lead { padding: 0 } .box_ads_hot_news .banner_300x120 { padding: 0 0 0 10px; border-left: 1px solid #E2E2E3 } #col_1 { width: 100% } #col_2 { border-left: none; border-right: none; margin: 0; padding: 0; width: 100% } #col_3 { display: none } .slide_more_video ul { overflow: hidden; width: 380px; height: 84px } .col_width_310 { width: 248px } .thumb_image img { width: 100% } #photo .list_news .thumb_image img { width: 140px } .col_width_310 .banner_300x250 { display: none } #footer { width: 100% } .footerMenu { display: none } .lineFmenu { width: 100% } .ulBlockMenu { width: 122px } .ft-botl { display: none } .block_arrow_title { display: block } .title_box_category { background-color: #eee; height: 44px; font: 700 20px/44px arial } .txt_main_category a { font: 700 20px/44px arial; height: 44px } .title_news a { font: 700 18px arial } .news_lead { font: 400 16px arial } .content_box_category .list_news_dot_3x3 { border: 0; padding: 0 } .content_box_category .list_news_dot_3x3 li { border-top: 1px solid #E2E2E3; padding: 10px 0; float: left; width: 100%; margin: 0 } .content_box_category .list_news_dot_3x3 li a { background: none; padding: 0; font: 400 18px arial; color: #000 } #box_news_top { margin: 10px 0 0 } .box_hot_news .title_news a { font: 400 20px arial } .list_news { padding: 10px 0 0 } .list_news_dot_3x3_300 li { padding: 0; background: none; padding: 0 0 10px 0; margin: 0 0 10px; border-bottom: 1px dotted #E2E2E3 } .list_news_dot_3x3_300 li:last-child { border: none; margin: 0; padding: 0 } .list_news_dot_3x3_300 li a { font: 400 18px arial; color: #000 } #box_details_news .relative_new .list_news_dot_3x3_300 li { background: url(../components/printer/images/graphics/bg_dot_gray_3x3.gif) no-repeat scroll left 8px; padding: 0 0 0 10px; border: none; margin: 0 0 10px } .box_hot_news .list_news_dot_3x3_300 li { padding: 0 0 0 10px; margin: 0; border: none; background: url(../components/printer/images/graphics/bg_dot_gray_3x3.gif) no-repeat 0 6px } .box_hot_news .list_news_dot_3x3_300 li a { color: #666; font: 700 14px arial } #news_home.list_news .thumb img { margin: 0 } .list_menu_small { width: 100%; float: left; background: #f4f4f4 } .list_menu_small li { width: 44%; margin: 0 3%; border-bottom: 1px solid #d7d7d7; float: left } .list_menu_small li.end { border: none } .list_menu_small li a { display: block; width: 100%; float: left; height: 44px; font: 400 16px/44px arial } .ft-botm, .ft-botr { display: none } .coppy_right_small { font: 400 12px arial; color: #333; display: block; padding: 10px 0 0 } .tttoasoan { width: 100%; float: left } .width_50 { width: 45%; float: left; margin: 0 0 10px 10px } .width_50 img { margin: 0 10px 0 0 } .coppy_right { width: 100%; float: left; margin: 10px 0 0; padding: 20px 0 0; border-top: 1px solid #d7d7d7 } .coppy_right p { padding: 0 0 0 10px } .mid_1_right { display: none } .mid_1_left { width: 100% } .block_mid_new, .col_width_140 { background: none } #search_page .line_col, #h24qua .folder_list, .folder_list .line_col, #box_news_top .line_col .line_col_midnews_top, #box_news_top .line_col, .line_col { background: none } .go_head { width: 100%; float: left } .breakumb_timer .timer_header ul li { height: 34px; float: left } .breakumb_timer .timer_header ul li a { height: 34px; float: left; display: block; font: 700 14px/34px arial; padding: 0 0 0 5px; background: #eceeed; white-space: nowrap } .breakumb_timer .timer_header ul li.start a { border-left: 2px solid #9F224E; color: #9F224E } .breakumb_timer .timer_header ul li .arrow_breakumb { display: block; float: left; height: 34px; width: 20px; background: url(../components/printer/images/graphics/icon_total_01.png) no-repeat 0 -325px } .breakumb_timer .timer_header ul li.have_cap2 a { background: #eceeed } .breakumb_timer .timer_header ul li.have_cap2 .arrow_breakumb { background-position: 0 -257px } .breakumb_timer .timer_header ul li.cap2 a { background: #c2c4c5 } .breakumb_timer .timer_header ul li.cap2 .arrow_breakumb { background-position: 0 -291px } #detail_page_live.line_col, #detail_page.line_col { background: none; margin: 0 0 10px } #detail_page_live #col_300, #detail_page_live #col_660, #detail_page #col_660 { width: 100%; display: block } .block_col_480 { width: 100% } .block_input_comment .input_comment textarea { width: 99% } #box_comment .sub_comment .block_input_comment .input_comment textarea { width: 99%; font: 400 16px arial; height: 50px } #box_tinkhac_detail .list_news { padding: 0 } #box_tinkhac_detail, #box_tinkhac_detail .xemtiep { margin-bottom: 0 } #box_tinkhac_detail .list_news li { width: 100% } #box_tinkhac_detail .list_news li.end { border: none } #box_tinkhac_detail .list_news li .thumb_160 { width: 160px; margin: 0 10px 0 0; display: none } #box_tinkhac_detail .list_news_dot_3x3_300 li:last-child { border: none; margin: 0; padding: 0 0 0 10px } #box_tinkhac_detail .left .list_news_dot_3x3_300 li:last-child, #box_tinkhac_detail .list_news_dot_3x3_300 li, #box_tinkhac_detail .list_news li { background: none repeat scroll 0 0 rgba(0, 0, 0, 0); border-bottom: 1px dotted #E2E2E3; margin: 0 0 10px; padding: 0 0 10px 10px; background: url(../components/printer/images/graphics/bg_dot_gray_3x3.gif) no-repeat 0 6px; float: none; width: auto } #box_tinkhac_detail .list_news li .thumb_160 img { width: 100% } #box_tinkhac_detail .w320 { width: 100% } #box_tinkhac_detail .control_pagination { display: none } #box_tinkhac_detail .list_news .news_lead { padding: 10px 0 0 } .img_arrow_timer { width: 34px; height: 34px; display: block; float: right; background: url(../components/printer/images/graphics/img_arow_down_timer.gif) no-repeat right top } .img_arrow_timer.active { background: url(../components/printer/images/graphics/img_arow_down_timer.gif) no-repeat right bottom } .block_timer { padding: 10px 10px 0 0 } #box_details_news #box_tinlienquan .content_box_category .list_news_dot_3x3 a { display: inline } #box_details_news #box_tinlienquan .content_box_category .list_news_dot_3x3 li { border: none; margin-bottom: 10px } #box_tinlienquan .txt_main_category a { font-size: 20px; height: auto } #box_tinlienquan { margin: 0 } .block_tincheo li { padding: 0 0 10px } .block_tincheo li:last-child { padding: 0 } .style_02 .txt_main_category a { font: 700 14px arial } #box_tinlienquan .style_02.title_box_category { background: url(../components/printer/images/graphics/bg_2x2_xam.gif) repeat-x left top; height: auto; margin: 0 0 10px } .w670 { width: 100% } .go_head a { padding: 0 8px } #homepage #news_home.list_news .thumb, #news_home.list_news .thumb, .folder_item_list .list_news .thumb, /*tag page*/ .content_box_category .thumb, .list_news .thumb { width: 45% } .folder_item_list .list_news .thumb img, .content_box_category .thumb img, .list_news .thumb img { width: 100% } .timer_header { width: 85% } .txt_block_relative_news { float: left; width: 85% } #xemnhieunhat .title_news a, #binhluannhieu .title_news a, #binhluanmoinhat .title_news a, #box_details_news .short_intro, #box_details_news .fck_detail .Normal, #box_details_news .fck_detail p { font-size: 18px; line-height: 24px } #box_details_news .relative_new a, #box_details_news .fck_detail, #box_comment .comment_item p { font-size: 16px } #box_tinkhac_detail .list_news li a, #box_tinkhac_detail .content_box_category .list_news_dot_3x3_300 li a { font-size: 16px; font-weight: 700 } #box_details_news .fck_detail table td.caption, #box_details_news .fck_detail table td.Image, #box_details_news .fck_detail table td.Image, #box_details_news .fck_detail table td .Image, #box_details_news .fck_detail .Image, #box_details_news .fck_detail table td .Normal { font-size: 14px } .content_box_category .txt_view_more { display: inline-block; padding: 5px 20px 5px 10px; border: 1px solid #c8c8c8; border-radius: 2px; background-position: 65px 9px } #col_2 .list_new_140 li { width: 47%; margin: 0 3% 0 0 } #col_2 .list_new_140 li .thumb_140 img { width: 100% } .block_chiase_480 .block_goithutoasoan { width: 90% } .block_chiase_480 .block_goithutoasoan .content_goithutoasoan { width: 95%; line-height: 16px; padding: 5px 0 0; height: 33px } .bor_search input.txt_input_search { width: 61%; margin: 0 } .btn_main_search { float: left; margin: 0 0 0 10px } .block_404 { width: 300px } .chose_search_404 { margin: 10px 0 0 50px } .title_block_col { padding-top: 5px } #box_top_video .box_flash_video { width: 100% } #box_top_video .block_flash { width: 100%; height: auto } #box_top_video .social_share .item_social { margin: 0 5px 0 0 } #box_top_video .item_phanhoi, .block_col_right_300, .list_video_right, .block_menu_video { display: none } .mid_videopage, #box_top_video .line_mid_980_300, #videopage .block_col_left_660 { background: none } .block_col_left_660 { width: 100% } .block_list_video_mid ul { width: 100%; float: left } .block_list_video_mid li { width: 45.5%; margin: 0 2% } .block_menu_video_320 { position: relative; padding: 0 0 10px; z-index: 9 } .block_menu_video_320 .block_show_breakumb { top: 34px } .block_list_video_mid li .thumb_160 img { width: 100% } .txt_category_video { padding: 7px 0 0 } #box_top_video { border-bottom: 2px solid #d3d3d3 } .block_menu_video_320 .block_show_breakumb { top: 34px } .block_txt_right_rss { padding: 10px 0 0 } #lienhe_page { background: none; padding: 10px 0 0 } .form_lienhe { padding: 20px 0 0; width: 100% } .block_txt_right_rss, .block_lienhe { width: 100% } .form_lienhe .txt_input.tieude { width: 100% } .form_lienhe .txt_area.noidung, .form_lienhe select { width: 100% } .form_lienhe ul#thumbnails li { width: 30%; float: left; height: 90px; margin: 5px 3% 10px 0; overflow: hidden } .form_lienhe ul#thumbnails li .wrap { height: 70px; overflow: hidden } .form_lienhe ul#thumbnails li .del_action { line-height: 18px; float: right } .form_lienhe ul#thumbnails li .del_action a:hover { text-decoration: underline } .box_sub_hot_news .scroll-pane { width: 100% !important; height: auto !important } .box_sub_hot_news .jspContainer { height: auto !important; width: 100% !important } .box_sub_hot_news .jspPane { width: 100% !important; position: static } #h24qua.line_col { background: none } #h24qua #col_660 { width: 100% } #h24qua .box_sub_hot_news, .box_news_top_24h { width: 100%; border: none } #h24qua .box_sub_hot_news ul { padding: 0 } #h24qua .box_sub_hot_news ul li:first-child { margin: 0 } .folder_list_left { margin: 0 } #h24qua .box_folder { width: 100% } .right_news { font: 14px arial } #pvtt_page { background: none } #pvtt_page .block_col_left_660 { width: 100% } .box_sub_hot_news ul { width: 100% } #box_album_music_detail .block_avata_album { width: 33% } .list_video li { margin: 0; width: 100%; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dotted #E2E2E3 } .list_video li:last-child { margin: 0; padding: 0; border: none } .list_video li .thumb_image { width: 40%; float: left; margin: 0 10px 0 0 } .list_video li .title_video { float: none } .list_video li .title_video a { font: 400 18px arial } #rsspage.line_page { background: none } .block_rss { width: 100% } #search_page { background: none } #colum_1 { width: 27%; display: none } #colum_2 { width: 100%; margin: 10px 0 0 } #search_page .form_search .wrap_txtsearch { width: 85% } #search_page .form_search .btt_search { width: 15% } .titlelong .txt_main_category { font: 700 20px/20px arial } .titlelong .txt_main_category a { font: 700 20px/20px arial; padding: 10px 0 } .item_slider .title_video a { font: 400 16px arial } .swich_page { width: 100% } .goback_oldversion { text-align: left } #binhluanmoinhat .scroll-pane { height: auto } .block_col_top, .line_col_480 { background: none } .list_news { width: 100%; float: left } .block_home_new, #homepage .home_bright_640, .block_col_top_right .home_bleft_640, .block_col_top_right, .block_col_top_left { width: 100% } .block_hidden_device { display: none } #gocnhin .block_title_gocnhin { height: 44px } #gocnhin .block_title_gocnhin a { font: 700 20px/44px arial; padding: 10px 0 0 } } @media screen and (min-width: 481px) and (max-width: 767px) { #box_cactacgia .scroll-pane .list_new_160 li a { font-size: 16px } #box_cactacgia .sobaiviet { font-size: 14px } .col_width_140, #nguoigiau, .like_google, #h24qua #col_300, .block_col_480 .social_share, #box_tinkhac_detail .xemtiep, .go_head, .hidden320, #header_web, .web, .banner_980x60, .box_ads_hot_news, .col_width_160, .banner_300x250, .block_category_child, .banner_120x240, .banner_160x600, .banner_468, #detail_page #col_300, #colum_3 { display: none } #col_tag, .mid_1_left { width: 100% } .block_mid_new { background: none } #wrapper_header, .breakumb_timer, .list_menu_small, #box_col_left, #form_thamgia, .block_menu_video_320, #dudoan_300 { display: block } .ipad { display: block; float: left } #header { margin: 0 auto; width: 100% } #container { margin: 0 auto; width: 748px; padding: 0 10px } .txt_thongtinnhataitro, .img_nhataitro { right: 44px; top: 13px } .img_logo { display: block; width: 180px; margin: 0 0 0 54px } .logovne { width: 100%; float: left; height: 44px } #wrapper_header { height: 44px } #header { width: auto } #container { width: auto; padding: 0 10px 10px } .box_hot_news { width: 58% } .block_news_big { width: 100%; height: auto } .box_hot_news .title_news { margin: 0; width: 100%; float: left } .width_image_common { width: 100% } .box_ads_hot_news { height: 120px; overflow: hidden; margin: 0 0 0 10px } .box_sub_hot_news { border-right: none; border-left: none; padding: 0; margin: 0; float: right; width: 38% } .box_ads_hot_news .banner_300x120 { padding: 0 0 0 10px; border-left: 1px solid #E2E2E3 } #col_1 { width: 58% } #col_2 { border-left: none; border-right: none; margin: 0; padding: 0; width: 38%; float: right } #col_3 { display: none } .slide_more_video ul { overflow: hidden; width: 200px; height: 84px } .col_width_310 { width: 100%; padding: 0; border: none } #news_home.list_news .thumb, #news_home.list_news.list_news_home_page li .thumb, .folder_item_list .list_news .thumb, /*tag page*/ .content_box_category .thumb, .list_news .thumb { width: 45% } .folder_item_list .list_news .thumb img, .content_box_category .thumb img, .list_news .thumb img, .thumb_image img { width: 100% } #photo .list_news .thumb_image img { width: 140px } .col_width_310 .banner_300x250 { display: none } #footer { width: 100%; border: none } .footerMenu { display: none } .lineFmenu { width: 100% } .ulBlockMenu { width: 122px } .ft-botl { display: none } .block_arrow_title { display: block } .title_box_category { background-color: #eee; height: 44px } .txt_main_category a { font: 700 20px/44px arial; height: 44px } .title_news a { font: 700 18px arial } .news_lead { font: 400 16px arial } .content_box_category .list_news_dot_3x3 { border: 0; padding: 0 } .content_box_category .list_news_dot_3x3 li { border-top: 1px solid #E2E2E3; padding: 10px 0; float: left; width: 100%; margin: 0 } .list_news_dot_3x3 li a { font: 700 14px/16px arial } .box_hot_news .list_news_dot_3x3 li a { font: 700 14px/21px arial } .content_box_category .list_news_dot_3x3 li a { background: none; padding: 0; font: 400 18px arial; color: #000 } #box_details_news .relative_new .list_news_dot_3x3_300 li { background: url(../components/printer/images/graphics/bg_dot_gray_3x3.gif) no-repeat scroll left 8px; padding: 0 0 0 10px; border: none; margin: 0 0 10px } #box_details_news #box_tinlienquan .content_box_category .list_news_dot_3x3 a { display: inline; font: 700 16px arial } #box_details_news #box_tinlienquan .content_box_category .list_news_dot_3x3 li { border: none; margin-bottom: 10px } .style_02 .txt_main_category a { font: 700 14px arial } #box_tinlienquan .style_02.title_box_category { background: url(../components/printer/images/graphics/bg_2x2_xam.gif) repeat-x left top; height: auto; margin: 0 0 10px } .box_hot_news .title_news a { font: 700 24px arial } .list_menu_small { width: 100%; float: left; background: #f4f4f4 } .list_menu_small li { width: 23%; margin: 0 1%; border-bottom: 1px solid #d7d7d7; float: left } .list_menu_small li.end { border: none } .list_menu_small li a { display: block; width: 100%; float: left; height: 44px; font: 400 16px/44px arial } .ft-botm, .ft-botr { display: none } .coppy_right_small { font: 400 12px arial; color: #333; display: block; padding: 10px 0 0 } .tttoasoan { width: 100%; float: left } .width_50 { width: 45%; float: left; margin: 0 0 10px 10px } .width_50 img { margin: 0 10px 0 0 } .coppy_right { width: 100%; float: left; margin: 10px 0 0; padding: 20px 0 0; border-top: 1px solid #d7d7d7 } .coppy_right p { padding: 0 0 0 10px } #box_news_top .line_col, .line_col { background: url(../components/printer/images/graphics/bg_1x1_gray.gif) repeat-y 60% 0 } #box_news_top .line_col .line_col_midnews_top { background: none } .go_head { width: 100%; float: left } #nguoigiau .title { width: 100%; text-align: center; background: #04416d } .breakumb_timer .timer_header ul li a { height: 34px; float: left; display: block; font: 700 14px/34px arial; padding: 0 0 0 5px; background: #eceeed; white-space: nowrap } .breakumb_timer .timer_header ul li.start a { border-left: 2px solid #9F224E; color: #9F224E } .breakumb_timer .timer_header ul li .arrow_breakumb { display: block; float: left; height: 34px; width: 20px; background: url(../components/printer/images/graphics/icon_total_01.png) no-repeat 0 -325px } .breakumb_timer .timer_header ul li.have_cap2 a { background: #eceeed } .breakumb_timer .timer_header ul li.have_cap2 .arrow_breakumb { background-position: 0 -257px } .breakumb_timer .timer_header ul li.cap2 a { background: #c2c4c5 } .breakumb_timer .timer_header ul li.cap2 .arrow_breakumb { background-position: 0 -291px } #detail_page_live.line_col, #detail_page.line_col { background: none; margin: 0 0 10px } #detail_page_live #col_300, #detail_page_live #col_660, #detail_page #col_660 { width: 100%; display: block } #detail_page #col_660 .line_col_480 { background: none; margin: 0 } .block_col_480 { width: 68% } .block_col_160 { width: 30% } .block_input_comment .input_comment textarea { width: 99% } #box_comment .sub_comment .block_input_comment .input_comment textarea { width: 99% } #box_tinkhac_detail .list_news { width: 100%; border: none } #box_tinkhac_detail .list_news li { width: 48%; margin: 0 2% 0 0 } #box_tinkhac_detail .list_news li .thumb_160 img { width: 100% } #box_tinkhac_detail .w320 { width: 48% } .img_arrow_timer { width: 34px; height: 34px; display: block; float: right; background: url(../components/printer/images/graphics/img_arow_down_timer.gif) no-repeat right top } .img_arrow_timer.active { background: url(../components/printer/images/graphics/img_arow_down_timer.gif) no-repeat right -34px } .block_timer { padding: 10px 10px 0 0 } .style_03 .txt_main_category a { font: 700 18px/44px arial } .thumb_160 img { width: 100% } #box_news_top .box_sub_hot_news li .title_news, #box_news_top .box_sub_hot_news li .news_lead, #news_home.list_news .title_news { float: none; width: auto } .list_news_dot_3x3 li strong { display: inline-block; background-position: 0 10px } .list_news_dot_3x3_300 li { padding: 0 0 10px; margin: 0 0 10px; border-bottom: 1px solid #E2E2E3; background: none } .list_news_dot_3x3_300 li:last-child { border: none; padding: 0; margin: 0 } #box_tinkhac_detail { margin: 0 } #box_tinkhac_detail .list_news_dot_3x3_300 li { background: url(../components/printer/images/graphics/bg_dot_gray_3x3.gif) no-repeat left 11px; padding: 0 0 0 10px; border: none } .txt_block_relative_news { float: left; width: 90% } #box_tinlienquan .txt_main_category a { font-size: 20px; height: auto } .block_tincheo li { padding: 0 0 10px } .block_tincheo li:last-child { padding: 0 } #box_details_news .short_intro { font-size: 18px } #box_details_news .relative_new a, #box_details_news .fck_detail, #box_comment .comment_item p, #box_tinkhac_detail .list_news li a, #box_tinkhac_detail .content_box_category .list_news_dot_3x3_300 li a { font-size: 16px } #box_details_news .fck_detail table td.caption, #box_details_news .fck_detail table td.Image, #box_details_news .fck_detail table td.Image, #box_details_news .fck_detail table td .Image, #box_details_news .fck_detail .Image, #box_details_news .fck_detail table td .Normal { font-size: 14px } #interactive #box_comment .comment_item p { font-size: 13px } .list_news_dot_3x3_300 li a, #xemnhieunhat .title_news a, #binhluanmoinhat .title_news a, #binhluannhieu .title_news a { color: #000; font: 700 18px arial } .list_news .list_news_dot_3x3 li a { color: #666; font: 700 14px/21px arial } .block_show_breakumb ul li { width: 30%; margin: 0 0 0 3% } .btn_control_col_left { display: block; right: -45px; position: absolute; top: 0; cursor: pointer } .timer_header { width: 50% } .box_hot_news .list_news_dot_3x3_300 li { padding: 0 0 0 10px; margin: 0; border: none; background: url(../components/printer/images/graphics/bg_dot_gray_3x3.gif) no-repeat 0 9px } .box_hot_news .list_news_dot_3x3_300 li a { color: #666; font: 700 14px/21px arial } #col_2 .list_new_140 li { width: 47%; margin: 0 3% 0 0 } #col_2 .list_new_140 li .thumb_140 img { width: 100% } .block_chiase_480 .block_goithutoasoan .content_goithutoasoan { width: 99% } .block_chiase_480 .block_goithutoasoan { width: 90% } .block_chiase_480 .block_goithutoasoan .content_goithutoasoan { width: 95%; line-height: 16px; padding: 5px 0 0; height: 33px } .bor_search input.txt_input_search { width: 74%; margin: 0 } .btn_main_search { float: left; margin: 0 0 0 10px } .title_404, .title_404 .txt_center { text-align: left } .block_404 { width: 480px } .chose_search_404 { margin: 10px 0 0 130px } #box_top_video .box_flash_video { width: 100% } #box_top_video .block_flash { width: 100%; height: auto } #box_top_video .block_flash img { width: 100% } #box_top_video .social_share .item_social { margin: 0 5px 0 0 } #box_top_video .item_phanhoi, .block_col_right_300, .list_video_right { display: none } .mid_videopage, #box_top_video .line_mid_980_300 { background: none } .block_col_left_660 { width: 100%; background: none } .block_list_video_mid ul { width: 100%; float: left } .block_menu_video_320 { position: relative; margin: 0 0 10px } .block_menu_video_320 .block_show_breakumb { top: 34px } #lienhe_page { background-position: 50% 0 } .form_lienhe { padding: 20px 0 0; width: 100% } .block_txt_right_rss, .block_lienhe { width: 48% } .title_chose_day, .box_sub_hot_news .jspVerticalBar { display: none } .box_sub_hot_news .scroll-pane { width: 100% !important } .box_sub_hot_news .scroll-pane ul { width: 95% } #h24qua.line_col { background: none } #h24qua #col_660 { width: 100% } #h24qua .box_sub_hot_news, .box_news_top_24h { width: 48%; border: none } .box_folder { width: 48%; border: none; margin: 0; float: right } .folder_list_left { float: left } #pvtt_page { background: none } #pvtt_page .block_col_left_660 { width: 100% } #form_thamgia { padding: 0; width: 99%; background: #F4F4F4 } #form_thamgia .content_form { padding: 0 10px } .input_left { width: 75% } .input_right { width: 23% } .form_thamgia .block_input, .form_thamgia .txt_input, .form_thamgia .hoten { width: 95% } .form_thamgia .tuoi { width: 80% } .form_thamgia .block_input_capcha { margin: 0 10px 0 0 } .form_thamgia .block_input_capcha .input_capcha { width: 85% } .btn_dangky_thamgia:hover, .btn_dangky_thamgia { width: 180px; margin: 0 auto 10px; display: block; height: 30px; background: #9f224e; color: #fff; text-align: center; font: 400 14px/30px arial } #form_thamgia .content_form { padding: 10px } .box_sub_hot_news ul { width: 100% } #box_album_music_detail .block_avata_album { width: 33% } .content_vptt { width: 94%; padding: 10px 3% } #box_details_news .content_vptt { width: 70%; padding: 0 } .image_pvtt img { width: 100% } .list_video li { margin: 0; width: 100%; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dotted #E2E2E3 } .list_video li:last-child { margin: 0; padding: 0; border: none } .list_video li .thumb_image { width: 40%; float: left; margin: 0 10px 0 0 } .list_video li .title_video { float: none } .list_video li .title_video a { font: 400 18px arial } .txt_up, .txt_down { width: 50% } .txt_up .width_50 img { margin: 0 5px 0 0 } .width_50 { width: 50%; margin: 0 } .list_new_140 li { width: 46%; margin: 0 4% 0 0 } #rsspage .list_item_rss { width: 100% } #search_page .line_col, #rsspage .line_mid_670 { background: none } #rsspage.line_page { background-position: 50% 0 } .block_rss { width: 48% } #search_page { background-position: 28% } #colum_1 { width: 27% } #colum_2 { width: 70% } #search_page .form_search .wrap_txtsearch { width: 93% } #search_page .form_search .btt_search { width: 7% } .titlelong .txt_main_category a { font: 700 20px/20px arial; padding: 10px 0 } #homepage #col_2, #homepage #col_1 { width: 100% } #homepage .line_col { background: none } #homepage #box_news_top .line_col { background: url(../components/printer/images/graphics/bg_1x1_gray.gif) repeat-y 65.5% 0 } #homepage .box_hot_news, #homepage .mid_1_left { width: 64% } #homepage .box_sub_hot_news, #homepage .mid_1_right { width: 33% } .list_video li { width: 31.7%; margin: 0 2% 0 0; border: none; padding: 0 } .list_video li:last-child { margin: 0 } .list_video li .thumb_image { width: 100% } #homepage .home_bleft_640 { width: 64.5%; float: left } #homepage .home_bright_640 { width: 33.5%; float: right } #homepage .photo_blnhieu .list_news_dot_3x3_300 { border: none; padding: 0; margin: 0 } .bottom_pagination { margin-bottom: 10px } #homepage .home_bright_640 .list_news_dot_3x3_300 li a, .item_slider .title_video a, .mid_1_right .title_news a, .list_new_140 li a { font: 700 16px arial } .swich_page { width: 100% } .goback_oldversion { text-align: left } .mid_1_right .block_padding_10 { padding: 10px } .mid_1_right .tb_servey .w20 { width: 10% } .mid_1_right #boxthamdoykien .input_servey { margin: 4px 0 0 } .mid_1_right .tb_servey .w130 { width: 90%; font-size: 16px } .mid_1_right #boxthamdoykien .txt_xemketqua, #boxthamdoykien .btn_bieuquyet { margin: 0 10px 0 0 } #boxthamdoykien .title_thamdo { font-size: 18px } .list_new_300 li .thumb_140 { width: 45% } #gocnhin { width: 100% } #gocnhin .block_image_news { width: 35% } #gocnhin .tentacgia_gocnhin { width: auto; padding: 10px 0 0 10px } #gocnhin .news_lead, #gocnhin .title_news { padding: 0 0 0 10px } #gocnhin .block_title_gocnhin { height: 44px } #gocnhin .block_title_gocnhin a { font: 700 20px/44px arial; padding: 10px 0 0 } .block_100, .block_home_new { width: 100% } .block_col_top_right { width: 33% } #homepage .block_col_top { background-position: 65.5% } .block_col_top_left { width: 64% } #homepage .block_col_top_right .home_bright_640, #homepage .block_col_top_right .home_bleft_640 { width: 100% } .block_home_new .block_col_mid { background: none } .info_tuvan_mem { font-size: 14px } .info_tuvan_mem .chucvi { font: 400 14px arial } .block_question { padding: 0 0 0 7%; font: 400 14px arial } .block_100 #boxthamdoykien .tb_servey .w130 { width: 90%; margin: 0 } #homepage #news_home.list_news .thumb { width: 43% } #homepage .box_sub_hot_news .scroll-pane li a { font: 400 16px arial } .block_col_top .list_news_dot_3x3_300 { padding: 5px 0 0; margin: 10px 0 0; border-top: 1px dotted #E2E2E3 } .block_goithutoasoan a { padding: 10px 0 10px 15% } .block_goithutoasoan .content_goithutoasoan { font: 700 14px tahoma; height: auto } .block_goithutoasoan { height: auto } .style_03 .list_new_160 li a { font-size: 16px } #pvtt_page .block_txt_right_rss { width: 100% } #pvtt_page .block_txt_right_rss .form_thamgia .tuoi { float: left } .info-search #widgetCalendar, .info-search .calendarblockvne { left: auto !important; right: 0 !important } #container_tab_live div.text_live { font-size: 16px } #container_tab_live div.minutes span { font-size: 14px } #box_coment_300 .scroll-pane { height: auto } #box_coment_300 .content_scoller { width: 100% } #box_coment_300.stick { position: static; width: 100% } #boxthamdoykien .input_servey { margin: 3px 5px 0 0 } .banner_special_wc { margin: 10px 0; text-align: left } .block_banner, .xuongkhop2col .info_tuvan_mem, .block_quangcao .xuongkhop2col .block_image_news, .block_quangcao .xuongkhop2col .block_question { width: 100% } #box_details_news .gocnhin .short_intro { color: #333; font: 400 16px/20px arial } #cuocthianh .txt_main_category { background: none } #cuocthianh .block_arrow_title { display: none } #cuocthianh .txt_main_category a { font-size: 18px } .titlelong .title_box_category { height: auto; background-color: #eee } .titlelong .txt_main_category a { font: 700 14px/18px arial; height: auto; padding: 5px 0 } .titlelong .block_arrow_title { display: none } #giavang .title_giavang { width: 100% } .block_loaivang { width: 44%; margin-top: 5px; margin-right: 10px } } @media screen and (min-width: 768px) and (max-width: 979px) { #wrapper_header, .breakumb_timer, #box_col_left, #gocnhin .news_lead, #dudoan_300 { display: block } #header_web, #detail_page #col_300, .box_ads_hot_news, #h24qua #col_300, .title_chose_day, #colum_3, .box_sub_hot_news .jspVerticalBar, .go_head, #form_thamgia, .logo_myeban { display: none } .box_ads_hot_news .box_category { margin: 0 } .web, .banner_980x60 { display: none } .ipad { display: block; float: left } #header { margin: 0 auto; width: 100% } #container { width: 98%; padding: 0 1%; padding-top: 0 } .txt_thongtinnhataitro, .img_nhataitro { right: 44px; top: 13px } #box_news_top { margin: 10px 0 } #box_news_top .line_col { background: url(../components/printer/images/graphics/bg_1x1_gray.gif) repeat-y 56% 0; margin: 0 } #homepage #box_news_top .line_col { background: url(../components/printer/images/graphics/bg_1x1_gray.gif) repeat-y 65% 0; margin: 0 } #h24qua #box_news_top .line_col { background-position: 50% 0 } #box_news_top .line_col .line_col_midnews_top { background: none } .box_hot_news { width: 55% } .block_news_big { width: 100%; height: auto } .box_ads_hot_news { height: 120px; overflow: hidden; margin: 0 0 0 10px; width: 310px } .box_sub_hot_news { border-right: 0; width: 43%; padding: 0; float: right; margin: 0; border: none } .box_ads_hot_news .banner_300x120 { padding: 0 0 0 10px; border-left: 1px solid #E2E2E3 } #col_1 { width: 55% } #col_2 { margin: 0; padding: 0; width: 43%; float: right } .mid_1_right { width: 21% } .line_col { background: url(../components/printer/images/graphics/bg_1x1_gray.gif) repeat-y 56% 0 } #col_3 { display: none } .slide_more_video ul { overflow: hidden; width: 380px; height: 84px } .col_width_310 { width: 100%; padding: 0 } .col_width_140 { width: 23%; padding: 0 0 0 2%; display: none } .thumb_image img { width: 100% } #photo .list_news .thumb_image img { width: 140px } .col_width_310 .banner_300x250 { display: none } #col_tag, .go_head, #footer { width: 100% } .footerMenu { padding: 0 0 0 2%; width: 98% } .lineFmenu { width: 100% } .ulBlockMenu { width: 16.5% } .ft-botl { display: none } .mid_1_left { width: 75% } .block_mid_new { background-position: 77% 0 } .breakumb_timer .timer_header ul li a { height: 34px; float: left; display: block; font: 700 14px/34px arial; padding: 0 0 0 5px; background: #eceeed; color: #000; white-space: nowrap } .breakumb_timer .timer_header ul li.start a { border-left: 3px solid #9F224E; color: #9F224E } .breakumb_timer .timer_header ul li .arrow_breakumb { display: block; float: left; height: 34px; width: 20px; background: url(../components/printer/images/graphics/icon_total_01.png) no-repeat 0 -325px } .breakumb_timer .timer_header ul li.have_cap2 a { background: #eceeed } .breakumb_timer .timer_header ul li.have_cap2 .arrow_breakumb { background-position: 0 -257px } .breakumb_timer .timer_header ul li.cap2 a { background: #c2c4c5 } .breakumb_timer .timer_header ul li.cap2 .arrow_breakumb { background-position: 0 -291px } #detail_page.line_col { background: none } #detail_page #col_660 { width: 100% } #box_tinkhac_detail .list_news li .thumb_160 img { width: 100% } #box_tinkhac_detail .w320 { width: 363px } .img_arrow_timer { width: 34px; height: 34px; display: block; float: right; background: url(../components/printer/images/graphics/img_arow_down_timer.gif) no-repeat right top } .img_arrow_timer.active { background: url(../components/printer/images/graphics/img_arow_down_timer.gif) no-repeat right -34px } .block_timer { padding: 10px 10px 0 0 } .block_show_breakumb ul li { width: 30%; margin: 0 0 0 3% } .btn_control_col_left { display: block; right: -45px; position: absolute; top: 0; cursor: pointer } .img_logo { display: block; width: 180px; margin: 0 0 0 54px } #wrapper_header { height: auto } .timer_header { width: 60% } .block_chiase_480 .block_goithutoasoan { width: 95% } .block_chiase_480 .block_goithutoasoan .content_goithutoasoan { width: 95%; line-height: 36px } .block_menu_video_320 { position: relative; z-index: 999 } #box_top_video .social_share .item_social { margin: 0 5px 0 0 } #box_top_video .item_phanhoi, .block_col_right_300 { display: none } .mid_videopage { background: none } .block_col_left_660 { width: 100% } .block_list_video_mid ul { width: 100%; float: left } .block_list_video_mid li { width: 22.5% } #colum_2 { width: 81% } .form_lienhe { padding: 20px 0 0 } .box_sub_hot_news .scroll-pane { width: 100% !important; height: 320px } .box_sub_hot_news .jspContainer { height: 425px !important; width: 100% !important } .box_sub_hot_news .jspPane { width: 100% !important } #search_page .line_col, #h24qua.line_col { background: none } #h24qua #col_660 { width: 100% } .list_video li { width: 32%; margin: 0 1% 0 0 } #rsspage.line_page, #pvtt_page { background: url(../components/printer/images/graphics/bg_1x1_gray.gif) repeat-y 61% 0 } .block_rss, #pvtt_page .block_col_left_660 { width: 60% } #pvtt_page .block_txt_right_rss { width: 38% } .block_thumb_slide_show { float: none } .box_sub_hot_news ul { width: 96% } .qc_seagame { text-align: center } .swich_page { width: 100% } .goback_oldversion { text-align: left } #gocnhin { width: 100% } #gocnhin .block_image_news { width: 23% } .block_home_new { width: 100% } #homepage .line_col_home { background: none } #homepage .block_col_top { background-position: 65% } #homepage #col_1, .block_col_top_left { width: 64% } #homepage #col_2, .block_col_top_right { width: 34% } .block_100, .block_col_top_right .home_bleft_640 { width: 100% } .block_col_top_right .home_bright_640 { width: 100% } .block_col_top_right .list_news_dot_3x3_300 { border-top: 1px dotted #E2E2E3; padding: 5px 0 0; margin: 10px 0 0 } #homepage .block_col_mid { background-position: 65% } .block_100 #boxthamdoykien .tb_servey .w130 { width: 93%; margin: 0 } #homepage .box_sub_hot_news .scroll-pane li a { font: 700 12px arial } #homepage .box_sub_hot_news .scroll-pane { height: auto } #homepage .box_hot_news { width: 64% } #homepage .box_sub_hot_news { width: 34% } #gocnhin .tentacgia_gocnhin { width: auto; padding: 9px 0 0 10px } #homepage .box_sub_hot_news .scroll-pane li.end { margin: 0 } #gocnhin .news_lead, #gocnhin .title_news { padding: 10px 0 0 10px } .banner_300x250, .block_banner { float: none; margin: 0 auto; width: 100%; overflow: hidden } #homepage #news_home.list_news .thumb { width: 42% } #homepage .content_box_category .thumb { width: 40% } #homepage .content_box_category .thumb img { width: 100% } #box_details_news .fck_detail .Normal, #box_details_news .fck_detail p { font-size: 16px; line-height: 22px } #box_comment .comment_item p { font-size: 16px; line-height: 20px } #box_details_news #box_tinlienquan .content_box_category .list_news_dot_3x3 a { font: 700 16px arial } #container_tab_live div.text_live, .style_03 .list_new_160 li a { font-size: 16px } .form_search #widgetCalendar, .form_search .calendarblockvne { right: 0 !important } .info-search #widgetCalendar, .info-search .calendarblockvne { left: auto !important; right: 0 !important } #detail_page_live.line_col, #detail_page.line_col { background: none; margin: 0 0 10px } #detail_page_live #col_300, #detail_page_live #col_660, #detail_page #col_660 { width: 100%; display: block } #box_coment_300 .scroll-pane { height: auto } #box_coment_300 .content_scoller { width: 100% } #box_coment_300.stick { position: static; width: 100% } #detail_page_live #boxthamdoykien .tb_servey { width: 100% } .banner_special_wc { margin: 10px 0; text-align: left } .xuongkhop2col .info_tuvan_mem, .block_quangcao .xuongkhop2col .block_image_news, .block_quangcao .xuongkhop2col .block_question { width: 100% } #box_details_news .gocnhin .short_intro { color: #333; font: 400 16px/20px arial } #giavang .title_giavang { width: 100% } .block_loaivang { width: 100%; margin-top: 5px; margin-right: 0 } .giavang_home { margin-top: 15px } #giavang .box_giavang { width: 100%; margin-bottom: 10px } #giavang .box_laisuat { width: 100% } } .item_slider { padding: 0 5px; clear: both } .item_slider .title_video { padding: 10px 0 0; width: 100%; float: left } .btn_control_tv_slider { height: 28px; width: 28px; background: url(../components/printer/images/graphics/icon_total_01.png) no-repeat; position: absolute; z-index: 9; top: 21% } .prev_slider { left: 1%; background-position: -1px -229px } .next_slider { right: 1%; background-position: -27px -229px } .prev_slider:hover { background-position: 0 -201px } .next_slider:hover { background-position: -28px -201px } .owl-carousel .owl-wrapper:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0 } .owl-carousel { display: none; position: relative; width: 100%; -ms-touch-action: pan-y } .owl-carousel .owl-wrapper { display: none; position: relative; -webkit-transform: translate3d(0px, 0px, 0px) } .owl-carousel .owl-wrapper-outer { overflow: hidden; position: relative; width: 100% } .owl-carousel .owl-wrapper-outer.autoHeight { -webkit-transition: height 500ms ease-in-out; -moz-transition: height 500ms ease-in-out; -ms-transition: height 500ms ease-in-out; -o-transition: height 500ms ease-in-out; transition: height 500ms ease-in-out } .owl-carousel .owl-item { float: left } .owl-controls .owl-page, .owl-controls .owl-buttons div { cursor: pointer } .owl-controls { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0) } .owl-carousel .owl-wrapper, .owl-carousel .owl-item { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0) } .owl-origin { -webkit-perspective: 1200px; -webkit-perspective-origin-x: 50%; -webkit-perspective-origin-y: 50%; -moz-perspective: 1200px; -moz-perspective-origin-x: 50%; -moz-perspective-origin-y: 50%; perspective: 1200px } .owl-fade-out { z-index: 10; -webkit-animation: fadeOut .7s both ease; -moz-animation: fadeOut .7s both ease; animation: fadeOut .7s both ease } .owl-fade-in { -webkit-animation: fadeIn .7s both ease; -moz-animation: fadeIn .7s both ease; animation: fadeIn .7s both ease } .owl-backSlide-out { -webkit-animation: backSlideOut 1s both ease; -moz-animation: backSlideOut 1s both ease; animation: backSlideOut 1s both ease } .owl-backSlide-in { -webkit-animation: backSlideIn 1s both ease; -moz-animation: backSlideIn 1s both ease; animation: backSlideIn 1s both ease } .owl-goDown-out { -webkit-animation: scaleToFade .7s ease both; -moz-animation: scaleToFade .7s ease both; animation: scaleToFade .7s ease both } .owl-goDown-in { -webkit-animation: goDown .6s ease both; -moz-animation: goDown .6s ease both; animation: goDown .6s ease both } .owl-fadeUp-in { -webkit-animation: scaleUpFrom .5s ease both; -moz-animation: scaleUpFrom .5s ease both; animation: scaleUpFrom .5s ease both } .owl-fadeUp-out { -webkit-animation: scaleUpTo .5s ease both; -moz-animation: scaleUpTo .5s ease both; animation: scaleUpTo .5s ease both } .wrap_pic { width: 100%; float: left; margin-bottom: 10px } .wrap_pic .desc_cation p, .wrap_pic .desc_cation .Normal { margin-bottom: 0 !important } .g-before-after { position: relative; overflow: hidden } .g-before-after img { display: block } .g-before-after .g-img-before { float: left } .g-before-after .g-img-after { left: 50%; bottom: 0; overflow: hidden } .g-before-after .g-img-after, .g-before-after .g-img-after img { position: absolute; right: 0; top: 0 } .g-before-after .g-img-divider { position: absolute; left: 50%; top: 0; bottom: 0; width: 0; border-left: 1px solid #000; border-right: 1px solid #000 } .g-before-after .g-img-divider > span { position: absolute; top: 50%; display: block; background-color: #fff; padding: 5px 10px; line-height: 1; text-align: center; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%) } .g-before-after .g-img-after img { max-width: inherit } .g-before-after .g-img-divider > span { background: url(../components/printer/images/graphics/btn_comp.png) no-repeat center center; background-size: contain; height: 26px; width: 84px; padding: 0; text-indent: -9000px } .note_flip { background: rgba(255, 255, 255, 0.82); bottom: 0; color: #333; display: block; height: 27px; line-height: 27px; position: absolute; width: 100%; z-index: 99999; font-size: 13px } .flip_wrap img { width: 100%; max-height: 100% } .new_comment_post { display: block; background: #fff; color: #9f224e; font-size: 13px; text-align: center; padding: 0 5px 10px } @-webkit-keyframes empty { 0% { opacity: 1 } } @-moz-keyframes empty { 0% { opacity: 1 } } @keyframes empty { 0% { opacity: 1 } } @-webkit-keyframes fadeIn { 0% { opacity: 0 } 100% { opacity: 1 } } @-moz-keyframes fadeIn { 0% { opacity: 0 } 100% { opacity: 1 } } @keyframes fadeIn { 0% { opacity: 0 } 100% { opacity: 1 } } @-webkit-keyframes fadeOut { 0% { opacity: 1 } 100% { opacity: 0 } } @-moz-keyframes fadeOut { 0% { opacity: 1 } 100% { opacity: 0 } } @keyframes fadeOut { 0% { opacity: 1 } 100% { opacity: 0 } } @-webkit-keyframes backSlideOut { 25% { opacity: .5; -webkit-transform: translateZ(-500px) } 75% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(-200%) } 100% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(-200%) } } @-moz-keyframes backSlideOut { 25% { opacity: .5; -moz-transform: translateZ(-500px) } 75% { opacity: .5; -moz-transform: translateZ(-500px) translateX(-200%) } 100% { opacity: .5; -moz-transform: translateZ(-500px) translateX(-200%) } } @keyframes backSlideOut { 25% { opacity: .5; transform: translateZ(-500px) } 75% { opacity: .5; transform: translateZ(-500px) translateX(-200%) } 100% { opacity: .5; transform: translateZ(-500px) translateX(-200%) } } @-webkit-keyframes backSlideIn { 0%, 25% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(200%) } 75% { opacity: .5; -webkit-transform: translateZ(-500px) } 100% { opacity: 1; -webkit-transform: translateZ(0) translateX(0) } } @-moz-keyframes backSlideIn { 0%, 25% { opacity: .5; -moz-transform: translateZ(-500px) translateX(200%) } 75% { opacity: .5; -moz-transform: translateZ(-500px) } 100% { opacity: 1; -moz-transform: translateZ(0) translateX(0) } } @keyframes backSlideIn { 0%, 25% { opacity: .5; transform: translateZ(-500px) translateX(200%) } 75% { opacity: .5; transform: translateZ(-500px) } 100% { opacity: 1; transform: translateZ(0) translateX(0) } } @-webkit-keyframes scaleToFade { to { opacity: 0; -webkit-transform: scale(.8) } } @-moz-keyframes scaleToFade { to { opacity: 0; -moz-transform: scale(.8) } } @keyframes scaleToFade { to { opacity: 0; transform: scale(.8) } } @-webkit-keyframes goDown { from { -webkit-transform: translateY(-100%) } } @-moz-keyframes goDown { from { -moz-transform: translateY(-100%) } } @keyframes goDown { from { transform: translateY(-100%) } } @-webkit-keyframes scaleUpFrom { from { opacity: 0; -webkit-transform: scale(1.5) } } @-moz-keyframes scaleUpFrom { from { opacity: 0; -moz-transform: scale(1.5) } } @keyframes scaleUpFrom { from { opacity: 0; transform: scale(1.5) } } @-webkit-keyframes scaleUpTo { to { opacity: 0; -webkit-transform: scale(1.5) } } @-moz-keyframes scaleUpTo { to { opacity: 0; -moz-transform: scale(1.5) } } @keyframes scaleUpTo { to { opacity: 0; transform: scale(1.5) } } .interactive_bau_cu_my { margin-top: -87px !important; height: 900px !important } .pAuthor { font-family: 'arial'; font-size: 10pt; text-align: Right !important; font-weight: bold; color: #696969 !important; margin-bottom: 0px !important; } p.pSource { font-family: Arial; font-size: 9pt; text-align: Right !important; color: #696969; text-transform: uppercase; font-style: italic; padding-top: 0 !important; } @charset "utf-8"; /* CSS Document */ @media all { #print_page { width: 480px; margin: 0 auto; margin-top: 17px; } .block_col_480 { width: 100%; } .header_right_print { margin: 19px 0 0 0; } .header_right_print a { color: #666; font: 400 11px/15px Arial; padding-left: 20px; margin: 40px 0 0 0; } #detail_page { margin: 20px 0 0 0; padding: 10px 0 0 0; border-top: 1px solid #cccccc; } .header_right_print span { text-decoration: underline; margin: 0 0 0 5px; } #box_details_news .fck_detail table.tplCaption { width: auto; } .blog-excerpt p { margin-bottom: 15px; color: #333333; line-height: 23px; } } .pAuthor { font-family: 'arial'; font-size: 10pt; text-align: Right !important; font-weight: bold; color: #696969 !important; margin-bottom: 0px !important; } p.pSource { font-family: Arial; font-size: 9pt; text-align: Right !important; color: #696969; text-transform: uppercase; font-style: italic; padding-top: 0 !important; } /* ========================================================================== COMPONENT: RIGHT HERO ARTICLE File: _fili-category-hero-v2.css ========================================================================== */ .fili-cat-hero-v2 { display: flex; flex-direction: column; position: relative; height: 100%; } .fili-cat-hero-thumb-v2 { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; margin-bottom: 12px; border-radius: 8px; box-shadow: var(--fili-cat-shadow-md); } .fili-cat-hero-thumb-v2 img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .fili-cat-hero-v2:hover .fili-cat-hero-thumb-v2 img { transform: scale(1.04); } .fili-cat-hero-badge-v2 { position: absolute; bottom: 10px; left: 10px; background: var(--fili-cat-badge-bg, rgba(209, 47, 47, 0.95)); backdrop-filter: blur(4px); color: var(--fili-cat-badge-text, #ffffff); font-size: 12px; font-weight: 500; padding: 3px 8px; border-radius: 4px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); z-index: 2; } .fili-cat-hero-title-v2 { font-family: var(--fili-cat-font-heading); font-size: 20px; font-weight: 800; line-height: 1.35; margin: 0 0 8px 0; } .fili-cat-hero-title-v2 a, .fili-cat-hero-title-v2 a:link, .fili-cat-hero-title-v2 a:visited { color: var(--fili-cat-heading-color, #1a1a1a) !important; text-decoration: none !important; transition: color 0.2s ease; } .fili-cat-hero-title-v2 a:hover, .fili-cat-hero-title-v2 a:focus { color: var(--fili-cat-accent-hover, #A82323) !important; } .fili-cat-hero-excerpt-v2 { font-size: 16px; color: var(--fili-cat-text-muted, #666666); line-height: 1.5; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .fili-cat-section-v2 { --fili-cat-font-body: var(--font-primary, sans-serif); --fili-cat-font-heading: var(--font-heading, sans-serif); --fili-cat-bg: var(--color-bg-body, #ffffff); --fili-cat-accent: var(--color-brand-red, #D12F2F); --fili-cat-accent-hover: var(--color-brand-red-hover, #A82323); --fili-cat-title-bg: var(--color-brand-red, #D12F2F); --fili-cat-title-color: #ffffff; --fili-cat-badge-bg: var(--color-brand-red, #D12F2F); --fili-cat-badge-text: #ffffff; --fili-cat-heading-color: var(--color-text-heading, #111111); --fili-cat-text-muted: var(--color-text-muted, #666666); --fili-cat-border: #e2e8f0; --fili-cat-border-dashed: #cbd5e1; --fili-cat-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05); --fili-cat-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08); background-color: var(--fili-cat-bg); padding: 24px 0; font-family: var(--fili-cat-font-body); } .fili-cat-container-v2 { max-width: 1280px; margin: 0 auto; padding: 0 15px; } /* Grid & Structure */ .fili-cat-grid-v2 { display: grid; grid-template-columns: 1fr; gap: 24px; } @media (min-width: 992px) { .fili-cat-grid-v2 { grid-template-columns: 2fr 1fr; } } .fili-cat-main-content-v2 { display: flex; flex-direction: column; gap: 36px; min-width: 0; } .fili-cat-sidebar { min-width: 0; } .fili-cat-block-v2 { display: flex; flex-direction: column; } .fili-cat-header-v2 { display: flex; align-items: center; margin-bottom: 16px; border-bottom: 1px solid var(--fili-cat-border); padding-bottom: 0; } .fili-cat-accent-v2 { display: none; } .fili-cat-title-v2 { margin: 0; font-family: var(--fili-cat-font-heading); font-size: 18px; font-weight: 400; color: var(--fili-cat-title-color) !important; background-color: var(--fili-cat-title-bg) !important; padding: 6px 14px; display: inline-block; text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.2; transition: background-color 0.2s ease, color 0.2s ease; } .fili-cat-title-v2 a { color: var(--fili-cat-title-color) !important; text-decoration: none !important; transition: color 0.2s ease; } .fili-cat-title-v2:has(a[href]) { cursor: pointer; } .fili-cat-title-v2:has(a[href]):hover { background-color: var(--fili-cat-accent-hover) !important; color: #ffffff !important; } .fili-cat-title-v2:has(a[href]):hover a { color: #ffffff !important; } .fili-cat-content-v2 { display: flex; flex-direction: row; gap: 16px; align-items: stretch; } /* Tablet & Mobile (< 992px): Single column layout */ /* Shift to single column: SWAP position (Hero top, Sublist bottom) */ @media (max-width: 991.98px) { .fili-cat-content-v2 { display: flex; flex-direction: column; gap: 24px; } /* SWAP POSITION for all non-desktop views */ .fili-cat-hero-v2 { order: -1; } .fili-cat-sub-list-v2 { order: 1; } } .fili-cat-hero-v2 { display: flex; flex-direction: column; position: relative; height: 100%; } .fili-cat-hero-thumb-v2 { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; margin-bottom: 12px; border-radius: 8px; box-shadow: var(--fili-cat-shadow-md); } .fili-cat-hero-thumb-v2 img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .fili-cat-hero-v2:hover .fili-cat-hero-thumb-v2 img { transform: scale(1.04); } .fili-cat-hero-badge-v2 { position: absolute; bottom: 10px; left: 10px; background: var(--fili-cat-badge-bg, rgba(209, 47, 47, 0.95)); backdrop-filter: blur(4px); color: var(--fili-cat-badge-text, #ffffff); font-size: 12px; font-weight: 500; padding: 3px 8px; border-radius: 4px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); z-index: 2; } .fili-cat-hero-title-v2 { font-family: var(--fili-cat-font-heading); font-size: 20px; font-weight: 800; line-height: 1.35; margin: 0 0 8px 0; } .fili-cat-hero-title-v2 a, .fili-cat-hero-title-v2 a:link, .fili-cat-hero-title-v2 a:visited { color: var(--fili-cat-heading-color, #1a1a1a) !important; text-decoration: none !important; transition: color 0.2s ease; } .fili-cat-hero-title-v2 a:hover, .fili-cat-hero-title-v2 a:focus { color: var(--fili-cat-accent-hover, #A82323) !important; } .fili-cat-hero-excerpt-v2 { font-size: 16px; color: var(--fili-cat-text-muted, #666666); line-height: 1.5; margin: 0; overflow: hidden; } .fili-cat-sub-list-v2, .fili-cat-compact-list { display: flex; flex-direction: column; height: 100%; justify-content: space-between; } .fili-cat-sub-item-v2, .fili-cat-compact-item { position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--fili-cat-border-dashed, #cbd5e1); border-radius: 6px; transition: background-color 0.2s ease; } .fili-cat-sub-item-v2:last-child, .fili-cat-compact-item:last-child { border-bottom: none; } .fili-cat-sub-item-v2:hover, .fili-cat-compact-item:hover { background-color: #f8fafc; } .fili-cat-sub-thumb-wrapper-v2 { flex-shrink: 0; width: 92px; height: 60px; display: block; overflow: hidden; border-radius: 6px; box-shadow: var(--fili-cat-shadow-sm); z-index: 2; } .fili-cat-sub-thumb-v2 { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block; transition: transform 0.3s ease; } .fili-cat-sub-item-v2:hover .fili-cat-sub-thumb-v2 { transform: scale(1.06); } .fili-cat-sub-info-v2 { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex-grow: 1; } .fili-cat-sub-title-v2 { margin: 0; font-family: var(--fili-cat-font-heading); font-size: 16px; font-weight: 700; line-height: 1.35; } .fili-cat-sub-title-v2 a, .fili-cat-sub-title-v2 a:link, .fili-cat-sub-title-v2 a:visited { color: var(--fili-cat-heading-color, #1a1a1a) !important; text-decoration: none !important; display: block; min-height: 2.6em; transition: color 0.2s ease; } .fili-cat-sub-title-v2 a:hover, .fili-cat-sub-title-v2 a:focus { color: var(--fili-cat-accent-hover, #A82323) !important; } .fili-cat-sub-time-v2 { font-size: 11px; color: var(--fili-cat-text-muted, #666666); font-weight: 500; } .fili-cat-hero-thumb-v2 { border-radius: 6px; box-shadow: none; } .fili-cat-hero-thumb-v2.fili-skel-bone { width: 100%; height: auto; } .fili-cat-hero-title-v2 { font-size: 18px; font-weight: 700; line-height: 1.35; margin-top: 10px; margin-bottom: 6px; } .fili-cat-hero-excerpt-v2 { color: #6c757d; line-height: 1.4; } .fili-cat-sub-item-v2 { gap: 10px; align-items: flex-start; } .fili-cat-sub-thumb-wrapper-v2 { width: 80px; height: 60px; border-radius: 4px; box-shadow: none; } .fili-cat-sub-thumb-v2.fili-skel-bone { min-height: 60px; } .fili-cat-sub-info-v2 { flex: 1; } .fili-cat-sub-title-v2 { font-size: 18px; font-weight: 600; line-height: 1.3; margin: 0 0 4px 0; } .fili-cat-sub-time-v2 { font-size: 12px; color: #8c939d; } /* Ensure equal height stretching on multi-column views */ .fili-cat-hero-v2 { flex: 1; } .fili-cat-sub-list-v2 { flex: 1; gap: 12px; } .fili-cat-section { --fili-cat-font-body: var(--font-primary, sans-serif); --fili-cat-font-heading: var(--font-heading, sans-serif); --fili-cat-bg: var(--color-bg-body, #ffffff); --fili-cat-accent: var(--color-brand-red, #D12F2F); --fili-cat-accent-hover: var(--color-brand-red-hover, #A82323); --fili-cat-title-bg: var(--color-brand-red, #D12F2F); --fili-cat-title-color: #ffffff; --fili-cat-badge-bg: var(--color-brand-red, #D12F2F); --fili-cat-badge-text: var(--color-text-inverse, #ffffff); --fili-cat-heading-color: var(--color-text-heading, #111111); --fili-cat-text-muted: var(--color-text-muted, #666666); --fili-cat-border: var(--color-border, #e2e8f0); --fili-cat-radius-badge: var(--radius-sm, 3px); --fili-cat-radius-thumb: var(--radius-sm, 3px); background-color: var(--fili-cat-bg); margin-top: 40px !important; padding-top: 20px; padding-bottom: 0; clear: both; font-family: var(--fili-cat-font-body); } .fili-cat-container { max-width: 1280px; margin: 0 auto; padding: 0 15px; } .fili-cat-grid { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: start; } @media (min-width: 992px) { .fili-cat-grid { grid-template-columns: 1fr 300px; } } .fili-cat-main-content { display: flex; flex-direction: column; gap: 8px; margin-top: 0; padding-top: 0; height: 100%; } /* Sidebar */ .fili-cat-sidebar { border-left: 1px solid var(--fili-cat-border); padding-left: 20px; margin-top: 0; padding-top: 0; } .fili-cat-sidebar a, .fili-cat-sidebar a:link, .fili-cat-sidebar a:visited { color: var(--fili-cat-heading-color, #111111); text-decoration: none !important; } .fili-cat-sidebar a:hover, .fili-cat-sidebar a:focus { color: var(--fili-cat-accent-hover, #A82323) !important; } .fili-cat-sticky-sidebar { position: sticky; top: 20px; } /* Header */ .fili-cat-header { display: flex; align-items: center; margin-top: 0; margin-bottom: 12px; border-bottom: 1px solid var(--fili-cat-border); padding-bottom: 0; } .fili-cat-accent { display: none; } .fili-cat-title { margin: 0; font-family: var(--fili-cat-font-heading); font-size: 14px; font-weight: 400; color: var(--fili-cat-title-color) !important; background-color: var(--fili-cat-title-bg) !important; padding: 6px 14px; display: inline-block; text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.2; transition: background-color 0.2s ease, color 0.2s ease; } .fili-cat-title a { color: var(--fili-cat-title-color) !important; text-decoration: none !important; transition: color 0.2s ease; } .fili-cat-title:has(a[href]) { cursor: pointer; } .fili-cat-title:has(a[href]):hover { background-color: var(--fili-cat-accent-hover) !important; color: #ffffff !important; } .fili-cat-title:has(a[href]):hover a { color: #ffffff !important; } /* Hero Section Grid */ .fili-cat-hero-grid { display: grid; grid-template-columns: 1fr; gap: 24px; margin-bottom: 14px; } @media (min-width: 768px) { .fili-cat-hero-grid { grid-template-columns: 1fr 1fr; } } .fili-cat-hero { position: relative; margin-top: 0; padding-top: 0; display: flex; flex-direction: column; justify-content: flex-start; } .fili-cat-hero-thumb { position: relative; width: 100%; aspect-ratio: 16 / 9.5; overflow: hidden; margin-top: 0; margin-bottom: 12px; border-radius: var(--fili-cat-radius-thumb); } .fili-cat-hero-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--transition-normal, 0.3s ease); } .fili-cat-hero:hover .fili-cat-hero-thumb img { transform: scale(1.03); } .fili-cat-hero-badge { position: absolute; bottom: 6px; left: 6px; background: var(--fili-cat-badge-bg); color: var(--fili-cat-badge-text); font-size: 12px; font-weight: 500; padding: 2px 6px; border-radius: var(--fili-cat-radius-badge); } .fili-cat-hero-title { font-family: var(--fili-cat-font-heading); font-size: 18px; font-weight: 700; line-height: var(--line-height-heading, 1.35); margin: 0 0 8px 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(1.35em * 2); } .fili-cat-hero-title a, .fili-cat-hero-title a:link, .fili-cat-hero-title a:visited { color: var(--fili-cat-heading-color, #111111) !important; text-decoration: none !important; transition: color 0.2s ease; } .fili-cat-hero:hover .fili-cat-hero-title a, .fili-cat-hero-title a:hover { color: var(--fili-cat-accent-hover, #A82323) !important; } .fili-cat-hero-excerpt { font-size: 16px; color: var(--fili-cat-text-muted); line-height: 1.45; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(1.45em * 3); } /* Shared Sub-Grid Layout (Forces Strict Row-by-Row Alignment) */ .fili-cat-sub-grid { display: grid; grid-template-columns: 1fr; gap: 0 24px; border-top: 1px dashed var(--fili-cat-border); } @media (min-width: 768px) { .fili-cat-sub-grid { grid-template-columns: 1fr 1fr; } } .fili-cat-sub-cell { display: flex; flex-direction: column; } .fili-cat-sub-item { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 13px 0; border-bottom: 1px dashed var(--fili-cat-border); box-sizing: border-box; height: 100%; } @media (min-width: 768px) { .fili-cat-sub-grid .fili-cat-sub-cell:nth-last-child(-n+2) .fili-cat-sub-item { border-bottom: none; } } .fili-cat-sub-thumb-wrapper { flex-shrink: 0; width: 90px; height: 60px; display: block; overflow: hidden; border-radius: var(--fili-cat-radius-thumb); } .fili-cat-sub-thumb { width: 90px !important; height: 60px !important; object-fit: cover !important; display: block; transition: transform 0.2s ease; } .fili-cat-sub-item:hover .fili-cat-sub-thumb { transform: scale(1.05); } .fili-cat-sub-title { margin: 0; font-family: var(--fili-cat-font-heading); font-size: 18px; font-weight: 700; line-height: 1.35; display: block; overflow: visible; } .fili-cat-sub-title a, .fili-cat-sub-title a:link, .fili-cat-sub-title a:visited { color: var(--fili-cat-heading-color, #111111) !important; text-decoration: none !important; transition: color 0.2s ease; } .fili-cat-sub-item:hover .fili-cat-sub-title a, .fili-cat-sub-title a:hover { color: var(--fili-cat-accent-hover, #A82323) !important; } /* Responsive Overrides */ @media (max-width: 991.98px) { .fili-cat-section { margin-top: 24px !important; padding-top: 16px; padding-bottom: 0; } .fili-cat-container { padding-left: 12px; padding-right: 12px; } .fili-cat-grid { gap: 20px; } .fili-cat-sidebar { border-left: none; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: calc(var(--bs-gutter-x) * .5); padding-top: 20px; } } @media (max-width: 767.98px) { .fili-cat-section.container, .fili-cat-container { padding-left: 12px !important; padding-right: 12px !important; } .fili-cat-hero-grid, .fili-cat-sub-grid { gap: 0; } .fili-cat-header { margin-bottom: 10px; } .fili-cat-sub-item { gap: 10px; padding: 10px 0; } .fili-cat-sub-thumb-wrapper, .fili-cat-sub-thumb { width: 80px !important; height: 54px !important; } .fili-cat-sub-grid .fili-cat-sub-cell .fili-cat-sub-item { border-bottom: 1px dashed var(--fili-cat-border); } .fili-cat-sub-grid .fili-cat-sub-cell:last-child .fili-cat-sub-item { border-bottom: none; } } /*@import '_fili-category-macro-v2.css'; @import '_fili-category-macro.css'; @import '_fili-category.css'; @import '_fili-iframe.css'; */ @keyframes fili-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .fili-skel-bone { background: linear-gradient(90deg, #f0f2f5 25%, #e0e4e9 37%, #f0f2f5 63%); background-size: 200% 100%; animation: fili-shimmer 1.4s infinite ease-in-out; border-radius: 4px; display: block; } /* Skeleton Lines */ .fili-skel-line { height: 14px; margin-bottom: 6px; width: 100%; } .fili-skel-line.w-75 { width: 75%; } .fili-skel-line.w-60 { width: 60%; } .fili-skel-line.w-50 { width: 50%; } .fili-skel-line.w-40 { width: 40%; } .fili-skel-line.w-30 { width: 30%; } .fili-skel-hero-title { height: 22px; margin-top: 12px; margin-bottom: 8px; } /* ========================================================================== COMPONENT: LEFT SUB-LIST ARTICLES File: _fili-category-sublist-v2.css ========================================================================== */ .fili-cat-sub-list-v2, .fili-cat-compact-list { display: flex; flex-direction: column; height: 100%; justify-content: space-between; } .fili-cat-sub-item-v2, .fili-cat-compact-item { position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 0px; border-bottom: 1px dashed var(--fili-cat-border-dashed, #cbd5e1); border-radius: 6px; transition: background-color 0.2s ease; } .fili-cat-sub-item-v2:last-child, .fili-cat-compact-item:last-child { border-bottom: none; } .fili-cat-sub-item-v2:hover, .fili-cat-compact-item:hover { background-color: #f8fafc; } .fili-cat-sub-thumb-wrapper-v2 { flex-shrink: 0; width: 92px; height: 60px; display: block; overflow: hidden; border-radius: 6px; box-shadow: var(--fili-cat-shadow-sm); z-index: 2; } .fili-cat-sub-thumb-v2 { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block; transition: transform 0.3s ease; } .fili-cat-sub-item-v2:hover .fili-cat-sub-thumb-v2 { transform: scale(1.06); } .fili-cat-sub-info-v2 { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex-grow: 1; } .fili-cat-sub-title-v2 { margin: 0; font-family: var(--fili-cat-font-heading); font-size: 16px; font-weight: 700; line-height: 1.35; } .fili-cat-sub-title-v2 a, .fili-cat-sub-title-v2 a:link, .fili-cat-sub-title-v2 a:visited { color: var(--fili-cat-heading-color, #1a1a1a) !important; text-decoration: none !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color 0.2s ease; } .fili-cat-sub-title-v2 a:hover, .fili-cat-sub-title-v2 a:focus { color: var(--fili-cat-accent-hover, #A82323) !important; } .fili-cat-sub-time-v2 { font-size: 11px; color: var(--fili-cat-text-muted, #666666); font-weight: 500; } :root { --fili-brand-red: #D12F2F; --fili-brand-red-hover: #A82323; --fili-text-dark: #111827; --fili-text-body: #374151; --fili-text-muted: #6b7280; --fili-border-color: #e5e7eb; } .category-page-wrapper { --fili-brand-red: var(--color-brand-red, #D12F2F); --fili-brand-red-hover: var(--color-brand-red-hover, #A82323); --fili-text-dark: #111827; --fili-text-body: #374151; --fili-text-muted: #6b7280; --fili-border-color: #e5e7eb; font-family: Roboto, sans-serif; color: var(--fili-text-body); } .category-page-wrapper .category-header-wrapper { position: relative; padding-bottom: 12px; margin-bottom: 24px; border-bottom: 2px solid var(--fili-border-color); background: transparent !important; box-shadow: none !important; } .category-page-wrapper .category-header-wrapper::after { content: ""; position: absolute; bottom: -2px; left: 0; width: 60px; height: 2px; background-color: var(--fili-brand-red); } /* Universal Breadcrumb Navigation Trail (Works globally in all views) */ .cat-breadcrumb-trail { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 0.85rem; margin-bottom: 8px; color: var(--fili-text-muted, #6b7280); } .cat-breadcrumb-trail a.cat-bc-link { color: var(--fili-text-muted, #6b7280) !important; text-decoration: none !important; font-weight: 500; transition: color 0.2s ease; } .cat-breadcrumb-trail a.cat-bc-link:hover { color: var(--fili-brand-red-hover, #A82323) !important; } .cat-breadcrumb-trail .cat-bc-sep { font-size: 0.65rem; color: #9ca3af; } .cat-breadcrumb-trail .cat-bc-current { color: var(--fili-brand-red, #D12F2F); font-weight: 600; } /* Main Heading Title */ .category-page-wrapper h1.category-page-title-text { font-size: 1.75rem; font-weight: 800; color: var(--fili-text-dark); margin: 0; padding: 0; line-height: 1.2; letter-spacing: -0.02em; text-transform: uppercase; } /* -------------------------------------------------------------------------- 2. Article Cards Styling -------------------------------------------------------------------------- */ .category-page-wrapper .search-card-item { background: #ffffff; padding: 20px 0; border-bottom: 1px solid var(--fili-border-color); } .category-page-wrapper .search-card-item:last-child { border-bottom: none; } .category-page-wrapper .contentView { display: flex; gap: 20px; align-items: flex-start; } .category-page-wrapper .search-card-thumb { width: 220px; height: 140px; flex-shrink: 0; overflow: hidden; border-radius: 6px; background-color: #f3f4f6; } .category-page-wrapper .search-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; } .category-page-wrapper .search-card-item:hover .search-card-thumb img { transform: scale(1.05); } .category-page-wrapper .search-card-title { font-size: 1.15rem; font-weight: 700; line-height: 1.4; margin-bottom: 6px; } .category-page-wrapper .search-card-title a, .category-page-wrapper .search-card-title a:link, .category-page-wrapper .search-card-title a:visited { color: var(--fili-text-dark) !important; text-decoration: none !important; } .category-page-wrapper .search-card-title a:hover { color: var(--fili-brand-red-hover) !important; } .category-page-wrapper .search-card-meta { font-size: 12px; color: var(--fili-text-muted); margin-bottom: 8px; } .category-page-wrapper .search-card-meta i { color: var(--fili-brand-red); } .category-page-wrapper .search-result-body { font-size: 0.925rem; line-height: 1.5; color: var(--fili-text-body); overflow: hidden; } @media (max-width: 768px) { .category-page-wrapper h1.category-page-title-text { font-size: 1.35rem; } .category-page-wrapper .contentView { flex-direction: column; gap: 12px; } .category-page-wrapper .search-card-thumb { width: 100%; height: 180px; } } .fili-iframe-tabs-block { --fili-s3-font-body: var(--font-primary); --fili-s3-font-heading: var(--font-heading); --fili-s3-primary: var(--color-brand-red, #D12F2F); --fili-s3-primary-hover: var(--color-brand-red-hover, #A82323); --fili-s3-surface-deep: var(--color-bg-subtle, #f8fafc); --fili-s3-surface-header: #f1f5f9; --fili-s3-card-bg: #ffffff; --fili-s3-text-main: var(--color-text-heading, #0f172a); --fili-s3-text-muted: var(--color-text-muted, #666666); --fili-s3-border: var(--color-border, #e2e8f0); --fili-s3-radius-card: var(--radius-lg, 8px); --fili-s3-shadow-sm: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.05)); margin-top: 24px; background: var(--fili-s3-card-bg); box-shadow: var(--fili-s3-shadow-sm); overflow: hidden; font-family: var(--fili-s3-font-body); } .fili-iframe-tabs-container { width: 100%; } .fili-iframe-tabs-block .iframe-board-tabs { display: flex; width: 100%; flex-shrink: 0; padding: 0; margin: 0; background: var(--fili-s3-surface-deep); border-bottom: 1px solid var(--fili-s3-border); position: relative; z-index: 1; gap: 0; } .fili-iframe-tabs-block .iframe-board-tabs .tab-btn { flex: 1 1 0%; min-width: 0; position: relative; z-index: 1; background: var(--fili-s3-surface-deep); border: none; border-right: 1px solid var(--fili-s3-border); border-bottom: 1px solid var(--fili-s3-border); border-radius: 0; font-family: var(--fili-s3-font-heading); font-size: 11px; font-weight: 700; color: var(--fili-s3-text-muted); cursor: pointer; padding: 9px 4px; margin-bottom: -1px; transition: all var(--transition-fast, 0.2s ease); text-align: center; text-transform: uppercase; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; outline: none; } .fili-iframe-tabs-block .iframe-board-tabs .tab-btn:last-child { border-right: none; } .fili-iframe-tabs-block .iframe-board-tabs .tab-btn:hover { color: var(--fili-s3-text-main); background: rgba(0, 0, 0, 0.04); z-index: 2; } .fili-iframe-tabs-block .iframe-board-tabs .tab-btn.active { z-index: 3; background: var(--fili-s3-surface-header); color: var(--fili-s3-primary); border-bottom: 1px solid var(--fili-s3-surface-header); border-top: 2px solid var(--fili-s3-primary); font-weight: 800; } .fili-iframe-tabs-block .iframe-tab-content { padding: 0; background-color: var(--fili-s3-card-bg); } .fili-iframe-tabs-block .iframe-tab-pane { display: none; width: 100%; height: 350px; } .fili-iframe-tabs-block .iframe-tab-pane.active { display: block; } .fili-iframe-tabs-block .fili-sidebar-iframe { width: 100%; height: 100%; border: 0; display: block; } .fili-iframe-tabs-block .iframe-board-footer { flex-shrink: 0; background: var(--fili-s3-card-bg); padding: 8px 12px; font-size: 11px; text-align: right; color: var(--fili-s3-text-muted); border-left: 1px solid var(--fili-s3-border); border-right: 1px solid var(--fili-s3-border); border-bottom: 1px solid var(--fili-s3-border); border-radius: 0 0 var(--fili-s3-radius-card, 8px) var(--fili-s3-radius-card, 8px); } .fili-iframe-tabs-block .iframe-board-footer a { color: var(--fili-s3-primary); text-decoration: none; font-weight: 700; transition: color var(--transition-fast, 0.2s ease); } .fili-iframe-tabs-block .iframe-board-footer a:hover { color: var(--fili-s3-primary-hover); text-decoration: underline; } .fili-cat-sub-item-v2 { display: flex; gap: 10px; align-items: flex-start; } .fili-cat-sub-thumb-wrapper-v2 { width: 80px; height: 60px; flex-shrink: 0; border-radius: 4px; overflow: hidden; } .fili-cat-sub-thumb-v2 { width: 100%; height: 100%; object-fit: cover; } .fili-cat-sub-thumb-v2.fili-skel-bone { min-height: 60px; } .fili-cat-sub-info-v2 { flex: 1; display: flex; flex-direction: column; } .fili-cat-sub-title-v2 { font-size: 18px; font-weight: 600; line-height: 1.3; margin: 0 0 4px 0; } .fili-cat-sub-time-v2 { font-size: 12px; color: #8c939d; } .fili-cat-content-v2 { display: flex; gap: 16px; } .fili-cat-sub-list-v2 { flex: 1; display: flex; flex-direction: column; gap: 12px; } .fili-cat-hero-v2 { flex: 1; display: flex; flex-direction: column; } .fili-cat-hero-thumb-v2 { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; } .fili-cat-hero-thumb-v2 img { width: 100%; height: 100%; object-fit: cover; } .fili-cat-hero-thumb-v2.fili-skel-bone { width: 100%; height: auto; } .fili-cat-hero-title-v2 { font-size: 18px; font-weight: 700; line-height: 1.35; margin-top: 10px; margin-bottom: 6px; } .fili-cat-hero-excerpt-v2 { font-size: 16px; color: #6c757d; line-height: 1.4; } @import '_fili-channel-skeleton.css'; @import '_fili-channel-default.css'; @import '_fili-channel-compact.css'; @import '_fili-iframe.css'; @keyframes fili-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .fili-skel-bone { background: linear-gradient(90deg, #f0f2f5 25%, #e0e4e9 37%, #f0f2f5 63%); background-size: 200% 100%; animation: fili-shimmer 1.4s infinite ease-in-out; border-radius: 4px; display: block; } /* Skeleton Lines */ .fili-skel-line { height: 14px; margin-bottom: 6px; width: 100%; } .fili-skel-line.w-75 { width: 75%; } .fili-skel-line.w-60 { width: 60%; } .fili-skel-line.w-50 { width: 50%; } .fili-skel-line.w-40 { width: 40%; } .fili-skel-line.w-30 { width: 30%; } .fili-skel-hero-title { height: 22px; margin-top: 12px; margin-bottom: 8px; } .fili-iframe-tabs-block { --fili-s3-font-body: var(--font-primary); --fili-s3-font-heading: var(--font-heading); --fili-s3-primary: var(--color-brand-red, #D12F2F); --fili-s3-primary-hover: var(--color-brand-red-hover, #A82323); --fili-s3-surface-deep: var(--color-bg-subtle, #f8fafc); --fili-s3-surface-header: #f1f5f9; --fili-s3-card-bg: #ffffff; --fili-s3-text-main: var(--color-text-heading, #0f172a); --fili-s3-text-muted: var(--color-text-muted, #666666); --fili-s3-border: var(--color-border, #e2e8f0); --fili-s3-radius-card: var(--radius-lg, 8px); --fili-s3-shadow-sm: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.05)); margin-top: 24px; background: var(--fili-s3-card-bg); border: 1px solid var(--fili-s3-border); border-radius: var(--fili-s3-radius-card); box-shadow: var(--fili-s3-shadow-sm); overflow: hidden; font-family: var(--fili-s3-font-body); } .fili-iframe-tabs-container { width: 100%; } .fili-iframe-tabs-block .iframe-board-tabs { display: flex; width: 100%; flex-shrink: 0; padding: 0; margin: 0; background: var(--fili-s3-surface-deep); border-bottom: 1px solid var(--fili-s3-border); position: relative; z-index: 1; gap: 0; } .fili-iframe-tabs-block .iframe-board-tabs .tab-btn { flex: 1 1 0%; min-width: 0; position: relative; z-index: 1; background: var(--fili-s3-surface-deep); border: none; border-right: 1px solid var(--fili-s3-border); border-bottom: 1px solid var(--fili-s3-border); border-radius: 0; font-family: var(--fili-s3-font-heading); font-size: 11px; font-weight: 700; color: var(--fili-s3-text-muted); cursor: pointer; padding: 9px 4px; margin-bottom: -1px; transition: all var(--transition-fast, 0.2s ease); text-align: center; text-transform: uppercase; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; outline: none; } .fili-iframe-tabs-block .iframe-board-tabs .tab-btn:last-child { border-right: none; } .fili-iframe-tabs-block .iframe-board-tabs .tab-btn:hover { color: var(--fili-s3-text-main); background: rgba(0, 0, 0, 0.04); z-index: 2; } .fili-iframe-tabs-block .iframe-board-tabs .tab-btn.active { z-index: 3; background: var(--fili-s3-surface-header); color: var(--fili-s3-primary); border-bottom: 1px solid var(--fili-s3-surface-header); border-top: 2px solid var(--fili-s3-primary); font-weight: 800; } .fili-iframe-tabs-block .iframe-tab-content { padding: 0; background-color: var(--fili-s3-card-bg); } .fili-iframe-tabs-block .iframe-tab-pane { display: none; width: 100%; height: 350px; } .fili-iframe-tabs-block .iframe-tab-pane.active { display: block; } .fili-iframe-tabs-block .fili-sidebar-iframe { width: 100%; height: 100%; border: 0; display: block; } .fili-hero-carousel { --fili-feat-accent-red: var(--color-brand-red, #D12F2F); --fili-feat-accent-hover: var(--color-brand-red-hover, #A82323); --fili-feat-accent-bright: #ff4d4d; height: var(--fili-feat-card-height, 420px); border-radius: var(--fili-feat-radius-lg, 8px); overflow: hidden; position: relative; background-color: var(--fili-feat-dark-text, #17222b); box-shadow: var(--fili-feat-shadow-md, 0 4px 16px rgba(0, 0, 0, 0.15)); } .fili-hero-card { position: relative; height: 100%; width: 100%; background-size: cover; background-position: center; color: var(--color-text-inverse, #ffffff); display: flex; flex-direction: column; justify-content: space-between; padding: 20px; isolation: isolate; } .fili-hero-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(23, 34, 43, 0.2) 0%, rgba(23, 34, 43, 0.92) 100%); transition: background 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .fili-hero-card:hover .fili-hero-overlay { background: linear-gradient(180deg, rgba(23, 34, 43, 0.3) 0%, rgba(23, 34, 43, 0.98) 100%); } .fili-badge-tag { display: inline-block; border: 1px solid rgba(255, 255, 255, 0.3); color: var(--color-text-inverse, #ffffff) !important; background: rgba(15, 23, 42, 0.65); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 4px 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; border-radius: var(--fili-feat-radius-sm, 4px); text-transform: uppercase; text-decoration: none; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .fili-badge-tag:hover { background-color: var(--fili-feat-accent-red, #D12F2F); border-color: var(--fili-feat-accent-red, #D12F2F); color: #ffffff !important; } .fili-counter-badge { background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.2); color: #ffffff; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 12px; } .fili-hero-content { position: static; z-index: 2; } .fili-hero-title { font-family: var(--fili-feat-font-heading, sans-serif); font-size: 25px; line-height: var(--line-height-heading, 1.35); font-weight: 700; margin: 0; } .fili-hero-title a { color: #ffffff !important; text-decoration: none; transition: color 0.2s ease; } .fili-hero-card:hover .fili-hero-title a, .fili-hero-title a:hover { color: var(--fili-feat-accent-bright, #ff4d4d) !important; } .fili-hero-summary { color: rgba(255, 255, 255, 0.9) !important; font-size: 16px; line-height: 1.45; margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .fili-meta-category { color: var(--fili-feat-accent-bright, #ff4d4d) !important; font-weight: 700; font-size: 12px; text-decoration: none; transition: color 0.2s ease; } .fili-meta-category:hover { color: #ffffff !important; } .fili-meta-date { color: rgba(255, 255, 255, 0.75) !important; font-size: 11.5px; } /* Controls & Indicators */ .fili-carousel-btn { width: 44px; opacity: 0; z-index: 4; transition: opacity 0.3s ease; } .fili-carousel-btn:focus, .fili-carousel-btn:active { opacity: 0; outline: none; box-shadow: none; } .fili-hero-carousel:hover .fili-carousel-btn, .fili-hero-carousel:hover .fili-carousel-btn:focus, .fili-hero-carousel:hover .fili-carousel-btn:active { opacity: 1; } .fili-btn-icon { width: 32px; height: 32px; background-color: rgba(23, 34, 43, 0.7); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50%; color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 12px; transition: background-color 0.2s ease, transform 0.2s ease; } .fili-carousel-btn:hover .fili-btn-icon { background-color: var(--fili-feat-accent-red, #D12F2F); transform: scale(1.1); } .fili-hero-carousel .carousel-indicators { z-index: 4; } .fili-hero-carousel .carousel-indicators [data-bs-target] { width: 8px; height: 8px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.5); border: none; margin: 0 3px; transition: all 0.3s ease; } .fili-hero-carousel .carousel-indicators .active { width: 20px; border-radius: 4px; background-color: var(--fili-feat-accent-red, #D12F2F); } /*@import "_fili-featured-hero.css"; @import "_fili-featured-ranked.css"; @import "_fili-featured-side.css";*/ .fili-featured-news { /* Dimensions */ --fili-feat-card-height: 425px; /* Fonts */ --fili-feat-font-body: var(--font-primary, sans-serif); --fili-feat-font-heading: var(--font-heading, sans-serif); /* Brand & Accent Red Colors (Purged Blue Tokens) */ --fili-feat-accent-red: var(--color-brand-red, #D12F2F); --fili-feat-accent-hover: var(--color-brand-red-hover, #A82323); --fili-feat-accent-bright: #ff4d4d; /* High contrast red for dark cards */ --fili-feat-accent-orange: #fc4a00; /* Fallback alias to protect legacy references */ --fili-feat-accent-blue: var(--fili-feat-accent-red); /* Typography & Surfaces */ --fili-feat-dark-text: var(--color-brand-primary, #17222B); --fili-feat-heading-color: var(--color-text-heading, #1a1a1a); --fili-feat-muted-text: var(--color-text-muted, #666666); /* Backgrounds & Borders */ --fili-feat-card-bg: var(--color-bg-body, #ffffff); --fili-feat-border-color: var(--color-border, #e2e8f0); /* Radii & Shadows */ --fili-feat-radius-sm: var(--radius-sm, 6px); --fili-feat-radius-lg: var(--radius-md, 8px); --fili-feat-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05); --fili-feat-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08); position: relative; font-family: var(--fili-feat-font-body); } .fili-featured-row { --bs-gutter-x: 1rem; } .fili-meta { position: relative; z-index: 2; display: flex; align-items: center; margin-top: 6px; margin-bottom: 8px; padding-left: 0; /* Adjusted to align flush with title & summary */ } .fili-meta-category, .cat-bc-link { font-size: 11px; font-weight: 500; color: var(--fili-feat-accent-red, #D12F2F) !important; text-transform: uppercase; text-decoration: none; line-height: 1; margin-left: 0; padding-left: 0; transition: color 0.2s ease; } .fili-meta-category:hover, .cat-bc-link:hover { color: var(--fili-feat-accent-hover, #A82323) !important; } .fili-hero-card .fili-meta-category, .fili-hero-card .cat-bc-link { color: var(--fili-feat-accent-bright, #ff4d4d) !important; } .fili-hero-card .fili-meta-category:hover, .fili-hero-card .cat-bc-link:hover { color: #ffffff !important; } .fili-meta-date { font-size: 12px; color: var(--fili-feat-muted-text); position: relative; line-height: 1; } .fili-hero-card .fili-meta-date { color: rgba(255, 255, 255, 0.7); } .fili-meta-small { /* font-size: 10px;*/ font-weight: 700; color: var(--fili-feat-muted-text); text-transform: uppercase; } .fili-category-text { color: var(--fili-feat-accent-red, #D12F2F); } /* Tablet Viewport (<= 991.98px) */ @media (max-width: 991.98px) { #fili-featured-news.container { padding-left: 12px !important; padding-right: 12px !important; } .fili-featured-news { --fili-feat-card-height: auto; } .fili-hero-carousel { height: 380px; } .fili-ranked-scroll-wrapper, .fili-side-card { height: auto; max-height: none; } .fili-side-img-wrapper { height: 240px; } } /* Mobile Viewport (<= 767.98px) */ @media (max-width: 767.98px) { #fili-featured-news.container { padding-left: 12px !important; padding-right: 12px !important; } .fili-featured-row { --bs-gutter-x: 0.75rem; } .fili-hero-carousel { height: 320px; } .fili-hero-title { font-size: 20px; } .fili-hero-summary { font-size: 14px; -webkit-line-clamp: 2; } .fili-side-img-wrapper { height: 200px; } } .fili-ranked-scroll-wrapper { width: 100%; height: var(--fili-feat-card-height, 425px); max-height: var(--fili-feat-card-height, 425px); overflow-y: auto; padding: 0 6px 0 0; margin: 0; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; } .fili-ranked-scroll-wrapper::-webkit-scrollbar { width: 4px; } .fili-ranked-scroll-wrapper::-webkit-scrollbar-track { background: transparent; } .fili-ranked-scroll-wrapper::-webkit-scrollbar-thumb { background: var(--fili-feat-border-color, #cbd5e1); border-radius: 4px; } .fili-ranked-scroll-wrapper::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted, #94a3b8); } .fili-ranked-item { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; border-bottom: 1px dashed var(--fili-feat-border-color, #e2e8f0); transition: background-color var(--transition-fast, 0.2s ease); } .fili-ranked-item:first-child { padding-top: 0; } .fili-ranked-item:last-child { padding-bottom: 0; border-bottom: none; } .fili-ranked-item:hover { background-color: var(--color-bg-subtle, #f8fafc); } .fili-thumb-wrap { border-radius: 4px; overflow: hidden; height: 64px; width: 96px; flex-shrink: 0; box-shadow: var(--fili-feat-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.05)); background-color: var(--color-bg-subtle, #f8fafc); } .fili-thumb-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .fili-ranked-item:hover .fili-thumb-img { transform: scale(1.05); } .fili-ranked-content { flex: 1; min-width: 0; } .fili-meta-small { margin-bottom: 3px; line-height: 1; } .fili-category-text { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--color-brand-red, #D12F2F); letter-spacing: 0.3px; text-decoration: none; transition: color 0.2s ease; } a.fili-category-text:hover { color: var(--color-brand-red-dark, #991b1b); text-decoration: underline; } a.fili-category-text:focus-visible { outline: 2px solid var(--color-brand-red, #D12F2F); outline-offset: 2px; border-radius: 2px; } .fili-ranked-item-title { font-family: var(--fili-feat-font-heading, var(--font-heading, sans-serif)); font-size: 16px; font-weight: 700; line-height: 1.35; margin: 0; } .fili-ranked-item-title a { color: var(--fili-feat-heading-color, var(--color-text-heading, #1e293b)); text-decoration: none; display: block; min-height: 2.7em; transition: color 0.2s ease; } .fili-ranked-item:hover .fili-ranked-item-title a, .fili-ranked-item-title a:hover { color: var(--color-brand-red, #D12F2F); } .fili-side-card { background: transparent; border: none; box-shadow: none; border-radius: 0; height: 100%; width: 100%; display: flex; flex-direction: column; overflow: hidden; padding: 0; } .fili-side-img-wrapper { position: relative; width: 100%; height: 190px; flex-shrink: 0; overflow: hidden; border-radius: var(--fili-feat-radius-sm, 6px); } .fili-side-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .fili-side-card:hover .fili-side-img { transform: scale(1.05); } .fili-badge-flash { position: absolute; top: 10px; left: 10px; width: 28px; height: 28px; background-color: var(--color-brand-red, #D12F2F); color: #ffffff; border: 2px solid #ffffff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; z-index: 2; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); } .fili-side-card-body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } .fili-side-primary-item { display: flex; flex-direction: column; } /* Metadata Bar & Category Tag Hit Targets */ .fili-meta { display: flex; align-items: center; gap: 8px; font-size: 11px; margin-bottom: 6px; line-height: 1; } .fili-meta-category { display: inline-block; font-weight: 700; font-size: 11px; text-transform: uppercase; color: var(--color-brand-red, #D12F2F); text-decoration: none; letter-spacing: 0.3px; padding: 2px 0; transition: color 0.2s ease, text-decoration 0.2s ease; } a.fili-meta-category:hover { color: var(--color-brand-red-dark, #991b1b); text-decoration: underline; } a.fili-meta-category:focus-visible { outline: 2px solid var(--color-brand-red, #D12F2F); outline-offset: 2px; border-radius: 2px; } .fili-meta-date { color: var(--fili-feat-muted-text, #64748b); font-size: 11px; } /* Primary Article Title */ .fili-side-title { font-family: var(--fili-feat-font-heading, var(--font-heading, sans-serif)); font-size: 16px; font-weight: 700; line-height: 1.4; margin: 0 0 8px 0; } .fili-side-title a { color: var(--fili-feat-heading-color, var(--color-text-heading, #0f172a)); text-decoration: none; overflow: hidden; transition: color 0.2s ease; } .fili-side-title a:hover { color: var(--color-brand-red, #D12F2F); } .fili-side-summary { color: var(--fili-feat-muted-text, #64748b); font-size: 16px; line-height: 1.45; margin-bottom: 12px; overflow: hidden; } /* Secondary Article Section */ .fili-side-secondary-item { margin-top: auto; border-top: 1px dashed var(--fili-feat-border-color, #e2e8f0); flex-shrink: 0; } .fili-side-secondary-title { font-family: var(--fili-feat-font-heading, var(--font-heading, sans-serif)); font-size: 16px; font-weight: 600; line-height: 1.4; margin: 0; } .fili-side-secondary-title a { color: var(--fili-feat-heading-color, var(--color-text-heading, #0f172a)); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color 0.2s ease; } .fili-side-secondary-title a:hover { color: var(--color-brand-red, #D12F2F); } body.no-scroll { overflow: hidden !important; } .fili-lightbox { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #000000; z-index: 999999; display: flex; align-items: center; justify-content: center; } .fili-lightbox-close { position: absolute; top: 15px; right: 20px; background: transparent; border: none; color: #ffffff; font-size: 36px; cursor: pointer; z-index: 1000000; line-height: 1; } .fili-lightbox-container { display: flex; width: 100%; height: 100%; } .fili-lightbox-main { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; background-color: #000000; padding: 20px; } .fili-lightbox-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; max-width: 90%; max-height: 90vh; } #fili-lightbox-img { max-width: 100%; max-height: 75vh; object-fit: contain; box-shadow: 0 4px 20px rgba(0,0,0,0.5); } .fili-lightbox-caption { color: #d1d5db; font-size: 0.9rem; margin-top: 12px; text-align: center; max-width: 800px; } .fili-lightbox-counter { color: #9ca3af; font-size: 0.8rem; margin-top: 6px; } .fili-lightbox-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.4); color: #ffffff; border: none; font-size: 28px; padding: 16px 12px; cursor: pointer; z-index: 10; transition: background 0.2s; } .fili-lightbox-arrow:hover { background: rgba(255,255,255,0.2); } .fili-lightbox-arrow.fili-prev { left: 15px; } .fili-lightbox-arrow.fili-next { right: 15px; } /* Right Sidebar Metadata Panel */ .fili-lightbox-sidebar { width: 320px; background-color: #18181b; border-left: 1px solid #27272a; padding: 40px 24px; color: #ffffff; display: flex; flex-direction: column; } .fili-lightbox-meta-date { font-size: 0.825rem; color: #a1a1aa; margin-bottom: 12px; } .fili-lightbox-meta-title { font-size: 1.15rem; font-weight: 700; line-height: 1.4; color: #f4f4f5; margin-bottom: 20px; } .fili-lightbox-meta-source { font-size: 0.8rem; color: #71717a; letter-spacing: 0.05em; margin-top: auto; } @media (max-width: 991px) { .fili-lightbox-container { flex-direction: column; } .fili-lightbox-sidebar { width: 100%; height: auto; padding: 16px; } } /* Quiz Outer Table Styling */ .fili-content-view table.quizz, .fili-content-view table.img-content.quizz { width: 100% !important; margin: 24px 0 !important; border-collapse: separate !important; border-spacing: 0 !important; border: 1px solid var(--fili-sf-border, #e2e8f0); border-radius: 12px; background: #ffffff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03); overflow: hidden; } .fili-content-view table.quizz td.pCaption { padding: 16px 20px; font-size: 1.05rem; font-weight: 700; color: var(--fili-sf-text-heading, #111827); border-bottom: 1px solid var(--fili-sf-border, #e2e8f0); background-color: var(--fili-sf-bg-surface, #f8fafc); } .fili-content-view table.quizz td.pCaption h3 { font-size: 1.1rem; margin: 0; font-weight: 700; } /* Option List Container */ .fili-content-view table.quizz tr > td > ul { margin: 16px !important; padding: 0 !important; list-style: none !important; counter-reset: quiz-option; } /* Default Option Item */ .fili-content-view table.quizz:not(.quiz-info-card) ul li { counter-increment: quiz-option; display: flex; flex-direction: column; position: relative; width: 100%; margin-bottom: 10px; padding: 12px 16px 12px 52px; background-color: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; cursor: pointer; font-weight: 500; font-size: 0.975rem; color: #334155; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); box-sizing: border-box; } /* ANTI-SPOILER RULE: Hide font-weight spoilers on or tags before choice */ .fili-content-view table.quizz:not(.answered) ul li strong, .fili-content-view table.quizz:not(.answered) ul li b { font-weight: 500 !important; color: inherit !important; } /* Letter Badge (A, B, C, D) */ .fili-content-view table.quizz:not(.quiz-info-card) ul li::before { content: counter(quiz-option, upper-latin); position: absolute; left: 14px; top: 10px; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background-color: #cbd5e1; color: #334155; font-weight: 700; font-size: 0.8rem; transition: all 0.2s ease; } /* Hover Effect (Before Answered) */ .fili-content-view table.quizz:not(.answered):not(.quiz-info-card) ul li:hover { background-color: #f1f5f9; border-color: var(--fili-sf-brand-red, #D12F2F); transform: translateX(4px); } .fili-content-view table.quizz:not(.answered):not(.quiz-info-card) ul li:hover::before { background-color: var(--fili-sf-brand-red, #D12F2F); color: #ffffff; } /* Answered States */ .fili-content-view table.quizz.answered ul li { cursor: default; opacity: 0.6; } /* Correct Choice */ .fili-content-view table.quizz.answered ul li.correct { opacity: 1 !important; background-color: #f0fdf4 !important; color: #166534 !important; border-color: #86efac !important; } .fili-content-view table.quizz.answered ul li.correct strong, .fili-content-view table.quizz.answered ul li.correct b { font-weight: 700 !important; } .fili-content-view table.quizz.answered ul li.correct::before { background-color: #22c55e !important; color: #ffffff !important; } /* Wrong Choice (Selected by user) */ .fili-content-view table.quizz.answered ul li.selected:not(.correct) { opacity: 1 !important; background-color: #fef2f2 !important; color: #991b1b !important; border-color: #fca5a5 !important; } .fili-content-view table.quizz.answered ul li.selected:not(.correct)::before { background-color: #ef4444 !important; color: #ffffff !important; } /* Answer Explanation */ .fili-content-view table.quizz ul li p.explaination { display: block !important; margin-top: 10px !important; padding: 10px 14px !important; background-color: rgba(255, 255, 255, 0.85); border-left: 3px solid var(--fili-sf-brand-red, #D12F2F); border-radius: 4px; font-size: 0.9rem; font-style: italic; font-weight: 400; color: #334155 !important; line-height: 1.5; } /* Info Card Items */ .fili-content-view table.quizz.quiz-info-card ul li.is-info-item { padding: 12px 16px !important; background-color: #f8fafc !important; border: 1px solid #e2e8f0 !important; border-left: 4px solid var(--fili-sf-brand-red, #D12F2F) !important; border-radius: 6px !important; cursor: default !important; margin-bottom: 10px; font-weight: 400 !important; opacity: 1 !important; } .fili-content-view table.quizz.quiz-info-card ul li.is-info-item::before { display: none !important; } .fili-content-view .quizz-result { margin-top: 32px !important; padding: 24px !important; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; text-align: center; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); } .fili-content-view .quizz-result-title { font-family: var(--fili-sf-font-heading, sans-serif); font-size: 1.1rem; font-weight: 700; color: var(--fili-sf-brand-red, #D12F2F); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; } .fili-content-view .quizz-result .message { display: block; font-size: 1rem; color: #475569; margin-bottom: 12px; } .fili-content-view .quizz-result .score-display { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 2rem; font-weight: 800; } .fili-content-view .quizz-result .score-display .correct { color: #22c55e; } .fili-content-view .quizz-result .score-display .correct::after { content: " /"; color: #94a3b8; font-weight: 400; } .fili-content-view .quizz-result .score-display .total { color: var(--fili-sf-brand-red, #D12F2F); } #baoloiModal .modal-content { border: none; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); overflow: hidden; } #baoloiModal .modal-header { border-bottom: 1px solid #e9ecef; padding: 1rem 1.25rem; background-color: #ffffff; } #baoloiModal .modal-body { padding: 1.25rem !important; } /* Form Controls & Labels */ #form-baoloi .form-label { font-weight: 600; font-size: 0.875rem; color: #212529; margin-bottom: 0.4rem; } #form-baoloi .form-control { border-radius: 6px; border: 1px solid #ced4da; padding: 0.55rem 0.75rem; font-size: 0.9rem; transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; } #form-baoloi .form-control:focus { border-color: #0d6efd; box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15); } #form-baoloi textarea.form-control { resize: vertical; min-height: 90px; } /* Submit Button */ #form-baoloi .btn-primary { border-radius: 6px; font-size: 0.95rem; transition: background-color 0.2s ease, transform 0.1s ease; } #form-baoloi .btn-primary:active { transform: translateY(1px); } /* reCAPTCHA v2 Alignment */ #form-baoloi .g-recaptcha { display: flex; justify-content: center; width: 100%; min-height: 78px; } /* reCAPTCHA v3 Legal Text */ #form-baoloi .text-muted.small { font-size: 0.78rem; line-height: 1.4; color: #6c757d; } #form-baoloi .text-muted.small a { color: #0d6efd; text-decoration: none; } #form-baoloi .text-muted.small a:hover { text-decoration: underline; } /* Hide Floating Badge for v3 */ .grecaptcha-badge { visibility: hidden !important; } /*@import '_fili-short-form-content.css'; @import '_fili-long-form-content.css'; @import '_fili-shortform-same-channel.css'; @import '_fili-form-action.css';*/ body.no-scroll { overflow: hidden !important; } .fili-lightbox { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #000000; z-index: 999999; display: flex; align-items: center; justify-content: center; } .fili-lightbox-close { position: absolute; top: 15px; right: 20px; background: transparent; border: none; color: #ffffff; font-size: 36px; cursor: pointer; z-index: 1000000; line-height: 1; } .fili-lightbox-container { display: flex; width: 100%; height: 100%; } .fili-lightbox-main { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; background-color: #000000; padding: 20px; } .fili-lightbox-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; max-width: 90%; max-height: 90vh; } #fili-lightbox-img { max-width: 100%; max-height: 75vh; object-fit: contain; box-shadow: 0 4px 20px rgba(0,0,0,0.5); } .fili-lightbox-caption { color: #d1d5db; font-size: 0.9rem; margin-top: 12px; text-align: center; max-width: 800px; } .fili-lightbox-counter { color: #9ca3af; font-size: 0.8rem; margin-top: 6px; } .fili-lightbox-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.4); color: #ffffff; border: none; font-size: 28px; padding: 16px 12px; cursor: pointer; z-index: 10; transition: background 0.2s; } .fili-lightbox-arrow:hover { background: rgba(255,255,255,0.2); } .fili-lightbox-arrow.fili-prev { left: 15px; } .fili-lightbox-arrow.fili-next { right: 15px; } /* Right Sidebar Metadata Panel */ .fili-lightbox-sidebar { width: 320px; background-color: #18181b; border-left: 1px solid #27272a; padding: 40px 24px; color: #ffffff; display: flex; flex-direction: column; } .fili-lightbox-meta-date { font-size: 0.825rem; color: #a1a1aa; margin-bottom: 12px; } .fili-lightbox-meta-title { font-size: 1.15rem; font-weight: 700; line-height: 1.4; color: #f4f4f5; margin-bottom: 20px; } .fili-lightbox-meta-source { font-size: 0.8rem; color: #71717a; letter-spacing: 0.05em; margin-top: auto; } @media (max-width: 991px) { .fili-lightbox-container { flex-direction: column; } .fili-lightbox-sidebar { width: 100%; height: auto; padding: 16px; } } .fili-longform-content * { max-width: 100%; box-sizing: border-box; } .fili-longform-wrapper { width: 100%; min-height: 100vh; margin: 0; padding: 0; box-sizing: border-box; background-color: var(--color-bg-body); color: var(--color-text-main); font-family: var(--font-primary); font-size: 19px; line-height: var(--line-height-base); -webkit-font-smoothing: antialiased; transition: var(--transition-normal); overflow-x: clip; } .fili-longform { width: 100%; padding-top: 0; padding-bottom: 64px; } .fili-longform-content::after { content: ""; display: table; clear: both; } .fili-longform-content > blockquote, .fili-longform-content > ul, .fili-longform-content > ol, .fili-longform-content .pBody, .fili-longform-content .pHead, .fili-longform-content .pTitle, .fili-longform-content .hTitle, .fili-longform-content .pSubTitle, .fili-longform-content .pAuthor, .fili-longform-content .pSource, .fili-longform-content .psource, .fili-longform-content .pPublishTimeSource, .fili-longform-content .pCaption { display: block; max-width: 640px; margin-left: auto; margin-right: auto; } .fili-longform-content .pBody img { display: block; max-width: 640px; margin-left: auto; margin-right: auto; } .fili-longform-content p:not([class]) + p.pBody, .fili-longform-content p:not([class]) + p.pCaption, .fili-longform-content p:not([class]) + p.pTitle, .fili-longform-content p:not([class]) + p.hTitle, .fili-longform-content p:not([class]) + p.pSubTitle { clear: both; } .fili-longform-content p:empty, .fili-longform-content .rrHandle { display: none !important; } .fili-longform-content .pTitle { display: none !important; } .fili-longform-content .hTitle, .fili-longform-content h1 { font-family: var(--font-heading); font-size: 38px; font-weight: 700; line-height: var(--line-height-heading); color: var(--color-text-heading); text-align: center; margin-top: 36px; margin-bottom: 24px; } .fili-longform-content .pHead { font-family: var(--font-heading); font-size: 21px; font-weight: 500; line-height: 1.6; color: var(--color-text-heading); margin-top: 0; margin-bottom: 36px; } .fili-longform-content .pSubTitle { font-family: var(--font-heading); font-size: 20px; font-weight: 700; color: var(--color-text-heading); } .fili-longform-content p, .fili-longform-content .pBody { font-size: 19px; line-height: 1.8; margin-top: 0; margin-bottom: 24px; color: var(--color-text-main); word-break: break-word; } .fili-longform-content p strong, .fili-longform-content p b { font-weight: 700; color: var(--color-text-heading); } .fili-longform-content p em, .fili-longform-content p i { font-style: italic; } .fili-longform-content a { color: var(--color-brand-red); text-decoration: underline; text-underline-offset: 4px; transition: var(--transition-fast); } .fili-longform-content a:hover { color: var(--color-brand-red-hover); } .fili-longform-content blockquote { border-left: 4px solid var(--color-brand-red); padding: 18px 24px; margin-top: 32px; margin-bottom: 32px; font-size: 20px; font-style: italic; border-radius: 0 var(--radius-lg) var(--radius-lg) 0; } .fili-longform-content ul.list { padding-left: 20px; margin-top: 0; margin-bottom: 20px; } .fili-longform-content ul.list li { list-style: none; position: relative; padding-left: 13px; font-size: 15px; line-height: 20px; margin-bottom: 7px; } .fili-longform-content ul.list li::after { content: ""; position: absolute; left: 0; top: 50%; width: 4px; height: 4px; margin-top: -4px; background: #3ab8e7; } /* Captions */ .fili-longform-content .pCaption, .fili-longform-content caption { font-family: var(--font-heading); font-size: 14px; line-height: 1.6; color: var(--color-text-muted); text-align: center; margin-top: 8px; margin-bottom: 32px; font-style: italic; } .fili-longform-content .pCaption br { content: ""; display: block; margin-top: 6px; } .fili-longform-content .pCaption br + br, .fili-longform-content .pCaption br:first-child, .fili-longform-content .pCaption br:last-child { display: none !important; } /* Author / Source / Time */ .fili-longform-content .pAuthor { font-family: var(--font-heading); font-size: 16px; font-weight: 700; color: #696969; text-align: right; margin-top: 24px; margin-bottom: 10px; letter-spacing: 0.5px; } .fili-longform-content .pAuthor a { color: var(--color-text-heading); text-decoration: none; } .fili-longform-content .pAuthor a:hover { color: var(--color-brand-red); } .fili-longform-content .pSource, .fili-longform-content .psource { position: relative; text-align: right; color: #696969; margin-bottom: 10px; } .fili-longform-content .pSource a { color: #999; text-decoration: none; } .fili-longform-content .pSource a:hover { color: var(--color-brand-red); } .fili-longform-content .pPublishTimeSource { font-family: var(--font-heading); font-size: 13px; text-align: right; color: var(--color-text-muted); margin-top: 16px; margin-bottom: 0; } .fili-longform-content img { max-width: 100%; height: auto; display: block; } .fili-longform-content .imgCenter_Full { border: 0; width: 100%; height: auto; border-radius: 1px; } .fili-longform-content .imgCenter_Full_ColLeft { max-width: 100%; width: auto; float: right; } .fili-longform-content .imgCenter_Full_ColRight { max-width: 100%; width: auto; float: left; } .fili-longform-content .imgCenter { display: block; border: 0; width: auto; max-width: calc(100% - 200px); height: auto; margin: 40px auto 16px; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .fili-longform-content .imgCol2 { width: 49.5%; padding: 1px; float: left; margin-bottom: 1.28em; } .fili-longform-content .imgCol3 { width: 33.1%; padding: 1px; float: left; margin-bottom: 1.28em; } .fili-longform-content .imgWidthLR { max-width: 480px; border-radius: var(--radius-md); } .fili-longform-content .imgBodyLeft, .fili-longform-content .imgBodyRight { border: 0; height: auto; width: auto; max-width: 480px; } .fili-longform-content .imgBodyRight { float: right; margin: 10px 150px 15px 30px; } .fili-longform-content .imgBodyLeft { float: left; margin: 10px 30px 15px 120px; } .fili-longform-content .imgBodyLeft img, .fili-longform-content .imgBodyRight img { margin-bottom: 10px; } .fili-longform-content .pImgBody { clear: both; } .fili-longform-content iframe { max-width: 100%; height: auto !important; } .fili-longform-content table { -webkit-overflow-scrolling: touch; border-collapse: separate; border-spacing: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .fili-longform-content table:not([class*="tableLF"]) { display: block; width: 100% !important; max-width: 640px !important; height: auto !important; overflow-x: auto; margin: 40px auto !important; } .fili-longform-content table td { padding: 28px 32px !important; border: none !important; border-left: 4px solid var(--color-brand-red) !important; background-color: var(--color-bg-surface) !important; } .fili-longform-content table td p { font-size: 17px; line-height: 1.75; margin-bottom: 16px; color: var(--color-text-main); } .fili-longform-content table td p:last-child { margin-bottom: 0; } .fili-longform-content table .pBody { max-width: none; margin-left: 0; margin-right: 0; padding: 5px 5px 0; } .fili-longform-content table td.pBody, .fili-longform-content table[align=left] td.pBody, .fili-longform-content table[align=center] td.pBody, .fili-longform-content table[align=right] td.pBody { padding: 8px; } .fili-longform-content .tableLFRight { max-width: 480px !important; margin-right: calc(50% - 320px); margin-left: 30px; margin-bottom: 15px; margin-top: 10px; } .fili-longform-content .tableLFLeft { max-width: 480px !important; margin-left: calc(50% - 320px); margin-right: 30px; margin-bottom: 15px; margin-top: 10px; } .fili-longform-content .tableLFRight_Lech { max-width: 480px !important; margin-right: calc((50% - 320px) / 2 + 50px); margin-left: 30px; margin-bottom: 15px; margin-top: 10px; } .fili-longform-content .tableLFLeft_Lech { max-width: 480px !important; margin-left: calc((50% - 320px) / 2 + 50px); margin-right: 30px; margin-bottom: 15px; margin-top: 10px; } .fili-longform-content .tableLFCenter { max-width: 640px !important; width: 100%; margin: 10px auto 15px; } .fili-longform-wrapper.article-dark { background-color: var(--color-brand-dark); color: #cbd5e1; } .fili-longform-wrapper.article-dark .fili-longform-content .pTitle, .fili-longform-wrapper.article-dark .fili-longform-content .hTitle, .fili-longform-wrapper.article-dark .fili-longform-content h1, .fili-longform-wrapper.article-dark .fili-longform-content .pHead, .fili-longform-wrapper.article-dark .fili-longform-content .pSubTitle, .fili-longform-wrapper.article-dark .fili-longform-content strong, .fili-longform-wrapper.article-dark .fili-longform-content .pAuthor { color: var(--color-text-inverse); } .fili-longform-wrapper.article-dark .fili-longform-content p, .fili-longform-wrapper.article-dark .fili-longform-content .pBody { color: #cbd5e1; } .fili-longform-wrapper.article-dark .fili-longform-content .pCaption, .fili-longform-wrapper.article-dark .fili-longform-content .pPublishTimeSource, .fili-longform-wrapper.article-dark .fili-longform-content .pSource, .fili-longform-wrapper.article-dark .fili-longform-content .psource { color: #94a3b8; } .fili-longform-wrapper.article-dark .fili-longform-content .pAuthor a { color: inherit; } .fili-longform-wrapper.article-dark blockquote, .fili-longform-wrapper.article-dark table td { background-color: var(--color-brand-dark-hover) !important; } .fili-longform-wrapper.article-black { background-color: var(--color-brand-dark-active); color: #e2e8f0; } .fili-longform-wrapper.article-black .fili-longform-content .pTitle, .fili-longform-wrapper.article-black .fili-longform-content .hTitle, .fili-longform-wrapper.article-black .fili-longform-content h1, .fili-longform-wrapper.article-black .fili-longform-content .pHead, .fili-longform-wrapper.article-black .fili-longform-content .pSubTitle, .fili-longform-wrapper.article-black .fili-longform-content strong, .fili-longform-wrapper.article-black .fili-longform-content .pAuthor { color: var(--color-text-inverse); } .fili-longform-wrapper.article-black .fili-longform-content .pSource, .fili-longform-wrapper.article-black .fili-longform-content .psource { color: #cbd5e1; } .fili-longform-wrapper.article-black .fili-longform-content .pAuthor a { color: inherit; } .fili-longform-wrapper.article-black .fili-longform-content p, .fili-longform-wrapper.article-black .fili-longform-content .pBody { color: #e2e8f0; } .fili-longform-wrapper.article-black blockquote, .fili-longform-wrapper.article-black table td { background-color: rgba(255, 255, 255, 0.05) !important; } .fili-longform-wrapper.article-purple { background-color: #3b0764; color: #f3e8ff; } .fili-longform-wrapper.article-purple .fili-longform-content .pTitle, .fili-longform-wrapper.article-purple .fili-longform-content .hTitle, .fili-longform-wrapper.article-purple .fili-longform-content h1, .fili-longform-wrapper.article-purple .fili-longform-content .pHead, .fili-longform-wrapper.article-purple .fili-longform-content .pSubTitle, .fili-longform-wrapper.article-purple .fili-longform-content strong, .fili-longform-wrapper.article-purple .fili-longform-content .pAuthor { color: var(--color-text-inverse); } .fili-longform-wrapper.article-purple .fili-longform-content .pSource, .fili-longform-wrapper.article-purple .fili-longform-content .psource { color: rgba(255, 255, 255, .7); } .fili-longform-wrapper.article-purple .fili-longform-content .pAuthor a { color: inherit; } .fili-longform-wrapper.article-purple .fili-longform-content p, .fili-longform-wrapper.article-purple .fili-longform-content .pBody { color: #f3e8ff; } .fili-longform-wrapper.article-purple blockquote, .fili-longform-wrapper.article-purple table td { background-color: rgba(0, 0, 0, 0.2) !important; } /* ------------------------------------------------------------------ Responsive 920 / 640 / 767) ------------------------------------------------------------------ */ @media screen and (min-width: 641px) and (max-width: 920px) { .fili-longform-content .imgCenter { max-width: calc(100% - 60px); } .fili-longform-content .imgWidthLR { max-width: 320px; } .fili-longform-content .imgBodyRight { max-width: 320px; margin: 10px 60px 15px 30px; } .fili-longform-content .imgBodyLeft { max-width: 320px; margin: 10px 30px 15px 60px; } .fili-longform-content .tableLFRight, .fili-longform-content .tableLFRight_Lech { max-width: 320px !important; margin-left: 30px; margin-bottom: 15px; margin-top: 10px; } .fili-longform-content .tableLFLeft, .fili-longform-content .tableLFLeft_Lech { max-width: 320px !important; margin-right: 30px; margin-bottom: 15px; margin-top: 10px; } .fili-longform-content .tableLFCenter { width: 100%; margin: 10px auto 15px; } } @media screen and (max-width: 767px) { .fili-longform-content a { display: inline-block; } } @media screen and (max-width: 640px) { .fili-longform-wrapper { font-size: 17px; line-height: 1.7; } .fili-longform-content .hTitle, .fili-longform-content h1 { font-size: 28px; margin-top: 20px; margin-bottom: 20px; } .fili-longform-content .pHead { font-size: 19px; margin-bottom: 28px; } .fili-longform-content p, .fili-longform-content .pBody { font-size: 17px; margin-bottom: 20px; } .fili-longform-content .pHead, .fili-longform-content .pBody, .fili-longform-content .pTitle, .fili-longform-content .hTitle, .fili-longform-content .pSubTitle, .fili-longform-content .pCaption, .fili-longform-content .pAuthor, .fili-longform-content .pSource { padding-left: 10px; padding-right: 10px; } .fili-longform-content .imgWidthLR { max-width: none; width: 100%; } .fili-longform-content .imgCenter, .fili-longform-content .imgBodyLeft, .fili-longform-content .imgBodyRight, .fili-longform-content .imgCenter_Full_ColLeft, .fili-longform-content .imgCenter_Full_ColRight { float: none; width: 100% !important; height: auto; max-width: none; margin: 20px auto; } .fili-longform-content iframe { width: 100%; } .fili-longform-content table { width: 100% !important; } .fili-longform-content .tableLFRight, .fili-longform-content .tableLFLeft, .fili-longform-content .tableLFRight_Lech, .fili-longform-content .tableLFLeft_Lech { max-width: 100% !important; margin: 10px auto 15px; } .fili-longform-content .tableLFCenter { width: 100%; margin: 10px auto 15px; } .fili-longform-content table td { padding: 20px !important; } } /* Quiz Outer Table Styling */ .fili-content-view table.quizz, .fili-content-view table.img-content.quizz { width: 100% !important; margin: 24px 0 !important; border-collapse: separate !important; border-spacing: 0 !important; border: 1px solid var(--fili-sf-border, #e2e8f0); border-radius: 12px; background: #ffffff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03); overflow: hidden; } .fili-content-view table.quizz td.pCaption { padding: 16px 20px; font-size: 1.05rem; font-weight: 700; color: var(--fili-sf-text-heading, #111827); border-bottom: 1px solid var(--fili-sf-border, #e2e8f0); background-color: var(--fili-sf-bg-surface, #f8fafc); } .fili-content-view table.quizz td.pCaption h3 { font-size: 1.1rem; margin: 0; font-weight: 700; } /* Option List Container */ .fili-content-view table.quizz tr > td > ul { margin: 16px !important; padding: 0 !important; list-style: none !important; counter-reset: quiz-option; } /* Default Option Item */ .fili-content-view table.quizz:not(.quiz-info-card) ul li { counter-increment: quiz-option; display: flex; flex-direction: column; position: relative; width: 100%; margin-bottom: 10px; padding: 12px 16px 12px 52px; background-color: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; cursor: pointer; font-weight: 500; font-size: 0.975rem; color: #334155; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); box-sizing: border-box; } /* ANTI-SPOILER RULE: Hide font-weight spoilers on or tags before choice */ .fili-content-view table.quizz:not(.answered) ul li strong, .fili-content-view table.quizz:not(.answered) ul li b { font-weight: 500 !important; color: inherit !important; } /* Letter Badge (A, B, C, D) */ .fili-content-view table.quizz:not(.quiz-info-card) ul li::before { content: counter(quiz-option, upper-latin); position: absolute; left: 14px; top: 10px; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background-color: #cbd5e1; color: #334155; font-weight: 700; font-size: 0.8rem; transition: all 0.2s ease; } /* Hover Effect (Before Answered) */ .fili-content-view table.quizz:not(.answered):not(.quiz-info-card) ul li:hover { background-color: #f1f5f9; border-color: var(--fili-sf-brand-red, #D12F2F); transform: translateX(4px); } .fili-content-view table.quizz:not(.answered):not(.quiz-info-card) ul li:hover::before { background-color: var(--fili-sf-brand-red, #D12F2F); color: #ffffff; } /* Answered States */ .fili-content-view table.quizz.answered ul li { cursor: default; opacity: 0.6; } /* Correct Choice */ .fili-content-view table.quizz.answered ul li.correct { opacity: 1 !important; background-color: #f0fdf4 !important; color: #166534 !important; border-color: #86efac !important; } .fili-content-view table.quizz.answered ul li.correct strong, .fili-content-view table.quizz.answered ul li.correct b { font-weight: 700 !important; } .fili-content-view table.quizz.answered ul li.correct::before { background-color: #22c55e !important; color: #ffffff !important; } /* Wrong Choice (Selected by user) */ .fili-content-view table.quizz.answered ul li.selected:not(.correct) { opacity: 1 !important; background-color: #fef2f2 !important; color: #991b1b !important; border-color: #fca5a5 !important; } .fili-content-view table.quizz.answered ul li.selected:not(.correct)::before { background-color: #ef4444 !important; color: #ffffff !important; } /* Answer Explanation */ .fili-content-view table.quizz ul li p.explaination { display: block !important; margin-top: 10px !important; padding: 10px 14px !important; background-color: rgba(255, 255, 255, 0.85); border-left: 3px solid var(--fili-sf-brand-red, #D12F2F); border-radius: 4px; font-size: 0.9rem; font-style: italic; font-weight: 400; color: #334155 !important; line-height: 1.5; } .fili-content-view table.quizz.quiz-info-card ul li.is-info-item { padding: 12px 16px !important; background-color: #f8fafc !important; border: 1px solid #e2e8f0 !important; border-left: 4px solid var(--fili-sf-brand-red, #D12F2F) !important; border-radius: 6px !important; cursor: default !important; margin-bottom: 10px; font-weight: 400 !important; opacity: 1 !important; } .fili-content-view table.quizz.quiz-info-card ul li.is-info-item::before { display: none !important; } /* End Quiz Score Summary Card */ .fili-content-view .quizz-result { margin-top: 32px !important; padding: 24px !important; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; text-align: center; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); } .fili-content-view .quizz-result-title { font-family: var(--fili-sf-font-heading, sans-serif); font-size: 1.1rem; font-weight: 700; color: var(--fili-sf-brand-red, #D12F2F); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; } .fili-content-view .quizz-result .message { display: block; font-size: 1rem; color: #475569; margin-bottom: 12px; } .fili-content-view .quizz-result .score-display { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 2rem; font-weight: 800; } .fili-content-view .quizz-result .score-display .correct { color: #22c55e; } .fili-content-view .quizz-result .score-display .correct::after { content: " /"; color: #94a3b8; font-weight: 400; } .fili-content-view .quizz-result .score-display .total { color: var(--fili-sf-brand-red, #D12F2F); } /* ========================================================================== Report Error Modal & Form Styling (#baoloiModal) ========================================================================== */ #baoloiModal .modal-content { border: none; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); overflow: hidden; } #baoloiModal .modal-header { border-bottom: 1px solid #e9ecef; padding: 1rem 1.25rem; background-color: #ffffff; } #baoloiModal .modal-body { padding: 1.25rem !important; } /* Form Controls & Labels */ #form-baoloi .form-label { font-weight: 600; font-size: 0.875rem; color: #212529; margin-bottom: 0.4rem; } #form-baoloi .form-control { border-radius: 6px; border: 1px solid #ced4da; padding: 0.55rem 0.75rem; font-size: 0.9rem; transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; } #form-baoloi .form-control:focus { border-color: #0d6efd; box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15); } #form-baoloi textarea.form-control { resize: vertical; min-height: 90px; } /* Submit Button */ #form-baoloi .btn-primary { border-radius: 6px; font-size: 0.95rem; transition: background-color 0.2s ease, transform 0.1s ease; } #form-baoloi .btn-primary:active { transform: translateY(1px); } /* reCAPTCHA v2 Alignment */ #form-baoloi .g-recaptcha { display: flex; justify-content: center; width: 100%; min-height: 78px; } /* reCAPTCHA v3 Legal Text */ #form-baoloi .text-muted.small { font-size: 0.78rem; line-height: 1.4; color: #6c757d; } #form-baoloi .text-muted.small a { color: #0d6efd; text-decoration: none; } #form-baoloi .text-muted.small a:hover { text-decoration: underline; } /* Hide Floating Badge for v3 */ .grecaptcha-badge { visibility: hidden !important; } #fili-shortform-detail, #fili-shortform-detail * { box-sizing: border-box; } #fili-shortform-detail { --fili-sf-font-body: var(--font-primary, Roboto, sans-serif); --fili-sf-font-heading: var(--font-heading,Roboto, sans-serif); --fili-sf-text-heading: var(--color-text-heading, #111827); --fili-sf-text-main: var(--color-text-main, #374151); --fili-sf-text-muted: var(--color-text-muted, #6b7280); --fili-sf-brand: var(--color-brand-accent, #0056b3); --fili-sf-brand-hover: var(--color-brand-red-hover, #003d80); --fili-sf-brand-red: var(--color-brand-red, #D12F2F); --fili-sf-brand-red-hover: var(--color-brand-red-hover, #A82323); --fili-sf-bg-surface: var(--color-bg-surface, #ffffff); --fili-sf-bg-light: var(--color-bg-light, #ffffff); --fili-sf-bg-subtle: var(--color-bg-subtle, #f8fafc); --fili-sf-border: var(--color-border, #e2e8f0); --fili-sf-radius-lg: var(--radius-lg, 12px); --fili-sf-radius-md: var(--radius-md, 8px); --fili-sf-radius-sm: var(--radius-sm, 4px); --fili-sf-shadow-main: var(--shadow-md, 0 4px 16px rgba(0, 0, 0, 0.05)); --fili-sf-shadow-subtle: var(--shadow-sm, 0 2px 6px rgba(0, 0, 0, 0.04)); font-family: var(--fili-sf-font-body); color: var(--fili-sf-text-main); overflow: visible !important; } #fili-shortform-detail .fili-shortform-grid { overflow: visible !important; } #fili-shortform-detail .fili-shortform-main { min-width: 0; } #fili-shortform-detail .fili-shortform-header { margin-top: 12px; margin-bottom: 24px; } #fili-shortform-detail .fili-shortform-title { font-family: var(--fili-sf-font-heading); font-size: 32px; font-weight: 700; line-height: 1.3; color: var(--fili-sf-text-heading); margin-bottom: 12px; letter-spacing: -0.02em; overflow-wrap: break-word; word-break: break-word; } #fili-shortform-detail .fili-shortform-meta { font-size: 14px; color: var(--fili-sf-text-muted); } #fili-shortform-detail .fili-meta-date { font-size: 13px; font-weight: 500; } #fili-shortform-detail .fili-btn-report-error { font-size: 13px; padding: 4px 12px; border-radius: var(--fili-sf-radius-sm); color: var(--fili-sf-text-muted); border: 1px solid var(--fili-sf-border); background: transparent; transition: all 0.2s ease; } #fili-shortform-detail .fili-btn-report-error:hover { background-color: var(--fili-sf-brand-red); color: #ffffff; border-color: var(--fili-sf-brand-red); } #fili-shortform-detail .fili-content-view { font-size: 17.5px; line-height: 1.75; color: var(--fili-sf-text-main); overflow-wrap: break-word; word-break: break-word; } #fili-shortform-detail .fili-content-view .pTitle { display: none !important; } #fili-shortform-detail .fili-content-view .pHead { font-weight: bold; font-size: 18px; line-height: 1.5; padding: 7px 0; color: #2e2e2e; } #fili-shortform-detail .fili-content-view .pHead strong { font-weight: bold; font-size: 18px; line-height: 1.5; color: #2e2e2e; font-family: --fili-sf-font-body } #fili-shortform-detail .fili-content-view .pSubTitle { font-size: 20px !important; font-weight: bold !important; padding: 0 !important; margin-top: 10px !important; } #fili-shortform-detail .fili-content-view .pInterTitle { font-weight: bold; } #fili-shortform-detail .fili-content-view p { font-size: 17.5px; line-height: 1.75; color: var(--fili-sf-text-main); margin-bottom: 20px; text-align: left; } #fili-shortform-detail .fili-content-view .pBody { font-size: 18px !important; } #fili-shortform-detail .fili-content-view table .pBody { padding: 5px 5px 0px; line-height: 1.5em; } #fili-shortform-detail .fili-content-view p:has(img) { text-align: center; } /* Q&A style question block */ #fili-shortform-detail .fili-content-view .pQuestion { font-family: Arial; font-size: 18px; font-style: italic; font-weight: bold; padding: 0; margin-top: 10px; } /* Hyperlinks */ #fili-shortform-detail .fili-content-view a { color: var(--fili-sf-brand); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(0, 86, 179, 0.3); text-underline-offset: 3px; transition: all 0.2s ease; } #fili-shortform-detail .fili-content-view a:hover { color: var(--fili-sf-brand-hover); text-decoration-color: var(--fili-sf-brand-hover); } #fili-shortform-detail .fili-content-view span { color: inherit; } #fili-shortform-detail .fili-content-view ::selection { background-color: rgba(0, 86, 179, 0.15); color: var(--fili-sf-text-heading); } #fili-shortform-detail .fili-content-view img, #fili-shortform-detail .fili-content-view .imgCenter_Full, #fili-shortform-detail .fili-content-view .imgCenter, #fili-shortform-detail .fili-content-view img.zoom { max-width: 100% !important; height: auto !important; display: block; margin: 24px auto; border-radius: var(--fili-sf-radius-sm); box-shadow: var(--fili-sf-shadow-subtle); cursor: pointer !important; pointer-events: auto !important; position: relative; z-index: 2; touch-action: manipulation; } /* Container Tables for Images */ #fili-shortform-detail .fili-content-view table.img-content { /* width: 100% !important;*/ max-width: 100% !important; /* margin: 28px auto !important;*/ border-collapse: separate; border-spacing: 0; background-color: var(--fili-sf-bg-light); overflow: hidden; box-shadow: var(--fili-sf-shadow-subtle); } #fili-shortform-detail .fili-content-view table.img-content tbody, #fili-shortform-detail .fili-content-view table.img-content tr { width: 100% !important; display: block !important; } #fili-shortform-detail .fili-content-view table.img-content td { display: block !important; width: 100% !important; padding: 0 !important; text-align: center; } #fili-shortform-detail .fili-content-view table.img-content td img { width: 100% !important; max-width: 100% !important; height: auto !important; display: block; margin: 0 auto !important; border: 0 !important; border-radius: 0; box-shadow: none; transition: transform 0.3s ease; cursor: pointer !important; pointer-events: auto !important; } #fili-shortform-detail .fili-content-view table.img-content:hover td img { transform: scale(1.01); } /* Image Captions */ #fili-shortform-detail .fili-content-view .pCaption { color: #3F3F3F; font-size: 11pt; padding: 6px 0; line-height: 27px; } /* Caption directly beside an inline image */ #fili-shortform-detail .fili-content-view table tr td img ~ div.pCaption { margin-top: 5px; float: left; font-style: italic; } /* Author credit inside image tables */ #fili-shortform-detail .fili-content-view table.img-content .pImgAuthor { text-align: center; font-size: 13px; padding-bottom: 5px; font-weight: 700; color: #333; line-height: 1.5em; } /* Author & Source Elements */ #fili-shortform-detail .fili-content-view .pAuthor { font-family: Arial, sans-serif; font-size: 11pt; text-align: right !important; font-weight: bold; color: #696969 !important; margin-bottom: 0px !important; } #fili-shortform-detail .fili-content-view .pSource { display: none !important; } @media (min-width: 992px) { #fili-shortform-detail .fili-shortform-sidebar { position: -webkit-sticky !important; position: sticky !important; top: 0px ; align-self: flex-start; padding-left: 20px; } } @media (max-width: 991px) { #fili-shortform-detail .fili-shortform-sidebar { border-top: 1px solid var(--fili-sf-border); padding-top: 28px; margin-top: 32px; position: static !important; } #fili-shortform-detail .fili-content-view { font-size: 16.5px; } #fili-shortform-detail .fili-content-view p { font-size: 16px; } } @media (max-width: 767px) { #fili-shortform-detail .fili-shortform-header { margin-bottom: 18px; padding-bottom: 12px; } #fili-shortform-detail .fili-shortform-title { font-size: 32px; line-height: 1.3; margin-bottom: 10px; } #fili-shortform-detail .fili-content-view table.img-content { width: 100% !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; border-left: 1px solid var(--fili-sf-border); border-right: 1px solid var(--fili-sf-border); border-radius: var(--fili-sf-radius-md); } #fili-shortform-detail .fili-content-view table:not(.img-content) { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } } @media (max-width: 575px) { #fili-shortform-detail .fili-shortform-title { font-size: 26px; } #fili-shortform-detail .fili-content-view, #fili-shortform-detail .fili-content-view p { font-size: 16px; line-height: 1.65; } } #fili-shortform-detail .fili-shortform-same-channel-article { margin-top: 32px; padding-top: 24px; } #fili-shortform-detail .fili-same-channel-header { border-bottom: 1px solid var(--fili-sf-border, #e2e8f0); /* Line across the header */ margin-bottom: 20px; display: flex; } #fili-shortform-detail .fili-same-channel-title { margin: 0; /* Removes default

margin causing the alignment offset */ font-family: var(--fili-sf-font-heading, var(--font-heading, Roboto, sans-serif)); font-size: 18px; font-weight: 400; color: #ffffff !important; background-color: var(--fili-sf-brand-red, #D12F2F) !important; padding: 6px 14px; display: inline-block; text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.2; transition: background-color 0.2s ease, color 0.2s ease; } #fili-shortform-detail .fili-same-channel-title a, #fili-shortform-detail .fili-same-channel-title a:link, #fili-shortform-detail .fili-same-channel-title a:visited, #fili-shortform-detail .fili-same-channel-title a:hover, #fili-shortform-detail .fili-same-channel-title a:focus, #fili-shortform-detail .fili-same-channel-title a:active { color: #ffffff !important; text-decoration: none !important; } #fili-shortform-detail .fili-same-channel-title:has(a[href]):hover { background-color: var(--fili-sf-brand-red-hover, #A82323) !important; cursor: pointer; } .fili-see-more-wrap { text-align: center; margin-top: 24px; } .fili-btn-see-more { display: inline-block; padding: 10px 28px; background-color: #d12f30; color: #ffffff !important; font-size: 15px; font-weight: 600; text-decoration: none !important; border-radius: 20px; transition: all 0.25s ease-in-out; border: 1px solid #d12f30; box-shadow: 0 2px 6px rgba(209, 47, 48, 0.2); } .fili-btn-see-more:hover { background-color: #b02122; border-color: #b02122; color: #ffffff !important; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(209, 47, 48, 0.35); } .fili-btn-see-more.active { background-color: #901718; border-color: #901718; } /**/ .fili-article-same-container { width: 100%; margin-top: 56px; padding-top: 40px; padding-bottom: 40px; border-top: 1px solid var(--color-border); .fili-section-title { font-family: var(--font-heading); font-size: 22px; font-weight: 700; line-height: var(--line-height-heading); color: var(--color-text-heading); margin-bottom: 24px; position: relative; text-align: center; padding-left: 0; } } .fili-related-card { display: flex; flex-direction: column; height: 100%; background-color: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; transition: var(--transition-normal); &:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); .img_wrap img { transform: scale(1.06); } .fili-related-title a { color: var(--color-brand-red); } } .img_wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background-color: var(--color-bg-subtle); a { display: block; width: 100%; height: 100%; } img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } } .fili-related-content { display: flex; flex-direction: column; flex-grow: 1; justify-content: space-between; padding: 16px; } .fili-related-title { font-family: var(--font-heading); font-size: 16px; font-weight: 600; line-height: 1.4; margin-top: 0; margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; a { color: var(--color-text-heading); text-decoration: none; transition: var(--transition-fast); } } .meta { font-family: var(--font-heading); font-size: 13px; color: var(--color-text-muted); margin-top: auto; .date { display: inline-block; } } } .fili-longform-wrapper.article-dark, .fili-longform-wrapper.article-black { .fili-article-same-container { border-top-color: var(--color-border-dark); .fili-section-title { color: var(--color-text-inverse); } } .fili-related-card { background-color: var(--color-brand-dark-hover); border-color: var(--color-border-dark); .fili-related-title a { color: var(--color-text-inverse); } .meta { color: var(--color-text-muted); } } } .fili-longform-wrapper.article-purple { .fili-article-same-container { border-top-color: rgba(255, 255, 255, 0.15); .fili-section-title { color: var(--color-text-inverse); } } .fili-related-card { background-color: rgba(0, 0, 0, 0.2); border-color: rgba(255, 255, 255, 0.1); .fili-related-title a { color: var(--color-text-inverse); } .meta { color: #d8b4fe; } } } @media screen and (max-width: 576px) { .fili-article-same-container { margin-top: 36px; padding-top: 24px; padding-bottom: 24px; .fili-section-title { font-size: 19px; margin-bottom: 16px; } } .fili-related-card { .fili-related-title { font-size: 15px; -webkit-line-clamp: 2; } } } @media (max-width: 767px) { #fili-shortform-detail .fili-same-channel-title { font-size: 16px; padding: 5px 12px; } } .fili-see-more-wrap { text-align: center; margin-top: 24px; } .fili-btn-see-more { display: inline-block; padding: 10px 28px; background-color: #d12f30; color: #ffffff !important; font-size: 15px; font-weight: 600; text-decoration: none !important; border-radius: 20px; transition: all 0.25s ease-in-out; border: 1px solid #d12f30; box-shadow: 0 2px 6px rgba(209, 47, 48, 0.2); } .fili-btn-see-more:hover { background-color: #b02122; border-color: #b02122; color: #ffffff !important; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(209, 47, 48, 0.35); } .fili-btn-see-more.active { background-color: #901718; border-color: #901718; } @import "_fili-left-action-bar-report.css"; /* Sticky Left Action Bar */ .fili-action-bar-left { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 12px; align-self: flex-start; flex-shrink: 0; z-index: 10; } .fili-action-btn { width: 38px; height: 38px; border-radius: 50%; border: none; display: inline-flex; align-items: center; justify-content: center; color: #ffffff; font-size: 15px; text-decoration: none; transition: transform 0.2s ease, opacity 0.2s ease; cursor: pointer; } .fili-action-btn:hover { transform: translateY(-2px); opacity: 0.9; color: #ffffff; } /* Button Variants */ .fili-action-btn.btn-facebook { background-color: #3b5998; } .fili-action-btn.btn-print { background-color: #38bdf8; } .fili-action-btn.btn-save { background-color: #0284c7; } .fili-action-btn.btn-email { background-color: #475569; } .fili-action-btn.btn-report { background-color: #e11d48; } /* Responsive Viewports */ @media (max-width: 768px) { .fili-article-wrapper { flex-direction: column; } .fili-action-bar-left { position: relative; top: 0; flex-direction: row; margin-bottom: 12px; } } .fili-latest-widget { --fili-lw-dark: #2d2d2d; --fili-lw-title: #222222; --fili-lw-hover: var(--color-brand-red, #d12f2f); --fili-lw-border: #d0d0d0; width: 100%; display: flex; flex-direction: column; font-family: Arial, Helvetica, sans-serif; } .fili-latest-header { display: flex; align-items: flex-end; width: 100%; margin-bottom: 6px; } .fili-latest-badge { background-color: var(--fili-lw-dark); color: #ffffff; font-weight: 700; font-size: 13px; letter-spacing: 0.5px; padding: 4px 10px; text-transform: uppercase; line-height: 1.2; display: inline-block; flex-shrink: 0; } .fili-latest-header-line { flex-grow: 1; height: 3px; background-color: var(--fili-lw-dark); display: block; } .fili-latest-list { display: flex; flex-direction: column; } /* Dashed "Cutting" Separator Line */ .fili-latest-item { padding: 12px 0; border-bottom: 1px dashed var(--fili-lw-border); } .fili-latest-item:last-child { border-bottom: none; } .fili-latest-title { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.4; } .fili-latest-title a, .fili-latest-title a:visited { color: var(--fili-lw-title) !important; text-decoration: none; transition: color 0.15s ease-in-out; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .fili-latest-title a:hover, .fili-latest-title a:focus { color: var(--fili-lw-hover) !important; } /*@import '_fili-market-chart-spotlight-sub1-news.css'; @import '_fili-market-chart-spotlight-sub2-carousel.css'; @import '_fili-market-chart-spotlight-sub3-chartboard.css'; @import '_fili-latest-news-sidebar.css'; */ #fili-market-chart-spotlight-section { /* Typography & Borders */ --fili-mc-font-body: var(--font-primary, sans-serif); --fili-mc-border-color: var(--color-border, #e2e8f0); background-color: transparent; font-family: var(--fili-mc-font-body); } /* Outer Card Container Reset */ #fili-market-chart-spotlight-section .fili-mc-spotlight-card { background: transparent; border-radius: 0; padding: 0; box-shadow: none; border: none; } /* Responsive Column Divider */ @media (min-width: 768px) { #fili-market-chart-spotlight-section .border-end-md { border-right: 1px solid var(--fili-mc-border-color) !important; padding-right: 1.25rem !important; } } .fili-news-widget { /* Scoped Local Tokens */ --fili-s1-font-body: var(--font-primary, sans-serif); --fili-s1-font-heading: var(--font-heading, sans-serif); --fili-s1-primary: var(--color-brand-red, #D12F2F); --fili-s1-text-dark: var(--color-text-heading, #111111); --fili-s1-text-muted: var(--color-text-muted, #666666); --fili-s1-badge-bg: var(--color-brand-red, #D12F2F); --fili-s1-badge-color: var(--color-text-inverse, #ffffff); --fili-s1-divider: var(--color-border-subtle, #f1f5f9); --fili-s1-tab-border: var(--color-bg-subtle, #f8fafc); --fili-s1-thumb-bg: var(--color-bg-subtle, #f8fafc); --fili-s1-widget-height: 420px; --fili-s1-thumb-w: 74px; --fili-s1-thumb-h: 52px; --fili-s1-radius-sm: var(--radius-sm, 4px); display: flex; flex-direction: column; width: 100%; font-family: var(--fili-s1-font-body); } /* -------------------------------------------------------------------------- 1. Navigation Tabs -------------------------------------------------------------------------- */ .fili-news-tabs-wrapper { position: relative; border-bottom: 2px solid var(--fili-s1-tab-border); flex-shrink: 0; } .fili-news-widget .fili-news-tabs { display: flex; width: 100%; margin: 0; padding: 0; border: none; background: transparent; } .fili-news-widget .fili-news-tabs .nav-item { flex: 1 1 0%; text-align: center; } .fili-news-widget .fili-news-tabs .nav-link { width: 100%; padding: 8px 0 10px 0; border: none; background: transparent; color: var(--fili-s1-text-muted); font-family: var(--fili-s1-font-heading); font-size: 12px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; position: relative; transition: color var(--transition-fast, 0.2s ease); } /* Animated Bottom Accent Line */ .fili-news-widget .fili-news-tabs .nav-link::after { content: ""; position: absolute; bottom: -2px; left: 50%; width: 0; height: 2px; background-color: var(--fili-s1-primary); transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), left 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .fili-news-widget .fili-news-tabs .nav-link:hover { color: var(--fili-s1-text-dark); } .fili-news-widget .fili-news-tabs .nav-link.active { color: var(--fili-s1-primary); } .fili-news-widget .fili-news-tabs .nav-link.active::after { width: 100%; left: 0; } /* -------------------------------------------------------------------------- 2. Tab Content & Transitions -------------------------------------------------------------------------- */ .fili-news-widget .tab-content { width: 100%; height: var(--fili-s1-widget-height); position: relative; overflow: hidden; flex-grow: 1; min-height: 0; } .fili-news-widget .tab-pane { width: 100%; height: 100%; display: none !important; } @keyframes filiTabSlideFade { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } } .fili-news-widget .tab-pane.active { display: flex !important; flex-direction: column; height: 100%; animation: filiTabSlideFade 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards; } /* -------------------------------------------------------------------------- 3. Custom Scrollbar Container & Async Channels -------------------------------------------------------------------------- */ .fili-scroll-container, .fili-news-widget .fili-async-channel, .fili-news-widget .tab-pane > div { width: 100%; height: 100%; overflow-y: auto; padding-right: 6px; box-sizing: border-box; } .fili-scroll-container::-webkit-scrollbar, .fili-news-widget .fili-async-channel::-webkit-scrollbar, .fili-news-widget .tab-pane > div::-webkit-scrollbar { width: 4px; } .fili-scroll-container::-webkit-scrollbar-track, .fili-news-widget .fili-async-channel::-webkit-scrollbar-track, .fili-news-widget .tab-pane > div::-webkit-scrollbar-track { background: var(--fili-s1-tab-border); border-radius: 4px; } .fili-scroll-container::-webkit-scrollbar-thumb, .fili-news-widget .fili-async-channel::-webkit-scrollbar-thumb, .fili-news-widget .tab-pane > div::-webkit-scrollbar-thumb { background: var(--color-border, #cbd5e1); border-radius: 4px; } .fili-scroll-container::-webkit-scrollbar-thumb:hover, .fili-news-widget .fili-async-channel::-webkit-scrollbar-thumb:hover, .fili-news-widget .tab-pane > div::-webkit-scrollbar-thumb:hover { background: var(--fili-s1-text-muted); } /* -------------------------------------------------------------------------- 4. News Item List & Cards -------------------------------------------------------------------------- */ .fili-news-list { display: flex; flex-direction: column; } .fili-news-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0px; border-bottom: 1px solid var(--fili-s1-divider); border-radius: var(--fili-s1-radius-sm); transition: background-color var(--transition-fast, 0.2s ease); } .fili-news-item:hover { background-color: var(--color-bg-surface, #f8fafc); } .fili-news-item:last-child { border-bottom: none; } /* Thumbnails */ .fili-news-thumb-link { position: relative; width: var(--fili-s1-thumb-w); height: var(--fili-s1-thumb-h); flex-shrink: 0; border-radius: var(--fili-s1-radius-sm); overflow: hidden; background-color: var(--fili-s1-thumb-bg); border: 1px solid rgba(0, 0, 0, 0.05); } .fili-news-thumb { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-normal, 0.3s ease); } .fili-news-item:hover .fili-news-thumb { transform: scale(1.08); } /* "MỚI" Badge .fili-badge-new { position: absolute; top: 3px; left: 3px; background: var(--fili-s1-badge-bg); color: var(--fili-s1-badge-color); font-size: 8px; font-weight: 800; padding: 1px 4px; border-radius: 3px; letter-spacing: 0.3px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } */ /* Content & Typography */ .fili-news-content { flex: 1 1 0%; min-width: 0; } .fili-news-title { font-family: var(--fili-s1-font-heading); font-size: 18px; line-height: 1.4; font-weight: 600; margin: 0 0 4px 0; } .fili-news-title a { color: var(--fili-s1-text-dark); text-decoration: none; transition: color var(--transition-fast, 0.2s ease); } .fili-news-item:hover .fili-news-title a { color: var(--fili-s1-primary); } .fili-news-meta { display: flex; align-items: center; font-size: 12px; color: var(--fili-s1-text-muted); } .fili-news-meta .meta-item i { font-size: 10px; margin-right: 3px; opacity: 0.8; } /* -------------------------------------------------------------------------- 1. Carousel Container & Height Setup -------------------------------------------------------------------------- */ .fili-mc-spotlight-carousel, .fili-s2-carousel { --fili-s2-accent-red: var(--color-brand-red, #D12F2F); --fili-s2-accent-hover: var(--color-brand-red-hover, #A82323); --fili-s2-accent-bright: #ff4d4d; --fili-s2-dark-bg: var(--color-brand-dark, #0f172a); --fili-s2-font-heading: var(--font-heading, sans-serif); --fili-s2-font-body: var(--font-primary, sans-serif); --fili-s2-radius-md: var(--radius-md, 8px); --fili-s2-radius-sm: var(--radius-sm, 4px); position: relative; width: 100%; height: 100%; min-height: 100%; border-radius: var(--fili-s2-radius-md); overflow: hidden; background-color: var(--fili-s2-dark-bg); box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1)); } .fili-s2-carousel .carousel-inner { height: 100%; } .fili-s2-carousel .carousel-item { height: 100%; } /* -------------------------------------------------------------------------- 2. Hero Card & Background Overlays -------------------------------------------------------------------------- */ .fili-s2-carousel .fili-hero-card { position: relative; height: 100%; width: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; color: var(--color-text-inverse, #ffffff); display: flex; flex-direction: column; justify-content: space-between; padding: 20px 22px; isolation: isolate; box-sizing: border-box; } .fili-s2-carousel .fili-hero-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(15, 23, 42, 0.25) 0%, rgba(15, 23, 42, 0.92) 100%); transition: background 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .fili-s2-carousel .fili-hero-card:hover .fili-hero-overlay { background: linear-gradient(180deg, rgba(15, 23, 42, 0.35) 0%, rgba(15, 23, 42, 0.98) 100%); } /* -------------------------------------------------------------------------- 3. Badges & Tags -------------------------------------------------------------------------- */ .fili-s2-carousel .fili-badge-tag { display: inline-block; border: 1px solid rgba(255, 255, 255, 0.3); color: var(--color-text-inverse, #ffffff) !important; background: rgba(15, 23, 42, 0.65); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 4px 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; border-radius: var(--fili-s2-radius-sm); text-transform: uppercase; text-decoration: none; transition: background-color var(--transition-fast, 0.2s ease), border-color var(--transition-fast, 0.2s ease), color var(--transition-fast, 0.2s ease); } .fili-s2-carousel .fili-badge-tag:hover { background-color: var(--fili-s2-accent-red, #D12F2F); border-color: var(--fili-s2-accent-red, #D12F2F); color: #ffffff !important; } .fili-s2-carousel .fili-counter-badge { background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.2); color: var(--color-text-inverse, #ffffff); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 12px; } /* -------------------------------------------------------------------------- 4. Content & Typography -------------------------------------------------------------------------- */ .fili-s2-carousel .fili-hero-content { position: static; z-index: 2; } .fili-s2-carousel .fili-hero-title { font-family: var(--fili-s2-font-heading); font-size: 25px; line-height: var(--line-height-heading, 1.35); font-weight: 700; margin: 0; } .fili-s2-carousel .fili-hero-title a { color: var(--color-text-inverse, #ffffff) !important; text-decoration: none; transition: color var(--transition-fast, 0.2s ease); } .fili-s2-carousel .fili-hero-card:hover .fili-hero-title a, .fili-s2-carousel .fili-hero-title a:hover { color: var(--fili-s2-accent-bright, #ff4d4d) !important; } .fili-s2-carousel .fili-hero-summary { color: rgba(255, 255, 255, 0.88) !important; font-family: var(--fili-s2-font-body); font-size: 16px; line-height: 1.45; margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .fili-s2-carousel .fili-meta { display: flex; align-items: center; font-family: var(--fili-s2-font-body); font-size: 11.5px; color: rgba(255, 255, 255, 0.75); } .fili-s2-carousel .fili-meta-author { color: rgba(255, 255, 255, 0.85); } .fili-s2-carousel .fili-meta-date { color: rgba(255, 255, 255, 0.75); } /* -------------------------------------------------------------------------- 5. Carousel Controls & Indicators -------------------------------------------------------------------------- */ .fili-s2-carousel .fili-carousel-btn { width: 44px; opacity: 0; z-index: 4; transition: opacity var(--transition-normal, 0.3s ease); } .fili-s2-carousel:hover .fili-carousel-btn { opacity: 1; } .fili-s2-carousel .fili-btn-icon { width: 34px; height: 34px; background-color: rgba(15, 23, 42, 0.7); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 50%; color: var(--color-text-inverse, #ffffff); display: flex; align-items: center; justify-content: center; font-size: 12px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: background-color var(--transition-fast, 0.2s ease), transform var(--transition-fast, 0.2s ease); } .fili-s2-carousel .fili-carousel-btn:hover .fili-btn-icon { background-color: var(--fili-s2-accent-red); transform: scale(1.1); border-color: transparent; } .fili-s2-carousel .carousel-indicators { z-index: 4; bottom: 10px; margin-bottom: 0; } .fili-s2-carousel .carousel-indicators [data-bs-target] { width: 8px; height: 8px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.5); border: none; margin: 0 3px; transition: all var(--transition-normal, 0.3s ease); } .fili-s2-carousel .carousel-indicators .active { width: 20px; border-radius: 4px; background-color: var(--fili-s2-accent-red); } .fili-mc-spotlight-sub3 { --fili-s3-font-body: var(--font-primary, system-ui, -apple-system, sans-serif); --fili-s3-card-bg: #ffffff; --fili-s3-border: var(--color-border, #e2e8f0); --fili-s3-radius-card: var(--radius-lg, 8px); --fili-s3-shadow-sm: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.05)); height: 100%; display: flex; flex-direction: column; font-family: var(--fili-s3-font-body); } .fili-mc-spotlight-sub3 .fili-mc-spotlight-sub3-card { display: flex; flex-direction: column; height: 100%; width: 100%; min-height: 380px; /* Aligns height with adjacent sub1 and sub2 cards */ background: var(--fili-s3-card-bg); border-radius: var(--fili-s3-radius-card); border: 1px solid var(--fili-s3-border); box-shadow: var(--fili-s3-shadow-sm); overflow: hidden; position: relative; } /* Embedded iframe styling */ .fili-mc-spotlight-sub3-card iframe { width: 100%; height: 100%; min-height: 100%; flex: 1 1 auto; border: none; outline: none; display: block; background-color: transparent; overflow: hidden; } .fili-mc-spotlight-sub3 { --fili-s3-font-body: var(--font-primary); --fili-s3-font-heading: var(--font-heading); --fili-s3-primary: var(--color-brand-red, #D12F2F); --fili-s3-primary-hover: var(--color-brand-red-hover, #A82323); --fili-s3-surface-deep: var(--color-bg-subtle, #f8fafc); --fili-s3-surface-header: #f1f5f9; --fili-s3-card-bg: #ffffff; --fili-s3-text-main: var(--color-text-heading, #0f172a); --fili-s3-text-muted: var(--color-text-muted, #666666); --fili-s3-up-color: var(--color-stock-up, #16a34a); --fili-s3-up-bg: rgba(22, 163, 74, 0.12); --fili-s3-down-color: var(--color-stock-down, #dc2626); --fili-s3-down-bg: rgba(220, 38, 38, 0.12); --fili-s3-border: var(--color-border, #e2e8f0); --fili-s3-radius-card: var(--radius-lg, 8px); --fili-s3-radius-sm: var(--radius-sm, 4px); --fili-s3-shadow-sm: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.05)); height: 100%; display: flex; flex-direction: column; font-family: var(--fili-s3-font-body); } .fili-mc-spotlight-sub3 .market-board-card { display: flex; flex-direction: column; height: 100%; background: var(--fili-s3-card-bg); border-radius: var(--fili-s3-radius-card); overflow: hidden; border: 1px solid var(--fili-s3-border); box-shadow: var(--fili-s3-shadow-sm); } .fili-mc-spotlight-sub3 .board-tabs { display: flex; width: 100%; flex-shrink: 0; padding: 0; margin: 0; background: var(--fili-s3-surface-deep); border-bottom: 1px solid var(--fili-s3-border); position: relative; z-index: 1; gap: 0; } .fili-mc-spotlight-sub3 .board-tabs .tab-btn { flex: 1 1 0%; min-width: 0; position: relative; z-index: 1; background: var(--fili-s3-surface-deep); border: none; border-right: 1px solid var(--fili-s3-border); border-bottom: 1px solid var(--fili-s3-border); border-radius: 0; font-family: var(--fili-s3-font-heading); font-size: 11px; font-weight: 700; color: var(--fili-s3-text-muted); cursor: pointer; padding: 9px 4px; margin-bottom: -1px; transition: all var(--transition-fast, 0.2s ease); text-align: center; text-transform: uppercase; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fili-mc-spotlight-sub3 .board-tabs .tab-btn:last-child { border-right: none; } .fili-mc-spotlight-sub3 .board-tabs .tab-btn:hover { color: var(--fili-s3-text-main); background: rgba(0, 0, 0, 0.04); z-index: 2; } .fili-mc-spotlight-sub3 .board-tabs .tab-btn.active { z-index: 3; background: var(--fili-s3-surface-header); color: var(--fili-s3-primary); border-bottom: 1px solid var(--fili-s3-surface-header); border-top: 2px solid var(--fili-s3-primary); font-weight: 800; } .fili-mc-spotlight-sub3 .market-hero-banner { flex-shrink: 0; background: var(--fili-s3-surface-header); color: var(--fili-s3-text-main); padding: 12px 16px; border-bottom: 1px solid var(--fili-s3-border); } .fili-mc-spotlight-sub3 .hero-header-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .fili-mc-spotlight-sub3 .hero-symbol-name { font-family: var(--fili-s3-font-heading); font-size: 13px; font-weight: 700; letter-spacing: 0.3px; color: var(--fili-s3-text-main); } .fili-mc-spotlight-sub3 .hero-time { font-size: 10.5px; color: var(--fili-s3-text-muted); } .fili-mc-spotlight-sub3 .hero-header-main { display: flex; justify-content: space-between; align-items: flex-end; } .fili-mc-spotlight-sub3 .hero-price { font-family: var(--fili-s3-font-heading); font-size: 24px; font-weight: 800; line-height: 1; letter-spacing: -0.5px; color: var(--fili-s3-text-main); font-variant-numeric: tabular-nums; } .fili-mc-spotlight-sub3 .hero-badge { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 12px; display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; } .fili-mc-spotlight-sub3 .badge-market-up { background-color: var(--fili-s3-up-bg); color: var(--fili-s3-up-color); border: 1px solid rgba(22, 163, 74, 0.25); } .fili-mc-spotlight-sub3 .badge-market-down { background-color: var(--fili-s3-down-bg); color: var(--fili-s3-down-color); border: 1px solid rgba(220, 38, 38, 0.25); } .fili-mc-spotlight-sub3 .board-chart-box { flex-shrink: 0; padding: 10px 12px; border-bottom: 1px solid var(--fili-s3-border); background: var(--fili-s3-card-bg); } .fili-mc-spotlight-sub3 .chart-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .fili-mc-spotlight-sub3 .chart-label { font-size: 11px; font-weight: 600; color: var(--fili-s3-text-muted); } .fili-mc-spotlight-sub3 .chart-iframe-container { height: 180px; width: 100%; background-color: var(--fili-s3-surface-deep); border-radius: var(--fili-s3-radius-sm); border: 1px solid var(--fili-s3-border); overflow: hidden; position: relative; } .fili-mc-spotlight-sub3 .market-chart-iframe { width: 100%; height: 100%; border: 0; display: block; } .fili-mc-spotlight-sub3 .board-table-container { flex: 1 1 0px; min-height: 180px; overflow-y: auto; background: var(--fili-s3-card-bg); } .fili-mc-spotlight-sub3 .board-table-container::-webkit-scrollbar { width: 4px; } .fili-mc-spotlight-sub3 .board-table-container::-webkit-scrollbar-track { background: transparent; } .fili-mc-spotlight-sub3 .board-table-container::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; } .fili-mc-spotlight-sub3 .market-table { width: 100%; margin-bottom: 0; border-collapse: collapse; } .fili-mc-spotlight-sub3 .market-table-head th { position: sticky; top: 0; z-index: 5; font-family: var(--fili-s3-font-heading); font-size: 10.5px; font-weight: 700; color: var(--fili-s3-text-muted); text-transform: uppercase; padding: 6px 10px; background: var(--fili-s3-surface-deep); border-bottom: 1px solid var(--fili-s3-border); } /* ========================================================================== BOARD ROW STATES (HOVER & ACTIVE/SELECTED) ========================================================================== */ .fili-mc-spotlight-sub3 .board-row { cursor: pointer; } .fili-mc-spotlight-sub3 .board-row td { transition: background-color var(--transition-fast, 0.15s ease); } .fili-mc-spotlight-sub3 .board-row:hover td { background-color: var(--fili-s3-surface-deep) !important; } .fili-mc-spotlight-sub3 .board-row.selected-row td { background-color: rgba(209, 47, 47, 0.06) !important; } .fili-mc-spotlight-sub3 .board-row.selected-row:hover td { background-color: rgba(209, 47, 47, 0.12) !important; } .fili-mc-spotlight-sub3 .board-row.selected-row td:first-child { box-shadow: inset 3px 0 0 var(--fili-s3-primary); } .fili-mc-spotlight-sub3 .symbol-cell { font-size: 13px; color: var(--fili-s3-text-main); } .fili-mc-spotlight-sub3 .cell-price { font-size: 13px; color: var(--fili-s3-text-main); font-variant-numeric: tabular-nums; } .fili-mc-spotlight-sub3 .cell-up { font-size: 13px; color: var(--fili-s3-up-color); font-weight: 600; font-variant-numeric: tabular-nums; } .fili-mc-spotlight-sub3 .cell-down { font-size: 13px; color: var(--fili-s3-down-color); font-weight: 600; font-variant-numeric: tabular-nums; } .fili-mc-spotlight-sub3 .percent-pill { font-size: 13px; font-weight: 700; padding: 2px 6px; border-radius: 4px; font-variant-numeric: tabular-nums; display: inline-block; } .fili-mc-spotlight-sub3 .pill-up { background: var(--fili-s3-up-bg); color: var(--fili-s3-up-color); } .fili-mc-spotlight-sub3 .pill-down { background: var(--fili-s3-down-bg); color: var(--fili-s3-down-color); } .fili-mc-spotlight-sub3 .board-footer { flex-shrink: 0; background: var(--fili-s3-card-bg); font-size: 11px; } /* ========================================================================== PARTIAL: LIVE SEARCH ANIMATIONS (_fili-search-animations.css) ========================================================================== */ #searchResultsContainer { transition: opacity 0.25s ease, transform 0.25s ease; will-change: opacity, transform; } /* Opacity kept at 1 so skeleton placeholders remain fully visible while fetching */ #searchResultsContainer.is-searching { opacity: 1; pointer-events: none; } /* Staggered Card Entrance Animation for real populated result items */ .search-results-list .search-card-item:not(.skeleton-card) { animation: searchCardFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes searchCardFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .search-card-item { background: var(--fili-srch-bg-card); padding: 20px 0; border-bottom: 1px solid var(--fili-srch-border); transition: background-color var(--transition-fast, 0.15s ease); } .search-card-item:last-child { border-bottom: none; } .search-card-item .contentView { display: flex; flex-direction: column; gap: 16px; } @media (min-width: 576px) { .search-card-item .contentView { flex-direction: row; align-items: flex-start; } .search-card-thumb { flex: 0 0 190px; max-width: 190px; } .search-card-body { flex: 1; min-width: 0; } } /* Thumbnail Image & Hover Zoom */ .search-card-thumb { overflow: hidden; border-radius: var(--fili-srch-radius-sm); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); aspect-ratio: 16 / 10; background-color: var(--fili-srch-bg-input); } .search-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--transition-normal, 0.25s ease); } .search-card-item:hover .search-card-thumb img { transform: scale(1.05); } /* Article Titles & Hover States */ .search-card-title { font-family: var(--fili-srch-font-heading); font-size: 17px; font-weight: 700; margin-top: 0; margin-bottom: 6px; line-height: 1.4; } .search-card-title a { text-decoration: none; color: var(--fili-srch-text-dark); transition: color var(--transition-fast, 0.15s ease); } .search-card-title a:hover { color: var(--fili-srch-primary); } /* Article Meta Time Bar */ .search-card-meta { font-size: 12px; color: #8c939d ; margin-bottom: 8px; display: flex; align-items: center; } .search-card-meta i.fa-clock, .search-card-meta i.far { color: var(--search-card-meta); } .search-card-item em, .search-card-item mark, .search-card-item .highlight { background-color: #ffffff; /* color: var(--fili-srch-highlight-text);*/ font-weight: 700; font-style: normal; /* padding: 1px 4px; border-radius: 3px;*/ } .article-content.search-result-body { font-size: 16px; color: var(--fili-srch-text-body); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* ========================================================================== PARTIAL: EMPTY SEARCH RESULTS (_fili-search-empty.css) ========================================================================== */ .search-empty-state { text-align: center; padding: 48px 20px; background: var(--fili-srch-bg-card); border: 1px dashed var(--fili-srch-border-input); border-radius: var(--fili-srch-radius-card); margin: 20px 0; } .search-empty-state .empty-icon { font-size: 42px; color: var(--fili-srch-icon-color); margin-bottom: 16px; } .search-empty-state h5 { font-family: var(--fili-srch-font-heading); font-weight: 700; color: var(--fili-srch-text-dark); margin-bottom: 8px; } .search-form-card { background: var(--fili-srch-bg-card); border: 1px solid var(--fili-srch-border); border-radius: var(--fili-srch-radius-card); padding: 16px 20px; box-shadow: var(--fili-srch-shadow-sm); } .search-input-wrapper { position: relative; display: flex; align-items: center; } .btn-submit-search { position: absolute; left: 12px; background: transparent; border: none; color: var(--fili-srch-icon-color); font-size: 16px; cursor: pointer; padding: 6px; display: flex; align-items: center; justify-content: center; z-index: 2; transition: color var(--transition-fast, 0.15s ease); } .btn-submit-search:hover { color: var(--fili-srch-primary); } /* Red Accent Spinner Override */ .btn-submit-search .spinner-border { width: 1rem; height: 1rem; color: var(--fili-srch-primary); border-width: 0.15em; } /* Primary Search Field */ .search-input-field { width: 100%; font-size: 15px; padding: 11px 42px 11px 42px; border-radius: var(--fili-srch-radius-sm); border: 1px solid var(--fili-srch-border-input); background-color: var(--fili-srch-bg-input); color: var(--fili-srch-text-dark); transition: background-color var(--transition-fast, 0.15s ease), border-color var(--transition-fast, 0.15s ease), box-shadow var(--transition-fast, 0.15s ease); } .search-input-field:focus { background-color: var(--fili-srch-bg-card); border-color: var(--fili-srch-primary); box-shadow: var(--fili-srch-shadow-focus); outline: none; } /* Clear Input (X) Button */ .btn-clear-search { position: absolute; right: 14px; background: none; border: none; color: var(--fili-srch-icon-color); font-size: 18px; cursor: pointer; padding: 0; transition: color var(--transition-fast, 0.15s ease); } .btn-clear-search:hover { color: var(--fili-srch-primary); } /* Search Metadata & Result Counter */ .search-meta-text { font-size: 14px; color: var(--fili-srch-text-body); } .search-count-badge { font-family: var(--fili-srch-font-heading); font-weight: 700; color: var(--fili-srch-text-dark); } .search-query-highlight { font-weight: 600; color: var(--fili-srch-primary); } /* ========================================================================== MODULE: FILI SEARCH VIEW (fili-search.css) Handles Search Input, Live Animations, DB Article Cards, & Empty States ========================================================================== */ /*@import "_fili-search-form.css"; @import "_fili-search-card.css"; @import "_fili-search-sidebar.css";*/ .fili-search-wrapper, .search-form-card, .search-card-item, .search-empty-state { /* Typography */ --fili-srch-font-body: var(--font-primary, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif); --fili-srch-font-heading: var(--font-heading, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif); /* Red Accent */ --fili-srch-primary: #FF5555; --fili-srch-primary-hover: #e04444; /* Text Colors */ --fili-srch-text-dark: var(--color-text-heading, #17222b); --fili-srch-text-body: #475569; --fili-srch-text-muted: var(--color-text-muted, #64748b); --fili-srch-icon-color: #94a3b8; /* Surfaces & Input Borders */ --fili-srch-bg-card: var(--color-bg-body, #ffffff); --fili-srch-bg-input: #f8fafc; --fili-srch-border: var(--color-border, #e2e8f0); --fili-srch-border-input: #cbd5e1; /* Search Term Highlight Styling */ --fili-srch-highlight-bg: #fff3c4; --fili-srch-highlight-text: #854d0e; /* Radii & Shadows */ --fili-srch-radius-card: var(--radius-lg, 12px); --fili-srch-radius-sm: var(--radius-sm, 8px); --fili-srch-shadow-sm: 0 4px 15px rgba(0, 0, 0, 0.03); --fili-srch-shadow-focus: 0 0 0 3px rgba(255, 85, 85, 0.18); } .search-form-card, .search-card-item, .search-empty-state { font-family: var(--fili-srch-font-body); } .search-empty-state { text-align: center; padding: 48px 20px; background: var(--fili-srch-bg-card); border: 1px dashed var(--fili-srch-border-input); border-radius: var(--fili-srch-radius-card); margin: 20px 0; } .search-empty-state .empty-icon { font-size: 42px; color: var(--fili-srch-icon-color); margin-bottom: 16px; } .search-empty-state h5 { font-family: var(--fili-srch-font-heading); font-weight: 700; color: var(--fili-srch-text-dark); margin-bottom: 8px; } #searchResultsContainer { transition: opacity 0.25s ease, transform 0.25s ease; will-change: opacity, transform; } /* Opacity kept at 1 so skeleton placeholders remain fully visible while fetching */ #searchResultsContainer.is-searching { opacity: 1; pointer-events: none; } /* Staggered Card Entrance Animation for real populated result items */ .search-results-list .search-card-item:not(.skeleton-card) { animation: searchCardFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes searchCardFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .skeleton-card { padding: 20px 0; border-bottom: 1px solid var(--fili-srch-border, #f0f0f0); pointer-events: none; } .skeleton-card:last-child { border-bottom: none; } .skeleton-box { background-color: #e2e8f0; background-image: linear-gradient( 90deg, #e2e8f0 0%, #f8fafc 40%, #e2e8f0 80% ); background-size: 200% 100%; background-repeat: no-repeat; animation: ytSkeletonShimmer 1.4s infinite linear; } @keyframes ytSkeletonShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .skeleton-card .contentView { display: flex; flex-direction: column; gap: 16px; } @media (min-width: 576px) { .skeleton-card .contentView { flex-direction: row; align-items: flex-start; } .skeleton-card .search-card-thumb { flex: 0 0 190px; width: 190px; aspect-ratio: 16 / 10; border-radius: 8px; } } .skeleton-card .search-card-body { flex: 1; min-width: 0; } .skeleton-text-pill { border-radius: 4px; display: block; } .skeleton-line-title { height: 18px; margin-bottom: 6px; background-color: #cbd5e1; background-image: linear-gradient( 90deg, #cbd5e1 0%, #f1f5f9 40%, #cbd5e1 80% ); } /* Meta Clock & Date Line */ .skeleton-line-meta { height: 12px; width: 130px; margin-top: 8px; margin-bottom: 12px; } .skeleton-line-body { height: 13px; margin-bottom: 6px; } /* Width Helpers */ .w-100 { width: 100%; } .w-90 { width: 90%; } .w-80 { width: 80%; } .w-65 { width: 65%; } .w-45 { width: 45%; } #searchResultsContainer { scroll-margin-top: 70px; } /*.category-page-title { margin-top: 20px; }*/ .fili-sidebar-wrapper { --fili-sb-sticky-top: 0px; --fili-sb-gap: 20px; --fili-sb-accent: var(--color-brand-red, #D12F2F); --fili-sb-accent-hover: var(--color-brand-red-hover, #A82323); --fili-sb-text: var(--color-text-heading, #0f172a); --fili-sb-border: #e2e8f0; position: sticky; top: var(--fili-sb-sticky-top); display: flex; flex-direction: column; gap: var(--fili-sb-gap); width: 100%; z-index: 10; box-sizing: border-box; } .fili-sidebar-wrapper .fili-ad-block { width: 100%; display: flex; align-items: center; } .fili-sidebar-wrapper .fili-ad-block:empty { display: none; } .fili-sidebar-wrapper .fili-cat-sidebar, .fili-sidebar-wrapper .fili-cat-sticky-sidebar { width: 100%; background: transparent; border: none; padding: 0; margin: 0; box-shadow: none; } .fili-sidebar-wrapper .fili-cat-header { display: flex; align-items: center; margin-bottom: 12px; border-bottom: 1px solid var(--fili-sb-border); padding-bottom: 0; } .fili-sidebar-wrapper .fili-cat-title { margin: 0; font-family: var(--font-heading, sans-serif); font-size: 18px; font-weight: 400; color: #ffffff !important; background-color: var(--fili-sb-accent) !important; padding: 6px 14px; display: inline-block; text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.2; transition: background-color 0.2s ease, color 0.2s ease; } .fili-sidebar-wrapper .fili-cat-title a { color: #ffffff !important; text-decoration: none !important; transition: color 0.2s ease; } .fili-sidebar-wrapper .fili-cat-title:has(a[href]) { cursor: pointer; } .fili-sidebar-wrapper .fili-cat-title:has(a[href]):hover { background-color: var(--fili-sb-accent-hover) !important; color: #ffffff !important; } .fili-sidebar-wrapper .fili-cat-title:has(a[href]):hover a { color: #ffffff !important; } @media (max-width: 991px) { .fili-sidebar-wrapper { position: static; margin-top: 20px; } .fili-sidebar-wrapper .fili-ad-block { justify-content: center; } } @media (max-width: 576px) { .fili-sidebar-wrapper .fili-ad-block { display: none !important; } } /* ========================================================================== PARTIAL: YOUTUBE-STYLE SKELETON LOADER (_fili-search-skeleton.css) ========================================================================== */ .skeleton-card { padding: 20px 0; border-bottom: 1px solid var(--fili-srch-border, #f0f0f0); pointer-events: none; } .skeleton-card:last-child { border-bottom: none; } .skeleton-box { background-color: #e2e8f0; background-image: linear-gradient( 90deg, #e2e8f0 0%, #f8fafc 40%, #e2e8f0 80% ); background-size: 200% 100%; background-repeat: no-repeat; animation: ytSkeletonShimmer 1.4s infinite linear; } @keyframes ytSkeletonShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .skeleton-card .contentView { display: flex; flex-direction: column; gap: 16px; } @media (min-width: 576px) { .skeleton-card .contentView { flex-direction: row; align-items: flex-start; } .skeleton-card .search-card-thumb { flex: 0 0 190px; width: 190px; aspect-ratio: 16 / 10; border-radius: 8px; } } .skeleton-card .search-card-body { flex: 1; min-width: 0; } .skeleton-text-pill { border-radius: 4px; display: block; } .skeleton-line-title { height: 18px; margin-bottom: 6px; background-color: #cbd5e1; background-image: linear-gradient( 90deg, #cbd5e1 0%, #f1f5f9 40%, #cbd5e1 80% ); } /* Meta Clock & Date Line */ .skeleton-line-meta { height: 12px; width: 130px; margin-top: 8px; margin-bottom: 12px; } .skeleton-line-body { height: 13px; margin-bottom: 6px; } /* Width Helpers */ .w-100 { width: 100%; } .w-90 { width: 90%; } .w-80 { width: 80%; } .w-65 { width: 65%; } .w-45 { width: 45%; } /* ========================================================================== PARTIAL: SEARCH VARIABLES & BASE SCOPE (_fili-search-variables.css) ========================================================================== */ .fili-search-wrapper, .search-form-card, .search-card-item, .search-empty-state { /* Typography */ --fili-srch-font-body: var(--font-primary, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif); --fili-srch-font-heading: var(--font-heading, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif); /* Red Accent */ --fili-srch-primary: #FF5555; --fili-srch-primary-hover: #e04444; /* Text Colors */ --fili-srch-text-dark: var(--color-text-heading, #17222b); --fili-srch-text-body: #475569; --fili-srch-text-muted: var(--color-text-muted, #64748b); --fili-srch-icon-color: #94a3b8; /* Surfaces & Input Borders */ --fili-srch-bg-card: var(--color-bg-body, #ffffff); --fili-srch-bg-input: #f8fafc; --fili-srch-border: var(--color-border, #e2e8f0); --fili-srch-border-input: #cbd5e1; /* Search Term Highlight Styling */ --fili-srch-highlight-bg: #fff3c4; --fili-srch-highlight-text: #854d0e; /* Radii & Shadows */ --fili-srch-radius-card: var(--radius-lg, 12px); --fili-srch-radius-sm: var(--radius-sm, 8px); --fili-srch-shadow-sm: 0 4px 15px rgba(0, 0, 0, 0.03); --fili-srch-shadow-focus: 0 0 0 3px rgba(255, 85, 85, 0.18); } .search-form-card, .search-card-item, .search-empty-state { font-family: var(--fili-srch-font-body); } .fili-ir-awards-container, .fili-irawards1-container, #filiIrAwardsContainer, #irAwardsContainer { width: 100%; max-height: 67px; margin: 0 auto; overflow: hidden; background-color: transparent; line-height: 0; font-size: 0; transition: max-height 0.2s ease-in-out, opacity 0.2s ease-in-out; } .fili-ir-awards-container iframe, .fili-irawards1-container iframe, #filiIrAwardsContainer iframe, #irAwardsContainer iframe { display: block; width: 100%; height: 67px; border: 0; margin: 0; padding: 0; border-radius: 6px; } .fili-ir-awards-container:empty, .fili-irawards1-container:empty, #filiIrAwardsContainer:empty, #irAwardsContainer:empty { display: none !important; max-height: 0 !important; margin: 0 !important; padding: 0 !important; } /* ========================================== FILI MASTER TEMPLATE STYLESHEET ========================================== */ /*@import '_fili-template-irawards.css'; */ .fili-dynamic-template:empty, .js-dynamic-template:empty { display: none !important; height: 0 !important; max-height: 0 !important; margin: 0 !important; padding: 0 !important; border: none !important; } /*@import '_fili-three-topic-news.css'; */ /* Shimmer Animation Keyframes */ @keyframes fili3TopSkeletonShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Skeleton Container using your exact gradient (rgba(23, 34, 43, ...)) */ .fili-three-topic-news .feature-card-skeleton { background: linear-gradient(180deg, rgba(23, 34, 43, 0.4) 0%, rgba(23, 34, 43, 0.92) 100%); border-radius: var(--fili-3top-radius); min-height: 520px; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; box-shadow: var(--fili-3top-shadow); } /* Shimmer Base Lines matching overlay transparency */ .fili-three-topic-news .skeleton-box { background: linear-gradient( 90deg, rgba(255, 255, 255, 0.08) 25%, rgba(255, 255, 255, 0.2) 37%, rgba(255, 255, 255, 0.08) 63% ); background-size: 400% 100%; animation: fili3TopSkeletonShimmer 1.6s ease-in-out infinite; border-radius: 4px; } /* Skeleton Layout Dimensions */ .fili-three-topic-news .skeleton-tag { width: 76px; height: 24px; border-radius: var(--radius-sm, 4px); } .fili-three-topic-news .skeleton-title-line { height: 24px; margin-bottom: 12px; } .fili-three-topic-news .skeleton-title-line.w-100 { width: 100%; } .fili-three-topic-news .skeleton-title-line.w-85 { width: 85%; } .fili-three-topic-news .skeleton-title-line.w-60 { width: 60%; margin-bottom: 16px; } .fili-three-topic-news .skeleton-footer { border-top: 1px solid var(--fili-3top-border-light); padding-top: 14px; display: flex; align-items: center; } .fili-three-topic-news .skeleton-read-more { width: 90px; height: 14px; } /* Responsive Handling */ @media (max-width: 640px) { .fili-three-topic-news .feature-card-skeleton { min-height: 420px; padding: 18px; } .fili-three-topic-news .skeleton-title-line { height: 18px; } } .fili-three-topic-news { /* Fonts */ --fili-3top-font-body: var(--font-primary, sans-serif); --fili-3top-font-heading: var(--font-heading, sans-serif); /* Palette & Brand Tokens */ --fili-3top-bg: transparent; --fili-3top-tag-bg: var(--color-brand-red, #D12F2F); --fili-3top-tag-hover: var(--color-brand-red-hover, #A82323); --fili-3top-accent-bright: #ff4d4d; --fili-3top-tag-text: var(--color-text-inverse, #ffffff); --fili-3top-text-light: #ffffff; --fili-3top-text-dark: var(--color-text-heading, #0f172a); --fili-3top-border-light: rgba(255, 255, 255, 0.25); /* Radii & Shadows */ --fili-3top-radius: var(--radius-md, 8px); --fili-3top-radius-sm: var(--radius-sm, 4px); --fili-3top-shadow: var(--shadow-md, 0 4px 15px rgba(0, 0, 0, 0.12)); --fili-3top-shadow-hover: var(--shadow-lg, 0 10px 25px rgba(0, 0, 0, 0.22)); /* Motion */ --fili-3top-ease-smooth: cubic-bezier(0.16, 1, 0.3, 1); --fili-3top-duration: 0.35s; background-color: var(--fili-3top-bg); padding: 30px 0; font-family: var(--fili-3top-font-body); } .fili-three-topic-news .container { max-width: 1200px; margin: 0 auto; padding: 0 15px; } .fili-three-topic-news .section-label { color: var(--fili-3top-text-dark); font-family: var(--fili-3top-font-heading); font-size: 14px; font-weight: 700; margin-bottom: 20px; display: inline-block; border-left: 4px solid var(--fili-3top-tag-bg); padding-left: 12px; text-transform: uppercase; } .fili-three-topic-news .card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .fili-three-topic-news .feature-card { position: relative; min-height: 520px; border-radius: var(--fili-3top-radius); overflow: hidden; background-size: cover; background-position: center; display: flex; flex-direction: column; justify-content: space-between; padding: 24px; box-shadow: var(--fili-3top-shadow); transition: transform var(--fili-3top-duration) var(--fili-3top-ease-smooth), box-shadow var(--fili-3top-duration) var(--fili-3top-ease-smooth); will-change: transform, box-shadow; text-decoration: none !important; color: #ffffff; isolation: isolate; cursor: pointer; } .fili-three-topic-news .feature-card:hover { transform: translateY(-4px); box-shadow: var(--fili-3top-shadow-hover); color: #ffffff; } /* Dedicated Overlay Element */ .fili-three-topic-news .card-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(23, 34, 43, 0.2) 0%, rgba(23, 34, 43, 0.92) 100%); transition: background 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .fili-three-topic-news .feature-card:hover .card-overlay { background: linear-gradient(180deg, rgba(23, 34, 43, 0.3) 0%, rgba(23, 34, 43, 0.98) 100%); } .fili-three-topic-news .fili-badge-tag { display: inline-block; border: 1px solid rgba(255, 255, 255, 0.3); color: var(--color-text-inverse, #ffffff) !important; background: rgba(15, 23, 42, 0.65); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 4px 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; border-radius: var(--fili-3top-radius-sm); text-transform: uppercase; text-decoration: none; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; position: relative; z-index: 3; } .fili-three-topic-news .fili-badge-tag:hover { background-color: var(--fili-3top-tag-bg, #D12F2F); border-color: var(--fili-3top-tag-bg, #D12F2F); color: #ffffff !important; } .fili-three-topic-news .card-bottom { position: relative; z-index: 2; margin-top: auto; width: 100%; } .fili-three-topic-news .card-title { font-family: var(--fili-3top-font-heading); font-size: 25px; font-weight: 700; line-height: 1.35; margin-bottom: 16px; color: #ffffff; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; transition: color 0.2s ease; } .fili-three-topic-news .feature-card:hover .card-title { color: var(--fili-3top-accent-bright, #ff4d4d); } .fili-three-topic-news .card-footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--fili-3top-border-light); padding-top: 14px; } .fili-three-topic-news .read-more { display: inline-flex; align-items: center; gap: 6px; font-family: var(--fili-3top-font-heading); font-size: 16px; font-weight: 700; color: var(--fili-3top-text-light); text-transform: uppercase; letter-spacing: 0.8px; opacity: 0.9; transition: opacity 0.2s ease, color 0.2s ease; } .fili-three-topic-news .read-more-icon { font-size: 11px; transition: transform 0.3s var(--fili-3top-ease-smooth); } .fili-three-topic-news .feature-card:hover .read-more { opacity: 1; color: var(--fili-3top-accent-bright, #ff4d4d); } .fili-three-topic-news .feature-card:hover .read-more-icon { transform: translateX(4px); } .fili-three-topic-news .social-share { display: flex; gap: 8px; } .fili-three-topic-news .social-btn { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--fili-3top-border-light); display: flex; align-items: center; justify-content: center; color: var(--fili-3top-text-light); font-size: 11px; transition: background-color 0.25s var(--fili-3top-ease-smooth), border-color 0.25s var(--fili-3top-ease-smooth); } .fili-three-topic-news .social-btn:hover { background-color: var(--fili-3top-tag-bg); border-color: var(--fili-3top-tag-bg); } /* Shimmer Animation Keyframes */ @keyframes fili3TopSkeletonShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Skeleton Container using your exact gradient (rgba(23, 34, 43, ...)) */ .fili-three-topic-news .feature-card-skeleton { background: linear-gradient(180deg, rgba(23, 34, 43, 0.4) 0%, rgba(23, 34, 43, 0.92) 100%); border-radius: var(--fili-3top-radius); min-height: 520px; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; box-shadow: var(--fili-3top-shadow); } /* Shimmer Base Lines matching overlay transparency */ .fili-three-topic-news .skeleton-box { background: linear-gradient( 90deg, rgba(255, 255, 255, 0.08) 25%, rgba(255, 255, 255, 0.2) 37%, rgba(255, 255, 255, 0.08) 63% ); background-size: 400% 100%; animation: fili3TopSkeletonShimmer 1.6s ease-in-out infinite; border-radius: 4px; } /* Skeleton Layout Dimensions */ .fili-three-topic-news .skeleton-tag { width: 76px; height: 24px; border-radius: var(--radius-sm, 4px); } .fili-three-topic-news .skeleton-title-line { height: 24px; margin-bottom: 12px; } .fili-three-topic-news .skeleton-title-line.w-100 { width: 100%; } .fili-three-topic-news .skeleton-title-line.w-85 { width: 85%; } .fili-three-topic-news .skeleton-title-line.w-60 { width: 60%; margin-bottom: 16px; } .fili-three-topic-news .skeleton-footer { border-top: 1px solid var(--fili-3top-border-light); padding-top: 14px; display: flex; align-items: center; } .fili-three-topic-news .skeleton-read-more { width: 90px; height: 14px; } /* Responsive Handling */ @media (max-width: 640px) { .fili-three-topic-news .feature-card-skeleton { min-height: 420px; padding: 18px; } .fili-three-topic-news .skeleton-title-line { height: 18px; } } @media (max-width: 1024px) { .fili-three-topic-news .card-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .fili-three-topic-news .card-grid { grid-template-columns: 1fr; } .fili-three-topic-news .feature-card { min-height: 420px; padding: 18px; } .fili-three-topic-news .card-title { font-size: 18px; } } /*@import "_fili-trending-stocks.css"; */ /* Outer Skeleton Container & Grid */ .fili-trending-ticker-skeleton { background-color: #fcfcfd; padding: 6px; width: 100%; } .fili-trending-ticker-skeleton .fili-trending-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; width: 100%; } .fili-trending-skeleton-card { height: 64px; border-radius: 4px; background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%); background-size: 200% 100%; animation: filiSkeletonShimmer 1.4s infinite ease-in-out; } @keyframes filiSkeletonShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .fili-trending-ticker-widget { font-family: var(--font-primary, inherit); --fili-trend-color-up: #00a651; /* Stock Green */ --fili-trend-color-down: #d93025; /* Stock Red */ --fili-trend-color-ref: #f58220; /* Stock Amber */ --fili-trend-color-purple: #c026d3; /* Stock Ceiling (Giá trần) */ --fili-trend-color-cyan: #0284c7; /* Stock Floor (Giá sàn) */ background-color: #fcfcfd; padding: 0px; width: 100%; } .fili-trending-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; width: 100%; } .fili-trending-card { display: flex; flex-direction: column; justify-content: space-between; padding: 8px 10px; height: 64px; background-color: #ffffff; border: 1px solid #f1f1f1; border-radius: 2px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02); transition: background-color 0.15s ease, border-color 0.15s ease; box-sizing: border-box; min-width: 0; overflow: hidden; font-family: inherit; } .fili-trending-card:hover { background-color: #fafafa; border-color: #e2e2e2; } /* Header Section */ .fili-trending-header { display: flex; align-items: center; justify-content: space-between; gap: 4px; height: 20px; min-width: 0; line-height: 1; } .fili-trending-title { display: flex; align-items: center; gap: 6px; min-width: 0; } /* Stock Status Indicators (CSS Triangle Arrows) */ .fili-trending-icon { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; flex-shrink: 0; line-height: 0; } .fili-trending-icon .arr-up { display: block; width: 0; height: 0; border-left: 4.5px solid transparent; border-right: 4.5px solid transparent; border-bottom: 7px solid currentColor; } .fili-trending-icon .arr-down { display: block; width: 0; height: 0; border-left: 4.5px solid transparent; border-right: 4.5px solid transparent; border-top: 7px solid currentColor; } .fili-trending-icon .arr-flat { display: block; width: 7px; height: 2px; background-color: currentColor; } .fili-trending-sym { font-family: var(--font-heading, inherit); font-size: 16px; color: #333333; letter-spacing: -0.1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1; text-decoration: none; } .fili-trending-sym:hover { color: var(--color-brand-red); text-decoration: underline; } .fili-trending-chart { width: 50px; height: 20px; object-fit: contain; flex-shrink: 0; display: block; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease; } .fili-trending-chart.is-loaded { opacity: 1; visibility: visible; } /* Body Section */ .fili-trending-body { display: flex; align-items: baseline; justify-content: flex-start; gap: 6px; min-width: 0; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; line-height: 1; } .fili-trending-price { font-family: var(--font-primary, inherit); font-size: 13px; font-weight: 500; color: #0f172a; white-space: nowrap; } .fili-trending-change, .fili-trending-percent { font-family: inherit; font-size: 13px; font-weight: 500; white-space: nowrap; } /* Vietnamese Market Movement Colors */ .fili-trending-ticker-widget .text-up, .text-up { color: var(--fili-trend-color-up) !important; } .fili-trending-ticker-widget .text-down, .text-down { color: var(--fili-trend-color-down) !important; } .fili-trending-ticker-widget .text-ref, .text-ref { color: var(--fili-trend-color-ref) !important; } .fili-trending-ticker-widget .text-purple, .text-purple { color: var(--fili-trend-color-purple) !important; } .fili-trending-ticker-widget .text-cyan, .text-cyan { color: var(--fili-trend-color-cyan) !important; } /* Real-Time Update Flash Animation */ @keyframes tickerFlash { 0% { background-color: rgba(0, 166, 81, 0.12); } 100% { background-color: #ffffff; } } .fili-trending-card.quote-updated { animation: tickerFlash 0.8s ease-out; } /* ========================================================================== TECHNICAL ANALYSIS SIGNAL BADGES ========================================================================== */ .fili-signal-wrapper { display: inline-flex; align-items: center; } .fili-trending-signal { display: inline-block; padding: 1px 4px; font-size: 9px; font-weight: 700; line-height: 1.1; border-radius: 2px; text-decoration: none !important; white-space: nowrap; transition: opacity 0.15s ease; } .fili-trending-signal:hover { opacity: 0.85; } /* Buy Signals */ .signal-strong-buy { background-color: #00a651; color: #ffffff !important; } .signal-buy { background-color: rgba(0, 166, 81, 0.15); color: #00a651 !important; } /* Neutral Signals */ .signal-neutral { background-color: #f1f5f9; color: #64748b !important; } /* Sell Signals */ .signal-sell { background-color: rgba(217, 48, 37, 0.15); color: #d93025 !important; } .signal-strong-sell { background-color: #d93025; color: #ffffff !important; } /* Outer Skeleton Container & Grid */ .fili-trending-ticker-skeleton { background-color: #fcfcfd; /* padding: 6px;*/ width: 100%; } .fili-trending-ticker-skeleton .fili-trending-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; width: 100%; } .fili-trending-skeleton-card { height: 64px; border-radius: 4px; background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%); background-size: 200% 100%; animation: filiSkeletonShimmer 1.4s infinite ease-in-out; } @keyframes filiSkeletonShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @keyframes filiSkeletonShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Skeleton Container */ .fili-skeleton-wrapper { pointer-events: none; user-select: none; } .fili-skeleton-item { margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid #eef2f5; } .fili-skeleton-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } /* Shimmer Animation Base */ .fili-skeleton-box { background: linear-gradient( 90deg, #e2e8f0 25%, #f1f5f9 37%, #e2e8f0 63% ); background-size: 400% 100%; animation: filiSkeletonShimmer 1.6s ease-in-out infinite; border-radius: 4px; display: block; } /* Skeleton Structure Sizes */ .fili-skeleton-category { height: 12px; width: 80px; margin-bottom: 8px; } .fili-skeleton-title { height: 18px; width: 100%; margin-bottom: 6px; } .fili-skeleton-title.short { width: 65%; margin-bottom: 10px; } .fili-skeleton-excerpt { height: 14px; width: 90%; margin-bottom: 12px; } .fili-skeleton-meta { height: 12px; width: 140px; } .fili-footer-component .fili-more-news-wrapper { position: relative; padding-left: 20px; margin-left: 11px; border-left: 2px solid var(--fili-ftr-border, #e7e8e9); } .fili-footer-component .fili-single-more-news { position: relative; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px dashed var(--fili-ftr-border, #e7e8e9); } .fili-footer-component .fili-single-more-news:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .fili-footer-component .fili-single-more-news::before { content: ""; position: absolute; height: 11px; width: 11px; background: var(--fili-ftr-bg, #ffffff); border: 2px solid var(--fili-ftr-border, #e7e8e9); border-radius: 50%; left: -26px; top: 6px; transition: border-color var(--transition-fast, 0.2s ease), background-color var(--transition-fast, 0.2s ease); z-index: 1; } .fili-footer-component .fili-single-more-news::after { content: ""; position: absolute; height: 5px; width: 5px; background: var(--fili-ftr-accent, #D12F2F); border-radius: 50%; left: -23px; top: 9px; transition: transform var(--transition-fast, 0.2s ease); z-index: 2; } .fili-footer-component .fili-single-more-news:hover::before { border-color: var(--fili-ftr-accent, #D12F2F); background-color: var(--fili-ftr-bg, #ffffff); } .fili-footer-component .fili-single-more-news:hover::after { transform: scale(1.3); } .fili-footer-component .fili-single-more-news .fili-meta-category { color: var(--fili-ftr-accent, #D12F2F); font-size: 16px; font-weight: 700; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; } .fili-footer-component .fili-single-more-news h4 { font-family: var(--fili-ftr-font-heading); font-size: 16px; font-weight: 600; line-height: 1.4; margin-bottom: 6px; } .fili-footer-component .fili-single-more-news h4 a { color: var(--fili-ftr-text, #333333); text-decoration: none; transition: color var(--transition-fast, 0.2s ease); } .fili-footer-component .fili-single-more-news h4 a:hover { color: var(--fili-ftr-accent, #D12F2F); } .fili-footer-component .fili-single-more-news .fili-news-excerpt { font-size: 16px; color: var(--fili-ftr-muted, #747a80); line-height: 1.5; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .fili-footer-component .fili-news-stats { display: flex; align-items: center; gap: 14px; list-style: none; padding: 0; margin: 0; font-size: 12px; color: var(--fili-ftr-muted, #747a80); } .fili-footer-component .fili-news-stats li i { margin-right: 4px; } .fili-footer-component .fili-news-stats li i.fa-clock { font-size: 11px; } .fili-footer-component { --fili-ftr-font-body: var(--font-primary, sans-serif); --fili-ftr-font-heading: var(--font-heading, sans-serif); --fili-ftr-accent: #FF5252; --fili-ftr-red: #FF5252; --fili-ftr-bg: #263145; --fili-ftr-box-bg: #1F2A3E; --fili-ftr-copyright-bg: #1A212F; --fili-ftr-text: #FFFFFF; --fili-ftr-muted: #94A3B8; --fili-ftr-border: #334155; --fili-ftr-radius-sm: var(--radius-sm, 4px); --fili-ftr-radius-md: var(--radius-md, 6px); --fili-ftr-stagger-step: 0.04s; background-color: var(--fili-ftr-bg); color: var(--fili-ftr-text); padding-top: 50px; font-family: var(--fili-ftr-font-body); font-size: 15px; line-height: 1.6; position: relative; width: 100%; } .fili-social-grid .fb-page, .fili-social-grid .fb-page > span, .fili-social-grid .fb-page iframe { width: 100% !important; max-width: 100% !important; min-height: 70px; } .fili-social-grid .fb-page { overflow: hidden; } .fili-footer-component a { color: var(--fili-ftr-text); text-decoration: none; transition: color 0.2s ease, transform 0.2s ease; } .fili-footer-component a:hover { color: var(--fili-ftr-accent); } .fili-footer-component .fili-divider { height: 1px; background-color: var(--fili-ftr-border); width: 100%; } .fili-footer-component .fili-widget-title { font-family: var(--fili-ftr-font-heading); font-size: 18px; color: var(--fili-ftr-red); font-weight: 700; margin-bottom: 18px; position: relative; padding-bottom: 8px; } .fili-footer-component .fili-widget-title a:hover { color: var(--fili-ftr-accent); } .fili-footer-component .fili-footer-logo-section { position: relative; } .fili-footer-component .fili-logo-line { height: 1px; background-color: var(--fili-ftr-border); } .fili-footer-component .fili-logo-img { max-height: 70px; transition: opacity 0.2s ease; } .fili-footer-component .fili-logo-img:hover { opacity: 0.85; } .fili-footer-component .fili-nav-group { position: relative; display: flex; flex-direction: column; width: 100%; } .fili-footer-component .fili-nav-parent-link { font-size: 16px; font-weight: 500; color: var(--fili-ftr-text); display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 6px; padding: 4px 16px; line-height: 1.2; cursor: pointer; } .fili-footer-component .fili-nav-parent-link:hover { color: var(--fili-ftr-accent); } .fili-footer-component .fili-nav-arrow { font-size: 16px; color: var(--fili-ftr-muted); line-height: 1; display: inline-flex; align-items: center; justify-content: center; margin-left: auto; transition: transform 0.25s ease, color 0.15s ease; } .fili-footer-component .fili-nav-group.is-open .fili-nav-arrow { transform: rotate(180deg); color: var(--fili-ftr-accent); } .fili-footer-component .fili-nav-group .fili-nav-list { z-index: 1050; background-color: var(--fili-ftr-box-bg); padding: 0; margin: 0; list-style: none; opacity: 0; visibility: hidden; pointer-events: none; overflow: hidden; transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease, max-height 0.3s ease; } .fili-footer-component .fili-nav-list li { margin: 0; padding: 0; width: 100%; background: transparent; border-bottom: 1px solid var(--fili-ftr-border); } .fili-footer-component .fili-nav-list li:last-child { border-bottom: none; } .fili-footer-component .fili-nav-group .fili-nav-list:not(.fili-static-list) li a { display: block; width: 100%; box-sizing: border-box; padding: 12px 16px; background-color: transparent; color: var(--fili-ftr-text); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; opacity: 0; transform: translateY(-8px); transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.15s ease, color 0.15s ease; } .fili-footer-component .fili-nav-list:not(.fili-static-list) li a:hover { background-color: #2A374E; color: var(--fili-ftr-accent); } .fili-footer-component .fili-nav-group.is-open .fili-nav-list:not(.fili-static-list) li a { opacity: 1; transform: translateY(0); } .fili-footer-component .fili-nav-group.is-open .fili-nav-list:not(.fili-static-list) li:nth-child(1) a { transition-delay: calc(1 * var(--fili-ftr-stagger-step)); } .fili-footer-component .fili-nav-group.is-open .fili-nav-list:not(.fili-static-list) li:nth-child(2) a { transition-delay: calc(2 * var(--fili-ftr-stagger-step)); } .fili-footer-component .fili-nav-group.is-open .fili-nav-list:not(.fili-static-list) li:nth-child(3) a { transition-delay: calc(3 * var(--fili-ftr-stagger-step)); } .fili-footer-component .fili-nav-group.is-open .fili-nav-list:not(.fili-static-list) li:nth-child(4) a { transition-delay: calc(4 * var(--fili-ftr-stagger-step)); } .fili-footer-component .fili-nav-group.is-open .fili-nav-list:not(.fili-static-list) li:nth-child(5) a { transition-delay: calc(5 * var(--fili-ftr-stagger-step)); } .fili-footer-component .fili-nav-group.is-open .fili-nav-list:not(.fili-static-list) li:nth-child(6) a { transition-delay: calc(6 * var(--fili-ftr-stagger-step)); } .fili-footer-component .fili-brand-desc { color: #fff; font-size: 14px; line-height: 1.5; } .fili-footer-component .fili-contacts-bar { display: flex; flex-direction: column; } .fili-footer-component .fili-single-contact { position: relative; margin-bottom: 12px; } .fili-footer-component .fili-single-contact h6 { font-family: var(--fili-ftr-font-heading); font-size: 15px; font-weight: 700; margin-bottom: 4px; color: var(--fili-ftr-text); display: flex; align-items: center; gap: 6px; } .fili-footer-component .fili-single-contact a, .fili-footer-component .fili-single-contact p { display: block; color: var(--fili-ftr-text); font-size: 14px; font-weight: 500; margin-bottom: 2px; } .fili-footer-component .fili-contact-icon { color: var(--fili-ftr-red); font-size: 14px; width: 16px; text-align: center; flex-shrink: 0; } .fili-footer-component .fili-social-grid { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .fili-footer-component .fili-social-item { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--fili-ftr-box-bg); color: var(--fili-ftr-text); transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease; } .fili-footer-component .fili-social-item:hover { transform: translateY(-3px); background: var(--fili-ftr-accent); box-shadow: 0 4px 12px rgba(255, 82, 82, 0.3); } .fili-footer-component .fili-partner-box { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--fili-ftr-border); padding: 16px; border-radius: var(--fili-ftr-radius-md); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .fili-footer-component .fili-partner-box:hover { border-color: var(--fili-ftr-accent); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25); } .fili-footer-component .fili-partner-name a { font-family: var(--fili-ftr-font-heading); color: var(--fili-ftr-red); font-weight: 800; font-size: 18px; } .fili-footer-component .fili-copyright-bar { background-color: var(--fili-ftr-copyright-bg); margin-top: 40px; padding: 16px 0; font-size: 14px; color: #fff; } .fili-footer-component .fili-copyright-menu { display: flex; justify-content: center; gap: 15px; list-style: none; padding: 0; margin: 0; } @media (max-width: 991.98px) { .fili-footer-component .fili-nav-group .fili-nav-list { position: relative; width: 100%; max-height: 0; border: none; border-radius: var(--fili-ftr-radius-sm); margin-top: 0; } .fili-footer-component .fili-nav-group.is-open .fili-nav-list { opacity: 1; visibility: visible; pointer-events: auto; max-height: 500px; margin-top: 8px; border: 1px solid var(--fili-ftr-border); } } @media (min-width: 992px) { .fili-footer-component .fili-copyright-menu { justify-content: flex-end; } .fili-footer-component .fili-nav-group .fili-nav-list { position: absolute; top: 100%; left: 0; min-width: 210px; border: 1px solid var(--fili-ftr-border); border-top: none; border-radius: 0 0 var(--fili-ftr-radius-sm) var(--fili-ftr-radius-sm); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); transform: translateY(8px); } .fili-footer-component .fili-nav-group:hover .fili-nav-arrow, .fili-footer-component .fili-nav-group:focus-within .fili-nav-arrow { transform: rotate(180deg); color: var(--fili-ftr-accent); } .fili-footer-component .fili-nav-group:hover .fili-nav-list, .fili-footer-component .fili-nav-group:focus-within .fili-nav-list { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } .fili-footer-component .fili-nav-group:hover .fili-nav-list:not(.fili-static-list) li a, .fili-footer-component .fili-nav-group:focus-within .fili-nav-list:not(.fili-static-list) li a { opacity: 1; transform: translateY(0); } .fili-footer-component .fili-nav-group:hover .fili-nav-list:not(.fili-static-list) li:nth-child(1) a { transition-delay: calc(1 * var(--fili-ftr-stagger-step)); } .fili-footer-component .fili-nav-group:hover .fili-nav-list:not(.fili-static-list) li:nth-child(2) a { transition-delay: calc(2 * var(--fili-ftr-stagger-step)); } .fili-footer-component .fili-nav-group:hover .fili-nav-list:not(.fili-static-list) li:nth-child(3) a { transition-delay: calc(3 * var(--fili-ftr-stagger-step)); } .fili-footer-component .fili-nav-group:hover .fili-nav-list:not(.fili-static-list) li:nth-child(4) a { transition-delay: calc(4 * var(--fili-ftr-stagger-step)); } .fili-footer-component .fili-nav-group:hover .fili-nav-list:not(.fili-static-list) li:nth-child(5) a { transition-delay: calc(5 * var(--fili-ftr-stagger-step)); } .fili-footer-component .fili-nav-group:hover .fili-nav-list:not(.fili-static-list) li:nth-child(6) a { transition-delay: calc(6 * var(--fili-ftr-stagger-step)); } } @media (max-width: 770px) { .fili-footer-component .fili-footer-nav-section .row { --bs-row-cols: 1 !important; } .fili-footer-component .fili-footer-nav-section .row > .col { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; } .fili-footer-component .fili-footer-main .row.g-4 > [class*="col-"] { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; } } .fili-facebook-banner { display: block; border-radius: 12px; text-decoration: none; color: white; overflow: hidden; position: relative; } .fili-fb-banner-content { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; position: relative; z-index: 1; } .fili-fb-banner-logo { flex-shrink: 0; width: 60px; height: 60px; border-radius: 50%; background: white; padding: 5px; display: flex; align-items: center; justify-content: center; } .fili-fb-logo-img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; } .fili-fb-banner-text { display: flex; flex-direction: column; gap: 4px; flex: 1; } .fili-fb-title { font-size: 1.5rem; font-weight: 700; line-height: 1.3; } .fili-fb-desc { font-size: 0.9rem; opacity: 0.9; line-height: 1.5; } .fili-fb-banner-button { display: flex; align-items: center; justify-content: center; gap: 10px; background: #1877F2; color: #ffffff; padding: 12px 20px; border-radius: 50px; font-weight: 600; font-size: 0.95rem; position: relative; z-index: 1; border: none; width: 100%; box-sizing: border-box; } .fili-fb-banner-button i { font-size: 1.1rem; } @media (max-width: 768px) { .fili-fb-banner-content { align-items: flex-start; gap: 12px; } .fili-fb-banner-logo { width: 50px; height: 50px; } .fili-fb-banner-text { min-height: 60px; } .fili-fb-title { font-size: 1.2rem; line-height: 1.4; margin-bottom: 4px; } .fili-fb-desc { font-size: 0.85rem; line-height: 1.6; } .fili-fb-banner-button { width: 100%; font-size: 0.9rem; padding: 10px 16px; } } .fili-footer-component { --fili-ftr-font-body: var(--font-primary, sans-serif); --fili-ftr-font-heading: var(--font-heading, sans-serif); --fili-ftr-accent: #FF5252; --fili-ftr-red: #FF5252; --fili-ftr-bg: #263145; --fili-ftr-box-bg: #1F2A3E; --fili-ftr-copyright-bg: #1A212F; --fili-ftr-text: #FFFFFF; --fili-ftr-muted: #94A3B8; --fili-ftr-border: #334155; --fili-ftr-radius-sm: var(--radius-sm, 4px); --fili-ftr-radius-md: var(--radius-md, 6px); --fili-ftr-stagger-step: 0.04s; background-color: var(--fili-ftr-bg); color: var(--fili-ftr-text); padding-top: 50px; font-family: var(--fili-ftr-font-body); font-size: 15px; line-height: 1.6; position: relative; width: 100%; } .fili-footer-component a { color: var(--fili-ftr-text); text-decoration: none; transition: color 0.2s ease, transform 0.2s ease; } .fili-footer-component a:hover { color: var(--fili-ftr-accent); } .fili-footer-component .fili-divider { height: 1px; background-color: var(--fili-ftr-border); width: 100%; } .fili-footer-component .fili-widget-title { font-family: var(--fili-ftr-font-heading); font-size: 18px; color: var(--fili-ftr-red); font-weight: 700; margin-bottom: 18px; position: relative; padding-bottom: 8px; } .fili-footer-component .fili-widget-title a:hover { color: var(--fili-ftr-accent); } .fili-footer-component .fili-footer-logo-section { position: relative; } .fili-footer-component .fili-logo-line { height: 1px; background-color: var(--fili-ftr-border); } .fili-footer-component .fili-logo-img { max-height: 70px; transition: opacity 0.2s ease; } .fili-footer-component .fili-logo-img:hover { opacity: 0.85; } .fili-footer-component .fili-nav-group { position: relative; display: flex; flex-direction: column; width: 100%; } .fili-footer-component .fili-nav-parent-link { font-size: 16px; font-weight: 500; color: var(--fili-ftr-text); display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 6px; padding: 4px 20px; line-height: 1.2; } .fili-footer-component .fili-nav-parent-link:hover { color: var(--fili-ftr-accent); } .fili-footer-component .fili-nav-arrow { font-size: 11px; color: var(--fili-ftr-muted); line-height: 1; display: inline-flex; align-items: center; justify-content: center; margin-left: auto; margin-top: 0; transition: transform 0.25s ease, color 0.15s ease; } .fili-footer-component .fili-nav-group:hover .fili-nav-arrow, .fili-footer-component .fili-nav-group:focus-within .fili-nav-arrow { transform: rotate(180deg); color: var(--fili-ftr-accent); } .fili-footer-component .fili-nav-group .fili-nav-list { position: absolute; top: 100%; left: 0; z-index: 1050; min-width: 210px; background-color: var(--fili-ftr-box-bg); border: 1px solid var(--fili-ftr-border); border-top: none; border-radius: 0 0 var(--fili-ftr-radius-sm) var(--fili-ftr-radius-sm); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); padding: 0; margin: 0; list-style: none; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px); transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease; overflow: hidden; } .fili-footer-component .fili-nav-group:hover .fili-nav-list, .fili-footer-component .fili-nav-group:focus-within .fili-nav-list { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } .fili-footer-component .fili-nav-list li { margin: 0; padding: 0; width: 100%; background: transparent; border-bottom: 1px solid var(--fili-ftr-border); } .fili-footer-component .fili-nav-list li:last-child { border-bottom: none; } .fili-footer-component .fili-nav-group .fili-nav-list:not(.fili-static-list) li a { display: block; width: 100%; box-sizing: border-box; padding: 12px 16px; background-color: transparent; color: var(--fili-ftr-text); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; opacity: 0; transform: translateY(-8px); transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.15s ease, color 0.15s ease; } .fili-footer-component .fili-nav-group:hover .fili-nav-list:not(.fili-static-list) li a, .fili-footer-component .fili-nav-group:focus-within .fili-nav-list:not(.fili-static-list) li a { opacity: 1; transform: translateY(0); } .fili-footer-component .fili-nav-group:hover .fili-nav-list:not(.fili-static-list) li:nth-child(1) a, .fili-footer-component .fili-nav-group:focus-within .fili-nav-list:not(.fili-static-list) li:nth-child(1) a { transition-delay: calc(1 * var(--fili-ftr-stagger-step)); } .fili-footer-component .fili-nav-group:hover .fili-nav-list:not(.fili-static-list) li:nth-child(2) a, .fili-footer-component .fili-nav-group:focus-within .fili-nav-list:not(.fili-static-list) li:nth-child(2) a { transition-delay: calc(2 * var(--fili-ftr-stagger-step)); } .fili-footer-component .fili-nav-group:hover .fili-nav-list:not(.fili-static-list) li:nth-child(3) a, .fili-footer-component .fili-nav-group:focus-within .fili-nav-list:not(.fili-static-list) li:nth-child(3) a { transition-delay: calc(3 * var(--fili-ftr-stagger-step)); } .fili-footer-component .fili-nav-group:hover .fili-nav-list:not(.fili-static-list) li:nth-child(4) a, .fili-footer-component .fili-nav-group:focus-within .fili-nav-list:not(.fili-static-list) li:nth-child(4) a { transition-delay: calc(4 * var(--fili-ftr-stagger-step)); } .fili-footer-component .fili-nav-group:hover .fili-nav-list:not(.fili-static-list) li:nth-child(5) a, .fili-footer-component .fili-nav-group:focus-within .fili-nav-list:not(.fili-static-list) li:nth-child(5) a { transition-delay: calc(5 * var(--fili-ftr-stagger-step)); } .fili-footer-component .fili-nav-group:hover .fili-nav-list:not(.fili-static-list) li:nth-child(6) a, .fili-footer-component .fili-nav-group:focus-within .fili-nav-list:not(.fili-static-list) li:nth-child(6) a { transition-delay: calc(6 * var(--fili-ftr-stagger-step)); } .fili-footer-component .fili-nav-list:not(.fili-static-list) li a:hover { background-color: #2A374E; color: var(--fili-ftr-accent); transform: none; } .fili-footer-component .fili-static-list { position: static !important; opacity: 1 !important; visibility: visible !important; transform: none !important; box-shadow: none !important; border: none !important; background: transparent !important; padding: 0 !important; pointer-events: auto !important; } .fili-footer-component .fili-static-list li a { opacity: 1 !important; transform: none !important; padding: 0 !important; background: transparent !important; } .fili-footer-component .fili-brand-desc { color: #fff; font-size: 14px; line-height: 1.5; } .fili-footer-component .fili-brand-desc strong { color: #fff; } .fili-footer-component .fili-contacts-bar { display: flex; flex-direction: column; gap: 0; } .fili-footer-component .fili-single-contact { position: relative; margin-bottom: 12px; } .fili-footer-component .fili-single-contact:last-child { margin-bottom: 0; } .fili-footer-component .fili-single-contact h6 { font-family: var(--fili-ftr-font-heading); font-size: 15px; font-weight: 700; margin-bottom: 4px; position: relative; color: var(--fili-ftr-text); display: flex; align-items: center; gap: 6px; } .fili-footer-component .fili-single-contact a, .fili-footer-component .fili-single-contact p { display: block; color: var(--fili-ftr-text); font-size: 14px; font-weight: 500; margin-bottom: 2px; } .fili-footer-component .fili-contact-icon { color: var(--fili-ftr-red); font-size: 14px; width: 16px; text-align: center; flex-shrink: 0; } .fili-footer-component .fili-social-grid { display: flex; flex-direction: row; align-items: center; gap: 12px; flex-wrap: wrap; } .fili-footer-component .fili-social-item { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--fili-ftr-box-bg); text-decoration: none; color: var(--fili-ftr-text); padding: 0; transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease; } .fili-footer-component .fili-social-item:hover { transform: translateY(-3px); background: var(--fili-ftr-accent); box-shadow: 0 4px 12px rgba(255, 82, 82, 0.3); } .fili-footer-component .fili-social-icon { color:#fff; font-size: 16px; line-height: 1; transition: transform 0.2s ease, color 0.2s ease; } .fili-footer-component .fili-social-item:hover .fili-social-icon { color: #FFFFFF; transform: scale(1.1); } .fili-footer-component .fili-partner-box { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--fili-ftr-border); padding: 16px; border-radius: var(--fili-ftr-radius-md); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .fili-footer-component .fili-partner-box:hover { border-color: var(--fili-ftr-accent); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25); } .fili-footer-component .fili-partner-name a { font-family: var(--fili-ftr-font-heading); color: var(--fili-ftr-red); font-weight: 800; font-size: 18px; transition: opacity 0.2s ease; } .fili-footer-component .fili-partner-name a:hover { opacity: 0.8; } .fili-footer-component .fili-partner-desc { font-size: 13px; color: var(--fili-ftr-muted); margin-bottom: 8px; } .fili-footer-component .fili-partner-info { font-size: 14px; margin-bottom: 2px; } .fili-footer-component .fili-copyright-bar { background-color: var(--fili-ftr-copyright-bg); margin-top: 40px; padding: 16px 0; font-size: 14px; color: #fff; } .fili-footer-component .fili-copyright-menu { display: flex; justify-content: center; gap: 15px; list-style: none; padding: 0; margin: 0; } @media (min-width: 992px) { .fili-footer-component .fili-copyright-menu { justify-content: flex-end; } } .fili-footer-component .fili-copyright-menu a { color: var(--fili-ftr-text); font-size: 14px; transition: color 0.2s ease; } .fili-footer-component .fili-copyright-menu a:hover { color: var(--fili-ftr-accent); } .fili-header-ticker { --fili-htick-bg: #ffffff; --fili-htick-border: #dedede; --fili-htick-text: #333333; --fili-htick-divider: #e2e8f0; --fili-htick-hover-bg: #f8fafc; --fili-htick-color-up: #10b981; --fili-htick-color-down: #ff4d4f; --fili-htick-color-ref: #eab308; background-color: var(--fili-htick-bg); padding: 6px 0; border-bottom: none !important; box-shadow: none !important; font-family: inherit; width: 100%; } .fili-header-ticker .container-xl { display: flex; align-items: center; justify-content: flex-start; min-width: 0; } .fili-logo-box { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding-right: 16px; line-height: 1; flex: 0 0 auto; min-width: 0; } .fili-logo-img { height: 40px; width: auto; max-width: 200px; object-fit: contain; display: block; flex-shrink: 1; } .fili-logo-text { font-size: 22px; font-weight: 700; color: var(--fili-htick-text); } .ticker-wrapper { display: flex; align-items: center; flex: 1 1 auto; width: 100%; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; border-left: none; } .ticker-wrapper::-webkit-scrollbar { display: none; } .ticker-container { display: flex; align-items: center; width: 100%; min-width: 0; gap: 0; } .ticker-card { flex: 1 1 0; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; grid-template-areas: "badge sym chart" "badge body body"; align-items: center; column-gap: 9px; row-gap: 3px; padding: 2px 12px; border-right: 1px solid var(--fili-htick-divider); background-color: transparent; text-decoration: none; cursor: pointer; transition: background-color 0.2s ease; height: 42px; box-sizing: border-box; } .ticker-card:last-child { border-right: none; } .ticker-card:hover { background-color: var(--fili-htick-hover-bg); } @keyframes tickerFlash { 0% { background-color: rgba(16, 185, 129, 0.15); } 100% { background-color: transparent; } } .ticker-card.quote-updated { animation: tickerFlash 0.8s ease-out; } .ticker-header, .ticker-title { display: contents; } .ticker-badge { grid-area: badge; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background-color: transparent; flex-shrink: 0; padding: 0; margin: 0; margin-right: 2px; line-height: 0; align-self: center; } .ticker-badge .arr-up, .ticker-badge .arr-down { display: block; width: 0; height: 0; font-style: normal; } .ticker-badge .arr-up { border-left: 4.5px solid transparent; border-right: 4.5px solid transparent; border-bottom: 7px solid currentColor; margin-top: -1px; } .ticker-badge .arr-down { border-left: 4.5px solid transparent; border-right: 4.5px solid transparent; border-top: 7px solid currentColor; margin-top: 1px; } .ticker-badge .arr-flat { display: block; width: 8px; height: 2.5px; background-color: currentColor; } .ticker-sym { grid-area: sym; min-width: 0; font-size: 16px; font-weight: 600; color: var(--fili-htick-text); white-space: nowrap; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; } .ticker-chart-img { grid-area: chart; width: 40px; height: 14px; max-width: 100%; object-fit: contain; display: block; opacity: 0; visibility: hidden; flex-shrink: 1; margin-left: 1px; transition: opacity 0.25s ease, visibility 0.25s ease; } .ticker-chart-img.is-loaded { opacity: 0.9; visibility: visible; } .ticker-body { grid-area: body; min-width: 0; display: flex; align-items: baseline; justify-content: flex-start; gap: 5px; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; white-space: nowrap; line-height: 1; overflow: hidden; } .ticker-val { flex: 0 0 auto; font-size: 13px; font-weight: 500; color: var(--fili-htick-text) !important; } .ticker-change { min-width: 0; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ticker-body .ticker-change.text-up, .ticker-badge.text-up, .ticker-badge .text-up, .ticker-badge .arr-up, .text-up { color: var(--fili-htick-color-up) !important; } .ticker-body .ticker-change.text-down, .ticker-badge.text-down, .ticker-badge .text-down, .ticker-badge .arr-down, .text-down { color: var(--fili-htick-color-down) !important; } .ticker-body .ticker-change.text-ref, .ticker-badge.text-ref, .ticker-badge .text-ref, .ticker-badge .arr-flat, .text-ref { color: var(--fili-htick-color-ref) !important; } .ticker-badge.border-up, .border-up { border: 1.5px solid var(--fili-htick-color-up) !important; } .ticker-badge.border-down, .border-down { border: 1.5px solid var(--fili-htick-color-down) !important; } .ticker-badge.border-ref, .border-ref { border: 1.5px solid var(--fili-htick-color-ref) !important; } @media (max-width: 1199px) { .fili-header-ticker { padding: 5px 0; } .fili-logo-box { padding-right: 10px; } .fili-logo-img { height: 38px; max-width: 150px; } .ticker-card { padding: 2px 8px; column-gap: 7px; height: 39px; } .ticker-badge { width: 18px; height: 18px; margin-right: 0; } .ticker-badge .arr-up { border-left-width: 3.5px; border-right-width: 3.5px; border-bottom-width: 5.5px; } .ticker-badge .arr-down { border-left-width: 3.5px; border-right-width: 3.5px; border-top-width: 5.5px; } .ticker-badge .arr-flat { width: 7px; height: 2px; } .ticker-sym { font-size: 12px; line-height: 1.3; } .ticker-val { font-size: 11.5px; } .ticker-change { font-size: 10.5px; } .ticker-chart-img { width: 32px; height: 12px; } .ticker-body { gap: 4px; } } @media (max-width: 991px) { .fili-header-ticker { padding: 4px 0; } .fili-logo-box { padding-right: 8px; } .fili-logo-img { height: 36px; max-width: 125px; } .ticker-card { padding: 2px 6px; column-gap: 6px; row-gap: 2px; height: 36px; } .ticker-badge { width: 16px; height: 16px; } .ticker-badge .arr-up { border-left-width: 3px; border-right-width: 3px; border-bottom-width: 5px; } .ticker-badge .arr-down { border-left-width: 3px; border-right-width: 3px; border-top-width: 5px; } .ticker-badge .arr-flat { width: 6px; height: 2px; } .ticker-sym { font-size: 11px; line-height: 1.3; } .ticker-val { font-size: 10.5px; } .ticker-change { font-size: 9.5px; } .ticker-body { gap: 3px; } .ticker-chart-img { width: 27px; height: 10px; } } @media (max-width: 767px) { .fili-header-ticker { padding: 4px 0; } .fili-header-ticker .container-xl { justify-content: center; } .fili-logo-box { padding-right: 0; } .fili-logo-img { height: 32px; max-width: 105px; } .ticker-wrapper { display: none !important; } } @media (max-width: 575px) { .fili-logo-img { height: 30px; max-width: 95px; } } @media (max-width: 479px) { .fili-logo-img { height: 29px; max-width: 90px; } } @media (max-width: 399px) { .fili-logo-img { height: 28px; max-width: 100px; } } :root { --fili-htick-bg: #ffffff; --fili-htick-border: #dedede; --fili-htick-text: #333333; --fili-htick-divider: #e2e8f0; --fili-htick-hover-bg: #f8fafc; --fili-htick-color-up: #10b981; --fili-htick-color-down: #ff4d4f; --fili-htick-color-ref: #eab308; --fili-nav-height: 50px; --fili-nav-bg: #ffffff; --fili-nav-dropdown-bg: #ffffff; --fili-nav-text: #333333; --fili-nav-accent: var(--color-brand-red, #D12F2F); --fili-nav-border-color: #E5E5E5; --fili-nav-stagger-step: 0.04s; --fili-nav-font-size: 16px; --fili-nav-link-padding: 0 clamp(8px, 1vw, 16px); --fili-nav-home-width: 50px; --fili-tb-font: var(--font-heading, sans-serif); --fili-tb-max-width: 1230px; --fili-tb-min-height: 40px; --fili-tb-bg: #ffffff; --fili-tb-border: #dedede; --fili-tb-text-dark: #17222b; --fili-tb-text-muted: #39424a; --fili-tb-divider: #b9bcbf; --fili-tb-accent: #FF5555; --fili-tb-accent-hover: #e04444; --fili-tb-input-bg: #f8fafc; --fili-tb-input-border: #cbd5e1; --fili-tb-shadow-focus: 0 4px 14px rgba(255, 85, 85, 0.22); --fili-tb-transition: 0.25s cubic-bezier(0.16, 1, 0.3, 1); } .fili-top-bar { display: flex; align-items: center; padding: 4px 0; background-color: var(--fili-tb-bg); border-bottom: 1px solid var(--fili-tb-border); min-height: var(--fili-tb-min-height); font-family: var(--fili-tb-font); font-size: 13.5px; color: var(--fili-tb-text-muted); } .fili-top-bar .container, .fili-top-bar .container-xl { width: 100%; max-width: var(--fili-tb-max-width); padding: 0 15px; margin: 0 auto; } .fili-top-bar .top-bar-ticker { font-size: 13px; color: var(--fili-tb-text-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; } .fili-top-bar .magazine-subtitle { font-weight: 600; color: var(--fili-tb-text-dark); opacity: 0.9; } .fili-top-bar .magazine-subtitle i { color: var(--fili-tb-accent); } .fili-top-bar #fili-live-clock { font-weight: 600; color: var(--fili-tb-text-dark); font-variant-numeric: tabular-nums; display: inline-block; min-width: 62px; text-align: center; } .fili-top-bar .social-links a { color: var(--fili-tb-text-muted); font-size: 13px; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; transition: color var(--fili-tb-transition), background-color var(--fili-tb-transition); } .fili-top-bar .social-links a:hover { color: #fff; background-color: var(--fili-tb-accent); } .fili-top-bar .v-divider { color: var(--fili-tb-divider); font-weight: 300; font-size: 15px; opacity: 0.8; } /* Search Bar */ .fili-top-bar .top-bar-search .search-form { position: relative; width: 32px; height: 32px; transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .fili-top-bar .top-bar-search .search-form:hover, .fili-top-bar .top-bar-search .search-form:focus-within { width: 210px; } .fili-top-bar .top-bar-search .search-input { width: 100%; height: 32px; font: inherit; font-size: 12px; color: var(--fili-tb-text-dark); background-color: var(--fili-tb-input-bg); border: 1px solid transparent; border-radius: 16px; padding: 4px 34px 4px 14px; opacity: 0; cursor: pointer; transition: opacity 0.25s ease, border-color var(--fili-tb-transition), background-color var(--fili-tb-transition), box-shadow var(--fili-tb-transition); } .fili-top-bar .top-bar-search .search-form:hover .search-input, .fili-top-bar .top-bar-search .search-form:focus-within .search-input { opacity: 1; cursor: text; border-color: var(--fili-tb-input-border); } .fili-top-bar .top-bar-search .search-input:focus { background-color: #fff; border-color: var(--fili-tb-accent); box-shadow: var(--fili-tb-shadow-focus); outline: none; } .fili-top-bar .top-bar-search .search-input::placeholder { color: #94a3b8; } .fili-top-bar .top-bar-search .btn-search { position: absolute; right: 0; top: 0; width: 32px; height: 32px; background-color: var(--fili-tb-accent); color: #fff; border: none; border-radius: 50%; font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; transition: background-color var(--fili-tb-transition); } .fili-top-bar .top-bar-search .btn-search .search-icon { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } .fili-top-bar .top-bar-search .search-form:hover .btn-search .search-icon, .fili-top-bar .top-bar-search .search-form:focus-within .btn-search .search-icon { transform: rotate(360deg); } .fili-top-bar .top-bar-search .btn-search:hover { background-color: var(--fili-tb-accent-hover); } /* Header Ticker & Logo */ .fili-header-ticker { background-color: var(--fili-htick-bg); padding: 6px 0; width: 100%; } .fili-header-ticker .container-xl { display: flex; align-items: center; } .fili-logo-box { display: inline-flex; align-items: center; height: 40px; padding-right: 16px; flex: 0 0 auto; } .fili-logo-img { height: 40px; max-width: 200px; object-fit: contain; } .ticker-wrapper { display: flex; align-items: center; flex: 1 1 auto; overflow-x: auto; scrollbar-width: none; } .ticker-wrapper::-webkit-scrollbar { display: none; } .ticker-container { display: flex; width: 100%; } .ticker-card { flex: 1 1 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "badge sym chart" "badge body body"; align-items: center; column-gap: 9px; row-gap: 3px; padding: 2px 12px; border-right: 1px solid var(--fili-htick-divider); text-decoration: none; height: 42px; box-sizing: border-box; transition: background-color 0.2s ease; } .ticker-card:last-child { border-right: none; } .ticker-card:hover { background-color: var(--fili-htick-hover-bg); } @keyframes tickerFlash { 0% { background-color: rgba(16, 185, 129, 0.15); } 100% { background-color: transparent; } } .ticker-card.quote-updated { animation: tickerFlash 0.8s ease-out; } .ticker-header, .ticker-title { display: contents; } .ticker-badge { grid-area: badge; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; } .ticker-badge .arr-up, .ticker-badge .arr-down { display: block; width: 0; height: 0; } .ticker-badge .arr-up { border-left: 4.5px solid transparent; border-right: 4.5px solid transparent; border-bottom: 7px solid currentColor; margin-top: -1px; } .ticker-badge .arr-down { border-left: 4.5px solid transparent; border-right: 4.5px solid transparent; border-top: 7px solid currentColor; margin-top: 1px; } .ticker-badge .arr-flat { display: block; width: 8px; height: 2.5px; background-color: currentColor; } .ticker-sym { grid-area: sym; font-size: 16px; color: var(--fili-htick-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ticker-chart-img { grid-area: chart; width: 40px; height: 14px; object-fit: contain; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease; } .ticker-chart-img.is-loaded { opacity: 0.9; visibility: visible; } .ticker-body { grid-area: body; display: flex; align-items: baseline; gap: 5px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; } .ticker-val { font-size: 13px; font-weight: 500; color: var(--fili-htick-text) !important; } .ticker-change { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; } /* Dynamic Status Colors */ .text-up, .ticker-body .ticker-change.text-up, .ticker-badge .arr-up { color: var(--fili-htick-color-up) !important; } .text-down, .ticker-body .ticker-change.text-down, .ticker-badge .arr-down { color: var(--fili-htick-color-down) !important; } .text-ref, .ticker-body .ticker-change.text-ref, .ticker-badge .arr-flat { color: var(--fili-htick-color-ref) !important; } .border-up { border: 1.5px solid var(--fili-htick-color-up) !important; } .border-down { border: 1.5px solid var(--fili-htick-color-down) !important; } .border-ref { border: 1.5px solid var(--fili-htick-color-ref) !important; } /* Navbar Base Styles */ .fili-navbar-component { width: 100%; background-color: var(--fili-nav-bg); border-bottom: 1px solid var(--fili-nav-border-color); box-shadow: 0 2px 4px rgba(0,0,0,0.03); } .fili-navbar-component .fili-navbar-inner { height: var(--fili-nav-height); } .fili-navbar-component .fili-nav-list { margin: 0; padding: 0; list-style: none; height: 100%; } .fili-navbar-component .fili-nav-item { position: relative; z-index: 2; } .fili-navbar-component .fili-nav-item:hover, .fili-navbar-component .fili-nav-item.active { z-index: 10; } .fili-navbar-component .fili-nav-link, .fili-navbar-component .fili-dropdown-item { font-family: var(--font-primary, sans-serif); font-size: var(--fili-nav-font-size); font-weight: 500; color: var(--fili-nav-text) !important; text-decoration: none; transition: color 0.15s ease, background-color 0.15s ease; } .fili-navbar-component .fili-nav-item:hover > .fili-nav-link, .fili-navbar-component .fili-nav-item.active > .fili-nav-link, .fili-navbar-component .fili-dropdown-item:hover { color: var(--fili-nav-accent) !important; } .fili-dropdown-icon { font-size: 16px; margin-left: 4px; opacity: 0.75; transition: transform 0.25s ease, color 0.15s ease; } .fili-navbar-component .fili-nav-item:hover > .fili-nav-link .fili-dropdown-icon { color: var(--fili-nav-accent); transform: rotate(180deg); } /* Medium Desktop Adjustment */ @media (min-width: 992px) and (max-width: 1199px) { :root { --fili-nav-font-size: 14px; --fili-nav-link-padding: 0 5px; --fili-nav-home-width: 42px; } .fili-header-ticker { padding: 5px 0; } .fili-logo-box { padding-right: 10px; } .fili-logo-img { height: 38px; max-width: 150px; } .ticker-card { padding: 2px 8px; column-gap: 7px; height: 39px; } .ticker-badge { width: 18px; height: 18px; } .ticker-sym { font-size: 12px; } .ticker-val { font-size: 11.5px; } .ticker-change { font-size: 10.5px; } .ticker-chart-img { width: 32px; height: 12px; } } /* Desktop View (Sticky Navbar Enabled) */ @media (min-width: 992px) { .fili-site-header { display: contents; } .fili-navbar-component { position: sticky; top: 0; z-index: 1040; } .fili-navbar-component .navbar, .fili-navbar-component .navbar-collapse, .fili-navbar-component .fili-nav-list { display: flex; width: 100%; height: 100%; } .fili-navbar-component .fili-nav-item { display: flex; align-items: center; justify-content: center; flex: 1 1 0; } .fili-navbar-component .fili-nav-item.fili-nav-home { flex: 0 0 var(--fili-nav-home-width); } .fili-navbar-component .fili-nav-link { padding: var(--fili-nav-link-padding); width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; white-space: nowrap; } .fili-navbar-component .fili-nav-item::after { position: absolute; content: ""; height: 3px; width: 0; background: var(--fili-nav-accent); left: 0; bottom: -1px; transition: width 0.25s ease; } .fili-navbar-component .fili-nav-item:hover::after, .fili-navbar-component .fili-nav-item.active::after { width: 100%; } /* Dropdown Menus */ .fili-navbar-component .fili-dropdown-menu { display: block; position: absolute; top: 100%; left: 0; min-width: 210px; background-color: var(--fili-nav-dropdown-bg); border: 1px solid var(--fili-nav-border-color); border-top: none; border-radius: 0 0 4px 4px; padding: 0; margin: 0; list-style: none; box-shadow: 0 8px 20px rgba(0,0,0,0.08); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px); transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease; } .fili-navbar-component .fili-nav-item:last-child .fili-dropdown-menu, .fili-navbar-component .fili-nav-item:nth-last-child(2) .fili-dropdown-menu { left: auto; right: 0; } .fili-navbar-component .fili-dropdown-menu li { position: relative; border-bottom: 1px solid #F0F0F0; } .fili-navbar-component .fili-dropdown-menu li:last-child { border-bottom: none; } .fili-navbar-component .fili-nav-item.has-dropdown:hover > .fili-dropdown-menu, .fili-navbar-component .fili-dropdown-menu li:hover > .fili-dropdown-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } .fili-navbar-component .fili-dropdown-menu .fili-dropdown-menu { top: 0; left: 100%; border: 1px solid var(--fili-nav-border-color); border-radius: 4px; transform: translateX(8px); } .fili-navbar-component .fili-dropdown-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; white-space: nowrap; opacity: 0; transform: translateY(-8px); transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.15s ease; } .fili-navbar-component .fili-nav-item.has-dropdown:hover > .fili-dropdown-menu > li > .fili-dropdown-item { opacity: 1; transform: translateY(0); } .fili-navbar-component .fili-dropdown-item:hover { background-color: #F8F9FA !important; } .fili-navbar-component .fili-nav-item.has-dropdown:hover > .fili-dropdown-menu > li:nth-child(1) > .fili-dropdown-item { transition-delay: calc(1 * var(--fili-nav-stagger-step)); } .fili-navbar-component .fili-nav-item.has-dropdown:hover > .fili-dropdown-menu > li:nth-child(2) > .fili-dropdown-item { transition-delay: calc(2 * var(--fili-nav-stagger-step)); } .fili-navbar-component .fili-nav-item.has-dropdown:hover > .fili-dropdown-menu > li:nth-child(3) > .fili-dropdown-item { transition-delay: calc(3 * var(--fili-nav-stagger-step)); } .fili-navbar-component .fili-nav-item.has-dropdown:hover > .fili-dropdown-menu > li:nth-child(4) > .fili-dropdown-item { transition-delay: calc(4 * var(--fili-nav-stagger-step)); } } @media (max-width: 991px) { .fili-site-header { display: flex !important; align-items: center !important; justify-content: space-between !important; height: 56px !important; padding: 0 12px !important; background-color: #ffffff !important; border-bottom: 1px solid var(--fili-nav-border-color) !important; position: sticky !important; top: 0 !important; z-index: 1040 !important; box-sizing: border-box !important; width: 100% !important; } /* Reset internal component wrappers so they don't trap positioning */ .fili-top-bar, .fili-header-ticker, .fili-navbar-component, .fili-navbar-component .navbar, .fili-navbar-component .fili-navbar-inner, .fili-top-bar .container, .fili-top-bar .container-xl, .fili-header-ticker .container-xl { position: static !important; background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; min-height: 0 !important; height: auto !important; width: auto !important; } .fili-top-bar .top-bar-ticker, .fili-top-bar .magazine-subtitle, .fili-top-bar #fili-live-clock, .fili-top-bar .social-links, .fili-top-bar .v-divider, .fili-header-ticker .ticker-wrapper { display: none !important; } /* Left Section: Menu Toggle */ .fili-navbar-component { order: 1 !important; } .fili-navbar-component .fili-nav-toggler { display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 36px !important; width: 36px !important; background-color: #ffffff !important; border: 1px solid var(--fili-nav-border-color) !important; border-radius: 4px !important; cursor: pointer; } .fili-navbar-component .fili-nav-toggler:hover { background-color: var(--fili-nav-accent) !important; border-color: var(--fili-nav-accent) !important; } .fili-navbar-component .fili-nav-toggler .fili-toggler-icon { font-size: 18px; color: var(--fili-nav-text, #333333); transition: color 0.15s ease; } .fili-navbar-component .fili-nav-toggler:hover .fili-toggler-icon { color: #ffffff !important; } .fili-navbar-component .navbar-collapse { position: fixed !important; top: 56px !important; left: 0 !important; right: 0 !important; width: 100vw !important; background-color: #ffffff !important; border-top: 1px solid var(--fili-nav-border-color) !important; border-bottom: 1px solid var(--fili-nav-border-color) !important; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12) !important; max-height: calc(100vh - 56px) !important; overflow-y: auto !important; z-index: 1039 !important; box-sizing: border-box !important; } .fili-navbar-component .navbar-collapse:not(.show) { display: none !important; } .fili-navbar-component .fili-nav-list { display: flex !important; flex-direction: column !important; width: 100% !important; padding: 0 !important; margin: 0 !important; } .fili-navbar-component .fili-nav-item { width: 100% !important; border-bottom: 1px solid #f0f0f0 !important; } .fili-navbar-component .fili-nav-link { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 14px 20px !important; font-size: 15px !important; font-weight: 600 !important; width: 100% !important; box-sizing: border-box !important; white-space: normal !important; } .fili-navbar-component .fili-dropdown-menu { position: static !important; background-color: #F8F9FA !important; display: block !important; max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.35s ease, opacity 0.25s ease; width: 100% !important; box-sizing: border-box !important; } .fili-navbar-component .fili-dropdown-menu.show { max-height: 1000px; opacity: 1; } .fili-navbar-component .fili-dropdown-menu .fili-dropdown-item { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 14px 20px 14px 36px !important; font-size: 14px !important; border-top: 1px solid #E5E5E5 !important; width: 100% !important; box-sizing: border-box !important; } .fili-header-ticker { order: 2 !important; flex: 1 1 auto !important; justify-content: center !important; display: flex !important; } .fili-logo-box { margin: 0 auto !important; padding: 0 !important; border: none !important; height: auto !important; } .fili-logo-img { height: 32px !important; max-width: 120px !important; } .fili-top-bar { order: 3 !important; display: flex !important; align-items: center !important; } .fili-top-bar .top-bar-search .search-form:hover, .fili-top-bar .top-bar-search .search-form:focus-within { width: min(160px, 45vw) !important; } } @media (max-width: 480px) { .fili-site-header { height: 50px !important; padding: 0 8px !important; } .fili-navbar-component .navbar-collapse { top: 50px !important; max-height: calc(100vh - 50px) !important; } .fili-logo-img { height: 28px !important; max-width: 100px !important; } .fili-top-bar .top-bar-search .search-form:hover, .fili-top-bar .top-bar-search .search-form:focus-within { width: min(130px, 40vw) !important; } } /* ========================================= 1. CSS VARIABLES ========================================= */ :root { --fili-htick-bg: #ffffff; --fili-htick-border: #dedede; --fili-htick-text: #333333; --fili-htick-divider: #e2e8f0; --fili-htick-hover-bg: #f8fafc; --fili-htick-color-up: #10b981; --fili-htick-color-down: #ff4d4f; --fili-htick-color-ref: #eab308; --fili-nav-height: 54px; --fili-nav-bg: #ffffff; --fili-nav-dropdown-bg: #ffffff; --fili-nav-text: #333333; --fili-nav-accent: var(--color-brand-red, #D12F2F); --fili-nav-border-color: #E5E5E5; --fili-nav-stagger-step: 0.04s; --fili-nav-font-size: 15px; --fili-nav-link-padding: 0 clamp(10px, 1.2vw, 18px); --fili-nav-home-width: 56px; --fili-tb-font: var(--font-heading, sans-serif); --fili-tb-max-width: 1230px; --fili-tb-min-height: 40px; --fili-tb-bg: #ffffff; --fili-tb-border: #dedede; --fili-tb-text-dark: #17222b; --fili-tb-text-muted: #39424a; --fili-tb-divider: #b9bcbf; --fili-tb-accent: #FF5555; --fili-tb-accent-hover: #e04444; --fili-tb-input-bg: #f8fafc; --fili-tb-input-border: #cbd5e1; --fili-tb-shadow-focus: 0 4px 14px rgba(255, 85, 85, 0.22); --fili-tb-transition: 0.25s cubic-bezier(0.16, 1, 0.3, 1); } /* ========================================= 2. DESKTOP TOP BAR ========================================= */ .fili-top-bar { display: flex; align-items: center; padding: 4px 0; background-color: var(--fili-tb-bg); border-bottom: 1px solid var(--fili-tb-border); min-height: var(--fili-tb-min-height); font-family: var(--fili-tb-font); font-size: 13.5px; color: var(--fili-tb-text-muted); } .fili-top-bar .top-bar-ticker { font-size: 13px; color: var(--fili-tb-text-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; } .fili-top-bar .magazine-subtitle { font-weight: 600; color: var(--fili-tb-text-dark); opacity: 0.9; } .fili-top-bar .magazine-subtitle i { color: var(--fili-tb-accent); } .fili-top-bar #fili-live-clock { font-weight: 600; color: var(--fili-tb-text-dark); font-variant-numeric: tabular-nums; display: inline-block; min-width: 62px; text-align: center; } .fili-top-bar .social-links a { color: var(--fili-tb-text-muted); font-size: 13px; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; transition: color var(--fili-tb-transition), background-color var(--fili-tb-transition); } .fili-top-bar .social-links a:hover { color: #fff; background-color: var(--fili-tb-accent); } .fili-top-bar .v-divider { color: var(--fili-tb-divider); font-weight: 300; font-size: 15px; opacity: 0.8; } .fili-top-bar .top-bar-search .search-form { position: relative; width: 32px; height: 32px; transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .fili-top-bar .top-bar-search .search-form:hover, .fili-top-bar .top-bar-search .search-form:focus-within { width: 210px; } .fili-top-bar .top-bar-search .search-input { width: 100%; height: 32px; font: inherit; font-size: 12px; color: var(--fili-tb-text-dark); background-color: var(--fili-tb-input-bg); border: 1px solid transparent; border-radius: 16px; opacity: 0; cursor: pointer; transition: opacity 0.25s ease, border-color var(--fili-tb-transition), background-color var(--fili-tb-transition), box-shadow var(--fili-tb-transition); } .fili-top-bar .top-bar-search .search-form:hover .search-input, .fili-top-bar .top-bar-search .search-form:focus-within .search-input { opacity: 1; cursor: text; border-color: var(--fili-tb-input-border); } .fili-top-bar .top-bar-search .search-input:focus { background-color: #fff; border-color: var(--fili-tb-accent); box-shadow: var(--fili-tb-shadow-focus); outline: none; } .fili-top-bar .top-bar-search .search-input::placeholder { color: #94a3b8; } .fili-top-bar .top-bar-search .btn-search { position: absolute; right: 0; top: 0; width: 32px; height: 32px; background-color: var(--fili-tb-accent); color: #fff; border: none; border-radius: 50%; font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; transition: background-color var(--fili-tb-transition); } .fili-top-bar .top-bar-search .btn-search .search-icon { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } .fili-top-bar .top-bar-search .search-form:hover .btn-search .search-icon, .fili-top-bar .top-bar-search .search-form:focus-within .btn-search .search-icon { transform: rotate(360deg); } .fili-top-bar .top-bar-search .btn-search:hover { background-color: var(--fili-tb-accent-hover); } /* ========================================= 3. HEADER TICKER ========================================= */ .fili-header-ticker { background-color: var(--fili-htick-bg); padding: 8px 0; width: 100%; } .fili-logo-box { display: inline-flex; align-items: center; height: 55px; padding-right: 20px; flex: 0 0 auto; } .fili-logo-img { height: 55px; max-width: 200px; object-fit: contain; } .ticker-wrapper { display: flex; align-items: center; flex: 1 1 auto; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } .ticker-wrapper::-webkit-scrollbar { display: none; } .ticker-container { display: flex; width: 100%; } .ticker-card { flex: 1 1 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "badge sym chart" "badge body body"; align-items: center; column-gap: 9px; row-gap: 3px; padding: 2px 12px; border-right: 1px solid var(--fili-htick-divider); text-decoration: none; height: 42px; box-sizing: border-box; transition: background-color 0.2s ease; } .ticker-card:last-child { border-right: none; } .ticker-card:hover { background-color: var(--fili-htick-hover-bg); } @keyframes tickerFlash { 0% { background-color: rgba(16, 185, 129, 0.15); } 100% { background-color: transparent; } } .ticker-card.quote-updated { animation: tickerFlash 0.8s ease-out; } .ticker-header, .ticker-title { display: contents; } .ticker-badge { grid-area: badge; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; } .ticker-badge .arr-up, .ticker-badge .arr-down { display: block; width: 0; height: 0; } .ticker-badge .arr-up { border-left: 4.5px solid transparent; border-right: 4.5px solid transparent; border-bottom: 7px solid currentColor; margin-top: -1px; } .ticker-badge .arr-down { border-left: 4.5px solid transparent; border-right: 4.5px solid transparent; border-top: 7px solid currentColor; margin-top: 1px; } .ticker-badge .arr-flat { display: block; width: 8px; height: 2.5px; background-color: currentColor; } .ticker-sym { grid-area: sym; font-size: 15px; color: var(--fili-htick-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ticker-chart-img { grid-area: chart; width: 40px; height: 14px; object-fit: contain; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease; } .ticker-chart-img.is-loaded { opacity: 0.9; visibility: visible; } .ticker-body { grid-area: body; display: flex; align-items: baseline; gap: 5px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; } .ticker-val { font-size: 13px; font-weight: 500; color: var(--fili-htick-text) !important; } .ticker-change { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; } .text-up, .ticker-body .ticker-change.text-up, .ticker-badge .arr-up { color: var(--fili-htick-color-up) !important; } .text-down, .ticker-body .ticker-change.text-down, .ticker-badge .arr-down { color: var(--fili-htick-color-down) !important; } .text-ref, .ticker-body .ticker-change.text-ref, .ticker-badge .arr-flat { color: var(--fili-htick-color-ref) !important; } .border-up { border: 1.5px solid var(--fili-htick-color-up) !important; } .border-down { border: 1.5px solid var(--fili-htick-color-down) !important; } .border-ref { border: 1.5px solid var(--fili-htick-color-ref) !important; } /* ========================================= 4. DESKTOP NAVBAR ========================================= */ .fili-navbar-component { width: 100%; background-color: var(--fili-nav-bg); border-bottom: 1px solid var(--fili-nav-border-color); box-shadow: 0 2px 4px rgba(0,0,0,0.03); } .fili-navbar-component .container { width: 100%; max-width: var(--fili-tb-max-width); margin: 0 auto; } .fili-navbar-component .navbar { min-height: var(--fili-nav-height); height: auto; } .fili-navbar-component .fili-nav-list { margin: 0; padding: 0; list-style: none; } .fili-navbar-component .fili-nav-item { position: relative; z-index: 2; } .fili-navbar-component .fili-nav-item:hover, .fili-navbar-component .fili-nav-item.active { z-index: 10; } .fili-navbar-component .fili-nav-link, .fili-navbar-component .fili-dropdown-item { font-family: var(--font-primary, sans-serif); font-size: 16px; font-weight: 500; color: var(--fili-nav-text) !important; text-decoration: none; transition: color 0.15s ease, background-color 0.15s ease; } .fili-navbar-component .fili-nav-item:hover > .fili-nav-link, .fili-navbar-component .fili-nav-item.active > .fili-nav-link, .fili-navbar-component .fili-dropdown-item:hover { color: var(--fili-nav-accent) !important; } .fili-dropdown-icon { font-size: 14px; margin-left: 4px; opacity: 0.75; transition: transform 0.25s ease, color 0.15s ease; } .fili-navbar-component .fili-nav-item:hover > .fili-nav-link .fili-dropdown-icon { color: var(--fili-nav-accent); transform: rotate(180deg); } /* ========================================= 5. DESKTOP MEDIA QUERIES ========================================= */ @media (min-width: 992px) and (max-width: 1199px) { :root { --fili-nav-font-size: 14px; --fili-nav-link-padding: 0 6px; --fili-nav-home-width: 48px; } .fili-header-ticker { padding: 6px 0; } .fili-logo-box { padding-right: 12px; } .fili-logo-img { height: 40px; max-width: 150px; } .ticker-card { padding: 2px 8px; column-gap: 7px; height: 39px; } .ticker-badge { width: 18px; height: 18px; } .ticker-sym { font-size: 12px; } .ticker-val { font-size: 11.5px; } .ticker-change { font-size: 10.5px; } .ticker-chart-img { width: 32px; height: 12px; } } @media (min-width: 992px) { .fili-site-header { display: contents; } .fili-navbar-component { position: sticky; top: 0; z-index: 1040; } .fili-navbar-component .navbar, .fili-navbar-component .navbar-collapse, .fili-navbar-component .fili-nav-list { display: flex; width: 100%; align-items: center; } .fili-navbar-component .fili-nav-item { display: flex; align-items: center; justify-content: center; flex: 1 1 0; height: var(--fili-nav-height); } .fili-navbar-component .fili-nav-item.fili-nav-home { flex: 0 0 var(--fili-nav-home-width); } .fili-navbar-component .fili-nav-link { padding: var(--fili-nav-link-padding); width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; white-space: nowrap; } .fili-navbar-component .fili-nav-item::after { position: absolute; content: ""; height: 3px; width: 0; background: var(--fili-nav-accent); left: 0; bottom: 0; transition: width 0.25s ease; } .fili-navbar-component .fili-nav-item:hover::after, .fili-navbar-component .fili-nav-item.active::after { width: 100%; } .fili-navbar-component .fili-dropdown-menu { display: block; position: absolute; top: 100%; left: 0; min-width: 210px; background-color: var(--fili-nav-dropdown-bg); border: 1px solid var(--fili-nav-border-color); border-top: none; border-radius: 0 0 4px 4px; padding: 0; margin: 0; list-style: none; box-shadow: 0 8px 20px rgba(0,0,0,0.08); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px); transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease; } .fili-navbar-component .fili-nav-item:last-child .fili-dropdown-menu, .fili-navbar-component .fili-nav-item:nth-last-child(2) .fili-dropdown-menu { left: auto; right: 0; } .fili-navbar-component .fili-dropdown-menu li { position: relative; border-bottom: 1px solid #F0F0F0; } .fili-navbar-component .fili-dropdown-menu li:last-child { border-bottom: none; } .fili-navbar-component .fili-nav-item.has-dropdown:hover > .fili-dropdown-menu, .fili-navbar-component .fili-dropdown-menu li:hover > .fili-dropdown-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } .fili-navbar-component .fili-dropdown-menu .fili-dropdown-menu { top: 0; left: 100%; border: 1px solid var(--fili-nav-border-color); border-radius: 4px; transform: translateX(8px); } .fili-navbar-component .fili-dropdown-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; white-space: nowrap; opacity: 0; transform: translateY(-8px); transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.15s ease; } .fili-navbar-component .fili-nav-item.has-dropdown:hover > .fili-dropdown-menu > li > .fili-dropdown-item { opacity: 1; transform: translateY(0); } .fili-navbar-component .fili-dropdown-item:hover { background-color: #F8F9FA !important; } .fili-navbar-component .fili-nav-item.has-dropdown:hover > .fili-dropdown-menu > li:nth-child(1) > .fili-dropdown-item { transition-delay: calc(1 * var(--fili-nav-stagger-step)); } .fili-navbar-component .fili-nav-item.has-dropdown:hover > .fili-dropdown-menu > li:nth-child(2) > .fili-dropdown-item { transition-delay: calc(2 * var(--fili-nav-stagger-step)); } .fili-navbar-component .fili-nav-item.has-dropdown:hover > .fili-dropdown-menu > li:nth-child(3) > .fili-dropdown-item { transition-delay: calc(3 * var(--fili-nav-stagger-step)); } .fili-navbar-component .fili-nav-item.has-dropdown:hover > .fili-dropdown-menu > li:nth-child(4) > .fili-dropdown-item { transition-delay: calc(4 * var(--fili-nav-stagger-step)); } } /* ========================================= 6. MOBILE & TABLET LAYOUT ========================================= */ @media (max-width: 991px) { .fili-site-header { display: block !important; height: auto !important; padding: 0 !important; background-color: #ffffff !important; border-bottom: 1px solid var(--fili-nav-border-color) !important; position: sticky !important; top: 0 !important; z-index: 1040 !important; width: 100% !important; box-sizing: border-box !important; } .fili-top-bar { display: none !important; } .fili-mobile-navbar-collapse .fili-nav-item.active > .fili-nav-link a { color: inherit !important; } .fili-mobile-navbar-collapse .dropdown-toggle-mobile { transition: background-color 0.15s ease, transform 0.25s ease; cursor: pointer; } .fili-mobile-navbar-collapse .dropdown-toggle-mobile:active { background-color: rgba(0,0,0,0.05) !important; } .fili-mobile-top-row { display: flex !important; align-items: center !important; justify-content: space-between !important; height: 56px !important; padding: 0 12px !important; background-color: #ffffff !important; border-bottom: 1px solid var(--fili-nav-border-color) !important; } .fili-mobile-top-row .fili-nav-toggler { display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 40px !important; width: 40px !important; background-color: #ffffff !important; border: 1px solid var(--fili-nav-border-color) !important; border-radius: 4px !important; cursor: pointer !important; flex-shrink: 0 !important; } .fili-mobile-top-row .fili-nav-toggler:hover { background-color: var(--fili-nav-accent) !important; border-color: var(--fili-nav-accent) !important; } .fili-mobile-top-row .fili-nav-toggler .fili-toggler-icon { font-size: 18px !important; color: var(--fili-nav-text, #333333) !important; transition: color 0.15s ease !important; } .fili-mobile-top-row .fili-nav-toggler:hover .fili-toggler-icon { color: #ffffff !important; } .fili-mobile-top-row .fili-logo-box { margin: 0 auto !important; padding: 0 !important; height: auto !important; } .fili-mobile-top-row .fili-logo-img { height: 40px !important; max-width: 200px !important; } .fili-mobile-top-row .top-bar-search .search-form { position: relative; width: 32px; height: 32px; transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .fili-mobile-top-row .top-bar-search .search-form:hover, .fili-mobile-top-row .top-bar-search .search-form:focus-within { width: min(160px, 45vw); } .fili-mobile-top-row .top-bar-search .search-input { width: 100%; height: 32px; font: inherit; font-size: 12px; color: var(--fili-tb-text-dark); background-color: var(--fili-tb-input-bg); border: 1px solid transparent; border-radius: 16px; padding: 4px 34px 4px 14px; opacity: 0; cursor: pointer; transition: opacity 0.25s ease, border-color var(--fili-tb-transition), background-color var(--fili-tb-transition), box-shadow var(--fili-tb-transition); } .fili-mobile-top-row .top-bar-search .search-form:hover .search-input, .fili-mobile-top-row .top-bar-search .search-form:focus-within .search-input { opacity: 1; cursor: text; border-color: var(--fili-tb-input-border); } .fili-mobile-top-row .top-bar-search .search-input:focus { background-color: #fff; border-color: var(--fili-tb-accent); box-shadow: var(--fili-tb-shadow-focus); outline: none; } .fili-mobile-top-row .top-bar-search .search-input::placeholder { color: #94a3b8; } .fili-mobile-top-row .top-bar-search .btn-search { position: absolute; right: 0; top: 0; width: 32px; height: 32px; background-color: var(--fili-tb-accent); color: #fff; border: none; border-radius: 50%; font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; transition: background-color var(--fili-tb-transition); } .fili-mobile-top-row .top-bar-search .btn-search .search-icon { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } .fili-mobile-top-row .top-bar-search .search-form:hover .btn-search .search-icon, .fili-mobile-top-row .top-bar-search .search-form:focus-within .btn-search .search-icon { transform: rotate(360deg); } .fili-mobile-top-row .top-bar-search .btn-search:hover { background-color: var(--fili-tb-accent-hover); } .fili-header-ticker { display: flex !important; padding: 8px 0 !important; background-color: var(--fili-htick-bg) !important; border-bottom: 1px solid var(--fili-nav-border-color) !important; } .fili-header-ticker .container-xl { padding-left: 12px !important; padding-right: 12px !important; max-width: 100% !important; width: 100% !important; } .fili-header-ticker .d-lg-block { display: none !important; } .fili-header-ticker .ticker-wrapper { display: flex !important; overflow-x: auto !important; overflow-y: hidden !important; flex-wrap: nowrap !important; scrollbar-width: none !important; -ms-overflow-style: none !important; -webkit-overflow-scrolling: touch !important; gap: 12px !important; padding: 0 4px 8px 4px !important; width: 100% !important; } .fili-header-ticker .ticker-wrapper::-webkit-scrollbar { display: none !important; } .fili-header-ticker .ticker-card { flex: 0 0 auto !important; width: auto !important; min-width: 200px !important; max-width: 280px !important; padding: 6px 14px !important; column-gap: 10px !important; height: 56px !important; border-right: 1px solid var(--fili-htick-divider) !important; } .fili-header-ticker .ticker-card:last-child { border-right: none !important; } .fili-header-ticker .ticker-badge { width: 24px !important; height: 24px !important; flex-shrink: 0 !important; } .fili-header-ticker .ticker-sym { font-size: 14px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; flex-shrink: 0 !important; min-width: 50px !important; } .fili-header-ticker .ticker-chart-img { width: 50px !important; height: 18px !important; flex-shrink: 0 !important; opacity: 0.9 !important; visibility: visible !important; } .fili-header-ticker .ticker-chart-img.is-loaded { opacity: 0.9 !important; visibility: visible !important; } .fili-header-ticker .ticker-body { gap: 6px !important; min-width: 0 !important; flex: 1 1 auto !important; } .fili-header-ticker .ticker-val { font-size: 14px !important; flex-shrink: 0 !important; } .fili-header-ticker .ticker-change { font-size: 13px !important; font-weight: 500 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; min-width: 0 !important; flex: 1 1 auto !important; } .fili-navbar-component .d-lg-flex { display: none !important; } .fili-navbar-component { background-color: #ffffff !important; border: none !important; box-shadow: none !important; } .fili-mobile-navbar-collapse { position: absolute !important; top: 100% !important; left: 0 !important; right: 0 !important; width: 100% !important; background-color: #ffffff !important; border-top: 1px solid var(--fili-nav-border-color) !important; border-bottom: 1px solid var(--fili-nav-border-color) !important; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12) !important; max-height: calc(100vh - 100px) !important; overflow-y: auto !important; z-index: 1039 !important; box-sizing: border-box !important; } .fili-mobile-navbar-collapse:not(.show) { display: none !important; } .fili-mobile-navbar-collapse .fili-nav-list { display: flex !important; flex-direction: column !important; width: 100% !important; padding: 0 !important; margin: 0 !important; } .fili-mobile-navbar-collapse .fili-nav-item { width: 100% !important; border-bottom: 1px solid #f0f0f0 !important; } .fili-mobile-navbar-collapse .fili-nav-link { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 14px 20px !important; font-size: 15px !important; font-weight: 600 !important; width: 100% !important; box-sizing: border-box !important; white-space: normal !important; color: var(--fili-nav-text, #333333) !important; text-decoration: none !important; } .fili-mobile-navbar-collapse .fili-nav-item.active > .fili-nav-link { color: var(--fili-nav-accent) !important; } .fili-mobile-navbar-collapse .fili-dropdown-menu { position: static !important; background-color: #F8F9FA !important; display: block !important; max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.35s ease, opacity 0.25s ease; width: 100% !important; box-sizing: border-box !important; border: none !important; box-shadow: none !important; } .fili-mobile-navbar-collapse .fili-dropdown-menu.show { max-height: 1000px !important; opacity: 1 !important; } .fili-mobile-navbar-collapse .fili-dropdown-item { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 14px 20px 14px 36px !important; font-size: 14px !important; border-top: 1px solid #E5E5E5 !important; width: 100% !important; box-sizing: border-box !important; color: var(--fili-nav-text, #333333) !important; text-decoration: none !important; } .fili-mobile-navbar-collapse .fili-dropdown-item:hover { background-color: #e9ecef !important; color: var(--fili-nav-accent) !important; } } /* Show scrollbar on desktop devices viewing mobile layout */ @media (max-width: 991px) and (hover: hover) and (pointer: fine) { .fili-header-ticker .ticker-wrapper { scrollbar-width: thin !important; -ms-overflow-style: scrollbar !important; } .fili-header-ticker .ticker-wrapper::-webkit-scrollbar { display: block !important; height: 6px !important; } .fili-header-ticker .ticker-wrapper::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.03) !important; border-radius: 3px !important; } .fili-header-ticker .ticker-wrapper::-webkit-scrollbar-thumb { background-color: var(--fili-htick-divider) !important; border-radius: 3px !important; } .fili-header-ticker .ticker-wrapper::-webkit-scrollbar-thumb:hover { background-color: #94a3b8 !important; } } /* ========================================= 7. SMALL MOBILE ADJUSTMENTS ========================================= */ @media (max-width: 480px) { .fili-mobile-top-row { height: 56px !important; padding: 0 8px !important; } .fili-mobile-navbar-collapse { max-height: calc(100vh - 90px) !important; } .fili-mobile-top-row .fili-logo-img { height: 36px !important; max-width: 150px !important; } .fili-mobile-top-row .top-bar-search .search-form:hover, .fili-mobile-top-row .top-bar-search .search-form:focus-within { width: min(130px, 40vw) !important; } .fili-header-ticker .ticker-card { min-width: 170px !important; max-width: 220px !important; padding: 6px 12px !important; height: 52px !important; } .fili-header-ticker .ticker-sym { font-size: 13px !important; min-width: 45px !important; } .fili-header-ticker .ticker-chart-img { width: 45px !important; height: 16px !important; } .fili-header-ticker .ticker-val { font-size: 13px !important; } .fili-header-ticker .ticker-change { font-size: 12px !important; } .fili-header-ticker .ticker-badge { width: 22px !important; height: 22px !important; } } /*@import '_footer.css'; @import '_header2.css'; @import '_preloader.css'; @import '_scroll-controls.css'; */ .fili-navbar-component { --fili-nav-height: 50px; --fili-nav-bg: #ffffff; --fili-nav-dropdown-bg: #ffffff; --fili-nav-text: #333333; --fili-nav-accent: var(--color-brand-red, #D12F2F); --fili-nav-font-size: 16px; --fili-nav-border-color: #E5E5E5; --fili-nav-stagger-step: 0.04s; background-color: var(--fili-nav-bg); position: relative; width: 100%; z-index: 1040 !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03); border-top: 1px solid var(--fili-nav-border-color); border-bottom: 1px solid var(--fili-nav-border-color); } .fili-navbar-component .fili-navbar-inner { position: relative; padding: 0; height: var(--fili-nav-height); } .fili-navbar-component .fili-nav-list { margin: 0; padding: 0; list-style: none; height: 100%; } .fili-navbar-component .fili-nav-item { position: relative; z-index: 2; transition: background-color 0.2s ease, color 0.2s ease; } .fili-navbar-component .fili-nav-item:hover, .fili-navbar-component .fili-nav-item.active { z-index: 10 !important; } .fili-navbar-component .fili-nav-link { color: var(--fili-nav-text) !important; font-family: var(--font-primary, sans-serif); font-size: var(--fili-nav-font-size); font-weight: 500; text-decoration: none; transition: color 0.15s ease; } .fili-dropdown-icon { font-size: 9px; margin-left: 4px; opacity: 0.75; flex-shrink: 0; display: inline-block; transition: transform 0.25s ease, color 0.15s ease; } /* ========================================================================== DESKTOP STYLING (>= 992px) ========================================================================== */ @media (min-width: 992px) { .fili-navbar-component, .fili-navbar-component .container, .fili-navbar-component .fili-navbar-inner, .fili-navbar-component .navbar, .fili-navbar-component .navbar-collapse, .fili-navbar-component .fili-nav-list { overflow: visible !important; } .fili-navbar-component .navbar { display: flex; width: 100%; height: 100%; } .fili-navbar-component .navbar-collapse { display: flex !important; width: 100%; height: 100%; } .fili-navbar-component .fili-nav-list { display: flex; width: 100%; align-items: stretch; } /* Nav items expand to fill full width with zero empty gap between items */ .fili-navbar-component .fili-nav-item { position: relative; display: flex; align-items: center; justify-content: center; border: none !important; flex: 1 1 0; height: 100%; } /* Home Box - Fixed width */ .fili-navbar-component .fili-nav-item.fili-nav-home { flex: 0 0 50px; height: 100%; } .fili-navbar-component .fili-nav-item.fili-nav-home .fili-nav-link { background-color: transparent; color: var(--fili-nav-text) !important; padding: 0; font-size: var(--fili-nav-font-size); width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .fili-navbar-component .fili-nav-item.fili-nav-home:hover .fili-nav-link { background-color: transparent; color: var(--fili-nav-accent) !important; } /* Link Container */ .fili-navbar-component .fili-nav-link { line-height: 1; padding: 0 clamp(8px, 1vw, 16px); width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; white-space: nowrap !important; } /* Active & Hover States */ .fili-navbar-component .fili-nav-item:hover .fili-nav-link, .fili-navbar-component .fili-nav-item.active .fili-nav-link { color: var(--fili-nav-accent) !important; } .fili-navbar-component .fili-nav-item:hover .fili-dropdown-icon, .fili-navbar-component .fili-nav-item.active .fili-dropdown-icon { transform: rotate(180deg); color: var(--fili-nav-accent); } /* Accent Bottom Bar rendered ABOVE dropdown menu (z-index: 1060 > 1050) */ .fili-navbar-component .fili-nav-item::after { position: absolute; content: ""; height: 3px; width: 0; background: var(--fili-nav-accent); z-index: 1060 !important; left: 0; bottom: -1px; transition: width 0.25s ease; } .fili-navbar-component .fili-nav-item:hover::after, .fili-navbar-component .fili-nav-item.active::after { width: 100%; } /* Dropdown Menu */ .fili-navbar-component .fili-dropdown-menu { display: block !important; position: absolute; top: 100%; left: 0; min-width: 210px; background-color: var(--fili-nav-dropdown-bg) !important; border: 1px solid var(--fili-nav-border-color); border-top: none !important; border-radius: 0 0 4px 4px; overflow: hidden !important; padding: 0 !important; margin: 0; list-style: none; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); z-index: 1050 !important; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px); transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease; } .fili-navbar-component .fili-nav-item:last-child .fili-dropdown-menu, .fili-navbar-component .fili-nav-item:nth-last-child(2) .fili-dropdown-menu { left: auto; right: 0; } .fili-navbar-component .fili-dropdown-menu li { margin: 0; padding: 0; width: 100%; background: transparent !important; border-bottom: 1px solid #F0F0F0; } .fili-navbar-component .fili-dropdown-menu li:last-child { border-bottom: none; } .fili-navbar-component .fili-nav-item.has-dropdown:hover .fili-dropdown-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } /* Sublist Item Text */ .fili-navbar-component .fili-dropdown-item { display: block; width: 100%; box-sizing: border-box; padding: 12px 16px; background-color: transparent; color: var(--fili-nav-text); font-family: var(--font-primary, sans-serif); font-size: var(--fili-nav-font-size); font-weight: 500; text-align: left; text-decoration: none; white-space: nowrap; opacity: 0; transform: translateY(-8px); transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.15s ease, color 0.15s ease; } .fili-navbar-component .fili-nav-item.has-dropdown:hover .fili-dropdown-item { opacity: 1; transform: translateY(0); } .fili-navbar-component .fili-nav-item.has-dropdown:hover .fili-dropdown-menu li:nth-child(1) .fili-dropdown-item { transition-delay: calc(1 * var(--fili-nav-stagger-step)); } .fili-navbar-component .fili-nav-item.has-dropdown:hover .fili-dropdown-menu li:nth-child(2) .fili-dropdown-item { transition-delay: calc(2 * var(--fili-nav-stagger-step)); } .fili-navbar-component .fili-nav-item.has-dropdown:hover .fili-dropdown-menu li:nth-child(3) .fili-dropdown-item { transition-delay: calc(3 * var(--fili-nav-stagger-step)); } .fili-navbar-component .fili-nav-item.has-dropdown:hover .fili-dropdown-menu li:nth-child(4) .fili-dropdown-item { transition-delay: calc(4 * var(--fili-nav-stagger-step)); } .fili-navbar-component .fili-nav-item.has-dropdown:hover .fili-dropdown-menu li:nth-child(5) .fili-dropdown-item { transition-delay: calc(5 * var(--fili-nav-stagger-step)); } .fili-navbar-component .fili-nav-item.has-dropdown:hover .fili-dropdown-menu li:nth-child(6) .fili-dropdown-item { transition-delay: calc(6 * var(--fili-nav-stagger-step)); } .fili-navbar-component .fili-dropdown-item:hover { background-color: #F8F9FA !important; color: var(--fili-nav-accent) !important; } } /* Tablet Adjustments (992px - 1199px) */ @media (min-width: 992px) and (max-width: 1199px) { .fili-navbar-component { --fili-nav-font-size: 14px; } .fili-navbar-component .fili-nav-link { padding: 0 5px; } .fili-navbar-component .fili-nav-item.fili-nav-home { flex: 0 0 42px; } } /* ========================================================================== MOBILE STYLING (< 992px) ========================================================================== */ @media (max-width: 991px) { .fili-navbar-component { --fili-nav-height: auto; } .fili-navbar-component .fili-navbar-inner { height: auto; } .fili-navbar-component .fili-nav-toggler { background-color: #ffffff; border: 1px solid var(--fili-nav-border-color) !important; border-radius: 4px; padding: 6px 14px; height: 38px; display: inline-flex; align-items: center; transition: background-color 0.2s ease, border-color 0.2s ease; } .fili-navbar-component .fili-nav-toggler:hover, .fili-navbar-component .fili-nav-toggler:focus, .fili-navbar-component .fili-nav-toggler[aria-expanded="true"] { background-color: var(--fili-nav-accent); border-color: var(--fili-nav-accent) !important; } .fili-navbar-component .fili-nav-toggler:hover .fili-toggler-label, .fili-navbar-component .fili-nav-toggler[aria-expanded="true"] .fili-toggler-label { color: #ffffff; } .fili-navbar-component .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2851, 51, 51, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important; width: 1.1em; height: 1.1em; } .fili-navbar-component .fili-nav-toggler:hover .navbar-toggler-icon, .fili-navbar-component .fili-nav-toggler[aria-expanded="true"] .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important; } .fili-navbar-component .fili-toggler-label { color: var(--fili-nav-text); font-size: 12px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; line-height: 1; } .fili-navbar-component .navbar-collapse { background-color: #ffffff; padding: 0 !important; border-top: 1px solid var(--fili-nav-border-color); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08); max-height: 80vh; overflow-y: auto !important; } .fili-navbar-component .fili-nav-item { border-bottom: 1px solid var(--fili-nav-border-color); } .fili-navbar-component .fili-nav-item:last-child { border-bottom: none; } .fili-navbar-component .fili-nav-item.fili-nav-home { background-color: transparent; } .fili-navbar-component .fili-nav-item.fili-nav-home .fili-nav-link { color: var(--fili-nav-text) !important; padding: 13px 18px; } .fili-navbar-component .fili-nav-link { padding: 13px 18px; display: flex; align-items: center; justify-content: space-between; font-family: var(--font-primary, sans-serif); font-size: 14px; font-weight: 600; text-align: left; color: var(--fili-nav-text) !important; } .fili-navbar-component .fili-nav-item.active .fili-nav-link { color: var(--fili-nav-accent) !important; background-color: transparent; border-left: none; } .fili-navbar-component .fili-dropdown-icon { padding: 4px 8px; font-size: 12px; color: #666666; transform: rotate(0deg); transition: transform 0.25s ease, color 0.15s ease; } .fili-navbar-component .fili-nav-item.open .fili-dropdown-icon, .fili-navbar-component .fili-nav-item.show .fili-dropdown-icon, .fili-navbar-component .fili-nav-link[aria-expanded="true"] .fili-dropdown-icon { transform: rotate(180deg); color: var(--fili-nav-accent); } .fili-navbar-component .fili-dropdown-menu { display: block !important; max-height: 0; opacity: 0; visibility: hidden; overflow: hidden; list-style: none; padding: 0 !important; margin: 0; background-color: #F8F9FA !important; transition: max-height 0.35s ease, opacity 0.25s ease, visibility 0.25s ease; } .fili-navbar-component .fili-dropdown-menu.show { max-height: 400px; opacity: 1; visibility: visible; } .fili-navbar-component .fili-dropdown-menu .fili-dropdown-item { display: block; width: 100%; box-sizing: border-box; padding: 11px 18px 11px 32px; color: var(--fili-nav-text) !important; font-family: var(--font-primary, sans-serif); font-size: 14px; font-weight: 600; text-decoration: none; border-top: 1px solid var(--fili-nav-border-color); transition: color 0.15s ease, background-color 0.15s ease; } .fili-navbar-component .fili-dropdown-item:active, .fili-navbar-component .fili-dropdown-item:hover { color: var(--fili-nav-accent) !important; background-color: #EEEEEE !important; } } /* Main Overlay Container */ .preloader { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #ffffff; z-index: 999999; display: flex; align-items: center; justify-content: center; opacity: 1; visibility: visible; transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.35s ease; } /* Dismissed State */ .preloader.loaded { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* Center Content Box */ .preloader-box { display: flex; flex-direction: column; align-items: center; gap: 16px; } /* Graphic Container */ .preloader-graphic { position: relative; width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; } /* Center Icon Pulsing Effect */ .preloader-graphic .center-icon { color: #FF5555; z-index: 2; animation: icon-pulse 1.6s ease-in-out infinite; } /* Dual Orbit Rings */ .orbit-ring { position: absolute; border-radius: 50%; box-sizing: border-box; } /* Outer Gradient Ring (Clockwise) */ .orbit-ring.ring-outer { inset: 0; border: 3px solid transparent; border-top-color: #FF5555; border-right-color: rgba(255, 85, 85, 0.2); animation: spin-clockwise 1.1s linear infinite; } /* Inner Accent Ring (Counter-Clockwise) */ .orbit-ring.ring-inner { inset: 7px; border: 2px solid transparent; border-bottom-color: #FF5555; border-left-color: rgba(255, 85, 85, 0.3); animation: spin-counter-clockwise 0.85s linear infinite; } /* Text Container */ .preloader-text { display: flex; flex-direction: column; align-items: center; gap: 4px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .preloader-text .brand-name { font-size: 13px; font-weight: 800; letter-spacing: 2px; color: #1e293b; text-transform: uppercase; } .preloader-text .status-msg { font-size: 12px; font-weight: 500; color: #64748b; display: flex; align-items: center; } /* Animated Dots (...) */ .preloader-text .dots span { opacity: 0; animation: dots-fade 1.4s infinite; } .preloader-text .dots span:nth-child(1) { animation-delay: 0.0s; } .preloader-text .dots span:nth-child(2) { animation-delay: 0.2s; } .preloader-text .dots span:nth-child(3) { animation-delay: 0.4s; } /* Keyframe Animations */ @keyframes spin-clockwise { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes spin-counter-clockwise { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); } } @keyframes icon-pulse { 0%, 100% { transform: scale(0.92); opacity: 0.8; } 50% { transform: scale(1.08); opacity: 1; } } @keyframes dots-fade { 0%, 100% { opacity: 0; } 50% { opacity: 1; } } /* -------------------------------------------------------------------------- 1. Scoped Module Variables -------------------------------------------------------------------------- */ .fili-scroll-widget { /* Fonts */ --fili-scroll-font-body: var(--font-primary, inherit); --fili-scroll-bg: var(--color-brand-dark, #0f172a); /* Dark Slate Base */ --fili-scroll-bg-hover: var(--color-brand-dark-hover, #1e293b); /* Hover Slate */ --fili-scroll-bg-active: var(--color-brand-dark-active, #020617); /* Active Slate */ --fili-scroll-text: var(--color-text-inverse, #ffffff); --fili-scroll-divider: rgba(255, 255, 255, 0.15); --fili-scroll-radius: var(--radius-md, 8px); --fili-scroll-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.2)); --fili-scroll-transition-main: opacity var(--transition-normal, 0.3s), visibility var(--transition-normal, 0.3s), transform var(--transition-fast, 0.2s); } /* -------------------------------------------------------------------------- 2. Main Floating Widget Container -------------------------------------------------------------------------- */ .fili-scroll-widget { position: fixed; right: 0; top: 50%; z-index: 9999; display: flex; flex-direction: column; background-color: var(--fili-scroll-bg); color: var(--fili-scroll-text); border-radius: var(--fili-scroll-radius) 0 0 var(--fili-scroll-radius); box-shadow: var(--fili-scroll-shadow); overflow: hidden; transform: translateY(-50%) translateZ(0); backface-visibility: hidden; -webkit-backface-visibility: hidden; will-change: transform, opacity; opacity: 0; visibility: hidden; transition: var(--fili-scroll-transition-main); } /* Active Display State */ .fili-scroll-widget.show { opacity: 1; visibility: visible; } /* -------------------------------------------------------------------------- 3. Individual Button Styling & Micro-Interactions -------------------------------------------------------------------------- */ .fili-scroll-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px 9px; background: transparent; color: var(--fili-scroll-text); border: none; cursor: pointer; /* Typography */ font-family: var(--fili-scroll-font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.5px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; transition: background-color 0.2s ease, color 0.2s ease; } /* Vertical Text Orientation */ .fili-scroll-btn .fili-scroll-text { writing-mode: vertical-rl; transform: rotate(180deg); line-height: 1; white-space: nowrap; } /* Icon Alignment & Micro-Animations */ .fili-scroll-btn .fili-scroll-icon { font-size: 12px; line-height: 1; transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); } /* Hover Micro-Interactions */ .fili-scroll-btn:hover { background-color: var(--fili-scroll-bg-hover); color: var(--fili-scroll-text); } .fili-scroll-top:hover .fili-scroll-icon { transform: translateY(-3px); } .fili-scroll-bottom:hover .fili-scroll-icon { transform: translateY(3px); } /* Active Click Feedback */ .fili-scroll-btn:active { background-color: var(--fili-scroll-bg-active); } /* Separator Line */ .fili-scroll-divider { height: 1px; width: 100%; background-color: var(--fili-scroll-divider); } @media (max-width: 576px) { .fili-scroll-btn { padding: 10px 7px; font-size: 10px; } .fili-scroll-btn .fili-scroll-icon { font-size: 10px; } } /* -------------------------------------------------------------------------- 1. Scoped Module Variables (--fili-tb-*) -------------------------------------------------------------------------- */ .fili-top-bar { --fili-tb-font: var(--font-heading, sans-serif); --fili-tb-max-width: 1230px; --fili-tb-min-height: 55px; --fili-tb-bg: #ffffff; --fili-tb-border: #dedede; --fili-tb-text-dark: #17222b; --fili-tb-text-muted: #39424a; --fili-tb-divider: #b9bcbf; --fili-tb-accent: #FF5555; --fili-tb-accent-hover: #e04444; --fili-tb-trend-bg: #FFE5E5; --fili-tb-input-bg: #f8fafc; --fili-tb-input-border: #cbd5e1; --fili-tb-shadow-focus: 0 4px 14px rgba(255, 85, 85, 0.22); --fili-tb-transition: 0.25s cubic-bezier(0.16, 1, 0.3, 1); display: flex; align-items: center; padding: 5px 0; box-sizing: border-box; background-color: var(--fili-tb-bg); border-bottom: 1px solid var(--fili-tb-border); min-height: var(--fili-tb-min-height); font-family: var(--fili-tb-font); font-size: 14px; color: var(--fili-tb-text-muted); } .fili-top-bar .container { width: 100%; max-width: var(--fili-tb-max-width); padding-left: 15px; padding-right: 15px; margin-left: auto; margin-right: auto; } .fili-top-bar .top-bar-ticker { font-size: 13.5px; color: var(--fili-tb-text-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; } .fili-top-bar .magazine-subtitle { font-weight: 600; color: var(--fili-tb-text-dark); opacity: 0.9; } .fili-top-bar .magazine-subtitle i { color: var(--fili-tb-accent); } .fili-top-bar #fili-live-clock { font-weight: 600; color: var(--fili-tb-text-dark); font-variant-numeric: tabular-nums; display: inline-block; min-width: 62px; text-align: center; } .fili-top-bar .social-links a { color: var(--fili-tb-text-muted); font-size: 13px; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; transition: color var(--fili-tb-transition), background-color var(--fili-tb-transition); } .fili-top-bar .social-links a:hover { color: #ffffff; background-color: var(--fili-tb-accent); } .fili-top-bar .v-divider { color: var(--fili-tb-divider); font-weight: 300; font-size: 16px; opacity: 0.8; } /* -------------------------------------------------------------------------- 2. Circle-to-Bar Rolling Search Bar -------------------------------------------------------------------------- */ .fili-top-bar .top-bar-search .search-form { position: relative; width: 32px; height: 32px; transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .fili-top-bar .top-bar-search .search-form:hover, .fili-top-bar .top-bar-search .search-form:focus-within { width: 210px; } .fili-top-bar .top-bar-search .search-input { width: 100%; height: 32px; font-family: inherit; font-size: 12px; color: var(--fili-tb-text-dark); background-color: var(--fili-tb-input-bg); border: 1px solid transparent; border-radius: 16px; padding: 4px 34px 4px 14px; opacity: 0; cursor: pointer; transition: opacity 0.25s ease, border-color var(--fili-tb-transition), background-color var(--fili-tb-transition), box-shadow var(--fili-tb-transition); } .fili-top-bar .top-bar-search .search-form:hover .search-input, .fili-top-bar .top-bar-search .search-form:focus-within .search-input { opacity: 1; cursor: text; border-color: var(--fili-tb-input-border); } .fili-top-bar .top-bar-search .search-input:focus { background-color: #ffffff; border-color: var(--fili-tb-accent); box-shadow: var(--fili-tb-shadow-focus); outline: none; } .fili-top-bar .top-bar-search .search-input::placeholder { color: #94a3b8; } .fili-top-bar .top-bar-search .btn-search { position: absolute; right: 0; top: 0; width: 32px; height: 32px; background-color: var(--fili-tb-accent); color: #ffffff; border: none; border-radius: 50%; font-size: 12px; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; transition: background-color var(--fili-tb-transition); } .fili-top-bar .top-bar-search .btn-search .search-icon { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } .fili-top-bar .top-bar-search .search-form:hover .btn-search .search-icon, .fili-top-bar .top-bar-search .search-form:focus-within .btn-search .search-icon { transform: rotate(360deg); } .fili-top-bar .top-bar-search .btn-search:hover { background-color: var(--fili-tb-accent-hover); color: #ffffff; } /* -------------------------------------------------------------------------- 3. Responsive Breakpoints -------------------------------------------------------------------------- */ /* Tablet & Medium Displays (<= 991px) */ @media screen and (max-width: 991px) { .fili-top-bar { font-size: 13px; } .fili-top-bar .top-bar-ticker { font-size: 12.5px; } .fili-top-bar .top-bar-search .search-form:hover, .fili-top-bar .top-bar-search .search-form:focus-within { width: 170px; } } /* Mobile Landscape & Standard Phones (<= 767px) */ @media screen and (max-width: 767px) { .fili-top-bar { padding-left: 10px; padding-right: 10px; min-height: 38px; } .fili-top-bar .container { padding-left: 0; padding-right: 0; } .fili-top-bar .magazine-subtitle, .fili-top-bar .v-divider-desktop { display: none !important; } .fili-top-bar .top-bar-search .search-form:hover, .fili-top-bar .top-bar-search .search-form:focus-within { width: 140px; } .fili-top-bar .social-links a { width: 20px; height: 20px; font-size: 11px; } } /* Small Mobile Phones (<= 480px) */ @media screen and (max-width: 480px) { /* Hide social links on tiny screens to preserve space for clock and search */ .fili-top-bar .social-links, .fili-top-bar .v-divider { display: none !important; } .fili-top-bar #fili-live-clock { min-width: 52px; font-size: 12px; } /* Dynamic viewport expansion so expanded search won't overflow screen boundary */ .fili-top-bar .top-bar-search .search-form:hover, .fili-top-bar .top-bar-search .search-form:focus-within { width: min(150px, 45vw); } }