/*
Theme Name: Chain
Theme URI: https://templatemo.com/tm-570-chain-app-dev
Author: TemplateMo (HTML), converted to WP by wp_me_site
Author URI: https://templatemo.com/
Description: App landing page WordPress theme, converted from the TemplateMo 570 "Chain App Dev" Bootstrap 5 HTML template. Single-page front page with banner, services, about, testimonials, pricing and newsletter sections.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: Creative Commons Attribution 3.0 (original template) / theme code MIT
License URI: https://templatemo.com/
Text Domain: chain
Tags: landing-page, one-page, app, business, bootstrap, custom-logo, custom-menu, featured-images
*/

/* ---------------------------------------------------------------------------
   Visual styles ship in assets/css/templatemo-chain-app-dev.css (+ Bootstrap,
   animated.css, owl.css), enqueued from functions.php. The rules below are
   the only theme-authored CSS. They are namespaced under the `.chain-site`
   root wrapper (opened in header.php, closed in footer.php) so they never
   leak into WordPress-injected UI such as the logged-in admin bar.
   --------------------------------------------------------------------------- */

/* Typeface: the native system font stack (the browser/OS default) — clean and
   with built-in Vietnamese coverage (San Francisco on macOS/iOS, Segoe UI on
   Windows, Roboto on Android). Set on the wrapper so all text descendants
   inherit it (overrides the template's `html, body { font-family: Roboto }`);
   form controls are listed explicitly because they don't inherit font-family.
   Scoped to .chain-site so the admin bar keeps its own font. */
.chain-site,
.chain-site input,
.chain-site button,
.chain-site select,
.chain-site textarea {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* Make the WP custom-logo behave like the template's <img> logo. */
.chain-site .logo .custom-logo-link {
	display: inline-block;
	line-height: 0;
}
.chain-site .logo .custom-logo {
	max-height: 40px;
	width: auto;
}

/* The template logo can also fall back to the site title as text. A single
   deep indigo navy is used in every state — elegant, high-contrast on the
   white banner / header, and cohesive with the theme's blue accent. */
.chain-site .logo .site-title-text {
	color: #1a237e;
	font-size: 26px;
	font-weight: 700;
	letter-spacing: 0.5px;
}
.chain-site .background-header .logo .site-title-text {
	color: #1a237e;
}

/* Generic content (blog/page fallbacks rendered by index.php/page.php). */
.chain-site .page-content-area {
	padding: 180px 0 80px;
	min-height: 60vh;
}
.chain-site .page-content-area .post-title {
	margin-bottom: 20px;
}

/* Sticky header — keep the nav fixed to the top of the viewport on every page
   while scrolling (the template only made it absolute, fixing it via JS on the
   front page alone). The element always carries `.header-area`, so this also
   covers the scrolled `.background-header` state. */
.chain-site .header-area {
	position: fixed;
}

/* Shrink the header more on scroll — a compact 48px sticky bar (the template's
   default only went to 80px). Logo line-height matches the height and the nav
   is re-centred: nav links are 40px tall, so margin-top = (48 - 40) / 2 = 4px.
   The logo text is nudged smaller for the compact look. */
.chain-site .header-area.background-header {
	height: 48px !important;
}
/* The template gives .main-nav a min-height of 80px, which held the scrolled
   header tall regardless of the height above — shrink it too. */
.chain-site .header-area.background-header .main-nav {
	min-height: 48px !important;
}
.chain-site .header-area.background-header .main-nav .logo {
	line-height: 48px;
}
.chain-site .header-area.background-header .main-nav .nav {
	margin-top: 4px !important;
}
.chain-site .header-area.background-header .logo .site-title-text {
	font-size: 20px;
}

/* The template reserves the LAST and 6th nav items for a white "Sign In"
   button (white text, meant to sit on a coloured pill). Our assigned menu has
   no such button, so the last item ("Liên hệ") inherited white text that
   vanished on hover/active over a light header. Make those items behave like
   normal links. */
.chain-site .header-area .main-nav .nav li:last-child a,
.chain-site .header-area .main-nav .nav li:nth-child(6) a {
	color: #2a2a2a !important;
	font-weight: 500 !important;
}
.chain-site .header-area .main-nav .nav li:last-child a:hover,
.chain-site .header-area .main-nav .nav li:last-child a.active,
.chain-site .header-area .main-nav .nav li:last-child.current-menu-item a,
.chain-site .header-area .main-nav .nav li:nth-child(6) a:hover,
.chain-site .header-area .main-nav .nav li:nth-child(6) a.active {
	color: #4b8ef1 !important;
}
/* Mark the current page in the nav (WP adds .current-menu-item). */
.chain-site .header-area .main-nav .nav li.current-menu-item a {
	color: #4b8ef1 !important;
}

/* Interior pages (contact, blog, single…) have no dark hero behind the
   absolutely-positioned header, so give it a solid white bar with dark brand
   text — otherwise the white logo/nav is invisible on the white content. */
body:not(.home) .chain-site .header-area {
	background-color: #fff;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
	border-bottom-color: #eee;
}
body:not(.home) .chain-site .header-area .logo .site-title-text {
	color: #1a237e;
}

/* Contact / single page content polish. */
.chain-site .page-content-area .post-title {
	font-size: 34px;
	font-weight: 700;
	color: #1e1e1e;
}
.chain-site .page-content-area .post-content p,
.chain-site .page-content-area .post-excerpt p {
	color: #4a4a4a;
	line-height: 1.7;
}

/* Related posts block (single.php) — replaces the old prev/next post nav. */
.chain-site .related-posts {
	border-top: 1px solid #eceef3;
	padding-top: 30px;
}
.chain-site .related-posts-title {
	font-size: 24px;
	font-weight: 700;
	color: #1e1e1e;
	margin-bottom: 24px;
}
.chain-site .related-post {
	margin-bottom: 24px;
}
.chain-site .related-post-link {
	display: block;
	text-decoration: none;
}
.chain-site .related-post-thumb {
	overflow: hidden;
	border-radius: 8px;
	margin-bottom: 12px;
}
.chain-site .related-post-thumb img {
	width: 100%;
	height: 180px;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}
.chain-site .related-post-link:hover .related-post-thumb img {
	transform: scale(1.05);
}
.chain-site .related-post-title {
	font-size: 17px;
	font-weight: 600;
	line-height: 1.4;
	color: #1e1e1e;
	margin: 0;
	transition: color 0.2s ease;
}
.chain-site .related-post-link:hover .related-post-title {
	color: rgba(91, 104, 235, 1);
}
.chain-site .related-post-meta {
	margin-top: 8px;
	color: #8a8f9c;
}

/* Contact Form 7 — match the theme (rounded inputs, gradient submit). */
.chain-site .wpcf7 .wpcf7-form-control-wrap {
	display: block;
}
.chain-site .wpcf7 input[type="text"],
.chain-site .wpcf7 input[type="email"],
.chain-site .wpcf7 input[type="tel"],
.chain-site .wpcf7 input[type="url"],
.chain-site .wpcf7 input[type="number"],
.chain-site .wpcf7 textarea,
.chain-site .wpcf7 select {
	width: 100%;
	padding: 12px 16px;
	margin: 6px 0 16px;
	border: 1px solid #e2e5ec;
	border-radius: 6px;
	background: #fff;
	font-size: 15px;
	line-height: 1.5;
	color: #2a2a2a;
}
.chain-site .wpcf7 textarea {
	min-height: 150px;
	resize: vertical;
}
.chain-site .wpcf7 input:focus,
.chain-site .wpcf7 textarea:focus {
	outline: none;
	border-color: rgba(91, 104, 235, 1);
	box-shadow: 0 0 0 3px rgba(91, 104, 235, 0.12);
}
.chain-site .wpcf7 label {
	font-weight: 600;
	color: #2a2a2a;
}
.chain-site .wpcf7 input[type="submit"] {
	display: inline-block;
	margin-top: 8px;
	padding: 13px 30px;
	border: none;
	border-radius: 50px;
	color: #fff;
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
	background: linear-gradient(105deg, rgba(91, 104, 235, 1) 0%, rgba(40, 225, 253, 1) 100%);
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.chain-site .wpcf7 input[type="submit"]:hover {
	opacity: 0.92;
	transform: translateY(-1px);
}
.chain-site .wpcf7-spinner {
	margin: 12px 0 0 8px;
}

/* =========================================================================
   Contact page  (body.chain-contact — slug "lien-he")
   Add any contact-page-only styles here. The `chain-contact` body class is
   added in functions.php and is stable across installs (not ID-based).
   ========================================================================= */
body.chain-contact .chain-site .page-content-area {
	padding-top: 160px;
}
/* Center the intro + form in a comfortable column. */
body.chain-contact .chain-site .page-content-area .col-lg-8 {
	max-width: 720px;
}
body.chain-contact .chain-site .page-content-area .post-content > p:first-child {
	margin-bottom: 28px;
	font-size: 17px;
	color: #5a5a5a;
}
/* Example — uncomment / edit to taste:
body.chain-contact .chain-site .wpcf7 input[type="submit"] {
	width: 100%;
}
*/

/* =========================================================================
   Comments — the theme had no comments.php, so WP rendered the default form
   unstyled. Match it to the theme (rounded inputs, gradient submit, indigo
   focus) for a consistent look.
   ========================================================================= */
.chain-site .comments-area {
	margin-top: 40px;
	padding-top: 30px;
	border-top: 1px solid #eee;
}
.chain-site .comments-title,
.chain-site .comment-reply-title {
	font-size: 24px;
	font-weight: 700;
	color: #1e1e1e;
	margin-bottom: 18px;
}
.chain-site .comment-list {
	list-style: none;
	margin: 0 0 30px;
	padding: 0;
}
.chain-site .comment-list .comment-body {
	padding: 18px 0;
	border-bottom: 1px solid #f0f0f0;
}
.chain-site .comment-author .fn {
	font-weight: 600;
	color: #1e1e1e;
}
.chain-site .comment-metadata a {
	color: #999;
	font-size: 13px;
	text-decoration: none;
}
.chain-site .comment-notes,
.chain-site .logged-in-as {
	color: #777;
	font-size: 14px;
	margin-bottom: 16px;
}
.chain-site .comment-form label {
	display: block;
	font-weight: 600;
	color: #2a2a2a;
	margin-bottom: 6px;
}
.chain-site .comment-form input[type="text"],
.chain-site .comment-form input[type="email"],
.chain-site .comment-form input[type="url"],
.chain-site .comment-form textarea {
	width: 100%;
	padding: 12px 16px;
	margin-bottom: 16px;
	border: 1px solid #e2e5ec;
	border-radius: 6px;
	background: #fff;
	font-size: 15px;
	line-height: 1.5;
	color: #2a2a2a;
}
.chain-site .comment-form textarea {
	min-height: 140px;
	resize: vertical;
}
.chain-site .comment-form input:focus,
.chain-site .comment-form textarea:focus {
	outline: none;
	border-color: rgba(91, 104, 235, 1);
	box-shadow: 0 0 0 3px rgba(91, 104, 235, 0.12);
}
/* Cookie-consent checkbox row: keep label inline, normal weight. */
.chain-site .comment-form-cookies-consent label {
	display: inline;
	font-weight: 400;
	color: #777;
}
.chain-site .comment-form-cookies-consent input {
	width: auto;
	margin-right: 8px;
}
.chain-site .comment-form .form-submit input[type="submit"],
.chain-site .comment-form #submit {
	display: inline-block;
	padding: 13px 32px;
	border: none;
	border-radius: 50px;
	color: #fff;
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
	background: linear-gradient(105deg, rgba(91, 104, 235, 1) 0%, rgba(40, 225, 253, 1) 100%);
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.chain-site .comment-form .form-submit input[type="submit"]:hover,
.chain-site .comment-form #submit:hover {
	opacity: 0.92;
	transform: translateY(-1px);
}
.chain-site .comments-area a {
	color: rgba(91, 104, 235, 1);
}
.chain-site .comment-reply-link {
	font-weight: 600;
}

/* =========================================================================
   Archive / category — two-column layout with post cards.
   ========================================================================= */
.chain-site .archive-header {
	margin-bottom: 28px;
	padding-bottom: 16px;
	border-bottom: 2px solid #f0f0f0;
}
.chain-site .archive-header .post-title {
	margin-bottom: 6px;
}
.chain-site .archive-description {
	color: #777;
	line-height: 1.6;
}
.chain-site .post-cards {
	display: flex;
	flex-direction: column;
	gap: 22px;
}
.chain-site .post-card {
	display: flex;
	gap: 18px;
	background: #fff;
	border: 1px solid #eef0f4;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.chain-site .post-card:hover {
	box-shadow: 0 8px 26px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}
.chain-site .post-card-thumb {
	flex: 0 0 200px;
	max-width: 200px;
	overflow: hidden;
}
.chain-site .post-card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.chain-site .post-card-body {
	flex: 1;
	padding: 18px 20px 18px 0;
	min-width: 0;
}
.chain-site .post-card:not(:has(.post-card-thumb)) .post-card-body {
	padding-left: 20px;
}
.chain-site .post-card-title {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.35;
	margin: 0 0 8px;
}
.chain-site .post-card-title a {
	color: #1e2330;
	text-decoration: none;
}
.chain-site .post-card-title a:hover {
	color: rgba(91, 104, 235, 1);
}
.chain-site .post-card-meta {
	font-size: 13px;
	color: #9aa0ab;
	margin-bottom: 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}
.chain-site .post-card-meta i {
	margin-right: 4px;
}
.chain-site .post-card-meta a {
	color: #9aa0ab;
	text-decoration: none;
}
.chain-site .post-card-meta a:hover {
	color: rgba(91, 104, 235, 1);
}
.chain-site .post-card-excerpt {
	color: #5a6270;
	font-size: 14.5px;
	line-height: 1.65;
	margin-bottom: 12px;
}
.chain-site .post-card-more {
	font-size: 14px;
	font-weight: 600;
	color: rgba(91, 104, 235, 1);
	text-decoration: none;
}
.chain-site .post-card-more i {
	font-size: 12px;
	transition: transform 0.2s ease;
}
.chain-site .post-card-more:hover i {
	transform: translateX(3px);
}
/* Pagination */
.chain-site .post-pagination {
	margin-top: 34px;
}
.chain-site .post-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}
.chain-site .post-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid #e2e5ec;
	border-radius: 8px;
	color: #4a4a4a;
	text-decoration: none;
	font-weight: 600;
}
.chain-site .post-pagination .page-numbers.current,
.chain-site .post-pagination .page-numbers:hover {
	background: linear-gradient(105deg, rgba(91, 104, 235, 1) 0%, rgba(40, 225, 253, 1) 100%);
	border-color: transparent;
	color: #fff;
}

/* =========================================================================
   Blog sidebar widgets
   ========================================================================= */
.chain-site .chain-sidebar {
	position: relative;
}
.chain-site .chain-widget {
	background: #fff;
	border: 1px solid #eef0f4;
	border-radius: 10px;
	padding: 20px 22px;
	margin-bottom: 24px;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
}
.chain-site .chain-widget-title {
	font-size: 16px;
	font-weight: 700;
	color: #1e2330;
	margin: 0 0 16px;
	padding-bottom: 12px;
	border-bottom: 2px solid #f0f0f0;
	position: relative;
}
.chain-site .chain-widget-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 46px;
	height: 2px;
	background: linear-gradient(105deg, rgba(91, 104, 235, 1) 0%, rgba(40, 225, 253, 1) 100%);
}
.chain-site .chain-widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.chain-site .chain-widget > ul > li {
	padding: 9px 0;
	border-bottom: 1px solid #f3f4f6;
	display: flex;
	justify-content: space-between;
	gap: 10px;
}
.chain-site .chain-widget > ul > li:last-child {
	border-bottom: 0;
}
.chain-site .chain-widget > ul > li a {
	color: #3a4150;
	text-decoration: none;
}
.chain-site .chain-widget > ul > li a:hover {
	color: rgba(91, 104, 235, 1);
}
/* Recent posts list with thumbnails */
.chain-site .chain-recent-item {
	display: flex;
	gap: 12px;
	padding: 10px 0 !important;
	border-bottom: 1px solid #f3f4f6 !important;
}
.chain-site .chain-recent-thumb {
	flex: 0 0 64px;
}
.chain-site .chain-recent-thumb img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 8px;
	display: block;
}
.chain-site .chain-recent-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
}
.chain-site .chain-recent-title {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: #1e2330 !important;
}
.chain-site .chain-recent-date {
	font-size: 12px;
	color: #9aa0ab;
	margin-top: 3px;
}
/* Sidebar search form */
.chain-site .chain-sidebar .search-form {
	display: flex;
	gap: 8px;
}
.chain-site .chain-sidebar .search-form input[type="search"] {
	flex: 1;
	min-width: 0;
	padding: 10px 14px;
	border: 1px solid #e2e5ec;
	border-radius: 8px;
	font-size: 14px;
}
.chain-site .chain-sidebar .search-form input[type="submit"] {
	padding: 10px 16px;
	border: none;
	border-radius: 8px;
	color: #fff;
	font-weight: 600;
	cursor: pointer;
	background: linear-gradient(105deg, rgba(91, 104, 235, 1) 0%, rgba(40, 225, 253, 1) 100%);
}

/* Stack the post cards and sidebar on small screens. */
@media (max-width: 991px) {
	.chain-site .post-card {
		flex-direction: column;
	}
	.chain-site .post-card-thumb {
		flex-basis: auto;
		max-width: none;
		height: 200px;
	}
	.chain-site .post-card-body {
		padding: 0 20px 20px;
	}
}

/* =========================================================================
   Comments — restyle the comment list and meta into clean cards.
   ========================================================================= */
.chain-site .comment-list {
	list-style: none;
	margin: 0 0 36px;
	padding: 0;
}
.chain-site .comment-list .children {
	list-style: none;
	margin: 0 0 0 46px;
	padding: 0;
}
.chain-site .comment-list .comment-body {
	position: relative;
	padding: 22px 0 22px 74px;
	border-bottom: 1px solid #f0f0f0;
	min-height: 78px;
}
.chain-site .comment-author {
	margin-bottom: 2px;
}
.chain-site .comment-author .avatar {
	position: absolute;
	left: 0;
	top: 22px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
}
.chain-site .comment-author .fn {
	font-style: normal;
	font-weight: 700;
	font-size: 15px;
	color: #1e2330;
}
.chain-site .comment-author .says {
	display: none;
}
/* `.comment-meta` is a <footer>, so the template's global `footer { … }` rule
   (footer-bg image, margin-top:130px, padding-top:300px) leaked into it. Reset
   those here. */
.chain-site .comment-meta {
	margin: 0 0 10px;
	padding: 0;
	background: none;
}
.chain-site .comment-metadata {
	font-size: 12.5px;
}
.chain-site .comment-metadata a {
	color: #9aa0ab;
	text-decoration: none;
}
.chain-site .comment-metadata a:hover {
	color: rgba(91, 104, 235, 1);
}
.chain-site .comment-content {
	color: #4a4a4a;
	font-size: 15px;
	line-height: 1.7;
}
.chain-site .comment-content p {
	margin-bottom: 8px;
}
.chain-site .comment-awaiting-moderation {
	display: inline-block;
	margin: 4px 0;
	font-size: 12.5px;
	color: #b45309;
}
.chain-site .reply {
	margin-top: 4px;
}
.chain-site .comment-reply-link {
	display: inline-block;
	font-size: 13px;
	font-weight: 600;
	color: rgba(91, 104, 235, 1);
	text-decoration: none;
}
.chain-site .comment-reply-link:hover {
	text-decoration: underline;
}

/* Cancel-reply turned into a small round icon button next to the reply title. */
.chain-site .comment-reply-title small {
	margin-left: 4px;
}
.chain-site #cancel-comment-reply-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #f3f4f6;
	color: #9aa0ab;
	font-size: 13px;
	vertical-align: middle;
	transition: background 0.2s ease, color 0.2s ease;
}
.chain-site #cancel-comment-reply-link:hover {
	background: #fde8e8;
	color: #dc2626;
}
/* Screen-reader-only utility (used by the cancel-reply icon's label). */
.chain-site .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Header content spans the full viewport width — the template constrains it to
   the centered Bootstrap container (max-width ~1140-1320px), leaving the logo
   and nav floating in from the edges. Stretch it edge-to-edge with comfortable
   side padding. */
.chain-site .header-area .container {
	max-width: 100%;
}
@media (min-width: 1200px) {
	.chain-site .header-area .container {
		padding-left: 40px;
		padding-right: 40px;
	}
	/* Desktop nav: the template spaces items 20px each side (40px gaps), which
	   read a touch sparse — tighten them up. */
	.chain-site .header-area .main-nav .nav li {
		padding-left: 14px !important;
		padding-right: 14px !important;
	}
}

/* =========================================================================
   Small screens (mobile header + dropdown menu).
   - Hamburger was oversized (32×40, 30px bars) and overflowed the compact 48px
     sticky header → smaller bars + re-centred trigger.
   - Dropdown menu items were centred and only spanned the container (15px gaps
     each side) → left-align and stretch to the full viewport width.
   ========================================================================= */
@media (max-width: 1199px) {
	/* Menu toggle: a real Font Awesome icon (bars → times) instead of the
	   template's CSS-drawn hamburger/X, which clipped the close icon. */
	.chain-site .header-area .main-nav .menu-trigger {
		width: auto !important;
		height: auto !important;
		text-indent: 0 !important;
		font-size: 26px !important;
		line-height: 1 !important;
		color: #1e2330 !important;
		top: 36px;
		right: 24px;
	}
	.chain-site .header-area.background-header .main-nav .menu-trigger {
		top: 11px;
	}
	.chain-site .menu-trigger .menu-trigger-close {
		display: none;
	}
	.chain-site .menu-trigger.active .menu-trigger-open {
		display: none;
	}
	.chain-site .menu-trigger.active .menu-trigger-close {
		display: inline-block;
	}

	/* Dropdown menu: full viewport width (cancel the header's 15px padding),
	   left-aligned rows that sit just below the header. `clear: both` is the key
	   fix — the logo is float:left, and without clearing, the float intruded
	   into the FIRST item's line box, pushing "Trang chủ" ~167px to the right. */
	.chain-site .header-area .main-nav .nav {
		clear: both !important;
		width: auto !important;
		margin: 100px -15px 0 !important;
		text-align: center !important;
	}
	.chain-site .header-area.background-header .main-nav .nav {
		margin-top: 48px !important;
	}
	.chain-site .header-area .main-nav .nav li,
	.chain-site .header-area .main-nav .nav li a {
		text-align: center !important;
	}
	.chain-site .header-area .main-nav .nav li a {
		display: block !important;
		width: 100% !important;
		float: none !important;
		text-indent: 0 !important;
		padding: 0 24px !important;
		height: 46px !important;
		line-height: 46px !important;
	}
}