/* Minification failed. Returning unminified contents.
(2,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(7,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(10,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(12,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(13,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(14,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(17,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(18,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(19,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(21,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(22,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(23,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(24,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(137,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(191,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(192,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(201,32): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(206,37): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(209,38): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(382,16): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(414,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(421,26): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary'
(437,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(460,39): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(473,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(516,21): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(533,39): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(675,21): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(786,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(788,34): run-time error CSS1046: Expect comma, found '0'
(788,38): run-time error CSS1046: Expect comma, found '/'
(800,39): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(865,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(873,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(946,22): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary'
(963,35): run-time error CSS1046: Expect comma, found '0'
(963,39): run-time error CSS1046: Expect comma, found '/'
(984,21): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1090,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1113,26): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1181,26): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary'
(1336,35): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1376,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1552,26): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary'
(1574,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1592,39): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1669,26): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1772,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1814,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1824,26): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1864,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1868,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1908,26): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1930,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1941,39): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1960,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1972,22): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary'
(1996,32): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(2218,22): run-time error CSS1039: Token not allowed after unary operator: '-color-table'
(2285,26): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(2395,26): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(2419,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(2449,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(2520,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(2555,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(2614,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(2625,39): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(2629,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(2717,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(2732,39): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(2794,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(2814,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(2819,26): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary'
(2835,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(2883,22): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary'
(2931,35): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(3104,22): run-time error CSS1039: Token not allowed after unary operator: '-color-table'
(3128,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(3252,35): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(3413,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(3444,26): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(3529,26): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(3940,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(3944,36): run-time error CSS1046: Expect comma, found '0'
(3944,40): run-time error CSS1046: Expect comma, found '/'
(3955,35): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(3993,22): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(4033,21): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(4037,22): run-time error CSS1039: Token not allowed after unary operator: '-color-filter-left'
(4038,32): run-time error CSS1039: Token not allowed after unary operator: '-color-filter-left'
(4039,35): run-time error CSS1039: Token not allowed after unary operator: '-color-filter-left'
(4339,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(4413,22): run-time error CSS1039: Token not allowed after unary operator: '-color-title-edit'
(4424,22): run-time error CSS1039: Token not allowed after unary operator: '-color-title-edit'
(4460,22): run-time error CSS1039: Token not allowed after unary operator: '-color-title-edit'
(4631,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(4632,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(4720,22): run-time error CSS1039: Token not allowed after unary operator: '-color-button'
(4745,22): run-time error CSS1039: Token not allowed after unary operator: '-color-button'
(4779,22): run-time error CSS1039: Token not allowed after unary operator: '-color-table'
(4812,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(4819,40): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(4930,22): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(5050,17): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(5374,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(5470,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(5549,22): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(5560,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(5684,22): run-time error CSS1039: Token not allowed after unary operator: '-color-button'
(5734,26): run-time error CSS1039: Token not allowed after unary operator: '-color-filter-left'
(6164,22): run-time error CSS1039: Token not allowed after unary operator: '-color-button-thanh-toan'
(6487,22): run-time error CSS1039: Token not allowed after unary operator: '-color-button-hover'
(6534,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(6694,17): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(6942,22): run-time error CSS1039: Token not allowed after unary operator: '-color-special'
(6949,22): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(6950,24): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(7406,22): run-time error CSS1039: Token not allowed after unary operator: '-color-table'
(7445,30): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(7456,17): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(7590,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(7659,22): run-time error CSS1039: Token not allowed after unary operator: '-color-button'
(7690,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(7718,22): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(7769,17): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(7825,24): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(7891,22): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(7963,21): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(7984,26): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(8013,22): run-time error CSS1039: Token not allowed after unary operator: '-color-button'
(8172,22): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(8206,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(8302,35): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(8714,22): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(8740,38): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(8747,17): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(8842,21): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(8891,32): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(8935,17): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(9290,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(9294,22): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(9472,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(9901,17): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(10802,22): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(10920,22): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(10933,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(10973,35): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(10989,40): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(10990,41): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(10991,42): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(10995,40): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(10996,41): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(10997,42): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(11012,22): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(11125,32): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(11152,32): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(11164,35): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(11401,17): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(11405,17): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(11432,22): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(11551,17): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(11696,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(11892,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(11898,22): run-time error CSS1039: Token not allowed after unary operator: '-color-button-thanh-toan'
(11904,22): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(11962,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(11966,22): run-time error CSS1039: Token not allowed after unary operator: '-color-button-thanh-toan'
(12307,22): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(12338,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(12491,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(12511,22): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(12690,21): run-time error CSS1039: Token not allowed after unary operator: '-color-button-hover'
(12817,22): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(12871,22): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(13104,22): run-time error CSS1039: Token not allowed after unary operator: '-color-table'
(13148,22): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(13311,35): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(13344,26): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(13427,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(14394,22): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(14460,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(14577,39): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(14583,25): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(14669,27): run-time error CSS1038: Expected hex color, found '#cccc'
(14674,28): run-time error CSS1038: Expected hex color, found '#cccc'
(14674,32): run-time error CSS1062: Expected semicolon or closing curly-brace, found ' '
(15053,22): run-time error CSS1039: Token not allowed after unary operator: '-table-footer'
(15958,22): run-time error CSS1039: Token not allowed after unary operator: '-color-table'
(16004,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(16040,22): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(16184,47): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(16184,71): run-time error CSS1046: Expect comma, found '243'
(16184,78): run-time error CSS1046: Expect comma, found ')'
(16295,22): run-time error CSS1039: Token not allowed after unary operator: '-table-footer'
(16299,22): run-time error CSS1039: Token not allowed after unary operator: '-color-button-hover'
(16303,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(16308,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(16316,32): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(16317,33): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(16318,34): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(16328,35): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(16336,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(16400,22): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(16408,22): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(16435,22): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(16531,22): run-time error CSS1039: Token not allowed after unary operator: '-color-filter-left'
(16591,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(16700,34): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(16717,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(16724,22): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(16860,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(16923,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(17007,22): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(17036,21): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(17049,21): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(17057,22): run-time error CSS1039: Token not allowed after unary operator: '-color-button-thanh-toan'
(17070,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(17119,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(17128,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(17138,22): run-time error CSS1039: Token not allowed after unary operator: '-button-thanh-toan-hover'
(17269,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(17312,22): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(17316,26): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(17422,22): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(17579,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(17841,26): run-time error CSS1039: Token not allowed after unary operator: '-color-button'
(17956,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(18267,22): run-time error CSS1039: Token not allowed after unary operator: '-color-table'
(18273,21): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(18326,2): run-time error CSS1030: Expected identifier, found ' '
(18326,2): run-time error CSS1019: Unexpected token, found ' '
(18345,17): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(18355,17): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(18403,22): run-time error CSS1039: Token not allowed after unary operator: '-color-filter-left'
(18404,32): run-time error CSS1039: Token not allowed after unary operator: '-color-filter-left'
(18405,35): run-time error CSS1039: Token not allowed after unary operator: '-color-filter-left'
(18739,22): run-time error CSS1039: Token not allowed after unary operator: '-color-button'
(18743,26): run-time error CSS1039: Token not allowed after unary operator: '-color-button-hover'
(18765,22): run-time error CSS1039: Token not allowed after unary operator: '-color-filter-left'
(18773,22): run-time error CSS1039: Token not allowed after unary operator: '-table-footer'
(19042,22): run-time error CSS1039: Token not allowed after unary operator: '-color-table'
(19084,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(19102,40): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(19142,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(19155,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(19165,26): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(19261,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(19262,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(19282,26): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(19293,28): run-time error CSS1039: Token not allowed after unary operator: '-hover-loadding'
(19295,32): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(19351,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(19352,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(19361,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(19362,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(19387,22): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(19408,36): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(19412,29): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(19555,22): run-time error CSS1039: Token not allowed after unary operator: '-color-title-edit'
(19576,35): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(19580,32): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(19584,30): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(19635,22): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(19651,38): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(19668,17): run-time error CSS1039: Token not allowed after unary operator: '-color-button-hover'
(19721,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(19808,17): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(19812,17): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(19853,30): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(19876,21): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(19944,22): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(19953,22): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(19962,26): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(20074,21): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(20111,35): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(20142,22): run-time error CSS1039: Token not allowed after unary operator: '-color-table'
(20149,38): run-time error CSS1039: Token not allowed after unary operator: '-color-table'
(20157,32): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(20158,33): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(20159,35): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(20163,32): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(20167,33): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(20281,30): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(20383,34): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(20403,25): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(20404,36): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(20405,42): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(20438,36): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(20439,25): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(20456,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(20457,17): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(20470,32): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(20526,17): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(20532,22): run-time error CSS1039: Token not allowed after unary operator: '-color-table'
(20558,17): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(20595,17): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(20597,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(20622,22): run-time error CSS1039: Token not allowed after unary operator: '-color-table'
(20628,26): run-time error CSS1039: Token not allowed after unary operator: '-color-table'
(20629,21): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(20636,22): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(20648,17): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(21156,17): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(21279,22): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(21414,22): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(21419,22): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(21420,35): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(21424,35): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(21428,35): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(21436,22): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(21441,26): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(21467,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(21471,32): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(21472,33): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(21485,26): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(21628,21): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(21703,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(21931,22): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(21989,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(21990,22): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(22008,22): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(22061,22): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(22070,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(22133,33): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(22137,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(22180,22): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(22358,22): run-time error CSS1039: Token not allowed after unary operator: '-color-button'
(22437,35): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(22464,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(22502,26): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(22576,30): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(22605,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(22717,17): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(22718,22): run-time error CSS1039: Token not allowed after unary operator: '-color-table'
(22719,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(22833,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(22850,22): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(22869,36): run-time error CSS1046: Expect comma, found '0'
(22869,40): run-time error CSS1046: Expect comma, found '/'
(22901,28): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(23018,26): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(23025,26): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(23047,26): run-time error CSS1039: Token not allowed after unary operator: '-color-special'
(23156,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(23157,10): run-time error CSS1035: Expected colon, found '{'
(23209,22): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(23245,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(23294,22): run-time error CSS1039: Token not allowed after unary operator: '-color-table'
(23323,22): run-time error CSS1039: Token not allowed after unary operator: '-color-table'
(23358,32): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(23362,37): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(23365,38): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(23368,22): run-time error CSS1039: Token not allowed after unary operator: '-trans'
(23413,26): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(23416,32): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(23419,37): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(23422,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(23423,34): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(23481,33): run-time error CSS1039: Token not allowed after unary operator: '-color-filter-left'
(23482,34): run-time error CSS1039: Token not allowed after unary operator: '-color-filter-left'
(23483,35): run-time error CSS1039: Token not allowed after unary operator: '-color-filter-left'
(23520,21): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(23523,26): run-time error CSS1039: Token not allowed after unary operator: '-color-filter-left'
(23524,36): run-time error CSS1039: Token not allowed after unary operator: '-color-filter-left'
(23525,39): run-time error CSS1039: Token not allowed after unary operator: '-color-filter-left'
(23589,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(23591,34): run-time error CSS1046: Expect comma, found '0'
(23591,38): run-time error CSS1046: Expect comma, found '/'
(23803,22): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(23811,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(23895,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(23903,17): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(23921,22): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(23929,26): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(23955,26): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(23959,33): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(23969,35): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(23981,35): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(23993,32): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(24005,32): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(24063,22): run-time error CSS1039: Token not allowed after unary operator: '-color-button'
(24102,22): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(24107,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(24130,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(24138,22): run-time error CSS1039: Token not allowed after unary operator: '-color-special'
(24141,22): run-time error CSS1039: Token not allowed after unary operator: '-color-special'
(24214,22): run-time error CSS1039: Token not allowed after unary operator: '-color-special'
(24230,28): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(24275,23): run-time error CSS1046: Expect comma, found '0'
(24275,27): run-time error CSS1046: Expect comma, found '/'
(24283,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(24284,10): run-time error CSS1035: Expected colon, found '{'
(24313,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(24314,10): run-time error CSS1035: Expected colon, found '{'
(24344,32): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(24358,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(24359,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(24403,22): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(24413,22): run-time error CSS1039: Token not allowed after unary operator: '-color-special'
(24568,22): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
(24599,32): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(24603,37): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(24606,38): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(24610,32): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(24615,37): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(24619,38): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(24625,24): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(24643,26): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(24864,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(24914,21): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(24993,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(24996,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(25132,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(25133,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(25236,21): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(25371,26): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(25413,35): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(25554,36): run-time error CSS1046: Expect comma, found '0'
(25554,40): run-time error CSS1046: Expect comma, found '/'
(25557,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(25558,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(25737,38): run-time error CSS1046: Expect comma, found '0'
(25737,42): run-time error CSS1046: Expect comma, found '/'
(26267,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(26298,21): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(26338,32): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(26370,26): run-time error CSS1039: Token not allowed after unary operator: '-color-main'
 */
:root {
    --color-main: #0097c4;
    --color-primary: #0aaddd;
    --color-special: #ff4d71;
    --color-font-default: #000000;
    --font-color: #686868;
    --table-header-color: #e9eaf2;
    --table-footer-color: #e9eaf2;
    --border-default:1px solid #ccc;
    --color-button: #777;
    --color-button-hover: #575353;
    --color-filter-left: #d1d2d9;
    --color-button-thanh-toan: #f75e5c;
    --button-thanh-toan-hover: #f78483;
    --color-main-font: White;
    --color-table: #d1d2d9;
    --hover-loadding: #c7dfe6;
    --load-progress: #b2c70f;
    --table-footer: #e9eaf2;
    --color-title-edit: #e9eaf2;
    --color-img: hue-rotate(194deg);
    --color-add: #eb4a24;
    --color-sao-chep: #89b1bb;
    --color-sao-chep-hover: #75a6b2;
}

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/Materialicons.woff2')format('woff2');
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: 400;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased
}


.bg-1 {
    background: #1374ad !important
}

.bg-2 {
    background: #0aaddd !important
}

.bg-3 {
    background: #57BB49 !important
}

.bg-4 {
    background: #EE1B22 !important
}

.bg-5 {
    background: #ff6600 !important
}

.bg-6 {
    background: #ec5885 !important
}

.bg-7 {
    background: #674dff !important
}

.bg-8 {
    background: #c68039 !important
}

.bg-9 {
    background: linear-gradient(60deg, #2580B3 0%, #CBBACC 100%) !important
}

.bg-10 {
    background: linear-gradient(60deg, rgba(252,93,174,1) 0%, rgba(253,155,120,1) 100%) !important
}

.bg-11 {
    background: linear-gradient(60deg, #000851 0%, #1CB5E0 100%) !important
}

.bg-12 {
    background: #000000 !important
}

.bg-13 {
    background: linear-gradient(90deg, #4b6cb7 0%, #182848 100%) !important
}

.bg-14 {
    background: linear-gradient(60deg, #fee140 0%, #fa709a 100%) !important
}

.bg-15 {
    background: linear-gradient( 60deg,#870000 0%, #190A05 100%) !important;
}

.bg-16 {
    background: #666666 !important
}
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/Materialicons.woff2')format('woff2');
}
.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
}
a {
    cursor: pointer
}
a {
    color: var(--color-primary);
}
gara-body-status > li > input {
    outline: none;
    margin: 0 15px;
    width: calc(100% - 30px);
}
h5 {
    margin: 0;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input:focus, input[type="number"]:focus {
    outline: none
}
input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}
input[type="time"]::-webkit-inner-spin-button,
input[type="time"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}
input[type=number] {
    -moz-appearance: textfield;
}
label > input[type='radio'] {
    margin-right: 10px;
}
li .gara-section-list-functions {
    transition: all 1s ease;
    transition-delay: 0.8s;
}
li img.act-l {
    position: absolute;
    bottom: 0;
    left: -8px;
    transform: scaleX(-1);
}
li img.act-r {
    position: absolute;
    bottom: 0;
    right: -8px;
}
li.open .gara-section-list-functions {
    opacity: 1;
}
ul.gara-section-list-body > li.open {
    height: 72px;
    border: 1px solid var(--color-primary);
    border: 1px solid var(--color-primary)
}
li:not(.open) .gara-section-list-functions {
    opacity: 0;
}
tr.op-js-tr-hide.active {
    display: table-row;
}
tr:not(.op-js-tr-hide).active > td {
    border-top: 1px solid var(--color-primary);
    background: #e6e6e6;
    border-bottom: none;
}
    tr:not(.op-js-tr-hide).active > td:first-child {
        border-left: 1px solid var(--color-primary);
    }
    tr:not(.op-js-tr-hide).active > td:last-child {
        border-right: 1px solid var(--color-primary);
    }
    ul.gara-bill-detail + .LoHangHoas {
        width: 471px !important;
        display: flex;
        margin: 0;
        justify-content: flex-start;
        margin-left: 7px;
        padding: 0
    }
.LoHangHoas + .leave-a-note {
    margin-left: 140px
}
.LoHangHoas .gara-search-dropbox span {
    width: auto;
    max-width: 50%;
    display: inline-block;
    padding: 0;
}
.LoHangHoas .gara-search-dropbox {
    margin: 0;
    top: 30px;
    left: 66px;
    width: 275px;
    padding: 5px;
}
.LoHangHoas > div {
    display: flex;
    position: relative
}
.LoHangHoas input.date-expire {
    background: red
}
.LoHangHoas input.date-from {
    background: green
}
.LoHangHoas input.date-from {
    width: 100px;
    text-align: center;
    display: inline-block;
}
.LoHangHoas input:empty {
    background: white !important
}
.LoHangHoas input:not(.searchLo) {
    width: 75px !important;
    text-align: center;
    display: inline-block;
}
.LoHangHoas span {
    width: 66px;
    display: inline-block;
    padding: 7px
}
.LoHangHoas {
    position:relative;
    display: flex;
    padding: 0;
}
.a-disable {
    color: #bdbdbd !important;
}
.banlamviec-inline-information > div {
    display: flex;
    flex-direction: row;
    justify-content: space-between
}
.bill-information
.gara-popup-chietkhau:before {
    right: unset;
    left: 175px;
}
.bill-information .gara-bill-infor .gara-bill-infor-button {
    margin: 5px 15px;
}
.bill-information .gara-popup-chietkhau {
    left: 0;
    width: 310px;
    top: 33px;
}
.bill-information .gara-search-HH {
    border: none;
    border-bottom: 1px solid #ccc;
    border-radius: 0;
    padding-left: 0
}
.bill-main.less > .gara-bill-list {
    height: calc(100% - 55px) !important
}
.bill-main.more > .gara-bill-list {
    height: calc(100% - 350px) !important
}
.box-summary > div > *:not(label) {
    width: calc(100% - 120px );
    line-height: 30px;
}
.box-summary > div > label {
    margin: 0;
    width: 120px;
    line-height: 30px;
}
.box-summary > div {
    display: flex;
    margin-bottom: 5px;
    line-height: 25px;
}
.box-summary {
    width: 325px;
    max-height: 500px;
    display: inline-block;
    background: #ccc;
    padding: 10px 15px;
    border-radius: 3px
}
    .box-summary:not(.summary) + div {
        width: calc(100% - 325px);
        padding-left: 15px;
    }
.boxLeft input.dropdown:not(.choose-date-show) {
    border: none;
    box-shadow: none;
    border-radius: 0;
}
.op-filter-container .max-height-100 {
    max-height: 100px;
    overflow: auto;
}
.button-w100 {
    width: 100px;
}
.cancel {
    background: #e76f51 !important
}
.chart-summary {
    position: absolute;
    text-align: center;
    background: #FFF;
    border-radius: 80px;
    top: 26px;
    width: 144px;
    height: 144px;
    left: 122px;
    padding: 38px 15px;
}
.col-md-12.nopadding.list-img-user {
    overflow-x: hidden;
}
.danhsachxe .gara-detail-functions, .thongtinxe .gara-detail-functions {
    opacity: 0;
}
.dropdown-list label {
    line-height: 30px
}
.dropdown-list.open {
    display: block;
}
.gara .gara-detail-functions.open > a {
    width: 85px
}
.gara {
    height: calc(100vh - 166px);
}
.gara-Lohang .LoHangHoas {
    width: 515px !important;
    display: flex;
    margin: 0;
    justify-content: flex-start;
}
.gara-Lohang {
    width: 515px !important;
    margin: 0;
}
.gara-absolute-button a i {
    color:var(--color-primary)
}
.gara-absolute-button a {
    height: 30px;
    width: 30px;
    padding: 3px;
    color: black
}
.gara-absolute-button {
    position: absolute;
    z-index: 9;
    right: 3px
}
.gara-bangia-list li a {
    color: black;
    height: inherit;
    width: 100%;
}
.gara-bangia-list li {
    padding: 5px;
    border-bottom: 1px solid #ccc;
    text-align: left;
    color: black;
}
    .gara-bangia-list li:hover {
        background: rgba(0,0,0,0.15)
    }
.gara-bangia-list {
    position: absolute;
    padding: 7px;
    background: white;
    box-shadow: 3px 3px 6px #ccc;
    border: 1px solid var(--color-primary);
    padding-bottom: 15px;
}
.gara-bill .gara-bill-detail {
    background: white
}
    .gara-bill .gara-bill-detail:hover {
        background: var(--color-secondary )
    }
    .gara-bill .gara-bill-header > li:first-child, .gara-bill .gara-bill-detail > li:first-child, .gara-bill .gara-bill-header > li:last-child, .gara-bill .gara-bill-detail > li:last-child {
        width: 50px;
    }
    .gara-bill .gara-bill-header li, .gara-bill .gara-bill-detail li {
        text-align: center;
        padding: 7px 0;
        display: inline-block;
        justify-content: space-between;
        font-weight: bold;
        width: calc((100% - 100px) /5 );
        border: none;
        height: 30px;
    }
.gara-bill .gara-bill-header {
    background: var(--color-primary)
}
.gara-bill .gara-bill-header, .gara-bill .gara-bill-detail {
    white-space: nowrap;
    display: flex;
}
.gara-bill {
    display: inline-block;
    width: 100%
}
.gara-bill-datetime input {
    padding: 5px;
    display: inline-block;
    border: none;
    background: white;
    border-bottom: 1px solid #ccc;
    border-radius: 0;
    max-width: 75px;
    text-align: center;
    margin-right: 5px;
}
    .gara-bill-datetime input:focus {
        margin-bottom: -1px;
        border-bottom: 2px solid var(--color-primary)
    }
.gara-bill-datetime {
    display: flex
}
.gara-bill-detail li.gara-input input {
    height: 24px !important
}
.gara-bill-detail li.gara-input {
    padding: 5px 0;
}
.gara-bill-executions button {
    font-size: 16px;
    background: var(--color-primary);
    padding: 15px;
    color: white;
    line-height: 24px;
    height: 54px;
    display: flex;
    margin-right: 5px;
    border-radius: 5px;
    font-weight: bold;
    border: none;
    text-align: center;
    justify-content: center;
}
    .gara-bill-executions button i{
        display:none;
    }
.gara-bill-executions {
    padding: 5px;
    justify-content: flex-start;
    display: flex;
    justify-content: space-evenly;
}
.gara-bill-header {
    background: #D9DADC;
    color: black;
    font-weight: bold;
    padding: 0 5px;
}
.gara-bill-infor-button > div > a > i {
    font-size: 18px;
    color: black
}
.gara-bill-infor-button > div > a {
    height: 30px;
    width: 30px;
    padding: 6px;
    display: inline-block;
    transition: all 0.4s ease;
    /*display: flex;*/
}
    .gara-bill-infor-button > div > a:hover {
        border-radius: 15px;
        background: rgba(0,0,0,0.15);
        color: var(--color-primary)
    }
.gara-bill-infor-button > div {
    position: absolute;
    right: 0;
    top: 0;
}
.gara-bill-infor-button input {
    padding-left: 0;
    border: 1px solid #ccc;
    height: 30px;
    width: 100%;
    border-radius: 3px;
    padding-left: 10px;
    background:white;
}
    .gara-bill-infor-button input:focus {
        border-bottom: 1px solid var(--color-primary);
    }
.gara-bill-infor-button {
    position: relative;
}
    .gara-bill-infor-button.short-label label {
        width: 75px;
        white-space: nowrap
    }
.gara-bill-khachle a {
    border-bottom: 1px solid rgb(204, 204, 204);
    padding-left: 25px;
    line-height: 30px;
}
.gara-bill-khachle i {
    left: 5px;
    position: absolute;
    top: 8px;
}
.gara-bill-khachle {
    margin: 5px 15px;
    height: 30px;
    position: relative;
}
.gara-bill-label .gara-button-icon > i {
    background: none;
    color: black;
}
.gara-bill-label .gara-button-icon:hover > i {
    background: none;
    color: red;
}
.gara-bill-label .gara-bill-label-tabet {
    display: none;
}
.gara-bill-label > ul {
    display: flex
}
.gara-bill-label a {
    height: 24px;
    width: 24px
}
.gara-bill-label li a i {
    color: #D9DADC;
    font-size: 18px;
}
.gara-bill-label li span {
    display: inline-block;
    padding: 5px;
    max-width: 100px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-weight:bold;
}
.gara-bill-label li {
    width: 115px;
    height: 43px;
    color: black;
    padding: 4px 4px 4px 8px;
    margin-right: 5px;
    background: none;
    justify-content: flex-start;
    align-items: flex-start;
    display: flex;
    border-radius: 10px 10px 0 0;
    position: relative
}
    .gara-bill-label li.active a i {
        color: black;
    }
    .gara-bill-label li.active a {
        color: black;
    }
    .gara-bill-label li.active img {
        display: block !important
    }
    .gara-bill-label li.active {
        display:flex;
        color: black;
        background: #D9DADC
    }
.gara-bill-label {
    height: 38px;
    margin-bottom: -8px;
    z-index: 99;
}
.gara-bill-list > li {
    position: relative;
    border-bottom: 1px solid #ebebeb;
    margin: 5px 0;
    padding-bottom: 5px
}
.gara-bill-list > li {
    background: white;
}
    .gara-bill-list > li:hover {
        box-shadow: 0 2px 4px rgba(0,0,0,.11);
        border-bottom: 1px solid white;
    }
.gara-bill-list {
    height: calc(100vh - 400px);
    overflow: auto;
    padding: 0;
}
.gara-bill-list {
    position: relative;
    transition: all 0.4s ease
}
.gara-bill-navigation > a {
    width: 30px;
    height: 30px;
    padding: 3px;
    text-align: center;
    transition: all 0.4s ease;
}
    .gara-bill-navigation > a:hover {
        background: #ccc;
        border-radius: 15px
    }
.gara-bill-navigation i {
    color: black;
}
.gara-bill-navigation {
    width: 575px;
    margin-left: 15px;
    display: flex
}
.gara-bill-result > a {
    display: inline-block;
    padding: 4px;
    border-radius: 3px;
    height: 24px;
    width: 24px;
    text-align: center;
    background: white;
    color: black;
    font-weight: bold;
    font-size: 11px;
    transition: all 0.4s ease;
}
    .gara-bill-result > a:hover {
        color: var(--color-primary);
    }
.gara-bill-result > input {
    border: none;
    text-align: right;
    height: 24px;
    padding: 3px 5px;
    display: inline-block;
    background: white;
    cursor: pointer;
    border-radius: 0;
    transition: all 0.4s ease
}
    .gara-bill-result > input:focus {
        background: rgba(0,0,0,0.15);
        border-radius: 3px;
    }
    .gara-bill-result > input:hover {
        background: rgba(0,0,0,0.15);
    }
.gara-bill-result > label {
    width: 150px;
    margin: 0;
    line-height: 18px;
}
.gara-bill-result > span {
    line-height: 24px;
    max-width: 50%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.gara-bill-result small {
    font-weight: normal;
    font-style: italic;
}
.gara-bill-result {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 3px 0;
}
.gara-bill-result-note > i {
    font-size: 1rem;
    position: absolute;
    bottom: 3px;
    left: 0;
}
.gara-bill-result-note > input {
    width: 100%;
    font-size: 10px;
    border: none;
    height: 14px;
    padding: 3px;
    padding-left: 15px;
}
.gara-bill-result-note {
    position: relative;
}
.gara-bill-sections .gara-bill-header li, .gara-bill-sections .gara-bill-detail:not(.note-row) > li {
    width: calc( ( 100% - 375px - 100px - 50px - 135px ) / 3);
}
.gara-bill-sections .gara-bill-header li, .gara-bill-sections .gara-bill-detail:not(.note-row) > li {
    padding: 5px 0;
    text-align: center;
}
    .gara-bill-sections .gara-bill-header li:first-child, .gara-bill-sections .gara-bill-detail > li:first-child {
        width: 40px;
    }
    .gara-bill-sections .gara-bill-header li:last-child, .gara-bill-sections .gara-bill-detail > li:last-child {
        width: 134px;
    }
    .gara-bill-sections .gara-bill-header li:nth-child(2), .gara-bill-sections .gara-bill-detail > li:nth-child(2) {
        width: 100px;
    }
    .gara-bill-sections .gara-bill-header li:nth-child(3), .gara-bill-sections .gara-bill-detail > li:nth-child(3) {
        width: 375px;
        text-align: left;
        position: relative;
    }
.gara-bill-sections .gara-bill-header, .gara-bill-sections .gara-bill-detail {
    display: flex;
    max-width: calc(100vw - 400px );
}
.gara-bill-stt span {
    display: inline-block;
    border-radius: 15px;
    border: 1px solid #ccc;
    padding: 3px;
    min-width: 26px;
    line-height: 18px;
    text-align: center;
    font-size: 11px;
}
.gara-bill-stt {
    padding: 7px 4px !important;
    text-align: center !important;
}
.gara-bill-summary {
    max-height: calc(100vh - 390px);
    overflow: auto;
    overflow: visible;
}
.gara-bill-summary-main > div > .gara-popup-bill {
    position: absolute;
    background: white;
    top: 30px;
    right: 0;
    width: 250px;
    z-index: 99;
    border: 1px solid var(--color-primary);
    padding: 7px;
    box-shadow: 0 6px 10px rgb(0 0 0 / 15%);
    border-radius: 4px;
}
    .gara-bill-summary-main > div > .gara-popup-bill:before {
        content: "";
        position: absolute;
        top: -6px;
        right: 18px;
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 5px solid var(--color-primary);
        transition: all 0.4s ease;
    }
.gara-bill-summary-main > div {
    border-bottom: 1px solid #ccc;
    position: relative;
    margin: 3px 15px 0 15px;
}
.gara-bill-summary-return > label,
.gara-bill-summary-main > label {
    padding: 7px 15px;
    background: #ccc;
    width: 100%;
    margin-top: 15px;
}
.gara-bill-summary::-webkit-scrollbar {
    width: 1px;
    height: 1px
}
.gara-bill-type a img.act-l {
    position: absolute;
    bottom: 0;
    left: -6px;
    transform: scaleX(-1);
}
.gara-bill-type a img.act-l {
    position: absolute;
    bottom: 0;
    left: -6px;
    transform: scaleX(-1);
}
.gara-bill-type a img.act-r {
    position: absolute;
    bottom: 0;
    right: -6px;
}
.gara-bill-type a {
    padding: 7px 15px;
    line-height: 17px;
    position: relative;
    display: inline-block;
    margin-top: 3px;
    color: white;
    border-radius: 7px 7px 0 0;
    transition: all 0.4s ease;
}
    .gara-bill-type a.active img {
        display: block
    }
    .gara-bill-type a.active {
        background: white;
        color: black;
    }
.gara-bill-type a {
    position: relative
}
.gara-bill-type {
    background: #D9DADC;
    height: 31px;
    padding-left: 30px;
}
.gara-box-section {
    background: white;
    border-radius: 5px;
    overflow: hidden;
    background: var(--color-primary);
    box-shadow: 3px 3px 6px rgba(0,0,0,0.15);
}
.gara-button {
    font-weight: normal;
    text-align: center;
    width: auto;
    display: inline-block;
    background: var(--color-primary);
    padding: 9px;
    margin: 15px;
    color: white;
    font-size: 1rem;
    height: 30px;
}
.gara-button-icon, #Gara .gara-detail-functions > a {
    width: 30px;
    display: inline-block;
    font-size: 18px;
    height: 30px;
    padding: 3px;
    transition: all 0.4s ease;
    background: none;
}
.gara-car > li {
    padding: 7px 0;
    font-weight: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    height: 30px;
    overflow: hidden
}
.gara-car > li, .gara-header > li {
    text-align: center;
    padding: 5px 0;
    display: inline-block;
    justify-content: space-between;
    font-weight: bold;
    width: calc((100% - 50px) / 6 );
    border: none;
}
    .gara-car > li.gara-detail-functions {
        position: relative;
        width: 234px;
        padding: 3px;
        text-align: right;
        float: right;
        display: inline-block;
        flex: auto;
    }
    .gara-car > li:first-child, .gara-header > li:first-child {
        width: 50px;
    }
.gara-car {
    white-space: nowrap;
    display: flex;
    cursor: pointer;
}
.gara-car-function > a {
    display: inline-block;
    width: 32%;
    padding: 6PX;
    COLOR: black;
}
    .gara-car-function > a:hover {
        color: black
    }
.gara-car-function {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%
}
.gara-car:hover .gara-car-function {
    display: inline-block
}
.gara-car:hover {
    background: var(--color-secondary );
    box-shadow: 0 0 3px rgba(0,0,0,0.05)
}
.gara-catalogies .gara-expland-button {
    position: absolute;
    top: -15px;
    left: 50%;
}
.gara-catalogies i.material-icons {
    color: black
}
.gara-catalogies {
    box-shadow: 0 -5px 6px rgba(0,0,0,0.15)
}
.gara-catalogies {
    height: 360px;
    position: relative;
    box-shadow: -3px 0 10px rgb(0 0 0 / 25%);
}
.gara.gara-chinhanh-picker > i.material-icons {
    font-size: 17px;
    color: black;
    line-height: 24px;
    padding:3px
}
.gara-chinhanh-picker > i:last-child, .gara-chinhanh-picker > i:nth-last-child(-n+2) {
    height: 24px;
    margin: 3px;
}
.gara-chinhanh-picker {
    display: flex;
    background: white;
    border-radius: 0;
    transition: all 0.4s ease;
}
    .gara-chinhanh-picker:hover, .gara-functions a:hover {
        border-radius: 15px;
        background: rgba(0,0,0,0.15);
        color: var(--color-primary)
    }
.gara-col-left {
    width: calc(100% - 400px);
}
    .gara-col-left.bill-main {
        background: white;
        height: calc(100vh - 51px);
    }
.gara-col-right {
    box-shadow: -4px 0 7px rgba(0,0,0,0.15);
}
.gara-col-right {
    width: 400px;
}
.gara-header-sections  .gara-col-right {
    display: flex;
    justify-content: space-between;
    background: white;
    padding-right: 0;
}
    .gara-col-right.bill-information {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: calc(100vh - 50px);
        background: white;
        z-index: 2;
    }
.gara-component-item-nv span-check {
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 100%;
    text-align: center;
    justify-content: center;
    align-items: center;
    display: flex;
}
.gara-component-item-nv {
    position: relative;
}
.gara-container {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 10px;
}
.gara-customer-infor .gara-customer-point {
    display: flex;
    justify-content: space-between;
    position: relative;
    right: unset;
    top: unset;
    padding: 3px 0;
    border-bottom: 1px solid #ccc;
    line-height:24px;
    font-style: italic;
}
.gara-customer-infor label {
    width: 100%;
    display: inline-block;
    border-bottom: 1px solid #ccc;
    height: 30px;
    margin: 0;
    padding: 3px;
    line-height: 24px;
}
input#BaoHiemName[disabled] {
    cursor: not-allowed;
}
.gara-detail .gara-car > li,
.gara-detail .gara-header > li {
    width: calc((100% - 50px) / 4 )
}
    .gara-detail .gara-car > li:first-child,
    .gara-detail .gara-header > li:first-child {
        width: 50px;
    }
.gara-detail .gara-header + ul {
    height: calc(100% - 90px);
    overflow: auto
}
.gara-detail > div {
    background: white;
    height: calc(50% - 8px);
    background: white;
    border-radius: 5px;
    box-shadow: 3px 3px 6px rgba(0,0,0,0.15);
    border: 1px solid white
}
.gara-detail {
    height: calc(100vh - 120px);
}
.gara-detail-button {
    padding: 3px;
}
.gara-detail-button {
    position: absolute;
    top: 1px;
    right: 32px;
    height: 27px;
    background: white;
}
.gara-detail-functions a:hover i {
    color: var(--color-primary);
}
.gara-detail-functions i {
    font-size: 18px;
    padding: 3px;
    color: black;
}
.gara-detail-functions {
    position: relative;
    display: none;
    line-height: 30px !important;
    padding: 5px;
    justify-content: flex-end;
    transition: all 0.4s ease;
}
    .gara-detail-functions.open > a {
        width: 75px;
        display: inline-block;
        height: 30px;
        padding: 3px 7px;
        transition: all 0.4s ease;
        line-height: 24px;
        text-align: center;
        background: var(--color-primary);
        color: white;
        border-radius: 3px;
        margin-right: 5px;
        font-size: 1rem;
    }
    .gara-detail-functions.open {
        opacity: 1;
        display: flex
    }
.gara-detail-information .search-line {
    text-align: left;
    padding-left: 10px
}
.gara-detail-information > span:nth-child(n+1), .gara-detail-information > input,  .gara-detail-information > textarea {
    display: inline-block;
    width: calc(100% - 130px);
    line-height: 24px;
    padding: 3px;
}
.gara-detail-information > div {
    width: calc(100% - 130px);
}
.gara-detail-information label {
    margin-bottom: 0;
    font-weight: normal;
    display: inline-block;
    width: 130px;
    white-space: nowrap;
    line-height: 18px;
    line-height: 24px;
    padding: 3px 0;
}
.gara-detail-information {
    padding: 0 15px 0 0;
    margin-bottom: 10px;
    display: flex;
}
    .gara-detail-information.gara-addcar-brand > .gara-bill-infor-button > div:first-child {
        position: absolute;
        right: 0;
        top: 0;
    }
    .gara-detail-information.gara-addcar-brand > .gara-bill-infor-button input {
        padding-right: 30px;
    }
    .gara-detail-information.gara-addcar-brand > .gara-bill-infor-button {
        margin: 0;
        padding: 0
    }
    .gara-detail-information.short-label > div,
    .gara-detail-information.short-label > input {
        width: calc(100% - 75px);
    }
    .gara-detail-information.short-label > label {
        width: 75px;
    }
.gara-detail-sections > label {
    padding-bottom: 5px;
    border-bottom: 1px solid #ccc;
    width: 100%;
    padding: 5px 0 5px 10px;
    margin-bottom: 10px;
}
.gara-detail-status .gara-body-status {
    background: white
}
    .gara-detail-status .gara-body-status:hover {
        background: var(--color-secondary )
    }
    .gara-detail-status .gara-header-status > li:last-child, .gara-detail-status .gara-body-status > li:last-child {
        width: 100px;
    }
    .gara-detail-status .gara-header-status li, .gara-detail-status .gara-body-status li {
        text-align: center;
        padding: 5px 0;
        display: inline-block;
        justify-content: space-between;
        font-weight: unset;
        width: calc((100% - 150px) /3 );
        border: none;
        text-overflow: ellipsis;
        line-height: 18px;
        height: 30px;
    }
.gara-detail-status .gara-header-status, .gara-detail-status .gara-body-status {
    background: #DBDBDB;
    white-space: nowrap;
    display: flex;
}
.gara-detail-status .gara-body-status {
    background: white;
}
.gara-detail-status.gara-no-stt .gara-header-status li, .gara-detail-status.gara-no-stt .gara-body-status li {
    width: calc((100% - 350px) /3 );
    text-overflow: ellipsis;
    overflow: hidden;
}
.gara-detail-status.gara-no-stt .gara-header-status li, .gara-detail-status.gara-no-stt .gara-body-status li {
    width: calc((100% - 50px) /4 );
    text-overflow: ellipsis;
    overflow: hidden;
}
    .gara-detail-status.gara-no-stt .gara-header-status li:first-child, .gara-detail-status.gara-no-stt .gara-body-status li:first-child {
        text-align: left;
        padding-left: 15px;
        width: 300px;
    }
    .gara-detail-status.gara-no-stt .gara-header-status li:first-child, .gara-detail-status.gara-no-stt .gara-body-status li:first-child {
        text-align: left;
        padding-left: 15px
    }
    .gara-detail-status.gara-no-stt .gara-header-status li:first-child, .gara-detail-status.gara-no-stt .gara-body-status li:first-child {
        width: 150px
    }
.gara-detail-status:not(.gara-no-stt) .gara-header-status > li:first-child, .gara-detail-status:not(.gara-no-stt) .gara-body-status > li:first-child {
    width: 50px;
}
.gara-drop-dvt div {
    padding: 0
}
.gara-drop-dvt li {
    line-height: 24px;
    border-bottom: 1px solid #ccc;
    cursor: pointer
}
    .gara-drop-dvt li:hover {
        background: rgba(0,0,0,0.15)
    }
    .gara-drop-dvt li:last-child {
        border-bottom: none
    }
.gara-drop-dvt ul {
    padding: 7px;
}
.gara-dropdown + div {
    margin-left: 15px
}
.gara-dropdown {
    position: relative;
}
.gara-dropdown-picker > * {
    display: block;
}
.gara-dropdown-picker ul {
    max-width: 300px;
    max-height: 375px;
    overflow: auto;
}
.gara-dropdown-picker {
    display: none;
    position: absolute;
    right: 0;
    top: 30px;
    background: white;
    z-index: 2;
    padding: 15px;
    box-shadow: 3px 3px 6px rgba(0,0,0,0.15)
}
.gara-dropdown-picker {
    left: unset;
    right: 0;
    border-radius: 0;
    border: 1px solid #ccc;
    color: #FFF;
    padding: 15px;
    border-radius:5px
}
.gara-dropdown-picker-list label input {
    position: absolute;
    top: 4px;
    left: 0;
}
.gara-dropdown-picker-list label {
    padding-left: 25px;
    position: relative;
    text-align: left;
    width: 100%;
    white-space: nowrap;
    color: black;
    line-height: 30px;
    margin-bottom: 0;
    font-weight: normal;
    line-height: 24px;
    padding: 3px 3px 3px 24px;
    cursor: pointer;
    border-bottom: 1px solid #ccc;
}
.gara-dropdown-picker-searchholder i {
    font-size: 18px;
    color: black;
    position: absolute;
    top: 5px;
    left: 5px;
}
.gara-dropdown-picker-searchholder input {
    border-radius: 0;
    color: black;
    padding: 3px;
    padding-left: 30px;
    border: none;
    height: 30px;
    border-bottom: 1px solid #ccc;
}
    .gara-dropdown-picker-searchholder input:focus {
        outline: none;
    }
.gara-dropdown-picker-searchholder {
    position: relative;
}
.gara-dropdown-picker.gara-timer > div > div {
    width: 150px;
    text-align: left;
}
.gara-dropdown-picker:before {
    content: "";
    position: absolute;
    top: -6px;
    right: 15px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid var(--color-primary);
}
.gara-dropwdown-toggle i {
    transition: transform 0.4s ease;
}
.gara-dropwdown-toggle.open i {
    transform: rotate(180deg);
}
.gara-expand-button {
    position: absolute;
    top: -15px;
    left: -50%;
}
.gara-expand-button {
    position: absolute;
    top: -15px;
    left: 50%;
    background: white;
    z-index: 2;
    border-radius: 15px;
    box-shadow: 0px 0px 6px #ccc;
}
.gara-expland-button {
    position: absolute;
    top: -15px;
    width: 30px;
    height: 30px;
    border: 1px solid white;
    border-radius: 15px;
    left: 50%;
    padding: 2px;
    background: white;
    box-shadow: 0px 1px 4px rgba(0,0,0,0.4)
}
.gara-functions > .popup-detail {
    position: absolute;
    min-height: 100px;
    width: 398px;
    padding: 15px;
    background: white;
    border: 1px solid var(--color-primary);
    top: 36px;
    right: 0;
    z-index: 999;
    box-shadow: 3px 3px 10px rgba(0,0,0,0.25);
    right: 0;
    transition: all 0.4s ease
}
.gara-functions a i {
    font-size: 18px;
}
.gara-functions a {
    background: white;
    border-radius: 0;
    transition: all 0.4s ease;
}
.gara-functions a {
    color: black;
    display: inline-block;
    height: 30px;
    width: 30px;
    padding: 6px;
    margin: 0 0 0 3px;
    font-size: 15px;
    position: relative
}
.gara-functions {
    position: relative;
    z-index: 99;
    text-align: right;
}
.gara-header {
    background: #DBDBDB;
    white-space: nowrap;
    display: flex;
}
.gara-header-sections > div {
    padding: 10px;
}
.gara-header-sections, .gara-bill-sections {
    display: flex;
    padding: 0 2px 0 5px;
}
.gara-header-sections {
    height: 50px;
}
.gara-help > a > i {
    width: 30px;
    text-align: center;
}
.gara-help-printer > div > label, .gara-help-hddt > div > label {
    line-height: 23px;
    width: calc(100% - 30px);
    margin: 0;
    cursor: pointer;
    text-align: left;
}
.gara-help-printer > div, .hoadondientudiv {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-bottom: 5px;
    height: 30px;
}
.gara-help-user-list li a {
    text-align: left;
    line-height: 18px;
    font-size: 1rem;
    padding: 5px;
    border-bottom: 1px solid #ccc;
}
.gara-help-user-list li {
    text-align: left;
    line-height: 18px;
    font-size: 1rem;
    padding: 5px 10px;
    cursor: pointer;
    border-bottom: 1px dashed #ccc;
    transition: all 0.4s ease
}
    .gara-help-user-list li:hover {
        background: rgba(0,0,0,0.15);
    }
.gara-help-user-list {
    max-height: 250px;
    overflow: auto;
    margin: 15px 0;
    width: 100%;
}
    .gara-help-user-list::-webkit-scrollbar {
        width: 6px;
        background: transparent;
    }
    .gara-help-user-list::-webkit-scrollbar-thumb {
        border-radius: 4px;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
        -moz-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
        box-shadow: inset 0 0 6px rgba(0,0,0,.3);
        background: #ccc;
    }
    .gara-help-user-list::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
        box-shadow: inset 0 0 6px rgba(0,0,0,.3);
        -moz-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
        border-radius: 4px;
        background: transparent;
    }
.gara-help.gara-help-button > div > img {
    filter: invert(1);
    width: 50px;
    height: 18px;
    padding-right: 32px;
}
.gara-help.gara-help-button > div > label {
    width: 50px;
    padding-right: 15px;
}
    .gara-help.gara-help-button > div > label:after {
        content: "|";
        position: absolute;
        right: 5px;
        top: 0px;
    }
.gara-help.gara-help-button > div {
    display: flex;
}
.gara-help.gara-help-settings > a {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    line-height: 18px;
    margin-left: -10px;
}
.gara-help.gara-help-user > a > i {
    width: 30px;
}
.gara-help.gara-help-user > a {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    line-height: 18px;
}
.gara-hoadon .gara-detail .gara-car > li, .gara-hoadon .gara-detail .gara-header > li {
    width: calc((100% - 50px) / 4 );
}
.gara-input {
    max-width: 100%;
    min-width: 50px;
    border: none;
    background: none;
    text-align: center;
    height: 30px;
}
.gara-input-line > *:not(label) {
    line-height: 30px;
    width: calc(100% - 120px)
}
.gara-input-line label {
    width: 120px;
    margin: 0;
    line-height: 30px;
}
.gara-input-line {
    display: flex;
    position: relative;
    margin-bottom: 5px;
}
.gara-input.soluong {
    width: calc(100% - 60px)
}
.gara-list-baogia, .gara-list-hoadon, .gara-list-xe {
    overflow: hidden;
    height: 30px;
    transition: all 0.4s ease;
}
    .gara-list-baogia.open, .gara-list-hoadon.open, .gara-list-xe.open {
        background: var(--color-secondary );
        height: 72px;
    }
.gara-list-drop li a {
    color: black;
    height: inherit;
    width: 100%;
}
.gara-list-drop li {
    padding: 5px;
    border-bottom: 1px solid #ccc;
    text-align: left;
    color: black;
}
    .gara-list-drop li:hover {
        background: rgba(0,0,0,0.15)
    }
.gara-list-drop {
    position: absolute;
    padding: 7px;
    background: white;
    box-shadow: 3px 3px 6px rgba(0,0,0,0.15);
    border: 1px solid var(--color-primary);
    padding-bottom: 15px;
    z-index: 999;
}
    .gara-list-drop ul {
        max-height: 250px;
        overflow: auto;
        margin: 5px 0;
    }
    .gara-list-drop::before {
        content: "";
        position: absolute;
        top: -6px;
        left: 10px;
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 5px solid var(--color-primary);
        transition: all 0.4s ease;
    }
    .gara-list-drop:after {
        content: "";
        position: absolute;
        top: -5px;
        left: 10px;
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 5px solid white;
        transition: all 0.4s ease;
    }
.gara-list-functions a {
    width: 24px;
    height: 24px;
    margin: 3px;
    text-align: center;
    display: inline-block;
    padding: 3px;
    transition: all 0.4s ease
}
    .gara-list-functions a:hover {
        background: #ccc;
        border-radius: 15px;
    }
.gara-list-functions i {
    color: black;
    font-size: 18px;
    text-align: center;
}
.gara-list-functions {
    position: relative;
    display: flex;
    padding: 5px 0 !important;
    justify-content: flex-end !important;
    transition: all 0.4s ease;
    width:135px;
}
.gara-main-body {
    height: calc(100% - 30px);
    flex-direction: column;
    display: flex;
    flex-wrap: wrap;
    height: calc(100vh - 140px);
}
.gara-main-title {
    height: 30px;
    widows: inherit;
}
.gara-navigation a {
    z-index: 3;
    width: 25%;
    padding: 5px;
    text-align: center;
}
    .gara-navigation a.active {
        color: white;
    }
.gara-navigation {
    position: absolute;
    margin: 0 -15px;
    padding: 0 15px;
    box-shadow: -3px -3px 6px rgba(0,0,0,0.15);
    width: 100%;
    display: none;
    border: 0;
    justify-content: space-around;
    bottom: 0;
}
    .gara-navigation:after {
        content: '';
        height: 30px;
        width: calc(( 100% - 30px) / 4);
        position: absolute;
        background: var(--color-primary);
        z-index: -1;
        left: 15px;
        height: 100%;
        border-radius: 0 0 15px 15px;
        z-index: 2;
        transition: left 0.4s ease;
    }
    .gara-navigation:before {
        content: '';
        height: 100%;
        width: 100%;
        position: absolute;
        background: white;
        z-index: 1;
    }
.gara-no-stt .gara-body-status input {
    height: 30px;
    background: white
}
.gara-no-stt .gara-body-status li {
    line-height: 30px;
    height: 40px;
    padding: 5px 0
}
.gara-note {
    border: none;
    background: none;
    border-bottom: 1px solid #ccc;
    text-align: left;
    font-size: 10px;
}
.gara-panel small {
    color: green;
}
    .gara-panel small.negative {
        color: red;
    }
    .gara-panel small.positive {
        color: green;
    }
    .gara-panel:nth-child(2n+1) {
        padding: 0;
        padding-left: 7px;
    }
.gara-panel {
    background: #fff;
    text-align: center;
    position: relative;
    padding-left: 0;
}
.gara-panel-center {
    background: #F3F3F3;
    margin: 7px;
    padding: 15px;
    border-radius: 7px;
}
.gara-panel-container {
    background: #eeeeee;
    display: flex;
    border-radius: 12px;
    flex-direction: column;
    margin: 7px 0;
    padding: 15px 25px;
    height: 150px;
}
.gara-panel-sub > div {
    height: 60px;
    padding-top: 5px;
}
.gara-panel-main > div > small {
    padding: 3px;
    font-size: 11px
}
    .gara-panel-main > div > small.negative:before, .gara-panel-sub small.negative:before {
        transform: rotate(180deg);
        border-bottom: 5px solid red;
    }
    .gara-panel-main > div > small:before, .gara-panel-sub small:before {
        content: "";
        position: absolute;
        top: 9px;
        left: -6px;
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 5px solid green;
    }
.gara-panel-sub {
    margin: 0 -15px;
}
.gara-panel-main > div, .gara-panel-sub {
    position: relative;
}
    .gara-panel-main > div:nth-child(2) {
        text-align: left;
        padding-left: 10px;
    }
.gara-panel-main h4 {
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    color: var(--color-primary);
    padding-left: 3px;
}
.gara-panel-main i {
    font-size: 42px;
    color: black;
}
.gara-panel-main label {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 5px;
    font-weight: normal;
    margin: 0;
}
.gara-panel-main {
    border-bottom: 1px solid #ccc;
    padding: 5px 15px;
    display:flex;
    align-items:center
}
.gara-panel-sub > div:first-child {
    border-right: 1px solid #ccc;
}
.gara-panel-sub h4 {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 23px;
}
.gara-panel-sub label {
    font-weight: 400;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 1rem;
}
.gara-panel-sub small {
    position: relative;
    padding: 3px;
}
.gara-popup-bill > div > a {
    background: white;
    border: 1px solid var(--color-primary);
    min-width: 30px;
    height: 30px;
    text-align: center;
    margin-right: 3px;
    align-items: center;
    display: inline-block;
}
    .gara-popup-bill > div > a.selected {
        color: white;
        background: var(--color-primary);
    }
.gara-popup-bill > div > input {
    text-align: right !important;
    width: 75px;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid #ccc;
    margin-right: 0;
    height: 30px;
}
    .gara-popup-bill > div > input.width75 {
        width: 75px;
    }
.gara-popup-bill > div > label {
    margin-bottom: 0
}
.gara-popup-bill > div {
    display: flex;
    justify-content: space-between;
    line-height: 30px;
    margin-bottom: 5px;
    height: 30px;
}
.gara-popup-chietkhau .gara-bill-result-note input {
    width: 100%;
    height: 24px;
    font-size: 1rem;
    border-bottom:1px solid #ccc
}
.gara-popup-chietkhau .gara-bill-result-note i {
    bottom: 6px
}
.gara-popup-chietkhau .options label {
    width: auto;
    padding: 0;
    line-height: 24px;
}
.gara-popup-chietkhau .toogle-report.active-re:before {
    left: 28px;
    background: var(--color-primary);
}
.gara-popup-chietkhau .toogle-report:before {
    transition: left 0.4s ease;
    background: var(--color-primary)
}
.gara-popup-chietkhau > div > input {
}
.gara-popup-chietkhau > div > span {
    text-align: left;
    width: 90px;
    line-height:26px;
}
.gara-popup-chietkhau > div {
    position: relative;
}
.gara-popup-chietkhau input[type="checkbox"] {
    margin-top: 7px;
    position: relative;
    width: 30px;
}
    .gara-popup-chietkhau input[type="checkbox"]::after {
        transition: left 0.4s ease;
        content: '';
        height: 13px;
        width: 13px;
        border-radius: 7px;
        left: 0;
        background: black;
        position: absolute;
    }
    .gara-popup-chietkhau input[type="checkbox"]:before {
        margin: -3px;
        content: '';
        height: 18px;
        width: 30px;
        top: 0;
        left: 0;
        background: #ccc;
        position: absolute;
        border-radius: 15px;
    }
    .gara-popup-chietkhau input[type="checkbox"]:checked::after {
        left: 12px;
        background: var(--color-primary)
    }
.gara-popup-chietkhau input[type="number"] {
    text-align: left
}
.gara-popup-chietkhau span.poison {
    left: 5px;
    font-size: 8px;
}
.gara-popup-chietkhau span.transverse {
    right: 7px;
}
.gara-popup-chietkhau {
    display: none;
    position: absolute;
    box-shadow: 0 0 6px #ccc;
    width: 250px;
    padding: 7px;
    background: white;
    z-index: 99;
    right: 0;
    top: 45px;
    border: 1px solid var(--color-primary);
}
    .gara-popup-chietkhau:before {
        content: "";
        position: absolute;
        top: -6px;
        right: 112px;
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 5px solid var(--color-primary);
    }
.gara-product-item > div {
    position: relative;
    height: 100%;
}
.gara-product-item img {
    width: 100%;
    height: 105px;
    display: inline-block;
    padding-bottom: 30px;
    position: relative;
    object-fit: scale-down;
}
.gara-product-item label {
    color: white;
    position: absolute;
    padding: 7px;
    border: none;
    background: var(--color-primary);
    bottom: 0;
    left: 0;
    overflow: hidden;
    margin: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gara-product-item small {
    position: absolute;
    padding: 5px;
    border: none;
    background: var(--color-secondary );
    color: black;
}
    .gara-product-item small.tag-left {
        border-bottom-right-radius: 5px;
        top: 0;
        left: 0;
    }
    .gara-product-item small.tag-right {
        border-bottom-left-radius: 5px;
        top: 0;
        right: 0;
    }
.gara-product-item {
    position: relative;
    display: inline-block;
    width: calc( ((100% - 10px)/ 6 ) - 5px);
    padding: 3px;
    border: 1px solid #ccc;
    margin: 5px 0 0 5px;
    height: 110px;
    border-radius: 3px;
}
    .gara-product-item:hover {
        border: 1px solid var(--color-primary)
    }
.gara-product-list {
    display: flex;
    flex-wrap: wrap
}
.gara-product-name {
    display: flex;
    justify-content: space-between;
    line-height: 30px;
}
.gara-return-number {
    line-height: 30px;
}
.gara-search {
    padding-left: 30px;
    font-size: 13px;
    border-radius: 5px !important;
    box-shadow: 0 1px 6px rgba(0,0,0,.15);
    border: 1px solid #ccc;
    padding-right: 30px;
    transition: all 0.4s ease;
}
.gara-search-HH + .gara-search-dropbox {
    top: 30px;
    left: 0;
    overflow: auto;
    overflow: overlay;
    /*better perfomance with chromnium*/
}
    .gara-search-HH + .gara-search-dropbox.drop-search {
        margin: 0 0;
        width: calc(100% );
    }
.gara-search-KH + .gara-search-dropbox {
}
.gara-search-KH {
    padding-left: 30px;
}
.gara-search-dropbox > div > i {
    position: absolute;
    top: 3px;
    left: 5px;
    color: black;
    position: absolute;
    top: 3px;
    left: 5px;
    color: black;
}
.gara-search-dropbox > div > input {
    border: none;
    border-bottom: 1px solid #ccc;
    height: 24px;
    padding: 3px 7px;
    display: inline-block;
    float: right;
    text-align: left;
    border-radius: 0;
    padding-left: 30px;
    width: 100%;
}
.gara-search-dropbox > div {
    position: relative;
    display: inline-block;
    width: 100%
}
.gara-search-dropbox li {
    padding: 3px 7px;
    border-bottom: 1px solid #ccc;
}
    .gara-search-dropbox li:hover {
        background: rgba(0,0,0,0.15);
        padding: 7px;
        border-bottom: 1px solid #ccc;
    }
.gara-search-dropbox ul {
    max-height: 250px !important;
    overflow: auto;
    width:100%;
}
.gara-search-dropbox {
    display: none;
    position: absolute;
    background: white;
    width: 100%;
    z-index: 10000;
    padding: 0;
    border: 1px solid #ccc;
    box-shadow: 3px 3px 6px rgba(0,0,0,0.15);
    overflow: auto;
}
    .gara-search-dropbox.drop-search > ul > li > a > span {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: block;
        line-height: 18px;
    }
    .gara-search-dropbox.drop-search > ul > li > a {
        width: 100%;
        display: block
    }
    .gara-search-dropbox.drop-search > ul > li > div {
        position: relative
    }
.gara-section {
    display: flex;
    flex-direction: column;
    padding: 0;
    background: white;
    border-radius: 5px;
    box-shadow: 3px 3px 10px rgba(0,0,0,0.15);
}
.gara-section-body {
    width: 100%;
    height: 100%;
    overflow-y: hidden;
    overflow-x: scroll;
    overflow: overlay;
}
.gara-section-header {
    background: #DBDBDB;
    white-space: nowrap;
    display: flex;
}
.gara-section-list li {
    text-align: center
}
.gara-section-list {
    min-width: 840px;/*used to Ban lam viec*/
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: space-between;
}
.gara-section-list-body .open .gara-section-list-functions {
    display: flex
}
.gara-section-list-body .open {
    background: #f3f3f3;
}
.gara-section-list-body > li:not(.open) {
    height: 40px;
    padding: 5px 0;
    border-bottom:1px solid #e6e6e6
}
.gara-section-list-body li {
    transition: all 0.4s ease
}
.gara-section-list-body {
    height: 100%;
    background: white;
    overflow-x: hidden;
    overflow-y: auto;
    overflow-y:overlay
}
    .gara-section-list-functions > a {
        min-width: 80px;
        display: inline-block;
        height: 30px;
        padding: 3px 7px;
        transition: all 0.4s ease;
        line-height: 24px;
        text-align: center;
        background: rgba(0,0,0,0.2);
        color: black;
        border-radius: 3px;
        margin-right: 5px;
        font-size: 1rem;
        padding-right: 10px;
    }
.gara-section-list-functions button {
    background: rgba(0,0,0,0.2);
}
.gara-section-list-functions > div {
    margin-right: 5px
}
.gara-section-list-functions button {
    height: 30px;
    padding: 3px 7px;
    transition: all 0.4s ease;
    line-height: 24px;
    text-align: center;
    background: rgba(0,0,0,0.2);
    color: black;
    font-size: 1rem;
}
.gara-section-list-functions {
    position: relative;
    display: none;
    line-height: 30px !important;
    padding: 5px;
    justify-content: flex-end;
    transition: all 0.4s ease;
    padding-bottom:7px;
}
.gara-section-list-functions-dropdown li {
    text-align: left;
    line-height: 24px;
    border-bottom: 1px solid #ccc;
    padding: 5px;
    height: 30px !important;
    cursor: pointer;
    background:white;
}
    .gara-section-list-functions-dropdown li:last-child {
        border-bottom: none;
    }
.gara-section-list-functions-dropdown {
    left: unset;
    right: 0;
    border-radius: 0;
    padding: 0;
    background: #dbdbdb;
    color:black;
}
.gara-section-list-functions.open {
    opacity: 1;
    display: flex;
}
.gara-section-list-header li {
    background: var(--color-table);
    padding: 5px 0;
    line-height: 20px;
    font-weight: bold
}
.gara-section-list-header,
.gara-section-list-item {
    width: 100%;
    flex-direction: row;
    display: flex;
}
    .gara-section-list-item > li {
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: 20px;
        padding: 5px
    }
    .gara-section-list-item.with-index > li:first-child,
    .gara-section-list-header.with-index > li:first-child {
        width: 50px;
    }
.gara-section-list.half-screen {
    min-width: 750px;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.gara-section-title > label {
    margin: 0 10px;
}
.gara-section-title {
    height: 40px;
    line-height: 30px;
    padding: 5px 5px 5px 5px;
    position: relative;
    display: flex;
    justify-content: space-between;
    border-radius: 5px 5px 0 0;
    background: white;
    color: black;
}
.gara-section-title {
    min-height: 40px;
    line-height: 30px;
    padding: 5px 0px;
    position: relative;
    display: flex;
    justify-content: space-between;
    border-radius: 5px 5px 0 0;
    background: none;
    color: black;
    flex-wrap:wrap;
    height:auto
}
    .gara-section-title.new button, .gara-section-title.new a[type="button"] {
        border: 1px solid white
    }
    .gara-section-title.new {
        height: 40px;
        line-height: 30px;
        padding: 5px;
        position: relative;
        display: flex;
        justify-content: space-between;
        border-radius: 5px 5px 0 0;
        background: var(--color-primary);
        color: white
    }
.gara-tab > div {
    width: 100%;
    /*max-width: calc(100vw - 275px);*/
}
    .gara-tab > div.active {
        display: flex;
        padding: 15px;
        width: 100%;
        flex-direction: column;
        border-bottom: 1px solid #ccc;
    }
    .gara-tab > div.active {
        display: flex;
        padding: 15px;
        width: 100%;
        flex-direction: column;
    }
.gara-tab-detail, .gara-tab-content {
    width: 100%;
    max-width: calc(100vw - 275px);
}

.gara-tab-title > a {
    padding: 7px 15px;
    border: none;
    border-bottom: none;
    border-radius: 5px 5px 0 0;
    color: black;
    cursor: pointer;
}
.gara-tab-title > a {
    padding: 7px 15px;
    border: none;
    border-bottom: none;
    border-radius: 5px 5px 0 0;
    color: black;
    cursor: pointer;
}
    .gara-tab-title > a.active {
        background: white;
    }
    .gara-tab-title > a.active {
        background: white;
    }
.gara-tab-title {
    display: flex;
    padding: 7px 15px 0 7px;
    background: #e6e6e6;
}
.gara-timer li > a {
    width: 100%;
    line-height: 24px;
    display: inline-block;
    color: black;
}
    .gara-timer a:hover {
        color: black;
    }
.gara-timer label {
    color: black
}
.gara-timer {
    min-width: 450px
}
.gara-title {
    margin: 0;
    padding: 3px;
}
.gara-togggle-xuatkho span {
    color: black;
}
.gara-togggle-xuatkho span {
    line-height: 18px;
    text-align: center;
    display: block;
    padding: 0 2px;
    z-index: 3;
    cursor: pointer;
}
.gara-togggle-xuatkho span {
    color: black;
}
.gara-togggle-xuatkho {
    background: #ccc;
    border: none;
    padding: 3px 5px;
    border-radius: 15px;
    width: 80px;
    justify-content: space-between;
    display: flex;
    position: relative
}
    .gara-togggle-xuatkho.unchecked span:last-child {
        color: white;
    }
    .gara-togggle-xuatkho.unchecked span:last-child {
        color: white;
    }
    .gara-togggle-xuatkho.unchecked:before {
        left: 30px;
        top: 3px;
        width: 46px;
    }
    .gara-togggle-xuatkho:before {
        content: '';
        height: 18px;
        width: 25px;
        background: var(--color-primary);
        border-radius: 15px;
        left: 3px;
        top: 3px;
        position: absolute;
        z-index: 2;
        transition: all 0.4s cubic-bezier(0,.87,.18,.98);
    }
    .gara-togggle-xuatkho:not(.unchecked) span:first-child {
        color: white;
    }
.gara-toggle-line {
    display: flex;
    margin: 0 15px;
    justify-content: space-between;
    padding: 5px 0;
    line-height: 24px;
    height: 34px;
    border-bottom: 1px solid #ccc;
}
.gara-tongquan-body > div {
    padding: 0;
}
.gara-tongquan-daily li > div > i {
    color: var(--color-primary);
    margin-right: 5px;
    font-size: 28px;
    padding: 5px;
}
.gara-tongquan-daily li {
    text-align: left;
    border-bottom: 1px solid #ccc;
    padding: 7px 0 5px;
}
    .gara-tongquan-daily li:last-child {
        border-bottom: none;
    }
    .gara-tongquan-daily .gara-tongquan-daily__item {
        padding: 10px 3px;
    }
.gara-tongquan-event > div > * {
    margin-right: 10px;
    line-height: 21px;
    margin-bottom: 0;
    min-width: 15px;
}
.gara-tongquan-event > div > img {
    width: 22px;
}
.gara-tongquan-event > div > i {
    font-size: 18px;
}
.gara-tongquan-event > div > span:first-child {
    font-weight: 700;
    color: var(--color-primary);
    font-size: 13px;
    width: 32px;
    text-align: center;
}
.gara-tongquan-event > div {
    justify-content: flex-start;
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    line-height: 18px;
    text-align: left;
}
.gara-tongquan-event, .gara-tongquan-dairy, .gara-tongquan-graph, .gara-tongquan-report, .gara-tongquan-chart {
    background: #fdfdfd;
    text-align: center;
    box-shadow: 0 2px 10px Rgba(0,0,0,0.06);
    border-radius: 3px;
    margin: 0;
    padding: 20px;
    float: left;
    height: 100%;
    width: 100%;
}
.gara-tongquan-daily-event{
    width:calc(100% - 14px);
    margin:7px;
}
.gara-tongquan-daily {
    text-align: unset;
    float: left;
    background: white;
    /* border-top: 1px solid #Ccc; */
    width: 100%;
    padding: 25px 20px;
}
.gara-tongquan-graph > div > div > label > a {
    color: #000;
}
    .gara-tongquan-graph > div > div > label {
        font-weight: 400;
        color: black;
        opacity: .6;
        font-size: 13px;
        margin-right: 15px;
    }
        .gara-tongquan-graph > div > div > label.active {
            opacity: 1;
            font-weight: 700;
        }
.gara-tongquan-status .component {
    padding: 3px 0px;
    padding-bottom: 0;
    border-bottom: 1px solid #ccc;
}
.gara-tongquan-status .component {
    padding: 3px 0px;
    padding-bottom: 0;
    border-bottom: 1px solid #ccc;
}
.gara-tongquan-status > div > div > * {
    font-size: 1rem;
    font-weight: 400;
    color: #000;
}
.gara-tongquan-status > div > div > a {
    font-weight: 700;
}
.gara-tongquan-status > div > div > label {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-primary);
}
.gara-tongquan-status > div > div > span {
    margin-bottom: 4px;
}
.gara-tongquan-status > div > div {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    line-height: 18px;
}
.gara-tongquan-status {
    padding: 0 15px;
}
.gara-tongquan-summary-panel > div {
    display: flex;
    flex-direction: column;
    text-align: left;
    margin-right: 30px;
    margin-left: 15px;
    padding: 5px;
}
.gara-tongquan-summary-panel > h4 {
    font-size: 16px;
    font-weight: 700;
    line-height: 18px;
    margin: 5px;
}
.gara-tongquan-summary-panel > label {
    font-size: 13px;
    font-weight: 700;
    line-height: 18px;
    margin: 0;
}
.gara-tongquan-summary-panel h5 {
    color: var(--color-primary);
    font-weight: 700;
}
.gara-tongquan-summary-panel {
    display: flex;
    flex-direction: row;
    text-align: center;
    border-bottom: 1px solid #ccc;
    margin: 5px;
    padding: 7px;
}
.gara-tongquan-chart {
    width: calc(30% - 14px);
    margin: 7px;
    height:400px;
}
.gara-tongquan-report {
    width: calc(70% - 14px);
    margin: 7px;
    min-height: 400px;
}
.gara-tongquan-graph {
    width: calc(100% - 14px);
    margin: 7px;
}
.gara-tttt-chuyenkhoan a > i {
    font-size: 13px;
    padding: 0;
}
.gara-tttt-chuyenkhoan input + .gara-search-dropbox {
    top: 30px;
    margin: 0;
    width: 100%;
}
.gara-tttt-chuyenkhoan {
    padding: 15px;
    background: #ccc;
    display: inline-block;
    width: 100%
}
.gara-tttt-listNV li {
    padding: 7px;
    background: white;
}
    .gara-tttt-listNV li:hover {
        background: rgba(0,0,0,0.15);
    }
.gara-tttt-listNV {
    border: 1px solid #ccc;
    height: 100%;
    overflow: auto;
}
.gara-tttt-thongtin {
    margin: 7px;
    display: flex;
    justify-content: space-between;
}
.gara-tttt-tienthu {
    font-weight: bold;
    color: var(--color-primary);
    border: none;
    border-bottom: 1px solid #ccc;
    height: 24px;
    padding: 3px 7px;
    display: inline-block;
    float: right;
    text-align: right;
    border-radius: 0;
}
    .gara-tttt-tienthu:focus {
        border-bottom: 2px solid var(--color-primary)
    }
.grid-img > div {
    width: calc(100% - 4px);
    background: var(--color-primary);
    margin: 7px 0;
    color: white;
}
.grid-img li {
    background: white;
    border-radius: 3px;
    border: 1px solid #ccc;
    height: 60px;
    width: calc(50% - 6px);
    position: relative;
    display: inline-block;
    margin: 2px;
}
.grid-img {
    position: relative;
    display: inline-block;
    width: 50%;
    padding: 0 0 0 7px;
}
.grid-img {
    position: relative;
    display: inline-block;
    width: 50%;
}
.header-button-right > button, .header-button-right > div {
    margin-right: 3px;
}
.header-button-right > button, .header-button-right > div {
    margin-right: 3px;
}
.hided {
    display: none !important;
}
.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}
.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #EBEBEB;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
    padding: 0.5em;
}
.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}
.highcharts-data-table tr:hover {
    background: #f1f7ff;
}
.highcharts-figure, .highcharts-data-table table {
    min-width: 320px;
    max-width: 700px;
    margin: 1em auto;
}
.highlight-note-box span {
    height: 70px;
    border: 1px solid #ccc;
    padding: 7px
}
.icon-searchs {
    position: absolute;
    padding: 7px;
    font-size: 19px;
    color: black;
}
.in-debt > div {
    width: 100%
}
.in-debt > div {
    width: 100%
}
.infor-popup > div {
    display: none;
    position: absolute;
    left: 0;
    top: 20px;
    border: 1px solid var(--color-primary);
    padding: 5px;
    width: 120px;
    z-index: 999;
    background: white;
}
    .infor-popup > div:before {
        content: "";
        position: absolute;
        top: -6px;
        right: 102px;
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 5px solid var(--color-primary);
    }
.infor-popup a i {
    font-size: 15px;
}
.infor-popup {
    position: absolute;
    right: -7px;
    top: 7px;
    width: auto !important;
}
.input-control {
    position: relative;
    width: 250px;
}
.input-width250.form-control {
    width: 250px !important;
    justify-content: flex-end;
    margin-right: 0;
    margin-left: calc(100% - 250px);
}
.leave-a-note i {
   height:11px;
    font-size: 11px;
}
.leave-a-note input {
    border: none;
    background: none;
    width: 100%;
    padding: 3px;
}
.leave-a-note {
    display: flex;
    min-width: 250px;
    position: absolute;
    bottom: -12px;
    height: 20px;
    left: 0;
    justify-content: flex-start;
    align-items: center;
}
.LoHangHoas +.leave-a-note{
    bottom:-5px;
}
.line {
    border-bottom: 1px solid #ccc;
    margin: 15px
}
.list-5-col > li {
    width: calc((100% ) / 5 )
}
.list-5-col.with-index > li {
    width: calc((100% - 50px) / 4 )
}
.list-6-col > li {
    width: calc((100% ) / 6 )
}
.list-6-col.with-index > li {
    width: calc((100% - 50px) / 5 )
}
.list-functions > li > a {
    padding: 6px 12px;
    background: var(--color-primary);
    color: white;
    display: inline-block;
    border-radius: 3px;
    line-height: 18px;
    height: 30px;
}
.list-functions > li {
    display: inline-block;
    margin-right: 3px;
}
.list-functions {
    width: 100%;
    display: flex;
}
.list-suggest-price li {
    cursor: pointer;
    padding: 15px;
    background: white;
    margin: 0 5px 0 0;
    border: 1px solid var(--color-primary);
    transition: all 0.4s ease;
}
    .list-suggest-price li:hover {
        box-shadow: 3px 3px 6px rgba(0,0,0,0.15);
        background: var(--color-secondary )
    }
.list-suggest-price {
    padding: 15px;
    border: 1px solid #ccc;
    background: white;
}
.main-img > div {
    border: 1px solid #ccc;
    margin: 2px;
    height: 132px;
    background: white;
    border-radius: 3px;
}
.main-img button {
    width: 100%;
    background: var(--color-primary);
    margin: 7px 2px;
    color: white;
}
.main-img button {
    width: 50%;
    text-align: center;
    display: inline-block;
}
.main-img {
    width: calc(50% - 15px);
}
.mobile-navigation > a {
    z-index: 2
}
.mobile-navigation {
    display: none;
    position: absolute;
    flex-direction: row;
    justify-content: space-around;
    width: 100vw;
    margin-left: -15px;
    padding: 15px 0;
    bottom: 0;
    background: white;
    box-shadow: 0 -3px 6px rgba(0,0,0,0.15);
}
    .mobile-navigation:before {
        content: '';
        position: absolute;
        z-index: 1;
        height: 100%;
        width: 32%
    }
.nav-item.active {
    border: none !important
}
.nav-pills.gara-detail-tab > li > a {
    padding: 7px 12px !important;
    border-radius: 5px !important
}
.nav-pills.gara-detail-tab > li > a {
    padding: 7px 15px !important;
    border-radius: 5px !important
}
.nav-pills.gara-detail-tab > li.active > a {
    height: 30px;
    padding: 7px 12px;
    background: var(--color-secondary  ) !important;
    color: black !important;
}
.page {
}
.popup-detail.arrow-1:before, .popup-detail.arrow-1:after {
    right: 170px;
}
.popup-detail.arrow-2:before, .popup-detail.arrow-2:after {
    right: 80px;
}
.popup-detail.arrow-3{
    WIDTH: 313PX;
}
.popup-detail.arrow-5 {
    min-height: 350px;
    WIDTH: 313PX;
}
    .popup-detail.arrow-3:before, .popup-detail.arrow-3:after {
        right: 10px;
    }
.popup-detail.arrow-4:before, .popup-detail.arrow-4:after {
    right: 45px;
}
.popup-detail.arrow-5:before, .popup-detail.arrow-5:after {
    right: 190px;
}
.popup-detail:after {
    content: "";
    position: absolute;
    top: -5px;
    right: 55px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid white;
    transition: all 0.4s ease;
}
.popup-detail:before {
    content: "";
    position: absolute;
    top: -6px;
    right: 102px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid var(--color-primary);
    transition: all 0.4s ease;
}
.search-line {
    border: 1px solid #ccc;
    height: 24px;
    padding: 3px 7px;
    display: inline-block;
    float: right;
    text-align: right;
    border-radius: 0;
    padding-left: 15px;
    box-shadow: none;
    border-radius: 3px;
    padding-left: 10px;
}
    .search-line:focus {
        box-shadow: none
    }
.searchLo li {
}
.shortage {
    display: inline-block;
    max-width: 150px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap
}
.span-check {
    position: absolute;
    height: 100%;
    width: 30px;
    text-align: center;
    padding: 4px;
    right: 0;
    top: 0
}
.table-active {
    height: calc(100vh - 250px) !important;
}
.td-button i {
    font-size: 18px
}
.td-button {
    height: 24px;
    width: 24px;
    padding: 3px;
    display: inline-block;
    transition: all 0.4s ease;
    cursor: pointer;
}
.td-button {
    height: 24px;
    width: 24px;
    padding: 3px;
    display: inline-block;
    transition: all 0.4s ease;
    cursor: pointer;
}
    .td-button:hover {
        border-radius: 15px;
        background: #ccc
    }
    .td-button:hover {
        border-radius: 15px;
        background: #ccc
    }
.td-func {
    padding-bottom: 0px;
    padding-top: 0px;
}
.thongtinxe{
    height:100%
}
.thongtinxe > div > .gara-section {
    height: calc(100% - 62px);
}
    .thongtinxe > div {
        height: 50%;
    }
.title-gara {
    font-weight:400;
    margin: 5px;
}
.toogle-report {
    transition: all 0.4s ease
}
    .toogle-report.Ptram > .poison {
        color: black;
    }
    .toogle-report.Ptram:not(.active-re) > .transverse {
        color: black;
    }
    .toogle-report.Ptram:not(.active-re) > .poison {
        color: white;
    }
    .toogle-report.Ptram > .transverse {
        color: white;
    }
.treename {
    line-height: 30px;
    width: 100%;
    float: left;
}
#DropSearchMauXe > a {
    position: absolute;
    right: 0;
    top: 0;
    height: 30px;
    width: 45px;
    padding: 3px 3px 3px 12px;
    border-left: 1px solid #ccc;
}
#DropSearchMauXe > div {
    position: absolute;
    top: 30px;
    width: 100%;
    z-index: 99;
    background: white;
    border: 1px solid #ccc;
    padding: 7px;
    max-height: 350px;
}
#DropSearchMauXe {
}
#Gara .gara-bill-header {
    background: #D9DADC;
    color: black;
    font-weight: bold;
    padding: 5px 0;
    height: 40px;
}
#Gara .gara-bill-type a {
    padding: 7px 20px;
    line-height: 22px;
    position: relative;
    display: inline-block;
    margin-top: 0;
    color: black;
}
#Gara .gara-bill-type {
    background: #D9DADC;
    height: 40px;
    padding-left: 30px;
    padding: 5px 0 0 30px;
}
#Gara .gara-button-icon:hover, #Gara .gara-detail-functions > a:hover {
    border-radius: 15px;
    background: #d9d9d9
}
#ThemMoiMauXe .gara-detail-information > input, #ThemMoiMauXe .gara-detail-information > div {
    width: calc(100% - 75px)
}
#ThemMoiXemModal .gara-detail-information > div {
    width: calc(100% - 75px)
}
#ThemMoiXemModal .gara-detail-information > input, #ThemMoiXemModal .gara-detail-information > div, #ThemMoiXemModal .gara-detail-information > textarea {
    width: calc(100% - 75px)
}
#ThemMoiXemModal .gara-detail-information > label, #ThemMoiMauXe .gara-detail-information > label {
    width: 100px;
}
#ThongTinThanhToanModal .gara-detail-information .search-line {
    padding-left: 30px;
}
#ThongTinThanhToanModal .gara-detail-information {
    margin-bottom: 5px;
}
#ThuTienHoaDonModal
.gara-detail-information {
    margin-bottom: 5px;
}
#ThuTienHoaDonModal .gara-bill .gara-bill-header {
    background: var(--color-table);
}
#container {
    height: 500px;
    width: 500px;
}
#pills-tabContent {
    height: calc(100% - 50px);
    overflow: auto;
}
#searchHH {
    font-size: 13px;
    border-radius: 5px !important;
    box-shadow: 0 1px 6px rgba(0,0,0,.15);
    border: 1px solid rgb(234,234,234);
    transition: width 0.4s cubic-bezier(.4,0,.2,1);
    height: 40px !important;
    padding-left: 40px;
    padding-right: 30px;
    margin-top: -5px;
    transition: all 0.4s ease;
    margin-bottom: -5px;
}
    #searchHH:focus {
        border-color: var(--color-primary)
    }
.doitacbaohiem .gara-search-HH {
    min-width: 168px;
}
.overflow-visible{
    overflow:visible !important
}
.doitacbaohiem .gara-search-dropbox{
    height: unset
}
    .doitacbaohiem .gara-search-dropbox ul {
        max-height: 197px !important;
        overflow: overlay;
    }
ul.gara-bill-detail.note-row li {
    width: calc( ( 100% - 515px - 135px ) / 3);
}
.gara-list-HD-item {
    display: flex;
    flex-direction: column;
}
    .gara-list-HD-item  {
        flex-wrap: wrap;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }
        .gara-list-HD-item  > div:first-child {
            display: flex;
            width: 515px;
            background: white;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
        }
            .gara-list-HD-item  > div:first-child > div:first-child {
                width: 40px;
            }
            .gara-list-HD-item  > div:first-child > div:nth-child(2 ) {
                width: 100px;
            }
            .gara-list-HD-item  > div:first-child > div:nth-child(3 ) {
                width: 375px;
                padding: 5px;
            }
            .gara-list-HD-item  > div:first-child > div {
                padding: 5px;
                line-height: 20px;
            }
        .gara-list-HD-item  > div:nth-child(2) {
            display: flex;
            background: white;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
        }
        .gara-list-HD-item > div > div:not(.dropdown-menu):not(.gara-popup-chietkhau) {
            align-items: center;
            display: flex;
        }
            .gara-list-HD-item  > div div.gara-ThongtinLo {
                display: none;
                width: 515px;
            }
.text-bold {
    font-weight: bold;
}
.gara-tenhanghoa {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    position:relative;
}
    .gara-tenhanghoa > span {
        display: inline-block;
    }
.ellipsis-text {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.gara-list-items-detail {
    max-width: calc(100vw - 400px - 8px - 515px - 15px);
    display: flex;
    min-width: 425px;
    justify-content: space-between;
}
    .gara-list-items-detail > div {
        width: calc(( 100% - 135px ) / 3);
        display:flex;
    }
.gara-list-items-detail >div:last-child{
    width:135px;
}
.gara-mahanghoa {
    line-height: 30px;
    display: inline-block;
    width: 100%;
    text-align: left;
    padding: 0 5px;
}
.gara-tenhanghoa > span:first-child {
    font-weight: bold;
    word-break: break-all;
}
.gara-bill-detail.note-row {
    border-bottom: 1px dotted rgb(204, 204, 204);
    padding-bottom: 5px
}
.gara-bill-list > li > div:last-child > .gara-bill-detail.note-row{
    border-bottom:none;
}
.gara-bill-list > li > .gara-bill-detail.note-row:last-child {
    border-bottom: none;
}
.gara-detail-input  .form-control.gara-search-HH {
    padding-right: 30px;
}
.btn.btn-secondary{
    color:white
}
.gara-bill-list .gara-input:focus {
    border-bottom: 1px solid var(--color-primary)
}
.full-screen {
    height: calc(100vh - 100px);
}
ul.gara-section-list-item.with-index.list-5-col {
    line-height: 30px;
}
#BanLamViec .gara-section-list-item > li {
    line-height: 24px;
    height: 30px;
    padding: 3px 5px;
}
.gara-search-HH + .gara-search-dropbox {
    top: 30px;
    left: 0;
    overflow: auto;
    position: absolute;
}
.gara-bill-result.doitacbaohiem .gara-search-dropbox li > div {
    display: flex;
    flex-direction: column;
}
.gara-bill-result.doitacbaohiem .gara-search-dropbox li > div >br {
    display: none
}
/*.open > .dropdown-menu {
    display: block !important;
}*/
.gara-tongquan-body .gara-dropdown > a {
    white-space:nowrap;
    padding: 5px;
    font-size: 1rem;
    background: #F3F3F3;
    color: black;
    border-radius: 3px;
    top:3px;
}
.gara-panel-main img {
    height: 47px;
    padding: 5px 5px 7px 6px;
}
#Gara_Tongquan{
padding-bottom:50px;background:#F1F4F6;overflow:auto;overflow: overlay;height: calc(100vh - 50px);
padding-top:15px;
}
.lineHeight-24{
    line-height:24px;
}
.lineHeight-30 {
    line-height: 30px;
}
.lineHeight-18 {
    line-height: 18px;
}
.padding-10{
    padding:10px;
}
.padding-15 {
    padding: 15px;
}
.padding-20 {
    padding: 20px;
}
.padding-25 {
    padding: 25px;
}
.padding-30 {
    padding: 30px;
}
.padding-5 {
    padding: 5px;
}
.padding-7 {
    padding: 7px;
}
.mr-5px {
    margin-right: 4px;
}
.min-width-100px{
    min-width:100px
}
.gara-container{
    background-color: #f3f3f3;
}
.gara-logo {
    padding: 0 7px;
    text-align: center
}
    .gara-logo > img {
        height: 25px;
        margin-top: 5px;
    }
    .garaTK{
margin-left:15px;
position:relative;
min-width:375px;
    }
    .garaTK > a.gara-button-icon{ 
        position:absolute;top: 1px;right: 4px;
    }
    .bold{
        font-weight:bold;
    }
    .floatRight{
        float:right
    }
    .font-Red{
        color:red;
    }
   .black-686868{
       color:black
   }
.text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}
.gara-section-title {
    background-color: #f3f3f3;
}
.gara-section{
    margin:12px 0px;
}
.danhsachxe .gara-section {
    height: calc(100vh - 200px);
}
.btn.btn-primary.dropdown-toggle.dropdown-toggle-split:active {
    background: #dbdbdb;
    color: black;
}
.open > .dropdown-toggle.btn-primary:hover {
    color: black;
    background-color: #dbdbdb;
}
.dropdown-menu.gara-section-list-functions-dropdown:hover {
    color: black;
    color: black;
    background-color: white;
}
.toogle-report {
    width:60px;
    min-width: 52px;
}
.toogle.toogle-report:not(.active-re) .poison {
    color: white;
}
.gara-li-check {
    display: inline-block;
    border:none;
    line-height: 17px;
    width: 24px;
    border-radius: 15px;
    text-align: center;
    padding: 3px;
    background: #75BF72;
    color:white;
}
.gara-dot-check {
    height: 18px;
    width: 18px;
    border: 1px solid var(--color-primary);
    border-radius: 15px;
    margin-right: 2px;
}
.garaDone {
    color: white;
    background: #FF7208
}
.gara-section-list-functions i {
    margin-right: 3px;
}
div#jqAutoPhieuTN > input {
    font-weight: bold;
}
.gara-bill-result > label.bold {
    font-weight: bold;
}
.inicator-loading {
    overflow: hidden;
    width: 300px;
    height: 5px;
    background: #ccc;
    margin-top: 50px;
    margin-left: calc(50% - 150px);
    box-shadow: 3px 3px 3px #e6e6e6;
    position: relative;
}
    .inicator-loading > div {
        position: relative;
        width: 120px;
        height: 5px;
        background: var(--color-primary);
        animation-name: infinityrun;
        animation-duration: 1.5s;
        animation-iteration-count: infinite;
    }
.loading-box {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    z-index: 99
}
.loading-bg {
    background: rgba(255,255,255,1);
    height: 100%
}
.loading-obj {
    overflow: visible;
    position: relative;
    background: #fff;
    width: 200px;
    height: 200px;
    margin: auto;
    top: calc(50vh - 200px);
    border-radius: 50%;
    text-align: center;
}
   .inputFastMode > .gara-fast-input {
        display: flex;
    }
div#el {
}
.gara-col-left.inputFastMode > .garaTK {
    width: 200px;
    min-width: 200px;
}
.gara-fast-input > input {
    width: 75px;
    margin: 0 5px;
}
.limited-250-text {
    max-width: 250px;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
div#mobile-navigation {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 50px;
    background: white;
    width: calc(100vw );
    padding: 7px 12px;
    display:none;
}
    div#mobile-navigation ul {
        position: relative
    }
    div#mobile-navigation li {
        width: 33%;
    }
    div#mobile-navigation a {
        text-align: center;
        height: 30px;
        display: inline-block;
        line-height: 20px;
        font-size: 13px;
        font-weight: bold;
        color: black;
        text-align: center;
        padding: 5px 0;
        width: 100%;
        transition: color 0.4s ease;
    }
    div#mobile-navigation li {
        width: 33%;
        padding: 5px;
    }
    div#mobile-navigation ul:after {
        content: '';
        position: absolute;
        height: 38px;
        background: var(--color-primary);
        width: 33%;
        z-index: -1;
        border-radius: 5px;
        left: 0;
        transition: left 0.4s ease;
    }
.garaTK input {
    padding-left: 30px;
}
.garaTK input.gara-search-HH {
    height: 40px !important;
}
#lstNVien li {
    width: 100%;
    padding: 5px;
    line-height: 24px;
    margin: 0;
    border-bottom: 1px solid #d6d6d6;
    height: 30px;
}
/*=====================newwwwwwwwwwwwwwwwwwwwwwwwwwwwww*/
.op-hoadon-item {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    padding: 5px;
}
.item-lot.op-hoadon-item {
    padding: 9px 5px;
}
.op-hoadon-text {
    /*border: 1px solid #ccc;*/
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: calc(100% - 425px - 120px - 15px);
}
.op-hoadon-stt {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ccc;
    border-radius: 30px;
    line-height: 18px;
    margin: 3px 3px;
    min-width: 24px;
}
.op-hoadon-id {
    display: flex;
    width: 100px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    line-height: 24px;
    padding: 3px;
    min-width: 100px;
}
.op-hoadon-name {
    display: block;
    align-items: center;
    justify-content: flex-start;
    min-width: calc(100% - 150px);
}
.op-hoadon-productname {
    line-height: 24px;
    padding: 3px;
}
.op-hoadon-name > div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.op-hoadon-number {
    display: flex;
    flex-direction: row;
    min-width: 425px;
    justify-content: space-evenly;
    align-items: center;
    max-width: 425px;
   /* border: 1px solid #ccc;*/
}
    .op-hoadon-number > div {
        margin-right: 5px;
        position: relative;
    }
.op-hoadon-function {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-width: 120px;
    margin-left: 15px;
    /*border: 1px solid #ccc;*/
}
    .op-hoadon-function a, .op-hoadon-function button {
        height: 30px;
        width: 30px;
        padding: 3px;
        line-height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        background: none;
        transition: all 0.4s ease;
    }
        .op-hoadon-function a:hover, .op-hoadon-function button:hover {
            border-radius: 30px;
            background: rgba(0,0,0,0.15);
        }
.list-price input, .list-price button {
    line-height: 24px;
    width: 80px;
    max-width: 120px;
    outline: none;
    border-radius: 0 !important;
    padding: 3px;
    border: 1px solid transparent;
    line-height: 24px;
    padding: 3px;
    text-align: center;
}
    .list-price input:focus, .list-price button:focus {
        border-bottom-color: #ccc
    }
.op-hoadon-item-ghichu {
    color: transparent;
    display: inline-block;
    width: 300px;
    margin-left: 130px;
    border-bottom: none;
    opacity: .6;
    position: initial;
    top: 50px;
    display: none;
}
.import-option-lohang {
    display: flex;
}
@media(max-width:1280px) {
    .danhsachxe .gara-section {
        height: 100%;
    }
    .op-hoadon-stt {
        display: none;
    }
    .op-hoadon-text {
        width: 100%;
    }
    .op-hoadon-item {
        border-radius:5px;
        flex-wrap: wrap;
    }
    .op-hoadon-number {
        width: calc(100% - 140px);
        min-width: unset;
        max-width: unset;
    }
}
@media(max-width:1024px){
    .bill-list-more{
        display:block
    }
    /*.gara-bill-label ul {
        position: absolute;
        top: 100%;
        height: initial;
        display: none;
        width: 250px;
        flex-direction: column;
        background: white;
        border: 1px solid #ccc;
        padding: 5px;
        box-shadow: 3px 3px 10px rgb(0 0 0 / 15%);
        left: -36px;
    }*/
    .gara-bill-label ul.expanded {
        display: flex;
    }
        .gara-bill-label ul li {
            width: 100%;
            border-radius: 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
            .gara-bill-label li span {
                max-width: 200px !important;
            }
            .gara-bill-label ul li.active img {
                display: none !important;
            }
    .gara-tongquan-event, .gara-tongquan-dairy, .gara-tongquan-graph, .gara-tongquan-report, .gara-tongquan-chart{
        padding:10px;
    }
    .gara-tongquan-chart {
        width: calc(30% - 14px);
        margin: 7px;
        height: 400px;
    }
    .gara-tongquan-chart .gara-dropdown-picker {
        left: -10px;
        width: 233px;
    }
    .gara-tongquan-chart .gara-dropdown-picker:before {
        right: 180px;
    }
    .gara-tongquan-report {
        width: calc(70% - 14px);
        margin: 7px;
        min-height: 400px;
    }
    .gara-tongquan-graph {
        width: calc(100% - 14px);
        margin: 7px;
    }
    .gara-panel-main {
        justify-content: center;
    }
    #DoanhThuThuanChart,
    #DoanhThuThucChart {
        min-height: unset !important;
    }
    .title-gara {
        font-weight: bold;
    }
    .gara-tongquan-daily {
        padding: 25px 13px 25px 10px !important;
    }


}
@media(max-width:768px){
    .op-hoadon-item {
        border: 1px solid #ccc;
        margin: 8px 0;
        padding: 5px;
    }
    .gara-col-right.bill-information {
        height: calc(100vh - 100px);
    }
    .gara-panel {
       padding:0;
    }
        .gara-panel:nth-child(2n+1) {
            padding: 0;
            padding-left: 0;
        }
        .gara-panel:nth-of-type(odd) .gara-panel-container {
            margin-left: 7px;
        }
        .gara-panel:nth-of-type(even) .gara-panel-container {
            margin-right: 7px;
        }
    .gara-tongquan-chart {
        width: calc(100% - 14px);
        margin: 7px;
        min-height: 400px;
        height: unset;
    }
    .gara-tongquan-report {
        width: calc(100% - 14px);
        margin: 7px;
        min-height: 400px;
    }
    .gara-tongquan-graph {
        width: calc(100% - 14px);
        margin: 7px;
    }
}
@media(max-width:599px) {
    .op-hoadon-stt {
        display: none !important;
    }
    .op-hoadon-quanlity > .op-hoadon-chucnang {
        width: 100% !important;
    }
    .op-hoadon-header > .op-hoadon-function, .op-hoadon-header > .op-hoadon-number {
        display: none;
    }
    .op-hoadon-item {
        flex-wrap: wrap;
    }
    .op-hoadon-text {
        width: 100%;
    }
    .op-hoadon-item > div {
        width: 100%;
        flex-wrap: wrap;
    }
    .op-hoadon-infor > .op-hoadon-ghichu {
        left: 30px;
    }
    .op-hoadon-item.op-hoadon-header {
        display: none;
    }
    .op-hoadon-stt {
        display: none;
    }
    .import-option-lohang {
        width: calc(100vw - 20px);
        justify-content: space-evenly;
    }
        .import-option-lohang span {
            display: none;
        }
    .op-hoadon-number {
        width: calc(100vw - 30px);
        min-width: unset;
    }
    .ghichu {
        display: none;
    }
    .gara-panel:nth-of-type(odd) .gara-panel-container {
        margin-left: 0px;
    }
    .gara-panel:nth-of-type(even) .gara-panel-container {
        margin-right: 0px;
    }
}
@media(max-width:425px) {
    .gara-panel {
        padding-right: 0px;
    }
        .gara-panel:nth-child(2n+1) {
            padding-left: 0px;
        }
    .gara-panel-container {
        height: auto;
    }
    .gara-panel.col-md-6.col-xs-12 {
        padding-right: 0px;
    }
    .gara-panel:nth-child(2n+1) {
        padding-left: 0px;
    }
    .flex.flex-between {
        flex-wrap: wrap;
    }
    .gara-tongquan-event, .gara-tongquan-dairy, .gara-tongquan-graph, .gara-tongquan-report, .gara-tongquan-chart {
        padding: 15px;
        border-radius: 10px;
    }
}
.inputFastMode .gara-fast-input {
    display: flex;
}
.op-gara-togglebill {
    display: none;
    align-content: center;
    justify-content: center;
    align-items: center;
    border: 1px solid #ccc;
    padding: 3px;
}
.op-menu-list > li > a[href='/#/BanLamViec'] > i:first-child {
    display: inline-block;
    margin-right: 5px;
}
.op-slide {
    position: relative;
    overflow: hidden;
    min-height: 220px;
}


    .op-slide.slide-1 .op-slide-2 {
        left: 100%;
    }

    .op-slide.slide-1 .op-slide-1 {
        left: 0;
    }

    .op-slide.slide-2 .op-slide-1 {
        left: -100%;
    }

    .op-slide.slide-2 .op-slide-2 {
        left: 0;
    }

.op-slide-1 {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    transition: all 0.8s ease
}

.op-slide-2 {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 100%;
    transition: all 0.8s ease
}
.gara-popup-baohiem {
    border-radius: 5px;
    display: none;
    position: absolute;
    top: 40px;
    background: white;
    padding: 10px;
    border: 1px solid var(--color-primary);
    z-index: 2;
    right: 0;
    width: 332px;
    box-shadow: 5px 5px 10px rgb(0 0 0 / 15%);
}
.gara-popup-baohiem:before {
    content: "";
    position: absolute;
    top: -6px;
    right: 18px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid var(--color-primary);
    transition: all 0.4s ease;
}
.bg-recycle {
    background: rgb(255, 114, 8);
    color: white;
}

body {
}

a {
    text-decoration: none;
}

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/Materialicons.woff2')format('woff2')
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
}

.navtop {
    background: var(--color-main);
    margin: 0;
    height: 48px;
    border-radius: 0px;
    position: fixed;
    width: 100%;
    z-index: 999;
    border: none;
}

    .navtop .navbar-brand {
        color: #fff;
        font-size: 24px;
        text-shadow: none;
        padding-top: 10px;
        padding-bottom: 10px;
        height: auto;
    }

.sortTime {
    cursor: pointer;
    position: relative;
}

.boxLeft {
    margin-bottom: 0px;
    position: relative;
    clear: both;
}

    .boxLeft .showhideicon {
        font-size: 1rem;
        position: absolute;
        top: 0;
        height: 30px;
        width: 15px;
        text-align: center;
        right: 10px;
        line-height: 30px;
        outline: none !important;
        color: var(--color-main);
    }

.op-filter-title {
    background: var(--color-filter-left);
    border-top: 1px solid var(--color-filter-left);
    border-bottom: 1px solid var(--color-filter-left);
    font-size: 1rem;
    font-weight: bold;
    padding: 7px 2px 8px 10px;
    margin: 0px;
    color: black;
}

.op-filter-container {
    float: left;
    width: 100%;
    padding: 10px;
    background: white;
}

.w100 {
    width: 100% !important;
}

.menuCheckbox, .menuRadio {
    display: block;
}

    .menuCheckbox ul, .menuRadio ul {
        list-style-type: none;
    }

.op-filter-container .treeview {
    list-style-type: none;
}

.fa-info-circle:hover {
    color: #478d00;
}

.fa-info-circle {
    color: #c8c8c8;
}

.tooltip.right > .tooltip-arrow {
    border-right: 5px solid #478d00;
}

.tooltip > .tooltip-inner {
    background-color: #fff;
    border: 1px solid #478d00;
    padding: 5px;
    color: #000;
    width: 200px;
}

.nav-tabs > li > span {
    display: none;
    cursor: pointer;
    position: absolute;
    right: 6px;
    top: 8px;
    color: red;
}

.nav-tabs > li:hover > span {
    display: inline-block;
}

.ss-show {
    display: inline-block;
}

.ss-hide {
    display: none;
}

.ss ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.dash ul li {
    position: relative;
    color: #58595b;
    font-size: 1rem;
    padding-left: 40px;
    text-align: left;
    display: inline-block;
    height: auto;
    min-width: 23%;
    vertical-align: middle;
    min-height: 72px;
    white-space: nowrap;
}

    .dash ul li .dash_icon {
        display: inline-block;
        width: 30px;
        height: 30px;
        margin: 0;
        position: absolute;
        top: 19px;
        left: 0;
        text-align: center;
        border-radius: 100%;
        color: #fff;
        line-height: 30px;
    }

    .dash ul li .dash_title {
        font-size: 1rem;
        color: #58595b;
        margin: 0;
        font-weight: 400;
    }

    .dash ul li span {
        display: block;
        font-size: 25px;
        line-height: 30px;
        color: #32b7b3;
    }

.popover {
    max-width: 600px;
}

    .popover .no-padding {
        padding: 0px;
    }

.parent-price_1 {
    height: 54px;
    top: -4px;
    left: -214px;
}

html, body {
    height: 100%
}

body {
    font-size: 1rem;
    background: #fff
}

*, ul, li {
    list-style: none;
    margin: 0;
    padding: 0
}

a, a:hover {
    text-decoration: none
}

.list-search .img-search {
    width: 60px;
    position: relative;
    border-radius: 10px
}
/*.btn-sao-chep {
    background: var(--color-sao-chep) !important
}*/
/*.btn-sao-chep:hover {
        background: var(--color-sao-chep-hover) !important
    }*/
.span-label {
    color: #999;
    position: absolute;
    top: 15px;
    font-size: 10px
}

.form-check {
    float: left
}

.form-check-input {
    /*margin: 0 !important;*/
    float: left;
    line-height: 24px !important;
    position: relative;
    text-align: center;
}

.form-check-label {
    padding-left: 5px;
}

.icon-title {
    position: absolute;
    top: 7px;
    right: 0
}

    .icon-title i {
        font-size: 16px
    }

.list-search .detail-search {
    padding-left: 0
}

.pa11 {
    padding-left: 7px
}

.btn-modal-file {
    padding-left: 325px;
    margin-bottom: 30px;
    width: 80px
}

.btn-w100{
    width: 100px;
}

.status-green{
    color: white !important;
    background-color:green !important;
}
.status-red {
    color: white !important;
    background-color: red !important;
}

.margin-botton-15 {
    margin-bottom: 15px
}

.Trinhpv-hovver:hover {
    color: #0094ff
}

.thongtin {
    float: left;
    width: 100%;
    margin-top: 20px
}

.add-icon-date input {
    padding-right: 30px
}

.add-icon-date:after {
    font-family: 'Font Awesome 5 Pro';
    position: absolute;
    bottom: 3px;
    right: 7px;
    font-size: 18px;
    top: 3px;
    content: '\f073';
    color: #686868;
    height: 24px;
    line-height: 24px;
}

.money-price-tabs {
    position: absolute;
    top: 15px;
    right: 0;
    width: calc(100% - 250px) !important;
    font-weight: 700
}

.total-money-tabs {
    width: calc(100% - 250px) !important;
    float: right !important
}

.group-add-new-user .form-group label {
    float: left;
    width: 130px;
    line-height: 25px
}

.radio-button-leff p {
    padding-top: 3px !important
}

.icon-search-input {
    position: absolute;
    top: 9px;
    right: 0;
    width: 25px
}

.btn-combobox {
    position: absolute;
    width: 30px;
    top: 0;
    right: 0;
    height: 30px;
    background: #d2d3d5;
    border: none
}

.input-combobox {
    padding-right: 30px
}

.staff-add-new {
    border: 1px solid var(--color-primary);
    margin-bottom: 15px !important
}

.tab-news .nav-tabs {
    border-bottom: 1px solid #32b7b3 !important
}

    .tab-news .nav-tabs li a {
        padding: 10px 15px !important;
        margin-right: 0;
        font-weight: 700
    }

.row-combobox {
    height: 195px
}

.search-result-combobox {
    position: fixed;
    padding: 6px;
    background: #fff;
    border-bottom: 1px dotted #ccc
}

    .search-result-combobox .form-control {
        padding: 5px 8px
    }

.row-combobox ul {
    padding-top: 45px
}

.tab-news li.active {
    border-top: 1px solid #32b7b3 !important;
    border-left: 1px solid #32b7b3 !important;
    border-right: 1px solid #32b7b3 !important;
    border-bottom: none !important
}

    .tab-news li.active a {
        color: #32b7b3 !important
    }

.form-radio span label {
    width: 70px !important
}

.nhom-khach-hang {
    background: #e6e7e8;
    margin-top: 20px
}

    .nhom-khach-hang .form-group {
        padding: 0px !important
    }

        .nhom-khach-hang .form-group .title-radio {
            width: 340px
        }

        .nhom-khach-hang .form-group .form-radio {
            width: auto !important;
            float: right;
            font-weight: 400;
            line-height: 30px
        }

.staff-add-new h4 {
    margin-top: 0;
    font-weight: 700;
    font-size: 16px;
    line-height: 50px;
    padding-left: 12px;
    background: var(--color-title-edit);
}

.header-add-new {
    padding: 15px;
    line-height: 24px;
    margin-top: 0;
    font-weight: 700;
    font-size: 16px;
    /* line-height: 50px; */
    padding-left: 12px;
    background: var(--color-title-edit);
    display: flex;
    justify-content: space-around;
    justify-content: space-between;
}

    .header-add-new h4 {
        line-height: normal;
        /* margin: 3px; */
        font-weight: 700;
        padding: 3px;
        line-height: 24px;
        margin-bottom: 0;
        background: none;
    }

    .header-add-new .pull-right {
        margin-right: 45px
    }

.tree-edit-row .title-tree {
    width: 100%
}

.content-tree {
    width: 100%;
    float: left
}

.title-tree {
    margin-top: 0;
    font-weight: 700;
    font-size: 16px;
    line-height: 30px !important;
    padding-left: 12px;
    padding-right: 30px;
    background: var(--color-title-edit)
}

    .title-tree a {
        position: absolute;
        right: 25px;
        top: 0
    }

    .title-tree label {
        margin-bottom: 0px !important
    }

.staff-add-new h5 {
    font-weight: 700;
    background: #d6d6d6;
    line-height: 24px;
    padding: 3px 7px 3px 25px;
    padding-left: 25px;
    color: black;
    margin-bottom: 15px;
    font-size: 1rem;
}

.group-add-new-user .form-group input {
    float: left
}

.header-report_Tr .dropdown-list ul li label {
    text-align: left
}

.checkbox-loaihang-report ul {
    padding-left: 20px
}

.table-img-user tbody tr:hover td button {
    background: #eaf8f7 !important
}

.col-50 {
    float: left;
    width: 50%
}

.btn-work {
    background: #d1d2d3;
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important
}

.label-texarea {
    font-weight: bold !important
}

.detail-label-input label {
    width: 82px;
    padding: 0;
    line-height: 30px
}

.table-new thead tr th a {
    color: #000
}

.table-wh {
    float: left
}

.input-add-btn {
    padding-right: 40px
}

.input-add-select {
    padding-right: 75px
}

.select-add-input {
    position: absolute;
    width: 86px;
    right: 0;
    top: 0
}

.btn-add-button {
    position: absolute;
    right: 0;
    top: 0
}

.form-wrap-bg {
    float: left;
    width: 60%
}

.selected-form-filter {
    width: 152px
}

.tab-pane .table-reponsive table tbody tr {
    border-bottom: 1px solid #ccc
}

.daterangepicker.opensright:before {
    left: -14px !important
}

.daterangepicker.opensright:after {
    left: -12px !important
}

.header-report {
    padding: 0 0 0 0
}

.header-report_Tr {
    padding: 13px 0 0 0
}

.TrinhpvTop:before {
    top: 16px !important;
    border-bottom: 7px solid transparent !important;
    border-top: 7px solid transparent !important;
    border-right: 7px solid #ccc !important
}

.TrinhpvTop:after {
    top: 16px !important;
    border-top: 6px solid transparent !important;
    border-right: 6px solid #fff !important;
    border-bottom: 6px solid transparent !important
}

.TrinhpvCenter:before {
    top: 164px !important;
    border-bottom: 7px solid transparent !important;
    border-top: 7px solid transparent !important;
    border-right: 7px solid #ccc !important
}

.TrinhpvCenter:after {
    top: 164px !important;
    border-top: 6px solid transparent !important;
    border-right: 6px solid #fff !important;
    border-bottom: 6px solid transparent !important
}

.TrinhpvBotton:before {
    top: 310px !important;
    border-bottom: 7px solid transparent !important;
    border-top: 7px solid transparent !important;
    border-right: 7px solid #ccc !important
}

.TrinhpvBotton:after {
    top: 310px !important;
    border-top: 6px solid transparent !important;
    border-right: 6px solid #fff !important;
    border-bottom: 6px solid transparent !important
}

.w120 {
    width: 120px
}

.floatleft {
    float: left;
    width: 100% !important
}

.gb {
    border: 1px solid var(--color-primary) !important;
    background-color: var(--color-primary) !important;
    color: white !important
}

.dropdown-list .checkbox {
    margin: 0
}

.dropdown-list {
    position: absolute;
    width: 170px;
    top: 33px;
    border: 1px solid #ccc;
    background: #fff;
    z-index: 10;
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
    border-radius: 4px;
    display: none;
    z-index: 9999
}

.information {
    background: #fff;
    position: relative
}

    .information table {
        width: 100%;
        border: 1px solid #e9e9e9
    }

.cashier .header .slide-auto .nav-tabs > li.active > a {
    background: white !important;
    color: #0779a9 !important
}

#showseach a {
    color: #000
}

.content-report {
    padding: 0;
}

.title {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    margin-top: 14px
}

.menuRadio .last .seleted-page {
    border: 1px solid #ccc;
    width: 25%;
    min-width: 107px;
}

@media screen and (max-width:991px) {
    .menuRadio .last .seleted-page {
        min-width: 82px;
    }
}

.header-filter {
    width: 100%;
    float: left;
    margin: 14px 0 14px 0
}

.no-magrin {
    margin: 0px !important
}

.input-search-filter input {
    width: 65%;
    float: right;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

.body-content {
    padding-top: 5px
}

.btn-search-modal-icon {
    position: absolute;
    width: 36px;
    height: 30px;
    background: var(--color-button);
    border: none;
    right: 0;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    color: #fff
}

    .btn-search-modal-icon i {
        position: absolute;
        top: 0;
        right: 12px;
        line-height: 30px;
        font-size: 16px;
        color: #fff
    }

.input-search-modal-icon {
    padding-right: 40px
}

.input-search-filter .btn-search-icon {
    width: 36px;
    float: right;
    height: 30px;
    background: var(--color-button);
    border: none;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    margin-right: 6px;
    color: #fff
}

    .input-search-filter .btn-search-icon i {
        position: absolute;
        top: 0;
        right: 16px;
        line-height: 30px;
        font-size: 16px;
        color: #fff
    }

.input-search-filter .form-control {
    border-right: none
}

.text-search-filter .sum-prduct {
    line-height: 25px;
    font-weight: 700;
    font-size: 15px;
    padding: 0px !important
}

tr td {
    padding: 3px
}

.table-res th, .table-reponsive1 th, .table-reponsive table tr th {
    padding: 3px 5px;
    background: var(--color-table);
    position: relative;
}

.table-res table thead tr th {
    color: #000;
}

.information ul li {
    position: absolute;
    top: 0;
    background: #fff;
    left: 0;
    width: 100%;
    display: none
}

.showhideicon .fa-chevron-circle-up {
    display: none
}

.boxLeft .showhideicon i {
    float: right;
    top: 14px;
    line-height: 28px
}

.callprice {
    border-radius: 3px;
    display: none;
    position: absolute !important;
    top: 46px;
    padding: 10px;
    border: 1px solid var(--color-primary) !important;
    right: 31%;
    background: #fff;
    z-index: 2;
}

    .callprice::before {
        border-bottom: 10px solid var(--color-primary);
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        top: -17px !important;
        right: 20px;
        margin: 0;
        border-top: 7px solid transparent;
        content: '';
        position: absolute;
        width: 0;
        height: 0
    }

    .callprice::after {
        border-bottom: 7px solid #fff;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        top: -13px !important;
        right: 22px;
        border-top: 6px solid transparent;
        margin: 0;
        content: '';
        position: absolute;
        width: 0;
        height: 0
    }

.total-money .sum-prduct {
    font-weight: 700;
    line-height: 18px;
    margin-bottom: 5px;
    padding: 3px;
}

.callprice-left {
    float: left;
    width: 30%;
    z-index: 10
}

#saleMenuRight {
    cursor: pointer;
    height: 30px
}

.callprice-right {
    float: left;
    width: 70%
}

    .callprice-right select {
        width: 111px;
        height: 30px;
        float: left
    }

.minus, .plus {
    float: left;
    cursor: pointer;
    min-width: 30px;
    text-align: center;
    line-height: 28px;
    vertical-align: top;
    font-weight: 700;
    margin-left: 1px;
    border-radius: 2px;
    margin-left: 5px;
    font-size: 11px;
    border: none;
    padding: 3px 5px;
    line-height: 24px;
}

.modal {
    z-index: 9999
}

#dropdown-list-two, .dropdown-list-two {
    width: 380px
}

.dropdown-left {
    border-right: 1px solid #ccc;
    padding: 0
}

.dropdown-right {
    padding: 0
}

.col-50 {
    float: left;
    width: 50%
}

.callprice-right .plus {
    border: 1px solid #747474;
    color: #747474
}

    .callprice-right .plus gb {
        color: #32b7b3 !important
    }

.callprice-right .minus {
    color: #fff
}

.cantrol {
    border-radius: 3px;
    padding: 6px 10px;
    background: var(--color-main);
    color: #fff
}

table {
    width: 100%
}

.callprice-discount .number-price {
    width: 150px
}

.callprice-discount {
    left: -100px;
    width: 258px
}

    .callprice-discount .plus {
        width: 28px
    }

.inner-50 {
    padding-left: 18px
}

.callprice-discount .notifi label {
    white-space: initial !important;
    line-height: 20px
}

.number-price {
    width: 85px;
    float: left;
    height: 30px
}

.callprice-right input {
    float: left;
    margin-right: 5px;
    margin-top: 0
}

.notifi {
    margin-bottom: 10px;
    font-size: 1rem;
    font-weight: 400;
    padding-top: 15px
}

    .notifi label {
        font-weight: 400
    }

#tatcanhh a {
    display: none;
    padding-right: 11px;
    float: right;
    font-size: 17px;
    padding-right: 9px
}

#tatcanhh:hover a {
    display: block !important;
    color: #35a8d9
}

.treeview li .fa-pencil-square-o, .treeview li .fa-share {
    display: none;
    float: right;
    font-size: 17px;
    position: absolute;
    right: 5px;
    top: 6px
}

.treeview li .li-oo .square i {
    right: -6px !important
}

.treeview li .fa-share {
    display: none;
    float: right;
    font-size: 17px;
    position: absolute;
    right: 10px;
    top: 6px
}

.add-goods {
    font-size: 1rem
}

.treeview .li-oo:hover i {
    display: block;
    color: #38b8e6 !important
}

.treeview .open .li-top:hover .fa-pencil-square-o, .treeview .open .li-top:hover .fa-share {
    display: block;
    color: #38b8e6 !important
}

.treeview li:hover ul .fa-pencil-square-o, .treeview li:hover ul .fa-share {
    display: none;
    color: #38b8e6 !important
}

.ss-li .li-top {
    line-height: 30px;
    width: 100%;
    float: left
}

.treeview li div {
    padding: 0 10px 0 16px
}

.title-name {
    font-size: 18px;
    font-weight: bold;
    color: var(--color-main);
    line-height: 24px;
    height: 30px;
    padding: 3px 7px;
    margin: 0;
    margin: 5px;
}

.img-product img {
    width: 100%;
    height: 100%
}

.img-product {
    margin: 30px 20px 15px 0;
    border: 1px dashed #ccc
}

.detail-content .form-group {
    border-bottom: 1px solid #ccc
}

.detail-content .form-group {
    margin: 0;
    min-height: 30px;
    padding: 3px 0
}

.detail-content label {
    font-weight: 400;
    min-width: 100px;
    line-height: 24px;
    margin: 0;
}

.name-product_date {
    margin-top: 6px;
    margin-bottom: 6px
}

.name-product {
    line-height: 24px;
    padding: 3px;
    white-space: unset;
}

.detail-content .name-product {
    max-width: calc(100% - 95px);
}

.op-js-tr-hide1, .op-js-tr-hide {
    display: none
}

.group-btn {
    padding: 15px 0 10px 7px
}

.btn-updata i {
    padding-right: 4px
}

.seach-warehouse .fa-search {
    position: absolute;
    line-height: 30px;
    left: 10px;
    color: #6f7072
}

.btn-updata {
    margin-left: 5px;
    z-index: 0;
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    padding: 5px 14px;
    white-space: nowrap;
    border: none;
    vertical-align: baseline;
    position: relative;
    cursor: pointer;
    height: 30px;
    border-radius: 2px
}

.btn-nhap-file {
    width: 80px;
    height: 80px;
    margin-top: -15px;
    border-radius: 50px
}

.btn-code {
    background: #c6a06e
}

.bg-gray td {
    background: #e6e6e6 !important
}

.btn-business {
    background: #cc4f5b
}

.d {
    display: none
}

.ac {
    display: table-row;
    white-space: inherit !important
}

.active-border {
    border: 1px solid #d1d2d9 !important
}

.sum-prduct {
    padding-top: 0;
    margin-bottom: 5px;
    line-height: 18px;
    padding: 3px;
}

.title-warehouse {
    float: left;
    margin-right: 20px;
    margin-top: 20px
}

    .title-warehouse h3 {
        padding: 0;
        margin: 0;
        line-height: 30px;
        font-weight: 700
    }

.seach-warehouse {
    width: 100%;
    max-width: 460px;
    /* margin: 7px 0; */
    width: 100%;
    position: relative;
}

    .seach-warehouse input {
        font-size: 1rem;
        padding-left: 30px
    }

    .seach-warehouse .btn-b {
        position: absolute;
        top: 1px;
        right: 0;
        height: 28px;
        line-height: 15px
    }

.detail-warehouse {
    margin-top: 15px;
    margin-bottom: 20px
}

.price-pay-end {
    padding: 6px 3px !important;
    background: #ddf7f5;
    color: #000;
    border: none;
    outline: none
}

#modalContainer_delete .modal-body {
    padding: 25px 25px 5px 25px
}

#modalContainer_import .modal-body {
    padding: 25px 25px 5px 25px
}

#modalContainer_importHH .modal-body {
    padding: 25px 25px 5px 25px
}

#modalpopup_selectImport {
    /*  padding: 95px 25px 5px 0*/
}

.modal-smTr {
    width: 600px;
    margin: 30px auto
}

.title-infor {
    border-bottom: 1px solid #14a1d4;
    line-height: 30px
}

    .title-infor div {
        height: 30px;
        background: #14a1d4;
        color: #fff;
        width: 72px;
        text-align: center;
        line-height: 30px
    }

.form-news {
    width: calc(100% - 130px);
    font-weight: 400;
    float: left;
    line-height: 30px;
    position: relative
}

    .form-news > img[src='/Content/images/icon/ngaysinh.png'], .form-wrap > img[src='/Content/images/icon/ngaysinh.png'], .form-wrap > i.fa.fa-calendar {
        position: absolute;
        right: 7px;
        z-index: 9999;
        top: 7px;
    }

.footer-right, .form-wrap, .detail-infor label {
    width: 60%;
    font-weight: 400;
    float: left;
    line-height: 30px
}

.input-price-change {
    border: 0px !important;
    border-bottom: 1px solid #ccc !important;
    border-radius: 0;
    text-align: right;
    box-shadow: none !important
}

.span-number-price {
    text-align: right;
    padding-right: 10px
}

.right-content-infor {
    background: #fff;
    padding: 0 15px;
    float: left
}

.img-producthh {
    width: 193px;
    height: 193px;
}

.img-product-border {
    height: 180px;
    width: 200px;
    background: #fff;
    margin: auto;
    /* margin-top: 15px; */
    padding: 2px;
    border: 1px dotted #ccc;
    border-radius: 5px;
    object-fit: scale-down;
}

    .img-product-border img {
        height: 100%;
        width: 99%
    }

.table-reponsive {
    width: 100%;
    position: static;
    overflow: auto
}

.money-del {
    float: left
}

.table_h {
    overflow: auto
}

table th {
    white-space: nowrap
}

.table-white-space td {
    white-space: nowrap !important;
    position: relative
}

table td {
    white-space: nowrap !important;
    position: relative;
    font-size: 1rem;
    line-height: 24px;
}

table td {
    white-space: nowrap !important;
    position: relative;
    font-size: 1rem;
    line-height: 24px;
    padding: 3px 5px;
}

.hidden-over {
    width: 100%
}

.scroll-table {
    overflow-x: auto;
    width: 100%
}

.op-object-detail {
    box-sizing: border-box;
    border: none;
    background: #fff;
    margin: 0;
    overflow: visible;
    float: left;
    width: 100%;
    border: 1px solid var(--color-primary);
    font-size: 1rem
}

    .op-object-detail.nav-tabs {
        background: #e6e6e6
    }

#table-reponsivetr table thead tr th {
    height: 30px;
    line-height: 30px;
    background: #d6f1f0;
    border-bottom: 2px solid #ddd
}

#table-reponsivetr table tbody tr td {
    border-bottom: 1px solid #ddd;
    padding: 0;
    height: 30px
}

.PhanQuyen tr td {
    background: #F2EED6;
    color: black !important
}

.Report_Empty tr td, .Report_Empty tr td:hover, .Report_Empty tr:hover td {
    background: #F2EED6 !important;
    color: black !important
}

.table-reponsive .Report_Empty tr td, .table-reponsive .Report_Empty tr td:hover, .table-reponsive .Report_Empty tr:hover td {
    background: #F2EED6 !important;
    color: black !important
}

#table-reponsivetr tfoot tr td {
    background: #f3deb7;
    color: black !important
}

.itemCenter {
    text-align: center !important
}

.itemLeft {
    text-align: left !important
}

.itemRight {
    text-align: right !important
}

table {
    border-collapse: collapse;
    color: black !important
}

.nameChiNhanhTr {
    margin-top: 10px;
    margin-bottom: 10px
}

#hedearprinttr {
    font-size: 15px
}

.tablehide_tr table {
    margin-left: 20px;
}

#tablehide_tr tbody tr td {
    color: black !important;
    border-bottom: 1px solid #ddd !important
}

.tablehide_tr table thead tr th {
    height: 30px;
    line-height: 30px;
    background: #d1edbe !important
}

.hi {
    display: none
}

.detail-contentt textarea {
    outline: none;
    border: none
}

.op-object-detailul {
    margin-bottom: 20px
}

.add-dk {
    background: var(--color-primary);
    color: #fff !important;
    border: 1px solid #dadada;
    font-size: 1rem;
    padding: 3px 20px;
    vertical-align: middle;
    border-radius: 2px;
    margin-top: 10px;
    float: left
}

.inner-setup {
    padding-top: 8px;
    padding-bottom: 5px
}

.border-dashed {
    border-bottom: 1px dashed #ccc
}

.add-form .inner-setup {
    padding-bottom: 5px
}

.op-object-detail {
    float: left;
}

.detail-content {
    padding-bottom: 25px
}

.form-group {
    position: relative;
    display: flex;
    align-items: flex-start
}

.modal-body label {
    float: left;
    margin-bottom: 0;
    line-height: 24px !important;
    text-align: left !important
}

.modal-body .op-form-lable {
    width: 130px;
}

.modal-bodyTR label {
    float: left;
    width: 100%;
    margin-bottom: 0;
    line-height: 30px !important;
    text-align: left !important
}

.modal-body {
    position: relative;
    background: #fff;
    width: 100%;
    /*max-height: calc(100vh - 150px);*/
    display: inline-block;
}

.modal-body-scroll {
    overflow-x: hidden;
    overflow-y: auto;
}

.modal-body.scrollable {
    overflow-y: auto;
}

.red {
    color: red
}

.modal-header {
    background: var(--color-main);
    color: #fff;
    font-weight: 700
}

.form-wrap {
    position: relative
}

.iptBtn {
    position: absolute;
    background: var(--color-primary);
    border: none;
    border-left: 1px solid #ccc;
    width: 32px;
    text-align: center;
    color: #fff;
    line-height: 28px;
    border-radius: 0 3px 3px 0;
    float: left;
    top: 1px;
    right: 1px;
    height: 28px
}

.modal-dialog-small {
    width: 500px;
    margin: 85px auto
}

.table-res tr td, .table-reponsive tr td {
    border-top: 1px solid #ccc;
    font-size: 1rem;
    position: relative
}

.border-none tr {
    border-top: none;
    border-right: none;
    border-left: none
}

.close-li {
    display: none
}

.modal-kh {
    width: 900px
}

.k-button {
    overflow: hidden
}

.iptBtn i {
    position: absolute;
    top: 0;
    right: 9px;
    line-height: 28px;
    font-size: 16px;
    color: #fff
}

.img-list {
    width: 160px;
    height: 140px
}

    .img-list img {
        width: 100%;
        height: 100%;
        float: left
    }

.title-kh {
    padding-top: 20px;
    font-size: 15px;
    font-weight: 700;
    padding-left: 30px
}

.header-tab {
    margin-bottom: 10px
}

    .header-tab ul li {
        float: left;
        margin-left: 65px;
        text-align: right;
        font-size: 16px;
        font-weight: 700
    }

        .header-tab ul li h3 {
            font-weight: 400;
            font-size: 16px;
            line-height: 30px;
            margin: 0
        }

.total-revenue {
    color: rgb(14,131,173)
}

.total-expenditure {
    color: rgb(194,3,3)
}

.fund-exists {
    color: rgb(79,158,0)
}

.border-end {
    border-bottom: none !important
}

.nav-tab h1 {
    font-size: 26px;
    margin: 0;
    padding: 0;
    float: left;
    line-height: 34px;
    font-weight: 700;
    color: #333
}

.nav-tab {
    margin-bottom: 7px
}

.btn-bue {
    padding: 0 10px;
    line-height: 30px;
    height: 30px;
    vertical-align: top;
    background: var(--color-button);
    border-radius: 3px;
    position: relative;
    cursor: pointer;
    border: none;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    float: left;
    margin-right: 5px;
    margin-bottom: 0
}

    .btn-bue i {
        margin-right: 4px
    }

.w-880 {
    width: 880px
}

    .w-880 .modal-body label {
        line-height: 19px
    }

    .w-880 .op-object-detail label {
        width: 86px
    }

.tabs-main {
    height: 35px;
    background: #fff;
    float: left;
    width: 100%
}

    .tabs-main li {
        float: left;
        padding-top: 5px;
        height: 40px
    }

    .tabs-main a {
        position: relative;
        display: block;
        padding: 7px 10px 10px 13.6px;
        border-radius: 3px
    }

    .tabs-main .active a {
        background: var(--color-filter-left);
        color: black !important;
        font-weight: 700;
        text-decoration: none
    }

#tong, #nganhang {
    display: none
}

.ketchen {
    background: #32b7b3;
    color: #000
}

.title-ketchen {
    color: #fff;
    overflow: hidden;
    height: 50px;
    border-radius: 2px 2px 0 0;
    padding: 0 30px;
    background: #32b7b3
}

.w49-l {
    width: 50%;
    padding-right: 10px
}

.w49-r {
    width: 50%;
    padding-left: 10px
}

.title-ketchen span {
    font-size: 15px;
    font-weight: 700;
    display: inline-block;
    line-height: 50px;
    text-transform: uppercase
}

.title-ketchen ul li {
    margin-top: 7px
}

    .title-ketchen ul li a {
        font-weight: 700;
        color: #fff
    }

        .title-ketchen ul li a:hover {
            font-weight: 700;
            color: #0779a9
        }

.bg-bue {
    background: #58ac05
}

.control-bottom {
    position: absolute;
    left: 17px;
    bottom: 19px
}

    .control-bottom a {
        padding: 15px
    }

    .control-bottom i {
        color: #fff
    }

.close-k {
    position: absolute;
    right: 17px;
    bottom: 19px
}

    .close-k a {
        color: #fff;
        font-size: 13px
    }

.fitter {
    height: 100%;
    position: fixed;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 354px !important;
    z-index: 995;
    height: 100%;
    background: #fff;
    margin: 0;
    font-weight: 700
}

.title-fitter {
    padding: 0;
    background: #ddf7f5;
    overflow: hidden;
    position: relative;
    line-height: 36px;
    border-radius: 2px 2px 0 0;
    padding-left: 20px;
    color: #000;
    font-size: 13px
}

.treeview-filter ul li a, .tree-title-check-all label {
    padding-left: 15px;
    color: #000
}

.treeview-filter .ul-treeview {
    height: calc(100% - 230px)
}

.tree-title-check-all .seach-nhomhang {
    margin-bottom: 10px
}

.tree-title-delete a {
    color: #000
}

.btn-treeview {
    bottom: 15px !important;
    height: 50px;
    left: 65px !important
}

.tree-title-check-all {
    border-bottom: 1px solid #ccc;
    margin-bottom: 15px
}

.tree-title-delete {
    line-height: 27px
}

.content-fitter {
    padding: 10px 20px 10px 20px
}

    .content-fitter ul li ul {
        margin-left: 25px
    }

        .content-fitter ul li ul li {
            line-height: 30px
        }

.btn-fitter {
    z-index: 0;
    display: inline-block;
    background: #5dba00;
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    padding: 11px 25px 8px 20px;
    white-space: nowrap;
    border: none;
    vertical-align: middle;
    border-radius: 2px;
    position: relative;
    cursor: pointer
}

.choose-fitter {
    bottom: 35px;
    left: 20px;
    position: absolute
}

.bill-show {
    display: none !important
}

.cashier {
    color: #333;
    overflow: hidden
}

.bill-show {
    display: none
}

.cashier .header {
    padding: 0;
    margin-bottom: 10px;
    height: 40px;
    background: #4bc6f2;
    color: #fff
}

.cashier .tab-content-70 {
    margin-right: 608px;
    position: relative
}

.cashier-bill .tab-content-70 {
    margin-right: 490px !important
}

.w302 {
    width: 483px !important
}

.cashier .header .nav-tabs > li > a {
    color: #fff;
    font-weight: 700
}

.cashier .tab-table .nav-tabs > li.active > a, .cashier .header .nav-tabs > li.active > a {
    background: #0779a9 !important;
    color: #fff;
    font-weight: 700
}

.cashier .header .nav > li > a {
    padding: 12px 15px;
    border: none;
    border-radius: 0
}

.cashier .header .nav-tabs > li > a i {
    padding-right: 10px
}

.cashier .header .nav-tabs {
    border-bottom: none
}

.cashier .header .seach {
    float: left;
    width: 44%;
    padding: 5px;
    margin-left: 40px
}

.cashier .header .seach1 {
    margin-top: 12px;
    float: left;
    width: 60%;
    padding: 2px;
    margin-left: 40px
}

.cashier .heder-right a {
    float: left;
    padding-right: 20px;
    color: #fff;
    padding-top: 10px;
    cursor: pointer
}

.cashier .heder-right i {
    font-size: 15px
}

.cashier .heder-right .dropdown {
    float: left;
    height: 41px;
    width: 40px;
    text-align: center;
    padding-top: 10px;
    cursor: pointer;
    padding-right: 10px
}

    .cashier .heder-right .dropdown .dropdown-menu {
        left: -165px !important;
        top: 39px;
        background: #1a9dcc
    }

        .cashier .heder-right .dropdown .dropdown-menu > li > a:hover {
            background: #1a9dcc
        }

.header-filter .dropdown-menu > li {
    border-bottom: 1px dotted #ccc
}

    .header-filter .dropdown-menu > li > a:hover {
        color: #f44e2a
    }

    .header-filter .dropdown-menu > li > a {
        color: #000
    }

.tab-table > li > a {
    background: #14a1d4;
    color: #fff;
    font-weight: 700;
    border: none;
    border-radius: 0;
    padding: 7px 15px !important
}

.list-table li {
    width: 20%;
    text-align: center;
    height: 82px;
    float: left;
    margin-bottom: 20px
}

.list-table {
    padding: 0 20px 0 20px
}

#order-list li {
    padding: 15px 10px 10px 10px;
    float: left;
    margin-top: 5px
}

.order-list li {
    padding: 5px 10px 5px 10px;
    float: left
}

.img-order {
    width: 100%;
    height: 75px;
    float: left;
    margin: auto;
    text-align: center
}

    .img-order img {
        width: 87px;
        height: 75px
    }

.item-order .name {
    float: left;
    width: 100%;
    text-align: center
}

.name-order {
    line-height: 18px;
    height: 50px;
    overflow: hidden;
    font-weight: 700
}

.title-order {
    padding: 8px 12px;
    font-weight: 700;
    color: #666
}

    .title-order .dropdown {
        position: relative
    }

        .title-order .dropdown i {
            padding-left: 10px;
            padding-right: 10px
        }

    .title-order .dropdown-menu {
        background: #fefced;
        color: #333;
        position: absolute;
        font-size: 1rem;
        top: 25px;
        right: 0;
        width: 460px;
        z-index: 9999;
        border: 1px solid #bebfc0;
        left: -321px
    }

        .title-order .dropdown-menu li {
            width: 50%;
            float: left;
            font-size: 1rem;
            overflow: hidden;
            text-align: left;
            margin: 0px !important
        }

            .title-order .dropdown-menu li img {
                width: 20px;
                margin-right: 12px
            }

.drop, #list-item-choose {
    float: left;
    cursor: pointer
}

.inner-w30 {
    background: #fff;
    height: 100%;
    position: relative
}

.tab-table1 {
    background: white !important;
    padding-top: 10px;
    border-bottom: 1px solid #14a1d4
}

    .tab-table1 li.active > a {
        background: #14a1d4 !important;
        color: #fff
    }

    .tab-table1 > li > a {
        padding: 5px 15px
    }

.notifi-order {
    width: 100%;
    text-align: center;
    line-height: 16px;
    padding: 11px 18px;
    float: left;
    color: #fff;
    font-weight: 700;
    height: 70px;
    background: var(--color-button-thanh-toan);
    border: none;
    outline: none;
    font-size: 15px
}

.img-table, .na_t span {
    cursor: pointer
}

.notyfi-none {
    display: none;
    color: red
}

.notyfi-none-nhom {
    display: none;
    color: red
}

.nt1 {
    background: linear-gradient(to bottom,#e37784 0%,#ce5b68 100%)
}

.nt2 {
    background: linear-gradient(to bottom,#46c2f5 0%,#1f95c5 100%)
}

.nt3 {
    border: none;
    background: linear-gradient(to bottom,#539b0b 0%,#6bca0b 100%)
}

.table-total {
    border: none;
    white-space: nowrap
}

    .table-total tr, .table-total tr td {
        border: none;
        padding: 5px;
        font-size: 1rem
    }

    .table-total .form-control {
        height: 26px
    }

.inner-product {
    margin: 7px
}

.main-conten-tab {
    padding: 10px 5px;
    float: left;
    width: 95%;
    height: 430px;
    overflow: scroll
}

.refresh {
    position: relative
}

    .refresh span {
        position: absolute;
        top: -11px;
        right: 4px;
        width: 16px;
        height: 16px;
        border: 1px solid #fff;
        border-radius: 16px;
        text-align: center;
        line-height: 13px;
        font-size: 11px;
        background: #0779a9
    }

.name-p {
    position: absolute
}

.pop-bottom {
    position: absolute;
    width: 200px;
    background: #fff;
    right: 35px;
    top: 47px;
    z-index: 999999;
    border: 1px solid #5dba00;
    padding: 10px;
    box-shadow: 0 0 3px rgba(0,0,0,.2);
    background: #fff;
    display: none
}

    .pop-bottom:before {
        border-bottom: 10px solid #fff;
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        top: -9px !important;
        right: 20px;
        margin: 0;
        content: '';
        position: absolute;
        width: 0;
        height: 0
    }

    .pop-bottom ul li {
        color: #000;
        font-weight: 700;
        float: left;
        width: 100%
    }

        .pop-bottom ul li span {
            float: left;
            width: 49%
        }

        .pop-bottom ul li input {
            float: right;
            width: 30%;
            height: 30px
        }

.content-kitchen .carousel-control.left, .content-kitchen .carousel-control.right {
    background-image: none
}

.content-kitchen .carousel-control .glyphicon {
    background: #ccc;
    border-radius: 30px;
    font-size: 16px;
    line-height: 30px
}

.content-kitchen .carousel-control .glyphicon-chevron-left {
    left: 30px !important
}

.content-kitchen .carousel-control .glyphicon-chevron-right {
    right: 30px !important
}

.content-kitchen .carousel-control {
    width: 30px !important
}

.text-hide {
    position: absolute;
    padding: 10px;
    line-height: 16px;
    background: #fff;
    font-size: 1rem;
    z-index: 99999999999;
    color: #000;
    width: 100%;
    height: 53px;
    border: 1px solid #32b7b3
}

.checkbox-table {
    position: relative
}

.text_area {
    position: absolute;
    top: 57px;
    width: 240px;
    background: #fff;
    font-size: 1rem;
    z-index: 99999999999;
    display: none;
    height: 8px;
    left: 12px
}

    .text_area:before {
        border-bottom: 6px solid #32b7b3;
        border-right: 7px solid transparent;
        border-left: 7px solid transparent;
        top: -3px;
        margin-top: -3px;
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        left: 16px
    }

.bottom-used {
    position: absolute;
    bottom: 0;
    height: 110px;
    left: 0;
    right: 0;
    overflow: hidden;
    padding: 15px 0 25px;
    background: #f3f3f3;
    color: #333;
    z-index: 99
}

.content-kitchen {
    position: relative
}

.inner-used {
    width: 500px;
    margin: 0 auto
}

    .inner-used label, .user-left {
        float: left
    }

.view {
    float: left;
    margin-left: 20px;
    padding-top: 9px
}

.bx-default-pager {
    display: none
}

.proTabsClose {
    position: absolute;
    top: 7px;
    right: 5px;
    color: #000
}

.scoll-main-tab {
    overflow: scroll
}

.nav > li > a:hover {
    background: #e6e6e6;
    color: #000;
}

.bxslider1 li {
    width: 186px !important
}

.bx-wrapper {
    margin-bottom: 0px !important;
    border: 0px !important
}

.nav-tabs > li.thu > a {
    background: red
}

.plus_c {
    height: 33px;
    line-height: 33px;
    width: 36px;
    margin: 0;
    background: #14a1d4;
    text-align: center;
    font-size: 16px;
    padding: 0;
    border-radius: 2px 2px 0 0;
    color: #fff;
    position: absolute;
    z-index: 99;
    padding-top: 5px
}

.w701 .bx-next, .w30 .bx-next {
    right: -406px !important
}

#tab-table-right {
    float: left;
    position: absolute;
    width: 162px;
    height: 33px
}

.to {
    display: none
}

.bl {
    display: block !important
}

.navbar-default .open a {
    color: black !important
}

.change-color {
    z-index: 100;
    position: fixed;
    right: 0;
    top: 30%
}

#dropdown-listsoq {
    padding: 5px 15px
}

.dropdown-menu li > a {
    padding: 3px 7px;
    line-height: 24px;
    color: black;
}

.dropdown-menu {
    max-height: 400px;
    overflow: auto;
}

    .dropdown-menu li:hover {
        background: rgba(0,0,0,.15);
    }

.dropdown-list li:hover {
    background: var(--color-button-hover)
}

.menu-chicken {
    padding-left: 20px
}

.change-color a {
    height: 40px;
    width: 40px;
    background: #32b7b3;
    color: #fff;
    float: left;
    line-height: 49px;
    text-align: center
}

    .change-color a i {
        font-size: 20px
    }

.change-color li ul {
    position: absolute;
    width: 170px;
    top: 40px;
    right: 0;
    display: none;
    background: #32b7b3
}

    .change-color li ul li {
        padding: 10px;
        float: left;
        background: #32b7b3
    }

.change-color:hover li ul {
    display: block
}

.btnMenu .dropdown-menu {
    color: #000;
    background: #fff;
    border-radius: 0
}

.handling-kitchen .dropdown-menu li a:hover {
    background: var(--color-primary);
    color: #fff
}

.header-top ul li ul li:last-child {
    border-bottom: none
}

.header-top ul li ul li:hover {
    /*background: var(--color-primary)*/
    background: rgba(0,0,0,0.15)
}

.header-top ul li:hover ul {
}

.amdin {
    width: 152px !important
}

.title-establish {
    padding: 0 0 0 0;
    position: relative
}

    .title-establish h1 {
        font-size: 19px;
        margin: 0;
        padding: 0;
        float: left;
        line-height: 34px;
        color: #333;
        padding-bottom: 7px;
        min-width: 230px;
        margin-right: 0;
    }

    .title-establish .nav-tabs > li.active > a {
        color: #fff;
        border-radius: 2px 2px 0 0;
        background: #32b7b3
    }

    .title-establish .nav > li > a {
        position: relative;
        display: block;
        padding: 8px 15px
    }

.information-es {
    background: #FFF;
    border-radius: 5px
}

    .information-es ul {
        float: left;
        width: 100%;
    }

.establish .modal-body {
    padding: 0
}

.establish .form-wrap {
    width: 60%
}

.btn-file {
    position: relative;
    overflow: hidden;
    border: 1px solid #ccc;
    color: #000;
    line-height: 22px !important;
    font-size: 1rem !important
}

    .btn-file input[type=file] {
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        text-align: right;
        opacity: 0;
        background: none repeat scroll 0 0 transparent;
        cursor: inherit;
        display: block;
    }

.wp-st-logo img {
    padding: 10px
}

.wp-st-logo p {
    padding-top: 10px;
    margin: 0
}

.form-group p {
    padding-top: 10px
}

.information-es ul li {
    width: 100%;
    float: left;
    position: relative;
    text-align: center;
    border: 1px solid;
    border-color: transparent;
    border: 1px solid #ccc;
    margin-bottom: 10px
}

    .information-es ul li .icon-es {
        height: 30px;
        text-align: center;
        font-size: 1rem;
        color: #ccc;
        float: left;
        padding-right: 7px;
        line-height: 32px;
        padding-left: 6px
    }

.checkbox-es {
    padding-top: 5px;
    position: relative
}

.item-es {
    float: left;
    width: 100%
}

.setup-right {
    float: left;
    line-height: 22px
}

.setup-left {
    width: 15px;
    margin-right: 10px;
    position: relative;
    float: right;
    padding-top: 3px
}

    .setup-left input {
        float: right
    }

.information-es .infor {
    top: 12px;
    position: absolute;
    right: 10px;
    font-size: 15px;
    display: none
}

.cl:before {
    color: var(--color-main) !important
}

.usedbank {
    float: left
}

    .usedbank h4 {
        background: #eff0f1;
        color: #006fa9;
        font-size: 16px;
        font-weight: 700;
        padding: 10px 15px;
        margin: 0;
        border: 1px solid #bebfc0;
        border-bottom: none;
        border-radius: 3px 3px 0 0
    }

    .usedbank ul {
        border: 1px solid #bebfc0;
        border-radius: 0 0 3px 3px;
        max-height: 376px;
        height: 376px
    }

        .usedbank ul li {
            padding: 10px 15px;
            position: relative;
            font-weight: 700;
            background: #d3f3ff
        }

.use-top strong {
    float: left;
    line-height: 40px;
    padding-right: 15px
}

.use-top .form-group {
    float: left;
    width: 35%
}

.use-top a {
    line-height: 34px;
    background: #f8f8f8;
    border: 1px solid #e2e2e2;
    color: #656565;
    box-shadow: none;
    padding: 5px 10px;
    font-size: 1rem;
    margin-left: 10px
}

.user-list h3 {
    font-size: 1rem;
    color: #006fa9;
    font-weight: 700
}

.user-list i {
    padding-right: 10px
}

.item-time .checkbox-item {
    float: left;
    width: 80px;
    line-height: 35px;
    position: relative;
    width: 100%;
    padding-bottom: 10px
}

.item-time .form-group label {
    float: left;
    line-height: 35px;
    width: 35px
}

.item-time .form-group {
    position: relative;
    float: left;
    width: 50%
}

    .item-time .form-group .form-wrap {
        width: 75%
    }

    .item-time .form-group .icon-time {
        position: absolute;
        right: 40px;
        top: 0;
        font-size: 20px
    }

.form-de {
    position: absolute;
    left: 81px;
    width: 500px;
    z-index: 9999;
    background: #fff;
    color: #000;
    height: 40px;
    top: 0
}

.control-next {
    position: absolute;
    top: 8px;
    color: #000
}

.control-prev {
    position: absolute;
    right: 44px;
    top: 8px;
    color: #fff
}

.out-slide {
    background: #0779a9;
    float: left;
    width: 100%
}

.slide-auto {
    float: left;
    width: 84%;
    overflow: hidden;
    height: 33px;
    position: relative
}

.btn-disable {
    cursor: not-allowed;
    pointer-events: none;
    color: silver;
    background: #fff
}

.span-sale {
    color: red
}

.seach {
    width: 20% !important
}

.table-red {
    margin-top: 9px
}

.table-green {
    margin-top: 9px
}

.per_ac1 li {
    padding: 0 7px;
    text-align: center;
    width: auto !important
}

.op-filter-container ul li {
    width: 100%;
    float: left;
    position: relative;
    display: flex;
}

.op-filter-container ul.li-more-level li {
    flex-direction: column;
    padding-left: 10px;
}

.op-filter-container .il li input {
    float: right;
    width: 86%
}

.parent-node i{
    font-size: 1.5rem;
}

.op-filter-container ul li .fa-calendar {
    position: absolute;
    right: 5px;
    top: 8px;
    font-size: 15px
}

.op-filter-container ul li .form-control {
    margin-bottom: 10px
}

.kv2Btn1 {
    background: #509d02;
    width: 80px;
    height: 34px;
    float: left;
    border-radius: 4px;
    line-height: 34px;
    font-size: 16px;
    color: #fff;
    text-align: center;
    margin-bottom: 10px
}

.fillter {
    z-index: 99;
    display: none;
    position: absolute;
    top: 32px;
    width: 225px;
    right: 0;
    top: 47px;
    background: #1c9b94
}

    .fillter i {
        position: absolute;
        top: 7px !important;
        right: 7px !important;
        font-size: 15px;
        color: #6d6d6d !important
    }

.btn-kitchent {
    background: #FF9B00 !important;
    height: 48px;
    float: left;
    width: 83px
}

.iconn-design {
    margin: 0;
    width: 100%;
    padding-top: 3px;
    text-align: center
}

.btn-kitchent i {
    font-size: 16px;
    margin-right: 5px
}

.bnt-Cashier {
    background: var(--color-special);
    height: 30px;
    float: left;
    width: 30px;
}

.panel-primary > .panel-heading {
    background: var(--color-main);
    border-color: var(--color-main)
}

.bg-style a {
    width: 70px;
    height: 70px;
    text-decoration: none;
    float: left;
    border-radius: 7px
}

    .bg-style a i {
        display: none;
        font-size: 20px
    }

    .bg-style a:hover {
        text-decoration: none
    }

    .bg-style a focus {
        text-decoration: none
    }

.btn-prev {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 16px;
    height: 33px;
    width: 24px;
    background: #14a1d4;
    text-align: center;
    padding-top: 7px;
    color: #fff;
    display: none;
    border-right: 2px solid #0779a9
}

.plus_c i {
    color: #fff
}

.list-ch {
    padding: 10px
}

.btn-next {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 16px;
    height: 33px;
    width: 24px;
    background: #14a1d4;
    text-align: center;
    padding-top: 7px;
    color: #fff;
    display: none;
    border-left: 2px solid #0779a9
}

.l {
    display: none
}

.SelectALLLoaiTuVan li, #tatcanhh {
    line-height: 27px;
    text-transform: uppercase;
    padding-left: 15px;
    cursor: pointer
}

#treeviewLoaiTuVan, #treeviewnhomhang li {
    line-height: 27px;
    padding-left: 7px;
    cursor: pointer;
    text-transform: capitalize
}

    #treeviewnhomhang li .fa-caret-right {
        /*font-size: 1rem;*/
        color: #337ab7
    }

.treeview li .prev-tr-hide .dropdown {
    display: inline-block;
    color: #0098d7
}

.ch1 .proDropdown button, .prev-tr-hide .proDropdown button {
    background: inherit;
    border: none;
    outline: none;
}

.prev-tr-hide .proDropdown .dropdown-menu {
    min-width: 120px;
    top: 21px;
    border-radius: 0
}

.p-c {
    right: 0px !important
}

.p-left {
    left: 175px;
    margin-left: 30px
}

.bnt-i {
    text-shadow: none;
    border-radius: 2px;
    color: #58595b;
    vertical-align: middle;
    height: 29px;
    width: 34px;
    border: 1px solid transparent;
    text-align: center;
    line-height: 28px;
    font-size: 16px;
    float: right;
    right: -9px;
    top: -10px;
    position: absolute
}

.right-content-infor .nav-tabs > li.active > a {
    color: #fff;
    border-radius: 0;
    background: #14a1d4
}

.right-content-infor .nav-tabs > li > a {
    padding: 7px 15px;
    color: #7e7e7e
}

    .right-content-infor .nav-tabs > li > a:hover {
        border-radius: 0;
        color: #fff
    }

.right-content-infor .nav-tabs {
    border-bottom: 1px solid #14a1d4
}

.form-left {
    width: 100%
}

    .form-left input {
        width: 88%;
        float: left
    }

.detail-infor-border-b {
    border-bottom: 1px solid #ccc
}

.right-content-infor .form-wrap {
    text-align: right
}

#add-form ul li {
    float: left;
    width: 100%
}

.bill-list button {
    border: none;
    background: #fff;
    border-bottom: 1px solid #ccc;
    line-height: 30px
}

.bill-list .munber {
    border: none;
    background: #fff;
    border-bottom: 1px solid #ccc;
    line-height: 21px;
    outline: none;
    float: left;
    box-shadow: none;
    border-radius: 0
}

.munber {
    width: 32px;
    float: left;
    margin-right: 5px;
    text-align: center
}

.angle-d {
    text-align: center;
    padding-top: 5px;
    width: 30px;
    height: 30px;
    border: 1px solid #dcdcdc;
    font-size: 16px;
    font-family: 'Font Awesome 5 Pro';
    color: #a1a1a1;
    outline: none;
    border-radius: 2px;
    float: left;
    cursor: pointer;
    margin-right: 5px
}

.bill-list .price-fist {
    width: 120px;
    margin-right: 41px
}

.bill-list .sum-f {
    margin-left: 30px
}

.munber {
    padding: 6px 7px !important;
    border-radius: 0
}

.sum-f {
    line-height: 33px;
    float: left;
    overflow: hidden
}

.spa .sum-f {
    width: 67px
}

.price-fist {
    outline: none;
    box-shadow: none;
    border: none;
    width: 100%;
    height: 30px;
    line-height: 30px;
    background: #fff
}

.cashier #order-list li {
    width: 33%;
    padding-top: 15px
}

.cashier-bill #order-list li {
    width: 20%;
    padding-top: 15px
}

.bx-wrapper .bx-controls-direction a.disabled {
    display: block !important
}

.parent-price {
    position: relative;
    outline: none;
    float: left
}

.slideBtn:hover {
    background: #4bc6f2
}

.arrow-left2 {
    left: -270px
}

.parent-price-1 {
    width: 100%;
    text-align: right;
    padding: 0;
    border-radius: 3px;
    padding-right: 3px;
    line-height: 24px
}

.op-object-detail.nav {
    padding-left: 18px
}

.title-warehouse h4 {
    font-size: 16px;
    font-weight: 700
}

.arrow-left {
    border: 1px solid #32b7b3;
    padding: 10px;
    background: #fff;
    background: #fff;
    box-shadow: 0 0 3px rgba(0,0,0,.2);
    zoom: 1;
    z-index: 99999999999;
    position: absolute;
    left: -121px;
    width: 281px;
    height: 95px;
    display: none;
    top: -4px;
    border-radius: 5px
}

.selec-person ul {
    max-height: 230px;
    overflow: auto
}

    .selec-person ul li ul {
        max-height: 100% !important;
        overflow: hidden !important
    }

.arrow-left1 {
    border: 1px solid #32b7b3;
    padding: 10px;
    background: #fff;
    box-shadow: 0 0 3px rgba(0,0,0,.2);
    zoom: 1;
    z-index: 9;
    position: absolute;
    left: -239px;
    width: 250px;
    height: 86px;
    display: none;
    top: 0;
    border-radius: 4px
}

.txt6 {
    padding-top: 15px
}

.arrow-left1 .price span, .arrow-left .price span {
    float: left;
    width: 65px;
    line-height: 24px;
    text-align: left;
    font-size: 1rem;
    white-space: nowrap;
}

.arrow-left1 .price input, .arrow-left .price input {
    float: right;
    width: 71%;
    margin-left: 1px
}

.arrow-left1:before, .arrow-left:before {
    border-left: 6px solid #32b7b3;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    right: -7px;
    top: 15%;
    margin-top: -3px;
    content: '';
    position: absolute;
    width: 0;
    height: 0
}

.total-right .arrow-left1:before, .total-right .arrow-left:before {
    border-right: 6px solid #5dba00;
    border-left: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    left: -7px
}

.arrow-left:before, .arrow-left2:before {
    top: 14% !important
}

.arrow-left3, .arrow-left2 {
    height: auto
}

    .arrow-left3 .price_2 input, .arrow-left2 .price_2 input {
        width: 106px
    }

.arrow-left1 .price_2 input, .arrow-left .price_2 input {
    float: left;
    width: 87px;
    padding: 1px 5px
}

.price_2 .plus {
    border: 1px solid #747474;
    color: #747474
}

.text-right .arrow-left {
    height: 54px !important;
    top: -4px !important;
    left: 87px !important
}

.menu-left {
    width: 183px;
    float: left;
    margin-top: 18px
}

.content-right {
    width: 828px;
    float: left;
    padding: 18px
}

.spa .total-right .text-right .arrow-left2 {
    left: 266px !important
}

.spa .arrow-left1 {
    left: -274px
}

.cashier-bill .text-right .arrow-left {
    left: -235px !important
}

table {
    margin-bottom: 0px !important
}

.bs-example-modal-mk .form-wrap i {
    top: 0px !important
}

.bs-example-modal-mk .op-filter-title {
    margin-left: 0px !important
}

.choose-order {
    background: #f8f8f8;
    border: 1px solid #e2e2e2;
    display: inline-block;
    width: 70px;
    text-align: center;
    line-height: 24px;
    font-weight: 700;
    font-size: 1rem;
    color: #38b8e6;
    border-radius: 2px
}

.page {
    display: flex;
    /* float: left; */
    width: 100%;
    background: var(--color-table);
    padding: 12px;
    align-items: center;
    justify-content: space-between;
}

.bs-example-modal-mk .modal-body {
    padding: 0px !important
}

.page a {
    border: none;
    border-radius: 2px;
    float: left;
    padding: 3px 9px !important;
    min-width: 18px;
    margin-top: 1px;
}

.page ul {
    float: left;
    padding-right: 10px;
    margin-bottom: 0;
}

    .page ul li {
        float: left
    }

        .page ul li a {
            border: none;
            border-radius: 2px;
            width: auto;
            padding: 3px 9px !important;
            min-width: 18px
        }

        .page ul li .click {
            color: #fff;
            background: var(--color-main);
            text-decoration: none
        }

.logoOpen24 img {
    height: 35px;
    width: 115px;
    margin-top: 2px
}

.icon-tien-khach-dua {
    color: var(--color-main);
    font-size: 24px;
    position: absolute;
    top: 4px;
    right: 0
}

.total-recos {
    float: unset;
    margin-top: 0;
    line-height: 24px;
    padding: 3px;
}

.page span {
    line-height: 21px
}

.bs-example-modal-mp .name-product {
    width: 177px;
    text-align: right
}

.bs-example-modal-mp label {
    float: left
}

.bs-example-modal-mp .form-group {
    border-bottom: none;
    padding-bottom: 0px !important;
    margin-bottom: 0px !important
}

.seach-pay {
    float: left;
    width: 100%
}

.name-seach {
    color: #666;
    font-weight: 700;
    padding-top: 15px;
    float: left
}

#tab-table-right li {
    width: 200px
}

.form-group {
    margin-bottom: 5px
}

#add-form .col-md-1 .delete-group {
    font-size: 15px;
    padding-top: 9px;
    position: absolute
}

.proDropdown:after {
    content: '';
    float: left
}

.menuRadio .last label {
    float: left;
    padding-right: 20px;
    line-height: 28px
}

.menuRadio .last select {
    float: left;
    width: 45%
}

.menuRadio label {
    width: 100%;
    display: flex;
    align-items: center;
    line-height: 20px;
    padding: 3px;
}

.menuCheckbox label {
    line-height: 24px;
    padding: 3px;
    width: inherit;
}

.proDropdown .dropdown-menu > li > a:hover {
    background: #e8e8e8 !important
}

.proDropdown .dropdown-menu {
    padding: 0px !important
}

    .proDropdown .dropdown-menu a {
        padding: 5px 22px
    }

.notyfi-check {
    color: red
}

#treeviewnhomhang {
    max-height: 180px;
    overflow: auto
}

.panel .col-md-2 .form-control {
    padding: 0px !important
}

.status {
    line-height: 33px
}

.header-top {
    float: right;
    height: 45px
}

.check-group input {
    width: 14px;
    height: 14px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: 0;
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    float: left;
    border: 1px solid var(--color-primary);
    border-radius: 3px
}

.remember input {
    width: 14px;
    height: 14px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    float: left;
    border: 1px solid #85b069;
    border-radius: 3px;
    margin-right: 8px
}

.input-search-filter .showfiltercolumn {
    float: right;
    margin-right: 5px
}
/*.choosenhom-right input[type=radio], .tab_chung input[type=radio], .modal-content input[type=radio], .op-filter-body input[type=radio] {
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: 0;
    font-family: 'FontAwesome';
    font-size: 1rem;
    line-height: unset;
    height: unset;
    width: 18px;
    height: 18px;
    display: inline-block;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0;
    padding: 0;
}*/
.radio-button-leff input[type=radio] {
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: 0;
    font-family: 'FontAwesome';
    font-size: 1rem;
    margin-right: 5px
}

.col-md-2 input[type=radio] {
    padding-top: 12px
}

.modal-content .col-md-2 input[type=radio] {
    padding-top: 0
}

.dropdown-list span {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    position: absolute;
    left: 11px;
    outline: none;
    border: 2px solid #fff;
    background: var(--color-button);
    top: 7px
}

.dropdown-list input:checked + span:before, .dropdown-list input:checked ~ span:before, .dropdown-list input:checked + a:before, .dropdown-list input:checked ~ a:before {
    content: '\2713 ';
    outline: none;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    line-height: 12px;
    color: #fff;
    position: absolute
}

#checkbox-time:after {
    left: 5px
}

input[type=checkbox] {
    position: relative;
    margin: 5px;
    height: 13px;
    width: 13px;
}

input[type='checkbox']::before {
    position: relative;
    background: white;
    border-radius: 5px;
    border: none;
    color: var(--color-primary);
    z-index: 1;
    top: -2px;
    left: -2px;
    font-size: 18px;
    font-family: 'Font Awesome 5 Pro';
    height: 18px;
    width: 18px;
    display: inline-block;
    border-radius: 2px;
    line-height: 18px;
    padding: 0 1px;
    content: '\f0c8';
    font-weight: normal;
}

input[type=checkbox].squarevt:checked:before {
    content: '\f146';
}

input[type=checkbox]:checked:before {
    content: '\f14a';
}

input[type=checkbox].squarevt:after, input[type=checkbox]:checked.squarevt:after {
    content: '';
    height: 10px;
    width: 10px;
    background: var(--color-main);
    position: absolute;
    top: 2px;
    z-index: 99;
    left: 2px;
    border-radius: 2px;
}
/*.choosenhom-right input[type=radio]:after, .tab_chung input[type=radio]:after, .chec input[type=radio]:after, .modal-content input[type=radio]:after, .op-filter-body input[type=radio]:after, .radio-button-leff input[type=radio]:after {
    content: '\f10c';
    color: var(--color-main);
    display: block;
    content: '';
    border: 1px solid var(--color-primary);
    height: 14px;
    width: 14px;
    top: 1px;
    position: absolute;
    left: 2px;
    border-radius: 10px;
}*/
.radio-red input[type=radio]:after {
    content: '\f10c';
    color: red;
    display: block
}
/*.choosenhom-right input[type=radio]:checked:after, .tab_chung input[type=radio]:checked:after, .checkbox-es input[type=radio]:checked:after, .modal-content input[type=radio]:checked:after, .op-filter-body input[type=radio]:checked:after, .radio-button-leff input[type=radio]:checked:after {
    content: '\f111';
    color: var(--color-primary)
}*/
.checkbox_TR {
    content: '\2713 ';
    outline: none;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    line-height: 13px;
    color: #32b7b3
}

.col3 .ac input:after {
    content: '';
    font-size: 8px;
    background: #32b7b3
}

.overview-heading {
    background: white !important;
    font-weight: 700;
    font-size: 1rem;
    padding-bottom: 20px;
    padding-top: 15px;
    color: var(--color-main);
    position: relative
}

.title-ds {
    padding-right: 12px
}

.panel-default > .panel-heading .title-ds {
    font-weight: 700;
    color: #3f3f3f;
    text-transform: uppercase;
    padding-right: 10px
}

.total-value {
    color: #000;
    font-size: 13px !important;
    font-weight: 700;
    padding-left: 12px
}

.overview-heading .pull-right span {
    text-transform: none;
    font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
    font-weight: 400
}

.panel-default > .panel-heading i {
    color: #B6B6B6
}

.highcharts-button {
    font-weight: normal !important;
    text-transform: capitalize !important
}

.month1, .month3, .month2, .month4, .month5, .month6 {
    padding-right: 20px;
    border-radius: 3px !important;
    padding: 4px;
    line-height: 22px;
    font-size: 1rem !important
}

    .month3 a {
        color: #35a8d9 !important
    }

.month-oll, .month-oll1, .month-oll2, .month-oll4, .month-oll5, .month-oll6, .month-oll7 {
    border-radius: 0;
    min-width: 180px;
    font-size: 1rem !important;
    box-shadow: none;
    border-radius: 4px;
    z-index: 1;
    border-color: var(--color-main)
}

    .month-oll li a:hover, .month-oll1 li a:hover, .month-oll2 li a:hover, .month-oll4 li a:hover, .month-oll5 li a:hover, .month-oll6 li a:hover {
        background: dodgerblue !important;
        color: white !important
    }

.panel-content {
    height: 370px;
    position: relative;
    background: #fff
}

.tab-width {
    width: 1300px
}

.month-oll a, .month-oll1 a, .month-oll2 a, .month-oll4 a, .month-oll5 a {
    padding: 8px 15px !important;
    color: black !important
}

.panel-content p {
    position: relative;
    font-size: 24px;
    top: 50%;
    color: #c2c2c2;
    text-align: center
}

    .panel-content p:before {
        content: '';
        background: url(.~/Content/Content/images/box.png) no-repeat center top;
        height: 35px;
        position: absolute;
        top: -50px;
        left: 0;
        right: 0
    }

.activity {
    border: 1px solid #ccc;
    border-radius: 5px
}

.ac-title {
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    padding-top: 15px
}

#toTop {
    position: fixed;
    bottom: 40px;
    right: 20px;
    display: none;
    width: 36px;
    height: 36px;
    line-height: 32px;
    border-radius: 100%;
    background: #4bc6f2;
    text-align: center;
    cursor: pointer;
    z-index: 99;
    background: var(--color-main)
}

    #toTop i {
        color: #fff;
        font-size: 24px;
        margin-top: 4px
    }

.activity ul {
    width: 263px;
    margin: auto
}

    .activity ul li {
        float: left;
        border-bottom: 1px solid #ccc;
        color: #000;
        line-height: 22px;
        padding-top: 15px
    }

        .activity ul li .img-ind {
            width: 46px;
            height: 28px;
            top: 5px;
            border-radius: 100%;
            text-align: center;
            line-height: 28px;
            float: left
        }

.highcharts-axis-labels {
    text-transform: none;
    font-weight: 400;
    font-size: 17px;
    width: 30px !important;
    color: black !important
}

.highcharts-grid {
    border-bottom: 1px solid #ccc !important
}

.inner-overview {
    margin-bottom: 13px;
    padding-bottom: 20px;
    padding-top: 20px
}

.activity ul li span i {
    color: #fff;
    font-size: 13px
}

.activity ul li p {
    color: #919192;
    font-size: 11px !important;
    margin-top: -2px
}

.activity ul li .share {
    background: #ef5f81
}

.diary {
    float: left;
    width: 210px;
    font-size: 1rem
}

    .diary .money {
        color: var(--color-main);
        font-weight: 700;
        margin: 0
    }

.support {
    position: fixed;
    width: 240px;
    z-index: 9999;
    right: 0;
    bottom: 0;
    height: 335px;
    background: #fff
}

.menu-main li {
    position: relative
}

    .menu-main li ul {
        position: absolute;
        background: var(--color-main);
        width: 235px;
        z-index: 99999;
        display: none
    }

.giaodichparent ul li:first-child, .giaodichparent ul li:nth-child(4), .giaodichparent ul li:nth-child(7) {
    border-bottom: 1px dotted #d8d6d6
}

.menu-main li ul li:last-child {
    border-bottom: none
}

.menu-main li ul li a {
    display: block;
    padding: 7px 15px
}

#dropdown-listsoq {
    width: 170px;
    background: #009ddc;
    color: #fff;
    position: absolute;
    left: -107px !important;
    z-index: 10
}

.dropdown-list {
    background: var(--color-button);
    color: #fff
}

.form-control {
    height: 30px !important;
    font-size: 1rem
}

.btn {
    padding: 3px 1ch !important;
    min-height: 24px;
    line-height: 24px;
    background-size: 200% 200%
}

.dropdown-list li label {
    line-height: 24px;
    width: 100%;
    padding: 3px 5px 3px 30px;
}

    .dropdown-list li label input {
        opacity: 0;
        margin: 0 !important;
    }

.col-md-2 input {
    padding-left: 7px
}

ul.ui-autocomplete {
    position: absolute;
    font-size: 13px !important;
    background: #fff;
    -moz-border-radius: 15px;
    border-radius: 5px;
    border-color: #ccc;
    border-color: rgba(0,0,0,.2);
    border-style: solid;
    border-width: 1px;
    max-height: 450px;
    overflow-y: auto;
    overflow-x: hidden
}

.ui-state-hover, .ui-state-active {
    color: #fff;
    text-decoration: none;
    background: #08c;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    background-image: none
}

.ui-helper-hidden-accessible {
    display: none
}

.table > thead > tr > td {
    border-top: 1px solid #fff
}

#add-form {
    float: left;
    width: 100%
}

.header-bill {
    line-height: 55px;
    height: 55px !important
}

.cashier .header-bill .seach {
    padding-top: 14px
}

.seach-number {
    float: left;
    width: 80px;
    padding-top: 14px
}

.add-tab {
    float: left;
    width: 100%;
    position: relative;
    padding-top: 14px
}

    .add-tab .tab-table {
        background: #0779a9
    }

    .add-tab .out-slide {
        background: #4bc6f2;
        float: left;
        width: 100%
    }

.cashier #order-list li:hover {
    background: #eee
}

.list-item .order-list li:hover {
    background: rgba(255,255,255,.5);
    box-shadow: 0 1px 2px rgba(0,0,0,.2)
}

.list-item .order-list li {
    width: 16.5%
}

.list-item .order-list li {
    margin: 0
}

.list-item .bx-wrapper .bx-controls-direction a {
    top: -24px
}

.list-item .title-order {
    padding: 0;
    position: relative;
    border-top: 1px solid #ccc;
    text-align: center;
    height: 34px
}

    .list-item .title-order ul li {
        width: 47px
    }

        .list-item .title-order ul li a {
            padding: 5px;
            border: 1px solid #c2c2c2;
            border-radius: 2px;
            line-height: 0;
            float: left
        }

            .list-item .title-order ul li a i {
                font-size: 17px
            }

.bill-money li {
    border-bottom: 1px solid #ccc
}

#add-form .bill-money li {
    display: block
}

.title-bill {
    position: relative
}

#divStaff {
    background: var(--color-main);
    color: #fff;
    height: 43px
}

.user-bill {
    float: left;
    width: 50%;
    position: relative
}

.icon-user {
    float: left
}

#divStaff .name-bill1 {
    color: #fff
}

.name-bill2, .name-bill1 {
    float: left;
    position: relative;
    padding-left: 10px;
    font-size: 1rem;
    height: 32px;
    border-radius: 2px;
    margin-top: 8px;
    line-height: 32px
}

.select-user {
    position: absolute;
    left: 4px;
    padding: 10px;
    border: 1px solid var(--color-primary);
    background: #fff;
    display: none;
    box-shadow: 0 0 0 rgba(0,0,0,0);
    z-index: 10;
    top: 40px;
    border-radius: 5px
}

    .select-user li {
        line-height: 25px;
        position: relative
    }

        .select-user li .fa-check {
            position: absolute;
            right: 10px;
            top: 9px;
            display: none;
            color: #4bc6f2
        }

        .select-user li .fa-search {
            position: absolute;
            right: 10px;
            top: 10px;
            color: #666
        }

.name-bill1 .fa-angle-up, .name-bill1 .fa-caret-up, .name-bill2 .fa-angle-up {
    display: none
}

.user-choose, .seach-bill {
    padding: 10px 15px 0;
    position: relative
}

    .seach-bill input {
        font-style: italic;
        border: none;
        border-bottom: 1px solid #ccc;
        border-radius: 0;
        padding-left: 16px;
        outline: none;
        line-height: 19px;
        padding-bottom: 7px
    }

    .user-choose i, .seach-bill i {
        position: absolute;
        top: 11px;
        color: #999;
        font-size: 1rem;
        left: 15px
    }

    .user-choose a {
        float: left;
        padding-left: 25px;
        border-bottom: 1px solid #d7d7d7;
        height: 24px;
        text-align: right;
        width: 100%;
        text-align: left;
        padding-left: 28px;
        padding-right: 26px;
        line-height: 20px;
        height: 21px;
        text-decoration: none;
        outline: none;
        font-weight: 700
    }

.close-user {
    float: right;
    position: absolute;
    right: 13px;
    height: 30px;
    width: 30px;
    top: 0
}

.seach-bill .mol {
    position: absolute;
    right: 45px;
    color: #4bc6f2;
    top: 0
}

.bill-total {
    padding: 0 10px
}

.title-bill-total {
    margin-bottom: 35px;
    border-bottom: 1px solid var(--color-primary);
    height: 36px
}

    .title-bill-total span {
        margin-bottom: -1px;
        color: #fff;
        text-align: center;
        line-height: 35px;
        font-size: 1rem;
        width: 140px;
        float: left
    }

.bill-pen input, .bill-total table tr .text-right input, .bill-total table tr .text-right button {
    border: none;
    border-bottom: 1px solid #ccc;
    border-radius: 0;
    outline: none
}

.bill-pay .notifi-order {
    width: 95%;
    text-align: center;
    border-radius: 4px
}

.bill-pen {
    position: relative;
    padding: 0 15px
}

.grocery .bill-pen img {
    position: absolute;
    top: -4px;
    left: 15px
}

.grocery .bill-pen .fa-pencil {
    left: 0
}

.grocery .note-out {
    padding-top: 4px;
    display: none
}

.bill-pen .fa-pencil {
    position: absolute;
    top: -3px;
    left: 15px;
    font-size: 15px;
    color: #ccc5c5
}

.bill-pen input {
    padding-left: 16px;
    outline: none;
    font-size: 11px
}

.grocery .bill-pen input {
    padding-left: 0
}

.content-fitter ul li {
    line-height: 30px;
    position: relative
}

.content-kitchenone .order-list .bx-controls-direction {
    right: 5px;
    top: 0;
    width: 91px
}

.hide-item a {
    position: absolute;
    top: -24px;
    left: 50%;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 2px;
    border-top-left-radius: 2px;
    background: #0090DA;
    width: 33px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    float: left;
    color: #fff;
    padding: 5px 10px
}

.hide-item .fa-chevron-up {
    display: none
}

.content-kitchenone {
    transition: height 200ms ease-out;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: all ease 0.3s;
    z-index: 999;
    background: #eee;
    height: 474px;
    border-right: 1px solid #ccc;
    border-left: 1px solid #ccc
}

.list-item {
    height: 276px;
    transition: height 200ms ease-out;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0 7px 0 12px
}

.bottom-hide {
    bottom: -408px;
    transition: all ease 0.3s
}

.content-kitchenone #order-list li ul li {
    padding-top: 30px;
    padding-left: 15px
}

    .content-kitchenone #order-list li ul li .img-order {
        width: 90px;
        height: 90px
    }

.input-note {
    width: 280px !important;
    display: none;
    margin-top: 1px;
}

.pen_hide {
    display: block
}

.content-kitchenone #add-form ul li {
    height: 63px
}

.pen-cilck {
    display: block
}

#add-form ul li:hover .pen-cilck {
    display: block
}

.content-kitchenone .bx-wrapper .bx-prev {
    right: 54px !important;
    left: auto
}

.title-order .page-right {
    width: 135px;
    line-height: 50px;
    font-size: 15px
}

.cashier-bill {
    background: #eee
}

.icon-user i {
    padding-top: 5px
}

.cashier-bill .heder-right {
    padding-top: 9px
}

.op-filter-title a {
    position: absolute;
    top: 0;
    height: 30px;
    width: 30px;
    text-align: center;
    right: 0;
    line-height: 30px;
    outline: none !important;
    color: #fff
}

#tiemmat {
    background: #fff;
    z-index: 1
}

.close-kitchent button {
    background: #2aa2cd !important;
    border: none;
    height: 40px;
    color: #fff
}

.content-fitter input[type=radio]:after {
    content: '\f10c';
    color: #FF9B00;
    display: block
}

.content-fitter input[type=radio]:checked:after {
    content: '\f111';
    color: #FF9B00
}

.btn-bue a {
    color: #fff
}

.toogle {
    float: right;
    width: 44px;
    height: 26px;
    background: #cacaca;
    border-radius: 15px;
    position: relative
}

    .toogle:before {
        content: '';
        width: 22px;
        height: 22px;
        background: #fff;
        border-radius: 15px;
        top: 1px;
        position: absolute;
        margin-top: 1px;
        left: 2px
    }

.active-t {
    background: #14a1d4
}

    .active-t:before {
        left: 20px
    }

.slideBtn {
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    background: #ccc;
    border-radius: 100%;
    color: #fff;
    position: absolute;
    top: 40%;
    z-index: 999;
    padding-top: 12px
}

.bg-op {
    display: none
}

.slideBtnPrev {
    left: 16px !important
}

.slideBtnNext {
    right: 21px
}

.ui-datepicker-div {
    z-index: 7
}

.selec-person ul li {
    cursor: pointer;
    width: 100%;
    text-align: left;
    padding-left: 10px;
    position: relative;
    line-height: 32px;
    font-size: 1rem;
    border-bottom: 1px dotted #d5d5d5
}

    .selec-person ul li:last-child {
        border-bottom: none
    }

#modalPopuplg_NV .promotion-drop .choose-person li {
    float: left;
    padding: 0 4px
}

#modalPopuplg_NV .choose-person input {
    width: 18px
}

.cashier .tab-content textarea {
    padding: 8px
}

.choose-person {
    width: 100%;
    float: left;
    max-height: 62px;
    border-radius: 4px;
    border: 1px solid #ccc;
    overflow: auto
}

    .choose-person .form-control, .choose-person input {
        border: none;
        height: 30px;
        outline: none;
        padding-left: 10px;
        width: 100%
    }

.per_ac {
    float: left;
    width: 25px;
    height: 28px
}

.per_ac1 {
    width: 160px
}

.promotion-drop .per_ac1 {
    width: auto
}

.selec-person {
    width: 177px;
    margin: 0;
    border-top: 0;
    border-radius: 0;
    z-index: 99999
}

.proDropdown .dropdown-menu li a {
    color: #000
}

.input-group .form-control:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px
}

#modalPopup_NhomHHDV {
    z-index: 99999
}

.per_ac1 li {
    background: #dfdfdf;
    color: #333;
    line-height: 30px;
    text-align: left
}

.list-ch li a {
    color: #000
}

.selec-person .fa-times {
    display: none
}

.selec-person .fa-check {
    padding-right: 10px;
    color: #32b7b3;
    position: absolute;
    right: 0;
    line-height: 30px;
    display: none;
    top: 0;
    left: unset;
    width: 30px;
    padding: 3px;
    height: 30px;
    line-height: 24px;
    text-align: center;
}

.choose-person .fa-check {
    display: none;
    float: right;
    padding-right: 20px;
    line-height: 21px;
    color: #009ddc
}

.promotion-drop .selec-person.dropdown-menu {
    width: 100%
}

.per_ac1 .fa-times {
    padding-left: 10px
}

.choose-date .dropdown-menu {
    left: 169px;
    top: -68px;
    width: 500px;
    padding-bottom: 13px;
    border-radius: 4px;
    background: var(--color-main);
    padding: 5px 10px 10px 10px;
    box-shadow: 0
}

    .choose-date .dropdown-menu h3 {
        font-size: 1rem;
        padding: 0;
        font-weight: 700;
        margin-top: 15px;
        color: #fff;
        float: left;
    }

    .choose-date .dropdown-menu li a {
        color: white !important;
        font-size: 1rem
    }

    .choose-date .dropdown-menu:after {
        content: '';
        position: absolute;
        top: 70px;
        left: -8px;
        border-bottom: 8px solid transparent;
        border-top: 8px solid transparent;
        border-right: 8px solid var(--color-primary)
    }

.plus_not {
    position: absolute;
    right: 25px;
    top: 7px;
    color: var(--color-main);
    font-size: 1rem
}

#wait {
    display: block;
    width: 130px;
    height: 89px;
    position: absolute;
    top: 42%;
    left: 40%;
    text-align: center;
    padding: 2px;
    z-index: 999
}

    #wait img {
        height: 48px;
        width: 48px
    }

.red {
    font-size: 1rem;
    padding-left: 5px
}

.bnt-bought {
    background: #06941a
}

textarea {
    border-radius: 4px;
    width: 100%;
    border: 1px solid #ccc
}

.table-reponsive-price {
    height: auto;
    overflow: inherit
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px
}

::-webkit-scrollbar-thumb {
    background: #e9eaf2;
    border-radius: 0;
    -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,.3)
}

.tab-table1 > li > a {
    border-radius: 0
}

.spa .total-order {
    height: 259px
}

.total-order {
    position: absolute;
    bottom: 0;
    height: 280px;
    background: #fff;
    padding-right: 26px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    padding: 0 0 25px;
    color: #333;
    z-index: 99
}

.cashier-bill #order-list li:hover {
    background: rgba(255,255,255,.5)
}

.delete-attribute, .icon-del {
    height: 30px;
    color: #e47885;
    font-size: 1rem;
    padding-right: 10px
}

.fa-info-circle {
    padding-top: 6px;
    font-size: 15px;
    right: -4px;
    top: 0
}

    .fa-info-circle:hover {
        color: var(--color-primary)
    }

.form-group .col-sm-8 .fa-info-circle {
    position: absolute;
    top: 0;
    right: -8px
}

.img-commodity {
    float: left
}

    .img-commodity img {
        width: 100%;
        height: 100%
    }

.img-list-c {
    float: left;
    height: auto;
    max-height: 210px;
    overflow: auto;
    display: flex;
    flex-wrap: wrap;
}

#errorAnh {
    float: left;
    line-height: 30px;
    padding: 0 7px;
    margin-left: 7px;
    border-radius: 4px;
    background: #ffe0d9
}

.img-commodity p {
    margin-top: 5px;
    position: relative;
    margin-bottom: 0
}

    .img-commodity p label {
        line-height: 15px !important
    }

.bg-gray {
    background: #e6e6e6;
    font-weight: 700;
    border-top: 1px solid var(--color-primary) !important
}

.op-object-detail.nav-tabs a {
    color: #000
}

.op-object-detail.tab-content {
    padding: 0 20px 20px 20px;
    float: left;
    width: 100%
}

.table_re {
    overflow: auto
}

.border-right {
    border-right: 1px solid #FF9B00
}

#panelDonViTinh .in {
    display: none
}

.panel-heading .fa-chevron-up {
    display: none
}

.pay-fix {
    bottom: 0;
    background: #fff;
    width: 97%;
    right: 0;
    position: absolute
}

.na_t {
    font-weight: 700;
    line-height: 22px;
    position: relative
}

.txtGreen {
    color: var(--color-main);
    padding-right: 5px;
    font-size: 15px
}

.txtRed {
    color: #ed5c6a;
    padding-right: 5px;
    font-size: 1rem;
    cursor: pointer
}

.title-report {
    font-size: 1rem;
    font-weight: 700
}

.toogle-report {
    width: 62px
}

.active-re:before {
    left: 50px
}

.poison {
    position: absolute;
    left: 15px;
    line-height: 27px;
    color: #747474;
    font-size: 11px
}

.transverse {
    position: absolute;
    right: 9px;
    font-weight: 700;
    color: #747474
}

.highcharts-legend-item, .highcharts-axis text, .highcharts-credits, .highcharts-menu-item {
    text-transform: capitalize !important
}

.highcharts-menu-item {
    text-transform: capitalize !important;
    font-weight: normal !important
}

.highcharts-axis-title {
    display: none
}

.repost {
    width: 100%;
    margin: auto;
    text-align: center
}

.repost-bg {
    background: #fff
}

.title-report-center {
    font-size: 19px;
    font-weight: 700;
    padding-bottom: 10px
}

.width_n {
    width: 800px !important
}

.op-filter-container .nav-tabs, .op-filter-container .nav-tabs a, .op-filter-container .nav-tabs li.active > a {
    border: none
}

.box-tab {
    position: relative;
}
/*.box-tab:after {
    content: '';
    color: var(--color-main);
    width: 10px;
    height: 10px;
    background: var(--color-main);
    position: absolute;
    border-radius: 5px;
    left: 4px;
    top: 3px;
}*/
.dash {
    padding-bottom: 15px;
    border-bottom: 1px solid #e6e6e6
}

#chart {
    font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif
}

.order-list .bx-wrapper {
    background: #f5f5f5
}

.highcharts-series rect {
    text-align: center !important
}

.highcharts-series {
    width: 30px !important;
    fill: #32b7b3 !important;
    text-align: center !important
}

.fadeInRight, .alert-success {
    z-index: 999999999 !important
}

.main-notifi {
    padding: 13px 15px 30px 15px
}

.total-right .text-right .arrow-left2 {
    left: 165px !important
}

.text-right .arrow-left2 {
    left: -215px !important
}

.connect {
    float: left;
    line-height: 34px
}

.price-sa {
    outline: none;
    height: 30px
}

.content-print {
    background: #fff;
    outline: none;
    border: 5px solid #f2f0f0
}

    .content-print table tr td {
        padding: 5px;
        border: 1px dotted #ccc
    }

.line-border {
    margin: 20px 0;
    border-bottom: 1px dashed #000
}

.print-left .cke_top, #cke_txtHoaDonBanLe, #cke_txtTrahang, #cke_txtDoiTraHang, #cke_txtNhapHang, #cke_txtTraHangNhap, #cke_txtChuyenHang, #cke_txtPhieuThu, #cke_txtPhieuChi, #cke_txtXuatHuy {
    border: none !important
}

.result-print {
    padding: 3px 35px
}

    .result-print table tr td {
        padding: 3px
    }

.notificode {
    color: red;
    display: none
}

.bold-print {
    font-weight: 700;
    margin-bottom: 3px;
    font-size: small
}

.title-print-report {
    text-align: center
}

    .title-print-report p {
        margin-bottom: 0
    }

.infor-customer {
    margin-top: 20px;
    margin-bottom: 10px
}

    .infor-customer p {
        margin-bottom: 3px
    }

.print-left button {
    margin: 20px
}

.title-establish .print-view {
    float: left
}

.print-v {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    height: 100%;
    z-index: 999999;
    background: #909090
}

.print-view-print {
    width: 800px;
    margin: auto;
    height: 100%
}

.main-print {
    display: none
}

.box-detail-print {
    width: 450px;
    border: 1px solid #32b7b3;
    padding: 15px;
    background: #fff;
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
    position: absolute;
    z-index: 999;
    top: 0;
    display: none;
    left: 167px
}

    .box-detail-print span {
        float: left;
        width: 50%;
        padding: 0
    }

    .box-detail-print ul {
        float: left;
        width: 100%;
        padding: 0
    }

    .box-detail-print span:nth-child(1) {
        font-weight: 700
    }

    .box-detail-print ul li {
        line-height: 22px
    }

    .box-detail-print:before {
        border-right: 9px solid #4bac4d;
        border-top: 7px solid transparent;
        border-bottom: 7px solid transparent;
        top: 11px !important;
        left: -10px;
        content: '';
        position: absolute;
        width: 0;
        height: 0
    }

    .box-detail-print:after {
        border-right: 9px solid #fff;
        border-top: 7px solid transparent;
        border-bottom: 7px solid transparent;
        top: 11px !important;
        left: -9px;
        content: '';
        position: absolute;
        width: 0;
        height: 0
    }

.right0 {
    right: 0px !important
}

.bg-green {
    background: #747474
}

.form-group .plus {
    background: #747474;
    color: #fff
}

.title-delete {
    color: #ed5c6a;
    font-size: 16px;
    line-height: 16px;
    font-weight: 700;
    padding-bottom: 25px
}

#modalContainer_delete {
    margin: 270px auto
}

.alert-danger {
    background: #f59d9d !important;
    color: #fff;
    box-shadow: 0 0 10px #000;
    font-size: 1rem;
    opacity: 1;
    z-index: 9999999;
    border: 1px solid rgba(0,0,0,.2) !important;
    width: 370px !important
}

    .alert-success i, .alert-danger i {
        padding-right: 10px;
        font-size: 16px
    }

.alert-success {
    background: #51a351 !important;
    color: #fff;
    box-shadow: 0 0 12px #000;
    font-size: 1rem;
    opacity: .5;
    border: 1px solid rgba(0,0,0,.2) !important;
    width: 370px !important
}

    .alert-success:hover, .alert-info:hover {
        opacity: 1
    }

.modal-body .label-b1 {
    width: 160px;
    line-height: 16px
}

.table-border {
    border: 1px solid #ccc
}

    .table-border td {
        border-bottom: 1px solid #ccc
    }

.munber-hh {
    width: 80px
}

.panel-primary {
    border: 1px solid var(--color-primary)
}

.panel-heading {
    background: var(--color-main);
    border: none
}

.attribute {
    width: 530px
}

.attribute-select {
    position: relative
}

.select-commodity {
    border: 1px solid #ccc;
    border-top: none
}

.select-commodity {
    border: 1px solid #ccc;
    border-top: none;
    padding: 7px;
    background: #fff;
    display: none;
    position: absolute;
    width: 169px;
    z-index: 99;
    border-radius: 0 0 3px 3px
}

    .select-commodity ul li {
        line-height: 25px;
        cursor: pointer
    }

        .select-commodity ul li .fa-check {
            float: right;
            display: none;
            line-height: 25px
        }

.attribute-select .drop-abt .fa-caret-up {
    display: none
}

.attribute-select .drop-abt i {
    position: absolute;
    right: 18px;
    top: 13px;
    font-size: 16px;
    color: #999
}

.attribute td {
    padding: 5px
}

.form-horizontal .control-label {
    padding: 0
}

.no-padding-right {
    padding-left: 15px !important
}

.nopading-right {
    padding-right: 0px !important
}

.nopading-left {
    padding-left: 0px !important
}

.border-dotted {
    border-bottom: 1px dotted #ccc
}

.border-bottom-group .form-group {
    border-bottom: 1px dotted #ccc;
    padding-bottom: 5px
}

.tab-col-12 {
    padding: 0px 0 0 0
}

.line-none {
    line-height: 0px !important
}

.form-group-check {
    width: 100%
}

    .form-group-check .form-checkradio {
        position: absolute;
        left: 0;
        top: 8px
    }

    .form-group-check .form-news-checkradio {
        margin-left: 20px;
        width: calc(100% - 15px) !important
    }

    .form-group-check .form-checkbox {
        position: absolute;
        left: 0;
        top: 4px
    }

    .form-group-check .form-news-checkbox {
        padding-left: 20px
    }

.delete {
    z-index: 999999999999
}

    .delete .modal-content {
        margin: -176px auto
    }

.btn-group {
    float: unset
}

.modal-backdrop:first-child {
    z-index: 1
}

.modal-backdrop:nth-child(2) {
    z-index: 40
}

.modal-backdrop:nth-child(3) {
    z-index: 99999
}

#myModalprint .modal-content {
    padding: 0px !important
}

.export {
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    padding: 0 20px;
    border-radius: 4px;
    text-align: center;
    width: 180px;
    height: 33px;
    line-height: 35px;
    background: #32b7b3;
    float: left
}

.attention {
    color: #999;
    border-bottom: 1px solid #e0e0e0;
    margin-top: 20px;
    padding-bottom: 20px
}

.attention-b {
    margin-top: 20px;
    padding-bottom: 20px
}

.btn-print {
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    padding: 0 20px;
    border-radius: 4px;
    text-align: center;
    width: 130px;
    height: 33px;
    line-height: 35px;
    background: var(--color-primary);
    float: left;
    margin-top: 17px;
    margin-left: 20%
}

.w50 {
    width: 50%;
    float: left
}

.print-img {
    width: 130px;
    height: 104px;
    border: 1px solid #999;
    padding: 8px;
    border-radius: 4px;
    margin: auto
}

    .print-img img {
        width: 100%;
        height: 100%
    }

.page-print li {
    float: left;
    width: 25%;
    padding-bottom: 12px
}

.page-print {
    margin-bottom: 30px
}

.modal-ontop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #000;
    opacity: .5;
    z-index: 888;
    display: none
}

.printpage {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    display: none;
    z-index: 9999999999
}

.inner-print {
    width: 413px;
    background: #fff;
    height: 340px;
    position: relative;
    margin: 200px auto;
    z-index: 9999999999
}

.title-print {
    line-height: 42px;
    height: 42px;
    text-align: left;
    float: left;
    padding-left: 15px
}

.close-print {
    position: absolute;
    top: 1px;
    right: 20px;
    background: #fff;
    border: none;
    height: 20px;
    font-size: 23px;
    outline: none
}

.content-print-page {
    height: 298px;
    background: #fff;
    overflow: auto;
    float: left;
    width: 100%
}

.p-fi {
    line-height: 14px;
    font-size: 8pt;
    padding-left: 16px !important
}

.barcode-pname {
    line-height: 14px;
    font-size: 8pt;
    padding-left: 30px !important
}

#mahanghoa {
    height: 10px;
    font-size: 8pt
}

.p-fi span {
    line-height: 14px !important
}

.img-print, #img-print, #img-print1 {
    background: #fff;
    margin: 0 auto
}

    .img-print p {
        margin: 0
    }

#printablediv p {
    padding: 0;
    margin: 0
}

.control-print {
    background: #909090;
    color: white !important;
    font-size: 1rem;
    padding: 8px;
    line-height: 30px
}

    .control-print a {
        color: white !important
    }

.printablediv-page {
    float: left;
    height: 82px;
    font-size: 1rem;
    width: 133px
}

.price-public {
    display: none
}

.select-commodity-p {
    width: 100%
}

.modal-body-print {
    padding: 15px
}

.seach-HH, .sum-HH {
}

.op-js-modal {
    display: none;
}

.op-js-modallnhomhh {
    display: none;
}

.modal-dialoghh {
    width: 500px;
    margin: 30px auto
}

#modalPopup_LoaiThu .form-wrap, #modal_DieuChinhDiem .form-wrap, #modalPopup_LoaiChi .form-wrap, #myModal .form-wrap, #modalPopuplg_EditND .form-wrap, #modalPopuplg_NguoiDungcapnhap .form-wrap, #modalPopuplg_NguoiDung .form-wrap, #myModalnhacungcap .form-wrap, #modalAddGroup .form-wrap, .chinhanh-modal .form-wrap, #modalContainerlg_SQ .form-wrap, #modalPopuplg_SoQuyChi .form-wrap {
    width: 73% !important
}

.search-fillter {
    display: none
}

.title-inport {
    padding-bottom: 7px
}

.link-text {
    text-decoration: underline
}

.blue {
    color: #006fa9 !important;
    cursor: pointer
}

.printinport a {
    float: left;
    line-height: 30px
}

.printinport label {
    float: left;
    width: 80%;
    height: 32px
}

.warning-content {
    color: #7b5e2a;
    background: #f9f9e0;
    border-color: #faebcc;
    padding: 10px;
    border: 1px solid transparent;
    border-radius: 3px;
    font-style: italic;
    margin-bottom: 10px;
    margin-top: 15px
}

.form-group-money {
    width: 50%
}

.selec-person i {
    right: 7px
}

.connect i {
    padding: 0 0 3px 15px;
    padding: 0 0 3px 15px;
    position: absolute;
    right: 100px;
    top: 10px
}

.close-fillter {
    position: fixed;
    z-index: 9999;
    height: 50px;
    width: 100%;
    left: 0;
    bottom: 0;
    right: 0;
    background: #fff;
    padding: 10px 15px;
    box-shadow: 0 0 5px rgba(0,0,0,.3);
    display: none;
    text-align: center
}

.kv2Btn1 {
    background: #4bac4d;
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    padding: 0 20px;
    white-space: nowrap;
    border: none;
    border-radius: 2px;
    position: relative;
    cursor: pointer;
    text-align: center;
    min-width: 54px;
    height: 35px;
    line-height: 37px;
    width: 97%
}

#order-list {
    padding: 0 50px 0 0;
    float: left;
    width: 100%
}

.price-order {
    line-height: 15px;
    padding-top: 10px
}

seach li {
    padding-left: 10px;
    font-size: 13px
}

.ui-id-7 {
    position: relative
}

.ui-menu .ui-menu-item a {
    display: flex;
    text-decoration: none;
    cursor: pointer;
    font-size: 1rem;
    color: #111;
    padding: 13px 0 10px 10px
}

    .ui-menu .ui-menu-item a:hover, .ui-menu .ui-menu-item a.ui-state-active {
        display: flex;
        text-decoration: none;
        cursor: pointer;
        border: 1px dotted #ccc;
        background: rgba(0,0,0,0.05);
    }

.tit-seach {
    font-weight: 700
}

seach-hh {
    padding-right: 5px
}

.tit-none {
    padding-left: 4px
}

.divi-infor {
    left: 420px;
    top: 47px;
    line-height: 27px;
    width: 10px
}

.left-tooltip {
    left: 0;
    width: 10px
}

.label-come {
    font-weight: bold !important;
    line-height: 20px !important
}

.search-fillter-sq {
    line-height: 32px !important
}

.span-sale {
    color: red
}

.title-establish i {
    left: 205px;
    top: 21px
}

.table-res {
    width: 100%;
    overflow: auto
}

.seach-price {
    float: right;
    width: 330px;
    margin-top: 2px;
    display: none
}

.border-dou {
    float: left;
    width: 95%;
    margin: 0 3%;
    border-radius: 6px;
    padding: 15px
}

.spa-inner-product {
    padding: 10px
}

.spa-detail label {
    width: 155px !important
}

.spa-material {
    line-height: 24px
}

.pay-spa {
    padding: 96px 0 0 13px
}

    .pay-spa .notifi-order {
        width: 90%;
        text-align: center
    }

.serve label {
    float: left;
    line-height: 30px;
    margin-right: 10px;
    height: 24px
}

.serve .form-wrap {
    float: left;
    width: 130px;
    margin-right: 10px
}

    .serve .form-wrap .form-control {
        height: 26px !important
    }

.row-15 {
    margin-left: -15px
}

.inner-setup label {
    float: left;
    margin-bottom: 0
}

.inner-setup p {
    padding: 0;
    padding-left: 30px;
    margin: 0;
    line-height: 22px
}

.cart-money {
    margin-bottom: 15px;
    float: right
}

.icon-chiet-khau {
    color: var(--color-main);
    font-size: 1rem;
    margin-left: 4px
}

.cart-money input {
    text-align: right;
    border: none;
    border-bottom: 2px solid #4bac4d;
    border-radius: 0;
    font-size: 17px;
    outline: none
}

.tab-contencart {
    padding-top: 15px;
    float: left;
    width: 100%
}

    .tab-contencart td {
        border-bottom: 1px solid #ccc
    }

.pay-cart li a {
    background: #4bac4d;
    padding: 14px 11px;
    width: 119px;
    margin-right: 13px;
    color: #fff;
    text-align: center;
    border-radius: 3px;
    padding: 10px 11px
}

.pay-cart {
    border-bottom: none
}

    .nav-tabs > .pay-cart li.active > a, .pay-cart > li.active > a:hover, .pay-cart > li.active > a:focus {
        background: #38b8e6;
        color: #fff
    }

.uses-plus .fa-minus {
    display: none
}

.uses-plus {
    line-height: 23px
}

    .uses-plus i {
        height: 30px;
        width: 30px;
        text-align: center;
        line-height: 30px
    }

.uses-plus-hide {
    display: none
}

.iptBtn-spa {
    background: #ebebeb;
    border: 1px solid #ccc;
    width: 32px;
    text-align: center;
    color: #989898;
    float: left;
    height: 28px;
    padding-top: 8px;
    margin-left: 7px
}

.modal-body-1 {
    position: relative;
    padding: 25px 10px 0 10px;
    background: #fff;
    float: left;
    padding-bottom: 0;
    width: 100%
}

.list-staff, .seach-staff {
    margin-top: 10px
}

.table-discount {
    max-height: 420px;
    overflow-x: hidden
}

.list-staff {
    max-height: 363px;
    overflow: scroll
}

.discount input {
    width: 130px;
    float: left
}

.list-staff span {
    float: right;
    padding-right: 18px;
    display: none
}

.block {
    display: block
}

.blo {
    display: block !important
}

.tab-content-701 {
    margin-right: 778px;
    position: relative
}

.modal-body-1 td {
    padding: 5px
}

.inner-setup td {
    padding: 0;
    padding-bottom: 7px
}

.list-staff li {
    line-height: 22px
}

.chec {
    position: relative;
    float: left;
    padding-top: 7px;
    margin-right: 40px
}

.name-per, .code-per {
    float: left;
    line-height: 30px;
    margin-right: 40px
}

.staff-perform {
    margin-top: 7px
}

.discount {
    float: left
}

.table-discount td {
    border: 1px solid #ccc;
    text-align: center;
    position: relative
}

.table-discount input::after {
    left: 48px !important
}

.delete-discount {
    height: 28px;
    width: 28px;
    float: left;
    padding-top: 5px;
    margin-left: 5px;
    font-size: 15px;
    background: #cc4f5b;
    border-radius: 3px;
    color: #fff
}

.material {
    position: absolute;
    background: #fff;
    height: 80px;
    width: 200px;
    border: 1px solid #5dba00;
    z-index: 999;
    padding: 10px;
    font-weight: 400;
    border-radius: 5px;
    display: none
}

.na_t .name:hover .material {
    display: block
}

.material:before {
    border-bottom: 6px solid #5dba00;
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
    top: -7px;
    content: '';
    position: absolute;
    width: 0;
    height: 0
}

.synchronous label {
    float: left;
    width: 80px
}

.synchronous .for {
    float: left;
    width: 104px
}

.synchronous .col-lg-5 label {
    float: left;
    width: 124px
}

.modal-body-1 .name-product {
    width: 160px !important
}

.modal-body-1 label {
    width: 145px
}

.modal-body-1 .form-group {
    margin-bottom: 10px !important
}

.modal-body-1 table td {
    border: 1px solid #ccc
}

.view-end {
    float: left;
    margin-left: 20px;
    padding-top: 1px
}

.list-ch {
    border-radius: 0;
    width: 350px !important;
    left: -208px !important
}

#list-item-choose span a {
    line-height: 19px;
    color: #666 !important
}

.list-ch a {
    color: #666 !important
}

.content-kitchen-p {
    margin-left: 15px
}
/*.op-filter-container .menuCheckbox input[type=radio] {
    padding-top: 9px
}*/
textarea {
    padding: 6px
}

.wait-room p {
    padding-left: 0
}

#wait-kitchent table {
    border-radius: 5px;
    background: #f1f2f2;
    margin-bottom: 10px
}

#wait-kitchent tr td {
    background: #f4f4f4;
    border: 1px solid #bfc1c3
}

#wait-kitchent {
    padding: 10px 30px;
    overflow: scroll;
    height: 90%;
    overflow-x: hidden
}

    #wait-kitchent tr h3 {
        font-size: 1rem;
        font-weight: 700;
        margin: 0;
        padding-bottom: 7px
    }

    #wait-kitchent tr td {
        white-space: inherit !important;
        border: 1px solid #dfdfdf;
        border-right: 1px solid #f4f4f4
    }

    #wait-kitchent tr .tr-name-wait {
        border-radius: 5px 0 0 5px !important
    }

.wait-number {
    float: left;
    background: #fff;
    border: 1px solid #dfdfdf;
    line-height: 44px;
    width: 45px;
    height: 45px;
    text-align: center;
    margin-right: 24px
}

.wait-room {
    float: left;
    padding-top: 10px;
    width: 150px
}

.wait-next {
    background: #ff8fac !important;
    text-align: center;
    right: 0;
    bottom: 0;
    width: 40px !important;
    cursor: pointer;
    padding: 0
}

.bor-none {
    border: none !important
}

.wait-next a i {
    color: #fff;
    font-size: 19px
}

.wait-kitchent-right a {
    border-radius: 100%;
    text-align: center;
    float: left;
    color: #fff
}

.wait-kitchent-right .wait-next a i {
    padding-top: 15px;
    color: #fff;
    font-size: 19px
}

#wait-kitchent p {
    color: #808285;
    font-size: 1rem;
    margin: 0
}

#wait-kitchent .inner-setup {
    border: 1px solid #dfdfdf;
    border-radius: 5px
}

.wait-next-oll {
    background: #f7496e !important;
    border-radius: 0 5px 5px 0;
    position: relative
}

    .wait-next-oll a {
        border-radius: 0 5px 5px 0;
        background: #f7496e;
        text-align: center;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        line-height: 63px
    }

        .wait-next-oll a i {
            font-size: 25px !important
        }

.finished-end {
    border-right: 1px solid #ccc !important
}

.finished {
    width: 50px
}

.supplier label {
    line-height: 30px;
    margin-bottom: 0
}

.detail-warehouse .form-control[readonly] {
    background: #fff
}

.importgoods {
    right: 100px;
    top: 0
}

    .importgoods:before {
        top: 13px !important;
        right: -17px;
        border-left: 10px solid #32b7b3;
        border-bottom: 7px solid transparent
    }

    .importgoods::after {
        top: 13px !important;
        right: -12px;
        border-left: 10px solid #fff;
        border-bottom: 7px solid transparent
    }

.callprice-left {
    height: 30px;
    line-height: 35px
}

.importgoods {
    width: 300px
}

.form-group-customer {
    width: 73%;
    float: left
}

.menu-main li ul li ul {
    left: 0;
    top: 30px;
    display: none
}

    .menu-main li ul li ul li {
        padding-left: 0
    }

.menu-main li:hover ul li ul {
    display: none
}

#lblThe {
    top: -10px;
    color: #888;
    font-size: 11px;
    font-style: italic
}

.expand {
    font-size: 13px
}

.pencel-edit {
    display: none;
    width: 37px
}

.pencel-add {
    width: 37px
}

.checkbox-time {
    float: left;
    width: 30px;
    position: relative
}

.form-wrap-time {
    width: 69% !important;
    float: left
}

.Submission .footer-right, .Submission .form-wrap {
    width: 75%
}

.Submission .modal-footer {
    border: none;
    padding: 8px 0 15px 0px !important
}

.Remind .form-wrap #checkbox-time {
    float: left;
    width: 12%;
    margin-top: 7px;
    position: relative
}

.Remind .form-wrap .form-control {
    width: 86%;
    float: left
}

.btnxoa {
    display: none;
    float: right
}

.content-fitter ul {
    width: 100%;
    overflow: auto;
    overflow-x: hidden
}

.active-admin {
    background: #85b069 !important
}

    .active-admin:before {
        left: 29px !important
    }

.radio-admin {
    margin-right: 40px;
    float: left;
    line-height: 34px
}

.unselectable {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.operation {
    display: none
}

.op-header {
    float: left;
    width: 100%;
    padding-bottom: 5px
}

    .op-header .btnMenu {
        margin-bottom: 0
    }

.choose-commodity {
    color: #888;
    margin-bottom: 10px;
    font-size: 11px;
    float: left;
    height: 16px
}

.img-filter-nang-cao img {
    height: 15px;
    margin: 5px;
    opacity: .6
}

.btn-header-filter .btn-group button font {
    font-size: 1rem
}

.btn-header-filter .btn-group img {
    margin-bottom: 2px;
    height: 14px
}
/*.table-reponsive tr:hover .pen-destroys, .table-reponsive tr:hover .destroys-number {
    background: #eaf8f7
}*/
.list-commodity-show {
    width: 100%;
    margin-bottom: 36px;
    float: left;
    max-height: 393px;
    overflow: auto
}

    .list-commodity-show table th, .list-commodity-show table td {
        border: 1px solid #ccc
    }

    .list-commodity-show .page {
        border: 1px solid #ccc;
        border-top: none
    }

    .list-commodity-show .page {
        border: 1px solid #ccc;
        border-top: none
    }

.txtpink {
    color: #e47885
}

.btnMenu .dropdown-menu li a {
    font-size: 1rem
}

.list-commodity-show input {
    width: 90px;
    float: right
}

#myModalprint {
    z-index: 1049
}

#mymodaltableprint {
    z-index: 1045
}

.modal-ontop1 {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #000;
    opacity: .5;
    z-index: 1046;
    display: none
}

.op-js-modal1 {
    display: none;
}

#mymodaltableprint .modal-footer {
    padding: 20px 0 35px 0px !important
}

#mymodaltableprint .list-commodity-show {
    margin-bottom: 25px
}

.menu-shipping label {
    margin-bottom: 10px
}

.tab-shipping .select-user {
    position: absolute;
    left: 120px
}

.tab-shipping-form {
    border: 1px solid #ccc !important;
    border-radius: 5px !important
}

.tab-shipping .title-bill {
    padding: 0 0 15px
}

.tab-shipping .bill-pen i {
    left: 5px
}

.tab-shipping .bill-pen {
    margin-bottom: 200px;
    margin-top: 10px
}

.right-content-infor .form-wrap {
    text-align: left
}

.pading0 {
    padding-left: 0px !important;
    font-size: 1rem
}

.table-shiping table > tbody > tr > td {
    vertical-align: middle;
    text-align: left
}

.table-shiping .icon-del {
    height: auto
}

.table-shiping .angle-d {
    padding-top: 3px
}

.number-shop {
    width: 108px
}

.seach-left {
    position: absolute;
    top: 4px;
    left: 6px;
    font-size: 1rem;
    color: #666
}

.seach-warehouse .shop {
    padding-left: 24px
}

.name-shop .text_area {
    top: 44px;
    left: 0
}

    .name-shop .text_area:before {
        border-bottom: 6px solid #5dba00;
        border-right: 7px solid transparent;
        border-left: 7px solid transparent;
        top: -3px;
        margin-top: -3px;
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        left: 5px
    }

.switch-tables {
    width: 100%;
    left: 0;
    top: 30px;
    max-height: 350px;
    overflow: auto;
    border-radius: 3px;
    border-top: none
}

.menu-import {
    float: left;
    margin-top: 10px
}

.tab-shipping .title-bill {
    color: #666;
    font-size: 11px
}

.detail-infor label {
    font-weight: 600
}

.date-item {
    width: 100%;
    float: left;
    background: #fff;
    padding: 0 0
}

.date-grid ul li {
    width: 14.2%;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    float: left
}

.appointment-data {
    background: #c7eaf7;
    line-height: 35px;
    padding-left: 10px;
    font-weight: 700;
    border-bottom: 1px solid #ccc;
    margin-bottom: 5px;
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc
}

.appointment-title {
    line-height: 26px;
    padding-left: 10px;
    height: 100px
}

.appointment-footer {
    height: 45px;
    padding-left: 20px
}

.date-grid ul li:nth-child(3n) {
    margin-right: 0
}

.choose-commodity {
    display: none
}

.btn-blue {
    background: #01b0f2;
    color: #fff;
    font-family: Roboto-Regular;
    font-size: 1rem;
    text-align: center;
    float: right;
    margin: 2px 14px 0;
    line-height: 30px;
    padding: 0 10px;
    border-radius: 4px;
    float: left
}

#myModaldetall .detail-content label {
    padding: 0
}

.appointment-scroll {
    overflow: scroll;
    width: 100%;
    height: 85px
}

.name-month {
    float: left;
    font-size: 23px;
    line-height: 22px;
    color: #65A0CE
}

.main-girl {
    margin-bottom: 15px
}

.main-time ul li {
    width: 24%;
    float: right
}

.main-time ul {
    width: 100%
}

    .main-time ul li .img {
        float: left
    }

    .main-time ul li .name {
        float: left;
        font-size: 15px;
        line-height: 30px;
        color: #65A0CE;
        padding-left: 6px
    }

.appointment-title .floatleft {
    line-height: 15px
}

.appointment a {
    outline: none
}

.date-grid ul li:nth-child(8n) {
    border-left: 1px solid #ccc
}

.date-grid ul li:nth-child(1) {
    border-left: 1px solid #ccc
}

.amdin li a {
    padding: 0px !important
}

.list-name-staff {
    max-height: 320px;
    overflow: auto
}

.cal-context {
    width: 100%;
    float: left;
    margin-top: 20px;
    height: 40px;
    z-index: 99999
}

.cal-row-head {
    background: #c7eaf7 !important
}

.cal-month-box {
    float: left;
    width: 100%
}

.cal-month-box, .cal-year-box {
    background: #fff
}

.fillter {
    background: #fff;
    border: 1px solid #ccc;
    border-top: none;
    padding-bottom: 5px;
    background: var(--color-main)
}

    .fillter:hover a {
        color: white !important
    }

    .fillter a {
        float: left;
        width: 100%;
        padding: 4px 10px !important;
        color: white !important;
        font-weight: 400 !important;
        text-align: left !important
    }

.branch-li:hover .fillter {
}

.chinhanh .branch-li {
    float: left;
    text-align: right
}

.branch-li .branch label {
    width: 70px;
    overflow: hidden;
    white-space: nowrap !important;
    right: 7px
}

ul.ui-autocomplete {
    z-index: 999999999999
}

.menu-main li a {
    padding: 14px;
    font-size: 13px
}

.btn-menu {
    float: left;
    width: 83px;
    height: 46px;
    text-align: center
}

.menu-main li .fa-angle-down {
    padding-top: 10px;
    position: absolute;
    top: 8px;
    right: 2px
}

.orangce {
    color: #eb4a24 !important
}

.dropdown-menu-right li a {
    text-transform: none;
    color: #4d4d4d
}

.activity ul li:last-child {
    border-bottom: none
}

.padingtop {
    padding-top: 20px
}

.menu-main li ul li img {
    padding-right: 10px
}

.menu-main li ul li .fa-angle-down {
    padding-top: 10px;
    position: absolute;
    top: -1px;
    right: 8px
}

.diary a {
    color: #000
}

.activity ul li :hover font {
    color: #000
}

.logo {
    display: none
}

.op-filter {
    width: 230px;
    float: left;
    padding-bottom: 36px
}

.content-table {
    float: right;
    width: calc(100% - 240px);
    color: #000;
    padding-left: 5px;
    min-height: 600px;
    margin-bottom: 50px
}

.last .form-control {
    border: 1px solid #32b7b3
}

.direct {
    padding-bottom: 10px
}

.btn-green {
    background: var(--color-main);
    color: #fff
}

.btn-redTr {
    background: #ed5c6a
}

.btn-closeTr {
    background: #898b8e
}

.btn-blue-b {
    background: var(--color-primary)
}

.btn-pink {
    background: #ff6464
}

#modalContainerlg_giaban .btn-pink {
    float: left
}

.menuCheckbox .radio-menu {
    float: left;
    width: 14%
}

.menuCheckbox .conten-choose {
    float: left;
    width: 86%;
    line-height: 23px
}

#clicksua {
    float: right
}

#clickluu {
    display: none;
    float: right
}

#cal-day-box .cal-day-hour-part {
    line-height: 30px
}

.modal-body li.active {
    border-bottom: none;
}

.tab-news-modal .nav-tabs {
    border-bottom: 1px solid var(--color-primary) !important;
}

    .tab-news-modal .nav-tabs li {
    }

        .tab-news-modal .nav-tabs li a {
            margin: 0px !important;
            font-weight: 700;
            padding: 15px 15px;
            border-top: 1px solid white !important;
            border-left: 1px solid white !important;
            border-right: 1px solid white !important
        }

        .tab-news-modal .nav-tabs li.active a {
            border-top: 1px solid var(--color-primary) !important;
            border-left: 1px solid var(--color-primary) !important;
            border-right: 1px solid var(--color-primary) !important
        }

        .tab-news-modal .nav-tabs li.active:hover a {
            border-top: 1px solid var(--color-primary) !important;
            border-left: 1px solid var(--color-primary) !important;
            border-right: 1px solid var(--color-primary) !important;
            border-bottom: none;
        }
/*.modal-body .nav-tabs > li.active > a {
    border: 1px solid #fff
}*/
/*.modal-body .nav-tabs {
    border: 1px solid #fff
}*/
.modal-header {
    background: #fff;
    font-weight: 700;
    height: 40px;
    line-height: 20px;
    border: none;
    background: var(--color-main);
    color: #fff;
    padding: 10px 15px;
    cursor: move;
}

.modal-headerTr {
    background: #fff;
    font-weight: 700;
    height: 40px;
    padding-top: 10px;
    padding-left: 30px;
    border: none;
    background: #32b7b3;
    color: #ed5c6a
}

.magin-top {
    font-size: 1rem;
    margin-bottom: 8px !important
}

#modalPopuplg_DichVu .modal-body .tab-content, #modalPopuplg_HH .modal-body .tab-content {
    padding: 20px 30px 5px 30px
}

#modalPopuplg_DichVu .modal-body, #modalPopuplg_HH .modal-body {
    padding: 0
}

.soquy_modal .nav > li > a {
    padding: 10px 24px
}

.soquy_modal .tab-content {
    padding: 1px
}

.soquy_modal .nav-tabs {
    border-bottom: 1px solid #ddd
}

.soquy_modal li.active {
    border: none
}

.soquy_modal .nav-tabs .title-tab {
    font-weight: 700
}

.modal-search-tab .fa-search {
    position: absolute;
    right: 306px
}

.modal-search-tab button {
    top: 0;
    height: 30px
}

.soquy_modal .tab-content > .active {
    border: 1px solid #ddd;
    border-top: none;
    padding: 10px;
    margin-top: -1px;
    display: inline-block;
    width: 100%
}

.soquy_modal li {
    margin-bottom: -1px
}

.modal-content {
    border-radius: 0
}

.modal-header h4 {
    font-size: 17px;
    font-weight: 700
}

.modal-header .close {
    position: absolute;
    width: 45px;
    height: 40px;
    right: 0;
    top: 2px;
    font-size: 25px;
    color: white;
    outline: none;
    opacity: 1
}

    .modal-header .close:hover {
        background: rgba(0,0,0,0.15)
    }

.commodity-note:hover .materiall {
    display: block
}

.commodity-note {
    position: absolute;
    right: 15px;
    top: 1px;
}

    .commodity-note .materiall {
        position: absolute;
        background: #fff;
        height: auto;
        width: 250px;
        border: 1px solid var(--color-primary);
        box-shadow: 1px 1px 10px rgba(0,0,0,0.15);
        z-index: 999;
        padding: 10px;
        font-weight: 400;
        border-radius: 5px;
        right: -15px;
        top: 25px;
        display: none;
    }


    .commodity-notev2:hover .materiall {
        display: block
    }

.commodity-notev2 {
    position: absolute;
    right: 50px;
    top: 1px;
}

    .commodity-notev2 .materiall {
        position: absolute;
        background: #fff;
        height: auto;
        width: 250px;
        border: 1px solid var(--color-primary);
        box-shadow: 1px 1px 10px rgba(0,0,0,0.15);
        z-index: 999;
        padding: 10px;
        font-weight: 400;
        border-radius: 5px;
        right: -15px;
        top: 25px;
        display: none;
    }

.materiall:before {
    border-bottom: 6px solid var(--color-primary);
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    top: -6px;
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    right: 13px;
}

.check-group {
    padding-left: 7px;
    width: 35px !important;
    min-width: 35px !important;
    position: relative
}

#thanhphanhide {
    display: none;
    padding-bottom: 10px;
    width: 100%;
    text-align: right
}

.ifram-print {
    width: 100%;
    height: 100%;
    border: 0;
    margin: 0;
    padding: 0;
    background: #fff
}

.print-customer {
    height: 720px;
    margin-top: 0
}

.bg-load {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #000;
    opacity: .3;
    z-index: 10001
}

.drop-column {
    right: 0
}

.happy-wait {
    z-index: 10002;
    color: #14a1d4;
    font-weight: 700;
    font-size: 16px;
    margin-top: 10px
}

.wrap-radio {
    padding-top: 7px
}

.bxslider li img {
    width: 100%;
    height: 100%
}

.img-item {
    width: 99%;
    height: 95px;
    float: left
}

.choose-img {
    padding-top: 15px;
    text-align: center;
}

.form-wrap-cs {
    width: 67%
}

.deatal-custummer {
    padding-top: 5px
}

.cheack-conpany {
    float: left;
    border: 1px solid #ccc;
    height: 30px;
    border-radius: 4px;
    margin-right: 5px;
    padding: 3px !important;
    line-height: 32px;
    display: flex;
    padding-left: 0;
    font-size: 1rem;
    display: flex;
    line-height: 24px !important;
    justify-content: space-evenly;
}

.tgg {
    width: 100%
}

.cheack-conpany input {
    position: relative
}

.check-personal input {
    position: relative
}

.check-company > span, .check-personal > input {
    width: 50%
}

.check-personal {
    float: left;
    border: 1px solid #ccc;
    height: 30px;
    border-radius: 4px;
    line-height: 24px;
    padding-left: 3px;
    display: flex;
    font-size: 1rem;
    padding: 3px;
}

.detail-produc-customer {
    width: 1163px
}

.classification {
    position: relative;
    float: left
}

    .classification .input-group-btn {
        right: 32px;
        position: absolute;
        top: 0;
        z-index: 9999
    }

#modalContainerlg_TuVan .form-wrapp {
    width: 83.5% !important
}

#modalContainerlg_VT .form-wrapp {
    width: 83.5% !important
}

    #modalContainerlg_VT .form-wrapp textarea {
        width: 100%
    }

.consultant {
    width: 130px !important
}

.rewards {
    position: relative;
    float: left
}

.form-wrap span {
    padding-right: 15px;
    line-height: 32px;
    position: relative
}

.tab-sections {
    padding: 15px 0 15px 0
}

.date-rewards {
    position: absolute;
    right: -6px;
    top: 0;
    height: 30px;
    border-left: 1px solid #ccc;
    width: 34px;
    text-align: center;
    line-height: 27px
}

.rewards .date-rewards {
    right: 0
}

.consultantt {
    width: 111px !important
}

.close-goods {
    float: left;
    width: 100%;
    padding-top: 7px;
    text-align: right;
    padding-right: 15px
}

    .close-goods i {
        font-size: 11px
    }

.c-goods {
    display: none
}

.scoll-r {
    overflow: inherit !important;
    max-height: 100% !important
}

.ss-li ul {
    display: none
}

.close-ul {
    position: absolute;
    left: 14px;
    top: 2px
}

.ghi-chu-note:before {
    font-family: 'Font Awesome 5 Pro';
    position: absolute;
    bottom: 0;
    font-size: 15px;
    content: '\f040';
    color: var(--color-main)
}

.fa-money {
    color: var(--color-main)
}

.open li .fa-pencil-square-o {
    right: 30px
}

.treeview .open {
    display: block !important;
    position: relative
}

.ss-li .square {
    position: absolute;
    right: 10px;
    top: 1px
}

.white {
    background: #fff
}

.yellow {
    background: #e6f5d6
}

.btn-gr {
    background: var(--color-main)
}

.status-lable {
    width: 69%
}

.close {
    font-size: 20px;
    text-shadow: none
}

option {
    padding: 5px !important
}

.btn-blue-b:hover {
    color: #a0d6c6
}

#btnThemMoiNhom {
    color: #666;
    top: 0
}

.font400 {
    font-weight: 400
}

.bill-left {
    width: 60%;
    float: left;
    padding-right: 10px
}

.bill-right {
    width: 40%;
    float: left;
    padding-left: 10px;
    position: relative
}

.bill-content .bill-right {
    border-left: 2px solid #d4d5d6
}

.bill-header {
    height: 40px;
    background: #ebebeb
}

.bill-seach {
    padding-top: 5px;
    position: relative;
    float: left;
    width: 49%
}

.bill-home {
    float: left;
    width: 30px;
    height: 45px;
    padding-top: 9px
}

.bill-bxslide {
    width: 405px !important;
    float: left;
    height: 30px;
    line-height: 30px;
    padding-top: 5px;
    padding-left: 10px
}

    .bill-bxslide ul li {
        background: #fff;
        border-radius: 4px;
        text-align: center;
        width: 80px;
        float: left;
        margin-right: 3px
    }

.bill-bxslide {
    position: relative
}

    .bill-bxslide ul {
        height: 32px
    }

    .bill-bxslide .bx-wrapper .bx-prev {
        width: 13px;
        height: 30px;
        padding-top: 5px;
        background: #fff;
        text-align: center;
        border-radius: 2px;
        margin-top: -15px;
        color: #000;
        font-size: 18px;
        top: 16px
    }

    .bill-bxslide .bx-wrapper .bx-next {
        right: -17px;
        width: 13px;
        height: 30px;
        padding-top: 5px;
        font-size: 18px;
        background: #fff;
        text-align: center;
        border-radius: 2px;
        margin-top: -15px;
        color: #000;
        top: 16px
    }

.qua-tang-km {
    color: var(--color-main);
    font-size: 18px
}

.pull-control-chinhanh {
    width: calc(100% - 185px)
}

.bill-control-right {
    width: 185px;
    float: right;
    padding-right: 15px
}

    .bill-control-right li {
        float: left;
        line-height: 46px;
        height: 40px;
        padding-left: 13px
    }

.bill-print a {
    font-size: 15px
}

.bill-content .nav-tabs > span > a {
    background: #3db7dc;
    color: #f5f5f5;
    text-decoration: none
}

    .bill-content .nav-tabs > span > a:hover {
        text-decoration: none
    }

.bill-content .nav-tabs > span.active > a {
    background: #fff;
    color: #000;
    border: none;
    text-decoration: none;
    border-top: 2px solid #d8daef
}

.bill-content .nav > span > a {
    padding: 8px 15px;
    border-radius: 2px
}

.name-menu {
    position: absolute;
    opacity: .9;
    bottom: 0;
    width: 100%;
    height: 45px;
    padding: 3px
}

.bg1 {
    background: #1f837d
}

.bill-listmenu {
    padding: 25px 50px 0 55px;
    position: relative
}

.slide-goods1 .bill-listmenu li {
    height: 143px;
    border: 1px solid #ccc;
    border-radius: 4px
}

.bill-listmenu li {
    width: 12%;
    position: relative;
    float: left;
    text-align: center;
    transition: all 0.3s ease-in-out 0.1s;
    margin: 0 13px 15px 13px;
    overflow: hidden
}

    .bill-listmenu li:hover img {
        overflow: hidden;
        transition: all 0.3s ease-in-out 0.1s
    }

.bg2 {
    background: #e77b54
}

.bg3 {
    background: #5f3477
}

.bg4 {
    background: #ac5586
}

.bg5 {
    background: #523516
}

.divLstHoaDon span .munber-goods {
    font-size: 1rem;
    font-weight: 700;
    color: #000
}

.donate span {
    font-weight: 700
}

.divLstHoaDon .active span {
    color: #000
}

.divLstHoaDon .active .munber-goods {
    color: #e56564
}

.bill-content .bill-right .nav > li > a {
    padding: 0;
    border-radius: 2px;
    height: 32px;
    line-height: 29px;
    width: 80px;
    text-align: center
}

.bill-infor .nav-tabs > li > a {
    border-bottom: 2px solid #ecebeb;
    font-weight: 700;
    color: #000;
    border: none;
    font-weight: 400;
    padding: 3px 15px
}

.bill-infor .nav-tabs > li:hover > a {
    background: #fff
}

.bill-infor .nav-tabs > li.active > a {
    border: none;
    border: 1px solid var(--color-primary);
    color: #000;
    font-weight: 700;
    border-bottom: none;
    padding: 3px 15px;
    background: #fff;
    height: 25px
}

.bill-print-flast {
    float: right !important;
    height: 30px;
    width: 30px;
    text-align: center;
    cursor: pointer;
    margin-left: 3px
}

.bill-barcode label {
    width: 94px;
    float: left;
    line-height: 30px
}

.bill-barcode input {
    float: left;
    width: 145px
}

.bill-barcode {
    margin-top: 15px
}

.replus {
    position: relative;
    float: left
}

.plus-bill {
    position: absolute;
    height: 30px;
    width: 30px;
    right: 5px;
    text-align: center;
    line-height: 30px;
    padding-top: 9px;
    border-left: 1px solid #ccc;
    color: #999
}

.munber-bill {
    max-width: 45px;
    float: left;
    text-align: center;
    overflow: hidden;
    height: 29px;
    padding: 1px 4px;
    border: none;
    outline: none
}

.grocery .munber-bill {
    max-width: 50px;
    text-align: right;
    border: none;
    border-radius: 0;
    box-shadow: none;
    outline: none;
    border-bottom: 1px solid #ccc
}

.grocery .bill-pluss:hover {
    color: #939598
}

.bill-plus {
    width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px;
    margin: 0;
    min-width: 30px;
    height: 30px;
    color: #2b2b2c;
    font-size: 24px;
    line-height: 18px;
}

.bill-pluss {
    height: 27px;
    background: #d8dbef;
    text-align: center;
    padding-top: 7px;
    color: #58595b;
    margin-right: 4px;
    border-radius: 3px;
    font-size: 15px;
    width: 28px;
    float: left
}

.w701 .bill-bxslide ul li span:hover {
    color: #ff8375
}

.inner-listchoose {
    position: relative
}

.total-bill-last {
    width: 67px;
    line-height: 30px;
    text-align: right
}

.inner-listchoose div {
    float: left
}

.total-bill-last span {
    text-align: right;
    line-height: 30px
}

.inner-listchoose span {
    font-weight: 700
}

.bill-de {
    margin-top: 4px;
    float: left;
    width: 20px
}

.grocery .bill-de {
    margin-top: 13px
}

.bill-note {
    float: left;
    background: #1c9b94;
    width: 45px;
    height: 20px;
    border-radius: 2px;
    color: #fff;
    padding-left: 2px;
    line-height: 20px;
    font-size: 11px
}

.p0 {
    padding: 0px !important
}

.p01 {
    padding: 0px !important;
    line-height: 36px !important
}

.grocery .p01 {
    padding: 0 0 0 8px !important
}

.p01 img {
    padding-left: 7px;
    cursor: pointer
}

.bg6 {
    background: #e3e8e8
}

.btn-control {
    width: 100%;
    border-radius: 6px;
    font-size: 15px;
    height: 53px;
    text-align: center;
    margin: auto;
    margin-bottom: 4px
}

    .detail-infor button, .btn-control button {
        color: #fff;
        width: 125px;
        height: 53px
    }

.bg7 button, .bg7 {
    background: #f15a29;
    border: none;
    outline: none
}

.bg8 button, .bg8 {
    background: var(--color-primary);
    border: none;
    outline: none;
}

.bg9 button, .bg9 {
    background: var(--color-button-thanh-toan);
    border: none;
    outline: none;
}

.btn-import {
    background: var(--color-main) !important
}

.btn-nha-bep {
    float: right !important;
    width: calc(100% - 360px) !important;
    margin: 0;
    margin-right: 10px !important
}

.footer-bill {
    height: 245px;
    bottom: 0;
    right: 0px !important;
    color: #333;
    width: 100%;
    z-index: 10;
    padding-left: 30px;
    padding-top: 4px;
    background: #ddf7f5;
    position: fixed;
    bottom: 0;
    width: 580px;
    left: auto;
    border-left: 10px solid #ebebeb
}

    .footer-bill table td:hover, .footer-bill table td {
        background: #ddf7f5 !important
    }

.bill-listchoose {
    height: calc(100% - 370px);
    overflow-x: auto;
    padding-bottom: 20px
}

.btn-nha-bep div {
    padding: 15px;
    font-size: 1rem;
    margin-bottom: 10px;
    margin-top: 5px;
    border-radius: 4px;
    color: #fff;
    float: left;
    width: 100%;
    text-align: center
}

    .btn-nha-bep div a {
        width: 100%
    }

.nha-bep-thong-bao {
    background: #58595b
}

.nha-bep-ghep {
    background: var(--color-primary)
}

.nha-bep-thanh-toan {
    background: var(--color-button-thanh-toan)
}

.add-top {
    right: 6px;
    position: absolute !important;
    margin-right: -4px !important;
    top: 0
}

    .add-top a {
        padding: 8px 11px !important
    }

.bill-time {
    background: #69cbc5;
    padding: 2px 12px;
    position: absolute;
    left: 45px;
    border-radius: 10px
}

.table-list li {
    height: 135px;
    width: 143px;
    float: left;
    text-align: center;
    color: #fff;
    position: relative
}

    .table-list li img {
        margin-top: 20px
    }

    .table-list li h2 {
        color: #000;
        font-size: 25px
    }

.table-list {
    margin-top: 25px
}

.scoll-table li {
    float: left;
    height: 30px
}

.scoll-table {
    white-space: nowrap !important;
    height: 47px;
    overflow-x: scroll;
    overflow-y: hidden;
    position: relative
}

.scoll-creat {
    height: 10px;
    width: 100%;
    position: absolute;
    background: #fff;
    border: 1px solid #ccc
}

.scoll-table::-webkit-scrollbar {
    width: 7px;
    height: 7px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff
}

.scoll-table span {
    line-height: 32px;
    padding-right: 3px
}

.w70 {
    margin-right: 580px;
    position: relative
}

.w30 {
    float: right;
    width: 580px;
    position: relative;
    height: calc(100% - 45px)
}

.w300 {
    float: right;
    width: 400px;
    position: relative;
    background: #fff;
    border-left: 2px solid #d4d5d6;
    height: 100%
}

.serve-bill {
    float: left;
    line-height: 36px;
    padding-right: 10px;
    font-weight: 400
}

.replus div, .replus input {
    font-size: 1rem;
    float: left;
    width: 68.5%;
    line-height: 30px
}

.border-left {
    border-left: 10px solid #ebebeb
}

.footer-bill table td {
    color: #000
}

.bill-imgtable h4 {
    color: #000
}

.bill-imgtable img {
    width: 74px;
    height: 45px
}

.li-replus {
    float: right !important;
    padding-right: 10px
}

.name-restaurant {
    font-size: 20px;
    text-transform: uppercase;
    width: 80%;
    margin: auto;
    margin-top: 5px
}

.adress-res {
    margin-top: 8px
}

.code-res {
    margin-top: 10px;
    font-size: 17px
}

#printflast, #printflast table {
    color: #000;
    font-size: 1rem;
    z-index: 999999;
    overflow: scroll
}

.detai-res {
    margin-top: 10px;
    margin-bottom: 10px
}

.drop-bill {
    width: 30px !important;
    white-space: normal;
    white-space: pre-wrap
}

.bold {
    font-weight: 700
}

.thanks-res {
    width: 240px;
    height: 30px;
    background: #000;
    color: #fff;
    text-align: center;
    line-height: 30px;
    margin: auto;
    border-radius: 4px;
    font-size: 15px;
    margin-top: 10px
}

.footer-res {
    border-top: 1px solid #949599;
    padding-top: 20px;
    margin-bottom: 20px;
    text-align: right;
    padding-right: 24px
}

.inner-modal {
    padding: 10px 20px 0 20px
}

.modal-bill {
    padding: 10px
}

.bill-totaltable {
    padding: 0 20px 0 20px
}

.modal-bill {
    font-size: 1rem;
    color: #000
}

.total-left {
    float: left;
    width: 60%;
    line-height: 30px;
    position: relative
}

.total-right {
    float: right;
    width: 240px;
    line-height: 30px;
    position: relative;
    padding-right: 3px;
    border: none;
    border-bottom: 1px solid #bcbdbf;
    outline: none;
    height: 30px;
    margin-right: 20px
}

    .total-right a {
        position: absolute;
        right: 0;
        top: 0;
        height: 30px;
        width: 30px;
        font-size: 17px;
        border: 1px solid #ccc;
        text-align: center;
        padding-top: 5px;
        background: #fff;
        border-radius: 0 3px 3px 0
    }

.left24 {
    width: 100%;
    float: left;
    padding-top: 5px
}

.table_choose {
    position: relative
}

.synchronous {
    position: relative
}

.synchronousspan {
    height: 18px;
    width: 18px;
    background: #fff;
    position: absolute;
    top: 5px;
    border-radius: 20px;
    right: 72px;
    line-height: 19px;
    text-align: center;
    border: 1px solid #ccc
}

.grocery .synchronousspan {
    right: 86px
}

.name-goods {
    height: 40px;
    overflow: inherit
}

.bx-controls {
    display: none
}

.bxslider {
    float: left
}

.bx-viewport {
    height: 142px !important
}

.logoOpen24 {
    float: left;
    width: 185px;
    padding-left: 5px;
    text-align: center
}

.tab-inner2 {
    float: left;
    padding-top: 5px
}

    .tab-inner2 ul li a {
        float: left;
        width: 117px;
        height: 32px;
        background: #fff;
        border-radius: 4px;
        padding: 0;
        margin-right: 3px;
        line-height: 30px;
        color: #000;
        font-weight: 700;
        text-align: center;
        font-size: 1rem;
        border: 1px solid #7c7878
    }

    .tab-inner2 .nav-tabs {
        border-bottom: none
    }

    .tab-inner2 .nav > li > a:hover {
        background: #fff;
        color: #000
    }

.note-out {
    position: relative
}

.tab-inner2 ul .active a {
    height: 35px;
    color: white !important;
    border: none !important;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background: var(--color-main) !important
}

.tab-inner2 ul a {
    color: #939598 !important
}

.bill-seach .form-control {
    height: 30px !important;
    padding-left: 30px
}

    .bill-seach .form-control:focus {
        outline: none
    }

.setup-left input[type='checkbox'] {
    display: none
}

.setup-cheack {
    width: 16px;
    height: 16px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: 0;
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    float: right;
    border: 1px solid var(--color-primary);
    border-radius: 3px;
}

    .setup-cheack.ac:after {
        content: '\2713 ';
        outline: none;
        font-size: 16px;
        font-weight: 700;
        text-align: center;
        color: #32b7b3 !important;
        position: absolute;
        top: -1px;
        left: 0;
        width: 13px;
        height: 13px
    }

.bill-bxslide ul li {
    float: left;
    list-style: none;
    position: relative;
    width: 90px;
    line-height: 30px;
    font-weight: 700;
    height: 30px;
    color: #939598;
    border: 1px solid #7c7878
}

.controls-next {
    position: absolute;
    top: 7px
}

    .controls-next a {
        width: 13px;
        height: 30px;
        padding-top: 5px;
        text-align: center;
        border-radius: 2px;
        margin-top: -19px;
        position: absolute;
        color: #000;
        font-size: 26px;
        top: 14px
    }

    .controls-next .bx-prev {
        left: -21px
    }

.table-wh .red {
    padding-right: 5px
}

.table-wh {
    float: left
}

.tenhang .dropdown {
    display: inline-block;
    padding: 0 7px
}

.close-goods {
    display: none
}

.green {
    color: #32b7b3;
    padding-left: 5px;
    font-size: 1rem
}

.ketchen .tab-content {
    background: #fff;
    height: 100%
}

.ketchen .nav-tabs > li > a {
    border-radius: 0;
    background: #fff;
    margin-right: 3px
}

.ketchen .nav-tabs {
    border-bottom: none
}

    .ketchen .nav-tabs .active a, .ketchen .nav-tabs a {
        color: #000
    }

    .ketchen .nav-tabs .active a {
        position: relative;
        display: block;
        padding: 13px 15px
    }

#wait-kitchent table {
    margin-bottom: 10px !important
}

.name-wait span {
    font-size: 1rem
}

.w49-l .controls td img {
    height: 62px
}

.footer-bill .table {
    width: 325px;
    float: left;
    margin-bottom: 0
}

.footer-bill .table-reponsive td {
    padding: 8px 0
}

.prev-ketchen {
    padding: 0
}

.date-one {
    padding-top: 10px;
    padding-left: 5px;
    width: 74%;
    float: left;
    overflow: hidden;
    height: 80%
}

    .date-one div {
        width: 100%;
        height: 18px;
        overflow: hidden;
        padding-bottom: 2px
    }

        .date-one div a {
            color: #808285
        }

.p01 .price-pay {
    width: 140px;
    float: right;
    margin-top: 3px
}

.text-blu {
    color: var(--color-primary);
    font-size: 13px
}

.amt {
    line-height: 10px;
    font-size: 1rem;
    color: #818286;
    position: relative
}

.bg-7 {
    background: #f2f2f2
}

.activeBlue {
    color: #0681ad !important
}

.handling-kitchen .dropdown-menu {
    background: var(--color-main);
    width: 250px;
    top: 38px;
    border-radius: 0;
    right: 0;
    left: auto
}

    .handling-kitchen .dropdown-menu li {
        width: 100%;
        padding-left: 0
    }

.event-date {
    position: absolute;
    bottom: 0;
    padding-left: 43%;
    cursor: pointer;
    color: #337ab7
}

#cal-slide-content {
    background: #f3efef !important
}

.today {
    outline: none
}

.w701 {
    margin-right: 400px;
    position: relative
}

.w301 {
    float: right;
    width: 400px;
    position: relative;
    border-left: 10px solid rgb(235,235,235)
}

.bill-header .w301 {
    box-shadow: 5px 0 5px 1px #ccc
}

.grocery .pen-note {
    float: left
}

.grocery .bill-seach {
    width: 280px
}

.box-barcode {
    float: left;
    padding-left: 12px;
    padding-right: 15px;
    font-size: 39px;
    padding-top: 9px
}

.grocery .bill-bxslide {
    width: 550px !important;
    position: absolute;
    right: 0
}

.w701 .bx-next {
    right: -515px !important
}

.w701 .bill-bxslide ul li span {
    color: #939598;
    position: absolute;
    top: 0;
    right: 0;
    font-size: 16px;
    padding: 6px
}

.w701 .bill-bxslide ul .using span {
    color: #fff
}

.name-bill1 span, .name-bill2 span {
    padding-left: 5px;
    padding-right: 42px
}

.bill-header input {
    border: 1px solid #7c7878 !important
}

.height-fix {
    height: calc(100% - 40px);
    background: #fff;
    float: left;
    width: 100%;
    position: relative;
    overflow: hidden
}

.paddingtop5 .height-fix {
    height: calc(100% - 40px)
}

.grocery .bill-seach span {
    top: 15px
}

.grocery .logoOpen24 {
    margin-left: 0
}

.grocery .bill-listchoose li {
    width: 100%;
    float: left;
    padding: 0 5px 0 5px;
    border-bottom: 1px solid #ccc;
    font-size: 1rem
}

.grocery .inner-listchoose {
    margin-top: 6px;
    width: calc(100% - 210px);
    float: left
}

.label-title {
    font-weight: 700;
    font-size: 13px
}

.grocery .bill-listchoose ul li:nth-child(odd) .munber-bill, .grocery .bill-listchoose ul li:nth-child(odd), .grocery .bill-listchoose ul li:nth-child(odd) .note-out input, .grocery .bill-listchoose ul li:nth-child(odd) .price-fist.newprice {
    background: #fff
}
/*.grocery li:hover .list-price input, .grocery li:hover .list-totle-price input, .grocery li:hover .munber-bill, .grocery li:hover .note-out input, .grocery .bill-listchoose li:hover, .grocery .bill-listchoose li:hover .price-fist, .grocery .bill-listchoose ul li:nth-child(odd):hover, .grocery .bill-listchoose li:hover .price-fist, .grocery .bill-listchoose ul li:nth-child(odd):hover .note-out input {
        background: #c6eaec !important
    }*/
.detail-user {
    padding-top: 15px;
    padding-bottom: 15px
}

.bill-number {
    float: left
}

.bill-number {
    text-align: center;
    float: left;
    margin-top: 18px;
    padding-right: 10px;
    width: 28px
}

.select-user2 {
    top: 45px
}

.slide-goods {
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
    height: 340px;
    background: #ebebeb
}

.main-slide {
    height: 25px;
    line-height: 25px
}

    .main-slide a {
        padding-top: 8px;
        float: left;
        padding-right: 10px;
        outline: none;
        color: var(--color-button-hover)
    }

.main-slideleft {
    float: left;
    padding-left: 30px
}

.main-slideright {
    float: right;
    font-size: 1rem;
    padding-right: 30px
}

    .main-slideright span {
        float: left;
        padding-right: 10px;
        color: #000;
        line-height: 28px
    }

    .main-slideright div {
        color: #fff;
        float: left
    }

.up-slide {
    position: absolute;
    left: 50%;
    top: -12px;
    font-size: 36px;
    color: black !important
}

    .up-slide i {
        color: black !important
    }

.grocery .bill-listmenu li {
    width: 13.5%;
    margin: 0 4px 10px 4px;
    background: #fff
}

.grocery .bill-listmenu {
    padding: 10px 28px 0 30px;
    height: 370px;
    overflow: hidden
}

.up1-sli {
    display: none
}

.sli-gos {
    bottom: -315px
}

    .sli-gos .up-slide {
        top: -8px
    }

.ptop2 {
    padding-top: 8px
}

.divLstHoaDon span {
    margin-right: 2px;
    position: relative
}

    .divLstHoaDon span .fa-times {
        position: absolute;
        top: 3px;
        right: 4px
    }

.divLstHoaDon .table-time a {
    height: 32px;
    float: left;
    width: 100px;
    margin-right: 2px;
    padding: 0px !important;
    padding-left: 9px !important;
    position: relative
}

.munber-goods {
    height: 17px;
    float: left;
    width: 100%;
    font-size: 13px
}

.bill-content .nav-tabs > span.active > a {
    color: #000;
    border: none;
    text-decoration: none;
    height: 35px;
    background: #FFF;
    border-bottom: none;
    font-weight: 700;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: 4px solid #ff8b00
}

#infor .bx-next, .divLstHoaDon .bx-next {
    width: 13px;
    height: 30px;
    padding-top: 5px;
    text-align: center;
    border-radius: 2px;
    position: absolute;
    color: #fff;
    font-size: 21px;
    top: 3px;
    right: 40px !important
}

#infor .bx-next {
    right: 2px !important;
    top: 4px
}

#infor .nhomHH {
    float: left;
    background: var(--color-main) !important;
    height: 39px;
    width: 100%;
    overflow: hidden;
    padding-top: 3px;
    padding-left: 139px
}

#infor .bx-prev, .divLstHoaDon .bx-prev {
    width: 13px;
    height: 30px;
    padding-top: 5px;
    text-align: center;
    position: absolute;
    font-size: 21px;
    top: 4px;
    left: 120px;
    border-radius: 2px;
    color: #fff
}

.divLstHoaDon .bx-prev {
    left: 0
}

.divLstHoaDon a:hover {
    color: white !important
}

.divLstHoaDon .active a:hover .fa-times {
    color: black !important
}

.donate span a {
    height: 32px;
    float: left;
    margin-right: 2px;
    line-height: 32px;
    padding: 0px !important;
    padding-left: 14px !important;
    position: relative;
    padding-right: 15px !important
}

.bg10, .bg10 button {
    background: #d46acc;
    border: none
}

.divLstHoaDon {
    margin-right: 0;
    position: relative;
    overflow: hidden;
    height: 39px;
    background: var(--color-main);
    padding-top: 4px
}

.bill-infor {
    margin-right: 20px;
    position: relative;
    padding: 10px 0 0 10px
}

.bill-note-detal {
    float: left;
    padding-left: 7px;
    line-height: 20px;
    width: 400px;
    overflow: hidden
}

.border-left .modal-body .form-wrap {
    width: 68.5% !important
}

.pen-note {
    float: left
}

.bill-content .modal-body label {
    width: 135px !important
}

.arr1 {
    left: -250px
}

.r9 {
    right: -23px !important
}

.page2 {
    background: #fff
}

.bg-11, .bg-11 button {
    background: #58595b;
    border: none;
    outline: none;
}

.grocery .add-top {
    right: 5px;
    top: 11px
}

.grocery .bill-pluss {
    background: #fff;
    margin-right: 0;
    color: #666
}

.grocery .price-pay-end {
    background: white !important;
    outline: none;
    width: 88px;
    height: 36px;
    border-bottom: 1px solid white !important;
    margin-right: 4px
}

.add-top1 {
    width: 30px !important;
    text-align: center !important;
    padding-left: 0px !important
}

.grocery .bill-bxslide ul li {
    width: 100px;
    text-align: left;
    padding-left: 7px;
    color: #939598;
    border: 1px solid #7c7878
}

.border-top-none td {
    border-top: none !important
}

.sale-h {
    position: absolute;
    top: 20px;
    left: -16px;
    width: 80px;
    text-align: right
}

    .sale-h span {
        font-size: 11px
    }

.pos-r {
    position: relative
}

.pos-a {
    position: absolute;
    top: 19px;
    left: 26px;
    width: 90px;
    text-align: right
}

    .pos-a span {
        font-size: 1rem;
        line-height: 0
    }

.height99 {
    height: 93%
}

.op-filter-containermodal {
    margin-top: 10px;
    float: left;
    width: 100%
}

#modalPopuplgtrahangHD .op-filter-title {
    padding-left: 10px
}

.nhomHH span a {
    height: 32px;
    float: left;
    margin-right: 2px;
    line-height: 32px;
    padding: 0px !important;
    padding-left: 10px !important;
    position: relative;
    padding-right: 10px !important
}

.nhomHH .active a {
    color: #000;
    border: none;
    text-decoration: none;
    height: 50px;
    background: #d8daef;
    border-bottom: none
}

.pay-return {
    font-size: 15px
}

.pen-destroys {
    border: none;
    text-align: left !important;
    padding-left: 15px;
    border-radius: 0;
    outline: none
}

.note-destroys i {
    position: absolute;
    top: 0;
    left: 0;
    display: none
}

.note-destroys {
    position: relative
}

.table-reponsive tr:hover .note-destroys i {
    display: block
}

.destroys-number {
    width: 60px;
    height: 28px;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid #ccc;
    outline: none;
    padding: 0 4px;
}

.destroys-numberTR {
    width: 160px;
    height: 28px;
    border-radius: 4px;
    border: 1px solid #ccc;
    outline: none;
    padding: 0 4px
}

.num-plus:hover {
    background: #d6d6d6;
    border-radius: 15px;
}

.num-plus {
    background: none;
    text-align: center;
    color: #58595b;
    border-radius: 3px;
    padding: 6px 9px;
    text-align: center;
    line-height: 24px;
    height: 30px;
    padding: 3px 7px;
    width: 30px;
    transition: all 0.4s ease;
}

.table-destroys td {
    vertical-align: top !important
}

.tab-shipping .select-user {
    position: absolute;
    left: 0;
    top: 30px
}

.destroys-right .detail-infor label {
    width: 40%
}

.destroys-right .name-bill1 {
    margin-top: 0
}

.title-near {
    background: var(--color-table);
    margin: 0;
    margin-bottom: 0px;
    padding: 5px 10px;
    font-size: 15px;
    color: #333;
    font-weight: 700;
    line-height: 24px;
    margin-bottom: 5px;
}

.bill-pen ul {
    overflow: scroll;
    border: 1px solid #d7d7d7;
    border-top: none;
    padding: 5px;
    font-size: 1rem;
    max-height: 200px
}

.border-warehouse {
    margin-top: 0;
    margin-bottom: 20px;
    padding-bottom: 20px;
    padding-top: 10px;
    border: 1px solid #ccc;
    border-top: none
}

    .border-warehouse th {
        text-align: right
    }

.tab-deviation {
    display: none
}

.importgoods .number-price {
    width: 85px !important
}

.donate {
    border-bottom: none;
    overflow: hidden;
    background: var(--color-main);
    height: 39px;
    padding-top: 4px;
    padding-left: 139px
}

.border-left .nav-tabs {
    border-bottom: none
}

.tr-name-wait {
    width: 40%
}

.number-fast {
    float: left;
    padding-top: 0;
    width: auto;
    position: relative;
    display: none;
}

    .number-fast input {
        width: 100px;
        float: left
    }

.number-fast-banle {
    float: left;
    padding-top: 5px;
    position: relative;
    display: none
}

    .number-fast-banle input {
        width: 75px;
        font-style: italic;
        float: left;
        margin-left: 5px
    }

.text-fast {
    float: left;
    margin-left: 20px;
    width: 100px;
    height: 30px;
    border: 1px solid #ccc;
    border-radius: 4px;
    position: relative;
    line-height: 30px;
    padding-left: 10px
}

.fast-icon {
    position: absolute;
    right: 0;
    width: 20px;
    height: 30px;
    top: 5px
}

.import-fast {
    float: right;
    min-width: 30px;
    position: relative;
    margin: 3px;
    padding: 3px;
    width: auto;
    text-align: center;
    height: 30px;
    width: 30px;
    padding: 3px;
    margin: 0 5px;
}

.cke {
    width: 465px !important
}

.detail-warehouse th {
    background: #d6f1f0
}

.import-fast i {
    font-size: 21px;
    color: #6e6c6c;
    cursor: pointer
}

.destroys-right .name-bill1 {
    background: #32b7b3;
    color: #fff
}

.destroys-right .select-user2 {
    top: 32px;
    left: 0
}

.destroys-right .seach-bill {
    padding: 10px 0 0;
    position: relative
}

    .destroys-right .seach-bill i {
        position: absolute;
        top: 10px;
        color: #ccc;
        font-size: 15px;
        left: 2px
    }

.destroys-right .bill-total {
    padding: 0
}

.destroys-right .bill-pay {
    padding: 0
}

.destroys-right .bill-pen img {
    position: absolute;
    top: 0;
    left: 11px;
    font-size: 15px
}

.bg-bl1 {
    background: #27aae1
}

.munber-note {
    text-align: left;
    color: #a7a9ac
}

.bottom8 {
    margin-top: 8px
}

    .bottom8 label {
        margin: 0
    }

.padding15 {
    padding: 15px 20px
}

.magrin12 {
    margin-bottom: 17px !important;
    border-left: none
}

.ve-center td {
    vertical-align: middle !important
}

.padding20 {
    padding: 20px 0
}

.bill-infor .nav-tabs {
    height: 25px;
    border-bottom: 1px solid var(--color-primary)
}

.install-mobile {
    display: none
}

.main-install {
    float: right;
    width: 40px;
    text-align: center;
    line-height: 44px;
    font-size: 19px;
    display: none;
    color: #fff
}

.main-menu-chi-nhanh {
    width: 155px;
    float: left
}

.main-menu-mobile {
    width: 200px;
    float: right
}

.main-menu-chi-nhanh .selec-person {
    width: 200px !important;
    top: 48px
}

    .main-menu-chi-nhanh .selec-person ul {
        background: var(--color-main)
    }

        .main-menu-chi-nhanh .selec-person ul li a {
            color: white !important
        }

.mn-drop-chi-nhanh i {
    position: absolute;
    top: 18px;
    color: #fff;
    right: 0
}

.mn-drop-chi-nhanh {
    position: relative
}

    .mn-drop-chi-nhanh div {
        line-height: 50px;
        font-size: 1rem;
        float: right;
        padding-right: 15px;
        color: #fff
    }

.main-menu-chi-nhanh .selec-person ul.group-parent li {
    line-height: 20px;
    padding-top: 6px;
    padding-bottom: 6px;
    color: #fff
}

.border-none {
    border: none !important;
    outline: none
}

.ckeditor-header-table {
    font-weight: 700
}

.line-border-table {
    border-bottom: 1px dashed #000
}

.slide-bill.bill-listchoose ul li {
    float: left;
    width: 100%;
    margin: 0
}

.slide-bill.bill-listchoose {
    float: left;
    width: 100%;
    overflow: auto;
    height: auto
}

    .slide-bill.bill-listchoose ul li .bill-plus {
        color: #58595b
    }

    .slide-bill.bill-listchoose .bill-listmenu {
        padding: 0
    }

.seach-product .seachnumber {
    float: left;
    width: 70px;
    border: 1px solid #32b7b3;
    border-bottom: none;
    height: 35px;
    outline: none;
    padding-left: 10px;
    display: none
}

.seach-productinput input {
    float: left;
    width: 470px;
    margin-right: 15px;
    padding-left: 25px;
    border: 1px solid var(--color-primary);
    border-bottom: none;
    height: 35px;
    outline: none
}

.seach-productinput {
    position: relative
}

    .seach-productinput > i {
        position: absolute;
        left: 6px;
        top: 9px;
        font-size: 16px;
        color: #999
    }

.seach-product {
    padding: 0 25px;
    border-bottom: 1px solid #32b7b3
}

    .seach-product a .fa-barcode {
        padding-left: 10px;
        font-size: 22px
    }

.slide-bill.bill-listchoose .bill-listmenu li:hover img {
    transform: scale(1)
}

.w700 {
    width: 400px !important
}

.bill-total-th {
    margin-bottom: 1px
}

    .bill-total-th span {
        margin-bottom: -1px;
        color: #000;
        text-align: center;
        width: auto;
        font-size: 1rem;
        line-height: 28px;
        float: left;
        text-align: left;
        font-weight: 700
    }

.name-custumer span {
    padding-left: 20px
}

.name-custumer i {
    color: #000
}

.date-chang, .delivery {
    float: right;
    padding-right: 30px;
    line-height: 51px;
    position: relative
}

.money-face {
    font-size: 11px;
    font-weight: 400;
    line-height: 6px;
    bottom: -6px;
    position: absolute
}

.handling-kitchen ul li {
    padding-left: 0;
    width: 100%
}

.grocery .parent-price-1 {
    padding-right: 8px
}

.col-xs-2 .row span {
    line-height: 31px
}

.permission-left {
    border: 1px solid #bebfc0;
    border-radius: 3px;
    height: 470px
}

.chinhanh-vaitro {
    overflow: scroll;
    overflow-x: hidden;
    max-height: 385px;
    padding-left: 8px
}

.permission-title {
    background: #cdcdcd;
    color: #000;
    font-size: 16px;
    font-weight: 700;
    padding: 10px 15px;
    border-bottom: 1px solid #bebfc0
}

.permission-left ul li.act {
    font-weight: 700;
    background: #d3f3ff;
    background: #d3f3ff
}

.permission-left ul li {
    padding: 10px 15px;
    position: relative
}

.permission-right {
    padding-left: 30px
}

.permission-main span {
    float: left
}
/*.list-permission {
    float: left
}*/
.list-permission ul li ul {
    padding-left: 50px
}

.col3 {
    float: left;
    width: 33.33%;
    padding-top: 10px;
    padding-right: 10px
}

#modalContainerlg_EditVaiTro .col3, #modalContainerlg_VaiTro .col3 {
    width: 70% !important;
    padding-right: 0
}

.col3 h3 {
    font-size: 1rem;
    color: #000;
    margin: 0;
    background: #D6F1F0;
    line-height: 32px;
    padding-left: 10px;
    border-radius: 4px
}

.col3 ul li ul {
    padding-left: 15px;
    display: none
}

.col3 ul li {
    position: relative;
    margin-left: 9px;
    float: left;
    width: 100%
}

.permission-main .name-bill1 {
    height: 24px;
    margin-top: 0;
    line-height: 17px
}

    .permission-main .name-bill1 i {
        top: -1px
    }

.permission-right .select-user {
    left: 86px;
    top: 23px
}

.select-user {
    left: 3px;
    padding: 0;
    top: 43px;
    width: 178px
}

    .select-user li {
        line-height: 29px;
        padding-left: 11px;
        border-bottom: 1px dotted #ccc
    }

        .select-user li:last-child {
            border-bottom: none
        }

.permission-main a {
    font-size: 16px;
    color: #656565;
    margin-left: 15px;
    outline: none;
    text-decoration: none
}

.add-permission span {
    float: left;
    line-height: 30px;
    padding-right: 13px
}

.add-permission input {
    float: left;
    width: 367px
}

.permission2 .form-wrap {
    width: 73.1%
}

.pd-boto20p {
    padding-top: 20px
}

.more-permission .fa-caret-down {
    display: none;
    left: -4px;
    position: absolute;
    top: 5px
}

.trade-tabb {
    width: 18%;
    padding-top: 15px;
    float: left
}

    .trade-tabb li {
        position: relative;
        border: none
    }

    .trade-tabb li {
        height: 40px;
        margin-bottom: 10px
    }

        .trade-tabb li a {
            width: 100%;
            float: left;
            border-right: none;
            border-bottom: none;
            line-height: 40px;
            padding-left: 15px;
            position: relative;
            background: #e6e7e8;
            margin-bottom: 10px
        }

        .trade-tabb li a {
            color: #000;
            font-weight: 700;
            text-decoration: none
        }

.promotionkm .tab-content {
    float: left;
    width: 82% !important;
    padding: 10px 15px 5px 15px;
    margin-bottom: 18px;
    height: 370px
}

.trade-tabb li.active, .trade-tabb li.active a {
    border-right: none;
    border-bottom: none;
    background: #fff
}

    .trade-tabb li.active a {
        color: #32b7b3 !important
    }

.trade-tabb > li > a:hover {
    border: none;
    text-decoration: none
}

.trade-tabb li span {
    height: 40px;
    width: 10px;
    float: left;
    position: absolute;
    right: -10px;
    background: #fff;
    font-size: 17px;
    display: none;
    top: 9px
}

.trade-tabb li.active span {
    display: block
}

.datepicker table tr td.new, .datepicker table tr td.active {
    height: 25px;
    width: 25px
}

.bootstrap-datetimepicker-widget table td.today:before {
    display: none !important
}

.bootstrap-datetimepicker-widget table th {
    background: #fff
}

.bootstrap-datetimepicker-widget a[data-action] {
    color: #337ab7 !important
}

.bootstrap-datetimepicker-widget table td.day {
    height: 30px !important;
    line-height: 20px !important;
    width: 33px !important
}

.leftauto {
    float: left;
    position: relative
}

    .leftauto label {
        line-height: 42px !important;
        width: auto
    }

    .leftauto .list-name-staff {
        margin-top: 0
    }

    .leftauto .select-user li {
        line-height: 36px
    }

    .leftauto .name-bill1 i {
        color: #949292;
        font-size: 16px;
        top: 8px;
        padding-right: 8px
    }

    .leftauto .name-bill1 {
        border: 1px solid #ccc;
        margin: 5px;
        border-radius: 3px
    }

    .leftauto .select-user {
        left: -1px;
        top: 30px
    }

.totalmoney span {
    float: left;
    line-height: 33px;
    width: 27px
}

.totalmoney input {
    float: left;
    width: 96px
}

.totalmoney {
    width: 148px
}

    .totalmoney .toogle {
        float: left;
        width: 70px;
        margin-left: 10px;
        height: 29px
    }

        .totalmoney .toogle:before {
            width: 29px;
            height: 29px;
            background: #32b7b3;
            border-radius: 15px;
            top: -1px;
            left: -1px
        }

    .totalmoney .poison {
        left: 2px;
        line-height: 30px;
        font-size: 11px;
        color: #fff
    }

    .totalmoney .transverse {
        color: #fff;
        right: -10px;
        line-height: 29px
    }

    .totalmoney .active-re:before {
        left: 42px
    }

.totalmoney1 {
    width: 210px
}

.promotionkm .form-wrap label {
    width: 98px;
    font-weight: 400
}

.table-reducedhh span {
    width: auto;
    float: left;
    margin-right: 3px;
    position: relative;
    line-height: 30px
}

    .table-reducedhh span input {
        width: 50px
    }

.tanghang span input {
    width: 100px
}

.table-reducedhh .number-reduced {
    /*width: 150px*/
}

.munber-bought .floatleft {
    padding-bottom: 10px
}

.modal-lgg {
    width: 960px;
    margin: 30px auto
}

.table-reducedhh span img {
    position: absolute;
    right: 7px;
    top: 7px;
    background: #fff;
    padding-left: 6px
}

.vnd2 .transverse {
    right: -12px;
    width: 26px;
    text-align: center
}

.seach-hhchoose input {
    border: none;
    border-bottom: 1px solid #3eb7b3;
    width: 100%;
    outline: none;
    padding-left: 20px
}

.container input:checked ~ .checkmark {
    background: #2196F3
}

.seach-hhchoose {
    position: relative
}

    .seach-hhchoose i {
        position: absolute;
        top: -2px;
        font-size: 15px;
        color: #666
    }

.list-choose ul li {
    position: relative;
    width: 100%;
    float: left;
    border-bottom: 1px solid #ccc
}

.ma20 {
    margin: 20px 0 20px 0
}

.list-choose ul li ul {
    padding-left: 20px;
    display: none
}

    .list-choose ul li ul li:last-child {
        border-bottom: none
    }

.tongg-pm {
    position: absolute;
    right: 0;
    line-height: 30px;
    width: 24px;
    text-align: center
}

    .tongg-pm .fa-minus {
        display: none
    }

.vnd2 .toogle {
    width: 64px;
    height: 28px;
    position: relative
}

    .vnd2 .toogle:before {
        width: 28px;
        height: 28px;
        background: #32b7b3;
        top: -1px;
        left: -1px
    }

.vnd2 .poison {
    left: 1px;
    line-height: 28px;
    color: #fff
}

.transverse {
    right: -46px;
    line-height: 28px;
    color: #fff
}

.vnd2 .active-re:before {
    left: 36px
}

.goods-click i, .bill-click i {
    display: none !important
}

.checkicon i {
    display: block !important
}

.text-unit {
    font-size: 1rem;
    font-weight: 400;
    text-transform: capitalize;
    position: absolute;
    bottom: 30px;
    right: 0
}

.highcharts-label {
    text-align: center
}

.w100 {
    width: 100px !important;
    min-width: 100px !important
}

.ver-top {
    vertical-align: top;
    padding: 10px !important
}

.munber-bought {
    padding: 7px 0;
    border-bottom: 1px dotted #ccc
}

.fl {
    float: left
}

    .fl input {
        width: 100px;
        float: left
    }

.w150 {
    width: 150px !important
}

.fl1 label {
    padding-left: 15px
}

.fs14 {
    line-height: 30px
}

.promotion-drop .choose-person li {
    float: left;
    padding: 0 10px
}

.table_price {
    max-height: 520px;
    text-transform: capitalize;
    overflow-y: visible
}

.w301 .select-user ul {
    margin: 12px 12px 0 0
}

.permission-main span {
    line-height: 30px;
    padding-left: 20px
}

.permission-main {
    padding-bottom: 30px
}

.highcharts-stack-labels text {
    width: 30px !important;
    text-align: left !important
}

.grocery .bill-listchoose .bill-pen input {
    border: none
}

.paylip label {
    width: 120px
}

.establish-left {
    float: left;
    width: 190px;
    border-bottom: none;
    margin-top: 10px
}

.establish-right {
    float: left;
    width: calc(100% - 190px);
    border-bottom: none
}

.establish-left li {
    border: 1px solid #ccc;
    width: 100%;
    margin-bottom: 10px;
    border-radius: 3px;
    position: relative
}

    .establish-left > li > a, .establish-left li > a:hover {
        border: none !important;
        margin-right: 0;
        border-radius: 0;
        color: #000
    }

.establish-left .nav-tabs > li.active > a, .establish-left .nav-tabs > li.active > a:hover, .establish-left > li.active > a {
    width: 100%;
    background: #999 !important;
    margin-right: 0;
    color: white !important
}

.establish-right label {
    color: #000
}

.wp-st-logo img {
    width: 170px;
    height: 190px
}

.symptoms {
    border-top: 1px solid #ccc
}

    .symptoms #hinhthuc thead {
        line-height: 30px
    }

        .symptoms #hinhthuc thead th {
            padding: 6px
        }

    .symptoms #hinhthuc tbody {
        border-bottom: none
    }

.bg-white {
    background: #1b9b94;
    border: 1px solid #ccc;
    border-radius: 4px;
    line-height: 30px;
    padding: 0 11px
}

#hinhthuc tr td {
    padding: 6px
}

.bg-white:hover {
    background: #32b7b3
}

.fl1 a {
    line-height: 29px
}

.promotion-drop .selec-person {
    max-height: 230px;
    overflow: scroll;
    overflow-x: hidden
}

.op-filter .selec-person {
    max-height: 231px;
    width: 100%;
    overflow-x: hidden
}

.form-wrap .fa-times {
    position: relative
}

.promotion-drop #selec-person {
    background: #fff;
    position: absolute
}

    .promotion-drop #selec-person li {
        line-height: 33px;
        border-bottom: 1px solid #e0dede;
        position: relative
    }

        .promotion-drop #selec-person li .fa-check {
            top: 8px;
            display: none
        }

#phamviapdung label {
    font-weight: 400
}

.promotion-drop #selec-person li:last-child {
    border-bottom: none
}

.icon-es span:before {
    color: #6d6e71
}

#hinhthuc .add-condition tbody {
    border-top: none !important
}

.table-option td, .add-condition tbody td {
    border: none
}

.checkdram ul a {
    color: black !important
}

.checkdram ul {
    left: 60px
}

    .checkdram ul i {
        float: right;
        color: #009ddc;
        display: none
    }

.grocery .p01 input {
    border-bottom: none !important;
    padding-right: 9px
}

.slide-goods2 li {
    overflow: auto
}

.inner-w30 .bill-pay input {
    padding-left: 27px
}

.list-totle-price {
    float: left;
    width: 120px;
    height: 30px;
    line-height: 33px;
    text-align: right;
}

.list-munber-edit {
    float: left;
    width: 155px
}

.list-nameproduct {
    width: calc(100% - 570px);
    float: left;
    margin-top: 12px
}

.list-sale {
    width: 101px;
    line-height: 33px;
    text-align: right
}

.bill-name-list2 {
    width: calc(100% - 308px)
}

.w121 {
    width: 121px
}

.w80 {
    width: 65px;
    position: relative
}

.bold span {
    line-height: 25px
}

#khuyenmaip .modal-body .topt label {
    width: 167px !important
}

#khuyenmaip .modal-body .topt span label {
    width: auto !important
}

#khuyenmaip .form-wrap span {
    float: left
}

#khuyenmaip .modal-body .topt .form-group input[type=text] {
    border: none;
    border-bottom: 1px solid #ccc;
    height: 23px;
    width: 100%;
    outline: none
}

.topt textarea {
    border: none;
    border-bottom: 1px solid #ccc;
    outline: none;
    border-radius: 0
}

.topt .form-wrap {
    width: 65% !important
}

.border {
    overflow: scroll;
    border: 1px solid #ccc;
    max-height: 198px
}

.border-noscroll {
    max-height: 198px
}

.slide-goods2 .list-nameproduct {
    text-align: left
}

#login {
    margin: 0
}

.destroys-right .bill-pen input {
    padding-left: 33px
}

.pading25 {
    padding-right: 25px
}

.SelectID_NhomHang input::after {
    color: #32b7b3;
    height: 10px;
    width: 10px;
    background: #32b7b3;
    border-radius: 10px;
    line-height: 11px;
    margin-right: 2px
}

.save-print {
    margin-top: 50px
}

.out-print {
    border: 1px solid #ccc;
    margin-left: 15px
}

    .out-print .btn-green {
        margin: 30px 0 20px 5px;
        float: right
    }

.establish-left li a span:before {
    color: #000;
    padding-right: 5px
}

.establish-left .active a span:before {
    color: #fff
}

.print-view .icon-IconMauinn-03 {
    font-size: 9px
}

.acv {
    display: none !important
}

.bill-returns {
    text-align: right;
    line-height: 30px
}

.icon-user-blue {
    font-size: 18px;
    line-height: 47px;
    color: #00a69c
}

.form-group .toogle-report, .callprice .toogle-report, .arrow-left1 .toogle-report {
    margin-left: 5px;
    height: 30px
}

.form-group .toogle:before, .callprice .toogle:before, .arrow-left1 .toogle:before {
    width: 30px;
    height: 30px;
    top: 0;
    transition: left 0.2s ease;
    margin-top: 0;
    background: var(--color-main);
    left: -1px
}

.form-group .poison, .callprice .poison, .arrow-left1 .poison {
    left: 3px;
    font-size: 10px !important;
    font-weight: 400;
    color: #fff;
    line-height: 32px !important
}

.form-group .active-re:before, .callprice .active-re:before, .arrow-left1 .active-re:before {
    left: 31px
}

.form-group .transverse, .callprice .transverse, .arrow-left1 .transverse {
    right: -46px;
    line-height: 28px;
    color: #fff;
    line-height: 33px !important;
    font-size: 11px !important
}

.form-group .transverse, .callprice .transverse {
    right: 9px
}

.w90 {
    width: 90px !important
}

.w700 {
    width: 70px !important
}

.choose-date {
    position: relative
}

.poison .fa-plus {
    padding-left: 7px
}

.name-menu a {
    color: white !important
}

.bg12 {
    background: #e3e4e8
}

.img-expire {
    width: 739px;
    margin: auto;
    position: relative;
    padding-top: 90px
}

.pa10 {
    padding-right: 11px
}

.list-file li {
    padding-left: 10px;
    background: rgba(0,0,0,0.05);
    border: 1px solid var(--color-primary) !important;
    line-height: 24px;
    border-radius: 3px;
    padding: 3px 7px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}

.delete-file {
    float: right;
    line-height: 32px;
    padding-right: 10px
}

.table_error {
    max-height: 230px;
    overflow: scroll
}

.excel-file .btn-file, #myModalinport .btn-file {
    color: #fff;
    padding: 15px 15px;
    border-radius: 2px
}

.file-all input {
    color: #fff;
    border-radius: 2px
}

.continue-hh {
    margin: 0
}

.main-warning i {
    line-height: 30px
}

.content-warning {
    min-width: 200px;
    border: 1px solid #32b7b3;
    z-index: 10004;
    padding: 6px 14px;
    background: #fff;
    top: 4px;
    margin-top: -4px;
    margin-left: 27px;
    display: none;
    position: absolute;
    right: 31px
}

    .content-warning:before {
        border-left: 6px solid #32b7b3;
        border-top: 7px solid transparent;
        border-bottom: 7px solid transparent;
        margin-top: 0;
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        right: -6px
    }

.warning {
    position: relative;
    cursor: pointer;
    width: 20px;
    height: 30px;
    display: none;
}

.middle {
    vertical-align: middle !important;
    text-align: center
}

.title-print-invoice {
    text-align: center;
    font-size: 17px
}

.td-header-print {
    text-align: center;
    vertical-align: central
}

.op-filter .seach-nhomhang {
    position: relative;
    margin-bottom: 3px
}

.seach-nhomhang {
    position: relative
}

    .seach-nhomhang input {
        border: none;
        border-bottom: 1px solid #ccc;
        width: 100%;
        outline: none;
        height: 30px;
        padding-left: 15px
    }

#lblHoaDon li {
    float: left;
    padding: 7px 27px;
    color: #fff;
    font-size: 1rem;
    margin-right: 3px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px
}

    #lblHoaDon li.active {
        border-bottom: 2px solid var(--color-primary);
        padding: 7.5px 27px;
        background: #fff
    }

        #lblHoaDon li.active a {
            color: var(--color-primary) !important
        }

.ma10 {
    margin-right: -5px
}

.img-customer img {
    width: 100%;
    height: 100%
}

.img-item {
    width: 100%;
    min-height: 95px;
    float: left;
}

.img-list-c li .fa-close, .img-customer .fa-close {
    position: absolute;
    right: 0;
    top: 4px;
    width: 22px;
    text-align: center;
    display: none
}

ul.bxslider {
    height: 142px !important;
    float: left
}

.img-customer {
    position: relative;
    border: 1px dotted #ccc;
    height: 150px;
}

    .img-list-c li:hover i, .img-customer:hover i {
        display: block
    }

.img-list-c li {
    position: relative;
    width: 50%;
    margin-right: 0;
    padding: 5px;
}

.bg17 {
    background: #b6e2fd !important
}

.bg18 {
    background: #ecc486 !important
}

.bg20 {
    background: #b5efab !important
}

.bg21 {
    background: #bfbfbf !important
}

.groupi .fa-chevron-circle-up {
    display: block
}

.groupi .fa-chevron-circle-down {
    display: none
}

.form-select-button select {
    width: calc(100% - 40px);
    border-radius: 0;
    float: left
}

.form-select-button button {
    float: left;
    width: 40px;
    border-radius: 0
}

.tab-detail-table-sms {
    border-top: 1px solid #cccc;
    margin: 15px
}

.sms-right {
    border-left: 1px solid #cccc
}

    .sms-right .fl {
        padding: 0 0 15px 0
    }

table tr table tr {
    border-bottom: 1px solid #d1d2d9
}

.table-reponsive tbody tr:hover td table tr td {
    background: none
}

.table-reponsive tbody tr:hover .bg-gray {
    background: #e6e6e6
}

.warning span {
    line-height: 32px
}

@-moz-document url-prefix() {
    .footer-bill {
        height: 203px;
        bottom: 0;
        right: 0px !important;
        color: #333;
        width: 100%;
        z-index: 10;
        padding-left: 30px;
        padding-top: 4px;
        background: #ebeef7;
        position: fixed;
        bottom: 0;
        width: 550px;
        left: auto
    }

    .border-left {
        border-left: 2px solid #fff
    }

    .height-fix {
        height: 94%
    }
}

.tr-hide {
    display: none
}

.blocktr {
    display: table-row !important
}

.w30px {
    width: 30px !important
}

.outselect {
    float: left;
    width: 100%;
    position: relative
}

.img-item img {
    width: 100%;
    height: 100%
}

.plus-tr .fa-minus {
    display: none
}

.img-list-product li {
    width: 60px;
    height: 45px;
    padding-right: 10px !important
}

    .img-list-product li img {
        width: 100%;
        height: 100%
    }

.img-list-product {
    float: left;
    width: 90%;
    position: relative
}

.notify-banhang div {
    float: left;
    margin-right: 20px
}

.nextlistimg {
    position: absolute;
    right: 0;
    top: 8px;
    height: 30px;
    width: 30px;
    line-height: 30px;
    text-align: center
}

.prevlistimg {
    position: absolute;
    left: -22px;
    top: 8px;
    height: 30px;
    width: 30px;
    line-height: 30px;
    text-align: center
}

.model-images {
    z-index: 999999999999;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
    width: 480px;
    height: 360px;
    margin: 50px auto;
    overflow-y: hidden;
    background: #fff;
    display: none;
    border: 2px solid #fff;
    border-radius: 4px
}

    .model-images a {
        position: absolute;
        bottom: 0px !important;
        height: 30px;
        width: 30px;
        line-height: 30px;
        text-align: center;
        background: rgba(0,0,0,.5);
        color: #fff
    }

    .model-images .nextlistimg1 {
        right: 0;
        bottom: 0px !important
    }

    .model-images .prevlistimg1 {
        left: 0;
        bottom: 0px !important
    }

.deletelistimg {
    top: 0;
    right: 0
}

.model-imagesinner, .model-imagesinner img {
    width: 100%;
    height: 100%
}

.innerplus-tr {
    padding-right: 15px;
    float: left
}

.group-sum-total {
    padding: 0 15px
}

.frames-content .table-reponsive {
    width: 250px;
    float: left
}

.height-30 {
    height: 30px;
    line-height: 30px
}

.liheight-30 {
    line-height: 30px !important
}

.right-content-infor label {
    float: left;
    min-width: 31.5%;
    line-height: 30px
}

.right-content-infor select, .right-content-infor textarea {
    font-size: 1rem;
    float: left;
    min-width: 68.5%
}

.right-content-infor .btn-control button, .right-content-infor .btn-control {
    height: 72px
}

.frames-content {
    position: fixed;
    bottom: 0;
    width: 430px;
    padding-bottom: 34px;
    background: #fff
}

.seach-company {
    position: absolute;
    top: 30px;
    left: 0;
    width: 100%;
    background: #fff;
    max-height: 150px;
    z-index: 9;
    border: 1px solid #ccc;
    border-top: none;
    display: none
}

    .seach-company li {
        line-height: 30px;
        cursor: pointer;
        padding: 0 10px
    }

    .seach-company input {
        height: 30px;
        outline: none;
        border-radius: 3px;
        border: 1px solid #ccc;
        border-top: none;
        border-left: none;
        border-right: none;
        padding-left: 26px
    }

    .seach-company ul {
        max-height: 89px;
        min-height: 45px;
        float: left;
        width: 100%;
        overflow: scroll;
        background: #fff
    }

        .seach-company ul li i {
            color: #009ddc
        }

        .seach-company ul li a {
            color: #000;
            text-decoration: none
        }

        .seach-company ul li:hover {
            background: #e6f5d6
        }

.w560 {
    width: calc(100% - 400px);
    float: left;
    padding-left: 20px;
    padding-right: 15px
}

.cargo {
    height: calc(100% - 48px);
    float: left
}

.frames-content table tr td {
    padding: 4px
}

.matop20 {
    margin: 20px 0 10px 0
}

.op2 a {
    width: 100%;
    height: 61px;
    line-height: 49px;
    text-align: center;
    float: left
}

.height60 {
    height: calc(100vh - 100px);
    display: flex;
    flex-direction: row;
}

.pinbut0 {
    padding-bottom: 0
}

.pa2020 {
    padding: 20px 0 0 0
}

.padding33 {
    padding-left: 45px !important;
    color: #06339c
}

.color_text {
    color: #06339c
}

.datail-TH {
    position: absolute;
    right: 34px;
    top: 8px;
    display: none
}

.w60px {
    width: 60px;
    margin-right: 10px;
    float: left
}

.r0 .fa-info-circle {
    right: -18px
}

.top15 {
    top: -15px
}

.r0 .materiall {
    left: 24px
}

.top15 .materiall {
    top: 1px;
    left: 38px
}

.accumulating label {
    width: 230px
}

.accumulating .form-wrap {
    width: calc(100% - 230px)
}

.w140 {
    width: 140px;
    float: left;
    position: relative
}

.w40 {
    width: 30px;
    float: left;
    text-align: center
}

.w180 {
    width: 280px;
    float: left
}

.p10 {
    padding-left: 10px
}

.li-input-span {
    background: var(--table-footer);
    color: #333;
    line-height: 30px;
    text-align: left;
    width: auto !important;
    padding: 0 10px;
    margin: 1px 0 1px 1px
}

.ctyvnd {
    position: absolute !important;
    right: 0;
    top: 0;
    display: inline-block;
    color: #fff;
    font-size: 11px;
    text-align: center;
    line-height: 30px !important;
    background: #2e94da;
    height: 30px;
    padding: 0 6px;
    border-radius: 0 3px 3px 0;
    padding-right: 6px !important
}

.bg19 {
    background: #e68638 !important
}

.table_BanHang .tr-hide .eight {
    padding: 0px !important;
    border: none
}

    .table_BanHang .tr-hide .eight table {
        border: none !important
    }

.w20p {
    width: 20% !important
}

.w10p {
    width: 10% !important
}

.w180 .selec-person li .fa-check {
    top: 0
}

.table-HH table tr th, .table-HH td, .table-HH table tbody td {
    padding: 7px
}

.attribute tr td {
    border-top: none
}

.attribute-select .selec-person {
    width: 100%
}

.seach-xh input {
    padding-left: 19px
}

.seach-xh .fa-search {
    position: absolute;
    left: 5px;
    top: 10px
}

.excel-file {
    text-align: center;
    padding-top: 40px;
    position: relative;
    padding: 15px calc(50% - 200px);
}

.choose-file {
    margin: auto;
    padding-top: 10px;
    position: relative
}

.btn-file {
    width: 100%;
    max-width: 200px;
    position: relative;
    margin: 10px auto;
}

.padingbottom25 {
    padding-top: 40px;
    padding-bottom: 20px
}

.padingbottom {
    padding-bottom: 15px
}

.list-errorfile {
    text-align: left;
    max-height: 300px;
    overflow: auto;
    color: red;
    padding-bottom: 15px
}

.error-import ul li {
    padding-bottom: 15px
}

.delete-file .fa-refresh {
    display: none
}

.date-chang input {
    position: absolute;
    right: 0;
    top: 5px
}

#modalpopup_deleteThuocTinh, #modalThemThuocTinh {
    padding-top: 18%
}

#modalContainer_delete .modal-content {
    z-index: 99999999 !important
}

label {
    position: relative
}

.td-date {
    border: 1px solid #ccc
}

.apdung {
    border: 1px solid #4bac4d;
    padding: 15px 15px 15px 0;
    background: #fff;
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
    z-index: 99999999999;
    position: absolute;
    width: 100%;
    top: 36px;
    display: none
}

    .apdung:before {
        border-bottom: 6px solid #4bac4d;
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        top: -6px;
        content: '';
        position: absolute
    }

#modalPopupLapPhieuThu .detail-content .form-group {
    border-bottom: none
}

.seach-name {
    height: 30px;
    border-bottom: 1px solid #ccc;
    line-height: 35px;
    margin-bottom: 15px
}

    .seach-name .pull-right {
        padding-top: 7px
    }

    .seach-name i {
        color: #999;
        padding-right: 10px
    }

.computer label {
    width: 120px;
    float: left;
    height: 30px;
    line-height: 38px
}

.computer #computer-gg, .computer #computer_newPrice {
    width: 50%;
    float: left;
    height: 30px;
    line-height: 38px;
    text-align: right !important
}

.computer .price-reduce {
    margin-left: 120px;
    height: 30px;
    line-height: 30px;
    text-align: right
}

.computer input.price-reduce {
    width: 50% !important
}

.main-munber {
    background: #ededed;
    height: 306px;
    float: left;
    width: 100%
}

.main-munbertop {
    padding-left: 5px;
    height: 60px
}

.munber-night {
    padding: 5px 5px 0 0;
    float: left;
    width: 33.33333333%
}

    .munber-night button {
        border: none;
        background: #fcfcfc;
        width: 100%;
        min-height: 55px;
        font-size: 24px;
        outline: none
    }

.computer .modal-content, .computer .modal-body {
    border-radius: 5px
}

.name-product1 {
    line-height: 20px;
    padding-left: 87px;
    text-align: right
}

    .name-product1 .form-control {
        margin-top: 4px
    }

.form-icon-input img {
    top: 0;
    left: 0;
    right: 0
}

.op-js-tr-hide1 .op-object-detail {
    border: none;
    margin: -8px
}

.same-product {
    padding: 0 0 15px 15px
}

.PrintBarcode1 .printablediv-page {
    width: 120px
}

.PrintBarcode2 {
    width: 328px
}

    .PrintBarcode2 #printablediv {
        width: 50%
    }

.PrintBarcode4 {
    min-height: 1800px !important;
    width: 665px
}

.bggray {
    background: #f9f9f9
}

.selec-person.dropdown-menu li a {
    color: black !important
}

.selec-personTR.dropdown-menu li a {
    color: black !important
}

.height60 .selec-person {
    max-height: 300px;
    overflow-x: hidden;
    overflow: scroll
}

.code-sp {
    float: left;
    width: 120px
}

.name-promotiont {
    width: calc(100% - 326px);
    float: left
}

.list-promotiont {
    margin-top: 12px;
    padding-bottom: 12px;
    border-bottom: 1px dotted #ccc
}

    .list-promotiont .bill-de {
        margin-top: 8px
    }

.bg-pink {
    color: #fd6367
}

.bor-top {
    border-top: 1px dotted #ccc;
    padding: 7px 0
}

.list-munber-edit.text-right {
    line-height: 30px
}

.indebt {
    line-height: 34px;
    padding-left: 20px
}

.w200 {
    float: left;
    width: 235px;
    padding-right: 8px
}

.w95 {
    float: left;
    width: 100px;
    padding-right: 8px
}

.w170 {
    float: left;
    width: 240px
}

#listgroupkm .list-choose {
    max-height: 350px;
    overflow: scroll
}

#ui-id-1 {
    width: 300px
}

.close-fillter .kv2Btn {
    padding: 0 20px;
    line-height: 32px;
    height: 32px;
    background: #32b7b3;
    border-radius: 2px;
    border: none;
    color: #fff;
    font-size: 1rem;
    font-weight: 700
}

.footer-res1 .btn-green img {
    height: 17px
}

.print-top {
    padding: 10px;
    text-align: center
}

.name-bill-hh {
    top: 0;
    right: 0;
    background: #ebebeb;
    position: absolute;
    padding: 2px 5px;
    border-radius: 3px
}

.code-hh {
    width: 120px;
    float: left;
    margin-top: 18px;
    font-weight: 700
}

.bordertop {
    border-top: 1px solid #ccc;
    margin: 0 5%;
    width: 90%;
    float: left;
    padding: 30px 0 14px 0;
    margin-top: 15px
}

.datademo {
    font-size: 15px
}

.paddibot15 {
    padding-bottom: 10px
}

.datademo .modal-title img {
    margin-top: -9px
}

#modalPopupLapPhieuThu .money-face {
    bottom: -11px
}

#ho .bill-listmenu li {
    height: 140px;
    border: 1px solid #ccc;
    border-radius: 4px
}

.activep-input {
    text-transform: uppercase;
    font-size: 30px;
    border: 1px solid #fff;
    border-radius: 5px;
    background: #015869;
    margin-left: 15px
}

.activep {
    max-width: 739px;
    margin: auto;
    position: relative;
    text-align: center;
    padding: 13% 0 0 0;
    color: #fff
}

.text-center {
    text-align: center
}

.activep-key {
    padding: 40px 0 25px 0;
    position: relative
}

.choosenhom-right {
    width: calc(100% - 65px);
    float: left
}

    .choosenhom-right label {
        float: left;
        line-height: 16px;
        font-weight: 400
    }

.w20 {
    width: 30px !important;
    border: none !important
}

.activep-img {
    width: 100px;
    height: 100px
}

.activep p {
    font-size: 1rem
}

.activep .error {
    position: absolute;
    padding: 11px;
    background: #fff;
    margin-left: 6px;
    border: 1px solid red;
    display: none
}

    .activep .error:before {
        border-right: 6px solid red;
        border-top: 7px solid transparent;
        border-bottom: 7px solid transparent;
        top: 12px;
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        left: -6px
    }

    .activep .error:after {
        border-right: 6px solid #fff;
        border-top: 7px solid transparent;
        border-bottom: 7px solid transparent;
        top: 12px;
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        left: -5px
    }

#txtDaTraKhach {
    height: 27px
}

.bill-name-list2 span {
    line-height: 25px
}

.team-img {
    height: 50px;
    width: 55px;
    float: left;
    margin-right: 15px;
    margin-left: 5px
}

.CssImg {
    height: 100%;
    width: 100%
}

.ui-menu-item {
    border-bottom: 1px dotted #ccc;
    line-height: 20px
}

#ui-id-10 .ui-menu-item {
    border-bottom: 1px dotted #ccc;
    padding-left: 10px;
    line-height: 30px
}

.cmth {
    width: 367px !important;
    min-width: 367px !important
}

.cmmh {
    width: 80px !important;
    min-width: 80px !important
}

.cmmh1 {
    width: 103px !important;
    min-width: 103px !important
}

#txtMaHang {
    width: 120px !important;
    min-width: 120px !important
}

#txttenhang {
    width: 290px !important;
    min-width: 290px !important
}

.cmcheck {
    min-width: 30px !important;
    width: 30px !important
}

#modalPopupLapPhieuThu .table {
    width: 99.9%;
    min-width: 99.9%
}

.title-kmhd {
    line-height: 24px;
    padding-left: 15px;
    font-weight: 700;
    font-size: 15px;
    border-bottom: none;
    border-top: none;
    background: #f2f2f2;
    padding: 3px 15px;
}

.giatriload {
    background: #fff
}

.CssImg img {
    width: 100%;
    height: 100%
}

.img-bill {
    padding-top: 30px
}

.CssImg .img-bill {
    padding-top: 0
}

.choose-price li {
    float: left
}

#lblHoaDon li.active a {
    color: #fff
}

.border-blue {
    border-right: 1px solid #32b7b3 !important;
    border-left: 1px solid #32b7b3 !important
}

    tr:hover .border-blue td, .border-blue td {
        background: #e6e6e6 !important
    }

.border-blue-right {
    border-right: 1px solid #32b7b3 !important
}

.border-blue-bottom {
    border-bottom: 1px solid #ccc !important
}

.border-blue-top {
    border-top: 1px solid #32b7b3 !important
}

#datail-TH4 .content-right {
    width: 675px
}

.border-blue td {
    border-top: 1px solid #32b7b3 !important
}

.close-ul-km {
    position: absolute;
    top: 2px;
    right: 7px;
    color: #746d6d
}

#modalPopuplg_TMTK .close-ul-km {
    position: absolute;
    top: 7px;
    right: 7px;
    color: #746d6d
}

.close-ul-km .fa-minus {
    display: none
}

.w190 {
    width: 290px !important;
    min-width: 290px !important
}

#nhomhang, .cmnh {
    width: 293px;
    min-width: 293px
}

#cke_txtHoaDonBanLe, #cke_txtDatHang, #cke_txtTrahang, #cke_txtDoiTraHang, #cke_txtNhapHang, #cke_txtTraHangNhap, #cke_txtChuyenHang, #cke_txtPhieuThu, #cke_txtPhieuChi, #cke_txtXuatHuy {
    width: 100% !important;
    border: 1px dotted #ccc
}

#cke_5_bottom, #cke_1_bottom, #cke_2_bottom, #cke_3_bottom, #cke_4_bottom, #cke_6_bottom, #cke_7_bottom, #cke_8_bottom, #cke_9_bottom, #cke_10_bottom {
    display: none
}

.establish-right #cke_txtDatHang {
    border: none
}

.mabo {
    margin-bottom: 15px
}

.cke_top {
    border: none
}

.banghh tbody td {
    padding: 10px
}

.bangsq tbody td {
    padding: 7px;
    font-size: 1rem
}

.printpageThaoTac {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    display: none;
    z-index: 9999999999
}

.StartImport {
    margin-right: 5px;
    z-index: 0;
    display: inline-block;
    background: gray;
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    padding: 7px 15px;
    white-space: nowrap;
    border: none;
    vertical-align: middle;
    border-radius: 2px;
    cursor: pointer
}

.imgprint {
    padding-top: 1px;
    padding-left: 20px !important
}

#mahanghoa {
    padding-left: 30px !important
}

.printablediv-page .bold {
    padding-left: 30px !important
}

.fixheight {
    padding-top: 13px !important
}

.seachnumber1 {
    float: left;
    width: 100px;
    margin-left: 12px;
    border: 1px solid #fff;
    border-radius: 3px;
    height: 30px;
    margin-top: 6px;
    outline: none;
    display: none
}

#xoadulieu .commodity-note {
    position: absolute;
    right: -27px;
    top: -5px
}

.date-chang1 #datetime {
    border: none;
    outline: none;
    border: none
}

.establish-left .fa-exclamation-circle {
    right: 9px;
    top: 12px;
    color: #c8c8c8;
    position: absolute;
    font-size: 15px;
    display: none !important
}

.box-detail-print p {
    height: 15px;
    float: left;
    width: 100%
}

.divSearchVue {
    position: absolute;
    top: 30px;
    max-height: 500px;
    background: #fff;
    left: 0;
    overflow: scroll;
    border: 1px solid #ccc;
    width: 350px;
    z-index: 1000
}

    .divSearchVue li {
        border-bottom: 1px dotted #ccc;
        padding: 6px
    }

        .divSearchVue li:hover {
            background: #f2f2f2
        }

#showseach_TH {
    position: absolute;
    top: 30px;
    max-height: 280px;
    background: #fff;
    overflow: scroll;
    border: 1px solid #ccc;
    width: 470px;
    z-index: 1000
}

    /*#showseach_TH ul {
        overflow-y: scroll;
        overflow-x: hidden;
        max-height: 100%;
        width: 100%
    }*/

    #showseach_TH li {
        border-bottom: 1px dotted #ccc;
        padding: 6px
    }

        #showseach_TH li a {
            font-size: 1rem
        }

        #showseach_TH li:hover {
            background: #dff6c9
        }

.fix-content {
    position: fixed;
    margin-left: 230px;
    top: 0;
    width: 1171px
}

#showseach {
    position: absolute;
    top: 30px;
    max-height: 450px;
    background: #fff;
    left: 0;
    overflow: auto;
    border: 1px solid #ccc;
    width: 450px;
    z-index: 1000
}

    #showseach li {
        padding: 6px
    }

.icon-seachpp {
    position: absolute;
    top: 14px;
    left: 10px
}

.khuyenmaihh {
    border: 1px dotted #ccc;
    padding: 10px;
    line-height: 20px
}

.text-right .arrow-left.fix-heightpp {
    height: auto !important
}

.arrow-left2 .price_2 .w160 {
    width: 156px !important;
    line-height: 20px
}

#promotiont .bill-seach span img {
    position: absolute;
    top: 14px;
    left: 6px
}

.seac-trahh {
    position: relative
}

    .seac-trahh input {
        padding-left: 27px
    }

    .seac-trahh img {
        position: absolute;
        top: 6px;
        left: 7px
    }

.titile-trahh {
    background: var(--color-table);
    color: #fff;
    margin-top: 20px
}

.table-trahh th {
    border: 1px solid #ccc;
    background: #fff
}

.table-trahh td {
    border: 1px solid #ccc
}

.table-trahh {
    border: 1px solid #ccc
}

.load-full {
    position: fixed;
    top: 47px;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1
}

    .load-full #wait {
        top: 28%;
        left: 40%;
        z-index: 30001
    }

.ov6 {
    overflow: scroll;
    max-height: 636px
}

.add-icon-search-left:before {
    font-family: 'Font Awesome 5 Pro';
    position: absolute;
    bottom: 0;
    left: 5px;
    font-size: 18px;
    top: 3px;
    content: '\f002';
    color: var(--color-primary)
}

.add-icon-search-left input {
    padding-left: 30px
}

.tab_chung .nav-tabs {
    float: left;
    border: none
}

#table_ChuyenHangChiTiet {
    display: none
}

.detail-reporthh {
    width: 175px
}

    .detail-reporthh li {
        float: left;
        padding-right: 20px;
        line-height: 34px
    }

#computersquer .modal-footer {
    border: none;
    padding: 20px 20px 15px 0px !important
}

.line-right {
    content: '';
    position: absolute;
    right: 0;
    width: 1px;
    background: var(--color-main);
    z-index: 99
}

.choose-commoditykh {
    height: 18px
}

#showseach_NhomDT {
    border: 1px solid #ccc;
    border-top: none;
    max-height: 153px;
    overflow: scroll
}

    #showseach_NhomDT a {
        font-weight: 400;
        color: #555;
        cursor: pointer
    }

.content-warning1 {
    min-width: 222px;
    border: 1px solid #ccc;
    z-index: 10004;
    padding: 8px 14px;
    background: #fff;
    top: 27px;
    margin-top: 0;
    margin-left: 23px;
    display: none;
    position: absolute;
    right: 45px;
    border-radius: 3px
}

#inforPoint {
    padding-top: 0;
    right: 58px;
    top: -3px
}

.content-warning1:before {
    border-bottom: 6px solid #32b7b3;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    margin-top: 0;
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    right: 145px;
    top: -7px
}

.main-warning1 {
    padding-top: 6px;
    font-size: 15px;
    position: absolute;
    right: -2px;
    top: 2px
}

.check-condition label {
    font-weight: 400
}

.check-condition {
    background: #dadadacc;
    border-radius: 4px;
    padding: 12px;
    margin-top: 15px
}

.w111 label {
    width: 70px
}

.w170 .form-wrap.floatleft {
    width: 100% !important
}

.height470 {
    max-height: 470px
}

.inner-setup .txtRed {
    line-height: 33px
}

#thongtin .toogle {
    margin-right: 27px
}

.testnear {
    padding: 5px;
    max-height: 165px;
    overflow: auto;
    margin-top: 10px
}

#showseach_NhomDT ul {
    width: 100%;
    padding-left: 5px
}

#showseach_NhomDT li {
    line-height: 30px;
    padding-left: 11px;
    border-bottom: 1px dotted #ccc
}

    #showseach_NhomDT li:last-child {
        border-bottom: none
    }

#modalPopuplg_NV .form-wrap label {
    width: 88px !important
}

.radio-button-leff label {
    width: 88px !important;
    line-height: 22px !important
}

.name-store label {
    margin-right: 6px;
    max-width: 125px;
    overflow: hidden;
    white-space: nowrap !important
}

.name-store .fa-angle-down {
    position: absolute;
    right: 4px;
    top: 18px
}

.renewal {
    display: none;
    position: fixed;
    bottom: 0;
    text-align: left;
    width: 100%;
    background: linear-gradient(to right,var(--color-primary),rgb(243 243 243));
    z-index: 9;
    height: 40px;
    line-height: 40px;
    color: #fff;
    font-weight: 700;
    padding-left: 30px;
    overflow: hidden;
    transition: padding-left 0.25s linear;
}

    .renewal .fa-angle-right {
        font-size: 85px;
        position: relative;
        padding-left: 10px;
        top: -24px;
        color: #ccc
    }

    .renewal font {
        color: #df0000;
        font-size: 13px
    }

    .renewal img {
        width: 100%;
        position: absolute;
        left: 0;
        top: 0
    }

#slideset2 {
    height: 40px;
    position: relative;
    overflow: hidden;
    width: 100%;
}

    #slideset2 > * {
        position: absolute;
        top: 100%;
        left: 35px;
        animation: 15s autoplay2 infinite ease-in-out
    }

@keyframes autoplay2 {
    0% {
        top: 100%
    }

    4% {
        top: 0%
    }

    33.33% {
        top: 0%
    }

    37.33% {
        top: -100%
    }

    100% {
        top: -100%
    }
}

#slideset2 > *:nth-child(1) {
    animation-delay: 0s
}

#slideset2 > *:nth-child(2) {
    animation-delay: 5s
}

#slideset2 > *:nth-child(3) {
    animation-delay: 10s
}

.renewal #slideset2:hover > * {
    animation-play-state: paused;
}

#datail-TH6 input {
    margin-right: 8px
}

#modalPopup_EditPhieuThuHD .name-product_date {
    width: 67%
}

.add-customer .choose-person li {
    float: left
}

.add-customer .btn {
    position: absolute;
    right: 0;
    height: 100%;
    outline: none;
    background: #fff;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    z-index: 9999
}

.add-customer .choose-person {
    width: 245px
}

.op-thong-bao ul li:hover {
    background: var(--table-footer) !important
}

.btn-bue:hover {
    background: var(--color-button-hover)
}

.btn-green:hover {
    background: var(--color-primary);
    color: #fff
}

.btn-blue-b:hover {
    background: var(--color-primary)
}

.btn-updata:hover {
    color: #fff
}

.tab-form-old li.active {
    border-top: 1px solid var(--color-primary);
    border-left: 1px solid var(--color-primary);
    border-right: 1px solid var(--color-primary);
    border-bottom: none !important
}

.tab-form-old li a {
    margin: 0px !important;
    font-weight: 700
}

.tab-form-old .nav-tabs {
    border-bottom: 1px solid var(--color-primary)
}

.btn-pink:hover {
    background: #f34545
}

.fillter a:hover {
    background: var(--color-primary)
}

.text-deal textarea {
    border: none;
    border-left: 1px solid #edecec;
    outline: none;
    height: 80px
}

.scoll-300 {
    max-height: 300px;
    overflow: scroll
}

.scoll-tt {
    max-height: 94px;
    overflow-y: scroll
}

@media print {
    .img-print {
        margin: 0;
        border: initial;
        border-radius: initial;
        width: initial;
        min-height: initial;
        box-shadow: initial;
        background: initial;
        page-break-after: always
    }
}

.sample-template {
    float: left;
    width: 200px;
    padding-left: 15px
}

    .sample-template .form-control {
        height: 32px !important
    }

.choose-paper span {
    float: left;
    line-height: 30px;
    padding-right: 6px
}

.choose-paper input {
    float: left;
    width: 170px
}

.choose-paper select {
    float: left;
    width: 100px
}

.choose-paper {
    padding-bottom: 20px
}

.bg-15 {
    background: var(--color-main)
}

.establish-left li.active .fa-exclamation-circle {
    color: #fff
}

.print-m {
    background: var(--color-main);
    z-index: 0;
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    padding: 8px 0;
    white-space: nowrap;
    border: none;
    vertical-align: middle;
    position: relative;
    cursor: pointer;
    border-radius: 2px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: 1px dotted #ccc;
    z-index: 99999
}

.bor-r {
    border-top-right-radius: 0;
    padding: 8px 9px;
    border-bottom-right-radius: 0
}

.print-m .dropdown-menu {
    z-index: 99999999999999999;
    border-radius: 0;
    background: var(--color-main);
    border: none
}

    .print-m .dropdown-menu li {
        line-height: 30px;
        padding-left: 10px;
        border-bottom: 1px dotted #ccc;
        color: #fff;
        width: 100%;
        font-weight: 400
    }

.print-customer.establish-right .bordermauin {
    border: 1px solid #ccc;
    padding: 10px;
}

.print-customer.establish-right .choose-paper .col-md-5 {
    border: none;
    padding: 0
}

.print-view .outselect .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

.editmau {
}

.outselect.add-customer {
    position: relative;
}

.choose-date-yaer .add-customer img {
    right: 38px !important;
    position: absolute;
    top: 7px;
}

.choose-date-yaer #btnTypeNgaySinh {
    top: 0
}

.choose-date-yaer .dropdown-menu {
    padding: 10px
}

    .choose-date-yaer .dropdown-menu li {
        position: relative
    }

.print-m #dLabel {
    padding: 9px 8px
}

.check-update label {
    font-weight: 400
}

.check-update {
    padding-top: 10px
}

.font400 {
    font-weight: 400
}

.w166 {
    width: 166px !important
}

.w67 {
    width: 67% !important
}

.total-payment {
    float: left;
    width: 180px;
    line-height: 30px
}

.name-payment {
    float: left;
    width: calc(100% - 420px);
    padding-left: 50px;
    position: relative
}

.money-payment {
    float: right;
    width: 240px
}

.information-payment {
    background: var(--color-filter-left);
    padding: 20px 20px;
    margin: 10px 0;
    border-radius: 3px
}

.item-payment {
    display: flex;
    align-items: center;
    padding: 3px 0
}

.w115px-l {
    width: 115px;
    float: left
}

.w115px-r {
    width: 115px;
    float: right
}

.name-payment font {
    line-height: 30px;
    color: #6d6d6d
}

.name-payment .fa-info-circle {
    position: relative !important;
    color: #7e7b7b
}

.check-after-li {
    float: right;
    padding-right: 20px;
    line-height: 21px;
    color: #009ddc;
    display: inline
}

.li-input-span {
    color: #333;
    line-height: 30px;
    text-align: left;
    width: auto !important;
    padding: 0 7px;
    margin: 1px 0 1px 1px
}

.permission-choose .col3 ul {
    padding-left: 20px
}

#modalContainerlg_EditVaiTro .permission-choose .col3 ul, #modalContainerlg_VaiTro .permission-choose .col3 ul {
    display: block
}

.col3 .showhideicon {
    float: right;
    padding-right: 14px;
    color: var(--color-primary)
}

.permission-main select {
    background: #e6e6e6
}

.bottom14 {
    bottom: -12px
}

.main-show .turnon {
    position: absolute;
    left: 2px;
    width: 27px;
    height: 27px;
    text-align: center;
    margin-left: 0
}

.main-show .turnoff {
    position: absolute;
    right: 2px;
    width: 27px;
    height: 27px;
    text-align: center
}

.main-show {
    width: 56px;
    height: 27px;
    background: #f33;
    border-radius: 18px;
    position: relative;
    color: #fff;
    cursor: pointer;
    transition: all 0.4s ease;
}

    .main-show.main-hide {
        background: #32b7b3
    }

    .main-show::before {
        content: '';
        width: 25px;
        height: 25px;
        background: #fff;
        border-radius: 15px;
        top: 1px;
        position: absolute;
        left: 1px;
        transition: all 0.4s ease;
    }

.main-hide::before {
    left: 30px !important
}

.show-table span {
    float: left;
    margin-left: 15px
}

.show-table {
    float: right;
    line-height: 30px
}

.list_HHTraNhapHangTab2, .list_HHTraNhapHangCT2, .list_HHTraNhapHangCT1, .list_NVBanHangNV, .list_NV, .list_HHTonKhoXuatpCT, .list_HHTonKhhoNhapCT, .list_HHTonKhoXuatKhoTQ, .list_HHTonKhoNhapKhoTQ, .list_HHTonKho, .list_HHCHXuatCT, .list_HHTraNhapHang, .list_HHCHNhapTQ, .list_HHCHXuatTQ, .list_HHXuatHuy, .list_HHXuatNhapTonChiTiet, .list_KHHangHoa, .list_KHCongNo, .list_KHLoiNhuan, .list_HHNCC, .list_HHNhanVien, .list_HHKhachTheoHang, .list_HHXuatNhapTon, .list_HHLoiNhuan, .list_NHCN, .list_DHGiaoDich, .list_HangHoa, .list_ThuChi {
    display: none
}

#choose_TenNganHang {
    height: auto !important
}

.content-print-page #wait {
    display: block;
    width: 130px;
    height: 89px;
    position: absolute;
    top: 57% !important;
    left: 34% !important;
    text-align: center;
    padding: 2px;
    z-index: 999
}

.giamoi {
    min-width: 150px;
    width: 150px
}

.gianhapcuoi {
    min-width: 150px;
    width: 150px
}

.giavon {
    min-width: 80px;
    width: 80px
}

.notifi-general ul {
    display: block !important;
    background: white !important;
    position: relative !important;
    top: 0px !important;
    border-right: 1px solid var(--color-primary);
    overflow: scroll;
    overflow-x: hidden;
    max-height: 400px;
    width: 390px !important
}

    .notifi-general ul li {
        border-bottom: 1px solid #ccc
    }

.notifi-general {
    position: absolute;
    background: #fff;
    width: 391px;
    right: -1px;
    top: 47px;
    border: 1px solid var(--color-primary);
    border-top: none;
    display: none;
    z-index: 99999
}

.bg-whitee {
    background: var(--color-main) !important
}

.li-notifi {
    display: none;
    padding: 0px !important
}

    .li-notifi .fa-bell {
        font-size: 19px
    }

.sum-notifi {
    position: absolute;
    top: -4px;
    right: -3px;
    border: 1px solid #fff;
    border-radius: 30px;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    font-size: 11px;
    background: #eb4a24;
    color: #fff
}

.notifi-general .tong-notifi {
    line-height: 40px;
    text-align: center;
    padding: 0 10px;
    cursor: pointer
}

.borderb {
    border-bottom: 1px solid #ccc;
    position: relative
}

.notifi-general ul li:hover {
    color: #000;
    cursor: pointer
}

.notifi-general i {
    color: #eb4a24 !important;
    font-size: 15px !important;
    margin-right: 6px !important;
    padding-left: 0px !important;
    width: auto !important
}

.notifi-general ul li:hover i, .notifi-general ul li:hover .date-notifi {
    color: white !important
}

.view-all {
    line-height: 40px;
    padding: 0 15px;
    border-top: 1px solid #ccc
}

    .view-all a {
        color: black !important
    }

        .view-all a:hover {
            color: #32b7b3 !important
        }

.notifi-general ul::-webkit-scrollbar {
    width: 5px;
    height: 14px
}

.notifi-general ul::-webkit-scrollbar-thumb {
    background: #ccc
}

.date-notifi {
    font-size: 11px;
    color: #727070;
    font-style: italic
}

.notifi-general ul li:hover .date-notifi {
    color: #ff3333 !important
}

.choose-file .btn-file {
    border: none
}

.thietlapmauin .form-group {
    margin-bottom: 5px
}

    .thietlapmauin .form-group .form-label {
        width: 190px !important;
        font-weight: 400
    }

.w67px {
    width: 97px !important
}

.choose-mauin {
}

.bnt-caretl {
    float: left;
    width: 22px;
    border: 1px solid #ccc;
    line-height: 32px;
    height: 27px;
    border-radius: 3px;
    text-align: center;
    padding-top: 4px;
    margin: 0 3px
}

.bg-style li {
    float: left !important;
    padding-left: 22px;
    padding-bottom: 22px
}

.header-top ul li:hover ul .bg-style {
    display: none
}

.bg-style .fa-check {
    line-height: 34px !important
}

.menu-horizontal-inner ul li ul li ul li:hover {
    background: var(--color-primary) !important
}

.notifi-general li a {
    color: black !important
}

.change-bg {
    width: 405px;
    z-index: 999999999999;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    outline: 0;
    max-width: 500px;
    margin: 10% auto;
    background: #fff;
    box-shadow: 0 0 6px 3px #ccc;
    height: 345px;
    display: none
}

.bg-style {
    padding-top: 25px;
    padding-left: 5px
}

.change-bg .modal-header {
    font-size: 16px
}

.notifi-left {
    width: 53px;
    float: left;
    height: 100%;
    height: 53px;
    border: 1px solid #ccc;
    border-radius: 56px;
    text-align: center;
    line-height: 50px
}

.notifi-right {
    width: calc(100% - 56px);
    float: right;
    padding-left: 18px
}

.notifi-left img {
    padding: 0px !important
}

.notifi-right p {
    margin: 0
}

.install-notifi {
    position: absolute;
    top: 35px;
    right: -9px;
    background: #fff;
    border: 1px solid var(--color-primary);
    height: 158px;
    z-index: 99;
    width: 407px;
    border-radius: 7px;
    padding: 15px 30px;
    display: none
}

    .install-notifi::before {
        border-bottom: 9px solid #32b7b3;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        right: 45px;
        top: -6px;
        margin-top: -3px;
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        z-index: 99
    }

    .install-notifi::after {
        border-bottom: 9px solid #fff;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        right: 45px;
        top: -5px;
        margin-top: -3px;
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        z-index: 99
    }

    .install-notifi .form-group {
        margin-bottom: 5px
    }

        .install-notifi .form-group .form-label {
            font-weight: 400 !important;
            line-height: 29px;
            margin: 0
        }

#thietlapmauin {
    height: auto !important
}

.bill-control-right .install-notifi {
    right: 46px;
    height: 190px
}

.accordion-content .bx-wrapper .bx-viewport {
    height: 60px !important
}

.sumgiamgia {
    float: right;
    line-height: 21px;
    width: 150px
}

.bill-de .fa-times {
    color: #ed5b5b;
    font-size: 18px
}

.bill-plus:hover {
    color: #32b7b3
}

.install-notifi.xuathuy {
    top: 35px;
    height: auto !important;
    left: unset;
    right: 0
}

.name-title-table {
    padding: 0 20px 0 5px;
    background: var(--color-main);
    color: #fff;
    line-height: 32px;
    font-size: 1rem;
    height: 43px
}

.nhap-hang-thanh-toan {
    width: calc(100% - 270px);
    padding-left: 15px
}

.name-title-table .code-hh {
    font-weight: 400
}

#lblHoaDon li a {
    color: #000
}

.bill-control-right a {
    color: #666
}

    .bill-control-right a i {
        font-size: 18px
    }

    .bill-control-right a:hover {
        color: var(--color-primary)
    }

.main-slideleft i {
    font-size: 17px
}

.supper-hotline {
    line-height: 45px;
    font-size: 13px
}

    .supper-hotline span {
        color: var(--color-primary)
    }

doi-tra-hang-new container-fluid nopadding
.print-drafts {
    margin: 0;
    float: left;
    height: 70px;
    background: var(--color-button-thanh-toan);
    border: none;
    color: #fff;
    font-weight: 700;
    border-radius: 4px;
    padding: 12px;
}

.function-keys {
    position: absolute;
    top: 35px;
    right: 6px;
    background: #fff;
    border: 1px solid var(--color-primary);
    height: auto;
    max-height: 500px;
    z-index: 999999;
    width: 399px;
    border-radius: 7px;
    padding: 15px 20px;
    display: none
}

    .function-keys::before {
        border-bottom: 9px solid #32b7b3;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        right: 143px;
        top: -6px;
        margin-top: -3px;
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        z-index: 99
    }

    .function-keys::after {
        border-bottom: 9px solid #fff;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        right: 143px;
        top: -5px;
        margin-top: -3px;
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        z-index: 99
    }

.title-keys {
    font-weight: 700;
    font-size: 17px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 10px
}

.function-keys label {
    float: left;
    width: 65px;
    margin: 0;
    color: var(--color-primary);
    line-height: 24px;
}

.function-keys .content-key {
    float: left
}

.main-slide a:hover, .dow-sli:hover i, .bx-next:hover i, .bx-prev:hover i, .select-user li:hover a {
    color: var(--color-primary) !important
}

.select-user li a {
    color: black !important
}
/*.bill-listchoose li:hover .bill-plus i, .grocery .bill-listchoose li:hover .note-out {
    display: block
}*/
.bill-pay button:hover {
    background: var(--button-thanh-toan-hover)
}

.bill-control-right ul li i {
    font-size: 15px
}

.main-key {
    margin-left: 0
}

    .main-key a {
        height: 22px;
        width: 22px;
        border: 2px solid #6e6c6c;
        float: left;
        text-align: center;
        line-height: 22px;
        border-radius: 30px
    }

.frames-content .group-sum-total .col-xs-4 {
    padding-right: 0
}

.main-key a i {
    font-size: 1rem
}

.xuathuy .bnt-caretl {
    width: 22px;
    line-height: 18px;
    font-size: 17px;
    color: #666;
    height: 27px
}

.export-keys {
    top: 35px;
    left: unset;
    right: 0;
}

    .export-keys::after {
        left: unset;
        right: 10px;
    }

    .export-keys::before {
        left: unset;
        right: 10px;
    }

.flaggOfPrint i, .import-fast:hover i, .import-fast a:hover {
    border-color: #32b7b3 !important;
    color: #32b7b3 !important
}

.import-fast .fa-barcode {
    font-size: 23px
}

.bill-plus .fa-minus, .bill-plus .fa-plus {
    font-size: 18px;
    padding-top: 7px
}

.notifi-general .install-notifi {
    z-index: 999999 !important
}

.thaotac .form-group {
    margin-bottom: 0px !important
}

.bill-total .table {
    font-size: 13px
}

.slide-goods2 .number-fast-banle {
    padding-top: 3px
}

.slide-goods2 .box-barcode {
    padding-top: 6px
}

th a {
    pointer-events: none
}

.in-debt .form-group {
    margin-bottom: 0
}

.bgwhite {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #fff;
    opacity: 0;
    z-index: 1046;
    display: none
}

.grocery table td {
    white-space: inherit !important
}

.collapse-nd {
    position: relative;
    width: 68px;
    cursor: pointer;
    position: relative;
    padding-top: 7px
}

.permission-choose {
    max-height: 400px;
    overflow: scroll
}

.showhide {
    display: none !important
}

.collapse-nd span {
    width: 15px;
    height: 15px;
    border: 1px solid var(--color-primary);
    float: left;
    margin-right: 5px;
    border-radius: 3px;
    line-height: 16px;
    padding-left: 0
}

.check span:after {
    content: '\2713 ';
    outline: none;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    color: #32b7b3 !important;
    position: absolute;
    top: 8px;
    left: 3px
}

#datail-TH9 .form-group, #datail-TH8 .form-group, #datail-TH6 .form-group {
    margin-bottom: 0
}

.hoadon-nh .bill-plus {
    width: 30px
}

    .hoadon-nh .bill-plus i {
        font-size: 22px !important;
        padding-top: 3px !important;
        display: block !important
    }

.hoadon-nh .logoOpen24 {
    padding-left: 0
}

.hoadon-nh .bill-pluss {
    width: 32px;
    font-size: 1rem;
    margin-top: 6px;
    color: white !important;
    background: var(--color-main) !important
}

    .hoadon-nh .bill-pluss:hover {
        background: var(--color-primary) !important
    }

.hoadon-nh .bill-control-right li {
    line-height: 42px
}

.hoadon-nh #th .nav-tabs {
    margin-bottom: 5px
}

.op-js-tr-hide a {
    cursor: pointer
}

.w76 {
    width: 76px !important
}

.w93 {
    width: 93px !important
}

.name-bill-cn {
    margin-top: 6px;
    color: #666;
    padding-left: 0
}

    .name-bill-cn img {
        margin-top: -6px
    }

    .name-bill-cn span {
        padding-left: 0
    }

.select-usercn {
    left: -1px !important;
    top: 39px !important
}

.quyenmacdinh li {
    position: relative;
    float: left;
    width: 100%
}

.changetime span {
    width: 76px;
    line-height: 30px;
    float: left;
    text-align: center;
    color: #36c;
    margin-left: 15px
}

.table-changetime {
    border: 1px solid #ccc;
    margin: 15px 0 30px 0px !important;
    text-align: center;
    max-height: 400px;
    overflow: scroll
}

    .table-changetime tr {
        border-bottom: 1px solid #ccc
    }

    .table-changetime th {
        font-weight: 400;
        padding: 9px;
        background: #D6F1F0;
        line-height: 17px;
        text-align: center
    }

    .table-changetime td {
        text-align: center
    }

.viewmore-time {
    color: #36c;
    padding: 10px 0;
    float: left
}

.table-changetime .fa-times {
    color: red;
    cursor: pointer
}

.colb {
    color: #36c
}

.permission-main .collapse-nd {
    margin-right: 20px
}

.bill-bxslide ul li.using {
    border-bottom: none !important;
    text-decoration: none;
    height: 35px;
    font-weight: 700;
    color: white !important;
    background: var(--color-main);
    z-index: 999;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0
}

.hoadon-nh .bill-de {
    margin-top: 7px;
    width: 25px;
    text-align: center
}

    .hoadon-nh .bill-de .fa-times {
        font-size: 15px
    }

.hoadon-nh .supper-hotline {
    padding-right: 57px
}

#lstNhomHHChosed {
    float: left;
    height: 30px;
    line-height: 30px;
    padding-top: 3px;
    padding-left: 10px
}

    #lstNhomHHChosed ul li {
        margin-right: 3px;
        border: none;
        display: inline;
        font-size: 13px
    }

.grocery #lstNhomHHChosed {
    width: 495px !important;
    right: 0
}

.highcharts-axis-labels text {
    font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif
}

.bagr1 {
    background: #8282e4
}

.item-chart {
    width: 220px;
    height: 100px;
    margin-bottom: 30px;
    font-size: 11px
}

.img-chart {
    width: 82px;
    float: left;
    padding-top: 24px;
    text-align: center
}

.content-chart {
    float: left;
    margin-bottom: 5px;
    padding-bottom: 5px
}

.title-chart {
    font-size: 1rem
}

.content-chart .bold {
    font-size: 16px
}

.bagr2 {
    margin: auto;
    background: #f86f1d
}

.bagr3 {
    float: right;
    background: #00a69c
}

.hello-admin {
    font-size: 1rem;
    padding-left: 30px;
    position: relative;
    width: calc(100% - 445px);
    float: left;
    line-height: 30px
}

    .hello-admin img {
        position: absolute;
        left: 0
    }

.paddingtop40 {
    padding-top: 25px;
    float: left;
    padding: 5px 40px;
    margin-bottom: 20px;
    border-radius: 5px
}

.left-collection {
    float: left;
    width: 180px;
    text-align: center;
    margin-bottom: 10px;
    position: relative
}

.item-collection {
    height: 218px;
    padding-top: 10px
}

.name-collection {
    font-size: 1rem;
    padding-top: 29px;
    padding-bottom: 15px
}

.right-collection {
    float: right;
    width: calc(100% - 180px)
}

    .right-collection .title-chart {
        font-size: 1rem;
        color: #000;
        font-weight: 700
    }

.left-collection .name-collection {
    color: #000
}

.right-collection li {
    line-height: 25px;
    width: 100%
}

.item-collectionr {
    margin-left: 15px
}

.right-collection .month6 a {
    text-decoration: none;
    color: #4d4d4d !important
}

.right-collection .bold span {
    color: var(--color-primary)
}

.patop20 {
    padding-top: 20px
}

    .patop20 span {
        color: #8282e4 !important
    }

.chinhanh-vaitro select {
    width: 150px;
    float: left
}

.col3 ul li {
    padding: 0
}

    .col3 ul li .list-permission {
        line-height: 23px
    }

.not-partition {
    text-align: center;
    padding-top: 50px;
    font-size: 13px
}

#renderbody {
    height: 100%
}

.group-parent li.item-collectionl .right-collection .bold {
    color: #f86f1d
}

.name-lot {
    display: flex;
    height: max-content;
    margin-right: 5px;
}

    .name-lot span {
        float: left;
        width: 61px;
        line-height: 25px
    }

.date-lot {
    border-radius: 4px;
    color: #fff;
    padding: 4px 1ch;
    margin-top: 0;
    height: 24px;
    line-height: 18px;
    font-size: 12px;
    width: 80px;
}

.bglot1 {
    background: #00a69c;
}

.bglot2 {
    background: #fe2727;
}

.bglot3 {
    background: #f9f9f9
}

.delete-lot {
    color: #6d6e71;
    float: left
}
/*.name-lot input {
    width: 110px;
    float: left;
    height: 28px !important
}*/
.item-lotinport span {
    padding-right: 10px;
    line-height: 25px
}

.group-parent li {
    padding-left: 0px !important;
    border: none !important
}

    .group-parent li ul {
        overflow: inherit !important;
        height: auto !important
    }

.group-p1 {
    padding-left: 10px;
    border-bottom: 1px dotted #ccc;
    position: relative;
    float: left;
    width: 100%
}

.group-p2 {
    padding-left: 23px;
    border-bottom: 1px dotted #ccc;
    position: relative;
    float: left;
    width: 100%
}

.group-p3 {
    padding-left: 33px;
    float: left;
    width: 100%;
    border-bottom: 1px dotted #ccc;
    position: relative
}

.group-parent .p-left10 {
    padding-left: 10px !important;
    border-bottom: 1px dotted #ccc !important
}

.seach-lot {
    float: left;
    width: 231px;
    position: relative;
    margin-bottom: 15px
}

.select-lot {
    float: left;
    margin-left: 10px
}

.seach-lot i {
    position: absolute;
    top: 7px;
    font-size: 1rem;
    left: 7px;
    color: #928f8f;
}

.seach-lot input {
    padding-left: 23px
}
/*.numberlot {
    line-height: 25px;
    margin-right:5px
}*/
/*.name-lot1 {
    margin-left: 28px;
    float: left;
    width: 160px;
    padding-right: 16px
}*/
/*  .name-lot1 .numberlot {
        float: left;
        width: 61px
    }*/
.group-btn-left .group-btn {
    padding: 15px 0 10px 0
}

.item-lohang {
    padding-left: 60px
}

.number-lot {
    background: #f9f9f9
}

.close-phieu-nhap {
    width: 30px
}

.table-lot tr td {
    border: none !important
}

.w60 {
    width: 60px;
    min-width: 60px
}

.w130 {
    border: none;
    border-bottom: 1px solid #ccc;
    line-height: 24px;
    outline: none;
    background: none;
    padding: 3px 7px;
}

.item-lot .selec-person {
    border-radius: 4px;
    top: 27px;
    min-width: 100px;
    overflow-x: hidden
}

.item-lot .selec-personTR {
    width: 100px;
    border-radius: 4px;
    top: 27px;
    overflow-x: hidden
}

.selec-person li:hover {
    background: #d6f1f0 !important;
    color: black !important
}

.selec-personTR li:hover {
    background: #d6f1f0 !important;
    color: white !important
}

.selec-personTR {
    width: 100px;
    border-radius: 4px;
    top: 27px;
    overflow-x: hidden
}

.list-price input {
    box-shadow: none;
    border-radius: 0
}

.grocery .callprice-right input {
    width: 85px
}

.del-lot {
    width: 30px;
    float: left;
    line-height: 25px
}

.btn-add-new {
    background: #eb4a24;
    margin-left: 0
}

.add-lot {
    width: 45px;
    float: left;
    text-align: center;
    padding-top: 8px;
    font-size: 16px
}

.ul-import li {
    border-bottom: 1px dotted #ccc
}

    .ul-import li:hover a {
        color: white !important;
        background: var(--color-button)
    }

#modalPopuplg_TMTK .group-parent {
    overflow: scroll;
    overflow-x: hidden;
    height: 380px
}

    #modalPopuplg_TMTK .group-parent li {
        padding-left: 0px !important;
        border: none !important;
        position: relative;
        width: 100%;
        float: left
    }

        #modalPopuplg_TMTK .group-parent li ul {
            float: left;
            width: 100%
        }

.group-p1:hover, .group-p2:hover, .group-p3:hover {
    background: #ddd !important
}

.k-checkboxTR .k-all {
    float: left;
    width: 100%;
    border-bottom: 1px dotted #ccc
}

#modalPopuplg_TMTK .seach-hhchoose input {
    line-height: 17px
}

.banner-introducing {
    background: url(images/anhhh/banner.jpg) no-repeat center;
    height: 130px;
    background-size: 100% 100%;
    color: #000;
    padding-left: 20px;
    padding-top: 37px
}

    .banner-introducing:hover {
        color: #000
    }

.delete-introducing {
    position: absolute;
    right: 0;
    z-index: 100;
    color: #fff;
    font-size: 20px;
    background: rgba(0,0,0,.2);
    width: 30px;
    height: 30px;
    padding-top: 0;
    text-align: center
}

    .delete-introducing:hover {
        color: #ed5b5b
    }

.seach-permission {
    padding: 9px;
    position: relative
}

    .seach-permission input {
        padding-left: 23px
    }

    .seach-permission i {
        position: absolute;
        top: 16px;
        font-size: 15px;
        left: 16px;
        color: #8a8787
    }

.bg-white1 {
    background: #fff
}

#printTemKe .a4 input {
    padding-top: 8px
}

#printTemKe .modal-body label {
    width: 150px
}

.table-tem {
    border: 1px solid #ccc;
    margin-bottom: 20px !important
}

    .table-tem td {
        border-right: 1px solid #ccc
    }

#printTemKe .form-group {
    margin-bottom: 0
}

.bdbor-right {
    border-right: 1px solid #ccc;
    height: 170px;
    padding-right: 30px
}

.right-collection .bold {
    color: var(--color-primary);
    padding-top: 3px;
    float: left
}

    .right-collection .bold img {
        float: left
    }

    .right-collection .bold span {
        float: left;
        line-height: 21px
    }

.banner-sale {
    margin-left: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 20px;
    height: 175px
}

    .banner-sale img {
        width: 100%;
        height: 100%;
        border-radius: 5px
    }

.datachoose {
    margin-bottom: 15px;
    border-radius: 5px;
    overflow-y: auto;
    max-height: 300px;
    padding-bottom: 13px
}

.no-padding-left {
    padding-left: 0px !important
}

.datachoose .datepicker th {
    color: #03a4a1 !important;
    text-align: left !important;
    padding-left: 8px;
    font-weight: 400
}

.datachoose .datepicker td a {
    color: #636363;
    width: 30px;
    height: 30px;
    float: left;
    line-height: 30px;
    text-align: center
}

.form-radio-padding span {
    padding-right: 5px
}

.datachoose .ui-state-active, .datepicker td a:hover {
    background: #03a4a1;
    text-align: center;
    color: white !important;
    border-radius: 30px
}

.datachoose .datepicker td {
    padding: 2px
}

.datachoose .ui-datepicker-calendar {
    margin-top: 20px !important;
    margin-left: 10px !important
}

.inner-overview .title-ds span {
    text-transform: lowercase
}

.printpage-a4 {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    display: none;
    z-index: 9999999999
}

.inner-print-a4 {
    width: 210mm;
    background: #fff;
    height: 600px;
    position: relative;
    margin: 100px auto;
    z-index: 9999999999
}

.content-print-page-a4 {
    height: 600px;
    background: #fff;
    overflow: auto;
    float: left;
    width: 100%
}

    .content-print-page-a4 .portrait {
        width: 192mm;
        height: 271mm
    }

    .content-print-page-a4 .landscape {
        height: 192mm;
        width: 271mm
    }

.a44tem table, .a48tem table {
    float: left
}

.a44tem .portrait table {
    width: 91mm;
    height: 122mm;
    margin: 2mm
}

.a44tem .landscape table {
    height: 90mm;
    width: 122mm;
    margin: 2mm
}

.a48tem .portrait table {
    width: 91mm;
    height: 57mm;
    margin: 2mm
}

.a48tem .landscape table {
    height: 90mm;
    width: 59mm;
    margin: 2mm
}

.a44tem table tr td, a48tem table tr td {
    white-space: normal !important
}

.a44tem table tr .tenthuoctinh, .thuoctinh .td {
    white-space: nowrap !important
}

.close-print-thuoctinh {
    position: absolute;
    top: 1px;
    right: 20px;
    background: #fff;
    border: none;
    height: 20px;
    font-size: 23px;
    outline: none
}

.height60 .frames-content .table-reponsive {
    margin-bottom: 48px
}

#modalPhieuXuatHuy .frames-content.pading0 {
    padding-bottom: 25px
}

.frames-content.op2 {
    padding-bottom: 25px
}

ul.ui-autocomplete {
    max-height: 450px
}

.paddingb30 {
    padding-bottom: 32px
}

.getDateDoanhSo span i {
    font-size: 1rem
}
/*.getDateDoanhSo li a:hover {
    background: #99cccc !important;
    color: black !important
}*/
.getDateDoanhSo li a {
    padding: 4px 15px !important
}

.getDateDoanhSo li {
    border-bottom: 1px dotted #ccc
}

    .getDateDoanhSo li a span {
        line-height: 20px
    }

.icon-filter {
    top: 3px;
    left: 6px
}

.table-filter tbody tr p {
    margin: 0
}

.right-inner-addon {
    width: 100%
}

    .right-inner-addon input {
        border-radius: 0
    }

    .right-inner-addon span {
        position: absolute;
        right: 0;
        padding: 8px 26px;
        pointer-events: none;
        color: #999
    }

.menu-main li ul li:hover {
    background: rgba(0,0,0,0.15) !important
}

.icon-filter2 {
    line-height: 29px;
    color: #32b7b3;
    left: -12px;
    display: none
}

.table-filter .col-md-1, .table-filter .col-md-9, .table-filter .col-md-2 {
    padding: 0
}

.table-filter .col-md-1, .table-filter .col-md-9 {
    padding-left: 2px
}

.table-filter thead tr .actioveFilter {
    line-height: 30px;
    padding: 1px 9px
}

.btn-save {
    color: #fff;
    background: #32b7b3;
    border-color: #32b7b3
}

.header-title-filter {
    padding-left: 0
}

.op-object-detail .col-md-9 {
    padding-right: 0
}

    .op-object-detail .col-md-9 .table-res table thead tr th {
        background: #e6e6e6;
        color: #000
    }

.op-table-summary {
    padding-top: 10px
}

.footer-total-detail {
    background: #e6e6e6;
    font-weight: 700
}

.table > thead > tr > th {
    border-bottom: 1px solid #e6e6e6
}

.w300 .title-nhap-xuat {
    padding: 0 15px;
    color: #000
}

    .w300 .title-nhap-xuat .namepage {
        border-bottom: 1px solid #bcbec0
    }

.nopadding {
    padding: 0 !important
}

.label-font-normal {
    font-weight: 400
}

.form-group .img-position {
    position: absolute;
    top: 7px;
    right: 7px
}

.w300 .title-nhap-xuat .title-center {
    text-align: center;
    background: var(--color-table);
    margin-top: 10px
}

    .w300 .title-nhap-xuat .title-center span {
        line-height: 30px;
        color: var(--color-primary);
        font-weight: 700
    }

.w300 .title-nhap-xuat .floatleft .title-warehouse {
    margin-top: 5px
}

.border-top {
    border-top: 1px solid #bcbec0
}

.frames-content .col-md-6 {
    padding: 0;
    width: 49%
}

    .frames-content .col-md-6 .total-sum {
        border: 1px solid #bcbec0;
        border-radius: 3px;
        padding: 10px 10px 0 10px
    }

.title-inport .glyphicon-chevron-down {
    color: #9da0a3
}

.frames-content .col-left {
    margin-right: 5px
}

.btn-padding {
    padding: 3px 0 3px 10px !important
}

frames-content .btn-padding button {
    border-radius: 5px
}

.w300 .frames-content .title-nhap-xuat .title-center {
    margin-bottom: 10px
}

#ulListNhomHH ul li ul li {
    line-height: 30px;
    overflow-y: scroll,
}

.report-view {
    padding-left: 15px;
    padding-right: 3px
}

. .boxLeft .showhideicon {
    right: 10px
}

.checked-thong-bao .form-label {
    width: 100% !important;
    padding-right: 20px
}

.checked-tree-leff {
    padding-left: 15px;
    margin-bottom: 5px
}

.check-text {
    margin-left: 10px
}

.title-tree .showhideicon i {
    color: var(--color-main)
}

.check-unit:before {
    content: '\f0c8';
    font-family: 'Font Awesome 5 Pro';
    position: absolute;
    font-size: 9px;
    margin-top: 3px;
    margin-left: 3px;
    color: var(--color-main)
}

.content-tree-children {
    margin-left: 20px
}

.btn-tree-check {
    padding: 4px 8px !important;
    border-radius: 4px !important
}

.btn-show-column-report {
    background: #d2f0ef
}

    .btn-show-column-report:hover {
        background: #9de9e6 !important
    }

.input-search-filter .search-report {
    background: #d1d2d9
}

    .input-search-filter .search-report i {
        color: #000
    }

.btn-print-report {
    background: #d7d0f4;
    color: #000
}

    .btn-print-report:hover {
        background: #baadf2 !important
    }

.btn-excel-report {
    background: #fbe1a9;
    color: #000
}

.header-report .btn-header-filter .btn-group img {
    margin-bottom: 2px;
    height: 19px
}

.op-filter-title {
    background: var(--color-filter-left);
    border-top: 1px solid var(--color-filter-left);
    border-bottom: 1px solid var(--color-filter-left);
    font-size: 1rem;
    font-weight: 700;
    padding: 7px 2px 8px 10px;
    margin: 0;
    color: #000
}

.ul-radius {
    padding-left: 15px !important
}

    .ul-radius li {
        margin-bottom: 5px
    }

.modal-opened {
    opacity: .7
}

.product-tab-left label {
    width: 110px
}

.product-tab-left .commodity-note {
    right: 5px
}

.product-tab-left .img-list-c li {
    width: 91px !important
}

.product-tab-left .img-item {
    width: 91px
}

.product-addnew-table tr td {
    border: none
}

.product-addnew-panel .panel-heading {
    background: #d1d2d3 !important;
    color: #000
}

.product-addnew-panel {
    border: 1px solid #d1d2d3
}

.product-tab-right label {
    width: 110px
}

.table-donvitinh thead tr th {
    background: #d2f0ef
}

.table-donvitinh {
    border: 1px solid #d1d2d3
}

.panel-tontoithieu label {
    width: 80px
}

.panel-tontoithieu .commodity-note {
    left: 203px
}

.product-addnew-panel .panel-title {
    font-size: 13px
}

.nav-product-addnew li a {
    font-weight: 700
}

.table-dinhluong tr td {
    border-bottom: 1px solid #ccc
}

.table-dinhluong thead tr th {
    background: #d1d2d3 !important
}

.btn-search-report {
    float: right;
    border: none;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    margin-right: 6px;
    color: #fff;
    position: absolute;
    width: 32px;
    height: 30px;
    right: 7px;
    background: #d1d2d3
}

    .btn-search-report i {
        color: #000
    }

.nav-product-addnew {
    margin-top: 10px;
    margin-left: 30px;
    margin-right: 30px;
    border-bottom: 1px solid #32b7b3 !important
}

    .nav-product-addnew li.active {
        border: 1px solid #32b7b3;
        border-bottom: none
    }

    .nav-product-addnew li a {
        margin: 0px !important
    }

.report-search-column {
    padding: 0 5px 0 12px
}

.icon-delete {
    color: red
}

.panel-donvicoban .materiall {
    left: 38px
}

.op-titile-notification span {
    position: absolute;
    font-size: 17px;
    color: #fff;
    top: 29px;
    left: 75px
}

.popup-Notification-Open24 {
    position: fixed;
    top: -5px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999999
}

    .popup-Notification-Open24 .overlaypop {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 0;
        background: rgba(0,0,0,.3)
    }

    .popup-Notification-Open24 .pop-body {
        max-width: 650px;
        background: #fff;
        border-radius: 3px;
        margin: 120px auto 0;
        padding: 75px 42px 15px;
        position: relative
    }

    .popup-Notification-Open24 .closepop {
        position: absolute;
        right: 0;
        top: 0;
        width: 50px;
        height: 40px;
        line-height: 40px;
        text-align: center
    }

    .popup-Notification-Open24 .pop-wrap {
        overflow: auto;
        max-height: 550px;
        font-size: 1rem;
        color: #666;
        line-height: 20px
    }

        .popup-Notification-Open24 .pop-wrap .pop-header {
            text-align: center;
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 20px;
            line-height: 30px;
            text-transform: uppercase;
            color: #08b5a6
        }

.op-img-notification {
    width: 240px;
    position: absolute;
    left: 0;
    top: 0
}

.popup-Notification-Open24 .pop-wrap .pop-content {
    position: relative
}

.popup-Notification-Open24 .pop-note {
    font-size: 1rem;
    margin-top: 30px;
    padding: 15px 0;
    border-top: 1px solid #ddd;
    text-align: center;
    color: #666
}

    .popup-Notification-Open24 .pop-note .check-group input {
        margin-top: 1px
    }

        .popup-Notification-Open24 .pop-note .check-group input:after {
            top: -10px;
            left: -12px
        }

.op-space {
    padding: 5px
}

.popup-Notification-Open24 .pop-note label, .popup-Notification-Open24 .pop-note strong {
    color: #08b5a6
}

.input-report {
    width: 100%;
    outline: none;
    height: 30px;
    padding-left: 15px
}

.table-thekho table thead tr th {
    border: 1px solid #fff;
    background: #d6f1f0
}

.table-thekho table tfoot tr th {
    background: #d6f1f0
}

.table-thekho table tfoot tr {
    border: none
}

.group-list-img-user li {
    float: left;
    text-align: center;
    height: 115px !important;
    width: 30% !important;
    border: 1px solid #ccc !important;
    border-radius: 2px !important;
    border-bottom: 1px solid #ccc !important;
    margin: 0 0 10px 8px
}

.search-img-user {
    padding-left: 10px;
    padding-right: 0
}

.search-combobox {
    line-height: 20px;
    font-size: 1rem;
    padding: 7px 0 7px 10px !important
}

.p-note {
    margin: 0px !important;
    font-size: 10.5px
}

.contact-customer {
    background: white !important
}

    .contact-customer > li.active > a, .contact-customer > li.active > a:hover, .contact-customer > li.active > a:focus {
        border-top: 1px solid #d1d2d9 !important;
        border-right: 1px solid #d1d2d9 !important;
        border-left: 1px solid #d1d2d9 !important
    }

.ui-menu .ui-menu-item .search-combobox:hover {
    background: #0088cc !important;
    color: white !important
}

.radio-button-leff input[type=radio] {
    line-height: 10px
}

.search-img-user i {
    position: absolute;
    left: 10px;
    top: 9px
}

.search-img-user input {
    padding-right: 40px
}

.search-img-user .col-md-12 {
    padding-bottom: 15px;
    padding-left: 0;
    padding-right: 0px !important
}

.btn-active-user {
    padding-bottom: 15px;
    padding-left: 10px
}

.btn-outline-info {
    color: #17a2b8;
    background: transparent;
    background-image: none;
    border-color: #17a2b8;
    font-weight: 700;
    height: 35px;
    margin: 0 18px 0 0
}

.tr-info, .tr-info button {
    background: #d2f0ef !important
}

.btn-oranges {
    background: var(--color-button)
}

    .btn-oranges:hover {
        background: var(--color-button-hover)
    }

.Content-hsnv {
    float: left;
    width: calc(100% - 200px)
}

.img-hsnv {
    width: 180px;
    height: 180px;
    float: left;
    padding-left: 15px
}

    .img-hsnv img {
        width: 100%;
        height: 100%
    }

.print-hsnv .tab-col-12 h4 {
    padding: 15px;
    background: var(--color-filter-left) !important
}

.hsnv-table tr td {
    border: 1px solid #ccc !important
}

.hsnv-table thead tr {
    background: var(--table-footer) !important
}

.print-hsnv h3, .print-hsnv h4 {
    font-weight: 700
}

.hsnv-detail tr td {
    font-size: 13px
}

.tr-title {
    width: 8%
}

.tr-value {
    width: 25.33%
}

.Content-hsnv h4 {
    font-weight: 400
}

.print-hsnv .tab-col-12 {
    padding: 20px 0 0 0px !important
}

.table-not-border tbody tr td {
    border: none !important
}

.table-not-border tbody tr:hover td, .table-not-border tbody tr:hover td button {
    background: none !important
}

.btn-user-active {
    background: #32b7b3 !important;
    color: white !important;
    border-color: #32b7b3
}

.btn-outline-info:hover {
    background: #17a2b8 !important;
    color: white !important
}

.table-img-user .fa-times {
    color: red
}

.group-list-img-user li .img-bill {
    height: 70px;
    padding-top: 0px !important
}

.group-list-img-user li .name-menu {
    position: initial !important
}

.possible-table-tab {
    position: sticky;
    top: 50px
}

.content-left-sections {
    width: 100%;
    border: 1px solid #ccc;
    float: left;
    margin-bottom: 25px
}

.tab-dashboard {
    width: 100%;
    float: left
}

.content-left-sections h2 {
    padding-left: 40px;
    font-weight: 700;
    font-size: 16px
}

.dashBoard-tab2-statistic, .dashBoard-tab4-statistic {
    width: 50%;
    margin-top: 15px;
    margin-bottom: 15px;
    float: left
}

.dashBoard-room {
    font-size: 22px;
    font-weight: 700;
    height: 90px;
    color: #fff;
    background: #32b7b3;
    border-radius: 4px
}

.dashBoard-room-detal p {
    padding: 0;
    margin: 0;
    line-height: 30px
}

.dashBoard-room-content {
    font-size: 16px;
    padding: 10px 15px 0 30px
}

    .dashBoard-room-content p span {
        font-weight: 700;
        font-size: 24px;
        padding: 0px !important
    }

.dashBoard-room-detal {
    margin-left: 70px;
    padding-top: 13px;
    padding-bottom: 17px
}

.dashBoard-room .dashBoard-room-detal:before {
    font-family: 'Font Awesome 5 Pro';
    position: absolute;
    bottom: 0;
    left: 15px;
    font-size: 55px;
    top: 5px;
    content: '\f015';
    color: #fff
}

.title-img {
    width: 80px;
    height: 80px;
    position: absolute
}

.dashBoard-detail {
    padding-left: 160px;
    font-size: 16px
}

    .dashBoard-detail .form-group label {
        float: left;
        line-height: 30px;
        width: 100px;
        font-weight: 500
    }

.dashBoard-room-content .form-group label {
    font-weight: 500;
    float: left;
    line-height: 30px;
    width: 100px
}

.dashBoard-room-content .form-dashboard p {
    text-align: right;
    font-weight: 700;
    font-size: 30px;
    padding: 0px !important
}

.dashBoard-room-center {
    font-size: 16px;
    padding: 10px 15px 0 0;
    border-right: 1px solid #ccc
}

.dashBoard-room-content .form-group {
    margin-bottom: 4px
}

.form-dashboard img {
    position: relative !important;
    top: 0;
    margin-left: 10px
}

.form-dashboard {
    width: calc(100% - 100px);
    font-weight: 400;
    float: left;
    line-height: 30px
}

.dashBoard-tab2-statistic h3 {
    font-weight: 700;
    padding-bottom: 15px;
    font-size: 16px
}

.dashBoard-detail .form-dashboard p {
    text-align: right;
    font-weight: 700;
    font-size: 30px;
    padding: 0px !important
}

.dashBoard-right .dashBoard-detail .form-dashboard p span {
    color: #f9b632
}

.dashBoard-left .dashBoard-detail .form-dashboard p span {
    color: #0081d2
}

.dashBoard-right {
    padding-left: 40px
}

.dashBoard-left {
    border-right: 1px solid #ccc;
    padding-left: 40px
}

.print-hsnv .hsnv-table td {
    white-space: inherit !important
}

.margin-page {
    padding-left: 0;
    padding-right: 6px
}

.content-table .col-md-12.margin-page {
    padding: 0;
}

.tab-content-stacked {
    width: calc(100% - 200px) !important;
    float: left !important
}

.nav-stacked > li {
    border: 1px solid #ccc
}

.a-edit {
    padding: 6px 12px !important
}

.tree-checked-ul li {
    padding-bottom: 5px
}

    .tree-checked-ul li label {
        float: left;
        padding-left: 5px;
        width: calc(100% - 15px);
        line-height: 18px
    }

.checked-content label {
    float: left;
    padding-left: 15px;
    width: calc(100% - 15px)
}

.nav-pills > li > a {
    border-radius: 0px !important;
    color: #000;
    padding: 3px 7px;
    line-height: 24px;
}

.nav-pills > li:hover a, .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
    color: #000;
    background: var(--color-table) !important
}

.tab-nav-pills {
    padding-top: 15px
}

.don-vi-tinh button {
    background: no-repeat
}

.don-vi-tinh ul {
    min-width: 120px
}

    .don-vi-tinh ul li {
        padding: 0px !important
    }

.quy-cach-edit-left {
    float: left;
    margin-top: 10px;
    font-size: 16px
}

.quy-cach-edit-right {
    float: right;
    color: #cdcd22;
    font-size: 16px;
    margin-top: 10px
}

.combobox-tree-filter {
    max-height: 250px;
    overflow-y: auto
}

.call-quy-cach {
    display: none;
    position: absolute;
    top: 46px;
    padding: 10px;
    border: 1px solid var(--color-primary) !important;
    background: #fff;
    z-index: 2;
    width: 266px;
    left: 245px;
    top: 32px
}

    .call-quy-cach .callprice-right input {
        width: 100% !important;
        border: none;
        border-bottom: 1px solid #ccc !important;
        line-height: 29px;
        width: 100%;
        outline: none
    }

    .call-quy-cach:before {
        border-bottom: 10px solid var(--color-primary);
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        top: -17px !important;
        right: 20px;
        margin: 0;
        border-top: 7px solid transparent;
        content: '';
        position: absolute;
        width: 0;
        height: 0
    }

.edit-td {
    border-top: none !important;
    border-right: none !important;
    border-left: none !important;
    border-radius: 0;
    text-align: right
}

.center-rowspan {
    vertical-align: middle !important;
    text-align: center
}

.magin-top-15 {
    margin-top: 15px
}

.magin-15 {
    margin-top: 15px;
    margin-bottom: 15px
}

.img-active-sms {
    width: 330px;
    height: 310px;
    border-radius: 10px;
    margin: auto;
    border: 2px solid var(--color-primary);
    box-shadow: 0 0 20px 3px #74a3b1
}

.img-active-zalo {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    width: 330px;
    height: 310px;
    border-radius: 10px;
    margin: auto;
    border: 2px solid var(--color-primary);
    box-shadow: 0 0 20px 3px #74a3b1
}

    .img-active-zalo img {
        width: 65%;
    }

    .img-active-zalo p a {
        padding: 10px;
        background: var(--color-main);
        color: #fff;
        font-weight: 700;
        font-size: 1rem;
        line-height: 0;
    }

.note-discount-money {
    margin-top: -60px
}

.ul-tree-location {
    width: 100%;
    max-height: 350px;
    overflow: scroll
}

    .ul-tree-location li {
        width: 165px;
        float: left;
        height: 150px;
        margin: 10px
    }

        .ul-tree-location li .time-zone {
            text-align: center
        }

            .ul-tree-location li .time-zone span {
                padding: 5px 15px 5px 15px;
                text-align: center;
                border-radius: 20px;
                border-radius: 20px;
                font-weight: 700
            }

        .ul-tree-location li .location-img {
            width: 80px;
            margin: auto
        }

        .ul-tree-location li .location-user {
            text-align: center
        }

            .ul-tree-location li .location-user i {
                margin-right: 5px;
                color: #b1dfec;
                font-size: 15px
            }

        .ul-tree-location li .location-work {
            font-weight: 700;
            font-size: 1rem;
            text-align: center
        }

.huy-kich-hoat {
    font-size: 1rem;
    padding: 10px;
    color: #fff;
    background: #b80a0a;
    font-weight: 700;
    float: right !important;
    top: 0;
    height: 34px;
    padding: 9px;
    line-height: 18px;
}

.nopadding-right {
    padding-right: 0px !important
}

.nopadding-left {
    padding-left: 0px !important
}

.huy-kich-hoat i {
    margin-right: 5px
}

.huy-kich-hoat:hover {
    color: #fff
}

.element {
    animation-name: stretch;
    animation-duration: 1s;
    animation-timing-function: ease-out;
    animation-delay: 1s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-play-state: running
}

@keyframes stretch {
    0% {
        transform: scale(.9)
    }

    100% {
        transform: scale(1.07)
    }
}

.img-active-sms img {
    width: 100%;
    height: 90%
}

.img-active-sms p {
    text-align: center
}

    .img-active-sms p a {
        padding: 15px;
        background: var(--color-main);
        color: #fff;
        font-weight: 700;
        font-size: 1rem;
        line-height: 0;
        z-index: 999
    }

.loader-padding {
    position: absolute;
    top: 0;
    border: 5px solid var(--hover-loadding);
    border-radius: 50%;
    border-top: 5px solid var(--color-primary);
    width: 60px;
    height: 60px;
    z-index: 9999;
    -webkit-animation: spin 0.5s linear infinite;
    animation: spin 0.5s linear infinite
}

.ac td {
    background: white !important
}

.table-hover-news thead tr th {
    border-bottom: 0px !important
}

.table-hover-news tr td {
    border-top: 1px solid #e6e6e6
}

.arrow-left-news {
    width: auto;
    left: -96px
}

    .arrow-left-news .price_2 input {
        width: 70px
    }

.btn-group-toolbar {
    WIDTH: auto !important;
    float: left;
    height: auto !important;
    padding: 15px 30px;
    margin-bottom: 5px;
    border-radius: 4px
}

.product-immage {
    width: 200px;
    float: left
}

.product-view-detail {
    width: calc(100% - 200px);
    float: left
}

.tab-news-modal .nav-tabs li:hover a {
    background: #fff
}

div.hsnv-word {
    page: printword
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg)
    }

    100% {
        -webkit-transform: rotate(360deg)
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

.grocery .bill-bxslide-news ul li {
    width: 100px;
    text-align: left;
    padding-left: 7px;
    color: #fff;
    background: #d6d6d6;
    height: 35px;
    border: 1px solid #d6d6d6
}

.bill-bxslide-news ul li.using {
    border-bottom: none !important;
    text-decoration: none;
    height: 35px;
    font-weight: 700;
    color: white !important;
    background: var(--color-main);
    z-index: 999;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0
}

.w701 .bill-bxslide-news ul li span {
    color: #fff
}

.add-tab-ban-le {
    border: 0px !important;
    background: #ebebeb !important
}

    .add-tab-ban-le a {
        height: 30px;
        background: #ebebeb !important
    }

        .add-tab-ban-le a:hover {
            border: 1px solid var(--color-primary) !important
        }

            .add-tab-ban-le a:hover i {
                color: var(--color-main) !important
            }

.tien-goi-y {
    width: 100%;
    border: 1px solid #fff;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 15px;
    float: left;
    position: relative
}

    .tien-goi-y ul {
        width: 100%
    }

        .tien-goi-y ul li a {
            color: #000
        }

        .tien-goi-y ul li {
            background: #fff;
            border-radius: 4px;
            padding: 10px;
            width: 110px;
            margin-right: 10px;
            float: left;
            text-align: center
        }

    .tien-goi-y:before {
        content: '\f0d7';
        font-family: 'Font Awesome 5 Pro';
        font-style: normal;
        font-weight: 400;
        text-decoration: inherit;
        color: #fff;
        font-size: 40px;
        position: absolute;
        top: 46px;
        right: 38px
    }

.list-unstyled {
    padding-left: 0;
    list-style: none
}

ul.timeline li {
    position: relative;
    border-bottom: 1px solid #e8e8e8;
    clear: both
}

.timeline .block {
    margin: 0 0 0 105px;
    border-left: 3px solid #e8e8e8;
    overflow: visible;
    padding: 10px 15px
}

.timeline .tags {
    position: absolute;
    top: 15px;
    left: 0;
    width: 84px;
    background: #1abb9c
}

.timeline a span {
    color: #fff
}

.timeline .tag {
    display: block;
    height: 30px;
    font-size: 1rem;
    padding: 8px
}

    .timeline .tag span {
        display: block;
        overflow: hidden;
        width: 100%;
        white-space: nowrap;
        text-overflow: ellipsis
    }

.tag:after {
    content: ' ';
    height: 30px;
    width: 0;
    position: absolute;
    left: 100%;
    top: 0;
    margin: 0;
    pointer-events: none;
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    border-left: 11px solid #1ABB9C
}

.timeline h2.title {
    position: relative;
    font-size: 1rem;
    margin: 0
}

    .timeline h2.title .fa-arrow-down {
        color: #1abb9c
    }

    .timeline h2.title .fa-arrow-up {
        color: #de750d
    }

    .timeline h2.title:before {
        content: '';
        position: absolute;
        left: -23px;
        top: 3px;
        display: block;
        width: 14px;
        height: 14px;
        border: 3px solid #d2d3d2;
        border-radius: 14px;
        background: #f9f9f9
    }

.timeline .byline {
    padding: .25em 0
}

.byline {
    font-size: 1rem;
    line-height: 1.3
}

.profile-title {
    margin-left: 30px;
    padding-bottom: 15px;
    margin-right: 30px;
    background: var(--color-title-edit);
    font-size: 16px;
    color: #000;
    font-weight: 700;
    padding: 15px
}

.profile-tabs-header li {
    width: auto;
    float: left;
    margin-right: 30px
}

    .profile-tabs-header li:last-child {
        margin: 0
    }

.profile-tabs .profile-tabs-header {
    width: 100%;
    float: left;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--color-primary)
}

    .profile-tabs .profile-tabs-header li a {
        border: 1px solid var(--color-primary)
    }

        .profile-tabs-header > li.active > a, .profile-tabs-header > li.active > a:hover, .profile-tabs-header > li.active > a:focus, .profile-tabs .profile-tabs-header li a:hover {
            background: var(--color-main);
            color: #fff
        }

.profile-tabs-header > li.active {
    border: none
}

.profile-content-tab {
    padding-top: 15px;
    padding-bottom: 15px
}

.profile-left {
    width: 310px;
    float: left
}

.profile-right {
    width: calc(100% - 310px);
    float: left
}

.profile-left .profile-left-img {
    width: 280px;
    height: 250px;
    margin: auto;
    border-radius: 5px
}

    .profile-left .profile-left-img img {
        width: 100%;
        height: 100%;
        border-radius: 4px
    }

.profile-left p {
    font-size: 13px
}

.profile-left h4 {
    color: #000;
    font-weight: 700;
    font-size: 16px
}

.profile-left p i {
    margin-right: 5px
}

.p-label {
    background: var(--color-main);
    padding: 5px;
    color: #fff;
    padding-left: 20px
}

    .p-label:after {
        content: ' ';
        width: 0;
        position: absolute;
        left: 100%;
        top: 0;
        margin: 0;
        pointer-events: none;
        border-top: 13px solid transparent;
        border-bottom: 15px solid transparent;
        border-left: 13px solid var(--color-primary)
    }

    .p-label:before {
        content: ' ';
        width: 0;
        position: absolute;
        left: 0;
        top: 0;
        margin: 0;
        pointer-events: none;
        border-top: 13px solid transparent;
        border-bottom: 15px solid transparent;
        border-left: 12px solid #fff
    }

.btn-gray {
    color: var(--color-button-hover)
}

    .btn-gray:hover {
        color: #0097c4
    }

.grocery-newss li:hover .list-price input, .grocery-newss li:hover .list-totle-price input, .grocery-newss li:hover .munber-bill, .grocery-newss li:hover .note-out input, .grocery-newss .bill-listchoose li:hover, .grocery-newss .bill-listchoose li:hover .price-fist, .grocery-newss .bill-listchoose ul li:nth-child(odd):hover, .grocery-newss .bill-listchoose li:hover .price-fist, .grocery-newss .bill-listchoose ul li:nth-child(odd):hover .note-out input {
    background: none !important
}

.margin-bot-15 {
    margin-bottom: 15px
}

.table-reponsive table tr td {
    font-size: 1rem
}

.table-split-td tr td {
    max-width: 280px;
    text-overflow: ellipsis;
    overflow: hidden
}

.input-span span {
    position: absolute;
    top: 0;
    right: 0;
    color: #000;
    width: 40px;
    height: 30px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    line-height: 30px;
    background: #ccc;
    text-align: center;
    font-size: 1rem
}

.input-span input {
    padding-right: 40px
}

.print-page-custom ul li {
    width: 100%;
    padding-bottom: 15px
}

.print-page-custom .print-img {
    float: left;
    width: 65px;
    height: 52px;
    border: 1px solid var(--color-primary);
    padding: 0
}

.print-page-custom .print-title {
    padding-left: 90px
}

.print-page-custom .print-link {
    padding-left: 90px
}

    .print-page-custom .print-link a {
        margin-left: 0;
        margin-top: 5px;
        height: 30px;
        line-height: 30px
    }

        .print-page-custom .print-link a:hover {
            color: #fff
        }

.select-kieu-in, .select-mau-in {
    width: 130px;
    margin-right: 15px;
    float: left
}

.list-select-print {
    width: 100%;
    float: left
}

.select-an-hien-mau-in {
    width: 150px;
    float: right
}

.select-ban-gia-in {
    width: calc(100% - 150px);
    float: left;
    padding-right: 30px
}

    .select-ban-gia-in .attention-b {
        margin-top: 0;
        padding-bottom: 30px
    }

.txtI {
    font-style: italic;
    font-size: 1rem
}

.table-thuoc-tinh-hh tr td {
    position: relative
}

.input-100 {
    width: 100%;
    float: left
}

.table-thuoc-tinh-hh table {
    width: 100% !important
}

.table-thuoc-tinh-hh {
    overflow: unset
}

.form-check-left label {
    margin-left: 0;
    white-space: initial;
    float: unset;
}

.table-not-hover tbody tr, .table-not-hover tbody tr td {
    background: #fff
}

    .table-not-hover tbody tr td:hover, .table-not-hover tbody tr:hover td {
        background: inherit
    }

.color-main {
    color: var(--color-main)
}

.td-check {
    color: var(--color-main)
}

.td-check-disabled {
    color: #ccc
}

.border-radius {
    border-radius: 4px !important
}

.btn-absolute {
    position: absolute;
    top: 0;
    height: 32px;
    right: 0
}

.btn-absolute-edit {
    position: absolute;
    top: 0;
    height: 32px;
    right: 40px
}

.choose-person-tt-hh ul li {
    height: 28px
}

.w30-bill-kitchen .bill-bxslide {
    padding-left: 9px
}

    .w30-bill-kitchen .bill-bxslide ul li {
        background: #d6d6d6;
        border: 1px solid #d6d6d6;
        color: #fff;
        height: 35px
    }

        .w30-bill-kitchen .bill-bxslide ul li.using {
            background: var(--color-main)
        }

.w70-bill-kitchen .tab-inner2 ul li a {
    background: #d6d6d6;
    border: 1px solid #d6d6d6;
    color: white !important;
    height: 35px
}

.w70-bill-kitchen .tab-inner2 ul li:hover a {
    background: #d6d6d6;
    border: 1px solid #d6d6d6;
    color: white !important
}

.w30-bill-kitchen .angle-left, .w30-bill-kitchen .angle-right {
    height: 35px;
    width: 15px;
    float: left
}

    .w30-bill-kitchen .angle-left i, .w30-bill-kitchen .angle-right i {
        color: var(--color-main);
        font-size: 20px;
        line-height: 30px
    }

.btn-hover-edit {
    position: sticky !important;
    right: 5px;
    display: none
}

    .btn-hover-edit a i {
        font-size: 19px;
        margin-right: 2px
    }

.form-work label {
    width: 75px;
    float: left
}

.form-work .label-small {
    width: 40px
}

.form-work .form-news {
    width: calc(100% - 75px);
    float: left
}

.form-work .form-news-small {
    width: calc(100% - 40px);
    float: left
}

.table-hover-news .btn-hover-edit a:hover i {
    background: #d1d2d9;
    text-align: center;
    border-radius: 20px;
    color: #000
}

.table-hover-news tr:hover td {
    background: #fff
}

.table-hover-news .btn-hover-edit a i {
    line-height: 33px;
    height: 32px;
    width: 35px;
    text-align: center
}

.btn-hover-edit {
    padding: 0px !important
}

.list-button-quy-cach {
    position: relative
}

    .list-button-quy-cach .call-quy-cach {
        left: -230px !important
    }

.dropdown-menu-news li {
    border-bottom: 1px dotted #fff;
    width: 100%;
    background: var(--color-main)
}

    .dropdown-menu-news li:last-child {
        border-bottom: none
    }

.dropdown-menu-news {
    border: 1px solid #fff;
    background: var(--color-main)
}

    .dropdown-menu-news li a {
        color: #fff
    }

    .dropdown-menu-news li:hover a {
        color: white !important;
        background: var(--color-main)
    }

.not-border {
    border: 0px !important
}

.btn-group-button {
    padding-top: 20px;
    margin-bottom: 20px;
    text-align: right;
    width: 100%;
    float: left
}

.form-check-left {
    position: relative
}

.vertical-center {
    vertical-align: middle !important;
    background: white !important
}

.thead-boder tr th {
    border: 1px solid white !important;
    border-top: none !important;
    padding: 10px;
    text-align: center
}

.bg-tfoot {
    background: #e9eaf2
}

.wd-colspan {
    width: 20px
}

.td-bold {
    font-weight: 700
}

.form-news-input-add .outselect {
    padding-right: 38px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

.form-news-input-add .input-group-btn {
    width: 40px;
    float: left;
    position: absolute;
    right: 0
}

    .form-news-input-add .input-group-btn i {
        font-size: 16px !important
    }

.sp-sl {
    padding: 5px 25px 5px 5px;
    background: #b2dfed;
    position: relative;
    margin: 1px;
    float: left
}

    .sp-sl a {
        position: absolute;
        top: 0;
        right: 5px;
        color: red
    }

.number-price-new {
    border: none;
    border-bottom: 1px solid #ccc;
    transition: none;
    box-shadow: none;
    border-radius: 0
}

    .number-price-new:focus, .number-price-new:active {
        outline: none !important;
        box-shadow: none
    }

.form-check-new .form-check-input {
    position: relative
}

    .form-check-new .form-check-input:after {
        content: '\f10c';
        font-family: 'Font Awesome 5 Pro';
        font-style: normal;
        font-weight: 400;
        text-decoration: inherit;
        color: #999;
        font-size: 17px;
        position: absolute;
        top: -7px;
        left: -1px;
        background: #fff
    }

    .form-check-new .form-check-input:checked:after {
        content: '\f192';
        font-family: 'Font Awesome 5 Pro';
        font-style: normal;
        font-weight: 400;
        text-decoration: inherit;
        color: var(--color-main);
        font-size: 17px;
        position: absolute;
        top: -7px;
        left: -1px;
        background: #fff
    }

.popup-chiet-khau .callprice-discount {
    width: 360px;
    border-radius: 4px;
    left: -130px;
    font-size: 1rem
}

.popup-chiet-khau .callprice::after {
    right: 97px
}

.popup-chiet-khau .callprice::before {
    right: 95px
}

.popup-chiet-khau .remove-popup {
    height: 30px;
    font-size: 18px;
    color: #ccc !important
}

.popup-chiet-khau ._form-chiet-khau span {
    width: 80px;
    float: left;
    line-height: 38px
}

.popup-chiet-khau ._form-chiet-khau input {
    width: calc(100% - 80px);
    border-bottom: 1px solid var(--color-primary)
}

.popup-chiet-khau .form-check label {
    font-weight: 400
}

.input-search-filter-full input {
    width: calc(100% - 36px);
    float: left
}

.input-search-filter-full .btn-search-icon {
    margin-right: 0
}

    .input-search-filter-full .btn-search-icon i {
        right: 10px
    }

.profile-r-name {
    width: 33%;
    float: left
}

.profile-r-tab {
    width: 67%;
    float: right
}

.p-l-not-active {
    background: var(--color-table) !important;
    color: black !important
}

    .p-l-not-active:after {
        border-top: 13px solid transparent;
        border-bottom: 15px solid transparent;
        border-left: 13px solid var(--color-table)
    }

.ac-remove-border {
    border: none
}

.ac-border {
    border-top: 1px solid var(--color-primary) !important;
    border-left: 1px solid var(--color-primary) !important;
    border-bottom: 1px solid var(--color-primary) !important
}

.ac-view-border td {
    border-top: 1px solid var(--color-primary) !important
}

.ac-view-border {
    border-left: 1px solid var(--color-primary) !important
}

.tree-phong-ban ul li p {
    width: 100%;
    padding-left: 15px
}

    .tree-phong-ban ul li p a {
        position: absolute;
        top: 5px;
        right: 5px;
        display: none
    }

        .tree-phong-ban ul li p a .fa-pencil-square-o {
            font-size: 16px
        }

.tree-phong-ban ul {
    margin-left: 5px
}

._ghi-chu-nhap-hang {
    width: 100%;
    float: left;
    margin-top: 5px
}

.is-show {
    display: block !important;
    max-width: 570px
}

.is-hide {
    display: none !important
}

.header-filter-layout {
    max-height: 260px;
    overflow: auto
}

.tablescroll {
    max-height: 450px;
    overflow: auto
}

.profile-total {
    width: 500px;
    padding-top: 15px;
    overflow: auto
}

    .profile-total .p-p-total label {
        font-weight: 700;
        width: 160px;
        font-size: 1rem;
        float: left
    }

    .profile-total .p-p-total div {
        width: calc(100% - 160px);
        font-size: 1rem;
        text-align: right
    }

    .profile-total .p-p-total {
        margin-bottom: 15px
    }

.d-chiet-khau-khoang {
    width: 100%;
    float: left
}

    .d-chiet-khau-khoang .ip-ck-tu {
        width: 70px;
        padding: 4px !important;
        float: left
    }

    .d-chiet-khau-khoang .ip-ck-den {
        width: 70px;
        padding: 4px !important;
        float: left
    }

    .d-chiet-khau-khoang span {
        width: 14px;
        float: left;
        padding-left: 5px;
        line-height: 30px
    }

.phan-tram-ck {
    width: 35px;
    height: 30px;
    float: right
}

    .phan-tram-ck .toogle {
        width: 35px;
        height: 23px;
        float: right;
        margin-top: 4px
    }

        .phan-tram-ck .toogle:before {
            transition: all 0.3s ease;
            width: 26px;
            height: 23px;
            top: 0;
            margin-top: 0;
            background: var(--color-main);
            left: -2px
        }

    .phan-tram-ck .poison {
        left: 0;
        font-size: 1rem !important;
        font-weight: 400;
        color: #fff;
        line-height: 25px !important
    }

    .phan-tram-ck .transverse {
        right: 9px;
        color: #fff;
        line-height: 26px !important;
        font-size: 9px !important;
        display: none
    }

    .phan-tram-ck .toogle.active-ck:before {
        left: 13px
    }

.active-ck .poison {
    display: none
}

.active-ck .transverse {
    display: block !important
}

.d-tk-khoang {
    width: 100%;
    float: left
}

    .d-tk-khoang .ip-ck-tu {
        width: 90px;
        float: left
    }

    .d-tk-khoang .ip-ck-den {
        width: 90px;
        float: left
    }

    .d-tk-khoang span {
        width: 20px;
        float: left;
        padding-left: 8px;
        line-height: 30px
    }

.div-col .form-group {
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px
}

.form-price .form-news {
    text-align: right
}

.sp-ck {
    color: #999;
    width: 50px;
    float: left
}

.form-sp-ck .div-form-text-ck {
    width: calc(100% - 50px);
    float: left
}

.header-filter .left-filter {
    width: 70%;
    float: left
}

.header-filter .right-filter {
    width: 30%;
    float: left
}

    .header-filter .right-filter input {
        width: 85%
    }

.tab-mr-header-l {
    width: 140px;
    float: left
}

.tab-mr-header-r {
    width: calc(100% - 140px);
    float: left
}

.tab-mr-header-l ul {
    padding: 0px !important;
    margin: 0;
    width: 100%;
    border-right: 1px solid var(--color-primary) !important
}

    .tab-mr-header-l ul li {
        width: 100%;
        float: left;
        padding: 0;
        padding-bottom: 10px;
        margin-left: 0
    }

        .tab-mr-header-l ul li a {
            text-align: center;
            border: none;
            background: #e6e7e8;
            padding: 15px
        }

        .tab-mr-header-l ul li.active a, .tab-mr-header-l ul li.active a:focus {
            background: white !important;
            color: var(--color-main) !important;
            border: 1px solid var(--color-primary);
            border-right: 5px solid var(--color-primary)
        }

.list-button {
    width: 550px;
    float: left
}

    .list-button button {
        width: 130px;
        float: left;
        margin: 5px;
        text-align: center;
        height: 35px !important;
        margin-top: 2px;
        margin-bottom: 18px;
        padding: 0px !important;
        background: #e6e7e8;
        border: none;
        box-shadow: none
    }

        .list-button button.btn-add-new {
            width: 120px;
            background: #eb4a24;
            border-radius: 4px
        }

        .list-button button:first-child {
            margin-left: 0
        }

        .list-button button.active {
            border: 1px solid var(--color-primary);
            color: var(--color-main) !important;
            background: #fff
        }

.input-date-hide {
    width: 140px !important;
    z-index: 0;
    height: 35px !important;
    float: left;
    border: 1px solid #e6e7e8;
    background: #e6e7e8;
    padding: 3px;
    box-shadow: none;
    margin: 2px
}

.list-button .input-date-hide.active {
    border: 1px solid var(--color-primary);
    color: var(--color-main) !important;
    background: #fff
}

.tab-mr-content .list-title {
    width: calc(100% - 550px);
    float: left
}

    .tab-mr-content .list-title ._title-so-du-r {
        width: 550px;
        float: right;
        border-radius: 4px;
        border: 1px solid var(--color-primary);
        height: 40px
    }

._title-so-du-r .lb-title1, ._title-so-du-r .lb-title2 {
    width: 210px;
    float: left;
    padding-top: 11px;
    padding-left: 15px
}

.lb-title1 {
    margin-right: 15px
}

    .lb-title1 label {
        width: 100px;
        float: left;
        font-weight: 300
    }

.lb-title2 label {
    width: 75px;
    float: left;
    font-weight: 300
}

.lb-title2 div, .lb-title1 div {
    font-weight: 700
}

._title-so-du-r button {
    border-radius: 4px;
    margin-top: 4px
}

.form-width-btn-add button {
    position: absolute;
    top: 0
}

.form-width-btn-add input {
    padding-right: 40px
}

.form-check-modal input {
    float: left;
    width: 0;
    margin-right: 5px
}

.form-check-modal label {
    line-height: 25px !important
}

.tr-title td h5 {
    color: var(--color-main);
    font-weight: 700;
    margin-bottom: 0
}

.tfoot-tong tr td {
    background: var(--color-table) !important;
    color: #000;
    font-weight: 700
}

.checkbox-modal:after {
    content: none !important
}

.checkbox-modal:checked:after {
    content: none !important
}

.checkbox-modal:before {
    content: '\f096';
    font-family: 'Font Awesome 5 Pro';
    background: #fff;
    font-size: 18px;
    color: #777
}

.checkbox-modal:checked:before {
    content: '\f046';
    font-family: 'Font Awesome 5 Pro';
    background: #fff;
    font-size: 18px;
    color: var(--color-main)
}

.type-chiet-khau {
    position: relative;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 4px
}

.chi-tiet-hoa-hong {
    padding-left: 10px;
    padding-top: 5px;
    padding-bottom: 5px
}

.type-chiet-khau:after, .type-chiet-khau:before {
    content: '\f0de';
    font-family: 'Font Awesome 5 Pro';
    font-style: normal;
    font-weight: 400;
    text-decoration: inherit;
    color: #fff;
    font-size: 24px;
    position: absolute;
    top: -14px;
    left: 21px;
    height: 5px
}

.type-chiet-khau:before {
    color: #ccc;
    top: -15px;
}

.nav-news > li.active > a, .nav-news > li.active > a:hover, .nav-news > li.active > a:focus {
    font-weight: 700;
    color: var(--color-main);
    background: #fff;
    border: 1px solid var(--color-primary);
    border-bottom: none !important;
    border-radius: 0;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    margin-bottom: 1px
}

.nav-news > li > a {
    color: #000;
    font-weight: 700;
    border-radius: 0;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border: 1px solid #e6e6e6;
    background: #f5f5f5
}

.nav-news > li:hover a {
    color: #000;
    background: #fff
}

.title-table-ck {
    padding: 8px;
    background: var(--color-table);
    font-weight: 700;
    margin-bottom: 0
}

    .title-table-ck .checkbox-modal:checked:before, .title-table-ck .checkbox-modal:before {
        background: var(--color-table);
        color: var(--color-main)
    }

.btn-chon-nhan-vien div {
    width: 100%;
    padding: 8px;
    color: #fff;
    background: var(--color-main);
    margin-bottom: 15px;
    text-align: center;
    font-weight: 700
}

    .btn-chon-nhan-vien div i {
        margin-right: 5px;
        margin-left: 5px
    }

.ul-cai-dat-hoa-hong-r li:hover a, .ul-nhan-vien-ap-dung li:hover a {
    color: var(--color-main)
}

.ul-nhan-vien-ap-dung li a {
    position: absolute;
    top: 8px;
    font-size: 20px;
    left: 4px;
    color: #ccc
}

.modal-1024 {
    width: 1024px
}

.dasb-head-filter {
    width: 300px;
    float: left;
    position: relative;
    display: none
}

    .dasb-head-filter i {
        position: absolute;
        top: 8px;
        right: 10px;
        color: #ccc;
        font-size: 13px
    }

    .dasb-head-filter input {
        padding-right: 30px
    }

.dasb-head-add-fast {
    width: 130px;
    float: right;
    position: relative;
    margin-left: 15px
}

    .dasb-head-add-fast i {
        position: absolute;
        right: 10px;
        top: 8px;
        font-size: 16px;
        color: #999
    }

.dasb-header {
    padding-top: 15px;
    padding-bottom: 10px
}

.dasb-head-add-fast .selec-person ul {
    max-height: 100%
}

    .dasb-head-add-fast .selec-person ul li {
        background: #fff
    }

        .dasb-head-add-fast .selec-person ul li:hover a {
            color: #ff4d71 !important
        }

        .dasb-head-add-fast .selec-person ul li:hover {
            background: white !important
        }

.dasb-birtday-now {
    margin-bottom: 15px;
    padding-bottom: 15px;
    background: #fff
}

.dasb-list-work ul li i {
    width: 30px;
    font-size: 17px;
    float: left
}

.dasb-list-work ul li div.dasb-li-text {
    font-size: 1rem;
    width: calc(100% - 30px);
    float: left
}

.dasb-list-work ul li div {
    font-size: 1rem
}

.dasb-list-work ul li {
    position: relative;
    border: none;
    width: 100%
}

    .dasb-list-work ul li div.dasb-li-text a {
        width: 30px;
        font-size: 1rem;
        text-decoration: underline;
        float: right
    }

    .dasb-list-work ul li i.fa-birthday-cake {
        color: #ff4d71
    }

    .dasb-list-work ul li i.fa-cubes {
        color: #1bb0a6
    }

    .dasb-list-work ul li i.fa-calendar-check-o {
        color: #ef6c00
    }

.dasb-list-work ul {
    width: 100%;
    float: left;
    padding-left: 30px;
    padding-right: 30px
}

.dash-btn-group-head i {
    position: relative;
    top: 1px;
    color: #fff;
    left: -2px;
    font-size: 13px
}

.dash-btn-group-head .dropdown-menu {
    z-index: 99;
    margin-left: -30px !important
}

    .dash-btn-group-head .dropdown-menu li a {
        color: #333
    }

    .dash-btn-group-head .dropdown-menu li {
        background: white !important;
        border-bottom: 1px dotted #ccc
    }

        .dash-btn-group-head .dropdown-menu li:last-child {
            border-bottom: none
        }

        .dash-btn-group-head .dropdown-menu li:hover a {
            color: #ff4d71
        }

.dash-btn-group-head button {
    margin-left: 0;
    background: #ff4d71
}

    .dash-btn-group-head button:hover {
        background: #e8264d !important
    }

.form-modal-send-sms .form-group label {
    width: 180px
}

.form-modal-send-sms .form-group .form-news {
    width: calc(100% - 180px)
}

.form-modal-send-sms {
    margin-bottom: 30px
}

.outselectmodalsms ul li.li-input-span {
    float: left;
    margin: 2px
}

.outselectmodalsms .choose-person {
    max-height: 250px
}

.outselectmodalsms ul li.li-input-span .fa-times {
    color: red
}

._date-birday .calendar.left .daterangepicker_input, ._date-birday .calendar.right .daterangepicker_input, ._date-birday .calendar.left .calendar-table table thead tr th select.yearselect, ._date-birday .calendar.right .calendar-table table thead tr th select.yearselect, ._date-birday .calendar.right .calendar-table table thead tr th.next i, ._date-birday .calendar.right .calendar-table table thead tr th.prevRight i, ._date-birday .calendar.left .calendar-table table thead tr th.nextleft i, ._date-birday .calendar.left .calendar-table table thead tr th.prev i {
    display: none !important
}

._date-birday .calendar.left .calendar-table table thead tr th select.monthselect, ._date-birday .calendar.right .calendar-table table thead tr th select.monthselect {
    width: 100%
}

.btn-send-sms {
    background: #0097c4
}

    .btn-send-sms:hover {
        background: #0182a9
    }

.form-chi-tiet-cv .uu-tien-tat-ca {
    width: 45px;
    border-radius: 4px;
    background: #0097c4;
    height: 20px
}

.overview-heading-mobile {
    display: none
}

.main-menu-mobile {
    display: none
}

.drop-filter-chart {
    width: 180px;
    margin-right: 10px;
    z-index: 99
}

    .drop-filter-chart .drop-text i {
        position: absolute;
        top: 3px;
        right: 0
    }

    .drop-filter-chart .selec-person {
        border-top: 1px solid #ccc
    }

    .drop-filter-chart .drop-text div {
        text-align: right;
        padding-right: 15px
    }

    .drop-filter-chart .selec-person ul li a {
        font-weight: 400
    }

.dasb-select-ul li a {
    padding-left: 5px
}

.list-radio-work li {
    width: auto;
    float: left;
    padding-right: 15px
}

    .list-radio-work li label {
        width: auto !important;
        padding-right: 10px;
        font-weight: 100 !important
    }

    .list-radio-work li input[type=radio]:after {
        content: none !important
    }

    .list-radio-work li input[type=radio]:before {
        content: '\f111';
        font-family: 'Font Awesome 5 Pro';
        font-style: normal;
        font-weight: 400;
        text-decoration: inherit;
        font-size: 18px;
        padding-right: 5px
    }

    .list-radio-work li input[type=radio]:checked:before {
        content: '\f058';
        font-family: 'Font Awesome 5 Pro';
        font-style: normal;
        font-weight: 400;
        text-decoration: inherit;
        font-size: 18px;
        padding-right: 5px
    }

.li-ut-cao label {
    color: #ff6b77
}

.li-ut-tb label {
    color: #28a745
}

.li-ut-thap label {
    color: #ecb202
}

.work-ttt {
    background: #f0f1f1;
    padding-top: 10px;
    padding-bottom: 3px;
    margin-top: -19px;
    border: 1px solid #ccc;
    border-radius: 4px;
    border-top: 0
}

.modal-lg-work {
    width: 75%
}

.work-ttt .form-group label {
    width: 110px !important
}

.work-ttt .form-group .form-news {
    width: calc(100% - 110px) !important
}

.work-ttt-group-btn a {
    padding: 5px;
    margin-left: 10px;
    padding-right: 25px;
    color: #777;
    border-right: 1px solid #ccc
}

    .work-ttt-group-btn a:last-child {
        border-right: none
    }

    .work-ttt-group-btn a i {
        font-size: 1rem
    }

    .work-ttt-group-btn a span {
        padding-left: 10px
    }

.work-ttt-group-btn {
    border-top: 1px solid #ccc;
    padding-top: 5px
}

    .work-ttt-group-btn a:hover {
        color: #333
    }

.form-more-work {
    cursor: pointer;
    border: none !important;
    border-bottom: 1px solid #ccc !important;
    border-radius: 0px !important;
    background: #f0f1f1;
    box-shadow: none !important
}

    .form-more-work:focus, .form-more-work:active {
        outline: none !important;
        box-shadow: none
    }

.work-change-kh-ncc {
    position: absolute;
    right: 5px;
    top: 0;
    font-size: 18px;
    color: #777
}

.tt-huy {
    color: #dc3545
}

.tt-thanh-cong {
    color: #28a745
}

.tt-dang-thuc-hien {
    color: #17a2b8
}

.group-parent-work li div a {
    padding-left: 10px
}

.group-parent-work li div i {
    font-size: 13px
}

.form-date-singer {
    width: 25% !important;
    position: relative;
    float: left;
    margin-right: 4%
}

.form-time-singer {
    width: 15% !important;
    position: relative;
    float: left
}

.form-text-singer {
    font-weight: 700;
    float: left;
    width: 12%;
    text-align: center
}

.add-icon-drop:after {
    content: '\f0d7';
    font-family: 'Font Awesome 5 Pro';
    position: absolute;
    bottom: 0;
    right: 10px;
    color: #999;
    font-size: 13px
}

.work-add-drop-customer-p {
    margin: 0px !important;
    padding: 0px !important
}

.dash-gr-tt-ct {
    width: 140px;
    font-size: 1rem;
    float: left;
    color: #000;
    margin-right: 15px;
    margin-top: 0;
    line-height: 30px;
    position: relative
}

    .dash-gr-tt-ct div {
        width: 100%;
        float: left;
        margin: 0;
        line-height: 20px
    }

    .dash-gr-tt-ct span {
        font-weight: 700
    }

.dash-gr-text-ct img {
    width: 45px;
    float: left;
    margin-top: 3px
}

.dash-gr-text-ct div.gr-text-right {
    width: calc(100% - 50px);
    padding-top: 4px;
    padding-left: 15px;
    font-size: 15px;
    float: left
}

    .dash-gr-text-ct div.gr-text-right p {
        margin: 0;
        position: relative
    }

    .dash-gr-text-ct div.gr-text-right a.drop-thu-chi {
        color: #8c98b5;
        font-size: 1rem;
        padding-left: 5px
    }

.dash-gr-tang-giam {
    width: 300px;
    float: left;
    font-size: 1rem;
    color: #000;
    margin-top: 10px;
    line-height: 30px;
    text-align: right
}

    .dash-gr-tang-giam span {
        font-weight: 700;
        padding-left: 10px
    }

.dash-gr-text-ct {
    width: calc(100% - 705px);
    float: left
}

.dash-gr-sum {
    padding-top: 1px;
    width: 100%;
    float: left;
    padding-bottom: 15px;
    background: #fff;
    border-bottom: 1px solid #ececec;
    margin-bottom: 15px;
    padding-left: 0;
    padding-right: 0;
    border-radius: 0
}

.dash-sum h4 {
    margin-bottom: 7px;
    font-size: 15px;
    font-weight: 700;
    color: var(--color-main)
}

.dash-gr-text-ct div.gr-text-right span {
    font-size: 20px
}

.dash-color-blue {
    color: #0097c4
}

.dash-color-red {
    color: #ff5d7e
}

.dash-color-yelow {
    color: #60f
}

.dash-sum {
    background: #fff;
    float: left;
    margin-bottom: 15px;
    border-radius: 5px;
    padding-left: 40px;
    padding-right: 40px
}

.dash-gr-sum-last {
    border: none;
    margin-bottom: 10px
}

.dash-gr-text-ct div.gr-text-right ul li a {
    color: #777
}

.dash-gr-text-ct div.gr-text-right div {
    width: 100%;
    float: left;
    font-weight: 700;
    position: relative;
    color: #000
}

.col-work-page3 {
    width: 28%;
    padding-left: 15px;
    padding-right: 15px;
    float: left
}

.col-work-page2 {
    width: 36%;
    padding-left: 15px;
    float: left;
    padding-right: 15px
}

.col-work-page5 {
    width: 64%;
    padding-left: 15px;
    float: left;
    padding-right: 15px
}

.border-none {
    border: none
}

.nhat-ky-hoat-dong ul {
    width: 100%;
    float: left;
    padding-left: 30px;
    padding-right: 30px
}

    .nhat-ky-hoat-dong ul li {
        float: left;
        border-bottom: 1px solid #ccc;
        color: #000;
        line-height: 22px;
        width: 100%;
        padding-top: 15px
    }

        .nhat-ky-hoat-dong ul li .img-ind {
            width: 30px;
            height: 28px;
            top: 5px;
            border-radius: 100%;
            text-align: left;
            line-height: 28px;
            float: left
        }

        .nhat-ky-hoat-dong ul li .diary {
            width: calc(100% - 30px);
            float: left
        }

.line-border {
    float: right;
    position: absolute;
    right: 0;
    top: -11px;
    height: 30px;
    width: 1px;
    background: #ccc;
    border: none
}

.dash-color-dark {
    color: #8c98a2
}

.dash-gr-tang-giam p .p-span-text {
    float: left;
    font-weight: 400
}

.menu-drop-3 {
    width: 700px;
    background: var(--color-main);
    position: absolute;
    height: auto;
    right: -6px;
    top: 47px;
    border-top: 1px solid #fff;
    display: none
}

    .menu-drop-3 ul.menu-ul-drop {
        display: block !important;
        top: 0px !important;
        padding: 0px !important;
        width: 100% !important;
        float: left;
        position: relative !important
    }

.menu-drop1 ul.menu-ul-drop li {
    padding: 0
}

    .menu-drop1 ul.menu-ul-drop li a div {
        padding: 12px 10px
    }

.menu-drop3 ul.menu-ul-drop li a {
    text-decoration: none;
}

    .menu-drop3 ul.menu-ul-drop li a div {
        padding: 10px 11px;
        display: flex;
        align-items: center;
    }

        .menu-drop3 ul.menu-ul-drop li a div .material-icons {
            width: 30px;
            text-align: center;
            margin-right: 10px;
        }

.menu-drop3 ul.menu-ul-drop li {
    padding: 0
}

.menu-drop-3 .menu-drop1 {
    width: 30%;
    float: left;
    position: relative
}

.menu-drop-3 .menu-drop3 {
    width: 40%;
    float: left
}

    .menu-drop-3 .menu-drop3 ul.menu-ul-drop {
        border-right: none
    }

    .menu-drop-3 .menu-drop3 .menu-drop-ul-style-color {
        display: block !important;
        top: 0px !important;
        padding: 5px 5px 12px 15px !important;
        width: 100% !important;
        float: left;
        position: relative !important
    }

        .menu-drop-3 .menu-drop3 .menu-drop-ul-style-color li {
            width: auto;
            float: left;
            padding: 5px !important
        }

            .menu-drop-3 .menu-drop3 .menu-drop-ul-style-color li a {
                width: 50px;
                height: 50px;
                float: left;
                border-radius: 4px;
                border: 1px solid #fff
            }

.menu-border-right-line {
    position: absolute;
    top: 12px;
    right: 0;
    width: 1px;
    height: 245px;
    background: #fff;
    background: #fff;
    z-index: 99999
}

.header-top ul li:hover div.menu-drop-3 {
    display: block
}

#lblNoHienTai {
    float: right;
    padding-right: 3px
}

.form-check-thu-chi label {
    width: 100% !important
}

.form-check-thu-chi {
    margin-bottom: 0
}

.price-border-bot {
    border: none;
    border-bottom: 1px solid #ccc
}

.han-su-dung-lo span {
    font-weight: 700;
    font-size: 1rem
}

.han-su-dung-lo .number-price {
    float: inherit;
    margin-left: 10px;
    margin-right: 10px
}

.tab-so-do li a {
    padding: 10px;
    background: #d6d6d6;
    color: white !important
}

.tab-so-do li.active a, .tab-so-do li.active > a:focus {
    background: var(--color-main)
}

.tab-so-do li a:hover, .tab-so-do li:hover a {
    color: white !important;
    background: var(--color-main) !important;
    border-bottom: 1px solid var(--color-primary)
}

.tab-so-do li:hover {
    border-bottom: 1px solid var(--color-primary)
}

.tab-so-do li.active, .tab-so-do li.active > a:focus {
    border-bottom: 1px solid var(--color-primary)
}

.tab-so-do li {
    border-bottom: 1px solid #d6d6d6
}

.tab-location {
    background: var(--color-main);
    border: none !important
}

    .tab-location li {
        background: var(--color-main);
        border: none !important
    }

        .tab-location li a {
            color: white !important;
            border-radius: 0px !important;
            border-bottom: none
        }

.tab-news-modal .tab-location > li.active > a, .tab-news-modal.tab-location > li.active > a:hover, .tab-news-modal .tab-location > li.active > a:focus {
    background: #b1dfec !important;
    color: black !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important
}

.tab-news-modal .tab-location > li.active:hover > a {
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 2px solid #ff8a00 !important
}

.tab-location > li:hover a {
    background: var(--color-primary) !important
}

.tab-news-modal .tab-location li a {
    border-top: 1px solid var(--color-primary) !important;
    border-left: 1px solid var(--color-primary) !important
}

.menu-room .tab-location li {
    padding-top: 4px;
    padding-left: 2px
}

.menu-room .tab-location {
    padding-left: 5px
}

    .menu-room .tab-location li a {
        background: var(--color-primary);
        border-top-left-radius: 4px !important;
        border-top-right-radius: 4px !important;
        padding: 9px 15px
    }

    .menu-room .tab-location > li.active > a, .menu-room .tab-location > li.active > a:hover, .menu-room .tab-location > li.active > a:focus {
        border-bottom: 4px solid #ff8a00 !important;
        background: white !important
    }

.list-room {
    width: 100%;
    float: left
}

    .list-room li {
        width: 165px;
        float: left;
        height: 130px;
        margin-left: 15px;
        border-radius: 4px;
        border: 1px solid #ccc;
        margin-top: 15px
    }

        .list-room li .room-head {
            text-align: center;
            margin: 0 10px;
            color: #333;
            border-bottom: 1px solid #ccc
        }

            .list-room li .room-head h5 {
                color: #ff8a00;
                font-weight: 700
            }

                .list-room li .room-head h5 span {
                    color: #333;
                    font-weight: 400;
                    font-size: 1rem
                }

        .list-room li .room-body {
            border-bottom: none;
            color: #333;
            padding: 0 10px;
            margin-top: 15px;
            font-size: 1rem
        }

            .list-room li .room-body p label {
                width: 60px;
                float: left;
                font-weight: 400
            }

            .list-room li .room-body p {
                width: 100%;
                float: left;
                margin-bottom: 2px
            }

        .list-room li a {
            width: 100%;
            float: left;
            height: 128px
        }

            .list-room li a:hover, .list-room li:hover a {
                background: #f0f1f1
            }

.sp-room-time {
    padding: 6px 8px;
    border-radius: 15px;
    background: #b2dfed
}

.room-emty {
    color: #0097c4 !important
}

.ft-room-time {
    color: #0097c4 !important;
    padding-left: 10px
}

.box-note-print {
    width: 97%;
    float: left;
    position: absolute;
    background: #fff;
    z-index: 99;
    top: 105px;
    box-shadow: 1px 0 8px 2px #ccc;
    padding: 20px 30px
}

    .box-note-print h4 {
        font-weight: 700;
        margin-top: 0;
        font-size: 20px
    }

    .box-note-print .note-print-page li label {
        font-weight: 700;
        width: 200px;
        float: left
    }

.note-print-page {
    width: 100%;
    float: left;
}

.div-print-page {
    padding-right: 15px
}

.div-print-page, .div-print-page2 {
    width: 33.333%;
    float: left
}

.list-note-print .note-print-page:last-child {
    padding-right: 0
}

.box-note-print .note-print-page li {
    width: 100%;
    float: left;
    margin-bottom: 10px;
    font-size: 1rem
}

.list-note-print {
    max-height: 550px;
    overflow: auto
}

    .list-note-print h5 {
        color: var(--color-main);
        font-weight: 700;
        margin-top: 5px;
        font-size: 16px;
        text-decoration: underline
    }

.form- {
    width: 130px
}

.image-transport {
    width: 100%;
    display: table;
    text-align: center
}

.filter-so-do {
    float: left
}

.input-so-do input {
    width: 280px;
    border: 1px solid #7c7878 !important;
    margin-top: 5px;
    padding-left: 30px
}

.input-so-do i {
    font-size: 1rem;
    line-height: 10px;
    position: absolute;
    top: 15px;
    left: 10px
}

.input-so-do {
    position: relative;
    float: left
}

.total-so-do {
    float: left;
    padding-left: 15px;
    line-height: 45px;
    font-size: 1rem;
    color: #666
}

.input-so-do input:focus, .input-so-do input:hover {
    box-shadow: none !important
}

.footer-total {
    width: 100%;
    float: left
}

.sp-room-edit-time {
    padding: 3px 5px;
    background: #808285;
    border-radius: 22px;
    color: #fff;
    margin-left: 5px
}

.sp-room-play {
    padding: 5px 30px;
    background: #b2dfed;
    border-radius: 22px;
    color: #333;
    margin-left: 5px
}

.change-vi-tri {
    border: 1px solid var(--color-primary);
    border-radius: 4px;
    padding: 0 5px;
    float: left;
    width: 65px;
    text-align: center;
    font-size: 11px
}

.room-text-hang-hoa {
    width: 120px;
    float: left
}

.room-text-hang-hoa {
    width: 120px;
    float: left
}

.change-vi-tri.active {
    color: #ccc;
    border: 1px solid #ccc
}

.room-view-vi-tri {
    width: 100%;
    float: left;
    padding-left: 25px;
    margin-bottom: 5px
}

.room-position {
    min-width: 160px;
    float: left
}

    .room-position label {
        margin-right: 10px;
        font-weight: 400;
        font-size: 1rem;
        color: #777;
        float: left;
        line-height: 25px
    }

    .room-position div {
        padding: 2px 8px;
        background: #b2dfed;
        border-radius: 15px;
        float: left;
        min-width: 70px;
        text-align: center
    }

    .room-position.overtime div {
        color: #fff;
        background: red
    }

    .room-position.overtime label {
        color: red
    }

.room-view-vi-tri .room-position:nth-child(1), .room-view-vi-tri .room-position:nth-child(4) {
    min-width: 130px
}

.list-pop-room li {
    width: auto;
    float: left;
    padding: 10px 13px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 10px;
    margin-left: 5px;
    margin-right: 5px
}

    .list-pop-room li a {
        width: 100%;
        color: #333
    }

.list-pop-room {
    margin: 15px 0;
    width: 100%;
    float: left;
    overflow: auto;
    max-height: 300px
}

    .list-pop-room li a strong {
        font-size: 16px;
        color: #ff8a00
    }

.time-room {
    width: 55px;
    border: none;
    background: #b2dfed;
    text-align: center
}

    .time-room:focus {
        outline: none
    }

.room-position div i {
    font-size: 17px
}

.parent-detail {
    padding-left: 15px;
    display: none
}
/*.chose_kieubang-hoa-hong li:nth-child(3), .chose_kieubang-hoa-hong li:nth-child(4), .chose_kieubang-hoa-hong li:nth-child(5) {
    width: calc(100% - 15px);
    float: right;
    display: none
}*/
.form-popup-chiet-khau {
    margin-bottom: 10px;
    width: 100%;
    float: left
}

    .form-popup-chiet-khau label {
        font-weight: 400;
        width: 370px;
        float: left;
        line-height: 30px
    }

    .form-popup-chiet-khau .pop-input-chiet-khau {
        width: calc(100% - 370px);
        float: left
    }

.w590 {
    width: 590px
}

.font-w-400 {
    font-weight: 400
}

.lb-check-note-ck span {
    font-weight: 700
}

.lb-check-note-ck {
    line-height: 15px;
    font-size: 1rem;
    line-height: 18px;
    margin-top: 0
}

.ft-italic {
    font-style: italic
}

.w65 {
    width: 65px
}

.w415 {
    width: 415px
}

    .w415 .form-popup-chiet-khau label {
        width: 190px
    }

    .w415 .form-popup-chiet-khau .pop-input-chiet-khau {
        width: calc(100% - 190px)
    }

.checkycck {
    margin-left: 10px;
    margin-top: 10px
}

.sp-note {
    font-size: 1rem;
    color: #999
}

.bill-listmenu-hoadon {
    padding: 20px 20px 0 22px
}

    .bill-listmenu-hoadon li {
        margin: 5px 6px 10px 6px;
        width: 150px !important
    }

.list-room-hoa-don li .room-body {
    padding: 0 5px
}

.list-room-hoa-don li {
    width: 164px;
    margin-left: 5px;
    margin-top: 5px
}

    .list-room-hoa-don li .room-head {
        margin: 0 5px
    }

.list-room-hoa-don li {
    width: 164px;
    margin-left: 5px;
    margin-top: 5px
}

    .list-room-hoa-don li .sp-room-time {
        padding: 4px
    }

    .list-room-hoa-don li .list-room {
        padding-top: 5px
    }

.add-Save-draft {
}

.btn-Save-draft {
    background: var(--color-main) !important
}

.list-room li .room-head h5, .list-room-hoa-don li .room-head span {
    white-space: nowrap;
    overflow: hidden;
    display: block;
    text-overflow: ellipsis
}

.filter-vi-tri nav, .search-hh-hd nav {
    width: calc(100% - 190px);
    float: left
}

.filter-vi-tri .total-so-do {
    line-height: 35px
}

.fl-left {
    float: left
}

.op-modal-conttent {
    margin-bottom: 40px
}

.btn-group-list-phieu button {
    padding: 15px 40px
}

.table-scroll-new {
    overflow: auto
}

.tr-cham-cong td {
    border-right: 1px solid #ccc
}

    .tr-cham-cong td:last-child {
        border-right: none
    }

.modal-nhan-su .form-news input[type='number'], .modal-nhan-su .form-news input[type='text'] {
    width: 100%;
    float: left
}

.modal-nhan-su .form-group {
    width: 100%;
    float: left
}

.modal-nhan-su input[type='checkbox'] {
    width: auto
}

#ui-timepicker-div .ui-widget-header {
    border: 1px solid var(--color-primary) !important;
    background: var(--color-main) !important;
    color: white !important
}

    #ui-timepicker-div .ui-state-default, #ui-timepicker-div .ui-widget-content .ui-state-default, #ui-timepicker-div .ui-widget-header .ui-state-default {
        border: 1px solid #ffffff !important;
        background: #ffffff !important;
        font-weight: normal !important;
        color: #454545 !important;
        text-align: center !important
    }

#ui-timepicker-div .ui-timepicker-table td {
    background: white !important
}

#ui-timepicker-div .ui-state-active, #ui-timepicker-div .ui-widget-content .ui-state-active, #ui-timepicker-div .ui-widget-header .ui-state-active, #ui-timepicker-div a.ui-button:active, #ui-timepicker-div .ui-button:active, #ui-timepicker-div .ui-button.ui-state-active:hover {
    color: white !important;
    background: var(--color-main) !important
}

.hoadon-text {
    width: 550px;
    float: left
}

.hoadon-number {
    width: calc(100% - 622px) !important;
    float: left
}

.hoadon-text .bill-number {
    width: 28px;
    float: left
}

.hoadon-text .list-nameproduct {
    width: calc(100% - 148px) !important;
    float: left;
    margin-top: 18px
}

.i-con-ban-hang {
    float: right
}

.hoadon-number .munber-bill {
    padding: 0
}

.hdhh-name {
    font-weight: 700
}

.display-hd-stt {
    width: 50px
}

.display-hd-sp {
    width: calc(100% - 250px)
}

.display-hd-sl {
    width: 80px
}

.display-hd-price {
    width: 120px
}

.table-display-view thead tr th {
    background: var(--color-main) !important;
    color: #fff;
    height: 40px;
    border: none;
    font-size: 16px;
    font-weight: 400
}

.table-display-view thead tr {
    border: 1px solid var(--color-primary)
}

.sp-view-tenhh {
    font-weight: 700;
    color: #555;
    font-size: 16px
}

.sp-view-dinhluong {
    color: #006fb1
}

.td-view-sp p {
    margin-bottom: 5px
}

.view-vitri p span {
    float: left
}

.view-title-ghichu {
    width: 80px;
    float: left
}

.view-ghichu p {
    float: left;
    width: 100%
}

.view-lo-sxngay {
    width: 50%;
    float: left
}

.sp-view-ngaysx {
    color: #00a69c;
    font-weight: 700
}

.sp-view-hansd {
    color: red;
    font-weight: 700
}

.view-lo-sp {
    padding-bottom: 5px
}

.td-view-sp .view-lo-sp {
    margin-top: 5px
}

.td-view-lo p {
    margin-bottom: 5px
}

.sp-view-km {
    color: red
}

.tr-row {
    border-left: 1px solid var(--color-primary)
}

.table-display-view tbody {
    border: 1px solid var(--color-primary);
    border-left: none
}

    .table-display-view tbody tr td, .table-display-view tbody tr:last-child {
        border: none;
        font-size: 1rem;
        white-space: inherit !important
    }

    .table-display-view tbody tr {
        border-bottom: 1px dotted #ccc
    }

.view-image {
    width: 66.66666%;
    float: left;
    position: fixed
}

.view-toltal-sp {
    width: 33.3333%;
    float: right;
    margin-bottom: 165px
}

.view-ghichu, .view-vitri {
    color: #666
}

    .view-vitri .vitri {
        padding: 2px 8px;
        background: #b2dfed;
        border-radius: 15px;
        font-size: 1rem;
        color: #333;
        float: left;
        min-width: 50px;
        text-align: center
    }

.view-footer {
    height: 165px;
    background: var(--color-main) !important;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    position: fixed;
    padding: 5px;
    bottom: 0;
    width: 33.3333%
}

.table-scroll-view {
    overflow: auto;
    padding-top: 40px
}

.table-scroll-fix {
    position: fixed;
    width: 33.3333%;
    z-index: 999999
}

.view-total-sum {
    width: 65%;
    float: right
}

    .view-total-sum .form-group {
        margin: 0;
        border-bottom: 1px dotted
    }

        .view-total-sum .form-group .form-news {
            text-align: right
        }

.i-hdbl-sodo {
    display: none
}

.list-kv ul li {
    padding: 6px;
    font: 400 14px menu
}

.number-search {
    text-align: right;
    border-radius: 0
}

.hl-filter-column {
    width: 20px;
    float: left
}

.hr-filter-column {
    width: calc(100% - 20px);
    float: left
}

.hl-filter-column .inport-kv {
    border-width: 1px;
    background: #fff;
    border-color: #e1e1e1;
    width: 20px;
    height: 30px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
    margin-left: 0
}

    .hl-filter-column .inport-kv span {
        margin: 0 0 0 7px;
        line-height: 30px
    }

.hl-filter-column .list-kv {
    position: absolute;
    top: 30px;
    left: 10px;
    width: 160px;
    max-width: 160px;
    border: 1px solid #ccc;
    padding: 10px;
    border-top: none;
    max-height: 180px;
    overflow: scroll;
    overflow-x: hidden;
    display: none;
    background: #fff;
    z-index: 999999
}

.h-filter-column {
    min-width: 120px
}

.tr-filter-head {
    display: none
}

    .tr-filter-head td i.fa-search {
        font-size: 16px;
        padding-left: 3px
    }

th {
    font-size: 1rem !important
}

.list-img-user .img-user {
    width: 55px;
    min-width: 55px;
    height: 50px;
    position: unset;
    border-radius: 5px;
    background: none;
    object-fit: cover;
    border: 1px dashed #ccc;
    margin: 0 10px;
}

    .list-img-user .img-user img {
        width: 80%;
        height: 80%;
        margin: 10%;
    }

.list-img-user .detail-user-discount {
    padding-left: 0;
    min-height: 0;
}

.list-img-user:hover {
    background: rgba(0,0,0,.05);
    border-radius: 5px;
}

.list-img-user > label {
    border-bottom: 1px solid #e6e6e6;
}

    .list-img-user > label span {
        line-height: 18px;
    }

.list-img-user {
    transition: all 0.4s ease;
    display: inline-block;
    width: 100%;
}

.detail-user-discount p {
    margin: 0px !important;
    padding-top: 3px !important
}

.title-user {
    font-weight: bold;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: calc(100% - 150px);
    overflow: hidden;
    display: inline-block;
}

.line-space {
    padding-left: 3px;
    padding-right: 3px;
}

.search-img-user button {
    position: absolute;
    top: 0px;
    left: 282px;
    width: 36px;
    float: right;
    height: 30px;
    background: var(--color-button);
    border: none;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    margin-right: 6px;
    color: white;
}

.tab-discount-user li.active {
    border-top: 1px solid #32b7b3;
    border-left: 1px solid #32b7b3;
    border-right: 1px solid #32b7b3;
    border-bottom: none !important;
}

.tab-discount-user li a {
    margin: 0px !important;
    font-weight: bold;
}

.tab-discount-user {
    padding-bottom: 13px !important;
}

    .tab-discount-user .nav-tabs {
        border-bottom: 1px solid #32b7b3;
    }

.note-discount-money p span {
    color: #f81600;
}

.note-discount-money p img {
    margin-right: 10px;
}

.op-input-ghichu {
    position: absolute;
    width: 100%;
    height: 14px;
    background: inherit
}

    .op-input-ghichu i {
        position: absolute;
        width: 10px;
        height: 10px;
        font-size: 10px;
        color: #ccc;
        left: 3px;
        bottom: 5px;
    }

    .op-input-ghichu input {
        line-height: 14px;
        height: 12px;
        width: inherit;
        font-size: 10px;
        border: none;
        float: left;
        padding: 0 15px;
        text-align: left;
        border-bottom: 1px solid #ccc;
        background: inherit
    }

.btn {
    font-size: 1rem
}

.drop-box-arrow-up:before {
    content: '';
    position: absolute;
    top: -5px;
    right: 35px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid var(--color-primary);
}

.drop-box-arrow-up::after {
    content: '';
    position: absolute;
    top: -4px;
    right: 35px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid white;
}

.op-dropbox.expand > .op-dropbox-container {
    display: block
}

.op-dropbox {
    position: relative
}

.op-dropbox-container {
    display: none;
    position: absolute;
    background: white;
    border: 1px solid var(--color-primary);
    align-items: center;
    padding: 5px 10px;
    right: 0;
    top: 30px;
    z-index: 99;
}

.op-toggle {
    background: #ccc;
    padding: 3px 5px;
    border-radius: 15px;
    position: relative;
    height: 24px;
    margin: 3px 0;
}

    .op-toggle > a {
        width: 24px;
        display: inline-block;
        text-align: center;
        font-size: 11px;
        z-index: 2;
        color: white;
        position: relative;
    }

    .op-toggle.vnd:before {
        left: 30px;
        width: 30px;
    }

    .op-toggle:before {
        content: '';
        display: block;
        height: 18px;
        width: 24px;
        position: absolute;
        background: var(--color-main);
        top: 3px;
        left: 4px;
        z-index: 1;
        border-radius: 15px;
        transition: all 0.4s ease;
    }

.op-dropbox-container > div > div {
    display: flex;
    flex-direction: row;
}

    .op-dropbox-container > div > div > input {
        width: 75px;
    }

.op-object-detail .form-group {
    border-bottom: 1px solid #ccc;
    padding: 3px 0px;
    margin-bottom: 5px;
}

.op-tag-picker {
    max-height: unset;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 1px;
    min-height: 28px;
    line-height: 24px;
}

    .op-tag-picker > div:not(.dropdown-backdrop) {
        position: relative;
        min-height: 24px;
    }

    .op-tag-picker .dropdown-menu {
        max-height: 250px;
        overflow: auto;
        overflow: overlay;
    }

    .op-tag-picker input {
        top: 0;
        position: absolute;
        left: 0;
        height: 100% !important;
        width: 100% !important;
        z-index: 1;
        border: none;
        padding: 3px 7px;
        line-height: 18px;
    }

    .op-tag-picker > div > ul {
        position: relative;
        z-index: 2;
        width: auto;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;
        padding-right: 50px;
    }

        .op-tag-picker > div > ul > li {
            cursor: pointer;
            color: #333;
            max-width: 98%;
            line-height: 18px;
            width: auto;
            padding: 3px 7px;
            background: var(--color-primary);
            margin: 1px 0 1px 1px;
            color: white;
            border-radius: 3px;
        }

            .op-tag-picker > div > ul > li i.fa-times {
                color: white !important;
                margin-left: 5px;
            }

.width-80 {
    width: 80px;
}

.flex {
    display: flex;
}

.op-menu-list > li > a[href='/#/DashBoard'] > i:first-child {
    display: inline-block;
}

.flex.flex-row.filterFileSelect > * {
    line-height: 24px;
    padding: 0 5px;
}

.filterFileSelect, .filterFileSelect + button {
    border: 1px solid var(--color-primary);
    padding: 3px;
    line-height: 24px;
    display: flex;
    align-items: center;
    padding: 3px 7px;
    justify-content: space-between;
    border-radius: 3px;
}

#MainLayout.expanded ~ .renewal {
    padding-left: 279px;
}

html {
    font-size: 13px;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
.dash-pane-left > .nav-pills > li.active > a {
    background: #FFF !important;
    border-top-left-radius: 3px !important;
    border-top-right-radius: 3px !important
}
.doitaclogo:before {
    content: "\f2b5"
}
/*.dropdown-menu li a {
    color: #686868
}*/
.establish-left {
    width: 230px;
    margin-top: 0
}
.establish-right {
    width: calc(100%-230px) !important;
    vertical-align: top;
    display: inline-block;
    padding: 0 !important
}
.fa-money {
    color: inherit
}
.op-filter {
    position: relative;
    vertical-align: top
}
.header-button {
    margin-top: 0
}
.header-filter div {
    vertical-align: bottom
}
.hide-in-new {
    display: none !important
}
.input-search-filter .showfiltercolumn {
    margin-right: 5px
}
.input-search-filter > button, .input-search-filter > div {
    float: right
}
.input-search-filter {
    width: auto;
    margin: 5px 0
}
.logo img {
    height: 40px;
    margin: 5px
}
.menu-border-right-line {
    position: absolute;
    top: 12px;
    right: 0;
    width: 1px;
    height: 100%;
    background: #fff;
    z-index: 99999
}
.menu-main > li > a :hover .menu-main > li > ul {
    display: block !important
}
.menu-main li ul li ul {
    left: 0;
    display: block
}
.menu-ul-drop > li {
    text-align: left
}
.min-45 {
    min-height: 450px
}
.model-imagesinner, .model-imagesinner img {
    object-fit: cover;
    width: 100%;
    height: 100%
}
.name-product_date {
    width: calc(100%-100px);
    vertical-align: top;
    margin: 0
}
.nav-news > li > a {
    color: #000;
    font-weight: 700;
    border-radius: 0;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border: 1px solid #e6e6e6;
    background: none
}
.nav-news > li.active > a, .nav-news > li.active > a:hover, .nav-news > li.active > a:focus {
    font-weight: 700;
    color: var(--color-main);
    background: var(--color-table);
    border: 1px solid var(--color-primary);
    border-bottom: none !important;
    border-radius: 0;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    margin-bottom: 1px
}
.notifi-general::after {
    right: 0
}
.oldUIpropertive {
    cursor: pointer
}
.text-deal textarea {
    border: none;
    border-left: 1px solid #edecec;
    outline: none;
    height: 50px
}
.z0 {
    z-index: 1
}
#dashname i, #dashname label {
    position: relative;
    z-index: 99999;
    top: 10px
}
#dashname label {
    margin-left: 0 !important
}
#dashname {
    z-index: 1;
    padding-bottom: 10px
}
.tab-content, .tab-width {
    width: 100% !important;
    float: left;
    padding: 5px 0;
}
.tab-detail-table-sms, .tab-inner .op-header, .tab-news-modal + .tab-content > div > .container-fluid, .tr-show div {
    padding: 0
}
html {
    overflow-x: hidden;
    font-family: sans-serif;
    overflow: auto;
    overflow-x: hidden;
    height: unset;
}
body {
    background: white;
    overflow: auto;
    font-size: 1rem;
    width: 100vw;
    position: relative;
    overflow: initial;
}
.avoid-clicks {
    pointer-events: none;
}
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-thumb {
    background: #bfbfbf;
    background: rgba(0,0,0,0.25);
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,.3);
}
body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.42857143;
    color: #333;
    background-color: #fff;
}
*, ul, li {
    list-style: none;
}
a, a:hover,a:focus {
    text-decoration: none
}
.bg-op {
    color: #FFF;
    text-align: center;
    -webkit-transition: opacity 3s ease-in-out;
    -moz-transition: opacity 3s ease-in-out;
    transition: opacity 3s ease-in-out;
    -o-transition: opacity 3s ease-in-out
}
.loading-box {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    z-index: 999999999999999999;
}
.loading-bg {
    background: rgba(255, 255, 255, 1);
    height: 100%;
}
.loading-obj {
    overflow: visible;
    position: relative;
    background: white;
    width: 200px;
    height: 200px;
    margin: auto;
    top: calc(50vh - 200px);
    border-radius: 50%;
}
.loader {
    border: 5px solid var(--color-primary);
    border-radius: 50%;
    border-top: 5px solid #fff;
    border-left: 5px solid #fff;
    border-bottom: 5px solid #fff;
    top: 15px;
    right: 15px;
    z-index: 999;
    animation: spin 1s cubic-bezier(.4,0,.2,1)infinite;
    position: absolute;
    width: 150px;
    height: 150px;
}
.left0 {
    left: 0 !important
}
.navtop#op24-nav {
    background: var(--color-main);
    margin: 0;
    height: 40px;
    border-radius: 0px;
    position: fixed;
    width: 100%;
    z-index: 150;
    border: none;
    min-height: 40px;
}
#op24-nav .logo {
    display: none;
}
#op24-nav .menu-horizontal {
    height: inherit;
    padding: 0 0 !important;
    opacity: 1;
    transition: opacity 0.5s ease 0s;
    background: #F1F4F6;
    box-shadow: 3px 3px 10px rgb(0 0 0 / 15%);
}
.menu-horizontal-inner {
    height: 100%;
    display: inline-block;
    float: left;
    top: unset;
    transition: left .7s ease 0.2s
}
#op24-nav > .branch-li:hover #op24-nav > .fillter {
    display: none;
}
#op24-nav .click-menu {
    padding-top: 7px;
    height: 25px;
    width: 30px;
    align-items: center;
    float: left;
    color: white !important;
    height: 40px;
    width: 40px;
    padding-left: 5px;
    float: left !important;
    text-align: center;
    width: 55px;
    padding: 7px;
    position: fixed;
    top: 0;
    text-align: center;
}
.menu-drop-3 {
    display: block;
    background-color: var(--color-main);
    width: 400px;
    position: absolute;
    height: auto;
    right: 0;
    top: 48px;
    border-top: none;
    display: none;
    box-shadow: 0 0.125rem 0.625rem rgba(68,64,84,.2), 0 0.0625rem 0.125rem rgba(68,64,84,.4)
}
    .menu-drop-3 .menu-drop3 {
        width: 200px;
        float: left;
    }
        .menu-drop-3 .menu-drop3 .menu-drop-ul-style-color {
            display: block !important;
            top: 0 !important;
            padding: 0 !important;
            width: 100% !important;
            float: left;
            position: relative !important;
            padding-left: 9px !important;
            background: none;
        }
.menu-drop-ul-style-color .check::before {
    content: 'check';
    font-family: material icons;
    font-size: 35px;
    display: inline-block;
    padding: 0px;
    width: 100%;
    text-align: center;
}
.menu-drop-3 .menu-drop3 .menu-drop-ul-style-color li {
    width: auto;
    float: left;
    padding: 5px !important;
    border-radius: 50%;
    background: none
}
    .menu-drop-3 .menu-drop3 .menu-drop-ul-style-color li a {
        width: 50px;
        height: 50px;
        float: left;
        border-radius: 50%;
        border: 1px solid #fff;
    }
.menu-drop-3 ul.menu-ul-drop {
    background: none;
}
.logo-24 {
    display: block;
    cursor: pointer;
}
    .logo-24 img {
        height: 28px;
        margin: 0;
    }
.tongquan > a > i {
    display: inline-block !important
}
.over-hidden::-webkit-scrollbar {
    width: 0
}
.menu-main {
    display: inline-block;
    margin: 0;
    border: none;
    padding: 0;
}
    .menu-main li ul li {
        background: none;
    }
.chamsockhachhang div {
    padding: 7px 15px;
    color: white;
    font-size: 13px;
}
.chamsockhachhang i:not(.fa-angle-down) {
    padding-right: 10px;
    width: 28px;
    height: 18px;
    font-size: 16px;
    text-align: center;
}
.menu-main > li {
    position: relative;
}
    .menu-main > li > a {
        font-size: 1rem;
        padding: 6px 15px;
        line-height: 14px;
        height: 40px;
    }
        .menu-main > li > a > i:not(.fa) {
            padding: 0;
            line-height: 10px;
        }
        .menu-main > li > a > font {
            text-align: center;
            display: inline-block;
            padding: 5px;
            vertical-align: top;
            padding-right: 3px;
        }
    .menu-main > li:hover > a {
        background: rgba(0,0,0,0.15)
    }
    .menu-main > li .fa-angle-down {
        position: absolute;
        top: unset;
        right: 3px;
        padding: 0;
        line-height: 18px;
    }
    .menu-main > li > ul {
        position: absolute;
        background: var(--color-main);
        width: 235px;
        z-index: 99999;
        display: none;
    }
    .menu-main > li:hover > ul {
        position: absolute;
        background: var(--color-main);
        width: 235px;
        z-index: 99999;
    }
    .menu-main > li > ul > li > a {
        display: block;
        padding: 7px 15px;
        font-size: 1rem;
        color: white;
    }
        .menu-main > li > ul > li > a > img {
            display: inline-block;
            padding: 0 10px 0 0;
            vertical-align: middle;
            border: none;
            height: 18px;
            width: 28px;
        }
.menu-chicken {
    padding-left: 0;
}
    .menu-chicken .bnt-Cashier {
        background: var(--color-special);
        height: 48px;
        float: left;
        width: 83px;
    }
        .menu-chicken .bnt-Cashier .iconn-design {
            margin: 0;
            width: 100%;
            padding-top: 3px;
            text-align: center;
            display: inline-block;
            font-size: 1rem;
        }
        .menu-chicken .bnt-Cashier font {
            display: block;
            text-align: center
        }
        .menu-chicken .bnt-Cashier i {
            margin-top: 5px;
            display: block;
            font-size: 30px;
            line-height: 20px;
            text-align: center
        }
.spinhover {
    animation-name: spin;
    animation-duration: 2000ms;
    animation-iteration-count: 1;
    animation-timing-function: ease;
}
.i-spin {
    animation-name: spin;
    animation-duration: 2000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.menu-main > li > ul > li > a > i {
    margin-right: 5px;
    width: 20px;
    text-align: center;
}
#MainLayout {
    width: 100vw !important;
    padding-top: 40px;
    height: inherit;
    padding-left: 50px;
}
.op-container {
    width: 100%;
    padding: 15px ;
    padding-bottom: 20px;
}
.op-object-detail-left {
    width: 300px;
    display: inline-block
}
    .op-object-detail-left .name-product {
        float: left;
        line-height: 18px !important;
        padding: 0;
        height: 24px;
        width: calc(100% - 100px) !important
    }
    .op-object-detail-left label {
        min-width: 100px;
        line-height: 24px;
    }
.detail-panel {
    left: unset !important;
    right: 0
}
.op-object-detail .op-object-detail-left {
    border-radius: 3px;
    padding: 10px;
    border-right: 1px solid #d1d2d9;
    background: #e6e6e6;
    width: 300px;
}
.op-object-detail-right {
    width: calc(100% - 300px);
    padding-left: 15px;
    display: inline-block;
    vertical-align: top
}
    .op-object-detail-right > div {
        width: 100%;
        margin-bottom: 5px;
    }
.op-object-detail-function {
    display: flex;
    align-content: center;
    justify-content: flex-end;
    padding: 10px 3px;
}
.tiny-green {
    position: fixed;
    margin-top: 40px;
    width: 100%;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    z-index: 1;
    color: transparent;
}
    .tiny-green div {
        background: #b2c70f;
        height: 5px;
        width: 0
    }
@-webkit-keyframes tiny-green {
    from {
        box-shadow: 0 0 10px #fff
    }
    to {
        box-shadow: 0 0 20px #fff
    }
}
.choose-commodity, #divThaoTac {
    width: 100%;
    color: #888;
    margin-bottom: 0;
    font-size: 11px;
    float: left;
    height: 30px;
    margin: 0;
}
.header-title {
    display: inline-block;
    width: 100%;
    height: 35px;
}
    .header-title .choose-commodity, .header-title #divThaoTac {
        width: 100%;
        color: #888;
        margin-bottom: 0;
        font-size: 11px;
        float: left;
        height: 30px;
        margin: 5px 0;
    }
    .header-title .input-search-filter {
        margin: 0;
        width: auto;
        right: 0;
        padding: 0;
        float: right;
    }
    .header-title .title {
        font-size: 20px;
        font-weight: 700;
        margin: 0;
        line-height: 24px;
        margin: 0;
        padding: 3px;
    }
.col-right .header-report {
    padding: 5px 0 0;
}
.input-search-filter .btn-search-icon {
    width: 45px;
    float: right;
    height: 30px;
    background: var(--color-main);
    border: none;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    margin-right: 0;
    color: #686868;
    position: absolute;
    top: 0;
    right: 0;
    z-index: unset;
    font-size: 21px;
}
.input-search-filter .search-report i {
    color: white;
}
.input-search-filter .form-control {
    width: 400px !important;
    max-width: 500px;
    position: unset;
    top: 60px;
    z-index: 1;
    right: 30px;
    box-shadow: none;
    background-color: #fff;
    transition: border-radius 0.4s cubic-bezier(.4,0,.2,1),width 0.4s cubic-bezier(.4,0,.2,1),font-size 0.2s cubic-bezier(.4,0,.2,1) 0.2s;
    padding-left: 20px;
    padding-right: 15px;
    font-size: 1rem;
    outline: none
}
.input-search-filter {
    margin: 5px 0;
    width: auto;
}
.page ul li .click {
    color: #fff;
    background: var(--color-primary);
    text-decoration: none;
}
.detail-warehouse th {
    background: #D9DADC;
    border: none !important
}
.possible-table-tab {
    position: unset;
    top: unset;
}
ul.bxslider {
    height: unset !important;
    float: left;
}
    ul.bxslider.img-list-product {
        display: flex;
        width: 100% !important;
        overflow: auto;
        padding: 3px;
    }
.footer-total-detail {
    background: #e6e6e6;
    font-weight: 700;
    margin: 5px 0;
    padding: 15px;
}
.op-table-summary > div {
    margin: 5px 0;
    padding: 7px;
}
.content-table {
    min-height: unset;
    margin-bottom: unset;
}
.content-table {
    min-height: unset;
    margin-bottom: unset;
    color: #000;
}
.table-frame {
    overflow: auto;
    max-height: calc(100vh - 275px);
    width: calc(100%);
}
.op-report-view .table-frame {
    max-height: calc(100vh - 300px);
}
.table-frame th {
    background: var(--color-table);
}
.table-frame::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.15);
    transition: background .4s ease;
    box-shadow: none;
}
.table-frame:hover::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.4);
}
.table-frame > table:not(.calendar) {
    width: inherit;
    display: table;
    overflow: scroll;
    border-collapse: separate
}
.table-frame > table > thead {
    position: relative;
    /*z-index: 98;*/
    top: 0;
    display: table-row-group
}
.table-frame > table > tbody {
    position: relative;
    /*z-index: 90;*/
}
.table-frame > table > thead > tr {
    position: sticky;
    display: table-row;
    background: var(--color-table);
    z-index: 99;
}
.table-frame > table > tbody > tr {
    background: white;
}
.table-frame > table > thead > tr > th {
    display: table-cell;
    position: sticky !important;
    top: 0;
    border-left: 1px solid white;
    z-index: 100;
    padding: 3px 7px;
    line-height: 24px;
}
.table-frame > table > thead > tr.t-31 > th {
    top: 31px;
}

.op-js-tr-hide td > div {
    z-index: 98;
    position: relative;
    background: white;
}
table {
    border-collapse: separate
}
    table td, table th{
        line-height:24px;
    }
    tr.tr-active + tr.op-tr-hide > td > div {
        /*border: 1px solid var(--color-primary);
        border-top: none;*/
    }
tr.tr-active td {
    border-top: 1px solid var(--color-primary);
    border-bottom: none
}
    tr.tr-active td:first-child {
        border-left: 1px solid var(--color-primary) !important;
    }
    tr.tr-active td:last-child {
        border-right: 1px solid var(--color-primary) !important;
    }
.op-object-detail{
    transition: var(--trans);
    width: calc(100vw - 280px) !important;
    border: none;
}
    .op-object-detail > ul.nav-tabs {
        background: #e6e6e6;
        padding: 5px;
        padding-bottom: 0;
        white-space: nowrap;
        flex-wrap: nowrap;
        display: flex;
    }
    .op-object-detail .tab-content {
     
        padding: 10px;
    }
    .op-object-detail.tab-content {
        float: left;
        width: 100%;
        padding: 15px;
    }
    .op-object-detailul {
        margin-bottom: 0;
    }
.img-product-border {
    height: 180px;
    width: 200px;
    background: #fff;
    margin: auto;
    /* margin-top: 15px; */
    padding: 2px;
    border: 1px dotted #ccc;
    border-radius: 5px;
    object-fit: scale-down;
}
.prev-tr-hide.tr-focus {
    position: relative;
}
    .prev-tr-hide.tr-focus::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 1px;
        height: 32px;
        background: var(--color-primary);
    }
.prev-tr-hide > .bg-gray {
    border-top: 1px solid var(--color-primary) !important;
}
    .prev-tr-hide > .bg-gray:nth-child(1) {
        border-left: 1px solid var(--color-primary)
    }
.op-js-tr-hide.ac > td {
    border: 1px solid var(--color-primary);
    border-right: 1px solid var(--color-primary) !important;
    border-top: none;
}
.prev-tr-hide.bggray {
    background: #f9f9f9;
}
.table-reponsive tbody tr:hover td {
    background: rgba(19, 116, 173,0.06)
}
.table-HH table tr th, .table-HH td, .table-HH table tbody td {
    border-right: none !important;
    padding: 3px;
    line-height: 24px;
}
.thead-boder tr th {
    border-right: none !important;
    text-align: center;
    padding: 10px;
}
.table-res tr td, .table-reponsive tr td {
    border-top: none;
    font-size: 1rem;
    line-height: 18px;
    position: relative;
    border-bottom: 1px solid #e6e6e6;
    padding: 3px 5px;
    line-height: 24px;
    border-top: none !important;
}
.thumbnail {
    display: inline-block;
    height: 165px;
    width: 100%;
    margin-bottom: 15px;
    line-height: 1.42857143;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    -webkit-transition: border .2s ease-in-out;
    -o-transition: border .2s ease-in-out;
    transition: border .2s ease-in-out;
    padding: 4px;
}
.toggle-sign {
    display: none;
}
.thumbnail button:not(.notshow) {
    width: 30%;
}
.col-left {
    width: 230px;
    display: inline-block;
    float: left;
}
.op-filter-body {
    background: #fff;
    width: 100%;
    height: auto;
    border-left: 1px solid var(--color-filter-left);
    border-right: 1px solid var(--color-filter-left);
    border-bottom: 1px solid var(--color-filter-left);;
    color: black;
    border-radius: 4px;
    height: calc(100% - 50px);
    scrollbar-width: thin;
}
.op-filter-footer {
    padding: 5px;
    display: flex;
    align-content: center;
    justify-content: space-evenly;
}
.op-filter-body label {
    font-weight: 400;
    display: flex;
    align-items: center;
}
    .op-filter-body::-webkit-scrollbar {
        width: 1em;
    }
    .op-filter-body::-webkit-scrollbar-track {
        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    }
    .op-filter-body::-webkit-scrollbar-thumb {
        background-color: darkgrey;
        outline: 1px solid slategrey;
    }
    .col-left .op-filter .selec-person {
        max-height: 250px;
        width: 100%;
        overflow-x: hidden;
    }
    .col-left .plus_not {
        position: absolute;
        right: 30px;
        top: 7px;
        font-size: 1rem;
        color: var(--color-main);
    }
    .col-left .op-filter-title {
        background: var(--color-filter-left);
        border-top: 1px solid var(--color-filter-left);
        border-bottom: 1px solid var(--color-filter-left);
        font-size: 13px;
        font-weight: bold;
        padding: 7px 2px 8px 10px;
        margin: 0px;
        color: black;
    }
    .col-left .boxLeft {
        margin-bottom: 2px;
        position: relative;
        clear: both;
        width: 100%;
    }
    .col-left .selec-person i {
        right: 12px;
        top: 7px;
        position: absolute;
        color: #686868;
        display: inline-block;
        width: 20px;
    }
        .col-left .selec-person i.check-after-li {
            right: 0;
            top: 0;
            left: unset;
            position: absolute;
            color: #686868;
        }
    .col-left #selec-all-DV i {
        right: 12px;
        top: 5px;
        position: absolute;
        color: #686868;
        left: unset;
        height: 20px;
        line-height: 17px;
    }
    .col-left .boxLeft .showhideicon {
        font-size: 1rem;
        position: absolute;
        top: 0;
        height: 30px;
        width: 15px;
        text-align: center;
        right: 10px;
        line-height: 30px;
        outline: none !important;
        color: gray;
    }
    .col-left .boxLeft .choose-person {
        width: 100%;
        float: left;
        max-height: unset;
        border-radius: 4px;
        border: 1px solid #ccc;
        overflow: auto;
        min-height: 33px
    }
.col-left .boxLeft .choose-date .dropdown-menu {
    left: 100%;
    top: 0;
    width: 460px;
    /* padding-bottom: 13px; */
    border-radius: 5px;
    background: var(--color-primary);
    padding: 10px;
    box-shadow: 0 6px 12px rgb(0 0 0 / 15%);
    border: none;
    margin-top: 0;
}
    .col-left .boxLeft .li-input-span span {
        font-size: 1rem;
        padding: 0 4px 0px 0;
    }
    .col-left .boxLeft .showhideicon i {
        float: right;
        top: 14px;
        line-height: 28px;
    }
    .col-left .boxLeft #treeviewnhomhang {
        max-height: 250px;
        overflow: auto;
    }
    .col-left .boxLeft .showhideicon {
        font-size: 1rem;
        position: absolute;
        top: 0;
        height: 30px;
        width: 15px;
        text-align: center;
        right: 10px;
        line-height: 30px;
        outline: none !important;
        color: gray
    }
    .col-left .op-filter-container {
        float: left;
        width: 99%;
        padding: 10px;
        background: white;
    }
        .col-left .op-filter-container.scoll-tt {
            max-height: 300px;
            overflow-y: scroll;
        }
.open .selec-person {
    display: block !important;
}
.op-filter-container .seach-nhomhang i {
    position: absolute;
    z-index: 1;
    top: 7px;
    left: 5px;
}
.seach-nhomhang input {
    border: none;
    border-bottom: 1px solid #ccc;
    width: 100%;
    max-width: 400px;
    outline: none;
    height: 30px;
    padding-left: 30px;
}/*
.col-right {
    width: calc(100% - 230px );
    display: inline-block;
    padding: 0;
    padding-left: 0px;
    position: sticky;
    top: 70px;
    right: 0;
    height: calc(100vh - 100px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-left: 20px;
}*/
    .col-right .sms-left, .col-right .sms-right {
        padding-top: 10px;
    }
    .col-right > div {
        width: 100%;
        position: relative;
        padding: 0 !important
    }
    .col-right::-webkit-scrollbar {
        width: 0;
    }
#shownhapxuat {
    display: none
}
#shownhapxuat {
    width: 30px;
    height: 35px;
    outline: none
}
.tab-mr-header-l {
    width: 100%;
    float: left;
}
    .tab-mr-header-l ul {
        padding: 0px !important;
        margin: 0;
        height: 35px;
        width: 100%;
        border-right: none;
        background: #e6e6e6;
        border-radius: 5px 5px 0 0;
        border-right: none !important;
        padding-left: 15px !important;
    }
        .tab-mr-header-l ul li {
            width: 100%;
            float: left;
            padding: 0;
            padding-bottom: 0;
            margin-left: 0;
            width: auto
        }
            .tab-mr-header-l ul li.active a, .tab-mr-header-l ul li.active a:focus {
                background: white !important;
                color: none !important;
                border: none;
                border-right: none
            }
            .tab-mr-header-l ul li a {
                height: 30px;
                text-align: center;
                border: none;
                background: none;
                padding: 15px;
                padding: 5px 15px;
                margin-top: 5px;
                border-radius: 5px 5px 0 0 !important
            }
            .tab-mr-header-l ul li.active a {
                height: 30px;
                text-align: center;
                border: none;
                background: #e6e7e8;
                padding: 15px;
                padding: 5px 15px;
                margin-top: 5px;
            }
.tab-mr-header-r {
    width: 100%;
    float: left;
    border: 1px solid #e6e6e6;
    padding: 0;
    padding-top: 15px !important;
    border-top: none;
}
.input-date-hide {
    width: 100% !important;
    z-index: 0;
    height: 35px !important;
    float: left;
    border: none;
    background: none;
    padding: 5px 7px;
    box-shadow: none;
    margin: 0;
    text-align: center;
}
.tab-mr-content .list-title {
    width: calc(100% - 550px);
    float: left;
    position: relative;
    left: 0;
    right: unset;
    width: auto;
}
    .tab-mr-content .list-title ._title-so-du-r {
        width: auto;
        float: right;
        border-radius: 4px;
        border: none;
        height: 40px;
        position: relative;
        float: unset;
    }
._title-so-du-r .lb-title1, ._title-so-du-r .lb-title2 {
    width: 210px;
    float: left;
    padding-top: 5px;
    padding-left: 15px;
}
.tab-mr-content .list-title {
    width: auto;
    float: right;
}
.tab-mr-header-r .btn-link {
    font-weight: normal;
    color: #337ab7;
    color: #686868;
    border-radius: 0;
    text-decoration: none !important;
}
.tab-mr-header-r .dropdown > .btn::after {
    content: '▾';
    content: 'keyboard_arrow_down';
    font-family: 'Material Icons';
    font-size: 26px;
    line-height: 18px;
    height: 20px;
    display: inline-block;
    vertical-align: bottom;
}
.btn > i {
    min-width: 12px;
    margin-right: 3px;
    text-align: center;
}
.btn {
    background-size: 200% 100%;
    margin-right: 1px;
    margin-left: 2px;
}
.btn-main {
    background: var(--color-main);
    color: white;
    line-height: 24px;
}
.dropdown-mauin > .btn-main:first-child {
    margin-right: 0
}
.btn-main:hover, .btn-main:focus {
    background: var(--color-primary);
    color: white;
}
.btn-main:focus {
    outline: 1px dashed #ccc;
}
.btn-right {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    outline: none;
    background: #fff;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border: 1px solid #ccc !important;
}
    .btn-right:hover, .btn-right:focus {
        background: white;
        color: black;
    }
.soquy_modal .nav > li > a {
    padding: 7px;
    width: auto;
    margin: 0;
    height: 27px;
}
.soquy_modal .nav-tabs {
    border-bottom: 1px solid #ddd;
}
.selec-person ul {
    max-height: 200px;
    overflow: auto;
}
.btn-bue {
    padding: 0 10px;
    line-height: 30px;
    height: 30px;
    vertical-align: top;
    border-radius: 3px;
    position: relative;
    cursor: pointer;
    border: none;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    float: left;
    margin-right: 5px;
    margin-bottom: 0;
}
.input-border-bottom {
    border: none;
    border-radius: 0;
    border-bottom: 1px solid #ccc;
    margin: 0;
    box-shadow: none;
    padding-left: 35px;
}
    .input-border-bottom:focus {
        box-shadow: none
    }
.cb-inline {
    display: inline;
}
span.nameCN {
    pointer-events: none;
    display: inline-block;
    width: calc(100% - 24px);
    margin-left: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 18px;
    vertical-align: sub;
}
.col-left #selec-all-DV i {
    right: 10px;
    top: 4px;
    position: absolute;
    color: #686868;
    left: unset;
    height: 20px;
    line-height: 17px;
    font-size: 15px;
    color: var(--color-primary);
}
input.cbCN-selectorleft[type=checkbox]:after {
    display: none;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: 400;
    text-decoration: inherit;
    color: var(--color-main);
    content: "\f096";
    font-size: 16px;
    background: #fff;
}
button {
    position: relative;
    border: none;
    text-align: center;
    -o-transition-duration: 0;
    -webkit-transition-duration: 0;
    -moz-transition-duration: 0s;
    transition-duration: 0s;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer
}
.btn-add-new {
    background: var(--color-main);
    padding: 7px 7px;
    line-height: 18px;
}
    .btn-add-new span {
        display: inline-block !important;
    }
    .btn-add-new:hover {
        background: var(--color-primary) !important
    }
.btn-green, .btn-updata {
    color: #fff;
    vertical-align: bottom;
    height: 30px;
    display: inline-block
}
.btn-updata {
    margin-right: 3px;
    margin-left: 0;
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    padding: 7px 14px;
    white-space: nowrap;
    border: none;
    vertical-align: middle;
    position: relative;
    cursor: pointer;
    height: 30px;
    border-radius: 2px;
    z-index: 1;
}
    .btn-updata:hover:not(.btn-pink), .btn-bue:hover:not(.btn-pink) {
        color: white;
        background: var(--color-primary) !important;
    }
.print-m {
    left: -10px;
    border-left: 1px solid var(--color-primary);
    width: 30px;
    margin-right: -7px;
    padding: 5px 0;
}
.x1.y1::before {
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid var(--color-primary);
    position: absolute;
    left: 18px;
    top: -7px;
    content: '';
}
.x2.y1::before {
    content: '';
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid var(--color-primary);
    position: absolute;
    right: 18px;
    top: -7px
}
.x1.y2::before {
    content: '';
    width: 0;
    height: 0;
    border-bottom: 7px solid transparent;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid var(--color-primary);
    position: absolute;
    left: 18px;
    bottom: -14px
}
.x2.y2::before {
    content: '';
    width: 0;
    height: 0;
    border-bottom: 7px solid transparent;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid var(--color-primary);
    position: absolute;
    right: 18px;
    bottom: -14px
}
/*.dropdown-menu {
    padding: 0;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 13px;
    text-align: left;
    list-style: none;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}*/

    .dropdown-menu.css-right-0 {
        left: unset;
        right: 0;
    }
    .dropdown-menu li a {
       
        clear: both;
        font-weight: normal;
        line-height: 1.42857143;
        white-space: nowrap;
        color: #686868;
        padding: 5px;
        margin: 0 9px;
    }
.drop-filter-chart .selec-person ul li a {
    font-weight: 400;
    width: calc(100% - 20px);
    display: inline-block;
}
.dropdown-list {
    position: absolute;
    top: 33px;
    border: 1px solid #ccc;
    background: #fff;
    z-index: 10;
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
    border-radius: 4px;
    display: none;
    z-index: 9999;
    background: var(--color-button);
    color: #fff;
    left: 0 !important;
}
.check-group input {
    width: 14px;
    height: 14px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: 0;
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    float: left;
    border: 1px solid #686868;
    border-radius: 3px;
}
input[type="checkbox"]:focus {
    outline: none !important
}
.seach-lot {
    float: left;
    width: 231px;
    position: relative;
    margin-bottom: 15px;
    margin-right: 5px;
}
.selec-person i {
    left: 7px;
    top: 7px;
    position: absolute;
    width: 20px;
}
.menu-main.nav > li > a:not(a[href='/$/kitchen']):not( a[href='/$/nhahang']):not( a[href='/$/banle']):hover {
    background: rgba(0,0,0,0.15);
    color: #000;
}
.btn-save {
    background: var(--color-main);
    color: white;
    border: none;
}
.btn.btn-save:hover, .btn.btn-save:focus, .btn.btn-save.focus {
    background: var(--color-primary);
    color: white;
    outline: 1px solid #ccc;
}
.btn.btn-cancel {
    background: #f75e5c;
    color: white;
    line-height: 24px;
}
    .btn.btn-cancel:hover, .btn.btn-cancel:focus, .btn.btn-cancel.focus {
        background: #ca3d3b;
        color: white;
    }
.btn.btn-delete {
    background: #F72B28;
    color: white;
    outline: none;
}
    .btn.btn-delete:hover, .btn.btn-delete:focus, .btn.btn-delete.focus {
        background: #AB100E;
        color: white;
    }
.btn-save :hover, .btn.btn-save:focus, .btn.btn-save.focus {
    background: var(--color-primary);
    color: white;
}
.btn-gara {
    width: 150px;
    padding-left: 40px;
}
.btn-kitchent, .btn-Cashier, .btn-kitchent > a, .btn-Cashier {
    background: var(--color-special) !important;
}
.menu-main li.btn-kitchent:hover, .menu-main li.btn-Cashier:hover {
    background: var(--color-special) !important;
}
.menu-main > li.btn-kitchent > a:hover {
    background: none !important
}
.bnt-Cashier:before {
    content: '';
    height: 30px;
    width: 30px;
    position: absolute;
    z-index: 999999;
    background-size: 100%;
    transition: all 1s ease;
    position: absolute;
    top: 0;
    left: 0;
}
i.bnt-Cashier.btn-gara {
    position: relative;
    width: 30px !important;
    display: inline-block !important;
    height: 30px !important;
    display: inline-block !important
}
.hoverable:hover a > i:not(.fa):not(.btn-kitchen):before {
    transition: all 1s ease;
    transform: rotate(180deg)
}
.btn-gara:before {
    background-image: url('images/Gara/TiredIcon.svg');
}
.btn-kitchent:before {
    background-image: url('images/icon bep.png')
}
.btn-restaurant:before {
    background-image: url('images/icon thu ngân.png')
}
.btn-Sale:before {
    background-image: url('images/icon thu ngân.png')
}
li.hoverable.btn-kitchent.btn-gara:hover:before {
    transform: rotate(180deg)
}
li.hoverable.btn-Cashier:hover:before {
    transform: rotate(180deg)
}
#divLstChiNhanh > ul {
    width: 100%;
    background: white
}
#divLstChiNhanh > ul {
    text-align: left
}
#divLstChiNhanh > ul {
    text-align: left;
    position: relative;
    top: 0;
    max-height: 250px;
    overflow: auto;
}
    #divLstChiNhanh > ul > li:hover {
        background: rgba(0,0,0,0.15)
    }
.header-top {
    float: right;
    height: 45px;
    width: auto;
    height: 50px;
}
.icon-badge {
    position: absolute;
    top: 4px;
    padding: 3px;
    background: var(--color-special);
    border-radius: 15px;
    line-height: 14px;
    font-size: 1rem;
    right: 0;
    min-width: 20px;
    text-align: center;
}
.hoverable > a > font, .hoverable > a > i {
    color: white;
}
.message-popup {
    position: absolute;
    top: 0;
    background: white;
    padding: 0 12px;
    border: 1px solid var(--color-main);
    width: 155px;
    top: 29px;
    right: 0;
    z-index: 2;
}
    .message-popup > .checkbox > label {
        line-height: 22px
    }
.header-top ul .op-thongbao > ul {
    display: block !important;
    width: 100%;
    position: relative;
    top: unset;
    max-height: 350px;
    overflow: auto;
}
.header-top ul li a > i {
    font-size: 18px;
    margin-right: 5px;
}
.menu-main > li > a {
    display: flex;
    justify-content: center;
    align-items: center;
}
    .menu-main > li > a > i:first-child:not(.btn-Cashier):not(.btn-Sale):not(.btn-restaurant) {
        display: none;
        text-align: center;
        padding-top: 5px;
        width: 15px;
        height: 15px;
        padding: 0;
        width: 20px;
        margin-right: 5px;
    }
ul.menu-ul-drop a {
    color: white;
}
.main-drop {
    position: absolute;
    right: 0px;
    top: 40px;
    border: none;
    border-radius: 3px;
    box-shadow: rgb(0 0 0 / 20%) 0px 0px 6px;
}
.spinhover {
    animation-name: spin;
    animation-duration: 2000ms;
    animation-iteration-count: 1;
    animation-timing-function: ease
}
@keyframes spin {
    from {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(360deg)
    }
}
.loading {
    position: relative;
    height: 5px;
    background-color: #ccc;
    margin: 5px 0;
    overflow: hidden;
    width: 50%;
}
.table-loading {
    position: absolute;
    height: inherit;
    width: 100%;
    justify-content: center;
    align-items: center;
    top: 50%;
    left: 0;
    z-index: 100;
    background: none;
    text-align: center;
    display: flex;
    flex-direction: column;
}
@keyframes load {
    from {
        left: -25%;
    }
    to {
        left: 125%;
    }
}
.loading::before {
    content: '';
    position: absolute;
    top: 0;
    height: 5px;
    background: #1374ad;
    width: 25%;
    left: 0;
    animation: load 2s infinite;
}
.lds-ring {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}
    .lds-ring div {
        box-sizing: border-box;
        display: block;
        position: absolute;
        width: 64px;
        height: 64px;
        margin: 8px;
        border: 8px solid var(--color-main);
        border-radius: 50%;
        animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
        border-color: #fff transparent transparent transparent;
    }
        .lds-ring div:nth-child(1) {
            animation-delay: -0.45s;
        }
        .lds-ring div:nth-child(2) {
            animation-delay: -0.3s;
        }
        .lds-ring div:nth-child(3) {
            animation-delay: -0.15s;
        }
@keyframes lds-ring {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.chiet-khau-doanh-thu {
    display: inline-block;
    width: 30% !important
}
.tab-news-modal .nav-tabs li a {
    border-bottom: none !important;
    border: none;
    border-left: none !important;
    border-right: none !important;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    color: #686868;
    margin: 0 5px !important;
}
.tab-news-modal .nav-tabs li:hover:not(.active) a {
    background: rgba(0,0,0,0.05) !important;
}
.tab-news-modal + .tab-content {
    padding: 0 15px;
}
.tab2active {
    margin-left: calc(50%+20px) !important;
}
.col-left .op-filter {
    display: flex;
    flex-direction: column;
}
.input-search-filter .form-control {
    width: 300px !important;
}
.logo-24 img {
    display: block;
    height: 29px;
    text-align: center;
    margin: auto;
}
.menu-main > li > ul {
    background: var(--color-main);
    width: 240px;
    left: 0;
    display: none;
    right: 0;
}
.menu-main li ul li {
    background: none;
}
.menu-chicken .bnt-Cashier {
    background: var(--color-special);
    height: 48px;
    float: left;
    width: 100%;
}
    .menu-chicken .bnt-Cashier .iconn-design {
        margin: 0;
        width: 100%;
        padding-top: 3px;
        text-align: center;
        display: inline-block;
        font-size: 1rem;
    }
.outselect .selec-person {
    padding: 0;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 0;
    margin: 2px 0 0;
    font-size: 13px;
    text-align: left;
    list-style: none;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: none;
    border-radius: 4px;
    box-shadow: 0 6px 12px rgba(0, 0, 0,0.18);
}
.hover-round.drop .main-drop {
    display: inline-block !important
}
.bg-drop {
    content: '';
    position: fixed;
    top: 50px;
    z-index: 1;
    left: 0;
    height: 100vh;
    width: 100vw;
    pointer-events: auto;
    background: rgba(0,0,0,00.005);
}
.sum-notifi {
    position: absolute;
    top: 3px;
    right: 0;
    border: 1px solid #fff;
    border-radius: 10px;
    width: auto;
    height: 20px;
    padding: 0 5px;
    text-align: center;
    line-height: 20px;
    font-size: 11px;
    background: #eb4a24;
    color: #fff;
    border: none;
}
.op-tooltips {
    position: absolute;
    display: inline-block;
    padding: 3px 12px;
    background: #222831;
    top: 30px;
    left: 20px;
    border: 1px solid #ccc;
    box-shadow: 0 0 5px rgba(0,0,0,0.16);
    border-radius: 5px;
    color: white;
    transition-delay: 2s;
    transition-property: opacity;
    opacity: 0;
    cursor: pointer;
    z-index: -1;
}
.ch.tenhang.cmth:hover > .op-tooltips {
    display: inline-block;
    opacity: 1;
    z-index: 2;
}
.op-tooltips::after {
    content: "";
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #eb4a24;
    top: -5px;
    position: absolute;
    left: 25px;
}
.gara-loaibaocao > label {
    width: 100% !important;
}
    .gara-loaibaocao > label > input {
        margin-right: 10px;
    }
.boxLeft-title {
}
.title-report-center > span {
    width: 100%;
    float: left;
    text-align: center;
}
.result {
    display: none;
}
.active:not(td):not(button) {
    display: block;
}
.link-modal {
    cursor: pointer;
}
.modal-active {
    display: block
}
.table-title {
    border-radius: 5px;
    width: 30%;
}
.table-title-content {
    padding: 5px 15px 5px 0;
    text-align: center;
    font-size: 13px;
}
.title-info {
    font-size: 1rem;
    font-weight: 400;
    width: 100%;
    margin: inherit;
    text-align: center;
    margin-bottom: 10px;
}
.title-result {
    margin-bottom: 10px;
}
table tr.active {
    display: table-row !important
}
.add-customer .btn {
    z-index: 9;
}
textarea:focus {
    outline: none;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
    border: 1px solid #66afe9;
}
.choose-img.floatleft .btn-file {
    background: var(--color-main);
    color: white;
}
.page > div {
    min-height: 24px;
}
.page div.flex-end:first-child {
    width: 100%;
}
.page label {
    white-space: nowrap;
    line-height: 24px;
    padding: 3px;
    margin: 0;
}
.page select {
    line-height:18px;
    padding:3px;
    width:100px;
    text-align:left

}
.menuRadio .last label {
    float: left;
    padding-right: 20px;
    line-height: 24px;
    margin: 0;
    position: relative;
    transform: translateY(-2px);
}
.tr-prev-hide.bggray.active > td {
    border-top: 1px solid var(--color-primary) !important;
    border-bottom: none;
}
    .tr-prev-hide.bggray.active > td:first-child {
        border-left: 1px solid var(--color-primary);
    }
    .tr-prev-hide.bggray.active > td:last-child {
        border-right: 1px solid var(--color-primary);
    }

.tr-prev-hide.active > td {
    border-top: 1px solid var(--color-primary) !important;
    border-bottom: none;
}

    .tr-prev-hide.active > td:first-child {
        border-left: 1px solid var(--color-primary);
    }

    .tr-prev-hide.active > td:last-child {
        border-right: 1px solid var(--color-primary);
    }

.op-js-tr-hide.active > td {
    border-width: 0 1px 1px 1px;
    border-style: solid;
    border-color: var(--color-primary);
}
.break-words {
    height: auto;
    white-space: pre-wrap;
}
.dropdown-mauin {
    position: relative;
}
    .dropdown-mauin > .dropdown-menu {
        max-height: 150px;
        overflow: auto;
        width: 200px;
        padding: 0;
        border: none;
        overflow: auto;
        right: 0;
        left: unset;
        background: var(--color-primary);
        box-shadow: 0 3px 10px rgba(0, 0, 0,0.15);
        color: white;
        border-radius: 0
    }
        .dropdown-mauin > .dropdown-menu > li {
            width: 100%;
            padding: 0;
            text-align: left;
            border-bottom: 1px solid #ccc;
        }
            .dropdown-mauin > .dropdown-menu > li > a {
                color: white;
                line-height: 14px;
                padding: 7px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                margin: 0;
            }
            .dropdown-mauin > .dropdown-menu > li:hover > a, .dropdown-mauin > .dropdown-menu > li:focus > a {
                color: white;
                background: rgba(0,0,0,0.15)
            }
.table-row-function {
    display: flex;
    justify-content: flex-end;
    max-width: 100vw;
    flex-wrap: wrap;
}
.dropdown-menu-split {
    right: 0px;
    display: block;
    width: min-content;
    max-width: unset;
    max-width: unset;
}
.collumn-filter {
    display: inline-block;
    position: relative;
}
    .collumn-filter > .dropdown-list {
        position: absolute;
        left: unset !important;
        right: 0
    }
.css-form-detail > span:not(.commodity-note) {
    width: 100%;
    display: inline-block;
    white-space: pre-wrap;
}
.css-form-detail > span:not(.commodity-notev2) {
    width: 100%;
    display: inline-block;
    white-space: pre-wrap;
}
.css-form-label {
    width: 130px;
    display: inline-block;
    line-height: 24px;
    margin: 0;
    font-weight: normal;
}
.modal-body .css-form-label {
    width: 130px;
}
.modal-body .css-form-detail {
    width: calc(100% - 130px);
}
.css-form-detail {
    width: calc(100% - 130px);
    display: inline-block;
    line-height: 24px;
}
.content-tree-user {
    max-height: 400px;
    overflow: auto;
}
.daterangepicker td.start-date.end-date {
    border-radius: 4px;
    height: 30px;
}
.daterangepicker .calendar th, .daterangepicker .calendar td {
    white-space: nowrap;
    text-align: center;
    min-width: 32px;
    height: 30px;
    line-height: 24px;
    padding: 3px;
    border: none;
}
.group-p1 > label {
    width: 100%;
    display: flex;
}
.bill-control.btn-group button {
    padding: 15px 25px;
    color: white;
    font-weight: normal;
    font-size: 16px;
    min-width: 30%;
    line-height: 24px;
    height: 50px;
}
.detail-label-input {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.form-group.detail-label-input .form-news {
    width: calc(100% - 100px);
}
.col-md-12.nopadding.thong-tin-chinh-tri > div {
    padding-right: 0;
}
.fade {
}
.op-form-checkbox {
    position: relative;
    line-height: 24px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 0;
    width: 100%;
}
label.op-form-checkbox > * {
    margin: 0 15px 0 0;
}
.form-group {
    position: relative;
    display: flex;
    align-items: flex-start;
}
a.import-function {
    padding: 3px;
    height: 30px;
    width: 30px;
    font-size: 16px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #686868;
}
    a.import-function:hover {
        border-radius: 50%;
        background: #ccc;
    }
.a-close {
}
.daterangepicker {
    display: none;
}
.daterangpciker-additional-input {
    position: relative;
}
    .daterangpciker-additional-input i {
        position: absolute;
        top: 7px;
        right: 7px;
    }
.filter-list-2 {
    width: 340px;
    right: 0;
}
    .filter-list-2 > ul {
        width: 340px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
        .filter-list-2 > ul > li {
            width: 170px;
            display: inline-block
        }
.arrow-popup-left-top {
    right: unset;
    left: 0
}
    .arrow-popup-left-top:after {
        left: 15px;
        right: unset;
        top: -5px;
    }
    .arrow-popup-left-top:before {
        left: 14px;
        right: unset;
        top: -6px;
    }
.input-simple {
    line-height: 24px;
    min-height: 30px;
    box-shadow: none;
    border: none;
    border-bottom: 1px solid #ccc;
    padding: 3px;
    min-width: 50px;
    border-radius: 0;
    background: none;
}
    .input-simple:focus {
        box-shadow: none !important;
    }
.input-note {
    line-height: 14px;
    min-height: unset;
    text-align: left;
    font-size: 10px;
    padding-bottom: 0;
    width: 100%;
    padding: 0;
    line-height: 14px;
    position: absolute;
    bottom: -1px;
    text-align: left;
    border: none;
    display: block;
    transition: all 0.4s ease;
}
    .input-note:focus {
        border-color: var(--color-primary);
    }
.height-24 {
    height: 24px !important
}
.gara-tab-detail .form-group {
    border-bottom: 1px solid #ccc;
    padding-bottom:3px;
}
.ui-menu-item div {
    width: 100%;
    border: none;
    line-height: 18px;
    padding: 0;
}
.op-header {
    display: flex;
    flex-direction: column;
    position: relative;
}
    .op-header > div {
        margin-bottom: 5px;
    }
.op-header {
    display: flex;
    flex-direction: column;
    position: relative;
}
.op-header-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 18px;
    margin: 0;
}
    .op-header-title h2 {
        display: flex;
        margin: 0 !important;
        line-height: 24px;
        padding: 3px 0;
        font-size: 20px;
        font-weight: bold;
        color: black;
    }
    .op-header-title > .search-filter {
        width: 30px;
        position: relative;
        height: 30px;
        padding: 3px;
        line-height: 24px;
        color: var(--color-primary);
    }
.op-header-button {
    display: flex;
    flex-direction: row;
}
.header-button-left {
    margin: 0;
    display: flex;
    flex-direction: row;
    float: unset;
    align-items: center;
}
    .header-button-left > * {
        margin-right: 4px;
        position: relative
    }
.input-search-filter {
    position: relative;
}
.header-button {
    display: flex;
    flex-direction: row;
}
th.check-group.check-group-main {
    text-align: center;
    padding: 3px 10px;
}
td.check-group {
    padding: 3px 10px !important;
}
.op-header-button > * {
    position: relative;
}
.font-10 {
    font-size: 10px;
}
.font-12 {
    font-size: 1rem;
}
.font-14 {
    font-size: 1rem !important;
}
.font-18px {
    font-size: 13px;
}
.font-24 {
    font-size: 24px;
}
.font-32 {
    font-size: 32px;
}
.font-42 {
    font-size: 42px;
}
.text-align-centet {
    text-align: center
}
.flex-between {
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap
}
.flex-evenly{
    justify-content:space-evenly
}
.flex-around {
    justify-content: space-around
}
.flex-center {
    justify-content: center
}
.align-items-center {
    align-items: center
}
.border-bottom-default {
    border-bottom: 1px solid #ccc
}
.bg-main-color {
    background: var(--color-primary)
}
.font-main-color {
    color: var(--color-primary)
}
.flex {
    display: flex
}
.flex-row {
    flex-direction: row;
}
.flex-wrap {
    flex-wrap: wrap;
}
.flex-end {
    justify-content:flex-end
}
.flex-column {
    flex-direction: column
}
.position-relative {
    position: relative;
}
.position-absolute {
    position: absolute;
}
.permission-choose.floatleft h3 {
    font-size: 16px;
    line-height: 24px;
    padding: 3px;
    align-items: center;
    display: flex;
    align-items: flex-start;
    padding: 3px 3px 3px 10px;
}
    .permission-choose.floatleft h3 label {
        line-height: 24px;
        margin: 0;
        padding: 3px;
    }
op.main-role > ul {
    display: flex;
    flex-direction: row;
}
op.main-role ul li {
    width: 33% !important;
}
.op-main-role {
    width: 100%;
}
    .op-main-role h4 {
        background: #d6d6d6;
        padding: 3px 3px 3px 12px;
        display: flex;
        align-items: center;
        line-height: 24px;
        margin: 0;
        border-radius: 4px 4px 0 0;
    }
        .op-main-role h4 label {
            line-height: 18px;
            margin: 0;
            font-size: 15px;
        }
.btn > i.fa-angle-double-down {
    font-size: 16px;
    margin: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-restaurant:before, .bnt-Sale:before {
    content: "";
    background-image: url('/Content/images/icon thu ngân.png');
}
i.btn-Sale:before {
    content: '';
    background-image: url('/Content/images/icon thu ngân.png');
    height: 24px;
    width: 24px;
    position: absolute;
    top: 3px;
    left: 7px;
}
::before {
}
i.bnt-Cashier {
    position: relative;
    display: inline-block !important
}
.btn-restaurant, .bnt-Sale {
    display: inline-block !important;
}
.css-form-detail label {
    margin: 0;
}
.op-input-group > *:last-child:not(i):not(span) {
    border: 1px solid #ccc;
    border-radius: 0 4px 4px 0;
    margin-left: -2px;
    position: unset;
    top: unset;
    right: unset;
    left: unset;
}
.op-input-group {
    display: flex;
    flex-direction: row;
    position: relative
}
    .op-input-group > *:first-child {
        border-radius: 4px 4px;
    }
    .op-input-group > i.fa-search, .op-input-group > i.fa-calendar {
        position: absolute;
        right: 7px;
        top: 7px
    }
.op-loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 400px;
    position: fixed;
    top: 50%;
    left: calc(50% - 200px);
}
.ball {
    height: 20px;
    width: 20px;
    border-radius: 10px;
    background-color: rgba(12,162,239,1);
    animation: mymove 1500ms infinite;
}
.op-loading-title {
    margin-top: 15px;
}
@keyframes mymove {
    0% {
        background-color: rgba(12,162,239,1);
    }
    50% {
        background-color: rgba(244,157,31,1);
    }
    100% {
        background-color: rgba(12,162,239,1);
    }
}
.op-loading-ball {
    display: flex;
    flex-direction: row;
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    flex-direction: row;
    width: 100%;
}
.delay-1 {
    animation-delay: 300ms;
}
.delay-2 {
    animation-delay: 600ms;
}
.delay-3 {
    animation-delay: 900ms;
}
.delay-4 {
    animation-delay: 1200ms;
}
.btnImportCTG {
    min-width: 85px
}
.title-bill-total.bill-total-th > label {
    line-height: 24px;
    font-size: 13px;
    padding: 6px;
    height: 30px;
    margin-bottom: 10px;
}
.op-vue-listsearchHH > li {
    padding: 6px;
    border-bottom: 1px dashed #d6d6d6;
}
    .op-vue-listsearchHH > li:hover {
        background: #f2f2f2;
    }
    .op-vue-listsearchHH > li > div {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
        .op-vue-listsearchHH > li > div > img {
            height: 50px;
            width: 50px;
            object-fit: cover;
            padding: 0;
            margin: 5px;
            border-radius: 3px;
        }
        .op-vue-listsearchHH > li > div > div.op-hh-detail {
            display: flex;
            flex-direction: column;
        }
.op-hh-detail > div {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap:wrap;
    align-items: center;
    line-height: 18px;
}
    .op-hh-detail > div > span {
        margin-right: 5px
    }
.op-input-search-add {
    display: flex;
    position: relative;
    padding: 10px 10px 0 10px;
}
    .op-input-search-add > i {
        position: absolute;
        top: 15px;
        left: 15px;
        width: 24px;
        height: 24px;
        color: #686868;
        font-size: 16px;
    }
    .op-input-search-add > input[type=text] {
        padding: 3px;
        padding-left: 30px;
        line-height: 24px;
        border: none;
        border-bottom: 1px solid #d6d6d6;
    }
    .op-input-search-add > .btn-add {
        position: absolute;
        width: 30px;
        line-height: 24px;
        padding: 3px !important;
        margin: 0;
        color: var(--color-primary);
        background: white;
        border: none;
        border-radius: 20px;
        transition: all 0.4s ease;
        right: 7px;
        top: 7px;
    }
        .op-input-search-add > .btn-add:hover {
            background: #f2f2f2;
        }
.op-banle-khachhang-button {
    position: absolute;
    top: 7px;
    right: 35px;
}
    .op-banle-khachhang-button > button {
        border: none;
        border-radius: 15px;
        height: 30px;
        width: 30px;
        padding: 3px !important;
        line-height: 24px;
        text-align: center;
        background: none;
    }
.op-banle-bang-gia {
    line-height: 24px;
    padding: 3px 9px;
    position: relative;
    width: 400px;
    max-width: 100vw;
}
.op-banle-function > a, .op-banle-function > div {
    color: #686868;
    display: inline-block;
    height: 30px;
    width: 30px;
    padding: 6px;
    margin: 0 0 0 3px;
    font-size: 15px;
    position: relative;
}
.op-banle-function {
    position: relative;
    z-index: 99;
    text-align: right;
}
.op-banle-khachhang {
    padding: 10px;
    line-height: 24px;
    height: 40px;
    width: 100%;
}
    .op-banle-khachhang > div > i {
        line-height: 24px;
        margin-right: 5px
    }
    .op-banle-khachhang > div > a {
        font-size: 14px;
        font-weight: bold
    }
.price.price_2 {
    line-height: 24px;
    height: 30px;
}
    .price.price_2 > * {
        margin: 0 3px !important;
        line-height: 24px;
        padding: 3px;
    }
.daterangepicker {
    z-index: 99999999999999;
}
.product-description .trangthai {
    display: block !important;
}
.thumb-product i, .thumb-product small, .thumb-product label {
    display: inline-block !important;
}
.header-panel {
    width: 100%;
}
.align-items-center {
    align-items: center
}
.op-tab > a {
    line-height: 24px;
    padding: 3px 7px;
    border-radius: 3px;
    color: black;
    width: 49%;
    text-align: center;
}
    .op-tab > a.active {
        background: #d6d6d6;
        font-weight: bold;
        white-space: nowrap
    }
.op-search {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
    position: relative;
}
.op-search-container {
    position: relative;
    width: 100%;
}
    .op-search-container > input {
        padding-left: 30px;
        width: 100%;
        padding-right: 30px;
    }
    .op-search-container > i {
        position: absolute;
        left: 7px;
        top: 7px
    }
.op-search-button {
    display: flex;
    position: absolute;
    right: 0;
    top: -1px;
}
.dot {
    display: inline-block;
    height: 10px;
    width: 10px;
    border-radius: 10px;
    background: #ccc;
    margin-right: 5px;
}
    .dot.active {
        background: var(--color-primary);
        box-shadow: 3px 3px 6px rgba(0,0,0,0.15)
    }
.op-btn-add, .op-btn-edit {
    line-height: 24px;
    background: inherit;
    text-align: center;
    padding: 3px !important;
    width: 30px;
    height: 30px;
    transition: all 0.4s ease;
}
.op-btn-edit {
    opacity: 0
}
    .op-btn-edit > i, .op-btn-add > i {
        min-width: 24px;
        text-align: center;
        margin-right: 0
    }
    .op-btn-add:hover, .op-btn-add:focus, .op-btn-edit:hover, .op-btn-edit:focus {
        border-radius: 15px;
        background: #f2f2f2
    }
.op-search-list li:hover button {
    opacity: 1;
}
.op-search-list li {
    border-bottom: 1px solid white;
    transition: all 0.4s ease;
    line-height: 24px;
    min-height: 30px;
    padding-left: 5px;
}
ul.op-search-list > li > span {
    align-items: center;
    line-height: 24px;
    padding: 3px;
    min-height: 30px;
    width: calc(100% - 31px);
}
.op-search-list li:hover {
    border-bottom: 1px solid var(--color-primary)
}
.op-panel {
    height: calc(100% - 40px);
}
ul.op-search-list {
    height: calc(100% - 50px);
}
.op-btn {
    line-height: 24px;
    background: inherit;
    text-align: center;
    padding: 3px !important;
    width: 30px;
    height: 30px;
    transition: all 0.4s ease;
}
.op-role-main {
    padding: 7px;
}
.op-role-sub {
}
.op-role-item {
}
.op-role-main > div {
    background: #d6d6d6;
    padding-left: 15px;
}
    .op-role-main > div > label {
        font-weight: bold
    }
.op-role-sub > div > label {
    font-weight: normal
}
.op-role-item > div > label {
    font-weight: normal
}
.op-role-item {
    position: relative;
    line-height: 24px;
    padding-left: 13px;
}
li.op-role-item:after {
    content: '';
    position: absolute;
    top: -6px;
    left: -6px;
    height: 100%;
    width: 10px;
    background: none;
    z-index: -1;
    border-left: 1px dotted #ccc;
    border-top: none;
    border-right: none;
}
li.op-role-item:before {
    border-bottom: 1px dotted #ccc;
    top: 12px;
    content: '';
    width: 17px;
    position: absolute;
    left: -6px;
}
li.op-role-item:last-child:after {
    height: 18px;
}
li.op-role-sub > div {
    padding-left: 9px;
}
li.op-role-sub {
    position: relative;
}
    li.op-role-sub:after {
        content: '';
        height: 100%;
        border-left: 1px dotted #Ccc;
        position: absolute;
        top: 15px;
        left: -5px;
        width: 0;
    }
    li.op-role-sub:before {
        content: '';
        border-bottom: 1px dotted #CCc;
        position: absolute;
        top: 15px;
        width: 15px;
        left: -5px;
    }
.op-role-main ul > li.op-role-sub:last-child:after {
    border-left: none;
}
.op-role-main ul > li.op-role-sub:first-child:after {
    height: calc( 100% + 15px);
    top: 0;
}
.op-resp-tab {
}
.op-img-staff {
    width: 300px;
    padding: 25px
}
    .op-img-staff img {
        width: 250px;
        height: 250px;
    }
.width-75 {
    width: 75px;
}
.width-75 {
    width: 100px;
}
.width-125 {
    width: 125px;
}
.width-150 {
    width: 150px;
}
.op-advertisements {
    position: fixed;
    bottom: 0;
    left: 0;
}
.op-thongtinlo {
}
    .op-thongtinlo span {
        margin-right: 5px;
        line-height: 24px;
    }
.op-thongtinlo {
}
.import-dropbox.drop-box-arrow-up {
    display: none;
    position: absolute;
    background: white;
    z-index: 2;
    border: 1px solid #ccc;
    padding: 5px;
    right: 0;
    top: 30px;
    line-height: 30px;
    box-shadow: 3px 3px 10px rgb(0 0 0 / 15%);
}
.input-options.picked {
    border: 1px solid var(--color-primary) !important;
    background-color: var(--color-primary) !important;
    color: white !important;
}
.import-dropbox a.input-options {
    font-size: 12px;
    min-width: 30px;
    text-align: center;
    margin: 0 3px;
    border-radius: 2px;
}
li.hover-round {
    height: 40px;
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}
    li.hover-round > a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        text-align: center;
    }
.header-top li.branch-li {
    height: 40px;
    line-height: 30px;
    padding: 5px;
}
.op-header-tool {
    float: right;
    height: 40px;
}
    .op-header-tool > ul > li > div > a > i {
        color: white;
        font-size: 22px;
    }
    .op-header-tool > ul {
    }
    .op-header-tool > ul {
    }
    .op-header-tool a.btn-md {
        height: 40px;
        display: flex;
        min-width: 40px;
        text-decoration: none !important;
        padding: 5px;
        align-items: center;
    }
.logo-24 {
    display: inline-block;
    width: auto;
    cursor: pointer;
    margin-right: 30px;
    float: left;
    padding: 5px;
    margin: 0 15px;
}
ul.chinhanh {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    height: 40px;
}
    ul.chinhanh > li {
        position: relative;
    }
.menu-horizontal {
    display: flex;
    justify-content: space-between;
    position: relative;
    justify-content: space-between;
}
.navbar-nav > li > a > font {
    padding: 7px;
    line-height: 24px;
    padding: 0;
}
.menu-horizontal:before, .menu-horizontal:after {
    content: none;
}
.animation-flash:before {
}
a.animation-flash:before, a.animation-flash:after {
    content: '';
    height: 5px;
    width: 5px;
    position: absolute;
    top: 47%;
    left: 18px;
    border-radius: 5px;
    background: none;
}
a.animation-flash:after {
    left: 27px;
}
a.animation-flash:hover:before,
a.animation-flash:hover:after {
    box-shadow: 0 0 4px yellow;
    background: yellow;
}
.input-group-btn > .btn {
    position: relative;
    border: 1px solid #ccc !important;
    height: 30px;
}
/*.dropdown-menu {
    max-height: 250px;
    overflow: visible;
}*/
a.thongtinlo {
    border-bottom: 1px dotted #ccc;
}
.thongtinlo span.badge {
    min-width: 50px;
}
.bg-green {
    background: green;
}
.bg-warned {
    background-color: #f0ad4e;
}
.import-option-lohang > div > span {
    margin-right: 5px;
}
tr.op-js-tr-hide td {
    padding: 0;
}
tr.op-js-tr-hide > td {
    padding: 0 !important;
}
tr.tr-hide > td {
    padding: 0 !important;
}
.cursor-waiting {
    pointer-events: none !important;
    cursor: wait;
}
.right-0 {
    left: unset;
    right: 0
}
tr.trNoborder td {
    border-bottom: none !important;
}
tr.trNoborder + tr > td {
    background: white;
}
i.op-soquy-plus {
    content: '';
    height: 15px;
    background-image: url(../Content/images/icon/op-soquy-plus.svg);
    display: inline-block;
    background-size: 100% 100%
}
i.op-soquy-minus {
    content: '';
    height: 15px;
    background-image: url(../Content/images/icon/op-soquy-minus.svg);
    display: inline-block;
    background-size: 100% 100%
}
.op-gdct {
    height: calc(100vh - 80px);
    display: flex;
    align-items: flex-start;
}
.op-gdct-title {
    font-size: 18px;
    line-height: 24px;
    height: 30px;
    padding: 3px 0
}
.op-gdct-thongtinphieu {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    padding: 10px;
    box-shadow: -6px -6px 10px rgb(0 0 0 / 25%);
    height: calc(100vh - 81px);
    width: 400px;
    /*padding-bottom: 15px;*/
    border-left-color: #ccc;
}
.op-gdct-danhsachhang {
    width: calc(100% - 400px);
    float: left;
    padding-left: 20px;
    padding-right: 15px;
    padding: 15px;
    height: inherit;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 80px);
    width: calc(100vw - 400px);
}
tr.tr-noborder > td {
    border-bottom: none !important;
}
.tr-noborder:hover + tr > td {
    background: rgba(19, 116, 173,0.06)
}
.op-dropdialog {
    display: none;
    position: absolute;
    left: unset;
    top: 100%;
    right: 0;
    padding: 10px;
    z-index: 2;
    background: white;
    border: 1px solid white;
    box-shadow: 3px 3px 10px rgba(0,0,0,0.25);
    border-radius: 7px;
}
    .op-dropdialog:before, .op-dropdialog:after {
        content: "";
        position: absolute;
        top: -11px;
        right: 9px;
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid #ccc;
    }
    .op-dropdialog:after {
        border-bottom: 10px solid white;
        top: -10px;
    }
.op-forminput-group {
    position: relative;
    display: flex;
    flex-direction: row;
}
    .op-forminput-group > div > button {
        border: 1px solid #ccc;
        border-radius: 0;
        height: 30px;
    }
        .op-forminput-group > div > button:last-child {
            border-radius: 0 3px 3px 0;
        }
.op-form-group > button {
    border-radius: 0;
    border: 1px solid #ccc !important;
    height: 30px;
    margin-left: -2px;
}
    .op-form-group > button:last-child {
        border-radius: 0 3px 3px 0;
        height: 30px;
        margin-left: -2px;
        border: 1px solid #ccc !important;
    }
.showImageList {
    max-width: 500px;
}
.op-search-list {
    max-width: 400px;
}
ul.gara-search-dropbox img {
    border: 1px solid #ccc;
    padding: 3px;
    width: 100px;
    height: 50px;
    margin-right: 10px;
    object-fit: cover;
}
.op-hh-detail {
    width: 100%;
}
.gara-search-HH + .gara-search-dropbox {
    top: 30px;
    left: 0;
    overflow: auto;
    max-height: 450px;
}
.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
    padding: 3px 8px;
    line-height: 24px;
    vertical-align: top;
    border-top: 1px solid #ddd;
}
.modal-footer {
    border: none;
}
.op-innertable-box {
    background: #e6e6e6;
    border-top:none;
    float:left;
}
    .op-innertable-box .nav.nav-tabs {
        background: #e6e6e6;
        float: left;
        width: 100%;
        padding-left: 10px;
    }
    .op-innertable-box .tab-content {
        background: white;
        float: left;
        width: 100%;
    }
#MainLayout .op-object-detail {
    float: left;
    max-width: calc(100vw - 284px);
    min-width: 375px;
    padding: 0;
    width: 100%;
}
#MainLayout:not(.expanded) .op-object-detail {
    max-width: calc(100vw - 80px);
}
#MainLayout:not(.expanded) div.modal .op-object-detail {
    max-width: 100%;
}
#MainLayout.expanded .op-object-detail {
    max-width: calc(100vw - 284px);
}
.bg-op {
    position: fixed;
    height: 100vw;
    width: 100vw;
    top: 0;
    left: 0;
    background: rgba(0,0,0,.15);
    z-index: 99;
}
/*.op-object-detail .nav-tabs > li.active > a, .op-object-detail .nav-tabs > li.active > a:focus, .op-object-detail .nav-tabs > li.active > a:hover {
    background:white;
    border: none;
}*/
.op-innertable-box .nav-tabs li.active > a {
    background: white;
}
@media (min-width: 1280px) {
    .modal-lgmax {
        width: 1043px;
    }
}
.nav-tabs {
    border-bottom: 1px solid #ddd;
    float: left;
    width: 100%;
    margin-bottom: 5px;
    padding: 5px 5px 0 5px;
}
.modal .form-group >label{
    width:130px
}
.not-visible-scrollbar::-webkit-scrollbar {
    width: 0;
    height: 0;
}
.open > .dropdown-menu {
    display: block !important;
}
.page button,
.page a {
    line-height: 18px;
    padding: 3px;
    min-width: 20px;
    margin: 3px;
    background: none;
}
.page-description {
 max-width:100%;
 white-space:pre-wrap
}
.page-description > * {
    margin-right: 1ch;
    white-space: nowrap;
}
.op-object-detail > .nav-tabs {
    background: #e6e6e6;
}
button.btn.btn-main.op-filter-toggle > i {
    font-size: 24px;
    line-height: 24px;
    height: 24px;
}
.op-ck-left {
    min-width: 275px;
    max-width: 275px;
    padding: 5px;
}
.op-ck-right {
    width: calc(100% - 275px);
    padding: 5px
}
@media (max-width:1024px) {
    .modal-body {
        max-height: unset !important;
    }
    .tab-nhan-vien-chiet-khau.tab-news-modal.flex.flex-row {
        flex-wrap: wrap;
    }
    .op-ck-left {
        width: 100% !important;
        padding: 5px;
        max-width: unset;
    }
    .op-ck-right {
        width: 100% !important;
        padding: 5px;
        max-width: unset;
    }
}
@media (max-width:510px) {
    .modal-dialog{
        margin-bottom:50px; /*prevent display behind  menu*/
    }
    .op-ck-left {
        width: 100% !important;
        max-width:unset;
        padding: 5px
    }
    .op-ck-right {
        width: 100% !important;
        max-width: unset;
        padding: 5px
    }
}
.modal-fullscreen .modal-content {
    height: 100vh;
}
.modal-fullscreen {
    width: 100vw;
    height: 100vh;
    margin: 0;
    top: 0 !important;
    left: 0 !important;
}
.op-ImageModal-content li {
    display: none;
    text-align: center
}
    .op-ImageModal-content li.actived {
        display: block;
    }
    .op-ImageModal-content li image {
        max-height: 50vh
    }
.op-ImageModal-prev, .op-ImageModal-next {
    position: absolute;
    top: 50%;
    font-size: 20px;
    background: none;
    width: 30px;
    text-align: center;
    line-height: 24px;
    transition: all 0.4s ease;
    padding: 3px;
}
.op-ImageModal-next {
    right: 0;
}
.op-ImageModal-prev {
    left: 0;
}
div#opModalImage .modal-content .modal-body, #opModalImage .modal-header, #opModalImage .modal-content {
    background: black;
}
.op-ImageModal-prev:hover, .op-ImageModal-next:hover {
    background: rgba(0,0,0,0.15);
    border-radius: 15px;
}
.op-ImageModal-slide {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: flex-start;
    max-width: 800px;
    margin: unset;
    overflow: scroll
}
    .op-ImageModal-slide li.actived {
        background: rgba(255,255,255,0.15)
    }
    .op-ImageModal-slide-control {
        background: rgba(255,255,255,0.15);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px;
        margin: 5px;
        margin-bottom: 13px;
        color: initial;
    }
    .op-ImageModal-slide-control i {
        color: white;
        font-size: 20px;
    }
.op-ImageModal-slide::-webkit-scrollbar-thumb {
    background: white;
}
.op-ImageModal-slide li.actived img {
    opacity: 1;
}
.op-ImageModal-slide img {
    height: 100px;
    width: 100px;
    margin: 5px;
    opacity: 0.5;
}
.modal-body.modal-body-scroll {
    overflow: auto;
    max-height: 80vh;
}
.css-btn-right {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    max-height:30px;
    width: 30px;
    padding: 3px;
    line-height: 24px;
    text-align: center;
    background: transparent;
    margin: 0;
}
    .css-btn-right:focus{
        outline:none;
    }
    .css-btn-right > i.fa {
        font-size: 14px;
    }
    .css-btn-right > i.material-icons {
        font-size: 18px;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
.css-img-HH {
    width: 175px;
    height: 175px;
    background: white;
    padding: 2px;
    border: 1px dotted #ccc;
    border-radius: 5px;
    position: relative
}
    .css-img-HH img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .css-img-HH .css-img-HH-delete {
        position: absolute;
        width: 30px;
        height: 30px;
        top: 1px;
        right: 1px;
        background: rgba(0,0,0,.15);
        /* display: flex; */
        /* align-items: center; */
        /* justify-content: center; */
        font-size: 18px;
        text-align: center;
    }
.css-img-HH-file {
    color: #fff;
    vertical-align: bottom;
    height: 30px;
    width: 174px;
    display: inline-block;
}
.css-img-HH.css-img-large {
    width: 225px;
    height: 200px;
}
.css-img-HH.css-img-small {
    width: 100%;
    height: 100px;
}
.btn-tab {
    height: 35px;
    width: 120px;
    border: none;
    margin-left: 0;
    background: inherit;
}

    .btn-tab:hover {
        background: #ebebeb
    }

.btn-tab {
    border-bottom: 4px solid buttonface;
}

    .btn-tab.active {
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        border-bottom: 4px solid #ee6002 !important;

    }
.dropdown-menu li> a {
    margin: 0;
    padding: 3px 10px;
    line-height: 24px;
}
.dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover{
    background:inherit
}
ul.op-list-tree li ul > li:last-child:before {
    height: calc(94% - 30px);
    min-height: 30px;
}

ul.op-list-tree li > div.showed + ul {
    display: block;
}

ul.op-list-tree li > div.showed > button > i {
    transform: rotate(-180deg);
}

ul.op-list-tree li > div > button > i {
    transform: rotate(0);
    transition: all 0.4s ease;
}

ul.op-list-tree li > div > button {
    position: absolute;
    left: unset;
    right: 0;
    width: 30px;
    height: 30px;
    background: none;
    font-size: 16px;
}

ul.op-list-tree ul {
    padding-left: 20px;
}

ul.op-list-tree li > div {
    line-height: 18px;
    display: flex;
    align-items: center;
    padding: 4px;
    width: inherit;
}

    ul.op-list-tree li > div > input[type='radio'] {
        width: 20px;
        /* display: flex; */
        /* align-items: center; */
        /* background: red; */
        margin-right: 5px;
        display: inline-block;
    }

ul.op-list-tree li:before {
    content: '';
    height: calc(100% - 1px);
    left: -7px;
    position: absolute;
    top: -12px;
    width: 1px;
    border-left: 1px dotted #ccc;
}

ul.op-list-tree li:after {
    content: '';
    width: 15px;
    left: -7px;
    position: absolute;
    top: 17px;
    /* width: 1px; */
    border-bottom: 1px dotted #ccc;
}

ul.op-list-tree > li::after, ul.op-list-tree > li:before {
    content: none
}

ul.op-list-tree li {
    position: relative;
    flex-direction: column;
}

    ul.op-list-tree li ul {
        position: relative;
        /*display: none*/
    }
ul.chose_kieubang li a label {
    width: calc(100% - 30px);
}

ul.chose_kieubang li a {
    width: 100%;
    display: flex;
}
ul.chose_kieubang li a {
    width: 100%;
    display: flex;
    cursor: pointer;
}
    ul.chose_kieubang li a > * {
        margin: 0;
        padding: 3px;
    }

:root{
    --font-awesome:''
}
/*==========================================layout==========================================*/
body {

}
html{

}
/*==========================================link, button==========================================*/
a, button{

}
/*==========================================input==========================================*/
input[type=text]{

}
input[type=radio] {
    position: relative;
    height: 20px;
    width: 20px;
    -webkit-appearance: none;
    -moz-appearance: none;
    display: flex;
    align-content: center;
    justify-content: center;
    margin: 2px;
}
    input[type=radio]:after {
        content: '\f111';
        font-family: 'Font Awesome 5 Pro';
        color: var(--color-primary);
        font-weight: normal;
        position: absolute;
        top:0px;
        font-size:13px;
        line-height:20px
    }
    input[type=radio]:checked:after {
        content: '\f111';
        font-weight:bold;
    }
    input[type=radio]:focus{
        outline:1px dotted #ccc
    }
    input[type=radio]:disabled{
        pointer-events:none
    }
    input[type=checkbox] {
    }
/*==========================================form==========================================*/
.op-search {
    max-width: 400px;
    position: relative;
    cursor: pointer;
    min-width: 352px;
}

    .op-search > .op-search-input, .op-search > input {
        width: 100%;
        border: 1px solid #ccc;
        border-radius: 3px 0 0 3px;
        background: white;
        line-height: 24px;
        padding: 3px 24px;
        transition: all 0.4s ease;
        height: 30px;
    }

        .op-search > .op-search-input:focus, .op-search > input:focus {
            box-shadow: 3px 3px 6px rgba(0,0,0,.15);
            border-color: var(--color-primary);
            border-radius: 3px;
        }

    .op-search > .op-search-icon {
        position: absolute;
        top: 7px;
        left: 7px;
    }

    .op-search .op-search-icon.material-icons {
        font-size: 18px;
    }

    .op-search .op-search-icon.fa {
        font-size: 14px;
    }

    .op-search .material-icons {
        font-size: 18px;
    }

    .op-search .fa {
        font-size: 15px;
    }

    .op-search > button.op-search-button {
        position: absolute;
        right: -1px;
        top: 0;
        height: 30px;
        width: 40px;
        background: var(--color-main);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0 4px 4px 0;
        line-height: 24px;
        padding: 3px;
        font-size: 14px;
    }
/*==========================================style==========================================*/

.font-medium{

}
.font-12{
    font-size:12px;
}
.font-13 {
    font-size: 1rem;
}

.font-14 {
    font-size: 14px;
}

.font-16 {
    font-size: 16px;
}

.font-18 {
    font-size: 18px;
}

.font-20 {
    font-size: 20px;
}

.width-75 {
    width: 75px;
}

.width-100 {
    width: 100px;
}

.width-125 {
    width: 125px;
}

.width-150 {
    width: 150px;
}

.width-125 {
    width: 125px;
}

.width-150 {
    width: 150px;
}

.width-200 {
    width: 200px;
}

.width-250 {
    width: 250px;
}

.m-15 {
    margin: 15px;
}
.mr-15 {
    margin-right: 15px;
}
.ml-15 {
    margin-left: 15px;
}
.mt-15 {
    margin-top: 15px;
}
.mb-15 {
    margin-bottom: 15px;
}
/*==========================================color==========================================*/
.red{
    color:red;
}
.green {
    color: green;
}
.blue {
    color: deepskyblue;

}
.black{
    color:black;
}
.white{
    color:white
}
.gray{
    color:gray;
}
/*==========================================element==========================================*/
/*label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 0;
    line-height: 24px;
    font-weight: 700;
    padding: 3px;
}*/